scb-wc-test 0.1.74 → 0.1.75
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/all.js +4 -0
- package/index.d.ts +2 -0
- package/index.js +28 -24
- package/mvc/components/all.js +2 -0
- package/mvc/components/scb-stepper/scb-step.js +95 -0
- package/mvc/components/scb-stepper/scb-stepper.js +78 -0
- package/package.json +10 -2
- package/scb-stepper/scb-step.d.ts +18 -0
- package/scb-stepper/scb-step.js +151 -0
- package/scb-stepper/scb-stepper.d.ts +20 -0
- package/scb-stepper/scb-stepper.js +136 -0
- package/scb-wc-test.bundle.js +500 -329
package/all.js
CHANGED
|
@@ -52,6 +52,8 @@ import './mvc/components/scb-segmented-button/scb-segmented-button.js';
|
|
|
52
52
|
import './mvc/components/scb-segmented-button/scb-segmented-item.js';
|
|
53
53
|
import './mvc/components/scb-snackbar/scb-snackbar.js';
|
|
54
54
|
import './mvc/components/scb-status-pill/scb-status-pill.js';
|
|
55
|
+
import './mvc/components/scb-stepper/scb-step.js';
|
|
56
|
+
import './mvc/components/scb-stepper/scb-stepper.js';
|
|
55
57
|
import './mvc/components/scb-switch/scb-switch.js';
|
|
56
58
|
import './mvc/components/scb-tabs/scb-primary-tab.js';
|
|
57
59
|
import './mvc/components/scb-tabs/scb-secondary-tab.js';
|
|
@@ -115,6 +117,8 @@ import './scb-segmented-button/scb-segmented-button.js';
|
|
|
115
117
|
import './scb-segmented-button/scb-segmented-item.js';
|
|
116
118
|
import './scb-snackbar/scb-snackbar.js';
|
|
117
119
|
import './scb-status-pill/scb-status-pill.js';
|
|
120
|
+
import './scb-stepper/scb-step.js';
|
|
121
|
+
import './scb-stepper/scb-stepper.js';
|
|
118
122
|
import './scb-switch/scb-switch.js';
|
|
119
123
|
import './scb-tabs/scb-primary-tab.js';
|
|
120
124
|
import './scb-tabs/scb-secondary-tab.js';
|
package/index.d.ts
CHANGED
|
@@ -49,6 +49,8 @@ export * from './scb-segmented-button/scb-segmented-button';
|
|
|
49
49
|
export * from './scb-segmented-button/scb-segmented-item';
|
|
50
50
|
export * from './scb-snackbar/scb-snackbar';
|
|
51
51
|
export * from './scb-status-pill/scb-status-pill';
|
|
52
|
+
export * from './scb-stepper/scb-step';
|
|
53
|
+
export * from './scb-stepper/scb-stepper';
|
|
52
54
|
export * from './scb-switch/scb-switch';
|
|
53
55
|
export * from './scb-tabs/scb-primary-tab';
|
|
54
56
|
export * from './scb-tabs/scb-secondary-tab';
|
package/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ScbAccordionItem as e } from "./scb-accordion/scb-accordion-item.js";
|
|
2
2
|
import { ScbAccordion as c } from "./scb-accordion/scb-accordion.js";
|
|
3
|
-
import { ScbAppBar as
|
|
4
|
-
import { ScbAvatar as
|
|
3
|
+
import { ScbAppBar as m } from "./scb-app-bar/scb-app-bar.js";
|
|
4
|
+
import { ScbAvatar as b } from "./scb-avatar/scb-avatar.js";
|
|
5
5
|
import { ScbBadge as f } from "./scb-badge/scb-badge.js";
|
|
6
6
|
import { SCBBreadcrumbItem as i } from "./scb-breadcrumb/scb-breadcrumb-item.js";
|
|
7
7
|
import { SCBBreadcrumb as n } from "./scb-breadcrumb/scb-breadcrumb.js";
|
|
@@ -27,8 +27,8 @@ import { ScbStack as _ } from "./scb-grid/scb-stack.js";
|
|
|
27
27
|
import { ScbHeaderDrawerGroup as rr } from "./scb-header/scb-header-drawer-group.js";
|
|
28
28
|
import { ScbHeaderDrawerItem as er } from "./scb-header/scb-header-drawer-item.js";
|
|
29
29
|
import { ScbHeaderTab as cr } from "./scb-header/scb-header-tab.js";
|
|
30
|
-
import { ScbHeaderUtility as
|
|
31
|
-
import { ScbHeader as
|
|
30
|
+
import { ScbHeaderUtility as mr } from "./scb-header/scb-header-utility.js";
|
|
31
|
+
import { ScbHeader as br } from "./scb-header/scb-header.js";
|
|
32
32
|
import { ScbHorizontalScroller as fr } from "./scb-horizontal-scroller/scb-horizontal-scroller.js";
|
|
33
33
|
import { ScbIconButton as ir } from "./scb-icon-button/scb-icon-button.js";
|
|
34
34
|
import { ScbKeyFigureCard as nr } from "./scb-keyfigure-card/scb-keyfigure-card.js";
|
|
@@ -49,21 +49,23 @@ import { ScbSegmentedButton as qr } from "./scb-segmented-button/scb-segmented-b
|
|
|
49
49
|
import { ScbSegmentedItem as Jr } from "./scb-segmented-button/scb-segmented-item.js";
|
|
50
50
|
import { ScbSnackbar as Qr } from "./scb-snackbar/scb-snackbar.js";
|
|
51
51
|
import { ScbStatusPill as Wr } from "./scb-status-pill/scb-status-pill.js";
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
52
|
+
import { ScbStep as Yr } from "./scb-stepper/scb-step.js";
|
|
53
|
+
import { ScbStepper as _r } from "./scb-stepper/scb-stepper.js";
|
|
54
|
+
import { ScbSwitch as ro } from "./scb-switch/scb-switch.js";
|
|
55
|
+
import { ScbPrimaryTab as eo } from "./scb-tabs/scb-primary-tab.js";
|
|
56
|
+
import { ScbSecondaryTab as co } from "./scb-tabs/scb-secondary-tab.js";
|
|
57
|
+
import { ScbTabs as mo } from "./scb-tabs/scb-tabs.js";
|
|
58
|
+
import { ScbTextField2 as bo } from "./scb-textfield/scb-textfield.js";
|
|
59
|
+
import { ScbTocItem as fo } from "./scb-toc/scb-toc-item.js";
|
|
60
|
+
import { ScbToc as io } from "./scb-toc/scb-toc.js";
|
|
61
|
+
import { ScbTooltip as uo } from "./scb-tooltip/scb-tooltip.js";
|
|
60
62
|
export {
|
|
61
63
|
n as SCBBreadcrumb,
|
|
62
64
|
i as SCBBreadcrumbItem,
|
|
63
65
|
c as ScbAccordion,
|
|
64
66
|
e as ScbAccordionItem,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
+
m as ScbAppBar,
|
|
68
|
+
b as ScbAvatar,
|
|
67
69
|
f as ScbBadge,
|
|
68
70
|
C as ScbButton,
|
|
69
71
|
l as ScbCalendarCard,
|
|
@@ -82,11 +84,11 @@ export {
|
|
|
82
84
|
J as ScbFooterSection,
|
|
83
85
|
Y as ScbGrid,
|
|
84
86
|
W as ScbGridItem,
|
|
85
|
-
|
|
87
|
+
br as ScbHeader,
|
|
86
88
|
rr as ScbHeaderDrawerGroup,
|
|
87
89
|
er as ScbHeaderDrawerItem,
|
|
88
90
|
cr as ScbHeaderTab,
|
|
89
|
-
|
|
91
|
+
mr as ScbHeaderUtility,
|
|
90
92
|
fr as ScbHorizontalScroller,
|
|
91
93
|
ir as ScbIconButton,
|
|
92
94
|
nr as ScbKeyFigureCard,
|
|
@@ -98,23 +100,25 @@ export {
|
|
|
98
100
|
kr as ScbNotification,
|
|
99
101
|
yr as ScbNotificationCard,
|
|
100
102
|
Pr as ScbPagination,
|
|
101
|
-
|
|
103
|
+
eo as ScbPrimaryTab,
|
|
102
104
|
Mr as ScbProgressIndicator,
|
|
103
105
|
Nr as ScbRadioButton,
|
|
104
106
|
zr as ScbRadioGroup,
|
|
105
107
|
Ur as ScbSearch,
|
|
106
|
-
|
|
108
|
+
co as ScbSecondaryTab,
|
|
107
109
|
qr as ScbSegmentedButton,
|
|
108
110
|
Jr as ScbSegmentedItem,
|
|
109
111
|
Qr as ScbSnackbar,
|
|
110
112
|
_ as ScbStack,
|
|
111
113
|
Wr as ScbStatusPill,
|
|
114
|
+
Yr as ScbStep,
|
|
115
|
+
_r as ScbStepper,
|
|
112
116
|
z as ScbSubDrawer,
|
|
113
117
|
Hr as ScbSubMenu,
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
118
|
+
ro as ScbSwitch,
|
|
119
|
+
mo as ScbTabs,
|
|
120
|
+
bo as ScbTextField2,
|
|
121
|
+
io as ScbToc,
|
|
122
|
+
fo as ScbTocItem,
|
|
123
|
+
uo as ScbTooltip
|
|
120
124
|
};
|
package/mvc/components/all.js
CHANGED
|
@@ -49,6 +49,8 @@ import './scb-segmented-button/scb-segmented-button.js';
|
|
|
49
49
|
import './scb-segmented-button/scb-segmented-item.js';
|
|
50
50
|
import './scb-snackbar/scb-snackbar.js';
|
|
51
51
|
import './scb-status-pill/scb-status-pill.js';
|
|
52
|
+
import './scb-stepper/scb-step.js';
|
|
53
|
+
import './scb-stepper/scb-stepper.js';
|
|
52
54
|
import './scb-switch/scb-switch.js';
|
|
53
55
|
import './scb-tabs/scb-primary-tab.js';
|
|
54
56
|
import './scb-tabs/scb-secondary-tab.js';
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import{a as p,n as i,i as m,x as s,t as h}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var d=typeof globalThis<"u"?globalThis:window;if(!d.__scb_ce_guard_installed__){d.__scb_ce_guard_installed__=!0;var l=customElements.define.bind(customElements);customElements.define=function(r,n,o){try{customElements.get(r)||l(r,n,o)}catch(c){var a=String(c||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,e=(d,l,r,n)=>{for(var o=n>1?void 0:n?v(l,r):l,a=d.length-1,c;a>=0;a--)(c=d[a])&&(o=(n?c(l,r,o):c(o))||o);return n&&o&&b(l,r,o),o};let t=class extends m{constructor(){super(...arguments),this.label="",this.symbolVariant="number",this.number=0,this.active=!1,this.completed=!1,this.changeOnCompleted=!1,this.islast=!1,this.variant="horizontal",this.icon=""}render(){switch(this.symbolVariant){case"icon":return s`
|
|
2
|
+
<div class="symbol">
|
|
3
|
+
${this.completed&&this.changeOnCompleted?s`<md-icon>check</md-icon>`:s`<md-icon>${this.icon}</md-icon>`}
|
|
4
|
+
</div>
|
|
5
|
+
|
|
6
|
+
<div class="content">
|
|
7
|
+
<div class="label">${this.label}</div>
|
|
8
|
+
<slot></slot>
|
|
9
|
+
</div>
|
|
10
|
+
`;case"marker":return s`
|
|
11
|
+
<div class="symbol">
|
|
12
|
+
</div>
|
|
13
|
+
<div class="content">
|
|
14
|
+
<div class="label">${this.label}</div>
|
|
15
|
+
<slot></slot>
|
|
16
|
+
</div>
|
|
17
|
+
`;default:return s`
|
|
18
|
+
<div class="symbol">
|
|
19
|
+
${this.completed&&this.changeOnCompleted?s`<md-icon>check</md-icon>`:s`<span>${this.number}</span>`}
|
|
20
|
+
</div>
|
|
21
|
+
<div class="content">
|
|
22
|
+
<div class="label">${this.label}</div>
|
|
23
|
+
<slot></slot>
|
|
24
|
+
</div>
|
|
25
|
+
`}}};t.styles=p`
|
|
26
|
+
:host {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
align-items: center;
|
|
30
|
+
min-width: 80px;
|
|
31
|
+
flex: 1 1 0;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
background: none;
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
user-select: none;
|
|
36
|
+
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.symbol {
|
|
40
|
+
background-color: var(--n-70);
|
|
41
|
+
color: var(--md-sys-color-on-primary);
|
|
42
|
+
border-radius: 50%;
|
|
43
|
+
min-width: 32px;
|
|
44
|
+
height: 32px;
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
font-weight: 600;
|
|
49
|
+
font-size: 14px;
|
|
50
|
+
position: relative;
|
|
51
|
+
z-index: 1;
|
|
52
|
+
}
|
|
53
|
+
md-icon {
|
|
54
|
+
font-size: 20px;
|
|
55
|
+
}
|
|
56
|
+
:host([active]) .symbol {
|
|
57
|
+
background-color: var(--md-sys-color-primary);
|
|
58
|
+
}
|
|
59
|
+
:host([completed]) .symbol {
|
|
60
|
+
background-color: var(--md-sys-color-primary);
|
|
61
|
+
}
|
|
62
|
+
.label {
|
|
63
|
+
margin-top: 8px;
|
|
64
|
+
text-align: center;
|
|
65
|
+
font-size: 16px;
|
|
66
|
+
color: var(--md-sys-color-on-surface, #222);
|
|
67
|
+
max-width: 90px;
|
|
68
|
+
word-break: break-word;
|
|
69
|
+
margin-bottom: 8px;
|
|
70
|
+
}
|
|
71
|
+
:host([active]) .label, :host([active]) slot {
|
|
72
|
+
font-weight: 600;
|
|
73
|
+
}
|
|
74
|
+
.content{
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: column;
|
|
77
|
+
align-items: center;
|
|
78
|
+
}
|
|
79
|
+
:host([variant="vertical"]) {
|
|
80
|
+
flex-direction: row;
|
|
81
|
+
align-items: flex-start;
|
|
82
|
+
gap: 16px;
|
|
83
|
+
|
|
84
|
+
}
|
|
85
|
+
:host([variant="vertical"]) .label{
|
|
86
|
+
margin-top: 0;
|
|
87
|
+
}
|
|
88
|
+
:host([variant="vertical"]) .content{
|
|
89
|
+
align-items: flex-start;
|
|
90
|
+
}
|
|
91
|
+
:host([symbol-variant="marker"]) .symbol {
|
|
92
|
+
min-width: 16px;
|
|
93
|
+
height: 16px;
|
|
94
|
+
}
|
|
95
|
+
`;e([i({type:String,reflect:!0})],t.prototype,"label",2);e([i({type:String,reflect:!0,attribute:"symbol-variant"})],t.prototype,"symbolVariant",2);e([i({type:Number,reflect:!0})],t.prototype,"number",2);e([i({type:Boolean,reflect:!0})],t.prototype,"active",2);e([i({type:Boolean,reflect:!0})],t.prototype,"completed",2);e([i({type:Boolean,reflect:!0})],t.prototype,"changeOnCompleted",2);e([i({type:Boolean,reflect:!0})],t.prototype,"islast",2);e([i({type:String,reflect:!0})],t.prototype,"variant",2);e([i({type:String})],t.prototype,"icon",2);t=e([h("scb-step")],t);
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import{a as c,n as p,r as d,i as h,x as f,t as u}from"../../vendor/vendor.js";import"./scb-step.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 t=customElements.define.bind(customElements);customElements.define=function(i,s,r){try{customElements.get(i)||t(i,s,r)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,l=(e,t,i,s)=>{for(var r=s>1?void 0:s?v(t,i):t,n=e.length-1,o;n>=0;n--)(o=e[n])&&(r=(s?o(t,i,r):o(r))||r);return s&&r&&b(t,i,r),r};let a=class extends h{constructor(){super(...arguments),this.label="",this.changeOnCompleted=!1,this.variant="horizontal",this.symbolVariant="number",this.activeIndex=0,this._onStepContainerClick=e=>{const t=this._getSteps(),i=e.composedPath(),s=t.findIndex(r=>i.includes(r));s!==-1&&this._onStepClick(s)}}_onStepClick(e){this.activeIndex=e,this._updateSteps()}_updateSteps(){const e=this._getSteps();e.forEach((t,i)=>{t.active=i===this.activeIndex,t.completed=i<this.activeIndex,t.islast=!1,t.changeOnCompleted=this.changeOnCompleted,t.number=i+1,t.variant=this.variant,t.symbolVariant=this.symbolVariant}),e.length>0&&(e[e.length-1].islast=!0)}_getSteps(){return Array.from(this.querySelectorAll("scb-step"))}firstUpdated(){this._updateSteps()}updated(){this._updateSteps()}render(){return f`
|
|
2
|
+
<div class="steps" style="flex-direction: ${this.variant==="vertical"?"column":"row"}; align-items: ${this.variant==="vertical","flex-start"};" @click=${this._onStepContainerClick}>
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</div>
|
|
5
|
+
`}};a.styles=c`
|
|
6
|
+
:host {
|
|
7
|
+
--scb-stepper-width: 100%;
|
|
8
|
+
--scb-stepper-height: 100%;
|
|
9
|
+
display: block;
|
|
10
|
+
padding: 16px;
|
|
11
|
+
width: 100%;
|
|
12
|
+
color: var(--md-sys-color-on-surface);
|
|
13
|
+
font-family: var(--brand-font);
|
|
14
|
+
max-width: var(--scb-stepper-width);
|
|
15
|
+
height: var(--scb-stepper-height);
|
|
16
|
+
}
|
|
17
|
+
.steps {
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: row;
|
|
20
|
+
align-items: flex-start;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
position: relative;
|
|
23
|
+
width: 100%;
|
|
24
|
+
gap: 24px;
|
|
25
|
+
height: 100%;
|
|
26
|
+
}
|
|
27
|
+
:host([variant='vertical']) .steps {
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
align-items: flex-start;
|
|
30
|
+
gap: 32px;
|
|
31
|
+
}
|
|
32
|
+
::slotted(scb-step) {
|
|
33
|
+
position: relative;
|
|
34
|
+
flex: 1 1 0;
|
|
35
|
+
min-width: 80px;
|
|
36
|
+
z-index: 1;
|
|
37
|
+
}
|
|
38
|
+
/* Horisontell connector */
|
|
39
|
+
::slotted(scb-step:not(:first-child))::before {
|
|
40
|
+
content: '';
|
|
41
|
+
position: absolute;
|
|
42
|
+
left: -50%;
|
|
43
|
+
top: 16px;
|
|
44
|
+
width: calc(100% - 24px);
|
|
45
|
+
height: 1px;
|
|
46
|
+
background: var(--n-70);
|
|
47
|
+
border-radius: 1px;
|
|
48
|
+
z-index: 0;
|
|
49
|
+
}
|
|
50
|
+
/* Vertikal connector */
|
|
51
|
+
::slotted(scb-step[variant="vertical"]:not(:first-child))::before {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
54
|
+
::slotted(scb-step[variant="vertical"]:not(:last-child))::after {
|
|
55
|
+
content: '';
|
|
56
|
+
position: absolute;
|
|
57
|
+
left: 16px;
|
|
58
|
+
top: 40px;
|
|
59
|
+
width: 1px;
|
|
60
|
+
height: calc(100% - 16px);
|
|
61
|
+
background: var(--n-70);
|
|
62
|
+
border-radius: 1px;
|
|
63
|
+
z-index: 0;
|
|
64
|
+
transform: translateX(-50%);
|
|
65
|
+
}
|
|
66
|
+
::slotted(scb-step[variant="vertical"][symbol-variant="marker"]:not(:last-child))::after {
|
|
67
|
+
content: "";
|
|
68
|
+
position: absolute;
|
|
69
|
+
left: 8px;
|
|
70
|
+
top: 25px;
|
|
71
|
+
width: 1px;
|
|
72
|
+
height: calc(100% - 2px);
|
|
73
|
+
background: var(--n-70);
|
|
74
|
+
border-radius: 1px;
|
|
75
|
+
z-index: 0;
|
|
76
|
+
transform: translateX(-50%);
|
|
77
|
+
}
|
|
78
|
+
`;l([p({type:String,reflect:!0})],a.prototype,"label",2);l([p({type:Boolean,reflect:!0,attribute:"change-on-completed"})],a.prototype,"changeOnCompleted",2);l([p({type:String})],a.prototype,"variant",2);l([p({type:String,reflect:!0,attribute:"symbol-variant"})],a.prototype,"symbolVariant",2);l([d()],a.prototype,"activeIndex",2);a=l([u("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.75",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -262,6 +262,14 @@
|
|
|
262
262
|
"import": "./scb-status-pill/scb-status-pill.js",
|
|
263
263
|
"require": "./scb-status-pill/scb-status-pill.js"
|
|
264
264
|
},
|
|
265
|
+
"./scb-stepper": {
|
|
266
|
+
"import": "./scb-stepper/scb-stepper.js",
|
|
267
|
+
"require": "./scb-stepper/scb-stepper.js"
|
|
268
|
+
},
|
|
269
|
+
"./scb-stepper/scb-step": {
|
|
270
|
+
"import": "./scb-stepper/scb-step.js",
|
|
271
|
+
"require": "./scb-stepper/scb-step.js"
|
|
272
|
+
},
|
|
265
273
|
"./scb-switch": {
|
|
266
274
|
"import": "./scb-switch/scb-switch.js",
|
|
267
275
|
"require": "./scb-switch/scb-switch.js"
|
|
@@ -296,5 +304,5 @@
|
|
|
296
304
|
},
|
|
297
305
|
"./mvc/*": "./mvc/*"
|
|
298
306
|
},
|
|
299
|
-
"buildHash": "
|
|
307
|
+
"buildHash": "D530B6DFBE9DE8D09579B66E6A5F11B57D495F3BB33A88B2906A615C20C2CE1B"
|
|
300
308
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Ett steg i en stepper-komponent.
|
|
4
|
+
* @slot - Innehåll för steget
|
|
5
|
+
*/
|
|
6
|
+
export declare class ScbStep extends LitElement {
|
|
7
|
+
label: string;
|
|
8
|
+
symbolVariant: 'number' | 'icon' | 'marker';
|
|
9
|
+
number: number;
|
|
10
|
+
active: boolean;
|
|
11
|
+
completed: boolean;
|
|
12
|
+
changeOnCompleted: boolean;
|
|
13
|
+
islast: boolean;
|
|
14
|
+
variant: 'horizontal' | 'vertical';
|
|
15
|
+
icon: string;
|
|
16
|
+
static styles: import('lit').CSSResult;
|
|
17
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
18
|
+
}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import { css as m, LitElement as d, html as i } from "lit";
|
|
2
|
+
import { property as o, customElement as h } from "lit/decorators.js";
|
|
3
|
+
import "@material/web/icon/icon.js";
|
|
4
|
+
var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (p, s, n, l) => {
|
|
5
|
+
for (var r = l > 1 ? void 0 : l ? b(s, n) : s, a = p.length - 1, c; a >= 0; a--)
|
|
6
|
+
(c = p[a]) && (r = (l ? c(s, n, r) : c(r)) || r);
|
|
7
|
+
return l && r && v(s, n, r), r;
|
|
8
|
+
};
|
|
9
|
+
let t = class extends d {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments), this.label = "", this.symbolVariant = "number", this.number = 0, this.active = !1, this.completed = !1, this.changeOnCompleted = !1, this.islast = !1, this.variant = "horizontal", this.icon = "";
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
switch (this.symbolVariant) {
|
|
15
|
+
case "icon":
|
|
16
|
+
return i`
|
|
17
|
+
<div class="symbol">
|
|
18
|
+
${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<md-icon>${this.icon}</md-icon>`}
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="content">
|
|
22
|
+
<div class="label">${this.label}</div>
|
|
23
|
+
<slot></slot>
|
|
24
|
+
</div>
|
|
25
|
+
`;
|
|
26
|
+
case "marker":
|
|
27
|
+
return i`
|
|
28
|
+
<div class="symbol">
|
|
29
|
+
</div>
|
|
30
|
+
<div class="content">
|
|
31
|
+
<div class="label">${this.label}</div>
|
|
32
|
+
<slot></slot>
|
|
33
|
+
</div>
|
|
34
|
+
`;
|
|
35
|
+
default:
|
|
36
|
+
return i`
|
|
37
|
+
<div class="symbol">
|
|
38
|
+
${this.completed && this.changeOnCompleted ? i`<md-icon>check</md-icon>` : i`<span>${this.number}</span>`}
|
|
39
|
+
</div>
|
|
40
|
+
<div class="content">
|
|
41
|
+
<div class="label">${this.label}</div>
|
|
42
|
+
<slot></slot>
|
|
43
|
+
</div>
|
|
44
|
+
`;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
t.styles = m`
|
|
49
|
+
:host {
|
|
50
|
+
display: flex;
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
align-items: center;
|
|
53
|
+
min-width: 80px;
|
|
54
|
+
flex: 1 1 0;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
background: none;
|
|
57
|
+
box-sizing: border-box;
|
|
58
|
+
user-select: none;
|
|
59
|
+
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.symbol {
|
|
63
|
+
background-color: var(--n-70);
|
|
64
|
+
color: var(--md-sys-color-on-primary);
|
|
65
|
+
border-radius: 50%;
|
|
66
|
+
min-width: 32px;
|
|
67
|
+
height: 32px;
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
font-size: 14px;
|
|
73
|
+
position: relative;
|
|
74
|
+
z-index: 1;
|
|
75
|
+
}
|
|
76
|
+
md-icon {
|
|
77
|
+
font-size: 20px;
|
|
78
|
+
}
|
|
79
|
+
:host([active]) .symbol {
|
|
80
|
+
background-color: var(--md-sys-color-primary);
|
|
81
|
+
}
|
|
82
|
+
:host([completed]) .symbol {
|
|
83
|
+
background-color: var(--md-sys-color-primary);
|
|
84
|
+
}
|
|
85
|
+
.label {
|
|
86
|
+
margin-top: 8px;
|
|
87
|
+
text-align: center;
|
|
88
|
+
font-size: 16px;
|
|
89
|
+
color: var(--md-sys-color-on-surface, #222);
|
|
90
|
+
max-width: 90px;
|
|
91
|
+
word-break: break-word;
|
|
92
|
+
margin-bottom: 8px;
|
|
93
|
+
}
|
|
94
|
+
:host([active]) .label, :host([active]) slot {
|
|
95
|
+
font-weight: 600;
|
|
96
|
+
}
|
|
97
|
+
.content{
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: column;
|
|
100
|
+
align-items: center;
|
|
101
|
+
}
|
|
102
|
+
:host([variant="vertical"]) {
|
|
103
|
+
flex-direction: row;
|
|
104
|
+
align-items: flex-start;
|
|
105
|
+
gap: 16px;
|
|
106
|
+
|
|
107
|
+
}
|
|
108
|
+
:host([variant="vertical"]) .label{
|
|
109
|
+
margin-top: 0;
|
|
110
|
+
}
|
|
111
|
+
:host([variant="vertical"]) .content{
|
|
112
|
+
align-items: flex-start;
|
|
113
|
+
}
|
|
114
|
+
:host([symbol-variant="marker"]) .symbol {
|
|
115
|
+
min-width: 16px;
|
|
116
|
+
height: 16px;
|
|
117
|
+
}
|
|
118
|
+
`;
|
|
119
|
+
e([
|
|
120
|
+
o({ type: String, reflect: !0 })
|
|
121
|
+
], t.prototype, "label", 2);
|
|
122
|
+
e([
|
|
123
|
+
o({ type: String, reflect: !0, attribute: "symbol-variant" })
|
|
124
|
+
], t.prototype, "symbolVariant", 2);
|
|
125
|
+
e([
|
|
126
|
+
o({ type: Number, reflect: !0 })
|
|
127
|
+
], t.prototype, "number", 2);
|
|
128
|
+
e([
|
|
129
|
+
o({ type: Boolean, reflect: !0 })
|
|
130
|
+
], t.prototype, "active", 2);
|
|
131
|
+
e([
|
|
132
|
+
o({ type: Boolean, reflect: !0 })
|
|
133
|
+
], t.prototype, "completed", 2);
|
|
134
|
+
e([
|
|
135
|
+
o({ type: Boolean, reflect: !0 })
|
|
136
|
+
], t.prototype, "changeOnCompleted", 2);
|
|
137
|
+
e([
|
|
138
|
+
o({ type: Boolean, reflect: !0 })
|
|
139
|
+
], t.prototype, "islast", 2);
|
|
140
|
+
e([
|
|
141
|
+
o({ type: String, reflect: !0 })
|
|
142
|
+
], t.prototype, "variant", 2);
|
|
143
|
+
e([
|
|
144
|
+
o({ type: String })
|
|
145
|
+
], t.prototype, "icon", 2);
|
|
146
|
+
t = e([
|
|
147
|
+
h("scb-step")
|
|
148
|
+
], t);
|
|
149
|
+
export {
|
|
150
|
+
t as ScbStep
|
|
151
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* En stepper-komponent enligt SCB-standard.
|
|
4
|
+
* @slot - Innehåll för stegen
|
|
5
|
+
*/
|
|
6
|
+
export declare class ScbStepper extends LitElement {
|
|
7
|
+
label: string;
|
|
8
|
+
changeOnCompleted: boolean;
|
|
9
|
+
variant: 'horizontal' | 'vertical';
|
|
10
|
+
symbolVariant: 'number' | 'icon' | 'marker';
|
|
11
|
+
private activeIndex;
|
|
12
|
+
static styles: import('lit').CSSResult;
|
|
13
|
+
private _onStepClick;
|
|
14
|
+
private _updateSteps;
|
|
15
|
+
private _getSteps;
|
|
16
|
+
firstUpdated(): void;
|
|
17
|
+
updated(): void;
|
|
18
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
19
|
+
private _onStepContainerClick;
|
|
20
|
+
}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { css as c, LitElement as d, html as h } from "lit";
|
|
2
|
+
import { property as n, state as f, customElement as v } from "lit/decorators.js";
|
|
3
|
+
import "./scb-step.js";
|
|
4
|
+
var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (e, t, i, a) => {
|
|
5
|
+
for (var r = a > 1 ? void 0 : a ? x(t, i) : t, l = e.length - 1, p; l >= 0; l--)
|
|
6
|
+
(p = e[l]) && (r = (a ? p(t, i, r) : p(r)) || r);
|
|
7
|
+
return a && r && b(t, i, r), r;
|
|
8
|
+
};
|
|
9
|
+
let s = class extends d {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments), this.label = "", this.changeOnCompleted = !1, this.variant = "horizontal", this.symbolVariant = "number", this.activeIndex = 0, this._onStepContainerClick = (e) => {
|
|
12
|
+
const t = this._getSteps(), i = e.composedPath(), a = t.findIndex((r) => i.includes(r));
|
|
13
|
+
a !== -1 && this._onStepClick(a);
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
_onStepClick(e) {
|
|
17
|
+
this.activeIndex = e, this._updateSteps();
|
|
18
|
+
}
|
|
19
|
+
_updateSteps() {
|
|
20
|
+
const e = this._getSteps();
|
|
21
|
+
e.forEach((t, i) => {
|
|
22
|
+
t.active = i === this.activeIndex, t.completed = i < this.activeIndex, t.islast = !1, t.changeOnCompleted = this.changeOnCompleted, t.number = i + 1, t.variant = this.variant, t.symbolVariant = this.symbolVariant;
|
|
23
|
+
}), e.length > 0 && (e[e.length - 1].islast = !0);
|
|
24
|
+
}
|
|
25
|
+
_getSteps() {
|
|
26
|
+
return Array.from(this.querySelectorAll("scb-step"));
|
|
27
|
+
}
|
|
28
|
+
firstUpdated() {
|
|
29
|
+
this._updateSteps();
|
|
30
|
+
}
|
|
31
|
+
updated() {
|
|
32
|
+
this._updateSteps();
|
|
33
|
+
}
|
|
34
|
+
render() {
|
|
35
|
+
return h`
|
|
36
|
+
<div class="steps" style="flex-direction: ${this.variant === "vertical" ? "column" : "row"}; align-items: ${this.variant === "vertical", "flex-start"};" @click=${this._onStepContainerClick}>
|
|
37
|
+
<slot></slot>
|
|
38
|
+
</div>
|
|
39
|
+
`;
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
s.styles = c`
|
|
43
|
+
:host {
|
|
44
|
+
--scb-stepper-width: 100%;
|
|
45
|
+
--scb-stepper-height: 100%;
|
|
46
|
+
display: block;
|
|
47
|
+
padding: 16px;
|
|
48
|
+
width: 100%;
|
|
49
|
+
color: var(--md-sys-color-on-surface);
|
|
50
|
+
font-family: var(--brand-font);
|
|
51
|
+
max-width: var(--scb-stepper-width);
|
|
52
|
+
height: var(--scb-stepper-height);
|
|
53
|
+
}
|
|
54
|
+
.steps {
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-direction: row;
|
|
57
|
+
align-items: flex-start;
|
|
58
|
+
justify-content: center;
|
|
59
|
+
position: relative;
|
|
60
|
+
width: 100%;
|
|
61
|
+
gap: 24px;
|
|
62
|
+
height: 100%;
|
|
63
|
+
}
|
|
64
|
+
:host([variant='vertical']) .steps {
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
align-items: flex-start;
|
|
67
|
+
gap: 32px;
|
|
68
|
+
}
|
|
69
|
+
::slotted(scb-step) {
|
|
70
|
+
position: relative;
|
|
71
|
+
flex: 1 1 0;
|
|
72
|
+
min-width: 80px;
|
|
73
|
+
z-index: 1;
|
|
74
|
+
}
|
|
75
|
+
/* Horisontell connector */
|
|
76
|
+
::slotted(scb-step:not(:first-child))::before {
|
|
77
|
+
content: '';
|
|
78
|
+
position: absolute;
|
|
79
|
+
left: -50%;
|
|
80
|
+
top: 16px;
|
|
81
|
+
width: calc(100% - 24px);
|
|
82
|
+
height: 1px;
|
|
83
|
+
background: var(--n-70);
|
|
84
|
+
border-radius: 1px;
|
|
85
|
+
z-index: 0;
|
|
86
|
+
}
|
|
87
|
+
/* Vertikal connector */
|
|
88
|
+
::slotted(scb-step[variant="vertical"]:not(:first-child))::before {
|
|
89
|
+
display: none;
|
|
90
|
+
}
|
|
91
|
+
::slotted(scb-step[variant="vertical"]:not(:last-child))::after {
|
|
92
|
+
content: '';
|
|
93
|
+
position: absolute;
|
|
94
|
+
left: 16px;
|
|
95
|
+
top: 40px;
|
|
96
|
+
width: 1px;
|
|
97
|
+
height: calc(100% - 16px);
|
|
98
|
+
background: var(--n-70);
|
|
99
|
+
border-radius: 1px;
|
|
100
|
+
z-index: 0;
|
|
101
|
+
transform: translateX(-50%);
|
|
102
|
+
}
|
|
103
|
+
::slotted(scb-step[variant="vertical"][symbol-variant="marker"]:not(:last-child))::after {
|
|
104
|
+
content: "";
|
|
105
|
+
position: absolute;
|
|
106
|
+
left: 8px;
|
|
107
|
+
top: 25px;
|
|
108
|
+
width: 1px;
|
|
109
|
+
height: calc(100% - 2px);
|
|
110
|
+
background: var(--n-70);
|
|
111
|
+
border-radius: 1px;
|
|
112
|
+
z-index: 0;
|
|
113
|
+
transform: translateX(-50%);
|
|
114
|
+
}
|
|
115
|
+
`;
|
|
116
|
+
o([
|
|
117
|
+
n({ type: String, reflect: !0 })
|
|
118
|
+
], s.prototype, "label", 2);
|
|
119
|
+
o([
|
|
120
|
+
n({ type: Boolean, reflect: !0, attribute: "change-on-completed" })
|
|
121
|
+
], s.prototype, "changeOnCompleted", 2);
|
|
122
|
+
o([
|
|
123
|
+
n({ type: String })
|
|
124
|
+
], s.prototype, "variant", 2);
|
|
125
|
+
o([
|
|
126
|
+
n({ type: String, reflect: !0, attribute: "symbol-variant" })
|
|
127
|
+
], s.prototype, "symbolVariant", 2);
|
|
128
|
+
o([
|
|
129
|
+
f()
|
|
130
|
+
], s.prototype, "activeIndex", 2);
|
|
131
|
+
s = o([
|
|
132
|
+
v("scb-stepper")
|
|
133
|
+
], s);
|
|
134
|
+
export {
|
|
135
|
+
s as ScbStepper
|
|
136
|
+
};
|