@oslokommune/punkt-elements 13.6.11 → 13.6.12

package/dist/datepicker-BEMo4X9s.js

@@ -1,770 +0,0 @@
-import { e as f } from "./class-map-Dw6Wrxwi.js";
-import { o as p } from "./if-defined-D3lgJqT7.js";
-import { P as R, E as C, x as c, n as o, a as T } from "./element-DJZPsA_J.js";
-import { r as L } from "./state-CPQXJ4Ct.js";
-import { f as M, s as E, i as V, n as x, a as O, b as A, d as z, p as K, e as F } from "./calendar-CodWwTHM.js";
-import { P as U } from "./input-element-DQOVrqUZ.js";
-import { e as g, n as m } from "./ref-BCGCor-j.js";
-import "./icon-B1-mkmwB.js";
-import "./input-wrapper-D_JdEqcO.js";
-import { c as j } from "./repeat-B6qPUgAq.js";
-import "./tag-NZ5oeGfw.js";
-import { u as q } from "./stringutils-DJjRa8dG.js";
-import { P as N } from "./pkt-slot-controller-BPGj-LC5.js";
-const W = (t) => new Promise((e) => setTimeout(e, t)), y = {
-  /**
-   * Detects if the current device is iOS (iPhone, iPad, iPod)
-   */
-  isIOS() {
-    const t = navigator.userAgent;
-    return /iP(hone|od|ad)/.test(t);
-  },
-  /**
-   * Detects if the current device is Mobile Safari
-   */
-  isMobileSafari() {
-    const t = navigator.userAgent;
-    return /iP(hone|od|ad)/.test(t) && /Safari/.test(t) && !/CriOS|FxiOS/.test(t);
-  }
-}, d = {
-  /**
-   * Parses a value (string or string array) into an array of strings
-   */
-  parseValue(t) {
-    return t ? Array.isArray(t) ? t.filter(Boolean) : typeof t == "string" ? t.split(",").filter(Boolean) : String(t).split(",").filter(Boolean) : [];
-  },
-  /**
-   * Converts array of dates to comma-separated string
-   */
-  formatValue(t) {
-    return t.join(",");
-  },
-  /**
-   * Ensures name attribute ends with [] for multiple/range inputs
-   */
-  normalizeNameForMultiple(t, e, i) {
-    return t ? (e || i) && !t.endsWith("[]") ? t + "[]" : t : null;
-  },
-  /**
-   * Converts string arrays to proper arrays if they come as strings
-   */
-  normalizeStringArray(t) {
-    return typeof t == "string" ? t.split(",").filter(Boolean) : Array.isArray(t) ? t : [];
-  },
-  /**
-   * Validates that a range has valid order (start <= end)
-   */
-  validateRangeOrder(t) {
-    return !t || t.length !== 2 ? !0 : V(t[0], t[1]);
-  },
-  /**
-   * Sorts date strings chronologically
-   */
-  sortDates(t) {
-    return E(t);
-  },
-  /**
-   * Filters dates to only include selectable ones based on constraints
-   */
-  filterSelectableDates(t, e, i, a, s) {
-    return M(t, e, i, a, s);
-  }
-}, H = {
-  /**
-   * Determines the appropriate input type based on device
-   * Mobile Safari does not play well with type="date" amd custom datepickers
-   */
-  getInputType() {
-    return y.isIOS() ? "text" : "date";
-  }
-}, $ = {
-  /**
-   * Submits the form that contains the given element
-   */
-  submitForm(t) {
-    var i;
-    const e = (i = t.internals) == null ? void 0 : i.form;
-    e && e.requestSubmit();
-  },
-  /**
-   * Submits form if available, otherwise executes fallback action
-   */
-  submitFormOrFallback(t, e) {
-    const i = t == null ? void 0 : t.form;
-    i ? i.requestSubmit() : e();
-  },
-  /**
-   * Validates a date input and sets validity state
-   */
-  validateDateInput(t, e, i, a, s) {
-    var l, u, I, P;
-    const r = t.value;
-    r && (i && i > r ? e.setValidity(
-      { rangeUnderflow: !0 },
-      ((u = (l = s == null ? void 0 : s.forms) == null ? void 0 : l.messages) == null ? void 0 : u.rangeUnderflow) || "Value is below minimum",
-      t
-    ) : a && a < r && e.setValidity(
-      { rangeOverflow: !0 },
-      ((P = (I = s == null ? void 0 : s.forms) == null ? void 0 : I.messages) == null ? void 0 : P.rangeOverflow) || "Value is above maximum",
-      t
-    ));
-  }
-}, B = {
-  /**
-   * Adds a date to selected dates if it's valid
-   */
-  addToSelected(t, e, i, a) {
-    const s = t.target;
-    if (!s.value) return;
-    const r = i ? x(i) : null, l = a ? x(a) : null, u = x(s.value.split(",")[0]);
-    u && !isNaN(u.getTime()) && (!r || u >= r) && (!l || u <= l) && e.value && e.value.handleDateSelect(u), s.value = "";
-  },
-  /**
-   * Handles calendar positioning based on viewport and input position
-   */
-  handleCalendarPosition(t, e, i = !1) {
-    var u;
-    if (!t.value || !e.value) return;
-    const a = ((u = e.value.parentElement) == null ? void 0 : u.getBoundingClientRect()) || e.value.getBoundingClientRect(), s = i ? a.height + 30 : a.height, r = t.value.getBoundingClientRect().height;
-    let l = i ? "calc(100% - 30px)" : "100%";
-    a && a.top + r > window.innerHeight && a.top - r > 0 && (l = `calc(100% - ${s}px - ${r}px)`), t.value.style.top = l;
-  }
-}, _ = {
-  /**
-   * Creates a document click listener for closing calendar
-   */
-  createDocumentClickListener(t, e, i, a, s, r) {
-    return (l) => {
-      t != null && t.value && (i != null && i.value) && !t.value.contains(l.target) && !(e != null && e.value && e.value.contains(l.target)) && !i.value.contains(l.target) && !l.target.closest(".pkt-calendar-popup") && a() && (s(), r());
-    };
-  },
-  /**
-   * Creates a document keydown listener for ESC key
-   */
-  createDocumentKeydownListener(t, e) {
-    return (i) => {
-      i.key === "Escape" && t() && e();
-    };
-  },
-  /**
-   * Handles focus out events for calendar popup
-   */
-  handleFocusOut(t, e, i, a) {
-    e.contains(t.target) || (i(), a());
-  }
-}, S = {
-  /**
-   * Generates input classes for datepicker
-   */
-  getInputClasses(t, e, i, a) {
-    return {
-      "pkt-input": !0,
-      "pkt-datepicker__input": !0,
-      "pkt-input--fullwidth": t,
-      "pkt-datepicker--hasrangelabels": e,
-      "pkt-datepicker--multiple": i,
-      "pkt-datepicker--range": a
-    };
-  },
-  /**
-   * Generates button classes for datepicker
-   */
-  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
-   */
-  getRangeLabelClasses(t) {
-    return {
-      "pkt-input-prefix": t,
-      "pkt-hide": !t
-    };
-  }
-}, D = {
-  /**
-   * Handles date selection from calendar events
-   */
-  processDateSelection(t, e, i) {
-    return !e && !i ? t[0] || "" : Array.isArray(t) ? t.join(",") : t;
-  },
-  /**
-   * Updates input values after calendar selection
-   */
-  updateInputValues(t, e, i, a, s, r) {
-    t.value && (a && (e != null && e.value) ? (t.value.value = i[0] ?? "", e.value.value = i[1] ?? "", r(t.value), r(e.value)) : s || (t.value.value = i.length ? i[0] : "", r(t.value)));
-  },
-  /**
-   * Processes blur events for range inputs
-   */
-  processRangeBlur(t, e, i, a, s) {
-    var l;
-    const r = t.target;
-    if (r.value) {
-      s(r);
-      const u = O(r.value);
-      u && e[0] !== r.value && e[1] && (a(), (l = i == null ? void 0 : i.value) == null || l.handleDateSelect(u));
-    } else e[0] && a();
-  }
-}, b = {
-  /**
-   * Handles common keyboard interactions for datepicker inputs
-   */
-  handleInputKeydown(t, e, i, a, s, r) {
-    const { key: l } = t;
-    l === "," && (t.preventDefault(), r ? r(t) : s && s()), (l === "Space" || l === " ") && (t.preventDefault(), e(t)), l === "Enter" && (t.preventDefault(), i ? i() : a ? a() : s && s());
-  },
-  /**
-   * Handles keyboard interactions for calendar button
-   */
-  handleButtonKeydown(t, e) {
-    const { key: i } = t;
-    (i === "Enter" || i === " " || i === "Space") && (t.preventDefault(), e(t));
-  }
-};
-var G = Object.defineProperty, J = Object.getOwnPropertyDescriptor, w = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? J(e, i) : e, r = t.length - 1, l; r >= 0; r--)
-    (l = t[r]) && (s = (a ? l(e, i, s) : l(s)) || s);
-  return a && s && G(e, i, s), s;
-};
-let v = class extends R {
-  constructor() {
-    super(...arguments), this.dates = [], this.dateformat = "dd.MM.yyyy", this.className = "pkt-datepicker__tags", this.idBase = q();
-  }
-  render() {
-    return this.classes = {
-      "pkt-date-tags": !0,
-      [this.className]: !0
-    }, c`
-      <div class=${f(this.classes)} aria-live="polite">
-        ${Array.isArray(this.dates) && this.dates[0] ? j(
-      d.sortDates((this.dates ?? []).filter(Boolean)),
-      (t) => t,
-      (t) => {
-        var e;
-        return c` <pkt-tag
-                  id=${this.idBase + t + "-tag"}
-                  closeTag
-                  @close=${() => {
-          this.dispatchEvent(new CustomEvent("date-tag-removed", { detail: t }));
-        }}
-                  .ariaLabel=${`${(e = this.strings) == null ? void 0 : e.calendar.deleteDate} ${A(t, this.dateformat)}`}
-                >
-                  <time datetime=${t}>${A(t, this.dateformat)}</time>
-                </pkt-tag>`;
-      }
-    ) : C}
-      </div>
-    `;
-  }
-};
-w([
-  o({ type: Array })
-], v.prototype, "dates", 2);
-w([
-  o({ type: String })
-], v.prototype, "dateformat", 2);
-w([
-  o({ type: String, attribute: "class" })
-], v.prototype, "className", 2);
-w([
-  o({ type: String, attribute: "id-base" })
-], v.prototype, "idBase", 2);
-v = w([
-  T("pkt-date-tags")
-], v);
-const Q = {
-  dateformat: {
-    default: "dd.MM.yyyy"
-  },
-  weeknumbers: {
-    default: !1
-  },
-  withcontrols: {
-    default: !1
-  },
-  multiple: {
-    default: !1
-  },
-  range: {
-    default: !1
-  }
-}, k = {
-  props: Q
-};
-var X = Object.defineProperty, Y = Object.getOwnPropertyDescriptor, h = (t, e, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? Y(e, i) : e, r = t.length - 1, l; r >= 0; r--)
-    (l = t[r]) && (s = (a ? l(e, i, s) : l(s)) || s);
-  return a && s && X(e, i, s), s;
-};
-let n = class extends U {
-  /**
-   * Housekeeping / lifecycle methods
-   */
-  constructor() {
-    super(), this._valueProperty = "", this._value = [], this.label = "Datovelger", this.dateformat = k.props.dateformat.default, this.multiple = k.props.multiple.default, this.maxlength = null, this.range = k.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = k.props.weeknumbers.default, this.withcontrols = k.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = g(), this.inputRefTo = g(), this.btnRef = g(), this.calRef = g(), this.popupRef = g(), this.helptextSlot = g(), this.addToSelected = (t) => {
-      B.addToSelected(t, this.calRef, this.min, this.max);
-    }, this.slotController = new N(this, this.helptextSlot);
-  }
-  get value() {
-    return this._valueProperty;
-  }
-  set value(t) {
-    const e = this._valueProperty;
-    this._valueProperty = Array.isArray(t) ? t.join(",") : t || "", this.valueChanged(this._valueProperty, e), this.requestUpdate("value", e);
-  }
-  /**
-   * Computed properties
-   */
-  get inputType() {
-    return H.getInputType();
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.timezone && this.timezone !== window.pktTz && (window.pktTz = this.timezone), this.name = d.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name, this.documentClickListener = _.createDocumentClickListener(
-      this.inputRef,
-      this.inputRefTo,
-      this.btnRef,
-      () => this.calendarOpen,
-      this.onBlur.bind(this),
-      this.hideCalendar.bind(this)
-    ), this.documentKeydownListener = _.createDocumentKeydownListener(
-      () => this.calendarOpen,
-      this.hideCalendar.bind(this)
-    ), document.addEventListener("click", this.documentClickListener), document.addEventListener("keydown", this.documentKeydownListener);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.documentClickListener && document.removeEventListener("click", this.documentClickListener), this.documentKeydownListener && document.removeEventListener("keydown", this.documentKeydownListener);
-  }
-  onInput() {
-    this.dispatchEvent(new Event("input", { bubbles: !0 }));
-  }
-  valueChanged(t, e) {
-    if (t === e) return;
-    const i = d.parseValue(t), a = this.multiple && i.length > 1 ? d.filterSelectableDates(
-      i,
-      this.min,
-      this.max,
-      this.excludedates,
-      this.excludeweekdays
-    ) : i;
-    if (this.range && !d.validateRangeOrder(a)) {
-      this._value = [], this._valueProperty = "", super.valueChanged("", e);
-      return;
-    }
-    this._value = a;
-    const s = d.formatValue(a);
-    this._valueProperty !== s && (this._valueProperty = s), super.valueChanged(s, e);
-  }
-  attributeChangedCallback(t, e, i) {
-    t === "value" && this.value !== e && this.valueChanged(i, e), t === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = d.normalizeStringArray(i || "")), t === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = d.normalizeStringArray(i || "")), super.attributeChangedCallback(t, e, i);
-  }
-  updated(t) {
-    if (t.has("value")) {
-      const e = Array.isArray(this.value) ? this.value.join(",") : this.value, i = t.get("value"), a = Array.isArray(i) ? i.join(",") : i;
-      this.valueChanged(e, a);
-    }
-    (t.has("multiple") || t.has("range")) && (this.name = d.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name), t.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = d.parseValue(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(t);
-  }
-  /**
-   * Rendering
-   */
-  renderInput() {
-    return c`
-      <input
-        class="${f(this.inputClasses)}"
-        .type=${this.inputType}
-        id="${this.id}-input"
-        .value=${this._value[0] ?? ""}
-        min=${p(this.min)}
-        max=${p(this.max)}
-        placeholder=${p(this.placeholder)}
-        ?readonly=${this.readonly}
-        aria-describedby="${this.id}-helptext"
-        @click=${(t) => {
-      t.preventDefault(), this.showCalendar();
-    }}
-        ?disabled=${this.disabled}
-        @keydown=${(t) => b.handleInputKeydown(
-      // event, toggleCalendar, submitForm, focusNext, blur, comma
-      t,
-      (e) => this.toggleCalendar(e),
-      () => $.submitFormOrFallback(this.internals, () => {
-        var e;
-        return (e = this.inputRef.value) == null ? void 0 : e.blur();
-      }),
-      void 0,
-      () => {
-        var e;
-        return (e = this.inputRef.value) == null ? void 0 : e.blur();
-      }
-    )}
-        @input=${(t) => {
-      this.onInput(), t.stopImmediatePropagation();
-    }}
-        @focus=${() => {
-      this.onFocus(), y.isMobileSafari() && this.showCalendar();
-    }}
-        @blur=${(t) => {
-      var e;
-      (e = this.calRef.value) != null && e.contains(t.relatedTarget) || this.onBlur(), this.manageValidity(t.target), this.value = t.target.value;
-    }}
-        @change=${(t) => {
-      this.touched = !0, t.stopImmediatePropagation();
-    }}
-        ${m(this.inputRef)}
-      />
-    `;
-  }
-  renderRangeInput() {
-    const t = S.getRangeLabelClasses(this.showRangeLabels);
-    return c`
-      ${this.showRangeLabels ? c` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : C}
-      <input
-        class=${f(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        .value=${this._value[0] ?? ""}
-        min=${p(this.min)}
-        max=${p(this.max)}
-        placeholder=${p(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @click=${(e) => {
-      e.preventDefault(), this.showCalendar();
-    }}
-        @keydown=${(e) => b.handleInputKeydown(
-      // event, toggleCalendar, submitForm, focusNext, blur, comma
-      e,
-      (i) => this.toggleCalendar(i),
-      () => $.submitFormOrFallback(this.internals, () => {
-        var i;
-        return (i = this.inputRefTo.value) == null ? void 0 : i.focus();
-      }),
-      () => {
-        var i;
-        return (i = this.inputRefTo.value) == null ? void 0 : i.focus();
-      },
-      () => {
-        var i;
-        return (i = this.inputRef.value) == null ? void 0 : i.blur();
-      }
-    )}
-        @input=${(e) => {
-      this.onInput(), e.stopImmediatePropagation();
-    }}
-        @focus=${() => {
-      this.onFocus(), y.isMobileSafari() && this.showCalendar();
-    }}
-        @blur=${(e) => {
-      D.processRangeBlur(
-        e,
-        this._value,
-        this.calRef,
-        () => this.clearInputValue(),
-        (i) => this.manageValidity(i)
-      );
-    }}
-        @change=${(e) => {
-      e.stopImmediatePropagation();
-    }}
-        ${m(this.inputRef)}
-      />
-      <div class="${f(t)}" id="${this.id}-to-label">
-        ${this.strings.generic.to}
-      </div>
-      ${this.showRangeLabels ? C : c` <div class="pkt-input-separator">–</div> `}
-      <input
-        class=${f(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-to"
-        aria-labelledby="${this.id}-to-label"
-        .value=${this._value[1] ?? ""}
-        min=${p(this.min)}
-        max=${p(this.max)}
-        placeholder=${p(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @click=${(e) => {
-      e.preventDefault(), this.showCalendar();
-    }}
-        @keydown=${(e) => b.handleInputKeydown(
-      // event, toggleCalendar, submitForm, focusNext, blur, comma
-      e,
-      (i) => this.toggleCalendar(i),
-      () => $.submitFormOrFallback(this.internals, () => {
-        var i;
-        return (i = this.inputRefTo.value) == null ? void 0 : i.blur();
-      }),
-      void 0,
-      () => {
-        var i;
-        return (i = this.inputRefTo.value) == null ? void 0 : i.blur();
-      }
-    )}
-        @input=${(e) => {
-      this.onInput(), e.stopImmediatePropagation();
-    }}
-        @focus=${() => {
-      this.onFocus(), y.isMobileSafari() && this.showCalendar();
-    }}
-        @blur=${(e) => {
-      var i, a, s;
-      if ((i = this.calRef.value) != null && i.contains(e.relatedTarget) || this.onBlur(), e.target.value) {
-        this.manageValidity(e.target), $.validateDateInput(
-          e.target,
-          this.internals,
-          this.min,
-          this.max,
-          this.strings
-        );
-        const r = O(e.target.value);
-        r && this._value[1] !== z(r) && ((s = (a = this.calRef) == null ? void 0 : a.value) == null || s.handleDateSelect(r));
-      }
-    }}
-        @change=${(e) => {
-      this.touched = !0, e.stopImmediatePropagation();
-    }}
-        ${m(this.inputRefTo)}
-      />
-    `;
-  }
-  renderMultipleInput() {
-    return c`
-      <input
-        class=${f(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        min=${p(this.min)}
-        max=${p(this.max)}
-        placeholder=${p(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled || this.maxlength && this._value.length >= this.maxlength}
-        @click=${(t) => {
-      t.preventDefault(), this.showCalendar();
-    }}
-        @blur=${(t) => {
-      var e;
-      (e = this.calRef.value) != null && e.contains(t.relatedTarget) || this.onBlur(), this.addToSelected(t);
-    }}
-        @input=${(t) => {
-      this.onInput(), t.stopImmediatePropagation();
-    }}
-        @focus=${() => {
-      this.onFocus(), y.isMobileSafari() && this.showCalendar();
-    }}
-        @keydown=${(t) => b.handleInputKeydown(
-      // event, toggleCalendar, submitForm, focusNext, blur, comma
-      t,
-      (e) => this.toggleCalendar(e),
-      () => $.submitFormOrFallback(this.internals, () => {
-        var e;
-        return (e = this.inputRef.value) == null ? void 0 : e.blur();
-      }),
-      void 0,
-      void 0,
-      (e) => this.addToSelected(e)
-    )}
-        @change=${(t) => {
-      this.touched = !0, t.stopImmediatePropagation();
-    }}
-        ${m(this.inputRef)}
-      />
-    `;
-  }
-  renderCalendar() {
-    return c`<div
-      class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
-      @focusout=${(t) => {
-      this.calendarOpen && this.handleFocusOut(t);
-    }}
-      id="${this.id}-popup"
-      ${m(this.popupRef)}
-    >
-      <pkt-calendar
-        id="${this.id}-calendar"
-        ?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 ? K(this.currentmonth) : null}
-        @date-selected=${(t) => {
-      this.value = D.processDateSelection(t.detail, this.multiple, this.range), this._value = t.detail, D.updateInputValues(
-        this.inputRef,
-        this.inputRefTo,
-        this._value,
-        this.range,
-        this.multiple,
-        (e) => this.manageValidity(e)
-      );
-    }}
-        @close=${() => {
-      this.onBlur(), this.hideCalendar();
-    }}
-        ${m(this.calRef)}
-      ></pkt-calendar>
-    </div>`;
-  }
-  render() {
-    return this.inputClasses = S.getInputClasses(
-      this.fullwidth,
-      this.showRangeLabels,
-      this.multiple,
-      this.range
-    ), this.buttonClasses = S.getButtonClasses(), c`
-      <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" ${m(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        ${this.multiple ? c`<pkt-date-tags
-              .dates=${this._value}
-              dateformat=${this.dateformat}
-              strings=${this.strings}
-              id-base=${this.id}
-              @date-tag-removed=${(t) => {
-      var e;
-      (e = this.calRef.value) == null || e.handleDateSelect(O(t.detail));
-    }}
-            ></pkt-date-tags>` : C}
-        <div
-          class="pkt-datepicker__inputs ${this.range && this.showRangeLabels ? "pkt-input__range-inputs" : ""}"
-        >
-          <div class="pkt-input__container">
-            ${this.range ? this.renderRangeInput() : this.multiple ? this.renderMultipleInput() : this.renderInput()}
-            <button
-              class="${f(this.buttonClasses)}"
-              type="button"
-              @click=${this.toggleCalendar}
-              @keydown=${(t) => b.handleButtonKeydown(t, (e) => this.toggleCalendar(e))}
-              ?disabled=${this.disabled}
-              ${m(this.btnRef)}
-            >
-              <pkt-icon name="calendar"></pkt-icon>
-              <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
-            </button>
-          </div>
-        </div>
-      </pkt-input-wrapper>
-      ${this.renderCalendar()}
-    `;
-  }
-  /**
-   * Handlers
-   */
-  handleCalendarPosition() {
-    const t = this.multiple && !!this.maxlength;
-    B.handleCalendarPosition(this.popupRef, this.inputRef, t);
-  }
-  handleFocusOut(t) {
-    _.handleFocusOut(t, this, this.onBlur.bind(this), this.hideCalendar.bind(this));
-  }
-  async showCalendar() {
-    var t;
-    this.calendarOpen = !0, await W(20), this.handleCalendarPosition(), y.isMobileSafari() && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
-  }
-  hideCalendar() {
-    this.calendarOpen = !1;
-  }
-  async toggleCalendar(t) {
-    t.preventDefault(), this.calendarOpen ? this.hideCalendar() : this.showCalendar();
-  }
-  clearInputValue() {
-    this._value = [], this.value = "";
-  }
-};
-h([
-  o({ type: String, reflect: !0 })
-], n.prototype, "value", 1);
-h([
-  o({ type: Array })
-], n.prototype, "_value", 2);
-h([
-  o({ type: String, reflect: !0 })
-], n.prototype, "label", 2);
-h([
-  o({ type: String })
-], n.prototype, "dateformat", 2);
-h([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "multiple", 2);
-h([
-  o({ type: Number, reflect: !0 })
-], n.prototype, "maxlength", 2);
-h([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "range", 2);
-h([
-  o({ type: Boolean })
-], n.prototype, "showRangeLabels", 2);
-h([
-  o({ type: String, reflect: !0 })
-], n.prototype, "min", 2);
-h([
-  o({ type: String, reflect: !0 })
-], n.prototype, "max", 2);
-h([
-  o({ type: Boolean })
-], n.prototype, "weeknumbers", 2);
-h([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "withcontrols", 2);
-h([
-  o({ converter: F.csvToArray })
-], n.prototype, "excludedates", 2);
-h([
-  o({ converter: F.csvToArray })
-], n.prototype, "excludeweekdays", 2);
-h([
-  o({ type: String })
-], n.prototype, "currentmonth", 2);
-h([
-  o({ type: Boolean, reflect: !0 })
-], n.prototype, "calendarOpen", 2);
-h([
-  o({ type: String })
-], n.prototype, "timezone", 2);
-h([
-  L()
-], n.prototype, "inputClasses", 2);
-h([
-  L()
-], n.prototype, "buttonClasses", 2);
-n = h([
-  T("pkt-datepicker")
-], n);
-export {
-  v as P,
-  n as a
-};