@oslokommune/punkt-elements/dist/progressbar-Ca7pRjmt.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

const e=require(`./element-DjtxO-1r.cjs`),t=require(`./directive-CJ2giQBZ.cjs`),n=require(`./class-map-CJ-msbHs.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./ref-BaJ0mBT_.cjs`),i=require(`./utils-CM67Oudc.cjs`);var a=`important`,o=` !`+a,s=t.t(class extends t.n{constructor(e){if(super(e),e.type!==t.r.ATTRIBUTE||e.name!==`style`||e.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce((t,n)=>{let r=e[n];return r==null?t:t+`${n=n.includes(`-`)?n:n.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,`-$&`).toLowerCase()}:${r};`},``)}update(t,[n]){let{style:r}=t.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(n)),this.render(n);for(let e of this.ft)n[e]??(this.ft.delete(e),e.includes(`-`)?r.removeProperty(e):r[e]=null);for(let e in n){let t=n[e];if(t!=null){this.ft.add(e);let n=typeof t==`string`&&t.endsWith(o);e.includes(`-`)||n?r.setProperty(e,n?t.slice(0,-11):t,n?a:``):r[e]=t}}return e.u}}),c=class extends e.t{constructor(){super(),this.ariaLabel=null,this.ariaLabelledby=null,this.ariaValueText=null,this.ariaLive=`polite`,this.id=i.n(),this.role=`progressbar`,this.skin=`dark-blue`,this.statusPlacement=`following`,this.statusType=`none`,this.title=``,this.titlePosition=`left`,this.valueCurrent=0,this.valueMax=100,this.valueMin=0,this.labelWidth=0,this.progressbarId=this.id,this.computedAriaLabelledby=null,this.computedAriaValueText=``,this.labelRef=r.t(),this.progressBarRef=r.t()}firstUpdated(e){super.firstUpdated(e),this.setComputedValues(),this.syncAttributes()}updated(e){super.updated(e),e.has(`valueCurrent`)&&this.labelRef.value&&(this.labelWidth=this.labelRef.value.getBoundingClientRect().width||0),e.has(`id`)&&this.id&&(this.progressBarId=this.id),(e.has(`statusType`)||e.has(`id`)||e.has(`ariaLabelledby`))&&(this.progressbarId=this.id||i.n(),this.computedAriaLabelledby=this.ariaLabelledby||`${this.progressbarId}-title`),(e.has(`ariaValueText`)||e.has(`valueCurrent`)||e.has(`valueMax`))&&(this.computedAriaValueText=this.statusType===`fraction`&&!this.ariaValueText?`${this.valueCurrent} av ${this.valueMax-this.valueMin}`:this.ariaValueText||``),this.syncAttributes()}render(){let t=this.statusType!==`none`,i=this.valueMax-this.valueMin,a=this.valueCurrent/i*100,o=this.statusType===`fraction`?Math.round(a):Math.round((this.valueCurrent-this.valueMin)/(this.valueMax-this.valueMin)*100),c=`${this.valueCurrent} av ${i}`,l=n.t({"pkt-progressbar__bar":!0,[`pkt-progressbar__bar--${this.skin}`]:!!this.skin}),u=n.t({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":this.titlePosition===`center`}),d=n.t({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":this.statusPlacement===`center`}),f=n.t({"pkt-progressbar__status-placement--following":this.statusPlacement===`following`,"pkt-progressbar__status-placement--center":this.statusPlacement===`center`,"pkt-progressbar__status-placement--left":this.statusPlacement===`left`});return e.d` <div
      class="pkt-progressbar__container"
      .ref=${this.progressBarRef}
      style=${s({"--pkt-progress-label-width":`${this.labelWidth}px`,"--pkt-progress-width":`${o}%`})}
    >
      ${this.title?e.d`<p id=${`${this.progressBarId}-title`} class=${u}>${this.title}</p>`:e.l}

      <div class="pkt-progressbar__bar-wrapper">
        <div class=${l}></div>
      </div>

      ${t?e.d`<div class=${d}>
            <span class=${f} ${r.n(this.labelRef)}>
              ${this.statusType===`percentage`?`${o}%`:c}
            </span>
          </div>`:e.l}
    </div>`}setComputedValues(){this.progressbarId=this.id||i.n(),this.computedAriaLabelledby=this.ariaLabelledby||`${this.progressbarId}-title`,this.computedAriaValueText=this.statusType===`fraction`&&!this.ariaValueText?`${this.valueCurrent} av ${this.valueMax-this.valueMin}`:this.ariaValueText||``}syncAttributes(){this._handleAttribute(`aria-live`,this.ariaLive),this._handleAttribute(`aria-valuenow`,this.valueCurrent),this._handleAttribute(`aria-valuemin`,this.valueMin),this._handleAttribute(`aria-valuemax`,this.valueMax),this._handleAttribute(`aria-valuetext`,this.computedAriaValueText),this._handleAttribute(`aria-label`,this.ariaLabel),this._handleAttribute(`role`,this.role),this._handleAttribute(`aria-atomic`,`true`),this._handleAttribute(`id`,this.progressbarId),this.ariaLabel||this._handleAttribute(`aria-labelledby`,this.computedAriaLabelledby)}_handleAttribute(e,t){t==null||t===``?this.removeAttribute(e):this.setAttribute(e,String(t))}};e.r([e.s({type:String})],c.prototype,`ariaLabel`,void 0),e.r([e.s({type:String,reflect:!0})],c.prototype,`ariaLabelledby`,void 0),e.r([e.s({type:String,reflect:!0})],c.prototype,`ariaValueText`,void 0),e.r([e.s({type:String})],c.prototype,`ariaLive`,void 0),e.r([e.s({type:String,reflect:!0})],c.prototype,`id`,void 0),e.r([e.s({type:String})],c.prototype,`role`,void 0),e.r([e.s({type:String})],c.prototype,`skin`,void 0),e.r([e.s({type:String})],c.prototype,`statusPlacement`,void 0),e.r([e.s({type:String})],c.prototype,`statusType`,void 0),e.r([e.s({type:String,reflect:!0})],c.prototype,`title`,void 0),e.r([e.s({type:String})],c.prototype,`titlePosition`,void 0),e.r([e.s({type:Number,reflect:!0})],c.prototype,`valueCurrent`,void 0),e.r([e.s({type:Number})],c.prototype,`valueMax`,void 0),e.r([e.s({type:Number})],c.prototype,`valueMin`,void 0),e.r([e.o()],c.prototype,`labelWidth`,void 0),e.r([e.o()],c.prototype,`progressbarId`,void 0),e.r([e.o()],c.prototype,`computedAriaLabelledby`,void 0),e.r([e.o()],c.prototype,`computedAriaValueText`,void 0);try{e.c(`pkt-progressbar`)(c)}catch{console.warn(`Forsøker å definere <pkt-progressbar>, men den er allerede definert`)}var l=c;Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});