@sbb-esta/lyne-elements-dev 5.1.0-dev.1783347917 → 5.1.0-dev.1783351600
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/custom-elements.json
CHANGED
|
@@ -146755,7 +146755,7 @@
|
|
|
146755
146755
|
"text": "void"
|
|
146756
146756
|
}
|
|
146757
146757
|
},
|
|
146758
|
-
"description": "Selects the next step."
|
|
146758
|
+
"description": "Selects the next enabled step. If no available step is found, it simply exits."
|
|
146759
146759
|
},
|
|
146760
146760
|
{
|
|
146761
146761
|
"kind": "method",
|
|
@@ -146766,7 +146766,7 @@
|
|
|
146766
146766
|
"text": "void"
|
|
146767
146767
|
}
|
|
146768
146768
|
},
|
|
146769
|
-
"description": "Selects the previous step."
|
|
146769
|
+
"description": "Selects the previous enabled step. If no available step is found, it simply exits."
|
|
146770
146770
|
},
|
|
146771
146771
|
{
|
|
146772
146772
|
"kind": "method",
|
|
@@ -147578,42 +147578,6 @@
|
|
|
147578
147578
|
],
|
|
147579
147579
|
"description": "Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes."
|
|
147580
147580
|
},
|
|
147581
|
-
{
|
|
147582
|
-
"kind": "method",
|
|
147583
|
-
"name": "_isGoNextElement",
|
|
147584
|
-
"privacy": "private",
|
|
147585
|
-
"return": {
|
|
147586
|
-
"type": {
|
|
147587
|
-
"text": "boolean"
|
|
147588
|
-
}
|
|
147589
|
-
},
|
|
147590
|
-
"parameters": [
|
|
147591
|
-
{
|
|
147592
|
-
"name": "element",
|
|
147593
|
-
"type": {
|
|
147594
|
-
"text": "HTMLElement"
|
|
147595
|
-
}
|
|
147596
|
-
}
|
|
147597
|
-
]
|
|
147598
|
-
},
|
|
147599
|
-
{
|
|
147600
|
-
"kind": "method",
|
|
147601
|
-
"name": "_isGoPreviousElement",
|
|
147602
|
-
"privacy": "private",
|
|
147603
|
-
"return": {
|
|
147604
|
-
"type": {
|
|
147605
|
-
"text": "boolean"
|
|
147606
|
-
}
|
|
147607
|
-
},
|
|
147608
|
-
"parameters": [
|
|
147609
|
-
{
|
|
147610
|
-
"name": "element",
|
|
147611
|
-
"type": {
|
|
147612
|
-
"text": "HTMLElement"
|
|
147613
|
-
}
|
|
147614
|
-
}
|
|
147615
|
-
]
|
|
147616
|
-
},
|
|
147617
147581
|
{
|
|
147618
147582
|
"kind": "method",
|
|
147619
147583
|
"name": "_onStepElementResize",
|
|
@@ -58,8 +58,6 @@ export declare class SbbStepElement extends SbbElement {
|
|
|
58
58
|
protected configure(stepperLoaded: boolean): void;
|
|
59
59
|
/** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
|
|
60
60
|
private _handleClick;
|
|
61
|
-
private _isGoNextElement;
|
|
62
|
-
private _isGoPreviousElement;
|
|
63
61
|
private _onStepElementResize;
|
|
64
62
|
connectedCallback(): void;
|
|
65
63
|
protected firstUpdated(changedProperties: PropertyValues<this>): void;
|
|
@@ -64,9 +64,9 @@ export declare class SbbStepperElement extends SbbElement {
|
|
|
64
64
|
private _resizeObserverTimeout;
|
|
65
65
|
private _mediaMatcher;
|
|
66
66
|
constructor();
|
|
67
|
-
/** Selects the next step. */
|
|
67
|
+
/** Selects the next enabled step. If no available step is found, it simply exits. */
|
|
68
68
|
next(): void;
|
|
69
|
-
/** Selects the previous step. */
|
|
69
|
+
/** Selects the previous enabled step. If no available step is found, it simply exits. */
|
|
70
70
|
previous(): void;
|
|
71
71
|
/** Resets the form in which the stepper is nested or every form of each step, if any. */
|
|
72
72
|
reset(): void;
|
|
@@ -47,7 +47,7 @@ var SbbStepLabelElement = class extends SbbIconNameMixin(SbbDisabledMixin(SbbBut
|
|
|
47
47
|
this._previousSize = null;
|
|
48
48
|
this.addEventListener?.("click", () => {
|
|
49
49
|
const stepper = this.stepper;
|
|
50
|
-
if (stepper && this.step && this._isNotDeactivatedByLinearMode(this.step)) stepper.selected = this.step;
|
|
50
|
+
if (stepper && this.step && this._isNotDeactivatedByLinearMode(this.step) && !this.disabled) stepper.selected = this.step;
|
|
51
51
|
});
|
|
52
52
|
this.addController(new SbbPropertyWatcherController(this, () => this.stepper, {
|
|
53
53
|
orientation: (s) => {
|
|
@@ -246,14 +246,8 @@ var SbbStepElement = class extends SbbElement {
|
|
|
246
246
|
/** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
|
|
247
247
|
_handleClick(event) {
|
|
248
248
|
const composedPathElements = event.composedPath().filter((el) => el instanceof window.HTMLElement);
|
|
249
|
-
if (composedPathElements.some((el) =>
|
|
250
|
-
else if (composedPathElements.some((el) =>
|
|
251
|
-
}
|
|
252
|
-
_isGoNextElement(element) {
|
|
253
|
-
return element.hasAttribute("sbb-stepper-next") && !element.hasAttribute("disabled");
|
|
254
|
-
}
|
|
255
|
-
_isGoPreviousElement(element) {
|
|
256
|
-
return element.hasAttribute("sbb-stepper-previous") && !element.hasAttribute("disabled");
|
|
249
|
+
if (composedPathElements.some((el) => el.hasAttribute("sbb-stepper-next"))) this.stepper?.next();
|
|
250
|
+
else if (composedPathElements.some((el) => el.hasAttribute("sbb-stepper-previous"))) this.stepper?.previous();
|
|
257
251
|
}
|
|
258
252
|
_onStepElementResize() {
|
|
259
253
|
if (!this.matches(":is(:state(selected),[state--selected])")) return;
|
|
@@ -572,13 +566,25 @@ let SbbStepperElement = (() => {
|
|
|
572
566
|
this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
|
|
573
567
|
this.addEventListener?.("resizechange", (e) => this._onSelectedStepResize(e));
|
|
574
568
|
}
|
|
575
|
-
/** Selects the next step. */
|
|
569
|
+
/** Selects the next enabled step. If no available step is found, it simply exits. */
|
|
576
570
|
next() {
|
|
577
|
-
if (this.selectedIndex !== null)
|
|
571
|
+
if (this.selectedIndex !== null) for (let i = this.selectedIndex + 1; i < this.steps.length; i++) {
|
|
572
|
+
const step = this.steps[i];
|
|
573
|
+
if (this._isSelectable(step)) {
|
|
574
|
+
this._select(step);
|
|
575
|
+
return;
|
|
576
|
+
}
|
|
577
|
+
}
|
|
578
578
|
}
|
|
579
|
-
/** Selects the previous step. */
|
|
579
|
+
/** Selects the previous enabled step. If no available step is found, it simply exits. */
|
|
580
580
|
previous() {
|
|
581
|
-
if (this.selectedIndex !== null)
|
|
581
|
+
if (this.selectedIndex !== null) for (let i = this.selectedIndex - 1; i >= 0; i--) {
|
|
582
|
+
const step = this.steps[i];
|
|
583
|
+
if (this._isSelectable(step)) {
|
|
584
|
+
this._select(step);
|
|
585
|
+
return;
|
|
586
|
+
}
|
|
587
|
+
}
|
|
582
588
|
}
|
|
583
589
|
/** Resets the form in which the stepper is nested or every form of each step, if any. */
|
|
584
590
|
reset() {
|
|
@@ -599,17 +605,18 @@ let SbbStepperElement = (() => {
|
|
|
599
605
|
} else return false;
|
|
600
606
|
}
|
|
601
607
|
_select(step) {
|
|
602
|
-
if (!
|
|
608
|
+
if (!step || step === this.selected) return;
|
|
603
609
|
const currentIndex = this.selectedIndex;
|
|
604
610
|
const currentStep = this.selected;
|
|
611
|
+
const stepIndex = this.steps.indexOf(step);
|
|
605
612
|
const validatePayload = {
|
|
606
613
|
currentIndex,
|
|
607
614
|
currentStep,
|
|
608
|
-
nextIndex:
|
|
609
|
-
nextStep:
|
|
615
|
+
nextIndex: stepIndex >= 0 ? stepIndex : null,
|
|
616
|
+
nextStep: step
|
|
610
617
|
};
|
|
611
618
|
if (this.selected && !this.selected["validate"](validatePayload)) return;
|
|
612
|
-
|
|
619
|
+
currentStep?.["deselect"]();
|
|
613
620
|
step["select"]();
|
|
614
621
|
/** @internal only to provide double entry in docs. It is a public event! */
|
|
615
622
|
this.dispatchEvent(new SbbStepChangeEvent({
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.1.0-dev.
|
|
3
|
+
"version": "5.1.0-dev.1783351600",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/1c10aed5ea9968557137e0d12be24288d245ea4b"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/stepper.pure.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import{html as e,unsafeCSS as t}from"lit";import{SbbButtonBaseElement as n,SbbDisabledMixin as r,SbbElement as i,SbbMediaMatcherController as a,SbbMediaQueryBreakpointLargeAndAbove as o,SbbMediaQueryBreakpointSmallAndAbove as s,SbbMediaQueryBreakpointUltraAndAbove as c,SbbMediaQueryBreakpointZeroAndAbove as l,SbbPropertyWatcherController as u,appendAriaElements as d,forceType as f,getNextElementIndex as p,isArrowKeyPressed as m,removeAriaElements as h}from"./core.js";import{SbbIconNameMixin as g}from"./icon.pure.js";import{ResizeController as _}from"@lit-labs/observers/resize-controller.js";import{__esDecorate as v,__runInitializers as y}from"tslib";import{IntersectionController as b}from"@lit-labs/observers/intersection-controller.js";import{property as x}from"lit/decorators.js";var S=`:host{--sbb-step-label-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));gap:var(--sbb-step-label-gap);min-width:0;max-width:fit-content;cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);font-size:var(--sbb-step-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex;position:relative}:host:before{font-size:var(--sbb-step-label-number-font-size);font-weight:var(--sbb-step-label-font-weight-selected,normal);top:50%;left:50%;z-index:1;translate:-50% -50%;translate:-50% calc(-50% + var(--sbb-step-label-translate-y-content-hover,0px));transition:translate var(--sbb-step-label-animation-duration) var(--sbb-animation-easing);line-height:1;position:absolute;inset-block-start:calc(var(--sbb-step-label-font-size) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2)}:host(:is(:state(selected),[state--selected])){--sbb-step-label-color:var(--sbb-color-3);--sbb-step-label-font-weight-selected:bold}@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-step-label-gap-s);--sbb-step-label-prefix-size:var(--sbb-step-label-prefix-size-s);--sbb-step-label-font-size:var(--sbb-step-label-font-size-s)}:host(:is(:state(size-m),[state--size-m])){--sbb-step-label-gap:var(--sbb-step-label-gap-m);--sbb-step-label-prefix-size:var(--sbb-step-label-prefix-size-m);--sbb-step-label-font-size:var(--sbb-step-label-font-size-m)}:host(:disabled){--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__prefix{width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;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:"";inset:calc(var(--sbb-step-label-prefix-size-grow-hover,0px));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;position:absolute}.sbb-step-label__text{font-weight:700}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);translate:0 var(--sbb-step-label-translate-y-content-hover,0);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,translate}
|
|
2
|
-
`,C=class extends g(r(n)){static{this.elementName=`sbb-step-label`}static{this.role=`tab`}static{this.styles=[t(S)]}get step(){return this._step}get stepper(){return this.closest(`sbb-stepper`)}set disabled(e){super.disabled=e,this.toggleState(`user-disabled`,e)}get disabled(){return super.disabled}constructor(){super(),this._step=null,this._previousSize=null,this.addEventListener?.(`click`,()=>{let e=this.stepper;e&&this.step&&this._isNotDeactivatedByLinearMode(this.step)&&(e.selected=this.step)}),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)},size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}_isNotDeactivatedByLinearMode(e){let t=this.stepper;if(t?.linear&&t.selectedIndex!==null){let n=t.steps.indexOf(e);return n<t.selectedIndex||n===t.selectedIndex+1}return!0}connectedCallback(){super.connectedCallback(),this.slot||=`step-label`,this.internals.ariaSelected=`false`,this.tabIndex=-1,this._assignStep()}select(){this.tabIndex=0,this.internals.ariaSelected=`true`,this.internals.states.add(`selected`)}deselect(){this.tabIndex=-1,this.internals.ariaSelected=`false`,this.internals.states.delete(`selected`)}configure(e,t,n){n&&this._assignStep(),this.internals.ariaPosInSet=`${e}`,this.internals.ariaSetSize=`${t}`}_assignStep(){let e=this.nextElementSibling;for(;e&&e.localName!==`sbb-step`;)e=e.nextElementSibling;let t=e;this.internals.ariaControlsElements=h(this.internals.ariaControlsElements,this._step),this._step=t instanceof Element?t:null,this.internals.ariaControlsElements=d(this.internals.ariaControlsElements,this._step)}disable(e){super.disabled=e}render(){return e`
|
|
2
|
+
`,C=class extends g(r(n)){static{this.elementName=`sbb-step-label`}static{this.role=`tab`}static{this.styles=[t(S)]}get step(){return this._step}get stepper(){return this.closest(`sbb-stepper`)}set disabled(e){super.disabled=e,this.toggleState(`user-disabled`,e)}get disabled(){return super.disabled}constructor(){super(),this._step=null,this._previousSize=null,this.addEventListener?.(`click`,()=>{let e=this.stepper;e&&this.step&&this._isNotDeactivatedByLinearMode(this.step)&&!this.disabled&&(e.selected=this.step)}),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)},size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}_isNotDeactivatedByLinearMode(e){let t=this.stepper;if(t?.linear&&t.selectedIndex!==null){let n=t.steps.indexOf(e);return n<t.selectedIndex||n===t.selectedIndex+1}return!0}connectedCallback(){super.connectedCallback(),this.slot||=`step-label`,this.internals.ariaSelected=`false`,this.tabIndex=-1,this._assignStep()}select(){this.tabIndex=0,this.internals.ariaSelected=`true`,this.internals.states.add(`selected`)}deselect(){this.tabIndex=-1,this.internals.ariaSelected=`false`,this.internals.states.delete(`selected`)}configure(e,t,n){n&&this._assignStep(),this.internals.ariaPosInSet=`${e}`,this.internals.ariaSetSize=`${t}`}_assignStep(){let e=this.nextElementSibling;for(;e&&e.localName!==`sbb-step`;)e=e.nextElementSibling;let t=e;this.internals.ariaControlsElements=h(this.internals.ariaControlsElements,this._step),this._step=t instanceof Element?t:null,this.internals.ariaControlsElements=d(this.internals.ariaControlsElements,this._step)}disable(e){super.disabled=e}render(){return e`
|
|
3
3
|
<span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
|
|
4
4
|
<span class="sbb-step-label__text"><slot></slot></span>
|
|
5
5
|
`}},w=`:host{--sbb-step-opacity:0;--sbb-step-margin-inline-start:var(--sbb-spacing-fixed-4x);--sbb-step-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));display:block}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing), height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete;margin-inline-start:var(--sbb-step-margin-inline-start)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing), height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected])){--sbb-step-opacity:1;--sbb-step-display:block;--sbb-step-height:fit-content;--sbb-step-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-step-animation-delay:var(--sbb-step-animation-duration)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position:absolute;--sbb-step-inset-block-start:0}.sbb-step{position:var(--sbb-step-position,initial);width:100%;opacity:var(--sbb-step-opacity);display:var(--sbb-step-display,none);height:var(--sbb-step-height,0);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay,0);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete;inset-block-start:var(--sbb-step-inset-block-start,unset)}@starting-style{.sbb-step{--sbb-step-opacity:0}}
|
|
6
|
-
`,T=class extends Event{get currentIndex(){return this._currentIndex}get currentStep(){return this._currentStep}get nextIndex(){return this._nextIndex}get nextStep(){return this._nextStep}constructor({currentIndex:e,currentStep:t,nextIndex:n,nextStep:r}){super(`validate`,{bubbles:!0,composed:!0,cancelable:!0}),this._currentIndex=e,this._currentStep=t,this._nextIndex=n,this._nextStep=r}},E=class extends i{static{this.elementName=`sbb-step`}static{this.role=`tabpanel`}static{this.styles=[t(w)]}static{this.events={validate:`validate`,resizechange:`resizechange`,active:`active`}}get label(){return this._label}get stepper(){return this.closest(`sbb-stepper`)}constructor(){super(),this._stepResizeObserver=new _(this,{target:null,skipInitial:!0,callback:()=>setTimeout(()=>this._onStepElementResize())}),this._label=null,this.addEventListener?.(`click`,e=>this._handleClick(e)),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)}}))}select(){!this.hasUpdated||!this.label||(this.internals.states.add(`selected`),this.label.select(),this.dispatchEvent(new Event(`active`,{bubbles:!0,composed:!0})))}deselect(){this.label&&(this.internals.states.delete(`selected`),this.label.deselect())}validate(e){return this.dispatchEvent(new T(e))}configure(e){e&&this._assignLabel()}_handleClick(e){let t=e.composedPath().filter(e=>e instanceof window.HTMLElement);t.some(e=>
|
|
6
|
+
`,T=class extends Event{get currentIndex(){return this._currentIndex}get currentStep(){return this._currentStep}get nextIndex(){return this._nextIndex}get nextStep(){return this._nextStep}constructor({currentIndex:e,currentStep:t,nextIndex:n,nextStep:r}){super(`validate`,{bubbles:!0,composed:!0,cancelable:!0}),this._currentIndex=e,this._currentStep=t,this._nextIndex=n,this._nextStep=r}},E=class extends i{static{this.elementName=`sbb-step`}static{this.role=`tabpanel`}static{this.styles=[t(w)]}static{this.events={validate:`validate`,resizechange:`resizechange`,active:`active`}}get label(){return this._label}get stepper(){return this.closest(`sbb-stepper`)}constructor(){super(),this._stepResizeObserver=new _(this,{target:null,skipInitial:!0,callback:()=>setTimeout(()=>this._onStepElementResize())}),this._label=null,this.addEventListener?.(`click`,e=>this._handleClick(e)),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)}}))}select(){!this.hasUpdated||!this.label||(this.internals.states.add(`selected`),this.label.select(),this.dispatchEvent(new Event(`active`,{bubbles:!0,composed:!0})))}deselect(){this.label&&(this.internals.states.delete(`selected`),this.label.deselect())}validate(e){return this.dispatchEvent(new T(e))}configure(e){e&&this._assignLabel()}_handleClick(e){let t=e.composedPath().filter(e=>e instanceof window.HTMLElement);t.some(e=>e.hasAttribute(`sbb-stepper-next`))?this.stepper?.next():t.some(e=>e.hasAttribute(`sbb-stepper-previous`))&&this.stepper?.previous()}_onStepElementResize(){this.matches(`:is(:state(selected),[state--selected])`)&&this.dispatchEvent(new Event(`resizechange`,{bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.slot||=`step`,this._assignLabel()}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{this._stepResizeObserver.observe(this.shadowRoot.querySelector(`.sbb-step`))})}_assignLabel(){let e=this.previousElementSibling;for(;e&&e.localName!==`sbb-step-label`;)e=e.previousElementSibling;let t=e;this.internals.ariaLabelledByElements=h(this.internals.ariaLabelledByElements,this._label),this._label=t instanceof Element?t:null,this.internals.ariaLabelledByElements=d(this.internals.ariaLabelledByElements,this._label)}render(){return e`
|
|
7
7
|
<div class="sbb-step">
|
|
8
8
|
<slot></slot>
|
|
9
9
|
</div>
|
|
10
10
|
`}},D=`:host{--sbb-stepper-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));counter-reset:step-label;display:block;position:relative}@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__labels{flex-direction:var(--sbb-stepper-orientation);justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m);display:flex;position:relative}.sbb-stepper__labels:before{content:"";background-color:var(--sbb-stepper-marker-color);position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);padding-block-end:var(--sbb-spacing-fixed-4x)}:host([orientation=horizontal]) .sbb-stepper__labels:before{height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size,0);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);inset-block-end:calc(var(--sbb-stepper-border-width) * -1)}:host([orientation=vertical]) .sbb-stepper__labels{border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);padding-inline-start:var(--sbb-spacing-fixed-4x)}:host([orientation=vertical]) .sbb-stepper__labels:before{width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size,0);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);inset-block-start:0}.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}
|
|
11
|
-
`;const O={zero:l,small:s,large:o,ultra:c};var k=class extends Event{get selectedIndex(){return this._selectedIndex}get previousIndex(){return this._previousIndex}get selectedStep(){return this._selectedStep}get previousStep(){return this._previousStep}constructor({selectedIndex:e,previousIndex:t,selectedStep:n,previousStep:r}){super(`stepchange`,{bubbles:!0,composed:!0}),this._selectedIndex=e,this._previousIndex=t,this._selectedStep=n,this._previousStep=r}};let A=(()=>{let n=i,r=[],o,s=[],c=[],l,u,d=[],h=[],g,_=[],S=[],C,w;return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;o=[f(),x({type:Boolean})],l=[x({attribute:`horizontal-from`,reflect:!0})],u=[x({reflect:!0})],g=[x({reflect:!0})],C=[x({attribute:!1})],w=[x({attribute:`selected-index`,type:Number})],v(this,null,o,{kind:`accessor`,name:`linear`,static:!1,private:!1,access:{has:e=>`linear`in e,get:e=>e.linear,set:(e,t)=>{e.linear=t}},metadata:e},s,c),v(this,null,l,{kind:`setter`,name:`horizontalFrom`,static:!1,private:!1,access:{has:e=>`horizontalFrom`in e,set:(e,t)=>{e.horizontalFrom=t}},metadata:e},null,r),v(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,h),v(this,null,g,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},_,S),v(this,null,C,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:e},null,r),v(this,null,w,{kind:`setter`,name:`selectedIndex`,static:!1,private:!1,access:{has:e=>`selectedIndex`in e,set:(e,t)=>{e.selectedIndex=t}},metadata:e},null,r),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-stepper`}static{this.styles=[t(D)]}static{this.events={stepchange:`stepchange`}}#e;get linear(){return this.#e}set linear(e){this.#e=e}set horizontalFrom(e){this._horizontalFrom=e&&O[e]?e:null,this._horizontalFrom&&this._loaded&&this._checkOrientation()}get horizontalFrom(){return this._horizontalFrom}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set selected(e){this._loaded&&this._select(e),this._requestedSelected=e}get selected(){return this.querySelector?.(`sbb-step:is(:state(selected),[state--selected])`)??null}set selectedIndex(e){this._loaded&&e!==null&&this._select(this.steps[e]),this._requestedSelectedIndex=e}get selectedIndex(){return this.selected?this.steps.indexOf(this.selected):null}get steps(){let e=[];return this.querySelectorAll?.(`sbb-step`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}get _enabledSteps(){return this.steps.filter(e=>e.label?(customElements.upgrade(e.label),!e.label.disabled):!1)}constructor(){super(),this._observer=(y(this,r),new b(this,{target:null,callback:e=>{e.forEach(e=>{e.intersectionRatio>0&&(this._setStepperHeight(this.selected),this._setMarkerSize())})}})),this.#e=y(this,s,!1),this._horizontalFrom=(y(this,c),null),this.#t=y(this,d,`horizontal`),this.#n=(y(this,h),y(this,_,null)),this._requestedSelected=(y(this,S),null),this._requestedSelectedIndex=null,this._loaded=!1,this._resizeObserverTimeout=null,this._mediaMatcher=new a(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`),150)},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addEventListener?.(`resizechange`,e=>this._onSelectedStepResize(e))}next(){this.selectedIndex!==null
|
|
11
|
+
`;const O={zero:l,small:s,large:o,ultra:c};var k=class extends Event{get selectedIndex(){return this._selectedIndex}get previousIndex(){return this._previousIndex}get selectedStep(){return this._selectedStep}get previousStep(){return this._previousStep}constructor({selectedIndex:e,previousIndex:t,selectedStep:n,previousStep:r}){super(`stepchange`,{bubbles:!0,composed:!0}),this._selectedIndex=e,this._previousIndex=t,this._selectedStep=n,this._previousStep=r}};let A=(()=>{let n=i,r=[],o,s=[],c=[],l,u,d=[],h=[],g,_=[],S=[],C,w;return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;o=[f(),x({type:Boolean})],l=[x({attribute:`horizontal-from`,reflect:!0})],u=[x({reflect:!0})],g=[x({reflect:!0})],C=[x({attribute:!1})],w=[x({attribute:`selected-index`,type:Number})],v(this,null,o,{kind:`accessor`,name:`linear`,static:!1,private:!1,access:{has:e=>`linear`in e,get:e=>e.linear,set:(e,t)=>{e.linear=t}},metadata:e},s,c),v(this,null,l,{kind:`setter`,name:`horizontalFrom`,static:!1,private:!1,access:{has:e=>`horizontalFrom`in e,set:(e,t)=>{e.horizontalFrom=t}},metadata:e},null,r),v(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,h),v(this,null,g,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:e},_,S),v(this,null,C,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:e},null,r),v(this,null,w,{kind:`setter`,name:`selectedIndex`,static:!1,private:!1,access:{has:e=>`selectedIndex`in e,set:(e,t)=>{e.selectedIndex=t}},metadata:e},null,r),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-stepper`}static{this.styles=[t(D)]}static{this.events={stepchange:`stepchange`}}#e;get linear(){return this.#e}set linear(e){this.#e=e}set horizontalFrom(e){this._horizontalFrom=e&&O[e]?e:null,this._horizontalFrom&&this._loaded&&this._checkOrientation()}get horizontalFrom(){return this._horizontalFrom}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set selected(e){this._loaded&&this._select(e),this._requestedSelected=e}get selected(){return this.querySelector?.(`sbb-step:is(:state(selected),[state--selected])`)??null}set selectedIndex(e){this._loaded&&e!==null&&this._select(this.steps[e]),this._requestedSelectedIndex=e}get selectedIndex(){return this.selected?this.steps.indexOf(this.selected):null}get steps(){let e=[];return this.querySelectorAll?.(`sbb-step`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}get _enabledSteps(){return this.steps.filter(e=>e.label?(customElements.upgrade(e.label),!e.label.disabled):!1)}constructor(){super(),this._observer=(y(this,r),new b(this,{target:null,callback:e=>{e.forEach(e=>{e.intersectionRatio>0&&(this._setStepperHeight(this.selected),this._setMarkerSize())})}})),this.#e=y(this,s,!1),this._horizontalFrom=(y(this,c),null),this.#t=y(this,d,`horizontal`),this.#n=(y(this,h),y(this,_,null)),this._requestedSelected=(y(this,S),null),this._requestedSelectedIndex=null,this._loaded=!1,this._resizeObserverTimeout=null,this._mediaMatcher=new a(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`),150)},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addEventListener?.(`resizechange`,e=>this._onSelectedStepResize(e))}next(){if(this.selectedIndex!==null)for(let e=this.selectedIndex+1;e<this.steps.length;e++){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}previous(){if(this.selectedIndex!==null)for(let e=this.selectedIndex-1;e>=0;e--){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}reset(){let e=this.closest(`form`);e?e.reset():this.querySelectorAll(`form`).forEach(e=>e.reset()),this.selectedIndex=0,document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus()}_isSelectable(e){return e?(customElements.upgrade(e),!(e.label&&(customElements.upgrade(e.label),!this.linear&&e.label.disabled))):!1}_select(e){if(!e||e===this.selected)return;let t=this.selectedIndex,n=this.selected,r=this.steps.indexOf(e),i={currentIndex:t,currentStep:n,nextIndex:r>=0?r:null,nextStep:e};this.selected&&!this.selected.validate(i)||(n?.deselect(),e.select(),this.dispatchEvent(new k({selectedIndex:this.selectedIndex,previousIndex:t,selectedStep:this.selected,previousStep:n})),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)return;let e=this.orientation===`horizontal`?this.selected.label.offsetLeft+this.selected.label.offsetWidth:this._calculateLabelOffsetTop();this.style.setProperty(`--sbb-stepper-marker-size`,`${e}px`)}_setStepperHeight(e){if(e&&e.shadowRoot){let t=e.shadowRoot.querySelector(`.sbb-step`);t&&this.style?.setProperty(`--sbb-stepper-content-height`,`${t.offsetHeight}px`)}}_calculateLabelOffsetTop(){if(this.selectedIndex===null)return;let e=0;for(let t of this.steps){if(t===this.selected)break;e=t.label.offsetHeight+e}return e+this.selected.label.offsetHeight+parseFloat(getComputedStyle(this).getPropertyValue(`--sbb-spacing-fixed-6x`))*16*this.selectedIndex}_onSelectedStepResize(e){this._setStepperHeight(e.target)}_configure(){this.steps.forEach((e,t,n)=>{e.configure(this._loaded),e.label?.configure(t+1,n.length,this._loaded)}),this._select(this.selected||this._enabledSteps[0])}_updateLabels(){this.steps.forEach(e=>{e.slot=this.orientation===`horizontal`?`step`:`step-label`})}_checkOrientation(){this.horizontalFrom&&(this.orientation=this._mediaMatcher.matches(O[this.horizontalFrom])?`horizontal`:`vertical`,this._updateLabels()),setTimeout(()=>this._setMarkerSize(),0)}_configureLinearMode(){this.steps.forEach((e,t)=>{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(){super.connectedCallback(),window.addEventListener(`resize`,this._onStepperResize,{passive:!0}),this.toggleState(`disable-animation`,!this._loaded)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this._onStepperResize)}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{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`),150)})}willUpdate(e){super.willUpdate(e),e.has(`orientation`)&&!this.horizontalFrom&&(this._updateLabels(),this._setMarkerSize()),e.has(`linear`)&&this._loaded&&this._configureLinearMode(),e.has(`size`)&&this._setMarkerSize()}_handleKeyDown(e){let t=this._enabledSteps;if(!(!t||e.target!==this&&e.target.parentElement!==this)&&m(e)){let n=p(e,t.indexOf(this.selected),t.length);this._select(t[n]),e.preventDefault()}}render(){return e`
|
|
12
12
|
<div class="sbb-stepper__labels" role="tablist">
|
|
13
13
|
<slot name="step-label" @slotchange=${this._configure}></slot>
|
|
14
14
|
</div>
|