@oslokommune/punkt-elements 14.5.4 → 15.0.0

package/dist/datepicker-DvcH2QD9.js

@@ -0,0 +1,1160 @@
+import { P as L, E as D, x as h, n as r, t as x } from "./element-BXsf_NlG.js";
+import { r as z } from "./state-DgnkjP0q.js";
+import { s as H, f as N, a as Q, i as X, n as k, b as j, c as W, v as P, d as Y, p as Z, e as G } from "./calendar-BMarIeVp.js";
+import { P as ee } from "./input-element-CbjYtVou.js";
+import { e as f, n as v } from "./ref-BxiKhrfa.js";
+import "./icon-DBZvMard.js";
+import "./input-wrapper-Bwmva-69.js";
+import { e as $ } from "./class-map-Dt2jXOlF.js";
+import { c as te } from "./repeat-B55jMEsG.js";
+import "./tag-DIJMJhyp.js";
+import { u as se, s as ie } from "./utils-DznhwRXm.js";
+import { o as g } from "./if-defined-CxHgig4I.js";
+import { P as ae } from "./pkt-slot-controller-D7CrjM52.js";
+const J = {
+  calendar: { buttonAltText: "Åpne kalender" }
+}, ne = {
+  calendar: { buttonAltText: "Åpne kalender" },
+  generic: { from: "Fra", to: "Til" }
+};
+var le = Object.defineProperty, re = Object.getOwnPropertyDescriptor, E = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? re(t, s) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && le(t, s, i), i;
+};
+let w = class extends L {
+  constructor() {
+    super(...arguments), this.dates = [], this.dateformat = "dd.MM.yyyy", this.className = "pkt-datepicker__tags", this.idBase = se();
+  }
+  render() {
+    return this.classes = {
+      "pkt-date-tags": !0,
+      [this.className]: !0
+    }, h`
+      <div class=${$(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates) && this.dates[0] ? te(
+      H((this.dates ?? []).filter(Boolean)),
+      (e) => e,
+      (e) => {
+        var t;
+        return h` <pkt-tag
+                  id=${this.idBase + e + "-tag"}
+                  closeTag
+                  @close=${() => {
+          this.dispatchEvent(new CustomEvent("date-tag-removed", { detail: e }));
+        }}
+                  .ariaLabel=${`${(t = this.strings) == null ? void 0 : t.calendar.deleteDate} ${N(e, this.dateformat)}`}
+                >
+                  <time datetime=${e}>${N(e, this.dateformat)}</time>
+                </pkt-tag>`;
+      }
+    ) : D}
+      </div>
+    `;
+  }
+};
+E([
+  r({ type: Array })
+], w.prototype, "dates", 2);
+E([
+  r({ type: String })
+], w.prototype, "dateformat", 2);
+E([
+  r({ type: String, attribute: "class" })
+], w.prototype, "className", 2);
+E([
+  r({ type: String, attribute: "id-base" })
+], w.prototype, "idBase", 2);
+w = E([
+  x("pkt-date-tags")
+], w);
+const oe = { dateformat: { default: "dd.MM.yyyy" }, weeknumbers: { default: !1 }, withcontrols: { default: !1 }, multiple: { default: !1 }, range: { default: !1 } }, _ = {
+  props: oe
+}, b = () => {
+  const e = navigator.userAgent;
+  return !!(/iP(hone|od|ad)/.test(e) || /Macintosh/.test(e) && "ontouchend" in document);
+}, ue = () => b() ? "text" : "date", pe = (e) => !e || e.length !== 2 ? !0 : X(e[0], e[1]), he = (e) => H(e), de = (e, t, s, n, i) => Q(e, t, s, n, i), ce = (e, t, s, n, i, a) => ({
+  "pkt-input": !0,
+  "pkt-datepicker__input": !0,
+  "pkt-input--fullwidth": e,
+  "pkt-datepicker--hasrangelabels": t,
+  "pkt-datepicker--multiple": s,
+  "pkt-datepicker--range": n,
+  "ios-readonly-hack": i === !1 && a === "text"
+}), fe = () => ({
+  "pkt-input-icon": !0,
+  "pkt-btn": !0,
+  "pkt-btn--icon-only": !0,
+  "pkt-btn--tertiary": !0,
+  "pkt-datepicker__calendar-button": !0
+}), ge = (e) => ({
+  "pkt-input-prefix": e,
+  "pkt-hide": !e
+}), me = (e, t, s) => !t && !s ? Array.isArray(e) ? e[0] || "" : e : Array.isArray(e) ? e.join(",") : e, ve = (e, t, s = !1) => {
+  var o;
+  if (!e || !t) return;
+  const n = ((o = t.parentElement) == null ? void 0 : o.getBoundingClientRect()) || t.getBoundingClientRect(), i = s ? n.height + 30 : n.height, a = e.getBoundingClientRect().height;
+  let l = s ? "calc(100% - 30px)" : "100%";
+  n && n.top + a > window.innerHeight && n.top - a > 0 && (l = `calc(100% - ${i}px - ${a}px)`), e.style.top = l;
+}, ye = (e, t, s, n, i, a) => {
+  const { key: l } = e;
+  l === "," && (e.preventDefault(), a ? a(e) : i && i()), (l === "Space" || l === " ") && (e.preventDefault(), t(e)), l === "Enter" && (e.preventDefault(), s ? s() : n ? n() : i && i());
+}, $e = (e, t) => {
+  const { key: s } = e;
+  (s === "Enter" || s === " " || s === "Space") && (e.preventDefault(), t(e));
+}, q = {
+  validateRangeOrder: pe,
+  sortDates: he,
+  filterSelectableDates: de
+}, be = {
+  getInputType: ue
+}, T = {
+  submitForm(e) {
+    var s;
+    const t = (s = e.internals) == null ? void 0 : s.form;
+    t && t.requestSubmit();
+  },
+  submitFormOrFallback(e, t) {
+    const s = e == null ? void 0 : e.form;
+    s ? s.requestSubmit() : t();
+  },
+  validateDateInput(e, t, s, n, i) {
+    var l, o, K, U;
+    const a = e.value;
+    a && (s && s > a ? t.setValidity(
+      { rangeUnderflow: !0 },
+      ((o = (l = i == null ? void 0 : i.forms) == null ? void 0 : l.messages) == null ? void 0 : o.rangeUnderflow) || "Value is below minimum",
+      e
+    ) : n && n < a && t.setValidity(
+      { rangeOverflow: !0 },
+      ((U = (K = i == null ? void 0 : i.forms) == null ? void 0 : K.messages) == null ? void 0 : U.rangeOverflow) || "Value is above maximum",
+      e
+    ));
+  }
+}, I = {
+  addToSelected(e, t, s, n) {
+    const i = e.target;
+    if (!i.value) return;
+    const a = s ? k(s) : null, l = n ? k(n) : null, o = k(i.value.split(",")[0]);
+    o && !isNaN(o.getTime()) && (!a || o >= a) && (!l || o <= l) && t.value && t.value.handleDateSelect(o), i.value = "";
+  },
+  handleCalendarPosition(e, t, s = !1) {
+    ve(e.value ?? null, t.value ?? null, s);
+  }
+}, V = {
+  getInputClasses: ce,
+  getButtonClasses: fe,
+  getRangeLabelClasses: ge
+}, F = {
+  processDateSelection: me,
+  updateInputValues(e, t, s, n, i, a) {
+    e.value && (n && (t != null && t.value) ? (e.value.value = s[0] ?? "", t.value.value = s[1] ?? "", a(e.value), a(t.value)) : i || (e.value.value = s.length ? s[0] : "", a(e.value)));
+  },
+  processRangeBlur(e, t, s, n, i) {
+    var l;
+    const a = e.target;
+    if (a.value) {
+      i(a);
+      const o = j(a.value);
+      o && ((l = s == null ? void 0 : s.value) == null || l.handleDateSelect(o));
+    } else t[0] && n();
+  }
+}, O = {
+  handleInputKeydown: ye,
+  handleButtonKeydown: $e
+};
+var ke = Object.defineProperty, we = Object.getOwnPropertyDescriptor, c = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? we(t, s) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && ke(t, s, i), i;
+};
+let d = class extends L {
+  constructor() {
+    super(...arguments), this.open = !1, this.multiple = !1, this.range = !1, this.weeknumbers = !1, this.withcontrols = !1, this.maxMultiple = null, this.selected = [], this.earliest = null, this.latest = null, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.today = null, this._hasBeenOpened = !1, this.popupRef = f(), this.calendarRef = f(), this.handleDocumentClick = (e) => {
+      if (!this.open) return;
+      const t = e.composedPath(), s = this.parentElement, n = this.popupRef.value;
+      !t.includes(this) && !t.includes(n) && !(s && t.includes(s)) && (this.hide(), this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 })));
+    }, this.handleDocumentKeydown = (e) => {
+      this.open && e.key === "Escape" && (this.hide(), this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 })));
+    };
+  }
+  firstUpdated() {
+    this.calRef = this.calendarRef;
+  }
+  updated(e) {
+    super.updated(e), e.has("open") && (this.open ? (this._hasBeenOpened = !0, document.addEventListener("keydown", this.handleDocumentKeydown), document.addEventListener("click", this.handleDocumentClick)) : (document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleDocumentKeydown)));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleDocumentKeydown);
+  }
+  show() {
+    var e;
+    this.open = !0, (e = this.calendarRef.value) == null || e.focus();
+  }
+  hide() {
+    this.open = !1;
+  }
+  toggle() {
+    this.open ? this.hide() : this.show();
+  }
+  contains(e) {
+    var t;
+    return !!e && !!((t = this.popupRef.value) != null && t.contains(e));
+  }
+  focusOnCurrentDate() {
+    const e = this.calendarRef.value;
+    e && typeof e.focusOnCurrentDate == "function" && e.focusOnCurrentDate();
+  }
+  addToSelected(e, t, s) {
+    if (this.calendarRef.value && typeof I.addToSelected == "function")
+      return I.addToSelected(e, this.calendarRef, t, s);
+    const i = e.target;
+    if (!i.value) return;
+    const a = t ? k(t) : null, l = s ? k(s) : null, o = k(i.value.split(",")[0]);
+    o && !isNaN(o.getTime()) && (!a || o >= a) && (!l || o <= l) && this.handleDateSelect(o), i.value = "";
+  }
+  handleDateSelect(e) {
+    const t = this.calendarRef.value;
+    if (t && typeof t.handleDateSelect == "function") return t.handleDateSelect(e);
+    const s = W(e), i = this.selected.indexOf(s) >= 0 ? this.selected.filter((a) => a !== s) : [...this.selected, s];
+    this.selected = i, this.dispatchEvent(
+      new CustomEvent("date-selected", { detail: i, bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    const e = { "pkt-calendar-popup": !0, show: this.open, hide: !this.open };
+    return h`
+      <div
+        class="${$(e)}"
+        ${v(this.popupRef)}
+        id="date-popup"
+        ?hidden=${!this.open}
+        aria-hidden="${!this.open}"
+      >
+        ${this.open || this._hasBeenOpened ? h`<pkt-calendar
+              ${v(this.calendarRef)}
+              ?multiple=${this.multiple}
+              ?range=${this.range}
+              ?weeknumbers=${this.weeknumbers}
+              ?withcontrols=${this.withcontrols}
+              .maxMultiple=${this.maxMultiple}
+              .selected=${this.selected}
+              .earliest=${this.earliest}
+              .latest=${this.latest}
+              .excludedates=${this.excludedates}
+              .excludeweekdays=${this.excludeweekdays}
+              .currentmonth=${this.currentmonth}
+              .today=${this.today}
+              @date-selected=${(t) => {
+      this.selected = t.detail, this.dispatchEvent(
+        new CustomEvent("date-selected", { detail: t.detail, bubbles: !0, composed: !0 })
+      );
+    }}
+              @close=${() => {
+      this.hide(), this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
+    }}
+            ></pkt-calendar>` : D}
+      </div>
+    `;
+  }
+};
+c([
+  r({ type: Boolean, reflect: !0 })
+], d.prototype, "open", 2);
+c([
+  r({ type: Boolean })
+], d.prototype, "multiple", 2);
+c([
+  r({ type: Boolean })
+], d.prototype, "range", 2);
+c([
+  r({ type: Boolean })
+], d.prototype, "weeknumbers", 2);
+c([
+  r({ type: Boolean })
+], d.prototype, "withcontrols", 2);
+c([
+  r({ type: Number })
+], d.prototype, "maxMultiple", 2);
+c([
+  r({ type: Array })
+], d.prototype, "selected", 2);
+c([
+  r({ type: String })
+], d.prototype, "earliest", 2);
+c([
+  r({ type: String })
+], d.prototype, "latest", 2);
+c([
+  r({ type: Array })
+], d.prototype, "excludedates", 2);
+c([
+  r({ type: Array })
+], d.prototype, "excludeweekdays", 2);
+c([
+  r({ type: String })
+], d.prototype, "currentmonth", 2);
+c([
+  r({ type: String })
+], d.prototype, "today", 2);
+c([
+  z()
+], d.prototype, "_hasBeenOpened", 2);
+d = c([
+  x("pkt-datepicker-popup")
+], d);
+var Ce = Object.defineProperty, y = (e, t, s, n) => {
+  for (var i = void 0, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (i = l(t, s, i) || i);
+  return i && Ce(t, s, i), i;
+};
+class m extends L {
+  constructor() {
+    super(...arguments), this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.inputClasses = {}, this.inputRef = f(), this.btnRef = f();
+  }
+  // Shared getters
+  get inputElement() {
+    return this.inputRef.value;
+  }
+  get buttonElement() {
+    return this.btnRef.value;
+  }
+  get isInputReadonly() {
+    return this.readonly || this.inputType === "text";
+  }
+  // Shared event dispatchers (protected so subclasses can use them)
+  dispatchToggleCalendar(t) {
+    this.readonly || this.dispatchEvent(
+      new CustomEvent("toggle-calendar", {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  dispatchInput(t) {
+    this.dispatchEvent(
+      new CustomEvent("input-change", {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  dispatchFocus() {
+    this.dispatchEvent(
+      new CustomEvent("input-focus", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  dispatchBlur(t) {
+    this.dispatchEvent(
+      new CustomEvent("input-blur", {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  dispatchChange(t) {
+    this.dispatchEvent(
+      new CustomEvent("input-changed", {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // Shared render helper for calendar button
+  renderCalendarButton() {
+    var t;
+    return h`
+      <button
+        class="${$(V.getButtonClasses())}"
+        type="button"
+        @click=${(s) => this.dispatchToggleCalendar(s)}
+        @keydown=${(s) => {
+      const { key: n } = s;
+      (n === "Enter" || n === " " || n === "Space") && (s.preventDefault(), this.dispatchToggleCalendar(s));
+    }}
+        ?disabled=${this.disabled}
+        ${this.btnRef}
+      >
+        <pkt-icon name="calendar"></pkt-icon>
+        <span class="pkt-btn__text">${((t = this.strings.calendar) == null ? void 0 : t.buttonAltText) || "Åpne kalender"}</span>
+      </button>
+    `;
+  }
+  // Shared method - no shadow DOM
+  createRenderRoot() {
+    return this;
+  }
+}
+y([
+  r({ type: String })
+], m.prototype, "inputType");
+y([
+  r({ type: String })
+], m.prototype, "id");
+y([
+  r({ type: String })
+], m.prototype, "min");
+y([
+  r({ type: String })
+], m.prototype, "max");
+y([
+  r({ type: String })
+], m.prototype, "placeholder");
+y([
+  r({ type: Boolean })
+], m.prototype, "readonly");
+y([
+  r({ type: Boolean })
+], m.prototype, "disabled");
+y([
+  r({ type: Object })
+], m.prototype, "inputClasses");
+y([
+  r({ type: Object })
+], m.prototype, "internals");
+var xe = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, M = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? _e(t, s) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && xe(t, s, i), i;
+};
+let B = class extends m {
+  constructor() {
+    super(...arguments), this.value = "", this.strings = J;
+  }
+  dispatchManageValidity(e) {
+    this.dispatchEvent(
+      new CustomEvent("manage-validity", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return h`
+      <div class="pkt-input__container">
+        <input
+          class="${$(this.inputClasses)}"
+          .type=${this.inputType}
+          id="${this.id}-input"
+          .value=${this.value}
+          min=${g(this.min)}
+          max=${g(this.max)}
+          placeholder=${g(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          aria-describedby="${this.id}-helptext"
+          @click=${(e) => {
+      e.preventDefault(), this.dispatchToggleCalendar(e);
+    }}
+          @touchend=${(e) => {
+      e.preventDefault(), this.dispatchToggleCalendar(e);
+    }}
+          ?disabled=${this.disabled}
+          @keydown=${(e) => O.handleInputKeydown(
+      e,
+      (t) => this.dispatchToggleCalendar(t),
+      () => T.submitFormOrFallback(this.internals, () => {
+        var t;
+        return (t = this.inputRef.value) == null ? void 0 : t.blur();
+      }),
+      void 0,
+      () => {
+        var t;
+        return (t = this.inputRef.value) == null ? void 0 : t.blur();
+      }
+    )}
+          @input=${(e) => {
+      this.dispatchInput(e), e.stopImmediatePropagation();
+    }}
+          @focus=${() => {
+      this.dispatchFocus(), b() && this.dispatchToggleCalendar(new Event("focus"));
+    }}
+          @blur=${(e) => {
+      this.dispatchBlur(e), this.dispatchManageValidity(e.target), this.dispatchEvent(
+        new CustomEvent("value-change", {
+          detail: e.target.value,
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }}
+          @change=${(e) => {
+      this.dispatchChange(e), e.stopImmediatePropagation();
+    }}
+          ${v(this.inputRef)}
+        />
+        ${this.renderCalendarButton()}
+      </div>
+    `;
+  }
+};
+M([
+  r({ type: String })
+], B.prototype, "value", 2);
+M([
+  r({ type: Object })
+], B.prototype, "strings", 2);
+B = M([
+  x("pkt-datepicker-single")
+], B);
+var De = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, S = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? Te(t, s) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && De(t, s, i), i;
+};
+let C = class extends m {
+  constructor() {
+    super(...arguments), this.value = [], this.label = "", this.showRangeLabels = !1, this.strings = ne, this.inputRefTo = f();
+  }
+  get inputElementTo() {
+    return this.inputRefTo.value;
+  }
+  render() {
+    var t, s, n, i;
+    const e = V.getRangeLabelClasses(this.showRangeLabels);
+    return h`
+      <div class="pkt-input__container">
+        ${this.showRangeLabels ? h` <div class="pkt-input-prefix">${(t = this.strings.generic) == null ? void 0 : t.from}</div> ` : D}
+        <input
+          class=${$(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          aria-label="${this.label} ${((s = this.strings.generic) == null ? void 0 : s.from) ?? "Fra"}"
+          .value=${this.value[0] ?? ""}
+          min=${g(this.min)}
+          max=${g(this.max)}
+          placeholder=${g(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(a) => {
+      a.preventDefault(), this.dispatchToggleCalendar(a);
+    }}
+          @touchend=${(a) => {
+      a.preventDefault(), this.dispatchToggleCalendar(a);
+    }}
+          @keydown=${(a) => O.handleInputKeydown(
+      a,
+      (l) => this.dispatchToggleCalendar(l),
+      () => T.submitFormOrFallback(
+        this.internals,
+        () => {
+          var l;
+          return (l = this.inputRefTo.value) == null ? void 0 : l.focus();
+        }
+      ),
+      () => {
+        var l;
+        return (l = this.inputRefTo.value) == null ? void 0 : l.focus();
+      },
+      () => {
+        var l;
+        return (l = this.inputRef.value) == null ? void 0 : l.blur();
+      }
+    )}
+          @input=${(a) => {
+      this.dispatchInput(a), a.stopImmediatePropagation();
+    }}
+          @focus=${() => {
+      this.dispatchFocus(), b() && this.dispatchToggleCalendar(new Event("focus"));
+    }}
+          @blur=${(a) => {
+      this.dispatchBlur(a), this.dispatchEvent(
+        new CustomEvent("range-blur", {
+          detail: {
+            event: a,
+            values: this.value,
+            inputType: "from"
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }}
+          @change=${(a) => {
+      this.dispatchChange(a), a.stopImmediatePropagation();
+    }}
+          ${v(this.inputRef)}
+        />
+        <div class="${$(e)}" id="${this.id}-to-label">
+          ${(n = this.strings.generic) == null ? void 0 : n.to}
+        </div>
+        ${this.showRangeLabels ? D : h` <div class="pkt-input-separator">–</div> `}
+        <input
+          class=${$(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-to"
+          aria-label="${this.label} ${((i = this.strings.generic) == null ? void 0 : i.to) ?? "Til"}"
+          .value=${this.value[1] ?? ""}
+          min=${g(this.min)}
+          max=${g(this.max)}
+          placeholder=${g(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(a) => {
+      a.preventDefault(), this.dispatchToggleCalendar(a);
+    }}
+          @touchend=${(a) => {
+      a.preventDefault(), this.dispatchToggleCalendar(a);
+    }}
+          @keydown=${(a) => O.handleInputKeydown(
+      a,
+      (l) => this.dispatchToggleCalendar(l),
+      () => T.submitFormOrFallback(this.internals, () => {
+        var l;
+        return (l = this.inputRefTo.value) == null ? void 0 : l.blur();
+      }),
+      void 0,
+      () => {
+        var l;
+        return (l = this.inputRefTo.value) == null ? void 0 : l.blur();
+      }
+    )}
+          @input=${(a) => {
+      this.dispatchInput(a), a.stopImmediatePropagation();
+    }}
+          @focus=${() => {
+      this.dispatchFocus(), b() && this.dispatchToggleCalendar(new Event("focus"));
+    }}
+          @blur=${(a) => {
+      this.dispatchBlur(a), this.dispatchEvent(
+        new CustomEvent("range-blur", {
+          detail: {
+            event: a,
+            values: this.value,
+            inputType: "to"
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }}
+          @change=${(a) => {
+      this.dispatchChange(a), a.stopImmediatePropagation();
+    }}
+          ${v(this.inputRefTo)}
+        />
+        ${this.renderCalendarButton()}
+      </div>
+    `;
+  }
+};
+S([
+  r({ type: Array })
+], C.prototype, "value", 2);
+S([
+  r({ type: String })
+], C.prototype, "label", 2);
+S([
+  r({ type: Boolean })
+], C.prototype, "showRangeLabels", 2);
+S([
+  r({ type: Object })
+], C.prototype, "strings", 2);
+C = S([
+  x("pkt-datepicker-range")
+], C);
+var Re = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, A = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? Ee(t, s) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && Re(t, s, i), i;
+};
+let R = class extends m {
+  constructor() {
+    super(...arguments), this.value = [], this.strings = J;
+  }
+  get isInputDisabled() {
+    return this.disabled || this.maxlength !== void 0 && this.maxlength !== null && this.value.length >= this.maxlength;
+  }
+  dispatchAddToSelected(e) {
+    this.dispatchEvent(
+      new CustomEvent("add-to-selected", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return h`
+      <div class="pkt-input__container">
+        <input
+          class=${$(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          min=${g(this.min)}
+          max=${g(this.max)}
+          placeholder=${g(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.isInputDisabled}
+          @click=${(e) => {
+      e.preventDefault(), this.dispatchToggleCalendar(e);
+    }}
+          @touchend=${(e) => {
+      e.preventDefault(), this.dispatchToggleCalendar(e);
+    }}
+          @blur=${(e) => {
+      this.dispatchBlur(e), this.dispatchAddToSelected(e);
+    }}
+          @input=${(e) => {
+      this.dispatchInput(e), e.stopImmediatePropagation();
+    }}
+          @focus=${() => {
+      this.dispatchFocus(), b() && this.dispatchToggleCalendar(new Event("focus"));
+    }}
+          @keydown=${(e) => O.handleInputKeydown(
+      e,
+      (t) => this.dispatchToggleCalendar(t),
+      () => T.submitFormOrFallback(this.internals, () => {
+        var t;
+        return (t = this.inputRef.value) == null ? void 0 : t.blur();
+      }),
+      void 0,
+      void 0,
+      (t) => this.dispatchAddToSelected(t)
+    )}
+          @change=${(e) => {
+      this.dispatchChange(e), e.stopImmediatePropagation();
+    }}
+          ${v(this.inputRef)}
+        />
+        ${this.renderCalendarButton()}
+      </div>
+    `;
+  }
+};
+A([
+  r({ type: Array })
+], R.prototype, "value", 2);
+A([
+  r({ type: Number })
+], R.prototype, "maxlength", 2);
+A([
+  r({ type: Object })
+], R.prototype, "strings", 2);
+R = A([
+  x("pkt-datepicker-multiple")
+], R);
+var Se = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, p = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? Pe(t, s) : t, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (i = (n ? l(t, s, i) : l(i)) || i);
+  return n && i && Se(t, s, i), i;
+};
+let u = class extends ee {
+  /**
+   * Housekeeping / lifecycle methods
+   */
+  constructor() {
+    super(), this._valueProperty = "", this._valueProcessing = !1, this.datepickerPopupRef = f(), this._value = [], this.label = "Datovelger", this.dateformat = _.props.dateformat.default, this.multiple = _.props.multiple.default, this.maxlength = null, this.range = _.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = _.props.weeknumbers.default, this.withcontrols = _.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.today = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.calRef = f(), this.popupRef = f(), this.helptextSlot = f(), this.singleInputRef = f(), this.rangeInputRef = f(), this.multipleInputRef = f(), this.addToSelected = (e) => {
+      const t = this.datepickerPopupRef.value;
+      return t && typeof t.addToSelected == "function" ? t.addToSelected(e, this.min, this.max) : I.addToSelected(e, this.calRef, this.min, this.max);
+    }, this.slotController = new ae(this, this.helptextSlot);
+  }
+  get value() {
+    return this._valueProperty;
+  }
+  set value(e) {
+    const t = this._valueProperty;
+    this._valueProperty = Array.isArray(e) ? e.join(",") : e || "", this.valueChanged(this._valueProperty, t), this.requestUpdate("value", t);
+  }
+  /**
+   * Computed properties
+   */
+  get inputType() {
+    return be.getInputType();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.timezone && this.timezone !== window.pktTz && (window.pktTz = this.timezone);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  onInput() {
+    this.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+  valueChanged(e, t) {
+    if (!(this._valueProcessing || e === t)) {
+      this._valueProcessing = !0;
+      try {
+        const s = P(e), n = this.multiple && s.length > 1 ? q.filterSelectableDates(
+          s,
+          this.min,
+          this.max,
+          this.excludedates,
+          this.excludeweekdays
+        ) : s;
+        if (this.range && !q.validateRangeOrder(n)) {
+          this._value = [], this._valueProperty = "", super.valueChanged("", t);
+          return;
+        }
+        this._value = n;
+        const i = Y(n);
+        if (this._valueProperty !== i && (this._valueProperty = i), this.range && n.length < 2) return;
+        super.valueChanged(i, t);
+      } finally {
+        this._valueProcessing = !1;
+      }
+    }
+  }
+  attributeChangedCallback(e, t, s) {
+    e === "value" && this.value !== t && this.valueChanged(s, t), e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = P(s || "")), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = P(s || "")), super.attributeChangedCallback(e, t, s);
+  }
+  updated(e) {
+    if (e.has("value") && (e.has("multiple") || e.has("range"))) {
+      const t = Array.isArray(this.value) ? this.value.join(",") : this.value, s = e.get("value"), n = Array.isArray(s) ? s.join(",") : s;
+      this.valueChanged(t, n);
+    }
+    e.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = P(this.value) : !this.multiple && Array.isArray(this._value) && (this._value = this._value.filter(Boolean)), !this.multiple && !this.range && Array.isArray(this._value) && (this._value = [this._value[0] ?? ""])), super.updated(e);
+  }
+  /**
+   * Element references
+   */
+  // Override the inputRef and inputRefTo for compatibility
+  get inputRef() {
+    return { value: this.currentInputElement };
+  }
+  get inputRefTo() {
+    return { value: this.currentInputElementTo };
+  }
+  // Getters for backward compatibility with input refs
+  get currentInputElement() {
+    var e, t, s;
+    return this.multiple ? (e = this.multipleInputRef.value) == null ? void 0 : e.inputElement : this.range ? (t = this.rangeInputRef.value) == null ? void 0 : t.inputElement : (s = this.singleInputRef.value) == null ? void 0 : s.inputElement;
+  }
+  get currentInputElementTo() {
+    var e;
+    if (this.range)
+      return (e = this.rangeInputRef.value) == null ? void 0 : e.inputElementTo;
+  }
+  get currentButtonElement() {
+    var e, t, s;
+    return this.multiple ? (e = this.multipleInputRef.value) == null ? void 0 : e.buttonElement : this.range ? (t = this.rangeInputRef.value) == null ? void 0 : t.buttonElement : (s = this.singleInputRef.value) == null ? void 0 : s.buttonElement;
+  }
+  // Override btnRef for compatibility
+  get btnRef() {
+    return { value: this.currentButtonElement };
+  }
+  /**
+   * Rendering
+   */
+  renderInput() {
+    return h`
+      <pkt-datepicker-single
+        .value=${this._value[0] ?? ""}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .strings=${this.strings}
+        @toggle-calendar=${(e) => this.toggleCalendar(e.detail)}
+        @input-change=${() => this.onInput()}
+        @input-focus=${() => this.onFocus()}
+        @input-blur=${(e) => {
+      var t;
+      (t = this.calRef.value) != null && t.contains(e.detail.relatedTarget) || this.onBlur();
+    }}
+        @manage-validity=${(e) => this.manageValidity(e.detail)}
+        @value-change=${(e) => {
+      this.value = e.detail;
+    }}
+        @input-changed=${() => {
+      this.touched = !0;
+    }}
+        ${v(this.singleInputRef)}
+      ></pkt-datepicker-single>
+    `;
+  }
+  renderRangeInput() {
+    return h`
+      <pkt-datepicker-range
+        .value=${this._value}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .label=${this.label}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .showRangeLabels=${this.showRangeLabels}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .strings=${this.strings}
+        @toggle-calendar=${(e) => this.toggleCalendar(e.detail)}
+        @input-change=${() => this.onInput()}
+        @input-focus=${() => this.onFocus()}
+        @input-blur=${(e) => {
+      var t;
+      (t = this.calRef.value) != null && t.contains(e.detail.relatedTarget) || this.onBlur();
+    }}
+        @range-blur=${(e) => {
+      const t = this.currentInputElement, s = this.currentInputElementTo;
+      if (t && s) {
+        const n = t.value, i = s.value;
+        if (n && i && n > i)
+          s.value = "", this._value = [n], this.value = n;
+        else {
+          const a = [n, i].filter(Boolean);
+          a.length > 0 && (a[0] !== this._value[0] || a[1] !== this._value[1]) && (this._value = a, this.value = a.join(","));
+        }
+      }
+      F.processRangeBlur(
+        e.detail.event,
+        e.detail.values,
+        this.calRef,
+        () => this.clearInputValue(),
+        (n) => this.manageValidity(n)
+      );
+    }}
+        @manage-validity=${(e) => this.manageValidity(e.detail)}
+        @validate-date-input=${(e) => {
+      T.validateDateInput(e.detail, this.internals, this.min, this.max, this.strings);
+    }}
+        @handle-date-select=${(e) => {
+      var s, n;
+      const t = j(e.detail);
+      if (t) {
+        const i = W(t);
+        this._value[0] !== i && this._value[1] !== i && ((n = (s = this.calRef) == null ? void 0 : s.value) == null || n.handleDateSelect(t));
+      }
+    }}
+        @input-changed=${() => {
+      this.touched = !0;
+    }}
+        ${v(this.rangeInputRef)}
+      ></pkt-datepicker-range>
+    `;
+  }
+  renderMultipleInput() {
+    return h`
+      <pkt-datepicker-multiple
+        .value=${this._value}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .maxlength=${this.maxlength}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .strings=${this.strings}
+        @toggle-calendar=${(e) => this.toggleCalendar(e.detail)}
+        @input-change=${() => this.onInput()}
+        @input-focus=${() => this.onFocus()}
+        @input-blur=${(e) => {
+      var t;
+      (t = this.calRef.value) != null && t.contains(e.detail.relatedTarget) || this.onBlur();
+    }}
+        @add-to-selected=${(e) => this.addToSelected(e.detail)}
+        @input-changed=${() => {
+      this.touched = !0;
+    }}
+        ${v(this.multipleInputRef)}
+      ></pkt-datepicker-multiple>
+    `;
+  }
+  renderCalendar() {
+    return h`
+      <pkt-datepicker-popup
+        class="pkt-contents"
+        ?open=${this.calendarOpen}
+        ?multiple=${this.multiple}
+        ?range=${this.range}
+        ?weeknumbers=${this.weeknumbers}
+        ?withcontrols=${this.withcontrols}
+        .maxMultiple=${this.maxlength}
+        .selected=${this._value}
+        .earliest=${this.min}
+        .latest=${this.max}
+        .excludedates=${Array.isArray(this.excludedates) ? this.excludedates : this.excludedates.split(",")}
+        .excludeweekdays=${this.excludeweekdays}
+        .currentmonth=${this.currentmonth ? Z(this.currentmonth) : null}
+        .today=${this.today}
+        @date-selected=${(e) => {
+      this.value = F.processDateSelection(e.detail, this.multiple, this.range), this._value = e.detail, F.updateInputValues(
+        this.inputRef,
+        this.inputRefTo,
+        this._value,
+        this.range,
+        this.multiple,
+        (t) => this.manageValidity(t)
+      );
+    }}
+        @close=${() => {
+      this.onBlur(), this.hideCalendar();
+    }}
+        ${v(this.datepickerPopupRef)}
+      ></pkt-datepicker-popup>
+    `;
+  }
+  render() {
+    return this.inputClasses = V.getInputClasses(
+      this.fullwidth,
+      this.showRangeLabels,
+      this.multiple,
+      this.range,
+      this.readonly,
+      this.inputType
+    ), h`
+      <pkt-input-wrapper
+        label="${this.label}"
+        forId="${this.id}-input"
+        ?counter=${this.multiple && !!this.maxlength}
+        .counterCurrent=${this.value ? this._value.length : 0}
+        .counterMaxLength=${this.maxlength}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?required=${this.required}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        useWrapper=${this.useWrapper}
+        .optionalText=${this.optionalText}
+        .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
+        .errorMessage=${this.errorMessage}
+        .helptext=${this.helptext}
+        .helptextDropdown=${this.helptextDropdown}
+        .helptextDropdownButton=${this.helptextDropdownButton}
+        .ariaDescribedBy=${this.ariaDescribedBy}
+        class="pkt-datepicker"
+      >
+        <div class="pkt-contents" ${v(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        ${this.multiple ? h`<pkt-date-tags
+              .dates=${this._value}
+              dateformat=${this.dateformat}
+              strings=${this.strings}
+              id-base=${this.id}
+              @date-tag-removed=${(e) => {
+      var n;
+      const t = this.datepickerPopupRef.value, s = j(e.detail);
+      t && s && typeof t.handleDateSelect == "function" ? t.handleDateSelect(s) : (n = this.calRef.value) == null || n.handleDateSelect(s);
+    }}
+            ></pkt-date-tags>` : D}
+        <div
+          class="pkt-datepicker__inputs ${this.range && this.showRangeLabels ? "pkt-input__range-inputs" : ""}"
+        >
+          ${this.range ? this.renderRangeInput() : this.multiple ? this.renderMultipleInput() : this.renderInput()}
+        </div>
+      </pkt-input-wrapper>
+      ${this.renderCalendar()}
+    `;
+  }
+  /**
+   * Handlers
+   */
+  handleCalendarPosition() {
+    const e = this.multiple && !!this.maxlength;
+    I.handleCalendarPosition(this.popupRef, this.inputRef, e);
+  }
+  async showCalendar() {
+    var t;
+    const e = this.datepickerPopupRef.value;
+    if (this.calendarOpen = !0, e && typeof e.show == "function") {
+      e.show(), b() && e.focusOnCurrentDate();
+      return;
+    }
+    await ie(20), this.handleCalendarPosition(), b() && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
+  }
+  hideCalendar() {
+    const e = this.datepickerPopupRef.value;
+    if (this.calendarOpen = !1, e && typeof e.hide == "function") return e.hide();
+  }
+  async toggleCalendar(e) {
+    e.preventDefault();
+    const t = this.datepickerPopupRef.value;
+    if (t && typeof t.toggle == "function") {
+      const s = !!t.open;
+      t.toggle(), this.calendarOpen = !s;
+      return;
+    }
+    this.calendarOpen ? this.hideCalendar() : this.showCalendar();
+  }
+  clearInputValue() {
+    this._value = [], this.value = "", this.internals.setFormValue(this.value), this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), this.dispatchEvent(
+      new CustomEvent("value-change", {
+        detail: this._value,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+p([
+  r({ type: String, reflect: !0 })
+], u.prototype, "value", 1);
+p([
+  r({ type: String, reflect: !0 })
+], u.prototype, "label", 2);
+p([
+  r({ type: String })
+], u.prototype, "dateformat", 2);
+p([
+  r({ type: Boolean, reflect: !0 })
+], u.prototype, "multiple", 2);
+p([
+  r({ type: Number, reflect: !0 })
+], u.prototype, "maxlength", 2);
+p([
+  r({ type: Boolean, reflect: !0 })
+], u.prototype, "range", 2);
+p([
+  r({ type: Boolean, attribute: "show-range-labels" })
+], u.prototype, "showRangeLabels", 2);
+p([
+  r({ type: String, reflect: !0 })
+], u.prototype, "min", 2);
+p([
+  r({ type: String, reflect: !0 })
+], u.prototype, "max", 2);
+p([
+  r({ type: Boolean })
+], u.prototype, "weeknumbers", 2);
+p([
+  r({ type: Boolean, reflect: !0 })
+], u.prototype, "withcontrols", 2);
+p([
+  r({ converter: G.csvToArray })
+], u.prototype, "excludedates", 2);
+p([
+  r({ converter: G.csvToArray })
+], u.prototype, "excludeweekdays", 2);
+p([
+  r({ type: String })
+], u.prototype, "currentmonth", 2);
+p([
+  r({ type: String })
+], u.prototype, "today", 2);
+p([
+  r({ type: Boolean, reflect: !0, attribute: "calendar-open" })
+], u.prototype, "calendarOpen", 2);
+p([
+  r({ type: String })
+], u.prototype, "timezone", 2);
+p([
+  z()
+], u.prototype, "inputClasses", 2);
+u = p([
+  x("pkt-datepicker")
+], u);
+export {
+  w as P,
+  u as a,
+  B as b,
+  C as c,
+  R as d
+};