@sbb-esta/lyne-elements 4.1.0 → 4.3.0

package/stepper/stepper/stepper.component.js

@@ -2,7 +2,7 @@ var O = (s) => {
   throw TypeError(s);
 };
 var T = (s, r, a) => r.has(s) || O("Cannot " + a);
-var m = (s, r, a) => (T(s, r, "read from private field"), a ? a.call(s) : r.get(s)), f = (s, r, a) => r.has(s) ? O("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, a), d = (s, r, a, n) => (T(s, r, "write to private field"), n ? n.call(s, a) : r.set(s, a), a);
+var v = (s, r, a) => (T(s, r, "read from private field"), a ? a.call(s) : r.get(s)), g = (s, r, a) => r.has(s) ? O("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, a), d = (s, r, a, l) => (T(s, r, "write to private field"), l ? l.call(s, a) : r.set(s, a), a);
 import { __esDecorate as h, __runInitializers as o } from "tslib";
 import { IntersectionController as R } from "@lit-labs/observers/intersection-controller.js";
 import { css as B, LitElement as D, html as U } from "lit";
@@ -19,29 +19,34 @@ const Y = B`:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var
   large: j,
   ultra: $
 };
-let be = (() => {
-  var c, b, p, l;
-  let s = [q("sbb-stepper")], r, a = [], n, g = G(J(D)), _ = [], z, x = [], S = [], k, y, I = [], w = [], E, M = [], A = [], L, F;
-  return l = class extends g {
+class ee extends Event {
+  constructor(r, a, l, m) {
+    super("stepchange", { bubbles: !0, composed: !0 }), this.selectedIndex = r, this.previousIndex = a, this.selectedStep = l, this.previousStep = m;
+  }
+}
+let ue = (() => {
+  var c, b, p, n;
+  let s = [q("sbb-stepper")], r, a = [], l, m = G(J(D)), f = [], x, z = [], S = [], k, I, y = [], w = [], E, M = [], A = [], L, F;
+  return n = class extends m {
     constructor() {
       super();
-      f(this, c);
-      f(this, b);
-      f(this, p);
-      this._observer = (o(this, _), new R(this, {
+      g(this, c);
+      g(this, b);
+      g(this, p);
+      this._observer = (o(this, f), new R(this, {
         target: null,
         callback: (e) => {
           e.forEach((t) => {
             t.intersectionRatio > 0 && (this._setStepperHeight(this.selected), this._setMarkerSize());
           });
         }
-      })), d(this, c, o(this, x, !1)), this._horizontalFrom = (o(this, S), null), d(this, b, o(this, I, "horizontal")), d(this, p, (o(this, w), o(this, M, Z() ? "s" : "m"))), this._loaded = (o(this, A), !1), this._resizeObserverTimeout = null, this._mediaMatcher = new V(this, {}), this._onStepperResize = () => {
+      })), d(this, c, o(this, z, !1)), this._horizontalFrom = (o(this, S), null), d(this, b, o(this, y, "horizontal")), d(this, p, (o(this, w), o(this, M, Z() ? "s" : "m"))), this._loaded = (o(this, A), !1), this._resizeObserverTimeout = null, this._mediaMatcher = new V(this, {}), this._onStepperResize = () => {
         this._checkOrientation(), this._setStepperHeight(this.selected), clearTimeout(this._resizeObserverTimeout), this.internals.states.add("disable-animation"), this._resizeObserverTimeout = setTimeout(() => this.internals.states.delete("disable-animation"), C);
       }, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e)), this.addEventListener?.("resizechange", (e) => this._onSelectedStepResize(e));
     }
     /** If set to true, only the current and previous labels can be clicked and selected. */
     get linear() {
-      return m(this, c);
+      return v(this, c);
     }
     set linear(e) {
       d(this, c, e);
@@ -55,7 +60,7 @@ let be = (() => {
     }
     /** Steps orientation, either horizontal or vertical. */
     get orientation() {
-      return m(this, b);
+      return v(this, b);
     }
     set orientation(e) {
       d(this, b, e);
@@ -65,7 +70,7 @@ let be = (() => {
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return m(this, p);
+      return v(this, p);
     }
     set size(e) {
       d(this, p, e);
@@ -118,15 +123,15 @@ let be = (() => {
     _select(e) {
       if (!this._isValidStep(e))
         return;
-      const t = {
-        currentIndex: this.selectedIndex,
-        currentStep: this.selected,
+      const t = this.selectedIndex, i = this.selected, _ = {
+        currentIndex: t,
+        currentStep: i,
         nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null,
         nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null
       };
-      if (this.selected && !this.selected.validate(t))
+      if (this.selected && !this.selected.validate(_))
         return;
-      this.selected?.deselect(), e.select(), this._setMarkerSize(), this._setStepperHeight(e), this._configureLinearMode(), document.activeElement?.closest("sbb-stepper") === this && this.selected?.label?.focus();
+      this.selected?.deselect(), e.select(), this.dispatchEvent(new ee(this.selectedIndex, t, this.selected, i)), this._setMarkerSize(), this._setStepperHeight(e), this._configureLinearMode(), document.activeElement?.closest("sbb-stepper") === this && this.selected?.label?.focus();
     }
     _setMarkerSize() {
       if (!this._loaded || !this.selected || this.selectedIndex === void 0 || !this.selected.label)
@@ -159,8 +164,8 @@ let be = (() => {
     }
     _configure() {
       const e = this.steps;
-      e.forEach((t) => t.configure(this._loaded)), e.filter((t) => t.label).map((t) => t.label).forEach((t, i, v) => {
-        t.configure(i + 1, v.length, this._loaded);
+      e.forEach((t) => t.configure(this._loaded)), e.filter((t) => t.label).map((t) => t.label).forEach((t, i, _) => {
+        t.configure(i + 1, _.length, this._loaded);
       }), this._select(this.selected || this._enabledSteps[0]);
     }
     _updateLabels() {
@@ -196,8 +201,8 @@ let be = (() => {
       const t = this._enabledSteps;
       if (!(!t || // don't trap nested handling
       e.target !== this && e.target.parentElement !== this) && N(e)) {
-        const i = t.indexOf(this.selected), v = Q(e, i, t.length);
-        this._select(t[v]), e.preventDefault();
+        const i = t.indexOf(this.selected), _ = Q(e, i, t.length);
+        this._select(t[_]), e.preventDefault();
       }
     }
     render() {
@@ -212,23 +217,26 @@ let be = (() => {
       </div>
     `;
     }
-  }, c = new WeakMap(), b = new WeakMap(), p = new WeakMap(), n = l, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    z = [W(), u({ type: Boolean })], k = [u({ attribute: "horizontal-from", reflect: !0 })], y = [u({ reflect: !0 })], E = [u({ reflect: !0 })], L = [u({ attribute: !1 })], F = [u({ attribute: "selected-index", type: Number })], h(l, null, z, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, i) => {
+  }, c = new WeakMap(), b = new WeakMap(), p = new WeakMap(), l = n, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    x = [W(), u({ type: Boolean })], k = [u({ attribute: "horizontal-from", reflect: !0 })], I = [u({ reflect: !0 })], E = [u({ reflect: !0 })], L = [u({ attribute: !1 })], F = [u({ attribute: "selected-index", type: Number })], h(n, null, x, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, i) => {
       t.linear = i;
-    } }, metadata: e }, x, S), h(l, null, k, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, i) => {
+    } }, metadata: e }, z, S), h(n, null, k, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, i) => {
       t.horizontalFrom = i;
-    } }, metadata: e }, null, _), h(l, null, y, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, i) => {
+    } }, metadata: e }, null, f), h(n, null, I, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, i) => {
       t.orientation = i;
-    } }, metadata: e }, I, w), h(l, null, E, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
+    } }, metadata: e }, y, w), h(n, null, E, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
       t.size = i;
-    } }, metadata: e }, M, A), h(l, null, L, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, i) => {
+    } }, metadata: e }, M, A), h(n, null, L, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, i) => {
       t.selected = i;
-    } }, metadata: e }, null, _), h(l, null, F, { kind: "setter", name: "selectedIndex", static: !1, private: !1, access: { has: (t) => "selectedIndex" in t, set: (t, i) => {
+    } }, metadata: e }, null, f), h(n, null, F, { kind: "setter", name: "selectedIndex", static: !1, private: !1, access: { has: (t) => "selectedIndex" in t, set: (t, i) => {
       t.selectedIndex = i;
-    } }, metadata: e }, null, _), h(null, r = { value: n }, s, { kind: "class", name: n.name, metadata: e }, null, a), n = r.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), l.styles = [X, Y], o(n, a), n;
+    } }, metadata: e }, null, f), h(null, r = { value: l }, s, { kind: "class", name: l.name, metadata: e }, null, a), l = r.value, e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), n.styles = [X, Y], n.events = {
+    stepchange: "stepchange"
+  }, o(l, a), l;
 })();
 export {
-  be as SbbStepperElement
+  ee as SbbStepChangeEvent,
+  ue as SbbStepperElement
 };

package/stepper/stepper.js

@@ -1,4 +1,5 @@
-import { SbbStepperElement as r } from "./stepper/stepper.component.js";
+import { SbbStepChangeEvent as b, SbbStepperElement as p } from "./stepper/stepper.component.js";
 export {
-  r as SbbStepperElement
+  b as SbbStepChangeEvent,
+  p as SbbStepperElement
 };

package/stepper.js

@@ -1,8 +1,9 @@
 import { SbbStepElement as b } from "./stepper/step/step.component.js";
-import { SbbStepLabelElement as r } from "./stepper/step-label/step-label.component.js";
-import { SbbStepperElement as o } from "./stepper/stepper/stepper.component.js";
+import { SbbStepLabelElement as S } from "./stepper/step-label/step-label.component.js";
+import { SbbStepChangeEvent as m, SbbStepperElement as o } from "./stepper/stepper/stepper.component.js";
 export {
+  m as SbbStepChangeEvent,
   b as SbbStepElement,
-  r as SbbStepLabelElement,
+  S as SbbStepLabelElement,
   o as SbbStepperElement
 };