@sbb-esta/lyne-elements 2.5.0 → 2.5.1

package/select.js

@@ -14,7 +14,7 @@ import { SbbOpenCloseBaseElement as oe } from "./core/base-elements.js";
 import { SbbEscapableOverlayController as le, SbbLanguageController as re } from "./core/controllers.js";
 import { hostAttributes as ne, forceType as E, handleDistinctChange as S, getOverride as be } from "./core/decorators.js";
 import { setOrRemoveAttribute as D, isZeroAnimationDuration as de, isNextjs as J, isSafari as he } from "./core/dom.js";
-import { EventEmitter as I } from "./core/eventing.js";
+import { EventEmitter as V } from "./core/eventing.js";
 import { i18nSelectionRequired as pe } from "./core/i18n.js";
 import { SbbUpdateSchedulerMixin as ce, SbbDisabledMixin as ue, SbbNegativeMixin as ve, SbbHydrationMixin as _e, SbbRequiredMixin as ge, SbbFormAssociatedMixin as fe } from "./core/mixins.js";
 import { isEventOnElement as Q, setOverlayPosition as me, overlayGapFixCorners as ye } from "./core/overlay.js";
@@ -23,8 +23,8 @@ let xe = 0, Re = (() => {
   var p, c, u, v, _, n;
   let a = [se("sbb-select"), ne({
     role: O ? "listbox" : null
-  })], l, r = [], h, V = ce(ue(ve(_e(ge(fe(oe)))))), L, P = [], $ = [], T, z = [], U = [], q, M = [], R = [], N, B = [], K = [], F, j = [], H = [];
-  var y = (n = class extends V {
+  })], l, r = [], h, I = ce(ue(ve(_e(ge(fe(oe)))))), L, P = [], $ = [], T, z = [], U = [], q, M = [], R = [], N, B = [], K = [], F, j = [], H = [];
+  var y = (n = class extends I {
     constructor() {
       var e, t, s;
       super();
@@ -33,7 +33,7 @@ let xe = 0, Re = (() => {
       f(this, u);
       f(this, v);
       f(this, _);
-      b(this, p, d(this, P, "")), b(this, c, (d(this, $), d(this, z, !1))), b(this, u, (d(this, U), d(this, M, !1))), b(this, v, (d(this, R), d(this, B, !1))), b(this, _, (d(this, K), d(this, j, null))), this._change = (d(this, H), new I(this, y.events.change)), this._input = new I(this, y.events.input), this._stateChange = new I(this, y.events.stateChange, {
+      b(this, p, d(this, P, "")), b(this, c, (d(this, $), d(this, z, !1))), b(this, u, (d(this, U), d(this, M, !1))), b(this, v, (d(this, R), d(this, B, !1))), b(this, _, (d(this, K), d(this, j, null))), this._change = (d(this, H), new V(this, y.events.change)), this._input = new V(this, y.events.input), this._displayValueChanged = new V(this, y.events.displayValueChange, {
         composed: !1
       }), this._sbbEscapableOverlayController = new le(this), this._overlayId = `sbb-select-${++xe}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._languageController = new re(this), this._pointerDownListener = (i) => {
         this._isPointerDownEventOnMenu = Q(this._overlay, i);
@@ -134,7 +134,7 @@ let xe = 0, Re = (() => {
       !Array.isArray(s) && t !== s || Array.isArray(s) && !s.includes(t) || this._updateDisplayValue(s);
     }
     _updateDisplayValue(e) {
-      Array.isArray(e) ? this._displayValue = e.map((t) => t.textContent).join(", ") || null : e ? this._displayValue = (e == null ? void 0 : e.textContent) || null : this._displayValue = null;
+      Array.isArray(e) ? this._displayValue = e.map((t) => t.textContent).join(", ") || null : e ? this._displayValue = (e == null ? void 0 : e.textContent) || null : this._displayValue = null, this._displayValueChanged.emit();
     }
     /**
      * The `value` property should be adapted when the `multiple` property changes:
@@ -161,7 +161,6 @@ let xe = 0, Re = (() => {
         const s = t.find((i) => (i.value ?? i.getAttribute("value")) === e) ?? null;
         s && (s.selected = !0), t.filter((i) => (i.value ?? i.getAttribute("value")) !== e).forEach((i) => i.selected = !1), this._updateDisplayValue(s);
       }
-      this._stateChange.emit({ type: "value", value: e });
     }
     firstUpdated(e) {
       super.firstUpdated(e), this.focus = () => this._triggerElement.focus(), this.blur = () => this._triggerElement.blur(), J() || (this.startUpdate(), this._setupSelect());
@@ -380,7 +379,7 @@ let xe = 0, Re = (() => {
             t.push(s.value);
           this.value = t;
         }
-      } else e && (this._activeItemIndex = this._filteredOptions.findIndex((t) => t === e), this.value = e.value);
+      } else e ? (this._activeItemIndex = this._filteredOptions.findIndex((t) => t === e), this.value = e.value) : this.value && this._onValueChanged(this.value);
     }
     _getSelected() {
       return this.multiple ? this._filteredOptions.filter((e) => e.selected) : this._filteredOptions.find((e) => e.selected) ?? null;
@@ -454,7 +453,7 @@ let xe = 0, Re = (() => {
     `;
     }
   }, p = new WeakMap(), c = new WeakMap(), u = new WeakMap(), v = new WeakMap(), _ = new WeakMap(), h = n, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(V[Symbol.metadata] ?? null) : void 0;
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(I[Symbol.metadata] ?? null) : void 0;
     L = [E(), k()], T = [E(), S((t, s) => t._onMultipleChanged(s)), k({ reflect: !0, type: Boolean })], q = [E(), S((t, s) => t._closeOnDisabledReadonlyChanged(s)), k({ reflect: !0, type: Boolean }), be((t, s) => s || t.isDisabledExternally())], N = [E(), S((t, s) => t._closeOnDisabledReadonlyChanged(s)), k({ type: Boolean })], F = [ie()], m(n, null, L, { kind: "accessor", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, get: (t) => t.placeholder, set: (t, s) => {
       t.placeholder = s;
     } }, metadata: e }, P, $), m(n, null, T, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, s) => {
@@ -469,7 +468,7 @@ let xe = 0, Re = (() => {
   })(), n.styles = we, n.events = {
     change: "change",
     input: "input",
-    stateChange: "stateChange",
+    displayValueChange: "displayValueChange",
     willOpen: "willOpen",
     didOpen: "didOpen",
     willClose: "willClose",

package/stepper/step/step.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
 import { SbbStepLabelElement } from '../step-label.js';
 export type SbbStepValidateEventDetails = {
     currentIndex: number | null;
@@ -19,7 +19,6 @@ export declare class SbbStepElement extends LitElement {
     };
     /** Emits whenever step switch is triggered. */
     private _validate;
-    private _loaded;
     private _stepper;
     private _label;
     /** The label of the step. */
@@ -51,7 +50,6 @@ export declare class SbbStepElement extends LitElement {
     private _isGoPreviousElement;
     private _getStepLabel;
     connectedCallback(): void;
-    protected firstUpdated(changedProperties: PropertyValues<this>): void;
     protected render(): TemplateResult;
 }
 declare global {

package/stepper/step/step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;CACjC,CAAC;AAEF;;;;;GAKG;AACH,qBAMM,cAAe,SAAQ,UAAU;IACrC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,MAAM,CAAoC;IAElD,6BAA6B;IAC7B,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;;IAOD;;;OAGG;IACI,MAAM,IAAI,IAAI;IAQrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAQvB;;;OAGG;IACI,QAAQ,CAAC,SAAS,EAAE,2BAA2B,GAAG,OAAO;IAIhE;;;OAGG;IACI,SAAS,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI;IAS9C,iGAAiG;IACjG,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,aAAa;IAQL,iBAAiB,IAAI,IAAI;cAOtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK3D,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/step/step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,MAAM,MAAM,2BAA2B,GAAG;IACxC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;CACjC,CAAC;AAEF;;;;;GAKG;AACH,qBAMM,cAAe,SAAQ,UAAU;IACrC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,+CAA+C;IAC/C,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,MAAM,CAAoC;IAElD,6BAA6B;IAC7B,IAAW,KAAK,IAAI,mBAAmB,GAAG,IAAI,CAE7C;;IAOD;;;OAGG;IACI,MAAM,IAAI,IAAI;IAQrB;;;OAGG;IACI,QAAQ,IAAI,IAAI;IAQvB;;;OAGG;IACI,QAAQ,CAAC,SAAS,EAAE,2BAA2B,GAAG,OAAO;IAIhE;;;OAGG;IACI,SAAS,CAAC,aAAa,EAAE,OAAO,GAAG,IAAI;IAS9C,iGAAiG;IACjG,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,aAAa;IAQL,iBAAiB,IAAI,IAAI;cAOtB,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/stepper/step.js

@@ -1,5 +1,5 @@
 import { __esDecorate as c, __runInitializers as h } from "tslib";
-import { css as m, LitElement as u, html as v } from "lit";
+import { css as m, LitElement as v, html as u } from "lit";
 import { customElement as y } from "lit/decorators.js";
 import { hostAttributes as g } from "../core/decorators.js";
 import { EventEmitter as f } from "../core/eventing.js";
@@ -9,7 +9,7 @@ let x = 0, A = (() => {
   let d = [y("sbb-step"), g({
     slot: "step",
     role: "tabpanel"
-  })], b, r = [], s, o = u;
+  })], b, r = [], i, o = v;
   var n = (e = class extends o {
     /** The label of the step. */
     get label() {
@@ -17,14 +17,14 @@ let x = 0, A = (() => {
     }
     constructor() {
       var t;
-      super(), this._validate = new f(this, n.events.validate), this._loaded = !1, this._stepper = null, this._label = null, (t = this.addEventListener) == null || t.call(this, "click", (a) => this._handleClick(a));
+      super(), this._validate = new f(this, n.events.validate), this._stepper = null, this._label = null, (t = this.addEventListener) == null || t.call(this, "click", (a) => this._handleClick(a));
     }
     /**
      * Selects and configures the step.
      * @internal
      */
     select() {
-      !this._loaded || !this.label || (this.toggleAttribute("data-selected", !0), this.label.select());
+      !this.hasUpdated || !this.label || (this.toggleAttribute("data-selected", !0), this.label.select());
     }
     /**
      * Deselects and configures the step.
@@ -50,8 +50,8 @@ let x = 0, A = (() => {
     /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
     _handleClick(t) {
       var l, p;
-      const a = t.composedPath().filter((i) => i instanceof window.HTMLElement);
-      a.some((i) => this._isGoNextElement(i)) ? (l = this._stepper) == null || l.next() : a.some((i) => this._isGoPreviousElement(i)) && ((p = this._stepper) == null || p.previous());
+      const a = t.composedPath().filter((s) => s instanceof window.HTMLElement);
+      a.some((s) => this._isGoNextElement(s)) ? (l = this._stepper) == null || l.next() : a.some((s) => this._isGoPreviousElement(s)) && ((p = this._stepper) == null || p.previous());
     }
     _isGoNextElement(t) {
       return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
@@ -68,11 +68,8 @@ let x = 0, A = (() => {
     connectedCallback() {
       super.connectedCallback(), this.id = this.id || `sbb-step-${x++}`, this._stepper = this.closest("sbb-stepper"), this._label = this._getStepLabel();
     }
-    firstUpdated(t) {
-      super.firstUpdated(t), this._loaded = !0;
-    }
     render() {
-      return v`
+      return u`
       <div class="sbb-step--wrapper">
         <div class="sbb-step">
           <slot></slot>
@@ -80,13 +77,13 @@ let x = 0, A = (() => {
       </div>
     `;
     }
-  }, s = e, (() => {
+  }, i = e, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    c(null, b = { value: s }, d, { kind: "class", name: s.name, metadata: t }, null, r), n = s = b.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+    c(null, b = { value: i }, d, { kind: "class", name: i.name, metadata: t }, null, r), n = i = b.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), e.styles = _, e.events = {
     validate: "validate"
-  }, h(s, r), e);
-  return n = s;
+  }, h(i, r), e);
+  return n = i;
 })();
 export {
   A as SbbStepElement