@sbb-esta/lyne-elements 4.5.1 → 4.6.0

package/calendar/calendar-day/calendar-day.component.js

@@ -0,0 +1,98 @@
+import { __esDecorate as d, __runInitializers as h } from "tslib";
+import { css as y, html as f } from "lit";
+import { customElement as g, property as p, state as m } from "lit/decorators.js";
+import { SbbButtonLikeBaseElement as _ } from "../../core/base-elements.js";
+import { readConfig as x } from "../../core/config/config.js";
+import { SbbPropertyWatcherController as S } from "../../core/controllers.js";
+import { defaultDateAdapter as D } from "../../core/datetime/native-date-adapter.js";
+import { SbbDisabledMixin as k } from "../../core/mixins.js";
+import { boxSizingStyles as A } from "../../core/styles.js";
+const w = y`:host{display:block;--sbb-calendar-day-width: 2.75rem;--sbb-calendar-day-height: 3rem;--sbb-calendar-day-cell-background-color: var(--sbb-calendar-cell-background-color);--sbb-calendar-day-selected-border: none;--sbb-calendar-day-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-calendar-day-transition-easing-function: var(--sbb-animation-easing);--sbb-calendar-day-cursor: var(--sbb-cursor-pointer);--sbb-calendar-day-border-radius: var(--sbb-border-radius-4x);--sbb-calendar-day-flex-direction: column;--sbb-calendar-day-justify-content: initial;--sbb-calendar-day-align-items: initial;--sbb-calendar-day-value-height: var(--sbb-spacing-fixed-6x);--sbb-calendar-day-extra-display: block;--sbb-calendar-day-extra-height: var(--sbb-spacing-fixed-4x);--sbb-calendar-day-crossed-out-top: 33%;--sbb-calendar-day-crossed-out-translate: translate(-50%, -33%) rotate(-45deg)}:host(:is(:state(selected),[state--selected])){--sbb-calendar-day-selected-border: var(--sbb-border-width-2x) solid var(--sbb-border-color-2)}:host(:disabled){--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);--sbb-calendar-day-cursor: unset}:host(:focus-visible){outline:0}:host(:not(:disabled):active){--sbb-calendar-day-cell-background-color: var(--sbb-calendar-cell-background-color-active)}.sbb-calendar-day{--sbb-text-font-size: var(--sbb-text-font-size-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);display:flex;flex-direction:var(--sbb-calendar-day-flex-direction);justify-content:var(--sbb-calendar-day-justify-content);align-items:var(--sbb-calendar-day-align-items);height:var(--sbb-calendar-day-height);width:var(--sbb-calendar-day-width);padding:var(--sbb-calendar-cell-padding);padding-block-end:var(--sbb-calendar-day-cell-padding-hover, var(--sbb-calendar-cell-padding));margin:auto;color:var(--sbb-calendar-cell-color);cursor:var(--sbb-calendar-day-cursor);position:relative;z-index:0}.sbb-calendar-day:before{content:"";position:absolute;inset:0;background-color:var(--sbb-calendar-day-cell-background-color);border:var(--sbb-calendar-day-selected-border);border-radius:var(--sbb-calendar-day-border-radius);z-index:-1;transition-duration:var(--sbb-calendar-day-transition-duration);transition-timing-function:var(--sbb-calendar-day-transition-easing-function);transition-property:background-color}:host(:focus-visible) .sbb-calendar-day:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}@media(forced-colors:active){:host(:not(:disabled):active) .sbb-calendar-day:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}@media(any-hover:hover){:host(:not(:active,:disabled):hover) .sbb-calendar-day{--sbb-calendar-day-cell-background-color: var(--sbb-calendar-cell-background-color-hover);--sbb-calendar-day-cell-padding-hover: calc( .0625rem + var(--sbb-calendar-cell-padding) )}}@media(any-hover:hover)and (forced-colors:active){:host(:not(:active,:disabled):hover) .sbb-calendar-day:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}.sbb-calendar-day__value{height:var(--sbb-calendar-day-value-height)}:host(:is(:state(current),[state--current])) .sbb-calendar-day__value{font-weight:700}:host(:is(:state(crossed-out),[state--crossed-out])) .sbb-calendar-day__value: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);inset-block-start:var(--sbb-calendar-day-crossed-out-top);inset-inline-start:50%;transform:var(--sbb-calendar-day-crossed-out-translate)}.sbb-calendar-day__extra{display:var(--sbb-calendar-day-extra-display);height:var(--sbb-calendar-day-extra-height);padding:var(--sbb-calendar-cell-padding)}::slotted(*){height:1rem}`;
+let T = (() => {
+  var s;
+  let v = [g("sbb-calendar-day")], o, n = [], r, b = k(_), l = [], c, u;
+  return s = class extends b {
+    set slot(e) {
+      super.slot = e, this.value = this.dateAdapter.deserialize(e);
+    }
+    get slot() {
+      return super.slot;
+    }
+    /** Value of the calendar-day element. */
+    set value(e) {
+      const a = this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(e));
+      if (a) {
+        this._value = a;
+        const t = this.dateAdapter.sameDate(a, this.dateAdapter.today());
+        this.toggleState("current", t), this.internals.ariaCurrent = t ? "date" : null, this.internals.ariaLabel = this.dateAdapter.getAccessibilityFormatDate(a);
+        const i = this._getParent();
+        i && (this._setDisabledFilteredState(i), this._setSelectedState(i));
+      }
+    }
+    get value() {
+      return this._value;
+    }
+    constructor() {
+      super(), this.dateAdapter = (h(this, l), x().datetime?.dateAdapter ?? D), this._value = null, this.addController(new S(this, () => this._getParent(), {
+        dateFilter: (e) => this._setDisabledFilteredState(e),
+        min: (e) => this._setDisabledFilteredState(e),
+        max: (e) => this._setDisabledFilteredState(e),
+        selected: (e) => this._setSelectedState(e)
+      }));
+    }
+    /**
+     * Intentionally empty, as buttons are not targeted by form reset.
+     * @internal
+     */
+    formResetCallback() {
+    }
+    /**
+     * Intentionally empty, as buttons are not targeted by form restore.
+     * @internal
+     */
+    formStateRestoreCallback(e, a) {
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.tabIndex = -1;
+    }
+    /**
+     * The component is used as the default day cell within the `sbb-calendar`,
+     * or, if extra content is needed, it can be slotted.
+     */
+    _getParent() {
+      return this.closest?.("sbb-calendar") ?? this.getRootNode?.()?.host?.closest("sbb-calendar");
+    }
+    _setSelectedState(e) {
+      const a = e.multiple ? e.selected.some((t) => this.dateAdapter.sameDate(this.value, t)) : !!e.selected && this.dateAdapter.compareDate(this.value, e.selected) === 0;
+      this.toggleState("selected", a), this.internals.ariaPressed = String(a);
+    }
+    _setDisabledFilteredState(e) {
+      const a = !this._isActiveDate(e.dateFilter), t = !this._isDayInRange(e.min, e.max);
+      this.disabled = a || t, this.internals.ariaDisabled = String(this.disabled), this.toggleState("crossed-out", a && !t);
+    }
+    _isActiveDate(e) {
+      return e?.(this.value) ?? !0;
+    }
+    _isDayInRange(e, a) {
+      return !e && !a ? !0 : this.dateAdapter.sameDate(this.value, this.dateAdapter.clampDate(this.value, e, a));
+    }
+    renderTemplate() {
+      return f` <span class="sbb-calendar-day__value" aria-hidden="true">
+        ${this.dateAdapter.getDate(this.value)}
+      </span>
+      <span class="sbb-calendar-day__extra">
+        <slot></slot>
+      </span>`;
+    }
+  }, r = s, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    c = [p()], u = [m()], d(s, null, c, { kind: "setter", name: "slot", static: !1, private: !1, access: { has: (a) => "slot" in a, set: (a, t) => {
+      a.slot = t;
+    } }, metadata: e }, null, l), d(s, null, u, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, set: (a, t) => {
+      a.value = t;
+    } }, metadata: e }, null, l), d(null, o = { value: r }, v, { kind: "class", name: r.name, metadata: e }, null, n), r = o.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.styles = [A, w], h(r, n), r;
+})();
+export {
+  T as SbbCalendarDayElement
+};

package/calendar/calendar-day.js

@@ -0,0 +1,4 @@
+import { SbbCalendarDayElement as r } from "./calendar-day/calendar-day.component.js";
+export {
+  r as SbbCalendarDayElement
+};

package/calendar/calendar.js

@@ -0,0 +1,5 @@
+import { SbbCalendarElement as b, SbbMonthChangeEvent as t } from "./calendar/calendar.component.js";
+export {
+  b as SbbCalendarElement,
+  t as SbbMonthChangeEvent
+};

package/calendar.js

@@ -1,4 +1,7 @@
-import { SbbCalendarElement as a } from "./calendar/calendar.component.js";
+import { SbbCalendarElement as a, SbbMonthChangeEvent as b } from "./calendar/calendar/calendar.component.js";
+import { SbbCalendarDayElement as t } from "./calendar/calendar-day/calendar-day.component.js";
 export {
-  a as SbbCalendarElement
+  t as SbbCalendarDayElement,
+  a as SbbCalendarElement,
+  b as SbbMonthChangeEvent
 };

package/core/styles/core.scss

@@ -363,6 +363,7 @@ html {
     white-space: break-spaces;
     overflow-y: auto;
     min-height: calc((var(--sbb-typo-line-height-text) * 1em));
+    height: 100%;
   }
 
   &[size='l'] :where(textarea) {

package/core.css

@@ -1824,6 +1824,7 @@ html {
   white-space: break-spaces;
   overflow-y: auto;
   min-height: calc(var(--sbb-typo-line-height-text) * 1em);
+  height: 100%;
 }
 :is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
   padding-block-end: 0.34375rem;