@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/datepicker/common.js

@@ -1,122 +1,122 @@
-import { html as d } from "lit";
-import { property as o, state as b } from "lit/decorators.js";
-import { SbbButtonBaseElement as c } from "../core/base-elements.js";
-import { SbbConnectedAbortController as u, SbbLanguageController as m } from "../core/controllers.js";
-import { defaultDateAdapter as f } from "../core/datetime.js";
-import { i18nToday as g } from "../core/i18n.js";
-import { SbbNegativeMixin as p } from "../core/mixins.js";
-import { getDatePicker as E, datepickerControlRegisteredEventFactory as D } from "./datepicker.js";
+import { html as o } from "lit";
+import { property as h, state as b } from "lit/decorators.js";
+import { SbbButtonBaseElement as u } from "../core/base-elements.js";
+import { SbbConnectedAbortController as c, SbbLanguageController as _ } from "../core/controllers.js";
+import { defaultDateAdapter as m } from "../core/datetime.js";
+import { i18nToday as p } from "../core/i18n.js";
+import { SbbNegativeMixin as A } from "../core/mixins.js";
+import { getDatePicker as g, datepickerControlRegisteredEventFactory as f } from "./datepicker.js";
 import "../icon.js";
-var A = Object.defineProperty, l = (r, t, i, s) => {
-  for (var e = void 0, a = r.length - 1, n; a >= 0; a--)
-    (n = r[a]) && (e = n(t, i, e) || e);
-  return e && A(t, i, e), e;
+var D = Object.defineProperty, l = (r, t, i, a) => {
+  for (var e = void 0, s = r.length - 1, n; s >= 0; s--)
+    (n = r[s]) && (e = n(t, i, e) || e);
+  return e && D(t, i, e), e;
 };
-class h extends p(c) {
+class d extends A(u) {
   constructor() {
-    super(...arguments), this.boundary = null, this.e = !1, this.f = !1, this.datePickerElement = null, this.b = f, this.i = new u(this), this.g = new m(this).withHandler(() => this.c());
+    super(...arguments), this.boundary = null, this._disabled = !1, this._inputDisabled = !1, this.datePickerElement = null, this._dateAdapter = m, this._abort = new c(this), this._language = new _(this).withHandler(() => this._setAriaLabel());
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", () => this.j(), { signal: this.i.signal }), this.k(), this.datePicker || this.h();
+    super.connectedCallback(), this.addEventListener("click", () => this._handleClick(), { signal: this._abort.signal }), this._syncUpstreamProperties(), this.datePicker || this._init();
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("datePicker") && this.h(this.datePicker);
+    super.willUpdate(t), t.has("datePicker") && this._init(this.datePicker);
   }
   disconnectedCallback() {
     var t;
-    super.disconnectedCallback(), (t = this.a) == null || t.abort();
+    super.disconnectedCallback(), (t = this._datePickerController) == null || t.abort();
   }
   setDisabledState(t) {
     var e;
     const i = (e = t == null ? void 0 : t.getValueAsDate) == null ? void 0 : e.call(t);
     if (!i) {
-      this.e = !0, this.d(!0);
+      this._disabled = !0, this._setDisabledRenderAttributes(!0);
       return;
     }
-    const s = this.findAvailableDate(
+    const a = this.findAvailableDate(
       i,
       (t == null ? void 0 : t.dateFilter) || null,
-      this.b,
+      this._dateAdapter,
       this.boundary
     );
-    this.e = this.b.compareDate(s, i) === 0, this.d();
+    this._disabled = this._dateAdapter.compareDate(a, i) === 0, this._setDisabledRenderAttributes();
   }
-  j() {
+  _handleClick() {
     if (!this.datePickerElement || this.hasAttribute("data-disabled"))
       return;
     const t = this.datePickerElement.getValueAsDate() ?? this.datePickerElement.now, i = this.findAvailableDate(
       t,
       this.datePickerElement.dateFilter,
-      this.b,
+      this._dateAdapter,
       this.boundary
     );
-    this.b.compareDate(i, t) !== 0 && this.datePickerElement.setValueAsDate(i);
+    this._dateAdapter.compareDate(i, t) !== 0 && this.datePickerElement.setValueAsDate(i);
   }
-  k() {
-    var i, s;
-    const t = ((i = this.closest) == null ? void 0 : i.call(this, "sbb-form-field")) ?? ((s = this.closest) == null ? void 0 : s.call(this, "[data-form-field]"));
+  _syncUpstreamProperties() {
+    var i, a;
+    const t = ((i = this.closest) == null ? void 0 : i.call(this, "sbb-form-field")) ?? ((a = this.closest) == null ? void 0 : a.call(this, "[data-form-field]"));
     if (t) {
       this.negative = t.hasAttribute("negative");
       const e = t.querySelector("input");
-      e && (this.f = e.hasAttribute("disabled") || e.hasAttribute("readonly"), this.d());
+      e && (this._inputDisabled = e.hasAttribute("disabled") || e.hasAttribute("readonly"), this._setDisabledRenderAttributes());
     }
   }
-  h(t) {
-    var i, s;
-    if ((i = this.a) == null || i.abort(), this.a = new AbortController(), this.datePickerElement = E(this, t), this.setDisabledState(this.datePickerElement), !this.datePickerElement) {
-      (s = this.parentElement) == null || s.addEventListener(
+  _init(t) {
+    var i, a;
+    if ((i = this._datePickerController) == null || i.abort(), this._datePickerController = new AbortController(), this.datePickerElement = g(this, t), this.setDisabledState(this.datePickerElement), !this.datePickerElement) {
+      (a = this.parentElement) == null || a.addEventListener(
         "inputUpdated",
-        (e) => this.h(e.target),
-        { once: !0, signal: this.a.signal }
+        (e) => this._init(e.target),
+        { once: !0, signal: this._datePickerController.signal }
       );
       return;
     }
-    this.c(), this.datePickerElement.addEventListener(
+    this._setAriaLabel(), this.datePickerElement.addEventListener(
       "change",
       (e) => {
-        this.setDisabledState(e.target), this.c();
+        this.setDisabledState(e.target), this._setAriaLabel();
       },
-      { signal: this.a.signal }
+      { signal: this._datePickerController.signal }
     ), this.datePickerElement.addEventListener(
       "datePickerUpdated",
       (e) => {
-        this.setDisabledState(e.target), this.c();
+        this.setDisabledState(e.target), this._setAriaLabel();
       },
-      { signal: this.a.signal }
+      { signal: this._datePickerController.signal }
     ), this.datePickerElement.addEventListener(
       "inputUpdated",
       (e) => {
-        this.f = !!(e.detail.disabled || e.detail.readonly), this.d(), this.c(), this.onInputUpdated(e);
+        this._inputDisabled = !!(e.detail.disabled || e.detail.readonly), this._setDisabledRenderAttributes(), this._setAriaLabel(), this.onInputUpdated(e);
       },
-      { signal: this.a.signal }
-    ), this.datePickerElement.dispatchEvent(D());
+      { signal: this._datePickerController.signal }
+    ), this.datePickerElement.dispatchEvent(f());
   }
-  c() {
-    var s, e, a;
-    const t = (e = (s = this.datePickerElement) == null ? void 0 : s.getValueAsDate) == null ? void 0 : e.call(s);
-    if (!t || !this.b.isValid(t)) {
-      this.setAttribute("aria-label", this.i18nOffBoundaryDay[this.g.current]);
+  _setAriaLabel() {
+    var a, e, s;
+    const t = (e = (a = this.datePickerElement) == null ? void 0 : a.getValueAsDate) == null ? void 0 : e.call(a);
+    if (!t || !this._dateAdapter.isValid(t)) {
+      this.setAttribute("aria-label", this.i18nOffBoundaryDay[this._language.current]);
       return;
     }
-    const i = ((a = this.datePickerElement) == null ? void 0 : a.now.toDateString()) === t.toDateString() ? g[this.g.current].toLowerCase() : this.b.getAccessibilityFormatDate(t);
+    const i = ((s = this.datePickerElement) == null ? void 0 : s.now.toDateString()) === t.toDateString() ? p[this._language.current].toLowerCase() : this._dateAdapter.getAccessibilityFormatDate(t);
     this.setAttribute(
       "aria-label",
-      this.i18nSelectOffBoundaryDay(i)[this.g.current]
+      this.i18nSelectOffBoundaryDay(i)[this._language.current]
     );
   }
-  d(t = this.e || this.f) {
+  _setDisabledRenderAttributes(t = this._disabled || this._inputDisabled) {
     this.toggleAttribute("data-disabled", t), t ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0"));
   }
   renderTemplate() {
-    return d` <sbb-icon name=${this.iconName}></sbb-icon> `;
+    return o` <sbb-icon name=${this.iconName}></sbb-icon> `;
   }
 }
 l([
-  o({ attribute: "date-picker" })
-], h.prototype, "datePicker");
+  h({ attribute: "date-picker" })
+], d.prototype, "datePicker");
 l([
   b()
-], h.prototype, "boundary");
+], d.prototype, "boundary");
 export {
-  h as SbbDatepickerButton
+  d as SbbDatepickerButton
 };

package/datepicker/datepicker-toggle.js

@@ -1,147 +1,147 @@
-import { css as c, LitElement as g, isServer as b, html as p, nothing as f } from "lit";
-import { property as m, state as n, customElement as u } from "lit/decorators.js";
-import { ref as d } from "lit/directives/ref.js";
-import { sbbInputModalityDetector as v } from "../core/a11y.js";
-import { SbbLanguageController as w } from "../core/controllers.js";
-import { hostAttributes as y } from "../core/decorators.js";
-import { i18nShowCalendar as k } from "../core/i18n.js";
-import { SbbNegativeMixin as $, SbbHydrationMixin as x } from "../core/mixins.js";
-import { getDatePicker as P, datepickerControlRegisteredEventFactory as C } from "./datepicker.js";
+import { css as _, LitElement as b, isServer as h, html as m, nothing as p } from "lit";
+import { property as g, state as d, customElement as E } from "lit/decorators.js";
+import { ref as c } from "lit/directives/ref.js";
+import { sbbInputModalityDetector as u } from "../core/a11y.js";
+import { SbbLanguageController as f } from "../core/controllers.js";
+import { hostAttributes as k } from "../core/decorators.js";
+import { i18nShowCalendar as P } from "../core/i18n.js";
+import { SbbNegativeMixin as C, SbbHydrationMixin as v } from "../core/mixins.js";
+import { getDatePicker as w, datepickerControlRegisteredEventFactory as y } from "./datepicker.js";
 import "../calendar.js";
 import "../popover.js";
-const D = c`*,:before,:after{box-sizing:border-box}:host{--sbb-datepicker-control-radius: var(--sbb-border-radius-4x);--sbb-datepicker-control-color: var(--sbb-color-black);display:inline-flex}sbb-popover-trigger{--sbb-button-display: flex;color:var(--sbb-datepicker-control-color);height:unset}sbb-icon{color:var(--sbb-color-graphite)}`;
-var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (t, e, i, o) => {
-  for (var r = o > 1 ? void 0 : o ? S(e, i) : e, l = t.length - 1, s; l >= 0; l--)
-    (s = t[l]) && (r = (o ? s(e, i, r) : s(r)) || r);
-  return o && r && E(e, i, r), r;
+const x = _`*,:before,:after{box-sizing:border-box}:host{--sbb-datepicker-control-radius: var(--sbb-border-radius-4x);--sbb-datepicker-control-color: var(--sbb-color-black);display:inline-flex}sbb-popover-trigger{--sbb-button-display: flex;color:var(--sbb-datepicker-control-color);height:unset}sbb-icon{color:var(--sbb-color-graphite)}`;
+var $ = Object.defineProperty, D = Object.getOwnPropertyDescriptor, o = (e, t, i, n) => {
+  for (var a = n > 1 ? void 0 : n ? D(t, i) : t, l = e.length - 1, r; l >= 0; l--)
+    (r = e[l]) && (a = (n ? r(t, i, a) : r(a)) || a);
+  return n && a && $(t, i, a), a;
 };
-let a = class extends $(x(g)) {
+let s = class extends C(v(b)) {
   constructor() {
-    super(), this.f = !1, this.g = null, this.h = null, this.i = !1, this.m = new w(this), b || this.hydrationComplete.then(() => this.i = !0);
+    super(), this._disabled = !1, this._min = null, this._max = null, this._renderCalendar = !1, this._language = new f(this), h || this.hydrationComplete.then(() => this._renderCalendar = !0);
   }
   /**
    * Opens the calendar.
    */
   open() {
-    this.d || (this.d = this.shadowRoot.querySelector("sbb-popover-trigger")), this.d.click();
+    this._triggerElement || (this._triggerElement = this.shadowRoot.querySelector("sbb-popover-trigger")), this._triggerElement.click();
   }
   connectedCallback() {
-    var e, i;
-    super.connectedCallback(), this.datePicker || this.e();
-    const t = ((e = this.closest) == null ? void 0 : e.call(this, "sbb-form-field")) ?? ((i = this.closest) == null ? void 0 : i.call(this, "[data-form-field]"));
-    t && (this.negative = t.hasAttribute("negative"));
+    var t, i;
+    super.connectedCallback(), this.datePicker || this._init();
+    const e = ((t = this.closest) == null ? void 0 : t.call(this, "sbb-form-field")) ?? ((i = this.closest) == null ? void 0 : i.call(this, "[data-form-field]"));
+    e && (this.negative = e.hasAttribute("negative"));
   }
-  willUpdate(t) {
-    super.willUpdate(t), t.has("datePicker") && this.e(this.datePicker);
+  willUpdate(e) {
+    super.willUpdate(e), e.has("datePicker") && this._init(this.datePicker);
   }
   disconnectedCallback() {
-    var t;
-    super.disconnectedCallback(), (t = this.c) == null || t.abort();
+    var e;
+    super.disconnectedCallback(), (e = this._datePickerController) == null || e.abort();
   }
-  e(t) {
-    var e, i, o, r, l;
-    if ((e = this.c) == null || e.abort(), this.c = new AbortController(), this.a = P(this, t), !this.a) {
+  _init(e) {
+    var t, i, n, a, l;
+    if ((t = this._datePickerController) == null || t.abort(), this._datePickerController = new AbortController(), this._datePickerElement = w(this, e), !this._datePickerElement) {
       (i = this.parentElement) == null || i.addEventListener(
         "inputUpdated",
-        (s) => this.e(s.target),
-        { once: !0, signal: this.c.signal }
+        (r) => this._init(r.target),
+        { once: !0, signal: this._datePickerController.signal }
       );
       return;
     }
-    (o = this.a) == null || o.addEventListener(
+    (n = this._datePickerElement) == null || n.addEventListener(
       "inputUpdated",
-      (s) => {
-        this.a = s.target, this.f = !!(s.detail.disabled || s.detail.readonly), this.g = s.detail.min, this.h = s.detail.max;
+      (r) => {
+        this._datePickerElement = r.target, this._disabled = !!(r.detail.disabled || r.detail.readonly), this._min = r.detail.min, this._max = r.detail.max;
       },
-      { signal: this.c.signal }
-    ), (r = this.a) == null || r.addEventListener(
+      { signal: this._datePickerController.signal }
+    ), (a = this._datePickerElement) == null || a.addEventListener(
       "change",
-      (s) => this.n(s),
+      (r) => this._datePickerChanged(r),
       {
-        signal: this.c.signal
+        signal: this._datePickerController.signal
       }
-    ), (l = this.a) == null || l.addEventListener(
+    ), (l = this._datePickerElement) == null || l.addEventListener(
       "datePickerUpdated",
-      (s) => this.k(this.b, s.target),
-      { signal: this.c.signal }
-    ), this.a.dispatchEvent(C());
+      (r) => this._configureCalendar(this._calendarElement, r.target),
+      { signal: this._datePickerController.signal }
+    ), this._datePickerElement.dispatchEvent(y());
   }
-  k(t, e) {
-    !t || !e || (t.wide = e.wide, t.now = this.l(), t.dateFilter = e.dateFilter);
+  _configureCalendar(e, t) {
+    !e || !t || (e.wide = t.wide, e.now = this._nowOrUndefined(), e.dateFilter = t.dateFilter);
   }
-  n(t) {
-    this.a = t.target, this.b.selected = this.a.getValueAsDate();
+  _datePickerChanged(e) {
+    this._datePickerElement = e.target, this._calendarElement.selected = this._datePickerElement.getValueAsDate();
   }
-  o(t) {
-    var e;
-    this.b && this.b === t || (this.b = t, !(!this.a || !this.a.getValueAsDate || !((e = this.b) != null && e.resetPosition)) && (this.b.selected = this.a.getValueAsDate(), this.k(this.b, this.a), this.b.resetPosition()));
+  _assignCalendar(e) {
+    var t;
+    this._calendarElement && this._calendarElement === e || (this._calendarElement = e, !(!this._datePickerElement || !this._datePickerElement.getValueAsDate || !((t = this._calendarElement) != null && t.resetPosition)) && (this._calendarElement.selected = this._datePickerElement.getValueAsDate(), this._configureCalendar(this._calendarElement, this._datePickerElement), this._calendarElement.resetPosition()));
   }
-  updated(t) {
-    super.updated(t), this.j.trigger = this.d;
+  updated(e) {
+    super.updated(e), this._popoverElement.trigger = this._triggerElement;
   }
-  l() {
-    var t;
-    return (t = this.a) != null && t.hasCustomNow() ? this.a.now : void 0;
+  _nowOrUndefined() {
+    var e;
+    return (e = this._datePickerElement) != null && e.hasCustomNow() ? this._datePickerElement.now : void 0;
   }
   render() {
-    var t, e;
-    return p`
+    var e, t;
+    return m`
       <sbb-popover-trigger
         icon-name="calendar-small"
-        aria-label=${k[this.m.current]}
-        ?disabled=${!b && (!this.a || this.f)}
+        aria-label=${P[this._language.current]}
+        ?disabled=${!h && (!this._datePickerElement || this._disabled)}
         ?negative=${this.negative}
         data-icon-small
-        ${d((i) => this.d = i)}
+        ${c((i) => this._triggerElement = i)}
       ></sbb-popover-trigger>
       <sbb-popover
-        @willOpen=${() => this.b.resetPosition()}
+        @willOpen=${() => this._calendarElement.resetPosition()}
         @didOpen=${() => {
-      v.mostRecentModality === "keyboard" && this.b.focus();
+      u.mostRecentModality === "keyboard" && this._calendarElement.focus();
     }}
-        .trigger=${this.d}
+        .trigger=${this._triggerElement}
         hide-close-button
-        ${d((i) => this.j = i)}
+        ${c((i) => this._popoverElement = i)}
       >
-        ${this.i ? p`<sbb-calendar
-              .min=${this.g}
-              .max=${this.h}
-              .now=${this.l()}
-              ?wide=${(t = this.a) == null ? void 0 : t.wide}
-              .dateFilter=${(e = this.a) == null ? void 0 : e.dateFilter}
+        ${this._renderCalendar ? m`<sbb-calendar
+              .min=${this._min}
+              .max=${this._max}
+              .now=${this._nowOrUndefined()}
+              ?wide=${(e = this._datePickerElement) == null ? void 0 : e.wide}
+              .dateFilter=${(t = this._datePickerElement) == null ? void 0 : t.dateFilter}
               @dateSelected=${(i) => {
-      var r;
-      const o = new Date(i.detail);
-      this.b.selected = o, (r = this.a) == null || r.setValueAsDate(o);
+      var a;
+      const n = new Date(i.detail);
+      this._calendarElement.selected = n, (a = this._datePickerElement) == null || a.setValueAsDate(n);
     }}
-              ${d((i) => this.o(i))}
-            ></sbb-calendar>` : f}
+              ${c((i) => this._assignCalendar(i))}
+            ></sbb-calendar>` : p}
       </sbb-popover>
     `;
   }
 };
-a.styles = D;
-h([
-  m({ attribute: "date-picker" })
-], a.prototype, "datePicker", 2);
-h([
-  n()
-], a.prototype, "f", 2);
-h([
-  n()
-], a.prototype, "g", 2);
-h([
-  n()
-], a.prototype, "h", 2);
-h([
-  n()
-], a.prototype, "i", 2);
-a = h([
-  u("sbb-datepicker-toggle"),
-  y({
+s.styles = x;
+o([
+  g({ attribute: "date-picker" })
+], s.prototype, "datePicker", 2);
+o([
+  d()
+], s.prototype, "_disabled", 2);
+o([
+  d()
+], s.prototype, "_min", 2);
+o([
+  d()
+], s.prototype, "_max", 2);
+o([
+  d()
+], s.prototype, "_renderCalendar", 2);
+s = o([
+  E("sbb-datepicker-toggle"),
+  k({
     slot: "prefix"
   })
-], a);
+], s);
 export {
-  a as SbbDatepickerToggleElement
+  s as SbbDatepickerToggleElement
 };