scb-wc-test 0.1.279 → 0.1.281
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 a,i as b,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 s=customElements.define.bind(customElements);customElements.define=function(o,r,n){try{customElements.get(o)||s(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,i=(e,s,o,r)=>{for(var n=r>1?void 0:r?u(s,o):s,c=e.length-1,d;c>=0;c--)(d=e[c])&&(n=(r?d(s,o,n):d(n))||n);return r&&n&&h(s,o,n),n};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.widthWeight=1,this.icon=""}updated(){!this.subLabel||this.subLabel.trim()===""?this.setAttribute("no-content",""):this.removeAttribute("no-content"),this.widthWeight>0?this.style.setProperty("--scb-step-width-weight",String(this.widthWeight)):this.style.removeProperty("--scb-step-width-weight")}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,s=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 b,n as a,i as m,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 b,n as a,i as m,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 b,n as a,i as m,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 b,n as a,i as m,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 b,n as a,i as m,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 b,n as a,i as m,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=m`
|
|
59
59
|
:host {
|
|
60
60
|
font-family: var(--brand-font);
|
|
61
61
|
--scb-step-slide-from-x: 0px;
|
|
@@ -63,19 +63,21 @@ import{a as b,n as a,i as m,x as n,t as p}from"../../vendor/vendor.js";import"..
|
|
|
63
63
|
--scb-step-label-active-weight: 600;
|
|
64
64
|
}
|
|
65
65
|
.scb-step-content {
|
|
66
|
-
width:
|
|
67
|
-
|
|
66
|
+
width: fit-content;
|
|
67
|
+
max-width: 100%;
|
|
68
68
|
min-width: 0;
|
|
69
|
+
min-height: 100%;
|
|
69
70
|
display: flex;
|
|
70
71
|
flex-direction: column;
|
|
71
72
|
align-items: center;
|
|
72
73
|
position: relative;
|
|
73
|
-
|
|
74
|
+
margin-inline: auto;
|
|
74
75
|
cursor: pointer;
|
|
75
76
|
background: none;
|
|
76
77
|
box-sizing: border-box;
|
|
77
78
|
user-select: none;
|
|
78
|
-
padding: var(--spacing-
|
|
79
|
+
padding-block: var(--spacing-1);
|
|
80
|
+
padding-inline: var(--spacing-4);
|
|
79
81
|
}
|
|
80
82
|
.scb-step-content:focus,
|
|
81
83
|
.scb-step-content:focus-visible {
|
|
@@ -102,6 +104,7 @@ import{a as b,n as a,i as m,x as n,t as p}from"../../vendor/vendor.js";import"..
|
|
|
102
104
|
background-color var(--motion-duration-short) var(--motion-easing-standard),
|
|
103
105
|
color var(--motion-duration-short) var(--motion-easing-standard),
|
|
104
106
|
transform var(--motion-duration-short) var(--motion-easing-emphasized);
|
|
107
|
+
padding: var(--spacing-3);
|
|
105
108
|
}
|
|
106
109
|
md-focus-ring {
|
|
107
110
|
border-radius: var(--md-sys-shape-corner-small);
|
|
@@ -171,9 +174,11 @@ import{a as b,n as a,i as m,x as n,t as p}from"../../vendor/vendor.js";import"..
|
|
|
171
174
|
}
|
|
172
175
|
:host([variant="vertical"]) {
|
|
173
176
|
.scb-step-content {
|
|
177
|
+
width: 100%;
|
|
174
178
|
flex-direction: row;
|
|
175
179
|
align-items: flex-start;
|
|
176
180
|
gap: var(--spacing-5);
|
|
181
|
+
margin-inline: 0;
|
|
177
182
|
padding: var(--spacing-4);
|
|
178
183
|
}
|
|
179
184
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.281",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -386,5 +386,5 @@
|
|
|
386
386
|
},
|
|
387
387
|
"./mvc/*": "./mvc/*"
|
|
388
388
|
},
|
|
389
|
-
"buildHash": "
|
|
389
|
+
"buildHash": "CF8A9293DB221AFB56994DB2A4A052F4D57767C1F0913873842BD0BD6307A54C"
|
|
390
390
|
}
|
package/scb-stepper/scb-step.js
CHANGED
|
@@ -3,10 +3,10 @@ import { property as a, 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, u = Object.getOwnPropertyDescriptor, i = (e, l,
|
|
7
|
-
for (var
|
|
8
|
-
(d = e[c]) && (
|
|
9
|
-
return
|
|
6
|
+
var h = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (e, l, r, o) => {
|
|
7
|
+
for (var n = o > 1 ? void 0 : o ? u(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() {
|
|
@@ -99,19 +99,21 @@ t.styles = m`
|
|
|
99
99
|
--scb-step-label-active-weight: 600;
|
|
100
100
|
}
|
|
101
101
|
.scb-step-content {
|
|
102
|
-
width:
|
|
103
|
-
|
|
102
|
+
width: fit-content;
|
|
103
|
+
max-width: 100%;
|
|
104
104
|
min-width: 0;
|
|
105
|
+
min-height: 100%;
|
|
105
106
|
display: flex;
|
|
106
107
|
flex-direction: column;
|
|
107
108
|
align-items: center;
|
|
108
109
|
position: relative;
|
|
109
|
-
|
|
110
|
+
margin-inline: auto;
|
|
110
111
|
cursor: pointer;
|
|
111
112
|
background: none;
|
|
112
113
|
box-sizing: border-box;
|
|
113
114
|
user-select: none;
|
|
114
|
-
padding: var(--spacing-
|
|
115
|
+
padding-block: var(--spacing-1);
|
|
116
|
+
padding-inline: var(--spacing-4);
|
|
115
117
|
}
|
|
116
118
|
.scb-step-content:focus,
|
|
117
119
|
.scb-step-content:focus-visible {
|
|
@@ -138,6 +140,7 @@ t.styles = m`
|
|
|
138
140
|
background-color var(--motion-duration-short) var(--motion-easing-standard),
|
|
139
141
|
color var(--motion-duration-short) var(--motion-easing-standard),
|
|
140
142
|
transform var(--motion-duration-short) var(--motion-easing-emphasized);
|
|
143
|
+
padding: var(--spacing-3);
|
|
141
144
|
}
|
|
142
145
|
md-focus-ring {
|
|
143
146
|
border-radius: var(--md-sys-shape-corner-small);
|
|
@@ -207,9 +210,11 @@ t.styles = m`
|
|
|
207
210
|
}
|
|
208
211
|
:host([variant="vertical"]) {
|
|
209
212
|
.scb-step-content {
|
|
213
|
+
width: 100%;
|
|
210
214
|
flex-direction: row;
|
|
211
215
|
align-items: flex-start;
|
|
212
216
|
gap: var(--spacing-5);
|
|
217
|
+
margin-inline: 0;
|
|
213
218
|
padding: var(--spacing-4);
|
|
214
219
|
}
|
|
215
220
|
}
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -11479,19 +11479,21 @@
|
|
|
11479
11479
|
--scb-step-label-active-weight: 600;
|
|
11480
11480
|
}
|
|
11481
11481
|
.scb-step-content {
|
|
11482
|
-
width:
|
|
11483
|
-
|
|
11482
|
+
width: fit-content;
|
|
11483
|
+
max-width: 100%;
|
|
11484
11484
|
min-width: 0;
|
|
11485
|
+
min-height: 100%;
|
|
11485
11486
|
display: flex;
|
|
11486
11487
|
flex-direction: column;
|
|
11487
11488
|
align-items: center;
|
|
11488
11489
|
position: relative;
|
|
11489
|
-
|
|
11490
|
+
margin-inline: auto;
|
|
11490
11491
|
cursor: pointer;
|
|
11491
11492
|
background: none;
|
|
11492
11493
|
box-sizing: border-box;
|
|
11493
11494
|
user-select: none;
|
|
11494
|
-
padding: var(--spacing-
|
|
11495
|
+
padding-block: var(--spacing-1);
|
|
11496
|
+
padding-inline: var(--spacing-4);
|
|
11495
11497
|
}
|
|
11496
11498
|
.scb-step-content:focus,
|
|
11497
11499
|
.scb-step-content:focus-visible {
|
|
@@ -11518,6 +11520,7 @@
|
|
|
11518
11520
|
background-color var(--motion-duration-short) var(--motion-easing-standard),
|
|
11519
11521
|
color var(--motion-duration-short) var(--motion-easing-standard),
|
|
11520
11522
|
transform var(--motion-duration-short) var(--motion-easing-emphasized);
|
|
11523
|
+
padding: var(--spacing-3);
|
|
11521
11524
|
}
|
|
11522
11525
|
md-focus-ring {
|
|
11523
11526
|
border-radius: var(--md-sys-shape-corner-small);
|
|
@@ -11587,9 +11590,11 @@
|
|
|
11587
11590
|
}
|
|
11588
11591
|
:host([variant="vertical"]) {
|
|
11589
11592
|
.scb-step-content {
|
|
11593
|
+
width: 100%;
|
|
11590
11594
|
flex-direction: row;
|
|
11591
11595
|
align-items: flex-start;
|
|
11592
11596
|
gap: var(--spacing-5);
|
|
11597
|
+
margin-inline: 0;
|
|
11593
11598
|
padding: var(--spacing-4);
|
|
11594
11599
|
}
|
|
11595
11600
|
}
|