@sbb-esta/lyne-elements 0.52.0 → 0.52.1

package/datepicker/datepicker-toggle.js

@@ -1,147 +1,147 @@
-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 { 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 "../calendar.js";
 import "../popover.js";
-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;
+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;
 };
-let s = class extends C(v(b)) {
+let a = class extends $(x(g)) {
   constructor() {
-    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);
+    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);
   }
   /**
    * Opens the calendar.
    */
   open() {
-    this._triggerElement || (this._triggerElement = this.shadowRoot.querySelector("sbb-popover-trigger")), this._triggerElement.click();
+    this.d || (this.d = this.shadowRoot.querySelector("sbb-popover-trigger")), this.d.click();
   }
   connectedCallback() {
-    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"));
+    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"));
   }
-  willUpdate(e) {
-    super.willUpdate(e), e.has("datePicker") && this._init(this.datePicker);
+  willUpdate(t) {
+    super.willUpdate(t), t.has("datePicker") && this.e(this.datePicker);
   }
   disconnectedCallback() {
-    var e;
-    super.disconnectedCallback(), (e = this._datePickerController) == null || e.abort();
+    var t;
+    super.disconnectedCallback(), (t = this.c) == null || t.abort();
   }
-  _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) {
+  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) {
       (i = this.parentElement) == null || i.addEventListener(
         "inputUpdated",
-        (r) => this._init(r.target),
-        { once: !0, signal: this._datePickerController.signal }
+        (s) => this.e(s.target),
+        { once: !0, signal: this.c.signal }
       );
       return;
     }
-    (n = this._datePickerElement) == null || n.addEventListener(
+    (o = this.a) == null || o.addEventListener(
       "inputUpdated",
-      (r) => {
-        this._datePickerElement = r.target, this._disabled = !!(r.detail.disabled || r.detail.readonly), this._min = r.detail.min, this._max = r.detail.max;
+      (s) => {
+        this.a = s.target, this.f = !!(s.detail.disabled || s.detail.readonly), this.g = s.detail.min, this.h = s.detail.max;
       },
-      { signal: this._datePickerController.signal }
-    ), (a = this._datePickerElement) == null || a.addEventListener(
+      { signal: this.c.signal }
+    ), (r = this.a) == null || r.addEventListener(
       "change",
-      (r) => this._datePickerChanged(r),
+      (s) => this.n(s),
       {
-        signal: this._datePickerController.signal
+        signal: this.c.signal
       }
-    ), (l = this._datePickerElement) == null || l.addEventListener(
+    ), (l = this.a) == null || l.addEventListener(
       "datePickerUpdated",
-      (r) => this._configureCalendar(this._calendarElement, r.target),
-      { signal: this._datePickerController.signal }
-    ), this._datePickerElement.dispatchEvent(y());
+      (s) => this.k(this.b, s.target),
+      { signal: this.c.signal }
+    ), this.a.dispatchEvent(C());
   }
-  _configureCalendar(e, t) {
-    !e || !t || (e.wide = t.wide, e.now = this._nowOrUndefined(), e.dateFilter = t.dateFilter);
+  k(t, e) {
+    !t || !e || (t.wide = e.wide, t.now = this.l(), t.dateFilter = e.dateFilter);
   }
-  _datePickerChanged(e) {
-    this._datePickerElement = e.target, this._calendarElement.selected = this._datePickerElement.getValueAsDate();
+  n(t) {
+    this.a = t.target, this.b.selected = this.a.getValueAsDate();
   }
-  _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()));
+  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()));
   }
-  updated(e) {
-    super.updated(e), this._popoverElement.trigger = this._triggerElement;
+  updated(t) {
+    super.updated(t), this.j.trigger = this.d;
   }
-  _nowOrUndefined() {
-    var e;
-    return (e = this._datePickerElement) != null && e.hasCustomNow() ? this._datePickerElement.now : void 0;
+  l() {
+    var t;
+    return (t = this.a) != null && t.hasCustomNow() ? this.a.now : void 0;
   }
   render() {
-    var e, t;
-    return m`
+    var t, e;
+    return p`
       <sbb-popover-trigger
         icon-name="calendar-small"
-        aria-label=${P[this._language.current]}
-        ?disabled=${!h && (!this._datePickerElement || this._disabled)}
+        aria-label=${k[this.m.current]}
+        ?disabled=${!b && (!this.a || this.f)}
         ?negative=${this.negative}
         data-icon-small
-        ${c((i) => this._triggerElement = i)}
+        ${d((i) => this.d = i)}
       ></sbb-popover-trigger>
       <sbb-popover
-        @willOpen=${() => this._calendarElement.resetPosition()}
+        @willOpen=${() => this.b.resetPosition()}
         @didOpen=${() => {
-      u.mostRecentModality === "keyboard" && this._calendarElement.focus();
+      v.mostRecentModality === "keyboard" && this.b.focus();
     }}
-        .trigger=${this._triggerElement}
+        .trigger=${this.d}
         hide-close-button
-        ${c((i) => this._popoverElement = i)}
+        ${d((i) => this.j = i)}
       >
-        ${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}
+        ${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}
               @dateSelected=${(i) => {
-      var a;
-      const n = new Date(i.detail);
-      this._calendarElement.selected = n, (a = this._datePickerElement) == null || a.setValueAsDate(n);
+      var r;
+      const o = new Date(i.detail);
+      this.b.selected = o, (r = this.a) == null || r.setValueAsDate(o);
     }}
-              ${c((i) => this._assignCalendar(i))}
-            ></sbb-calendar>` : p}
+              ${d((i) => this.o(i))}
+            ></sbb-calendar>` : f}
       </sbb-popover>
     `;
   }
 };
-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({
+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({
     slot: "prefix"
   })
-], s);
+], a);
 export {
-  s as SbbDatepickerToggleElement
+  a as SbbDatepickerToggleElement
 };