scb-wc-test 0.1.76 → 0.1.77
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-step.js +129 -59
- package/mvc/components/scb-stepper/scb-stepper.js +25 -20
- package/package.json +2 -2
- package/scb-stepper/scb-step.d.ts +3 -0
- package/scb-stepper/scb-step.js +174 -88
- package/scb-stepper/scb-stepper.d.ts +14 -0
- package/scb-stepper/scb-stepper.js +110 -51
- package/scb-wc-test.bundle.js +232 -157
|
@@ -1,74 +1,125 @@
|
|
|
1
|
-
import{a as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
1
|
+
import{a as m,n as a,i as p,x as l,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 i=customElements.define.bind(customElements);customElements.define=function(o,n,r){try{customElements.get(o)||i(o,n,r)}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,s=(e,i,o,n)=>{for(var r=n>1?void 0:n?u(i,o):i,c=e.length-1,d;c>=0;c--)(d=e[c])&&(r=(n?d(i,o,r):d(r))||r);return n&&r&&h(i,o,r),r};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,i=this.label?`${this.label}${this.subLabel?": "+this.subLabel:""}`:void 0;switch(this.symbolVariant){case"icon":return l`
|
|
2
|
+
<div
|
|
3
|
+
class="scb-step-content"
|
|
4
|
+
tabindex="0"
|
|
5
|
+
role="listitem"
|
|
6
|
+
aria-current=${e}
|
|
7
|
+
aria-label=${i}
|
|
8
|
+
@keydown=${this.handleKeyDown}
|
|
9
|
+
>
|
|
10
|
+
<md-ripple></md-ripple>
|
|
11
|
+
<div class="symbol">
|
|
12
|
+
${this.completed&&this.changeOnCompleted?l`<md-icon>check</md-icon>`:l`<md-icon>${this.icon}</md-icon>`}
|
|
13
|
+
</div>
|
|
14
|
+
<div class="content">
|
|
15
|
+
<div class="label">${this.label}</div>
|
|
16
|
+
<div class="sub-label">${this.subLabel}</div>
|
|
17
|
+
</div>
|
|
18
|
+
<md-focus-ring></md-focus-ring>
|
|
19
|
+
</div>
|
|
20
|
+
`;case"marker":return l`
|
|
21
|
+
<div
|
|
22
|
+
class="scb-step-content"
|
|
23
|
+
tabindex="0"
|
|
24
|
+
role="listitem"
|
|
25
|
+
aria-current=${e}
|
|
26
|
+
aria-label=${i}
|
|
27
|
+
@keydown=${this.handleKeyDown}
|
|
28
|
+
>
|
|
29
|
+
<md-ripple></md-ripple>
|
|
30
|
+
<div class="symbol">
|
|
31
|
+
${this.completed&&this.changeOnCompleted?l`<md-icon>check</md-icon>`:l``}
|
|
32
|
+
</div>
|
|
33
|
+
<div class="content">
|
|
34
|
+
<div class="label">${this.label}</div>
|
|
35
|
+
<div class="sub-label">${this.subLabel}</div>
|
|
36
|
+
</div>
|
|
37
|
+
<md-focus-ring></md-focus-ring>
|
|
38
|
+
</div>
|
|
39
|
+
`;default:return l`
|
|
40
|
+
<div
|
|
41
|
+
class="scb-step-content"
|
|
42
|
+
tabindex="0"
|
|
43
|
+
role="listitem"
|
|
44
|
+
aria-current=${e}
|
|
45
|
+
aria-label=${i}
|
|
46
|
+
@keydown=${this.handleKeyDown}
|
|
47
|
+
>
|
|
48
|
+
<md-ripple></md-ripple>
|
|
49
|
+
<div class="symbol">
|
|
50
|
+
${this.completed&&this.changeOnCompleted?l`<md-icon>check</md-icon>`:l`<span>${this.number}</span>`}
|
|
51
|
+
</div>
|
|
52
|
+
<div class="content">
|
|
53
|
+
<div class="label">${this.label}</div>
|
|
54
|
+
<div class="sub-label">${this.subLabel}</div>
|
|
55
|
+
</div>
|
|
56
|
+
<md-focus-ring></md-focus-ring>
|
|
57
|
+
</div>
|
|
58
|
+
`}}};t.styles=m`
|
|
26
59
|
:host {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
60
|
+
font-family: var(--brand-font);
|
|
61
|
+
}
|
|
62
|
+
.scb-step-content {
|
|
63
|
+
width: 100%;
|
|
64
|
+
height: 100%;
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
align-items: center;
|
|
68
|
+
position: relative;
|
|
69
|
+
flex: 1 1 0;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
background: none;
|
|
72
|
+
box-sizing: border-box;
|
|
73
|
+
user-select: none;
|
|
74
|
+
padding: var(--spacing-4);
|
|
75
|
+
}
|
|
76
|
+
.scb-step-content:focus,
|
|
77
|
+
.scb-step-content:focus-visible {
|
|
78
|
+
outline: none ;
|
|
79
|
+
box-shadow: none ;
|
|
80
|
+
}
|
|
39
81
|
.symbol {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
82
|
+
background-color: var(--md-sys-color-outline-variant);
|
|
83
|
+
color: var(--md-sys-color-on-primary);
|
|
84
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
85
|
+
min-width: var(--icon-size-medium);
|
|
86
|
+
height: var(--icon-size-medium);
|
|
87
|
+
display: flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
justify-content: center;
|
|
90
|
+
font-weight: var(--md-sys-typescale-label-small-weight);
|
|
91
|
+
font-size: var(--md-sys-typescale-label-small-size);
|
|
92
|
+
line-height: var(--md-sys-typescale-label-small-line-height);
|
|
93
|
+
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
94
|
+
position: relative;
|
|
95
|
+
z-index: 1;
|
|
96
|
+
}
|
|
97
|
+
md-focus-ring {
|
|
98
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
52
99
|
}
|
|
53
100
|
md-icon {
|
|
54
101
|
font-size: 20px;
|
|
55
102
|
}
|
|
56
103
|
:host([active]) .symbol {
|
|
57
104
|
background-color: var(--md-sys-color-primary);
|
|
105
|
+
color: var(--md-sys-color-on-primary);
|
|
58
106
|
}
|
|
59
107
|
:host([completed]) .symbol {
|
|
60
108
|
background-color: var(--md-sys-color-primary);
|
|
109
|
+
color: var(--md-sys-color-on-primary);
|
|
61
110
|
}
|
|
62
111
|
.label {
|
|
63
|
-
margin-top:
|
|
112
|
+
margin-top: var(--spacing-3);
|
|
64
113
|
text-align: center;
|
|
65
|
-
font-size:
|
|
66
|
-
|
|
114
|
+
font-size: var(--md-sys-typescale-label-medium-size);
|
|
115
|
+
line-height: var(--md-sys-typescale-label-medium-line-height);
|
|
116
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
117
|
+
color: var(--md-sys-color-on-surface);
|
|
67
118
|
max-width: 90px;
|
|
68
119
|
word-break: break-word;
|
|
69
|
-
margin-bottom:
|
|
120
|
+
margin-bottom: var(--spacing-3);
|
|
70
121
|
}
|
|
71
|
-
:host([active]) .label, :host([active])
|
|
122
|
+
:host([active]) .label, :host([active]) .sub-label {
|
|
72
123
|
font-weight: 600;
|
|
73
124
|
}
|
|
74
125
|
.content{
|
|
@@ -77,19 +128,38 @@ import{a as p,n as i,i as m,x as s,t as h}from"../../vendor/vendor.js";import"..
|
|
|
77
128
|
align-items: center;
|
|
78
129
|
}
|
|
79
130
|
:host([variant="vertical"]) {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
131
|
+
.scb-step-content {
|
|
132
|
+
flex-direction: row;
|
|
133
|
+
align-items: flex-start;
|
|
134
|
+
gap: var(--spacing-5);
|
|
135
|
+
padding: var(--spacing-4);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
:host([no-content]) {
|
|
139
|
+
.scb-step-content {
|
|
140
|
+
align-items: center;
|
|
141
|
+
.label {
|
|
142
|
+
margin-bottom: 0px;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
84
145
|
}
|
|
85
146
|
:host([variant="vertical"]) .label{
|
|
86
147
|
margin-top: 0;
|
|
87
148
|
}
|
|
88
149
|
:host([variant="vertical"]) .content{
|
|
89
150
|
align-items: flex-start;
|
|
151
|
+
|
|
90
152
|
}
|
|
91
153
|
:host([symbol-variant="marker"]) .symbol {
|
|
92
154
|
min-width: 16px;
|
|
93
155
|
height: 16px;
|
|
94
156
|
}
|
|
95
|
-
|
|
157
|
+
:host([symbol-variant="marker"][completed][change-on-completed]) .symbol {
|
|
158
|
+
background-color: transparent;
|
|
159
|
+
color: var(--md-sys-color-primary);
|
|
160
|
+
md-icon{
|
|
161
|
+
font-size: var(--icon-size-small);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
`;s([a({type:String,reflect:!0})],t.prototype,"label",2);s([a({type:String,reflect:!0,attribute:"sub-label"})],t.prototype,"subLabel",2);s([a({type:String,reflect:!0,attribute:"symbol-variant"})],t.prototype,"symbolVariant",2);s([a({type:Number,reflect:!0})],t.prototype,"number",2);s([a({type:Boolean,reflect:!0})],t.prototype,"active",2);s([a({type:Boolean,reflect:!0})],t.prototype,"completed",2);s([a({type:Boolean,reflect:!0,attribute:"change-on-completed"})],t.prototype,"changeOnCompleted",2);s([a({type:Boolean,reflect:!0})],t.prototype,"islast",2);s([a({type:String,reflect:!0})],t.prototype,"variant",2);s([a({type:String})],t.prototype,"icon",2);t=s([b("scb-step")],t);
|
|
@@ -1,13 +1,19 @@
|
|
|
1
|
-
import{a as
|
|
2
|
-
|
|
1
|
+
import{a as l,n as p,r as h,i as d,x as f,t as v}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,n){try{customElements.get(s)||e(s,i,n)}catch(c){var a=String(c||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var u=Object.defineProperty,b=Object.getOwnPropertyDescriptor,r=(t,e,s,i)=>{for(var n=i>1?void 0:i?b(e,s):e,a=t.length-1,c;a>=0;a--)(c=t[a])&&(n=(i?c(e,s,n):c(n))||n);return i&&n&&u(e,s,n),n};let o=class extends d{constructor(){super(...arguments),this.type="",this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.activeIndex=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 n=e[i].shadowRoot?.querySelector(".scb-step-content");n&&"focus"in n&&typeof n.focus=="function"&&n.focus()},0))},this._onStepContainerClick=t=>{const e=this._getSteps(),s=t.composedPath(),i=e.findIndex(n=>s.includes(n));i!==-1&&this._onStepClick(i)}}_onStepClick(t){const e=this.activeIndex;this.activeIndex=t,this._updateSteps(),this.dispatchEvent(new CustomEvent("scb-step-change",{detail:{index:this.activeIndex,step:this._getSteps()[this.activeIndex]},bubbles:!0,composed:!0})),t>e?this.dispatchEvent(new CustomEvent("scb-step-next",{detail:{from:e,to:t,step:this._getSteps()[t]},bubbles:!0,composed:!0})):t<e&&this.dispatchEvent(new CustomEvent("scb-step-prev",{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();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(){this._updateSteps()}updated(){this._updateSteps()}render(){return f`
|
|
2
|
+
<div
|
|
3
|
+
class="steps"
|
|
4
|
+
role="list"
|
|
5
|
+
aria-label="Steg i processen"
|
|
6
|
+
@click=${this._onStepContainerClick}
|
|
7
|
+
@scb-stepper-keynav=${this._onKeyNav}
|
|
8
|
+
>
|
|
3
9
|
<slot></slot>
|
|
4
|
-
|
|
5
|
-
`}};
|
|
10
|
+
</div>
|
|
11
|
+
`}};o.styles=l`
|
|
6
12
|
:host {
|
|
7
13
|
--scb-stepper-width: 100%;
|
|
8
14
|
--scb-stepper-height: 100%;
|
|
9
15
|
display: block;
|
|
10
|
-
padding:
|
|
16
|
+
padding: var(--spacing-5) 0;
|
|
11
17
|
width: 100%;
|
|
12
18
|
color: var(--md-sys-color-on-surface);
|
|
13
19
|
font-family: var(--brand-font);
|
|
@@ -17,34 +23,32 @@ import{a as c,n as p,r as d,i as h,x as f,t as u}from"../../vendor/vendor.js";im
|
|
|
17
23
|
.steps {
|
|
18
24
|
display: flex;
|
|
19
25
|
flex-direction: row;
|
|
20
|
-
align-items:
|
|
26
|
+
align-items: stretch;
|
|
21
27
|
justify-content: center;
|
|
22
28
|
position: relative;
|
|
23
29
|
width: 100%;
|
|
24
|
-
gap:
|
|
25
|
-
|
|
30
|
+
gap: var(--spacing-7);
|
|
31
|
+
height: 100%;
|
|
26
32
|
}
|
|
27
33
|
:host([variant='vertical']) .steps {
|
|
28
34
|
flex-direction: column;
|
|
29
|
-
|
|
30
|
-
gap: 32px;
|
|
35
|
+
gap: var(--spacing-8);
|
|
31
36
|
}
|
|
32
37
|
::slotted(scb-step) {
|
|
33
38
|
position: relative;
|
|
34
39
|
flex: 1 1 0;
|
|
35
|
-
min-width: 80px;
|
|
36
40
|
z-index: 1;
|
|
41
|
+
width: 100%;
|
|
37
42
|
}
|
|
38
43
|
/* Horisontell connector */
|
|
39
44
|
::slotted(scb-step:not(:first-child))::before {
|
|
40
45
|
content: '';
|
|
41
46
|
position: absolute;
|
|
42
47
|
left: -50%;
|
|
43
|
-
top:
|
|
48
|
+
top: 28px;
|
|
44
49
|
width: calc(100% - 24px);
|
|
45
50
|
height: 1px;
|
|
46
51
|
background: var(--n-70);
|
|
47
|
-
border-radius: 1px;
|
|
48
52
|
z-index: 0;
|
|
49
53
|
}
|
|
50
54
|
/* Vertikal connector */
|
|
@@ -54,25 +58,26 @@ import{a as c,n as p,r as d,i as h,x as f,t as u}from"../../vendor/vendor.js";im
|
|
|
54
58
|
::slotted(scb-step[variant="vertical"]:not(:last-child))::after {
|
|
55
59
|
content: '';
|
|
56
60
|
position: absolute;
|
|
57
|
-
left:
|
|
58
|
-
top:
|
|
61
|
+
left: 28px;
|
|
62
|
+
top: 52px;
|
|
59
63
|
width: 1px;
|
|
60
64
|
height: calc(100% - 16px);
|
|
61
65
|
background: var(--n-70);
|
|
62
|
-
border-radius: 1px;
|
|
63
66
|
z-index: 0;
|
|
64
67
|
transform: translateX(-50%);
|
|
65
68
|
}
|
|
66
69
|
::slotted(scb-step[variant="vertical"][symbol-variant="marker"]:not(:last-child))::after {
|
|
67
70
|
content: "";
|
|
68
71
|
position: absolute;
|
|
69
|
-
left:
|
|
70
|
-
top:
|
|
72
|
+
left: 20px;
|
|
73
|
+
top: 38px;
|
|
71
74
|
width: 1px;
|
|
72
75
|
height: calc(100% - 2px);
|
|
73
76
|
background: var(--n-70);
|
|
74
|
-
border-radius: 1px;
|
|
75
77
|
z-index: 0;
|
|
76
78
|
transform: translateX(-50%);
|
|
77
79
|
}
|
|
78
|
-
|
|
80
|
+
::slotted(scb-step[symbol-variant="marker"]:not(:first-child))::before {
|
|
81
|
+
top: 20px;
|
|
82
|
+
}
|
|
83
|
+
`;r([p({type:String,reflect:!0})],o.prototype,"type",2);r([p({type:String,reflect:!0})],o.prototype,"label",2);r([p({type:Boolean,reflect:!0,attribute:"change-on-completed"})],o.prototype,"changeOnCompleted",2);r([p({type:String})],o.prototype,"variant",2);r([p({type:String,reflect:!0,attribute:"symbol-variant"})],o.prototype,"symbolVariant",2);r([h()],o.prototype,"activeIndex",2);o=r([v("scb-stepper")],o);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.77",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -304,5 +304,5 @@
|
|
|
304
304
|
},
|
|
305
305
|
"./mvc/*": "./mvc/*"
|
|
306
306
|
},
|
|
307
|
-
"buildHash": "
|
|
307
|
+
"buildHash": "9654E007E17D24662A82AD02ECACF387F89862A4BE4BFCCB069844AC57ECC2E9"
|
|
308
308
|
}
|
|
@@ -5,6 +5,7 @@ import { LitElement } from 'lit';
|
|
|
5
5
|
*/
|
|
6
6
|
export declare class ScbStep extends LitElement {
|
|
7
7
|
label: string;
|
|
8
|
+
subLabel: string;
|
|
8
9
|
symbolVariant: 'number' | 'icon' | 'marker';
|
|
9
10
|
number: number;
|
|
10
11
|
active: boolean;
|
|
@@ -14,5 +15,7 @@ export declare class ScbStep extends LitElement {
|
|
|
14
15
|
variant: 'horizontal' | 'vertical';
|
|
15
16
|
icon: string;
|
|
16
17
|
static styles: import('lit').CSSResult;
|
|
18
|
+
updated(): void;
|
|
19
|
+
private handleKeyDown;
|
|
17
20
|
render(): import('lit-html').TemplateResult<1>;
|
|
18
21
|
}
|