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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";const n=require("./class-map-BBG2gMX4.cjs"),e=require("./element-6DBpyGQm.cjs"),p=require("./state-DPobt-Yz.cjs"),h=require("./ref-iJtiv3o2.cjs"),b=require("./directive-C7oCP5Bh.cjs"),d=require("./stringutils-CkVRq4jP.cjs");require("./icon-B_ryAy4Q.cjs");/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const c="important",v=" !"+c,f=b.e(class extends b.i{constructor(l){var t;if(super(l),l.type!==b.t.ATTRIBUTE||l.name!=="style"||((t=l.strings)==null?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(l){return Object.keys(l).reduce((t,s)=>{const r=l[s];return r==null?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(l,[t]){const{style:s}=l.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const r of this.ft)t[r]==null&&(this.ft.delete(r),r.includes("-")?s.removeProperty(r):s[r]=null);for(const r in t){const i=t[r];if(i!=null){this.ft.add(r);const u=typeof i=="string"&&i.endsWith(v);r.includes("-")||u?s.setProperty(r,u?i.slice(0,-11):i,u?c:""):s[r]=i}}return e.T}});var k=Object.defineProperty,m=Object.getOwnPropertyDescriptor,a=(l,t,s,r)=>{for(var i=r>1?void 0:r?m(t,s):t,u=l.length-1,o;u>=0;u--)(o=l[u])&&(i=(r?o(t,s,i):o(i))||i);return r&&i&&k(t,s,i),i};exports.PktProgressbar=class extends e.PktElement{constructor(){super(),this.ariaLabel=null,this.ariaLabelledby=null,this.ariaValueText=null,this.ariaLive="polite",this.id=d.uuidish(),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=h.e(),this.progressBarRef=h.e()}firstUpdated(t){super.firstUpdated(t),this.setComputedValues(),this.syncAttributes()}updated(t){super.updated(t),t.has("valueCurrent")&&this.labelRef.value&&(this.labelWidth=this.labelRef.value.getBoundingClientRect().width||0),t.has("id")&&this.id&&(this.progressBarId=this.id),(t.has("statusType")||t.has("id")||t.has("ariaLabelledby"))&&(this.progressbarId=this.id||d.uuidish(),this.computedAriaLabelledby=this.ariaLabelledby||`${this.progressbarId}-title`),(t.has("ariaValueText")||t.has("valueCurrent")||t.has("valueMax"))&&(this.computedAriaValueText=this.statusType==="fraction"&&!this.ariaValueText?`${this.valueCurrent} av ${this.valueMax-this.valueMin}`:this.ariaValueText||""),this.syncAttributes()}render(){const t=this.statusType!=="none",s=this.valueMax-this.valueMin,r=this.valueCurrent/s*100,i=this.statusType==="fraction"?Math.round(r):Math.round((this.valueCurrent-this.valueMin)/(this.valueMax-this.valueMin)*100),u=`${this.valueCurrent} av ${s}`,o=n.e({"pkt-progressbar__bar":!0,[`pkt-progressbar__bar--${this.skin}`]:!!this.skin}),g=n.e({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":this.titlePosition==="center"}),y=n.e({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":this.statusPlacement==="center"}),P=n.e({"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.x` <div
      class="pkt-progressbar__container"
      .ref=${this.progressBarRef}
      style=${f({"--pkt-progress-label-width":`${this.labelWidth}px`,"--pkt-progress-width":`${i}%`})}
    >
      ${this.title?e.x`<p id=${`${this.progressBarId}-title`} class=${g}>${this.title}</p>`:e.E}

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

      ${t?e.x`<div class=${y}>
            <span class=${P} ${h.n(this.labelRef)}>
              ${this.statusType==="percentage"?`${i}%`:u}
            </span>
          </div>`:e.E}
    </div>`}setComputedValues(){this.progressbarId=this.id||d.uuidish(),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(t,s){s==null||s===""?this.removeAttribute(t):this.setAttribute(t,String(s))}};a([e.n({type:String})],exports.PktProgressbar.prototype,"ariaLabel",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaLabelledby",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaValueText",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"ariaLive",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"id",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"role",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"skin",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"statusPlacement",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"statusType",2);a([e.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"title",2);a([e.n({type:String})],exports.PktProgressbar.prototype,"titlePosition",2);a([e.n({type:Number,reflect:!0})],exports.PktProgressbar.prototype,"valueCurrent",2);a([e.n({type:Number})],exports.PktProgressbar.prototype,"valueMax",2);a([e.n({type:Number})],exports.PktProgressbar.prototype,"valueMin",2);a([p.r()],exports.PktProgressbar.prototype,"labelWidth",2);a([p.r()],exports.PktProgressbar.prototype,"progressbarId",2);a([p.r()],exports.PktProgressbar.prototype,"computedAriaLabelledby",2);a([p.r()],exports.PktProgressbar.prototype,"computedAriaValueText",2);exports.PktProgressbar=a([e.t("pkt-progressbar")],exports.PktProgressbar);const _=exports.PktProgressbar;exports.PktProgressbar$1=_;