@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/datepicker/datepicker.js

@@ -1,261 +1,261 @@
-import { css as m, LitElement as f, html as v } from "lit";
-import { property as l, state as w, customElement as g } from "lit/decorators.js";
-import { readConfig as y } from "../core/config.js";
-import { SbbConnectedAbortController as D, SbbLanguageController as C } from "../core/controllers.js";
-import { defaultDateAdapter as p } from "../core/datetime.js";
-import { findReferencedElement as x, findInput as u } from "../core/dom.js";
+import { css as c, LitElement as b, html as f } from "lit";
+import { property as u, state as E, customElement as g } from "lit/decorators.js";
+import { readConfig as v } from "../core/config.js";
+import { SbbConnectedAbortController as C, SbbLanguageController as w } from "../core/controllers.js";
+import { defaultDateAdapter as m } from "../core/datetime.js";
+import { findReferencedElement as D, findInput as h } from "../core/dom.js";
 import { EventEmitter as d } from "../core/eventing.js";
-import { i18nDatePickerPlaceholder as c, i18nDateChangedTo as E } from "../core/i18n.js";
-import { AgnosticMutationObserver as V } from "../core/observers.js";
-const k = m`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var A = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (t, e, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? O(e, s) : e, r = t.length - 1, h; r >= 0; r--)
-    (h = t[r]) && (i = (a ? h(e, s, i) : h(i)) || i);
-  return a && i && A(e, s, i), i;
+import { i18nDatePickerPlaceholder as p, i18nDateChangedTo as A } from "../core/i18n.js";
+import { AgnosticMutationObserver as y } from "../core/observers.js";
+const V = c`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (t, e, n, a) => {
+  for (var i = a > 1 ? void 0 : a ? P(e, n) : e, s = t.length - 1, o; s >= 0; s--)
+    (o = t[s]) && (i = (a ? o(e, n, i) : o(i)) || i);
+  return a && i && x(e, n, i), i;
 };
 const U = /(^0?[1-9]?|[12]?[0-9]?|3?[01]?)[.,\\/\-\s](0?[1-9]?|1?[0-2]?)?[.,\\/\-\s](\d{1,4}$)?/;
-function S(t, e) {
-  var s;
+function N(t, e) {
+  var n;
   if (!e) {
-    const a = (s = t.closest) == null ? void 0 : s.call(t, "sbb-form-field");
+    const a = (n = t.closest) == null ? void 0 : n.call(t, "sbb-form-field");
     return a == null ? void 0 : a.querySelector("sbb-datepicker");
   }
-  return x(e);
+  return D(e);
 }
-function b(t, e, s, a) {
+function _(t, e, n, a) {
   let i = a.addCalendarDays(t, e);
-  if (s)
-    for (; !s(i); )
+  if (n)
+    for (; !n(i); )
       i = a.addCalendarDays(i, e);
   return i;
 }
-function $(t, e, s, a) {
-  const i = b(t, -1, e, s), r = s.deserialize(a);
-  return !r || s.isValid(r) && s.compareDate(i, r) >= 0 ? i : t;
+function $(t, e, n, a) {
+  const i = _(t, -1, e, n), s = n.deserialize(a);
+  return !s || n.isValid(s) && n.compareDate(i, s) >= 0 ? i : t;
 }
-function q(t, e, s, a) {
-  const i = b(t, 1, e, s), r = s.deserialize(a);
-  return !r || s.isValid(r) && s.compareDate(i, r) <= 0 ? i : t;
+function H(t, e, n, a) {
+  const i = _(t, 1, e, n), s = n.deserialize(a);
+  return !s || n.isValid(s) && n.compareDate(i, s) <= 0 ? i : t;
 }
-function F(t, e, s, a) {
-  const i = p, r = i.deserialize(s), h = i.deserialize(a);
-  return i.isValid(r) && i.compareDate(t, r) < 0 || i.isValid(h) && i.compareDate(t, h) > 0 ? !1 : e ? e(t) : !0;
+function k(t, e, n, a) {
+  const i = m, s = i.deserialize(n), o = i.deserialize(a);
+  return i.isValid(s) && i.compareDate(t, s) < 0 || i.isValid(o) && i.compareDate(t, o) > 0 ? !1 : e ? e(t) : !0;
 }
-const L = () => new CustomEvent("datepickerControlRegistered", {
+const j = () => new CustomEvent("datepickerControlRegistered", {
   bubbles: !1,
   composed: !0
 });
-let n = class extends f {
+let r = class extends b {
   constructor() {
     var t;
-    super(...arguments), this.wide = !1, this.dateFilter = () => !0, this.g = null, this.p = new d(this, n.events.didChange, {
+    super(...arguments), this.wide = !1, this.dateFilter = () => !0, this._now = null, this._didChange = new d(this, r.events.didChange, {
       bubbles: !0,
       cancelable: !0
-    }), this.q = new d(this, n.events.change, {
+    }), this._change = new d(this, r.events.change, {
       bubbles: !0
-    }), this.j = new d(
+    }), this._inputUpdated = new d(
       this,
-      n.events.inputUpdated,
+      r.events.inputUpdated,
       { bubbles: !0, cancelable: !0 }
-    ), this.r = new d(
+    ), this._datePickerUpdated = new d(
       this,
-      n.events.datePickerUpdated,
+      r.events.datePickerUpdated,
       {
         bubbles: !0,
         cancelable: !0
       }
-    ), this.s = new d(
+    ), this._validationChange = new d(
       this,
-      n.events.validationChange
-    ), this.c = null, this.h = new V(this.l.bind(this)), this.b = ((t = y().datetime) == null ? void 0 : t.dateAdapter) ?? p, this.w = new D(this), this.e = new C(this).withHandler(() => {
-      if (this.a) {
-        this.a.placeholder = c[this.e.current];
+      r.events.validationChange
+    ), this._inputElementState = null, this._inputObserver = new y(this._onInputPropertiesChange.bind(this)), this._dateAdapter = ((t = v().datetime) == null ? void 0 : t.dateAdapter) ?? m, this._abort = new C(this), this._language = new w(this).withHandler(() => {
+      if (this._inputElement) {
+        this._inputElement.placeholder = p[this._language.current];
         const e = this.getValueAsDate();
-        e && (this.a.value = this.f(e));
+        e && (this._inputElement.value = this._format(e));
       }
     });
   }
   set now(t) {
-    this.g = this.b.getValidDateOrNull(this.b.deserialize(t));
+    this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(t));
   }
   get now() {
-    return this.g ?? this.b.today();
+    return this._now ?? this._dateAdapter.today();
   }
-  get a() {
-    return this.c;
+  get _inputElement() {
+    return this._inputElementState;
   }
-  set a(t) {
-    const e = this.c;
-    this.c = t, this.t(this.c, e);
+  set _inputElement(t) {
+    const e = this._inputElementState;
+    this._inputElementState = t, this._registerInputElement(this._inputElementState, e);
   }
-  u(t, e) {
-    t !== e && (this.a = u(this, this.input));
+  _findInput(t, e) {
+    t !== e && (this._inputElement = h(this, this.input));
   }
-  t(t, e) {
-    var s, a;
+  _registerInputElement(t, e) {
+    var n, a;
     if (t !== e) {
-      if ((s = this.d) == null || s.abort(), this.d = new AbortController(), !this.a)
+      if ((n = this._datePickerController) == null || n.abort(), this._datePickerController = new AbortController(), !this._inputElement)
         return;
-      (a = this.h) == null || a.disconnect(), this.h.observe(this.a, {
+      (a = this._inputObserver) == null || a.disconnect(), this._inputObserver.observe(this._inputElement, {
         attributeFilter: ["disabled", "readonly", "min", "max", "value"]
-      }), this.a.type = "text", this.a.placeholder || (this.a.placeholder = c[this.e.current]), this.a.addEventListener(
+      }), this._inputElement.type = "text", this._inputElement.placeholder || (this._inputElement.placeholder = p[this._language.current]), this._inputElement.addEventListener(
         "change",
         (i) => {
-          i instanceof CustomEvent || this.v(i);
+          i instanceof CustomEvent || this._valueChanged(i);
         },
         {
-          signal: this.d.signal
+          signal: this._datePickerController.signal
         }
       );
     }
   }
   /** Gets the input value with the correct date format. */
   getValueAsDate() {
-    if (this.a && this.a.value)
-      return this.i(this.a.value);
+    if (this._inputElement && this._inputElement.value)
+      return this._parse(this._inputElement.value);
   }
   /** Set the input value to the correctly formatted value. */
   setValueAsDate(t) {
     const e = t instanceof Date ? t : new Date(t);
-    this.a && (this.k(this.a.value, e), this.a.dispatchEvent(new Event("blur", { composed: !0 })));
+    this._inputElement && (this._formatAndUpdateValue(this._inputElement.value, e), this._inputElement.dispatchEvent(new Event("blur", { composed: !0 })));
   }
   /**
    * @internal
    * Whether a custom now is configured.
    */
   hasCustomNow() {
-    return !!this.g;
+    return !!this._now;
   }
-  l(t) {
-    var e, s, a, i;
-    this.j.emit({
-      disabled: (e = this.a) == null ? void 0 : e.disabled,
-      readonly: (s = this.a) == null ? void 0 : s.readOnly,
-      min: (a = this.a) == null ? void 0 : a.min,
-      max: (i = this.a) == null ? void 0 : i.max
-    }), this.a && t && Array.from(t).some((r) => r.attributeName === "value") && (this.a.value = this.m(this.a.getAttribute("value")));
+  _onInputPropertiesChange(t) {
+    var e, n, a, i;
+    this._inputUpdated.emit({
+      disabled: (e = this._inputElement) == null ? void 0 : e.disabled,
+      readonly: (n = this._inputElement) == null ? void 0 : n.readOnly,
+      min: (a = this._inputElement) == null ? void 0 : a.min,
+      max: (i = this._inputElement) == null ? void 0 : i.max
+    }), this._inputElement && t && Array.from(t).some((s) => s.attributeName === "value") && (this._inputElement.value = this._getValidValue(this._inputElement.getAttribute("value")));
   }
   connectedCallback() {
     super.connectedCallback();
-    const t = this.w.signal;
-    this.addEventListener("datepickerControlRegistered", () => this.l(), {
+    const t = this._abort.signal;
+    this.addEventListener("datepickerControlRegistered", () => this._onInputPropertiesChange(), {
       signal: t
-    }), this.a = u(this, this.input), this.a && (this.a.value = this.m(this.a.value), this.j.emit({
-      disabled: this.a.disabled,
-      readonly: this.a.readOnly,
-      min: this.a.min,
-      max: this.a.max
+    }), this._inputElement = h(this, this.input), this._inputElement && (this._inputElement.value = this._getValidValue(this._inputElement.value), this._inputUpdated.emit({
+      disabled: this._inputElement.disabled,
+      readonly: this._inputElement.readOnly,
+      min: this._inputElement.min,
+      max: this._inputElement.max
     }));
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("input") && this.u(this.input, t.get("input")), (t.has("wide") || t.has("dateFilter") || t.has("now")) && this.r.emit();
+    super.willUpdate(t), t.has("input") && this._findInput(this.input, t.get("input")), (t.has("wide") || t.has("dateFilter") || t.has("now")) && this._datePickerUpdated.emit();
   }
   disconnectedCallback() {
     var t, e;
-    super.disconnectedCallback(), (t = this.h) == null || t.disconnect(), (e = this.d) == null || e.abort();
+    super.disconnectedCallback(), (t = this._inputObserver) == null || t.disconnect(), (e = this._datePickerController) == null || e.abort();
   }
   firstUpdated(t) {
-    super.firstUpdated(t), this.n(this.getValueAsDate());
+    super.firstUpdated(t), this._setAriaLiveMessage(this.getValueAsDate());
   }
-  x(t) {
-    const e = this.i(t);
-    return this.b.isValid(e) ? this.f(e) : t;
+  _parseAndFormatValue(t) {
+    const e = this._parse(t);
+    return this._dateAdapter.isValid(e) ? this._format(e) : t;
   }
-  o(t) {
+  _createAndComposeDate(t) {
     const e = new Date(t);
-    return this.f(e);
+    return this._format(e);
   }
-  v(t) {
+  _valueChanged(t) {
     const e = t.target.value;
-    this.k(e, this.i(e));
+    this._formatAndUpdateValue(e, this._parse(e));
   }
   /** Applies the correct format to values and triggers event dispatch. */
-  k(t, e) {
-    var s, a;
-    if (this.a) {
-      this.a.value = this.b.isValid(e) ? this.f(e) : t;
-      const i = !t || !!e && F(
+  _formatAndUpdateValue(t, e) {
+    var n, a;
+    if (this._inputElement) {
+      this._inputElement.value = this._dateAdapter.isValid(e) ? this._format(e) : t;
+      const i = !t || !!e && k(
         e,
         this.dateFilter,
-        (s = this.a) == null ? void 0 : s.min,
-        (a = this.a) == null ? void 0 : a.max
-      ), r = !this.a.hasAttribute("data-sbb-invalid");
-      this.a.toggleAttribute("data-sbb-invalid", !i), r !== i && this.s.emit({ valid: i }), this.y(e);
+        (n = this._inputElement) == null ? void 0 : n.min,
+        (a = this._inputElement) == null ? void 0 : a.max
+      ), s = !this._inputElement.hasAttribute("data-sbb-invalid");
+      this._inputElement.toggleAttribute("data-sbb-invalid", !i), s !== i && this._validationChange.emit({ valid: i }), this._emitChange(e);
     }
   }
   /** Emits the change event. */
-  y(t) {
-    this.n(t), this.q.emit(), this.p.emit(), this.a && (this.a.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.a.dispatchEvent(
+  _emitChange(t) {
+    this._setAriaLiveMessage(t), this._change.emit(), this._didChange.emit(), this._inputElement && (this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._inputElement.dispatchEvent(
       new CustomEvent("change", { bubbles: !0, composed: !0 })
     ));
   }
-  m(t) {
+  _getValidValue(t) {
     if (!t)
       return "";
     const e = t.match(U);
-    return (e == null ? void 0 : e.index) === 0 ? this.x(t) : Number.isInteger(+t) ? this.o(+t) : this.b.isValid(new Date(t)) ? this.o(t) : t;
+    return (e == null ? void 0 : e.index) === 0 ? this._parseAndFormatValue(t) : Number.isInteger(+t) ? this._createAndComposeDate(+t) : this._dateAdapter.isValid(new Date(t)) ? this._createAndComposeDate(t) : t;
   }
-  i(t) {
-    return this.dateParser ? this.dateParser(t) : this.b.parse(t, this.now);
+  _parse(t) {
+    return this.dateParser ? this.dateParser(t) : this._dateAdapter.parse(t, this.now);
   }
-  f(t) {
-    return this.format ? this.format(t) : this.b.format(t);
+  _format(t) {
+    return this.format ? this.format(t) : this._dateAdapter.format(t);
   }
-  n(t) {
-    var i, r;
-    const e = new Intl.DateTimeFormat(`${this.e.current}-CH`, {
+  _setAriaLiveMessage(t) {
+    var i, s;
+    const e = new Intl.DateTimeFormat(`${this._language.current}-CH`, {
       weekday: "long"
-    }), s = new Intl.DateTimeFormat("de-CH", {
+    }), n = new Intl.DateTimeFormat("de-CH", {
       day: "2-digit",
       month: "2-digit",
       year: "numeric"
-    }), a = (r = (i = this.shadowRoot) == null ? void 0 : i.querySelector) == null ? void 0 : r.call(i, "#status-container");
-    a && (a.innerText = t ? `${E[this.e.current]} ${e.format(
+    }), a = (s = (i = this.shadowRoot) == null ? void 0 : i.querySelector) == null ? void 0 : s.call(i, "#status-container");
+    a && (a.innerText = t ? `${A[this._language.current]} ${e.format(
       t
-    )}, ${s.format(t)}` : "");
+    )}, ${n.format(t)}` : "");
   }
   render() {
-    return v`<p id="status-container" role="status"></p>`;
+    return f`<p id="status-container" role="status"></p>`;
   }
 };
-n.styles = k;
-n.events = {
+r.styles = V;
+r.events = {
   didChange: "didChange",
   change: "change",
   inputUpdated: "inputUpdated",
   datePickerUpdated: "datePickerUpdated",
   validationChange: "validationChange"
 };
-o([
-  l({ type: Boolean })
-], n.prototype, "wide", 2);
-o([
-  l({ attribute: "date-filter" })
-], n.prototype, "dateFilter", 2);
-o([
-  l({ attribute: "date-parser" })
-], n.prototype, "dateParser", 2);
-o([
-  l()
-], n.prototype, "format", 2);
-o([
-  l()
-], n.prototype, "input", 2);
-o([
-  l()
-], n.prototype, "now", 1);
-o([
-  w()
-], n.prototype, "a", 1);
-n = o([
+l([
+  u({ type: Boolean })
+], r.prototype, "wide", 2);
+l([
+  u({ attribute: "date-filter" })
+], r.prototype, "dateFilter", 2);
+l([
+  u({ attribute: "date-parser" })
+], r.prototype, "dateParser", 2);
+l([
+  u()
+], r.prototype, "format", 2);
+l([
+  u()
+], r.prototype, "input", 2);
+l([
+  u()
+], r.prototype, "now", 1);
+l([
+  E()
+], r.prototype, "_inputElement", 1);
+r = l([
   g("sbb-datepicker")
-], n);
+], r);
 export {
-  n as SbbDatepickerElement,
-  L as datepickerControlRegisteredEventFactory,
-  q as findNextAvailableDate,
+  r as SbbDatepickerElement,
+  j as datepickerControlRegisteredEventFactory,
+  H as findNextAvailableDate,
   $ as findPreviousAvailableDate,
-  b as getAvailableDate,
-  S as getDatePicker,
-  F as isDateAvailable
+  _ as getAvailableDate,
+  N as getDatePicker,
+  k as isDateAvailable
 };

package/dialog/dialog-title.js

@@ -1,7 +1,7 @@
 import { css as v, nothing as g } from "lit";
-import { property as r, customElement as p } from "lit/decorators.js";
-import { html as c, unsafeStatic as b } from "lit/static-html.js";
-import { SbbFocusVisibleWithinController as u } from "../core/a11y.js";
+import { property as b, customElement as u } from "lit/decorators.js";
+import { html as c, unsafeStatic as r } from "lit/static-html.js";
+import { SbbFocusVisibleWithinController as p } from "../core/a11y.js";
 import { SbbLanguageController as f } from "../core/controllers.js";
 import { EventEmitter as m } from "../core/eventing.js";
 import { i18nCloseDialog as w, i18nGoBack as _ } from "../core/i18n.js";
@@ -16,44 +16,44 @@ var y = Object.defineProperty, B = Object.getOwnPropertyDescriptor, o = (e, s, i
 };
 let a = class extends h {
   constructor() {
-    super(), this.backButton = !1, this.a = !1, this.c = new m(
+    super(), this.backButton = !1, this._hideOnScroll = !1, this._backClick = new m(
       this,
       a.events.backClick
-    ), this.b = new f(this), this.level = "2", this.visualLevel = "3";
+    ), this._language = new f(this), this.level = "2", this.visualLevel = "3";
   }
   set hideOnScroll(e) {
-    this.a = e === "" ? !0 : e;
+    this._hideOnScroll = e === "" ? !0 : e;
   }
   get hideOnScroll() {
-    return this.a;
+    return this._hideOnScroll;
   }
   connectedCallback() {
-    super.connectedCallback(), new u(this);
+    super.connectedCallback(), new p(this);
   }
   willUpdate(e) {
     super.willUpdate(e), (e.has("backButton") || e.has("accessibilityBackLabel")) && (this.backButton = !this.backButton && this.accessibilityBackLabel ? !0 : this.backButton);
   }
   render() {
     const e = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", s = c`
-      <${b(e)}
+      <${r(e)}
         class="sbb-dialog__close"
-        aria-label=${this.accessibilityCloseLabel || w[this.b.current]}
+        aria-label=${this.accessibilityCloseLabel || w[this._language.current]}
         ?negative=${this.negative}
         size="m"
         type="button"
         icon-name="cross-small"
         sbb-dialog-close
-      ></${b(e)}>
+      ></${r(e)}>
     `, i = c`
-      <${b(e)}
+      <${r(e)}
         class="sbb-dialog__back"
-        aria-label=${this.accessibilityBackLabel || _[this.b.current]}
+        aria-label=${this.accessibilityBackLabel || _[this._language.current]}
         ?negative=${this.negative}
         size="m"
         type="button"
         icon-name="chevron-small-left-small"
-        @click=${() => this.c.emit()}
-      ></${b(e)}>
+        @click=${() => this._backClick.emit()}
+      ></${r(e)}>
     `;
     return c`
       <div class="sbb-dialog__header">
@@ -67,19 +67,19 @@ a.events = {
   backClick: "requestBackAction"
 };
 o([
-  r({ attribute: "back-button", type: Boolean })
+  b({ attribute: "back-button", type: Boolean })
 ], a.prototype, "backButton", 2);
 o([
-  r({ attribute: "accessibility-close-label" })
+  b({ attribute: "accessibility-close-label" })
 ], a.prototype, "accessibilityCloseLabel", 2);
 o([
-  r({ attribute: "accessibility-back-label" })
+  b({ attribute: "accessibility-back-label" })
 ], a.prototype, "accessibilityBackLabel", 2);
 o([
-  r({ attribute: "hide-on-scroll" })
+  b({ attribute: "hide-on-scroll" })
 ], a.prototype, "hideOnScroll", 1);
 a = o([
-  p("sbb-dialog-title")
+  u("sbb-dialog-title")
 ], a);
 export {
   a as SbbDialogTitleElement