@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.17

package/components/calendar/index.cjs

@@ -15,4 +15,635 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-BQoI8AD3.cjs");exports.LuzmoCalendar=e.LuzmoCalendar;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const date = require("@internationalized/date");
+const number = require("@internationalized/number");
+const lit = require("lit");
+const classMap_js = require("lit/directives/class-map.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const base = require("../base-COw9n7UR.cjs");
+const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
+require("../action-button/index.cjs");
+require("../icon/index.cjs");
+const icons = require("@luzmo/icons");
+const decorators_js = require("lit/decorators.js");
+const styles = ':host{inline-size:var(--luzmo-calendar-width, var(--calendar-width));display:inline-block}.header{inline-size:100%;align-items:center;display:flex}.title{color:var(--highcontrast-calendar-date-text-color, var(--luzmo-calendar-date-text-color, var(--calendar-date-text-color)));font-size:var(--luzmo-calendar-title-text-size, var(--calendar-title-text-size));font-weight:var(--luzmo-calendar-title-font-weight, var(--calendar-title-font-weight));line-height:var(--luzmo-calendar-title-height, var(--calendar-title-height));text-align:center;white-space:nowrap;text-overflow:ellipsis;flex-grow:1;order:1;margin:0;overflow:hidden}.nextMonth,.prevMonth{transform:var(--logical-rotation)}.nextMonth:not([disabled]),.prevMonth:not([disabled]){color:var(--highcontrast-calendar-button-icon-color, var(--luzmo-calendar-button-icon-color, var(--calendar-button-icon-color)))}.prevMonth{order:0}.nextMonth{order:2}.dayOfWeek{inline-size:var(--luzmo-calendar-day-width, var(--calendar-day-width));color:var(--highcontrast-calendar-day-title-text-color, var(--luzmo-calendar-day-title-text-color, var(--calendar-day-title-text-color)));font-size:var(--luzmo-calendar-day-title-text-size, var(--calendar-day-title-text-size));font-weight:var(--luzmo-calendar-day-title-text-font-weight, var(--calendar-day-title-text-font-weight));text-transform:uppercase;cursor:default;flex-direction:column;justify-content:flex-end;display:flex;border-block-end:none!important;-webkit-text-decoration:none!important;text-decoration:none!important}:host([title]) .dayOfWeek{text-decoration:underline;letter-spacing:var(--luzmo-calendar-title-text-letter-spacing, var(--calendar-title-text-letter-spacing));border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.body{outline:none}.table{table-layout:fixed;border-collapse:collapse;border-spacing:0;-webkit-user-select:none;user-select:none}.table-cell{text-align:center;box-sizing:initial;block-size:var(--luzmo-calendar-day-height, var(--calendar-day-height));inline-size:var(--luzmo-calendar-day-width, var(--calendar-day-width));padding:var(--luzmo-calendar-day-padding, var(--calendar-day-padding));position:relative}.table-cell:focus{outline:0}.date{box-sizing:border-box;block-size:var(--luzmo-calendar-day-height, var(--calendar-day-height));inline-size:var(--luzmo-calendar-day-width, var(--calendar-day-width));margin:var(--luzmo-calendar-day-padding, var(--calendar-day-padding));border-radius:var(--luzmo-calendar-day-border-radius, var(--calendar-day-border-radius));border:var(--luzmo-calendar-day-border-size, var(--calendar-day-border-size)) solid transparent;font-size:var(--luzmo-calendar-day-text-size, var(--calendar-day-text-size));line-height:calc(var(--luzmo-calendar-day-width, var(--calendar-day-width)) - var(--luzmo-calendar-day-border-size, var(--calendar-day-border-size)) * 2);white-space:nowrap;cursor:pointer;display:block;position:absolute;inset-block-start:0;inset-inline-start:0}.date:lang(ja),.date:lang(ko),.date:lang(zh){font-size:var(--luzmo-calendar-day-text-size-han, var(--calendar-day-text-size-han))}.date.is-disabled{cursor:default;pointer-events:none}.date.is-outsideMonth{display:none}.date:before{content:"";box-sizing:border-box;inline-size:var(--luzmo-calendar-day-width, var(--calendar-day-width));block-size:var(--luzmo-calendar-day-height, var(--calendar-day-height));border-radius:var(--luzmo-calendar-day-border-radius, var(--calendar-day-border-radius));border:var(--luzmo-calendar-day-border-size, var(--calendar-day-border-size)) solid transparent;position:absolute;inset-block-start:calc(50% - var(--luzmo-calendar-day-width, var(--calendar-day-width)) / 2);inset-inline-start:calc(50% - var(--luzmo-calendar-day-width, var(--calendar-day-width)) / 2)}.date.is-selected:not(.is-range-selection){font-weight:var(--luzmo-calendar-day-text-font-weight-selected, var(--calendar-day-text-font-weight-selected))}.date.is-selected:not(.is-range-selection):before{display:none}.date.is-today{font-weight:var(--luzmo-calendar-day-today-text-font-weight, var(--calendar-day-today-text-font-weight))}.date.is-range-selection{margin:var(--luzmo-calendar-day-padding, var(--calendar-day-padding)) 0;border-width:var(--luzmo-calendar-border-width-reset, var(--calendar-border-width-reset));line-height:var(--luzmo-calendar-day-height, var(--calendar-day-height));border-radius:var(--luzmo-calendar-border-radius-reset, var(--calendar-border-radius-reset));inline-size:calc(var(--luzmo-calendar-day-width, var(--calendar-day-width)) + var(--luzmo-calendar-day-padding, var(--calendar-day-padding)) * 2)}.date.is-range-selection.is-range-end,.date.is-range-selection.is-range-start,.date.is-range-selection.is-selection-end,.date.is-range-selection.is-selection-start{inline-size:calc(var(--luzmo-calendar-day-width, var(--calendar-day-width)) + var(--luzmo-calendar-day-padding, var(--calendar-day-padding)))}.date.is-range-selection.is-selection-end,.date.is-range-selection.is-selection-start{font-weight:var(--luzmo-calendar-day-text-font-weight-cap-selected, var(--calendar-day-text-font-weight-cap-selected))}.date.is-range-selection.is-selection-end:after,.date.is-range-selection.is-selection-start:after{block-size:var(--luzmo-calendar-day-height, var(--calendar-day-height));inline-size:var(--luzmo-calendar-day-width, var(--calendar-day-width));border-radius:var(--luzmo-calendar-day-width, var(--calendar-day-width));content:"";display:block;position:absolute;inset-block-start:0}.date.is-range-selection.is-range-start,.date.is-range-selection.is-selection-start{border-start-start-radius:var(--luzmo-calendar-day-width, var(--calendar-day-width));border-end-start-radius:var(--luzmo-calendar-day-width, var(--calendar-day-width));margin-inline-start:var(--luzmo-calendar-day-padding, var(--calendar-day-padding));padding-inline-end:var(--luzmo-calendar-day-padding, var(--calendar-day-padding))}.date.is-range-selection.is-range-start:after,.date.is-range-selection.is-range-start:before,.date.is-range-selection.is-selection-start:after,.date.is-range-selection.is-selection-start:before{inset-inline-start:0}.date.is-range-selection.is-range-end,.date.is-range-selection.is-selection-end{border-start-end-radius:var(--luzmo-calendar-day-width, var(--calendar-day-width));border-end-end-radius:var(--luzmo-calendar-day-width, var(--calendar-day-width));margin-inline-end:var(--luzmo-calendar-day-padding, var(--calendar-day-padding));padding-inline-start:var(--luzmo-calendar-day-padding, var(--calendar-day-padding))}.date.is-range-selection.is-range-end:after,.date.is-range-selection.is-range-end:before,.date.is-range-selection.is-selection-end:after,.date.is-range-selection.is-selection-end:before{inset-inline:auto 0}.date.is-range-selection.is-range-start.is-range-end,.date.is-range-selection.is-selection-end.is-range-start,.date.is-range-selection.is-selection-start.is-range-end,.date.is-range-selection.is-selection-start.is-selection-end{inline-size:var(--luzmo-calendar-day-width, var(--calendar-day-width));border-radius:var(--luzmo-calendar-day-width, var(--calendar-day-width))}.date{color:var(--highcontrast-calendar-day-text-color, var(--luzmo-calendar-day-text-color, var(--calendar-day-text-color)))}.date:active{background-color:var(--highcontrast-calendar-day-background-color-down, var(--luzmo-calendar-day-background-color-down, var(--calendar-day-background-color-down)))}.date.is-selected{color:var(--highcontrast-calendar-day-text-color-selected, var(--luzmo-calendar-day-text-color-selected, var(--calendar-day-text-color-selected)));background:var(--highcontrast-calendar-day-background-color-selected, var(--luzmo-calendar-day-background-color-selected, var(--calendar-day-background-color-selected)))}.date.is-selected:not(.is-range-selection){background:var(--highcontrast-calendar-day-background-color-cap-selected, var(--luzmo-calendar-day-background-color-cap-selected, var(--calendar-day-background-color-cap-selected)));color:var(--highcontrast-calendar-day-text-color-cap-selected, var(--luzmo-calendar-day-text-color-cap-selected, var(--calendar-day-text-color-cap-selected)));border-color:var(--highcontrast-calendar-day-border-color-cap-selected, var(--luzmo-calendar-day-border-color-cap-selected, var(--calendar-day-border-color-cap-selected)))}.date.is-today{color:var(--highcontrast-calendar-day-today-text-color, var(--luzmo-calendar-day-today-text-color, var(--calendar-day-today-text-color)));background-color:var(--highcontrast-calendar-day-today-background-color, var(--luzmo-calendar-day-today-background-color, var(--calendar-day-today-background-color)))}.date.is-today,.date.is-today:before{border-color:var(--highcontrast-calendar-day-today-border-color, var(--luzmo-calendar-day-today-border-color, var(--calendar-day-today-border-color)))}@media (hover: hover){.date:hover{color:var(--highcontrast-calendar-day-text-color-hover, var(--luzmo-calendar-day-text-color-hover, var(--calendar-day-text-color-hover)))}.date:hover:not(.is-selection-end,.is-selection-start):before{background:var(--highcontrast-calendar-day-background-color-hover, var(--luzmo-calendar-day-background-color-hover, var(--calendar-day-background-color-hover)))}.date.is-range-selection:hover:before,.date.is-selected:hover:not(.is-selection-end,.is-selection-start):before{background:var(--highcontrast-calendar-day-background-color-selected-hover, var(--luzmo-calendar-day-background-color-selected-hover, var(--calendar-day-background-color-selected-hover)))}.date.is-today.is-selected:not(.is-range-selection):hover:before{background:var(--highcontrast-calendar-day-today-background-color-selected-hover, var(--luzmo-calendar-day-today-background-color-selected-hover, var(--calendar-day-today-background-color-selected-hover)))}}.date.is-today.is-disabled{color:var(--highcontrast-calendar-day-today-text-color-disabled, var(--luzmo-calendar-day-today-text-color-disabled, var(--calendar-day-today-text-color-disabled)))}.date.is-today.is-disabled,.date.is-today.is-disabled:before{border-color:var(--highcontrast-calendar-day-today-border-color-disabled, var(--luzmo-calendar-day-today-border-color-disabled, var(--calendar-day-today-border-color-disabled)))}.table-cell:focus-within .date:not(.is-range-selection){background:var(--highcontrast-calendar-day-background-color-key-focus, var(--luzmo-calendar-day-background-color-key-focus, var(--calendar-day-background-color-key-focus)));color:var(--highcontrast-calendar-day-text-color-key-focus, var(--luzmo-calendar-day-text-color-key-focus, var(--calendar-day-text-color-key-focus)))}.table-cell:focus-within .date.is-selected:not(.is-range-selection),.table-cell:focus-within .date.is-today:not(.is-range-selection),.table-cell:focus-within .date:not(.is-range-selection),.table-cell:focus-within .date:not(.is-range-selection):active{border-color:var(--highcontrast-calendar-day-border-color-key-focus, var(--luzmo-calendar-day-border-color-key-focus, var(--calendar-day-border-color-key-focus)))}.table-cell:focus-within .date.is-selected:not(.is-range-selection),.table-cell:focus-within .date:not(.is-range-selection):active{color:var(--highcontrast-calendar-day-text-color-selected, var(--luzmo-calendar-day-text-color-selected, var(--calendar-day-text-color-selected)));background:var(--highcontrast-calendar-day-background-color-cap-selected, var(--luzmo-calendar-day-background-color-cap-selected, var(--calendar-day-background-color-cap-selected)));border-color:var(--highcontrast-calendar-day-border-color-key-focus, var(--luzmo-calendar-day-border-color-cap-selected-focus, var(--calendar-day-border-color-cap-selected-focus)))}.table-cell:focus-within .date.is-range-selection:before,.table-cell:focus-within .date.is-selected:before{background:var(--highcontrast-calendar-day-background-color-selected-hover, var(--luzmo-calendar-day-background-color-selected-hover, var(--calendar-day-background-color-selected-hover)))}.table-cell:focus-within .date:before{border-color:var(--highcontrast-calendar-day-border-color-key-focus, var(--luzmo-calendar-day-border-color-key-focus, var(--calendar-day-border-color-key-focus)))}.date.is-disabled{color:var(--highcontrast-calendar-day-text-color-disabled, var(--luzmo-calendar-day-text-color-disabled, var(--calendar-day-text-color-disabled)))}.date.is-selection-end,.date.is-selection-start{color:var(--highcontrast-calendar-day-text-color-cap-selected, var(--luzmo-calendar-day-text-color-cap-selected, var(--calendar-day-text-color-cap-selected)))}.date.is-selection-end:after,.date.is-selection-start:after{background-color:var(--highcontrast-calendar-day-background-color-selected, var(--luzmo-calendar-day-background-color-selected, var(--calendar-day-background-color-selected)))}.date.is-selection-end.is-disabled,.date.is-selection-start.is-disabled{color:var(--highcontrast-calendar-day-text-color-disabled, var(--luzmo-calendar-day-text-color-disabled, var(--calendar-day-text-color-disabled)))}@media (forced-colors: active){.nextMonth,.prevMonth{--highcontrast-calendar-button-icon-color: ButtonText}.date{--highcontrast-calendar-day-background-color-cap-selected: Highlight;--highcontrast-calendar-day-background-color-down: ButtonFace;--highcontrast-calendar-day-background-color-hover: Transparent;--highcontrast-calendar-day-background-color-key-focus: ButtonFace;--highcontrast-calendar-day-background-color-selected-hover: Transparent;--highcontrast-calendar-day-background-color-selected: Highlight;--highcontrast-calendar-day-border-color-key-focus: ButtonText;--highcontrast-calendar-day-text-color-cap-selected: HighlightText;--highcontrast-calendar-day-text-color-disabled: GrayText;--highcontrast-calendar-day-text-color-hover: ButtonText;--highcontrast-calendar-day-text-color-key-focus: ButtonText;--highcontrast-calendar-day-text-color-selected: HighlightText;--highcontrast-calendar-day-text-color: CanvasText;--highcontrast-calendar-date-text-color: CanvasText;--highcontrast-calendar-day-title-text-color: CanvasText;--highcontrast-calendar-day-today-background-color-selected-hover: Highlight;--highcontrast-calendar-day-today-border-color-disabled: GrayText;--highcontrast-calendar-day-today-border-color: ButtonText;--highcontrast-calendar-day-today-text-color-disabled: GrayText;--highcontrast-calendar-day-today-text-color: ButtonText;forced-color-adjust:none}.date.is-range-selection.is-today{color:HighlightText}.date.is-range-selection.is-selection-end:after,.date.is-range-selection.is-selection-start:after{content:none}.date.is-disabled.is-range-selection,.date.is-disabled.is-selected{background:Highlight;color:HighlightText}}:host{--calendar-background-color: var(--luzmo-background-color-white)}:host{font-family:var(--luzmo-font-family);--calendar-day-width: var(--luzmo-component-height);--calendar-day-height: var(--luzmo-component-height);--calendar-border-radius-reset: 0;--calendar-border-width-reset: 0;--calendar-day-border-size: var(--luzmo-border-width);--calendar-margin-y: calc(var(--luzmo-spacing) * 3);--calendar-margin-x: var(--luzmo-component-height);--calendar-day-padding: var(--luzmo-spacing-2);--calendar-width: calc( (var(--calendar-day-width) + var(--calendar-day-padding) * 2) * 7 );--calendar-title-text-letter-spacing: .06em;--calendar-day-title-text-font-weight: bold;--calendar-day-title-text-color: var(--luzmo-font-color-disabled);--calendar-title-height: var(--luzmo-component-height);--calendar-title-font-weight: bold;--calendar-title-text-size: var(--luzmo-font-size);--calendar-day-title-text-size: var(--luzmo-font-size);--calendar-day-text-size-han: var(--luzmo-font-size);--calendar-date-text-color: var(--luzmo-font-color);--calendar-day-text-color: var(--luzmo-font-color);--calendar-day-text-size: var(--luzmo-font-size);--calendar-day-border-radius: var(--luzmo-border-radius);--calendar-day-text-color-selected: var(--luzmo-primary-inverse-color);--calendar-day-text-color-hover: var(--luzmo-font-color-hover);--calendar-day-text-color-cap-selected: var(--luzmo-primary-inverse-color);--calendar-day-border-color-cap-selected: var(--luzmo-primary);--calendar-day-border-color-cap-selected-focus: var(--luzmo-primary-focus);--calendar-day-text-font-weight-selected: var(--bold-font-weight);--calendar-day-text-font-weight-cap-selected: var(--bold-font-weight);--calendar-day-today-text-color: var(--luzmo-primary);--calendar-day-today-background-color: var(--luzmo-background-color-hover);--calendar-day-today-text-font-weight: normal;--calendar-day-today-border-color: transparent;--calendar-day-today-text-color-disabled: var(--luzmo-font-color-disabled);--calendar-day-today-border-color-disabled: transparent;--calendar-day-text-color-disabled: var(--luzmo-font-color-disabled);--calendar-day-text-color-key-focus: var(--luzmo-primary-down);--calendar-day-background-color-cap-selected: var(--luzmo-primary);--calendar-button-icon-color: var(--luzmo-font-color)}:host:dir(rtl),:host([dir=rtl]){--logical-rotation: matrix(-1, 0, 0, 1, 0, 0)}:host([size=s]){--calendar-day-width: var(--luzmo-component-height-s);--calendar-day-height: var(--luzmo-component-height-s);--calendar-day-border-radius: var(--luzmo-border-radius-s);--calendar-title-height: var(--luzmo-component-height-s);--calendar-title-text-size: var(--luzmo-font-size-s);--calendar-day-title-text-size: var(--luzmo-font-size-s);--calendar-day-text-size-han: var(--luzmo-font-size-s);--calendar-day-text-size: var(--luzmo-font-size-s)}:host([size=l]){--calendar-day-width: var(--luzmo-component-height-l);--calendar-day-height: var(--luzmo-component-height-l);--calendar-day-border-radius: var(--luzmo-border-radius-l);--calendar-title-height: var(--luzmo-component-height-l);--calendar-title-text-size: var(--luzmo-font-size-l);--calendar-day-title-text-size: var(--luzmo-font-size-l);--calendar-day-text-size-han: var(--luzmo-font-size-l);--calendar-day-text-size: var(--luzmo-font-size-l)}:host([size=xl]){--calendar-day-width: var(--luzmo-component-height-xl);--calendar-day-height: var(--luzmo-component-height-xl);--calendar-day-border-radius: var(--luzmo-border-radius-xl);--calendar-title-height: var(--luzmo-component-height-xl);--calendar-title-text-size: var(--luzmo-font-size-xl);--calendar-day-title-text-size: var(--luzmo-font-size-xl);--calendar-day-text-size-han: var(--luzmo-font-size-xl);--calendar-day-text-size: var(--luzmo-font-size-xl)}.table-cell span[role=button]{border-radius:var(--luzmo-calendar-day-width, var(--calendar-day-width))}';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const DAYS_PER_WEEK = 7;
+class LuzmoCalendar extends sizedMixin.SizedMixin(base.LuzmoElement, {
+  validSizes: ["s", "m", "l", "xl"],
+  noDefaultSize: true
+}) {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.labels = {
+      previous: "Previous",
+      next: "Next",
+      today: "Today",
+      selected: "Selected"
+    };
+    this.currentDate = this.today;
+    this.timeZone = date.getLocalTimeZone();
+    this.weekdays = [];
+    this.currentMonthDates = [];
+    this._isDateFocusIntent = false;
+    this.numberFormatter = new number.NumberFormatter(this._language);
+    this.setNumberFormatter();
+    this.setWeekdays();
+    this.setCurrentMonthDates();
+  }
+  /**
+   * The styles of the calendar
+   * @internal
+   */
+  static get styles() {
+    return [lit.unsafeCSS(styles)];
+  }
+  /**
+   * The language used to format the dates and weekdays.
+   * @internal
+   */
+  get _language() {
+    try {
+      if (this.language) {
+        const locale = new Intl.Locale(this.language);
+        return locale.language;
+      }
+      return "en";
+    } catch {
+      return "en";
+    }
+  }
+  /**
+   * The current date in the calendar
+   * @internal
+   */
+  get today() {
+    return date.today(this.timeZone);
+  }
+  set isDateFocusIntent(value) {
+    if (this._isDateFocusIntent === value) return;
+    this._isDateFocusIntent = value;
+    this.requestUpdate("isDateFocusIntent", !value);
+  }
+  /**
+   * @internal
+   */
+  get isDateFocusIntent() {
+    return this._isDateFocusIntent;
+  }
+  setDateFocusIntent() {
+    this.isDateFocusIntent = true;
+  }
+  resetDateFocusIntent() {
+    this.isDateFocusIntent = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("mousedown", this.resetDateFocusIntent);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("mousedown", this.resetDateFocusIntent);
+  }
+  /**
+   * Resets the component's value
+   */
+  clear() {
+    this._value = void 0;
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("language")) {
+      this.setNumberFormatter();
+      this.setWeekdays();
+      this.setCurrentMonthDates();
+    }
+    const changesMin = changedProperties.has("min");
+    const changesMax = changedProperties.has("max");
+    const changesValue = changedProperties.has("value");
+    const changesDates = changesMin || changesMax || changesValue;
+    if (changesDates) {
+      this.convertToCalendarDates();
+      this.checkDatePropsCompliance(changesMin || changesMax);
+      this.updateCurrentDate();
+    }
+    const previousDate = changedProperties.get("currentDate");
+    const changesMonth = changedProperties.has("currentDate") && (!previousDate || !date.isSameMonth(previousDate, this.currentDate));
+    if (changesMonth) {
+      this.setCurrentMonthDates();
+      this.setAttribute("aria-label", this.monthAndYear);
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("currentDate") && this.isDateFocusIntent)
+      this.focusCurrentDate();
+  }
+  /**
+   * Focuses the tabbable day element in the calendar represented by the current date.
+   * Useful while navigating through the calendar as the focus might be lost when the month changes.
+   */
+  focusCurrentDate() {
+    var _a;
+    const elementToFocus = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      'td span[tabindex="0"]'
+    );
+    if (elementToFocus) elementToFocus.focus();
+  }
+  convertToCalendarDates() {
+    this._min = this.min ? date.parseDate(this.min) : void 0;
+    this._max = this.max ? date.parseDate(this.max) : void 0;
+    this._value = this.value ? date.parseDate(this.value) : void 0;
+    const era = "AD";
+    this._min = this._min && date.toCalendarDate(this._min).set({ era });
+    this._max = this._max && date.toCalendarDate(this._max).set({ era });
+    this._value = this._value && date.toCalendarDate(this._value).set({ era });
+  }
+  /**
+   * Validates the component's date properties (min, max and value) compliance with one another.
+   * If the [min, max] constraint interval is invalid, both properties are reset.
+   * If the value is not within the [min, max] (valid) interval, it is reset.
+   *
+   * @param checkInterval - Whether to check the [min, max] interval
+   */
+  checkDatePropsCompliance(checkInterval) {
+    if (checkInterval && this._min && this._max) {
+      const isValidInterval = this._min.compare(this._max) < 0;
+      if (!isValidInterval) {
+        if (console.warn)
+          console.warn(
+            this,
+            `<${this.localName}> expects the 'min' to be less than 'max'. Please ensure that 'min' property's date is earlier than 'max' property's date.`
+          );
+        this._min = void 0;
+        this._max = void 0;
+      }
+    }
+    if (this._value && this.isNonCompliantDate(this._value)) {
+      if (console.warn)
+        console.warn(
+          this,
+          `<${this.localName}> expects the preselected value to comply with the min and max constraints. Please ensure that 'value' property's date is in between the dates for the 'min' and 'max' properties.`
+        );
+      this._value = void 0;
+    }
+  }
+  updateCurrentDate() {
+    if (this._value) {
+      this.currentDate = this._value;
+      return;
+    }
+    const isTodayNonCompliant = this.isNonCompliantDate(this.today);
+    if (isTodayNonCompliant) {
+      if (this._min) this.currentDate = this._min;
+      else if (this._max) this.currentDate = this._max;
+    } else this.currentDate = this.today;
+  }
+  /**
+   * Whether the date is non-compliant with the min and max constraints
+   */
+  isNonCompliantDate(date2) {
+    return Boolean(
+      this._min && date2.compare(this._min) < 0 || this._max && date2.compare(this._max) > 0
+    );
+  }
+  render() {
+    return lit.html` ${this.renderCalendarHeader()}${this.renderCalendarGrid()} `;
+  }
+  /**
+   * The month and year of the calendar
+   * @internal
+   */
+  get monthAndYear() {
+    return this.formatDate(this.currentDate, {
+      month: "long",
+      year: "numeric"
+    });
+  }
+  renderCalendarHeader() {
+    return lit.html`
+      <div class="header" @focusin=${this.resetDateFocusIntent}>
+        <h2
+          class="title"
+          aria-live="polite"
+          aria-atomic="true"
+          data-test-id="calendar-title"
+        >
+          ${this.monthAndYear}
+        </h2>
+
+        <luzmo-action-button
+          quiet
+          size="s"
+          label=${this.labels.previous}
+          class="prevMonth"
+          data-test-id="prev-btn"
+          ?disabled=${this.isPreviousMonthDisabled}
+          @click=${this.handlePreviousMonth}
+        >
+          <div slot="icon">
+            <slot name="prev-icon">
+              <luzmo-icon
+                block
+                .size=${this.size}
+                .icon=${icons.luzmoAngleLeft}
+              ></luzmo-icon>
+            </slot>
+          </div>
+        </luzmo-action-button>
+
+        <luzmo-action-button
+          quiet
+          size="s"
+          label=${this.labels.next}
+          class="nextMonth"
+          data-test-id="next-btn"
+          ?disabled=${this.isNextMonthDisabled}
+          @click=${this.handleNextMonth}
+        >
+          <div slot="icon">
+            <slot name="next-icon">
+              <luzmo-icon
+                block
+                .size=${this.size}
+                .icon=${icons.luzmoAngleRight}
+              ></luzmo-icon>
+            </slot>
+          </div>
+        </luzmo-action-button>
+      </div>
+    `;
+  }
+  /**
+   * Whether the previous month is disabled
+   * @internal
+   */
+  get isPreviousMonthDisabled() {
+    if (this.disabled) return true;
+    const currentMonthStart = date.startOfMonth(this.currentDate);
+    const previousMonthStart = currentMonthStart.subtract({ months: 1 });
+    return currentMonthStart.era !== previousMonthStart.era || date.isSameDay(currentMonthStart, previousMonthStart);
+  }
+  /**
+   * Whether the next month is disabled
+   * @internal
+   */
+  get isNextMonthDisabled() {
+    if (this.disabled) return true;
+    const currentMonthEnd = date.endOfMonth(this.currentDate);
+    const nextMonthEnd = currentMonthEnd.add({ months: 1 });
+    return currentMonthEnd.era !== nextMonthEnd.era || date.isSameDay(currentMonthEnd, nextMonthEnd);
+  }
+  handlePreviousMonth() {
+    let newCurrentDate = date.startOfMonth(this.currentDate).subtract({
+      months: 1
+    });
+    if (this._value && date.isSameMonth(newCurrentDate, this._value))
+      newCurrentDate = this._value;
+    else if (date.isSameMonth(newCurrentDate, this.today))
+      newCurrentDate = this.today;
+    this.currentDate = newCurrentDate;
+  }
+  handleNextMonth() {
+    let newCurrentDate = date.startOfMonth(this.currentDate).add({
+      months: 1
+    });
+    if (this._value && date.isSameMonth(newCurrentDate, this._value))
+      newCurrentDate = this._value;
+    else if (date.isSameMonth(newCurrentDate, this.today))
+      newCurrentDate = this.today;
+    this.currentDate = newCurrentDate;
+  }
+  renderCalendarGrid() {
+    return lit.html`
+      <table
+        role="grid"
+        aria-readonly="true"
+        aria-disabled=${this.disabled}
+        role="presentation"
+        class="table body"
+        @keydown=${this.handleKeydown}
+      >
+        ${this.renderCalendarTableHead()} ${this.renderCalendarTableBody()}
+      </table>
+    `;
+  }
+  renderCalendarTableHead() {
+    return lit.html`
+      <thead role="presentation">
+        <tr role="row">
+          ${this.renderWeekdayColumns()}
+        </tr>
+      </thead>
+    `;
+  }
+  renderWeekdayColumns() {
+    return this.weekdays.map((weekday) => this.renderWeekdayColumn(weekday));
+  }
+  renderWeekdayColumn(weekday) {
+    return lit.html`
+      <th role="columnheader" scope="col" class="table-cell">
+        <abbr class="dayOfWeek" title=${weekday.long}> ${weekday.narrow} </abbr>
+      </th>
+    `;
+  }
+  renderCalendarTableBody() {
+    return lit.html`
+      <tbody role="presentation">
+        ${this.renderCalendarWeeks()}
+      </tbody>
+    `;
+  }
+  renderCalendarWeeks() {
+    return this.currentMonthDates.map(
+      (week) => lit.html`
+        <tr role="row">
+          ${this.renderDatesInWeek(week)}
+        </tr>
+      `
+    );
+  }
+  renderDatesInWeek(week) {
+    return week.map((date2) => this.renderCalendarTableCell(date2));
+  }
+  parseDateCellProperties(calendarDate) {
+    const props = {
+      isOutsideMonth: false,
+      isSelected: false,
+      isToday: false,
+      isDisabled: false,
+      isTabbable: false
+    };
+    props.isOutsideMonth = calendarDate.month !== this.currentDate.month;
+    if (props.isOutsideMonth) return props;
+    props.isDisabled = this.disabled || this.isMinLimitReached(calendarDate) || this.isMaxLimitReached(calendarDate);
+    props.isToday = date.isSameDay(calendarDate, this.today);
+    if (props.isDisabled) return props;
+    props.isTabbable = date.isSameDay(calendarDate, this.currentDate);
+    props.isSelected = Boolean(
+      this._value && date.isSameDay(this._value, calendarDate)
+    );
+    return props;
+  }
+  renderCalendarTableCell(calendarDate) {
+    const { isOutsideMonth, isSelected, isToday, isDisabled, isTabbable } = this.parseDateCellProperties(calendarDate);
+    const dayClasses = {
+      date: true,
+      "is-outsideMonth": isOutsideMonth,
+      "is-selected": isSelected,
+      "is-today": isToday,
+      "is-disabled": isDisabled
+    };
+    let currentDayLabelPrefix = "";
+    if (isToday) currentDayLabelPrefix = `${this.labels.today}, `;
+    else if (isSelected) currentDayLabelPrefix = `${this.labels.selected}, `;
+    const currentDayLabel = currentDayLabelPrefix + this.formatDate(calendarDate, {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+    return lit.html`
+      <td role="gridcell" class="table-cell">
+        <span
+          role="button"
+          tabindex=${ifDefined_js.ifDefined(
+      isOutsideMonth ? void 0 : isTabbable ? "0" : "-1"
+    )}
+          aria-label=${currentDayLabel}
+          aria-disabled=${isOutsideMonth || isDisabled}
+          data-value=${calendarDate.toString()}
+          @mousedown=${this.handleDaySelect}
+        >
+          <span role="presentation" class=${classMap_js.classMap(dayClasses)}>
+            ${this.formatNumber(calendarDate.day)}
+          </span>
+        </span>
+      </td>
+    `;
+  }
+  handleKeydown(event) {
+    this.setDateFocusIntent();
+    switch (event.code) {
+      case "ArrowLeft": {
+        this.moveToPreviousDay();
+        break;
+      }
+      case "ArrowDown": {
+        this.moveToNextWeek();
+        break;
+      }
+      case "ArrowRight": {
+        this.moveToNextDay();
+        break;
+      }
+      case "ArrowUp": {
+        this.moveToPreviousWeek();
+        break;
+      }
+      case "Space":
+      case "Enter": {
+        this.handleDaySelect(event);
+        break;
+      }
+    }
+  }
+  handleDaySelect(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      return;
+    }
+    const cellButton = event.target.closest(
+      'span[role="button"]'
+    );
+    const dateString = cellButton && cellButton.dataset.value;
+    if (!dateString) return;
+    const calendarDateEngaged = date.parseDate(dateString);
+    const isAlreadySelected = this._value && date.isSameDay(this._value, calendarDateEngaged);
+    if (isAlreadySelected || this.isMinLimitReached(calendarDateEngaged) || this.isMaxLimitReached(calendarDateEngaged)) {
+      event.preventDefault();
+      return;
+    }
+    this._value = calendarDateEngaged;
+    this.value = calendarDateEngaged.toString();
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail: {
+          value: this.value
+        }
+      })
+    );
+  }
+  moveToPreviousDay() {
+    const previousDay = this.currentDate.subtract({ days: 1 });
+    if (this.canMoveBackToDate(previousDay)) this.currentDate = previousDay;
+  }
+  moveToNextDay() {
+    const nextDay = this.currentDate.add({ days: 1 });
+    if (this.canMoveForwardToDate(nextDay)) this.currentDate = nextDay;
+  }
+  moveToPreviousWeek() {
+    const previousWeek = this.currentDate.subtract({ weeks: 1 });
+    if (this.canMoveBackToDate(previousWeek)) {
+      this.currentDate = previousWeek;
+      return;
+    }
+    let dayToFocus = previousWeek.add({ days: 1 });
+    while (!this.canMoveBackToDate(dayToFocus)) {
+      dayToFocus = dayToFocus.add({ days: 1 });
+    }
+    this.currentDate = dayToFocus;
+  }
+  moveToNextWeek() {
+    const nextWeek = this.currentDate.add({ weeks: 1 });
+    if (this.canMoveForwardToDate(nextWeek)) {
+      this.currentDate = nextWeek;
+      return;
+    }
+    let dayToFocus = nextWeek.subtract({ days: 1 });
+    while (!this.canMoveForwardToDate(dayToFocus)) {
+      dayToFocus = dayToFocus.subtract({ days: 1 });
+    }
+    this.currentDate = dayToFocus;
+  }
+  canMoveBackToDate(previousDate) {
+    if (this.isMinLimitReached(previousDate)) return false;
+    return date.isSameMonth(this.currentDate, previousDate) || !this.isPreviousMonthDisabled;
+  }
+  canMoveForwardToDate(nextDate) {
+    if (this.isMaxLimitReached(nextDate)) return false;
+    return date.isSameMonth(this.currentDate, nextDate) || !this.isNextMonthDisabled;
+  }
+  /**
+   * Defines the array with data for the days of the week, starting on the first day of the week according to the
+   * defined location (Sunday, Monday, etc.)
+   */
+  setWeekdays() {
+    const weekStart = date.startOfWeek(this.currentDate, this._language);
+    this.weekdays = [...Array.from({ length: DAYS_PER_WEEK }).keys()].map(
+      (dayIndex) => {
+        const date2 = weekStart.add({ days: dayIndex });
+        return {
+          narrow: this.formatDate(date2, { weekday: "narrow" }),
+          long: this.formatDate(date2, { weekday: "long" })
+        };
+      }
+    );
+  }
+  /**
+   * Defines the 2D-array with the dates of the current month
+   */
+  setCurrentMonthDates() {
+    const numberOfWeeks = date.getWeeksInMonth(this.currentDate, this._language);
+    const newCurrentMonthDates = Array.from({
+      length: numberOfWeeks
+    });
+    for (const weekIndex of Array.from({ length: numberOfWeeks }).keys())
+      newCurrentMonthDates[weekIndex] = this.getDatesInWeek(
+        this.currentDate,
+        weekIndex
+      );
+    this.currentMonthDates = newCurrentMonthDates;
+  }
+  /**
+   * Returns an array with all days of the week in a specific month, corresponding to the given index,
+   * starting with the first day of the week according to the language
+   *
+   * @param weekIndex - The index of the week
+   */
+  getDatesInWeek(monthDate, weekIndex) {
+    const dates = [];
+    let date$1 = date.startOfWeek(
+      date.startOfMonth(monthDate).add({
+        weeks: weekIndex
+      }),
+      this._language
+    );
+    while (dates.length < DAYS_PER_WEEK) {
+      dates.push(date$1);
+      const nextDate = date$1.add({ days: 1 });
+      if (date.isSameDay(date$1, nextDate)) break;
+      date$1 = nextDate;
+    }
+    return dates;
+  }
+  isMinLimitReached(calendarDate) {
+    return Boolean(this._min && calendarDate.compare(this._min) < 0);
+  }
+  isMaxLimitReached(calendarDate) {
+    return Boolean(this._max && calendarDate.compare(this._max) > 0);
+  }
+  /**
+   * Formats a `CalendarDate` object using the current language and the provided date format options
+   *
+   * @param calendarDate - The `CalendarDate` object that will be formatted
+   * @param options - All date format options that will be used by the formatter
+   */
+  formatDate(calendarDate, options) {
+    return new date.DateFormatter(this._language, options).format(
+      calendarDate.toDate(this.timeZone)
+    );
+  }
+  setNumberFormatter() {
+    this.numberFormatter = new number.NumberFormatter(this._language);
+  }
+  formatNumber(number2) {
+    return this.numberFormatter.format(number2);
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoCalendar.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoCalendar.prototype, "min", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoCalendar.prototype, "max", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoCalendar.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoCalendar.prototype, "language", 2);
+__decorateClass([
+  decorators_js.property({ type: Object })
+], LuzmoCalendar.prototype, "labels", 2);
+__decorateClass([
+  decorators_js.state()
+], LuzmoCalendar.prototype, "currentDate", 2);
+__decorateClass([
+  decorators_js.state()
+], LuzmoCalendar.prototype, "_value", 2);
+__decorateClass([
+  decorators_js.state()
+], LuzmoCalendar.prototype, "_min", 2);
+__decorateClass([
+  decorators_js.state()
+], LuzmoCalendar.prototype, "_max", 2);
+__decorateClass([
+  decorators_js.state()
+], LuzmoCalendar.prototype, "weekdays", 2);
+__decorateClass([
+  decorators_js.state()
+], LuzmoCalendar.prototype, "currentMonthDates", 2);
+__decorateClass([
+  decorators_js.state()
+], LuzmoCalendar.prototype, "isDateFocusIntent", 1);
+if (!customElements.get("luzmo-calendar")) {
+  customElements.define("luzmo-calendar", LuzmoCalendar);
+}
+exports.LuzmoCalendar = LuzmoCalendar;