scb-wc-test 0.1.73 → 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-accordion/scb-accordion-item.js +1 -1
- package/mvc/components/scb-checkbox/scb-checkbox.js +1 -1
- package/mvc/components/scb-dialog/scb-dialog.js +2 -2
- package/mvc/components/scb-list/scb-list-item.js +2 -2
- 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-accordion/scb-accordion-item.js +1 -1
- package/scb-checkbox/scb-checkbox.js +1 -0
- 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 +501 -330
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';
|
|
@@ -26,7 +26,7 @@ import{_ as g}from"../../vendor/preload-helper.js";import{a as u,n as s,i as m,E
|
|
|
26
26
|
${this.supportingText?l`<div class="supporting-text">${this.supportingText}</div>`:p}
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
|
-
<md-icon class="chevron">
|
|
29
|
+
<md-icon class="chevron">expand_more</md-icon>
|
|
30
30
|
</summary>
|
|
31
31
|
|
|
32
32
|
<div id=${t} class="scb-accordion-bottom" role="region" aria-labelledby=${i}>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as p,n,i as h,E as d,x as b,t as u}from"../../vendor/vendor.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 i=customElements.define.bind(customElements);customElements.define=function(e,s,a){try{customElements.get(e)||i(e,s,a)}catch(o){var r=String(o||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(t,i,e,s)=>{for(var a=s>1?void 0:s?f(i,e):i,r=t.length-1,o;r>=0;r--)(o=t[r])&&(a=(s?o(i,e,a):o(a))||a);return s&&a&&m(i,e,a),a};let c=class extends h{constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.checked=!1,this.label="",this.supportingText="",this.ariaLabel="",this._checkboxId=""}connectedCallback(){super.connectedCallback(),this._checkboxId=this.id||`scb-checkbox-${Math.random().toString(36).slice(2,11)}`}firstUpdated(){const t=this.shadowRoot?.querySelector("md-checkbox");t&&t.addEventListener("change",()=>{const e=t.checked;this.checked=e,this.dispatchEvent(new CustomEvent("change",{detail:{checked:e},bubbles:!0,composed:!0}))}),this.shadowRoot?.querySelector("label.wrap")?.addEventListener("click",e=>{if(this.disabled)return;if(!e.composedPath().some(r=>{const o=r;return o?.tagName?.toLowerCase?.()==="md-checkbox"||o?.classList?.contains("box-wrap")})){e.preventDefault();const r=this.shadowRoot.querySelector("md-checkbox");r&&(r.checked=!r.checked,r.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}}),this.__syncInnerAria()}updated(t){super.updated(t),t.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled),(t.has("label")||t.has("supportingText")||t.has("ariaLabel"))&&this.__syncInnerAria()}__syncInnerAria(){const i=this.shadowRoot?.querySelector("md-checkbox")?.shadowRoot;if(!i)return;const e=i.querySelector('[role="checkbox"]')||i.querySelector('input[type="checkbox"]');if(!e)return;const s=!!this.label?.trim(),a=s?`${this._checkboxId}-label`:"",r=this.supportingText?`${this._checkboxId}-supporting-text`:"";s&&a?(e.setAttribute("aria-labelledby",a),e.removeAttribute("aria-label")):(e.removeAttribute("aria-labelledby"),this.ariaLabel?.trim()?e.setAttribute("aria-label",this.ariaLabel.trim()):e.removeAttribute("aria-label")),r?e.setAttribute("aria-describedby",r):e.removeAttribute("aria-describedby")}render(){const t=this.supportingText?`${this._checkboxId}-supporting-text`:void 0,i=!!this.label?.trim(),e=i?d:this.ariaLabel||d;return b`
|
|
1
|
+
import{a as p,n,i as h,E as d,x as b,t as u}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"./scb-checkbox-group.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(e,s,a){try{customElements.get(e)||i(e,s,a)}catch(o){var r=String(o||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(t,i,e,s)=>{for(var a=s>1?void 0:s?f(i,e):i,r=t.length-1,o;r>=0;r--)(o=t[r])&&(a=(s?o(i,e,a):o(a))||a);return s&&a&&m(i,e,a),a};let c=class extends h{constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.checked=!1,this.label="",this.supportingText="",this.ariaLabel="",this._checkboxId=""}connectedCallback(){super.connectedCallback(),this._checkboxId=this.id||`scb-checkbox-${Math.random().toString(36).slice(2,11)}`}firstUpdated(){const t=this.shadowRoot?.querySelector("md-checkbox");t&&t.addEventListener("change",()=>{const e=t.checked;this.checked=e,this.dispatchEvent(new CustomEvent("change",{detail:{checked:e},bubbles:!0,composed:!0}))}),this.shadowRoot?.querySelector("label.wrap")?.addEventListener("click",e=>{if(this.disabled)return;if(!e.composedPath().some(r=>{const o=r;return o?.tagName?.toLowerCase?.()==="md-checkbox"||o?.classList?.contains("box-wrap")})){e.preventDefault();const r=this.shadowRoot.querySelector("md-checkbox");r&&(r.checked=!r.checked,r.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}}),this.__syncInnerAria()}updated(t){super.updated(t),t.has("disabled")&&this.toggleAttribute("aria-disabled",this.disabled),(t.has("label")||t.has("supportingText")||t.has("ariaLabel"))&&this.__syncInnerAria()}__syncInnerAria(){const i=this.shadowRoot?.querySelector("md-checkbox")?.shadowRoot;if(!i)return;const e=i.querySelector('[role="checkbox"]')||i.querySelector('input[type="checkbox"]');if(!e)return;const s=!!this.label?.trim(),a=s?`${this._checkboxId}-label`:"",r=this.supportingText?`${this._checkboxId}-supporting-text`:"";s&&a?(e.setAttribute("aria-labelledby",a),e.removeAttribute("aria-label")):(e.removeAttribute("aria-labelledby"),this.ariaLabel?.trim()?e.setAttribute("aria-label",this.ariaLabel.trim()):e.removeAttribute("aria-label")),r?e.setAttribute("aria-describedby",r):e.removeAttribute("aria-describedby")}render(){const t=this.supportingText?`${this._checkboxId}-supporting-text`:void 0,i=!!this.label?.trim(),e=i?d:this.ariaLabel||d;return b`
|
|
2
2
|
<label class="wrap">
|
|
3
3
|
<div class="box-wrap">
|
|
4
4
|
<md-checkbox
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../scb-textfield/scb-textfield.js","../../vendor/preload-helper.js","../../vendor/vendor.js","../scb-checkbox/scb-checkbox.js","../../vendor/vendor-material.js","../scb-radio-button/scb-radio-button.js","../scb-switch/scb-switch.js","../scb-chip/scb-chip.js","../scb-button/scb-button.js","../scb-icon-button/scb-icon-button.js","../scb-tooltip/scb-tooltip.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as d}from"../../vendor/preload-helper.js";import{a as h,n,i as m,E as p,x as a,t as _}from"../../vendor/vendor.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(o,c,r){try{customElements.get(o)||e(o,c,r)}catch(u){var l=String(u||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(t,e,o,c)=>{for(var r=c>1?void 0:c?f(e,o):e,l=t.length-1,u;l>=0;l--)(u=t[l])&&(r=(c?u(e,o,r):u(r))||r);return c&&r&&b(e,o,r),r};let i=class extends m{constructor(){super(...arguments),this.open=!1,this.inSb=!1,this.scrimClose=!0,this.variant="basic",this.label="",this.icon="",this.supportingText="",this.okButton="OK",this.cancelButton="Avbryt",this.deleteButton="Delete",this.confirmButton="Ta bort",this.denyButton="Avbryt",this.resetButton="Återställ",this.submitButton="Spara",this.formId="",this.formAction="",this.formMethod="",this.__lastTriggerEl=null,this.__slotDeps={"SCB-TEXTFIELD":()=>d(()=>import("../scb-textfield/scb-textfield.js"),__vite__mapDeps([0,1,2]),import.meta.url),"SCB-CHECKBOX":()=>d(()=>import("../scb-checkbox/scb-checkbox.js"),__vite__mapDeps([3,2,4]),import.meta.url),"SCB-RADIO-BUTTON":()=>d(()=>import("../scb-radio-button/scb-radio-button.js"),__vite__mapDeps([
|
|
1
|
+
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../scb-textfield/scb-textfield.js","../../vendor/preload-helper.js","../../vendor/vendor.js","../scb-checkbox/scb-checkbox.js","../../vendor/vendor-material.js","../scb-checkbox/scb-checkbox-group.js","../scb-radio-button/scb-radio-button.js","../scb-switch/scb-switch.js","../scb-chip/scb-chip.js","../scb-button/scb-button.js","../scb-icon-button/scb-icon-button.js","../scb-tooltip/scb-tooltip.js"])))=>i.map(i=>d[i]);
|
|
2
|
+
import{_ as d}from"../../vendor/preload-helper.js";import{a as h,n,i as m,E as p,x as a,t as _}from"../../vendor/vendor.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(o,c,r){try{customElements.get(o)||e(o,c,r)}catch(u){var l=String(u||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,s=(t,e,o,c)=>{for(var r=c>1?void 0:c?f(e,o):e,l=t.length-1,u;l>=0;l--)(u=t[l])&&(r=(c?u(e,o,r):u(r))||r);return c&&r&&b(e,o,r),r};let i=class extends m{constructor(){super(...arguments),this.open=!1,this.inSb=!1,this.scrimClose=!0,this.variant="basic",this.label="",this.icon="",this.supportingText="",this.okButton="OK",this.cancelButton="Avbryt",this.deleteButton="Delete",this.confirmButton="Ta bort",this.denyButton="Avbryt",this.resetButton="Återställ",this.submitButton="Spara",this.formId="",this.formAction="",this.formMethod="",this.__lastTriggerEl=null,this.__slotDeps={"SCB-TEXTFIELD":()=>d(()=>import("../scb-textfield/scb-textfield.js"),__vite__mapDeps([0,1,2]),import.meta.url),"SCB-CHECKBOX":()=>d(()=>import("../scb-checkbox/scb-checkbox.js"),__vite__mapDeps([3,2,4,5]),import.meta.url),"SCB-RADIO-BUTTON":()=>d(()=>import("../scb-radio-button/scb-radio-button.js"),__vite__mapDeps([6,2,4]),import.meta.url),"SCB-SWITCH":()=>d(()=>import("../scb-switch/scb-switch.js"),__vite__mapDeps([7,1,2]),import.meta.url),"SCB-CHIP":()=>d(()=>import("../scb-chip/scb-chip.js"),__vite__mapDeps([8,1,2]),import.meta.url)},this.__onDocumentClick=t=>{this.__getActionFromEvent(t)==="toggle"&&(this.__setOpen(!this.open),t.stopPropagation())},this.__onDocumentKeydown=t=>{this.open&&t.key==="Escape"&&(this.__fire("esc"),this.__setOpen(!1))},this.__onScrimClick=()=>{this.scrimClose&&(this.__fire("scrim"),this.__setOpen(!1))},this.__onOk=()=>{this.__fire("ok"),this.__setOpen(!1)},this.__onCancel=()=>{this.__fire("cancel"),this.__setOpen(!1)},this.__onConfirm=()=>{this.__fire("confirm"),this.__setOpen(!1)},this.__onDeny=()=>{this.__fire("deny"),this.__setOpen(!1)},this.__onReset=()=>{this.shadowRoot?.querySelector("form")?.reset(),(this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[]).forEach(e=>{const o=e.tagName;o==="SCB-TEXTFIELD"&&(e.value=""),o==="SCB-CHECKBOX"&&(e.checked=!1),o==="SCB-RADIO-BUTTON"&&(e.checked=!1),o==="SCB-SWITCH"&&(e.selected=!1),o==="SCB-CHIP"&&(e.selected=!1)}),this.__fire("reset")},this.__onSubmit=()=>{this.shadowRoot?.querySelector("form")?.requestSubmit(),this.__fire("submit"),this.__setOpen(!1)},this.__onKeydownTrap=t=>{if(!this.open||t.key!=="Tab")return;const e=Array.from(this.shadowRoot.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')).filter(r=>!r.hasAttribute("disabled"));if(!e.length)return;const o=e[0],c=e[e.length-1];t.shiftKey&&document.activeElement===o?(c.focus(),t.preventDefault()):!t.shiftKey&&document.activeElement===c&&(o.focus(),t.preventDefault())}}async firstUpdated(){await d(()=>import("../scb-button/scb-button.js"),__vite__mapDeps([9,1,2]),import.meta.url),await d(()=>import("../scb-icon-button/scb-icon-button.js"),__vite__mapDeps([10,1,2,4,11,9]),import.meta.url),this.icon&&await d(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([4,2]),import.meta.url),await this.__ensureSlottedDeps()}async __ensureSlottedDeps(){const t=this.shadowRoot?.querySelector("slot");if(!t)return;const e=async o=>{const c=new Set(o.map(r=>r.tagName));for(const r of c){const l=this.__slotDeps[r];l&&await l()}};await e(t.assignedElements({flatten:!0})),t.addEventListener("slotchange",async()=>e(t.assignedElements({flatten:!0})))}__getActionFromEvent(t){if(!this.id)return null;for(const e of t.composedPath())if(e instanceof Element){if(e.getAttribute("data-dialog-toggle")===this.id)return this.__lastTriggerEl=e,"toggle";if(e.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=e,"toggle"}return null}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0),this.addEventListener("keydown",this.__onKeydownTrap)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),this.removeEventListener("keydown",this.__onKeydownTrap),super.disconnectedCallback()}updated(t){if(t.has("open")){const e=t.get("open");this.__updateTriggersExpanded(),this.open&&!e?this.updateComplete.then(()=>{this.shadowRoot?.querySelector('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')?.focus?.()}):!this.open&&e&&this.__lastTriggerEl?.focus?.(),this.__toggleScrollLock(this.open)}t.has("icon")&&this.icon&&d(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([4,2]),import.meta.url)}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}__toggleScrollLock(t){if(this.inSb)return;const e=document.documentElement;e.style.overflow=t?"hidden":""}__setOpen(t){this.open=t,this.__fire(t?"open":"close")}__fire(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}__slotIsEmpty(){const t=this.shadowRoot?.querySelector("slot");return t?t.assignedElements({flatten:!0}).length===0:!0}renderHeader(t){const e=this.variant==="form"||this.variant==="floating";return a`
|
|
3
3
|
<div class="header">
|
|
4
4
|
<div class="title">
|
|
5
5
|
${this.icon?a`<md-icon class="dialog-icon">${this.icon}</md-icon>`:p}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../scb-checkbox/scb-checkbox.js","../scb-switch/scb-switch.js","../../vendor/preload-helper.js"])))=>i.map(i=>d[i]);
|
|
1
|
+
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../scb-checkbox/scb-checkbox.js","../scb-checkbox/scb-checkbox-group.js","../scb-switch/scb-switch.js","../../vendor/preload-helper.js"])))=>i.map(i=>d[i]);
|
|
2
2
|
import{_ as m}from"../../vendor/preload-helper.js";import{n as s,t as I,i as E,a as L,E as c,x as n}from"../../vendor/vendor.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 i=customElements.define.bind(customElements);customElements.define=function(e,d,l){try{customElements.get(e)||i(e,d,l)}catch(p){var o=String(p||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var T=Object.defineProperty,P=Object.getOwnPropertyDescriptor,V=t=>{throw TypeError(t)},r=(t,i,e,d)=>{for(var l=d>1?void 0:d?P(i,e):i,o=t.length-1,p;o>=0;o--)(p=t[o])&&(l=(d?p(i,e,l):p(l))||l);return d&&l&&T(i,e,l),l},x=(t,i,e)=>i.has(t)||V("Cannot "+e),v=(t,i,e)=>(x(t,i,"read from private field"),e?e.call(t):i.get(t)),g=(t,i,e)=>i.has(t)?V("Cannot add the same private member more than once"):i instanceof WeakSet?i.add(t):i.set(t,e),_=(t,i,e,d)=>(x(t,i,"write to private field"),i.set(t,e),e),$=(t,i,e)=>(x(t,i,"access private method"),e),f,y,b,u,w,k;let a=class extends E{constructor(){super(...arguments),g(this,u),this.type="text",this.href="",this.itemHref="",this.target="",this.disabled=!1,this.label="",this.supportingText="",this.overline="",this.leading=!1,this.leadingVariant="",this.leadingIcon="",this.avatarLabel="",this.avatarAlt="",this.avatarVariant="icon",this.avatarSrc="",this.imgHrefImage="",this.trailing=!1,this.trailingVariant="",this.trailingIcon="",this.density=0,this.noDivider=!1,g(this,f,!1),g(this,y,!1),g(this,b,!1),this.onRowClick=()=>{if(this.type==="link"&&(this.href||this.itemHref))return;const t=this.shadowRoot?.querySelector("scb-checkbox"),i=this.shadowRoot?.querySelector("scb-switch");t&&(t.checked=!t.checked),i&&(i.selected=!i.selected)},g(this,k,t=>{if(!t.defaultPrevented&&(t.key==="Enter"||t.key===" ")){if(this.type==="link"){const i=this.shadowRoot?.querySelector("a[href]");if(i){t.preventDefault(),i.click();return}}t.preventDefault(),this.onRowClick()}})}static get styles(){return L`
|
|
3
3
|
:host {
|
|
4
4
|
border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
|
|
@@ -141,4 +141,4 @@ import{_ as m}from"../../vendor/preload-helper.js";import{n as s,t as I,i as E,a
|
|
|
141
141
|
</div>
|
|
142
142
|
|
|
143
143
|
<md-focus-ring></md-focus-ring>
|
|
144
|
-
`}};f=new WeakMap;y=new WeakMap;b=new WeakMap;u=new WeakSet;w=async function(){const t=this.type==="link"&&(!this.trailing||this.trailingVariant==="icon");(this.leading&&this.leadingVariant==="icon"||this.trailing&&this.trailingVariant==="icon"||t)&&!v(this,f)&&(await m(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),_(this,f,!0)),this.trailing&&this.trailingVariant==="checkbox"&&!v(this,y)&&(await m(()=>import("../scb-checkbox/scb-checkbox.js"),__vite__mapDeps([2,1,0]),import.meta.url),_(this,y,!0)),this.trailing&&this.trailingVariant==="switch"&&!v(this,b)&&(await m(()=>import("../scb-switch/scb-switch.js"),__vite__mapDeps([
|
|
144
|
+
`}};f=new WeakMap;y=new WeakMap;b=new WeakMap;u=new WeakSet;w=async function(){const t=this.type==="link"&&(!this.trailing||this.trailingVariant==="icon");(this.leading&&this.leadingVariant==="icon"||this.trailing&&this.trailingVariant==="icon"||t)&&!v(this,f)&&(await m(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),_(this,f,!0)),this.trailing&&this.trailingVariant==="checkbox"&&!v(this,y)&&(await m(()=>import("../scb-checkbox/scb-checkbox.js"),__vite__mapDeps([2,1,0,3]),import.meta.url),_(this,y,!0)),this.trailing&&this.trailingVariant==="switch"&&!v(this,b)&&(await m(()=>import("../scb-switch/scb-switch.js"),__vite__mapDeps([4,5,1]),import.meta.url),_(this,b,!0))};k=new WeakMap;r([s({type:String,reflect:!0,attribute:"type"})],a.prototype,"type",2);r([s({type:String})],a.prototype,"href",2);r([s({type:String,attribute:"item-href"})],a.prototype,"itemHref",2);r([s({type:String,attribute:"target"})],a.prototype,"target",2);r([s({type:Boolean,attribute:"disabled"})],a.prototype,"disabled",2);r([s({type:String,reflect:!0})],a.prototype,"label",2);r([s({type:String,attribute:"supporting-text"})],a.prototype,"supportingText",2);r([s({type:String,attribute:"overline"})],a.prototype,"overline",2);r([s({type:Boolean})],a.prototype,"leading",2);r([s({type:String,attribute:"leading-variant",reflect:!0})],a.prototype,"leadingVariant",2);r([s({type:String,attribute:"leading-icon"})],a.prototype,"leadingIcon",2);r([s({type:String,attribute:"avatar-label"})],a.prototype,"avatarLabel",2);r([s({type:String,attribute:"avatar-alt"})],a.prototype,"avatarAlt",2);r([s({type:String,attribute:"avatar-variant"})],a.prototype,"avatarVariant",2);r([s({type:String,attribute:"avatar-src"})],a.prototype,"avatarSrc",2);r([s({type:String,reflect:!0,attribute:"img-href-image"})],a.prototype,"imgHrefImage",2);r([s({type:Boolean})],a.prototype,"trailing",2);r([s({type:String,attribute:"trailing-variant",reflect:!0})],a.prototype,"trailingVariant",2);r([s({type:String,attribute:"trailing-icon"})],a.prototype,"trailingIcon",2);r([s({type:Number,reflect:!0})],a.prototype,"density",2);r([s({type:Boolean,attribute:"no-divider",reflect:!0})],a.prototype,"noDivider",2);a=r([I("scb-list-item")],a);
|
|
@@ -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
|
}
|
|
@@ -93,7 +93,7 @@ let e = class extends v {
|
|
|
93
93
|
${this.supportingText ? l`<div class="supporting-text">${this.supportingText}</div>` : p}
|
|
94
94
|
</div>
|
|
95
95
|
|
|
96
|
-
<md-icon class="chevron">
|
|
96
|
+
<md-icon class="chevron">expand_more</md-icon>
|
|
97
97
|
</summary>
|
|
98
98
|
|
|
99
99
|
<div id=${t} class="scb-accordion-bottom" role="region" aria-labelledby=${i}>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css as x, LitElement as y, nothing as h, html as u } from "lit";
|
|
2
2
|
import { property as b, customElement as v } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/checkbox/checkbox.js";
|
|
4
|
+
import "./scb-checkbox-group.js";
|
|
4
5
|
var f = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (e, i, t, s) => {
|
|
5
6
|
for (var r = s > 1 ? void 0 : s ? k(i, t) : i, l = e.length - 1, n; l >= 0; l--)
|
|
6
7
|
(n = e[l]) && (r = (s ? n(i, t, r) : n(r)) || r);
|
|
@@ -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
|
+
};
|