@oslokommune/punkt-elements 16.7.3 → 16.7.7

package/dist/pkt-timepicker.js

@@ -1,560 +1,2 @@
-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 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 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;
-};
-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();
-    }, this._handleComponentFocusIn = () => {
-      this._hasFocus || (this._hasFocus = !0, this.onFocus());
-    }, this._handleComponentFocusOut = (t) => {
-      this.contains(t.relatedTarget) || (this._hasFocus = !1, this.onBlur());
-    }, this._handleHoursKeydown = (t) => {
-      var s, i, n;
-      const e = t.target;
-      switch (t.key) {
-        case "ArrowUp": {
-          t.preventDefault();
-          const r = this._hours !== "" ? parseInt(this._hours, 10) : 0;
-          this._hours = String((r + 1) % 24).padStart(2, "0"), this._syncValueFromDisplay(), this.onInput();
-          break;
-        }
-        case "ArrowDown": {
-          t.preventDefault();
-          const r = this._hours !== "" ? parseInt(this._hours, 10) : 0;
-          this._hours = String((r - 1 + 24) % 24).padStart(2, "0"), this._syncValueFromDisplay(), this.onInput();
-          break;
-        }
-        case "ArrowRight":
-          t.preventDefault(), (s = this.minutesInputRef.value) == null || s.focus();
-          break;
-        case "Backspace":
-        case "Delete":
-          this._hoursDigitCount = 0, this._hoursFirstDigit = -1;
-          break;
-        case "Tab":
-          break;
-        case "Enter": {
-          t.preventDefault();
-          const r = this.internals.form;
-          r ? r.requestSubmit() : e.blur();
-          break;
-        }
-        default:
-          if (/^\d$/.test(t.key)) {
-            t.preventDefault();
-            const r = parseInt(t.key, 10);
-            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 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();
-      }
-    }, this._handleHoursBlur = () => {
-      this._hours !== "" && (this._hours = String(parseInt(this._hours, 10)).padStart(2, "0")), this._hoursDigitCount = 0, this._hoursFirstDigit = -1, this._syncValueFromDisplay();
-    }, this._handleMinutesKeydown = (t) => {
-      var s;
-      const e = t.target;
-      switch (t.key) {
-        case "ArrowUp": {
-          t.preventDefault();
-          const i = this._minutes !== "" ? parseInt(this._minutes, 10) : 0;
-          this._minutes = String((i + this._minuteStep) % 60).padStart(2, "0"), this._syncValueFromDisplay(), this.onInput();
-          break;
-        }
-        case "ArrowDown": {
-          t.preventDefault();
-          const i = this._minutes !== "" ? parseInt(this._minutes, 10) : 0;
-          this._minutes = String((i - this._minuteStep + 60) % 60).padStart(2, "0"), this._syncValueFromDisplay(), this.onInput();
-          break;
-        }
-        case "ArrowLeft":
-          t.preventDefault(), (s = this.hoursInputRef.value) == null || s.focus();
-          break;
-        case "Backspace":
-        case "Delete":
-          this._minutesDigitCount = 0, this._minutesFirstDigit = -1;
-          break;
-        case "Tab":
-          break;
-        case "Enter": {
-          t.preventDefault();
-          const i = this.internals.form;
-          i ? i.requestSubmit() : e.blur();
-          break;
-        }
-        default:
-          if (/^\d$/.test(t.key)) {
-            t.preventDefault();
-            const i = parseInt(t.key, 10);
-            if (this._minutesDigitCount === 0)
-              this._minutesFirstDigit = i, this._minutes = String(i).padStart(2, "0"), this._minutesDigitCount = 1, this.onInput(), i >= 6 && (this._minutesFirstDigit = -1, this._minutesDigitCount = 0, this._syncValueFromDisplay());
-            else {
-              const n = this._minutesFirstDigit * 10 + i;
-              this._minutes = n <= 59 ? String(n).padStart(2, "0") : String(i).padStart(2, "0"), this._minutesFirstDigit = -1, this._minutesDigitCount = 0, this._syncValueFromDisplay(), this.onInput();
-            }
-          } else
-            t.preventDefault();
-      }
-    }, 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 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 ?? "";
-      switch (t.key) {
-        case "ArrowDown":
-          t.preventDefault(), this._focusOptionAndSync(i[Math.min(n + 1, i.length - 1)], r);
-          break;
-        case "ArrowUp":
-          t.preventDefault(), this._focusOptionAndSync(i[Math.max(n - 1, 0)], r);
-          break;
-        case "Home":
-          t.preventDefault(), this._focusOptionAndSync(i[0], r);
-          break;
-        case "End":
-          t.preventDefault(), this._focusOptionAndSync(i[i.length - 1], r);
-          break;
-        case "ArrowRight":
-          t.preventDefault(), r === "hour" && (this._focusOptionAndSync(e, r), this.updateComplete.then(() => {
-            this._scrollToSelected(), this._focusSelectedOrFirst("minute");
-          }));
-          break;
-        case "ArrowLeft":
-          t.preventDefault(), r === "minute" && (this._focusOptionAndSync(e, r), this.updateComplete.then(() => {
-            this._scrollToSelected(), this._focusSelectedOrFirst("hour");
-          }));
-          break;
-        case "Enter":
-        case " ":
-          t.preventDefault(), e.click();
-          break;
-        case "Escape":
-          t.preventDefault(), this._closePopup(), (o = this.buttonRef.value) == null || o.focus();
-          break;
-      }
-    };
-  }
-  /**
-   * Exposes hiddenInputRef as inputRef so the base class validate() method
-   * triggers our manageValidity override automatically after every onChange call.
-   * The hidden input itself is never used for reporting — see manageValidity below.
-   */
-  get inputRef() {
-    return this.hiddenInputRef;
-  }
-  /**
-   * Overrides the base class manageValidity to solve a focusability problem:
-   * the browser requires the third argument to setValidity (the "anchor") to be
-   * a visible, focusable element — it focuses that element when navigating to an
-   * invalid field. Our hidden input[type=time] cannot receive focus, so passing it
-   * as the anchor would silently fail with "form control is not focusable".
-   */
-  manageValidity(t) {
-    const e = this.hoursInputRef.value;
-    if (!e) return;
-    if (this.required && !this.value) {
-      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 = f(this.value), i = g(this.step);
-    if (this.min && s < f(String(this.min))) {
-      this.internals.setValidity(
-        { rangeUnderflow: !0 },
-        c.forms.messages.rangeUnderflowMin.replace("{min}", String(this.min)),
-        e
-      ), this._setAriaInvalid(!0);
-      return;
-    }
-    if (this.max && s > f(String(this.max))) {
-      this.internals.setValidity(
-        { rangeOverflow: !0 },
-        c.forms.messages.rangeOverflowMax.replace("{max}", String(this.max)),
-        e
-      ), this._setAriaInvalid(!0);
-      return;
-    }
-    if (this.step && s % i !== 0) {
-      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}`
-      );
-      this.internals.setValidity({ stepMismatch: !0 }, n, e), this._setAriaInvalid(!0);
-      return;
-    }
-    this.internals.setValidity({}), this._setAriaInvalid(!1);
-  }
-  _setAriaInvalid(t) {
-    if (!this.touched && t) return;
-    const e = this.hoursInputRef.value, s = this.minutesInputRef.value;
-    t ? (e == null || e.setAttribute("aria-invalid", "true"), s == null || s.setAttribute("aria-invalid", "true")) : (e == null || e.removeAttribute("aria-invalid"), s == null || s.removeAttribute("aria-invalid"));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("focusin", this._handleComponentFocusIn), this.addEventListener("focusout", this._handleComponentFocusOut), document.addEventListener("click", this._outsideClickHandler);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("focusin", this._handleComponentFocusIn), this.removeEventListener("focusout", this._handleComponentFocusOut), document.removeEventListener("click", this._outsideClickHandler);
-  }
-  willUpdate(t) {
-    super.willUpdate(t), t.has("value") && this._syncDisplayFromValue();
-  }
-  updated(t) {
-    super.updated(t), this.classList.toggle("pkt-timepicker--stepper", this.stepArrows), this.classList.toggle("pkt-timepicker--fullwidth", this.fullwidth), t.has("step") && this.step !== null && !this._isValidStep(this.step) && console.warn(
-      `pkt-timepicker: step="${this.step}" er ikke en gyldig verdi. Step må være et multiplum av 60 (hele minutter) eller nøyaktig 3600 (hel time).`
-    );
-  }
-  formResetCallback() {
-    super.formResetCallback(), this._hours = "", this._minutes = "", this._isOpen = !1;
-  }
-  _isValidStep(t) {
-    return t === 3600 || t < 3600 && 3600 % t === 0 && t % 60 === 0;
-  }
-  _syncDisplayFromValue() {
-    const t = O(this.value) ? this.value.split(":") : null;
-    t ? (this._hours = t[0], this._minutes = t[1]) : (this._hours = "", this._minutes = "");
-  }
-  _syncValueFromDisplay() {
-    if (this._hours !== "" && this._minutes !== "") {
-      const t = `${this._hours}:${this._minutes}`;
-      t !== this.value && (this.value = t, this.onChange(t));
-    } else this.value !== "" && (this.value = "", this.onChange(""));
-  }
-  get _minuteStep() {
-    return g(this.step);
-  }
-  get _hourOptions() {
-    return T(this.min, this.max);
-  }
-  get _minuteOptions() {
-    return M(this.step);
-  }
-  _openPopup() {
-    this._isOpen = !0, this.updateComplete.then(() => {
-      this._scrollToSelected(), this._focusSelectedOrFirst("hour");
-    });
-  }
-  _closePopup() {
-    this._isOpen = !1, this._syncValueFromDisplay();
-  }
-  _togglePopup() {
-    this._isOpen ? this._closePopup() : this._openPopup();
-  }
-  _scrollToSelected() {
-    const t = this.querySelector(".pkt-timepicker-popup");
-    t && t.querySelectorAll(".pkt-timepicker-popup__col").forEach((e) => {
-      const s = e.querySelector(".pkt-timepicker-popup__option--selected");
-      s && s.scrollIntoView({ block: "center" });
-    });
-  }
-  _focusSelectedOrFirst(t) {
-    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];
-    if (!i) return;
-    const n = i.querySelector(
-      ".pkt-timepicker-popup__option--selected"
-    ), r = i.querySelector(".pkt-timepicker-popup__option");
-    (o = n || r) == null || o.focus();
-  }
-  _handleOptionClick(t, e) {
-    var i;
-    const s = String(t).padStart(2, "0");
-    e === "hour" ? (this._hours = s, this.updateComplete.then(() => this._focusSelectedOrFirst("minute"))) : (this._minutes = s, this._closePopup(), (i = this.buttonRef.value) == null || i.focus());
-  }
-  _focusOptionAndSync(t, e) {
-    if (!t) return;
-    const s = parseInt(t.dataset.value ?? "0", 10);
-    e === "hour" ? this._hours = String(s).padStart(2, "0") : this._minutes = String(s).padStart(2, "0"), t.focus();
-  }
-  _stepTime(t) {
-    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=${F({
-      "pkt-btn": !0,
-      "pkt-btn--tertiary": !0,
-      "pkt-btn--small": !0,
-      "pkt-btn--label-only": !0,
-      "pkt-timepicker-popup__option": !0,
-      "pkt-timepicker-popup__option--selected": n
-    })}
-        type="button"
-        role="option"
-        aria-selected=${n ? "true" : "false"}
-        tabindex=${n ? "0" : "-1"}
-        data-type=${e}
-        data-value=${t}
-        @click=${(r) => {
-      r.stopImmediatePropagation(), this._handleOptionClick(t, e);
-    }}
-      >
-        <span class="pkt-btn__text pkt-txt-14-light">${s}</span>
-      </button>
-    `;
-  }
-  _renderPopup() {
-    var t, e, s;
-    return u`
-      <div
-        class="pkt-timepicker-popup"
-        id=${this.id + "-popup"}
-        ?hidden=${!this._isOpen}
-        role="group"
-        aria-label=${((t = this.strings.timepicker) == null ? void 0 : t.selectTime) ?? "Velg tidspunkt"}
-        @keydown=${this._handlePopupKeydown}
-        @focusout=${(i) => {
-      var n;
-      (n = this.querySelector(".pkt-timepicker-popup")) != null && n.contains(i.relatedTarget) || this._closePopup();
-    }}
-      >
-        <div
-          class="pkt-timepicker-popup__col"
-          role="listbox"
-          aria-label=${((e = this.strings.timepicker) == null ? void 0 : e.hours) ?? "Timer"}
-          aria-orientation="vertical"
-        >
-          ${this._hourOptions.map((i) => this._renderOption(i, "hour"))}
-        </div>
-        <div
-          class="pkt-timepicker-popup__col"
-          role="listbox"
-          aria-label=${((s = this.strings.timepicker) == null ? void 0 : s.minutes) ?? "Minutter"}
-          aria-orientation="vertical"
-        >
-          ${this._minuteOptions.map((i) => this._renderOption(i, "minute"))}
-        </div>
-      </div>
-    `;
-  }
-  _renderContainer() {
-    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=${(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=${((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"
-                  >${(($ = this.strings.timepicker) == null ? void 0 : $.prevTime) ?? "Forrige tidspunkt"}</span
-                >
-              </button>
-            ` : p}
-        <input
-          ${_(this.hoursInputRef)}
-          type="text"
-          inputmode="numeric"
-          maxlength="2"
-          size="2"
-          class="pkt-input pkt-timepicker__input"
-          id=${this.id + "-hours"}
-          data-min="0"
-          data-max="23"
-          .value=${this._hours}
-          placeholder="––"
-          aria-label=${s}
-          role="spinbutton"
-          aria-invalid=${this.hasError ? "true" : p}
-          aria-valuemin="0"
-          aria-valuemax="23"
-          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=${(h) => {
-      h.target.select(), h.stopImmediatePropagation();
-    }}
-        />
-        <span class="pkt-timepicker__separator">:</span>
-        <input
-          ${_(this.minutesInputRef)}
-          type="text"
-          inputmode="numeric"
-          maxlength="2"
-          size="2"
-          class="pkt-input pkt-timepicker__input"
-          id=${this.id + "-minutes"}
-          data-min="0"
-          data-max="59"
-          .value=${this._minutes}
-          placeholder="––"
-          aria-label=${i}
-          role="spinbutton"
-          aria-invalid=${this.hasError ? "true" : p}
-          aria-valuemin="0"
-          aria-valuemax="59"
-          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=${(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>` : 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=${((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"}
-                ?disabled=${this.disabled}
-                @click=${this._togglePopup}
-              >
-                <pkt-icon name="clock"></pkt-icon>
-                <span class="pkt-btn__text"
-                  >${((S = this.strings.timepicker) == null ? void 0 : S.openPicker) ?? "Åpne tidspunkt-velger"}</span
-                >
-              </button>
-            ` : 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=${((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"
-                  >${((w = this.strings.timepicker) == null ? void 0 : w.nextTime) ?? "Neste tidspunkt"}</span
-                >
-              </button>
-            ` : p}
-        <input
-          ${_(this.hiddenInputRef)}
-          type="time"
-          hidden
-          name=${this.name || this.id}
-          id=${this.id + "-input"}
-          .value=${this.value}
-          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"
-        />
-      </div>
-    `;
-  }
-  render() {
-    return u`
-      <pkt-input-wrapper
-        label="${this.label}"
-        ?disabled=${this.disabled}
-        ?fullwidth=${this.fullwidth}
-        ?hasError=${this.hasError}
-        ?inline=${this.inline}
-        ?optionalTag=${this.optionalTag}
-        ?required=${this.required}
-        ?requiredTag=${this.requiredTag}
-        useWrapper=${this.useWrapper}
-        .ariaDescribedBy=${this.ariaDescribedBy}
-        .errorMessage=${this.errorMessage}
-        .forId="${this.id + "-hours"}"
-        .helptext=${this.helptext}
-        .helptextDropdown=${this.helptextDropdown}
-        .helptextDropdownButton=${this.helptextDropdownButton}
-        .optionalText=${this.optionalText}
-        .requiredText=${this.requiredText}
-        .tagText=${this.tagText}
-      >
-        <div class="pkt-contents" slot="helptext">${C(this, "helptext")}</div>
-        ${!this.hidePicker && !this.stepArrows ? u`
-              <div class="pkt-timepicker__anchor">
-                ${this._renderContainer()} ${this._renderPopup()}
-              </div>
-            ` : this._renderContainer()}
-      </pkt-input-wrapper>
-    `;
-  }
-}
-d([
-  b({ type: String, reflect: !0 })
-], l.prototype, "value");
-d([
-  b({ type: Boolean, reflect: !0, attribute: "hide-picker" })
-], l.prototype, "hidePicker");
-d([
-  b({ type: Boolean, reflect: !0, attribute: "step-arrows" })
-], l.prototype, "stepArrows");
-d([
-  v()
-], l.prototype, "_hours");
-d([
-  v()
-], l.prototype, "_minutes");
-d([
-  v()
-], l.prototype, "_isOpen");
-try {
-  I("pkt-timepicker")(l);
-} catch {
-  console.warn("Forsøker å definere <pkt-timepicker>, men den er allerede definert");
-}
-export {
-  l as PktTimepicker
-};
+import { t as e } from "./timepicker-DaSwn1FA.js";
+export { e as PktTimepicker };

package/dist/progressbar-CdXtmOBb.cjs

@@ -0,0 +1,17 @@
+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-CjAbIttF.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}});