@oslokommune/punkt-elements 16.6.2 → 16.7.1

package/dist/pkt-timepicker.js

@@ -0,0 +1,558 @@
+import { s as d, b as u, A as o, n as b, t as x } 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")
+  };
+};
+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;
+};
+let h = class extends F {
+  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 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();
+            }
+          } 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 a;
+      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(), (a = this.buttonRef.value) == null || a.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 }, d.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))) {
+      this.internals.setValidity(
+        { rangeUnderflow: !0 },
+        d.forms.messages.rangeUnderflowMin.replace("{min}", String(this.min)),
+        e
+      ), this._setAriaInvalid(!0);
+      return;
+    }
+    if (this.max && s > k(String(this.max))) {
+      this.internals.setValidity(
+        { rangeOverflow: !0 },
+        d.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(
+        "{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 = C(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 O(this.min, this.max);
+  }
+  get _minuteOptions() {
+    return T(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 a;
+    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");
+    (a = n || r) == null || a.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 = M(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({
+      "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, a, p, $, y, S, D;
+    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();
+    }}
+      >
+        ${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"}
+                ?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
+                >
+              </button>
+            ` : o}
+        <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" : o}
+          aria-valuemin="0"
+          aria-valuemax="23"
+          aria-valuenow=${this._hours !== "" ? this._hours : o}
+          aria-valuetext=${this._hours !== "" ? `${this._hours} ${t.toLowerCase()}` : o}
+          autocomplete="off"
+          ?disabled=${this.disabled}
+          @keydown=${this._handleHoursKeydown}
+          @blur=${this._handleHoursBlur}
+          @focus=${(l) => {
+      l.target.select(), l.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" : o}
+          aria-valuemin="0"
+          aria-valuemax="59"
+          aria-valuenow=${this._minutes !== "" ? this._minutes : o}
+          aria-valuetext=${this._minutes !== "" ? `${this._minutes} ${e.toLowerCase()}` : o}
+          autocomplete="off"
+          ?disabled=${this.disabled}
+          @keydown=${this._handleMinutesKeydown}
+          @blur=${this._handleMinutesBlur}
+          @focus=${(l) => {
+      l.target.select(), l.stopImmediatePropagation();
+    }}
+        />
+        ${this.hidePicker && !this.stepArrows ? u`<pkt-icon
+              class="pkt-input-icon pkt-timepicker__icon"
+              name="clock"
+              aria-hidden="true"
+            ></pkt-icon>` : o}
+        ${!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-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"
+                  >${((y = this.strings.timepicker) == null ? void 0 : y.openPicker) ?? "Åpne tidspunkt-velger"}</span
+                >
+              </button>
+            ` : o}
+        ${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"}
+                ?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
+                >
+              </button>
+            ` : o}
+        <input
+          ${_(this.hiddenInputRef)}
+          type="time"
+          hidden
+          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)}
+          ?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">${A(this, "helptext")}</div>
+        ${!this.hidePicker && !this.stepArrows ? u`
+              <div class="pkt-timepicker__anchor">
+                ${this._renderContainer()} ${this._renderPopup()}
+              </div>
+            ` : this._renderContainer()}
+      </pkt-input-wrapper>
+    `;
+  }
+};
+c([
+  b({ type: String, reflect: !0 })
+], h.prototype, "value", 2);
+c([
+  b({ type: Boolean, reflect: !0, attribute: "hide-picker" })
+], h.prototype, "hidePicker", 2);
+c([
+  b({ type: Boolean, reflect: !0, attribute: "step-arrows" })
+], h.prototype, "stepArrows", 2);
+c([
+  v()
+], h.prototype, "_hours", 2);
+c([
+  v()
+], h.prototype, "_minutes", 2);
+c([
+  v()
+], h.prototype, "_isOpen", 2);
+h = c([
+  x("pkt-timepicker")
+], h);
+export {
+  h as PktTimepicker
+};

package/dist/{progressbar-CcX-xiPI.js → progressbar-By7e0lEI.js}

@@ -1,10 +1,10 @@
-import { e as n } from "./class-map-3ADKve8g.js";
-import { E as g, P as _, A as c, b, n as u, t as $ } from "./element-CV9utnHJ.js";
-import { r as h } from "./state-l4hGZdFJ.js";
-import { e as y, n as A } from "./ref-DBGHvw2G.js";
+import { e as n } from "./class-map-CEnykyO_.js";
+import { E as g, P as _, A as c, b, n as u, t as $ } from "./element-CPpT3rFQ.js";
+import { r as h } from "./state-C_1EOo3D.js";
+import { e as y, n as A } from "./ref-Bg_Swj5w.js";
 import { e as x, i as T, t as k } from "./directive-oAbCiebi.js";
 import { u as d } from "./utils-DznhwRXm.js";
-import "./icon-D0IQAVwS.js";
+import "./icon-BlKA8YuW.js";
 /**
  * @license
  * Copyright 2018 Google LLC

package/dist/{progressbar-CC9Qr82_.cjs → progressbar-DsJ2B9Vm.cjs}

@@ -1,4 +1,4 @@
-"use strict";const n=require("./class-map-Bokp1SoS.cjs"),e=require("./element-CMTfByxQ.cjs"),p=require("./state-BNgpvY-A.cjs"),h=require("./ref-DahIePMT.cjs"),b=require("./directive-C7oCP5Bh.cjs"),d=require("./utils-byXsEz1u.cjs");require("./icon-Dj0oZZSa.cjs");/**
+"use strict";const n=require("./class-map-CsENJXf1.cjs"),e=require("./element-gR_VtSiD.cjs"),p=require("./state-Dg-53wQ8.cjs"),h=require("./ref-CL-Xk9Xm.cjs"),b=require("./directive-C7oCP5Bh.cjs"),d=require("./utils-byXsEz1u.cjs");require("./icon-Bqj9oBbl.cjs");/**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{radiobutton-RW3h0tJj.js → radiobutton-6frNG9J_.js}

@@ -1,8 +1,8 @@
-import { b as h, A as n, n as s, t as d } from "./element-CV9utnHJ.js";
-import { r as k } from "./state-l4hGZdFJ.js";
-import { P as f } from "./input-element-n5U38pZ1.js";
-import { e as g, n as b } from "./ref-DBGHvw2G.js";
-import { e as u } from "./class-map-3ADKve8g.js";
+import { b as h, A as n, n as s, t as d } from "./element-CPpT3rFQ.js";
+import { r as k } from "./state-C_1EOo3D.js";
+import { P as f } from "./input-element-8nLwuQS4.js";
+import { e as g, n as b } from "./ref-Bg_Swj5w.js";
+import { e as u } from "./class-map-CEnykyO_.js";
 var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, a, c, l) => {
   for (var p = l > 1 ? void 0 : l ? $(a, c) : a, r = e.length - 1, o; r >= 0; r--)
     (o = e[r]) && (p = (l ? o(a, c, p) : o(p)) || p);

package/dist/{radiobutton-BUDQYAH-.cjs → radiobutton-Bv-BZ1Hw.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-CMTfByxQ.cjs"),r=require("./state-BNgpvY-A.cjs"),u=require("./input-element-Xe9FTi2a.cjs"),h=require("./ref-DahIePMT.cjs"),c=require("./class-map-Bokp1SoS.cjs");var d=Object.defineProperty,k=Object.getOwnPropertyDescriptor,i=(p,e,n,a)=>{for(var s=a>1?void 0:a?k(e,n):e,o=p.length-1,l;o>=0;o--)(l=p[o])&&(s=(a?l(e,n,s):l(s))||s);return a&&s&&d(e,n,s),s};exports.PktRadioButton=class extends u.PktInputElement{constructor(){super(...arguments),this.inputRef=h.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.checked=null,this.type="radio",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut",this._checked=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,n,a){e==="defaultChecked"&&(this._checked=this.defaultChecked),e==="checked"&&(this._checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(e,n,a)}render(){const e=c.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),n=c.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=c.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-sr-only":this.hideLabel}),s="pkt-tag pkt-tag--small pkt-tag--thin-text",o=()=>t.b`
+"use strict";const t=require("./element-gR_VtSiD.cjs"),r=require("./state-Dg-53wQ8.cjs"),u=require("./input-element-DdVhUvva.cjs"),h=require("./ref-CL-Xk9Xm.cjs"),c=require("./class-map-CsENJXf1.cjs");var d=Object.defineProperty,k=Object.getOwnPropertyDescriptor,i=(p,e,n,a)=>{for(var s=a>1?void 0:a?k(e,n):e,o=p.length-1,l;o>=0;o--)(l=p[o])&&(s=(a?l(e,n,s):l(s))||s);return a&&s&&d(e,n,s),s};exports.PktRadioButton=class extends u.PktInputElement{constructor(){super(...arguments),this.inputRef=h.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.checked=null,this.type="radio",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut",this._checked=!1}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,n,a){e==="defaultChecked"&&(this._checked=this.defaultChecked),e==="checked"&&(this._checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(e,n,a)}render(){const e=c.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),n=c.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=c.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-sr-only":this.hideLabel}),s="pkt-tag pkt-tag--small pkt-tag--thin-text",o=()=>t.b`
         ${this.tagText?t.b`<span class=${s+" pkt-tag--gray"}>${this.tagText}</span>`:t.A}
         ${this.optionalTag?t.b`<span class=${s+" pkt-tag--blue-light"}>${this.optionalText}</span>`:t.A}
         ${this.requiredTag?t.b`<span class=${s+" pkt-tag--beige"}>${this.requiredText}</span>`:t.A}

package/dist/{ref-DBGHvw2G.js → ref-Bg_Swj5w.js}

@@ -1,5 +1,5 @@
-import { A as o } from "./element-CV9utnHJ.js";
-import { f as n } from "./async-directive-CKx6pubI.js";
+import { A as o } from "./element-CPpT3rFQ.js";
+import { f as n } from "./async-directive-CMzWMlZ5.js";
 import { e as r } from "./directive-oAbCiebi.js";
 /**
  * @license

package/dist/{ref-DahIePMT.cjs → ref-CL-Xk9Xm.cjs}

@@ -1,4 +1,4 @@
-"use strict";const n=require("./element-CMTfByxQ.cjs"),o=require("./async-directive-B158h3ba.cjs"),c=require("./directive-C7oCP5Bh.cjs");/**
+"use strict";const n=require("./element-gR_VtSiD.cjs"),o=require("./async-directive-DoMuclel.cjs"),c=require("./directive-C7oCP5Bh.cjs");/**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{repeat-DnlRNf63.js → repeat-BD8TKgJb.js}

@@ -1,6 +1,6 @@
-import { E as w } from "./element-CV9utnHJ.js";
+import { E as w } from "./element-CPpT3rFQ.js";
 import { e as A, i as E, t as M } from "./directive-oAbCiebi.js";
-import { M as b, u as p, v, h as x, p as j } from "./directive-helpers-CyPtA1_i.js";
+import { M as b, u as p, v, h as x, p as j } from "./directive-helpers-rm-28gIj.js";
 /**
  * @license
  * Copyright 2017 Google LLC

package/dist/{repeat-C-FJ2vfy.cjs → repeat-Cfq8CDlf.cjs}

@@ -1,4 +1,4 @@
-"use strict";const w=require("./element-CMTfByxQ.cjs"),x=require("./directive-C7oCP5Bh.cjs"),s=require("./directive-helpers-B3Vpl3xV.cjs");/**
+"use strict";const w=require("./element-gR_VtSiD.cjs"),x=require("./directive-C7oCP5Bh.cjs"),s=require("./directive-helpers-BP2WOx60.cjs");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{select-iXKeM3yz.js → select-CXZt1nHS.js}

@@ -1,11 +1,11 @@
-import { n as u, b as a, t as v } from "./element-CV9utnHJ.js";
-import { e as f, n as _ } from "./ref-DBGHvw2G.js";
-import { o as l } from "./if-defined-rXcLNTzN.js";
-import { r as $ } from "./state-l4hGZdFJ.js";
-import { P as x } from "./input-element-n5U38pZ1.js";
-import { P as m } from "./pkt-options-controller-W4ITGQy9.js";
-import { s as b } from "./element-with-slot-1djk8KXi.js";
-import "./input-wrapper-B__6jW4U.js";
+import { n as u, b as a, t as v } from "./element-CPpT3rFQ.js";
+import { e as f, n as _ } from "./ref-Bg_Swj5w.js";
+import { o as l } from "./if-defined-B0krMLad.js";
+import { r as $ } from "./state-C_1EOo3D.js";
+import { P as x } from "./input-element-8nLwuQS4.js";
+import { P as m } from "./pkt-options-controller-B5YalfCb.js";
+import { s as b } from "./element-with-slot-Dqk6-TRR.js";
+import "./input-wrapper-B2JpK016.js";
 var g = Object.defineProperty, d = (e, t, s, o) => {
   for (var i = void 0, n = e.length - 1, p; n >= 0; n--)
     (p = e[n]) && (i = p(t, s, i) || i);