scb-wc-test 0.1.102 → 0.1.104
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-option.js +5 -5
- package/mvc/components/scb-select/scb-select.js +39 -21
- package/package.json +2 -2
- package/scb-select/scb-select-option.d.ts +1 -0
- package/scb-select/scb-select-option.js +15 -12
- package/scb-select/scb-select.d.ts +3 -4
- package/scb-select/scb-select.js +51 -32
- package/scb-wc-test.bundle.js +80 -62
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import{a as h,n,i as p,x as
|
|
1
|
+
import{a as h,n as d,i as p,x as n,t as u}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var l=typeof globalThis<"u"?globalThis:window;if(!l.__scb_ce_guard_installed__){l.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(i,c,e){try{customElements.get(i)||o(i,c,e)}catch(a){var r=String(a||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,s=(l,o,i,c)=>{for(var e=c>1?void 0:c?b(o,i):o,r=l.length-1,a;r>=0;r--)(a=l[r])&&(e=(c?a(o,i,e):a(e))||e);return c&&e&&m(o,i,e),e};let t=class extends p{constructor(){super(...arguments),this.value="",this.disabled=!1,this.showCheckbox=!1,this.checked=!1,this.showRadio=!1,this.label=""}render(){return n`
|
|
2
2
|
<div tabindex="0" class="item ${this.checked?"checked":""}" value=${this.value} ?disabled=${this.disabled}>
|
|
3
3
|
<md-ripple></md-ripple>
|
|
4
|
-
${this.showCheckbox?
|
|
5
|
-
${this.showRadio?
|
|
6
|
-
<
|
|
4
|
+
${this.showCheckbox?n`<md-icon class="${this.checked?"checkbox-checked":""}">${this.checked?"check_box":"check_box_outline_blank"}</md-icon>`:null}
|
|
5
|
+
${this.showRadio?n`<md-icon class="${this.checked?"radio-checked":""}">${this.checked?"radio_button_checked":"radio_button_unchecked"}</md-icon>`:null}
|
|
6
|
+
<div>${this.label}</div>
|
|
7
7
|
<md-focus-ring inward></md-focus-ring>
|
|
8
8
|
</div>
|
|
9
9
|
`}};t.styles=h`
|
|
@@ -30,4 +30,4 @@ import{a as h,n,i as p,x as l,t as u}from"../../vendor/vendor.js";import"../../v
|
|
|
30
30
|
md-icon.radio-checked{
|
|
31
31
|
color: var(--md-sys-color-primary);
|
|
32
32
|
}
|
|
33
|
-
`;
|
|
33
|
+
`;s([d({type:String})],t.prototype,"value",2);s([d({type:Boolean,reflect:!0})],t.prototype,"disabled",2);s([d({type:Boolean})],t.prototype,"showCheckbox",2);s([d({type:Boolean})],t.prototype,"checked",2);s([d({type:Boolean})],t.prototype,"showRadio",2);s([d({type:String})],t.prototype,"label",2);t=s([u("scb-select-option")],t);
|
|
@@ -1,24 +1,39 @@
|
|
|
1
|
-
import{a as
|
|
2
|
-
${this.label?d`
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import{a as h,n as r,i as p,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 b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(t,s,e,i)=>{for(var o=i>1?void 0:i?v(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&&b(s,e,o),o};let l=class extends p{constructor(){super(),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._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)}},"attachInternals"in this&&(this._internals=this.attachInternals())}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.value=this.values.join(","),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0}))):this.variant==="single-select"&&this.withRadiobuttons?(this.value=t.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):(this.value=t.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 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.label).join(", "):""}else{const e=s.find(i=>i.value===this.value);return e?e.label:""}}firstUpdated(){this._updateOptionsChecked(),this._internals&&this._internals.setFormValue(this.value)}updated(){this._updateOptionsChecked(),this._internals&&this._internals.setFormValue(this.value)}_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||this.supportingText?d`
|
|
3
|
+
<label class="select-label" id="scb-select-label-${this.name}">
|
|
4
|
+
${this.label?d`
|
|
5
|
+
${this.label}
|
|
6
|
+
`:""}
|
|
7
|
+
${this.supportingText?d`
|
|
8
|
+
<div class="select-sub-label">${this.supportingText}</div>
|
|
9
|
+
`:""}
|
|
10
|
+
</label>
|
|
11
|
+
`:""}
|
|
12
|
+
<div class="select">
|
|
13
|
+
<div class="selected-value-container" tabindex="0" @click="${this._toggleOpen}" @keydown="${this._onKeyDown}">
|
|
14
|
+
<md-focus-ring inward></md-focus-ring>
|
|
15
|
+
<md-ripple></md-ripple>
|
|
16
|
+
<input
|
|
17
|
+
tabindex="-1"
|
|
18
|
+
class="selected-value"
|
|
19
|
+
type="text"
|
|
20
|
+
readonly
|
|
21
|
+
.value="${this._getSelectedLabel()||this.placeholder}"
|
|
22
|
+
name="${this.name}"
|
|
23
|
+
aria-labelledby="${this.label?`scb-select-label-${this.name}`:""}"
|
|
24
|
+
aria-label="${!this.label&&this.placeholder?this.placeholder:""}"
|
|
25
|
+
title="${!this.label&&this.placeholder?this.placeholder:""}"
|
|
26
|
+
placeholder="${this.placeholder}"
|
|
27
|
+
/>
|
|
28
|
+
<span class="arrow">
|
|
29
|
+
<md-icon>${this.open?"expand_less":"expand_more"}</md-icon>
|
|
30
|
+
</span>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="options" @click=${this._onSlotClick} @keydown=${this._onOptionKeyDown}>
|
|
33
|
+
<slot @slotchange="${()=>{this.requestUpdate()}}"></slot>
|
|
34
|
+
</div>
|
|
16
35
|
</div>
|
|
17
|
-
|
|
18
|
-
<slot @slotchange="${()=>{this.requestUpdate()}}"></slot>
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
`}};n.styles=p`
|
|
36
|
+
`}};l.formAssociated=!0;l.styles=h`
|
|
22
37
|
:host {
|
|
23
38
|
display: block;
|
|
24
39
|
color: var(--md-sys-color-on-surface-variant);
|
|
@@ -68,15 +83,18 @@ import{a as p,n as r,i as h,x as d,t as u}from"../../vendor/vendor.js";import"./
|
|
|
68
83
|
outline: none;
|
|
69
84
|
}
|
|
70
85
|
.select-label{
|
|
86
|
+
display: block;
|
|
71
87
|
font-size: var(--md-sys-typescale-label-large-size);
|
|
72
88
|
font-weight: var(--weight-semibold);
|
|
73
89
|
line-height: var(--md-sys-typescale-label-large-line-height);
|
|
74
90
|
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
91
|
+
margin-bottom: var(--spacing-3);
|
|
75
92
|
}
|
|
76
93
|
.select-sub-label{
|
|
77
94
|
font-size: var(--md-sys-typescale-body-large-size);
|
|
78
95
|
line-height: var(--md-sys-typescale-body-large-line-height);
|
|
79
96
|
letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
97
|
+
font-weight: var(--weight-regular);
|
|
80
98
|
}
|
|
81
99
|
md-focus-ring {
|
|
82
100
|
position:absolute;
|
|
@@ -141,4 +159,4 @@ import{a as p,n as r,i as h,x as d,t as u}from"../../vendor/vendor.js";import"./
|
|
|
141
159
|
padding: var(--spacing-6) 52px var(--spacing-6) var(--spacing-5);
|
|
142
160
|
}
|
|
143
161
|
|
|
144
|
-
`;
|
|
162
|
+
`;n([r({type:String})],l.prototype,"variant",2);n([r({type:String})],l.prototype,"value",2);n([r({type:Array})],l.prototype,"values",2);n([r({type:Boolean})],l.prototype,"disabled",2);n([r({type:Boolean,reflect:!0})],l.prototype,"open",2);n([r({type:String})],l.prototype,"label",2);n([r({type:String})],l.prototype,"name",2);n([r({type:String})],l.prototype,"placeholder",2);n([r({type:String,attribute:"supporting-text"})],l.prototype,"supportingText",2);n([r({type:Boolean,attribute:"with-radiobuttons"})],l.prototype,"withRadiobuttons",2);l=n([u("scb-select")],l);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.104",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -337,5 +337,5 @@
|
|
|
337
337
|
},
|
|
338
338
|
"./mvc/*": "./mvc/*"
|
|
339
339
|
},
|
|
340
|
-
"buildHash": "
|
|
340
|
+
"buildHash": "407566FE01A9AD5639DCFDB08835E7DA2C13A5B15B17A28125CBC73E4D45C40E"
|
|
341
341
|
}
|
|
@@ -3,14 +3,14 @@ import { property as s, customElement as m } from "lit/decorators.js";
|
|
|
3
3
|
import "@material/web/icon/icon.js";
|
|
4
4
|
import "@material/web/ripple/ripple.js";
|
|
5
5
|
import "@material/web/focus/md-focus-ring.js";
|
|
6
|
-
var y = Object.defineProperty,
|
|
7
|
-
for (var
|
|
8
|
-
(l = n[a]) && (
|
|
9
|
-
return c &&
|
|
6
|
+
var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (n, i, r, c) => {
|
|
7
|
+
for (var t = c > 1 ? void 0 : c ? b(i, r) : i, a = n.length - 1, l; a >= 0; a--)
|
|
8
|
+
(l = n[a]) && (t = (c ? l(i, r, t) : l(t)) || t);
|
|
9
|
+
return c && t && y(i, r, t), t;
|
|
10
10
|
};
|
|
11
11
|
let e = class extends p {
|
|
12
12
|
constructor() {
|
|
13
|
-
super(...arguments), this.value = "", this.disabled = !1, this.showCheckbox = !1, this.checked = !1, this.showRadio = !1;
|
|
13
|
+
super(...arguments), this.value = "", this.disabled = !1, this.showCheckbox = !1, this.checked = !1, this.showRadio = !1, this.label = "";
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
16
|
return d`
|
|
@@ -18,7 +18,7 @@ let e = class extends p {
|
|
|
18
18
|
<md-ripple></md-ripple>
|
|
19
19
|
${this.showCheckbox ? d`<md-icon class="${this.checked ? "checkbox-checked" : ""}">${this.checked ? "check_box" : "check_box_outline_blank"}</md-icon>` : null}
|
|
20
20
|
${this.showRadio ? d`<md-icon class="${this.checked ? "radio-checked" : ""}">${this.checked ? "radio_button_checked" : "radio_button_unchecked"}</md-icon>` : null}
|
|
21
|
-
<
|
|
21
|
+
<div>${this.label}</div>
|
|
22
22
|
<md-focus-ring inward></md-focus-ring>
|
|
23
23
|
</div>
|
|
24
24
|
`;
|
|
@@ -49,22 +49,25 @@ e.styles = h`
|
|
|
49
49
|
color: var(--md-sys-color-primary);
|
|
50
50
|
}
|
|
51
51
|
`;
|
|
52
|
-
|
|
52
|
+
o([
|
|
53
53
|
s({ type: String })
|
|
54
54
|
], e.prototype, "value", 2);
|
|
55
|
-
|
|
55
|
+
o([
|
|
56
56
|
s({ type: Boolean, reflect: !0 })
|
|
57
57
|
], e.prototype, "disabled", 2);
|
|
58
|
-
|
|
58
|
+
o([
|
|
59
59
|
s({ type: Boolean })
|
|
60
60
|
], e.prototype, "showCheckbox", 2);
|
|
61
|
-
|
|
61
|
+
o([
|
|
62
62
|
s({ type: Boolean })
|
|
63
63
|
], e.prototype, "checked", 2);
|
|
64
|
-
|
|
64
|
+
o([
|
|
65
65
|
s({ type: Boolean })
|
|
66
66
|
], e.prototype, "showRadio", 2);
|
|
67
|
-
|
|
67
|
+
o([
|
|
68
|
+
s({ type: String })
|
|
69
|
+
], e.prototype, "label", 2);
|
|
70
|
+
e = o([
|
|
68
71
|
m("scb-select-option")
|
|
69
72
|
], e);
|
|
70
73
|
export {
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
/**
|
|
3
|
-
* Select-komponent med slot för scb-select-option.
|
|
4
|
-
* @slot - Alternativ (scb-select-option)
|
|
5
|
-
*/
|
|
6
2
|
export declare class ScbSelect extends LitElement {
|
|
3
|
+
static formAssociated: boolean;
|
|
4
|
+
private _internals;
|
|
5
|
+
constructor();
|
|
7
6
|
focusedIndex: number;
|
|
8
7
|
variant: 'single-select' | 'multi-select';
|
|
9
8
|
value: string;
|
package/scb-select/scb-select.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { css as
|
|
1
|
+
import { css as h, LitElement as p, html as d } from "lit";
|
|
2
2
|
import { property as r, customElement as u } from "lit/decorators.js";
|
|
3
3
|
import "./scb-select-option.js";
|
|
4
4
|
import "@material/web/focus/md-focus-ring.js";
|
|
5
|
-
var
|
|
6
|
-
for (var s = t > 1 ? void 0 : t ?
|
|
5
|
+
var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (e, i, o, t) => {
|
|
6
|
+
for (var s = t > 1 ? void 0 : t ? v(i, o) : i, c = e.length - 1, l; c >= 0; c--)
|
|
7
7
|
(l = e[c]) && (s = (t ? l(i, o, s) : l(s)) || s);
|
|
8
|
-
return t && s &&
|
|
8
|
+
return t && s && b(i, o, s), s;
|
|
9
9
|
};
|
|
10
|
-
let a = class extends
|
|
10
|
+
let a = class extends p {
|
|
11
11
|
constructor() {
|
|
12
|
-
super(
|
|
12
|
+
super(), 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._onDocumentClick = (e) => {
|
|
13
13
|
if (!this.open) return;
|
|
14
14
|
e.composedPath().includes(this) || (this.open = !1, this.removeAttribute("open"));
|
|
15
15
|
}, this._onSlotClick = (e) => {
|
|
@@ -29,7 +29,7 @@ let a = class extends h {
|
|
|
29
29
|
const t = o.assignedElements({ flatten: !0 }).filter((l) => l.tagName.toLowerCase() === "scb-select-option"), s = e.composedPath(), c = t.find((l) => s.includes(l));
|
|
30
30
|
c && this._selectOption(c);
|
|
31
31
|
}
|
|
32
|
-
};
|
|
32
|
+
}, "attachInternals" in this && (this._internals = this.attachInternals());
|
|
33
33
|
}
|
|
34
34
|
connectedCallback() {
|
|
35
35
|
super.connectedCallback(), document.addEventListener("mousedown", this._onDocumentClick);
|
|
@@ -41,7 +41,7 @@ let a = class extends h {
|
|
|
41
41
|
this.disabled || (this.open = !this.open, this.open ? (this.focusedIndex = 0, this.requestUpdate()) : this.focusedIndex = -1);
|
|
42
42
|
}
|
|
43
43
|
_selectOption(e) {
|
|
44
|
-
e.disabled || (this.variant === "multi-select" ? (this.values.indexOf(e.value) > -1 ? this.values = this.values.filter((o) => o !== e.value) : this.values = [...this.values, e.value], this.dispatchEvent(new CustomEvent("change", { detail: { values: this.values } }))) : this.variant === "single-select" && this.withRadiobuttons ? (this.value = e.value, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }))) : (this.value = e.value, this.open = !1, this.removeAttribute("open"), this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }))), this._updateOptionsChecked(), this.requestUpdate());
|
|
44
|
+
e.disabled || (this.variant === "multi-select" ? (this.values.indexOf(e.value) > -1 ? this.values = this.values.filter((o) => o !== e.value) : this.values = [...this.values, e.value], this.value = this.values.join(","), this.dispatchEvent(new CustomEvent("change", { detail: { values: this.values }, bubbles: !0, composed: !0 }))) : 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());
|
|
45
45
|
}
|
|
46
46
|
_getSelectedLabel() {
|
|
47
47
|
var o;
|
|
@@ -50,17 +50,17 @@ let a = class extends h {
|
|
|
50
50
|
const i = e.assignedElements({ flatten: !0 }).filter((t) => t.tagName.toLowerCase() === "scb-select-option");
|
|
51
51
|
if (this.variant === "multi-select") {
|
|
52
52
|
const t = i.filter((s) => this.values.includes(s.value));
|
|
53
|
-
return t && t.length > 0 ? t.map((s) => s.
|
|
53
|
+
return t && t.length > 0 ? t.map((s) => s.label).join(", ") : "";
|
|
54
54
|
} else {
|
|
55
55
|
const t = i.find((s) => s.value === this.value);
|
|
56
|
-
return t ? t.
|
|
56
|
+
return t ? t.label : "";
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
firstUpdated() {
|
|
60
|
-
this._updateOptionsChecked();
|
|
60
|
+
this._updateOptionsChecked(), this._internals && this._internals.setFormValue(this.value);
|
|
61
61
|
}
|
|
62
62
|
updated() {
|
|
63
|
-
this._updateOptionsChecked();
|
|
63
|
+
this._updateOptionsChecked(), this._internals && this._internals.setFormValue(this.value);
|
|
64
64
|
}
|
|
65
65
|
_updateOptionsChecked() {
|
|
66
66
|
var o;
|
|
@@ -72,31 +72,47 @@ let a = class extends h {
|
|
|
72
72
|
}
|
|
73
73
|
render() {
|
|
74
74
|
return d`
|
|
75
|
-
${this.label ? d`
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
75
|
+
${this.label || this.supportingText ? d`
|
|
76
|
+
<label class="select-label" id="scb-select-label-${this.name}">
|
|
77
|
+
${this.label ? d`
|
|
78
|
+
${this.label}
|
|
79
|
+
` : ""}
|
|
80
|
+
${this.supportingText ? d`
|
|
81
|
+
<div class="select-sub-label">${this.supportingText}</div>
|
|
82
|
+
` : ""}
|
|
83
|
+
</label>
|
|
84
|
+
` : ""}
|
|
85
|
+
<div class="select">
|
|
86
|
+
<div class="selected-value-container" tabindex="0" @click="${this._toggleOpen}" @keydown="${this._onKeyDown}">
|
|
87
|
+
<md-focus-ring inward></md-focus-ring>
|
|
88
|
+
<md-ripple></md-ripple>
|
|
89
|
+
<input
|
|
90
|
+
tabindex="-1"
|
|
91
|
+
class="selected-value"
|
|
92
|
+
type="text"
|
|
93
|
+
readonly
|
|
94
|
+
.value="${this._getSelectedLabel() || this.placeholder}"
|
|
95
|
+
name="${this.name}"
|
|
96
|
+
aria-labelledby="${this.label ? `scb-select-label-${this.name}` : ""}"
|
|
97
|
+
aria-label="${!this.label && this.placeholder ? this.placeholder : ""}"
|
|
98
|
+
title="${!this.label && this.placeholder ? this.placeholder : ""}"
|
|
99
|
+
placeholder="${this.placeholder}"
|
|
100
|
+
/>
|
|
101
|
+
<span class="arrow">
|
|
102
|
+
<md-icon>${this.open ? "expand_less" : "expand_more"}</md-icon>
|
|
103
|
+
</span>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="options" @click=${this._onSlotClick} @keydown=${this._onOptionKeyDown}>
|
|
106
|
+
<slot @slotchange="${() => {
|
|
92
107
|
this.requestUpdate();
|
|
93
108
|
}}"></slot>
|
|
109
|
+
</div>
|
|
94
110
|
</div>
|
|
95
|
-
|
|
96
|
-
`;
|
|
111
|
+
`;
|
|
97
112
|
}
|
|
98
113
|
};
|
|
99
|
-
a.
|
|
114
|
+
a.formAssociated = !0;
|
|
115
|
+
a.styles = h`
|
|
100
116
|
:host {
|
|
101
117
|
display: block;
|
|
102
118
|
color: var(--md-sys-color-on-surface-variant);
|
|
@@ -146,15 +162,18 @@ a.styles = p`
|
|
|
146
162
|
outline: none;
|
|
147
163
|
}
|
|
148
164
|
.select-label{
|
|
165
|
+
display: block;
|
|
149
166
|
font-size: var(--md-sys-typescale-label-large-size);
|
|
150
167
|
font-weight: var(--weight-semibold);
|
|
151
168
|
line-height: var(--md-sys-typescale-label-large-line-height);
|
|
152
169
|
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
170
|
+
margin-bottom: var(--spacing-3);
|
|
153
171
|
}
|
|
154
172
|
.select-sub-label{
|
|
155
173
|
font-size: var(--md-sys-typescale-body-large-size);
|
|
156
174
|
line-height: var(--md-sys-typescale-body-large-line-height);
|
|
157
175
|
letter-spacing: var(--md-sys-typescale-body-large-tracking);
|
|
176
|
+
font-weight: var(--weight-regular);
|
|
158
177
|
}
|
|
159
178
|
md-focus-ring {
|
|
160
179
|
position:absolute;
|