@oslokommune/punkt-elements 12.18.12 → 12.19.0

package/dist/index.d.ts

@@ -24,18 +24,20 @@ declare interface IPktModal {
 }
 
 export declare interface IPktProgressbar {
+    ariaLabel?: string | null;
+    ariaLabelledby?: string | null;
+    ariaLive?: TAriaLive | null;
+    ariaValueText?: string | null;
+    id?: string | null;
+    role?: TProgressbarRole;
+    skin?: TProgressbarSkin;
+    statusPlacement?: TProgressbarStatusPlacement;
+    statusType?: TProgressbarStatusType;
+    title?: string | null;
+    titlePosition?: TProgressbarTitlePosition;
     valueCurrent: number;
     valueMax?: number;
     valueMin?: number;
-    ariaValueText?: string;
-    skin?: TProgressbarSkin;
-    title?: string;
-    titlePosition?: TProgressbarTitlePosition;
-    statusType?: TProgressbarStatusType;
-    statusPlacement?: TProgressbarStatusPlacement;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    role?: TProgressbarRole;
 }
 
 declare interface IPktSelect {
@@ -455,25 +457,33 @@ export declare class PktModal extends PktElement implements IPktModal {
 }
 
 export declare class PktProgressbar extends PktElement implements IPktProgressbar {
-    valueCurrent: number;
-    valueMax: number;
-    valueMin: number;
+    constructor();
+    ariaLabel: string | null;
+    ariaLabelledby: string | null;
+    ariaValueText: string | null;
+    ariaLive: TAriaLive;
+    id: string;
+    role: TProgressbarRole;
     skin: TProgressbarSkin;
+    statusPlacement: TProgressbarStatusPlacement;
+    statusType: TProgressbarStatusType;
     title: string;
     titlePosition: TProgressbarTitlePosition;
-    statusType: TProgressbarStatusType;
-    statusPlacement: TProgressbarStatusPlacement;
-    ariaLabel: string;
-    ariaLabelledby: string;
-    ariaValueText: string;
-    role: TProgressbarRole;
+    valueCurrent: number;
+    valueMax: number;
+    valueMin: number;
     private labelWidth;
-    private progressBarId;
+    private progressbarId;
+    private computedAriaLabelledby;
+    private computedAriaValueText;
     private labelRef;
     private progressBarRef;
     firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): TemplateResult<1>;
+    private setComputedValues;
+    private syncAttributes;
+    private _handleAttribute;
 }
 
 /**

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-DfjFhisP.cjs"),u=require("./calendar-QSulz7im.cjs"),d=require("./card-DY2rbosk.cjs"),t=require("./icon-CdMQ6zBT.cjs"),k=require("./pkt-slot-controller-mHT3foJ4.cjs"),i=require("./ref-DCOsLZQg.cjs"),P=require("./class-map-Boa7BqCc.cjs"),b=require("./datepicker-BUUPN2Ak.cjs"),g=require("./helptext-iZEgxz2U.cjs"),h=require("./input-wrapper-DraeSNb6.cjs"),m=require("./link-DTldg4W2.cjs"),f=require("./linkcard-C5GUN22k.cjs"),y=require("./messagebox-DLsgkPtN.cjs"),v=require("./modal-B-n1mhZ1.cjs"),x=require("./progressbar-CuXkbAhJ.cjs"),C=require("./tag-Du8P8YIp.cjs"),O=require("./textarea-DPTHMOSZ.cjs"),j=require("./textinput-OmztIgoC.cjs"),q=require("./select-CFdjp5Sk.cjs");var S=Object.defineProperty,$=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?$(e,r):e,l=a.length-1,p;l>=0;l--)(p=a[l])&&(n=(s?p(e,r,n):p(n))||n);return s&&n&&S(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new k.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./alert-DfjFhisP.cjs"),u=require("./calendar-QSulz7im.cjs"),d=require("./card-DY2rbosk.cjs"),t=require("./icon-CdMQ6zBT.cjs"),k=require("./pkt-slot-controller-mHT3foJ4.cjs"),i=require("./ref-DCOsLZQg.cjs"),P=require("./class-map-Boa7BqCc.cjs"),b=require("./datepicker-BUUPN2Ak.cjs"),g=require("./helptext-iZEgxz2U.cjs"),h=require("./input-wrapper-DraeSNb6.cjs"),m=require("./link-DTldg4W2.cjs"),f=require("./linkcard-C5GUN22k.cjs"),y=require("./messagebox-DLsgkPtN.cjs"),v=require("./modal-B-n1mhZ1.cjs"),x=require("./progressbar-872kMPws.cjs"),C=require("./tag-Du8P8YIp.cjs"),O=require("./textarea-DPTHMOSZ.cjs"),j=require("./textinput-OmztIgoC.cjs"),q=require("./select-CFdjp5Sk.cjs");var S=Object.defineProperty,$=Object.getOwnPropertyDescriptor,o=(a,e,r,s)=>{for(var n=s>1?void 0:s?$(e,r):e,l=a.length-1,p;l>=0;l--)(p=a[l])&&(n=(s?p(e,r,n):p(n))||n);return s&&n&&S(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=i.e(),this.namedSlot=i.e(),this.slotController=new k.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${P.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -14,7 +14,7 @@ import { P as N } from "./link-CWGiizQI.js";
 import { P as W } from "./linkcard-BkgsoZ7N.js";
 import { P as z } from "./messagebox-CtWD9b0a.js";
 import { P as J } from "./modal-CV7Wyhsa.js";
-import { P as V } from "./progressbar-BS_oawSB.js";
+import { P as V } from "./progressbar-KBLmOgxm.js";
 import { P as Y } from "./tag-DlnEKEym.js";
 import { P as tt } from "./textarea-8VOlYKdT.js";
 import { P as rt } from "./textinput-D2uB8zkQ.js";

package/dist/pkt-progressbar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./progressbar-CuXkbAhJ.cjs");Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>e.PktProgressbar});exports.default=e.PktProgressbar$1;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./progressbar-872kMPws.cjs");Object.defineProperty(exports,"PktProgressbar",{enumerable:!0,get:()=>e.PktProgressbar});exports.default=e.PktProgressbar$1;

package/dist/pkt-progressbar.js

@@ -1,5 +1,5 @@
-import { a } from "./progressbar-BS_oawSB.js";
-import { P as t } from "./progressbar-BS_oawSB.js";
+import { a } from "./progressbar-KBLmOgxm.js";
+import { P as t } from "./progressbar-KBLmOgxm.js";
 export {
   t as PktProgressbar,
   a as default

package/dist/progressbar-872kMPws.cjs

@@ -0,0 +1,21 @@
+"use strict";const n=require("./class-map-Boa7BqCc.cjs"),e=require("./icon-CdMQ6zBT.cjs"),p=require("./state-SKYD8kRO.cjs"),h=require("./ref-DCOsLZQg.cjs"),b=require("./stringutils-CkVRq4jP.cjs");/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const d="important",P=" !"+d,v=e.e(class extends e.i{constructor(l){var t;if(super(l),l.type!==e.t$1.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 o=typeof i=="string"&&i.endsWith(P);r.includes("-")||o?s.setProperty(r,o?i.slice(0,-11):i,o?d:""):s[r]=i}}return e.T}});var f=Object.defineProperty,k=Object.getOwnPropertyDescriptor,a=(l,t,s,r)=>{for(var i=r>1?void 0:r?k(t,s):t,o=l.length-1,u;o>=0;o--)(u=l[o])&&(i=(r?u(t,s,i):u(i))||i);return r&&i&&f(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=b.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||b.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),o=`${this.valueCurrent} av ${s}`,u=n.e({"pkt-progressbar__bar":!0,[`pkt-progressbar__bar--${this.skin}`]:!!this.skin}),c=n.e({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":this.titlePosition==="center"}),g=n.e({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":this.statusPlacement==="center"}),y=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=${v({"--pkt-progress-label-width":`${this.labelWidth}px`,"--pkt-progress-width":`${i}%`})}
+    >
+      ${this.title?e.x`<p id=${`${this.progressBarId}-title`} class=${c}>${this.title}</p>`:e.E}
+
+      <div class="pkt-progressbar__bar-wrapper">
+        <div class=${u}></div>
+      </div>
+
+      ${t?e.x`<div class=${g}>
+            <span class=${y} ${h.n(this.labelRef)}>
+              ${this.statusType==="percentage"?`${i}%`:o}
+            </span>
+          </div>`:e.E}
+    </div>`}setComputedValues(){this.progressbarId=this.id||b.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=_;

package/dist/progressbar-KBLmOgxm.js

@@ -0,0 +1,160 @@
+import { e as n } from "./class-map-hz16xq5a.js";
+import { e as g, i as _, b as $, T as A, P as x, x as b, E as c, n as u, t as T } from "./icon-wUXeHiBk.js";
+import { r as h } from "./state-BfyXV7EL.js";
+import { e as y, n as k } from "./ref-DuFGTLVX.js";
+import { u as d } from "./stringutils-DJjRa8dG.js";
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const v = "important", C = " !" + v, M = g(class extends _ {
+  constructor(t) {
+    var e;
+    if (super(t), t.type !== $.ATTRIBUTE || t.name !== "style" || ((e = t.strings) == null ? void 0 : e.length) > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+  }
+  render(t) {
+    return Object.keys(t).reduce((e, a) => {
+      const s = t[a];
+      return s == null ? e : e + `${a = a.includes("-") ? a : a.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
+    }, "");
+  }
+  update(t, [e]) {
+    const { style: a } = t.element;
+    if (this.ft === void 0) return this.ft = new Set(Object.keys(e)), this.render(e);
+    for (const s of this.ft) e[s] == null && (this.ft.delete(s), s.includes("-") ? a.removeProperty(s) : a[s] = null);
+    for (const s in e) {
+      const l = e[s];
+      if (l != null) {
+        this.ft.add(s);
+        const o = typeof l == "string" && l.endsWith(C);
+        s.includes("-") || o ? a.setProperty(s, o ? l.slice(0, -11) : l, o ? v : "") : a[s] = l;
+      }
+    }
+    return A;
+  }
+});
+var L = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (t, e, a, s) => {
+  for (var l = s > 1 ? void 0 : s ? S(e, a) : e, o = t.length - 1, p; o >= 0; o--)
+    (p = t[o]) && (l = (s ? p(e, a, l) : p(l)) || l);
+  return s && l && L(e, a, l), l;
+};
+let r = class extends x {
+  constructor() {
+    super(), this.ariaLabel = null, this.ariaLabelledby = null, this.ariaValueText = null, this.ariaLive = "polite", this.id = d(), 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 = y(), this.progressBarRef = y();
+  }
+  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(), 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", e = this.valueMax - this.valueMin, a = this.valueCurrent / e * 100, s = this.statusType === "fraction" ? Math.round(a) : Math.round((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin) * 100), l = `${this.valueCurrent} av ${e}`, o = n({
+      "pkt-progressbar__bar": !0,
+      [`pkt-progressbar__bar--${this.skin}`]: !!this.skin
+    }), p = n({
+      "pkt-progressbar__title": !0,
+      "pkt-progressbar__title-center": this.titlePosition === "center"
+    }), f = n({
+      "pkt-progressbar__status": !0,
+      "pkt-progressbar__status--center": this.statusPlacement === "center"
+    }), m = n({
+      "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 b` <div
+      class="pkt-progressbar__container"
+      .ref=${this.progressBarRef}
+      style=${M({
+      "--pkt-progress-label-width": `${this.labelWidth}px`,
+      "--pkt-progress-width": `${s}%`
+    })}
+    >
+      ${this.title ? b`<p id=${`${this.progressBarId}-title`} class=${p}>${this.title}</p>` : c}
+
+      <div class="pkt-progressbar__bar-wrapper">
+        <div class=${o}></div>
+      </div>
+
+      ${t ? b`<div class=${f}>
+            <span class=${m} ${k(this.labelRef)}>
+              ${this.statusType === "percentage" ? `${s}%` : l}
+            </span>
+          </div>` : c}
+    </div>`;
+  }
+  // methods
+  setComputedValues() {
+    this.progressbarId = this.id || d(), 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, e) {
+    e == null || e === "" ? this.removeAttribute(t) : this.setAttribute(t, String(e));
+  }
+};
+i([
+  u({ type: String })
+], r.prototype, "ariaLabel", 2);
+i([
+  u({ type: String, reflect: !0 })
+], r.prototype, "ariaLabelledby", 2);
+i([
+  u({ type: String, reflect: !0 })
+], r.prototype, "ariaValueText", 2);
+i([
+  u({ type: String })
+], r.prototype, "ariaLive", 2);
+i([
+  u({ type: String, reflect: !0 })
+], r.prototype, "id", 2);
+i([
+  u({ type: String })
+], r.prototype, "role", 2);
+i([
+  u({ type: String })
+], r.prototype, "skin", 2);
+i([
+  u({ type: String })
+], r.prototype, "statusPlacement", 2);
+i([
+  u({ type: String })
+], r.prototype, "statusType", 2);
+i([
+  u({ type: String, reflect: !0 })
+], r.prototype, "title", 2);
+i([
+  u({ type: String })
+], r.prototype, "titlePosition", 2);
+i([
+  u({ type: Number, reflect: !0 })
+], r.prototype, "valueCurrent", 2);
+i([
+  u({ type: Number })
+], r.prototype, "valueMax", 2);
+i([
+  u({ type: Number })
+], r.prototype, "valueMin", 2);
+i([
+  h()
+], r.prototype, "labelWidth", 2);
+i([
+  h()
+], r.prototype, "progressbarId", 2);
+i([
+  h()
+], r.prototype, "computedAriaLabelledby", 2);
+i([
+  h()
+], r.prototype, "computedAriaValueText", 2);
+r = i([
+  T("pkt-progressbar")
+], r);
+const O = r;
+export {
+  r as P,
+  O as a
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.18.12",
+  "version": "12.19.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -29,8 +29,8 @@
     "urlpattern-polyfill": "^10.0.0"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^12.14.0",
-    "@oslokommune/punkt-css": "^12.18.7",
+    "@oslokommune/punkt-assets": "^12.19.0",
+    "@oslokommune/punkt-css": "^12.19.0",
     "sass": "^1.78.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
@@ -57,5 +57,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "1269ca5d4e0c6dba9fa5c15907e045b5e4415e09"
+  "gitHead": "56c70c1a657240f64050e148fe4cd72d93e98631"
 }

package/src/components/progressbar/progressbar.ts

@@ -1,13 +1,13 @@
-import { ifDefined } from 'lit/directives/if-defined.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
-import { html } from 'lit'
+import { html, nothing } from 'lit'
 import { PktElement } from '@/base-elements/element'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { styleMap } from 'lit/directives/style-map.js'
 import { uuidish } from '@/utils/stringutils'
 
 import '@/components/icon'
+import { TAriaLive } from '@/types/aria'
 
 export type TProgressbarRole = 'progressbar' | 'meter'
 export type TProgressbarSkin = 'dark-blue' | 'light-blue' | 'green' | 'red'
@@ -16,76 +16,101 @@ export type TProgressbarStatusType = 'none' | 'percentage' | 'fraction'
 export type TProgressbarTitlePosition = 'left' | 'center'
 
 export interface IPktProgressbar {
+  ariaLabel?: string | null
+  ariaLabelledby?: string | null
+  ariaLive?: TAriaLive | null
+  ariaValueText?: string | null
+  id?: string | null
+  role?: TProgressbarRole
+  skin?: TProgressbarSkin
+  statusPlacement?: TProgressbarStatusPlacement
+  statusType?: TProgressbarStatusType
+  title?: string | null
+  titlePosition?: TProgressbarTitlePosition
   valueCurrent: number
   valueMax?: number
   valueMin?: number
-  ariaValueText?: string
-  skin?: TProgressbarSkin
-  title?: string
-  titlePosition?: TProgressbarTitlePosition
-  statusType?: TProgressbarStatusType
-  statusPlacement?: TProgressbarStatusPlacement
-  ariaLabel?: string
-  ariaLabelledby?: string
-  role?: TProgressbarRole
 }
 
 @customElement('pkt-progressbar')
 export class PktProgressbar extends PktElement implements IPktProgressbar {
+  constructor() {
+    super()
+  }
   // Public properties
-  @property({ type: Number, reflect: true }) valueCurrent: number = 0
-  @property({ type: Number, reflect: true }) valueMax: number = 100
-  @property({ type: Number, reflect: true }) valueMin: number = 0
-  @property({ type: String, reflect: true }) skin: TProgressbarSkin = 'dark-blue'
-  @property({ type: String, reflect: true }) title: string = ''
-  @property({ type: String, reflect: true }) titlePosition: TProgressbarTitlePosition = 'left'
-  @property({ type: String, reflect: true }) statusType: TProgressbarStatusType = 'none'
-  @property({ type: String, reflect: true }) statusPlacement: TProgressbarStatusPlacement =
-    'following'
-  @property({ type: String, reflect: true }) ariaLabel: string = ''
-  @property({ type: String, reflect: true }) ariaLabelledby: string = ''
-  @property({ type: String, reflect: true }) ariaValueText: string = ''
-  @property({ type: String, reflect: true }) role: TProgressbarRole = 'progressbar'
+  @property({ type: String }) ariaLabel: string | null = null
+  @property({ type: String, reflect: true }) ariaLabelledby: string | null = null
+  @property({ type: String, reflect: true }) ariaValueText: string | null = null
+  @property({ type: String }) ariaLive: TAriaLive = 'polite'
+  @property({ type: String, reflect: true }) id: string = uuidish()
+  @property({ type: String }) role: TProgressbarRole = 'progressbar'
+  @property({ type: String }) skin: TProgressbarSkin = 'dark-blue'
+  @property({ type: String }) statusPlacement: TProgressbarStatusPlacement = 'following'
+  @property({ type: String }) statusType: TProgressbarStatusType = 'none'
+  @property({ type: String, reflect: true }) title = ''
+  @property({ type: String }) titlePosition: TProgressbarTitlePosition = 'left'
+  @property({ type: Number, reflect: true }) valueCurrent = 0
+  @property({ type: Number }) valueMax = 100
+  @property({ type: Number }) valueMin = 0
 
   // State
-  @state() private labelWidth: number = 0
-  @state() private progressBarId: string = this.id
+  @state() private labelWidth = 0
+  @state() private progressbarId: string = this.id
+  @state() private computedAriaLabelledby: string | null = null
+  @state() private computedAriaValueText = ''
 
-  // Private properties
+  // Private refs
   private labelRef: Ref<HTMLSpanElement> = createRef()
   private progressBarRef: Ref<HTMLDivElement> = createRef()
 
   firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
     super.firstUpdated(changedProperties)
-    if (!this.id) {
-      this.progressBarId = uuidish()
-    } else {
-      this.progressBarId = this.id
-    }
+    this.setComputedValues()
+    this.syncAttributes()
   }
 
   updated(changedProperties: Map<string | number | symbol, unknown>) {
     super.updated(changedProperties)
+
     if (changedProperties.has('valueCurrent') && this.labelRef.value) {
       this.labelWidth = this.labelRef.value.getBoundingClientRect().width || 0
     }
     if (changedProperties.has('id') && this.id) {
       this.progressBarId = this.id
     }
+
+    if (
+      changedProperties.has('statusType') ||
+      changedProperties.has('id') ||
+      changedProperties.has('ariaLabelledby')
+    ) {
+      this.progressbarId = this.id || uuidish()
+      this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`
+    }
+    if (
+      changedProperties.has('ariaValueText') ||
+      changedProperties.has('valueCurrent') ||
+      changedProperties.has('valueMax')
+    ) {
+      this.computedAriaValueText =
+        this.statusType === 'fraction' && !this.ariaValueText
+          ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}`
+          : this.ariaValueText || ''
+    }
+
+    this.syncAttributes()
   }
 
   render() {
+    const hasStatus = this.statusType !== 'none'
     const totalSteps = this.valueMax - this.valueMin
     const percentageOfSteps = (this.valueCurrent / totalSteps) * 100
     const currentPercentage =
-      this.valueMax !== 100 || this.valueMin !== 0
+      this.statusType === 'fraction'
         ? Math.round(percentageOfSteps)
-        : this.valueCurrent
-    const formattedTitle = `${this.valueCurrent} av ${this.valueMax}`
-    const hasStatus = this.statusType !== 'none'
+        : Math.round(((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin)) * 100)
 
-    const ariaLabelledbyText =
-      this.ariaLabelledby || (this.progressBarId && `${this.progressBarId}-title`)
+    const formattedTitle = `${this.valueCurrent} av ${totalSteps}`
 
     const barClasses = classMap({
       'pkt-progressbar__bar': true,
@@ -106,7 +131,6 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
     })
 
     return html` <div
-      id=${this.progressBarId}
       class="pkt-progressbar__container"
       .ref=${this.progressBarRef}
       style=${styleMap({
@@ -114,31 +138,56 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
         '--pkt-progress-width': `${currentPercentage}%`,
       })}
     >
-      ${this.title &&
-      html`<p id=${`${this.progressBarId}-title`} class=${titleClasses}>${this.title}</p>`}
-
-      <div
-        .id=${this.progressBarId}
-        role=${this.role as any}
-        class="pkt-progressbar__bar-wrapper"
-        aria-valuemin=${this.valueMin}
-        aria-valuemax=${this.valueMax}
-        aria-valuenow=${this.valueCurrent}
-        aria-labelledby=${ifDefined(ariaLabelledbyText)}
-        aria-label=${ifDefined(this.ariaLabel)}
-        aria-valuetext=${ifDefined(this.ariaValueText)}
-      >
+      ${this.title
+        ? html`<p id=${`${this.progressBarId}-title`} class=${titleClasses}>${this.title}</p>`
+        : nothing}
+
+      <div class="pkt-progressbar__bar-wrapper">
         <div class=${barClasses}></div>
       </div>
 
-      ${hasStatus &&
-      html`<div class=${statusClasses}>
-        <span class=${placementClasses} ${ref(this.labelRef)}>
-          ${this.statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle}
-        </span>
-      </div>`}
+      ${hasStatus
+        ? html`<div class=${statusClasses}>
+            <span class=${placementClasses} ${ref(this.labelRef)}>
+              ${this.statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle}
+            </span>
+          </div>`
+        : nothing}
     </div>`
   }
+
+  // methods
+  private setComputedValues() {
+    this.progressbarId = this.id || uuidish()
+    this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`
+    this.computedAriaValueText =
+      this.statusType === 'fraction' && !this.ariaValueText
+        ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}`
+        : this.ariaValueText || ''
+  }
+
+  private 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)
+    if (!this.ariaLabel) {
+      this._handleAttribute('aria-labelledby', this.computedAriaLabelledby)
+    }
+  }
+
+  private _handleAttribute(name: string, value: string | number | null) {
+    if (value == null || value === '') {
+      this.removeAttribute(name)
+    } else {
+      this.setAttribute(name, String(value))
+    }
+  }
 }
 
 export default PktProgressbar

package/dist/progressbar-BS_oawSB.js

@@ -1,150 +0,0 @@
-import { o as h } from "./if-defined-ZFE4ti2t.js";
-import { e as u } from "./class-map-hz16xq5a.js";
-import { e as m, i as $, b as _, T as P, P as k, x as c, n as o, t as x } from "./icon-wUXeHiBk.js";
-import { r as b } from "./state-BfyXV7EL.js";
-import { e as d, n as w } from "./ref-DuFGTLVX.js";
-import { u as B } from "./stringutils-DJjRa8dG.js";
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const f = "important", C = " !" + f, T = m(class extends $ {
-  constructor(e) {
-    var s;
-    if (super(e), e.type !== _.ATTRIBUTE || e.name !== "style" || ((s = e.strings) == null ? void 0 : s.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((s, r) => {
-      const t = e[r];
-      return t == null ? s : s + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${t};`;
-    }, "");
-  }
-  update(e, [s]) {
-    const { style: r } = e.element;
-    if (this.ft === void 0) return this.ft = new Set(Object.keys(s)), this.render(s);
-    for (const t of this.ft) s[t] == null && (this.ft.delete(t), t.includes("-") ? r.removeProperty(t) : r[t] = null);
-    for (const t in s) {
-      const i = s[t];
-      if (i != null) {
-        this.ft.add(t);
-        const p = typeof i == "string" && i.endsWith(C);
-        t.includes("-") || p ? r.setProperty(t, p ? i.slice(0, -11) : i, p ? f : "") : r[t] = i;
-      }
-    }
-    return P;
-  }
-});
-var M = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, s, r, t) => {
-  for (var i = t > 1 ? void 0 : t ? S(s, r) : s, p = e.length - 1, n; p >= 0; p--)
-    (n = e[p]) && (i = (t ? n(s, r, i) : n(i)) || i);
-  return t && i && M(s, r, i), i;
-};
-let a = class extends k {
-  constructor() {
-    super(...arguments), this.valueCurrent = 0, this.valueMax = 100, this.valueMin = 0, this.skin = "dark-blue", this.title = "", this.titlePosition = "left", this.statusType = "none", this.statusPlacement = "following", this.ariaLabel = "", this.ariaLabelledby = "", this.ariaValueText = "", this.role = "progressbar", this.labelWidth = 0, this.progressBarId = this.id, this.labelRef = d(), this.progressBarRef = d();
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.id ? this.progressBarId = this.id : this.progressBarId = B();
-  }
-  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);
-  }
-  render() {
-    const e = this.valueMax - this.valueMin, s = this.valueCurrent / e * 100, r = this.valueMax !== 100 || this.valueMin !== 0 ? Math.round(s) : this.valueCurrent, t = `${this.valueCurrent} av ${this.valueMax}`, i = this.statusType !== "none", p = this.ariaLabelledby || this.progressBarId && `${this.progressBarId}-title`, n = u({
-      "pkt-progressbar__bar": !0,
-      [`pkt-progressbar__bar--${this.skin}`]: !!this.skin
-    }), g = u({
-      "pkt-progressbar__title": !0,
-      "pkt-progressbar__title-center": this.titlePosition === "center"
-    }), y = u({
-      "pkt-progressbar__status": !0,
-      "pkt-progressbar__status--center": this.statusPlacement === "center"
-    }), v = u({
-      "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 c` <div
-      id=${this.progressBarId}
-      class="pkt-progressbar__container"
-      .ref=${this.progressBarRef}
-      style=${T({
-      "--pkt-progress-label-width": `${this.labelWidth}px`,
-      "--pkt-progress-width": `${r}%`
-    })}
-    >
-      ${this.title && c`<p id=${`${this.progressBarId}-title`} class=${g}>${this.title}</p>`}
-
-      <div
-        .id=${this.progressBarId}
-        role=${this.role}
-        class="pkt-progressbar__bar-wrapper"
-        aria-valuemin=${this.valueMin}
-        aria-valuemax=${this.valueMax}
-        aria-valuenow=${this.valueCurrent}
-        aria-labelledby=${h(p)}
-        aria-label=${h(this.ariaLabel)}
-        aria-valuetext=${h(this.ariaValueText)}
-      >
-        <div class=${n}></div>
-      </div>
-
-      ${i && c`<div class=${y}>
-        <span class=${v} ${w(this.labelRef)}>
-          ${this.statusType === "percentage" ? `${r}%` : t}
-        </span>
-      </div>`}
-    </div>`;
-  }
-};
-l([
-  o({ type: Number, reflect: !0 })
-], a.prototype, "valueCurrent", 2);
-l([
-  o({ type: Number, reflect: !0 })
-], a.prototype, "valueMax", 2);
-l([
-  o({ type: Number, reflect: !0 })
-], a.prototype, "valueMin", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "skin", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "title", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "titlePosition", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "statusType", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "statusPlacement", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "ariaLabel", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "ariaLabelledby", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "ariaValueText", 2);
-l([
-  o({ type: String, reflect: !0 })
-], a.prototype, "role", 2);
-l([
-  b()
-], a.prototype, "labelWidth", 2);
-l([
-  b()
-], a.prototype, "progressBarId", 2);
-a = l([
-  x("pkt-progressbar")
-], a);
-const E = a;
-export {
-  a as P,
-  E as a
-};

package/dist/progressbar-CuXkbAhJ.cjs

@@ -1,32 +0,0 @@
-"use strict";const u=require("./if-defined-DEDlGbAc.cjs"),p=require("./class-map-Boa7BqCc.cjs"),r=require("./icon-CdMQ6zBT.cjs"),c=require("./state-SKYD8kRO.cjs"),h=require("./ref-DCOsLZQg.cjs"),y=require("./stringutils-CkVRq4jP.cjs");/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const b="important",v=" !"+b,k=r.e(class extends r.i{constructor(l){var t;if(super(l),l.type!==r.t$1.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 e=l[s];return e==null?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`},"")}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 e of this.ft)t[e]==null&&(this.ft.delete(e),e.includes("-")?s.removeProperty(e):s[e]=null);for(const e in t){const a=t[e];if(a!=null){this.ft.add(e);const o=typeof a=="string"&&a.endsWith(v);e.includes("-")||o?s.setProperty(e,o?a.slice(0,-11):a,o?b:""):s[e]=a}}return r.T}});var $=Object.defineProperty,_=Object.getOwnPropertyDescriptor,i=(l,t,s,e)=>{for(var a=e>1?void 0:e?_(t,s):t,o=l.length-1,n;o>=0;o--)(n=l[o])&&(a=(e?n(t,s,a):n(a))||a);return e&&a&&$(t,s,a),a};exports.PktProgressbar=class extends r.PktElement{constructor(){super(...arguments),this.valueCurrent=0,this.valueMax=100,this.valueMin=0,this.skin="dark-blue",this.title="",this.titlePosition="left",this.statusType="none",this.statusPlacement="following",this.ariaLabel="",this.ariaLabelledby="",this.ariaValueText="",this.role="progressbar",this.labelWidth=0,this.progressBarId=this.id,this.labelRef=h.e(),this.progressBarRef=h.e()}firstUpdated(t){super.firstUpdated(t),this.id?this.progressBarId=this.id:this.progressBarId=y.uuidish()}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)}render(){const t=this.valueMax-this.valueMin,s=this.valueCurrent/t*100,e=this.valueMax!==100||this.valueMin!==0?Math.round(s):this.valueCurrent,a=`${this.valueCurrent} av ${this.valueMax}`,o=this.statusType!=="none",n=this.ariaLabelledby||this.progressBarId&&`${this.progressBarId}-title`,g=p.e({"pkt-progressbar__bar":!0,[`pkt-progressbar__bar--${this.skin}`]:!!this.skin}),d=p.e({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":this.titlePosition==="center"}),P=p.e({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":this.statusPlacement==="center"}),f=p.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 r.x` <div
-      id=${this.progressBarId}
-      class="pkt-progressbar__container"
-      .ref=${this.progressBarRef}
-      style=${k({"--pkt-progress-label-width":`${this.labelWidth}px`,"--pkt-progress-width":`${e}%`})}
-    >
-      ${this.title&&r.x`<p id=${`${this.progressBarId}-title`} class=${d}>${this.title}</p>`}
-
-      <div
-        .id=${this.progressBarId}
-        role=${this.role}
-        class="pkt-progressbar__bar-wrapper"
-        aria-valuemin=${this.valueMin}
-        aria-valuemax=${this.valueMax}
-        aria-valuenow=${this.valueCurrent}
-        aria-labelledby=${u.o(n)}
-        aria-label=${u.o(this.ariaLabel)}
-        aria-valuetext=${u.o(this.ariaValueText)}
-      >
-        <div class=${g}></div>
-      </div>
-
-      ${o&&r.x`<div class=${P}>
-        <span class=${f} ${h.n(this.labelRef)}>
-          ${this.statusType==="percentage"?`${e}%`:a}
-        </span>
-      </div>`}
-    </div>`}};i([r.n({type:Number,reflect:!0})],exports.PktProgressbar.prototype,"valueCurrent",2);i([r.n({type:Number,reflect:!0})],exports.PktProgressbar.prototype,"valueMax",2);i([r.n({type:Number,reflect:!0})],exports.PktProgressbar.prototype,"valueMin",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"skin",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"title",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"titlePosition",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"statusType",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"statusPlacement",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaLabel",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaLabelledby",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"ariaValueText",2);i([r.n({type:String,reflect:!0})],exports.PktProgressbar.prototype,"role",2);i([c.r()],exports.PktProgressbar.prototype,"labelWidth",2);i([c.r()],exports.PktProgressbar.prototype,"progressBarId",2);exports.PktProgressbar=i([r.t("pkt-progressbar")],exports.PktProgressbar);const m=exports.PktProgressbar;exports.PktProgressbar$1=m;