@sebgroup/green-core 1.69.4 → 1.70.1

package/components/datepicker/datepicker.component.js

@@ -0,0 +1,749 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "../../chunks/chunk.QTSIPXV3.js";
+var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
+import { localized, msg } from "@lit/localize";
+import { nothing } from "lit";
+import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
+import { join } from "lit/directives/join.js";
+import { map } from "lit/directives/map.js";
+import { repeat } from "lit/directives/repeat.js";
+import { until } from "lit/directives/until.js";
+import { when } from "lit/directives/when.js";
+import { isSameDay } from "date-fns";
+import { GdsButton } from "../../components/button/button.component";
+import { GdsDropdown } from "../../components/dropdown/dropdown.component";
+import { GdsFlex } from "../../components/flex/flex.component";
+import { gdsCustomElement, html } from "../../scoping";
+import { tokens } from "../../tokens.style";
+import { TransitionalStyles } from "../../transitional-styles";
+import { watch } from "../../utils/decorators";
+import {
+  dateArrayConverter,
+  dateConverter
+} from "../../utils/helpers/attribute-converters";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "../../utils/mixins/declarative-layout-mixins";
+import { GdsCalendar } from "../calendar/calendar.component";
+import { GdsFormControlElement } from "../form/form-control";
+import { IconCalendar } from "../icon/icons/calendar.component";
+import { IconCalenderAdd } from "../icon/icons/calender-add.component";
+import { IconChevronLeft } from "../icon/icons/chevron-left.component";
+import { IconChevronRight } from "../icon/icons/chevron-right.component";
+import { GdsPopover } from "../popover/popover.component";
+import { GdsDatePartSpinner } from "./date-part-spinner";
+import { styles } from "./datepicker.styles";
+let Datepicker = class extends GdsFormControlElement {
+  constructor() {
+    super();
+    __privateAdd(this, _renderBackToValidRangeButton);
+    __privateAdd(this, _focusDate);
+    __privateAdd(this, _getSpinnerLabel);
+    __privateAdd(this, _getMinSpinnerValue);
+    __privateAdd(this, _getMaxSpinnerValue);
+    __privateAdd(this, _dispatchChangeEvent);
+    __privateAdd(this, _dispatchInputEvent);
+    /**
+     * Takes a dateformat string from the dateformat attribute and turns it to a DateFormatLayout object used in rendering the template.
+     */
+    __privateAdd(this, _parseDateFormat);
+    /**
+     * Returns a year iterator between the min and max dates for use in the year dropdown.
+     */
+    __privateAdd(this, _years);
+    __privateAdd(this, _isValueOutsideRange);
+    this.min = new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1);
+    this.max = new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 0, 1);
+    this.open = false;
+    this.supportingText = "";
+    this.size = "large";
+    this.showWeekNumbers = false;
+    this.hideLabel = false;
+    this.disabledWeekends = false;
+    this._focusedMonth = (/* @__PURE__ */ new Date()).getMonth();
+    this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
+    this._dateFormatLayout = __privateMethod(this, _parseDateFormat, parseDateFormat_fn).call(this, "y-m-d");
+    __privateAdd(this, _valueOnOpen, void 0);
+    __privateAdd(this, _handleFieldFocusOut, (e) => {
+      this._elTrigger.then((_) => {
+        const parent = e.relatedTarget?.parentElement;
+        if (parent === e.target)
+          return;
+        document.getSelection()?.removeAllRanges();
+      });
+    });
+    __privateAdd(this, _handleSpinnerFocus, (e) => {
+      this._elTrigger.then((field) => {
+        document.getSelection()?.removeAllRanges();
+        const range = new Range();
+        range.setStart(field.firstChild, 0);
+        range.setEnd(field.lastChild, 4);
+        document.getSelection()?.addRange(range);
+      });
+    });
+    __privateAdd(this, _handleClipboardCopy, (e) => {
+      this._elFieldAsync.then((field) => {
+        if (e.currentTarget !== field)
+          return;
+        e.preventDefault();
+        e.clipboardData?.setData("text/plain", this.displayValue);
+      });
+    });
+    __privateAdd(this, _handleClipboardPaste, (e) => {
+      this._elFieldAsync.then((field) => {
+        if (e.currentTarget !== field)
+          return;
+        e.preventDefault();
+        const pasted = e.clipboardData?.getData("text/plain");
+        if (!pasted)
+          return;
+        let pastedDate = /* @__PURE__ */ new Date("-");
+        const invalid = "Invalid Date";
+        const parts = pasted.split(this._dateFormatLayout.delimiter);
+        if (parts.length === 3) {
+          const layout = this._dateFormatLayout.layout;
+          const year = parseInt(parts[layout.findIndex((f) => f.token === "y")]);
+          const month = parseInt(parts[layout.findIndex((f) => f.token === "m")]) - 1;
+          const day = parseInt(parts[layout.findIndex((f) => f.token === "d")]);
+          if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
+            pastedDate = /* @__PURE__ */ new Date(`${year}-${month + 1}-${day}`);
+          }
+        }
+        if (pastedDate.toString() === invalid) {
+          pastedDate = new Date(pasted);
+          if (pastedDate.toString() === invalid) {
+            return;
+          }
+        }
+        this.value = pastedDate;
+        __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+      });
+    });
+    __privateAdd(this, _handleFieldClick, (e) => {
+      this._elSpinners[0]?.focus();
+    });
+    __privateAdd(this, _handleCalendarChange, (e) => {
+      e.stopPropagation();
+      this.value = e.detail;
+      this.open = false;
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+      __privateMethod(this, _dispatchInputEvent, dispatchInputEvent_fn).call(this);
+    });
+    __privateAdd(this, _handleMonthChange, (e) => {
+      e.stopPropagation();
+      this._focusedMonth = e.target?.value;
+    });
+    __privateAdd(this, _handleYearChange, (e) => {
+      e.stopPropagation();
+      this._focusedYear = e.target?.value;
+    });
+    __privateAdd(this, _handleIncrementFocusedMonth, (_e) => {
+      if (this._focusedMonth < 11) {
+        this._focusedMonth++;
+      } else if (this._focusedMonth == 11 && this._focusedYear != this.max.getFullYear()) {
+        this._focusedMonth = 0;
+        this._focusedYear++;
+      }
+    });
+    __privateAdd(this, _handleDecrementFocusedMonth, (_e) => {
+      if (this._focusedMonth > 0) {
+        this._focusedMonth--;
+      } else if (this._focusedMonth == 0 && this._focusedYear != this.min.getFullYear()) {
+        this._focusedMonth = 11;
+        this._focusedYear--;
+      }
+    });
+    __privateAdd(this, _handleCalendarFocusChange, async () => {
+      this._focusedMonth = (await this._elCalendar).focusedMonth;
+      this._focusedYear = (await this._elCalendar).focusedYear;
+      this.value = (await this._elCalendar).focusedDate;
+      this.requestUpdate();
+      __privateMethod(this, _dispatchInputEvent, dispatchInputEvent_fn).call(this);
+    });
+    __privateAdd(this, _handlePopoverStateChange, async (e) => {
+      if (e.target !== e.currentTarget)
+        return;
+      this.open = e.detail.open;
+      if (e.detail.reason === "close") {
+        const calValue = (await this._elCalendar).value;
+        const hasChanged = !isSameDay(
+          calValue || /* @__PURE__ */ new Date(0),
+          __privateGet(this, _valueOnOpen) || /* @__PURE__ */ new Date(0)
+        );
+        if (hasChanged) {
+          this.value = calValue;
+          __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+        }
+        if (this.value) {
+          this._focusedMonth = this.value.getMonth();
+          this._focusedYear = this.value.getFullYear();
+        }
+      }
+      if (e.detail.reason === "cancel") {
+        this.value = __privateGet(this, _valueOnOpen);
+        __privateMethod(this, _dispatchInputEvent, dispatchInputEvent_fn).call(this);
+      }
+    });
+    __privateAdd(this, _handleSpinnerKeydown, (e) => {
+      const index = Array.from(this._elSpinners).findIndex(
+        (spinner) => spinner === e.target
+      );
+      if (e.key === "ArrowRight") {
+        const next = this._elSpinners[index + 1];
+        if (next)
+          next.focus();
+      }
+      if (e.key === "ArrowLeft") {
+        const prev = this._elSpinners[index - 1];
+        if (prev)
+          prev.focus();
+      }
+    });
+    __privateAdd(this, _handleSpinnerChange, (val, name) => {
+      __privateGet(this, _spinnerState)[name] = val;
+      const newDate = /* @__PURE__ */ new Date();
+      newDate.setFullYear(parseInt(__privateGet(this, _spinnerState).year));
+      newDate.setMonth(parseInt(__privateGet(this, _spinnerState).month) - 1);
+      newDate.setDate(parseInt(__privateGet(this, _spinnerState).day));
+      newDate.setHours(12, 0, 0, 0);
+      if (newDate.toString() === "Invalid Date")
+        return;
+      this.value = newDate;
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+      __privateMethod(this, _dispatchInputEvent, dispatchInputEvent_fn).call(this);
+    });
+    /**
+     * The spinner state keeps track of the spinner values regardless of wheter a complete date has been enter yet.
+     */
+    __privateAdd(this, _spinnerState, {
+      year: "yyyy",
+      month: "mm",
+      day: "dd"
+    });
+    GdsDatePartSpinner.define();
+  }
+  get type() {
+    return "gds-datepicker";
+  }
+  get value() {
+    return this._internalValue;
+  }
+  set value(value) {
+    this._internalValue = value;
+  }
+  get dateformat() {
+    return this._dateFormatLayout.layout.map((f) => f.token).join(this._dateFormatLayout.delimiter);
+  }
+  set dateformat(dateformat) {
+    this._dateFormatLayout = __privateMethod(this, _parseDateFormat, parseDateFormat_fn).call(this, dateformat);
+  }
+  /**
+   * Get the currently focused date in the calendar popover. If no date is focused, or the calendar popover
+   * is closed, the value will be undefined.
+   */
+  async getFocusedDate() {
+    if (this.open)
+      return this._elCalendar.then((el) => el.focusedDate);
+    else
+      return void 0;
+  }
+  /**
+   * Get a string representation of the currently displayed value in the input field. The formatting will match the dateformat attribute.
+   */
+  get displayValue() {
+    return this._elField.innerText.replace(/\s+/g, "");
+  }
+  /**
+   * A reference to a date cell element (<td>) inside the shadow root of the calendar primitive.
+   * Intended for use in integration tests.
+   */
+  async test_getDateCell(dayNumber) {
+    return this._elCalendar.then((el) => el.getDateCell(dayNumber));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-datepicker");
+  }
+  render() {
+    return html`
+      <gds-form-control-header class="size-${this.size}">
+        <label id="label" for="spinner-0" slot="label">${this.label}</label>
+        ${when(
+      this.supportingText.length > 0,
+      () => html`<span slot="supporting-text" id="supporting-text">
+              ${this.supportingText}
+            </span>`
+    )}
+        <slot
+          id="supporting-text-slot"
+          name="extended-supporting-text"
+          slot="extended-supporting-text"
+        ></slot>
+        <!-- @deprecated: use 'supporting-text' slot instead. Remove in 2.0 release. -->
+        <slot
+          id="sub-label-slot"
+          name="sub-label"
+          slot="supporting-text"
+        ></slot>
+      </gds-form-control-header>
+      <gds-field-base
+        .size=${this.size}
+        .disabled=${this.disabled}
+        .invalid=${this.invalid}
+        @click=${__privateGet(this, _handleFieldClick)}
+        @copy=${__privateGet(this, _handleClipboardCopy)}
+        @paste=${__privateGet(this, _handleClipboardPaste)}
+        id="field"
+      >
+        <div class="spinners">
+          ${join(
+      map(
+        this._dateFormatLayout.layout,
+        (f, i) => html`<gds-date-part-spinner
+                  id="spinner-${i}"
+                  aria-invalid="${this.invalid}"
+                  class="spinner"
+                  .length=${f.token === "y" ? 4 : 2}
+                  .value=${__privateGet(this, _spinnerState)[f.name]}
+                  aria-valuemin=${__privateMethod(this, _getMinSpinnerValue, getMinSpinnerValue_fn).call(this, f.name)}
+                  aria-valuemax=${__privateMethod(this, _getMaxSpinnerValue, getMaxSpinnerValue_fn).call(this, f.name)}
+                  aria-label=${__privateMethod(this, _getSpinnerLabel, getSpinnerLabel_fn).call(this, f.name)}
+                  aria-describedby="label supporting-text supporting-text-slot sub-label-slot message"
+                  data-max-width=${__privateMethod(this, _getMaxSpinnerValue, getMaxSpinnerValue_fn).call(this, f.name).toString().length}
+                  @keydown=${__privateGet(this, _handleSpinnerKeydown)}
+                  @change=${(e) => __privateGet(this, _handleSpinnerChange).call(this, e.detail.value, f.name)}
+                  @focus=${__privateGet(this, _handleSpinnerFocus)}
+                  @touchend=${(e) => {
+          this.open = true;
+          e.preventDefault();
+        }}
+                ></gds-date-part-spinner>`
+      ),
+      html`<span class="separator"
+              >${this._dateFormatLayout.delimiter}</span
+            >`
+    )}
+        </div>
+        <gds-button
+          id="calendar-button"
+          slot="action"
+          size="${this.size === "small" ? "xs" : "small"}"
+          rank="tertiary"
+          variant=${this.invalid ? "negative" : ""}
+          aria-label="${msg("Open calendar modal")}"
+          aria-haspopup="menu"
+          aria-expanded=${this.open}
+          aria-controls="calendar-popover"
+          aria-describedby="label"
+          .disabled=${this.disabled}
+        >
+          ${when(
+      this.size === "small",
+      () => html`<gds-icon-calender-add
+                height="16"
+                stroke="2"
+              ></gds-icon-calender-add>`,
+      () => html`<gds-icon-calender-add></gds-icon-calender-add>`
+    )}
+        </gds-button>
+      </gds-field-base>
+
+      <gds-form-control-footer class="size-${this.size}">
+        ${when(
+      this.invalid,
+      // @deprecated
+      // Wrapped in a slot for backwards compatibility with the deprecated message slot
+      // Remove for 2.0 release
+      () => html`
+            <slot id="message" name="message" slot="message">
+              <gds-icon-triangle-exclamation
+                solid
+              ></gds-icon-triangle-exclamation>
+              ${this.errorMessage || this.validationMessage}
+            </slot>
+          `
+    )}
+      </gds-form-control-footer>
+
+      <gds-popover
+        autofocus
+        .triggerRef=${this._elTrigger}
+        .anchorRef=${this._elFieldAsync}
+        .open=${this.open}
+        @gds-ui-state=${__privateGet(this, _handlePopoverStateChange)}
+        label=${this.label}
+        id="calendar-popover"
+        .placement=${"bottom-end"}
+        .calcMinWidth=${() => this.showWeekNumbers ? "350px" : "305px"}
+        .useModalInMobileView=${true}
+        @focusin=${async (e) => {
+      const isPopover = e.target?.id === "calendar-popover";
+      if (!isPopover)
+        return;
+      this._elCalendar.then((cal) => cal.focus());
+    }}
+      >
+        <gds-div overflow="auto">
+          <gds-flex
+            align-items="center"
+            justify-content="space-between"
+            gap="s"
+            padding="m m 0 m"
+          >
+            <gds-button
+              @click=${__privateGet(this, _handleDecrementFocusedMonth)}
+              aria-label=${msg("Previous month")}
+              rank="tertiary"
+              size="small"
+            >
+              <gds-icon-chevron-left></gds-icon-chevron-left>
+            </gds-button>
+            <gds-dropdown
+              .value=${this._focusedMonth.toString()}
+              @change=${__privateGet(this, _handleMonthChange)}
+              .maxHeight=${300}
+              label="${msg("Month")}"
+              size="small"
+              class="month"
+              hide-label
+            >
+              <gds-option value="0">${msg("January")}</gds-option>
+              <gds-option value="1">${msg("February")}</gds-option>
+              <gds-option value="2">${msg("March")}</gds-option>
+              <gds-option value="3">${msg("April")}</gds-option>
+              <gds-option value="4">${msg("May")}</gds-option>
+              <gds-option value="5">${msg("June")}</gds-option>
+              <gds-option value="6">${msg("July")}</gds-option>
+              <gds-option value="7">${msg("August")}</gds-option>
+              <gds-option value="8">${msg("September")}</gds-option>
+              <gds-option value="9">${msg("October")}</gds-option>
+              <gds-option value="10">${msg("November")}</gds-option>
+              <gds-option value="11">${msg("December")}</gds-option>
+            </gds-dropdown>
+            <gds-dropdown
+              .value=${this._focusedYear.toString()}
+              @change=${__privateGet(this, _handleYearChange)}
+              .maxHeight=${300}
+              label="${msg("Year")}"
+              size="small"
+              class="year"
+              hide-label
+            >
+              ${repeat(
+      __privateGet(this, _years, years_get),
+      (year) => year,
+      (year) => html`<gds-option value=${year}>${year}</gds-option>`
+    )}
+            </gds-dropdown>
+            <gds-button
+              @click=${__privateGet(this, _handleIncrementFocusedMonth)}
+              aria-label=${msg("Next month")}
+              rank="tertiary"
+              size="small"
+            >
+              <gds-icon-chevron-right></gds-icon-chevron-right>
+            </gds-button>
+          </gds-flex>
+
+          <gds-calendar
+            id="calendar"
+            @change=${__privateGet(this, _handleCalendarChange)}
+            @gds-date-focused=${__privateGet(this, _handleCalendarFocusChange)}
+            .focusedMonth=${this._focusedMonth}
+            .focusedYear=${this._focusedYear}
+            .value=${this.value}
+            .min=${this.min}
+            .max=${this.max}
+            .showWeekNumbers=${this.showWeekNumbers}
+            .disabledWeekends=${this.disabledWeekends}
+            .disabledDates=${this.disabledDates}
+          ></gds-calendar>
+
+          <gds-flex
+            align-items="center"
+            justify-content="space-between"
+            padding="0 m m m"
+          >
+            <gds-button
+              rank="tertiary"
+              size="small"
+              @click=${(e) => {
+      e.stopPropagation();
+      this.value = void 0;
+      this.open = false;
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+    }}
+            >
+              ${msg("Clear")}
+            </gds-button>
+            ${until(__privateMethod(this, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn).call(this), nothing)}
+            <gds-button
+              rank="tertiary"
+              size="small"
+              @click=${(e) => {
+      e.stopPropagation();
+      __privateMethod(this, _focusDate, focusDate_fn).call(this, /* @__PURE__ */ new Date());
+    }}
+            >
+              ${msg("Today")}
+            </gds-button>
+          </gds-flex>
+        </gds-div>
+      </gds-popover>
+    `;
+  }
+  _getValidityAnchor() {
+    return this._elSpinners[0];
+  }
+  _handleValueChange() {
+    if (this.value === "")
+      this.value = void 0;
+    if (!this.value) {
+      __privateSet(this, _spinnerState, {
+        year: "yyyy",
+        month: "mm",
+        day: "dd"
+      });
+      return;
+    }
+    const date = this.value;
+    this._focusedMonth = date.getMonth();
+    this._focusedYear = date.getFullYear();
+    const year = date.getFullYear().toString();
+    const month = (date.getMonth() + 1).toString().padStart(2, "0");
+    const day = date.getDate().toString().padStart(2, "0");
+    __privateSet(this, _spinnerState, { year, month, day });
+  }
+  _handleOpenChange() {
+    if (this.open) {
+      __privateSet(this, _valueOnOpen, this.value);
+      this._elCalendar.then((el) => el.focus());
+    }
+  }
+};
+_valueOnOpen = new WeakMap();
+_renderBackToValidRangeButton = new WeakSet();
+renderBackToValidRangeButton_fn = async function() {
+  const focusedDate = await this.getFocusedDate();
+  let buttonTxt = "";
+  let buttonAction;
+  if (focusedDate && focusedDate > this.max) {
+    buttonTxt = msg("Last available date");
+    buttonAction = (e) => {
+      e.stopPropagation();
+      __privateMethod(this, _focusDate, focusDate_fn).call(this, this.max);
+    };
+  } else if (focusedDate && focusedDate < this.min) {
+    buttonTxt = msg("First available date");
+    buttonAction = (e) => {
+      e.stopPropagation();
+      __privateMethod(this, _focusDate, focusDate_fn).call(this, this.min);
+    };
+  }
+  return html`${when(
+    buttonTxt.length > 0,
+    () => html`<gds-button rank="tertiary" size="small" @click=${buttonAction}>
+          ${buttonTxt}
+        </gds-button>`,
+    () => nothing
+  )}`;
+};
+_focusDate = new WeakSet();
+focusDate_fn = function(d) {
+  const focusDate = new Date(d);
+  this._elCalendar.then((el) => el.focusedDate = focusDate).then(__privateGet(this, _handleCalendarFocusChange));
+};
+_getSpinnerLabel = new WeakSet();
+getSpinnerLabel_fn = function(name) {
+  const labels = {
+    year: msg("Year"),
+    month: msg("Month"),
+    day: msg("Day")
+  };
+  return labels[name];
+};
+_getMinSpinnerValue = new WeakSet();
+getMinSpinnerValue_fn = function(name) {
+  const min = {
+    year: 1900,
+    month: 1,
+    day: 1
+  };
+  return min[name];
+};
+_getMaxSpinnerValue = new WeakSet();
+getMaxSpinnerValue_fn = function(name) {
+  const max = {
+    year: 9999,
+    month: 12,
+    day: 31
+  };
+  return max[name];
+};
+_dispatchChangeEvent = new WeakSet();
+dispatchChangeEvent_fn = function() {
+  this.dispatchEvent(
+    new CustomEvent("change", {
+      detail: { value: this.value }
+    })
+  );
+};
+_dispatchInputEvent = new WeakSet();
+dispatchInputEvent_fn = function() {
+  this.dispatchEvent(
+    new CustomEvent("input", {
+      detail: { value: this.value }
+    })
+  );
+};
+_handleFieldFocusOut = new WeakMap();
+_handleSpinnerFocus = new WeakMap();
+_handleClipboardCopy = new WeakMap();
+_handleClipboardPaste = new WeakMap();
+_handleFieldClick = new WeakMap();
+_handleCalendarChange = new WeakMap();
+_handleMonthChange = new WeakMap();
+_handleYearChange = new WeakMap();
+_handleIncrementFocusedMonth = new WeakMap();
+_handleDecrementFocusedMonth = new WeakMap();
+_handleCalendarFocusChange = new WeakMap();
+_handlePopoverStateChange = new WeakMap();
+_handleSpinnerKeydown = new WeakMap();
+_parseDateFormat = new WeakSet();
+parseDateFormat_fn = function(dateformat) {
+  const delimiter = dateformat.replace(/[a-z0-9]/gi, "")[0];
+  const format = dateformat.split(delimiter);
+  const year = format.findIndex((f) => f === "y");
+  const month = format.findIndex((f) => f === "m");
+  const day = format.findIndex((f) => f === "d");
+  if (year === -1 || month === -1 || day === -1)
+    throw new Error("Invalid date format for <gds-datepicker>");
+  const ordered = [year, month, day].sort((a, b) => a - b);
+  const orderedFormat = ordered.map((i) => format[i]).map((f) => ({
+    token: f,
+    name: f === "y" ? "year" : f === "m" ? "month" : "day"
+  }));
+  return { delimiter, layout: orderedFormat };
+};
+_handleSpinnerChange = new WeakMap();
+_spinnerState = new WeakMap();
+_years = new WeakSet();
+years_get = function() {
+  const minYear = this.min.getFullYear();
+  const maxYear = this.max.getFullYear();
+  const isOutsideRange = __privateGet(this, _isValueOutsideRange, isValueOutsideRange_get);
+  const valueYear = this.value?.getFullYear();
+  return {
+    *[Symbol.iterator]() {
+      if (isOutsideRange)
+        yield valueYear;
+      for (let i = minYear; i <= maxYear; i++)
+        yield i;
+    }
+  };
+};
+_isValueOutsideRange = new WeakSet();
+isValueOutsideRange_get = function() {
+  if (!this.value)
+    return false;
+  return this.value.getFullYear() < this.min.getFullYear() || this.value.getFullYear() > this.max.getFullYear();
+};
+Datepicker.styles = [tokens, styles];
+__decorateClass([
+  property({ converter: dateConverter })
+], Datepicker.prototype, "value", 1);
+__decorateClass([
+  property({ converter: dateConverter })
+], Datepicker.prototype, "min", 2);
+__decorateClass([
+  property({ converter: dateConverter })
+], Datepicker.prototype, "max", 2);
+__decorateClass([
+  property({ type: Boolean })
+], Datepicker.prototype, "open", 2);
+__decorateClass([
+  property({ attribute: "supporting-text" })
+], Datepicker.prototype, "supportingText", 2);
+__decorateClass([
+  property({ type: String })
+], Datepicker.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-week-numbers" })
+], Datepicker.prototype, "showWeekNumbers", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-label" })
+], Datepicker.prototype, "hideLabel", 2);
+__decorateClass([
+  property()
+], Datepicker.prototype, "dateformat", 1);
+__decorateClass([
+  property({ type: Boolean, attribute: "disabled-weekends" })
+], Datepicker.prototype, "disabledWeekends", 2);
+__decorateClass([
+  property({ converter: dateArrayConverter, attribute: "disabled-dates" })
+], Datepicker.prototype, "disabledDates", 2);
+__decorateClass([
+  queryAsync("#calendar-button")
+], Datepicker.prototype, "test_calendarButton", 2);
+__decorateClass([
+  state()
+], Datepicker.prototype, "_focusedMonth", 2);
+__decorateClass([
+  state()
+], Datepicker.prototype, "_focusedYear", 2);
+__decorateClass([
+  state()
+], Datepicker.prototype, "_dateFormatLayout", 2);
+__decorateClass([
+  queryAsync("#calendar")
+], Datepicker.prototype, "_elCalendar", 2);
+__decorateClass([
+  queryAsync("#calendar-button")
+], Datepicker.prototype, "_elTrigger", 2);
+__decorateClass([
+  queryAsync("#field")
+], Datepicker.prototype, "_elFieldAsync", 2);
+__decorateClass([
+  queryAll("[role=spinbutton]")
+], Datepicker.prototype, "_elSpinners", 2);
+__decorateClass([
+  query("#field")
+], Datepicker.prototype, "_elField", 2);
+__decorateClass([
+  watch("value")
+], Datepicker.prototype, "_handleValueChange", 1);
+__decorateClass([
+  watch("open")
+], Datepicker.prototype, "_handleOpenChange", 1);
+Datepicker = __decorateClass([
+  localized()
+], Datepicker);
+let GdsDatepicker = class extends withSizeXProps(
+  withMarginProps(withLayoutChildProps(Datepicker))
+) {
+};
+GdsDatepicker = __decorateClass([
+  gdsCustomElement("gds-datepicker", {
+    dependsOn: [
+      GdsFlex,
+      GdsButton,
+      GdsDropdown,
+      GdsCalendar,
+      GdsPopover,
+      IconCalendar,
+      IconCalenderAdd,
+      IconChevronLeft,
+      IconChevronRight
+    ]
+  })
+], GdsDatepicker);
+export {
+  GdsDatepicker
+};