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