scb-wc-test 0.1.215 → 0.1.217
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-stepper/scb-stepper.js +38 -9
- package/package.json +2 -2
- package/scb-stepper/scb-stepper.d.ts +2 -0
- package/scb-stepper/scb-stepper.js +127 -67
- package/scb-wc-test.bundle.js +434 -405
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as w,n as c,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 E=Object.defineProperty,z=Object.getOwnPropertyDescriptor,S=t=>{throw TypeError(t)},p=(t,e,s,i)=>{for(var r=i>1?void 0:i?z(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&&E(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)),y=(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,n,m,f,g,x;let a=class extends k{constructor(){super(...arguments),y(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,y(this,v),y(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,n,g).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,m).call(this),o(this,n,g).call(this)}updated(t){this._updateSteps(),(t.has("variant")||t.has("symbolVariant"))&&o(this,n,g).call(this),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&o(this,n,m).call(this)}render(){return C`
|
|
2
2
|
<div
|
|
3
3
|
class="steps"
|
|
4
4
|
role="list"
|
|
@@ -8,10 +8,13 @@ import{a as f,n as p,i as u,x as b,t as m}from"../../vendor/vendor.js";import"./
|
|
|
8
8
|
>
|
|
9
9
|
<slot @slotchange=${this._onSlotChange}></slot>
|
|
10
10
|
</div>
|
|
11
|
-
`}};
|
|
11
|
+
`}connectedCallback(){super.connectedCallback(),typeof ResizeObserver<"u"&&(u(this,v,new ResizeObserver(()=>{o(this,n,g).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;n=new WeakSet;m=function(){const t=o(this,n,f).call(this,this.spacing),e=o(this,n,f).call(this,this.spacingTop)??t,s=o(this,n,f).call(this,this.spacingBottom)??t,i=o(this,n,f).call(this,this.spacingLeft),r=o(this,n,f).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")};f=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};g=function(){b(this,h)||u(this,h,requestAnimationFrame(()=>{u(this,h,0),o(this,n,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")})};a.styles=w`
|
|
12
12
|
:host {
|
|
13
13
|
--scb-stepper-width: 100%;
|
|
14
14
|
--scb-stepper-height: 100%;
|
|
15
|
+
--scb-stepper-step-count: 1;
|
|
16
|
+
--scb-stepper-connector-gap: var(--spacing-2);
|
|
17
|
+
--scb-stepper-symbol-size: var(--icon-size-medium);
|
|
15
18
|
display: block;
|
|
16
19
|
padding: var(--spacing-5) 0;
|
|
17
20
|
width: 100%;
|
|
@@ -32,29 +35,55 @@ import{a as f,n as p,i as u,x as b,t as m}from"../../vendor/vendor.js";import"./
|
|
|
32
35
|
justify-content: center;
|
|
33
36
|
position: relative;
|
|
34
37
|
width: 100%;
|
|
35
|
-
gap:
|
|
38
|
+
gap: 0;
|
|
36
39
|
height: 100%;
|
|
37
40
|
}
|
|
38
41
|
:host([variant='vertical']) .steps {
|
|
39
42
|
flex-direction: column;
|
|
40
43
|
gap: var(--spacing-8);
|
|
41
44
|
}
|
|
45
|
+
|
|
46
|
+
:host([symbol-variant='marker']) {
|
|
47
|
+
--scb-stepper-symbol-size: 16px;
|
|
48
|
+
}
|
|
42
49
|
::slotted(scb-step) {
|
|
43
50
|
position: relative;
|
|
44
51
|
flex: 1 1 0;
|
|
45
52
|
z-index: 1;
|
|
46
53
|
width: 100%;
|
|
47
54
|
}
|
|
48
|
-
|
|
49
|
-
|
|
55
|
+
|
|
56
|
+
/* Horisontell connector
|
|
57
|
+
Bygger upp en linje per steg, med glapp både före och efter varje symbol.
|
|
58
|
+
Första steget ritar bara sin högra del och sista steget ritar bara sin vänstra del.
|
|
59
|
+
*/
|
|
60
|
+
:host([variant='horizontal']) ::slotted(scb-step)::before,
|
|
61
|
+
:host([variant='horizontal']) ::slotted(scb-step)::after {
|
|
50
62
|
content: '';
|
|
51
63
|
position: absolute;
|
|
52
|
-
|
|
53
|
-
top: 28px;
|
|
54
|
-
width: calc(100% - 24px);
|
|
64
|
+
top: calc(var(--spacing-4) + (var(--scb-stepper-symbol-size) / 2));
|
|
55
65
|
height: 1px;
|
|
56
66
|
background: var(--n-70);
|
|
57
67
|
z-index: 0;
|
|
68
|
+
pointer-events: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
:host([variant='horizontal']) ::slotted(scb-step)::before {
|
|
72
|
+
left: 0;
|
|
73
|
+
right: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
:host([variant='horizontal']) ::slotted(scb-step)::after {
|
|
77
|
+
left: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
|
|
78
|
+
right: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
:host([variant='horizontal']) ::slotted(scb-step:first-child)::before {
|
|
82
|
+
display: none;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
:host([variant='horizontal']) ::slotted(scb-step:last-child)::after {
|
|
86
|
+
display: none;
|
|
58
87
|
}
|
|
59
88
|
/* Vertikal connector */
|
|
60
89
|
::slotted(scb-step[variant='vertical']:not(:first-child))::before {
|
|
@@ -85,4 +114,4 @@ import{a as f,n as p,i as u,x as b,t as m}from"../../vendor/vendor.js";import"./
|
|
|
85
114
|
::slotted(scb-step[symbol-variant='marker']:not(:first-child))::before {
|
|
86
115
|
top: 20px;
|
|
87
116
|
}
|
|
88
|
-
`;
|
|
117
|
+
`;p([c({type:String,reflect:!0})],a.prototype,"type",2);p([c({type:String,reflect:!0})],a.prototype,"label",2);p([c({type:Boolean,reflect:!0,attribute:"change-on-completed"})],a.prototype,"changeOnCompleted",2);p([c({type:String})],a.prototype,"variant",2);p([c({type:String,reflect:!0,attribute:"symbol-variant"})],a.prototype,"symbolVariant",2);p([c({type:String,reflect:!0})],a.prototype,"spacing",2);p([c({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",2);p([c({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",2);p([c({type:String,attribute:"spacing-left",reflect:!0})],a.prototype,"spacingLeft",2);p([c({type:String,attribute:"spacing-right",reflect:!0})],a.prototype,"spacingRight",2);p([c({type:Number,reflect:!0,attribute:"active-index"})],a.prototype,"activeIndex",2);a=p([I("scb-stepper")],a);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.217",
|
|
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": "7D543E5C712B1CC0E3D0111E2D4EB384ECFD116C990055DCCB9D1B05A662F6F7"
|
|
382
382
|
}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { css as
|
|
2
|
-
import { property as
|
|
1
|
+
import { css as w, LitElement as k, 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
|
|
8
|
-
(
|
|
9
|
-
return i &&
|
|
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, u; l >= 0; l--)
|
|
8
|
+
(u = t[l]) && (r = (i ? u(e, s, r) : u(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)), y = (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, m, b, g, x;
|
|
11
|
+
let n = class extends k {
|
|
12
12
|
constructor() {
|
|
13
|
-
super(...arguments),
|
|
13
|
+
super(...arguments), y(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, y(this, d), y(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
17
|
var l;
|
|
18
|
-
const
|
|
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();
|
|
22
22
|
}, 0));
|
|
23
23
|
}, this._onStepContainerClick = (t) => {
|
|
24
|
-
const e = this._getSteps(), s = t.composedPath(), i = e.findIndex((
|
|
24
|
+
const e = this._getSteps(), s = t.composedPath(), i = e.findIndex((r) => s.includes(r));
|
|
25
25
|
i !== -1 && this._onStepClick(i);
|
|
26
26
|
}, this._onSlotChange = () => {
|
|
27
27
|
const t = this._getSteps();
|
|
@@ -29,7 +29,7 @@ let r = class extends b {
|
|
|
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();
|
|
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) {
|
|
@@ -115,7 +115,7 @@ let r = class extends b {
|
|
|
115
115
|
}
|
|
116
116
|
_updateSteps() {
|
|
117
117
|
const t = this._getSteps();
|
|
118
|
-
t.forEach((e, s) => {
|
|
118
|
+
this.style.setProperty("--scb-stepper-step-count", String(Math.max(1, t.length))), t.forEach((e, s) => {
|
|
119
119
|
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;
|
|
120
120
|
}), t.length > 0 && (t[t.length - 1].islast = !0);
|
|
121
121
|
}
|
|
@@ -123,13 +123,13 @@ let r = class extends b {
|
|
|
123
123
|
return Array.from(this.querySelectorAll("scb-step"));
|
|
124
124
|
}
|
|
125
125
|
firstUpdated(t) {
|
|
126
|
-
this._updateSteps(),
|
|
126
|
+
this._updateSteps(), o(this, a, m).call(this), o(this, a, g).call(this);
|
|
127
127
|
}
|
|
128
128
|
updated(t) {
|
|
129
|
-
this._updateSteps(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom") || t.has("spacingLeft") || t.has("spacingRight")) &&
|
|
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, m).call(this);
|
|
130
130
|
}
|
|
131
131
|
render() {
|
|
132
|
-
return
|
|
132
|
+
return C`
|
|
133
133
|
<div
|
|
134
134
|
class="steps"
|
|
135
135
|
role="list"
|
|
@@ -141,22 +141,56 @@ let r = class extends b {
|
|
|
141
141
|
</div>
|
|
142
142
|
`;
|
|
143
143
|
}
|
|
144
|
+
connectedCallback() {
|
|
145
|
+
super.connectedCallback(), typeof ResizeObserver < "u" && (f(this, d, new ResizeObserver(() => {
|
|
146
|
+
o(this, a, g).call(this);
|
|
147
|
+
})), v(this, d).observe(this));
|
|
148
|
+
}
|
|
149
|
+
disconnectedCallback() {
|
|
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();
|
|
151
|
+
}
|
|
144
152
|
};
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
153
|
+
d = /* @__PURE__ */ new WeakMap();
|
|
154
|
+
h = /* @__PURE__ */ new WeakMap();
|
|
155
|
+
a = /* @__PURE__ */ new WeakSet();
|
|
156
|
+
m = 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);
|
|
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");
|
|
149
159
|
};
|
|
150
|
-
|
|
160
|
+
b = function(t) {
|
|
151
161
|
if (!t) return;
|
|
152
162
|
const e = String(t).trim();
|
|
153
163
|
if (e)
|
|
154
164
|
return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
|
|
155
165
|
};
|
|
156
|
-
|
|
166
|
+
g = function() {
|
|
167
|
+
v(this, h) || f(this, h, requestAnimationFrame(() => {
|
|
168
|
+
f(this, h, 0), o(this, a, x).call(this);
|
|
169
|
+
}));
|
|
170
|
+
};
|
|
171
|
+
x = function() {
|
|
172
|
+
const t = this._getSteps();
|
|
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;
|
|
181
|
+
}
|
|
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");
|
|
185
|
+
});
|
|
186
|
+
};
|
|
187
|
+
n.styles = w`
|
|
157
188
|
:host {
|
|
158
189
|
--scb-stepper-width: 100%;
|
|
159
190
|
--scb-stepper-height: 100%;
|
|
191
|
+
--scb-stepper-step-count: 1;
|
|
192
|
+
--scb-stepper-connector-gap: var(--spacing-2);
|
|
193
|
+
--scb-stepper-symbol-size: var(--icon-size-medium);
|
|
160
194
|
display: block;
|
|
161
195
|
padding: var(--spacing-5) 0;
|
|
162
196
|
width: 100%;
|
|
@@ -177,29 +211,55 @@ r.styles = f`
|
|
|
177
211
|
justify-content: center;
|
|
178
212
|
position: relative;
|
|
179
213
|
width: 100%;
|
|
180
|
-
gap:
|
|
214
|
+
gap: 0;
|
|
181
215
|
height: 100%;
|
|
182
216
|
}
|
|
183
217
|
:host([variant='vertical']) .steps {
|
|
184
218
|
flex-direction: column;
|
|
185
219
|
gap: var(--spacing-8);
|
|
186
220
|
}
|
|
221
|
+
|
|
222
|
+
:host([symbol-variant='marker']) {
|
|
223
|
+
--scb-stepper-symbol-size: 16px;
|
|
224
|
+
}
|
|
187
225
|
::slotted(scb-step) {
|
|
188
226
|
position: relative;
|
|
189
227
|
flex: 1 1 0;
|
|
190
228
|
z-index: 1;
|
|
191
229
|
width: 100%;
|
|
192
230
|
}
|
|
193
|
-
|
|
194
|
-
|
|
231
|
+
|
|
232
|
+
/* Horisontell connector
|
|
233
|
+
Bygger upp en linje per steg, med glapp både före och efter varje symbol.
|
|
234
|
+
Första steget ritar bara sin högra del och sista steget ritar bara sin vänstra del.
|
|
235
|
+
*/
|
|
236
|
+
:host([variant='horizontal']) ::slotted(scb-step)::before,
|
|
237
|
+
:host([variant='horizontal']) ::slotted(scb-step)::after {
|
|
195
238
|
content: '';
|
|
196
239
|
position: absolute;
|
|
197
|
-
|
|
198
|
-
top: 28px;
|
|
199
|
-
width: calc(100% - 24px);
|
|
240
|
+
top: calc(var(--spacing-4) + (var(--scb-stepper-symbol-size) / 2));
|
|
200
241
|
height: 1px;
|
|
201
242
|
background: var(--n-70);
|
|
202
243
|
z-index: 0;
|
|
244
|
+
pointer-events: none;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
:host([variant='horizontal']) ::slotted(scb-step)::before {
|
|
248
|
+
left: 0;
|
|
249
|
+
right: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
:host([variant='horizontal']) ::slotted(scb-step)::after {
|
|
253
|
+
left: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
|
|
254
|
+
right: 0;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
:host([variant='horizontal']) ::slotted(scb-step:first-child)::before {
|
|
258
|
+
display: none;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
:host([variant='horizontal']) ::slotted(scb-step:last-child)::after {
|
|
262
|
+
display: none;
|
|
203
263
|
}
|
|
204
264
|
/* Vertikal connector */
|
|
205
265
|
::slotted(scb-step[variant='vertical']:not(:first-child))::before {
|
|
@@ -231,42 +291,42 @@ r.styles = f`
|
|
|
231
291
|
top: 20px;
|
|
232
292
|
}
|
|
233
293
|
`;
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
],
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
],
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
],
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
],
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
],
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
],
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
],
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
],
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
],
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
],
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
],
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
],
|
|
294
|
+
p([
|
|
295
|
+
c({ type: String, reflect: !0 })
|
|
296
|
+
], n.prototype, "type", 2);
|
|
297
|
+
p([
|
|
298
|
+
c({ type: String, reflect: !0 })
|
|
299
|
+
], n.prototype, "label", 2);
|
|
300
|
+
p([
|
|
301
|
+
c({ type: Boolean, reflect: !0, attribute: "change-on-completed" })
|
|
302
|
+
], n.prototype, "changeOnCompleted", 2);
|
|
303
|
+
p([
|
|
304
|
+
c({ type: String })
|
|
305
|
+
], n.prototype, "variant", 2);
|
|
306
|
+
p([
|
|
307
|
+
c({ type: String, reflect: !0, attribute: "symbol-variant" })
|
|
308
|
+
], n.prototype, "symbolVariant", 2);
|
|
309
|
+
p([
|
|
310
|
+
c({ type: String, reflect: !0 })
|
|
311
|
+
], n.prototype, "spacing", 2);
|
|
312
|
+
p([
|
|
313
|
+
c({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
314
|
+
], n.prototype, "spacingTop", 2);
|
|
315
|
+
p([
|
|
316
|
+
c({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
317
|
+
], n.prototype, "spacingBottom", 2);
|
|
318
|
+
p([
|
|
319
|
+
c({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
320
|
+
], n.prototype, "spacingLeft", 2);
|
|
321
|
+
p([
|
|
322
|
+
c({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
323
|
+
], n.prototype, "spacingRight", 2);
|
|
324
|
+
p([
|
|
325
|
+
c({ type: Number, reflect: !0, attribute: "active-index" })
|
|
326
|
+
], n.prototype, "activeIndex", 2);
|
|
327
|
+
n = p([
|
|
328
|
+
I("scb-stepper")
|
|
329
|
+
], n);
|
|
270
330
|
export {
|
|
271
|
-
|
|
331
|
+
n as ScbStepper
|
|
272
332
|
};
|