@sbb-esta/lyne-elements 4.2.0 → 4.3.1

package/stepper/step-label/step-label.component.js

@@ -3,14 +3,14 @@ import { css as c, html as d } from "lit";
 import { customElement as h } from "lit/decorators.js";
 import { SbbButtonBaseElement as f } from "../../core/base-elements.js";
 import { SbbPropertyWatcherController as v } from "../../core/controllers.js";
-import { SbbDisabledMixin as x, removeAriaElements as m, appendAriaElements as u } from "../../core/mixins.js";
+import { SbbDisabledMixin as x, removeAriaElements as u, appendAriaElements as m } from "../../core/mixins.js";
 import { boxSizingStyles as g } from "../../core/styles.js";
-import { SbbIconNameMixin as z } from "../../icon.js";
-const y = c`:host{--sbb-step-label-color: var(--sbb-color-4);--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);--sbb-step-label-prefix-background-color: var(--sbb-background-color-1);--sbb-step-label-gap: var(--sbb-spacing-fixed-4x);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-text-font-size-l) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media(forced-colors:active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host(:is(:state(selected),[state--selected])){--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: Highlight !important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host(:is(:state(size-s),[state--size-s])):before{inset-block-start:calc(var(--sbb-text-font-size-m) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-step-label-prefix-border-style: dashed}@media(forced-colors:active){:host(:disabled){--sbb-step-label-color: GrayText !important}}@media(any-hover:hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor: var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color: var(--sbb-background-color-3);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;cursor:var(--sbb-step-label-cursor);position:relative;display:flex;gap:var(--sbb-step-label-gap);color:var(--sbb-step-label-color)}:host(:is(:state(size-s),[state--size-s])) .sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
+import { SbbIconNameMixin as y } from "../../icon.js";
+const z = c`:host{--sbb-step-label-color: var(--sbb-color-4);--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);--sbb-step-label-prefix-background-color: var(--sbb-background-color-1);--sbb-step-label-gap: var(--sbb-spacing-fixed-4x);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-text-font-size-l) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media(forced-colors:active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host(:is(:state(selected),[state--selected])){--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: Highlight !important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host(:is(:state(size-s),[state--size-s])):before{inset-block-start:calc(var(--sbb-text-font-size-m) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-step-label-prefix-border-style: dashed}@media(forced-colors:active){:host(:disabled){--sbb-step-label-color: GrayText !important}}@media(any-hover:hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor: var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color: var(--sbb-background-color-3);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;cursor:var(--sbb-step-label-cursor);position:relative;display:flex;gap:var(--sbb-step-label-gap);color:var(--sbb-step-label-color)}:host(:is(:state(size-s),[state--size-s])) .sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
 let _ = 0, B = (() => {
-  var e;
-  let b = [h("sbb-step-label")], a, r = [], s, o = z(x(f));
-  return e = class extends o {
+  var s;
+  let l = [h("sbb-step-label")], r, o = [], i, b = y(x(f));
+  return s = class extends b {
     /** The step controlled by the label. */
     get step() {
       return this._step;
@@ -18,10 +18,16 @@ let _ = 0, B = (() => {
     get stepper() {
       return this.closest("sbb-stepper");
     }
+    set disabled(t) {
+      super.disabled = t, this.toggleState("user-disabled", t);
+    }
+    get disabled() {
+      return super.disabled;
+    }
     constructor() {
       super(), this._step = null, this.addEventListener?.("click", () => {
         const t = this.stepper;
-        t && this.step && (t.selected = this.step);
+        t && this.step && this._isNotDeactivatedByLinearMode(this.step) && (t.selected = this.step);
       }), this.addController(new v(this, () => this.stepper, {
         orientation: (t) => {
           this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = t.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
@@ -31,8 +37,16 @@ let _ = 0, B = (() => {
         }
       }));
     }
+    _isNotDeactivatedByLinearMode(t) {
+      const e = this.stepper;
+      if (e?.linear && e.selectedIndex !== null) {
+        const a = e.steps.indexOf(t);
+        return a < e.selectedIndex || a === e.selectedIndex + 1;
+      }
+      return !0;
+    }
     connectedCallback() {
-      super.connectedCallback(), this.id ||= `sbb-step-label-${_++}`, this.slot ||= "step-label", this.internals.ariaSelected = "false", this.tabIndex = -1, this._assignStep(), this.toggleState("disabled", this.hasAttribute("disabled"));
+      super.connectedCallback(), this.id ||= `sbb-step-label-${_++}`, this.slot ||= "step-label", this.internals.ariaSelected = "false", this.tabIndex = -1, this._assignStep();
     }
     /**
      * Selects and configures the step label.
@@ -52,15 +66,23 @@ let _ = 0, B = (() => {
      * Configures the step label.
      * @internal
      */
-    configure(t, i, l) {
-      l && this._assignStep(), this.internals.ariaPosInSet = `${t}`, this.internals.ariaSetSize = `${i}`;
+    configure(t, e, a) {
+      a && this._assignStep(), this.internals.ariaPosInSet = `${t}`, this.internals.ariaSetSize = `${e}`;
     }
     _assignStep() {
       let t = this.nextElementSibling;
       for (; t && t.localName !== "sbb-step"; )
         t = t.nextElementSibling;
-      const i = t;
-      this.internals.ariaControlsElements = m(this.internals.ariaControlsElements, this._step), this._step = i instanceof Element ? i : null, this.internals.ariaControlsElements = u(this.internals.ariaControlsElements, this._step);
+      const e = t;
+      this.internals.ariaControlsElements = u(this.internals.ariaControlsElements, this._step), this._step = e instanceof Element ? e : null, this.internals.ariaControlsElements = m(this.internals.ariaControlsElements, this._step);
+    }
+    /**
+     * @internal
+     * Disables the step label and avoids setting the `disabled` state to preserve the initial
+     * disabled state in case of switching between linear and non-linear mode.
+     */
+    disable(t) {
+      super.disabled = t;
     }
     render() {
       return d`
@@ -70,10 +92,10 @@ let _ = 0, B = (() => {
       </div>
     `;
     }
-  }, s = e, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    n(null, a = { value: s }, b, { kind: "class", name: s.name, metadata: t }, null, r), s = a.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), e.role = "tab", e.styles = [g, y], p(s, r), s;
+  }, i = s, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    n(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: t }, null, o), i = r.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), s.role = "tab", s.styles = [g, z], p(i, o), i;
 })();
 export {
   B as SbbStepLabelElement

package/stepper/stepper/stepper.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement, TemplateResult, PropertyValues } from 'lit';
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.ts';
 import { SbbStepElement } from '../step.ts';
 export declare class SbbStepChangeEvent extends Event {
@@ -34,7 +34,7 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
     private _observer;
     /** If set to true, only the current and previous labels can be clicked and selected. */
     accessor linear: boolean;
-    /** Overrides the behaviour of `orientation` property. */
+    /** Overrides the behavior of `orientation` property. */
     set horizontalFrom(value: SbbHorizontalFrom | null);
     get horizontalFrom(): SbbHorizontalFrom | null;
     private _horizontalFrom;
@@ -48,9 +48,11 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
     /** The currently selected step. */
     set selected(step: SbbStepElement | null);
     get selected(): SbbStepElement | null;
+    private _requestedSelected;
     /** The currently selected step index. */
     set selectedIndex(index: number | null);
     get selectedIndex(): number | null;
+    private _requestedSelectedIndex;
     /** The steps of the stepper. */
     get steps(): SbbStepElement[];
     private get _enabledSteps();
@@ -64,7 +66,7 @@ export declare class SbbStepperElement extends SbbStepperElement_base {
     previous(): void;
     /** Resets the form in which the stepper is nested or every form of each step, if any. */
     reset(): void;
-    private _isValidStep;
+    private _isSelectable;
     private _select;
     private _setMarkerSize;
     /**

package/stepper/stepper/stepper.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAab,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGlF,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,YAAY,CAAC;AAa9E,qBAAa,kBAAmB,SAAQ,KAAK;IAC3C,4CAA4C;IAC5C,SAAgB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7C,iDAAiD;IACjD,SAAgB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7C,uCAAuC;IACvC,SAAgB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;IAEpD,4CAA4C;IAC5C,SAAgB,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC;gBAGlD,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,YAAY,EAAE,cAAc,GAAG,IAAI,EACnC,YAAY,EAAE,cAAc,GAAG,IAAI;CAQtC;;AACD;;;;;;GAMG;AACH,qBAEM,iBAAkB,SAAQ,sBAAuD;IACrF,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM;;MAElB;IAEX;;;;;OAKG;IACH,OAAO,CAAC,SAAS,CAUd;IAEH,wFAAwF;IACxF,SAEgB,MAAM,EAAE,OAAO,CAAS;IAExC,yDAAyD;IACzD,IACW,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,EAKxD;IACD,IAAW,cAAc,IAAI,iBAAiB,GAAG,IAAI,CAEpD;IACD,OAAO,CAAC,eAAe,CAAkC;IAEzD,wDAAwD;IACxD,SACgB,WAAW,EAAE,cAAc,CAAgB;IAE3D;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF,mCAAmC;IACnC,IACW,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,EAI9C;IACD,IAAW,QAAQ,IAAI,cAAc,GAAG,IAAI,CAE3C;IAED,yCAAyC;IACzC,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAI5C;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,gCAAgC;IAChC,IAAW,KAAK,IAAI,cAAc,EAAE,CAEnC;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,aAAa,CAA2C;;IAQhE,6BAA6B;IACtB,IAAI,IAAI,IAAI;IAMnB,iCAAiC;IAC1B,QAAQ,IAAI,IAAI;IAMvB,yFAAyF;IAClF,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,OAAO;IAmCf,OAAO,CAAC,cAAc;IAiBtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,gBAAgB,CAWtB;IAEF,OAAO,CAAC,oBAAoB;IAUZ,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;cAKzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAY3D,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,OAAO,CAAC,cAAc;cAmBH,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"stepper.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper/stepper.component.ts"],"names":[],"mappings":"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"}

package/stepper/stepper/stepper.component.js

@@ -1,66 +1,66 @@
-var O = (s) => {
+var q = (s) => {
   throw TypeError(s);
 };
-var T = (s, r, a) => r.has(s) || O("Cannot " + 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";
-import { customElement as q, property as u } from "lit/decorators.js";
-import { isArrowKeyPressed as N, getNextElementIndex as Q } from "../../core/a11y.js";
-import { SbbMediaQueryBreakpointUltraAndAbove as $, SbbMediaQueryBreakpointLargeAndAbove as j, SbbMediaQueryBreakpointSmallAndAbove as K, SbbMediaQueryBreakpointZeroAndAbove as P, SbbMediaMatcherController as V } from "../../core/controllers/media-matchers-controller.js";
+var T = (s, r, a) => r.has(s) || q("Cannot " + a);
+var f = (s, r, a) => (T(s, r, "read from private field"), a ? a.call(s) : r.get(s)), v = (s, r, a) => r.has(s) ? q("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);
+import { __esDecorate as c, __runInitializers as o } from "tslib";
+import { IntersectionController as H } from "@lit-labs/observers/intersection-controller.js";
+import { css as R, LitElement as B, html as D } from "lit";
+import { customElement as U, property as u } from "lit/decorators.js";
+import { isArrowKeyPressed as Q, getNextElementIndex as $ } from "../../core/a11y.js";
+import { SbbMediaQueryBreakpointUltraAndAbove as j, SbbMediaQueryBreakpointLargeAndAbove as K, SbbMediaQueryBreakpointSmallAndAbove as N, SbbMediaQueryBreakpointZeroAndAbove as P, SbbMediaMatcherController as V } from "../../core/controllers/media-matchers-controller.js";
 import { forceType as W } from "../../core/decorators.js";
 import { isLean as Z } from "../../core/dom.js";
 import { SbbHydrationMixin as G, SbbElementInternalsMixin as J } from "../../core/mixins.js";
 import { boxSizingStyles as X } from "../../core/styles.js";
-const Y = B`:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-3);display:block;position:relative;counter-reset:step-label}@media(forced-colors:active){:host{--sbb-stepper-marker-color: ButtonText}}:host(:is(:state(disable-animation),[state--disable-animation])){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`, C = 150, H = {
+const Y = R`:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-3);display:block;position:relative;counter-reset:step-label}@media(forced-colors:active){:host{--sbb-stepper-marker-color: ButtonText}}:host(:is(:state(disable-animation),[state--disable-animation])){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`, A = 150, C = {
   zero: P,
-  small: K,
-  large: j,
-  ultra: $
+  small: N,
+  large: K,
+  ultra: j
 };
 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;
+  constructor(r, a, n, _) {
+    super("stepchange", { bubbles: !0, composed: !0 }), this.selectedIndex = r, this.previousIndex = a, this.selectedStep = n, this.previousStep = _;
   }
 }
 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 {
+  var h, b, p, l;
+  let s = [U("sbb-stepper")], r, a = [], n, _ = G(J(B)), m = [], x, z = [], S = [], k, I, y = [], E = [], w, M = [], L = [], O, F;
+  return l = class extends _ {
     constructor() {
       super();
-      g(this, c);
-      g(this, b);
-      g(this, p);
-      this._observer = (o(this, f), new R(this, {
+      v(this, h);
+      v(this, b);
+      v(this, p);
+      this._observer = (o(this, m), new H(this, {
         target: null,
         callback: (e) => {
           e.forEach((t) => {
             t.intersectionRatio > 0 && (this._setStepperHeight(this.selected), this._setMarkerSize());
           });
         }
-      })), 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);
+      })), d(this, h, o(this, z, !1)), this._horizontalFrom = (o(this, S), null), d(this, b, o(this, y, "horizontal")), d(this, p, (o(this, E), o(this, M, Z() ? "s" : "m"))), this._requestedSelected = (o(this, L), null), this._requestedSelectedIndex = null, this._loaded = !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"), A);
       }, 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 v(this, c);
+      return f(this, h);
     }
     set linear(e) {
-      d(this, c, e);
+      d(this, h, e);
     }
-    /** Overrides the behaviour of `orientation` property. */
+    /** Overrides the behavior of `orientation` property. */
     set horizontalFrom(e) {
-      this._horizontalFrom = e && H[e] ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
+      this._horizontalFrom = e && C[e] ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
     }
     get horizontalFrom() {
       return this._horizontalFrom;
     }
     /** Steps orientation, either horizontal or vertical. */
     get orientation() {
-      return v(this, b);
+      return f(this, b);
     }
     set orientation(e) {
       d(this, b, e);
@@ -70,31 +70,34 @@ let ue = (() => {
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return v(this, p);
+      return f(this, p);
     }
     set size(e) {
       d(this, p, e);
     }
     /** The currently selected step. */
     set selected(e) {
-      this._loaded && this._select(e);
+      this._loaded && this._select(e), this._requestedSelected = e;
     }
     get selected() {
       return this.querySelector?.("sbb-step:is(:state(selected),[state--selected])") ?? null;
     }
     /** The currently selected step index. */
     set selectedIndex(e) {
-      this._loaded && e !== null && this._select(this.steps[e]);
+      this._loaded && e !== null && this._select(this.steps[e]), this._requestedSelectedIndex = e;
     }
     get selectedIndex() {
       return this.selected ? this.steps.indexOf(this.selected) : null;
     }
     /** The steps of the stepper. */
     get steps() {
-      return Array.from(this.querySelectorAll?.("sbb-step") ?? []);
+      const e = [];
+      return this.querySelectorAll?.("sbb-step").forEach((t) => {
+        customElements.upgrade(t), e.push(t);
+      }), e;
     }
     get _enabledSteps() {
-      return this.steps.filter((e) => !e.label?.hasAttribute("disabled"));
+      return this.steps.filter((e) => e.label ? (customElements.upgrade(e.label), !e.label.disabled) : !1);
     }
     /** Selects the next step. */
     next() {
@@ -109,27 +112,19 @@ let ue = (() => {
       const e = this.closest("form");
       e ? e.reset() : this.querySelectorAll("form").forEach((t) => t.reset()), this.selectedIndex = 0, document.activeElement?.closest("sbb-stepper") === this && this.selected?.label?.focus();
     }
-    _isValidStep(e) {
-      if (!e || !this.linear && e.label?.hasAttribute("disabled"))
-        return !1;
-      if (this.linear && !this.selected)
-        return e === this.steps[0];
-      if (this.linear && this.selectedIndex !== null) {
-        const t = this.steps.indexOf(e);
-        return t < this.selectedIndex || t === this.selectedIndex + 1;
-      }
-      return !0;
+    _isSelectable(e) {
+      return e ? (customElements.upgrade(e), !(e.label && (customElements.upgrade(e.label), !this.linear && e.label.disabled))) : !1;
     }
     _select(e) {
-      if (!this._isValidStep(e))
+      if (!this._isSelectable(e) || e === this.selected)
         return;
-      const t = this.selectedIndex, i = this.selected, _ = {
+      const t = this.selectedIndex, i = this.selected, g = {
         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(_))
+      if (this.selected && !this.selected.validate(g))
         return;
       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();
     }
@@ -163,9 +158,8 @@ let ue = (() => {
       this._setStepperHeight(e.target);
     }
     _configure() {
-      const e = this.steps;
-      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.steps.forEach((e, t, i) => {
+        e.configure(this._loaded), e.label?.configure(t + 1, i.length, this._loaded);
       }), this._select(this.selected || this._enabledSteps[0]);
     }
     _updateLabels() {
@@ -174,11 +168,11 @@ let ue = (() => {
       });
     }
     _checkOrientation() {
-      this.horizontalFrom && (this.orientation = this._mediaMatcher.matches(H[this.horizontalFrom]) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
+      this.horizontalFrom && (this.orientation = this._mediaMatcher.matches(C[this.horizontalFrom]) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
     }
     _configureLinearMode() {
       this.steps.forEach((e, t) => {
-        e.label?.toggleAttribute("disabled", this.linear && t > this.selectedIndex || !this.linear && e.label.matches(":is(:state(disabled),[state--disabled])"));
+        e.label && (customElements.upgrade(e.label), e.label.disable(this.linear && t > this.selectedIndex || !this.linear && e.label.matches(":is(:state(user-disabled),[state--user-disabled])")));
       });
     }
     connectedCallback() {
@@ -191,7 +185,7 @@ let ue = (() => {
     }
     firstUpdated(e) {
       super.firstUpdated(e), this.updateComplete.then(() => {
-        this._loaded = !0, this.selectedIndex = this.linear ? 0 : Number(this.getAttribute("selected-index")) || 0, this._observer.observe(this), this._checkOrientation(), setTimeout(() => this.internals.states.delete("disable-animation"), C);
+        this._loaded = !0, this._configure(), this._requestedSelected && this.steps.indexOf(this._requestedSelected) !== -1 ? this.selectedIndex = this.steps.indexOf(this._requestedSelected) : this._requestedSelectedIndex ? this.selectedIndex = this._requestedSelectedIndex : this.selectedIndex = 0, this._observer.observe(this), this._checkOrientation(), setTimeout(() => this.internals.states.delete("disable-animation"), A);
       });
     }
     willUpdate(e) {
@@ -200,13 +194,13 @@ let ue = (() => {
     _handleKeyDown(e) {
       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), _ = Q(e, i, t.length);
-        this._select(t[_]), e.preventDefault();
+      e.target !== this && e.target.parentElement !== this) && Q(e)) {
+        const i = t.indexOf(this.selected), g = $(e, i, t.length);
+        this._select(t[g]), e.preventDefault();
       }
     }
     render() {
-      return U`
+      return D`
       <div class="sbb-stepper">
         <div class="sbb-stepper__labels" role="tablist">
           <slot name="step-label" @slotchange=${this._configure}></slot>
@@ -217,24 +211,24 @@ let ue = (() => {
       </div>
     `;
     }
-  }, 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) => {
+  }, h = new WeakMap(), b = new WeakMap(), p = new WeakMap(), n = l, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
+    x = [W(), u({ type: Boolean })], k = [u({ attribute: "horizontal-from", reflect: !0 })], I = [u({ reflect: !0 })], w = [u({ reflect: !0 })], O = [u({ attribute: !1 })], F = [u({ attribute: "selected-index", type: Number })], c(l, 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 }, z, S), h(n, null, k, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, i) => {
+    } }, metadata: e }, z, S), c(l, 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, 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) => {
+    } }, metadata: e }, null, m), c(l, 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 }, 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) => {
+    } }, metadata: e }, y, E), c(l, null, w, { 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(n, null, L, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, i) => {
+    } }, metadata: e }, M, L), c(l, null, O, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, i) => {
       t.selected = 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) => {
+    } }, metadata: e }, null, m), c(l, 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, 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 = {
+    } }, metadata: e }, null, m), c(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], l.events = {
     stepchange: "stepchange"
-  }, o(l, a), l;
+  }, o(n, a), n;
 })();
 export {
   ee as SbbStepChangeEvent,

package/toggle/toggle/toggle.component.d.ts

@@ -60,6 +60,7 @@ export declare class SbbToggleElement<T = string> extends SbbToggleElement_base
      */
     private _handleInput;
     private _handleKeyDown;
+    private _selectAndFocusOption;
     protected render(): TemplateResult;
 }
 declare global {

package/toggle/toggle/toggle.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAItB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;;AAIlE;;;;;GAKG;AACH,qBAEM,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,qBAE1C;IACC,gBAAgC,IAAI,gBAAgB;IACpD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,OAAO,CAAS;IAEtC;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,EAM/B;IACD,IAAW,KAAK,IAAI,CAAC,GAAG,IAAI,CAI3B;IACD,OAAO,CAAC,cAAc,CAAkB;IAExC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAIhD;;cAQkB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAatE;;;OAGG;IACI,aAAa,IAAI,IAAI;IAK5B;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;YAUO,aAAa;IAK3B,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,UAAQ,GAAG,IAAI;IAqCjD,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,cAAc;cA6BH,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"toggle.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/toggle/toggle/toggle.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAItB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;;AAIlE;;;;;GAKG;AACH,qBAEM,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,qBAE1C;IACC,gBAAgC,IAAI,gBAAgB;IACpD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IACzE,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,SAEgB,IAAI,EAAE,OAAO,CAAS;IAEtC;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,CAAwB;IAEpF;;;OAGG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,EAM/B;IACD,IAAW,KAAK,IAAI,CAAC,GAAG,IAAI,CAI3B;IACD,OAAO,CAAC,cAAc,CAAkB;IAExC,4DAA4D;IAC5D,IAAW,OAAO,IAAI,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAIhD;;cAQkB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAatE;;;OAGG;IACI,aAAa,IAAI,IAAI;IAK5B;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;YAUO,aAAa;IAK3B,gBAAgB;IACT,kBAAkB,CAAC,QAAQ,UAAQ,GAAG,IAAI;IAqCjD,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,qBAAqB;cASV,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}