scb-wc-test 0.1.232 → 0.1.233
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as b,n as s,i as m,x as l,t as p}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 i=customElements.define.bind(customElements);customElements.define=function(o,r,n){try{customElements.get(o)||i(o,r,n)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var h=Object.defineProperty,u=Object.getOwnPropertyDescriptor,a=(e,i,o,r)=>{for(var n=r>1?void 0:r?u(i,o):i,c=e.length-1,d;c>=0;c--)(d=e[c])&&(n=(r?d(i,o,n):d(n))||n);return r&&n&&h(i,o,n),n};let t=class extends m{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,i=this.label?`${this.label}${this.subLabel?": "+this.subLabel:""}`:void 0;switch(this.symbolVariant){case"icon":return l`
|
|
2
2
|
<div
|
|
3
3
|
class="scb-step-content"
|
|
4
4
|
tabindex="0"
|
|
@@ -9,7 +9,7 @@ import{a as m,n as s,i as b,x as n,t as p}from"../../vendor/vendor.js";import"..
|
|
|
9
9
|
>
|
|
10
10
|
<md-ripple></md-ripple>
|
|
11
11
|
<div class="symbol">
|
|
12
|
-
${this.completed&&this.changeOnCompleted?
|
|
12
|
+
${this.completed&&this.changeOnCompleted?l`<md-icon>check</md-icon>`:l`<md-icon>${this.icon}</md-icon>`}
|
|
13
13
|
</div>
|
|
14
14
|
<div class="content">
|
|
15
15
|
<div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
|
|
@@ -17,7 +17,7 @@ import{a as m,n as s,i as b,x as n,t as p}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 l`
|
|
21
21
|
<div
|
|
22
22
|
class="scb-step-content"
|
|
23
23
|
tabindex="0"
|
|
@@ -28,7 +28,7 @@ import{a as m,n as s,i as b,x as n,t as p}from"../../vendor/vendor.js";import"..
|
|
|
28
28
|
>
|
|
29
29
|
<md-ripple></md-ripple>
|
|
30
30
|
<div class="symbol">
|
|
31
|
-
${this.completed&&this.changeOnCompleted?
|
|
31
|
+
${this.completed&&this.changeOnCompleted?l`<md-icon>check</md-icon>`:l``}
|
|
32
32
|
</div>
|
|
33
33
|
<div class="content">
|
|
34
34
|
<div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
|
|
@@ -36,7 +36,7 @@ import{a as m,n as s,i as b,x as n,t as p}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 l`
|
|
40
40
|
<div
|
|
41
41
|
class="scb-step-content"
|
|
42
42
|
tabindex="0"
|
|
@@ -47,7 +47,7 @@ import{a as m,n as s,i as b,x as n,t as p}from"../../vendor/vendor.js";import"..
|
|
|
47
47
|
>
|
|
48
48
|
<md-ripple></md-ripple>
|
|
49
49
|
<div class="symbol">
|
|
50
|
-
${this.completed&&this.changeOnCompleted?
|
|
50
|
+
${this.completed&&this.changeOnCompleted?l`<md-icon>check</md-icon>`:l`<span>${this.number}</span>`}
|
|
51
51
|
</div>
|
|
52
52
|
<div class="content">
|
|
53
53
|
<div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
|
|
@@ -55,7 +55,7 @@ import{a as m,n as s,i as b,x as n,t as p}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=b`
|
|
59
59
|
:host {
|
|
60
60
|
font-family: var(--brand-font);
|
|
61
61
|
--scb-step-slide-from-x: 0px;
|
|
@@ -75,7 +75,9 @@ import{a as m,n as s,i as b,x as n,t as p}from"../../vendor/vendor.js";import"..
|
|
|
75
75
|
background: none;
|
|
76
76
|
box-sizing: border-box;
|
|
77
77
|
user-select: none;
|
|
78
|
-
padding: var(--spacing-4);
|
|
78
|
+
padding-inline: var(--spacing-4);
|
|
79
|
+
padding-block-start: var(--scb-stepper-step-padding-block-start, var(--spacing-4));
|
|
80
|
+
padding-block-end: var(--spacing-4);
|
|
79
81
|
}
|
|
80
82
|
.scb-step-content:focus,
|
|
81
83
|
.scb-step-content:focus-visible {
|
|
@@ -169,6 +171,9 @@ import{a as m,n as s,i as b,x as n,t as p}from"../../vendor/vendor.js";import"..
|
|
|
169
171
|
min-width: 0;
|
|
170
172
|
will-change: transform, opacity;
|
|
171
173
|
}
|
|
174
|
+
:host([labels-hidden]) .content{
|
|
175
|
+
display: none;
|
|
176
|
+
}
|
|
172
177
|
:host([variant="vertical"]) {
|
|
173
178
|
.scb-step-content {
|
|
174
179
|
flex-direction: row;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as L,n as h,i as A,x as O,t as R}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,a){try{customElements.get(s)||e(s,i,a)}catch(c){var r=String(c||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var M=Object.defineProperty,T=Object.getOwnPropertyDescriptor,z=t=>{throw TypeError(t)},p=(t,e,s,i)=>{for(var a=i>1?void 0:i?T(e,s):e,r=t.length-1,c;r>=0;r--)(c=t[r])&&(a=(i?c(e,s,a):c(a))||a);return i&&a&&M(e,s,a),a},w=(t,e,s)=>e.has(t)||z("Cannot "+s),v=(t,e,s)=>(w(t,e,"read from private field"),s?s.call(t):e.get(t)),_=(t,e,s)=>e.has(t)?z("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),m=(t,e,s,i)=>(w(t,e,"write to private field"),e.set(t,s),s),o=(t,e,s)=>(w(t,e,"access private method"),s),b,d,n,S,u,f,E,x,I;let l=class extends A{constructor(){super(...arguments),_(this,n),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,_(this,b),_(this,d,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 a=e[i].shadowRoot?.querySelector(".scb-step-content");a&&"focus"in a&&typeof a.focus=="function"&&a.focus()},0))},this._onStepContainerClick=t=>{const e=this._getSteps(),s=t.composedPath(),i=e.findIndex(a=>s.includes(a));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,n,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,n,S).call(this),o(this,n,f).call(this)}updated(t){this._updateSteps(),(t.has("variant")||t.has("symbolVariant"))&&o(this,n,f).call(this),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&o(this,n,S).call(this)}render(){return O`
|
|
2
2
|
<div
|
|
3
3
|
class="steps"
|
|
4
4
|
role="list"
|
|
@@ -8,13 +8,16 @@ import{a as w,n as p,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
|
-
|
|
11
|
+
<span class="label-measure" aria-hidden="true"></span>
|
|
12
|
+
`}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<"u"&&(m(this,b,new ResizeObserver(()=>{o(this,n,f).call(this)})),v(this,b).observe(this))}disconnectedCallback(){v(this,b)&&(v(this,b).disconnect(),m(this,b,void 0)),v(this,d)&&(cancelAnimationFrame(v(this,d)),m(this,d,0)),super.disconnectedCallback()}};b=new WeakMap;d=new WeakMap;n=new WeakSet;S=function(){const t=o(this,n,u).call(this,this.spacing),e=o(this,n,u).call(this,this.spacingTop)??t,s=o(this,n,u).call(this,this.spacingBottom)??t,i=o(this,n,u).call(this,this.spacingLeft),a=o(this,n,u).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"),a?this.style.setProperty("--scb-stepper-spacing-inline-end",a):this.style.removeProperty("--scb-stepper-spacing-inline-end")};u=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(){v(this,d)||m(this,d,requestAnimationFrame(()=>{m(this,d,0),o(this,n,I).call(this)}))};E=function(){const t=getComputedStyle(this).getPropertyValue("--scb-stepper-label-max-lines").trim(),e=parseInt(t,10);return Number.isFinite(e)&&e>0?e:2};x=function(t){const e=this.renderRoot?.querySelector(".label-measure");return e?(e.textContent=t,e.scrollWidth):0};I=function(){const t=this._getSteps();if(t.length===0)return;if(this.variant!=="horizontal"){this.removeAttribute("labels-hidden"),t.forEach(i=>i.removeAttribute("labels-hidden")),t.forEach(i=>{const a=i.shadowRoot;if(!a)return;const r=a.querySelector(".label");r&&(r.style.removeProperty("max-width"),r.style.removeProperty("white-space"),r.style.removeProperty("word-break"),r.style.removeProperty("overflow-wrap"))});return}const e=o(this,n,E).call(this);let s=!1;for(const i of t){const c=i.shadowRoot?.querySelector(".scb-step-content")?.clientWidth??i.clientWidth;if(!c)continue;const g=String(i.label??i.getAttribute("label")??"").trim(),y=String(i.subLabel??i.getAttribute("sub-label")??"").trim(),k=g?o(this,n,x).call(this,g):0,C=y?o(this,n,x).call(this,y):0,W=k?Math.ceil(k/c):1,P=C?Math.ceil(C/c):1;if(Math.max(W,P)>e){s=!0;break}}this.toggleAttribute("labels-hidden",s),t.forEach(i=>i.toggleAttribute("labels-hidden",s)),!s&&t.forEach(i=>{const a=i.shadowRoot;if(!a)return;const r=a.querySelector(".label"),c=a.querySelector(".scb-step-content");if(!r)return;r.style.maxWidth="none",r.style.whiteSpace="nowrap",r.style.wordBreak="normal",r.style.overflowWrap="normal";const g=c?.clientWidth??i.clientWidth;g>0&&r.scrollWidth>g&&(r.style.maxWidth="100%",r.style.whiteSpace="normal",r.style.wordBreak="break-word",r.style.overflowWrap="anywhere")})};l.styles=L`
|
|
12
13
|
:host {
|
|
13
14
|
--scb-stepper-width: 100%;
|
|
14
15
|
--scb-stepper-height: 100%;
|
|
15
16
|
--scb-stepper-step-count: 1;
|
|
16
17
|
--scb-stepper-connector-gap: var(--spacing-2);
|
|
17
18
|
--scb-stepper-symbol-size: var(--icon-size-medium);
|
|
19
|
+
--scb-stepper-label-max-lines: 2;
|
|
20
|
+
--scb-stepper-step-padding-block-start: var(--spacing-4);
|
|
18
21
|
display: block;
|
|
19
22
|
padding: var(--spacing-5) 0;
|
|
20
23
|
width: 100%;
|
|
@@ -28,6 +31,9 @@ import{a as w,n as p,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
|
|
|
28
31
|
margin-inline-start: var(--scb-stepper-spacing-inline-start, 0);
|
|
29
32
|
margin-inline-end: var(--scb-stepper-spacing-inline-end, 0);
|
|
30
33
|
}
|
|
34
|
+
:host([labels-hidden]) {
|
|
35
|
+
--scb-stepper-step-padding-block-start: calc(var(--spacing-4) + var(--scb-stepper-symbol-size) + var(--spacing-3));
|
|
36
|
+
}
|
|
31
37
|
.steps {
|
|
32
38
|
display: flex;
|
|
33
39
|
flex-direction: row;
|
|
@@ -54,6 +60,20 @@ import{a as w,n as p,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
|
|
|
54
60
|
min-width: 0;
|
|
55
61
|
}
|
|
56
62
|
|
|
63
|
+
.label-measure {
|
|
64
|
+
position: absolute;
|
|
65
|
+
left: -9999px;
|
|
66
|
+
top: 0;
|
|
67
|
+
white-space: nowrap;
|
|
68
|
+
visibility: hidden;
|
|
69
|
+
pointer-events: none;
|
|
70
|
+
font-family: var(--brand-font);
|
|
71
|
+
font-size: var(--md-sys-typescale-label-medium-size);
|
|
72
|
+
line-height: var(--md-sys-typescale-label-medium-line-height);
|
|
73
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
74
|
+
font-weight: var(--md-sys-typescale-label-medium-weight, 400);
|
|
75
|
+
}
|
|
76
|
+
|
|
57
77
|
/* Horisontell connector
|
|
58
78
|
Bygger upp en linje per steg, med glapp både före och efter varje symbol.
|
|
59
79
|
Första steget ritar bara sin högra del och sista steget ritar bara sin vänstra del.
|
|
@@ -62,7 +82,7 @@ import{a as w,n as p,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
|
|
|
62
82
|
:host([variant='horizontal']) ::slotted(scb-step)::after {
|
|
63
83
|
content: '';
|
|
64
84
|
position: absolute;
|
|
65
|
-
top: calc(var(--
|
|
85
|
+
top: calc(var(--scb-stepper-step-padding-block-start) + (var(--scb-stepper-symbol-size) / 2));
|
|
66
86
|
height: 1px;
|
|
67
87
|
background-color: var(--n-70);
|
|
68
88
|
transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
|
|
@@ -133,4 +153,4 @@ import{a as w,n as p,i as k,x as C,t as I}from"../../vendor/vendor.js";import"./
|
|
|
133
153
|
::slotted(scb-step[symbol-variant='marker']:not(:first-child))::before {
|
|
134
154
|
top: 20px;
|
|
135
155
|
}
|
|
136
|
-
`;
|
|
156
|
+
`;p([h({type:String,reflect:!0})],l.prototype,"type",2);p([h({type:String,reflect:!0})],l.prototype,"label",2);p([h({type:Boolean,reflect:!0,attribute:"change-on-completed"})],l.prototype,"changeOnCompleted",2);p([h({type:String})],l.prototype,"variant",2);p([h({type:String,reflect:!0,attribute:"symbol-variant"})],l.prototype,"symbolVariant",2);p([h({type:String,reflect:!0})],l.prototype,"spacing",2);p([h({type:String,attribute:"spacing-top",reflect:!0})],l.prototype,"spacingTop",2);p([h({type:String,attribute:"spacing-bottom",reflect:!0})],l.prototype,"spacingBottom",2);p([h({type:String,attribute:"spacing-left",reflect:!0})],l.prototype,"spacingLeft",2);p([h({type:String,attribute:"spacing-right",reflect:!0})],l.prototype,"spacingRight",2);p([h({type:Number,reflect:!0,attribute:"active-index"})],l.prototype,"activeIndex",2);l=p([R("scb-stepper")],l);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.233",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -378,5 +378,5 @@
|
|
|
378
378
|
},
|
|
379
379
|
"./mvc/*": "./mvc/*"
|
|
380
380
|
},
|
|
381
|
-
"buildHash": "
|
|
381
|
+
"buildHash": "3C083F36B6AEEAD2190BA7EE2950C7FEA005CE49B2B23C95A56B86FFC7224E66"
|
|
382
382
|
}
|
package/scb-stepper/scb-step.js
CHANGED
|
@@ -3,10 +3,10 @@ import { property as i, customElement as p } from "lit/decorators.js";
|
|
|
3
3
|
import "@material/web/icon/icon.js";
|
|
4
4
|
import "@material/web/ripple/ripple.js";
|
|
5
5
|
import "@material/web/focus/md-focus-ring.js";
|
|
6
|
-
var h = Object.defineProperty,
|
|
7
|
-
for (var
|
|
8
|
-
(d = e[c]) && (
|
|
9
|
-
return
|
|
6
|
+
var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, l, r, o) => {
|
|
7
|
+
for (var n = o > 1 ? void 0 : o ? v(l, r) : l, c = e.length - 1, d; c >= 0; c--)
|
|
8
|
+
(d = e[c]) && (n = (o ? d(l, r, n) : d(n)) || n);
|
|
9
|
+
return o && n && h(l, r, n), n;
|
|
10
10
|
};
|
|
11
11
|
let t = class extends b {
|
|
12
12
|
constructor() {
|
|
@@ -111,7 +111,9 @@ t.styles = m`
|
|
|
111
111
|
background: none;
|
|
112
112
|
box-sizing: border-box;
|
|
113
113
|
user-select: none;
|
|
114
|
-
padding: var(--spacing-4);
|
|
114
|
+
padding-inline: var(--spacing-4);
|
|
115
|
+
padding-block-start: var(--scb-stepper-step-padding-block-start, var(--spacing-4));
|
|
116
|
+
padding-block-end: var(--spacing-4);
|
|
115
117
|
}
|
|
116
118
|
.scb-step-content:focus,
|
|
117
119
|
.scb-step-content:focus-visible {
|
|
@@ -205,6 +207,9 @@ t.styles = m`
|
|
|
205
207
|
min-width: 0;
|
|
206
208
|
will-change: transform, opacity;
|
|
207
209
|
}
|
|
210
|
+
:host([labels-hidden]) .content{
|
|
211
|
+
display: none;
|
|
212
|
+
}
|
|
208
213
|
:host([variant="vertical"]) {
|
|
209
214
|
.scb-step-content {
|
|
210
215
|
flex-direction: row;
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
1
|
+
import { css as P, LitElement as A, html as R } from "lit";
|
|
2
|
+
import { property as h, customElement as O } from "lit/decorators.js";
|
|
3
3
|
import "./scb-step.js";
|
|
4
|
-
var
|
|
4
|
+
var M = Object.defineProperty, q = Object.getOwnPropertyDescriptor, z = (t) => {
|
|
5
5
|
throw TypeError(t);
|
|
6
|
-
},
|
|
7
|
-
for (var r = i > 1 ? void 0 : i ?
|
|
8
|
-
(
|
|
9
|
-
return i && r &&
|
|
10
|
-
},
|
|
11
|
-
let
|
|
6
|
+
}, c = (t, e, s, i) => {
|
|
7
|
+
for (var r = i > 1 ? void 0 : i ? q(e, s) : e, a = t.length - 1, p; a >= 0; a--)
|
|
8
|
+
(p = t[a]) && (r = (i ? p(e, s, r) : p(r)) || r);
|
|
9
|
+
return i && r && M(e, s, r), r;
|
|
10
|
+
}, k = (t, e, s) => e.has(t) || z("Cannot " + s), v = (t, e, s) => (k(t, e, "read from private field"), s ? s.call(t) : e.get(t)), S = (t, e, s) => e.has(t) ? z("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), f = (t, e, s, i) => (k(t, e, "write to private field"), e.set(t, s), s), o = (t, e, s) => (k(t, e, "access private method"), s), b, d, n, _, g, m, I, x, E;
|
|
11
|
+
let l = class extends A {
|
|
12
12
|
constructor() {
|
|
13
|
-
super(...arguments),
|
|
13
|
+
super(...arguments), S(this, n), 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, S(this, b), S(this, d, 0), this._onKeyNav = (t) => {
|
|
14
14
|
const e = this._getSteps(), s = this.activeIndex;
|
|
15
15
|
let i = s;
|
|
16
16
|
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(() => {
|
|
17
|
-
var
|
|
18
|
-
const r = (
|
|
17
|
+
var a;
|
|
18
|
+
const r = (a = e[i].shadowRoot) == null ? void 0 : a.querySelector(
|
|
19
19
|
".scb-step-content"
|
|
20
20
|
);
|
|
21
21
|
r && "focus" in r && typeof r.focus == "function" && r.focus();
|
|
@@ -29,7 +29,7 @@ let n = class extends w {
|
|
|
29
29
|
this.activeIndex = 0;
|
|
30
30
|
return;
|
|
31
31
|
}
|
|
32
|
-
this.activeIndex > t.length - 1 ? this.activeIndex = t.length - 1 : this.activeIndex < 0 && (this.activeIndex = 0), this._updateSteps(), o(this,
|
|
32
|
+
this.activeIndex > t.length - 1 ? this.activeIndex = t.length - 1 : this.activeIndex < 0 && (this.activeIndex = 0), this._updateSteps(), o(this, n, m).call(this);
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
_onStepClick(t) {
|
|
@@ -123,13 +123,13 @@ let n = class extends w {
|
|
|
123
123
|
return Array.from(this.querySelectorAll("scb-step"));
|
|
124
124
|
}
|
|
125
125
|
firstUpdated(t) {
|
|
126
|
-
this._updateSteps(), o(this,
|
|
126
|
+
this._updateSteps(), o(this, n, _).call(this), o(this, n, m).call(this);
|
|
127
127
|
}
|
|
128
128
|
updated(t) {
|
|
129
|
-
this._updateSteps(), (t.has("variant") || t.has("symbolVariant")) && o(this,
|
|
129
|
+
this._updateSteps(), (t.has("variant") || t.has("symbolVariant")) && o(this, n, m).call(this), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) && o(this, n, _).call(this);
|
|
130
130
|
}
|
|
131
131
|
render() {
|
|
132
|
-
return
|
|
132
|
+
return R`
|
|
133
133
|
<div
|
|
134
134
|
class="steps"
|
|
135
135
|
role="list"
|
|
@@ -139,58 +139,87 @@ let n = class extends w {
|
|
|
139
139
|
>
|
|
140
140
|
<slot @slotchange=${this._onSlotChange}></slot>
|
|
141
141
|
</div>
|
|
142
|
+
<span class="label-measure" aria-hidden="true"></span>
|
|
142
143
|
`;
|
|
143
144
|
}
|
|
144
145
|
connectedCallback() {
|
|
145
|
-
super.connectedCallback(), typeof ResizeObserver < "u" && (f(this,
|
|
146
|
-
o(this,
|
|
147
|
-
})), v(this,
|
|
146
|
+
super.connectedCallback(), typeof ResizeObserver < "u" && (f(this, b, new ResizeObserver(() => {
|
|
147
|
+
o(this, n, m).call(this);
|
|
148
|
+
})), v(this, b).observe(this));
|
|
148
149
|
}
|
|
149
150
|
disconnectedCallback() {
|
|
150
|
-
v(this,
|
|
151
|
+
v(this, b) && (v(this, b).disconnect(), f(this, b, void 0)), v(this, d) && (cancelAnimationFrame(v(this, d)), f(this, d, 0)), super.disconnectedCallback();
|
|
151
152
|
}
|
|
152
153
|
};
|
|
154
|
+
b = /* @__PURE__ */ new WeakMap();
|
|
153
155
|
d = /* @__PURE__ */ new WeakMap();
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
const t = o(this, a, b).call(this, this.spacing), e = o(this, a, b).call(this, this.spacingTop) ?? t, s = o(this, a, b).call(this, this.spacingBottom) ?? t, i = o(this, a, b).call(this, this.spacingLeft), r = o(this, a, b).call(this, this.spacingRight);
|
|
156
|
+
n = /* @__PURE__ */ new WeakSet();
|
|
157
|
+
_ = function() {
|
|
158
|
+
const t = o(this, n, g).call(this, this.spacing), e = o(this, n, g).call(this, this.spacingTop) ?? t, s = o(this, n, g).call(this, this.spacingBottom) ?? t, i = o(this, n, g).call(this, this.spacingLeft), r = o(this, n, g).call(this, this.spacingRight);
|
|
158
159
|
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");
|
|
159
160
|
};
|
|
160
|
-
|
|
161
|
+
g = function(t) {
|
|
161
162
|
if (!t) return;
|
|
162
163
|
const e = String(t).trim();
|
|
163
164
|
if (e)
|
|
164
165
|
return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
|
|
165
166
|
};
|
|
166
|
-
|
|
167
|
-
v(this,
|
|
168
|
-
f(this,
|
|
167
|
+
m = function() {
|
|
168
|
+
v(this, d) || f(this, d, requestAnimationFrame(() => {
|
|
169
|
+
f(this, d, 0), o(this, n, E).call(this);
|
|
169
170
|
}));
|
|
170
171
|
};
|
|
171
|
-
|
|
172
|
+
I = function() {
|
|
173
|
+
const t = getComputedStyle(this).getPropertyValue("--scb-stepper-label-max-lines").trim(), e = parseInt(t, 10);
|
|
174
|
+
return Number.isFinite(e) && e > 0 ? e : 2;
|
|
175
|
+
};
|
|
176
|
+
x = function(t) {
|
|
177
|
+
var s;
|
|
178
|
+
const e = (s = this.renderRoot) == null ? void 0 : s.querySelector(".label-measure");
|
|
179
|
+
return e ? (e.textContent = t, e.scrollWidth) : 0;
|
|
180
|
+
};
|
|
181
|
+
E = function() {
|
|
172
182
|
const t = this._getSteps();
|
|
173
|
-
t.length
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
183
|
+
if (t.length === 0) return;
|
|
184
|
+
if (this.variant !== "horizontal") {
|
|
185
|
+
this.removeAttribute("labels-hidden"), t.forEach((i) => i.removeAttribute("labels-hidden")), t.forEach((i) => {
|
|
186
|
+
const r = i.shadowRoot;
|
|
187
|
+
if (!r) return;
|
|
188
|
+
const a = r.querySelector(".label");
|
|
189
|
+
a && (a.style.removeProperty("max-width"), a.style.removeProperty("white-space"), a.style.removeProperty("word-break"), a.style.removeProperty("overflow-wrap"));
|
|
190
|
+
});
|
|
191
|
+
return;
|
|
192
|
+
}
|
|
193
|
+
const e = o(this, n, I).call(this);
|
|
194
|
+
let s = !1;
|
|
195
|
+
for (const i of t) {
|
|
196
|
+
const r = i.shadowRoot, a = r == null ? void 0 : r.querySelector(".scb-step-content"), p = (a == null ? void 0 : a.clientWidth) ?? i.clientWidth;
|
|
197
|
+
if (!p) continue;
|
|
198
|
+
const u = String(i.label ?? i.getAttribute("label") ?? "").trim(), y = String(i.subLabel ?? i.getAttribute("sub-label") ?? "").trim(), w = u ? o(this, n, x).call(this, u) : 0, C = y ? o(this, n, x).call(this, y) : 0, W = w ? Math.ceil(w / p) : 1, L = C ? Math.ceil(C / p) : 1;
|
|
199
|
+
if (Math.max(W, L) > e) {
|
|
200
|
+
s = !0;
|
|
201
|
+
break;
|
|
181
202
|
}
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
203
|
+
}
|
|
204
|
+
this.toggleAttribute("labels-hidden", s), t.forEach((i) => i.toggleAttribute("labels-hidden", s)), !s && t.forEach((i) => {
|
|
205
|
+
const r = i.shadowRoot;
|
|
206
|
+
if (!r) return;
|
|
207
|
+
const a = r.querySelector(".label"), p = r.querySelector(".scb-step-content");
|
|
208
|
+
if (!a) return;
|
|
209
|
+
a.style.maxWidth = "none", a.style.whiteSpace = "nowrap", a.style.wordBreak = "normal", a.style.overflowWrap = "normal";
|
|
210
|
+
const u = (p == null ? void 0 : p.clientWidth) ?? i.clientWidth;
|
|
211
|
+
u > 0 && a.scrollWidth > u && (a.style.maxWidth = "100%", a.style.whiteSpace = "normal", a.style.wordBreak = "break-word", a.style.overflowWrap = "anywhere");
|
|
185
212
|
});
|
|
186
213
|
};
|
|
187
|
-
|
|
214
|
+
l.styles = P`
|
|
188
215
|
:host {
|
|
189
216
|
--scb-stepper-width: 100%;
|
|
190
217
|
--scb-stepper-height: 100%;
|
|
191
218
|
--scb-stepper-step-count: 1;
|
|
192
219
|
--scb-stepper-connector-gap: var(--spacing-2);
|
|
193
220
|
--scb-stepper-symbol-size: var(--icon-size-medium);
|
|
221
|
+
--scb-stepper-label-max-lines: 2;
|
|
222
|
+
--scb-stepper-step-padding-block-start: var(--spacing-4);
|
|
194
223
|
display: block;
|
|
195
224
|
padding: var(--spacing-5) 0;
|
|
196
225
|
width: 100%;
|
|
@@ -204,6 +233,9 @@ n.styles = k`
|
|
|
204
233
|
margin-inline-start: var(--scb-stepper-spacing-inline-start, 0);
|
|
205
234
|
margin-inline-end: var(--scb-stepper-spacing-inline-end, 0);
|
|
206
235
|
}
|
|
236
|
+
:host([labels-hidden]) {
|
|
237
|
+
--scb-stepper-step-padding-block-start: calc(var(--spacing-4) + var(--scb-stepper-symbol-size) + var(--spacing-3));
|
|
238
|
+
}
|
|
207
239
|
.steps {
|
|
208
240
|
display: flex;
|
|
209
241
|
flex-direction: row;
|
|
@@ -230,6 +262,20 @@ n.styles = k`
|
|
|
230
262
|
min-width: 0;
|
|
231
263
|
}
|
|
232
264
|
|
|
265
|
+
.label-measure {
|
|
266
|
+
position: absolute;
|
|
267
|
+
left: -9999px;
|
|
268
|
+
top: 0;
|
|
269
|
+
white-space: nowrap;
|
|
270
|
+
visibility: hidden;
|
|
271
|
+
pointer-events: none;
|
|
272
|
+
font-family: var(--brand-font);
|
|
273
|
+
font-size: var(--md-sys-typescale-label-medium-size);
|
|
274
|
+
line-height: var(--md-sys-typescale-label-medium-line-height);
|
|
275
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
276
|
+
font-weight: var(--md-sys-typescale-label-medium-weight, 400);
|
|
277
|
+
}
|
|
278
|
+
|
|
233
279
|
/* Horisontell connector
|
|
234
280
|
Bygger upp en linje per steg, med glapp både före och efter varje symbol.
|
|
235
281
|
Första steget ritar bara sin högra del och sista steget ritar bara sin vänstra del.
|
|
@@ -238,7 +284,7 @@ n.styles = k`
|
|
|
238
284
|
:host([variant='horizontal']) ::slotted(scb-step)::after {
|
|
239
285
|
content: '';
|
|
240
286
|
position: absolute;
|
|
241
|
-
top: calc(var(--
|
|
287
|
+
top: calc(var(--scb-stepper-step-padding-block-start) + (var(--scb-stepper-symbol-size) / 2));
|
|
242
288
|
height: 1px;
|
|
243
289
|
background-color: var(--n-70);
|
|
244
290
|
transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
|
|
@@ -310,42 +356,42 @@ n.styles = k`
|
|
|
310
356
|
top: 20px;
|
|
311
357
|
}
|
|
312
358
|
`;
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
],
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
],
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
],
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
],
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
],
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
],
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
],
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
],
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
],
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
],
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
],
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
],
|
|
359
|
+
c([
|
|
360
|
+
h({ type: String, reflect: !0 })
|
|
361
|
+
], l.prototype, "type", 2);
|
|
362
|
+
c([
|
|
363
|
+
h({ type: String, reflect: !0 })
|
|
364
|
+
], l.prototype, "label", 2);
|
|
365
|
+
c([
|
|
366
|
+
h({ type: Boolean, reflect: !0, attribute: "change-on-completed" })
|
|
367
|
+
], l.prototype, "changeOnCompleted", 2);
|
|
368
|
+
c([
|
|
369
|
+
h({ type: String })
|
|
370
|
+
], l.prototype, "variant", 2);
|
|
371
|
+
c([
|
|
372
|
+
h({ type: String, reflect: !0, attribute: "symbol-variant" })
|
|
373
|
+
], l.prototype, "symbolVariant", 2);
|
|
374
|
+
c([
|
|
375
|
+
h({ type: String, reflect: !0 })
|
|
376
|
+
], l.prototype, "spacing", 2);
|
|
377
|
+
c([
|
|
378
|
+
h({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
379
|
+
], l.prototype, "spacingTop", 2);
|
|
380
|
+
c([
|
|
381
|
+
h({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
382
|
+
], l.prototype, "spacingBottom", 2);
|
|
383
|
+
c([
|
|
384
|
+
h({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
385
|
+
], l.prototype, "spacingLeft", 2);
|
|
386
|
+
c([
|
|
387
|
+
h({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
388
|
+
], l.prototype, "spacingRight", 2);
|
|
389
|
+
c([
|
|
390
|
+
h({ type: Number, reflect: !0, attribute: "active-index" })
|
|
391
|
+
], l.prototype, "activeIndex", 2);
|
|
392
|
+
l = c([
|
|
393
|
+
O("scb-stepper")
|
|
394
|
+
], l);
|
|
349
395
|
export {
|
|
350
|
-
|
|
396
|
+
l as ScbStepper
|
|
351
397
|
};
|