@oslokommune/punkt-elements 13.6.11 → 13.6.12

package/dist/datepicker-DwOkktaP.js

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