@oslokommune/punkt-elements 14.0.2 → 14.0.4

package/dist/datepicker-D0q75U1Z.js

@@ -0,0 +1,1463 @@
+import { P as L, E as I, x as o, n as l, a as w } from "./element-CRDRygXu.js";
+import { r as G } from "./state-DS_kr2Fy.js";
+import { s as K, f as q, n as F, a as J, i as Q, b as M, v as D, d as X, e as Y, p as Z, g as W } from "./calendar-yxjSI4wd.js";
+import { P as ee } from "./input-element-B0VPRK_E.js";
+import { e as m, n as v } from "./ref-Xa5dbh--.js";
+import "./icon-1dy7UZcu.js";
+import "./input-wrapper-CnYj-xNE.js";
+import { e as $ } from "./class-map-wy7PUk0P.js";
+import { c as te } from "./repeat-CJ79egkN.js";
+import "./tag-BpCdJuei.js";
+import { u as se, s as ie } from "./utils-DznhwRXm.js";
+import { o as f } from "./if-defined-BWZGb3bh.js";
+import { P as ae } from "./pkt-slot-controller-BPGj-LC5.js";
+var ne = Object.defineProperty, le = Object.getOwnPropertyDescriptor, R = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? le(t, i) : t, n = e.length - 1, r; n >= 0; n--)
+    (r = e[n]) && (a = (s ? r(t, i, a) : r(a)) || a);
+  return s && a && ne(t, i, a), a;
+};
+let k = 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
+    }, o`
+      <div class=${$(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates) && this.dates[0] ? te(
+      K((this.dates ?? []).filter(Boolean)),
+      (e) => e,
+      (e) => {
+        var t;
+        return o` <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} ${q(e, this.dateformat)}`}
+                >
+                  <time datetime=${e}>${q(e, this.dateformat)}</time>
+                </pkt-tag>`;
+      }
+    ) : I}
+      </div>
+    `;
+  }
+};
+R([
+  l({ type: Array })
+], k.prototype, "dates", 2);
+R([
+  l({ type: String })
+], k.prototype, "dateformat", 2);
+R([
+  l({ type: String, attribute: "class" })
+], k.prototype, "className", 2);
+R([
+  l({ type: String, attribute: "id-base" })
+], k.prototype, "idBase", 2);
+k = R([
+  w("pkt-date-tags")
+], k);
+const re = { dateformat: { default: "dd.MM.yyyy" }, weeknumbers: { default: !1 }, withcontrols: { default: !1 }, multiple: { default: !1 }, range: { default: !1 } }, C = {
+  props: re
+}, b = () => {
+  const e = navigator.userAgent;
+  return !!(/iP(hone|od|ad)/.test(e) || /Macintosh/.test(e) && "ontouchend" in document);
+}, E = {
+  /**
+   * Ensures name attribute ends with [] for multiple/range inputs
+   *
+   * For form submission to work correctly with multiple values,
+   * the input name must end with [] to indicate it's an array.
+   *
+   * @param name - The original name attribute value
+   * @param isMultiple - Whether this is a multiple-date picker
+   * @param isRange - Whether this is a range date picker
+   * @returns The normalized name with [] suffix if needed, or null if name is null
+   *
+   * @example
+   * normalizeNameForMultiple('dates', true, false) // Returns 'dates[]'
+   * normalizeNameForMultiple('dates[]', true, false) // Returns 'dates[]' (no change)
+   * normalizeNameForMultiple('date', false, false) // Returns 'date' (no change)
+   */
+  normalizeNameForMultiple(e, t, i) {
+    return e ? (t || i) && !e.endsWith("[]") ? e + "[]" : e : null;
+  },
+  /**
+   * Validates that a range has valid order (start <= end)
+   *
+   * @param values - Array of date strings (ISO format YYYY-MM-DD)
+   * @returns True if range is valid or incomplete, false if end date is before start date
+   *
+   * @example
+   * validateRangeOrder(['2024-01-01', '2024-01-31']) // Returns true
+   * validateRangeOrder(['2024-01-31', '2024-01-01']) // Returns false
+   * validateRangeOrder(['2024-01-01']) // Returns true (incomplete range)
+   */
+  validateRangeOrder(e) {
+    return !e || e.length !== 2 ? !0 : Q(e[0], e[1]);
+  },
+  /**
+   * Sorts date strings chronologically
+   *
+   * @param dates - Array of date strings in ISO format (YYYY-MM-DD)
+   * @returns New array with dates sorted from earliest to latest
+   *
+   * @example
+   * sortDates(['2024-03-15', '2024-01-10', '2024-02-20'])
+   * // Returns ['2024-01-10', '2024-02-20', '2024-03-15']
+   */
+  sortDates(e) {
+    return K(e);
+  },
+  /**
+   * Filters dates to only include selectable ones based on constraints
+   *
+   * Removes dates that:
+   * - Fall outside the min/max range
+   * - Are in the excludedDates array
+   * - Fall on excluded weekdays (0=Sunday, 6=Saturday)
+   *
+   * @param dates - Array of date strings to filter
+   * @param min - Minimum allowed date (ISO format)
+   * @param max - Maximum allowed date (ISO format)
+   * @param excludedDates - Array of specific dates to exclude
+   * @param excludedWeekdays - Array of weekday numbers to exclude ('0'-'6')
+   * @returns Filtered array containing only selectable dates
+   *
+   * @example
+   * filterSelectableDates(
+   *   ['2024-01-01', '2024-01-06', '2024-01-15'],
+   *   '2024-01-05',
+   *   '2024-01-20',
+   *   ['2024-01-15'],
+   *   ['0', '6'] // Exclude weekends
+   * )
+   * // Returns ['2024-01-06'] (after min, not excluded, not a weekend)
+   */
+  filterSelectableDates(e, t, i, s, a) {
+    return J(e, t, i, s, a);
+  }
+}, ue = {
+  /**
+   * Determines the appropriate input type based on device
+   *
+   * Mobile Safari does not play well with type="date" and custom datepickers,
+   * so we use type="text" on iOS devices to avoid the native date picker
+   * interfering with our custom calendar component.
+   *
+   * @returns 'text' for iOS devices, 'date' for all other devices
+   *
+   * @example
+   * const inputType = getInputType()
+   * // Returns 'text' on iPhone/iPad, 'date' on desktop/Android
+   */
+  getInputType() {
+    return b() ? "text" : "date";
+  }
+}, x = {
+  /**
+   * Submits the form that contains the given element
+   *
+   * Uses ElementInternals API to access the associated form and trigger submission.
+   * Requires the element to have attachInternals() called.
+   *
+   * @param element - The form-associated custom element
+   *
+   * @example
+   * submitForm(this) // From within a custom element
+   */
+  submitForm(e) {
+    var i;
+    const t = (i = e.internals) == null ? void 0 : i.form;
+    t && t.requestSubmit();
+  },
+  /**
+   * Submits form if available, otherwise executes fallback action
+   *
+   * Useful for Enter key handling where we want to submit the form,
+   * but provide a fallback behavior (like moving focus) if not in a form.
+   *
+   * @param internals - ElementInternals instance with optional form reference
+   * @param fallbackAction - Function to call if no form is available
+   *
+   * @example
+   * submitFormOrFallback(
+   *   this.internals,
+   *   () => this.inputRef.value?.blur()
+   * )
+   */
+  submitFormOrFallback(e, t) {
+    const i = e == null ? void 0 : e.form;
+    i ? i.requestSubmit() : t();
+  },
+  /**
+   * Validates a date input and sets validity state
+   *
+   * Checks if the input value falls within the min/max range and
+   * sets appropriate validity flags using the ElementInternals API.
+   *
+   * @param input - The input element to validate
+   * @param internals - ElementInternals instance for setting validity
+   * @param min - Minimum allowed date (ISO format)
+   * @param max - Maximum allowed date (ISO format)
+   * @param strings - Optional localized error messages
+   *
+   * @example
+   * validateDateInput(
+   *   inputElement,
+   *   this.internals,
+   *   '2024-01-01',
+   *   '2024-12-31',
+   *   { forms: { messages: { rangeUnderflow: 'Date too early' } } }
+   * )
+   */
+  validateDateInput(e, t, i, s, a) {
+    var r, h, U, z;
+    const n = e.value;
+    n && (i && i > n ? t.setValidity(
+      { rangeUnderflow: !0 },
+      ((h = (r = a == null ? void 0 : a.forms) == null ? void 0 : r.messages) == null ? void 0 : h.rangeUnderflow) || "Value is below minimum",
+      e
+    ) : s && s < n && t.setValidity(
+      { rangeOverflow: !0 },
+      ((z = (U = a == null ? void 0 : a.forms) == null ? void 0 : U.messages) == null ? void 0 : z.rangeOverflow) || "Value is above maximum",
+      e
+    ));
+  }
+}, S = {
+  /**
+   * Adds a date to selected dates if it's valid
+   *
+   * Used for multiple date selection - validates the input date against
+   * min/max constraints before adding it to the calendar's selected dates.
+   * Clears the input field after processing.
+   *
+   * @param event - Input or keyboard event containing the target input
+   * @param calendarRef - Lit ref to the calendar component
+   * @param min - Minimum allowed date (ISO format)
+   * @param max - Maximum allowed date (ISO format)
+   *
+   * @example
+   * addToSelected(
+   *   blurEvent,
+   *   this.calendarRef,
+   *   '2024-01-01',
+   *   '2024-12-31'
+   * )
+   */
+  addToSelected(e, t, i, s) {
+    const a = e.target;
+    if (!a.value) return;
+    const n = i ? F(i) : null, r = s ? F(s) : null, h = F(a.value.split(",")[0]);
+    h && !isNaN(h.getTime()) && (!n || h >= n) && (!r || h <= r) && t.value && t.value.handleDateSelect(h), a.value = "";
+  },
+  /**
+   * Handles calendar positioning based on viewport and input position
+   *
+   * Intelligently positions the calendar popup either above or below the input
+   * depending on available viewport space. Accounts for optional counter elements.
+   *
+   * The positioning logic:
+   * 1. By default, positions calendar below the input (top: 100%)
+   * 2. If calendar would overflow viewport bottom AND there's space above, positions above
+   * 3. Accounts for counter height (30px) when hasCounter is true
+   *
+   * @param popupRef - Lit ref to the calendar popup element
+   * @param inputRef - Lit ref to the input element
+   * @param hasCounter - Whether the input has a character counter below it
+   *
+   * @example
+   * handleCalendarPosition(
+   *   this.popupRef,
+   *   this.inputRef,
+   *   this.multiple && this.maxlength !== null
+   * )
+   */
+  handleCalendarPosition(e, t, i = !1) {
+    var h;
+    if (!e.value || !t.value) return;
+    const s = ((h = t.value.parentElement) == null ? void 0 : h.getBoundingClientRect()) || t.value.getBoundingClientRect(), a = i ? s.height + 30 : s.height, n = e.value.getBoundingClientRect().height;
+    let r = i ? "calc(100% - 30px)" : "100%";
+    s && s.top + n > window.innerHeight && s.top - n > 0 && (r = `calc(100% - ${a}px - ${n}px)`), e.value.style.top = r;
+  }
+}, V = {
+  /**
+   * Generates input classes for datepicker
+   *
+   * @param fullwidth - Whether input should take full width
+   * @param showRangeLabels - Whether range labels are visible
+   * @param multiple - Whether this is a multiple date picker
+   * @param range - Whether this is a range date picker
+   * @param readonly - Whether input is readonly
+   * @param inputType - The input type ('date' or 'text')
+   * @returns Object with class names as keys and boolean values
+   *
+   * @example
+   * const classes = getInputClasses(true, false, false, false, false, 'date')
+   * // Returns { 'pkt-input': true, 'pkt-input--fullwidth': true, ... }
+   */
+  getInputClasses(e, t, i, s, a, n) {
+    return {
+      "pkt-input": !0,
+      "pkt-datepicker__input": !0,
+      "pkt-input--fullwidth": e,
+      "pkt-datepicker--hasrangelabels": t,
+      "pkt-datepicker--multiple": i,
+      "pkt-datepicker--range": s,
+      "ios-readonly-hack": a === !1 && n === "text"
+    };
+  },
+  /**
+   * Generates button classes for calendar button
+   *
+   * @returns Object with class names for the calendar toggle button
+   *
+   * @example
+   * const classes = getButtonClasses()
+   * // Returns { 'pkt-btn': true, 'pkt-btn--icon-only': true, ... }
+   */
+  getButtonClasses() {
+    return {
+      "pkt-input-icon": !0,
+      "pkt-btn": !0,
+      "pkt-btn--icon-only": !0,
+      "pkt-btn--tertiary": !0,
+      "pkt-datepicker__calendar-button": !0
+    };
+  },
+  /**
+   * Generates range label classes
+   *
+   * @param showRangeLabels - Whether range labels should be visible
+   * @returns Object with class names for range label elements
+   *
+   * @example
+   * const classes = getRangeLabelClasses(true)
+   * // Returns { 'pkt-input-prefix': true, 'pkt-hide': false }
+   */
+  getRangeLabelClasses(e) {
+    return {
+      "pkt-input-prefix": e,
+      "pkt-hide": !e
+    };
+  }
+}, j = {
+  /**
+   * Processes date selection from calendar events
+   *
+   * Converts the calendar's date selection into the appropriate string format
+   * for the input element's value.
+   *
+   * @param detail - Date selection detail from calendar event (string or array)
+   * @param multiple - Whether this is a multiple date picker
+   * @param range - Whether this is a range date picker
+   * @returns Formatted date string (single date or comma-separated dates)
+   *
+   * @example
+   * processDateSelection(['2024-01-15'], false, false) // Returns '2024-01-15'
+   * processDateSelection(['2024-01-15', '2024-01-20'], true, false) // Returns '2024-01-15,2024-01-20'
+   */
+  processDateSelection(e, t, i) {
+    return !t && !i ? e[0] || "" : Array.isArray(e) ? e.join(",") : e;
+  },
+  /**
+   * Updates input values after calendar selection
+   *
+   * Synchronizes input element values with the calendar's selected dates.
+   * Handles single, range, and multiple date scenarios differently.
+   *
+   * - Single: Updates single input with first date
+   * - Range: Updates two inputs with start and end dates
+   * - Multiple: Does nothing (dates shown as tags, not in input)
+   *
+   * @param inputRef - Lit ref to the primary input element
+   * @param inputRefTo - Lit ref to the secondary input (for range) or null
+   * @param values - Array of selected date strings
+   * @param range - Whether this is a range date picker
+   * @param multiple - Whether this is a multiple date picker
+   * @param manageValidity - Callback to validate the input
+   *
+   * @example
+   * updateInputValues(
+   *   this.inputRef,
+   *   this.inputRefTo,
+   *   ['2024-01-15', '2024-01-20'],
+   *   true, // range
+   *   false,
+   *   (input) => this.dispatchManageValidity(input)
+   * )
+   */
+  updateInputValues(e, t, i, s, a, n) {
+    e.value && (s && (t != null && t.value) ? (e.value.value = i[0] ?? "", t.value.value = i[1] ?? "", n(e.value), n(t.value)) : a || (e.value.value = i.length ? i[0] : "", n(e.value)));
+  },
+  /**
+   * Processes blur events for range inputs
+   *
+   * Handles the logic when a range input loses focus:
+   * - If input has value: validates it and updates the calendar to reflect the typed date
+   * - If input is empty but range has start date: clears the entire range
+   *
+   * This ensures the range picker calendar stays synchronized when users type dates directly.
+   *
+   * @param event - The blur event from the input
+   * @param values - Current array of selected dates [start, end]
+   * @param calendarRef - Lit ref to the calendar component
+   * @param clearInputValue - Callback to clear the date selection
+   * @param manageValidity - Callback to validate the input
+   *
+   * @example
+   * processRangeBlur(
+   *   blurEvent,
+   *   ['2024-01-15', '2024-01-20'],
+   *   this.calendarRef,
+   *   () => this.value = [],
+   *   (input) => this.dispatchManageValidity(input)
+   * )
+   */
+  processRangeBlur(e, t, i, s, a) {
+    var r;
+    const n = e.target;
+    if (n.value) {
+      a(n);
+      const h = M(n.value);
+      h && ((r = i == null ? void 0 : i.value) == null || r.handleDateSelect(h));
+    } else t[0] && s();
+  }
+}, P = {
+  /**
+   * Handles common keyboard interactions for datepicker inputs
+   *
+   * Provides consistent keyboard navigation across all datepicker types:
+   * - Space: Opens calendar
+   * - Enter: Submits form, focuses next input, or blurs (priority order)
+   * - Comma: Adds date to selection (multiple) or blurs input
+   *
+   * The handler prioritizes callbacks in the order provided, allowing
+   * different behaviors for single, multiple, and range pickers.
+   *
+   * @param event - The keyboard event
+   * @param toggleCalendar - Callback to toggle calendar visibility
+   * @param submitForm - Optional callback to submit the form (highest priority on Enter)
+   * @param focusNextInput - Optional callback to focus next input (medium priority on Enter)
+   * @param blurInput - Optional callback to blur current input (lowest priority on Enter/Comma)
+   * @param commaHandler - Optional callback for comma key (overrides default blur behavior)
+   *
+   * @example
+   * // Single datepicker: Enter submits form or blurs
+   * handleInputKeydown(
+   *   event,
+   *   (e) => this.toggleCalendar(e),
+   *   () => formUtils.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()),
+   *   undefined,
+   *   () => this.inputRef.value?.blur()
+   * )
+   *
+   * @example
+   * // Range datepicker: Enter moves to next input
+   * handleInputKeydown(
+   *   event,
+   *   (e) => this.toggleCalendar(e),
+   *   () => formUtils.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.focus()),
+   *   () => this.inputRefTo.value?.focus(),
+   *   () => this.inputRef.value?.blur()
+   * )
+   */
+  handleInputKeydown(e, t, i, s, a, n) {
+    const { key: r } = e;
+    r === "," && (e.preventDefault(), n ? n(e) : a && a()), (r === "Space" || r === " ") && (e.preventDefault(), t(e)), r === "Enter" && (e.preventDefault(), i ? i() : s ? s() : a && a());
+  },
+  /**
+   * Handles keyboard interactions for calendar button
+   *
+   * Ensures the calendar button is keyboard accessible by responding
+   * to Enter and Space keys (standard button activation keys).
+   *
+   * @param event - The keyboard event
+   * @param toggleCalendar - Callback to toggle calendar visibility
+   *
+   * @example
+   * handleButtonKeydown(
+   *   event,
+   *   (e) => this.dispatchToggleCalendar(e)
+   * )
+   */
+  handleButtonKeydown(e, t) {
+    const { key: i } = e;
+    (i === "Enter" || i === " " || i === "Space") && (e.preventDefault(), t(e));
+  }
+};
+var pe = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, c = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? oe(t, i) : t, n = e.length - 1, r; n >= 0; n--)
+    (r = e[n]) && (a = (s ? r(t, i, a) : r(a)) || a);
+  return s && a && pe(t, i, a), a;
+};
+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.popupRef = m(), this.calendarRef = m(), this.handleDocumentClick = (e) => {
+      if (!this.open) return;
+      const t = e.composedPath(), i = this.parentElement, s = this.popupRef.value;
+      !t.includes(this) && !t.includes(s) && !(i && t.includes(i)) && (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, document.addEventListener("keydown", this.handleDocumentKeydown), document.addEventListener("click", this.handleDocumentClick);
+  }
+  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, i) {
+    if (typeof S.addToSelected == "function")
+      return S.addToSelected(e, this.calendarRef, t, i);
+  }
+  handleDateSelect(e) {
+    const t = this.calendarRef.value;
+    if (t && typeof t.handleDateSelect == "function") return t.handleDateSelect(e);
+  }
+  render() {
+    const e = { "pkt-calendar-popup": !0, show: this.open, hide: !this.open };
+    return o`
+      <div
+        class="${$(e)}"
+        ${v(this.popupRef)}
+        id="date-popup"
+        ?hidden=${!this.open}
+        aria-hidden="${!this.open}"
+      >
+        <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}
+          @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>
+      </div>
+    `;
+  }
+};
+c([
+  l({ type: Boolean, reflect: !0 })
+], d.prototype, "open", 2);
+c([
+  l({ type: Boolean })
+], d.prototype, "multiple", 2);
+c([
+  l({ type: Boolean })
+], d.prototype, "range", 2);
+c([
+  l({ type: Boolean })
+], d.prototype, "weeknumbers", 2);
+c([
+  l({ type: Boolean })
+], d.prototype, "withcontrols", 2);
+c([
+  l({ type: Number })
+], d.prototype, "maxMultiple", 2);
+c([
+  l({ type: Array })
+], d.prototype, "selected", 2);
+c([
+  l({ type: String })
+], d.prototype, "earliest", 2);
+c([
+  l({ type: String })
+], d.prototype, "latest", 2);
+c([
+  l({ type: Array })
+], d.prototype, "excludedates", 2);
+c([
+  l({ type: Array })
+], d.prototype, "excludeweekdays", 2);
+c([
+  l({ type: String })
+], d.prototype, "currentmonth", 2);
+d = c([
+  w("pkt-datepicker-popup")
+], d);
+var he = Object.defineProperty, y = (e, t, i, s) => {
+  for (var a = void 0, n = e.length - 1, r; n >= 0; n--)
+    (r = e[n]) && (a = r(t, i, a) || a);
+  return a && he(t, i, a), a;
+};
+class g extends L {
+  constructor() {
+    super(...arguments), this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.inputClasses = {}, this.inputRef = m(), this.btnRef = m();
+  }
+  // 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 o`
+      <button
+        class="${$(V.getButtonClasses())}"
+        type="button"
+        @click=${(i) => this.dispatchToggleCalendar(i)}
+        @keydown=${(i) => {
+      const { key: s } = i;
+      (s === "Enter" || s === " " || s === "Space") && (i.preventDefault(), this.dispatchToggleCalendar(i));
+    }}
+        ?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([
+  l({ type: String })
+], g.prototype, "inputType");
+y([
+  l({ type: String })
+], g.prototype, "id");
+y([
+  l({ type: String })
+], g.prototype, "min");
+y([
+  l({ type: String })
+], g.prototype, "max");
+y([
+  l({ type: String })
+], g.prototype, "placeholder");
+y([
+  l({ type: Boolean })
+], g.prototype, "readonly");
+y([
+  l({ type: Boolean })
+], g.prototype, "disabled");
+y([
+  l({ type: Object })
+], g.prototype, "inputClasses");
+y([
+  l({ type: Object })
+], g.prototype, "internals");
+const H = {
+  calendar: { buttonAltText: "Åpne kalender" }
+}, de = {
+  calendar: { buttonAltText: "Åpne kalender" },
+  generic: { from: "Fra", to: "Til" }
+};
+var ce = Object.defineProperty, me = Object.getOwnPropertyDescriptor, N = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? me(t, i) : t, n = e.length - 1, r; n >= 0; n--)
+    (r = e[n]) && (a = (s ? r(t, i, a) : r(a)) || a);
+  return s && a && ce(t, i, a), a;
+};
+let O = class extends g {
+  constructor() {
+    super(...arguments), this.value = "", this.strings = H;
+  }
+  dispatchManageValidity(e) {
+    this.dispatchEvent(
+      new CustomEvent("manage-validity", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return o`
+      <div class="pkt-input__container">
+        <input
+          class="${$(this.inputClasses)}"
+          .type=${this.inputType}
+          id="${this.id}-input"
+          .value=${this.value}
+          min=${f(this.min)}
+          max=${f(this.max)}
+          placeholder=${f(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) => P.handleInputKeydown(
+      e,
+      (t) => this.dispatchToggleCalendar(t),
+      () => x.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>
+    `;
+  }
+};
+N([
+  l({ type: String })
+], O.prototype, "value", 2);
+N([
+  l({ type: Object })
+], O.prototype, "strings", 2);
+O = N([
+  w("pkt-datepicker-single")
+], O);
+var fe = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, B = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? ge(t, i) : t, n = e.length - 1, r; n >= 0; n--)
+    (r = e[n]) && (a = (s ? r(t, i, a) : r(a)) || a);
+  return s && a && fe(t, i, a), a;
+};
+let _ = class extends g {
+  constructor() {
+    super(...arguments), this.value = [], this.showRangeLabels = !1, this.strings = de, this.inputRefTo = m();
+  }
+  get inputElementTo() {
+    return this.inputRefTo.value;
+  }
+  render() {
+    var t, i;
+    const e = V.getRangeLabelClasses(this.showRangeLabels);
+    return o`
+      <div class="pkt-input__container">
+        ${this.showRangeLabels ? o` <div class="pkt-input-prefix">${(t = this.strings.generic) == null ? void 0 : t.from}</div> ` : I}
+        <input
+          class=${$(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          .value=${this.value[0] ?? ""}
+          min=${f(this.min)}
+          max=${f(this.max)}
+          placeholder=${f(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(s) => {
+      s.preventDefault(), this.dispatchToggleCalendar(s);
+    }}
+          @touchend=${(s) => {
+      s.preventDefault(), this.dispatchToggleCalendar(s);
+    }}
+          @keydown=${(s) => P.handleInputKeydown(
+      s,
+      (a) => this.dispatchToggleCalendar(a),
+      () => x.submitFormOrFallback(
+        this.internals,
+        () => {
+          var a;
+          return (a = this.inputRefTo.value) == null ? void 0 : a.focus();
+        }
+      ),
+      () => {
+        var a;
+        return (a = this.inputRefTo.value) == null ? void 0 : a.focus();
+      },
+      () => {
+        var a;
+        return (a = this.inputRef.value) == null ? void 0 : a.blur();
+      }
+    )}
+          @input=${(s) => {
+      this.dispatchInput(s), s.stopImmediatePropagation();
+    }}
+          @focus=${() => {
+      this.dispatchFocus(), b() && this.dispatchToggleCalendar(new Event("focus"));
+    }}
+          @blur=${(s) => {
+      this.dispatchBlur(s), this.dispatchEvent(
+        new CustomEvent("range-blur", {
+          detail: {
+            event: s,
+            values: this.value,
+            inputType: "from"
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }}
+          @change=${(s) => {
+      this.dispatchChange(s), s.stopImmediatePropagation();
+    }}
+          ${v(this.inputRef)}
+        />
+        <div class="${$(e)}" id="${this.id}-to-label">
+          ${(i = this.strings.generic) == null ? void 0 : i.to}
+        </div>
+        ${this.showRangeLabels ? I : o` <div class="pkt-input-separator">–</div> `}
+        <input
+          class=${$(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-to"
+          aria-labelledby="${this.id}-to-label"
+          .value=${this.value[1] ?? ""}
+          min=${f(this.min)}
+          max=${f(this.max)}
+          placeholder=${f(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(s) => {
+      s.preventDefault(), this.dispatchToggleCalendar(s);
+    }}
+          @touchend=${(s) => {
+      s.preventDefault(), this.dispatchToggleCalendar(s);
+    }}
+          @keydown=${(s) => P.handleInputKeydown(
+      s,
+      (a) => this.dispatchToggleCalendar(a),
+      () => x.submitFormOrFallback(this.internals, () => {
+        var a;
+        return (a = this.inputRefTo.value) == null ? void 0 : a.blur();
+      }),
+      void 0,
+      () => {
+        var a;
+        return (a = this.inputRefTo.value) == null ? void 0 : a.blur();
+      }
+    )}
+          @input=${(s) => {
+      this.dispatchInput(s), s.stopImmediatePropagation();
+    }}
+          @focus=${() => {
+      this.dispatchFocus(), b() && this.dispatchToggleCalendar(new Event("focus"));
+    }}
+          @blur=${(s) => {
+      this.dispatchBlur(s), this.dispatchEvent(
+        new CustomEvent("range-blur", {
+          detail: {
+            event: s,
+            values: this.value,
+            inputType: "to"
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }}
+          @change=${(s) => {
+      this.dispatchChange(s), s.stopImmediatePropagation();
+    }}
+          ${v(this.inputRefTo)}
+        />
+        ${this.renderCalendarButton()}
+      </div>
+    `;
+  }
+};
+B([
+  l({ type: Array })
+], _.prototype, "value", 2);
+B([
+  l({ type: Boolean })
+], _.prototype, "showRangeLabels", 2);
+B([
+  l({ type: Object })
+], _.prototype, "strings", 2);
+_ = B([
+  w("pkt-datepicker-range")
+], _);
+var ve = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, A = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? ye(t, i) : t, n = e.length - 1, r; n >= 0; n--)
+    (r = e[n]) && (a = (s ? r(t, i, a) : r(a)) || a);
+  return s && a && ve(t, i, a), a;
+};
+let T = class extends g {
+  constructor() {
+    super(...arguments), this.value = [], this.strings = H;
+  }
+  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 o`
+      <div class="pkt-input__container">
+        <input
+          class=${$(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          min=${f(this.min)}
+          max=${f(this.max)}
+          placeholder=${f(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) => P.handleInputKeydown(
+      e,
+      (t) => this.dispatchToggleCalendar(t),
+      () => x.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([
+  l({ type: Array })
+], T.prototype, "value", 2);
+A([
+  l({ type: Number })
+], T.prototype, "maxlength", 2);
+A([
+  l({ type: Object })
+], T.prototype, "strings", 2);
+T = A([
+  w("pkt-datepicker-multiple")
+], T);
+var $e = Object.defineProperty, be = Object.getOwnPropertyDescriptor, p = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? be(t, i) : t, n = e.length - 1, r; n >= 0; n--)
+    (r = e[n]) && (a = (s ? r(t, i, a) : r(a)) || a);
+  return s && a && $e(t, i, a), a;
+};
+let u = class extends ee {
+  /**
+   * Housekeeping / lifecycle methods
+   */
+  constructor() {
+    super(), this._valueProperty = "", this.datepickerPopupRef = m(), this._value = [], this.label = "Datovelger", this.dateformat = C.props.dateformat.default, this.multiple = C.props.multiple.default, this.maxlength = null, this.range = C.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = C.props.weeknumbers.default, this.withcontrols = C.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.calRef = m(), this.popupRef = m(), this.helptextSlot = m(), this.singleInputRef = m(), this.rangeInputRef = m(), this.multipleInputRef = m(), this.addToSelected = (e) => {
+      const t = this.datepickerPopupRef.value;
+      return t && typeof t.addToSelected == "function" ? t.addToSelected(e, this.min, this.max) : S.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 ue.getInputType();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.timezone && this.timezone !== window.pktTz && (window.pktTz = this.timezone), this.name = E.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  onInput() {
+    this.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+  valueChanged(e, t) {
+    if (e === t) return;
+    const i = D(e), s = this.multiple && i.length > 1 ? E.filterSelectableDates(
+      i,
+      this.min,
+      this.max,
+      this.excludedates,
+      this.excludeweekdays
+    ) : i;
+    if (this.range && !E.validateRangeOrder(s)) {
+      this._value = [], this._valueProperty = "", super.valueChanged("", t);
+      return;
+    }
+    this._value = s;
+    const a = X(s);
+    this._valueProperty !== a && (this._valueProperty = a), super.valueChanged(a, t);
+  }
+  attributeChangedCallback(e, t, i) {
+    e === "value" && this.value !== t && this.valueChanged(i, t), e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = D(i || "")), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = D(i || "")), super.attributeChangedCallback(e, t, i);
+  }
+  updated(e) {
+    if (e.has("value")) {
+      const t = Array.isArray(this.value) ? this.value.join(",") : this.value, i = e.get("value"), s = Array.isArray(i) ? i.join(",") : i;
+      this.valueChanged(t, s);
+    }
+    (e.has("multiple") || e.has("range")) && (this.name = E.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name), e.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = D(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, i;
+    return this.multiple ? (e = this.multipleInputRef.value) == null ? void 0 : e.inputElement : this.range ? (t = this.rangeInputRef.value) == null ? void 0 : t.inputElement : (i = this.singleInputRef.value) == null ? void 0 : i.inputElement;
+  }
+  get currentInputElementTo() {
+    var e;
+    if (this.range)
+      return (e = this.rangeInputRef.value) == null ? void 0 : e.inputElementTo;
+  }
+  get currentButtonElement() {
+    var e, t, i;
+    return this.multiple ? (e = this.multipleInputRef.value) == null ? void 0 : e.buttonElement : this.range ? (t = this.rangeInputRef.value) == null ? void 0 : t.buttonElement : (i = this.singleInputRef.value) == null ? void 0 : i.buttonElement;
+  }
+  // Override btnRef for compatibility
+  get btnRef() {
+    return { value: this.currentButtonElement };
+  }
+  /**
+   * Rendering
+   */
+  renderInput() {
+    return o`
+      <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 o`
+      <pkt-datepicker-range
+        .value=${this._value}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .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, i = this.currentInputElementTo;
+      if (t && i) {
+        const s = t.value, a = i.value;
+        if (s && a && s > a)
+          i.value = "", this._value = [s], this.value = s;
+        else {
+          const n = [s, a].filter(Boolean);
+          n.length > 0 && (n[0] !== this._value[0] || n[1] !== this._value[1]) && (this._value = n, this.value = n.join(","));
+        }
+      }
+      j.processRangeBlur(
+        e.detail.event,
+        e.detail.values,
+        this.calRef,
+        () => this.clearInputValue(),
+        (s) => this.manageValidity(s)
+      );
+    }}
+        @manage-validity=${(e) => this.manageValidity(e.detail)}
+        @validate-date-input=${(e) => {
+      x.validateDateInput(e.detail, this.internals, this.min, this.max, this.strings);
+    }}
+        @handle-date-select=${(e) => {
+      var i, s;
+      const t = M(e.detail);
+      if (t) {
+        const a = Y(t);
+        this._value[0] !== a && this._value[1] !== a && ((s = (i = this.calRef) == null ? void 0 : i.value) == null || s.handleDateSelect(t));
+      }
+    }}
+        @input-changed=${() => {
+      this.touched = !0;
+    }}
+        ${v(this.rangeInputRef)}
+      ></pkt-datepicker-range>
+    `;
+  }
+  renderMultipleInput() {
+    return o`
+      <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 o`
+      <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}
+        @date-selected=${(e) => {
+      this.value = j.processDateSelection(e.detail, this.multiple, this.range), this._value = e.detail, j.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
+    ), o`
+      <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 ? o`<pkt-date-tags
+              .dates=${this._value}
+              dateformat=${this.dateformat}
+              strings=${this.strings}
+              id-base=${this.id}
+              @date-tag-removed=${(e) => {
+      var s;
+      const t = this.datepickerPopupRef.value, i = M(e.detail);
+      t && i && typeof t.handleDateSelect == "function" ? t.handleDateSelect(i) : (s = this.calRef.value) == null || s.handleDateSelect(i);
+    }}
+            ></pkt-date-tags>` : I}
+        <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;
+    S.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 i = !!t.open;
+      t.toggle(), this.calendarOpen = !i;
+      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([
+  l({ type: String, reflect: !0 })
+], u.prototype, "value", 1);
+p([
+  l({ type: Array })
+], u.prototype, "_value", 2);
+p([
+  l({ type: String, reflect: !0 })
+], u.prototype, "label", 2);
+p([
+  l({ type: String })
+], u.prototype, "dateformat", 2);
+p([
+  l({ type: Boolean, reflect: !0 })
+], u.prototype, "multiple", 2);
+p([
+  l({ type: Number, reflect: !0 })
+], u.prototype, "maxlength", 2);
+p([
+  l({ type: Boolean, reflect: !0 })
+], u.prototype, "range", 2);
+p([
+  l({ type: Boolean })
+], u.prototype, "showRangeLabels", 2);
+p([
+  l({ type: String, reflect: !0 })
+], u.prototype, "min", 2);
+p([
+  l({ type: String, reflect: !0 })
+], u.prototype, "max", 2);
+p([
+  l({ type: Boolean })
+], u.prototype, "weeknumbers", 2);
+p([
+  l({ type: Boolean, reflect: !0 })
+], u.prototype, "withcontrols", 2);
+p([
+  l({ converter: W.csvToArray })
+], u.prototype, "excludedates", 2);
+p([
+  l({ converter: W.csvToArray })
+], u.prototype, "excludeweekdays", 2);
+p([
+  l({ type: String })
+], u.prototype, "currentmonth", 2);
+p([
+  l({ type: Boolean, reflect: !0 })
+], u.prototype, "calendarOpen", 2);
+p([
+  l({ type: String })
+], u.prototype, "timezone", 2);
+p([
+  G()
+], u.prototype, "inputClasses", 2);
+u = p([
+  w("pkt-datepicker")
+], u);
+export {
+  k as P,
+  u as a,
+  O as b,
+  _ as c,
+  T as d
+};