scb-wc-test 0.1.271 → 0.1.273
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 +3 -2
- package/mvc/components/scb-textfield/scb-textfield.js +67 -38
- package/package.json +2 -2
- package/scb-select/scb-select.js +3 -2
- package/scb-textfield/scb-textfield.js +111 -82
- package/scb-wc-test-selfhost.css +2 -7
- package/scb-wc-test.bundle.js +58 -28
|
@@ -53,6 +53,7 @@ import{a as d,n as o,i as h,j as b,x as p,t as g}from"../../vendor/vendor.js";im
|
|
|
53
53
|
--scb-select-supporting-font-size: var(--md-sys-typescale-body-medium-size);
|
|
54
54
|
--scb-select-supporting-line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
55
55
|
--scb-select-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
56
|
+
--scb-select-label-gap: var(--spacing-3);
|
|
56
57
|
max-width: var(--scb-select-max-width);
|
|
57
58
|
width: 100%;
|
|
58
59
|
margin-block-start: var(--scb-select-spacing-block-start, 0);
|
|
@@ -177,7 +178,7 @@ import{a as d,n as o,i as h,j as b,x as p,t as g}from"../../vendor/vendor.js";im
|
|
|
177
178
|
letter-spacing: var(--scb-select-label-letter-spacing);
|
|
178
179
|
}
|
|
179
180
|
.select-label--without-supporting {
|
|
180
|
-
margin-bottom: var(--
|
|
181
|
+
margin-bottom: var(--scb-select-label-gap);
|
|
181
182
|
}
|
|
182
183
|
.select-sub-label{
|
|
183
184
|
display: block;
|
|
@@ -185,7 +186,7 @@ import{a as d,n as o,i as h,j as b,x as p,t as g}from"../../vendor/vendor.js";im
|
|
|
185
186
|
line-height: var(--scb-select-supporting-line-height);
|
|
186
187
|
letter-spacing: var(--scb-select-supporting-letter-spacing);
|
|
187
188
|
font-weight: var(--weight-regular);
|
|
188
|
-
margin-bottom: var(--
|
|
189
|
+
margin-bottom: var(--scb-select-label-gap);
|
|
189
190
|
color: var(--md-sys-color-on-surface-variant);
|
|
190
191
|
}
|
|
191
192
|
md-focus-ring {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as _,n,r as w,i as $,x as
|
|
1
|
+
import{a as _,n,r as w,i as $,x as d,t as z}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.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,c,o){try{customElements.get(i)||t(i,c,o)}catch(h){var p=String(h||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var k=Object.defineProperty,E=Object.getOwnPropertyDescriptor,v=e=>{throw TypeError(e)},a=(e,t,i,c)=>{for(var o=c>1?void 0:c?E(t,i):t,p=e.length-1,h;p>=0;p--)(h=e[p])&&(o=(c?h(t,i,o):h(o))||o);return c&&o&&k(t,i,o),o},S=(e,t,i)=>t.has(e)||v("Cannot "+i),L=(e,t,i)=>t.has(e)?v("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),r=(e,t,i)=>(S(e,t,"access private method"),i),l,f,b,g,x,m,y,u;let s=class extends ${constructor(){super(),L(this,l),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=e=>{e.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&r(this,l,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&r(this,l,u).call(this)},this._hasRenderedOnce=!1,this._boundField=null,this._onFieldInput=()=>{const e=this._boundField;if(!e)return;const t=e;if(this.value=t.value,this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i)}r(this,l,g).call(this),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},this._onFieldChange=()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))},this._onFieldSelect=()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))},this._onFieldFocus=()=>{this._inputFocused=!0,r(this,l,u).call(this)},this._onFieldBlur=()=>{this._inputFocused=!1,r(this,l,u).call(this)},this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!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._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._onDateSelected=e=>{if(this.value=e.detail.value,this._showDatepicker=!1,this._internals){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}r(this,l,g).call(this),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},"attachInternals"in this&&(this._internals=this.attachInternals())}_syncDensityForSize(){this.size==="extra-small"?this.setAttribute("data-density","-5"):this.size==="small"?this.setAttribute("data-density","-4"):this.size==="medium"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")}render(){const e=this.leadingIcon?d`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,t=this.error?d`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,c=this.type==="search"&&this.value?d`
|
|
2
2
|
<button
|
|
3
3
|
type="button"
|
|
4
4
|
class="scb-textfield-clear"
|
|
@@ -32,13 +32,18 @@ import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"
|
|
|
32
32
|
></line>
|
|
33
33
|
</svg>
|
|
34
34
|
</button>
|
|
35
|
-
`:null;return this.type==="textarea"?
|
|
36
|
-
<label
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
40
|
-
>${this.underLabel}</span
|
|
35
|
+
`:null;return this.type==="textarea"?d`
|
|
36
|
+
<label
|
|
37
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
38
|
+
for="${this._inputId}"
|
|
41
39
|
>
|
|
40
|
+
${this.label}
|
|
41
|
+
</label>
|
|
42
|
+
${this.underLabel?d`
|
|
43
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
44
|
+
${this.underLabel}
|
|
45
|
+
</span>
|
|
46
|
+
`:null}
|
|
42
47
|
<div class="scb-textfield-wrapper">
|
|
43
48
|
<div class="ripple-wrapper">
|
|
44
49
|
<textarea
|
|
@@ -55,13 +60,18 @@ import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"
|
|
|
55
60
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
56
61
|
</div>
|
|
57
62
|
</div>
|
|
58
|
-
`:this.type==="date"?
|
|
59
|
-
<label
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
63
|
-
>${this.underLabel}</span
|
|
63
|
+
`:this.type==="date"?d`
|
|
64
|
+
<label
|
|
65
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
66
|
+
for="${this._inputId}"
|
|
64
67
|
>
|
|
68
|
+
${this.label}
|
|
69
|
+
</label>
|
|
70
|
+
${this.underLabel?d`
|
|
71
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
72
|
+
${this.underLabel}
|
|
73
|
+
</span>
|
|
74
|
+
`:null}
|
|
65
75
|
<div class="scb-textfield-wrapper">
|
|
66
76
|
${e}
|
|
67
77
|
<div class="ripple-wrapper">
|
|
@@ -82,7 +92,7 @@ import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"
|
|
|
82
92
|
<md-ripple></md-ripple>
|
|
83
93
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
84
94
|
</div>
|
|
85
|
-
${this.error?t:
|
|
95
|
+
${this.error?t:d`
|
|
86
96
|
<scb-icon-button
|
|
87
97
|
class="scb-textfield-datepicker-button"
|
|
88
98
|
icon="calendar_today"
|
|
@@ -97,13 +107,18 @@ import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"
|
|
|
97
107
|
@date-selected=${this._onDateSelected}
|
|
98
108
|
></scb-datepicker>
|
|
99
109
|
</div>
|
|
100
|
-
`:this.type==="datetime-local"?
|
|
101
|
-
<label
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
105
|
-
>${this.underLabel}</span
|
|
110
|
+
`:this.type==="datetime-local"?d`
|
|
111
|
+
<label
|
|
112
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
113
|
+
for="${this._inputId}"
|
|
106
114
|
>
|
|
115
|
+
${this.label}
|
|
116
|
+
</label>
|
|
117
|
+
${this.underLabel?d`
|
|
118
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
119
|
+
${this.underLabel}
|
|
120
|
+
</span>
|
|
121
|
+
`:null}
|
|
107
122
|
<div class="scb-textfield-wrapper" style="position:relative;">
|
|
108
123
|
${e}
|
|
109
124
|
<div class="ripple-wrapper">
|
|
@@ -126,7 +141,7 @@ import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"
|
|
|
126
141
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
127
142
|
</div>
|
|
128
143
|
|
|
129
|
-
${this.error?t:
|
|
144
|
+
${this.error?t:d`
|
|
130
145
|
<scb-icon-button
|
|
131
146
|
class="scb-textfield-datepicker-button"
|
|
132
147
|
icon="calendar_today"
|
|
@@ -142,13 +157,18 @@ import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"
|
|
|
142
157
|
@date-selected=${this._onDateSelected}
|
|
143
158
|
></scb-datepicker>
|
|
144
159
|
</div>
|
|
145
|
-
`:this.type==="time"?
|
|
146
|
-
<label
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
150
|
-
>${this.underLabel}</span
|
|
160
|
+
`:this.type==="time"?d`
|
|
161
|
+
<label
|
|
162
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
163
|
+
for="${this._inputId}"
|
|
151
164
|
>
|
|
165
|
+
${this.label}
|
|
166
|
+
</label>
|
|
167
|
+
${this.underLabel?d`
|
|
168
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
169
|
+
${this.underLabel}
|
|
170
|
+
</span>
|
|
171
|
+
`:null}
|
|
152
172
|
<div class="scb-textfield-wrapper">
|
|
153
173
|
${e}
|
|
154
174
|
<div class="ripple-wrapper">
|
|
@@ -162,20 +182,25 @@ import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"
|
|
|
162
182
|
?required=${this.required}
|
|
163
183
|
aria-invalid=${this.error?"true":"false"}
|
|
164
184
|
aria-describedby=${i}
|
|
165
|
-
@input=${
|
|
185
|
+
@input=${o=>{const p=o.target;if(this.value=p.value,this._internals){const h=this.disabled?null:this.value;this._internals.setFormValue(h)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}}
|
|
166
186
|
/>
|
|
167
187
|
${t}
|
|
168
188
|
<md-ripple></md-ripple>
|
|
169
189
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
170
190
|
</div>
|
|
171
191
|
</div>
|
|
172
|
-
`:
|
|
173
|
-
<label
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
177
|
-
>${this.underLabel}</span
|
|
192
|
+
`:d`
|
|
193
|
+
<label
|
|
194
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
195
|
+
for="${this._inputId}"
|
|
178
196
|
>
|
|
197
|
+
${this.label}
|
|
198
|
+
</label>
|
|
199
|
+
${this.underLabel?d`
|
|
200
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
201
|
+
${this.underLabel}
|
|
202
|
+
</span>
|
|
203
|
+
`:null}
|
|
179
204
|
<div class="scb-textfield-wrapper">
|
|
180
205
|
${e}
|
|
181
206
|
<div class="ripple-wrapper">
|
|
@@ -190,13 +215,13 @@ import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"
|
|
|
190
215
|
aria-invalid=${this.error?"true":"false"}
|
|
191
216
|
aria-describedby=${i}
|
|
192
217
|
/>
|
|
193
|
-
${
|
|
218
|
+
${c}
|
|
194
219
|
${t}
|
|
195
220
|
<md-ripple></md-ripple>
|
|
196
221
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
197
222
|
</div>
|
|
198
223
|
</div>
|
|
199
|
-
`}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,this._internals&&this.value&&this._internals.setFormValue(this.value),r(this,
|
|
224
|
+
`}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,this._internals&&this.value&&this._internals.setFormValue(this.value),r(this,l,x).call(this),r(this,l,f).call(this)}updated(e){if(super.updated(e),this.toggleAttribute("aria-disabled",this.disabled),e.has("size")&&this._syncDensityForSize(),this._internals&&(e.has("value")||e.has("disabled"))){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}e.has("type")&&(r(this,l,x).call(this),this._hasRenderedOnce&&r(this,l,y).call(this)),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&r(this,l,f).call(this),this._hasRenderedOnce=!0}formDisabledCallback(e){this.disabled=e}connectedCallback(){super.connectedCallback(),this._syncDensityForSize(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=e=>{this.reportValidity()||(e.preventDefault(),e.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0)),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)),r(this,l,m).call(this),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){this.required&&!e.value?e.setCustomValidity(this.errorText||"Ogiltig inmatning."):e.setCustomValidity("");const t=e.reportValidity();this.error=!t;const i=t?"":this.errorText||e.validationMessage||"Ogiltig inmatning.";return t||(this.errorText=i),this._internals&&(t?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,e)),t}return!0}_onClearClick(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){if(e.value="",this.value="",this._internals){const t=this.disabled?null:this.value;this._internals.setFormValue(t),this._internals.setValidity({})}this.error=!1,e.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),e.focus()}}};l=new WeakSet;f=function(){const e=r(this,l,b).call(this,this.spacing),t=r(this,l,b).call(this,this.spacingTop)??e,i=r(this,l,b).call(this,this.spacingBottom)??e,c=r(this,l,b).call(this,this.spacingLeft),o=r(this,l,b).call(this,this.spacingRight);t?this.style.setProperty("--scb-textfield-spacing-block-start",t):this.style.removeProperty("--scb-textfield-spacing-block-start"),i?this.style.setProperty("--scb-textfield-spacing-block-end",i):this.style.removeProperty("--scb-textfield-spacing-block-end"),c?this.style.setProperty("--scb-textfield-spacing-inline-start",c):this.style.removeProperty("--scb-textfield-spacing-inline-start"),o?this.style.setProperty("--scb-textfield-spacing-inline-end",o):this.style.removeProperty("--scb-textfield-spacing-inline-end")};b=function(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t};g=function(){if(!this.pattern)return;if(!this.value){this.error=!1;return}const e=new RegExp(this.pattern);this.error=!e.test(this.value)};x=function(){const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&this._boundField!==e&&(r(this,l,m).call(this),this._boundField=e,this.type!=="time"&&e.addEventListener("input",this._onFieldInput),e.addEventListener("change",this._onFieldChange),e.addEventListener("select",this._onFieldSelect),e.addEventListener("focus",this._onFieldFocus),e.addEventListener("blur",this._onFieldBlur))};m=function(){const e=this._boundField;e&&(e.removeEventListener("input",this._onFieldInput),e.removeEventListener("change",this._onFieldChange),e.removeEventListener("select",this._onFieldSelect),e.removeEventListener("focus",this._onFieldFocus),e.removeEventListener("blur",this._onFieldBlur),this._boundField=null)};y=function(){this._showDatepicker=!1;const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value="",e.setCustomValidity("")),this.value="",this.error=!1,this._internals){const t=this.disabled?null:"";this._internals.setFormValue(t),this._internals.setValidity({})}};u=function(){const e=this.renderRoot?.querySelector(".ripple-wrapper");e&&(this._inputFocused&&this._kbShouldShowRing?e.setAttribute("data-kb-focus","true"):e.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[_`
|
|
200
225
|
:host {
|
|
201
226
|
--scb-textfield-number-max-width: 280px;
|
|
202
227
|
--scb-textfield-text-max-width: 400px;
|
|
@@ -400,11 +425,15 @@ import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"
|
|
|
400
425
|
letter-spacing: var(--scb-textfield-label-letter-spacing);
|
|
401
426
|
}
|
|
402
427
|
|
|
428
|
+
.scb-textfield-label--without-supporting {
|
|
429
|
+
margin-bottom: var(--scb-textfield-label-gap);
|
|
430
|
+
}
|
|
431
|
+
|
|
403
432
|
.scb-textfield-supporting-text {
|
|
404
433
|
font-size: var(--scb-textfield-supporting-font-size);
|
|
405
434
|
line-height: var(--scb-textfield-supporting-line-height);
|
|
406
435
|
letter-spacing: var(--scb-textfield-supporting-letter-spacing);
|
|
407
|
-
margin-bottom: var(--
|
|
436
|
+
margin-bottom: var(--scb-textfield-label-gap);
|
|
408
437
|
color: var(--md-sys-color-on-surface-variant);
|
|
409
438
|
}
|
|
410
439
|
|
|
@@ -560,4 +589,4 @@ import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"
|
|
|
560
589
|
transform: translateY(-50%);
|
|
561
590
|
z-index: 4;
|
|
562
591
|
}
|
|
563
|
-
`];
|
|
592
|
+
`];a([n({type:String,reflect:!0})],s.prototype,"type",2);a([n({type:String})],s.prototype,"label",2);a([n({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);a([n({type:String,attribute:"error-text"})],s.prototype,"errorText",2);a([n({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);a([n({type:String})],s.prototype,"name",2);a([n({type:String})],s.prototype,"pattern",2);a([n({type:String,attribute:"value"})],s.prototype,"value",2);a([n({type:String})],s.prototype,"underLabel",2);a([n({type:Boolean,reflect:!0})],s.prototype,"error",2);a([n({type:Boolean,reflect:!0})],s.prototype,"disabled",2);a([n({type:Boolean,reflect:!0})],s.prototype,"required",2);a([n({type:String,reflect:!0})],s.prototype,"size",2);a([n({type:String,reflect:!0})],s.prototype,"spacing",2);a([n({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);a([n({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);a([n({type:String,attribute:"spacing-left",reflect:!0})],s.prototype,"spacingLeft",2);a([n({type:String,attribute:"spacing-right",reflect:!0})],s.prototype,"spacingRight",2);a([w()],s.prototype,"_showDatepicker",2);s=a([z("scb-textfield")],s);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.273",
|
|
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": "2F21D3615594E4880CD6A632735C04FFFB39673C09E1BB1AFB88827644131936"
|
|
390
390
|
}
|
package/scb-select/scb-select.js
CHANGED
|
@@ -164,6 +164,7 @@ l.styles = d`
|
|
|
164
164
|
--scb-select-supporting-font-size: var(--md-sys-typescale-body-medium-size);
|
|
165
165
|
--scb-select-supporting-line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
166
166
|
--scb-select-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
167
|
+
--scb-select-label-gap: var(--spacing-3);
|
|
167
168
|
max-width: var(--scb-select-max-width);
|
|
168
169
|
width: 100%;
|
|
169
170
|
margin-block-start: var(--scb-select-spacing-block-start, 0);
|
|
@@ -288,7 +289,7 @@ l.styles = d`
|
|
|
288
289
|
letter-spacing: var(--scb-select-label-letter-spacing);
|
|
289
290
|
}
|
|
290
291
|
.select-label--without-supporting {
|
|
291
|
-
margin-bottom: var(--
|
|
292
|
+
margin-bottom: var(--scb-select-label-gap);
|
|
292
293
|
}
|
|
293
294
|
.select-sub-label{
|
|
294
295
|
display: block;
|
|
@@ -296,7 +297,7 @@ l.styles = d`
|
|
|
296
297
|
line-height: var(--scb-select-supporting-line-height);
|
|
297
298
|
letter-spacing: var(--scb-select-supporting-letter-spacing);
|
|
298
299
|
font-weight: var(--weight-regular);
|
|
299
|
-
margin-bottom: var(--
|
|
300
|
+
margin-bottom: var(--scb-select-label-gap);
|
|
300
301
|
color: var(--md-sys-color-on-surface-variant);
|
|
301
302
|
}
|
|
302
303
|
md-focus-ring {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css as _, LitElement as w, html as
|
|
1
|
+
import { css as _, LitElement as w, html as d } from "lit";
|
|
2
2
|
import { property as n, state as $, customElement as z } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/icon/icon.js";
|
|
4
4
|
import "@material/web/ripple/ripple.js";
|
|
@@ -7,17 +7,17 @@ import "../scb-datepicker/scb-datepicker.js";
|
|
|
7
7
|
import "../scb-icon-button/scb-icon-button.js";
|
|
8
8
|
var k = Object.defineProperty, E = Object.getOwnPropertyDescriptor, v = (e) => {
|
|
9
9
|
throw TypeError(e);
|
|
10
|
-
},
|
|
11
|
-
for (var
|
|
12
|
-
(b = e[h]) && (
|
|
13
|
-
return
|
|
14
|
-
},
|
|
10
|
+
}, a = (e, t, i, o) => {
|
|
11
|
+
for (var c = o > 1 ? void 0 : o ? E(t, i) : t, h = e.length - 1, b; h >= 0; h--)
|
|
12
|
+
(b = e[h]) && (c = (o ? b(t, i, c) : b(c)) || c);
|
|
13
|
+
return o && c && k(t, i, c), c;
|
|
14
|
+
}, L = (e, t, i) => t.has(e) || v("Cannot " + i), S = (e, t, i) => t.has(e) ? v("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), r = (e, t, i) => (L(e, t, "access private method"), i), l, f, p, g, x, m, y, u;
|
|
15
15
|
let s = class extends w {
|
|
16
16
|
constructor() {
|
|
17
|
-
super(),
|
|
18
|
-
e.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && r(this,
|
|
17
|
+
super(), S(this, l), this._internals = null, this._inputFocused = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (e) => {
|
|
18
|
+
e.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && r(this, l, u).call(this));
|
|
19
19
|
}, this._onGlobalPointerDown = () => {
|
|
20
|
-
this._kbShouldShowRing = !1, this._inputFocused && r(this,
|
|
20
|
+
this._kbShouldShowRing = !1, this._inputFocused && r(this, l, u).call(this);
|
|
21
21
|
}, this._hasRenderedOnce = !1, this._boundField = null, this._onFieldInput = () => {
|
|
22
22
|
const e = this._boundField;
|
|
23
23
|
if (!e) return;
|
|
@@ -26,7 +26,7 @@ let s = class extends w {
|
|
|
26
26
|
const i = this.disabled ? null : this.value;
|
|
27
27
|
this._internals.setFormValue(i);
|
|
28
28
|
}
|
|
29
|
-
r(this,
|
|
29
|
+
r(this, l, g).call(this), this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
|
|
30
30
|
new CustomEvent("onValueChanged", {
|
|
31
31
|
detail: { value: this.value },
|
|
32
32
|
bubbles: !0,
|
|
@@ -38,9 +38,9 @@ let s = class extends w {
|
|
|
38
38
|
}, this._onFieldSelect = () => {
|
|
39
39
|
this.dispatchEvent(new Event("select", { bubbles: !0, composed: !0 }));
|
|
40
40
|
}, this._onFieldFocus = () => {
|
|
41
|
-
this._inputFocused = !0, r(this,
|
|
41
|
+
this._inputFocused = !0, r(this, l, u).call(this);
|
|
42
42
|
}, this._onFieldBlur = () => {
|
|
43
|
-
this._inputFocused = !1, r(this,
|
|
43
|
+
this._inputFocused = !1, r(this, l, u).call(this);
|
|
44
44
|
}, this.type = "text", this.label = "", this.supportingText = "", this.errorText = "", this.leadingIcon = "", this.name = "", this.pattern = "", this.value = "", this.underLabel = "", this.error = !1, this.disabled = !1, this.required = !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._form = null, this._formSubmitHandler = null, this._formResetHandler = null, this._initialValue = "", this._inputId = "", this._showDatepicker = !1, this._toggleDatepicker = () => {
|
|
45
45
|
this._showDatepicker = !this._showDatepicker;
|
|
46
46
|
}, this._onDateSelected = (e) => {
|
|
@@ -48,7 +48,7 @@ let s = class extends w {
|
|
|
48
48
|
const t = this.disabled ? null : this.value;
|
|
49
49
|
this._internals.setFormValue(t);
|
|
50
50
|
}
|
|
51
|
-
r(this,
|
|
51
|
+
r(this, l, g).call(this), this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
|
|
52
52
|
new CustomEvent("onValueChanged", {
|
|
53
53
|
detail: { value: this.value },
|
|
54
54
|
bubbles: !0,
|
|
@@ -61,9 +61,9 @@ let s = class extends w {
|
|
|
61
61
|
this.size === "extra-small" ? this.setAttribute("data-density", "-5") : this.size === "small" ? this.setAttribute("data-density", "-4") : this.size === "medium" ? this.setAttribute("data-density", "-2") : this.removeAttribute("data-density");
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
|
-
const e = this.leadingIcon ?
|
|
64
|
+
const e = this.leadingIcon ? d`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, t = this.error ? d`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>` : null;
|
|
65
65
|
this.underLabel = this.error ? this.errorText || "Ogiltig inmatning." : this.supportingText, this.value = this.value || "";
|
|
66
|
-
const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0,
|
|
66
|
+
const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0, o = this.type === "search" && this.value ? d`
|
|
67
67
|
<button
|
|
68
68
|
type="button"
|
|
69
69
|
class="scb-textfield-clear"
|
|
@@ -98,13 +98,18 @@ let s = class extends w {
|
|
|
98
98
|
</svg>
|
|
99
99
|
</button>
|
|
100
100
|
` : null;
|
|
101
|
-
return this.type === "textarea" ?
|
|
102
|
-
<label
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
|
|
106
|
-
>${this.underLabel}</span
|
|
101
|
+
return this.type === "textarea" ? d`
|
|
102
|
+
<label
|
|
103
|
+
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
104
|
+
for="${this._inputId}"
|
|
107
105
|
>
|
|
106
|
+
${this.label}
|
|
107
|
+
</label>
|
|
108
|
+
${this.underLabel ? d`
|
|
109
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
110
|
+
${this.underLabel}
|
|
111
|
+
</span>
|
|
112
|
+
` : null}
|
|
108
113
|
<div class="scb-textfield-wrapper">
|
|
109
114
|
<div class="ripple-wrapper">
|
|
110
115
|
<textarea
|
|
@@ -121,13 +126,18 @@ let s = class extends w {
|
|
|
121
126
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
122
127
|
</div>
|
|
123
128
|
</div>
|
|
124
|
-
` : this.type === "date" ?
|
|
125
|
-
<label
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
|
|
129
|
-
>${this.underLabel}</span
|
|
129
|
+
` : this.type === "date" ? d`
|
|
130
|
+
<label
|
|
131
|
+
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
132
|
+
for="${this._inputId}"
|
|
130
133
|
>
|
|
134
|
+
${this.label}
|
|
135
|
+
</label>
|
|
136
|
+
${this.underLabel ? d`
|
|
137
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
138
|
+
${this.underLabel}
|
|
139
|
+
</span>
|
|
140
|
+
` : null}
|
|
131
141
|
<div class="scb-textfield-wrapper">
|
|
132
142
|
${e}
|
|
133
143
|
<div class="ripple-wrapper">
|
|
@@ -148,7 +158,7 @@ let s = class extends w {
|
|
|
148
158
|
<md-ripple></md-ripple>
|
|
149
159
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
150
160
|
</div>
|
|
151
|
-
${this.error ? t :
|
|
161
|
+
${this.error ? t : d`
|
|
152
162
|
<scb-icon-button
|
|
153
163
|
class="scb-textfield-datepicker-button"
|
|
154
164
|
icon="calendar_today"
|
|
@@ -163,13 +173,18 @@ let s = class extends w {
|
|
|
163
173
|
@date-selected=${this._onDateSelected}
|
|
164
174
|
></scb-datepicker>
|
|
165
175
|
</div>
|
|
166
|
-
` : this.type === "datetime-local" ?
|
|
167
|
-
<label
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
|
|
171
|
-
>${this.underLabel}</span
|
|
176
|
+
` : this.type === "datetime-local" ? d`
|
|
177
|
+
<label
|
|
178
|
+
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
179
|
+
for="${this._inputId}"
|
|
172
180
|
>
|
|
181
|
+
${this.label}
|
|
182
|
+
</label>
|
|
183
|
+
${this.underLabel ? d`
|
|
184
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
185
|
+
${this.underLabel}
|
|
186
|
+
</span>
|
|
187
|
+
` : null}
|
|
173
188
|
<div class="scb-textfield-wrapper" style="position:relative;">
|
|
174
189
|
${e}
|
|
175
190
|
<div class="ripple-wrapper">
|
|
@@ -192,7 +207,7 @@ let s = class extends w {
|
|
|
192
207
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
193
208
|
</div>
|
|
194
209
|
|
|
195
|
-
${this.error ? t :
|
|
210
|
+
${this.error ? t : d`
|
|
196
211
|
<scb-icon-button
|
|
197
212
|
class="scb-textfield-datepicker-button"
|
|
198
213
|
icon="calendar_today"
|
|
@@ -208,13 +223,18 @@ let s = class extends w {
|
|
|
208
223
|
@date-selected=${this._onDateSelected}
|
|
209
224
|
></scb-datepicker>
|
|
210
225
|
</div>
|
|
211
|
-
` : this.type === "time" ?
|
|
212
|
-
<label
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
|
|
216
|
-
>${this.underLabel}</span
|
|
226
|
+
` : this.type === "time" ? d`
|
|
227
|
+
<label
|
|
228
|
+
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
229
|
+
for="${this._inputId}"
|
|
217
230
|
>
|
|
231
|
+
${this.label}
|
|
232
|
+
</label>
|
|
233
|
+
${this.underLabel ? d`
|
|
234
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
235
|
+
${this.underLabel}
|
|
236
|
+
</span>
|
|
237
|
+
` : null}
|
|
218
238
|
<div class="scb-textfield-wrapper">
|
|
219
239
|
${e}
|
|
220
240
|
<div class="ripple-wrapper">
|
|
@@ -228,8 +248,8 @@ let s = class extends w {
|
|
|
228
248
|
?required=${this.required}
|
|
229
249
|
aria-invalid=${this.error ? "true" : "false"}
|
|
230
250
|
aria-describedby=${i}
|
|
231
|
-
@input=${(
|
|
232
|
-
const h =
|
|
251
|
+
@input=${(c) => {
|
|
252
|
+
const h = c.target;
|
|
233
253
|
if (this.value = h.value, this._internals) {
|
|
234
254
|
const b = this.disabled ? null : this.value;
|
|
235
255
|
this._internals.setFormValue(b);
|
|
@@ -248,13 +268,18 @@ let s = class extends w {
|
|
|
248
268
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
249
269
|
</div>
|
|
250
270
|
</div>
|
|
251
|
-
` :
|
|
252
|
-
<label
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
|
|
256
|
-
>${this.underLabel}</span
|
|
271
|
+
` : d`
|
|
272
|
+
<label
|
|
273
|
+
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
274
|
+
for="${this._inputId}"
|
|
257
275
|
>
|
|
276
|
+
${this.label}
|
|
277
|
+
</label>
|
|
278
|
+
${this.underLabel ? d`
|
|
279
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
280
|
+
${this.underLabel}
|
|
281
|
+
</span>
|
|
282
|
+
` : null}
|
|
258
283
|
<div class="scb-textfield-wrapper">
|
|
259
284
|
${e}
|
|
260
285
|
<div class="ripple-wrapper">
|
|
@@ -269,7 +294,7 @@ let s = class extends w {
|
|
|
269
294
|
aria-invalid=${this.error ? "true" : "false"}
|
|
270
295
|
aria-describedby=${i}
|
|
271
296
|
/>
|
|
272
|
-
${
|
|
297
|
+
${o}
|
|
273
298
|
${t}
|
|
274
299
|
<md-ripple></md-ripple>
|
|
275
300
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
@@ -282,14 +307,14 @@ let s = class extends w {
|
|
|
282
307
|
* Vi kör också ett customevent onValueChanged.
|
|
283
308
|
*/
|
|
284
309
|
firstUpdated(e) {
|
|
285
|
-
super.firstUpdated(e), this._initialValue = this.value, this._internals && this.value && this._internals.setFormValue(this.value), r(this,
|
|
310
|
+
super.firstUpdated(e), this._initialValue = this.value, this._internals && this.value && this._internals.setFormValue(this.value), r(this, l, x).call(this), r(this, l, f).call(this);
|
|
286
311
|
}
|
|
287
312
|
updated(e) {
|
|
288
313
|
if (super.updated(e), this.toggleAttribute("aria-disabled", this.disabled), e.has("size") && this._syncDensityForSize(), this._internals && (e.has("value") || e.has("disabled"))) {
|
|
289
314
|
const t = this.disabled ? null : this.value;
|
|
290
315
|
this._internals.setFormValue(t);
|
|
291
316
|
}
|
|
292
|
-
e.has("type") && (r(this,
|
|
317
|
+
e.has("type") && (r(this, l, x).call(this), this._hasRenderedOnce && r(this, l, y).call(this)), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && r(this, l, f).call(this), this._hasRenderedOnce = !0;
|
|
293
318
|
}
|
|
294
319
|
// Körs av webbläsaren när formuläret sätter disabled på kontrollen
|
|
295
320
|
formDisabledCallback(e) {
|
|
@@ -307,7 +332,7 @@ let s = class extends w {
|
|
|
307
332
|
}, this._form.addEventListener("reset", this._formResetHandler, !0)), window.addEventListener("keydown", this._onGlobalKeydown, !0), window.addEventListener("pointerdown", this._onGlobalPointerDown, !0);
|
|
308
333
|
}
|
|
309
334
|
disconnectedCallback() {
|
|
310
|
-
super.disconnectedCallback(), this._form && this._formSubmitHandler && (this._form.removeEventListener("submit", this._formSubmitHandler, !0), this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0)), r(this,
|
|
335
|
+
super.disconnectedCallback(), this._form && this._formSubmitHandler && (this._form.removeEventListener("submit", this._formSubmitHandler, !0), this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0)), r(this, l, m).call(this), window.removeEventListener("keydown", this._onGlobalKeydown, !0), window.removeEventListener("pointerdown", this._onGlobalPointerDown, !0);
|
|
311
336
|
}
|
|
312
337
|
/**
|
|
313
338
|
* Kallar på reportValidity på den inbyggda input/textarea och sätter felstatus till error-text.
|
|
@@ -319,8 +344,8 @@ let s = class extends w {
|
|
|
319
344
|
this.required && !e.value ? e.setCustomValidity(this.errorText || "Ogiltig inmatning.") : e.setCustomValidity("");
|
|
320
345
|
const i = e.reportValidity();
|
|
321
346
|
this.error = !i;
|
|
322
|
-
const
|
|
323
|
-
return i || (this.errorText =
|
|
347
|
+
const o = i ? "" : this.errorText || e.validationMessage || "Ogiltig inmatning.";
|
|
348
|
+
return i || (this.errorText = o), this._internals && (i ? this._internals.setValidity({}) : this._internals.setValidity({ customError: !0 }, o, e)), i;
|
|
324
349
|
}
|
|
325
350
|
return !0;
|
|
326
351
|
}
|
|
@@ -346,10 +371,10 @@ let s = class extends w {
|
|
|
346
371
|
}
|
|
347
372
|
}
|
|
348
373
|
};
|
|
349
|
-
|
|
374
|
+
l = /* @__PURE__ */ new WeakSet();
|
|
350
375
|
f = function() {
|
|
351
|
-
const e = r(this,
|
|
352
|
-
t ? this.style.setProperty("--scb-textfield-spacing-block-start", t) : this.style.removeProperty("--scb-textfield-spacing-block-start"), i ? this.style.setProperty("--scb-textfield-spacing-block-end", i) : this.style.removeProperty("--scb-textfield-spacing-block-end"),
|
|
376
|
+
const e = r(this, l, p).call(this, this.spacing), t = r(this, l, p).call(this, this.spacingTop) ?? e, i = r(this, l, p).call(this, this.spacingBottom) ?? e, o = r(this, l, p).call(this, this.spacingLeft), c = r(this, l, p).call(this, this.spacingRight);
|
|
377
|
+
t ? this.style.setProperty("--scb-textfield-spacing-block-start", t) : this.style.removeProperty("--scb-textfield-spacing-block-start"), i ? this.style.setProperty("--scb-textfield-spacing-block-end", i) : this.style.removeProperty("--scb-textfield-spacing-block-end"), o ? this.style.setProperty("--scb-textfield-spacing-inline-start", o) : this.style.removeProperty("--scb-textfield-spacing-inline-start"), c ? this.style.setProperty("--scb-textfield-spacing-inline-end", c) : this.style.removeProperty("--scb-textfield-spacing-inline-end");
|
|
353
378
|
};
|
|
354
379
|
p = function(e) {
|
|
355
380
|
if (!e) return;
|
|
@@ -366,12 +391,12 @@ g = function() {
|
|
|
366
391
|
const e = new RegExp(this.pattern);
|
|
367
392
|
this.error = !e.test(this.value);
|
|
368
393
|
};
|
|
369
|
-
|
|
394
|
+
x = function() {
|
|
370
395
|
var t;
|
|
371
396
|
const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".scb-textfield");
|
|
372
|
-
e && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) && this._boundField !== e && (r(this,
|
|
397
|
+
e && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) && this._boundField !== e && (r(this, l, m).call(this), this._boundField = e, this.type !== "time" && e.addEventListener("input", this._onFieldInput), e.addEventListener("change", this._onFieldChange), e.addEventListener("select", this._onFieldSelect), e.addEventListener("focus", this._onFieldFocus), e.addEventListener("blur", this._onFieldBlur));
|
|
373
398
|
};
|
|
374
|
-
|
|
399
|
+
m = function() {
|
|
375
400
|
const e = this._boundField;
|
|
376
401
|
e && (e.removeEventListener("input", this._onFieldInput), e.removeEventListener("change", this._onFieldChange), e.removeEventListener("select", this._onFieldSelect), e.removeEventListener("focus", this._onFieldFocus), e.removeEventListener("blur", this._onFieldBlur), this._boundField = null);
|
|
377
402
|
};
|
|
@@ -595,11 +620,15 @@ s.styles = [
|
|
|
595
620
|
letter-spacing: var(--scb-textfield-label-letter-spacing);
|
|
596
621
|
}
|
|
597
622
|
|
|
623
|
+
.scb-textfield-label--without-supporting {
|
|
624
|
+
margin-bottom: var(--scb-textfield-label-gap);
|
|
625
|
+
}
|
|
626
|
+
|
|
598
627
|
.scb-textfield-supporting-text {
|
|
599
628
|
font-size: var(--scb-textfield-supporting-font-size);
|
|
600
629
|
line-height: var(--scb-textfield-supporting-line-height);
|
|
601
630
|
letter-spacing: var(--scb-textfield-supporting-letter-spacing);
|
|
602
|
-
margin-bottom: var(--
|
|
631
|
+
margin-bottom: var(--scb-textfield-label-gap);
|
|
603
632
|
color: var(--md-sys-color-on-surface-variant);
|
|
604
633
|
}
|
|
605
634
|
|
|
@@ -757,64 +786,64 @@ s.styles = [
|
|
|
757
786
|
}
|
|
758
787
|
`
|
|
759
788
|
];
|
|
760
|
-
|
|
789
|
+
a([
|
|
761
790
|
n({ type: String, reflect: !0 })
|
|
762
791
|
], s.prototype, "type", 2);
|
|
763
|
-
|
|
792
|
+
a([
|
|
764
793
|
n({ type: String })
|
|
765
794
|
], s.prototype, "label", 2);
|
|
766
|
-
|
|
795
|
+
a([
|
|
767
796
|
n({ type: String, attribute: "supporting-text" })
|
|
768
797
|
], s.prototype, "supportingText", 2);
|
|
769
|
-
|
|
798
|
+
a([
|
|
770
799
|
n({ type: String, attribute: "error-text" })
|
|
771
800
|
], s.prototype, "errorText", 2);
|
|
772
|
-
|
|
801
|
+
a([
|
|
773
802
|
n({ type: String, attribute: "leading-icon" })
|
|
774
803
|
], s.prototype, "leadingIcon", 2);
|
|
775
|
-
|
|
804
|
+
a([
|
|
776
805
|
n({ type: String })
|
|
777
806
|
], s.prototype, "name", 2);
|
|
778
|
-
|
|
807
|
+
a([
|
|
779
808
|
n({ type: String })
|
|
780
809
|
], s.prototype, "pattern", 2);
|
|
781
|
-
|
|
810
|
+
a([
|
|
782
811
|
n({ type: String, attribute: "value" })
|
|
783
812
|
], s.prototype, "value", 2);
|
|
784
|
-
|
|
813
|
+
a([
|
|
785
814
|
n({ type: String })
|
|
786
815
|
], s.prototype, "underLabel", 2);
|
|
787
|
-
|
|
816
|
+
a([
|
|
788
817
|
n({ type: Boolean, reflect: !0 })
|
|
789
818
|
], s.prototype, "error", 2);
|
|
790
|
-
|
|
819
|
+
a([
|
|
791
820
|
n({ type: Boolean, reflect: !0 })
|
|
792
821
|
], s.prototype, "disabled", 2);
|
|
793
|
-
|
|
822
|
+
a([
|
|
794
823
|
n({ type: Boolean, reflect: !0 })
|
|
795
824
|
], s.prototype, "required", 2);
|
|
796
|
-
|
|
825
|
+
a([
|
|
797
826
|
n({ type: String, reflect: !0 })
|
|
798
827
|
], s.prototype, "size", 2);
|
|
799
|
-
|
|
828
|
+
a([
|
|
800
829
|
n({ type: String, reflect: !0 })
|
|
801
830
|
], s.prototype, "spacing", 2);
|
|
802
|
-
|
|
831
|
+
a([
|
|
803
832
|
n({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
804
833
|
], s.prototype, "spacingTop", 2);
|
|
805
|
-
|
|
834
|
+
a([
|
|
806
835
|
n({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
807
836
|
], s.prototype, "spacingBottom", 2);
|
|
808
|
-
|
|
837
|
+
a([
|
|
809
838
|
n({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
810
839
|
], s.prototype, "spacingLeft", 2);
|
|
811
|
-
|
|
840
|
+
a([
|
|
812
841
|
n({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
813
842
|
], s.prototype, "spacingRight", 2);
|
|
814
|
-
|
|
843
|
+
a([
|
|
815
844
|
$()
|
|
816
845
|
], s.prototype, "_showDatepicker", 2);
|
|
817
|
-
s =
|
|
846
|
+
s = a([
|
|
818
847
|
z("scb-textfield")
|
|
819
848
|
], s);
|
|
820
849
|
export {
|
package/scb-wc-test-selfhost.css
CHANGED
|
@@ -4,9 +4,7 @@
|
|
|
4
4
|
font-style: normal;
|
|
5
5
|
font-weight: 100 900;
|
|
6
6
|
font-display: swap;
|
|
7
|
-
src:
|
|
8
|
-
local('Inter'),
|
|
9
|
-
url('./fonts/inter/files/inter-latin-wght-normal.woff2') format('woff2');
|
|
7
|
+
src: url('./fonts/inter/files/inter-latin-wght-normal.woff2') format('woff2');
|
|
10
8
|
}
|
|
11
9
|
|
|
12
10
|
@font-face {
|
|
@@ -14,10 +12,7 @@
|
|
|
14
12
|
font-style: italic;
|
|
15
13
|
font-weight: 100 900;
|
|
16
14
|
font-display: swap;
|
|
17
|
-
src:
|
|
18
|
-
local('Inter Italic'),
|
|
19
|
-
local('Inter'),
|
|
20
|
-
url('./fonts/inter/files/inter-latin-wght-italic.woff2') format('woff2');
|
|
15
|
+
src: url('./fonts/inter/files/inter-latin-wght-italic.woff2') format('woff2');
|
|
21
16
|
}
|
|
22
17
|
|
|
23
18
|
/* Material Symbols Outlined (selfhost) */
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -3800,12 +3800,17 @@
|
|
|
3800
3800
|
</svg>
|
|
3801
3801
|
</button>
|
|
3802
3802
|
`:null;return this.type==="textarea"?c`
|
|
3803
|
-
<label
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
3807
|
-
>${this.underLabel}</span
|
|
3803
|
+
<label
|
|
3804
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3805
|
+
for="${this._inputId}"
|
|
3808
3806
|
>
|
|
3807
|
+
${this.label}
|
|
3808
|
+
</label>
|
|
3809
|
+
${this.underLabel?c`
|
|
3810
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
3811
|
+
${this.underLabel}
|
|
3812
|
+
</span>
|
|
3813
|
+
`:null}
|
|
3809
3814
|
<div class="scb-textfield-wrapper">
|
|
3810
3815
|
<div class="ripple-wrapper">
|
|
3811
3816
|
<textarea
|
|
@@ -3823,12 +3828,17 @@
|
|
|
3823
3828
|
</div>
|
|
3824
3829
|
</div>
|
|
3825
3830
|
`:this.type==="date"?c`
|
|
3826
|
-
<label
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
3830
|
-
>${this.underLabel}</span
|
|
3831
|
+
<label
|
|
3832
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3833
|
+
for="${this._inputId}"
|
|
3831
3834
|
>
|
|
3835
|
+
${this.label}
|
|
3836
|
+
</label>
|
|
3837
|
+
${this.underLabel?c`
|
|
3838
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
3839
|
+
${this.underLabel}
|
|
3840
|
+
</span>
|
|
3841
|
+
`:null}
|
|
3832
3842
|
<div class="scb-textfield-wrapper">
|
|
3833
3843
|
${t}
|
|
3834
3844
|
<div class="ripple-wrapper">
|
|
@@ -3865,12 +3875,17 @@
|
|
|
3865
3875
|
></scb-datepicker>
|
|
3866
3876
|
</div>
|
|
3867
3877
|
`:this.type==="datetime-local"?c`
|
|
3868
|
-
<label
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
3872
|
-
>${this.underLabel}</span
|
|
3878
|
+
<label
|
|
3879
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3880
|
+
for="${this._inputId}"
|
|
3873
3881
|
>
|
|
3882
|
+
${this.label}
|
|
3883
|
+
</label>
|
|
3884
|
+
${this.underLabel?c`
|
|
3885
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
3886
|
+
${this.underLabel}
|
|
3887
|
+
</span>
|
|
3888
|
+
`:null}
|
|
3874
3889
|
<div class="scb-textfield-wrapper" style="position:relative;">
|
|
3875
3890
|
${t}
|
|
3876
3891
|
<div class="ripple-wrapper">
|
|
@@ -3910,12 +3925,17 @@
|
|
|
3910
3925
|
></scb-datepicker>
|
|
3911
3926
|
</div>
|
|
3912
3927
|
`:this.type==="time"?c`
|
|
3913
|
-
<label
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
3917
|
-
>${this.underLabel}</span
|
|
3928
|
+
<label
|
|
3929
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3930
|
+
for="${this._inputId}"
|
|
3918
3931
|
>
|
|
3932
|
+
${this.label}
|
|
3933
|
+
</label>
|
|
3934
|
+
${this.underLabel?c`
|
|
3935
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
3936
|
+
${this.underLabel}
|
|
3937
|
+
</span>
|
|
3938
|
+
`:null}
|
|
3919
3939
|
<div class="scb-textfield-wrapper">
|
|
3920
3940
|
${t}
|
|
3921
3941
|
<div class="ripple-wrapper">
|
|
@@ -3937,12 +3957,17 @@
|
|
|
3937
3957
|
</div>
|
|
3938
3958
|
</div>
|
|
3939
3959
|
`:c`
|
|
3940
|
-
<label
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
3944
|
-
>${this.underLabel}</span
|
|
3960
|
+
<label
|
|
3961
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3962
|
+
for="${this._inputId}"
|
|
3945
3963
|
>
|
|
3964
|
+
${this.label}
|
|
3965
|
+
</label>
|
|
3966
|
+
${this.underLabel?c`
|
|
3967
|
+
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
3968
|
+
${this.underLabel}
|
|
3969
|
+
</span>
|
|
3970
|
+
`:null}
|
|
3946
3971
|
<div class="scb-textfield-wrapper">
|
|
3947
3972
|
${t}
|
|
3948
3973
|
<div class="ripple-wrapper">
|
|
@@ -4167,11 +4192,15 @@
|
|
|
4167
4192
|
letter-spacing: var(--scb-textfield-label-letter-spacing);
|
|
4168
4193
|
}
|
|
4169
4194
|
|
|
4195
|
+
.scb-textfield-label--without-supporting {
|
|
4196
|
+
margin-bottom: var(--scb-textfield-label-gap);
|
|
4197
|
+
}
|
|
4198
|
+
|
|
4170
4199
|
.scb-textfield-supporting-text {
|
|
4171
4200
|
font-size: var(--scb-textfield-supporting-font-size);
|
|
4172
4201
|
line-height: var(--scb-textfield-supporting-line-height);
|
|
4173
4202
|
letter-spacing: var(--scb-textfield-supporting-letter-spacing);
|
|
4174
|
-
margin-bottom: var(--
|
|
4203
|
+
margin-bottom: var(--scb-textfield-label-gap);
|
|
4175
4204
|
color: var(--md-sys-color-on-surface-variant);
|
|
4176
4205
|
}
|
|
4177
4206
|
|
|
@@ -10932,6 +10961,7 @@
|
|
|
10932
10961
|
--scb-select-supporting-font-size: var(--md-sys-typescale-body-medium-size);
|
|
10933
10962
|
--scb-select-supporting-line-height: var(--md-sys-typescale-body-medium-line-height);
|
|
10934
10963
|
--scb-select-supporting-letter-spacing: var(--md-sys-typescale-body-medium-tracking);
|
|
10964
|
+
--scb-select-label-gap: var(--spacing-3);
|
|
10935
10965
|
max-width: var(--scb-select-max-width);
|
|
10936
10966
|
width: 100%;
|
|
10937
10967
|
margin-block-start: var(--scb-select-spacing-block-start, 0);
|
|
@@ -11056,7 +11086,7 @@
|
|
|
11056
11086
|
letter-spacing: var(--scb-select-label-letter-spacing);
|
|
11057
11087
|
}
|
|
11058
11088
|
.select-label--without-supporting {
|
|
11059
|
-
margin-bottom: var(--
|
|
11089
|
+
margin-bottom: var(--scb-select-label-gap);
|
|
11060
11090
|
}
|
|
11061
11091
|
.select-sub-label{
|
|
11062
11092
|
display: block;
|
|
@@ -11064,7 +11094,7 @@
|
|
|
11064
11094
|
line-height: var(--scb-select-supporting-line-height);
|
|
11065
11095
|
letter-spacing: var(--scb-select-supporting-letter-spacing);
|
|
11066
11096
|
font-weight: var(--weight-regular);
|
|
11067
|
-
margin-bottom: var(--
|
|
11097
|
+
margin-bottom: var(--scb-select-label-gap);
|
|
11068
11098
|
color: var(--md-sys-color-on-surface-variant);
|
|
11069
11099
|
}
|
|
11070
11100
|
md-focus-ring {
|