UNPKG

@oslokommune/punkt-elements

Version:

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

1 lines 2.81 kB
const e=require(`./element-DjtxO-1r.cjs`);var t=class extends e.n{constructor(...e){super(...e),this.size=void 0,this.level=2,this.weight=void 0,this.visuallyHidden=!1,this.align=void 0}connectedCallback(){super.connectedCallback(),this.setAttribute(`role`,`heading`),this.setAttribute(`aria-level`,String(this.level)),this.updateHostClasses()}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),e===`level`&&n&&this.setLevel(Number(n)),e===`visuallyHidden`&&(this.visuallyHidden=n!==null&&n!==`false`),(e===`size`||e===`visuallyHidden`||e===`align`||e===`weight`)&&this.updateHostClasses()}updated(e){super.updated(e),e.has(`level`)&&(this.setLevel(this.level),this.hasAttribute(`size`)||(this.size=this.defaultSizeForLevel),this.hasAttribute(`weight`)||(this.weight=this.defaultWeightForLevel)),!this.hasAttribute(`size`)&&(e.has(`level`)||this.size===void 0)&&(this.size=this.defaultSizeForLevel),(e.has(`size`)||e.has(`visuallyHidden`)||e.has(`align`)||e.has(`weight`))&&this.updateHostClasses()}setLevel(e){e>=1&&e<=6?(this.level=e,this.setAttribute(`aria-level`,String(e))):console.warn(`Invalid heading level: ${e}. Must be between 1 and 6.`)}get defaultSizeForLevel(){switch(this.level){case 1:return`xlarge`;case 2:return`large`;case 3:return`medium`;case 4:return`small`;case 5:return`xsmall`;case 6:return`xsmall`;default:return`medium`}}get defaultWeightForLevel(){switch(this.level){case 1:return`regular`;case 2:return`regular`;case 3:return`medium`;case 4:return`medium`;case 5:return`medium`;case 6:return`medium`;default:return`medium`}}updateHostClasses(){this.classList.remove(`pkt-heading`,`pkt-heading--xsmall`,`pkt-heading--small`,`pkt-heading--medium`,`pkt-heading--large`,`pkt-heading--xlarge`,`pkt-sr-only`,`pkt-heading--start`,`pkt-heading--center`,`pkt-heading--end`,`pkt-heading--light`,`pkt-heading--regular`,`pkt-heading--medium`,`pkt-heading--bold`),this.classList.add(`pkt-heading`),this.size&&this.classList.add(`pkt-heading--${this.size}`),this.weight&&this.classList.add(`pkt-heading--fw-${this.weight}`),this.visuallyHidden&&this.classList.add(`pkt-sr-only`),this.align&&this.classList.add(`pkt-heading--${this.align}`)}render(){return e.d`<slot></slot>`}};e.r([e.s({type:String,reflect:!0})],t.prototype,`size`,void 0),e.r([e.s({type:Number,reflect:!0})],t.prototype,`level`,void 0),e.r([e.s({type:String,reflect:!0})],t.prototype,`weight`,void 0),e.r([e.s({type:Boolean,reflect:!0})],t.prototype,`visuallyHidden`,void 0),e.r([e.s({type:String,reflect:!0})],t.prototype,`align`,void 0);try{e.c(`pkt-heading`)(t)}catch{console.warn(`Forsøker å definere <pkt-heading>, men den er allerede definert`)}var n=t;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return n}});