@sebgroup/green-core 1.15.0 → 1.16.0

package/chunks/chunk.ZTE73BY2.js

@@ -0,0 +1,655 @@
+import {
+  GdsFormControlElement
+} from "./chunk.YIQIH4RW.js";
+import {
+  TransitionalStyles
+} from "./chunk.QONSFT2N.js";
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/datepicker/datepicker.ts
+import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
+import { join } from "lit/directives/join.js";
+import { when } from "lit/directives/when.js";
+import { until } from "lit/directives/until.js";
+import { map } from "lit/directives/map.js";
+import { repeat } from "lit/directives/repeat.js";
+import { classMap } from "lit/directives/class-map.js";
+import { nothing } from "lit";
+import { msg } from "@lit/localize";
+
+// libs/core/src/components/datepicker/datepicker.styles.ts
+import { css } from "lit";
+var styles = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    label {
+      display: block;
+    }
+  }
+`;
+
+// libs/core/src/components/datepicker/datepicker.ts
+var dateConverter = {
+  fromAttribute(value) {
+    return new Date(value);
+  },
+  toAttribute(value) {
+    return value.toISOString();
+  }
+};
+var dateArrayConverter = {
+  fromAttribute(value) {
+    return value.split(",").map((d) => new Date(d.trim()));
+  },
+  toAttribute(value) {
+    return JSON.stringify(value.map((d) => d.toISOString()));
+  }
+};
+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 turnes 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._elTrigger.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._elTrigger.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;
+        const pastedDate = new Date(pasted);
+        if (pastedDate.toString() === "Invalid Date")
+          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") {
+        this.value = (await this._elCalendar).value;
+        if (this.value) {
+          this._focusedMonth = this.value.getMonth();
+          this._focusedYear = this.value.getFullYear();
+        }
+        __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+      }
+      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));
+      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`${this._tStyles}
+      ${when(
+      this.label && !this.hideLabel,
+      () => html`<label for="spinner-0" id="label">${this.label}</label>`
+    )}
+
+      <div class="form-info"><slot name="sub-label"></slot></div>
+
+      <div
+        class=${classMap({ field: true, small: this.size === "small" })}
+        id="trigger"
+        @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}"
+                  .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"
+                  @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"
+          @click=${() => this.open = !this.open}
+        >
+          <svg viewBox="0 0 24 24" inert>
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+            <line x1="16" y1="2" x2="16" y2="6" />
+            <line x1="8" y1="2" x2="8" y2="6" />
+            <line x1="3" y1="10" x2="21" y2="10" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="form-info"><slot name="message"></slot></div>
+
+      <gds-popover
+        .triggerRef=${this._elTrigger}
+        .open=${this.open}
+        @gds-ui-state=${__privateGet(this, _handlePopoverStateChange)}
+        label=${this.label}
+        id="calendar-popover"
+        .placement=${"bottom-end"}
+        .calcMinWidth=${() => this.showWeekNumbers ? "350px" : "305px"}
+        @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">
+          <button
+            @click=${__privateGet(this, _handleDecrementFocusedMonth)}
+            aria-label=${msg("Previous month")}
+          >
+            <i class="icon prev"></i>
+          </button>
+          <gds-dropdown
+            .value=${this._focusedMonth.toString()}
+            @change=${__privateGet(this, _handleMonthChange)}
+            .maxHeight=${300}
+            label="${msg("Month")}"
+            style="width:120px"
+            size="small"
+            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"
+            hide-label
+          >
+            ${repeat(
+      __privateGet(this, _years, years_get),
+      (year) => year,
+      (year) => html`<gds-option value=${year}>${year}</gds-option>`
+    )}
+          </gds-dropdown>
+          <button
+            @click=${__privateGet(this, _handleIncrementFocusedMonth)}
+            aria-label=${msg("Next month")}
+          >
+            <i class="icon next"></i>
+          </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">
+          <button
+            class="tertiary clear"
+            @click=${() => {
+      this.value = void 0;
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+    }}
+          >
+            ${msg("Clear")}
+          </button>
+          ${until(__privateMethod(this, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn).call(this), nothing)}
+          <button
+            class="tertiary today"
+            @click=${() => {
+      this.value = /* @__PURE__ */ new Date();
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+    }}
+          >
+            ${msg("Today")}
+          </button>
+        </div>
+      </gds-popover> `;
+  }
+  _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 = () => __privateMethod(this, _focusDate, focusDate_fn).call(this, this.max);
+  } else if (focusedDate && focusedDate < this.min) {
+    buttonTxt = msg("First available date");
+    buttonAction = () => __privateMethod(this, _focusDate, focusDate_fn).call(this, this.min);
+  }
+  return html`${when(
+    buttonTxt.length > 0,
+    () => html`<button class="tertiary back-to-range" @click=${buttonAction}>
+          ${buttonTxt}
+        </button>`,
+    () => nothing
+  )}`;
+};
+_focusDate = new WeakSet();
+focusDate_fn = function(d) {
+  const firstValidDate = new Date(d);
+  this._elCalendar.then((el) => el.focusedDate = firstValidDate).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 = [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("#trigger")
+], GdsDatepicker.prototype, "_elTrigger", 2);
+__decorateClass([
+  queryAll("[role=spinbutton]")
+], GdsDatepicker.prototype, "_elSpinners", 2);
+__decorateClass([
+  query(".input")
+], GdsDatepicker.prototype, "_elInput", 2);
+__decorateClass([
+  state()
+], GdsDatepicker.prototype, "_tStyles", 2);
+__decorateClass([
+  watch("value")
+], GdsDatepicker.prototype, "_handleValueChange", 1);
+__decorateClass([
+  watch("open")
+], GdsDatepicker.prototype, "_handleOpenChange", 1);
+GdsDatepicker = __decorateClass([
+  gdsCustomElement("gds-datepicker")
+], GdsDatepicker);
+
+export {
+  GdsDatepicker
+};