import {
  __decorateClass,
  __privateAdd,
  __privateGet,
  __privateMethod,
  __privateSet
} from "../../chunks/chunk.QU3DSPNU.js";
var _utcHours, _valueOnOpen, _Datepicker_instances, shouldShowFooter_fn, renderBackToValidRangeButton_fn, focusDate_fn, getSpinnerLabel_fn, getMinSpinnerValue_fn, getMaxSpinnerValue_fn, dispatchChangeEvent_fn, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, years_get, 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, lastDayOfMonth } from "date-fns";
import { GdsButton } from "../../components/button/button.component.js";
import { GdsDropdown } from "../../components/dropdown/dropdown.component.js";
import { GdsFlex } from "../../components/flex/flex.component.js";
import { gdsCustomElement, html } from "../../scoping.js";
import formControlHostStyle from "../../shared-styles/form-control-host.style.js";
import { tokens } from "../../tokens.style.js";
import { TransitionalStyles } from "../../transitional-styles.js";
import { watch } from "../../utils/decorators/index.js";
import {
  dateArrayConverter,
  dateConverter
} from "../../utils/helpers/attribute-converters.js";
import {
  withLayoutChildProps,
  withMarginProps,
  withSizeXProps
} from "../../utils/mixins/declarative-layout-mixins.js";
import { GdsCalendar } from "../calendar/calendar.component.js";
import { GdsFormControlElement } from "../form/form-control.js";
import { IconCalendar } from "../icon/icons/calendar.component.js";
import { IconCalenderAdd } from "../icon/icons/calender-add.component.js";
import { IconChevronLeft } from "../icon/icons/chevron-left.component.js";
import { IconChevronRight } from "../icon/icons/chevron-right.component.js";
import { GdsPopover } from "../popover/popover.component.js";
import { GdsDatePartSpinner } from "./date-part-spinner.js";
import DatepickerStyles from "./datepicker.styles.js";
let Datepicker = class extends GdsFormControlElement {
  constructor() {
    super();
    __privateAdd(this, _Datepicker_instances);
    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.plain = false;
    this.showWeekNumbers = false;
    this.hideLabel = false;
    this.clearable = false;
    this.hideTodayButton = false;
    __privateAdd(this, _utcHours, 12);
    this.disabledWeekends = false;
    this.showExtendedSupportingText = false;
    this._focusedMonth = (/* @__PURE__ */ new Date()).getMonth();
    this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
    this._dateFormatLayout = __privateMethod(this, _Datepicker_instances, parseDateFormat_fn).call(this, "y-m-d");
    __privateAdd(this, _valueOnOpen);
    __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, _Datepicker_instances, dispatchChangeEvent_fn).call(this);
      });
    });
    __privateAdd(this, _handleFieldClick, (e) => {
      this._elSpinners[0]?.focus();
    });
    __privateAdd(this, _handleCalendarChange, (e) => {
      e.stopPropagation();
      const date = new Date(e.detail);
      date.setUTCHours(this.utcHours, 0, 0, 0);
      this.value = date;
      this.open = false;
      __privateMethod(this, _Datepicker_instances, dispatchChangeEvent_fn).call(this);
      __privateMethod(this, _Datepicker_instances, 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 = new Date((await this._elCalendar).focusedDate);
      this.requestUpdate();
      __privateMethod(this, _Datepicker_instances, 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;
        if (!calValue) {
          this.value = void 0;
          __privateMethod(this, _Datepicker_instances, dispatchChangeEvent_fn).call(this);
          return;
        }
        const hasChanged = !isSameDay(
          calValue || /* @__PURE__ */ new Date(0),
          __privateGet(this, _valueOnOpen) || /* @__PURE__ */ new Date(0)
        );
        if (hasChanged) {
          this.value = new Date(calValue);
          __privateMethod(this, _Datepicker_instances, 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, _Datepicker_instances, 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("0000-01-01");
      newDate.setUTCHours(this.utcHours, 0, 0, 0);
      newDate.setUTCFullYear(parseInt(__privateGet(this, _spinnerState).year));
      newDate.setUTCMonth(parseInt(__privateGet(this, _spinnerState).month) - 1);
      const lastOfMonth = lastDayOfMonth(newDate).getDate();
      const setDay = lastOfMonth < parseInt(__privateGet(this, _spinnerState).day) ? lastOfMonth : parseInt(__privateGet(this, _spinnerState).day);
      newDate.setUTCDate(isNaN(setDay) ? 1 : setDay);
      if (newDate.toString() === "Invalid Date") return;
      this.value = newDate;
      __privateMethod(this, _Datepicker_instances, dispatchChangeEvent_fn).call(this);
      __privateMethod(this, _Datepicker_instances, dispatchInputEvent_fn).call(this);
    });
    /**
     * The spinner state keeps track of the spinner values regardless of whether 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 super.value;
  }
  set value(value) {
    super.value = value;
  }
  get utcHours() {
    return __privateGet(this, _utcHours);
  }
  set utcHours(value) {
    __privateSet(this, _utcHours, value);
    this._internalValue?.setUTCHours(value, 0, 0, 0);
  }
  get dateformat() {
    return this._dateFormatLayout.layout.map((f) => f.token).join(this._dateFormatLayout.delimiter);
  }
  set dateformat(dateformat) {
    this._dateFormatLayout = __privateMethod(this, _Datepicker_instances, 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");
  }
  focus(options) {
    this._getValidityAnchor()?.focus(options);
  }
  render() {
    return html`
      ${when(
      !this.plain,
      () => html`<gds-form-control-header
            class="size-${this.size}"
            .showExtendedSupportingText="${this.showExtendedSupportingText}"
          >
            <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, _Datepicker_instances, getMinSpinnerValue_fn).call(this, f.name)}
                  aria-valuemax=${__privateMethod(this, _Datepicker_instances, getMaxSpinnerValue_fn).call(this, f.name)}
                  aria-label=${__privateMethod(this, _Datepicker_instances, getSpinnerLabel_fn).call(this, f.name)}
                  aria-describedby="supporting-text supporting-text-slot sub-label-slot message"
                  data-max-width=${__privateMethod(this, _Datepicker_instances, 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
                stroke="1.6"
                style="line-height: 16px"
              ></gds-icon-calender-add>`,
      () => html`<gds-icon-calender-add></gds-icon-calender-add>`
    )}
        </gds-button>
      </gds-field-base>

      ${when(
      __privateMethod(this, _Datepicker_instances, shouldShowFooter_fn).call(this),
      () => html`<gds-form-control-footer
            class="size-${this.size}"
            .errorMessage=${this.invalid ? this.errorMessage : void 0}
          >
            ${``}
            <slot id="message" name="message" slot="message">
              <gds-icon-triangle-exclamation
                solid
              ></gds-icon-triangle-exclamation>
              ${this.errorMessage}
            </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="xs; xs { s }"
            padding="m xs 0 xs; xs { m m 0 m }"
          >
            <gds-button
              @click=${__privateGet(this, _handleDecrementFocusedMonth)}
              aria-label=${msg("Switch to 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, _Datepicker_instances, years_get),
      (year) => year,
      (year) => html`<gds-option value=${year}>${year}</gds-option>`
    )}
            </gds-dropdown>
            <gds-button
              @click=${__privateGet(this, _handleIncrementFocusedMonth)}
              aria-label=${msg("Switch to 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>

          ${when(
      this.clearable || !this.hideTodayButton,
      () => html`
              <gds-flex
                align-items="center"
                justify-content="space-between"
                padding="m m m m"
              >
                ${when(
        this.clearable,
        () => html` <gds-button
                      id="clear-button"
                      rank="tertiary"
                      size="small"
                      @click=${(e) => {
          e.stopPropagation();
          this.value = void 0;
          this.open = false;
          __privateMethod(this, _Datepicker_instances, dispatchInputEvent_fn).call(this);
          __privateMethod(this, _Datepicker_instances, dispatchChangeEvent_fn).call(this);
        }}
                      aria-label=${msg("Clear selected date")}
                    >
                      ${msg("Clear")}
                    </gds-button>`
      )}
                ${until(__privateMethod(this, _Datepicker_instances, renderBackToValidRangeButton_fn).call(this), nothing)}
                ${when(
        !this.hideTodayButton,
        () => html` <gds-button
                      id="today-button"
                      rank="tertiary"
                      size="small"
                      @click=${(e) => {
          e.stopPropagation();
          __privateMethod(this, _Datepicker_instances, focusDate_fn).call(this, /* @__PURE__ */ new Date());
        }}
                      aria-label=${msg("Select today's 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());
    }
  }
};
_utcHours = new WeakMap();
_valueOnOpen = new WeakMap();
_Datepicker_instances = new WeakSet();
shouldShowFooter_fn = function() {
  return !this.plain;
};
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, _Datepicker_instances, focusDate_fn).call(this, this.max);
    };
  } else if (focusedDate && focusedDate < this.min) {
    buttonTxt = msg("First available date");
    buttonAction = (e) => {
      e.stopPropagation();
      __privateMethod(this, _Datepicker_instances, 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_fn = function(d) {
  const focusDate = new Date(d);
  this._elCalendar.then((el) => el.focusedDate = focusDate).then(__privateGet(this, _handleCalendarFocusChange));
};
getSpinnerLabel_fn = function(name) {
  const labels = {
    year: msg("Year"),
    month: msg("Month"),
    day: msg("Day")
  };
  return `${labels[name]} ${this.label}`;
};
getMinSpinnerValue_fn = function(name) {
  const min = {
    year: 1900,
    month: 1,
    day: 1
  };
  return min[name];
};
getMaxSpinnerValue_fn = function(name) {
  const max = {
    year: 9999,
    month: 12,
    day: 31
  };
  return max[name];
};
dispatchChangeEvent_fn = function() {
  this.updateComplete.then(
    () => this.dispatchStandardEvent("change", {
      bubbles: true,
      composed: true
    })
  );
};
dispatchInputEvent_fn = function() {
  this.updateComplete.then(
    () => this.dispatchStandardEvent("input", {
      bubbles: true,
      composed: true
    })
  );
};
_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();
/**
 * Takes a dateformat string from the dateformat attribute and turns it to a DateFormatLayout object used in rendering the template.
 */
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_get = function() {
  const minYear = this.min.getFullYear();
  const maxYear = this.max.getFullYear();
  const isOutsideRange = __privateGet(this, _Datepicker_instances, isValueOutsideRange_get);
  const valueYear = this.value?.getFullYear();
  return {
    *[Symbol.iterator]() {
      if (isOutsideRange) yield valueYear;
      for (let i = minYear; i <= maxYear; i++) yield i;
    }
  };
};
isValueOutsideRange_get = function() {
  if (!this.value) return false;
  return this.value.getFullYear() < this.min.getFullYear() || this.value.getFullYear() > this.max.getFullYear();
};
Datepicker.styles = [tokens, formControlHostStyle, DatepickerStyles];
__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 })
], Datepicker.prototype, "plain", 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({ type: Boolean, attribute: "clearable" })
], Datepicker.prototype, "clearable", 2);
__decorateClass([
  property({ type: Boolean, attribute: "hide-today-button" })
], Datepicker.prototype, "hideTodayButton", 2);
__decorateClass([
  property({ type: Number, attribute: "utc-hours" })
], Datepicker.prototype, "utcHours", 1);
__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([
  property({
    attribute: "show-extended-supporting-text",
    type: Boolean,
    reflect: true
  })
], Datepicker.prototype, "showExtendedSupportingText", 2);
__decorateClass([
  queryAsync("#calendar-button")
], Datepicker.prototype, "test_calendarButton", 2);
__decorateClass([
  query("#clear-button")
], Datepicker.prototype, "test_clearButton", 2);
__decorateClass([
  query("#today-button")
], Datepicker.prototype, "test_todayButton", 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
};
