@sebgroup/green-core 0.0.0-v-angular-20250113082841

package/chunks/chunk.VHLZ5JF4.js

@@ -0,0 +1,827 @@
+import {
+  dateArrayConverter,
+  dateConverter
+} from "./chunk.C3ECHGX7.js";
+import {
+  GdsFormControlElement
+} from "./chunk.JYQY43ZR.js";
+import {
+  TransitionalStyles
+} from "./chunk.J35HKXK4.js";
+import {
+  watch
+} from "./chunk.TYGMNHNO.js";
+import {
+  tokens
+} from "./chunk.LUKJEJDB.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.MLXMQIEV.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.SEHSDSX2.js";
+
+// libs/core/src/components/datepicker/datepicker.ts
+import { localized, msg } from "@lit/localize";
+import { nothing } from "lit";
+import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.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";
+
+// libs/core/src/components/datepicker/datepicker.styles.ts
+import { css } from "lit";
+var styles = css`
+  @layer base, reset;
+
+  @layer base {
+    :host {
+      font-family: inherit;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding-inline: var(--gds-space-s);
+      padding-block-start: var(--gds-space-m);
+      gap: var(--gds-space-xs);
+      box-sizing: border-box;
+    }
+
+    .header gds-dropdown.month {
+      min-width: 140px;
+      flex: 1;
+    }
+
+    .header gds-dropdown.year {
+      width: 110px;
+    }
+
+    .footer {
+      display: flex;
+      justify-content: space-between;
+      padding-inline: var(--gds-space-s);
+      padding-block-end: var(--gds-space-s);
+    }
+
+    label {
+      font-size: var(--gds-text-size-detail-m);
+      line-height: var(--gds-text-line-height-detail-m);
+      font-weight: var(--gds-text-weight-book);
+      font-family: inherit;
+    }
+
+    .form-info {
+      font-size: var(--gds-text-size-detail-s);
+      line-height: var(--gds-text-line-height-detail-s);
+      font-weight: var(--gds-text-weight-regular);
+    }
+
+    .field {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--gds-space-2xs);
+      padding: var(--gds-space-2xs);
+      border-radius: var(--gds-space-xs);
+      font-size: var(--gds-text-size-detail-m);
+      line-height: var(--gds-text-line-height-detail-m);
+      font-weight: var(--gds-text-weight-regular);
+      font-family: inherit;
+      overflow: hidden;
+      margin-block: var(--gds-space-xs);
+      max-width: 100%;
+      cursor: pointer;
+      color: currentColor;
+      height: var(--gds-space-3xl);
+      box-sizing: border-box;
+      border-width: var(--gds-space-4xs);
+      border-style: solid;
+
+      // TODO: Update colors with tokens
+      border-color: #6f6f6f;
+      color: #1b1b1b;
+      background-color: #e2e2e2;
+
+      &:hover {
+        background-color: #cecece;
+      }
+
+      .input {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        max-width: max-content;
+        text-transform: uppercase;
+        flex: 1;
+        font-variant-numeric: tabular-nums;
+
+        &:focus-within span {
+          opacity: 0;
+        }
+
+        .spinner {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          height: 100%;
+          outline-color: currentcolor;
+          outline-offset: -4px;
+          outline-width: var(--gds-space-3xs);
+          box-sizing: border-box;
+          border-radius: var(--gds-space-xs);
+          padding-inline: 1ch;
+
+          &:focus-visible {
+            outline-style: solid;
+          }
+        }
+      }
+
+      button {
+        appearance: none;
+        background: transparent;
+        border: 0;
+        box-sizing: border-box;
+        color: currentColor;
+        cursor: pointer;
+        aspect-ratio: 1;
+        margin: 0;
+        padding: 0;
+        outline-color: inherit;
+        outline-offset: -4px;
+        border-radius: var(--gds-space-xs);
+        padding-top: var(--gds-space-3xs);
+        font-family: inherit;
+
+        &:focus-visible,
+        &:hover {
+          outline: var(--gds-space-3xs) solid currentcolor;
+        }
+      }
+
+      &.small {
+        height: var(--gds-space-xl);
+        font-size: var(--gds-text-size-detail-s);
+        padding: 0;
+
+        button {
+          outline-offset: -4px;
+          border-radius: var(--gds-space-xs);
+          padding-top: 3px;
+        }
+      }
+    }
+  }
+`;
+
+// libs/core/src/components/datepicker/datepicker.ts
+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;
+var GdsDatepicker = class extends GdsFormControlElement {
+  constructor() {
+    super(...arguments);
+    __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.label = "";
+    this.showWeekNumbers = false;
+    this.size = "medium";
+    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((_) => {
+        var _a, _b;
+        const parent = (_a = e.relatedTarget) == null ? void 0 : _a.parentElement;
+        if (parent === e.target)
+          return;
+        (_b = document.getSelection()) == null ? void 0 : _b.removeAllRanges();
+      });
+    });
+    __privateAdd(this, _handleSpinnerFocus, (e) => {
+      this._elTrigger.then((field) => {
+        var _a, _b;
+        (_a = document.getSelection()) == null ? void 0 : _a.removeAllRanges();
+        const range = new Range();
+        range.setStart(field.firstChild, 0);
+        range.setEnd(field.lastChild, 4);
+        (_b = document.getSelection()) == null ? void 0 : _b.addRange(range);
+      });
+    });
+    __privateAdd(this, _handleClipboardCopy, (e) => {
+      this._elField.then((field) => {
+        var _a;
+        if (e.currentTarget !== field)
+          return;
+        e.preventDefault();
+        (_a = e.clipboardData) == null ? void 0 : _a.setData("text/plain", this.displayValue);
+      });
+    });
+    __privateAdd(this, _handleClipboardPaste, (e) => {
+      this._elField.then((field) => {
+        var _a;
+        if (e.currentTarget !== field)
+          return;
+        e.preventDefault();
+        const pasted = (_a = e.clipboardData) == null ? void 0 : _a.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) => {
+      var _a;
+      (_a = this._elSpinners[0]) == null ? void 0 : _a.focus();
+    });
+    __privateAdd(this, _handleCalendarChange, (e) => {
+      e.stopPropagation();
+      this.value = e.detail;
+      this.open = false;
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+    });
+    __privateAdd(this, _handleMonthChange, (e) => {
+      var _a;
+      e.stopPropagation();
+      this._focusedMonth = (_a = e.target) == null ? void 0 : _a.value;
+    });
+    __privateAdd(this, _handleYearChange, (e) => {
+      var _a;
+      e.stopPropagation();
+      this._focusedYear = (_a = e.target) == null ? void 0 : _a.value;
+    });
+    __privateAdd(this, _handleIncrementFocusedMonth, (_e) => {
+      this._focusedMonth++;
+      if (this._focusedMonth > 11) {
+        this._focusedMonth = 0;
+        this._focusedYear++;
+      }
+    });
+    __privateAdd(this, _handleDecrementFocusedMonth, (_e) => {
+      this._focusedMonth--;
+      if (this._focusedMonth < 0) {
+        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);
+      }
+    });
+    __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);
+    });
+    /**
+     * 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"
+    });
+  }
+  get type() {
+    return "gds-datepicker";
+  }
+  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._elInput.innerText.replace(/\s+/g, "");
+  }
+  /**
+   * A reference to a date cell element (<td>) inside the shadow root of the calendar primitive.
+   * Inteded 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`${when(
+      this.label && !this.hideLabel,
+      () => html`<label for="spinner-0" id="label">${this.label}</label>`
+    )}
+
+      <div class="form-info" id="sub-label"><slot name="sub-label"></slot></div>
+
+      <div
+        class=${classMap({ field: true, small: this.size === "small" })}
+        id="field"
+        @click=${__privateGet(this, _handleFieldClick)}
+        @copy=${__privateGet(this, _handleClipboardCopy)}
+        @paste=${__privateGet(this, _handleClipboardPaste)}
+      >
+        <div
+          class=${classMap({ input: true, "is-placeholder": !this.value })}
+          @focusout=${__privateGet(this, _handleFieldFocusOut)}
+        >
+          ${join(
+      map(
+        this._dateFormatLayout.layout,
+        (f, i) => html`<gds-date-part-spinner
+                  id="spinner-${i}"
+                  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 sub-label message"
+                  @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>${this._dateFormatLayout.delimiter}</span>`
+    )}
+        </div>
+        <button
+          id="calendar-button"
+          aria-label="${msg("Open calendar modal")}"
+          aria-haspopup="menu"
+          aria-expanded=${this.open}
+          aria-controls="calendar-popover"
+          aria-describedby="label"
+          size=${this.size}
+        >
+          <gds-icon-calendar></gds-icon-calendar>
+        </button>
+      </div>
+
+      <div class="form-info" aria-live="polite" id="message">
+        <slot name="message">${this.validationMessage}</slot>
+      </div>
+
+      <gds-popover
+        .triggerRef=${this._elTrigger}
+        .anchorRef=${this._elField}
+        .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) => {
+      var _a;
+      const isPopover = ((_a = e.target) == null ? void 0 : _a.id) === "calendar-popover";
+      if (!isPopover)
+        return;
+      this._elCalendar.then((cal) => cal.focus());
+    }}
+      >
+        <div class="header">
+          <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>
+        </div>
+
+        <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>
+
+        <div class="footer">
+          <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>
+        </div>
+      </gds-popover> `;
+  }
+  _getValidityAnchor() {
+    return this._elSpinners[0];
+  }
+  _handleValueChange() {
+    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() {
+  var _a;
+  const minYear = this.min.getFullYear();
+  const maxYear = this.max.getFullYear();
+  const isOutsideRange = __privateGet(this, _isValueOutsideRange, isValueOutsideRange_get);
+  const valueYear = (_a = this.value) == null ? void 0 : _a.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();
+};
+GdsDatepicker.styles = [tokens, styles];
+GdsDatepicker.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property({ converter: dateConverter })
+], GdsDatepicker.prototype, "value", 2);
+__decorateClass([
+  property({ converter: dateConverter })
+], GdsDatepicker.prototype, "min", 2);
+__decorateClass([
+  property({ converter: dateConverter })
+], GdsDatepicker.prototype, "max", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsDatepicker.prototype, "open", 2);
+__decorateClass([
+  property()
+], GdsDatepicker.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-week-numbers" })
+], GdsDatepicker.prototype, "showWeekNumbers", 2);
+__decorateClass([
+  property()
+], GdsDatepicker.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-label" })
+], GdsDatepicker.prototype, "hideLabel", 2);
+__decorateClass([
+  property()
+], GdsDatepicker.prototype, "dateformat", 1);
+__decorateClass([
+  property({ type: Boolean, attribute: "disabled-weekends" })
+], GdsDatepicker.prototype, "disabledWeekends", 2);
+__decorateClass([
+  property({ converter: dateArrayConverter, attribute: "disabled-dates" })
+], GdsDatepicker.prototype, "disabledDates", 2);
+__decorateClass([
+  queryAsync("#calendar-button")
+], GdsDatepicker.prototype, "test_calendarButton", 2);
+__decorateClass([
+  state()
+], GdsDatepicker.prototype, "_focusedMonth", 2);
+__decorateClass([
+  state()
+], GdsDatepicker.prototype, "_focusedYear", 2);
+__decorateClass([
+  state()
+], GdsDatepicker.prototype, "_dateFormatLayout", 2);
+__decorateClass([
+  queryAsync("#calendar")
+], GdsDatepicker.prototype, "_elCalendar", 2);
+__decorateClass([
+  queryAsync("#calendar-button")
+], GdsDatepicker.prototype, "_elTrigger", 2);
+__decorateClass([
+  queryAsync("#field")
+], GdsDatepicker.prototype, "_elField", 2);
+__decorateClass([
+  queryAll("[role=spinbutton]")
+], GdsDatepicker.prototype, "_elSpinners", 2);
+__decorateClass([
+  query(".input")
+], GdsDatepicker.prototype, "_elInput", 2);
+__decorateClass([
+  watch("value")
+], GdsDatepicker.prototype, "_handleValueChange", 1);
+__decorateClass([
+  watch("open")
+], GdsDatepicker.prototype, "_handleOpenChange", 1);
+GdsDatepicker = __decorateClass([
+  gdsCustomElement("gds-datepicker"),
+  localized()
+], GdsDatepicker);
+
+export {
+  GdsDatepicker
+};