@oslokommune/punkt-elements 13.6.12 → 13.7.0

package/dist/datepicker-B8mifBAm.js

@@ -0,0 +1,1374 @@
+import { P as O, E as B, x as d, n as a, a as _ } from "./element-CRDRygXu.js";
+import { r as N } from "./state-DS_kr2Fy.js";
+import { f as U, s as q, i as W, n as j, a as M, b as z, d as H, p as G, e as K } from "./calendar-DtJh7UYD.js";
+import { P as J } from "./input-element-BcFmygSF.js";
+import { e as u, n as c } from "./ref-Xa5dbh--.js";
+import "./icon-1dy7UZcu.js";
+import "./input-wrapper-CKJU0QWG.js";
+import { e as x } from "./class-map-wy7PUk0P.js";
+import { c as Q } from "./repeat-CJ79egkN.js";
+import "./tag-CqMgt01I.js";
+import { u as X } from "./stringutils-DJjRa8dG.js";
+import { o as C } from "./if-defined-BWZGb3bh.js";
+import { P as Y } from "./pkt-slot-controller-BPGj-LC5.js";
+const Z = (t) => new Promise((e) => setTimeout(e, t)), R = {
+  /**
+   * Detects if the current device is iOS (iPhone, iPad, iPod)
+   * Handles modern iPad Safari which uses desktop user agent since iOS 13
+   */
+  isIOS() {
+    const t = navigator.userAgent;
+    return !!(/iP(hone|od|ad)/.test(t) || /Macintosh/.test(t) && "ontouchend" in document);
+  }
+}, k = {
+  /**
+   * 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, s) {
+    return t ? (e || s) && !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 : W(t[0], t[1]);
+  },
+  /**
+   * Sorts date strings chronologically
+   */
+  sortDates(t) {
+    return q(t);
+  },
+  /**
+   * Filters dates to only include selectable ones based on constraints
+   */
+  filterSelectableDates(t, e, s, n, i) {
+    return U(t, e, s, n, i);
+  }
+}, tt = {
+  /**
+   * Determines the appropriate input type based on device
+   * Mobile Safari does not play well with type="date" amd custom datepickers
+   */
+  getInputType() {
+    return R.isIOS() ? "text" : "date";
+  }
+}, D = {
+  /**
+   * Submits the form that contains the given element
+   */
+  submitForm(t) {
+    var s;
+    const e = (s = t.internals) == null ? void 0 : s.form;
+    e && e.requestSubmit();
+  },
+  /**
+   * Submits form if available, otherwise executes fallback action
+   */
+  submitFormOrFallback(t, e) {
+    const s = t == null ? void 0 : t.form;
+    s ? s.requestSubmit() : e();
+  },
+  /**
+   * Validates a date input and sets validity state
+   */
+  validateDateInput(t, e, s, n, i) {
+    var r, h, V, L;
+    const l = t.value;
+    l && (s && s > l ? e.setValidity(
+      { rangeUnderflow: !0 },
+      ((h = (r = i == null ? void 0 : i.forms) == null ? void 0 : r.messages) == null ? void 0 : h.rangeUnderflow) || "Value is below minimum",
+      t
+    ) : n && n < l && e.setValidity(
+      { rangeOverflow: !0 },
+      ((L = (V = i == null ? void 0 : i.forms) == null ? void 0 : V.messages) == null ? void 0 : L.rangeOverflow) || "Value is above maximum",
+      t
+    ));
+  }
+}, A = {
+  /**
+   * Adds a date to selected dates if it's valid
+   */
+  addToSelected(t, e, s, n) {
+    const i = t.target;
+    if (!i.value) return;
+    const l = s ? j(s) : null, r = n ? j(n) : null, h = j(i.value.split(",")[0]);
+    h && !isNaN(h.getTime()) && (!l || h >= l) && (!r || h <= r) && e.value && e.value.handleDateSelect(h), i.value = "";
+  },
+  /**
+   * Handles calendar positioning based on viewport and input position
+   */
+  handleCalendarPosition(t, e, s = !1) {
+    var h;
+    if (!t.value || !e.value) return;
+    const n = ((h = e.value.parentElement) == null ? void 0 : h.getBoundingClientRect()) || e.value.getBoundingClientRect(), i = s ? n.height + 30 : n.height, l = t.value.getBoundingClientRect().height;
+    let r = s ? "calc(100% - 30px)" : "100%";
+    n && n.top + l > window.innerHeight && n.top - l > 0 && (r = `calc(100% - ${i}px - ${l}px)`), t.value.style.top = r;
+  }
+}, I = {
+  /**
+   * Generates input classes for datepicker
+   */
+  getInputClasses(t, e, s, n, i, l) {
+    return {
+      "pkt-input": !0,
+      "pkt-datepicker__input": !0,
+      "pkt-input--fullwidth": t,
+      "pkt-datepicker--hasrangelabels": e,
+      "pkt-datepicker--multiple": s,
+      "pkt-datepicker--range": n,
+      "ios-readonly-hack": i === !1 && l === "text"
+    };
+  },
+  /**
+   * 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
+    };
+  }
+}, F = {
+  /**
+   * Handles date selection from calendar events
+   */
+  processDateSelection(t, e, s) {
+    return !e && !s ? t[0] || "" : Array.isArray(t) ? t.join(",") : t;
+  },
+  /**
+   * Updates input values after calendar selection
+   */
+  updateInputValues(t, e, s, n, i, l) {
+    t.value && (n && (e != null && e.value) ? (t.value.value = s[0] ?? "", e.value.value = s[1] ?? "", l(t.value), l(e.value)) : i || (t.value.value = s.length ? s[0] : "", l(t.value)));
+  },
+  /**
+   * Processes blur events for range inputs
+   */
+  processRangeBlur(t, e, s, n, i) {
+    var r;
+    const l = t.target;
+    if (l.value) {
+      i(l);
+      const h = M(l.value);
+      h && e[0] !== l.value && e[1] && (n(), (r = s == null ? void 0 : s.value) == null || r.handleDateSelect(h));
+    } else e[0] && n();
+  }
+}, T = {
+  /**
+   * Handles common keyboard interactions for datepicker inputs
+   */
+  handleInputKeydown(t, e, s, n, i, l) {
+    const { key: r } = t;
+    r === "," && (t.preventDefault(), l ? l(t) : i && i()), (r === "Space" || r === " ") && (t.preventDefault(), e(t)), r === "Enter" && (t.preventDefault(), s ? s() : n ? n() : i && i());
+  },
+  /**
+   * Handles keyboard interactions for calendar button
+   */
+  handleButtonKeydown(t, e) {
+    const { key: s } = t;
+    (s === "Enter" || s === " " || s === "Space") && (t.preventDefault(), e(t));
+  }
+};
+var et = Object.defineProperty, st = Object.getOwnPropertyDescriptor, P = (t, e, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? st(e, s) : e, l = t.length - 1, r; l >= 0; l--)
+    (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
+  return n && i && et(e, s, i), i;
+};
+let E = class extends O {
+  constructor() {
+    super(...arguments), this.dates = [], this.dateformat = "dd.MM.yyyy", this.className = "pkt-datepicker__tags", this.idBase = X();
+  }
+  render() {
+    return this.classes = {
+      "pkt-date-tags": !0,
+      [this.className]: !0
+    }, d`
+      <div class=${x(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates) && this.dates[0] ? Q(
+      k.sortDates((this.dates ?? []).filter(Boolean)),
+      (t) => t,
+      (t) => {
+        var e;
+        return d` <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} ${z(t, this.dateformat)}`}
+                >
+                  <time datetime=${t}>${z(t, this.dateformat)}</time>
+                </pkt-tag>`;
+      }
+    ) : B}
+      </div>
+    `;
+  }
+};
+P([
+  a({ type: Array })
+], E.prototype, "dates", 2);
+P([
+  a({ type: String })
+], E.prototype, "dateformat", 2);
+P([
+  a({ type: String, attribute: "class" })
+], E.prototype, "className", 2);
+P([
+  a({ type: String, attribute: "id-base" })
+], E.prototype, "idBase", 2);
+E = P([
+  _("pkt-date-tags")
+], E);
+const it = { dateformat: { default: "dd.MM.yyyy" }, weeknumbers: { default: !1 }, withcontrols: { default: !1 }, multiple: { default: !1 }, range: { default: !1 } }, S = {
+  props: it
+};
+var at = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, v = (t, e, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? nt(e, s) : e, l = t.length - 1, r; l >= 0; l--)
+    (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
+  return n && i && at(e, s, i), i;
+};
+let g = class extends O {
+  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 = u(), this.calendarRef = u(), this.handleDocumentClick = (t) => {
+      if (!this.open) return;
+      const e = t.composedPath(), s = this.parentElement, n = this.popupRef.value;
+      !e.includes(this) && !e.includes(n) && !(s && e.includes(s)) && (this.hide(), this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 })));
+    }, this.handleDocumentKeydown = (t) => {
+      this.open && t.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 t;
+    this.open = !0, (t = this.calendarRef.value) == null || t.focus();
+  }
+  hide() {
+    this.open = !1;
+  }
+  toggle() {
+    this.open ? this.hide() : this.show();
+  }
+  contains(t) {
+    var e;
+    return !!t && !!((e = this.popupRef.value) != null && e.contains(t));
+  }
+  focusOnCurrentDate() {
+    const t = this.calendarRef.value;
+    t && typeof t.focusOnCurrentDate == "function" && t.focusOnCurrentDate();
+  }
+  addToSelected(t, e, s) {
+    if (typeof A.addToSelected == "function")
+      return A.addToSelected(t, this.calendarRef, e, s);
+  }
+  handleDateSelect(t) {
+    const e = this.calendarRef.value;
+    if (e && typeof e.handleDateSelect == "function") return e.handleDateSelect(t);
+  }
+  render() {
+    const t = { "pkt-calendar-popup": !0, show: this.open, hide: !this.open };
+    return d`
+      <div
+        class="${x(t)}"
+        ${c(this.popupRef)}
+        id="date-popup"
+        ?hidden=${!this.open}
+        aria-hidden="${!this.open}"
+      >
+        <pkt-calendar
+          ${c(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=${(e) => {
+      this.selected = e.detail, this.dispatchEvent(
+        new CustomEvent("date-selected", { detail: e.detail, bubbles: !0, composed: !0 })
+      );
+    }}
+          @close=${() => {
+      this.hide(), this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
+    }}
+        ></pkt-calendar>
+      </div>
+    `;
+  }
+};
+v([
+  a({ type: Boolean, reflect: !0 })
+], g.prototype, "open", 2);
+v([
+  a({ type: Boolean })
+], g.prototype, "multiple", 2);
+v([
+  a({ type: Boolean })
+], g.prototype, "range", 2);
+v([
+  a({ type: Boolean })
+], g.prototype, "weeknumbers", 2);
+v([
+  a({ type: Boolean })
+], g.prototype, "withcontrols", 2);
+v([
+  a({ type: Number })
+], g.prototype, "maxMultiple", 2);
+v([
+  a({ type: Array })
+], g.prototype, "selected", 2);
+v([
+  a({ type: String })
+], g.prototype, "earliest", 2);
+v([
+  a({ type: String })
+], g.prototype, "latest", 2);
+v([
+  a({ type: Array })
+], g.prototype, "excludedates", 2);
+v([
+  a({ type: Array })
+], g.prototype, "excludeweekdays", 2);
+v([
+  a({ type: String })
+], g.prototype, "currentmonth", 2);
+g = v([
+  _("pkt-datepicker-popup")
+], g);
+var lt = Object.defineProperty, rt = Object.getOwnPropertyDescriptor, w = (t, e, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? rt(e, s) : e, l = t.length - 1, r; l >= 0; l--)
+    (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
+  return n && i && lt(e, s, i), i;
+};
+let y = class extends O {
+  constructor() {
+    super(...arguments), this.value = "", this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.inputClasses = {}, this.strings = { calendar: { buttonAltText: "Åpne kalender" } }, this.inputRef = u(), this.btnRef = u();
+  }
+  get inputElement() {
+    return this.inputRef.value;
+  }
+  get buttonElement() {
+    return this.btnRef.value;
+  }
+  get isInputReadonly() {
+    return this.readonly || this.inputType === "text";
+  }
+  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
+      })
+    );
+  }
+  dispatchManageValidity(t) {
+    this.dispatchEvent(
+      new CustomEvent("manage-validity", {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    return d`
+      <div class="pkt-input__container">
+        <input
+          class="${x(this.inputClasses)}"
+          .type=${this.inputType}
+          id="${this.id}-input"
+          .value=${this.value}
+          min=${C(this.min)}
+          max=${C(this.max)}
+          placeholder=${C(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          aria-describedby="${this.id}-helptext"
+          @click=${(t) => {
+      t.preventDefault(), this.dispatchToggleCalendar(t);
+    }}
+          @touchend=${(t) => {
+      t.preventDefault(), this.dispatchToggleCalendar(t);
+    }}
+          ?disabled=${this.disabled}
+          @keydown=${(t) => T.handleInputKeydown(
+      t,
+      (e) => this.dispatchToggleCalendar(e),
+      () => D.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.dispatchInput(t), t.stopImmediatePropagation();
+    }}
+          @focus=${() => {
+      this.dispatchFocus(), R.isIOS() && this.dispatchToggleCalendar(new Event("focus"));
+    }}
+          @blur=${(t) => {
+      this.dispatchBlur(t), this.dispatchManageValidity(t.target), this.dispatchEvent(
+        new CustomEvent("value-change", {
+          detail: t.target.value,
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }}
+          @change=${(t) => {
+      this.dispatchChange(t), t.stopImmediatePropagation();
+    }}
+          ${c(this.inputRef)}
+        />
+        <button
+          class="${x(I.getButtonClasses())}"
+          type="button"
+          @click=${(t) => this.dispatchToggleCalendar(t)}
+          @keydown=${(t) => T.handleButtonKeydown(t, (e) => this.dispatchToggleCalendar(e))}
+          ?disabled=${this.disabled}
+          ${c(this.btnRef)}
+        >
+          <pkt-icon name="calendar"></pkt-icon>
+          <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
+        </button>
+      </div>
+    `;
+  }
+};
+w([
+  a({ type: String })
+], y.prototype, "value", 2);
+w([
+  a({ type: String })
+], y.prototype, "inputType", 2);
+w([
+  a({ type: String })
+], y.prototype, "id", 2);
+w([
+  a({ type: String })
+], y.prototype, "min", 2);
+w([
+  a({ type: String })
+], y.prototype, "max", 2);
+w([
+  a({ type: String })
+], y.prototype, "placeholder", 2);
+w([
+  a({ type: Boolean })
+], y.prototype, "readonly", 2);
+w([
+  a({ type: Boolean })
+], y.prototype, "disabled", 2);
+w([
+  a({ type: Object })
+], y.prototype, "inputClasses", 2);
+w([
+  a({ type: Object })
+], y.prototype, "internals", 2);
+w([
+  a({ type: Object })
+], y.prototype, "strings", 2);
+y = w([
+  _("pkt-datepicker-single")
+], y);
+var pt = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, b = (t, e, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? ot(e, s) : e, l = t.length - 1, r; l >= 0; l--)
+    (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
+  return n && i && pt(e, s, i), i;
+};
+let m = class extends O {
+  constructor() {
+    super(...arguments), this.value = [], this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.showRangeLabels = !1, this.inputClasses = {}, this.strings = { generic: { from: "Fra", to: "Til" } }, this.inputRef = u(), this.inputRefTo = u(), this.btnRef = u();
+  }
+  get inputElement() {
+    return this.inputRef.value;
+  }
+  get inputElementTo() {
+    return this.inputRefTo.value;
+  }
+  get buttonElement() {
+    return this.btnRef.value;
+  }
+  get isInputReadonly() {
+    return this.readonly || this.inputType === "text";
+  }
+  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
+      })
+    );
+  }
+  dispatchManageValidity(t) {
+    this.dispatchEvent(
+      new CustomEvent("manage-validity", {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    const t = I.getRangeLabelClasses(this.showRangeLabels);
+    return d`
+      <div class="pkt-input__container">
+        ${this.showRangeLabels ? d` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : B}
+        <input
+          class=${x(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.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(e) => {
+      e.preventDefault(), this.dispatchToggleCalendar(e);
+    }}
+          @touchend=${(e) => {
+      e.preventDefault(), this.dispatchToggleCalendar(e);
+    }}
+          @keydown=${(e) => T.handleInputKeydown(
+      e,
+      (s) => this.dispatchToggleCalendar(s),
+      () => D.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=${(e) => {
+      this.dispatchInput(e), e.stopImmediatePropagation();
+    }}
+          @focus=${() => {
+      this.dispatchFocus(), R.isIOS() && this.dispatchToggleCalendar(new Event("focus"));
+    }}
+          @blur=${(e) => {
+      this.dispatchEvent(
+        new CustomEvent("range-blur", {
+          detail: {
+            event: e,
+            values: this.value,
+            inputType: "from"
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }}
+          @change=${(e) => {
+      e.stopImmediatePropagation();
+    }}
+          ${c(this.inputRef)}
+        />
+        <div class="${x(t)}" id="${this.id}-to-label">
+          ${this.strings.generic.to}
+        </div>
+        ${this.showRangeLabels ? B : d` <div class="pkt-input-separator">–</div> `}
+        <input
+          class=${x(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.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(e) => {
+      e.preventDefault(), this.dispatchToggleCalendar(e);
+    }}
+          @touchend=${(e) => {
+      e.preventDefault(), this.dispatchToggleCalendar(e);
+    }}
+          @keydown=${(e) => T.handleInputKeydown(
+      e,
+      (s) => this.dispatchToggleCalendar(s),
+      () => D.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=${(e) => {
+      this.dispatchInput(e), e.stopImmediatePropagation();
+    }}
+          @focus=${() => {
+      this.dispatchFocus(), R.isIOS() && this.dispatchToggleCalendar(new Event("focus"));
+    }}
+          @blur=${(e) => {
+      this.dispatchBlur(e), e.target.value && (this.dispatchManageValidity(e.target), this.dispatchEvent(
+        new CustomEvent("validate-date-input", {
+          detail: e.target,
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.dispatchEvent(
+        new CustomEvent("handle-date-select", {
+          detail: e.target.value,
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    }}
+          @change=${(e) => {
+      this.dispatchChange(e), e.stopImmediatePropagation();
+    }}
+          ${c(this.inputRefTo)}
+        />
+        <button
+          class="${x(I.getButtonClasses())}"
+          type="button"
+          @click=${(e) => this.dispatchToggleCalendar(e)}
+          @keydown=${(e) => T.handleButtonKeydown(e, (s) => this.dispatchToggleCalendar(s))}
+          ?disabled=${this.disabled}
+          ${c(this.btnRef)}
+        >
+          <pkt-icon name="calendar"></pkt-icon>
+          <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
+        </button>
+      </div>
+    `;
+  }
+};
+b([
+  a({ type: Array })
+], m.prototype, "value", 2);
+b([
+  a({ type: String })
+], m.prototype, "inputType", 2);
+b([
+  a({ type: String })
+], m.prototype, "id", 2);
+b([
+  a({ type: String })
+], m.prototype, "min", 2);
+b([
+  a({ type: String })
+], m.prototype, "max", 2);
+b([
+  a({ type: String })
+], m.prototype, "placeholder", 2);
+b([
+  a({ type: Boolean })
+], m.prototype, "readonly", 2);
+b([
+  a({ type: Boolean })
+], m.prototype, "disabled", 2);
+b([
+  a({ type: Boolean })
+], m.prototype, "showRangeLabels", 2);
+b([
+  a({ type: Object })
+], m.prototype, "inputClasses", 2);
+b([
+  a({ type: Object })
+], m.prototype, "internals", 2);
+b([
+  a({ type: Object })
+], m.prototype, "strings", 2);
+m = b([
+  _("pkt-datepicker-range")
+], m);
+var ut = Object.defineProperty, ht = Object.getOwnPropertyDescriptor, $ = (t, e, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? ht(e, s) : e, l = t.length - 1, r; l >= 0; l--)
+    (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
+  return n && i && ut(e, s, i), i;
+};
+let f = class extends O {
+  constructor() {
+    super(...arguments), this.value = [], this.inputType = "date", this.id = "", this.readonly = !1, this.disabled = !1, this.inputClasses = {}, this.strings = { calendar: { buttonAltText: "Åpne kalender" } }, this.inputRef = u(), this.btnRef = u();
+  }
+  get inputElement() {
+    return this.inputRef.value;
+  }
+  get buttonElement() {
+    return this.btnRef.value;
+  }
+  get isInputReadonly() {
+    return this.readonly || this.inputType === "text";
+  }
+  get isInputDisabled() {
+    return this.disabled || this.maxlength !== void 0 && this.maxlength !== null && this.value.length >= this.maxlength;
+  }
+  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
+      })
+    );
+  }
+  dispatchAddToSelected(t) {
+    this.dispatchEvent(
+      new CustomEvent("add-to-selected", {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    return d`
+      <div class="pkt-input__container">
+        <input
+          class=${x(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          min=${C(this.min)}
+          max=${C(this.max)}
+          placeholder=${C(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.isInputDisabled}
+          @click=${(t) => {
+      t.preventDefault(), this.dispatchToggleCalendar(t);
+    }}
+          @touchend=${(t) => {
+      t.preventDefault(), this.dispatchToggleCalendar(t);
+    }}
+          @blur=${(t) => {
+      this.dispatchBlur(t), this.dispatchAddToSelected(t);
+    }}
+          @input=${(t) => {
+      this.dispatchInput(t), t.stopImmediatePropagation();
+    }}
+          @focus=${() => {
+      this.dispatchFocus(), R.isIOS() && this.dispatchToggleCalendar(new Event("focus"));
+    }}
+          @keydown=${(t) => T.handleInputKeydown(
+      t,
+      (e) => this.dispatchToggleCalendar(e),
+      () => D.submitFormOrFallback(this.internals, () => {
+        var e;
+        return (e = this.inputRef.value) == null ? void 0 : e.blur();
+      }),
+      void 0,
+      void 0,
+      (e) => this.dispatchAddToSelected(e)
+    )}
+          @change=${(t) => {
+      this.dispatchChange(t), t.stopImmediatePropagation();
+    }}
+          ${c(this.inputRef)}
+        />
+        <button
+          class="${x(I.getButtonClasses())}"
+          type="button"
+          @click=${(t) => this.dispatchToggleCalendar(t)}
+          @keydown=${(t) => T.handleButtonKeydown(t, (e) => this.dispatchToggleCalendar(e))}
+          ?disabled=${this.disabled}
+          ${c(this.btnRef)}
+        >
+          <pkt-icon name="calendar"></pkt-icon>
+          <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
+        </button>
+      </div>
+    `;
+  }
+};
+$([
+  a({ type: Array })
+], f.prototype, "value", 2);
+$([
+  a({ type: String })
+], f.prototype, "inputType", 2);
+$([
+  a({ type: String })
+], f.prototype, "id", 2);
+$([
+  a({ type: String })
+], f.prototype, "min", 2);
+$([
+  a({ type: String })
+], f.prototype, "max", 2);
+$([
+  a({ type: String })
+], f.prototype, "placeholder", 2);
+$([
+  a({ type: Boolean })
+], f.prototype, "readonly", 2);
+$([
+  a({ type: Boolean })
+], f.prototype, "disabled", 2);
+$([
+  a({ type: Number })
+], f.prototype, "maxlength", 2);
+$([
+  a({ type: Object })
+], f.prototype, "inputClasses", 2);
+$([
+  a({ type: Object })
+], f.prototype, "internals", 2);
+$([
+  a({ type: Object })
+], f.prototype, "strings", 2);
+f = $([
+  _("pkt-datepicker-multiple")
+], f);
+var dt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, o = (t, e, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? ct(e, s) : e, l = t.length - 1, r; l >= 0; l--)
+    (r = t[l]) && (i = (n ? r(e, s, i) : r(i)) || i);
+  return n && i && dt(e, s, i), i;
+};
+let p = class extends J {
+  /**
+   * Housekeeping / lifecycle methods
+   */
+  constructor() {
+    super(), this._valueProperty = "", this.datepickerPopupRef = u(), this._value = [], this.label = "Datovelger", this.dateformat = S.props.dateformat.default, this.multiple = S.props.multiple.default, this.maxlength = null, this.range = S.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = S.props.weeknumbers.default, this.withcontrols = S.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.calRef = u(), this.popupRef = u(), this.helptextSlot = u(), this.singleInputRef = u(), this.rangeInputRef = u(), this.multipleInputRef = u(), this.addToSelected = (t) => {
+      const e = this.datepickerPopupRef.value;
+      return e && typeof e.addToSelected == "function" ? e.addToSelected(t, this.min, this.max) : A.addToSelected(t, this.calRef, this.min, this.max);
+    }, this.slotController = new Y(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 tt.getInputType();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.timezone && this.timezone !== window.pktTz && (window.pktTz = this.timezone), this.name = k.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  onInput() {
+    this.dispatchEvent(new Event("input", { bubbles: !0 }));
+  }
+  valueChanged(t, e) {
+    if (t === e) return;
+    const s = k.parseValue(t), n = this.multiple && s.length > 1 ? k.filterSelectableDates(
+      s,
+      this.min,
+      this.max,
+      this.excludedates,
+      this.excludeweekdays
+    ) : s;
+    if (this.range && !k.validateRangeOrder(n)) {
+      this._value = [], this._valueProperty = "", super.valueChanged("", e);
+      return;
+    }
+    this._value = n;
+    const i = k.formatValue(n);
+    this._valueProperty !== i && (this._valueProperty = i), super.valueChanged(i, e);
+  }
+  attributeChangedCallback(t, e, s) {
+    t === "value" && this.value !== e && this.valueChanged(s, e), t === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = k.normalizeStringArray(s || "")), t === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = k.normalizeStringArray(s || "")), super.attributeChangedCallback(t, e, s);
+  }
+  updated(t) {
+    if (t.has("value")) {
+      const e = Array.isArray(this.value) ? this.value.join(",") : this.value, s = t.get("value"), n = Array.isArray(s) ? s.join(",") : s;
+      this.valueChanged(e, n);
+    }
+    (t.has("multiple") || t.has("range")) && (this.name = k.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name), t.has("multiple") && (this.multiple && !Array.isArray(this._value) ? this._value = k.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);
+  }
+  /**
+   * 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 t, e, s;
+    return this.multiple ? (t = this.multipleInputRef.value) == null ? void 0 : t.inputElement : this.range ? (e = this.rangeInputRef.value) == null ? void 0 : e.inputElement : (s = this.singleInputRef.value) == null ? void 0 : s.inputElement;
+  }
+  get currentInputElementTo() {
+    var t;
+    if (this.range)
+      return (t = this.rangeInputRef.value) == null ? void 0 : t.inputElementTo;
+  }
+  get currentButtonElement() {
+    var t, e, s;
+    return this.multiple ? (t = this.multipleInputRef.value) == null ? void 0 : t.buttonElement : this.range ? (e = this.rangeInputRef.value) == null ? void 0 : e.buttonElement : (s = this.singleInputRef.value) == null ? void 0 : s.buttonElement;
+  }
+  // Override btnRef for compatibility
+  get btnRef() {
+    return { value: this.currentButtonElement };
+  }
+  /**
+   * Rendering
+   */
+  renderInput() {
+    return d`
+      <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=${(t) => this.toggleCalendar(t.detail)}
+        @input-change=${() => this.onInput()}
+        @input-focus=${() => this.onFocus()}
+        @input-blur=${(t) => {
+      var e;
+      (e = this.calRef.value) != null && e.contains(t.detail.relatedTarget) || this.onBlur();
+    }}
+        @manage-validity=${(t) => this.manageValidity(t.detail)}
+        @value-change=${(t) => {
+      this.value = t.detail;
+    }}
+        @input-changed=${() => {
+      this.touched = !0;
+    }}
+        ${c(this.singleInputRef)}
+      ></pkt-datepicker-single>
+    `;
+  }
+  renderRangeInput() {
+    return d`
+      <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=${(t) => this.toggleCalendar(t.detail)}
+        @input-change=${() => this.onInput()}
+        @input-focus=${() => this.onFocus()}
+        @input-blur=${(t) => {
+      var e;
+      (e = this.calRef.value) != null && e.contains(t.detail.relatedTarget) || this.onBlur();
+    }}
+        @range-blur=${(t) => {
+      F.processRangeBlur(
+        t.detail.event,
+        t.detail.values,
+        this.calRef,
+        () => this.clearInputValue(),
+        (e) => this.manageValidity(e)
+      );
+    }}
+        @manage-validity=${(t) => this.manageValidity(t.detail)}
+        @validate-date-input=${(t) => {
+      D.validateDateInput(t.detail, this.internals, this.min, this.max, this.strings);
+    }}
+        @handle-date-select=${(t) => {
+      var s, n;
+      const e = M(t.detail);
+      e && this._value[1] !== H(e) && ((n = (s = this.calRef) == null ? void 0 : s.value) == null || n.handleDateSelect(e));
+    }}
+        @input-changed=${() => {
+      this.touched = !0;
+    }}
+        ${c(this.rangeInputRef)}
+      ></pkt-datepicker-range>
+    `;
+  }
+  renderMultipleInput() {
+    return d`
+      <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=${(t) => this.toggleCalendar(t.detail)}
+        @input-change=${() => this.onInput()}
+        @input-focus=${() => this.onFocus()}
+        @input-blur=${(t) => {
+      var e;
+      (e = this.calRef.value) != null && e.contains(t.detail.relatedTarget) || this.onBlur();
+    }}
+        @add-to-selected=${(t) => this.addToSelected(t.detail)}
+        @input-changed=${() => {
+      this.touched = !0;
+    }}
+        ${c(this.multipleInputRef)}
+      ></pkt-datepicker-multiple>
+    `;
+  }
+  renderCalendar() {
+    return d`
+      <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 ? G(this.currentmonth) : null}
+        @date-selected=${(t) => {
+      this.value = F.processDateSelection(t.detail, this.multiple, this.range), this._value = t.detail, F.updateInputValues(
+        this.inputRef,
+        this.inputRefTo,
+        this._value,
+        this.range,
+        this.multiple,
+        (e) => this.manageValidity(e)
+      );
+    }}
+        @close=${() => {
+      this.onBlur(), this.hideCalendar();
+    }}
+        ${c(this.datepickerPopupRef)}
+      ></pkt-datepicker-popup>
+    `;
+  }
+  render() {
+    return this.inputClasses = I.getInputClasses(
+      this.fullwidth,
+      this.showRangeLabels,
+      this.multiple,
+      this.range,
+      this.readonly,
+      this.inputType
+    ), d`
+      <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" ${c(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        ${this.multiple ? d`<pkt-date-tags
+              .dates=${this._value}
+              dateformat=${this.dateformat}
+              strings=${this.strings}
+              id-base=${this.id}
+              @date-tag-removed=${(t) => {
+      var n;
+      const e = this.datepickerPopupRef.value, s = M(t.detail);
+      e && s && typeof e.handleDateSelect == "function" ? e.handleDateSelect(s) : (n = this.calRef.value) == null || n.handleDateSelect(s);
+    }}
+            ></pkt-date-tags>` : B}
+        <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 t = this.multiple && !!this.maxlength;
+    A.handleCalendarPosition(this.popupRef, this.inputRef, t);
+  }
+  async showCalendar() {
+    var e;
+    const t = this.datepickerPopupRef.value;
+    if (this.calendarOpen = !0, t && typeof t.show == "function") {
+      t.show(), R.isIOS() && t.focusOnCurrentDate();
+      return;
+    }
+    await Z(20), this.handleCalendarPosition(), R.isIOS() && ((e = this.calRef.value) == null || e.focusOnCurrentDate());
+  }
+  hideCalendar() {
+    const t = this.datepickerPopupRef.value;
+    if (this.calendarOpen = !1, t && typeof t.hide == "function") return t.hide();
+  }
+  async toggleCalendar(t) {
+    t.preventDefault();
+    const e = this.datepickerPopupRef.value;
+    if (e && typeof e.toggle == "function") {
+      const s = !!e.open;
+      e.toggle(), this.calendarOpen = !s;
+      return;
+    }
+    this.calendarOpen ? this.hideCalendar() : this.showCalendar();
+  }
+  clearInputValue() {
+    this._value = [], this.value = "";
+  }
+};
+o([
+  a({ type: String, reflect: !0 })
+], p.prototype, "value", 1);
+o([
+  a({ type: Array })
+], p.prototype, "_value", 2);
+o([
+  a({ type: String, reflect: !0 })
+], p.prototype, "label", 2);
+o([
+  a({ type: String })
+], p.prototype, "dateformat", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "multiple", 2);
+o([
+  a({ type: Number, reflect: !0 })
+], p.prototype, "maxlength", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "range", 2);
+o([
+  a({ type: Boolean })
+], p.prototype, "showRangeLabels", 2);
+o([
+  a({ type: String, reflect: !0 })
+], p.prototype, "min", 2);
+o([
+  a({ type: String, reflect: !0 })
+], p.prototype, "max", 2);
+o([
+  a({ type: Boolean })
+], p.prototype, "weeknumbers", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "withcontrols", 2);
+o([
+  a({ converter: K.csvToArray })
+], p.prototype, "excludedates", 2);
+o([
+  a({ converter: K.csvToArray })
+], p.prototype, "excludeweekdays", 2);
+o([
+  a({ type: String })
+], p.prototype, "currentmonth", 2);
+o([
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "calendarOpen", 2);
+o([
+  a({ type: String })
+], p.prototype, "timezone", 2);
+o([
+  N()
+], p.prototype, "inputClasses", 2);
+p = o([
+  _("pkt-datepicker")
+], p);
+export {
+  E as P,
+  p as a,
+  y as b,
+  m as c,
+  f as d
+};