@sebgroup/green-core 1.3.0 → 1.4.0

package/index.js

@@ -9,9 +9,9 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg4) => {
+var __accessCheck = (obj, member, msg6) => {
   if (!member.has(obj))
-    throw TypeError("Cannot " + msg4);
+    throw TypeError("Cannot " + msg6);
 };
 var __privateGet = (obj, member, getter) => {
   __accessCheck(obj, member, "read from private field");
@@ -76,8 +76,8 @@ function watch(propertyName, options) {
     const { update } = proto;
     const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
     proto.update = function(changedProps) {
-      watchedProperties.forEach((property7) => {
-        const key = property7;
+      watchedProperties.forEach((property10) => {
+        const key = property10;
         if (changedProps.has(key)) {
           const oldValue = changedProps.get(key);
           const newValue = this[key];
@@ -139,7 +139,7 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-f38327";
+var VER_SUFFIX = "-98c004";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -200,6 +200,7 @@ var TransitionalStyles = class _TransitionalStyles {
   static get instance() {
     if (!globalThis.__gdsTransitionalStyles?.[VER_SUFFIX])
       globalThis.__gdsTransitionalStyles = {
+        ...globalThis.__gdsTransitionalStyles,
         [VER_SUFFIX]: new _TransitionalStyles()
       };
     return globalThis.__gdsTransitionalStyles[VER_SUFFIX];
@@ -217,9 +218,9 @@ var TransitionalStyles = class _TransitionalStyles {
       return;
     element.shadowRoot.adoptedStyleSheets = [sheet];
   }
-  register(name, styles) {
+  register(name, styles2) {
     const sheet = new CSSStyleSheet();
-    sheet.replaceSync(styles);
+    sheet.replaceSync(styles2);
     this.sheets.set(name, sheet);
     this.applyToElement(name, sheet);
   }
@@ -468,13 +469,6 @@ var Focusable = (superClass) => {
     focus(options) {
       this.setAttribute("tabindex", "0");
       super.focus(options);
-      if (document.activeElement !== this) {
-        const iv = setInterval(() => {
-          if (document.activeElement === this)
-            clearInterval(iv);
-          super.focus(options);
-        }, 10);
-      }
     }
   }
   return HighlightableElement;
@@ -494,7 +488,7 @@ var GdsOption = class extends Focusable(LitElement2) {
       if (e.key !== "Enter" && e.key !== " ")
         return;
       e.preventDefault();
-      __privateMethod(this, _emitSelect, emitSelect_fn).call(this);
+      __privateMethod(this, _emitSelect, emitSelect_fn).call(this, e);
     });
   }
   get hidden() {
@@ -520,7 +514,7 @@ var GdsOption = class extends Focusable(LitElement2) {
   get parentElement() {
     return super.parentElement;
   }
-  handlePlaceholderStatusChange() {
+  _handlePlaceholderStatusChange() {
     if (this.isPlaceholder) {
       __privateSet(this, _hidden, true);
       this.setAttribute("aria-hidden", "true");
@@ -545,7 +539,8 @@ var GdsOption = class extends Focusable(LitElement2) {
 };
 _hidden = new WeakMap();
 _emitSelect = new WeakSet();
-emitSelect_fn = function() {
+emitSelect_fn = function(e) {
+  e.stopPropagation();
   this.dispatchEvent(
     new CustomEvent("gds-select", {
       bubbles: true,
@@ -577,7 +572,7 @@ __decorateClass([
 ], GdsOption.prototype, "isPlaceholder", 2);
 __decorateClass([
   watch("isplaceholder")
-], GdsOption.prototype, "handlePlaceholderStatusChange", 1);
+], GdsOption.prototype, "_handlePlaceholderStatusChange", 1);
 GdsOption = __decorateClass([
   gdsCustomElement("gds-option")
 ], GdsOption);
@@ -696,8 +691,8 @@ function isContainingBlock(element) {
   if (element.tagName === "dialog") {
     return true;
   }
-  const css5 = getComputedStyle(element);
-  return css5.transform !== "none" || css5.perspective !== "none" || css5.contain === "paint" || ["transform", "perspective"].includes(css5.willChange) || isFirefox && css5.willChange === "filter" || isFirefox && (css5.filter ? css5.filter !== "none" : false);
+  const css7 = getComputedStyle(element);
+  return css7.transform !== "none" || css7.perspective !== "none" || css7.contain === "paint" || ["transform", "perspective"].includes(css7.willChange) || isFirefox && css7.willChange === "filter" || isFirefox && (css7.filter ? css7.filter !== "none" : false);
 }
 function getUAString() {
   const uaData = navigator.userAgentData;
@@ -774,7 +769,7 @@ var style3 = css3`
 var popover_styles_default = style3;
 
 // libs/core/src/primitives/popover/popover.ts
-var _dialogElementRef, _autoPositionCleanupFn, _isMobileViewport, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _registerAutoPositioning, registerAutoPositioning_fn, _triggerKeyDownListener, _focusFirstSlottedChild, _clickOutsideListener;
+var _dialogElementRef, _autoPositionCleanupFn, _isMobileViewport, _dispatchUiStateEvent, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _registerAutoPositioning, registerAutoPositioning_fn, _triggerKeyDownListener, _focusFirstSlottedChild, _clickOutsideListener;
 var GdsPopover = class extends LitElement3 {
   constructor() {
     super(...arguments);
@@ -785,6 +780,7 @@ var GdsPopover = class extends LitElement3 {
     this.triggerRef = Promise.resolve(void 0);
     this.label = void 0;
     this.placement = "bottom-start";
+    this.calcMinWidth = (referenceEl) => `${referenceEl.offsetWidth}px`;
     this.calcMaxWidth = (_referenceEl) => `auto`;
     this._trigger = void 0;
     this._isVirtKbVisible = false;
@@ -793,10 +789,20 @@ var GdsPopover = class extends LitElement3 {
     // A function that removes the Floating UI auto positioning. This gets called when we switch to mobile view layout.
     __privateAdd(this, _autoPositionCleanupFn, void 0);
     __privateAdd(this, _isMobileViewport, false);
+    __privateAdd(this, _dispatchUiStateEvent, () => {
+      this.dispatchEvent(
+        new CustomEvent("gds-ui-state", {
+          detail: { open: this.open },
+          bubbles: false,
+          composed: false
+        })
+      );
+    });
     __privateAdd(this, _handleCloseButton, (e) => {
       e.stopPropagation();
       e.preventDefault();
       this.open = false;
+      __privateGet(this, _dispatchUiStateEvent).call(this);
       setTimeout(() => this._trigger?.focus(), 250);
     });
     /**
@@ -806,9 +812,11 @@ var GdsPopover = class extends LitElement3 {
       if (e.key === "ArrowDown") {
         e.preventDefault();
         this.open = true;
+        __privateGet(this, _dispatchUiStateEvent).call(this);
       }
       if (e.key === "Escape") {
         this.open = false;
+        __privateGet(this, _dispatchUiStateEvent).call(this);
       }
     });
     /**
@@ -820,13 +828,17 @@ var GdsPopover = class extends LitElement3 {
         firstSlottedChild?.focus();
       });
     });
-    __privateAdd(this, _clickOutsideListener, (e) => {
+    __privateAdd(this, _clickOutsideListener, (evt) => {
+      const e = evt;
       const dialog = __privateGet(this, _dialogElementRef).value;
-      if (dialog && this.open) {
+      const isNotEnterKey = e.clientX > 0 || e.clientY > 0;
+      if (isNotEnterKey && dialog && this.open) {
         const rect = dialog.getBoundingClientRect();
         const isInDialog = rect.top <= e.clientY && e.clientY <= rect.top + rect.height && rect.left <= e.clientX && e.clientX <= rect.left + rect.width;
         if (!isInDialog) {
+          e.stopPropagation();
           this.open = false;
+          __privateGet(this, _dispatchUiStateEvent).call(this);
         }
       }
     });
@@ -849,7 +861,9 @@ var GdsPopover = class extends LitElement3 {
     this.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
         this.open = false;
-        e.stopImmediatePropagation();
+        __privateGet(this, _dispatchUiStateEvent).call(this);
+        e.stopPropagation();
+        e.preventDefault();
       }
     });
     this.addEventListener("focusin", (e) => {
@@ -908,13 +922,6 @@ var GdsPopover = class extends LitElement3 {
         );
       }
     });
-    this.dispatchEvent(
-      new CustomEvent("gds-ui-state", {
-        detail: { open: this.open },
-        bubbles: true,
-        composed: false
-      })
-    );
   }
   _handleMobileLayout(matches) {
     var _a;
@@ -938,6 +945,7 @@ var GdsPopover = class extends LitElement3 {
 _dialogElementRef = new WeakMap();
 _autoPositionCleanupFn = new WeakMap();
 _isMobileViewport = new WeakMap();
+_dispatchUiStateEvent = new WeakMap();
 _handleCloseButton = new WeakMap();
 _registerTriggerEvents = new WeakSet();
 registerTriggerEvents_fn = function() {
@@ -967,8 +975,8 @@ registerAutoPositioning_fn = function() {
       ({ x, y }) => Object.assign(floatingEl.style, {
         left: `${x}px`,
         top: `${y}px`,
-        minWidth: `${referenceEl.offsetWidth}px`,
-        maxWidth: `${this.calcMaxWidth(referenceEl)}`
+        minWidth: this.calcMinWidth(referenceEl),
+        maxWidth: this.calcMaxWidth(referenceEl)
       })
     );
   }));
@@ -989,6 +997,9 @@ __decorateClass([
 __decorateClass([
   property3()
 ], GdsPopover.prototype, "placement", 2);
+__decorateClass([
+  property3()
+], GdsPopover.prototype, "calcMinWidth", 2);
 __decorateClass([
   property3()
 ], GdsPopover.prototype, "calcMaxWidth", 2);
@@ -1024,8 +1035,9 @@ var GdsFormControlElement = class extends LitElement4 {
     this.name = "";
     /**
      * Event handler for the form reset event.
+     * Can be overridden by subclasses to rcustomize the reset value.
      */
-    this.#handleFormReset = () => {
+    this._handleFormReset = () => {
       this.value = void 0;
     };
     this.#internals = this.attachInternals();
@@ -1057,11 +1069,11 @@ var GdsFormControlElement = class extends LitElement4 {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.#internals.form?.addEventListener("reset", this.#handleFormReset);
+    this.#internals.form?.addEventListener("reset", this._handleFormReset);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.#internals.form?.removeEventListener("reset", this.#handleFormReset);
+    this.#internals.form?.removeEventListener("reset", this._handleFormReset);
   }
   __handleValidityChange() {
     this.#internals.setValidity(
@@ -1083,7 +1095,6 @@ var GdsFormControlElement = class extends LitElement4 {
   __handleValueChange() {
     this.#internals.setFormValue(this.value);
   }
-  #handleFormReset;
 };
 __decorateClass([
   property4({
@@ -1601,8 +1612,881 @@ _handleOnClick = new WeakMap();
 GdsMenuItem = __decorateClass([
   gdsCustomElement("gds-menu-item")
 ], GdsMenuItem);
+
+// libs/core/src/components/datepicker/datepicker.ts
+import { property as property9, queryAll, queryAsync as queryAsync3, state as state3 } from "lit/decorators.js";
+import { join } from "lit/directives/join.js";
+import { when as when4 } 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 { msg as msg5 } from "@lit/localize";
+import { eachYearOfInterval } from "date-fns";
+
+// libs/core/src/primitives/calendar/calendar.ts
+import { LitElement as LitElement8, html as html5 } from "lit";
+import { classMap as classMap4 } from "lit/directives/class-map.js";
+import { when as when3 } from "lit/directives/when.js";
+import { property as property7, query as query2 } from "lit/decorators.js";
+import { msg as msg4 } from "@lit/localize";
+import {
+  addDays as addDays2,
+  isSameDay,
+  isSameMonth,
+  getWeek,
+  subMonths,
+  addMonths
+} from "date-fns";
+
+// libs/core/src/primitives/calendar/functions.ts
+import {
+  startOfMonth,
+  endOfMonth,
+  addDays,
+  eachWeekOfInterval,
+  eachDayOfInterval
+} from "date-fns";
+import { html as html4 } from "lit-html";
+function renderMonthGridView(date, template) {
+  const monthStart = startOfMonth(date);
+  const monthEnd = endOfMonth(date);
+  const weeks = eachWeekOfInterval(
+    { start: monthStart, end: monthEnd },
+    { weekStartsOn: 1 }
+  );
+  return html4`${template(
+    weeks.map((weekStartDay) => ({
+      days: eachDayOfInterval({
+        start: weekStartDay,
+        end: addDays(weekStartDay, 6)
+      })
+    }))
+  )}`;
+}
+
+// libs/core/src/primitives/calendar/calendar.styles.ts
+import { css as css5 } from "lit";
+var style5 = css5`
+  td.disabled {
+    color: #999;
+    cursor: default;
+  }
+  td.today {
+    background-color: #eee;
+  }
+`;
+var calendar_styles_default = style5;
+
+// libs/core/src/primitives/calendar/calendar.ts
+var _setSelectedDate, setSelectedDate_fn, _handleKeyDown, handleKeyDown_fn;
+var GdsCalendar = class extends LitElement8 {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _setSelectedDate);
+    __privateAdd(this, _handleKeyDown);
+    this.value = /* @__PURE__ */ new Date();
+    this.min = new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1);
+    this.max = new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 0, 1);
+    this.focusedDate = /* @__PURE__ */ new Date();
+    this.showWeekNumbers = false;
+  }
+  get focusedMonth() {
+    return this.focusedDate.getMonth();
+  }
+  set focusedMonth(month) {
+    this.focusedDate = new Date(this.focusedDate.setMonth(month));
+  }
+  get focusedYear() {
+    return this.focusedDate.getFullYear();
+  }
+  set focusedYear(year) {
+    this.focusedDate = new Date(this.focusedDate.setFullYear(year));
+  }
+  /**
+   * Returns the date cell element for the given day number.
+   */
+  getDateCell(dayNumber) {
+    return this.shadowRoot?.querySelector(`#dateCell-${dayNumber}`);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-calendar");
+    this.addEventListener("keydown", __privateMethod(this, _handleKeyDown, handleKeyDown_fn));
+  }
+  focus() {
+    super.focus();
+    this._elFocusedCell?.focus();
+  }
+  render() {
+    const currentDate = /* @__PURE__ */ new Date();
+    return html5`<table>
+      <thead>
+        <tr>
+          ${when3(this.showWeekNumbers, () => html5`<th></th>`)}
+          <th>${msg4("Mon")}</th>
+          <th>${msg4("Tue")}</th>
+          <th>${msg4("Wed")}</th>
+          <th>${msg4("Thu")}</th>
+          <th>${msg4("Fri")}</th>
+          <th>${msg4("Sat")}</th>
+          <th>${msg4("Sun")}</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${renderMonthGridView(
+      this.focusedDate,
+      (weeks) => html5`
+            ${weeks.map(
+        (week) => html5`
+                <tr>
+                  ${when3(
+          this.showWeekNumbers,
+          () => html5`<td class="week-number">
+                        ${getWeek(week.days[0])}
+                      </td>`
+        )}
+                  ${week.days.map((day) => {
+          const isDisabled = !isSameMonth(this.focusedDate, day) || day < this.min || day > this.max;
+          return html5`
+                      <td
+                        class="${classMap4({
+            disabled: isDisabled,
+            today: isSameDay(currentDate, day)
+          })}"
+                        ?disabled=${isDisabled}
+                        tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
+                        aria-selected="${isSameDay(this.value, day)}"
+                        aria-label="${day.toDateString()}"
+                        @click=${() => isDisabled ? null : __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, day)}
+                        id="dateCell-${day.getDate()}"
+                      >
+                        ${day.getDate()}
+                      </td>
+                    `;
+        })}
+                </tr>
+              `
+      )}
+          `
+    )}
+      </tbody>
+    </table>`;
+  }
+};
+_setSelectedDate = new WeakSet();
+setSelectedDate_fn = function(date) {
+  this.value = date;
+  this.dispatchEvent(
+    new CustomEvent("change", {
+      detail: date,
+      bubbles: false,
+      composed: false
+    })
+  );
+};
+_handleKeyDown = new WeakSet();
+handleKeyDown_fn = function(e) {
+  let handled = false;
+  let newFocusedDate = new Date(this.focusedDate);
+  if (e.key === "ArrowLeft") {
+    newFocusedDate = addDays2(this.focusedDate, -1);
+    handled = true;
+  } else if (e.key === "ArrowRight") {
+    newFocusedDate = addDays2(this.focusedDate, 1);
+    handled = true;
+  } else if (e.key === "ArrowUp") {
+    newFocusedDate = addDays2(this.focusedDate, -7);
+    handled = true;
+  } else if (e.key === "ArrowDown") {
+    newFocusedDate = addDays2(this.focusedDate, 7);
+    handled = true;
+  } else if (e.key === "Enter" || e.key === " ") {
+    if (!this._elFocusedCell?.hasAttribute("disabled")) {
+      __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, this.focusedDate);
+    }
+    handled = true;
+  } else if (e.key === "Home") {
+    newFocusedDate = new Date(this.focusedYear, this.focusedMonth, 1);
+    handled = true;
+  } else if (e.key === "End") {
+    newFocusedDate = new Date(this.focusedYear, this.focusedMonth + 1, 0);
+    handled = true;
+  } else if (e.key === "PageUp") {
+    newFocusedDate = subMonths(this.focusedDate, 1);
+    handled = true;
+  } else if (e.key === "PageDown") {
+    newFocusedDate = addMonths(this.focusedDate, 1);
+    handled = true;
+  }
+  if (newFocusedDate.getFullYear() >= this.min.getFullYear() && newFocusedDate.getFullYear() <= this.max.getFullYear()) {
+    this.focusedDate = newFocusedDate;
+  }
+  if (handled) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.updateComplete.then(() => {
+      this._elFocusedCell?.focus();
+      this.dispatchEvent(
+        new CustomEvent("gds-date-focused", {
+          detail: this.focusedDate,
+          bubbles: false,
+          composed: false
+        })
+      );
+    });
+  }
+};
+GdsCalendar.styles = [calendar_styles_default];
+GdsCalendar.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property7()
+], GdsCalendar.prototype, "value", 2);
+__decorateClass([
+  property7({ type: Date })
+], GdsCalendar.prototype, "min", 2);
+__decorateClass([
+  property7({ type: Date })
+], GdsCalendar.prototype, "max", 2);
+__decorateClass([
+  property7()
+], GdsCalendar.prototype, "focusedDate", 2);
+__decorateClass([
+  property7({ type: Number })
+], GdsCalendar.prototype, "focusedMonth", 1);
+__decorateClass([
+  property7({ type: Number })
+], GdsCalendar.prototype, "focusedYear", 1);
+__decorateClass([
+  property7({ type: Boolean })
+], GdsCalendar.prototype, "showWeekNumbers", 2);
+__decorateClass([
+  query2('td[tabindex="0"]')
+], GdsCalendar.prototype, "_elFocusedCell", 2);
+GdsCalendar = __decorateClass([
+  gdsCustomElement("gds-calendar")
+], GdsCalendar);
+
+// libs/core/src/components/datepicker/date-part-spinner.ts
+import { LitElement as LitElement9 } from "lit";
+import { property as property8, state as state2 } from "lit/decorators.js";
+var _inputBuffer, _increment, _decrement, _handleClick, _handleFocus, _handleBlur, _handleWheel, _handleKeyDown2, _focusNextSpinner, focusNextSpinner_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _formatNumber, formatNumber_fn, _clamp, clamp_fn, _clearInputBuffer, clearInputBuffer_fn;
+var GdsDatePartSpinner = class extends LitElement9 {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _focusNextSpinner);
+    __privateAdd(this, _dispatchChangeEvent);
+    __privateAdd(this, _formatNumber);
+    __privateAdd(this, _clamp);
+    __privateAdd(this, _clearInputBuffer);
+    this.value = 0;
+    this.length = 2;
+    this.min = 0;
+    this.max = Number.MAX_SAFE_INTEGER;
+    this.displayValue = __privateMethod(this, _formatNumber, formatNumber_fn).call(this, this.value, this.length);
+    __privateAdd(this, _inputBuffer, "");
+    __privateAdd(this, _increment, () => {
+      let current = parseInt(this.value.toString());
+      if (Number.isNaN(current))
+        current = this.length === 2 ? this.min : (/* @__PURE__ */ new Date()).getFullYear() - 1;
+      this.value = __privateMethod(this, _clamp, clamp_fn).call(this, current + 1);
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+    });
+    __privateAdd(this, _decrement, () => {
+      let current = parseInt(this.value.toString());
+      if (Number.isNaN(current))
+        current = this.length === 2 ? this.max : (/* @__PURE__ */ new Date()).getFullYear() + 1;
+      this.value = __privateMethod(this, _clamp, clamp_fn).call(this, current - 1);
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+    });
+    __privateAdd(this, _handleClick, (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this.focus();
+    });
+    __privateAdd(this, _handleFocus, () => {
+      __privateMethod(this, _clearInputBuffer, clearInputBuffer_fn).call(this);
+    });
+    __privateAdd(this, _handleBlur, () => {
+      if (__privateGet(this, _inputBuffer) === "")
+        return;
+      __privateMethod(this, _clearInputBuffer, clearInputBuffer_fn).call(this);
+      this.value = __privateMethod(this, _clamp, clamp_fn).call(this, parseInt(this.value.toString()));
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+      document.getSelection()?.removeAllRanges();
+    });
+    __privateAdd(this, _handleWheel, (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (e.deltaY > 0) {
+        __privateGet(this, _decrement).call(this);
+      } else {
+        __privateGet(this, _increment).call(this);
+      }
+    });
+    __privateAdd(this, _handleKeyDown2, (e) => {
+      let handled = false;
+      if (e.key === "ArrowUp") {
+        __privateGet(this, _increment).call(this);
+        handled = true;
+      } else if (e.key === "ArrowDown") {
+        __privateGet(this, _decrement).call(this);
+        handled = true;
+      } else {
+        const key = parseInt(e.key);
+        if (!isNaN(key)) {
+          __privateSet(this, _inputBuffer, __privateGet(this, _inputBuffer) + key.toString());
+          this.value = parseInt(__privateGet(this, _inputBuffer));
+          if (__privateGet(this, _inputBuffer).length == this.length) {
+            __privateMethod(this, _focusNextSpinner, focusNextSpinner_fn).call(this);
+            __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+          }
+          handled = true;
+        }
+      }
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
+  }
+  // No need for a shadow root here
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "spinbutton");
+    this.setAttribute("tabindex", "0");
+    this.addEventListener("wheel", __privateGet(this, _handleWheel));
+    this.addEventListener("keydown", __privateGet(this, _handleKeyDown2));
+    this.addEventListener("blur", __privateGet(this, _handleBlur));
+    this.addEventListener("focus", __privateGet(this, _handleFocus));
+    this.addEventListener("click", __privateGet(this, _handleClick));
+    this.addEventListener("mousedown", __privateGet(this, _handleClick));
+  }
+  focus(options) {
+    super.focus(options);
+    __privateGet(this, _handleFocus).call(this);
+  }
+  render() {
+    return html`${this.displayValue}`;
+  }
+  _refreshDisplayValue() {
+    this.displayValue = __privateMethod(this, _formatNumber, formatNumber_fn).call(this, this.value, this.length);
+    this.setAttribute("aria-valuetext", this.value.toString());
+  }
+};
+_inputBuffer = new WeakMap();
+_increment = new WeakMap();
+_decrement = new WeakMap();
+_handleClick = new WeakMap();
+_handleFocus = new WeakMap();
+_handleBlur = new WeakMap();
+_handleWheel = new WeakMap();
+_handleKeyDown2 = new WeakMap();
+_focusNextSpinner = new WeakSet();
+focusNextSpinner_fn = function() {
+  let nextSpinner = this.nextElementSibling;
+  while (nextSpinner) {
+    if (nextSpinner instanceof GdsDatePartSpinner) {
+      nextSpinner.focus();
+      break;
+    }
+    nextSpinner = nextSpinner.nextElementSibling;
+  }
+};
+_dispatchChangeEvent = new WeakSet();
+dispatchChangeEvent_fn = function() {
+  this.dispatchEvent(
+    new CustomEvent("change", {
+      detail: { value: this.value.toString() }
+    })
+  );
+};
+_formatNumber = new WeakSet();
+formatNumber_fn = function(num, padZeros) {
+  return String(num).padStart(padZeros, "0");
+};
+_clamp = new WeakSet();
+clamp_fn = function(value) {
+  return Math.max(this.min, Math.min(this.max, value));
+};
+_clearInputBuffer = new WeakSet();
+clearInputBuffer_fn = function() {
+  __privateSet(this, _inputBuffer, "");
+};
+GdsDatePartSpinner.formAssociated = true;
+__decorateClass([
+  property8({ type: Number })
+], GdsDatePartSpinner.prototype, "value", 2);
+__decorateClass([
+  property8({ type: Number })
+], GdsDatePartSpinner.prototype, "length", 2);
+__decorateClass([
+  property8({ type: Number, attribute: "aria-valuemin" })
+], GdsDatePartSpinner.prototype, "min", 2);
+__decorateClass([
+  property8({ type: Number, attribute: "aria-valuemax" })
+], GdsDatePartSpinner.prototype, "max", 2);
+__decorateClass([
+  state2()
+], GdsDatePartSpinner.prototype, "displayValue", 2);
+__decorateClass([
+  watch("value")
+], GdsDatePartSpinner.prototype, "_refreshDisplayValue", 1);
+GdsDatePartSpinner = __decorateClass([
+  gdsCustomElement("gds-date-part-spinner")
+], GdsDatePartSpinner);
+
+// libs/core/src/components/datepicker/datepicker.styles.ts
+import { css as css6 } from "lit";
+var styles = css6`
+  label {
+    display: block;
+  }
+`;
+
+// libs/core/src/components/datepicker/datepicker.ts
+import { nothing } from "lit";
+var dateConverter = {
+  fromAttribute(value) {
+    return new Date(value);
+  },
+  toAttribute(value) {
+    return value.toISOString();
+  }
+};
+var _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_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, _dispatchChangeEvent2);
+    /**
+     * Takes a dateformat string from the dateformat attribute and turnes it to a DateFormatLayout object used in rendering the template.
+     */
+    __privateAdd(this, _parseDateFormat);
+    /**
+     * Returns an array of years between the min and max dates for use in the year dropdown.
+     * If the value is set to a year outside the range, it will be added to the array until the value is changed.
+     */
+    __privateAdd(this, _years);
+    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._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, _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, _handleFocusChange, async () => {
+      this._focusedMonth = (await this._elCalendar).focusedMonth;
+      this._focusedYear = (await this._elCalendar).focusedYear;
+      this.requestUpdate();
+    });
+    __privateAdd(this, _handlePopoverStateChange, (e) => {
+      if (e.target !== e.currentTarget)
+        return;
+      this.open = e.detail.open;
+    });
+    __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, _dispatchChangeEvent2, dispatchChangeEvent_fn2).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 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;
+  }
+  /**
+   * 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`
+      <label for="spinner-0" id="label">${this.label}</label>
+
+      <div class="form-info"><slot name="sub-label"></slot></div>
+
+      <div class="field" id="trigger">
+        <div class="input">
+          ${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)}
+                ></gds-date-part-spinner>`
+      ),
+      html`<span>${this._dateFormatLayout.delimiter}</span>`
+    )}
+        </div>
+        <button
+          id="calendar-button"
+          aria-label="${msg5("Open calendar modal")}"
+          aria-haspopup="menu"
+          aria-expanded=${this.open}
+          aria-controls="calendar-popover"
+          aria-describedby="label"
+          @click=${() => this.open = !this.open}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 448 512"
+            style="width:100%;height:100%"
+          >
+            <path
+              d="M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z "
+            />
+          </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)}
+        id="calendar-popover"
+        .placement=${"bottom-end"}
+        .calcMinWidth=${() => "390px"}
+        @focusin=${async (e) => {
+      const isPopover = e.target?.id === "calendar-popover";
+      if (!isPopover)
+        return;
+      this._elCalendar.then((cal) => cal.focus());
+    }}
+      >
+        <div class="header">
+          <button @click=${__privateGet(this, _handleDecrementFocusedMonth)}>
+            <i class="icon prev"></i>
+          </button>
+          <gds-dropdown
+            .value=${this._focusedMonth.toString()}
+            @change=${(e) => this._focusedMonth = e.target?.value}
+            aria-label="${msg5("Month")}"
+          >
+            <gds-option value="0">${msg5("January")}</gds-option>
+            <gds-option value="1">${msg5("February")}</gds-option>
+            <gds-option value="2">${msg5("March")}</gds-option>
+            <gds-option value="3">${msg5("April")}</gds-option>
+            <gds-option value="4">${msg5("May")}</gds-option>
+            <gds-option value="5">${msg5("June")}</gds-option>
+            <gds-option value="6">${msg5("July")}</gds-option>
+            <gds-option value="7">${msg5("August")}</gds-option>
+            <gds-option value="8">${msg5("September")}</gds-option>
+            <gds-option value="9">${msg5("October")}</gds-option>
+            <gds-option value="10">${msg5("November")}</gds-option>
+            <gds-option value="11">${msg5("December")}</gds-option>
+          </gds-dropdown>
+          <gds-dropdown
+            .value=${this._focusedYear.toString()}
+            @change=${(e) => this._focusedYear = e.target?.value}
+            aria-label="${msg5("Year")}"
+          >
+            ${repeat(
+      __privateGet(this, _years, years_get),
+      (year) => year,
+      (year) => html`<gds-option value=${year}>${year}</gds-option>`
+    )}
+          </gds-dropdown>
+          <button @click=${__privateGet(this, _handleIncrementFocusedMonth)}>
+            <i class="icon next"></i>
+          </button>
+        </div>
+
+        <gds-calendar
+          id="calendar"
+          @change=${(e) => {
+      e.stopPropagation();
+      this.value = e.detail;
+      this.open = false;
+      __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+    }}
+          @gds-date-focused=${__privateGet(this, _handleFocusChange)}
+          .focusedMonth=${this._focusedMonth}
+          .focusedYear=${this._focusedYear}
+          .value=${this.value}
+          .min=${this.min}
+          .max=${this.max}
+          .showWeekNumbers=${this.showWeekNumbers}
+        ></gds-calendar>
+
+        <div class="footer">
+          <button
+            class="tertiary clear"
+            @click=${() => {
+      this.value = void 0;
+      __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+    }}
+          >
+            ${msg5("Clear")}
+          </button>
+          ${until(__privateMethod(this, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn).call(this), nothing)}
+          <button
+            class="tertiary today"
+            @click=${() => {
+      this.value = /* @__PURE__ */ new Date();
+      __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+    }}
+          >
+            ${msg5("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 });
+  }
+};
+_renderBackToValidRangeButton = new WeakSet();
+renderBackToValidRangeButton_fn = async function() {
+  const focusedDate = await this.getFocusedDate();
+  let buttonTxt = "";
+  let buttonAction;
+  if (focusedDate && focusedDate > this.max) {
+    buttonTxt = msg5("Last available date");
+    buttonAction = () => __privateMethod(this, _focusDate, focusDate_fn).call(this, this.max);
+  } else if (focusedDate && focusedDate < this.min) {
+    buttonTxt = msg5("First available date");
+    buttonAction = () => __privateMethod(this, _focusDate, focusDate_fn).call(this, this.min);
+  }
+  return html`${when4(
+    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, _handleFocusChange));
+};
+_getSpinnerLabel = new WeakSet();
+getSpinnerLabel_fn = function(name) {
+  const labels = {
+    year: msg5("Year"),
+    month: msg5("Month"),
+    day: msg5("Day")
+  };
+  return labels[name];
+};
+_getMinSpinnerValue = new WeakSet();
+getMinSpinnerValue_fn = function(name) {
+  const min = {
+    year: this.min.getFullYear(),
+    month: 1,
+    day: 1
+  };
+  return min[name];
+};
+_getMaxSpinnerValue = new WeakSet();
+getMaxSpinnerValue_fn = function(name) {
+  const max = {
+    year: this.max.getFullYear(),
+    month: 12,
+    day: 31
+  };
+  return max[name];
+};
+_dispatchChangeEvent2 = new WeakSet();
+dispatchChangeEvent_fn2 = function() {
+  this.dispatchEvent(
+    new CustomEvent("change", {
+      detail: { value: this.value }
+    })
+  );
+};
+_handleIncrementFocusedMonth = new WeakMap();
+_handleDecrementFocusedMonth = new WeakMap();
+_handleFocusChange = 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 years = eachYearOfInterval({
+    start: this.min,
+    end: this.max
+  }).map((date) => date.getFullYear());
+  if (!this.value)
+    return years;
+  const selectedYear = this.value.getFullYear();
+  const valueIsInrage = years[0] <= selectedYear && years[years.length - 1] >= selectedYear;
+  if (!valueIsInrage) {
+    years.push(selectedYear);
+    years.sort((a, b) => a - b);
+  }
+  return years;
+};
+GdsDatepicker.styles = [styles];
+GdsDatepicker.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property9({ converter: dateConverter })
+], GdsDatepicker.prototype, "value", 2);
+__decorateClass([
+  property9({ converter: dateConverter })
+], GdsDatepicker.prototype, "min", 2);
+__decorateClass([
+  property9({ converter: dateConverter })
+], GdsDatepicker.prototype, "max", 2);
+__decorateClass([
+  property9({ type: Boolean })
+], GdsDatepicker.prototype, "open", 2);
+__decorateClass([
+  property9()
+], GdsDatepicker.prototype, "label", 2);
+__decorateClass([
+  property9({ type: Boolean })
+], GdsDatepicker.prototype, "showWeekNumbers", 2);
+__decorateClass([
+  property9()
+], GdsDatepicker.prototype, "dateformat", 1);
+__decorateClass([
+  queryAsync3("#calendar-button")
+], GdsDatepicker.prototype, "test_calendarButton", 2);
+__decorateClass([
+  state3()
+], GdsDatepicker.prototype, "_focusedMonth", 2);
+__decorateClass([
+  state3()
+], GdsDatepicker.prototype, "_focusedYear", 2);
+__decorateClass([
+  state3()
+], GdsDatepicker.prototype, "_dateFormatLayout", 2);
+__decorateClass([
+  queryAsync3("#calendar")
+], GdsDatepicker.prototype, "_elCalendar", 2);
+__decorateClass([
+  queryAsync3("#trigger")
+], GdsDatepicker.prototype, "_elTrigger", 2);
+__decorateClass([
+  queryAll(getScopedTagName("gds-date-part-spinner"))
+], GdsDatepicker.prototype, "_elSpinners", 2);
+__decorateClass([
+  watch("value")
+], GdsDatepicker.prototype, "_handleValueChange", 1);
+GdsDatepicker = __decorateClass([
+  gdsCustomElement("gds-datepicker")
+], GdsDatepicker);
 export {
   GdsContextMenu,
+  GdsDatepicker,
   GdsDropdown,
   GdsMenuItem,
   GdsOption,