@oslokommune/punkt-elements 16.7.1 → 16.7.3

package/dist/pkt-timepicker.js

@@ -1,34 +1,34 @@
-import { s as d, b as u, A as o, n as b, t as x } from "./element-CPpT3rFQ.js";
+import { t as I, s as c, b as u, A as p, n as b } from "./element-CPpT3rFQ.js";
 import { r as v } from "./state-C_1EOo3D.js";
 import { e as m, n as _ } from "./ref-Bg_Swj5w.js";
-import { o as f } from "./if-defined-B0krMLad.js";
-import { e as I } from "./class-map-CEnykyO_.js";
-import { P as F } from "./input-element-8nLwuQS4.js";
-import { s as A } from "./element-with-slot-Dqk6-TRR.js";
-import "./icon-BlKA8YuW.js";
-import "./input-wrapper-B2JpK016.js";
-const C = (t) => /^\d{2}:\d{2}$/.test(t) && parseInt(t.slice(0, 2), 10) <= 23 && parseInt(t.slice(3), 10) <= 59, k = (t) => {
-  const [e, s] = t.split(":").map(Number);
-  return e * 60 + s;
-}, g = (t) => t ? Math.max(1, Math.round(t / 60)) : 1, O = (t, e) => {
-  const s = t ? parseInt(String(t).split(":")[0], 10) : 0, i = e ? parseInt(String(e).split(":")[0], 10) : 23;
-  return Array.from({ length: i - s + 1 }, (n, r) => r + s);
-}, T = (t) => {
-  const e = g(t);
-  return Array.from({ length: Math.floor(60 / e) }, (s, i) => i * e);
-}, M = (t, e, s, i) => {
-  let a = t !== "" ? parseInt(t, 10) : s === 1 ? 0 : 23, p = e !== "" ? parseInt(e, 10) : s === 1 ? 0 : Math.floor(59 / i) * i;
-  return p += s * i, p > 59 ? (p = 0, a = (a + 1) % 24) : p < 0 && (p = Math.floor(59 / i) * i, a = (a - 1 + 24) % 24), {
-    hours: String(a).padStart(2, "0"),
-    minutes: String(p).padStart(2, "0")
+import { o as k } from "./if-defined-B0krMLad.js";
+import { e as F } from "./class-map-CEnykyO_.js";
+import { P as A } from "./input-element-8nLwuQS4.js";
+import { s as C } from "./element-with-slot-Dqk6-TRR.js";
+import "./icon-CxQcIa5F.js";
+import "./input-wrapper-Bs4CRNst.js";
+const O = (a) => /^\d{2}:\d{2}$/.test(a) && parseInt(a.slice(0, 2), 10) <= 23 && parseInt(a.slice(3), 10) <= 59, f = (a) => {
+  const [t, e] = a.split(":").map(Number);
+  return t * 60 + e;
+}, g = (a) => a ? Math.max(1, Math.round(a / 60)) : 1, T = (a, t) => {
+  const e = a ? parseInt(String(a).split(":")[0], 10) : 0, s = t ? parseInt(String(t).split(":")[0], 10) : 23;
+  return Array.from({ length: s - e + 1 }, (i, n) => n + e);
+}, M = (a) => {
+  const t = g(a);
+  return Array.from({ length: Math.floor(60 / t) }, (e, s) => s * t);
+}, V = (a, t, e, s) => {
+  let r = a !== "" ? parseInt(a, 10) : e === 1 ? 0 : 23, o = t !== "" ? parseInt(t, 10) : e === 1 ? 0 : Math.floor(59 / s) * s;
+  return o += e * s, o > 59 ? (o = 0, r = (r + 1) % 24) : o < 0 && (o = Math.floor(59 / s) * s, r = (r - 1 + 24) % 24), {
+    hours: String(r).padStart(2, "0"),
+    minutes: String(o).padStart(2, "0")
   };
 };
-var V = Object.defineProperty, P = Object.getOwnPropertyDescriptor, c = (t, e, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? P(e, s) : e, r = t.length - 1, a; r >= 0; r--)
-    (a = t[r]) && (n = (i ? a(e, s, n) : a(n)) || n);
-  return i && n && V(e, s, n), n;
+var P = Object.defineProperty, d = (a, t, e, s) => {
+  for (var i = void 0, n = a.length - 1, r; n >= 0; n--)
+    (r = a[n]) && (i = r(t, e, i) || i);
+  return i && P(t, e, i), i;
 };
-let h = class extends F {
+class l extends A {
   constructor() {
     super(...arguments), this.hiddenInputRef = m(), this.hoursInputRef = m(), this.minutesInputRef = m(), this.buttonRef = m(), this.value = "", this.hidePicker = !1, this.stepArrows = !1, this._hours = "", this._minutes = "", this._isOpen = !1, this._hoursDigitCount = 0, this._hoursFirstDigit = -1, this._minutesDigitCount = 0, this._minutesFirstDigit = -1, this._hasFocus = !1, this._outsideClickHandler = (t) => {
       this.contains(t.target) || this._closePopup();
@@ -74,8 +74,8 @@ let h = class extends F {
             if (this._hoursDigitCount === 0)
               this._hoursFirstDigit = r, this._hours = String(r).padStart(2, "0"), this._hoursDigitCount = 1, this.onInput(), r >= 3 && (this._hoursFirstDigit = -1, this._hoursDigitCount = 0, this._syncValueFromDisplay(), (i = this.minutesInputRef.value) == null || i.focus());
             else {
-              const a = this._hoursFirstDigit * 10 + r;
-              this._hours = a <= 23 ? String(a).padStart(2, "0") : String(r).padStart(2, "0"), this._hoursFirstDigit = -1, this._hoursDigitCount = 0, this._syncValueFromDisplay(), this.onInput(), (n = this.minutesInputRef.value) == null || n.focus();
+              const o = this._hoursFirstDigit * 10 + r;
+              this._hours = o <= 23 ? String(o).padStart(2, "0") : String(r).padStart(2, "0"), this._hoursFirstDigit = -1, this._hoursDigitCount = 0, this._syncValueFromDisplay(), this.onInput(), (n = this.minutesInputRef.value) == null || n.focus();
             }
           } else
             t.preventDefault();
@@ -129,7 +129,7 @@ let h = class extends F {
     }, this._handleMinutesBlur = () => {
       this._minutes !== "" && (this._minutes = String(parseInt(this._minutes, 10)).padStart(2, "0")), this._minutesDigitCount = 0, this._minutesFirstDigit = -1, this._syncValueFromDisplay();
     }, this._handlePopupKeydown = (t) => {
-      var a;
+      var o;
       const e = document.activeElement, s = e.closest(".pkt-timepicker-popup__col");
       if (!s) return;
       const i = Array.from(s.querySelectorAll(".pkt-timepicker-popup__option")), n = i.indexOf(e), r = e.dataset.type ?? "";
@@ -161,7 +161,7 @@ let h = class extends F {
           t.preventDefault(), e.click();
           break;
         case "Escape":
-          t.preventDefault(), this._closePopup(), (a = this.buttonRef.value) == null || a.focus();
+          t.preventDefault(), this._closePopup(), (o = this.buttonRef.value) == null || o.focus();
           break;
       }
     };
@@ -185,32 +185,32 @@ let h = class extends F {
     const e = this.hoursInputRef.value;
     if (!e) return;
     if (this.required && !this.value) {
-      this.internals.setValidity({ valueMissing: !0 }, d.forms.messages.required, e), this._setAriaInvalid(!0);
+      this.internals.setValidity({ valueMissing: !0 }, c.forms.messages.required, e), this._setAriaInvalid(!0);
       return;
     }
     if (!this.value) {
       this.internals.setValidity({}), this._setAriaInvalid(!1);
       return;
     }
-    const s = k(this.value), i = g(this.step);
-    if (this.min && s < k(String(this.min))) {
+    const s = f(this.value), i = g(this.step);
+    if (this.min && s < f(String(this.min))) {
       this.internals.setValidity(
         { rangeUnderflow: !0 },
-        d.forms.messages.rangeUnderflowMin.replace("{min}", String(this.min)),
+        c.forms.messages.rangeUnderflowMin.replace("{min}", String(this.min)),
         e
       ), this._setAriaInvalid(!0);
       return;
     }
-    if (this.max && s > k(String(this.max))) {
+    if (this.max && s > f(String(this.max))) {
       this.internals.setValidity(
         { rangeOverflow: !0 },
-        d.forms.messages.rangeOverflowMax.replace("{max}", String(this.max)),
+        c.forms.messages.rangeOverflowMax.replace("{max}", String(this.max)),
         e
       ), this._setAriaInvalid(!0);
       return;
     }
     if (this.step && s % i !== 0) {
-      const n = i === 60 ? d.forms.messages.timeStepMismatchHour : i === 30 ? d.forms.messages.timeStepMismatchHalfHour : d.forms.messages.timeStepMismatch.replace(
+      const n = i === 60 ? c.forms.messages.timeStepMismatchHour : i === 30 ? c.forms.messages.timeStepMismatchHalfHour : c.forms.messages.timeStepMismatch.replace(
         "{step}",
         `${i}, ${i * 2}, ${i * 3}`
       );
@@ -245,7 +245,7 @@ let h = class extends F {
     return t === 3600 || t < 3600 && 3600 % t === 0 && t % 60 === 0;
   }
   _syncDisplayFromValue() {
-    const t = C(this.value) ? this.value.split(":") : null;
+    const t = O(this.value) ? this.value.split(":") : null;
     t ? (this._hours = t[0], this._minutes = t[1]) : (this._hours = "", this._minutes = "");
   }
   _syncValueFromDisplay() {
@@ -258,10 +258,10 @@ let h = class extends F {
     return g(this.step);
   }
   get _hourOptions() {
-    return O(this.min, this.max);
+    return T(this.min, this.max);
   }
   get _minuteOptions() {
-    return T(this.step);
+    return M(this.step);
   }
   _openPopup() {
     this._isOpen = !0, this.updateComplete.then(() => {
@@ -282,7 +282,7 @@ let h = class extends F {
     });
   }
   _focusSelectedOrFirst(t) {
-    var a;
+    var o;
     const e = this.querySelector(".pkt-timepicker-popup");
     if (!e) return;
     const s = e.querySelectorAll(".pkt-timepicker-popup__col"), i = t === "hour" ? s[0] : s[1];
@@ -290,7 +290,7 @@ let h = class extends F {
     const n = i.querySelector(
       ".pkt-timepicker-popup__option--selected"
     ), r = i.querySelector(".pkt-timepicker-popup__option");
-    (a = n || r) == null || a.focus();
+    (o = n || r) == null || o.focus();
   }
   _handleOptionClick(t, e) {
     var i;
@@ -303,14 +303,14 @@ let h = class extends F {
     e === "hour" ? this._hours = String(s).padStart(2, "0") : this._minutes = String(s).padStart(2, "0"), t.focus();
   }
   _stepTime(t) {
-    const e = M(this._hours, this._minutes, t, this._minuteStep);
+    const e = V(this._hours, this._minutes, t, this._minuteStep);
     this._hours = e.hours, this._minutes = e.minutes, this._syncValueFromDisplay();
   }
   _renderOption(t, e) {
     const s = String(t).padStart(2, "0"), i = e === "hour" ? this._hours !== "" ? parseInt(this._hours, 10) : NaN : this._minutes !== "" ? parseInt(this._minutes, 10) : NaN, n = t === i;
     return u`
       <button
-        class=${I({
+        class=${F({
       "pkt-btn": !0,
       "pkt-btn--tertiary": !0,
       "pkt-btn--small": !0,
@@ -367,30 +367,30 @@ let h = class extends F {
     `;
   }
   _renderContainer() {
-    var n, r, a, p, $, y, S, D;
+    var n, r, o, $, y, S, D, w;
     const t = ((n = this.strings.timepicker) == null ? void 0 : n.hours) ?? "Timer", e = ((r = this.strings.timepicker) == null ? void 0 : r.minutes) ?? "Minutter", s = this.label ? `${t}, ${this.label}` : t, i = this.label ? `${e}, ${this.label}` : e;
     return u`
       <div
         class="pkt-input__container"
-        @click=${(l) => {
-      var w;
-      l.target.closest("button, input") || (w = this.hoursInputRef.value) == null || w.focus();
+        @click=${(h) => {
+      var x;
+      h.target.closest("button, input") || (x = this.hoursInputRef.value) == null || x.focus();
     }}
       >
         ${this.stepArrows ? u`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--prev"
                 type="button"
-                aria-label=${((a = this.strings.timepicker) == null ? void 0 : a.prevTime) ?? "Forrige tidspunkt"}
+                aria-label=${((o = this.strings.timepicker) == null ? void 0 : o.prevTime) ?? "Forrige tidspunkt"}
                 ?disabled=${this.disabled}
                 @click=${() => this._stepTime(-1)}
               >
                 <pkt-icon name="chevron-thin-left"></pkt-icon>
                 <span class="pkt-btn__text"
-                  >${((p = this.strings.timepicker) == null ? void 0 : p.prevTime) ?? "Forrige tidspunkt"}</span
+                  >${(($ = this.strings.timepicker) == null ? void 0 : $.prevTime) ?? "Forrige tidspunkt"}</span
                 >
               </button>
-            ` : o}
+            ` : p}
         <input
           ${_(this.hoursInputRef)}
           type="text"
@@ -405,17 +405,17 @@ let h = class extends F {
           placeholder="––"
           aria-label=${s}
           role="spinbutton"
-          aria-invalid=${this.hasError ? "true" : o}
+          aria-invalid=${this.hasError ? "true" : p}
           aria-valuemin="0"
           aria-valuemax="23"
-          aria-valuenow=${this._hours !== "" ? this._hours : o}
-          aria-valuetext=${this._hours !== "" ? `${this._hours} ${t.toLowerCase()}` : o}
+          aria-valuenow=${this._hours !== "" ? this._hours : p}
+          aria-valuetext=${this._hours !== "" ? `${this._hours} ${t.toLowerCase()}` : p}
           autocomplete="off"
           ?disabled=${this.disabled}
           @keydown=${this._handleHoursKeydown}
           @blur=${this._handleHoursBlur}
-          @focus=${(l) => {
-      l.target.select(), l.stopImmediatePropagation();
+          @focus=${(h) => {
+      h.target.select(), h.stopImmediatePropagation();
     }}
         />
         <span class="pkt-timepicker__separator">:</span>
@@ -433,30 +433,30 @@ let h = class extends F {
           placeholder="––"
           aria-label=${i}
           role="spinbutton"
-          aria-invalid=${this.hasError ? "true" : o}
+          aria-invalid=${this.hasError ? "true" : p}
           aria-valuemin="0"
           aria-valuemax="59"
-          aria-valuenow=${this._minutes !== "" ? this._minutes : o}
-          aria-valuetext=${this._minutes !== "" ? `${this._minutes} ${e.toLowerCase()}` : o}
+          aria-valuenow=${this._minutes !== "" ? this._minutes : p}
+          aria-valuetext=${this._minutes !== "" ? `${this._minutes} ${e.toLowerCase()}` : p}
           autocomplete="off"
           ?disabled=${this.disabled}
           @keydown=${this._handleMinutesKeydown}
           @blur=${this._handleMinutesBlur}
-          @focus=${(l) => {
-      l.target.select(), l.stopImmediatePropagation();
+          @focus=${(h) => {
+      h.target.select(), h.stopImmediatePropagation();
     }}
         />
         ${this.hidePicker && !this.stepArrows ? u`<pkt-icon
               class="pkt-input-icon pkt-timepicker__icon"
               name="clock"
               aria-hidden="true"
-            ></pkt-icon>` : o}
+            ></pkt-icon>` : p}
         ${!this.hidePicker && !this.stepArrows ? u`
               <button
                 ${_(this.buttonRef)}
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button"
                 type="button"
-                aria-label=${(($ = this.strings.timepicker) == null ? void 0 : $.openPicker) ?? "Åpne tidspunkt-velger"}
+                aria-label=${((y = this.strings.timepicker) == null ? void 0 : y.openPicker) ?? "Åpne tidspunkt-velger"}
                 aria-haspopup="listbox"
                 aria-expanded=${this._isOpen ? "true" : "false"}
                 aria-controls=${this.id + "-popup"}
@@ -465,24 +465,24 @@ let h = class extends F {
               >
                 <pkt-icon name="clock"></pkt-icon>
                 <span class="pkt-btn__text"
-                  >${((y = this.strings.timepicker) == null ? void 0 : y.openPicker) ?? "Åpne tidspunkt-velger"}</span
+                  >${((S = this.strings.timepicker) == null ? void 0 : S.openPicker) ?? "Åpne tidspunkt-velger"}</span
                 >
               </button>
-            ` : o}
+            ` : p}
         ${this.stepArrows ? u`
               <button
                 class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--next"
                 type="button"
-                aria-label=${((S = this.strings.timepicker) == null ? void 0 : S.nextTime) ?? "Neste tidspunkt"}
+                aria-label=${((D = this.strings.timepicker) == null ? void 0 : D.nextTime) ?? "Neste tidspunkt"}
                 ?disabled=${this.disabled}
                 @click=${() => this._stepTime(1)}
               >
                 <pkt-icon name="chevron-thin-right"></pkt-icon>
                 <span class="pkt-btn__text"
-                  >${((D = this.strings.timepicker) == null ? void 0 : D.nextTime) ?? "Neste tidspunkt"}</span
+                  >${((w = this.strings.timepicker) == null ? void 0 : w.nextTime) ?? "Neste tidspunkt"}</span
                 >
               </button>
-            ` : o}
+            ` : p}
         <input
           ${_(this.hiddenInputRef)}
           type="time"
@@ -490,9 +490,9 @@ let h = class extends F {
           name=${this.name || this.id}
           id=${this.id + "-input"}
           .value=${this.value}
-          min=${f(this.min ?? void 0)}
-          max=${f(this.max ?? void 0)}
-          step=${f(this.step ?? void 0)}
+          min=${k(this.min ?? void 0)}
+          max=${k(this.max ?? void 0)}
+          step=${k(this.step ?? void 0)}
           ?required=${this.required}
           ?disabled=${this.disabled}
           tabindex="-1"
@@ -522,7 +522,7 @@ let h = class extends F {
         .requiredText=${this.requiredText}
         .tagText=${this.tagText}
       >
-        <div class="pkt-contents" slot="helptext">${A(this, "helptext")}</div>
+        <div class="pkt-contents" slot="helptext">${C(this, "helptext")}</div>
         ${!this.hidePicker && !this.stepArrows ? u`
               <div class="pkt-timepicker__anchor">
                 ${this._renderContainer()} ${this._renderPopup()}
@@ -531,28 +531,30 @@ let h = class extends F {
       </pkt-input-wrapper>
     `;
   }
-};
-c([
+}
+d([
   b({ type: String, reflect: !0 })
-], h.prototype, "value", 2);
-c([
+], l.prototype, "value");
+d([
   b({ type: Boolean, reflect: !0, attribute: "hide-picker" })
-], h.prototype, "hidePicker", 2);
-c([
+], l.prototype, "hidePicker");
+d([
   b({ type: Boolean, reflect: !0, attribute: "step-arrows" })
-], h.prototype, "stepArrows", 2);
-c([
+], l.prototype, "stepArrows");
+d([
   v()
-], h.prototype, "_hours", 2);
-c([
+], l.prototype, "_hours");
+d([
   v()
-], h.prototype, "_minutes", 2);
-c([
+], l.prototype, "_minutes");
+d([
   v()
-], h.prototype, "_isOpen", 2);
-h = c([
-  x("pkt-timepicker")
-], h);
+], l.prototype, "_isOpen");
+try {
+  I("pkt-timepicker")(l);
+} catch {
+  console.warn("Forsøker å definere <pkt-timepicker>, men den er allerede definert");
+}
 export {
-  h as PktTimepicker
+  l as PktTimepicker
 };

package/dist/progressbar-BqlMzkM_.cjs

@@ -0,0 +1,21 @@
+"use strict";const p=require("./class-map-CsENJXf1.cjs"),e=require("./element-gR_VtSiD.cjs"),h=require("./state-Dg-53wQ8.cjs"),d=require("./ref-CL-Xk9Xm.cjs"),b=require("./directive-C7oCP5Bh.cjs"),c=require("./utils-byXsEz1u.cjs");require("./icon-q81vqPK_.cjs");/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const y="important",m=" !"+y,_=b.e(class extends b.i{constructor(n){var t;if(super(n),n.type!==b.t.ATTRIBUTE||n.name!=="style"||((t=n.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(n){return Object.keys(n).reduce((t,s)=>{const a=n[s];return a==null?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${a};`},"")}update(n,[t]){const{style:s}=n.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const a of this.ft)t[a]==null&&(this.ft.delete(a),a.includes("-")?s.removeProperty(a):s[a]=null);for(const a in t){const l=t[a];if(l!=null){this.ft.add(a);const u=typeof l=="string"&&l.endsWith(m);a.includes("-")||u?s.setProperty(a,u?l.slice(0,-11):l,u?y:""):s[a]=l}}return e.E}});var A=Object.defineProperty,i=(n,t,s,a)=>{for(var l=void 0,u=n.length-1,o;u>=0;u--)(o=n[u])&&(l=o(t,s,l)||l);return l&&A(t,s,l),l};class r extends e.PktElement{constructor(){super(),this.ariaLabel=null,this.ariaLabelledby=null,this.ariaValueText=null,this.ariaLive="polite",this.id=c.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=d.e(),this.progressBarRef=d.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||c.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,a=this.valueCurrent/s*100,l=this.statusType==="fraction"?Math.round(a):Math.round((this.valueCurrent-this.valueMin)/(this.valueMax-this.valueMin)*100),u=`${this.valueCurrent} av ${s}`,o=p.e({"pkt-progressbar__bar":!0,[`pkt-progressbar__bar--${this.skin}`]:!!this.skin}),v=p.e({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":this.titlePosition==="center"}),f=p.e({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":this.statusPlacement==="center"}),g=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 e.b` <div
+      class="pkt-progressbar__container"
+      .ref=${this.progressBarRef}
+      style=${_({"--pkt-progress-label-width":`${this.labelWidth}px`,"--pkt-progress-width":`${l}%`})}
+    >
+      ${this.title?e.b`<p id=${`${this.progressBarId}-title`} class=${v}>${this.title}</p>`:e.A}
+
+      <div class="pkt-progressbar__bar-wrapper">
+        <div class=${o}></div>
+      </div>
+
+      ${t?e.b`<div class=${f}>
+            <span class=${g} ${d.n(this.labelRef)}>
+              ${this.statusType==="percentage"?`${l}%`:u}
+            </span>
+          </div>`:e.A}
+    </div>`}setComputedValues(){this.progressbarId=this.id||c.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))}}i([e.n({type:String})],r.prototype,"ariaLabel");i([e.n({type:String,reflect:!0})],r.prototype,"ariaLabelledby");i([e.n({type:String,reflect:!0})],r.prototype,"ariaValueText");i([e.n({type:String})],r.prototype,"ariaLive");i([e.n({type:String,reflect:!0})],r.prototype,"id");i([e.n({type:String})],r.prototype,"role");i([e.n({type:String})],r.prototype,"skin");i([e.n({type:String})],r.prototype,"statusPlacement");i([e.n({type:String})],r.prototype,"statusType");i([e.n({type:String,reflect:!0})],r.prototype,"title");i([e.n({type:String})],r.prototype,"titlePosition");i([e.n({type:Number,reflect:!0})],r.prototype,"valueCurrent");i([e.n({type:Number})],r.prototype,"valueMax");i([e.n({type:Number})],r.prototype,"valueMin");i([h.r()],r.prototype,"labelWidth");i([h.r()],r.prototype,"progressbarId");i([h.r()],r.prototype,"computedAriaLabelledby");i([h.r()],r.prototype,"computedAriaValueText");try{e.t("pkt-progressbar")(r)}catch{console.warn("Forsøker å definere <pkt-progressbar>, men den er allerede definert")}exports.PktProgressbar=r;