scb-wc-test 0.1.263 → 0.1.264
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mvc/components/scb-select/scb-select.js +32 -17
- package/package.json +2 -2
- package/scb-select/scb-select.js +69 -54
- package/scb-wc-test.bundle.js +28 -13
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as d,n,i as h,j as
|
|
1
|
+
import{a as d,n,i as h,j as b,x as p,t as g}from"../../vendor/vendor.js";import"./scb-select-option.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(t,i,l){try{customElements.get(t)||s(t,i,l)}catch(c){var r=String(c||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(e,s,t,i)=>{for(var l=i>1?void 0:i?m(s,t):s,r=e.length-1,c;r>=0;r--)(c=e[r])&&(l=(i?c(s,t,l):c(l))||l);return i&&l&&u(s,t,l),l};let a=class extends h{constructor(){super(),this._optionsObserver=null,this._internals=null,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.size="large",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.zIndex=void 0,this._onDocumentClick=e=>{if(!this.open)return;e.composedPath().includes(this)||(this.open=!1,this.removeAttribute("open"))},this._onSlotClick=e=>{const s=this.shadowRoot?.querySelector("slot");if(!s)return;const t=s.assignedElements({flatten:!0}).filter(r=>r.tagName.toLowerCase()==="scb-select-option"),i=e.composedPath(),l=t.find(r=>i.includes(r));l&&(this._selectOption(l),e.stopPropagation())},this._onKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._toggleOpen())},this._onOptionKeyDown=e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();const s=this.shadowRoot?.querySelector("slot");if(!s)return;const t=s.assignedElements({flatten:!0}).filter(r=>r.tagName.toLowerCase()==="scb-select-option"),i=e.composedPath(),l=t.find(r=>i.includes(r));l&&this._selectOption(l)}},"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this._onDocumentClick),this._optionsObserver=new MutationObserver(()=>{this.requestUpdate()}),this._optionsObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["label","value","disabled"]})}disconnectedCallback(){document.removeEventListener("mousedown",this._onDocumentClick),this._optionsObserver?.disconnect(),this._optionsObserver=null,super.disconnectedCallback()}_getMultiValues(){return Array.isArray(this.values)&&this.values.length>0?this.values:this.value?this.value.split(",").map(e=>e.trim()).filter(Boolean):[]}_mapSpacingToken(e){if(!e)return;const s=String(e).trim();if(s)return/^\d+$/.test(s)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(s,10)))})`:s}_applySpacing(){const e=this._mapSpacingToken(this.spacing),s=this._mapSpacingToken(this.spacingTop)??e,t=this._mapSpacingToken(this.spacingBottom)??e,i=this._mapSpacingToken(this.spacingLeft),l=this._mapSpacingToken(this.spacingRight);s?this.style.setProperty("--scb-select-spacing-block-start",s):this.style.removeProperty("--scb-select-spacing-block-start"),t?this.style.setProperty("--scb-select-spacing-block-end",t):this.style.removeProperty("--scb-select-spacing-block-end"),i?this.style.setProperty("--scb-select-spacing-inline-start",i):this.style.removeProperty("--scb-select-spacing-inline-start"),l?this.style.setProperty("--scb-select-spacing-inline-end",l):this.style.removeProperty("--scb-select-spacing-inline-end")}_toggleOpen(){this.disabled||(this.open=!this.open,this.open?(this.focusedIndex=0,this.requestUpdate()):this.focusedIndex=-1)}_selectOption(e){if(!e.disabled){if(this.variant==="multi-select"){const s=this._getMultiValues();s.indexOf(e.value)>-1?this.values=s.filter(i=>i!==e.value):this.values=[...s,e.value],this.value=this.values.join(","),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0}))}else this.variant==="single-select"&&this.withRadiobuttons?(this.value=e.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):(this.value=e.value,this.open=!1,this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})));this._updateOptionsChecked(),this.requestUpdate()}}_getSelectedLabel(){const e=this.shadowRoot?.querySelector("slot");if(!e)return"";const s=e.assignedElements({flatten:!0}).filter(t=>t.tagName.toLowerCase()==="scb-select-option");if(this.variant==="multi-select"){const t=this._getMultiValues(),i=s.filter(l=>t.includes(l.value));return i&&i.length>0?i.map(l=>l.label).join(", "):""}else{const t=s.find(i=>i.value===this.value);return t?t.label:""}}firstUpdated(){this._updateOptionsChecked(),this._internals&&this._internals.setFormValue(this.value),this._applySpacing()}updated(e){this._updateOptionsChecked(),this._internals&&(this.variant==="multi-select"?this._internals.setFormValue(this._getMultiValues().join(",")):this._internals.setFormValue(this.value)),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&this._applySpacing()}_updateOptionsChecked(){const e=this.shadowRoot?.querySelector("slot");if(!e)return;e.assignedElements({flatten:!0}).filter(t=>t.tagName.toLowerCase()==="scb-select-option").forEach(t=>{if(this.variant==="multi-select"){const i=this._getMultiValues();t.showCheckbox=!0,t.checked=i.includes(t.value),t.showRadio=!1}else t.showCheckbox=!1,t.checked=this.value===t.value,this.withRadiobuttons&&(t.showRadio=!0)})}render(){return p`
|
|
2
2
|
${this.label||this.supportingText?p`
|
|
3
3
|
<label class="select-label" id="scb-select-label-${this.name}">
|
|
4
4
|
${this.label?p`
|
|
@@ -29,16 +29,27 @@ import{a as d,n,i as h,j as u,x as p,t as m}from"../../vendor/vendor.js";import"
|
|
|
29
29
|
<md-icon>${this.open?"keyboard_arrow_up":"keyboard_arrow_down"}</md-icon>
|
|
30
30
|
</span>
|
|
31
31
|
</div>
|
|
32
|
-
<div class="options" style=${
|
|
32
|
+
<div class="options" style=${b(this.zIndex?`z-index: ${this.zIndex};`:void 0)} @click=${this._onSlotClick} @keydown=${this._onOptionKeyDown}>
|
|
33
33
|
<slot @slotchange="${()=>{this.requestUpdate()}}"></slot>
|
|
34
34
|
</div>
|
|
35
35
|
</div>
|
|
36
|
-
`}};
|
|
36
|
+
`}};a.formAssociated=!0;a.styles=d`
|
|
37
37
|
:host {
|
|
38
38
|
display: block;
|
|
39
39
|
color: var(--md-sys-color-on-surface-variant);
|
|
40
40
|
font-family: var(--brand-font);
|
|
41
41
|
--scb-select-max-width: 400px;
|
|
42
|
+
--scb-select-control-min-height: 56px;
|
|
43
|
+
--scb-select-control-padding-x: var(--spacing-5);
|
|
44
|
+
--scb-select-control-trailing-reserved: 52px;
|
|
45
|
+
--scb-select-option-padding-y: var(--spacing-3);
|
|
46
|
+
--scb-select-option-padding-x: var(--spacing-5);
|
|
47
|
+
--scb-select-option-gap: var(--spacing-4);
|
|
48
|
+
--scb-select-option-min-height: 56px;
|
|
49
|
+
--scb-select-option-font-size: var(--md-sys-typescale-body-large-size);
|
|
50
|
+
--scb-select-option-line-height: var(--md-sys-typescale-body-large-line-height);
|
|
51
|
+
--scb-select-option-letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
52
|
+
--scb-select-option-icon-size: var(--icon-size-medium, 24px);
|
|
42
53
|
max-width: var(--scb-select-max-width);
|
|
43
54
|
width: 100%;
|
|
44
55
|
margin-block-start: var(--scb-select-spacing-block-start, 0);
|
|
@@ -51,10 +62,13 @@ import{a as d,n,i as h,j as u,x as p,t as m}from"../../vendor/vendor.js";import"
|
|
|
51
62
|
opacity: 0.38;
|
|
52
63
|
}
|
|
53
64
|
:host([size='medium']) {
|
|
54
|
-
--scb-select-
|
|
65
|
+
--scb-select-control-min-height: 48px;
|
|
66
|
+
--scb-select-control-padding-x: var(--spacing-4);
|
|
67
|
+
--scb-select-control-trailing-reserved: 52px;
|
|
68
|
+
--scb-select-option-padding-y: var(--spacing-3);
|
|
55
69
|
--scb-select-option-padding-x: var(--spacing-4);
|
|
56
70
|
--scb-select-option-gap: var(--spacing-3);
|
|
57
|
-
--scb-select-option-min-height:
|
|
71
|
+
--scb-select-option-min-height: 48px;
|
|
58
72
|
|
|
59
73
|
--scb-select-option-font-size: var(--md-sys-typescale-body-medium-size);
|
|
60
74
|
--scb-select-option-line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
@@ -62,6 +76,9 @@ import{a as d,n,i as h,j as u,x as p,t as m}from"../../vendor/vendor.js";import"
|
|
|
62
76
|
--scb-select-option-icon-size: var(--icon-size-small, 20px);
|
|
63
77
|
}
|
|
64
78
|
:host([size='small']) {
|
|
79
|
+
--scb-select-control-min-height: 40px;
|
|
80
|
+
--scb-select-control-padding-x: var(--spacing-4);
|
|
81
|
+
--scb-select-control-trailing-reserved: 52px;
|
|
65
82
|
--scb-select-option-padding-y: var(--spacing-2);
|
|
66
83
|
--scb-select-option-padding-x: var(--spacing-4);
|
|
67
84
|
--scb-select-option-gap: var(--spacing-3);
|
|
@@ -73,6 +90,9 @@ import{a as d,n,i as h,j as u,x as p,t as m}from"../../vendor/vendor.js";import"
|
|
|
73
90
|
--scb-select-option-icon-size: var(--icon-size-small, 20px);
|
|
74
91
|
}
|
|
75
92
|
:host([size='extra-small']) {
|
|
93
|
+
--scb-select-control-min-height: 32px;
|
|
94
|
+
--scb-select-control-padding-x: var(--spacing-3);
|
|
95
|
+
--scb-select-control-trailing-reserved: 44px;
|
|
76
96
|
--scb-select-option-padding-y: var(--spacing-2);
|
|
77
97
|
--scb-select-option-padding-x: var(--spacing-3);
|
|
78
98
|
--scb-select-option-gap: var(--spacing-2);
|
|
@@ -92,6 +112,7 @@ import{a as d,n,i as h,j as u,x as p,t as m}from"../../vendor/vendor.js";import"
|
|
|
92
112
|
border: 1px solid var(--md-sys-color-outline);
|
|
93
113
|
outline: 1px solid transparent;
|
|
94
114
|
transition: border 0.2s;
|
|
115
|
+
box-sizing: border-box;
|
|
95
116
|
|
|
96
117
|
}
|
|
97
118
|
:host .select:hover, :host([open]) .select {
|
|
@@ -187,7 +208,9 @@ import{a as d,n,i as h,j as u,x as p,t as m}from"../../vendor/vendor.js";import"
|
|
|
187
208
|
|
|
188
209
|
.arrow {
|
|
189
210
|
position: absolute;
|
|
211
|
+
top: 50%;
|
|
190
212
|
right: 8px;
|
|
213
|
+
transform: translateY(-50%);
|
|
191
214
|
pointer-events: none;
|
|
192
215
|
}
|
|
193
216
|
.options {
|
|
@@ -236,20 +259,12 @@ import{a as d,n,i as h,j as u,x as p,t as m}from"../../vendor/vendor.js";import"
|
|
|
236
259
|
pointer-events: none;
|
|
237
260
|
}
|
|
238
261
|
.selected-value-container {
|
|
239
|
-
height: 100%;
|
|
240
262
|
position: relative;
|
|
241
263
|
display: flex;
|
|
242
264
|
align-items: center;
|
|
243
|
-
|
|
265
|
+
min-height: var(--scb-select-control-min-height);
|
|
266
|
+
box-sizing: border-box;
|
|
267
|
+
padding: 0 var(--scb-select-control-trailing-reserved) 0 var(--scb-select-control-padding-x);
|
|
244
268
|
}
|
|
245
|
-
:host([size='medium']) .selected-value-container {
|
|
246
|
-
padding: var(--spacing-5) 52px var(--spacing-5) var(--spacing-4);
|
|
247
|
-
}
|
|
248
|
-
:host([size='small']) .selected-value-container {
|
|
249
|
-
padding: var(--spacing-4) 52px var(--spacing-4) var(--spacing-4);
|
|
250
|
-
}
|
|
251
|
-
:host([size='extra-small']) .selected-value-container {
|
|
252
|
-
padding: var(--spacing-3) 44px var(--spacing-3) var(--spacing-3);
|
|
253
|
-
}
|
|
254
269
|
|
|
255
|
-
`;o([n({type:String})],
|
|
270
|
+
`;o([n({type:String})],a.prototype,"variant",2);o([n({type:String})],a.prototype,"value",2);o([n({type:Array})],a.prototype,"values",2);o([n({type:Boolean})],a.prototype,"disabled",2);o([n({type:Boolean,reflect:!0})],a.prototype,"open",2);o([n({type:String})],a.prototype,"label",2);o([n({type:String})],a.prototype,"name",2);o([n({type:String})],a.prototype,"placeholder",2);o([n({type:String,attribute:"supporting-text"})],a.prototype,"supportingText",2);o([n({type:Boolean,attribute:"with-radiobuttons"})],a.prototype,"withRadiobuttons",2);o([n({type:String,reflect:!0})],a.prototype,"size",2);o([n({type:String,reflect:!0})],a.prototype,"spacing",2);o([n({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",2);o([n({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",2);o([n({type:String,attribute:"spacing-left",reflect:!0})],a.prototype,"spacingLeft",2);o([n({type:String,attribute:"spacing-right",reflect:!0})],a.prototype,"spacingRight",2);o([n({type:String,attribute:"z-index"})],a.prototype,"zIndex",2);a=o([g("scb-select")],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.264",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -386,5 +386,5 @@
|
|
|
386
386
|
},
|
|
387
387
|
"./mvc/*": "./mvc/*"
|
|
388
388
|
},
|
|
389
|
-
"buildHash": "
|
|
389
|
+
"buildHash": "083F237B6E2D0269863F3AC855222A50E005336667A39DEED5F391A2DA101A83"
|
|
390
390
|
}
|
package/scb-select/scb-select.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { css as d, LitElement as h, html as p } from "lit";
|
|
2
|
-
import { ifDefined as
|
|
3
|
-
import { property as n, customElement as
|
|
2
|
+
import { ifDefined as b } from "lit/directives/if-defined.js";
|
|
3
|
+
import { property as n, customElement as m } from "lit/decorators.js";
|
|
4
4
|
import "./scb-select-option.js";
|
|
5
5
|
import "@material/web/focus/md-focus-ring.js";
|
|
6
|
-
var
|
|
7
|
-
for (var i = t > 1 ? void 0 : t ?
|
|
8
|
-
(c = e[r]) && (i = (t ? c(s,
|
|
9
|
-
return t && i &&
|
|
6
|
+
var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, s, a, t) => {
|
|
7
|
+
for (var i = t > 1 ? void 0 : t ? y(s, a) : s, r = e.length - 1, c; r >= 0; r--)
|
|
8
|
+
(c = e[r]) && (i = (t ? c(s, a, i) : c(i)) || i);
|
|
9
|
+
return t && i && g(s, a, i), i;
|
|
10
10
|
};
|
|
11
|
-
let
|
|
11
|
+
let l = class extends h {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(), this._optionsObserver = null, this._internals = null, 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.size = "large", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.zIndex = void 0, this._onDocumentClick = (e) => {
|
|
14
14
|
if (!this.open) return;
|
|
@@ -17,7 +17,7 @@ let a = class extends h {
|
|
|
17
17
|
var r;
|
|
18
18
|
const s = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot");
|
|
19
19
|
if (!s) return;
|
|
20
|
-
const
|
|
20
|
+
const a = s.assignedElements({ flatten: !0 }).filter((c) => c.tagName.toLowerCase() === "scb-select-option"), t = e.composedPath(), i = a.find((c) => t.includes(c));
|
|
21
21
|
i && (this._selectOption(i), e.stopPropagation());
|
|
22
22
|
}, this._onKeyDown = (e) => {
|
|
23
23
|
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._toggleOpen());
|
|
@@ -25,9 +25,9 @@ let a = class extends h {
|
|
|
25
25
|
var s;
|
|
26
26
|
if (e.key === "Enter" || e.key === " ") {
|
|
27
27
|
e.preventDefault();
|
|
28
|
-
const
|
|
29
|
-
if (!
|
|
30
|
-
const t =
|
|
28
|
+
const a = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
|
|
29
|
+
if (!a) return;
|
|
30
|
+
const t = a.assignedElements({ flatten: !0 }).filter((c) => c.tagName.toLowerCase() === "scb-select-option"), i = e.composedPath(), r = t.find((c) => i.includes(c));
|
|
31
31
|
r && this._selectOption(r);
|
|
32
32
|
}
|
|
33
33
|
}, "attachInternals" in this && (this._internals = this.attachInternals());
|
|
@@ -56,8 +56,8 @@ let a = class extends h {
|
|
|
56
56
|
return /^\d+$/.test(s) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(s, 10)))})` : s;
|
|
57
57
|
}
|
|
58
58
|
_applySpacing() {
|
|
59
|
-
const e = this._mapSpacingToken(this.spacing), s = this._mapSpacingToken(this.spacingTop) ?? e,
|
|
60
|
-
s ? this.style.setProperty("--scb-select-spacing-block-start", s) : this.style.removeProperty("--scb-select-spacing-block-start"),
|
|
59
|
+
const e = this._mapSpacingToken(this.spacing), s = this._mapSpacingToken(this.spacingTop) ?? e, a = this._mapSpacingToken(this.spacingBottom) ?? e, t = this._mapSpacingToken(this.spacingLeft), i = this._mapSpacingToken(this.spacingRight);
|
|
60
|
+
s ? this.style.setProperty("--scb-select-spacing-block-start", s) : this.style.removeProperty("--scb-select-spacing-block-start"), a ? this.style.setProperty("--scb-select-spacing-block-end", a) : this.style.removeProperty("--scb-select-spacing-block-end"), t ? this.style.setProperty("--scb-select-spacing-inline-start", t) : this.style.removeProperty("--scb-select-spacing-inline-start"), i ? this.style.setProperty("--scb-select-spacing-inline-end", i) : this.style.removeProperty("--scb-select-spacing-inline-end");
|
|
61
61
|
}
|
|
62
62
|
_toggleOpen() {
|
|
63
63
|
this.disabled || (this.open = !this.open, this.open ? (this.focusedIndex = 0, this.requestUpdate()) : this.focusedIndex = -1);
|
|
@@ -72,8 +72,8 @@ let a = class extends h {
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
_getSelectedLabel() {
|
|
75
|
-
var
|
|
76
|
-
const e = (
|
|
75
|
+
var a;
|
|
76
|
+
const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot");
|
|
77
77
|
if (!e) return "";
|
|
78
78
|
const s = e.assignedElements({ flatten: !0 }).filter((t) => t.tagName.toLowerCase() === "scb-select-option");
|
|
79
79
|
if (this.variant === "multi-select") {
|
|
@@ -91,8 +91,8 @@ let a = class extends h {
|
|
|
91
91
|
this._updateOptionsChecked(), this._internals && (this.variant === "multi-select" ? this._internals.setFormValue(this._getMultiValues().join(",")) : this._internals.setFormValue(this.value)), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this._applySpacing();
|
|
92
92
|
}
|
|
93
93
|
_updateOptionsChecked() {
|
|
94
|
-
var
|
|
95
|
-
const e = (
|
|
94
|
+
var a;
|
|
95
|
+
const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot");
|
|
96
96
|
if (!e) return;
|
|
97
97
|
e.assignedElements({ flatten: !0 }).filter((t) => t.tagName.toLowerCase() === "scb-select-option").forEach((t) => {
|
|
98
98
|
if (this.variant === "multi-select") {
|
|
@@ -134,7 +134,7 @@ let a = class extends h {
|
|
|
134
134
|
<md-icon>${this.open ? "keyboard_arrow_up" : "keyboard_arrow_down"}</md-icon>
|
|
135
135
|
</span>
|
|
136
136
|
</div>
|
|
137
|
-
<div class="options" style=${
|
|
137
|
+
<div class="options" style=${b(this.zIndex ? `z-index: ${this.zIndex};` : void 0)} @click=${this._onSlotClick} @keydown=${this._onOptionKeyDown}>
|
|
138
138
|
<slot @slotchange="${() => {
|
|
139
139
|
this.requestUpdate();
|
|
140
140
|
}}"></slot>
|
|
@@ -143,13 +143,24 @@ let a = class extends h {
|
|
|
143
143
|
`;
|
|
144
144
|
}
|
|
145
145
|
};
|
|
146
|
-
|
|
147
|
-
|
|
146
|
+
l.formAssociated = !0;
|
|
147
|
+
l.styles = d`
|
|
148
148
|
:host {
|
|
149
149
|
display: block;
|
|
150
150
|
color: var(--md-sys-color-on-surface-variant);
|
|
151
151
|
font-family: var(--brand-font);
|
|
152
152
|
--scb-select-max-width: 400px;
|
|
153
|
+
--scb-select-control-min-height: 56px;
|
|
154
|
+
--scb-select-control-padding-x: var(--spacing-5);
|
|
155
|
+
--scb-select-control-trailing-reserved: 52px;
|
|
156
|
+
--scb-select-option-padding-y: var(--spacing-3);
|
|
157
|
+
--scb-select-option-padding-x: var(--spacing-5);
|
|
158
|
+
--scb-select-option-gap: var(--spacing-4);
|
|
159
|
+
--scb-select-option-min-height: 56px;
|
|
160
|
+
--scb-select-option-font-size: var(--md-sys-typescale-body-large-size);
|
|
161
|
+
--scb-select-option-line-height: var(--md-sys-typescale-body-large-line-height);
|
|
162
|
+
--scb-select-option-letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
163
|
+
--scb-select-option-icon-size: var(--icon-size-medium, 24px);
|
|
153
164
|
max-width: var(--scb-select-max-width);
|
|
154
165
|
width: 100%;
|
|
155
166
|
margin-block-start: var(--scb-select-spacing-block-start, 0);
|
|
@@ -162,10 +173,13 @@ a.styles = d`
|
|
|
162
173
|
opacity: 0.38;
|
|
163
174
|
}
|
|
164
175
|
:host([size='medium']) {
|
|
165
|
-
--scb-select-
|
|
176
|
+
--scb-select-control-min-height: 48px;
|
|
177
|
+
--scb-select-control-padding-x: var(--spacing-4);
|
|
178
|
+
--scb-select-control-trailing-reserved: 52px;
|
|
179
|
+
--scb-select-option-padding-y: var(--spacing-3);
|
|
166
180
|
--scb-select-option-padding-x: var(--spacing-4);
|
|
167
181
|
--scb-select-option-gap: var(--spacing-3);
|
|
168
|
-
--scb-select-option-min-height:
|
|
182
|
+
--scb-select-option-min-height: 48px;
|
|
169
183
|
|
|
170
184
|
--scb-select-option-font-size: var(--md-sys-typescale-body-medium-size);
|
|
171
185
|
--scb-select-option-line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
@@ -173,6 +187,9 @@ a.styles = d`
|
|
|
173
187
|
--scb-select-option-icon-size: var(--icon-size-small, 20px);
|
|
174
188
|
}
|
|
175
189
|
:host([size='small']) {
|
|
190
|
+
--scb-select-control-min-height: 40px;
|
|
191
|
+
--scb-select-control-padding-x: var(--spacing-4);
|
|
192
|
+
--scb-select-control-trailing-reserved: 52px;
|
|
176
193
|
--scb-select-option-padding-y: var(--spacing-2);
|
|
177
194
|
--scb-select-option-padding-x: var(--spacing-4);
|
|
178
195
|
--scb-select-option-gap: var(--spacing-3);
|
|
@@ -184,6 +201,9 @@ a.styles = d`
|
|
|
184
201
|
--scb-select-option-icon-size: var(--icon-size-small, 20px);
|
|
185
202
|
}
|
|
186
203
|
:host([size='extra-small']) {
|
|
204
|
+
--scb-select-control-min-height: 32px;
|
|
205
|
+
--scb-select-control-padding-x: var(--spacing-3);
|
|
206
|
+
--scb-select-control-trailing-reserved: 44px;
|
|
187
207
|
--scb-select-option-padding-y: var(--spacing-2);
|
|
188
208
|
--scb-select-option-padding-x: var(--spacing-3);
|
|
189
209
|
--scb-select-option-gap: var(--spacing-2);
|
|
@@ -203,6 +223,7 @@ a.styles = d`
|
|
|
203
223
|
border: 1px solid var(--md-sys-color-outline);
|
|
204
224
|
outline: 1px solid transparent;
|
|
205
225
|
transition: border 0.2s;
|
|
226
|
+
box-sizing: border-box;
|
|
206
227
|
|
|
207
228
|
}
|
|
208
229
|
:host .select:hover, :host([open]) .select {
|
|
@@ -298,7 +319,9 @@ a.styles = d`
|
|
|
298
319
|
|
|
299
320
|
.arrow {
|
|
300
321
|
position: absolute;
|
|
322
|
+
top: 50%;
|
|
301
323
|
right: 8px;
|
|
324
|
+
transform: translateY(-50%);
|
|
302
325
|
pointer-events: none;
|
|
303
326
|
}
|
|
304
327
|
.options {
|
|
@@ -347,77 +370,69 @@ a.styles = d`
|
|
|
347
370
|
pointer-events: none;
|
|
348
371
|
}
|
|
349
372
|
.selected-value-container {
|
|
350
|
-
height: 100%;
|
|
351
373
|
position: relative;
|
|
352
374
|
display: flex;
|
|
353
375
|
align-items: center;
|
|
354
|
-
|
|
376
|
+
min-height: var(--scb-select-control-min-height);
|
|
377
|
+
box-sizing: border-box;
|
|
378
|
+
padding: 0 var(--scb-select-control-trailing-reserved) 0 var(--scb-select-control-padding-x);
|
|
355
379
|
}
|
|
356
|
-
:host([size='medium']) .selected-value-container {
|
|
357
|
-
padding: var(--spacing-5) 52px var(--spacing-5) var(--spacing-4);
|
|
358
|
-
}
|
|
359
|
-
:host([size='small']) .selected-value-container {
|
|
360
|
-
padding: var(--spacing-4) 52px var(--spacing-4) var(--spacing-4);
|
|
361
|
-
}
|
|
362
|
-
:host([size='extra-small']) .selected-value-container {
|
|
363
|
-
padding: var(--spacing-3) 44px var(--spacing-3) var(--spacing-3);
|
|
364
|
-
}
|
|
365
380
|
|
|
366
381
|
`;
|
|
367
382
|
o([
|
|
368
383
|
n({ type: String })
|
|
369
|
-
],
|
|
384
|
+
], l.prototype, "variant", 2);
|
|
370
385
|
o([
|
|
371
386
|
n({ type: String })
|
|
372
|
-
],
|
|
387
|
+
], l.prototype, "value", 2);
|
|
373
388
|
o([
|
|
374
389
|
n({ type: Array })
|
|
375
|
-
],
|
|
390
|
+
], l.prototype, "values", 2);
|
|
376
391
|
o([
|
|
377
392
|
n({ type: Boolean })
|
|
378
|
-
],
|
|
393
|
+
], l.prototype, "disabled", 2);
|
|
379
394
|
o([
|
|
380
395
|
n({ type: Boolean, reflect: !0 })
|
|
381
|
-
],
|
|
396
|
+
], l.prototype, "open", 2);
|
|
382
397
|
o([
|
|
383
398
|
n({ type: String })
|
|
384
|
-
],
|
|
399
|
+
], l.prototype, "label", 2);
|
|
385
400
|
o([
|
|
386
401
|
n({ type: String })
|
|
387
|
-
],
|
|
402
|
+
], l.prototype, "name", 2);
|
|
388
403
|
o([
|
|
389
404
|
n({ type: String })
|
|
390
|
-
],
|
|
405
|
+
], l.prototype, "placeholder", 2);
|
|
391
406
|
o([
|
|
392
407
|
n({ type: String, attribute: "supporting-text" })
|
|
393
|
-
],
|
|
408
|
+
], l.prototype, "supportingText", 2);
|
|
394
409
|
o([
|
|
395
410
|
n({ type: Boolean, attribute: "with-radiobuttons" })
|
|
396
|
-
],
|
|
411
|
+
], l.prototype, "withRadiobuttons", 2);
|
|
397
412
|
o([
|
|
398
413
|
n({ type: String, reflect: !0 })
|
|
399
|
-
],
|
|
414
|
+
], l.prototype, "size", 2);
|
|
400
415
|
o([
|
|
401
416
|
n({ type: String, reflect: !0 })
|
|
402
|
-
],
|
|
417
|
+
], l.prototype, "spacing", 2);
|
|
403
418
|
o([
|
|
404
419
|
n({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
405
|
-
],
|
|
420
|
+
], l.prototype, "spacingTop", 2);
|
|
406
421
|
o([
|
|
407
422
|
n({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
408
|
-
],
|
|
423
|
+
], l.prototype, "spacingBottom", 2);
|
|
409
424
|
o([
|
|
410
425
|
n({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
411
|
-
],
|
|
426
|
+
], l.prototype, "spacingLeft", 2);
|
|
412
427
|
o([
|
|
413
428
|
n({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
414
|
-
],
|
|
429
|
+
], l.prototype, "spacingRight", 2);
|
|
415
430
|
o([
|
|
416
431
|
n({ type: String, attribute: "z-index" })
|
|
417
|
-
],
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
],
|
|
432
|
+
], l.prototype, "zIndex", 2);
|
|
433
|
+
l = o([
|
|
434
|
+
m("scb-select")
|
|
435
|
+
], l);
|
|
421
436
|
export {
|
|
422
|
-
|
|
437
|
+
l as ScbSelect
|
|
423
438
|
};
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -10917,6 +10917,17 @@
|
|
|
10917
10917
|
color: var(--md-sys-color-on-surface-variant);
|
|
10918
10918
|
font-family: var(--brand-font);
|
|
10919
10919
|
--scb-select-max-width: 400px;
|
|
10920
|
+
--scb-select-control-min-height: 56px;
|
|
10921
|
+
--scb-select-control-padding-x: var(--spacing-5);
|
|
10922
|
+
--scb-select-control-trailing-reserved: 52px;
|
|
10923
|
+
--scb-select-option-padding-y: var(--spacing-3);
|
|
10924
|
+
--scb-select-option-padding-x: var(--spacing-5);
|
|
10925
|
+
--scb-select-option-gap: var(--spacing-4);
|
|
10926
|
+
--scb-select-option-min-height: 56px;
|
|
10927
|
+
--scb-select-option-font-size: var(--md-sys-typescale-body-large-size);
|
|
10928
|
+
--scb-select-option-line-height: var(--md-sys-typescale-body-large-line-height);
|
|
10929
|
+
--scb-select-option-letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
10930
|
+
--scb-select-option-icon-size: var(--icon-size-medium, 24px);
|
|
10920
10931
|
max-width: var(--scb-select-max-width);
|
|
10921
10932
|
width: 100%;
|
|
10922
10933
|
margin-block-start: var(--scb-select-spacing-block-start, 0);
|
|
@@ -10929,10 +10940,13 @@
|
|
|
10929
10940
|
opacity: 0.38;
|
|
10930
10941
|
}
|
|
10931
10942
|
:host([size='medium']) {
|
|
10932
|
-
--scb-select-
|
|
10943
|
+
--scb-select-control-min-height: 48px;
|
|
10944
|
+
--scb-select-control-padding-x: var(--spacing-4);
|
|
10945
|
+
--scb-select-control-trailing-reserved: 52px;
|
|
10946
|
+
--scb-select-option-padding-y: var(--spacing-3);
|
|
10933
10947
|
--scb-select-option-padding-x: var(--spacing-4);
|
|
10934
10948
|
--scb-select-option-gap: var(--spacing-3);
|
|
10935
|
-
--scb-select-option-min-height:
|
|
10949
|
+
--scb-select-option-min-height: 48px;
|
|
10936
10950
|
|
|
10937
10951
|
--scb-select-option-font-size: var(--md-sys-typescale-body-medium-size);
|
|
10938
10952
|
--scb-select-option-line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
@@ -10940,6 +10954,9 @@
|
|
|
10940
10954
|
--scb-select-option-icon-size: var(--icon-size-small, 20px);
|
|
10941
10955
|
}
|
|
10942
10956
|
:host([size='small']) {
|
|
10957
|
+
--scb-select-control-min-height: 40px;
|
|
10958
|
+
--scb-select-control-padding-x: var(--spacing-4);
|
|
10959
|
+
--scb-select-control-trailing-reserved: 52px;
|
|
10943
10960
|
--scb-select-option-padding-y: var(--spacing-2);
|
|
10944
10961
|
--scb-select-option-padding-x: var(--spacing-4);
|
|
10945
10962
|
--scb-select-option-gap: var(--spacing-3);
|
|
@@ -10951,6 +10968,9 @@
|
|
|
10951
10968
|
--scb-select-option-icon-size: var(--icon-size-small, 20px);
|
|
10952
10969
|
}
|
|
10953
10970
|
:host([size='extra-small']) {
|
|
10971
|
+
--scb-select-control-min-height: 32px;
|
|
10972
|
+
--scb-select-control-padding-x: var(--spacing-3);
|
|
10973
|
+
--scb-select-control-trailing-reserved: 44px;
|
|
10954
10974
|
--scb-select-option-padding-y: var(--spacing-2);
|
|
10955
10975
|
--scb-select-option-padding-x: var(--spacing-3);
|
|
10956
10976
|
--scb-select-option-gap: var(--spacing-2);
|
|
@@ -10970,6 +10990,7 @@
|
|
|
10970
10990
|
border: 1px solid var(--md-sys-color-outline);
|
|
10971
10991
|
outline: 1px solid transparent;
|
|
10972
10992
|
transition: border 0.2s;
|
|
10993
|
+
box-sizing: border-box;
|
|
10973
10994
|
|
|
10974
10995
|
}
|
|
10975
10996
|
:host .select:hover, :host([open]) .select {
|
|
@@ -11065,7 +11086,9 @@
|
|
|
11065
11086
|
|
|
11066
11087
|
.arrow {
|
|
11067
11088
|
position: absolute;
|
|
11089
|
+
top: 50%;
|
|
11068
11090
|
right: 8px;
|
|
11091
|
+
transform: translateY(-50%);
|
|
11069
11092
|
pointer-events: none;
|
|
11070
11093
|
}
|
|
11071
11094
|
.options {
|
|
@@ -11114,21 +11137,13 @@
|
|
|
11114
11137
|
pointer-events: none;
|
|
11115
11138
|
}
|
|
11116
11139
|
.selected-value-container {
|
|
11117
|
-
height: 100%;
|
|
11118
11140
|
position: relative;
|
|
11119
11141
|
display: flex;
|
|
11120
11142
|
align-items: center;
|
|
11121
|
-
|
|
11143
|
+
min-height: var(--scb-select-control-min-height);
|
|
11144
|
+
box-sizing: border-box;
|
|
11145
|
+
padding: 0 var(--scb-select-control-trailing-reserved) 0 var(--scb-select-control-padding-x);
|
|
11122
11146
|
}
|
|
11123
|
-
:host([size='medium']) .selected-value-container {
|
|
11124
|
-
padding: var(--spacing-5) 52px var(--spacing-5) var(--spacing-4);
|
|
11125
|
-
}
|
|
11126
|
-
:host([size='small']) .selected-value-container {
|
|
11127
|
-
padding: var(--spacing-4) 52px var(--spacing-4) var(--spacing-4);
|
|
11128
|
-
}
|
|
11129
|
-
:host([size='extra-small']) .selected-value-container {
|
|
11130
|
-
padding: var(--spacing-3) 44px var(--spacing-3) var(--spacing-3);
|
|
11131
|
-
}
|
|
11132
11147
|
|
|
11133
11148
|
`,Pe([o({type:String})],ve.prototype,"variant",2),Pe([o({type:String})],ve.prototype,"value",2),Pe([o({type:Array})],ve.prototype,"values",2),Pe([o({type:Boolean})],ve.prototype,"disabled",2),Pe([o({type:Boolean,reflect:!0})],ve.prototype,"open",2),Pe([o({type:String})],ve.prototype,"label",2),Pe([o({type:String})],ve.prototype,"name",2),Pe([o({type:String})],ve.prototype,"placeholder",2),Pe([o({type:String,attribute:"supporting-text"})],ve.prototype,"supportingText",2),Pe([o({type:Boolean,attribute:"with-radiobuttons"})],ve.prototype,"withRadiobuttons",2),Pe([o({type:String,reflect:!0})],ve.prototype,"size",2),Pe([o({type:String,reflect:!0})],ve.prototype,"spacing",2),Pe([o({type:String,attribute:"spacing-top",reflect:!0})],ve.prototype,"spacingTop",2),Pe([o({type:String,attribute:"spacing-bottom",reflect:!0})],ve.prototype,"spacingBottom",2),Pe([o({type:String,attribute:"spacing-left",reflect:!0})],ve.prototype,"spacingLeft",2),Pe([o({type:String,attribute:"spacing-right",reflect:!0})],ve.prototype,"spacingRight",2),Pe([o({type:String,attribute:"z-index"})],ve.prototype,"zIndex",2),ve=Pe([y("scb-select")],ve);var vg=Object.defineProperty,mg=Object.getOwnPropertyDescriptor,De=(t,e,i,r)=>{for(var s=r>1?void 0:r?mg(e,i):e,a=t.length-1,n;a>=0;a--)(n=t[a])&&(s=(r?n(e,i,s):n(s))||s);return r&&s&&vg(e,i,s),s};let Se=class extends _{constructor(){super(...arguments),this.ticks=!1,this.step=5,this.value=20,this.range=!1,this.valueStart=0,this.valueEnd=100,this.min=0,this.max=100,this.labeled=!0,this.disabled=!1,this.name=""}_onInput(t){const e=t.target;this.range?(this.valueStart=e.valueStart,this.valueEnd=e.valueEnd):this.value=e.value,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}_onChange(t){const e=t.target;this.range?(this.valueStart=e.valueStart,this.valueEnd=e.valueEnd):this.value=e.value,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}render(){const e=this.labeled?u:this.ariaLabel||u;return c`
|
|
11134
11149
|
<md-slider
|