scb-wc-test 0.1.217 → 0.1.219
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/mvc/components/scb-accordion/scb-accordion-item.js +64 -22
- package/mvc/components/scb-accordion/scb-accordion.js +23 -10
- package/mvc/components/scb-dialog/scb-dialog.js +5 -2
- package/mvc/components/scb-stepper/scb-step.js +37 -11
- package/mvc/components/scb-stepper/scb-stepper.js +24 -6
- package/mvc/components/scb-textfield/scb-textfield.js +132 -36
- package/package.json +2 -2
- package/scb-accordion/scb-accordion-item.js +114 -72
- package/scb-accordion/scb-accordion.d.ts +1 -0
- package/scb-accordion/scb-accordion.js +78 -62
- package/scb-dialog/scb-dialog.d.ts +6 -1
- package/scb-dialog/scb-dialog.js +62 -38
- package/scb-stepper/scb-step.js +64 -38
- package/scb-stepper/scb-stepper.js +49 -31
- package/scb-textfield/scb-textfield.d.ts +2 -0
- package/scb-textfield/scb-textfield.js +213 -111
- package/scb-wc-test.bundle.js +414 -216
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as g,n as s,i as v,E as p,x as l,t as
|
|
1
|
+
import{a as g,n as s,i as v,E as p,x as l,t as b}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(o,a,n){try{customElements.get(o)||t(o,a,n)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var m=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(i,t,o,a)=>{for(var n=a>1?void 0:a?h(t,o):t,c=i.length-1,d;c>=0;c--)(d=i[c])&&(n=(a?d(t,o,n):d(n))||n);return a&&n&&m(t,o,n),n};let e=class extends v{constructor(){super(...arguments),this.open=!1,this.title="",this.content="",this.overline="",this.supportingText="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.imgHrefImage="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.density=0,this._unique=e._uid(),this._onToggle=i=>{const t=i.currentTarget;this.open=!!t.open;const o=this.closest("scb-accordion");this.open&&o&&o.hasAttribute("single-open")&&o.querySelectorAll("scb-accordion-item").forEach(n=>{n!==this&&n.setOpen(!1)}),this._applyInertByOpen()}}static _uid(){return globalThis.crypto?.randomUUID?.()??`${e._uidPrefix}-${++e._uidSeq}`}firstUpdated(){this._applyInertByOpen()}_applyInertByOpen(){const i=this.renderRoot.querySelector(".scb-accordion-bottom"),t=this.renderRoot.querySelector("details");!i||!t||(t.open?(i.removeAttribute("inert"),i.setAttribute("aria-hidden","false")):(i.setAttribute("inert",""),i.setAttribute("aria-hidden","true")))}_onKeyDown(i){const t=this.closest("scb-accordion"),a=Array.from(t?.querySelectorAll("scb-accordion-item")||[]).map(d=>d.renderRoot.querySelector("details")?.querySelector(".scb-accordion-top")||null).filter(d=>!!d),n=i.currentTarget,c=a.indexOf(n);switch(i.key){case"ArrowDown":i.preventDefault(),c<a.length-1&&a[c+1].focus();break;case"ArrowUp":i.preventDefault(),c>0&&a[c-1].focus();break;case"Home":i.preventDefault(),a.length&&a[0].focus();break;case"End":i.preventDefault(),a.length&&a[a.length-1].focus();break}}setOpen(i){this.open=!!i;const t=this.renderRoot.querySelector("details");t&&(t.open=this.open),this._applyInertByOpen()}updated(i){if(i.has("open")){const t=this.renderRoot.querySelector("details");t&&t.open!==this.open&&(t.open=this.open),this._applyInertByOpen(),this.dispatchEvent(new CustomEvent("open-changed",{detail:{open:this.open,title:this.title},bubbles:!0,composed:!0}))}}render(){const i=`bottom-${this._unique}`,t=`header-${this._unique}`,o=this.leading?this.leadingVariant==="image"&&this.imgHrefImage?l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`:this.leadingVariant==="avatar"?l`
|
|
2
2
|
<scb-avatar
|
|
3
3
|
label=${this.avatarLabel}
|
|
4
4
|
alt=${this.avatarAlt}
|
|
@@ -10,9 +10,9 @@ import{a as g,n as s,i as v,E as p,x as l,t as h}from"../../vendor/vendor.js";im
|
|
|
10
10
|
`:this.leadingVariant==="icon"?l`<md-icon>${this.leadingIcon}</md-icon>`:p:p;return l`
|
|
11
11
|
<details class="scb-accordion-item" ?open=${this.open} @toggle=${this._onToggle}>
|
|
12
12
|
<summary
|
|
13
|
-
id=${
|
|
13
|
+
id=${t}
|
|
14
14
|
class="scb-accordion-top"
|
|
15
|
-
aria-controls=${
|
|
15
|
+
aria-controls=${i}
|
|
16
16
|
@keydown=${this._onKeyDown}
|
|
17
17
|
>
|
|
18
18
|
<md-ripple></md-ripple>
|
|
@@ -28,15 +28,15 @@ import{a as g,n as s,i as v,E as p,x as l,t as h}from"../../vendor/vendor.js";im
|
|
|
28
28
|
<md-icon class="chevron">keyboard_arrow_down</md-icon>
|
|
29
29
|
</summary>
|
|
30
30
|
|
|
31
|
-
<div id=${
|
|
31
|
+
<div id=${i} class="scb-accordion-bottom" role="region" aria-labelledby=${t}>
|
|
32
32
|
<div class="bottom-inner">
|
|
33
33
|
<slot>${this.content}</slot>
|
|
34
34
|
</div>
|
|
35
35
|
</div>
|
|
36
36
|
</details>
|
|
37
37
|
|
|
38
|
-
<md-focus-ring for=${
|
|
39
|
-
`}};
|
|
38
|
+
<md-focus-ring for=${t} inward></md-focus-ring>
|
|
39
|
+
`}};e._uidPrefix=`uid-${Math.random().toString(36).slice(2)}`;e._uidSeq=0;e.styles=[g`
|
|
40
40
|
:host {
|
|
41
41
|
display: block;
|
|
42
42
|
position: relative;
|
|
@@ -45,6 +45,48 @@ import{a as g,n as s,i as v,E as p,x as l,t as h}from"../../vendor/vendor.js";im
|
|
|
45
45
|
--scb-accordion-transition-duration: var(--motion-duration-short, 150ms);
|
|
46
46
|
--scb-accordion-transition-easing: var(--motion-easing-emphasized-accelerate, var(--motion-easing-emphasized, cubic-bezier(.69,.16,.2,.98)));
|
|
47
47
|
--scb-accordion-panel-padding-closed: var(--spacing-0, 0px);
|
|
48
|
+
|
|
49
|
+
--scb-accordion-item-padding-inline: var(--spacing-5, 16px);
|
|
50
|
+
--scb-accordion-item-padding-block: var(--spacing-7, 24px);
|
|
51
|
+
--scb-accordion-item-gap: var(--spacing-5, 16px);
|
|
52
|
+
|
|
53
|
+
--scb-accordion-title-font-size: var(--md-sys-typescale-title-large-size);
|
|
54
|
+
--scb-accordion-title-line-height: var(--md-sys-typescale-title-large-line-height);
|
|
55
|
+
--scb-accordion-title-letter-spacing: var(--md-sys-typescale-title-large-tracking);
|
|
56
|
+
|
|
57
|
+
--scb-accordion-supporting-font-size: var(--md-sys-typescale-body-medium-size);
|
|
58
|
+
--scb-accordion-supporting-line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
59
|
+
--scb-accordion-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
60
|
+
|
|
61
|
+
--scb-accordion-leading-image-size: calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:host-context(scb-accordion[size='medium']) {
|
|
65
|
+
--scb-accordion-item-padding-inline: var(--spacing-5, 16px);
|
|
66
|
+
--scb-accordion-item-padding-block: var(--spacing-6, 20px);
|
|
67
|
+
--scb-accordion-item-gap: var(--spacing-4, 12px);
|
|
68
|
+
|
|
69
|
+
--scb-accordion-title-font-size: var(--md-sys-typescale-title-medium-size);
|
|
70
|
+
--scb-accordion-title-line-height: var(--md-sys-typescale-title-medium-line-height);
|
|
71
|
+
--scb-accordion-title-letter-spacing: var(--md-sys-typescale-title-medium-tracking);
|
|
72
|
+
|
|
73
|
+
--scb-accordion-leading-image-size: calc(var(--icon-size-large, 30px) + var(--spacing-4, 12px));
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
:host-context(scb-accordion[size='small']) {
|
|
77
|
+
--scb-accordion-item-padding-inline: var(--spacing-4, 12px);
|
|
78
|
+
--scb-accordion-item-padding-block: var(--spacing-5, 16px);
|
|
79
|
+
--scb-accordion-item-gap: var(--spacing-3, 8px);
|
|
80
|
+
|
|
81
|
+
--scb-accordion-title-font-size: var(--md-sys-typescale-title-small-size);
|
|
82
|
+
--scb-accordion-title-line-height: var(--md-sys-typescale-title-small-line-height);
|
|
83
|
+
--scb-accordion-title-letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
84
|
+
|
|
85
|
+
--scb-accordion-supporting-font-size: var(--md-sys-typescale-body-small-size);
|
|
86
|
+
--scb-accordion-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
|
|
87
|
+
--scb-accordion-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
88
|
+
|
|
89
|
+
--scb-accordion-leading-image-size: calc(var(--icon-size-medium, 24px) + var(--spacing-4, 12px));
|
|
48
90
|
}
|
|
49
91
|
|
|
50
92
|
md-focus-ring {
|
|
@@ -68,10 +110,10 @@ import{a as g,n as s,i as v,E as p,x as l,t as h}from"../../vendor/vendor.js";im
|
|
|
68
110
|
flex-direction: row;
|
|
69
111
|
align-items: center;
|
|
70
112
|
cursor: pointer;
|
|
71
|
-
padding-block: var(--spacing-7, 24px);
|
|
72
|
-
padding-inline: var(--spacing-5, 16px);
|
|
113
|
+
padding-block: var(--scb-accordion-item-padding-block, var(--spacing-7, 24px));
|
|
114
|
+
padding-inline: var(--scb-accordion-item-padding-inline, var(--spacing-5, 16px));
|
|
73
115
|
border-radius: var(--radius-none, 0px);
|
|
74
|
-
gap: var(--spacing-5, 16px);
|
|
116
|
+
gap: var(--scb-accordion-item-gap, var(--spacing-5, 16px));
|
|
75
117
|
color: var(--md-sys-color-on-surface);
|
|
76
118
|
position: relative;
|
|
77
119
|
overflow: hidden;
|
|
@@ -104,15 +146,15 @@ import{a as g,n as s,i as v,E as p,x as l,t as h}from"../../vendor/vendor.js";im
|
|
|
104
146
|
opacity: 0;
|
|
105
147
|
overflow: hidden;
|
|
106
148
|
padding-block: var(--scb-accordion-panel-padding-closed);
|
|
107
|
-
padding-inline: var(--spacing-5, 16px);
|
|
149
|
+
padding-inline: var(--scb-accordion-item-padding-inline, var(--spacing-5, 16px));
|
|
108
150
|
}
|
|
109
151
|
details[open] .scb-accordion-bottom {
|
|
110
152
|
grid-template-rows: 1fr;
|
|
111
153
|
opacity: 1;
|
|
112
154
|
padding-top: var(--spacing-2, 4px);
|
|
113
|
-
padding-right: var(--spacing-5, 16px);
|
|
114
|
-
padding-bottom: var(--spacing-5, 16px);
|
|
115
|
-
padding-left: var(--spacing-5, 16px);
|
|
155
|
+
padding-right: var(--scb-accordion-item-padding-inline, var(--spacing-5, 16px));
|
|
156
|
+
padding-bottom: var(--scb-accordion-item-padding-inline, var(--spacing-5, 16px));
|
|
157
|
+
padding-left: var(--scb-accordion-item-padding-inline, var(--spacing-5, 16px));
|
|
116
158
|
}
|
|
117
159
|
.bottom-inner { overflow: hidden; }
|
|
118
160
|
|
|
@@ -152,10 +194,10 @@ import{a as g,n as s,i as v,E as p,x as l,t as h}from"../../vendor/vendor.js";im
|
|
|
152
194
|
|
|
153
195
|
.title {
|
|
154
196
|
font-family: var(--brand-font);
|
|
155
|
-
font-size: var(--md-sys-typescale-title-large-size);
|
|
156
|
-
line-height: var(--md-sys-typescale-title-large-line-height);
|
|
197
|
+
font-size: var(--scb-accordion-title-font-size, var(--md-sys-typescale-title-large-size));
|
|
198
|
+
line-height: var(--scb-accordion-title-line-height, var(--md-sys-typescale-title-large-line-height));
|
|
157
199
|
font-weight: var(--weight-semibold);
|
|
158
|
-
letter-spacing: var(--md-sys-typescale-title-large-tracking);
|
|
200
|
+
letter-spacing: var(--scb-accordion-title-letter-spacing, var(--md-sys-typescale-title-large-tracking));
|
|
159
201
|
color: var(--md-sys-color-on-surface);
|
|
160
202
|
}
|
|
161
203
|
.overline {
|
|
@@ -168,17 +210,17 @@ import{a as g,n as s,i as v,E as p,x as l,t as h}from"../../vendor/vendor.js";im
|
|
|
168
210
|
}
|
|
169
211
|
.supporting-text {
|
|
170
212
|
font-family: var(--brand-font);
|
|
171
|
-
font-size: var(--md-sys-typescale-body-medium-size);
|
|
172
|
-
line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
213
|
+
font-size: var(--scb-accordion-supporting-font-size, var(--md-sys-typescale-body-medium-size));
|
|
214
|
+
line-height: var(--scb-accordion-supporting-line-height, var(--md-sys-typescale-body-medium-line-height));
|
|
173
215
|
font-weight: var(--weight-regular);
|
|
174
|
-
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
216
|
+
letter-spacing: var(--scb-accordion-supporting-letter-spacing, var(--md-sys-typescale-body-medium-tracking));
|
|
175
217
|
color: var(--md-sys-color-on-surface-variant);
|
|
176
218
|
}
|
|
177
219
|
|
|
178
220
|
.leading { align-self: center; display: grid; place-items: center; }
|
|
179
221
|
.img {
|
|
180
|
-
width: calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px));
|
|
181
|
-
height: calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px));
|
|
222
|
+
width: var(--scb-accordion-leading-image-size, calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px)));
|
|
223
|
+
height: var(--scb-accordion-leading-image-size, calc(var(--icon-size-extra-large, 36px) + var(--spacing-5, 16px)));
|
|
182
224
|
object-fit: contain;
|
|
183
225
|
border-radius: var(--radius-s, 8px);
|
|
184
226
|
}
|
|
@@ -201,4 +243,4 @@ import{a as g,n as s,i as v,E as p,x as l,t as h}from"../../vendor/vendor.js";im
|
|
|
201
243
|
@media (prefers-reduced-motion: reduce) {
|
|
202
244
|
md-ripple { display: none; }
|
|
203
245
|
}
|
|
204
|
-
`];r([s({type:Boolean,reflect:!0})],
|
|
246
|
+
`];r([s({type:Boolean,reflect:!0})],e.prototype,"open",2);r([s({type:String,reflect:!0})],e.prototype,"title",2);r([s({type:String})],e.prototype,"content",2);r([s({type:String,attribute:"overline"})],e.prototype,"overline",2);r([s({type:String,attribute:"supporting-text"})],e.prototype,"supportingText",2);r([s({type:Boolean})],e.prototype,"leading",2);r([s({type:String,attribute:"leading-variant",reflect:!0})],e.prototype,"leadingVariant",2);r([s({type:String,attribute:"leading-icon"})],e.prototype,"leadingIcon",2);r([s({type:String,attribute:"img-href-image",reflect:!0})],e.prototype,"imgHrefImage",2);r([s({type:String,attribute:"avatar-label"})],e.prototype,"avatarLabel",2);r([s({type:String,attribute:"avatar-alt"})],e.prototype,"avatarAlt",2);r([s({type:String,attribute:"avatar-variant"})],e.prototype,"avatarVariant",2);r([s({type:String,attribute:"avatar-src"})],e.prototype,"avatarSrc",2);r([s({type:Number,reflect:!0})],e.prototype,"density",2);e=r([b("scb-accordion-item")],e);
|
|
@@ -1,31 +1,44 @@
|
|
|
1
|
-
import{a as _,n as l,i as
|
|
1
|
+
import{a as _,n as l,i as k,E as O,x as b,t as S}from"../../vendor/vendor.js";import"./scb-accordion-item.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,a,s){try{customElements.get(i)||e(i,a,s)}catch(d){var p=String(d||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var C=Object.defineProperty,w=Object.getOwnPropertyDescriptor,u=t=>{throw TypeError(t)},r=(t,e,i,a)=>{for(var s=a>1?void 0:a?w(e,i):e,p=t.length-1,d;p>=0;p--)(d=t[p])&&(s=(a?d(e,i,s):d(s))||s);return a&&s&&C(e,i,s),s},A=(t,e,i)=>e.has(t)||u("Cannot "+i),x=(t,e,i)=>e.has(t)?u("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),c=(t,e,i)=>(A(t,e,"access private method"),i),n,v,m,h,y,g,f;let o=class extends k{constructor(){super(...arguments),x(this,n),this.singleOpen=!1,this.showCloseAll=!1,this.size="large",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}connectedCallback(){super.connectedCallback(),this.addEventListener("open-changed",c(this,n,h))}disconnectedCallback(){this.removeEventListener("open-changed",c(this,n,h)),super.disconnectedCallback()}render(){const t=!this.singleOpen&&this.showCloseAll,e=t?c(this,n,v).call(this):!1;return b`
|
|
2
2
|
<div class="scb-accordion" ?single-open=${this.singleOpen}>
|
|
3
|
-
${t?
|
|
3
|
+
${t?b`
|
|
4
4
|
<div class="scb-accordion-actions" role="toolbar" aria-label="Accordionkontroller">
|
|
5
5
|
<scb-button
|
|
6
6
|
variant="text"
|
|
7
7
|
label=${e?"Stäng alla":"Öppna alla"}
|
|
8
|
-
@click=${
|
|
8
|
+
@click=${c(this,n,m)}
|
|
9
9
|
></scb-button>
|
|
10
10
|
</div>
|
|
11
|
-
`:
|
|
11
|
+
`:O}
|
|
12
12
|
|
|
13
|
-
<slot @slotchange=${
|
|
13
|
+
<slot @slotchange=${c(this,n,y)}></slot>
|
|
14
14
|
</div>
|
|
15
|
-
`}firstUpdated(){
|
|
15
|
+
`}firstUpdated(){c(this,n,f).call(this),c(this,n,g).call(this)}updated(t){(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&c(this,n,f).call(this),t.has("singleOpen")&&c(this,n,g).call(this)}_getDirectItems(){return Array.from(this.children).filter(t=>t.tagName==="SCB-ACCORDION-ITEM")}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}};n=new WeakSet;v=function(){const t=this._getDirectItems();return t.length>0&&t.every(e=>e.open)};m=function(){if(this.singleOpen||!this.showCloseAll)return;const t=this._getDirectItems(),e=t.length>0&&t.every(i=>i.open);t.forEach(i=>i.setOpen(!e))};h=function(){if(this.singleOpen){c(this,n,g).call(this);return}this.showCloseAll&&this.requestUpdate()};y=function(){if(this.singleOpen){c(this,n,g).call(this);return}this.showCloseAll&&this.requestUpdate()};g=function(){if(!this.singleOpen)return;const e=this._getDirectItems().filter(i=>i.open);e.length<=1||e.slice(1).forEach(i=>i.setOpen(!1))};f=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,i=this.mapSpacingToken(this.spacingBottom)??t,a=this.mapSpacingToken(this.spacingLeft),s=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-accordion-spacing-block-start",e):this.style.removeProperty("--scb-accordion-spacing-block-start"),i?this.style.setProperty("--scb-accordion-spacing-block-end",i):this.style.removeProperty("--scb-accordion-spacing-block-end"),a?this.style.setProperty("--scb-accordion-spacing-inline-start",a):this.style.removeProperty("--scb-accordion-spacing-inline-start"),s?this.style.setProperty("--scb-accordion-spacing-inline-end",s):this.style.removeProperty("--scb-accordion-spacing-inline-end")};o.styles=_`
|
|
16
16
|
:host {
|
|
17
17
|
display: block;
|
|
18
18
|
margin-block-start: var(--scb-accordion-spacing-block-start, 0);
|
|
19
19
|
margin-block-end: var(--scb-accordion-spacing-block-end, 0);
|
|
20
20
|
margin-inline-start: var(--scb-accordion-spacing-inline-start, 0);
|
|
21
21
|
margin-inline-end: var(--scb-accordion-spacing-inline-end, 0);
|
|
22
|
+
|
|
23
|
+
--scb-accordion-actions-padding-inline: var(--spacing-5, 16px);
|
|
24
|
+
--scb-accordion-actions-padding-block: var(--spacing-2, 4px);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host([size='medium']) {
|
|
28
|
+
--scb-accordion-actions-padding-inline: var(--spacing-5, 16px);
|
|
29
|
+
--scb-accordion-actions-padding-block: var(--spacing-2, 4px);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:host([size='small']) {
|
|
33
|
+
--scb-accordion-actions-padding-inline: var(--spacing-4, 12px);
|
|
34
|
+
--scb-accordion-actions-padding-block: var(--spacing-2, 4px);
|
|
22
35
|
}
|
|
23
36
|
|
|
24
37
|
.scb-accordion-actions {
|
|
25
38
|
display: flex;
|
|
26
39
|
justify-content: flex-end;
|
|
27
|
-
padding-inline: var(--
|
|
28
|
-
padding-block-start: var(--
|
|
29
|
-
padding-block-end: var(--
|
|
40
|
+
padding-inline: var(--scb-accordion-actions-padding-inline);
|
|
41
|
+
padding-block-start: var(--scb-accordion-actions-padding-block);
|
|
42
|
+
padding-block-end: var(--scb-accordion-actions-padding-block);
|
|
30
43
|
}
|
|
31
|
-
`;r([l({type:Boolean,attribute:"single-open",reflect:!0})],
|
|
44
|
+
`;r([l({type:Boolean,attribute:"single-open",reflect:!0})],o.prototype,"singleOpen",2);r([l({type:Boolean,attribute:"show-close-all",reflect:!0})],o.prototype,"showCloseAll",2);r([l({type:String,reflect:!0})],o.prototype,"size",2);r([l({type:String,reflect:!0})],o.prototype,"spacing",2);r([l({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",2);r([l({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",2);r([l({type:String,attribute:"spacing-left",reflect:!0})],o.prototype,"spacingLeft",2);r([l({type:String,attribute:"spacing-right",reflect:!0})],o.prototype,"spacingRight",2);o=r([S("scb-accordion")],o);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as h,n as s,i as
|
|
1
|
+
import{a as h,n as s,i as m,E as d,x as r,t as u}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-textfield/scb-textfield.js";import"../scb-checkbox/scb-checkbox.js";import"../scb-radio-button/scb-radio-button.js";import"../scb-switch/scb-switch.js";import"../scb-chip/scb-chip.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-divider/scb-divider.js";import"../scb-checkbox/scb-checkbox-group.js";import"../scb-radio-button/scb-radio-group.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(n,c,a){try{customElements.get(n)||e(n,c,a)}catch(p){var l=String(p||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var g=Object.defineProperty,b=Object.getOwnPropertyDescriptor,o=(t,e,n,c)=>{for(var a=c>1?void 0:c?b(e,n):e,l=t.length-1,p;l>=0;l--)(p=t[l])&&(a=(c?p(e,n,a):p(a))||a);return c&&a&&g(e,n,a),a};let i=class extends m{constructor(){super(...arguments),this.open=!1,this.inSb=!1,this.scrimClose=!0,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.variant="basic",this.label="",this.icon="",this.supportingText="",this.okButton="OK",this.cancelButton="Avbryt",this.deleteButton="Delete",this.confirmButton="Ta bort",this.denyButton="Avbryt",this.resetButton="Återställ",this.submitButton="Spara",this.formId="",this.formAction="",this.formMethod="",this.__lastTriggerEl=null,this.__onDocumentClick=t=>{this.__getActionFromEvent(t)==="toggle"&&(this.__setOpen(!this.open),t.stopPropagation())},this.__onDocumentKeydown=t=>{this.open&&t.key==="Escape"&&(this.__fire("esc"),this.__setOpen(!1))},this.__onScrimClick=()=>{this.scrimClose&&(this.__fire("scrim"),this.__setOpen(!1))},this.__onOk=()=>{this.__fire("ok"),this.__setOpen(!1)},this.__onCancel=()=>{this.__fire("cancel"),this.__setOpen(!1)},this.__onConfirm=()=>{this.__fire("confirm"),this.__setOpen(!1)},this.__onDeny=()=>{this.__fire("deny"),this.__setOpen(!1)},this.__onReset=()=>{this.shadowRoot?.querySelector("form")?.reset(),(this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[]).forEach(e=>{const n=e.tagName;n==="SCB-TEXTFIELD"&&(e.value=""),n==="SCB-CHECKBOX"&&(e.checked=!1),n==="SCB-RADIO-BUTTON"&&(e.checked=!1),n==="SCB-SWITCH"&&(e.selected=!1),n==="SCB-CHIP"&&(e.selected=!1)}),this.__fire("reset")},this.__onSubmit=()=>{this.shadowRoot?.querySelector("form")?.requestSubmit(),this.__fire("submit"),this.__setOpen(!1)},this.__onKeydownTrap=t=>{if(!this.open||t.key!=="Tab")return;const e=Array.from(this.shadowRoot.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')).filter(a=>!a.hasAttribute("disabled"));if(!e.length)return;const n=e[0],c=e[e.length-1];t.shiftKey&&document.activeElement===n?(c.focus(),t.preventDefault()):!t.shiftKey&&document.activeElement===c&&(n.focus(),t.preventDefault())}}__getActionFromEvent(t){if(!this.id)return null;for(const e of t.composedPath())if(e instanceof Element){if(e.getAttribute("data-dialog-toggle")===this.id)return this.__lastTriggerEl=e,"toggle";if(e.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=e,"toggle"}return null}connectedCallback(){super.connectedCallback(),this.__applyZIndex(),this.__applyMaxSize(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0),this.addEventListener("keydown",this.__onKeydownTrap)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),this.removeEventListener("keydown",this.__onKeydownTrap),super.disconnectedCallback()}__applyZIndex(){const t=typeof this.zIndex=="number"&&Number.isFinite(this.zIndex)?this.zIndex:void 0;if(t===void 0){this.style.removeProperty("--z-dialog-scrim"),this.style.removeProperty("--z-dialog");return}this.style.setProperty("--z-dialog-scrim",String(t)),this.style.setProperty("--z-dialog",String(t+1))}__applyMaxSize(){const t=(this.maxW??"").trim(),e=(this.maxH??"").trim();t?(this.style.setProperty("--scb-dialog-max-w",t),this.style.setProperty("--scb-dialog-width",`min(${t}, 90vw)`)):(this.style.removeProperty("--scb-dialog-max-w"),this.style.removeProperty("--scb-dialog-width")),e?this.style.setProperty("--scb-dialog-max-h",e):this.style.removeProperty("--scb-dialog-max-h")}updated(t){if(t.has("zIndex")&&this.__applyZIndex(),(t.has("maxW")||t.has("maxH"))&&this.__applyMaxSize(),t.has("open")){const e=t.get("open");this.__updateTriggersExpanded(),this.open&&!e?this.updateComplete.then(()=>{const n=this.shadowRoot?.querySelector('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])');n?n.focus():this.shadowRoot?.querySelector(".container")?.focus()}):!this.open&&e&&this.__lastTriggerEl?.focus?.(),this.__toggleScrollLock(this.open)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.__applySpacing()}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}__toggleScrollLock(t){if(this.inSb)return;const e=document.documentElement;e.style.overflow=t?"hidden":""}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}__applySpacing(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,n=this.mapSpacingToken(this.spacingBottom)??t,c=this.mapSpacingToken(this.spacingLeft),a=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-dialog-spacing-block-start",e):this.style.removeProperty("--scb-dialog-spacing-block-start"),n?this.style.setProperty("--scb-dialog-spacing-block-end",n):this.style.removeProperty("--scb-dialog-spacing-block-end"),c?this.style.setProperty("--scb-dialog-spacing-inline-start",c):this.style.removeProperty("--scb-dialog-spacing-inline-start"),a?this.style.setProperty("--scb-dialog-spacing-inline-end",a):this.style.removeProperty("--scb-dialog-spacing-inline-end")}__setOpen(t){this.open=t,this.__fire(t?"open":"close")}__fire(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}__slotIsEmpty(){const t=this.shadowRoot?.querySelector("slot");return t?t.assignedElements({flatten:!0}).length===0:!0}renderHeader(t){const e=this.variant==="form"||this.variant==="floating";return r`
|
|
2
2
|
<div class="header">
|
|
3
3
|
<div class="title">
|
|
4
4
|
${this.icon?r`<md-icon class="dialog-icon">${this.icon}</md-icon>`:d}
|
|
@@ -89,9 +89,12 @@ import{a as h,n as s,i as u,E as d,x as r,t as m}from"../../vendor/vendor.js";im
|
|
|
89
89
|
|
|
90
90
|
/* width/height via CSS custom props med px-fallback */
|
|
91
91
|
min-width: var(--scb-dialog-min-w, 340px);
|
|
92
|
+
width: var(--scb-dialog-width, auto);
|
|
92
93
|
max-width: var(--scb-dialog-max-w, 90vw);
|
|
93
94
|
max-height: var(--scb-dialog-max-h, 90vh);
|
|
94
95
|
|
|
96
|
+
|
|
97
|
+
|
|
95
98
|
display:flex; flex-direction:column;
|
|
96
99
|
|
|
97
100
|
/* padding mappad till spacing-token */
|
|
@@ -194,4 +197,4 @@ import{a as h,n as s,i as u,E as d,x as r,t as m}from"../../vendor/vendor.js";im
|
|
|
194
197
|
to { opacity: 0; }
|
|
195
198
|
}
|
|
196
199
|
|
|
197
|
-
`;
|
|
200
|
+
`;o([s({type:Boolean,reflect:!0})],i.prototype,"open",2);o([s({type:String,attribute:"max-w",reflect:!0})],i.prototype,"maxW",2);o([s({type:String,attribute:"max-h",reflect:!0})],i.prototype,"maxH",2);o([s({type:Number,attribute:"z-index",reflect:!0})],i.prototype,"zIndex",2);o([s({type:Boolean,attribute:!1})],i.prototype,"inSb",2);o([s({type:Boolean,attribute:"scrim-close"})],i.prototype,"scrimClose",2);o([s({type:String,reflect:!0})],i.prototype,"spacing",2);o([s({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",2);o([s({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",2);o([s({type:String,attribute:"spacing-left",reflect:!0})],i.prototype,"spacingLeft",2);o([s({type:String,attribute:"spacing-right",reflect:!0})],i.prototype,"spacingRight",2);o([s({type:String})],i.prototype,"variant",2);o([s({type:String})],i.prototype,"label",2);o([s({type:String})],i.prototype,"icon",2);o([s({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);o([s({type:String,attribute:"ok-button"})],i.prototype,"okButton",2);o([s({type:String,attribute:"cancel-button"})],i.prototype,"cancelButton",2);o([s({type:String,attribute:"delete-button"})],i.prototype,"deleteButton",2);o([s({type:String,attribute:"confirm-button"})],i.prototype,"confirmButton",2);o([s({type:String,attribute:"deny-button"})],i.prototype,"denyButton",2);o([s({type:String,attribute:"reset-button"})],i.prototype,"resetButton",2);o([s({type:String,attribute:"submit-button"})],i.prototype,"submitButton",2);o([s({type:String,attribute:"form-id"})],i.prototype,"formId",2);o([s({type:String,attribute:"form-action"})],i.prototype,"formAction",2);o([s({type:String,attribute:"form-method"})],i.prototype,"formMethod",2);i=o([u("scb-dialog")],i);
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as d,n as s,i as p,x as n,t as b}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(r,l,o){try{customElements.get(r)||a(r,l,o)}catch(m){var c=String(m||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw m}}}}catch{}})();var u=Object.defineProperty,h=Object.getOwnPropertyDescriptor,i=(e,a,r,l)=>{for(var o=l>1?void 0:l?h(a,r):a,c=e.length-1,m;c>=0;c--)(m=e[c])&&(o=(l?m(a,r,o):m(o))||o);return l&&o&&u(a,r,o),o};let t=class extends p{constructor(){super(...arguments),this.label="",this.subLabel="",this.symbolVariant="number",this.number=0,this.active=!1,this.completed=!1,this.changeOnCompleted=!1,this.islast=!1,this.variant="horizontal",this.icon=""}updated(){!this.subLabel||this.subLabel.trim()===""?this.setAttribute("no-content",""):this.removeAttribute("no-content")}handleKeyDown(e){e.key==="Enter"||e.key===" "?(e.preventDefault(),this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}))):(e.key==="ArrowRight"||e.key==="ArrowLeft")&&(this.dispatchEvent(new CustomEvent("scb-stepper-keynav",{detail:{key:e.key},bubbles:!0,composed:!0})),e.preventDefault())}render(){const e=this.active?"step":void 0,a=this.label?`${this.label}${this.subLabel?": "+this.subLabel:""}`:void 0;switch(this.symbolVariant){case"icon":return n`
|
|
2
2
|
<div
|
|
3
3
|
class="scb-step-content"
|
|
4
4
|
tabindex="0"
|
|
5
5
|
role="listitem"
|
|
6
6
|
aria-current=${e}
|
|
7
|
-
aria-label=${
|
|
7
|
+
aria-label=${a}
|
|
8
8
|
@keydown=${this.handleKeyDown}
|
|
9
9
|
>
|
|
10
10
|
<md-ripple></md-ripple>
|
|
11
11
|
<div class="symbol">
|
|
12
|
-
${this.completed&&this.changeOnCompleted?
|
|
12
|
+
${this.completed&&this.changeOnCompleted?n`<md-icon>check</md-icon>`:n`<md-icon>${this.icon}</md-icon>`}
|
|
13
13
|
</div>
|
|
14
14
|
<div class="content">
|
|
15
15
|
<div class="label">${this.label}</div>
|
|
@@ -17,18 +17,18 @@ import{a as m,n as a,i as p,x as l,t as b}from"../../vendor/vendor.js";import"..
|
|
|
17
17
|
</div>
|
|
18
18
|
<md-focus-ring></md-focus-ring>
|
|
19
19
|
</div>
|
|
20
|
-
`;case"marker":return
|
|
20
|
+
`;case"marker":return n`
|
|
21
21
|
<div
|
|
22
22
|
class="scb-step-content"
|
|
23
23
|
tabindex="0"
|
|
24
24
|
role="listitem"
|
|
25
25
|
aria-current=${e}
|
|
26
|
-
aria-label=${
|
|
26
|
+
aria-label=${a}
|
|
27
27
|
@keydown=${this.handleKeyDown}
|
|
28
28
|
>
|
|
29
29
|
<md-ripple></md-ripple>
|
|
30
30
|
<div class="symbol">
|
|
31
|
-
${this.completed&&this.changeOnCompleted?
|
|
31
|
+
${this.completed&&this.changeOnCompleted?n`<md-icon>check</md-icon>`:n``}
|
|
32
32
|
</div>
|
|
33
33
|
<div class="content">
|
|
34
34
|
<div class="label">${this.label}</div>
|
|
@@ -36,18 +36,18 @@ import{a as m,n as a,i as p,x as l,t as b}from"../../vendor/vendor.js";import"..
|
|
|
36
36
|
</div>
|
|
37
37
|
<md-focus-ring></md-focus-ring>
|
|
38
38
|
</div>
|
|
39
|
-
`;default:return
|
|
39
|
+
`;default:return n`
|
|
40
40
|
<div
|
|
41
41
|
class="scb-step-content"
|
|
42
42
|
tabindex="0"
|
|
43
43
|
role="listitem"
|
|
44
44
|
aria-current=${e}
|
|
45
|
-
aria-label=${
|
|
45
|
+
aria-label=${a}
|
|
46
46
|
@keydown=${this.handleKeyDown}
|
|
47
47
|
>
|
|
48
48
|
<md-ripple></md-ripple>
|
|
49
49
|
<div class="symbol">
|
|
50
|
-
${this.completed&&this.changeOnCompleted?
|
|
50
|
+
${this.completed&&this.changeOnCompleted?n`<md-icon>check</md-icon>`:n`<span>${this.number}</span>`}
|
|
51
51
|
</div>
|
|
52
52
|
<div class="content">
|
|
53
53
|
<div class="label">${this.label}</div>
|
|
@@ -55,9 +55,11 @@ import{a as m,n as a,i as p,x as l,t as b}from"../../vendor/vendor.js";import"..
|
|
|
55
55
|
</div>
|
|
56
56
|
<md-focus-ring></md-focus-ring>
|
|
57
57
|
</div>
|
|
58
|
-
`}}};t.styles=
|
|
58
|
+
`}}};t.styles=d`
|
|
59
59
|
:host {
|
|
60
60
|
font-family: var(--brand-font);
|
|
61
|
+
--scb-step-slide-from-x: 0px;
|
|
62
|
+
--scb-step-slide-from-y: 0px;
|
|
61
63
|
}
|
|
62
64
|
.scb-step-content {
|
|
63
65
|
width: 100%;
|
|
@@ -93,6 +95,11 @@ import{a as m,n as a,i as p,x as l,t as b}from"../../vendor/vendor.js";import"..
|
|
|
93
95
|
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
94
96
|
position: relative;
|
|
95
97
|
z-index: 1;
|
|
98
|
+
will-change: transform, opacity;
|
|
99
|
+
transition:
|
|
100
|
+
background-color var(--motion-duration-short) var(--motion-easing-standard),
|
|
101
|
+
color var(--motion-duration-short) var(--motion-easing-standard),
|
|
102
|
+
transform var(--motion-duration-short) var(--motion-easing-emphasized);
|
|
96
103
|
}
|
|
97
104
|
md-focus-ring {
|
|
98
105
|
border-radius: var(--md-sys-shape-corner-small);
|
|
@@ -126,6 +133,7 @@ import{a as m,n as a,i as p,x as l,t as b}from"../../vendor/vendor.js";import"..
|
|
|
126
133
|
display: flex;
|
|
127
134
|
flex-direction: column;
|
|
128
135
|
align-items: center;
|
|
136
|
+
will-change: transform, opacity;
|
|
129
137
|
}
|
|
130
138
|
:host([variant="vertical"]) {
|
|
131
139
|
.scb-step-content {
|
|
@@ -162,4 +170,22 @@ import{a as m,n as a,i as p,x as l,t as b}from"../../vendor/vendor.js";import"..
|
|
|
162
170
|
}
|
|
163
171
|
}
|
|
164
172
|
|
|
165
|
-
|
|
173
|
+
:host([active]) .symbol {
|
|
174
|
+
--scb-kf-pulse-scale: 1.08;
|
|
175
|
+
animation-duration: var(--motion-duration-medium);
|
|
176
|
+
animation-timing-function: var(--motion-easing-emphasized);
|
|
177
|
+
animation-iteration-count: 1;
|
|
178
|
+
animation-fill-mode: both;
|
|
179
|
+
animation-name: var(--motion-keyframe-pulse, scb-kf-pulse);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
:host([completed]:not([active])) .symbol {
|
|
183
|
+
--scb-kf-pulse-scale: 1.04;
|
|
184
|
+
animation-duration: var(--motion-duration-short);
|
|
185
|
+
animation-timing-function: var(--motion-easing-standard);
|
|
186
|
+
animation-iteration-count: 1;
|
|
187
|
+
animation-fill-mode: both;
|
|
188
|
+
animation-name: var(--motion-keyframe-pulse, scb-kf-pulse);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
`;i([s({type:String,reflect:!0})],t.prototype,"label",2);i([s({type:String,reflect:!0,attribute:"sub-label"})],t.prototype,"subLabel",2);i([s({type:String,reflect:!0,attribute:"symbol-variant"})],t.prototype,"symbolVariant",2);i([s({type:Number,reflect:!0})],t.prototype,"number",2);i([s({type:Boolean,reflect:!0})],t.prototype,"active",2);i([s({type:Boolean,reflect:!0})],t.prototype,"completed",2);i([s({type:Boolean,reflect:!0,attribute:"change-on-completed"})],t.prototype,"changeOnCompleted",2);i([s({type:Boolean,reflect:!0})],t.prototype,"islast",2);i([s({type:String,reflect:!0})],t.prototype,"variant",2);i([s({type:String})],t.prototype,"icon",2);t=i([b("scb-step")],t);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as w,n as
|
|
1
|
+
import{a as w,n as p,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./scb-step.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(s,i,r){try{customElements.get(s)||e(s,i,r)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var z=Object.defineProperty,E=Object.getOwnPropertyDescriptor,S=t=>{throw TypeError(t)},c=(t,e,s,i)=>{for(var r=i>1?void 0:i?E(e,s):e,l=t.length-1,d;l>=0;l--)(d=t[l])&&(r=(i?d(e,s,r):d(r))||r);return i&&r&&z(e,s,r),r},_=(t,e,s)=>e.has(t)||S("Cannot "+s),b=(t,e,s)=>(_(t,e,"read from private field"),s?s.call(t):e.get(t)),m=(t,e,s)=>e.has(t)?S("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),u=(t,e,s,i)=>(_(t,e,"write to private field"),e.set(t,s),s),o=(t,e,s)=>(_(t,e,"access private method"),s),v,h,a,y,g,f,x;let n=class extends k{constructor(){super(...arguments),m(this,a),this.type="",this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.activeIndex=0,m(this,v),m(this,h,0),this._onKeyNav=t=>{const e=this._getSteps(),s=this.activeIndex;let i=s;t.detail.key==="ArrowRight"?s<e.length-1?i=s+1:i=0:t.detail.key==="ArrowLeft"&&(s>0?i=s-1:i=e.length-1),i!==s&&(this._onStepClick(i),setTimeout(()=>{const r=e[i].shadowRoot?.querySelector(".scb-step-content");r&&"focus"in r&&typeof r.focus=="function"&&r.focus()},0))},this._onStepContainerClick=t=>{const e=this._getSteps(),s=t.composedPath(),i=e.findIndex(r=>s.includes(r));i!==-1&&this._onStepClick(i)},this._onSlotChange=()=>{const t=this._getSteps();if(t.length===0){this.activeIndex=0;return}this.activeIndex>t.length-1?this.activeIndex=t.length-1:this.activeIndex<0&&(this.activeIndex=0),this._updateSteps(),o(this,a,f).call(this)}}_onStepClick(t){const e=this.activeIndex;this.activeIndex=t,this._updateSteps(),this.dispatchEvent(new CustomEvent("step-change",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepchange",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),t>e?(this.dispatchEvent(new CustomEvent("step-next",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepnext",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0}))):t<e&&(this.dispatchEvent(new CustomEvent("step-prev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepprev",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})))}nextStep(){const t=this._getSteps();this.activeIndex<t.length-1&&this._onStepClick(this.activeIndex+1)}prevStep(){this.activeIndex>0&&this._onStepClick(this.activeIndex-1)}getActiveIndex(){return this.activeIndex}_updateSteps(){const t=this._getSteps();this.style.setProperty("--scb-stepper-step-count",String(Math.max(1,t.length))),t.forEach((e,s)=>{e.active=s===this.activeIndex,e.completed=s<this.activeIndex,e.islast=!1,e.changeOnCompleted=this.changeOnCompleted,e.number=s+1,e.variant=this.variant,e.symbolVariant=this.symbolVariant}),t.length>0&&(t[t.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll("scb-step"))}firstUpdated(t){this._updateSteps(),o(this,a,y).call(this),o(this,a,f).call(this)}updated(t){this._updateSteps(),(t.has("variant")||t.has("symbolVariant"))&&o(this,a,f).call(this),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&o(this,a,y).call(this)}render(){return C`
|
|
2
2
|
<div
|
|
3
3
|
class="steps"
|
|
4
4
|
role="list"
|
|
@@ -8,7 +8,7 @@ import{a as w,n as c,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
|
|
|
8
8
|
>
|
|
9
9
|
<slot @slotchange=${this._onSlotChange}></slot>
|
|
10
10
|
</div>
|
|
11
|
-
`}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<"u"&&(u(this,v,new ResizeObserver(()=>{o(this,
|
|
11
|
+
`}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<"u"&&(u(this,v,new ResizeObserver(()=>{o(this,a,f).call(this)})),b(this,v).observe(this))}disconnectedCallback(){b(this,v)&&(b(this,v).disconnect(),u(this,v,void 0)),b(this,h)&&(cancelAnimationFrame(b(this,h)),u(this,h,0)),super.disconnectedCallback()}};v=new WeakMap;h=new WeakMap;a=new WeakSet;y=function(){const t=o(this,a,g).call(this,this.spacing),e=o(this,a,g).call(this,this.spacingTop)??t,s=o(this,a,g).call(this,this.spacingBottom)??t,i=o(this,a,g).call(this,this.spacingLeft),r=o(this,a,g).call(this,this.spacingRight);e?this.style.setProperty("--scb-stepper-spacing-block-start",e):this.style.removeProperty("--scb-stepper-spacing-block-start"),s?this.style.setProperty("--scb-stepper-spacing-block-end",s):this.style.removeProperty("--scb-stepper-spacing-block-end"),i?this.style.setProperty("--scb-stepper-spacing-inline-start",i):this.style.removeProperty("--scb-stepper-spacing-inline-start"),r?this.style.setProperty("--scb-stepper-spacing-inline-end",r):this.style.removeProperty("--scb-stepper-spacing-inline-end")};g=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};f=function(){b(this,h)||u(this,h,requestAnimationFrame(()=>{u(this,h,0),o(this,a,x).call(this)}))};x=function(){const t=this._getSteps();t.length!==0&&t.forEach(e=>{const s=e.shadowRoot;if(!s)return;const i=s.querySelector(".label"),r=s.querySelector(".scb-step-content");if(!i)return;if(this.variant!=="horizontal"){i.style.removeProperty("max-width"),i.style.removeProperty("white-space"),i.style.removeProperty("word-break"),i.style.removeProperty("overflow-wrap");return}i.style.maxWidth="none",i.style.whiteSpace="nowrap",i.style.wordBreak="normal",i.style.overflowWrap="normal";const l=r?.clientWidth??e.clientWidth;l>0&&i.scrollWidth>l&&(i.style.maxWidth="100%",i.style.whiteSpace="normal",i.style.wordBreak="break-word",i.style.overflowWrap="anywhere")})};n.styles=w`
|
|
12
12
|
:host {
|
|
13
13
|
--scb-stepper-width: 100%;
|
|
14
14
|
--scb-stepper-height: 100%;
|
|
@@ -63,7 +63,8 @@ import{a as w,n as c,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
|
|
|
63
63
|
position: absolute;
|
|
64
64
|
top: calc(var(--spacing-4) + (var(--scb-stepper-symbol-size) / 2));
|
|
65
65
|
height: 1px;
|
|
66
|
-
background: var(--n-70);
|
|
66
|
+
background-color: var(--n-70);
|
|
67
|
+
transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
|
|
67
68
|
z-index: 0;
|
|
68
69
|
pointer-events: none;
|
|
69
70
|
}
|
|
@@ -85,7 +86,22 @@ import{a as w,n as c,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
|
|
|
85
86
|
:host([variant='horizontal']) ::slotted(scb-step:last-child)::after {
|
|
86
87
|
display: none;
|
|
87
88
|
}
|
|
89
|
+
|
|
90
|
+
:host([variant='horizontal']) ::slotted(scb-step[completed])::before,
|
|
91
|
+
:host([variant='horizontal']) ::slotted(scb-step[completed])::after {
|
|
92
|
+
background-color: var(--md-sys-color-primary);
|
|
93
|
+
}
|
|
94
|
+
:host([variant='horizontal']) ::slotted(scb-step[active])::before {
|
|
95
|
+
background-color: var(--md-sys-color-primary);
|
|
96
|
+
}
|
|
88
97
|
/* Vertikal connector */
|
|
98
|
+
::slotted(scb-step[variant='vertical'][completed]:not(:last-child))::after {
|
|
99
|
+
background-color: var(--md-sys-color-primary);
|
|
100
|
+
}
|
|
101
|
+
::slotted(scb-step[variant='vertical'][symbol-variant='marker'][completed]:not(:last-child))::after {
|
|
102
|
+
background-color: var(--md-sys-color-primary);
|
|
103
|
+
}
|
|
104
|
+
|
|
89
105
|
::slotted(scb-step[variant='vertical']:not(:first-child))::before {
|
|
90
106
|
display: none;
|
|
91
107
|
}
|
|
@@ -96,7 +112,8 @@ import{a as w,n as c,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
|
|
|
96
112
|
top: 52px;
|
|
97
113
|
width: 1px;
|
|
98
114
|
height: calc(100% - 16px);
|
|
99
|
-
background: var(--n-70);
|
|
115
|
+
background-color: var(--n-70);
|
|
116
|
+
transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
|
|
100
117
|
z-index: 0;
|
|
101
118
|
transform: translateX(-50%);
|
|
102
119
|
}
|
|
@@ -107,11 +124,12 @@ import{a as w,n as c,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
|
|
|
107
124
|
top: 38px;
|
|
108
125
|
width: 1px;
|
|
109
126
|
height: calc(100% - 2px);
|
|
110
|
-
background: var(--n-70);
|
|
127
|
+
background-color: var(--n-70);
|
|
128
|
+
transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
|
|
111
129
|
z-index: 0;
|
|
112
130
|
transform: translateX(-50%);
|
|
113
131
|
}
|
|
114
132
|
::slotted(scb-step[symbol-variant='marker']:not(:first-child))::before {
|
|
115
133
|
top: 20px;
|
|
116
134
|
}
|
|
117
|
-
`;
|
|
135
|
+
`;c([p({type:String,reflect:!0})],n.prototype,"type",2);c([p({type:String,reflect:!0})],n.prototype,"label",2);c([p({type:Boolean,reflect:!0,attribute:"change-on-completed"})],n.prototype,"changeOnCompleted",2);c([p({type:String})],n.prototype,"variant",2);c([p({type:String,reflect:!0,attribute:"symbol-variant"})],n.prototype,"symbolVariant",2);c([p({type:String,reflect:!0})],n.prototype,"spacing",2);c([p({type:String,attribute:"spacing-top",reflect:!0})],n.prototype,"spacingTop",2);c([p({type:String,attribute:"spacing-bottom",reflect:!0})],n.prototype,"spacingBottom",2);c([p({type:String,attribute:"spacing-left",reflect:!0})],n.prototype,"spacingLeft",2);c([p({type:String,attribute:"spacing-right",reflect:!0})],n.prototype,"spacingRight",2);c([p({type:Number,reflect:!0,attribute:"active-index"})],n.prototype,"activeIndex",2);n=c([I("scb-stepper")],n);
|