@sbb-esta/lyne-elements 0.0.0 → 0.52.1

package/calendar.js

@@ -0,0 +1,826 @@
+import { css as M, LitElement as z, isServer as Y, html as l, nothing as h } from "lit";
+import { property as f, state as p, customElement as D } from "lit/decorators.js";
+import { classMap as g } from "lit/directives/class-map.js";
+import { sbbInputModalityDetector as A, isArrowKeyOrPageKeysPressed as V } from "./core/a11y.js";
+import { SbbConnectedAbortController as O, SbbLanguageController as R } from "./core/controllers.js";
+import { defaultDateAdapter as I, YEARS_PER_PAGE as o, DAYS_PER_ROW as y, MONTHS_PER_ROW as _, YEARS_PER_ROW as v } from "./core/datetime.js";
+import { isBreakpoint as $ } from "./core/dom.js";
+import { EventEmitter as S } from "./core/eventing.js";
+import { i18nPreviousMonth as F, i18nNextMonth as W, i18nYearMonthSelection as N, i18nPreviousYear as E, i18nNextYear as P, i18nCalendarDateSelection as x, i18nPreviousYearRange as C, i18nNextYearRange as q } from "./core/i18n.js";
+import "./button/secondary-button.js";
+import "./icon.js";
+import "./screen-reader-only.js";
+const L = M`*,: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, j = Object.getOwnPropertyDescriptor, d = (t, e, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? j(e, a) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (s = (i ? n(e, a, s) : n(s)) || s);
+  return i && s && B(e, a, s), s;
+};
+let c = class extends z {
+  constructor() {
+    super(), this.wide = !1, this.B = null, this.a = I, this.W = new S(
+      this,
+      c.events.dateSelected
+    ), this.b = this.now, this.q = "day", this.o = "day", this.F = [], this.r = this.a.getMonthNames("long"), this.l = !1, this.G = !1, this.Y = new O(this), this.h = new R(this).withHandler(() => {
+      this.r = this.a.getMonthNames("long"), this.H();
+    }), this.H(), this.Z();
+  }
+  set min(t) {
+    this.c = this.a.getValidDateOrNull(this.a.deserialize(t));
+  }
+  get min() {
+    return this.c ?? null;
+  }
+  set max(t) {
+    this.d = this.a.getValidDateOrNull(this.a.deserialize(t));
+  }
+  get max() {
+    return this.d ?? null;
+  }
+  set now(t) {
+    this.B = this.a.getValidDateOrNull(this.a.deserialize(t));
+  }
+  get now() {
+    return this.B ?? this.a.today();
+  }
+  set selected(t) {
+    this.j = this.a.getValidDateOrNull(this.a.deserialize(t)), this.j && (!this.C(this.a.toIso8601(this.j)) || this.D(this.j)) ? this.e = this.a.toIso8601(this.j) : this.e = void 0;
+  }
+  get selected() {
+    return this.j ?? null;
+  }
+  set g(t) {
+    this.toggleAttribute("data-wide", t);
+  }
+  get g() {
+    return this.hasAttribute("data-wide");
+  }
+  /** A list of buttons corresponding to days, months or years depending on the view. */
+  get X() {
+    return Array.from(
+      this.shadowRoot.querySelectorAll(".sbb-calendar__cell") ?? []
+    );
+  }
+  get D() {
+    return this.dateFilter ?? (() => !0);
+  }
+  /** Resets the active month according to the new state of the calendar. */
+  resetPosition() {
+    this.q !== "day" && this.w(), this.b = this.selected ?? this.now, this.m();
+  }
+  connectedCallback() {
+    var t;
+    super.connectedCallback(), this.resetPosition(), this.focus = () => {
+      this.l = !0, this.I();
+    }, (t = globalThis.window) == null || t.addEventListener("resize", () => this.m(), {
+      passive: !0,
+      signal: this.Y.signal
+    });
+  }
+  willUpdate(t) {
+    super.willUpdate(t), this.G && t.has("wide") && this.resetPosition();
+  }
+  updated(t) {
+    super.updated(t), this.J(), A.mostRecentModality === "keyboard" && this.I();
+  }
+  /** Initializes the component. */
+  m(t) {
+    if (!Y) {
+      if (t && this.K(t), this.g = $("medium") && this.wide, this.F = this.L(this.b), this.k = this.M(), this.v = [[]], this.p = [[]], this.g) {
+        const e = this.a.addCalendarMonths(this.b, 1);
+        this.v = this.L(e), this.p = this.M(o);
+      }
+      this.G = !0;
+    }
+  }
+  /** Focuses on a day cell prioritizing the selected day, the current day, and lastly, the first selectable day. */
+  I() {
+    var t;
+    this.l && ((t = this.N()) == null || t.focus(), this.l = !1);
+  }
+  /** Creates the array of weekdays. */
+  Z() {
+    const t = this.a.getDayOfWeekNames("narrow"), a = this.a.getDayOfWeekNames("long").map((s, r) => ({
+      long: s,
+      narrow: t[r]
+    })), i = this.a.getFirstDayOfWeek();
+    this.E = a.slice(i).concat(a.slice(0, i));
+  }
+  /** Creates the rows for each week. */
+  L(t) {
+    const e = this.a.getNumDaysInMonth(t), a = this.a.getDateNames(), i = [[]], s = this.a.getFirstWeekOffset(t);
+    for (let r = 0, n = s; r < e; r++, n++) {
+      n === y && (i.push([]), n = 0);
+      const b = this.a.createDate(
+        this.a.getYear(t),
+        this.a.getMonth(t),
+        r + 1
+      );
+      i[i.length - 1].push({
+        value: this.a.toIso8601(b),
+        dayValue: a[r],
+        monthValue: String(this.a.getMonth(b)),
+        yearValue: String(this.a.getYear(b))
+      });
+    }
+    return i;
+  }
+  /** Creates the rows for the month selection view. */
+  H() {
+    const t = this.a.getMonthNames("short"), e = new Array(12).fill(null).map(
+      (s, r) => ({
+        value: t[r],
+        longValue: this.r[r],
+        monthValue: r + 1
+      })
+    ), a = 12 / _, i = [];
+    for (let s = 0; s < a; s++)
+      i.push(e.slice(_ * s, _ * (s + 1)));
+    this.u = i;
+  }
+  /** Creates the rows for the year selection view. */
+  M(t = 0) {
+    const e = this._(), a = new Array(o).fill(0).map((r, n) => e + t + n), i = o / v, s = [];
+    for (let r = 0; r < i; r++)
+      s.push(a.slice(v * r, v * (r + 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`.
+   */
+  _() {
+    let t = 0;
+    this.max ? t = this.a.getYear(this.max) - o + 1 : this.min && (t = this.a.getYear(this.min));
+    const e = this.a.getYear(this.b);
+    return e - ((e - t) % o + o) % o;
+  }
+  /** Checks if date is within the min-max range. */
+  C(t) {
+    if (!this.c && !this.d)
+      return !0;
+    const e = this.a.isValid(this.c) && this.a.compareDate(this.c, this.a.deserialize(t)) > 0, a = this.a.isValid(this.d) && this.a.compareDate(this.d, this.a.deserialize(t)) < 0;
+    return !(e || a);
+  }
+  $(t) {
+    if (!this.c && !this.d)
+      return !0;
+    const e = this.a.isValid(this.c) && this.a.getYear(this.c) >= this.f && this.a.getMonth(this.c) > t, a = this.a.isValid(this.d) && this.a.getYear(this.d) <= this.f && this.a.getMonth(this.d) < t;
+    return !(e || a);
+  }
+  aa(t) {
+    if (!this.c && !this.d)
+      return !0;
+    const e = this.a.isValid(this.c) && this.a.getYear(this.c) > t, a = this.a.isValid(this.d) && this.a.getYear(this.d) < t;
+    return !(e || a);
+  }
+  // Implementation adapted from https://github.com/angular/components/blob/main/src/material/datepicker/year-view.ts#L366
+  ba(t) {
+    if (!this.dateFilter)
+      return !0;
+    const e = this.a.createDate(this.f, t, 1);
+    for (let a = e; this.a.getMonth(a) == t; a = this.a.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
+  ca(t) {
+    if (!this.dateFilter)
+      return !0;
+    const e = this.a.createDate(t, 1, 1);
+    for (let a = e; this.a.getYear(a) == t; a = this.a.addCalendarDays(a, 1))
+      if (this.dateFilter(a))
+        return !0;
+    return !1;
+  }
+  /** Emits the selected date and sets it internally. */
+  da(t) {
+    this.s = void 0, this.f = void 0, this.e !== t && (this.e = t, this.W.emit(this.a.deserialize(t)));
+  }
+  K(t) {
+    if (this.c && this.a.compareDate(this.c, t) > 0) {
+      this.b = this.c;
+      return;
+    }
+    if (this.d && this.a.compareDate(this.d, t) < 0) {
+      this.b = this.d;
+      return;
+    }
+    this.b = t;
+  }
+  /** Goes to the month identified by the shift. */
+  O(t) {
+    this.m(this.a.addCalendarMonths(this.b, t));
+  }
+  P(t) {
+    this.f += t, this.b = this.a.createDate(
+      this.f,
+      this.a.getMonth(this.b),
+      this.a.getDate(this.b)
+    ), this.m();
+  }
+  Q(t) {
+    this.m(this.a.addCalendarYears(this.b, t));
+  }
+  x(t) {
+    return this.c ? this.a.compareDate(t, this.c) < 0 : !1;
+  }
+  y(t) {
+    return this.d ? this.a.compareDate(t, this.d) > 0 : !1;
+  }
+  /** Checks if the "previous month" button should be disabled. */
+  ea() {
+    const t = this.a.addCalendarDays(
+      this.b,
+      this.a.getDate(this.b) * -1
+    );
+    return this.x(t);
+  }
+  /** Checks if the "next month" button should be disabled. */
+  fa() {
+    let t = this.a.addCalendarMonths(this.b, this.g ? 2 : 1);
+    return t = this.a.createDate(
+      this.a.getYear(t),
+      this.a.getMonth(t),
+      1
+    ), this.y(t);
+  }
+  ga() {
+    const t = this.a.createDate(
+      this.a.getYear(this.b) - 1,
+      12,
+      31
+    );
+    return this.x(t);
+  }
+  ha() {
+    const t = this.a.createDate(
+      this.a.getYear(this.b) + 1,
+      1,
+      1
+    );
+    return this.y(t);
+  }
+  ia() {
+    const t = this.a.createDate(this.k[0][0] - 1, 12, 31);
+    return this.x(t);
+  }
+  ja() {
+    const t = $("medium") && this.wide ? this.p : this.k, e = t[t.length - 1], a = e[e.length - 1], i = this.a.createDate(a + 1, 1, 1);
+    return this.y(i);
+  }
+  ka(t) {
+    (t == null ? void 0 : t.localName) !== "button" && this.J();
+  }
+  J() {
+    Array.from(
+      this.shadowRoot.querySelectorAll('.sbb-calendar__cell[tabindex="0"]') ?? []
+    ).forEach((e) => e.tabIndex = -1);
+    const t = this.N();
+    t && (t.tabIndex = 0);
+  }
+  N() {
+    const t = this.e ? this.a.deserialize(this.e) : this.now;
+    let e = this.shadowRoot.querySelector(".sbb-calendar__selected") ?? this.shadowRoot.querySelector(
+      `[data-day="${this.a.getDate(t)} ${this.a.getMonth(
+        t
+      )} ${this.a.getYear(t)}"]`
+    ) ?? this.shadowRoot.querySelector(`[data-month="${this.a.getMonth(t)}"]`) ?? this.shadowRoot.querySelector(`[data-year="${this.a.getYear(t)}"]`);
+    return (!e || e != null && e.disabled) && (e = this.shadowRoot.querySelector(".sbb-calendar__cell:not([disabled])")), e || null;
+  }
+  z(t, e) {
+    V(t) && t.preventDefault();
+    const a = this.X, i = a.findIndex((n) => n === t.target), s = this.la(t, i, a, e), r = this.shadowRoot.activeElement;
+    s !== r && (s.tabIndex = 0, s == null || s.focus(), r.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.
+   */
+  la(t, e, a, i) {
+    const {
+      elementIndexForWideMode: s,
+      offsetForWideMode: r,
+      lastElementIndexForWideMode: n,
+      verticalOffset: b
+    } = this.ma(
+      a,
+      e,
+      i
+    );
+    switch (t.key) {
+      case "ArrowUp":
+        return this.i(a, e, -b);
+      case "ArrowDown":
+        return this.i(a, e, b);
+      case "ArrowLeft":
+        return this.i(a, e, -1);
+      case "ArrowRight":
+        return this.i(a, e, 1);
+      case "Home":
+        return this.na(a, r);
+      case "PageUp":
+        return this.oa(
+          a,
+          s,
+          r,
+          b
+        );
+      case "PageDown":
+        return this.pa(a, e, n, b);
+      case "End":
+        return this.qa(a, n - 1);
+      default:
+        return a[e];
+    }
+  }
+  /**
+   * 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.
+   */
+  ma(t, e, a) {
+    switch (this.q) {
+      case "day": {
+        const i = +a.dayValue - 1;
+        return {
+          verticalOffset: y,
+          elementIndexForWideMode: i,
+          offsetForWideMode: e - i,
+          lastElementIndexForWideMode: e === i ? this.a.getNumDaysInMonth(
+            this.a.addCalendarMonths(
+              this.a.deserialize(a.value),
+              -1
+            )
+          ) : t.length
+        };
+      }
+      case "month":
+        return {
+          verticalOffset: _,
+          elementIndexForWideMode: e,
+          offsetForWideMode: 0,
+          lastElementIndexForWideMode: 12
+        };
+      case "year": {
+        const i = Math.trunc(e / o) * o, s = i === 0 ? e : e - o;
+        return {
+          verticalOffset: v,
+          elementIndexForWideMode: s,
+          offsetForWideMode: e - s,
+          lastElementIndexForWideMode: i === 0 ? o : o * 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.
+   */
+  i(t, e, a) {
+    var s;
+    let i = e + a;
+    for (; i < t.length && ((s = t[i]) != null && s.disabled); )
+      i += a;
+    return t[i] ?? t[e];
+  }
+  /** Find the first enabled element in the provided array. */
+  na(t, e) {
+    return t[e].disabled ? this.i(t, e, 1) : t[e];
+  }
+  /** Find the last enabled element in the provided array. */
+  qa(t, e) {
+    return t[e].disabled ? this.i(t, e, -1) : t[e];
+  }
+  /** Find the first enabled element in the same column of the provided array. */
+  oa(t, e, a, i) {
+    const s = e % i + a;
+    return t[s].disabled ? this.i(t, s, i) : t[s];
+  }
+  /** Find the last enabled element in the same column of the provided array. */
+  pa(t, e, a, i) {
+    const s = e + Math.trunc((a - e - 1) / i) * i;
+    return t[s].disabled ? this.i(t, s, -i) : t[s];
+  }
+  w() {
+    this.l = !0, this.b = this.selected ?? this.now, this.f = void 0, this.s = void 0, this.o = "day", this.t();
+  }
+  /** Render the view for the day selection. */
+  ra() {
+    const t = this.g ? this.a.addCalendarMonths(this.b, 1) : void 0;
+    return l`
+      <div class="sbb-calendar__controls">
+        ${this.n(
+      "left",
+      () => this.O(-1),
+      F[this.h.current],
+      this.ea()
+    )}
+        <div class="sbb-calendar__controls-month">
+          ${this.R(this.b)}
+          ${this.g ? this.R(t) : h}
+          <sbb-screen-reader-only role="status">
+            ${this.sa(this.b, t)}
+          </sbb-screen-reader-only>
+        </div>
+        ${this.n(
+      "right",
+      () => this.O(1),
+      W[this.h.current],
+      this.fa()
+    )}
+      </div>
+      <div class="sbb-calendar__table-container sbb-calendar__table-day-view">
+        ${this.S(this.F)}
+        ${this.g ? this.S(this.v) : h}
+      </div>
+    `;
+  }
+  /** Creates the label with the month for the daily view. */
+  R(t) {
+    const e = `${this.r[this.a.getMonth(t) - 1]} ${this.a.getYear(t)}`;
+    return l`
+      <button
+        type="button"
+        id="sbb-calendar__date-selection"
+        class="sbb-calendar__controls-change-date"
+        aria-label="${N[this.h.current]} ${e}"
+        @click=${() => {
+      this.l = !0, this.o = "year", this.t();
+    }}
+      >
+        ${e}
+        <sbb-icon name="chevron-small-down-small"></sbb-icon>
+      </button>
+    `;
+  }
+  /** Creates the aria-label for the daily view. */
+  sa(...t) {
+    let e = "";
+    for (const a of t)
+      a && (e += `${this.r[this.a.getMonth(a) - 1]} ${this.a.getYear(a)} `);
+    return e;
+  }
+  /** Creates the calendar table for the daily view. */
+  S(t) {
+    return l`
+      <table
+        class="sbb-calendar__table"
+        @focusout=${(e) => this.ka(e.relatedTarget)}
+        @animationend=${(e) => this.A(e)}
+      >
+        <thead class="sbb-calendar__table-header">
+          <tr class="sbb-calendar__table-header-row">
+            ${this.ta()}
+          </tr>
+        </thead>
+        <tbody class="sbb-calendar__table-body">
+          ${this.ua(t)}
+        </tbody>
+      </table>
+    `;
+  }
+  /** Creates the table header with the month header cells. */
+  ta() {
+    return this.E.map(
+      (t) => l`
+        <th class="sbb-calendar__table-header">
+          <sbb-screen-reader-only>${t.long}</sbb-screen-reader-only>
+          <span aria-hidden="true">${t.narrow}</span>
+        </th>
+      `
+    );
+  }
+  /** Creates the table body with the day cells. For the first row, it also considers the possible day's offset. */
+  ua(t) {
+    const e = this.a.toIso8601(this.now);
+    return t.map((a, i) => {
+      const s = y - a.length;
+      return i === 0 && s ? l`
+          <tr>
+            ${[...Array(s).keys()].map(
+        () => l`<td
+                  class="sbb-calendar__table-data"
+                  data-day=${`0 ${a[0].monthValue} ${a[0].yearValue}`}
+                ></td>`
+      )}
+            ${this.T(a, e)}
+          </tr>
+        ` : l`<tr>
+        ${this.T(a, e)}
+      </tr>`;
+    });
+  }
+  /** Creates the cells for the daily view. */
+  T(t, e) {
+    return t.map((a) => {
+      const i = !this.C(a.value), s = !this.D(this.a.deserialize(a.value)), r = !!this.e && a.value === this.e, n = `${a.dayValue} ${a.monthValue} ${a.yearValue}`, b = a.value === e;
+      return l`
+        <td
+          class=${g({
+        "sbb-calendar__table-data": !0,
+        "sbb-calendar__table-data-selected": r
+      })}
+        >
+          <button
+            class=${g({
+        "sbb-calendar__cell": !0,
+        "sbb-calendar__day": !0,
+        "sbb-calendar__cell-current": b,
+        "sbb-calendar__selected": r,
+        "sbb-calendar__crossed-out": !i && s
+      })}
+            @click=${() => this.da(a.value)}
+            ?disabled=${i || s}
+            aria-label=${this.a.getAccessibilityFormatDate(a.value)}
+            aria-pressed=${r}
+            aria-disabled=${i || s}
+            aria-current=${b ? "date" : h}
+            data-day=${n || h}
+            tabindex="-1"
+            @keydown=${(u) => this.z(u, a)}
+            sbb-popover-close
+          >
+            ${a.dayValue}
+          </button>
+        </td>
+      `;
+    });
+  }
+  /** Render the view for the month selection. */
+  va() {
+    return l`
+      <div class="sbb-calendar__controls">
+        ${this.n(
+      "left",
+      () => this.P(-1),
+      E[this.h.current],
+      this.ga()
+    )}
+        <div class="sbb-calendar__controls-month">${this.wa()}</div>
+        ${this.n(
+      "right",
+      () => this.P(1),
+      P[this.h.current],
+      this.ha()
+    )}
+      </div>
+      <div class="sbb-calendar__table-container sbb-calendar__table-month-view">
+        ${this.U(this.u, this.f)}
+        ${this.g ? this.U(this.u, this.f + 1, !0) : h}
+      </div>
+    `;
+  }
+  /** Creates the label with the year for the monthly view. */
+  wa() {
+    return l` <button
+        type="button"
+        id="sbb-calendar__month-selection"
+        class="sbb-calendar__controls-change-date"
+        aria-label=${`${x[this.h.current]} ${this.f}`}
+        @click=${() => this.w()}
+      >
+        ${this.f} ${this.g ? ` - ${this.f + 1}` : h}
+        <sbb-icon name="chevron-small-up-small"></sbb-icon>
+      </button>
+      <sbb-screen-reader-only role="status"> ${this.f} </sbb-screen-reader-only>`;
+  }
+  /** Creates the table for the month selection view. */
+  U(t, e, a = !1) {
+    return l`
+      <table
+        class="sbb-calendar__table"
+        @animationend=${(i) => this.A(i)}
+      >
+        ${this.g ? l`<thead class="sbb-calendar__table-header" aria-hidden="true">
+              <tr class="sbb-calendar__table-header-row">
+                <th class="sbb-calendar__table-header" colspan=${_}>${e}</th>
+              </tr>
+            </thead>` : h}
+        <tbody class="sbb-calendar__table-body">
+          ${t.map(
+      (i) => l`
+              <tr>
+                ${i.map((s) => {
+        const r = !this.$(s.monthValue), n = !this.ba(s.monthValue), b = this.e ? this.a.getMonth(this.a.deserialize(this.e)) : void 0, u = this.e ? this.a.getYear(this.a.deserialize(this.e)) : void 0, m = !!this.e && e === u && s.monthValue === b, w = e === this.a.getYear(this.now) && this.a.getMonth(this.now) === s.monthValue;
+        return l` <td
+                    class=${g({
+          "sbb-calendar__table-data": !0,
+          "sbb-calendar__table-month": !0
+        })}
+                  >
+                    <button
+                      class=${g({
+          "sbb-calendar__cell": !0,
+          "sbb-calendar__pill": !0,
+          "sbb-calendar__cell-current": w,
+          "sbb-calendar__crossed-out": !r && n,
+          "sbb-calendar__selected": m
+        })}
+                      @click=${() => this.xa(s.monthValue, e, a)}
+                      ?disabled=${r || n}
+                      aria-label=${`${s.longValue} ${this.f}`}
+                      aria-pressed=${m}
+                      aria-disabled=${String(r || n)}
+                      tabindex="-1"
+                      data-month=${s.monthValue || h}
+                      @keydown=${(k) => this.z(k)}
+                    >
+                      ${s.value}
+                    </button>
+                  </td>`;
+      })}
+              </tr>
+            `
+    )}
+        </tbody>
+      </table>
+    `;
+  }
+  /** Select the month and change the view to day selection. */
+  xa(t, e, a) {
+    this.s = a ? t + 1 : t, this.o = "day", this.m(
+      this.a.createDate(
+        e,
+        this.s,
+        this.a.getDate(this.b)
+      )
+    ), this.t();
+  }
+  /** Render the view for the year selection. */
+  ya() {
+    return l`
+      <div class="sbb-calendar__controls">
+        ${this.n(
+      "left",
+      () => this.Q(-o),
+      C(o)[this.h.current],
+      this.ia()
+    )}
+        <div class="sbb-calendar__controls-month">${this.za()}</div>
+        ${this.n(
+      "right",
+      () => this.Q(o),
+      q(o)[this.h.current],
+      this.ja()
+    )}
+      </div>
+      <div class="sbb-calendar__table-container sbb-calendar__table-year-view">
+        ${this.V(this.k)}
+        ${this.g ? this.V(this.p, !0) : h}
+      </div>
+    `;
+  }
+  /** Creates the button arrow for all the views. */
+  n(t, e, a, i) {
+    return l`<sbb-secondary-button
+      size="m"
+      icon-name="chevron-small-${t}-small"
+      aria-label=${a}
+      @click=${e}
+      ?disabled=${i}
+      id="sbb-calendar__controls-${t === "left" ? "previous" : "next"}"
+    ></sbb-secondary-button>`;
+  }
+  /** Creates the label with the year range for the yearly view. */
+  za() {
+    const t = this.k.flat()[0], e = ($("medium") && this.wide ? this.p : this.k).flat(), a = e[e.length - 1], i = `${t} - ${a}`;
+    return l`
+      <button
+        type="button"
+        id="sbb-calendar__year-selection"
+        class="sbb-calendar__controls-change-date"
+        aria-label="${x[this.h.current]} ${i}"
+        @click=${() => this.w()}
+      >
+        ${i}
+        <sbb-icon name="chevron-small-up-small"></sbb-icon>
+      </button>
+      <sbb-screen-reader-only role="status"> ${i} </sbb-screen-reader-only>
+    `;
+  }
+  /** Creates the table for the year selection view. */
+  V(t, e = !1) {
+    const a = this.now;
+    return l` <table
+      class="sbb-calendar__table"
+      @animationend=${(i) => this.A(i)}
+    >
+      <tbody class="sbb-calendar__table-body">
+        ${t.map(
+      (i) => l` <tr>
+              ${i.map((s) => {
+        const r = !this.aa(s), n = !this.ca(s), b = this.e ? this.a.getYear(this.a.deserialize(this.e)) : void 0, u = !!this.e && s === b, m = this.a.getYear(a) === s;
+        return l` <td class="sbb-calendar__table-data sbb-calendar__table-year">
+                  <button
+                    class=${g({
+          "sbb-calendar__cell": !0,
+          "sbb-calendar__pill": !0,
+          "sbb-calendar__cell-current": m,
+          "sbb-calendar__crossed-out": !r && n,
+          "sbb-calendar__selected": u
+        })}
+                    @click=${() => this.Aa(s, e)}
+                    ?disabled=${r || n}
+                    aria-label=${s}
+                    aria-pressed=${u}
+                    aria-disabled=${String(r || n)}
+                    tabindex="-1"
+                    data-year=${s || h}
+                    @keydown=${(w) => this.z(w)}
+                  >
+                    ${s}
+                  </button>
+                </td>`;
+      })}
+            </tr>`
+    )}
+      </tbody>
+    </table>`;
+  }
+  /** Select the year and change the view to month selection. */
+  Aa(t, e) {
+    this.f = e ? t - 1 : t, this.o = "month", this.K(
+      this.a.createDate(
+        this.f,
+        this.a.getMonth(this.b),
+        this.a.getDate(this.b)
+      )
+    ), this.t();
+  }
+  get Ba() {
+    switch (this.q) {
+      case "year":
+        return this.ya();
+      case "month":
+        return this.va();
+      case "day":
+      default:
+        return this.ra();
+    }
+  }
+  A(t) {
+    const e = t.target;
+    t.animationName === "hide" ? (e.classList.remove("sbb-calendar__table-hide"), this.l = !0, this.q = this.o) : t.animationName === "show" && this.removeAttribute("data-transition");
+  }
+  t() {
+    this.toggleAttribute("data-transition", !0), this.shadowRoot.querySelectorAll("table").forEach(
+      (t) => t.classList.toggle("sbb-calendar__table-hide")
+    );
+  }
+  render() {
+    return l`<div class="sbb-calendar__wrapper">${this.Ba}</div>`;
+  }
+};
+c.styles = L;
+c.events = {
+  dateSelected: "dateSelected"
+};
+d([
+  f({ type: Boolean })
+], c.prototype, "wide", 2);
+d([
+  f()
+], c.prototype, "min", 1);
+d([
+  f()
+], c.prototype, "max", 1);
+d([
+  f()
+], c.prototype, "now", 1);
+d([
+  f()
+], c.prototype, "selected", 1);
+d([
+  f({ attribute: "date-filter" })
+], c.prototype, "dateFilter", 2);
+d([
+  p()
+], c.prototype, "b", 2);
+d([
+  p()
+], c.prototype, "e", 2);
+d([
+  p()
+], c.prototype, "g", 1);
+d([
+  p()
+], c.prototype, "q", 2);
+c = d([
+  D("sbb-calendar")
+], c);
+export {
+  c as SbbCalendarElement
+};