@sbb-esta/lyne-elements 2.0.2 → 2.1.0

package/datepicker/datepicker-toggle.js

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

package/datepicker/datepicker.js

@@ -1,74 +1,84 @@
-var N = (i) => {
+var L = (i) => {
   throw TypeError(i);
 };
-var L = (i, n, r) => n.has(i) || N("Cannot " + r);
-var f = (i, n, r) => (L(i, n, "read from private field"), r ? r.call(i) : n.get(i)), b = (i, n, r) => n.has(i) ? N("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(i) : n.set(i, r), h = (i, n, r, d) => (L(i, n, "write to private field"), d ? d.call(i, r) : n.set(i, r), r);
-import { __esDecorate as p, __runInitializers as u } from "tslib";
-import { css as q, isServer as H, html as $, LitElement as B } from "lit";
-import { customElement as G, property as A, state as J } from "lit/decorators.js";
-import { readConfig as K } from "../core/config.js";
-import { SbbLanguageController as Q } from "../core/controllers.js";
-import { defaultDateAdapter as W } from "../core/datetime.js";
-import { forceType as X } from "../core/decorators.js";
-import { findInput as Y, findReferencedElement as Z } from "../core/dom.js";
-import { EventEmitter as E, forwardEvent as tt } from "../core/eventing.js";
-import { i18nDatePickerPlaceholder as R, i18nDateChangedTo as et } from "../core/i18n.js";
-const at = q`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-function mt(i, n) {
+var R = (i, n, r) => n.has(i) || L("Cannot " + r);
+var b = (i, n, r) => (R(i, n, "read from private field"), r ? r.call(i) : n.get(i)), f = (i, n, r) => n.has(i) ? L("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(i) : n.set(i, r), o = (i, n, r, d) => (R(i, n, "write to private field"), d ? d.call(i, r) : n.set(i, r), r);
+import { __esDecorate as h, __runInitializers as u } from "tslib";
+import { css as $, isServer as q, html as B, LitElement as G } from "lit";
+import { customElement as J, property as A, state as K } from "lit/decorators.js";
+import { readConfig as Q } from "../core/config.js";
+import { SbbLanguageController as W } from "../core/controllers.js";
+import { defaultDateAdapter as X } from "../core/datetime.js";
+import { forceType as Y } from "../core/decorators.js";
+import { findInput as Z, findReferencedElement as tt } from "../core/dom.js";
+import { EventEmitter as E, forwardEvent as et } from "../core/eventing.js";
+import { i18nDatePickerPlaceholder as j, i18nDateChangedTo as at } from "../core/i18n.js";
+import { SbbDatepickerAssociationHostController as it } from "./common.js";
+const st = $`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+function At(i, n) {
   var r, d;
-  return n ? Z(n) : (d = (r = i.closest) == null ? void 0 : r.call(i, "sbb-form-field")) == null ? void 0 : d.querySelector("sbb-datepicker");
+  return n ? tt(n) : (d = (r = i.closest) == null ? void 0 : r.call(i, "sbb-form-field")) == null ? void 0 : d.querySelector("sbb-datepicker");
 }
-const vt = () => new CustomEvent("datepickerControlRegistered", {
+const Et = () => new CustomEvent("datepickerControlRegistered", {
   bubbles: !1,
   composed: !0
 });
-let ft = (() => {
-  var _, c, m, v, l;
-  let i = [G("sbb-datepicker")], n, r = [], d, g = B, D = [], w, y = [], k = [], C, I = [], x = [], F, z = [], U = [], O, M, P, S = [], V = [];
-  var o = (l = class extends g {
+let nt = 0, Dt = (() => {
+  var c, _, m, v, l;
+  let i = [J("sbb-datepicker")], n, r = [], d, g = G, D = [], w, y = [], C = [], k, I = [], x = [], F, z = [], U = [], O, M, P, S = [], V = [];
+  var p = (l = class extends g {
     constructor() {
-      var t, e;
+      var t;
       super();
-      b(this, _);
-      b(this, c);
-      b(this, m);
-      b(this, v);
-      h(this, _, (u(this, D), u(this, y, !1))), h(this, c, (u(this, k), u(this, I, () => !0))), h(this, m, (u(this, x), u(this, z, null))), this._now = u(this, U), this._change = new E(this, o.events.change, {
+      f(this, c);
+      f(this, _);
+      f(this, m);
+      f(this, v);
+      o(this, c, (u(this, D), u(this, y, !1))), o(this, _, (u(this, C), u(this, I, () => !0))), o(this, m, (u(this, x), u(this, z, null))), this._now = u(this, U), o(this, v, u(this, S, null)), this._change = (u(this, V), new E(this, p.events.change, {
         bubbles: !0
-      }), this._inputUpdated = new E(this, o.events.inputUpdated, { bubbles: !0, cancelable: !0 }), this._datePickerUpdated = new E(this, o.events.datePickerUpdated, {
+      })), this._inputUpdated = new E(this, p.events.inputUpdated, { bubbles: !0, cancelable: !0 }), this._datePickerUpdated = new E(this, p.events.datePickerUpdated, {
         bubbles: !0,
         cancelable: !0
-      }), this._validationChange = new E(this, o.events.validationChange), h(this, v, u(this, S, null)), this._inputElementPlaceholderMutable = (u(this, V), !1), this._inputObserver = H ? null : new MutationObserver((a) => {
-        if (this._emitInputUpdated(), this._inputElement && (a != null && a.some((s) => s.attributeName === "value"))) {
-          const s = this._inputElement.getAttribute("value");
+      }), this._validationChange = new E(this, p.events.validationChange), this._inputElementPlaceholderMutable = !1, this._inputObserver = q ? null : new MutationObserver((e) => {
+        var a;
+        if (this._emitInputUpdated(), (a = this._associationController) == null || a.updateControls(), this.inputElement && (e != null && e.some((s) => s.attributeName === "value"))) {
+          const s = this.inputElement.getAttribute("value");
           this.valueAsDate = this._dateAdapter.parse(s, this.now) ?? s;
         }
-      }), this._dateAdapter = ((t = K().datetime) == null ? void 0 : t.dateAdapter) ?? W, this._language = new Q(this).withHandler(() => {
-        this._inputElement && (this._inputElementPlaceholderMutable && (this._inputElement.placeholder = R[this._language.current]), this.valueAsDate && (this._inputElement.value = this._dateAdapter.format(this.valueAsDate)));
-      }), (e = this.addEventListener) == null || e.call(this, "datepickerControlRegistered", () => this._emitInputUpdated());
+      }), this._dateAdapter = ((t = Q().datetime) == null ? void 0 : t.dateAdapter) ?? X, this._language = new W(this).withHandler(() => {
+        this.inputElement && (this._inputElementPlaceholderMutable && (this.inputElement.placeholder = j[this._language.current]), this.valueAsDate && (this.inputElement.value = this._dateAdapter.format(this.valueAsDate)));
+      }), this._associationController = new it(this);
     }
     /** If set to true, two months are displayed. */
     get wide() {
-      return f(this, _);
+      return b(this, c);
     }
     set wide(t) {
-      h(this, _, t);
+      o(this, c, t);
     }
     /** A function used to filter out dates. */
     get dateFilter() {
-      return f(this, c);
+      return b(this, _);
     }
     set dateFilter(t) {
-      h(this, c, t);
+      o(this, _, t);
     }
-    /** Reference of the native input connected to the datepicker. */
+    /**
+     * Reference of the native input connected to the datepicker.
+     * If given a string, it will be treated as an id reference and an attempt is
+     * made to be resolved for the containing document fragment.
+     * If given a HTMLElement instance, it will be used as is.
+     */
     get input() {
-      return f(this, m);
+      return b(this, m);
     }
     set input(t) {
-      h(this, m, t);
+      o(this, m, t);
     }
-    /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */
+    /**
+     * A configured date which acts as the current date instead of the real current date.
+     * Recommended for testing purposes.
+     */
     set now(t) {
       this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(t));
     }
@@ -77,19 +87,23 @@ let ft = (() => {
     }
     /** The currently selected date as a Date or custom date provider instance. */
     set valueAsDate(t) {
-      this._valueAsDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(t)), this._tryApplyFormatToInput() && this._inputElement.dispatchEvent(new Event("blur", { composed: !0 }));
+      this._valueAsDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(t)), this._tryApplyFormatToInput() && this.inputElement.dispatchEvent(new Event("blur", { composed: !0 }));
     }
     get valueAsDate() {
       return this._valueAsDate ?? null;
     }
+    /** The resolved associated input element, as defined by `input`. */
+    get inputElement() {
+      return this._inputElement;
+    }
     get _inputElement() {
-      return f(this, v);
+      return b(this, v);
     }
     set _inputElement(t) {
-      h(this, v, t);
+      o(this, v, t);
     }
     connectedCallback() {
-      super.connectedCallback(), this._attachInput(), this._inputElement && this._emitInputUpdated();
+      this.id || (this.id = `sbb-datepicker-${++nt}`), super.connectedCallback(), this._attachInput();
     }
     willUpdate(t) {
       super.willUpdate(t), t.has("input") && this._attachInput(), (t.has("wide") || t.has("dateFilter") || t.has("now")) && this._datePickerUpdated.emit(), t.has("valueAsDate") && this._setAriaLiveMessage();
@@ -109,39 +123,40 @@ let ft = (() => {
       return !!this._now;
     }
     _attachInput() {
-      var e, a, s;
-      const t = Y(this, this.input);
-      if (this._inputElement !== t && (this._inputElement && ((e = this._datePickerController) == null || e.abort(), (a = this._inputObserver) == null || a.disconnect()), this._inputElement = t, t)) {
+      var e, a, s, T;
+      const t = Z(this, this.input);
+      if (this.inputElement !== t && (this.inputElement && ((e = this._datePickerController) == null || e.abort(), (a = this._inputObserver) == null || a.disconnect()), this._inputElement = t, t)) {
         this._datePickerController = new AbortController(), (s = this._inputObserver) == null || s.observe(t, {
           attributeFilter: ["disabled", "readonly", "min", "max", "value"]
-        }), this._inputElementPlaceholderMutable = !t.placeholder, t.type = "text", this._inputElementPlaceholderMutable && (t.placeholder = R[this._language.current]);
-        const T = { signal: this._datePickerController.signal };
-        t.addEventListener("input", (j) => {
-          tt(j, this), this._parseInput();
-        }, T), t.addEventListener("change", () => this._handleInputChange(), T), this._parseInput(!0), this._tryApplyFormatToInput(), this._validateDate();
+        }), this._inputElementPlaceholderMutable = !t.placeholder, t.type = "text", this._inputElementPlaceholderMutable && (t.placeholder = j[this._language.current]);
+        const N = { signal: this._datePickerController.signal };
+        t.addEventListener("input", (H) => {
+          et(H, this), this._parseInput();
+        }, N), t.addEventListener("change", () => this._handleInputChange(), N), this._parseInput(!0), this._tryApplyFormatToInput(), this._validateDate(), this._emitInputUpdated(), (T = this._associationController) == null || T.updateControls();
       }
     }
     _emitInputUpdated() {
-      const { disabled: t, readOnly: e, min: a, max: s } = this._inputElement ?? {};
+      const { disabled: t, readOnly: e, min: a, max: s } = this.inputElement ?? {};
       this._inputUpdated.emit({ disabled: t, readonly: e, min: a, max: s });
     }
     _handleInputChange() {
-      this._tryApplyFormatToInput() || (this._validateDate(), this._setAriaLiveMessage(), this._change.emit());
+      var t;
+      this._tryApplyFormatToInput() || (this._validateDate(), this._setAriaLiveMessage(), this._change.emit(), (t = this._associationController) == null || t.updateControls());
     }
     _tryApplyFormatToInput() {
-      if (!this._inputElement)
+      if (!this.inputElement)
         return !1;
       const t = this.valueAsDate ? this._dateAdapter.format(this.valueAsDate) : "";
-      return t && this._inputElement.value !== t ? (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this._inputElement, t), this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._inputElement.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), !0) : !1;
+      return t && this.inputElement.value !== t ? (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this.inputElement, t), this.inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.inputElement.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), !0) : !1;
     }
     _validateDate() {
-      if (!this._inputElement)
+      if (!this.inputElement)
         return;
-      const t = !this._inputElement.value || this._isDateAvailable(), e = !this._inputElement.hasAttribute("data-sbb-invalid");
-      this._inputElement.toggleAttribute("data-sbb-invalid", !t), e !== t && this._validationChange.emit({ valid: t });
+      const t = !this.inputElement.value || this._isDateAvailable(), e = !this.inputElement.hasAttribute("data-sbb-invalid");
+      this.inputElement.toggleAttribute("data-sbb-invalid", !t), e !== t && this._validationChange.emit({ valid: t });
     }
     _parseInput(t = !1) {
-      const e = this._inputElement.value;
+      const e = this.inputElement.value;
       this._valueAsDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.parse(e, this.now)), t && !this._valueAsDate && (this._valueAsDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e)));
     }
     _setAriaLiveMessage() {
@@ -152,12 +167,12 @@ let ft = (() => {
           t.innerText = "";
         else {
           const s = this._dateAdapter.format(this.valueAsDate, { weekdayStyle: "long" });
-          t.innerText = `${et[this._language.current]} ${s}`;
+          t.innerText = `${at[this._language.current]} ${s}`;
         }
       else return;
     }
     render() {
-      return $`<p id="status-container" role="status"></p>`;
+      return B`<p id="status-container" role="status"></p>`;
     }
     /**
      * Calculates the first available date before the given one,
@@ -166,7 +181,7 @@ let ft = (() => {
      */
     findPreviousAvailableDate(t) {
       var s;
-      const e = this._findAvailableDate(t, -1), a = this._dateAdapter.deserialize((s = this._inputElement) == null ? void 0 : s.min);
+      const e = this._findAvailableDate(t, -1), a = this._dateAdapter.deserialize((s = this.inputElement) == null ? void 0 : s.min);
       return !a || this._dateAdapter.isValid(a) && this._dateAdapter.compareDate(e, a) >= 0 ? e : t;
     }
     /**
@@ -176,7 +191,7 @@ let ft = (() => {
      */
     findNextAvailableDate(t) {
       var s;
-      const e = this._findAvailableDate(t, 1), a = this._dateAdapter.deserialize((s = this._inputElement) == null ? void 0 : s.max);
+      const e = this._findAvailableDate(t, 1), a = this._dateAdapter.deserialize((s = this.inputElement) == null ? void 0 : s.max);
       return !a || this._dateAdapter.isValid(a) && this._dateAdapter.compareDate(e, a) <= 0 ? e : t;
     }
     /**
@@ -199,34 +214,34 @@ let ft = (() => {
       var a, s;
       if (!this.valueAsDate)
         return !1;
-      const t = this._dateAdapter.deserialize((a = this._inputElement) == null ? void 0 : a.min), e = this._dateAdapter.deserialize((s = this._inputElement) == null ? void 0 : s.max);
+      const t = this._dateAdapter.deserialize((a = this.inputElement) == null ? void 0 : a.min), e = this._dateAdapter.deserialize((s = this.inputElement) == null ? void 0 : s.max);
       return this._dateAdapter.isValid(t) && this._dateAdapter.compareDate(this.valueAsDate, t) < 0 || this._dateAdapter.isValid(e) && this._dateAdapter.compareDate(this.valueAsDate, e) > 0 ? !1 : this.dateFilter ? this.dateFilter(this.valueAsDate) : !0;
     }
-  }, _ = new WeakMap(), c = new WeakMap(), m = new WeakMap(), v = new WeakMap(), d = l, (() => {
+  }, c = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), v = new WeakMap(), d = l, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    w = [X(), A({ type: Boolean })], C = [A({ attribute: !1 })], F = [A()], O = [A()], M = [A({ attribute: !1 })], P = [J()], p(l, null, w, { kind: "accessor", name: "wide", static: !1, private: !1, access: { has: (e) => "wide" in e, get: (e) => e.wide, set: (e, a) => {
+    w = [Y(), A({ type: Boolean })], k = [A({ attribute: !1 })], F = [A()], O = [A()], M = [A({ attribute: !1 })], P = [K()], h(l, null, w, { kind: "accessor", name: "wide", static: !1, private: !1, access: { has: (e) => "wide" in e, get: (e) => e.wide, set: (e, a) => {
       e.wide = a;
-    } }, metadata: t }, y, k), p(l, null, C, { kind: "accessor", name: "dateFilter", static: !1, private: !1, access: { has: (e) => "dateFilter" in e, get: (e) => e.dateFilter, set: (e, a) => {
+    } }, metadata: t }, y, C), h(l, null, k, { kind: "accessor", name: "dateFilter", static: !1, private: !1, access: { has: (e) => "dateFilter" in e, get: (e) => e.dateFilter, set: (e, a) => {
       e.dateFilter = a;
-    } }, metadata: t }, I, x), p(l, null, F, { kind: "accessor", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, get: (e) => e.input, set: (e, a) => {
+    } }, metadata: t }, I, x), h(l, null, F, { kind: "accessor", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, get: (e) => e.input, set: (e, a) => {
       e.input = a;
-    } }, metadata: t }, z, U), p(l, null, O, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, set: (e, a) => {
+    } }, metadata: t }, z, U), h(l, null, O, { kind: "setter", name: "now", static: !1, private: !1, access: { has: (e) => "now" in e, set: (e, a) => {
       e.now = a;
-    } }, metadata: t }, null, D), p(l, null, M, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, a) => {
+    } }, metadata: t }, null, D), h(l, null, M, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, a) => {
       e.valueAsDate = a;
-    } }, metadata: t }, null, D), p(l, null, P, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, a) => {
+    } }, metadata: t }, null, D), h(l, null, P, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, a) => {
       e._inputElement = a;
-    } }, metadata: t }, S, V), p(null, n = { value: d }, i, { kind: "class", name: d.name, metadata: t }, null, r), o = d = n.value, t && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.styles = at, l.events = {
+    } }, metadata: t }, S, V), h(null, n = { value: d }, i, { kind: "class", name: d.name, metadata: t }, null, r), p = d = n.value, t && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.styles = st, l.events = {
     change: "change",
     inputUpdated: "inputUpdated",
     datePickerUpdated: "datePickerUpdated",
     validationChange: "validationChange"
   }, u(d, r), l);
-  return o = d;
+  return p = d;
 })();
 export {
-  ft as SbbDatepickerElement,
-  vt as datepickerControlRegisteredEventFactory,
-  mt as getDatePicker
+  Dt as SbbDatepickerElement,
+  Et as datepickerControlRegisteredEventFactory,
+  At as getDatePicker
 };

package/development/accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/elements/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;;AAIjD;;;;GAIG;AACH,qBAEM,mBAAoB,SAAQ,wBAA6B;IAC7D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SACgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEvD;;;OAGG;IACH,SAEgB,UAAU,EAAE,aAAa,GAAG,IAAI,CAAQ;IAExD,8EAA8E;IAC9E,SAGgB,KAAK,EAAE,OAAO,CAAS;;IAkBvC,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;cAUD,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU5E,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,iBAAiB;cAWN,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/elements/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;;AAIjD;;;;GAIG;AACH,qBAEM,mBAAoB,SAAQ,wBAA6B;IAC7D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SACgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEvD;;;OAGG;IACH,SAEgB,UAAU,EAAE,aAAa,GAAG,IAAI,CAAQ;IAExD,8EAA8E;IAC9E,SAMgB,KAAK,EAAE,OAAO,CAAS;;IAkBvC,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,YAAY;cAUD,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU5E,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,wBAAwB;IAMhC,OAAO,CAAC,iBAAiB;cAWN,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}