@sbb-esta/lyne-elements 1.13.0 → 1.14.0

package/datepicker/datepicker-toggle.js

@@ -1,160 +1,178 @@
-import { css as b, LitElement as p, isServer as h, html as m, nothing as g } from "lit";
-import { property as _, 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, SbbConnectedAbortController as k } from "../core/controllers.js";
-import { hostAttributes as P } from "../core/decorators.js";
-import { i18nShowCalendar as v } from "../core/i18n.js";
-import { SbbNegativeMixin as C, SbbHydrationMixin as w } from "../core/mixins.js";
-import { getDatePicker as y, datepickerControlRegisteredEventFactory as $ } from "./datepicker.js";
+var B = (a) => {
+  throw TypeError(a);
+};
+var G = (a, r, s) => r.has(a) || B("Cannot " + s);
+var _ = (a, r, s) => (G(a, r, "read from private field"), s ? s.call(a) : r.get(a)), h = (a, r, s) => r.has(a) ? B("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, s), n = (a, r, s, c) => (G(a, r, "write to private field"), c ? c.call(a, s) : r.set(a, s), s);
+import { __esDecorate as m, __runInitializers as d } from "tslib";
+import { css as V, LitElement as W, isServer as J, html as K, nothing as X } from "lit";
+import { customElement as Y, property as Q, state as P } from "lit/decorators.js";
+import { ref as v } from "lit/directives/ref.js";
+import { sbbInputModalityDetector as Z } from "../core/a11y.js";
+import { SbbLanguageController as ee, SbbConnectedAbortController as te } from "../core/controllers.js";
+import { hostAttributes as ie } from "../core/decorators.js";
+import { i18nShowCalendar as ae } from "../core/i18n.js";
+import { SbbNegativeMixin as re, SbbHydrationMixin as se } from "../core/mixins.js";
+import { getDatePicker as le, datepickerControlRegisteredEventFactory as ne } from "./datepicker.js";
 import "../calendar.js";
 import "../popover/popover.js";
 import "../button/mini-button.js";
-const x = b`*,: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-datepicker-toggle__trigger{color:var(--sbb-datepicker-control-color);height:unset}sbb-icon{color:var(--sbb-color-graphite)}`;
-var D = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (e, t, i, n) => {
-  for (var a = n > 1 ? void 0 : n ? O(t, i) : t, o = e.length - 1, r; o >= 0; o--)
-    (r = e[o]) && (a = (n ? r(t, i, a) : r(a)) || a);
-  return n && a && D(t, i, a), a;
-};
-let s = class extends C(
-  w(p)
-) {
-  constructor() {
-    super(), this.view = "day", this._disabled = !1, this._min = null, this._max = null, this._renderCalendar = !1, this._language = new f(this), this._abort = new k(this), h || this.hydrationComplete.then(() => this._renderCalendar = !0);
-  }
-  /**
-   * Opens the calendar.
-   */
-  open() {
-    this._triggerElement || (this._triggerElement = this.shadowRoot.querySelector("sbb-mini-button")), this._triggerElement.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")), this.addEventListener(
-      "click",
-      (n) => {
-        n.composedPath()[0] === this && this.open();
-      },
-      { signal: this._abort.signal }
-    );
-  }
-  willUpdate(e) {
-    super.willUpdate(e), e.has("datePicker") && this._init(this.datePicker);
-  }
-  disconnectedCallback() {
-    var e;
-    super.disconnectedCallback(), (e = this._datePickerController) == null || e.abort();
-  }
-  _init(e) {
-    var t, i, n, a, o;
-    if ((t = this._datePickerController) == null || t.abort(), this._datePickerController = new AbortController(), this._datePickerElement = y(this, e), !this._datePickerElement) {
-      (i = this.parentElement) == null || i.addEventListener(
-        "inputUpdated",
-        (r) => this._init(r.target),
-        { once: !0, signal: this._datePickerController.signal }
-      );
-      return;
-    }
-    (n = this._datePickerElement) == null || n.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;
-      },
-      { signal: this._datePickerController.signal }
-    ), (a = this._datePickerElement) == null || a.addEventListener(
-      "change",
-      (r) => this._datePickerChanged(r),
-      {
-        signal: this._datePickerController.signal
+const de = V`*,: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-datepicker-toggle__trigger{color:var(--sbb-datepicker-control-color);height:unset}sbb-icon{color:var(--sbb-color-graphite)}`;
+let we = (() => {
+  var b, g, u, k, p, f, l;
+  let a = [Y("sbb-datepicker-toggle"), ie({
+    slot: "prefix"
+  })], r, s = [], c, C = re(se(W)), w, x = [], y = [], $, z = [], S = [], D, I = [], A = [], U, L = [], O = [], F, M = [], R = [], j, N = [], T = [];
+  return l = class extends C {
+    constructor() {
+      super();
+      h(this, b);
+      h(this, g);
+      h(this, u);
+      h(this, k);
+      h(this, p);
+      h(this, f);
+      n(this, b, d(this, x, null)), n(this, g, (d(this, y), d(this, z, "day"))), n(this, u, (d(this, S), d(this, I, !1))), n(this, k, (d(this, A), d(this, L, null))), n(this, p, (d(this, O), d(this, M, null))), n(this, f, (d(this, R), d(this, N, !1))), this._datePickerElement = d(this, T), this._language = new ee(this), this._abort = new te(this), J || this.hydrationComplete.then(() => this._renderCalendar = !0);
+    }
+    /** Datepicker reference. */
+    get datePicker() {
+      return _(this, b);
+    }
+    set datePicker(t) {
+      n(this, b, t);
+    }
+    /** The initial view of calendar which should be displayed on opening. */
+    get view() {
+      return _(this, g);
+    }
+    set view(t) {
+      n(this, g, t);
+    }
+    get _disabled() {
+      return _(this, u);
+    }
+    set _disabled(t) {
+      n(this, u, t);
+    }
+    get _min() {
+      return _(this, k);
+    }
+    set _min(t) {
+      n(this, k, t);
+    }
+    get _max() {
+      return _(this, p);
+    }
+    set _max(t) {
+      n(this, p, t);
+    }
+    get _renderCalendar() {
+      return _(this, f);
+    }
+    set _renderCalendar(t) {
+      n(this, f, t);
+    }
+    /**
+     * Opens the calendar.
+     */
+    open() {
+      this._triggerElement || (this._triggerElement = this.shadowRoot.querySelector("sbb-mini-button")), this._triggerElement.click();
+    }
+    connectedCallback() {
+      var e, i;
+      super.connectedCallback(), this.datePicker || this._init();
+      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")), this.addEventListener("click", (E) => {
+        E.composedPath()[0] === this && this.open();
+      }, { signal: this._abort.signal });
+    }
+    willUpdate(t) {
+      super.willUpdate(t), t.has("datePicker") && this._init(this.datePicker);
+    }
+    disconnectedCallback() {
+      var t;
+      super.disconnectedCallback(), (t = this._datePickerController) == null || t.abort();
+    }
+    _init(t) {
+      var e, i, E, q, H;
+      if ((e = this._datePickerController) == null || e.abort(), this._datePickerController = new AbortController(), this._datePickerElement = le(this, t), !this._datePickerElement) {
+        (i = this.parentElement) == null || i.addEventListener("inputUpdated", (o) => this._init(o.target), { once: !0, signal: this._datePickerController.signal });
+        return;
       }
-    ), (o = this._datePickerElement) == null || o.addEventListener(
-      "datePickerUpdated",
-      (r) => this._configureCalendar(this._calendarElement, r.target),
-      { signal: this._datePickerController.signal }
-    ), this._datePickerElement.dispatchEvent($());
-  }
-  _configureCalendar(e, t) {
-    !e || !t || (e.wide = t.wide, e.now = this._nowOrUndefined(), e.dateFilter = t.dateFilter);
-  }
-  _datePickerChanged(e) {
-    this._datePickerElement = e.target, this._calendarElement && (this._calendarElement.selected = this._datePickerElement.valueAsDate || void 0);
-  }
-  _assignCalendar(e) {
-    var t;
-    this._calendarElement && this._calendarElement === e || (this._calendarElement = e, !(!("valueAsDate" in (this._datePickerElement ?? {})) || !((t = this._calendarElement) != null && t.resetPosition)) && (this._calendarElement.selected = this._datePickerElement.valueAsDate ?? void 0, this._configureCalendar(this._calendarElement, this._datePickerElement), this._calendarElement.resetPosition()));
-  }
-  updated(e) {
-    super.updated(e), this._popoverElement.trigger = this._triggerElement;
-  }
-  _nowOrUndefined() {
-    var e;
-    return (e = this._datePickerElement) != null && e.hasCustomNow() ? this._datePickerElement.now : void 0;
-  }
-  render() {
-    var e, t;
-    return m`
+      (E = this._datePickerElement) == null || E.addEventListener("inputUpdated", (o) => {
+        this._datePickerElement = o.target, this._disabled = !!(o.detail.disabled || o.detail.readonly), this._min = o.detail.min, this._max = o.detail.max;
+      }, { signal: this._datePickerController.signal }), (q = this._datePickerElement) == null || q.addEventListener("change", (o) => this._datePickerChanged(o), {
+        signal: this._datePickerController.signal
+      }), (H = this._datePickerElement) == null || H.addEventListener("datePickerUpdated", (o) => this._configureCalendar(this._calendarElement, o.target), { signal: this._datePickerController.signal }), this._datePickerElement.dispatchEvent(ne());
+    }
+    _configureCalendar(t, e) {
+      !t || !e || (t.wide = e.wide, t.now = this._nowOrUndefined(), t.dateFilter = e.dateFilter);
+    }
+    _datePickerChanged(t) {
+      this._datePickerElement = t.target, this._calendarElement && (this._calendarElement.selected = this._datePickerElement.valueAsDate || void 0);
+    }
+    _assignCalendar(t) {
+      var e;
+      this._calendarElement && this._calendarElement === t || (this._calendarElement = t, !(!("valueAsDate" in (this._datePickerElement ?? {})) || !((e = this._calendarElement) != null && e.resetPosition)) && (this._calendarElement.selected = this._datePickerElement.valueAsDate ?? void 0, this._configureCalendar(this._calendarElement, this._datePickerElement), this._calendarElement.resetPosition()));
+    }
+    updated(t) {
+      super.updated(t), this._popoverElement.trigger = this._triggerElement;
+    }
+    _nowOrUndefined() {
+      var t;
+      return (t = this._datePickerElement) != null && t.hasCustomNow() ? this._datePickerElement.now : void 0;
+    }
+    render() {
+      var t, e;
+      return K`
       <sbb-mini-button
         class="sbb-datepicker-toggle__trigger"
         icon-name="calendar-small"
-        aria-label=${v[this._language.current]}
-        ?disabled=${!h && (!this._datePickerElement || this._disabled)}
+        aria-label=${ae[this._language.current]}
+        ?disabled=${!J && (!this._datePickerElement || this._disabled)}
         ?negative=${this.negative}
-        ${c((i) => this._triggerElement = i)}
+        ${v((i) => this._triggerElement = i)}
       ></sbb-mini-button>
       <sbb-popover
         @willOpen=${() => this._calendarElement.resetPosition()}
         @didOpen=${() => {
-      u.mostRecentModality === "keyboard" && this._calendarElement.focus();
-    }}
+        Z.mostRecentModality === "keyboard" && this._calendarElement.focus();
+      }}
         .trigger=${this._triggerElement}
         hide-close-button
-        ${c((i) => this._popoverElement = i)}
+        ${v((i) => this._popoverElement = i)}
       >
-        ${this._renderCalendar ? m`<sbb-calendar
+        ${this._renderCalendar ? K`<sbb-calendar
               .view=${this.view}
               .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}
+              ?wide=${(t = this._datePickerElement) == null ? void 0 : t.wide}
+              .dateFilter=${(e = this._datePickerElement) == null ? void 0 : e.dateFilter}
               @dateSelected=${(i) => {
-      this._calendarElement.selected = i.detail, this._datePickerElement && (this._datePickerElement.valueAsDate = i.detail);
-    }}
-              ${c(
-      (i) => this._assignCalendar(i)
-    )}
-            ></sbb-calendar>` : g}
+        this._calendarElement.selected = i.detail, this._datePickerElement && (this._datePickerElement.valueAsDate = i.detail);
+      }}
+              ${v((i) => this._assignCalendar(i))}
+            ></sbb-calendar>` : X}
       </sbb-popover>
     `;
-  }
-};
-s.styles = x;
-l([
-  _({ attribute: "date-picker" })
-], s.prototype, "datePicker", 2);
-l([
-  _()
-], s.prototype, "view", 2);
-l([
-  d()
-], s.prototype, "_disabled", 2);
-l([
-  d()
-], s.prototype, "_min", 2);
-l([
-  d()
-], s.prototype, "_max", 2);
-l([
-  d()
-], s.prototype, "_renderCalendar", 2);
-s = l([
-  E("sbb-datepicker-toggle"),
-  P({
-    slot: "prefix"
-  })
-], s);
+    }
+  }, b = new WeakMap(), g = new WeakMap(), u = new WeakMap(), k = new WeakMap(), p = new WeakMap(), f = new WeakMap(), c = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
+    w = [Q({ attribute: "date-picker" })], $ = [Q()], D = [P()], U = [P()], F = [P()], j = [P()], m(l, null, w, { kind: "accessor", name: "datePicker", static: !1, private: !1, access: { has: (e) => "datePicker" in e, get: (e) => e.datePicker, set: (e, i) => {
+      e.datePicker = i;
+    } }, metadata: t }, x, y), m(l, null, $, { kind: "accessor", name: "view", static: !1, private: !1, access: { has: (e) => "view" in e, get: (e) => e.view, set: (e, i) => {
+      e.view = i;
+    } }, metadata: t }, z, S), m(l, null, D, { kind: "accessor", name: "_disabled", static: !1, private: !1, access: { has: (e) => "_disabled" in e, get: (e) => e._disabled, set: (e, i) => {
+      e._disabled = i;
+    } }, metadata: t }, I, A), m(l, null, U, { kind: "accessor", name: "_min", static: !1, private: !1, access: { has: (e) => "_min" in e, get: (e) => e._min, set: (e, i) => {
+      e._min = i;
+    } }, metadata: t }, L, O), m(l, null, F, { kind: "accessor", name: "_max", static: !1, private: !1, access: { has: (e) => "_max" in e, get: (e) => e._max, set: (e, i) => {
+      e._max = i;
+    } }, metadata: t }, M, R), m(l, null, j, { kind: "accessor", name: "_renderCalendar", static: !1, private: !1, access: { has: (e) => "_renderCalendar" in e, get: (e) => e._renderCalendar, set: (e, i) => {
+      e._renderCalendar = i;
+    } }, metadata: t }, N, T), m(null, r = { value: c }, a, { kind: "class", name: c.name, metadata: t }, null, s), c = r.value, t && Object.defineProperty(c, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.styles = de, d(c, s), c;
+})();
 export {
-  s as SbbDatepickerToggleElement
+  we as SbbDatepickerToggleElement
 };