@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/calendar.js

@@ -0,0 +1,826 @@
+import { css as $, LitElement as Y, isServer as M, html as o, nothing as h } from "lit";
+import { property as u, state as v, customElement as V } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { sbbInputModalityDetector as k, isArrowKeyOrPageKeysPressed as F } from "./core/a11y.js";
+import { SbbConnectedAbortController as z, SbbLanguageController as R } from "./core/controllers.js";
+import { defaultDateAdapter as N, YEARS_PER_PAGE as l, DAYS_PER_ROW as y, MONTHS_PER_ROW as g, YEARS_PER_ROW as m } from "./core/datetime.js";
+import { isBreakpoint as A } from "./core/dom.js";
+import { EventEmitter as T } from "./core/eventing.js";
+import { i18nPreviousMonth as I, i18nNextMonth as O, i18nYearMonthSelection as S, i18nPreviousYear as C, i18nNextYear as W, i18nCalendarDateSelection as x, i18nPreviousYearRange as E, i18nNextYearRange as L } from "./core/i18n.js";
+import "./button/secondary-button.js";
+import "./icon.js";
+import "./screen-reader-only.js";
+const P = $`*,:before,:after{box-sizing:border-box}:host{--sbb-calendar-cell-size: 2.5rem;--sbb-calendar-hover-shift: .0625rem;--sbb-calendar-wide-cell-size: 4.375rem;--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);--sbb-calendar-header-color: var(--sbb-color-granite);--sbb-calendar-cell-background-color: transparent;--sbb-calendar-cell-padding: .125rem;--sbb-calendar-cell-color: var(--sbb-color-charcoal);--sbb-calendar-cell-selected-color: var(--sbb-color-white);--sbb-calendar-cell-selected-background-color: var(--sbb-color-charcoal);--sbb-calendar-cell-disabled-height: .09375rem;--sbb-calendar-cell-disabled-width: 1.59375rem;--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);--sbb-calendar-table-animation-shift: .00625rem;--sbb-calendar-table-animation-duration: .1ms;--sbb-calendar-table-column-spaces: 12;--sbb-calendar-control-view-change-height: 2.75rem;--sbb-calendar-control-view-change-color: var(--sbb-color-charcoal);--sbb-calendar-control-view-change-background: var(--sbb-color-white);display:block;width:max-content}@media (min-width: 22.5rem){:host{--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-wide-cell-size: 4.8125rem;--sbb-calendar-control-view-change-height: 3rem}}.sbb-calendar__wrapper{width:100%;display:block;transition-duration:var(--sbb-calendar-cell-transition-duration)}.sbb-calendar__controls{width:100%;display:inline-flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-calendar__controls-month{width:100%;display:flex;gap:var(--sbb-calendar-tables-gap)}#sbb-calendar__controls-previous,#sbb-calendar__controls-next{-webkit-tap-highlight-color:transparent}.sbb-calendar__controls-change-date{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);text-transform:capitalize;cursor:pointer;padding-inline:var(--sbb-spacing-fixed-5x) var(--sbb-spacing-fixed-2x);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-calendar-control-view-change-background);color:var(--sbb-calendar-control-view-change-color);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color,padding-block-end}.sbb-calendar__controls-change-date:disabled{--sbb-calendar-control-view-change-background: var(--sbb-color-milk);--sbb-calendar-control-view-change-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__controls-change-date:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x)}@media (any-hover: hover){.sbb-calendar__controls-change-date:not(:active,:disabled):hover{padding-block-end:var(--sbb-calendar-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-color-milk)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-container{display:flex;gap:var(--sbb-calendar-tables-gap);--sbb-calendar-min-width: calc(7 * var(--sbb-calendar-cell-size));--sbb-calendar-overflow: calc(100% - var(--sbb-calendar-min-width));--sbb-calendar-start-offset: min( 0px, -1 * (var(--sbb-calendar-overflow) / var(--sbb-calendar-table-column-spaces)) );--sbb-calendar-margin: var(--sbb-calendar-start-offset);margin-inline:var(--sbb-calendar-margin)}:host([data-wide]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 7 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) );--sbb-calendar-margin: calc(.5 * var(--sbb-calendar-start-offset))}.sbb-calendar__table{width:100%;border-collapse:collapse;height:max-content;animation-name:show;animation-duration:var(--sbb-calendar-table-animation-duration)}.sbb-calendar__table.sbb-calendar__table-hide{--sbb-calendar-cell-transition-duration: 0ms;animation-name:hide;animation-duration:var(--sbb-calendar-table-animation-duration)}:host(:not([data-wide])) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-calendar-header-color);width:var(--sbb-calendar-cell-size);padding:0;padding-block-end:var(--sbb-spacing-fixed-4x);text-align:center}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__cell{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);height:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-cell-color);cursor:pointer;position:relative;z-index:0}.sbb-calendar__cell:before{content:"";position:absolute;inset:var(--sbb-calendar-cell-padding);background-color:var(--sbb-calendar-cell-background-color);border-radius:50%;z-index:-1;transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color}@media (any-hover: hover){.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover{--sbb-calendar-cell-background-color: var(--sbb-color-milk);padding-block-end:var(--sbb-calendar-hover-shift)}}@media (any-hover: hover) and (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:active,:disabled):hover:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__cell:disabled{--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);cursor:unset}.sbb-calendar__cell:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active{--sbb-calendar-cell-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){.sbb-calendar__cell:not(.sbb-calendar__selected,:disabled):active:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}}.sbb-calendar__day{border-radius:50%;width:var(--sbb-calendar-cell-size)}.sbb-calendar__day:before{border-radius:50%}.sbb-calendar__pill{width:var(--sbb-calendar-wide-cell-size);border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__pill:before{border-radius:var(--sbb-border-radius-infinity)}.sbb-calendar__crossed-out:after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);position:absolute;background-color:var(--sbb-calendar-cell-disabled-color);top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.sbb-calendar__cell-current{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-calendar__selected{--sbb-calendar-cell-color: var(--sbb-calendar-cell-selected-color);--sbb-calendar-cell-background-color: var(--sbb-calendar-cell-selected-background-color)}@media (forced-colors: active){.sbb-calendar__selected{--sbb-calendar-cell-background-color: ButtonText !important}}@keyframes show{0%{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}to{opacity:1;transform:translateY(0)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}}`;
+var B = Object.defineProperty, K = Object.getOwnPropertyDescriptor, b = (e, t, a, r) => {
+  for (var s = r > 1 ? void 0 : r ? K(t, a) : t, i = e.length - 1, n; i >= 0; i--)
+    (n = e[i]) && (s = (r ? n(t, a, s) : n(s)) || s);
+  return r && s && B(t, a, s), s;
+};
+let c = class extends Y {
+  constructor() {
+    super(), this.wide = !1, this._now = null, this._dateAdapter = N, this._dateSelected = new T(
+      this,
+      c.events.dateSelected
+    ), this._activeDate = this.now, this._calendarView = "day", this._nextCalendarView = "day", this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._resetFocus = !1, this._initialized = !1, this._abort = new z(this), this._language = new R(this).withHandler(() => {
+      this._monthNames = this._dateAdapter.getMonthNames("long"), this._createMonthRows();
+    }), this._createMonthRows(), this._setWeekdays();
+  }
+  set min(e) {
+    this._min = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e));
+  }
+  get min() {
+    return this._min ?? null;
+  }
+  set max(e) {
+    this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e));
+  }
+  get max() {
+    return this._max ?? null;
+  }
+  set now(e) {
+    this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e));
+  }
+  get now() {
+    return this._now ?? this._dateAdapter.today();
+  }
+  set selected(e) {
+    this._selectedDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e)), this._selectedDate && (!this._isDayInRange(this._dateAdapter.toIso8601(this._selectedDate)) || this._dateFilter(this._selectedDate)) ? this._selected = this._dateAdapter.toIso8601(this._selectedDate) : this._selected = void 0;
+  }
+  get selected() {
+    return this._selectedDate ?? null;
+  }
+  set _wide(e) {
+    this.toggleAttribute("data-wide", e);
+  }
+  get _wide() {
+    return this.hasAttribute("data-wide");
+  }
+  /** A list of buttons corresponding to days, months or years depending on the view. */
+  get _cells() {
+    return Array.from(
+      this.shadowRoot.querySelectorAll(".sbb-calendar__cell") ?? []
+    );
+  }
+  get _dateFilter() {
+    return this.dateFilter ?? (() => !0);
+  }
+  /** Resets the active month according to the new state of the calendar. */
+  resetPosition() {
+    this._calendarView !== "day" && this._resetToDayView(), this._activeDate = this.selected ?? this.now, this._init();
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), this.resetPosition(), this.focus = () => {
+      this._resetFocus = !0, this._focusCell();
+    }, (e = globalThis.window) == null || e.addEventListener("resize", () => this._init(), {
+      passive: !0,
+      signal: this._abort.signal
+    });
+  }
+  willUpdate(e) {
+    super.willUpdate(e), this._initialized && e.has("wide") && this.resetPosition();
+  }
+  updated(e) {
+    super.updated(e), this._setTabIndex(), k.mostRecentModality === "keyboard" && this._focusCell();
+  }
+  /** Initializes the component. */
+  _init(e) {
+    if (!M) {
+      if (e && this._assignActiveDate(e), this._wide = A("medium") && this.wide, this._weeks = this._createWeekRows(this._activeDate), this._years = this._createYearRows(), this._nextMonthWeeks = [[]], this._nextMonthYears = [[]], this._wide) {
+        const t = this._dateAdapter.addCalendarMonths(this._activeDate, 1);
+        this._nextMonthWeeks = this._createWeekRows(t), this._nextMonthYears = this._createYearRows(l);
+      }
+      this._initialized = !0;
+    }
+  }
+  /** Focuses on a day cell prioritizing the selected day, the current day, and lastly, the first selectable day. */
+  _focusCell() {
+    var e;
+    this._resetFocus && ((e = this._getFirstFocusable()) == null || e.focus(), this._resetFocus = !1);
+  }
+  /** Creates the array of weekdays. */
+  _setWeekdays() {
+    const e = this._dateAdapter.getDayOfWeekNames("narrow"), a = this._dateAdapter.getDayOfWeekNames("long").map((s, i) => ({
+      long: s,
+      narrow: e[i]
+    })), r = this._dateAdapter.getFirstDayOfWeek();
+    this._weekdays = a.slice(r).concat(a.slice(0, r));
+  }
+  /** Creates the rows for each week. */
+  _createWeekRows(e) {
+    const t = this._dateAdapter.getNumDaysInMonth(e), a = this._dateAdapter.getDateNames(), r = [[]], s = this._dateAdapter.getFirstWeekOffset(e);
+    for (let i = 0, n = s; i < t; i++, n++) {
+      n === y && (r.push([]), n = 0);
+      const d = this._dateAdapter.createDate(
+        this._dateAdapter.getYear(e),
+        this._dateAdapter.getMonth(e),
+        i + 1
+      );
+      r[r.length - 1].push({
+        value: this._dateAdapter.toIso8601(d),
+        dayValue: a[i],
+        monthValue: String(this._dateAdapter.getMonth(d)),
+        yearValue: String(this._dateAdapter.getYear(d))
+      });
+    }
+    return r;
+  }
+  /** Creates the rows for the month selection view. */
+  _createMonthRows() {
+    const e = this._dateAdapter.getMonthNames("short"), t = new Array(12).fill(null).map(
+      (s, i) => ({
+        value: e[i],
+        longValue: this._monthNames[i],
+        monthValue: i + 1
+      })
+    ), a = 12 / g, r = [];
+    for (let s = 0; s < a; s++)
+      r.push(t.slice(g * s, g * (s + 1)));
+    this._months = r;
+  }
+  /** Creates the rows for the year selection view. */
+  _createYearRows(e = 0) {
+    const t = this._getStartValueYearView(), a = new Array(l).fill(0).map((i, n) => t + e + n), r = l / m, s = [];
+    for (let i = 0; i < r; i++)
+      s.push(a.slice(m * i, m * (i + 1)));
+    return s;
+  }
+  /**
+   * Calculates the first year that will be shown in the year selection panel.
+   * If `minDate` and `maxDate` are both null, the starting year is calculated as
+   * the multiple of YEARS_PER_PAGE closest to and less than activeDate,
+   * e.g., with `YEARS_PER_PAGE` = 24 and `activeDate` = 2020, the function will return 2016 (24 * 83),
+   * while with `activeDate` = 2000, the function will return 1992 (24 * 82).
+   * If `minDate` is not null, it returns the corresponding year; if `maxDate` is not null,
+   * it returns the corresponding year minus `YEARS_PER_PAGE`, so that the `maxDate` is the last rendered year.
+   * If both are not null, `maxDate` has priority over `minDate`.
+   */
+  _getStartValueYearView() {
+    let e = 0;
+    this.max ? e = this._dateAdapter.getYear(this.max) - l + 1 : this.min && (e = this._dateAdapter.getYear(this.min));
+    const t = this._dateAdapter.getYear(this._activeDate);
+    return t - ((t - e) % l + l) % l;
+  }
+  /** Checks if date is within the min-max range. */
+  _isDayInRange(e) {
+    if (!this._min && !this._max)
+      return !0;
+    const t = this._dateAdapter.isValid(this._min) && this._dateAdapter.compareDate(this._min, this._dateAdapter.deserialize(e)) > 0, a = this._dateAdapter.isValid(this._max) && this._dateAdapter.compareDate(this._max, this._dateAdapter.deserialize(e)) < 0;
+    return !(t || a);
+  }
+  _isMonthInRange(e) {
+    if (!this._min && !this._max)
+      return !0;
+    const t = this._dateAdapter.isValid(this._min) && this._dateAdapter.getYear(this._min) >= this._chosenYear && this._dateAdapter.getMonth(this._min) > e, a = this._dateAdapter.isValid(this._max) && this._dateAdapter.getYear(this._max) <= this._chosenYear && this._dateAdapter.getMonth(this._max) < e;
+    return !(t || a);
+  }
+  _isYearInRange(e) {
+    if (!this._min && !this._max)
+      return !0;
+    const t = this._dateAdapter.isValid(this._min) && this._dateAdapter.getYear(this._min) > e, a = this._dateAdapter.isValid(this._max) && this._dateAdapter.getYear(this._max) < e;
+    return !(t || a);
+  }
+  // Implementation adapted from https://github.com/angular/components/blob/main/src/material/datepicker/year-view.ts#L366
+  _isMonthFilteredOut(e) {
+    if (!this.dateFilter)
+      return !0;
+    const t = this._dateAdapter.createDate(this._chosenYear, e, 1);
+    for (let a = t; this._dateAdapter.getMonth(a) == e; a = this._dateAdapter.addCalendarDays(a, 1))
+      if (this.dateFilter(a))
+        return !0;
+    return !1;
+  }
+  // Implementation adapted from https://github.com/angular/components/blob/main/src/material/datepicker/multi-year-view.ts#L351
+  _isYearFilteredOut(e) {
+    if (!this.dateFilter)
+      return !0;
+    const t = this._dateAdapter.createDate(e, 1, 1);
+    for (let a = t; this._dateAdapter.getYear(a) == e; a = this._dateAdapter.addCalendarDays(a, 1))
+      if (this.dateFilter(a))
+        return !0;
+    return !1;
+  }
+  /** Emits the selected date and sets it internally. */
+  _selectDate(e) {
+    this._chosenMonth = void 0, this._chosenYear = void 0, this._selected !== e && (this._selected = e, this._dateSelected.emit(this._dateAdapter.deserialize(e)));
+  }
+  _assignActiveDate(e) {
+    if (this._min && this._dateAdapter.compareDate(this._min, e) > 0) {
+      this._activeDate = this._min;
+      return;
+    }
+    if (this._max && this._dateAdapter.compareDate(this._max, e) < 0) {
+      this._activeDate = this._max;
+      return;
+    }
+    this._activeDate = e;
+  }
+  /** Goes to the month identified by the shift. */
+  _goToDifferentMonth(e) {
+    this._init(this._dateAdapter.addCalendarMonths(this._activeDate, e));
+  }
+  _goToDifferentYear(e) {
+    this._chosenYear += e, this._activeDate = this._dateAdapter.createDate(
+      this._chosenYear,
+      this._dateAdapter.getMonth(this._activeDate),
+      this._dateAdapter.getDate(this._activeDate)
+    ), this._init();
+  }
+  _goToDifferentYearRange(e) {
+    this._init(this._dateAdapter.addCalendarYears(this._activeDate, e));
+  }
+  _prevDisabled(e) {
+    return this._min ? this._dateAdapter.compareDate(e, this._min) < 0 : !1;
+  }
+  _nextDisabled(e) {
+    return this._max ? this._dateAdapter.compareDate(e, this._max) > 0 : !1;
+  }
+  /** Checks if the "previous month" button should be disabled. */
+  _previousMonthDisabled() {
+    const e = this._dateAdapter.addCalendarDays(
+      this._activeDate,
+      this._dateAdapter.getDate(this._activeDate) * -1
+    );
+    return this._prevDisabled(e);
+  }
+  /** Checks if the "next month" button should be disabled. */
+  _nextMonthDisabled() {
+    let e = this._dateAdapter.addCalendarMonths(this._activeDate, this._wide ? 2 : 1);
+    return e = this._dateAdapter.createDate(
+      this._dateAdapter.getYear(e),
+      this._dateAdapter.getMonth(e),
+      1
+    ), this._nextDisabled(e);
+  }
+  _previousYearDisabled() {
+    const e = this._dateAdapter.createDate(
+      this._dateAdapter.getYear(this._activeDate) - 1,
+      12,
+      31
+    );
+    return this._prevDisabled(e);
+  }
+  _nextYearDisabled() {
+    const e = this._dateAdapter.createDate(
+      this._dateAdapter.getYear(this._activeDate) + 1,
+      1,
+      1
+    );
+    return this._nextDisabled(e);
+  }
+  _previousYearRangeDisabled() {
+    const e = this._dateAdapter.createDate(this._years[0][0] - 1, 12, 31);
+    return this._prevDisabled(e);
+  }
+  _nextYearRangeDisabled() {
+    const e = A("medium") && this.wide ? this._nextMonthYears : this._years, t = e[e.length - 1], a = t[t.length - 1], r = this._dateAdapter.createDate(a + 1, 1, 1);
+    return this._nextDisabled(r);
+  }
+  _handleTableBlur(e) {
+    (e == null ? void 0 : e.localName) !== "button" && this._setTabIndex();
+  }
+  _setTabIndex() {
+    Array.from(
+      this.shadowRoot.querySelectorAll('.sbb-calendar__cell[tabindex="0"]') ?? []
+    ).forEach((t) => t.tabIndex = -1);
+    const e = this._getFirstFocusable();
+    e && (e.tabIndex = 0);
+  }
+  _getFirstFocusable() {
+    const e = this._selected ? this._dateAdapter.deserialize(this._selected) : this.now;
+    let t = this.shadowRoot.querySelector(".sbb-calendar__selected") ?? this.shadowRoot.querySelector(
+      `[data-day="${this._dateAdapter.getDate(e)} ${this._dateAdapter.getMonth(
+        e
+      )} ${this._dateAdapter.getYear(e)}"]`
+    ) ?? this.shadowRoot.querySelector(`[data-month="${this._dateAdapter.getMonth(e)}"]`) ?? this.shadowRoot.querySelector(`[data-year="${this._dateAdapter.getYear(e)}"]`);
+    return (!t || t != null && t.disabled) && (t = this.shadowRoot.querySelector(".sbb-calendar__cell:not([disabled])")), t || null;
+  }
+  _handleKeyboardEvent(e, t) {
+    F(e) && e.preventDefault();
+    const a = this._cells, r = a.findIndex((n) => n === e.target), s = this._navigateByKeyboard(e, r, a, t), i = this.shadowRoot.activeElement;
+    s !== i && (s.tabIndex = 0, s == null || s.focus(), i.tabIndex = -1);
+  }
+  /**
+   * Gets the index of the element to move to, based on a list of elements (which can be potentially disabled),
+   * the keyboard input and the position of the current element in the list.
+   * In the day view, the `day?: Day` parameter is mandatory for calculation,
+   * while in month and year view it's not due to the fixed amount of rendered cells.
+   */
+  _navigateByKeyboard(e, t, a, r) {
+    const {
+      elementIndexForWideMode: s,
+      offsetForWideMode: i,
+      lastElementIndexForWideMode: n,
+      verticalOffset: d
+    } = this._calculateParametersForKeyboardNavigation(
+      a,
+      t,
+      r
+    );
+    switch (e.key) {
+      case "ArrowUp":
+        return this._findNext(a, t, -d);
+      case "ArrowDown":
+        return this._findNext(a, t, d);
+      case "ArrowLeft":
+        return this._findNext(a, t, -1);
+      case "ArrowRight":
+        return this._findNext(a, t, 1);
+      case "Home":
+        return this._findFirst(a, i);
+      case "PageUp":
+        return this._findFirstOnColumn(
+          a,
+          s,
+          i,
+          d
+        );
+      case "PageDown":
+        return this._findLastOnColumn(a, t, n, d);
+      case "End":
+        return this._findLast(a, n - 1);
+      default:
+        return a[t];
+    }
+  }
+  /**
+   * Calculates the parameter needed in keyboard navigation.
+   * Since three views are now available, the function creates and returns the correct parameters for each of them
+   * by considering the number of cells per each row and the correction for the wide mode.
+   * @param cells The array of rendered table cells; they are buttons that can represent days, months or years.
+   * @param index The starting element's index in the cell array.
+   * @param day (optional) Only in the day view, the day represented by the starting cell.
+   */
+  _calculateParametersForKeyboardNavigation(e, t, a) {
+    switch (this._calendarView) {
+      case "day": {
+        const r = +a.dayValue - 1;
+        return {
+          verticalOffset: y,
+          elementIndexForWideMode: r,
+          offsetForWideMode: t - r,
+          lastElementIndexForWideMode: t === r ? this._dateAdapter.getNumDaysInMonth(
+            this._dateAdapter.addCalendarMonths(
+              this._dateAdapter.deserialize(a.value),
+              -1
+            )
+          ) : e.length
+        };
+      }
+      case "month":
+        return {
+          verticalOffset: g,
+          elementIndexForWideMode: t,
+          offsetForWideMode: 0,
+          lastElementIndexForWideMode: 12
+        };
+      case "year": {
+        const r = Math.trunc(t / l) * l, s = r === 0 ? t : t - l;
+        return {
+          verticalOffset: m,
+          elementIndexForWideMode: s,
+          offsetForWideMode: t - s,
+          lastElementIndexForWideMode: r === 0 ? l : l * 2
+        };
+      }
+    }
+  }
+  /**
+   * Gets the next element of the provided array starting from `index` by adding `delta`.
+   * If the found element is disabled, it continues adding `delta` until it finds an enabled one in the array bounds.
+   */
+  _findNext(e, t, a) {
+    var s;
+    let r = t + a;
+    for (; r < e.length && ((s = e[r]) != null && s.disabled); )
+      r += a;
+    return e[r] ?? e[t];
+  }
+  /** Find the first enabled element in the provided array. */
+  _findFirst(e, t) {
+    return e[t].disabled ? this._findNext(e, t, 1) : e[t];
+  }
+  /** Find the last enabled element in the provided array. */
+  _findLast(e, t) {
+    return e[t].disabled ? this._findNext(e, t, -1) : e[t];
+  }
+  /** Find the first enabled element in the same column of the provided array. */
+  _findFirstOnColumn(e, t, a, r) {
+    const s = t % r + a;
+    return e[s].disabled ? this._findNext(e, s, r) : e[s];
+  }
+  /** Find the last enabled element in the same column of the provided array. */
+  _findLastOnColumn(e, t, a, r) {
+    const s = t + Math.trunc((a - t - 1) / r) * r;
+    return e[s].disabled ? this._findNext(e, s, -r) : e[s];
+  }
+  _resetToDayView() {
+    this._resetFocus = !0, this._activeDate = this.selected ?? this.now, this._chosenYear = void 0, this._chosenMonth = void 0, this._nextCalendarView = "day", this._removeTable();
+  }
+  /** Render the view for the day selection. */
+  _renderDayView() {
+    const e = this._wide ? this._dateAdapter.addCalendarMonths(this._activeDate, 1) : void 0;
+    return o`
+      <div class="sbb-calendar__controls">
+        ${this._getArrow(
+      "left",
+      () => this._goToDifferentMonth(-1),
+      I[this._language.current],
+      this._previousMonthDisabled()
+    )}
+        <div class="sbb-calendar__controls-month">
+          ${this._createLabelForDayView(this._activeDate)}
+          ${this._wide ? this._createLabelForDayView(e) : h}
+          <sbb-screen-reader-only role="status">
+            ${this._createAriaLabelForDayView(this._activeDate, e)}
+          </sbb-screen-reader-only>
+        </div>
+        ${this._getArrow(
+      "right",
+      () => this._goToDifferentMonth(1),
+      O[this._language.current],
+      this._nextMonthDisabled()
+    )}
+      </div>
+      <div class="sbb-calendar__table-container sbb-calendar__table-day-view">
+        ${this._createDayTable(this._weeks)}
+        ${this._wide ? this._createDayTable(this._nextMonthWeeks) : h}
+      </div>
+    `;
+  }
+  /** Creates the label with the month for the daily view. */
+  _createLabelForDayView(e) {
+    const t = `${this._monthNames[this._dateAdapter.getMonth(e) - 1]} ${this._dateAdapter.getYear(e)}`;
+    return o`
+      <button
+        type="button"
+        id="sbb-calendar__date-selection"
+        class="sbb-calendar__controls-change-date"
+        aria-label="${S[this._language.current]} ${t}"
+        @click=${() => {
+      this._resetFocus = !0, this._nextCalendarView = "year", this._removeTable();
+    }}
+      >
+        ${t}
+        <sbb-icon name="chevron-small-down-small"></sbb-icon>
+      </button>
+    `;
+  }
+  /** Creates the aria-label for the daily view. */
+  _createAriaLabelForDayView(...e) {
+    let t = "";
+    for (const a of e)
+      a && (t += `${this._monthNames[this._dateAdapter.getMonth(a) - 1]} ${this._dateAdapter.getYear(a)} `);
+    return t;
+  }
+  /** Creates the calendar table for the daily view. */
+  _createDayTable(e) {
+    return o`
+      <table
+        class="sbb-calendar__table"
+        @focusout=${(t) => this._handleTableBlur(t.relatedTarget)}
+        @animationend=${(t) => this._tableAnimationEnd(t)}
+      >
+        <thead class="sbb-calendar__table-header">
+          <tr class="sbb-calendar__table-header-row">
+            ${this._createDayTableHeader()}
+          </tr>
+        </thead>
+        <tbody class="sbb-calendar__table-body">
+          ${this._createDayTableBody(e)}
+        </tbody>
+      </table>
+    `;
+  }
+  /** Creates the table header with the month header cells. */
+  _createDayTableHeader() {
+    return this._weekdays.map(
+      (e) => o`
+        <th class="sbb-calendar__table-header">
+          <sbb-screen-reader-only>${e.long}</sbb-screen-reader-only>
+          <span aria-hidden="true">${e.narrow}</span>
+        </th>
+      `
+    );
+  }
+  /** Creates the table body with the day cells. For the first row, it also considers the possible day's offset. */
+  _createDayTableBody(e) {
+    const t = this._dateAdapter.toIso8601(this.now);
+    return e.map((a, r) => {
+      const s = y - a.length;
+      return r === 0 && s ? o`
+          <tr>
+            ${[...Array(s).keys()].map(
+        () => o`<td
+                  class="sbb-calendar__table-data"
+                  data-day=${`0 ${a[0].monthValue} ${a[0].yearValue}`}
+                ></td>`
+      )}
+            ${this._createDayCells(a, t)}
+          </tr>
+        ` : o`<tr>
+        ${this._createDayCells(a, t)}
+      </tr>`;
+    });
+  }
+  /** Creates the cells for the daily view. */
+  _createDayCells(e, t) {
+    return e.map((a) => {
+      const r = !this._isDayInRange(a.value), s = !this._dateFilter(this._dateAdapter.deserialize(a.value)), i = !!this._selected && a.value === this._selected, n = `${a.dayValue} ${a.monthValue} ${a.yearValue}`, d = a.value === t;
+      return o`
+        <td
+          class=${p({
+        "sbb-calendar__table-data": !0,
+        "sbb-calendar__table-data-selected": i
+      })}
+        >
+          <button
+            class=${p({
+        "sbb-calendar__cell": !0,
+        "sbb-calendar__day": !0,
+        "sbb-calendar__cell-current": d,
+        "sbb-calendar__selected": i,
+        "sbb-calendar__crossed-out": !r && s
+      })}
+            @click=${() => this._selectDate(a.value)}
+            ?disabled=${r || s}
+            aria-label=${this._dateAdapter.getAccessibilityFormatDate(a.value)}
+            aria-pressed=${i}
+            aria-disabled=${r || s}
+            aria-current=${d ? "date" : h}
+            data-day=${n || h}
+            tabindex="-1"
+            @keydown=${(_) => this._handleKeyboardEvent(_, a)}
+            sbb-popover-close
+          >
+            ${a.dayValue}
+          </button>
+        </td>
+      `;
+    });
+  }
+  /** Render the view for the month selection. */
+  _renderMonthView() {
+    return o`
+      <div class="sbb-calendar__controls">
+        ${this._getArrow(
+      "left",
+      () => this._goToDifferentYear(-1),
+      C[this._language.current],
+      this._previousYearDisabled()
+    )}
+        <div class="sbb-calendar__controls-month">${this._createLabelForMonthView()}</div>
+        ${this._getArrow(
+      "right",
+      () => this._goToDifferentYear(1),
+      W[this._language.current],
+      this._nextYearDisabled()
+    )}
+      </div>
+      <div class="sbb-calendar__table-container sbb-calendar__table-month-view">
+        ${this._createMonthTable(this._months, this._chosenYear)}
+        ${this._wide ? this._createMonthTable(this._months, this._chosenYear + 1, !0) : h}
+      </div>
+    `;
+  }
+  /** Creates the label with the year for the monthly view. */
+  _createLabelForMonthView() {
+    return o` <button
+        type="button"
+        id="sbb-calendar__month-selection"
+        class="sbb-calendar__controls-change-date"
+        aria-label=${`${x[this._language.current]} ${this._chosenYear}`}
+        @click=${() => this._resetToDayView()}
+      >
+        ${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` : h}
+        <sbb-icon name="chevron-small-up-small"></sbb-icon>
+      </button>
+      <sbb-screen-reader-only role="status"> ${this._chosenYear} </sbb-screen-reader-only>`;
+  }
+  /** Creates the table for the month selection view. */
+  _createMonthTable(e, t, a = !1) {
+    return o`
+      <table
+        class="sbb-calendar__table"
+        @animationend=${(r) => this._tableAnimationEnd(r)}
+      >
+        ${this._wide ? o`<thead class="sbb-calendar__table-header" aria-hidden="true">
+              <tr class="sbb-calendar__table-header-row">
+                <th class="sbb-calendar__table-header" colspan=${g}>${t}</th>
+              </tr>
+            </thead>` : h}
+        <tbody class="sbb-calendar__table-body">
+          ${e.map(
+      (r) => o`
+              <tr>
+                ${r.map((s) => {
+        const i = !this._isMonthInRange(s.monthValue), n = !this._isMonthFilteredOut(s.monthValue), d = this._selected ? this._dateAdapter.getMonth(this._dateAdapter.deserialize(this._selected)) : void 0, _ = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, f = !!this._selected && t === _ && s.monthValue === d, w = t === this._dateAdapter.getYear(this.now) && this._dateAdapter.getMonth(this.now) === s.monthValue;
+        return o` <td
+                    class=${p({
+          "sbb-calendar__table-data": !0,
+          "sbb-calendar__table-month": !0
+        })}
+                  >
+                    <button
+                      class=${p({
+          "sbb-calendar__cell": !0,
+          "sbb-calendar__pill": !0,
+          "sbb-calendar__cell-current": w,
+          "sbb-calendar__crossed-out": !i && n,
+          "sbb-calendar__selected": f
+        })}
+                      @click=${() => this._onMonthSelection(s.monthValue, t, a)}
+                      ?disabled=${i || n}
+                      aria-label=${`${s.longValue} ${this._chosenYear}`}
+                      aria-pressed=${f}
+                      aria-disabled=${String(i || n)}
+                      tabindex="-1"
+                      data-month=${s.monthValue || h}
+                      @keydown=${(D) => this._handleKeyboardEvent(D)}
+                    >
+                      ${s.value}
+                    </button>
+                  </td>`;
+      })}
+              </tr>
+            `
+    )}
+        </tbody>
+      </table>
+    `;
+  }
+  /** Select the month and change the view to day selection. */
+  _onMonthSelection(e, t, a) {
+    this._chosenMonth = a ? e + 1 : e, this._nextCalendarView = "day", this._init(
+      this._dateAdapter.createDate(
+        t,
+        this._chosenMonth,
+        this._dateAdapter.getDate(this._activeDate)
+      )
+    ), this._removeTable();
+  }
+  /** Render the view for the year selection. */
+  _renderYearView() {
+    return o`
+      <div class="sbb-calendar__controls">
+        ${this._getArrow(
+      "left",
+      () => this._goToDifferentYearRange(-l),
+      E(l)[this._language.current],
+      this._previousYearRangeDisabled()
+    )}
+        <div class="sbb-calendar__controls-month">${this._createLabelForYearView()}</div>
+        ${this._getArrow(
+      "right",
+      () => this._goToDifferentYearRange(l),
+      L(l)[this._language.current],
+      this._nextYearRangeDisabled()
+    )}
+      </div>
+      <div class="sbb-calendar__table-container sbb-calendar__table-year-view">
+        ${this._createYearTable(this._years)}
+        ${this._wide ? this._createYearTable(this._nextMonthYears, !0) : h}
+      </div>
+    `;
+  }
+  /** Creates the button arrow for all the views. */
+  _getArrow(e, t, a, r) {
+    return o`<sbb-secondary-button
+      size="m"
+      icon-name="chevron-small-${e}-small"
+      aria-label=${a}
+      @click=${t}
+      ?disabled=${r}
+      id="sbb-calendar__controls-${e === "left" ? "previous" : "next"}"
+    ></sbb-secondary-button>`;
+  }
+  /** Creates the label with the year range for the yearly view. */
+  _createLabelForYearView() {
+    const e = this._years.flat()[0], t = (A("medium") && this.wide ? this._nextMonthYears : this._years).flat(), a = t[t.length - 1], r = `${e} - ${a}`;
+    return o`
+      <button
+        type="button"
+        id="sbb-calendar__year-selection"
+        class="sbb-calendar__controls-change-date"
+        aria-label="${x[this._language.current]} ${r}"
+        @click=${() => this._resetToDayView()}
+      >
+        ${r}
+        <sbb-icon name="chevron-small-up-small"></sbb-icon>
+      </button>
+      <sbb-screen-reader-only role="status"> ${r} </sbb-screen-reader-only>
+    `;
+  }
+  /** Creates the table for the year selection view. */
+  _createYearTable(e, t = !1) {
+    const a = this.now;
+    return o` <table
+      class="sbb-calendar__table"
+      @animationend=${(r) => this._tableAnimationEnd(r)}
+    >
+      <tbody class="sbb-calendar__table-body">
+        ${e.map(
+      (r) => o` <tr>
+              ${r.map((s) => {
+        const i = !this._isYearInRange(s), n = !this._isYearFilteredOut(s), d = this._selected ? this._dateAdapter.getYear(this._dateAdapter.deserialize(this._selected)) : void 0, _ = !!this._selected && s === d, f = this._dateAdapter.getYear(a) === s;
+        return o` <td class="sbb-calendar__table-data sbb-calendar__table-year">
+                  <button
+                    class=${p({
+          "sbb-calendar__cell": !0,
+          "sbb-calendar__pill": !0,
+          "sbb-calendar__cell-current": f,
+          "sbb-calendar__crossed-out": !i && n,
+          "sbb-calendar__selected": _
+        })}
+                    @click=${() => this._onYearSelection(s, t)}
+                    ?disabled=${i || n}
+                    aria-label=${s}
+                    aria-pressed=${_}
+                    aria-disabled=${String(i || n)}
+                    tabindex="-1"
+                    data-year=${s || h}
+                    @keydown=${(w) => this._handleKeyboardEvent(w)}
+                  >
+                    ${s}
+                  </button>
+                </td>`;
+      })}
+            </tr>`
+    )}
+      </tbody>
+    </table>`;
+  }
+  /** Select the year and change the view to month selection. */
+  _onYearSelection(e, t) {
+    this._chosenYear = t ? e - 1 : e, this._nextCalendarView = "month", this._assignActiveDate(
+      this._dateAdapter.createDate(
+        this._chosenYear,
+        this._dateAdapter.getMonth(this._activeDate),
+        this._dateAdapter.getDate(this._activeDate)
+      )
+    ), this._removeTable();
+  }
+  get _getView() {
+    switch (this._calendarView) {
+      case "year":
+        return this._renderYearView();
+      case "month":
+        return this._renderMonthView();
+      case "day":
+      default:
+        return this._renderDayView();
+    }
+  }
+  _tableAnimationEnd(e) {
+    const t = e.target;
+    e.animationName === "hide" ? (t.classList.remove("sbb-calendar__table-hide"), this._resetFocus = !0, this._calendarView = this._nextCalendarView) : e.animationName === "show" && this.removeAttribute("data-transition");
+  }
+  _removeTable() {
+    this.toggleAttribute("data-transition", !0), this.shadowRoot.querySelectorAll("table").forEach(
+      (e) => e.classList.toggle("sbb-calendar__table-hide")
+    );
+  }
+  render() {
+    return o`<div class="sbb-calendar__wrapper">${this._getView}</div>`;
+  }
+};
+c.styles = P;
+c.events = {
+  dateSelected: "dateSelected"
+};
+b([
+  u({ type: Boolean })
+], c.prototype, "wide", 2);
+b([
+  u()
+], c.prototype, "min", 1);
+b([
+  u()
+], c.prototype, "max", 1);
+b([
+  u()
+], c.prototype, "now", 1);
+b([
+  u()
+], c.prototype, "selected", 1);
+b([
+  u({ attribute: "date-filter" })
+], c.prototype, "dateFilter", 2);
+b([
+  v()
+], c.prototype, "_activeDate", 2);
+b([
+  v()
+], c.prototype, "_selected", 2);
+b([
+  v()
+], c.prototype, "_wide", 1);
+b([
+  v()
+], c.prototype, "_calendarView", 2);
+c = b([
+  V("sbb-calendar")
+], c);
+export {
+  c as SbbCalendarElement
+};