scb-wc 0.1.145 → 0.1.147
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 +40 -25
- package/mvc/components/scb-stepper/scb-stepper.js +24 -2
- package/mvc/scb-logo.svg +20 -20
- package/mvc/scb.svg +13 -13
- package/package.json +2 -2
- package/scb-components/scb-stepper/scb-step.d.ts +7 -0
- package/scb-components/scb-stepper/scb-stepper.d.ts +2 -0
- package/scb-stepper/scb-step.js +142 -44
- package/scb-stepper/scb-stepper.js +91 -13
- package/scb-wc.bundle.js +206 -50
package/scb-stepper/scb-step.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ensureFocusRingReady as e } from "../shared/lazy-focus-ring.js";
|
|
2
2
|
import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
|
|
3
3
|
import { LitElement as n, css as r, html as i } from "lit";
|
|
4
4
|
import { customElement as a, property as o } from "lit/decorators.js";
|
|
@@ -7,7 +7,12 @@ import "@material/web/ripple/ripple.js";
|
|
|
7
7
|
//#region src/scb-components/scb-stepper/scb-step.ts
|
|
8
8
|
var s = class extends n {
|
|
9
9
|
constructor(...e) {
|
|
10
|
-
super(...e), 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 = ""
|
|
10
|
+
super(...e), 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 = "", this.__nativeFocusRingReady = !1, this.__nativeFocusRingPending = !1, this.__onFocusIn = (e) => {
|
|
11
|
+
let t = e.composedPath()[0];
|
|
12
|
+
t instanceof HTMLElement && t.matches(":focus-visible") && this.__ensureNativeFocusRing();
|
|
13
|
+
}, this.__onFocusOut = () => {
|
|
14
|
+
this.__syncInteractiveParts();
|
|
15
|
+
};
|
|
11
16
|
}
|
|
12
17
|
static {
|
|
13
18
|
this.styles = r`
|
|
@@ -16,6 +21,19 @@ var s = class extends n {
|
|
|
16
21
|
--scb-step-slide-from-x: 0px;
|
|
17
22
|
--scb-step-slide-from-y: 0px;
|
|
18
23
|
--scb-step-label-active-weight: 600;
|
|
24
|
+
--scb-stepper-step-padding-block: var(--spacing-2);
|
|
25
|
+
--scb-stepper-step-padding-inline: var(--spacing-4);
|
|
26
|
+
--scb-stepper-vertical-step-padding: var(--spacing-4);
|
|
27
|
+
--scb-stepper-focus-offset: var(--spacing-1, 2px);
|
|
28
|
+
--scb-step-local-symbol-size: calc(
|
|
29
|
+
var(--md-sys-typescale-label-small-line-height) +
|
|
30
|
+
var(--spacing-5) -
|
|
31
|
+
var(--spacing-1) +
|
|
32
|
+
var(--spacing-5) -
|
|
33
|
+
var(--spacing-1)
|
|
34
|
+
);
|
|
35
|
+
--scb-step-local-symbol-state-size: calc(var(--scb-step-local-symbol-size) + var(--spacing-3) + var(--spacing-3));
|
|
36
|
+
--scb-step-local-symbol-icon-size: var(--icon-size-small, 20px);
|
|
19
37
|
}
|
|
20
38
|
.scb-step-content {
|
|
21
39
|
width: fit-content;
|
|
@@ -26,25 +44,64 @@ var s = class extends n {
|
|
|
26
44
|
flex-direction: column;
|
|
27
45
|
align-items: center;
|
|
28
46
|
position: relative;
|
|
47
|
+
z-index: 0;
|
|
29
48
|
margin-inline: auto;
|
|
30
49
|
cursor: pointer;
|
|
31
50
|
background: none;
|
|
32
51
|
box-sizing: border-box;
|
|
33
52
|
user-select: none;
|
|
34
|
-
padding-block: var(--
|
|
35
|
-
padding-inline: var(--
|
|
53
|
+
padding-block: var(--scb-stepper-step-padding-block);
|
|
54
|
+
padding-inline: var(--scb-stepper-step-padding-inline);
|
|
36
55
|
}
|
|
37
|
-
|
|
38
|
-
.scb-step-content:focus
|
|
39
|
-
outline: none
|
|
40
|
-
box-shadow: none
|
|
56
|
+
|
|
57
|
+
.scb-step-content:focus {
|
|
58
|
+
outline: none;
|
|
59
|
+
box-shadow: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
:host(:not([data-native-focus-ring-ready])) .scb-step-content:focus-visible {
|
|
63
|
+
outline: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
:host(:not([data-native-focus-ring-ready])) .scb-step-content:focus-visible .symbol-target {
|
|
67
|
+
outline: var(--stroke-border-m, 2px) solid var(--md-sys-color-primary);
|
|
68
|
+
outline-offset: var(--scb-stepper-focus-offset);
|
|
69
|
+
}
|
|
70
|
+
.symbol-target {
|
|
71
|
+
inline-size: var(--scb-stepper-symbol-state-size, var(--scb-step-local-symbol-state-size));
|
|
72
|
+
block-size: var(--scb-stepper-symbol-state-size, var(--scb-step-local-symbol-state-size));
|
|
73
|
+
flex: 0 0 auto;
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
position: relative;
|
|
78
|
+
z-index: 1;
|
|
79
|
+
border-radius: var(--md-sys-shape-corner-full);
|
|
80
|
+
}
|
|
81
|
+
.symbol-target::before {
|
|
82
|
+
content: '';
|
|
83
|
+
position: absolute;
|
|
84
|
+
inset: 0;
|
|
85
|
+
z-index: -1;
|
|
86
|
+
border-radius: inherit;
|
|
87
|
+
background: currentColor;
|
|
88
|
+
opacity: 0;
|
|
89
|
+
pointer-events: none;
|
|
90
|
+
transition: opacity var(--motion-duration-short, 150ms) var(--motion-easing-standard, ease);
|
|
91
|
+
}
|
|
92
|
+
.scb-step-content:hover .symbol-target::before {
|
|
93
|
+
opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
|
|
94
|
+
}
|
|
95
|
+
.scb-step-content:active .symbol-target::before {
|
|
96
|
+
opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);
|
|
41
97
|
}
|
|
42
98
|
.symbol {
|
|
43
99
|
background-color: var(--md-sys-color-outline-variant);
|
|
44
100
|
color: var(--md-sys-color-on-primary);
|
|
45
101
|
border-radius: var(--md-sys-shape-corner-full);
|
|
46
|
-
|
|
47
|
-
|
|
102
|
+
inline-size: var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));
|
|
103
|
+
block-size: var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));
|
|
104
|
+
min-inline-size: var(--scb-stepper-symbol-size, var(--scb-step-local-symbol-size));
|
|
48
105
|
display: flex;
|
|
49
106
|
align-items: center;
|
|
50
107
|
justify-content: center;
|
|
@@ -59,13 +116,25 @@ var s = class extends n {
|
|
|
59
116
|
background-color var(--motion-duration-short) var(--motion-easing-standard),
|
|
60
117
|
color var(--motion-duration-short) var(--motion-easing-standard),
|
|
61
118
|
transform var(--motion-duration-short) var(--motion-easing-emphasized);
|
|
62
|
-
padding: var(--spacing-3);
|
|
63
119
|
}
|
|
64
|
-
md-focus-ring {
|
|
65
|
-
|
|
120
|
+
.symbol-target md-focus-ring {
|
|
121
|
+
position: absolute;
|
|
122
|
+
pointer-events: none;
|
|
123
|
+
--md-focus-ring-color: var(--md-sys-color-primary);
|
|
124
|
+
--md-focus-ring-outward-offset: var(--scb-stepper-focus-offset);
|
|
125
|
+
--md-focus-ring-shape: var(--md-sys-shape-corner-full);
|
|
126
|
+
}
|
|
127
|
+
.symbol-target md-ripple {
|
|
128
|
+
position: absolute;
|
|
129
|
+
inset: 0;
|
|
130
|
+
border-radius: inherit;
|
|
131
|
+
pointer-events: none;
|
|
66
132
|
}
|
|
67
133
|
md-icon {
|
|
68
|
-
|
|
134
|
+
inline-size: var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));
|
|
135
|
+
block-size: var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));
|
|
136
|
+
font-size: var(--scb-stepper-symbol-icon-size, var(--scb-step-local-symbol-icon-size));
|
|
137
|
+
line-height: 1;
|
|
69
138
|
}
|
|
70
139
|
:host([active]) .symbol {
|
|
71
140
|
background-color: var(--md-sys-color-primary);
|
|
@@ -125,6 +194,8 @@ var s = class extends n {
|
|
|
125
194
|
flex-direction: column;
|
|
126
195
|
align-items: center;
|
|
127
196
|
min-width: 0;
|
|
197
|
+
position: relative;
|
|
198
|
+
z-index: 1;
|
|
128
199
|
will-change: transform, opacity;
|
|
129
200
|
}
|
|
130
201
|
:host([variant="vertical"]) {
|
|
@@ -134,7 +205,7 @@ var s = class extends n {
|
|
|
134
205
|
align-items: flex-start;
|
|
135
206
|
gap: var(--spacing-5);
|
|
136
207
|
margin-inline: 0;
|
|
137
|
-
padding: var(--
|
|
208
|
+
padding: var(--scb-stepper-vertical-step-padding);
|
|
138
209
|
}
|
|
139
210
|
}
|
|
140
211
|
:host([no-content]) {
|
|
@@ -161,15 +232,21 @@ var s = class extends n {
|
|
|
161
232
|
align-items: flex-start;
|
|
162
233
|
min-width: 0;
|
|
163
234
|
}
|
|
235
|
+
:host([symbol-variant="marker"]) {
|
|
236
|
+
--scb-step-local-symbol-size: 16px;
|
|
237
|
+
--scb-step-local-symbol-state-size: calc(16px + var(--spacing-3) + var(--spacing-3));
|
|
238
|
+
--scb-step-local-symbol-icon-size: 16px;
|
|
239
|
+
}
|
|
164
240
|
:host([symbol-variant="marker"]) .symbol {
|
|
165
|
-
|
|
166
|
-
|
|
241
|
+
inline-size: var(--scb-stepper-symbol-size, 16px);
|
|
242
|
+
block-size: var(--scb-stepper-symbol-size, 16px);
|
|
243
|
+
min-inline-size: var(--scb-stepper-symbol-size, 16px);
|
|
167
244
|
}
|
|
168
245
|
:host([symbol-variant="marker"][completed][change-on-completed]) .symbol {
|
|
169
246
|
background-color: transparent;
|
|
170
247
|
color: var(--md-sys-color-primary);
|
|
171
248
|
md-icon{
|
|
172
|
-
font-size: var(--icon-size
|
|
249
|
+
font-size: var(--scb-stepper-symbol-icon-size, 16px);
|
|
173
250
|
}
|
|
174
251
|
}
|
|
175
252
|
|
|
@@ -194,7 +271,19 @@ var s = class extends n {
|
|
|
194
271
|
`;
|
|
195
272
|
}
|
|
196
273
|
updated() {
|
|
197
|
-
!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");
|
|
274
|
+
!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"), this.__syncInteractiveParts();
|
|
275
|
+
}
|
|
276
|
+
__getControl() {
|
|
277
|
+
return this.renderRoot.querySelector(".scb-step-content");
|
|
278
|
+
}
|
|
279
|
+
__syncInteractiveParts() {
|
|
280
|
+
let e = this.__getControl(), t = this.renderRoot.querySelector(".symbol-target"), n = this.renderRoot.querySelector("md-focus-ring"), r = this.renderRoot.querySelector("md-ripple");
|
|
281
|
+
n && e && (n.control = e, n.visible = e.matches(":focus-visible")), r && t && (r.control = t);
|
|
282
|
+
}
|
|
283
|
+
__ensureNativeFocusRing() {
|
|
284
|
+
this.__nativeFocusRingReady || this.__nativeFocusRingPending || (this.__nativeFocusRingPending = !0, e(), customElements.whenDefined("md-focus-ring").then(() => {
|
|
285
|
+
this.__nativeFocusRingPending = !1, this.__nativeFocusRingReady = !0, this.toggleAttribute("data-native-focus-ring-ready", !0), this.requestUpdate(), this.updateComplete.then(() => this.__syncInteractiveParts());
|
|
286
|
+
}));
|
|
198
287
|
}
|
|
199
288
|
handleKeyDown(e) {
|
|
200
289
|
e.key === "Enter" || e.key === " " ? (e.preventDefault(), this.dispatchEvent(new MouseEvent("click", {
|
|
@@ -214,27 +303,30 @@ var s = class extends n {
|
|
|
214
303
|
})), e.preventDefault());
|
|
215
304
|
}
|
|
216
305
|
render() {
|
|
217
|
-
let
|
|
306
|
+
let e = this.active ? "step" : void 0, t = this.label ? `${this.label}${this.subLabel ? ": " + this.subLabel : ""}` : `Steg ${this.number || ""}`.trim();
|
|
218
307
|
switch (this.symbolVariant) {
|
|
219
308
|
case "icon": return i`
|
|
220
309
|
<div
|
|
221
310
|
class="scb-step-content"
|
|
222
311
|
tabindex="0"
|
|
223
312
|
role="button"
|
|
224
|
-
aria-current=${
|
|
225
|
-
aria-label=${
|
|
313
|
+
aria-current=${e}
|
|
314
|
+
aria-label=${t}
|
|
226
315
|
@keydown=${this.handleKeyDown}
|
|
227
|
-
@focusin=${
|
|
316
|
+
@focusin=${this.__onFocusIn}
|
|
317
|
+
@focusout=${this.__onFocusOut}
|
|
228
318
|
>
|
|
229
|
-
<
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
319
|
+
<span class="symbol-target">
|
|
320
|
+
<md-ripple></md-ripple>
|
|
321
|
+
<div class="symbol">
|
|
322
|
+
${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<md-icon>${this.icon}</md-icon>`}
|
|
323
|
+
</div>
|
|
324
|
+
<md-focus-ring></md-focus-ring>
|
|
325
|
+
</span>
|
|
233
326
|
<div class="content">
|
|
234
327
|
<div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
|
|
235
328
|
<div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
|
|
236
329
|
</div>
|
|
237
|
-
<md-focus-ring></md-focus-ring>
|
|
238
330
|
</div>
|
|
239
331
|
`;
|
|
240
332
|
case "marker": return i`
|
|
@@ -242,20 +334,23 @@ var s = class extends n {
|
|
|
242
334
|
class="scb-step-content"
|
|
243
335
|
tabindex="0"
|
|
244
336
|
role="button"
|
|
245
|
-
aria-current=${
|
|
246
|
-
aria-label=${
|
|
337
|
+
aria-current=${e}
|
|
338
|
+
aria-label=${t}
|
|
247
339
|
@keydown=${this.handleKeyDown}
|
|
248
|
-
@focusin=${
|
|
340
|
+
@focusin=${this.__onFocusIn}
|
|
341
|
+
@focusout=${this.__onFocusOut}
|
|
249
342
|
>
|
|
250
|
-
<
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
343
|
+
<span class="symbol-target">
|
|
344
|
+
<md-ripple></md-ripple>
|
|
345
|
+
<div class="symbol">
|
|
346
|
+
${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i``}
|
|
347
|
+
</div>
|
|
348
|
+
<md-focus-ring></md-focus-ring>
|
|
349
|
+
</span>
|
|
254
350
|
<div class="content">
|
|
255
351
|
<div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
|
|
256
352
|
<div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
|
|
257
353
|
</div>
|
|
258
|
-
<md-focus-ring></md-focus-ring>
|
|
259
354
|
</div>
|
|
260
355
|
`;
|
|
261
356
|
default: return i`
|
|
@@ -263,20 +358,23 @@ var s = class extends n {
|
|
|
263
358
|
class="scb-step-content"
|
|
264
359
|
tabindex="0"
|
|
265
360
|
role="button"
|
|
266
|
-
aria-current=${
|
|
267
|
-
aria-label=${
|
|
361
|
+
aria-current=${e}
|
|
362
|
+
aria-label=${t}
|
|
268
363
|
@keydown=${this.handleKeyDown}
|
|
269
|
-
@focusin=${
|
|
364
|
+
@focusin=${this.__onFocusIn}
|
|
365
|
+
@focusout=${this.__onFocusOut}
|
|
270
366
|
>
|
|
271
|
-
<
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
367
|
+
<span class="symbol-target">
|
|
368
|
+
<md-ripple></md-ripple>
|
|
369
|
+
<div class="symbol">
|
|
370
|
+
${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<span>${this.number}</span>`}
|
|
371
|
+
</div>
|
|
372
|
+
<md-focus-ring></md-focus-ring>
|
|
373
|
+
</span>
|
|
275
374
|
<div class="content">
|
|
276
375
|
<div class="label" data-label="${this.label}"><span class="label-text">${this.label}</span></div>
|
|
277
376
|
<div class="sub-label" data-label="${this.subLabel}"><span class="sub-label-text">${this.subLabel}</span></div>
|
|
278
377
|
</div>
|
|
279
|
-
<md-focus-ring></md-focus-ring>
|
|
280
378
|
</div>
|
|
281
379
|
`;
|
|
282
380
|
}
|
|
@@ -5,7 +5,7 @@ import { customElement as i, property as a } from "lit/decorators.js";
|
|
|
5
5
|
//#region src/scb-components/scb-stepper/scb-stepper.ts
|
|
6
6
|
var o = class extends t {
|
|
7
7
|
constructor(...e) {
|
|
8
|
-
super(...e), 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.#t = 0, this._onKeyNav = (e) => {
|
|
8
|
+
super(...e), this.type = "", this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.size = "medium", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.activeIndex = 0, this.#t = 0, this._onKeyNav = (e) => {
|
|
9
9
|
let t = this._getSteps(), n = this.activeIndex, r = n;
|
|
10
10
|
e.detail.key === "ArrowRight" || e.detail.key === "ArrowDown" ? r = n < t.length - 1 ? n + 1 : 0 : e.detail.key === "ArrowLeft" || e.detail.key === "ArrowUp" ? r = n > 0 ? n - 1 : t.length - 1 : e.detail.key === "Home" ? r = 0 : e.detail.key === "End" && (r = t.length - 1), r !== n && (this._onStepClick(r), setTimeout(() => {
|
|
11
11
|
let e = t[r].shadowRoot?.querySelector(".scb-step-content");
|
|
@@ -32,7 +32,19 @@ var o = class extends t {
|
|
|
32
32
|
--scb-stepper-height: 100%;
|
|
33
33
|
--scb-stepper-step-count: 1;
|
|
34
34
|
--scb-stepper-connector-gap: var(--spacing-2);
|
|
35
|
-
--scb-stepper-
|
|
35
|
+
--scb-stepper-step-padding-block: var(--spacing-2);
|
|
36
|
+
--scb-stepper-step-padding-inline: var(--spacing-4);
|
|
37
|
+
--scb-stepper-vertical-step-padding: var(--spacing-4);
|
|
38
|
+
--scb-stepper-vertical-gap: var(--spacing-8);
|
|
39
|
+
--scb-stepper-symbol-size: calc(
|
|
40
|
+
var(--md-sys-typescale-label-small-line-height) +
|
|
41
|
+
var(--spacing-5) -
|
|
42
|
+
var(--spacing-1) +
|
|
43
|
+
var(--spacing-5) -
|
|
44
|
+
var(--spacing-1)
|
|
45
|
+
);
|
|
46
|
+
--scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
|
|
47
|
+
--scb-stepper-symbol-icon-size: var(--icon-size-small, 20px);
|
|
36
48
|
display: block;
|
|
37
49
|
padding: var(--spacing-5) 0;
|
|
38
50
|
width: 100%;
|
|
@@ -46,6 +58,41 @@ var o = class extends t {
|
|
|
46
58
|
margin-inline-start: var(--scb-stepper-spacing-inline-start, 0);
|
|
47
59
|
margin-inline-end: var(--scb-stepper-spacing-inline-end, 0);
|
|
48
60
|
}
|
|
61
|
+
|
|
62
|
+
:host([size='extra-small']) {
|
|
63
|
+
--scb-stepper-symbol-size: calc(
|
|
64
|
+
var(--md-sys-typescale-label-small-line-height) +
|
|
65
|
+
var(--spacing-3) -
|
|
66
|
+
var(--spacing-1) +
|
|
67
|
+
var(--spacing-3) -
|
|
68
|
+
var(--spacing-1)
|
|
69
|
+
);
|
|
70
|
+
--scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
|
|
71
|
+
--scb-stepper-symbol-icon-size: var(--icon-size-small, 20px);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:host([size='small']) {
|
|
75
|
+
--scb-stepper-symbol-size: calc(
|
|
76
|
+
var(--md-sys-typescale-label-small-line-height) +
|
|
77
|
+
var(--spacing-4) -
|
|
78
|
+
var(--spacing-1) +
|
|
79
|
+
var(--spacing-4) -
|
|
80
|
+
var(--spacing-1)
|
|
81
|
+
);
|
|
82
|
+
--scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
|
|
83
|
+
--scb-stepper-symbol-icon-size: var(--icon-size-small, 20px);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
:host([size='large']) {
|
|
87
|
+
--scb-stepper-symbol-size: calc(
|
|
88
|
+
var(--md-sys-typescale-label-medium-line-height) +
|
|
89
|
+
var(--spacing-5) +
|
|
90
|
+
var(--spacing-5)
|
|
91
|
+
);
|
|
92
|
+
--scb-stepper-symbol-state-size: calc(var(--scb-stepper-symbol-size) + var(--spacing-3) + var(--spacing-3));
|
|
93
|
+
--scb-stepper-symbol-icon-size: var(--icon-size-medium, 24px);
|
|
94
|
+
}
|
|
95
|
+
|
|
49
96
|
.steps {
|
|
50
97
|
display: flex;
|
|
51
98
|
flex-direction: row;
|
|
@@ -58,11 +105,13 @@ var o = class extends t {
|
|
|
58
105
|
}
|
|
59
106
|
:host([variant='vertical']) .steps {
|
|
60
107
|
flex-direction: column;
|
|
61
|
-
gap: var(--
|
|
108
|
+
gap: var(--scb-stepper-vertical-gap);
|
|
62
109
|
}
|
|
63
110
|
|
|
64
111
|
:host([symbol-variant='marker']) {
|
|
65
112
|
--scb-stepper-symbol-size: 16px;
|
|
113
|
+
--scb-stepper-symbol-state-size: calc(16px + var(--spacing-3) + var(--spacing-3));
|
|
114
|
+
--scb-stepper-symbol-icon-size: 16px;
|
|
66
115
|
}
|
|
67
116
|
::slotted(scb-step) {
|
|
68
117
|
position: relative;
|
|
@@ -83,7 +132,7 @@ var o = class extends t {
|
|
|
83
132
|
:host([variant='horizontal']) ::slotted(scb-step)::after {
|
|
84
133
|
content: '';
|
|
85
134
|
position: absolute;
|
|
86
|
-
top: calc(var(--
|
|
135
|
+
top: calc(var(--scb-stepper-step-padding-block) + (var(--scb-stepper-symbol-state-size) / 2));
|
|
87
136
|
height: 1px;
|
|
88
137
|
background-color: var(--n-70);
|
|
89
138
|
transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
|
|
@@ -93,11 +142,11 @@ var o = class extends t {
|
|
|
93
142
|
|
|
94
143
|
:host([variant='horizontal']) ::slotted(scb-step)::before {
|
|
95
144
|
left: 0;
|
|
96
|
-
right: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
|
|
145
|
+
right: calc(50% + (var(--scb-stepper-symbol-state-size) / 2) + var(--scb-stepper-connector-gap));
|
|
97
146
|
}
|
|
98
147
|
|
|
99
148
|
:host([variant='horizontal']) ::slotted(scb-step)::after {
|
|
100
|
-
left: calc(50% + (var(--scb-stepper-symbol-size) / 2) + var(--scb-stepper-connector-gap));
|
|
149
|
+
left: calc(50% + (var(--scb-stepper-symbol-state-size) / 2) + var(--scb-stepper-connector-gap));
|
|
101
150
|
right: 0;
|
|
102
151
|
}
|
|
103
152
|
|
|
@@ -130,10 +179,23 @@ var o = class extends t {
|
|
|
130
179
|
::slotted(scb-step[variant='vertical']:not(:last-child))::after {
|
|
131
180
|
content: '';
|
|
132
181
|
position: absolute;
|
|
133
|
-
left:
|
|
134
|
-
top:
|
|
182
|
+
left: calc(var(--scb-stepper-vertical-step-padding) + (var(--scb-stepper-symbol-state-size) / 2));
|
|
183
|
+
top: calc(
|
|
184
|
+
var(--scb-stepper-vertical-step-padding) +
|
|
185
|
+
var(--scb-stepper-symbol-state-size) +
|
|
186
|
+
var(--scb-stepper-connector-gap)
|
|
187
|
+
);
|
|
135
188
|
width: 1px;
|
|
136
|
-
height:
|
|
189
|
+
height: max(
|
|
190
|
+
0px,
|
|
191
|
+
calc(
|
|
192
|
+
100% +
|
|
193
|
+
var(--scb-stepper-vertical-gap) -
|
|
194
|
+
var(--scb-stepper-symbol-state-size) -
|
|
195
|
+
var(--scb-stepper-connector-gap) -
|
|
196
|
+
var(--scb-stepper-connector-gap)
|
|
197
|
+
)
|
|
198
|
+
);
|
|
137
199
|
background-color: var(--n-70);
|
|
138
200
|
transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
|
|
139
201
|
z-index: 0;
|
|
@@ -142,10 +204,23 @@ var o = class extends t {
|
|
|
142
204
|
::slotted(scb-step[variant='vertical'][symbol-variant='marker']:not(:last-child))::after {
|
|
143
205
|
content: '';
|
|
144
206
|
position: absolute;
|
|
145
|
-
left:
|
|
146
|
-
top:
|
|
207
|
+
left: calc(var(--scb-stepper-vertical-step-padding) + (var(--scb-stepper-symbol-state-size) / 2));
|
|
208
|
+
top: calc(
|
|
209
|
+
var(--scb-stepper-vertical-step-padding) +
|
|
210
|
+
var(--scb-stepper-symbol-state-size) +
|
|
211
|
+
var(--scb-stepper-connector-gap)
|
|
212
|
+
);
|
|
147
213
|
width: 1px;
|
|
148
|
-
height:
|
|
214
|
+
height: max(
|
|
215
|
+
0px,
|
|
216
|
+
calc(
|
|
217
|
+
100% +
|
|
218
|
+
var(--scb-stepper-vertical-gap) -
|
|
219
|
+
var(--scb-stepper-symbol-state-size) -
|
|
220
|
+
var(--scb-stepper-connector-gap) -
|
|
221
|
+
var(--scb-stepper-connector-gap)
|
|
222
|
+
)
|
|
223
|
+
);
|
|
149
224
|
background-color: var(--n-70);
|
|
150
225
|
transition: background-color var(--motion-duration-medium) var(--motion-easing-standard);
|
|
151
226
|
z-index: 0;
|
|
@@ -229,7 +304,7 @@ var o = class extends t {
|
|
|
229
304
|
this._updateSteps(), this.#n(), this.#i();
|
|
230
305
|
}
|
|
231
306
|
updated(e) {
|
|
232
|
-
this._updateSteps(), (e.has("variant") || e.has("symbolVariant")) && this.#i(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#n();
|
|
307
|
+
this._updateSteps(), (e.has("variant") || e.has("symbolVariant") || e.has("size")) && this.#i(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#n();
|
|
233
308
|
}
|
|
234
309
|
render() {
|
|
235
310
|
return r`
|
|
@@ -303,6 +378,9 @@ e([a({
|
|
|
303
378
|
})], o.prototype, "symbolVariant", void 0), e([a({
|
|
304
379
|
type: String,
|
|
305
380
|
reflect: !0
|
|
381
|
+
})], o.prototype, "size", void 0), e([a({
|
|
382
|
+
type: String,
|
|
383
|
+
reflect: !0
|
|
306
384
|
})], o.prototype, "spacing", void 0), e([a({
|
|
307
385
|
type: String,
|
|
308
386
|
attribute: "spacing-top",
|