scb-wc-test 0.1.100 → 0.1.101
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 +52 -48
- package/mvc/components/all.js +2 -0
- package/mvc/components/scb-calendar-card/scb-calendar-card.js +1 -1
- package/mvc/components/scb-select/scb-select-option.js +33 -0
- package/mvc/components/scb-select/scb-select.js +144 -0
- package/package.json +10 -2
- package/scb-calendar-card/scb-calendar-card.js +1 -1
- package/scb-select/scb-select-option.d.ts +14 -0
- package/scb-select/scb-select-option.js +72 -0
- package/scb-select/scb-select.d.ts +32 -0
- package/scb-select/scb-select.js +258 -0
- package/scb-wc-test.bundle.js +547 -372
package/all.js
CHANGED
|
@@ -52,6 +52,8 @@ import './mvc/components/scb-radio-button/scb-radio-group.js';
|
|
|
52
52
|
import './mvc/components/scb-search/scb-search.js';
|
|
53
53
|
import './mvc/components/scb-segmented-button/scb-segmented-button.js';
|
|
54
54
|
import './mvc/components/scb-segmented-button/scb-segmented-item.js';
|
|
55
|
+
import './mvc/components/scb-select/scb-select-option.js';
|
|
56
|
+
import './mvc/components/scb-select/scb-select.js';
|
|
55
57
|
import './mvc/components/scb-skeleton/scb-skeleton.js';
|
|
56
58
|
import './mvc/components/scb-snackbar/scb-snackbar.js';
|
|
57
59
|
import './mvc/components/scb-status-pill/scb-status-pill.js';
|
|
@@ -121,6 +123,8 @@ import './scb-radio-button/scb-radio-group.js';
|
|
|
121
123
|
import './scb-search/scb-search.js';
|
|
122
124
|
import './scb-segmented-button/scb-segmented-button.js';
|
|
123
125
|
import './scb-segmented-button/scb-segmented-item.js';
|
|
126
|
+
import './scb-select/scb-select-option.js';
|
|
127
|
+
import './scb-select/scb-select.js';
|
|
124
128
|
import './scb-skeleton/scb-skeleton.js';
|
|
125
129
|
import './scb-snackbar/scb-snackbar.js';
|
|
126
130
|
import './scb-status-pill/scb-status-pill.js';
|
package/index.d.ts
CHANGED
|
@@ -48,6 +48,8 @@ export * from './scb-radio-button/scb-radio-group';
|
|
|
48
48
|
export * from './scb-search/scb-search';
|
|
49
49
|
export * from './scb-segmented-button/scb-segmented-button';
|
|
50
50
|
export * from './scb-segmented-button/scb-segmented-item';
|
|
51
|
+
export * from './scb-select/scb-select-option';
|
|
52
|
+
export * from './scb-select/scb-select';
|
|
51
53
|
export * from './scb-skeleton/scb-skeleton';
|
|
52
54
|
export * from './scb-snackbar/scb-snackbar';
|
|
53
55
|
export * from './scb-status-pill/scb-status-pill';
|
package/index.js
CHANGED
|
@@ -5,7 +5,7 @@ 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";
|
|
8
|
-
import { ScbButton as
|
|
8
|
+
import { ScbButton as l } from "./scb-button/scb-button.js";
|
|
9
9
|
import { ScbCalendarCard as I } from "./scb-calendar-card/scb-calendar-card.js";
|
|
10
10
|
import { ScbCard as B } from "./scb-card/scb-card.js";
|
|
11
11
|
import { ScbCheckboxGroup as D } from "./scb-checkbox/scb-checkbox-group.js";
|
|
@@ -17,10 +17,10 @@ import { ScbDrawerItem as A } from "./scb-drawer/scb-drawer-item.js";
|
|
|
17
17
|
import { ScbDrawerSection as M } from "./scb-drawer/scb-drawer-section.js";
|
|
18
18
|
import { ScbDrawer as z } from "./scb-drawer/scb-drawer.js";
|
|
19
19
|
import { ScbSubDrawer as K } from "./scb-drawer/scb-sub-drawer.js";
|
|
20
|
-
import { ScbFactCardContent as
|
|
21
|
-
import { ScbFactCard as
|
|
22
|
-
import { ScbFooterSection as
|
|
23
|
-
import { ScbFooter as
|
|
20
|
+
import { ScbFactCardContent as O } from "./scb-fact-card/scb-fact-card-content.js";
|
|
21
|
+
import { ScbFactCard as V } from "./scb-fact-card/scb-fact-card.js";
|
|
22
|
+
import { ScbFooterSection as q } from "./scb-footer/scb-footer-section.js";
|
|
23
|
+
import { ScbFooter as J } from "./scb-footer/scb-footer.js";
|
|
24
24
|
import { ScbGridItem as W } from "./scb-grid/scb-grid-item.js";
|
|
25
25
|
import { ScbGrid as Y } from "./scb-grid/scb-grid.js";
|
|
26
26
|
import { ScbStack as _ } from "./scb-grid/scb-stack.js";
|
|
@@ -32,7 +32,7 @@ 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";
|
|
35
|
-
import { ScbLink as
|
|
35
|
+
import { ScbLink as lr } from "./scb-link/scb-link.js";
|
|
36
36
|
import { ScbListItem as Ir } from "./scb-list/scb-list-item.js";
|
|
37
37
|
import { ScbList as Br } from "./scb-list/scb-list.js";
|
|
38
38
|
import { ScbMenuItem as Dr } from "./scb-menu/scb-menu-item.js";
|
|
@@ -44,24 +44,26 @@ import { ScbProgressIndicator as Ar } from "./scb-progress-indicator/scb-progres
|
|
|
44
44
|
import { ScbProgressStep as Mr } from "./scb-progress-stepper/scb-progress-step.js";
|
|
45
45
|
import { ScbProgressStepper as zr } from "./scb-progress-stepper/scb-progress-stepper.js";
|
|
46
46
|
import { ScbRadioButton as Kr } from "./scb-radio-button/scb-radio-button.js";
|
|
47
|
-
import { ScbRadioGroup as
|
|
48
|
-
import { ScbSearch as
|
|
49
|
-
import { ScbSegmentedButton as
|
|
50
|
-
import { ScbSegmentedItem as
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
47
|
+
import { ScbRadioGroup as Or } from "./scb-radio-button/scb-radio-group.js";
|
|
48
|
+
import { ScbSearch as Vr } from "./scb-search/scb-search.js";
|
|
49
|
+
import { ScbSegmentedButton as qr } from "./scb-segmented-button/scb-segmented-button.js";
|
|
50
|
+
import { ScbSegmentedItem as Jr } from "./scb-segmented-button/scb-segmented-item.js";
|
|
51
|
+
import { ScbSelectOption as Wr } from "./scb-select/scb-select-option.js";
|
|
52
|
+
import { ScbSelect as Yr } from "./scb-select/scb-select.js";
|
|
53
|
+
import { ScbSkeleton as _r } from "./scb-skeleton/scb-skeleton.js";
|
|
54
|
+
import { ScbSnackbar as ro } from "./scb-snackbar/scb-snackbar.js";
|
|
55
|
+
import { ScbStatusPill as eo } from "./scb-status-pill/scb-status-pill.js";
|
|
56
|
+
import { ScbStep as co } from "./scb-stepper/scb-step.js";
|
|
57
|
+
import { ScbStepper as mo } from "./scb-stepper/scb-stepper.js";
|
|
58
|
+
import { ScbSwitch as bo } from "./scb-switch/scb-switch.js";
|
|
59
|
+
import { ScbPrimaryTab as fo } from "./scb-tabs/scb-primary-tab.js";
|
|
60
|
+
import { ScbSecondaryTab as io } from "./scb-tabs/scb-secondary-tab.js";
|
|
61
|
+
import { ScbTabs as uo } from "./scb-tabs/scb-tabs.js";
|
|
62
|
+
import { ScbTextField as Co } from "./scb-textfield/scb-textfield.js";
|
|
63
|
+
import { ScbTocItem as so } from "./scb-toc/scb-toc-item.js";
|
|
64
|
+
import { ScbToc as go } from "./scb-toc/scb-toc.js";
|
|
65
|
+
import { ScbTooltip as To } from "./scb-tooltip/scb-tooltip.js";
|
|
66
|
+
import { ScbViz as ko } from "./scb-viz/scb-viz.js";
|
|
65
67
|
export {
|
|
66
68
|
n as SCBBreadcrumb,
|
|
67
69
|
i as SCBBreadcrumbItem,
|
|
@@ -70,7 +72,7 @@ export {
|
|
|
70
72
|
m as ScbAppBar,
|
|
71
73
|
b as ScbAvatar,
|
|
72
74
|
f as ScbBadge,
|
|
73
|
-
|
|
75
|
+
l as ScbButton,
|
|
74
76
|
I as ScbCalendarCard,
|
|
75
77
|
B as ScbCard,
|
|
76
78
|
w as ScbCheckbox,
|
|
@@ -81,10 +83,10 @@ export {
|
|
|
81
83
|
z as ScbDrawer,
|
|
82
84
|
A as ScbDrawerItem,
|
|
83
85
|
M as ScbDrawerSection,
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
86
|
+
V as ScbFactCard,
|
|
87
|
+
O as ScbFactCardContent,
|
|
88
|
+
J as ScbFooter,
|
|
89
|
+
q as ScbFooterSection,
|
|
88
90
|
Y as ScbGrid,
|
|
89
91
|
W as ScbGridItem,
|
|
90
92
|
br as ScbHeader,
|
|
@@ -95,36 +97,38 @@ export {
|
|
|
95
97
|
fr as ScbHorizontalScroller,
|
|
96
98
|
ir as ScbIconButton,
|
|
97
99
|
nr as ScbKeyFigureCard,
|
|
98
|
-
|
|
100
|
+
lr as ScbLink,
|
|
99
101
|
Br as ScbList,
|
|
100
102
|
Ir as ScbListItem,
|
|
101
103
|
wr as ScbMenu,
|
|
102
104
|
Dr as ScbMenuItem,
|
|
103
105
|
Pr as ScbNotificationCard,
|
|
104
106
|
Gr as ScbPagination,
|
|
105
|
-
|
|
107
|
+
fo as ScbPrimaryTab,
|
|
106
108
|
Ar as ScbProgressIndicator,
|
|
107
109
|
Mr as ScbProgressStep,
|
|
108
110
|
zr as ScbProgressStepper,
|
|
109
111
|
Kr as ScbRadioButton,
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
112
|
+
Or as ScbRadioGroup,
|
|
113
|
+
Vr as ScbSearch,
|
|
114
|
+
io as ScbSecondaryTab,
|
|
115
|
+
qr as ScbSegmentedButton,
|
|
116
|
+
Jr as ScbSegmentedItem,
|
|
117
|
+
Yr as ScbSelect,
|
|
118
|
+
Wr as ScbSelectOption,
|
|
119
|
+
_r as ScbSkeleton,
|
|
120
|
+
ro as ScbSnackbar,
|
|
117
121
|
_ as ScbStack,
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
122
|
+
eo as ScbStatusPill,
|
|
123
|
+
co as ScbStep,
|
|
124
|
+
mo as ScbStepper,
|
|
121
125
|
K as ScbSubDrawer,
|
|
122
126
|
Fr as ScbSubMenu,
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
127
|
+
bo as ScbSwitch,
|
|
128
|
+
uo as ScbTabs,
|
|
129
|
+
Co as ScbTextField,
|
|
130
|
+
go as ScbToc,
|
|
131
|
+
so as ScbTocItem,
|
|
132
|
+
To as ScbTooltip,
|
|
133
|
+
ko as ScbViz
|
|
130
134
|
};
|
package/mvc/components/all.js
CHANGED
|
@@ -48,6 +48,8 @@ import './scb-radio-button/scb-radio-group.js';
|
|
|
48
48
|
import './scb-search/scb-search.js';
|
|
49
49
|
import './scb-segmented-button/scb-segmented-button.js';
|
|
50
50
|
import './scb-segmented-button/scb-segmented-item.js';
|
|
51
|
+
import './scb-select/scb-select.js';
|
|
52
|
+
import './scb-select/scb-select-option.js';
|
|
51
53
|
import './scb-skeleton/scb-skeleton.js';
|
|
52
54
|
import './scb-snackbar/scb-snackbar.js';
|
|
53
55
|
import './scb-status-pill/scb-status-pill.js';
|
|
@@ -147,7 +147,7 @@ import{_ as p}from"../../vendor/preload-helper.js";import{a as f,n as r,i as g,x
|
|
|
147
147
|
justify-content: center;
|
|
148
148
|
align-items: center;
|
|
149
149
|
gap: var(--spacing-spacing-2, 4px);
|
|
150
|
-
border-radius: var(--
|
|
150
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
151
151
|
background: var(--md-sys-color-surface-dim, #f9f8ef);
|
|
152
152
|
}
|
|
153
153
|
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import{a as h,n,i as p,x as l,t as u}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 o=customElements.define.bind(customElements);customElements.define=function(s,i,e){try{customElements.get(s)||o(s,i,e)}catch(r){var c=String(r||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var m=Object.defineProperty,y=Object.getOwnPropertyDescriptor,a=(d,o,s,i)=>{for(var e=i>1?void 0:i?y(o,s):o,c=d.length-1,r;c>=0;c--)(r=d[c])&&(e=(i?r(o,s,e):r(e))||e);return i&&e&&m(o,s,e),e};let t=class extends p{constructor(){super(...arguments),this.value="",this.disabled=!1,this.showCheckbox=!1,this.checked=!1,this.showRadio=!1}render(){return l`
|
|
2
|
+
<div tabindex="0" class="item ${this.checked?"checked":""}" value=${this.value} ?disabled=${this.disabled}>
|
|
3
|
+
<md-ripple></md-ripple>
|
|
4
|
+
${this.showCheckbox?l`<md-icon class="${this.checked?"checkbox-checked":""}">${this.checked?"check_box":"check_box_outline_blank"}</md-icon>`:null}
|
|
5
|
+
${this.showRadio?l`<md-icon class="${this.checked?"radio-checked":""}">${this.checked?"radio_button_checked":"radio_button_unchecked"}</md-icon>`:null}
|
|
6
|
+
<slot></slot>
|
|
7
|
+
<md-focus-ring inward></md-focus-ring>
|
|
8
|
+
</div>
|
|
9
|
+
`}};t.styles=h`
|
|
10
|
+
.item {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
padding: var(--spacing-3) var(--spacing-5);
|
|
14
|
+
gap: var(--spacing-4);
|
|
15
|
+
min-height: 40px;
|
|
16
|
+
position: relative;
|
|
17
|
+
font-size: var(--md-sys-typescale-body-large-size);
|
|
18
|
+
line-height: var(--md-sys-typescale-body-large-line-height);
|
|
19
|
+
letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
20
|
+
}
|
|
21
|
+
.item:focus-within {
|
|
22
|
+
outline: none;
|
|
23
|
+
}
|
|
24
|
+
md-focus-ring {
|
|
25
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
26
|
+
}
|
|
27
|
+
.item.checked {
|
|
28
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
29
|
+
}
|
|
30
|
+
md-icon.radio-checked{
|
|
31
|
+
color: var(--md-sys-color-primary);
|
|
32
|
+
}
|
|
33
|
+
`;a([n({type:String})],t.prototype,"value",2);a([n({type:Boolean,reflect:!0})],t.prototype,"disabled",2);a([n({type:Boolean})],t.prototype,"showCheckbox",2);a([n({type:Boolean})],t.prototype,"checked",2);a([n({type:Boolean})],t.prototype,"showRadio",2);t=a([u("scb-select-option")],t);
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import{a as p,n as r,i as h,x as d,t as u}from"../../vendor/vendor.js";import"./scb-select-option.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 s=customElements.define.bind(customElements);customElements.define=function(e,i,o){try{customElements.get(e)||s(e,i,o)}catch(c){var a=String(c||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var v=Object.defineProperty,b=Object.getOwnPropertyDescriptor,l=(t,s,e,i)=>{for(var o=i>1?void 0:i?b(s,e):s,a=t.length-1,c;a>=0;a--)(c=t[a])&&(o=(i?c(s,e,o):c(o))||o);return i&&o&&v(s,e,o),o};let n=class extends h{constructor(){super(...arguments),this.focusedIndex=-1,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.open=!1,this.label="",this.name="",this.placeholder="",this.supportingText="",this.withRadiobuttons=!1,this._onDocumentClick=t=>{if(!this.open)return;t.composedPath().includes(this)||(this.open=!1,this.removeAttribute("open"))},this._onSlotClick=t=>{const s=this.shadowRoot?.querySelector("slot");if(!s)return;const e=s.assignedElements({flatten:!0}).filter(a=>a.tagName.toLowerCase()==="scb-select-option"),i=t.composedPath(),o=e.find(a=>i.includes(a));o&&(this._selectOption(o),t.stopPropagation())},this._onKeyDown=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._toggleOpen())},this._onOptionKeyDown=t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();const s=this.shadowRoot?.querySelector("slot");if(!s)return;const e=s.assignedElements({flatten:!0}).filter(a=>a.tagName.toLowerCase()==="scb-select-option"),i=t.composedPath(),o=e.find(a=>i.includes(a));o&&this._selectOption(o)}}}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this._onDocumentClick)}disconnectedCallback(){document.removeEventListener("mousedown",this._onDocumentClick),super.disconnectedCallback()}_toggleOpen(){this.disabled||(this.open=!this.open,this.open?(this.focusedIndex=0,this.requestUpdate()):this.focusedIndex=-1)}_selectOption(t){t.disabled||(this.variant==="multi-select"?(this.values.indexOf(t.value)>-1?this.values=this.values.filter(e=>e!==t.value):this.values=[...this.values,t.value],this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values}}))):this.variant==="single-select"&&this.withRadiobuttons?(this.value=t.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))):(this.value=t.value,this.open=!1,this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value}}))),this._updateOptionsChecked(),this.requestUpdate())}_getSelectedLabel(){const t=this.shadowRoot?.querySelector("slot");if(!t)return"";const s=t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-select-option");if(this.variant==="multi-select"){const e=s.filter(i=>this.values.includes(i.value));return e&&e.length>0?e.map(i=>i.textContent).join(", "):""}else{const e=s.find(i=>i.value===this.value);return e?e.textContent:""}}firstUpdated(){this._updateOptionsChecked()}updated(){this._updateOptionsChecked()}_updateOptionsChecked(){const t=this.shadowRoot?.querySelector("slot");if(!t)return;t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-select-option").forEach(e=>{this.variant==="multi-select"?(e.showCheckbox=!0,e.checked=this.values.includes(e.value),e.showRadio=!1):(e.showCheckbox=!1,e.checked=this.value===e.value,this.withRadiobuttons&&(e.showRadio=!0))})}render(){return d`
|
|
2
|
+
${this.label?d`
|
|
3
|
+
<label class="select-label">${this.label}</label>
|
|
4
|
+
`:""}
|
|
5
|
+
${this.supportingText?d`
|
|
6
|
+
<div class="select-sub-label">${this.supportingText}</div>
|
|
7
|
+
`:""}
|
|
8
|
+
<div class="select">
|
|
9
|
+
<div class="selected-value-container" tabindex="0" @click="${this._toggleOpen}" @keydown="${this._onKeyDown}">
|
|
10
|
+
<md-focus-ring inward></md-focus-ring>
|
|
11
|
+
<md-ripple></md-ripple>
|
|
12
|
+
<input tabindex="-1" class="selected-value" type="text" readonly .value="${this._getSelectedLabel()||this.placeholder}" name="${this.name}" />
|
|
13
|
+
<span class="arrow">
|
|
14
|
+
<md-icon>${this.open?"expand_less":"expand_more"}</md-icon>
|
|
15
|
+
</span>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="options" @click=${this._onSlotClick} @keydown=${this._onOptionKeyDown}>
|
|
18
|
+
<slot @slotchange="${()=>{this.requestUpdate()}}"></slot>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
`}};n.styles=p`
|
|
22
|
+
:host {
|
|
23
|
+
display: block;
|
|
24
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
25
|
+
font-family: var(--brand-font);
|
|
26
|
+
--scb-select-max-width: 400px;
|
|
27
|
+
max-width: var(--scb-select-max-width);
|
|
28
|
+
width: 100%;
|
|
29
|
+
}
|
|
30
|
+
:host([disabled]) {
|
|
31
|
+
pointer-events: none;
|
|
32
|
+
opacity: 0.38;
|
|
33
|
+
}
|
|
34
|
+
.select {
|
|
35
|
+
position: relative;
|
|
36
|
+
|
|
37
|
+
background: var(--md-sys-color-surface);
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
40
|
+
border: 1px solid var(--md-sys-color-outline);
|
|
41
|
+
outline: 1px solid transparent;
|
|
42
|
+
transition: border 0.2s;
|
|
43
|
+
|
|
44
|
+
}
|
|
45
|
+
:host .select:hover, :host([open]) .select {
|
|
46
|
+
outline: 1px solid var(--md-sys-color-outline);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.selected-value {
|
|
50
|
+
flex: 1 1 auto;
|
|
51
|
+
min-width: 0;
|
|
52
|
+
overflow: hidden;
|
|
53
|
+
text-overflow: ellipsis;
|
|
54
|
+
white-space: nowrap;
|
|
55
|
+
display: block;
|
|
56
|
+
border: none;
|
|
57
|
+
background: transparent;
|
|
58
|
+
font: inherit;
|
|
59
|
+
color: inherit;
|
|
60
|
+
padding: 0;
|
|
61
|
+
outline: none;
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
font-size: var(--md-sys-typescale-body-large-size);
|
|
64
|
+
line-height: var(--md-sys-typescale-body-large-line-height);
|
|
65
|
+
letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
66
|
+
}
|
|
67
|
+
.selected-value-container:focus-within {
|
|
68
|
+
outline: none;
|
|
69
|
+
}
|
|
70
|
+
.select-label{
|
|
71
|
+
font-size: var(--md-sys-typescale-label-large-size);
|
|
72
|
+
font-weight: var(--weight-semibold);
|
|
73
|
+
line-height: var(--md-sys-typescale-label-large-line-height);
|
|
74
|
+
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
75
|
+
}
|
|
76
|
+
.select-sub-label{
|
|
77
|
+
font-size: var(--md-sys-typescale-body-large-size);
|
|
78
|
+
line-height: var(--md-sys-typescale-body-large-line-height);
|
|
79
|
+
letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
80
|
+
}
|
|
81
|
+
md-focus-ring {
|
|
82
|
+
position:absolute;
|
|
83
|
+
border-radius: 8px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.arrow {
|
|
87
|
+
position: absolute;
|
|
88
|
+
right: 8px;
|
|
89
|
+
pointer-events: none;
|
|
90
|
+
}
|
|
91
|
+
.options {
|
|
92
|
+
position: absolute;
|
|
93
|
+
left: 0;
|
|
94
|
+
right: 0;
|
|
95
|
+
top: calc(100% + 3px);
|
|
96
|
+
z-index: 10;
|
|
97
|
+
max-height: 0;
|
|
98
|
+
overflow-y: hidden;
|
|
99
|
+
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
100
|
+
visibility: hidden;
|
|
101
|
+
opacity: 0;
|
|
102
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
103
|
+
background: var(--md-sys-color-surface);
|
|
104
|
+
padding: 8px 0;
|
|
105
|
+
/* Drop Shadow/2 */
|
|
106
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
|
|
107
|
+
}
|
|
108
|
+
.options::-webkit-scrollbar {
|
|
109
|
+
width: 12px;
|
|
110
|
+
background: var(--md-sys-color-surface);
|
|
111
|
+
border-radius: 8px;
|
|
112
|
+
}
|
|
113
|
+
.options::-webkit-scrollbar-thumb {
|
|
114
|
+
background: var(--md-sys-color-outline);
|
|
115
|
+
border-radius: 8px;
|
|
116
|
+
border: 4px solid var(--md-sys-color-surface);
|
|
117
|
+
|
|
118
|
+
}
|
|
119
|
+
.options::-webkit-scrollbar-track {
|
|
120
|
+
background: var(--md-sys-color-surface);
|
|
121
|
+
border-radius: 8px;
|
|
122
|
+
}
|
|
123
|
+
:host([open]) .options {
|
|
124
|
+
max-height: 240px;
|
|
125
|
+
overflow-y: auto;
|
|
126
|
+
visibility: visible;
|
|
127
|
+
opacity: 1;
|
|
128
|
+
}
|
|
129
|
+
.option[aria-selected="true"] {
|
|
130
|
+
background: #e6f0fa;
|
|
131
|
+
}
|
|
132
|
+
.option[aria-disabled="true"] {
|
|
133
|
+
color: #aaa;
|
|
134
|
+
pointer-events: none;
|
|
135
|
+
}
|
|
136
|
+
.selected-value-container {
|
|
137
|
+
height: 100%;
|
|
138
|
+
position: relative;
|
|
139
|
+
display: flex;
|
|
140
|
+
align-items: center;
|
|
141
|
+
padding: var(--spacing-6) 52px var(--spacing-6) var(--spacing-5);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
`;l([r({type:String})],n.prototype,"variant",2);l([r({type:String})],n.prototype,"value",2);l([r({type:Array})],n.prototype,"values",2);l([r({type:Boolean})],n.prototype,"disabled",2);l([r({type:Boolean,reflect:!0})],n.prototype,"open",2);l([r({type:String})],n.prototype,"label",2);l([r({type:String})],n.prototype,"name",2);l([r({type:String})],n.prototype,"placeholder",2);l([r({type:String,attribute:"supporting-text"})],n.prototype,"supportingText",2);l([r({type:Boolean,attribute:"with-radiobuttons"})],n.prototype,"withRadiobuttons",2);n=l([u("scb-select")],n);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.101",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -271,6 +271,14 @@
|
|
|
271
271
|
"import": "./scb-segmented-button/scb-segmented-item.js",
|
|
272
272
|
"require": "./scb-segmented-button/scb-segmented-item.js"
|
|
273
273
|
},
|
|
274
|
+
"./scb-select": {
|
|
275
|
+
"import": "./scb-select/scb-select.js",
|
|
276
|
+
"require": "./scb-select/scb-select.js"
|
|
277
|
+
},
|
|
278
|
+
"./scb-select/scb-select-option": {
|
|
279
|
+
"import": "./scb-select/scb-select-option.js",
|
|
280
|
+
"require": "./scb-select/scb-select-option.js"
|
|
281
|
+
},
|
|
274
282
|
"./scb-skeleton": {
|
|
275
283
|
"import": "./scb-skeleton/scb-skeleton.js",
|
|
276
284
|
"require": "./scb-skeleton/scb-skeleton.js"
|
|
@@ -329,5 +337,5 @@
|
|
|
329
337
|
},
|
|
330
338
|
"./mvc/*": "./mvc/*"
|
|
331
339
|
},
|
|
332
|
-
"buildHash": "
|
|
340
|
+
"buildHash": "13205C9B7EECF792B98794EEF302F0C5CC56163028269B5B88C74C3ADD1608DD"
|
|
333
341
|
}
|
|
@@ -182,7 +182,7 @@ i.styles = m`
|
|
|
182
182
|
justify-content: center;
|
|
183
183
|
align-items: center;
|
|
184
184
|
gap: var(--spacing-spacing-2, 4px);
|
|
185
|
-
border-radius: var(--
|
|
185
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
186
186
|
background: var(--md-sys-color-surface-dim, #f9f8ef);
|
|
187
187
|
}
|
|
188
188
|
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Option-element för scb-select.
|
|
4
|
+
* @slot - Texten som visas i optionen
|
|
5
|
+
*/
|
|
6
|
+
export declare class ScbSelectOption extends LitElement {
|
|
7
|
+
value: string;
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
showCheckbox: boolean;
|
|
10
|
+
checked: boolean;
|
|
11
|
+
showRadio: boolean;
|
|
12
|
+
static styles: import('lit').CSSResult;
|
|
13
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
14
|
+
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { css as h, LitElement as p, html as d } from "lit";
|
|
2
|
+
import { property as s, customElement as m } from "lit/decorators.js";
|
|
3
|
+
import "@material/web/icon/icon.js";
|
|
4
|
+
import "@material/web/ripple/ripple.js";
|
|
5
|
+
import "@material/web/focus/md-focus-ring.js";
|
|
6
|
+
var y = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (n, i, r, c) => {
|
|
7
|
+
for (var o = c > 1 ? void 0 : c ? u(i, r) : i, a = n.length - 1, l; a >= 0; a--)
|
|
8
|
+
(l = n[a]) && (o = (c ? l(i, r, o) : l(o)) || o);
|
|
9
|
+
return c && o && y(i, r, o), o;
|
|
10
|
+
};
|
|
11
|
+
let e = class extends p {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments), this.value = "", this.disabled = !1, this.showCheckbox = !1, this.checked = !1, this.showRadio = !1;
|
|
14
|
+
}
|
|
15
|
+
render() {
|
|
16
|
+
return d`
|
|
17
|
+
<div tabindex="0" class="item ${this.checked ? "checked" : ""}" value=${this.value} ?disabled=${this.disabled}>
|
|
18
|
+
<md-ripple></md-ripple>
|
|
19
|
+
${this.showCheckbox ? d`<md-icon class="${this.checked ? "checkbox-checked" : ""}">${this.checked ? "check_box" : "check_box_outline_blank"}</md-icon>` : null}
|
|
20
|
+
${this.showRadio ? d`<md-icon class="${this.checked ? "radio-checked" : ""}">${this.checked ? "radio_button_checked" : "radio_button_unchecked"}</md-icon>` : null}
|
|
21
|
+
<slot></slot>
|
|
22
|
+
<md-focus-ring inward></md-focus-ring>
|
|
23
|
+
</div>
|
|
24
|
+
`;
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
e.styles = h`
|
|
28
|
+
.item {
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
padding: var(--spacing-3) var(--spacing-5);
|
|
32
|
+
gap: var(--spacing-4);
|
|
33
|
+
min-height: 40px;
|
|
34
|
+
position: relative;
|
|
35
|
+
font-size: var(--md-sys-typescale-body-large-size);
|
|
36
|
+
line-height: var(--md-sys-typescale-body-large-line-height);
|
|
37
|
+
letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
38
|
+
}
|
|
39
|
+
.item:focus-within {
|
|
40
|
+
outline: none;
|
|
41
|
+
}
|
|
42
|
+
md-focus-ring {
|
|
43
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
44
|
+
}
|
|
45
|
+
.item.checked {
|
|
46
|
+
background-color: var(--md-sys-color-secondary-container);
|
|
47
|
+
}
|
|
48
|
+
md-icon.radio-checked{
|
|
49
|
+
color: var(--md-sys-color-primary);
|
|
50
|
+
}
|
|
51
|
+
`;
|
|
52
|
+
t([
|
|
53
|
+
s({ type: String })
|
|
54
|
+
], e.prototype, "value", 2);
|
|
55
|
+
t([
|
|
56
|
+
s({ type: Boolean, reflect: !0 })
|
|
57
|
+
], e.prototype, "disabled", 2);
|
|
58
|
+
t([
|
|
59
|
+
s({ type: Boolean })
|
|
60
|
+
], e.prototype, "showCheckbox", 2);
|
|
61
|
+
t([
|
|
62
|
+
s({ type: Boolean })
|
|
63
|
+
], e.prototype, "checked", 2);
|
|
64
|
+
t([
|
|
65
|
+
s({ type: Boolean })
|
|
66
|
+
], e.prototype, "showRadio", 2);
|
|
67
|
+
e = t([
|
|
68
|
+
m("scb-select-option")
|
|
69
|
+
], e);
|
|
70
|
+
export {
|
|
71
|
+
e as ScbSelectOption
|
|
72
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Select-komponent med slot för scb-select-option.
|
|
4
|
+
* @slot - Alternativ (scb-select-option)
|
|
5
|
+
*/
|
|
6
|
+
export declare class ScbSelect extends LitElement {
|
|
7
|
+
focusedIndex: number;
|
|
8
|
+
variant: 'single-select' | 'multi-select';
|
|
9
|
+
value: string;
|
|
10
|
+
values: string[];
|
|
11
|
+
disabled: boolean;
|
|
12
|
+
open: boolean;
|
|
13
|
+
label: string;
|
|
14
|
+
name: string;
|
|
15
|
+
placeholder: string;
|
|
16
|
+
supportingText: string;
|
|
17
|
+
withRadiobuttons: boolean;
|
|
18
|
+
static styles: import('lit').CSSResult;
|
|
19
|
+
connectedCallback(): void;
|
|
20
|
+
disconnectedCallback(): void;
|
|
21
|
+
private _onDocumentClick;
|
|
22
|
+
private _toggleOpen;
|
|
23
|
+
private _selectOption;
|
|
24
|
+
private _onSlotClick;
|
|
25
|
+
private _getSelectedLabel;
|
|
26
|
+
firstUpdated(): void;
|
|
27
|
+
updated(): void;
|
|
28
|
+
private _updateOptionsChecked;
|
|
29
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
30
|
+
private _onKeyDown;
|
|
31
|
+
private _onOptionKeyDown;
|
|
32
|
+
}
|