scb-wc-test 0.1.272 → 0.1.274
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.
|
@@ -1,16 +1,4 @@
|
|
|
1
|
-
import{a as _,n,r as w,i as
|
|
2
|
-
<label
|
|
3
|
-
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
4
|
-
for="${this._inputId}"
|
|
5
|
-
>
|
|
6
|
-
${this.label}
|
|
7
|
-
</label>
|
|
8
|
-
${this.underLabel?o`
|
|
9
|
-
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
10
|
-
${this.underLabel}
|
|
11
|
-
</span>
|
|
12
|
-
`:""}
|
|
13
|
-
`}render(){const e=this.leadingIcon?o`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,t=this.error?o`<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?o`
|
|
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`
|
|
14
2
|
<button
|
|
15
3
|
type="button"
|
|
16
4
|
class="scb-textfield-clear"
|
|
@@ -44,8 +32,18 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
44
32
|
></line>
|
|
45
33
|
</svg>
|
|
46
34
|
</button>
|
|
47
|
-
`:null;return this.type==="textarea"?
|
|
48
|
-
|
|
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}"
|
|
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}
|
|
49
47
|
<div class="scb-textfield-wrapper">
|
|
50
48
|
<div class="ripple-wrapper">
|
|
51
49
|
<textarea
|
|
@@ -62,8 +60,18 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
62
60
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
63
61
|
</div>
|
|
64
62
|
</div>
|
|
65
|
-
`:this.type==="date"?
|
|
66
|
-
|
|
63
|
+
`:this.type==="date"?d`
|
|
64
|
+
<label
|
|
65
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
66
|
+
for="${this._inputId}"
|
|
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}
|
|
67
75
|
<div class="scb-textfield-wrapper">
|
|
68
76
|
${e}
|
|
69
77
|
<div class="ripple-wrapper">
|
|
@@ -84,7 +92,7 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
84
92
|
<md-ripple></md-ripple>
|
|
85
93
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
86
94
|
</div>
|
|
87
|
-
${this.error?t:
|
|
95
|
+
${this.error?t:d`
|
|
88
96
|
<scb-icon-button
|
|
89
97
|
class="scb-textfield-datepicker-button"
|
|
90
98
|
icon="calendar_today"
|
|
@@ -99,8 +107,18 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
99
107
|
@date-selected=${this._onDateSelected}
|
|
100
108
|
></scb-datepicker>
|
|
101
109
|
</div>
|
|
102
|
-
`:this.type==="datetime-local"?
|
|
103
|
-
|
|
110
|
+
`:this.type==="datetime-local"?d`
|
|
111
|
+
<label
|
|
112
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
113
|
+
for="${this._inputId}"
|
|
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}
|
|
104
122
|
<div class="scb-textfield-wrapper" style="position:relative;">
|
|
105
123
|
${e}
|
|
106
124
|
<div class="ripple-wrapper">
|
|
@@ -123,7 +141,7 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
123
141
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
124
142
|
</div>
|
|
125
143
|
|
|
126
|
-
${this.error?t:
|
|
144
|
+
${this.error?t:d`
|
|
127
145
|
<scb-icon-button
|
|
128
146
|
class="scb-textfield-datepicker-button"
|
|
129
147
|
icon="calendar_today"
|
|
@@ -139,8 +157,18 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
139
157
|
@date-selected=${this._onDateSelected}
|
|
140
158
|
></scb-datepicker>
|
|
141
159
|
</div>
|
|
142
|
-
`:this.type==="time"?
|
|
143
|
-
|
|
160
|
+
`:this.type==="time"?d`
|
|
161
|
+
<label
|
|
162
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
163
|
+
for="${this._inputId}"
|
|
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}
|
|
144
172
|
<div class="scb-textfield-wrapper">
|
|
145
173
|
${e}
|
|
146
174
|
<div class="ripple-wrapper">
|
|
@@ -154,15 +182,25 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
154
182
|
?required=${this.required}
|
|
155
183
|
aria-invalid=${this.error?"true":"false"}
|
|
156
184
|
aria-describedby=${i}
|
|
157
|
-
@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}))}}
|
|
158
186
|
/>
|
|
159
187
|
${t}
|
|
160
188
|
<md-ripple></md-ripple>
|
|
161
189
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
162
190
|
</div>
|
|
163
191
|
</div>
|
|
164
|
-
`:
|
|
165
|
-
|
|
192
|
+
`:d`
|
|
193
|
+
<label
|
|
194
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
195
|
+
for="${this._inputId}"
|
|
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}
|
|
166
204
|
<div class="scb-textfield-wrapper">
|
|
167
205
|
${e}
|
|
168
206
|
<div class="ripple-wrapper">
|
|
@@ -183,7 +221,7 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
183
221
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
184
222
|
</div>
|
|
185
223
|
</div>
|
|
186
|
-
`}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,this._internals&&this.value&&this._internals.setFormValue(this.value),
|
|
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=[_`
|
|
187
225
|
:host {
|
|
188
226
|
--scb-textfield-number-max-width: 280px;
|
|
189
227
|
--scb-textfield-text-max-width: 400px;
|
|
@@ -382,6 +420,7 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
382
420
|
}
|
|
383
421
|
|
|
384
422
|
.scb-textfield-label {
|
|
423
|
+
display: block;
|
|
385
424
|
font-size: var(--scb-textfield-label-font-size);
|
|
386
425
|
font-weight: var(--weight-semibold);
|
|
387
426
|
line-height: var(--scb-textfield-label-line-height);
|
|
@@ -393,6 +432,7 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
393
432
|
}
|
|
394
433
|
|
|
395
434
|
.scb-textfield-supporting-text {
|
|
435
|
+
display: block;
|
|
396
436
|
font-size: var(--scb-textfield-supporting-font-size);
|
|
397
437
|
line-height: var(--scb-textfield-supporting-line-height);
|
|
398
438
|
letter-spacing: var(--scb-textfield-supporting-letter-spacing);
|
|
@@ -552,4 +592,4 @@ import{a as _,n,r as w,i as k,x as o,t as z}from"../../vendor/vendor.js";import"
|
|
|
552
592
|
transform: translateY(-50%);
|
|
553
593
|
z-index: 4;
|
|
554
594
|
}
|
|
555
|
-
`];
|
|
595
|
+
`];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.274",
|
|
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": "C06DAC5AAEFE8977778D5A10377C1C740B4D8DF65976D9AD6BAB749423F6125C"
|
|
390
390
|
}
|
|
@@ -46,7 +46,6 @@ export declare class ScbTextField extends LitElement {
|
|
|
46
46
|
private _showDatepicker;
|
|
47
47
|
static styles: import('lit').CSSResult[];
|
|
48
48
|
private _syncDensityForSize;
|
|
49
|
-
private _renderLabelBlock;
|
|
50
49
|
render(): TemplateResult;
|
|
51
50
|
private _toggleDatepicker;
|
|
52
51
|
private _onDateSelected;
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { css as _, LitElement as w, html as
|
|
2
|
-
import { property as n, state as
|
|
1
|
+
import { css as _, LitElement as w, html as d } from "lit";
|
|
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";
|
|
5
5
|
import "@material/web/focus/md-focus-ring.js";
|
|
6
6
|
import "../scb-datepicker/scb-datepicker.js";
|
|
7
7
|
import "../scb-icon-button/scb-icon-button.js";
|
|
8
|
-
var
|
|
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 &&
|
|
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 &&
|
|
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
|
-
|
|
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,
|
|
41
|
+
this._inputFocused = !0, r(this, l, u).call(this);
|
|
42
42
|
}, this._onFieldBlur = () => {
|
|
43
|
-
this._inputFocused = !1,
|
|
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
|
-
|
|
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,
|
|
@@ -60,25 +60,10 @@ let s = class extends w {
|
|
|
60
60
|
_syncDensityForSize() {
|
|
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
|
-
_renderLabelBlock() {
|
|
64
|
-
return c`
|
|
65
|
-
<label
|
|
66
|
-
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
67
|
-
for="${this._inputId}"
|
|
68
|
-
>
|
|
69
|
-
${this.label}
|
|
70
|
-
</label>
|
|
71
|
-
${this.underLabel ? c`
|
|
72
|
-
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
73
|
-
${this.underLabel}
|
|
74
|
-
</span>
|
|
75
|
-
` : ""}
|
|
76
|
-
`;
|
|
77
|
-
}
|
|
78
63
|
render() {
|
|
79
|
-
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;
|
|
80
65
|
this.underLabel = this.error ? this.errorText || "Ogiltig inmatning." : this.supportingText, this.value = this.value || "";
|
|
81
|
-
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`
|
|
82
67
|
<button
|
|
83
68
|
type="button"
|
|
84
69
|
class="scb-textfield-clear"
|
|
@@ -113,8 +98,18 @@ let s = class extends w {
|
|
|
113
98
|
</svg>
|
|
114
99
|
</button>
|
|
115
100
|
` : null;
|
|
116
|
-
return this.type === "textarea" ?
|
|
117
|
-
|
|
101
|
+
return this.type === "textarea" ? d`
|
|
102
|
+
<label
|
|
103
|
+
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
104
|
+
for="${this._inputId}"
|
|
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}
|
|
118
113
|
<div class="scb-textfield-wrapper">
|
|
119
114
|
<div class="ripple-wrapper">
|
|
120
115
|
<textarea
|
|
@@ -131,8 +126,18 @@ let s = class extends w {
|
|
|
131
126
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
132
127
|
</div>
|
|
133
128
|
</div>
|
|
134
|
-
` : this.type === "date" ?
|
|
135
|
-
|
|
129
|
+
` : this.type === "date" ? d`
|
|
130
|
+
<label
|
|
131
|
+
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
132
|
+
for="${this._inputId}"
|
|
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}
|
|
136
141
|
<div class="scb-textfield-wrapper">
|
|
137
142
|
${e}
|
|
138
143
|
<div class="ripple-wrapper">
|
|
@@ -153,7 +158,7 @@ let s = class extends w {
|
|
|
153
158
|
<md-ripple></md-ripple>
|
|
154
159
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
155
160
|
</div>
|
|
156
|
-
${this.error ? t :
|
|
161
|
+
${this.error ? t : d`
|
|
157
162
|
<scb-icon-button
|
|
158
163
|
class="scb-textfield-datepicker-button"
|
|
159
164
|
icon="calendar_today"
|
|
@@ -168,8 +173,18 @@ let s = class extends w {
|
|
|
168
173
|
@date-selected=${this._onDateSelected}
|
|
169
174
|
></scb-datepicker>
|
|
170
175
|
</div>
|
|
171
|
-
` : this.type === "datetime-local" ?
|
|
172
|
-
|
|
176
|
+
` : this.type === "datetime-local" ? d`
|
|
177
|
+
<label
|
|
178
|
+
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
179
|
+
for="${this._inputId}"
|
|
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,8 +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
|
-
|
|
226
|
+
` : this.type === "time" ? d`
|
|
227
|
+
<label
|
|
228
|
+
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
229
|
+
for="${this._inputId}"
|
|
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}
|
|
213
238
|
<div class="scb-textfield-wrapper">
|
|
214
239
|
${e}
|
|
215
240
|
<div class="ripple-wrapper">
|
|
@@ -223,8 +248,8 @@ let s = class extends w {
|
|
|
223
248
|
?required=${this.required}
|
|
224
249
|
aria-invalid=${this.error ? "true" : "false"}
|
|
225
250
|
aria-describedby=${i}
|
|
226
|
-
@input=${(
|
|
227
|
-
const h =
|
|
251
|
+
@input=${(c) => {
|
|
252
|
+
const h = c.target;
|
|
228
253
|
if (this.value = h.value, this._internals) {
|
|
229
254
|
const b = this.disabled ? null : this.value;
|
|
230
255
|
this._internals.setFormValue(b);
|
|
@@ -243,8 +268,18 @@ let s = class extends w {
|
|
|
243
268
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
244
269
|
</div>
|
|
245
270
|
</div>
|
|
246
|
-
` :
|
|
247
|
-
|
|
271
|
+
` : d`
|
|
272
|
+
<label
|
|
273
|
+
class="scb-textfield-label ${this.underLabel ? "" : "scb-textfield-label--without-supporting"}"
|
|
274
|
+
for="${this._inputId}"
|
|
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}
|
|
248
283
|
<div class="scb-textfield-wrapper">
|
|
249
284
|
${e}
|
|
250
285
|
<div class="ripple-wrapper">
|
|
@@ -259,7 +294,7 @@ let s = class extends w {
|
|
|
259
294
|
aria-invalid=${this.error ? "true" : "false"}
|
|
260
295
|
aria-describedby=${i}
|
|
261
296
|
/>
|
|
262
|
-
${
|
|
297
|
+
${o}
|
|
263
298
|
${t}
|
|
264
299
|
<md-ripple></md-ripple>
|
|
265
300
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
@@ -272,14 +307,14 @@ let s = class extends w {
|
|
|
272
307
|
* Vi kör också ett customevent onValueChanged.
|
|
273
308
|
*/
|
|
274
309
|
firstUpdated(e) {
|
|
275
|
-
super.firstUpdated(e), this._initialValue = this.value, this._internals && this.value && this._internals.setFormValue(this.value),
|
|
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);
|
|
276
311
|
}
|
|
277
312
|
updated(e) {
|
|
278
313
|
if (super.updated(e), this.toggleAttribute("aria-disabled", this.disabled), e.has("size") && this._syncDensityForSize(), this._internals && (e.has("value") || e.has("disabled"))) {
|
|
279
314
|
const t = this.disabled ? null : this.value;
|
|
280
315
|
this._internals.setFormValue(t);
|
|
281
316
|
}
|
|
282
|
-
e.has("type") && (
|
|
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;
|
|
283
318
|
}
|
|
284
319
|
// Körs av webbläsaren när formuläret sätter disabled på kontrollen
|
|
285
320
|
formDisabledCallback(e) {
|
|
@@ -297,7 +332,7 @@ let s = class extends w {
|
|
|
297
332
|
}, this._form.addEventListener("reset", this._formResetHandler, !0)), window.addEventListener("keydown", this._onGlobalKeydown, !0), window.addEventListener("pointerdown", this._onGlobalPointerDown, !0);
|
|
298
333
|
}
|
|
299
334
|
disconnectedCallback() {
|
|
300
|
-
super.disconnectedCallback(), this._form && this._formSubmitHandler && (this._form.removeEventListener("submit", this._formSubmitHandler, !0), this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0)),
|
|
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);
|
|
301
336
|
}
|
|
302
337
|
/**
|
|
303
338
|
* Kallar på reportValidity på den inbyggda input/textarea och sätter felstatus till error-text.
|
|
@@ -309,8 +344,8 @@ let s = class extends w {
|
|
|
309
344
|
this.required && !e.value ? e.setCustomValidity(this.errorText || "Ogiltig inmatning.") : e.setCustomValidity("");
|
|
310
345
|
const i = e.reportValidity();
|
|
311
346
|
this.error = !i;
|
|
312
|
-
const
|
|
313
|
-
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;
|
|
314
349
|
}
|
|
315
350
|
return !0;
|
|
316
351
|
}
|
|
@@ -336,10 +371,10 @@ let s = class extends w {
|
|
|
336
371
|
}
|
|
337
372
|
}
|
|
338
373
|
};
|
|
339
|
-
|
|
374
|
+
l = /* @__PURE__ */ new WeakSet();
|
|
340
375
|
f = function() {
|
|
341
|
-
const e =
|
|
342
|
-
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");
|
|
343
378
|
};
|
|
344
379
|
p = function(e) {
|
|
345
380
|
if (!e) return;
|
|
@@ -356,12 +391,12 @@ g = function() {
|
|
|
356
391
|
const e = new RegExp(this.pattern);
|
|
357
392
|
this.error = !e.test(this.value);
|
|
358
393
|
};
|
|
359
|
-
|
|
394
|
+
x = function() {
|
|
360
395
|
var t;
|
|
361
396
|
const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".scb-textfield");
|
|
362
|
-
e && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement) && this._boundField !== e && (
|
|
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));
|
|
363
398
|
};
|
|
364
|
-
|
|
399
|
+
m = function() {
|
|
365
400
|
const e = this._boundField;
|
|
366
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);
|
|
367
402
|
};
|
|
@@ -580,6 +615,7 @@ s.styles = [
|
|
|
580
615
|
}
|
|
581
616
|
|
|
582
617
|
.scb-textfield-label {
|
|
618
|
+
display: block;
|
|
583
619
|
font-size: var(--scb-textfield-label-font-size);
|
|
584
620
|
font-weight: var(--weight-semibold);
|
|
585
621
|
line-height: var(--scb-textfield-label-line-height);
|
|
@@ -591,6 +627,7 @@ s.styles = [
|
|
|
591
627
|
}
|
|
592
628
|
|
|
593
629
|
.scb-textfield-supporting-text {
|
|
630
|
+
display: block;
|
|
594
631
|
font-size: var(--scb-textfield-supporting-font-size);
|
|
595
632
|
line-height: var(--scb-textfield-supporting-line-height);
|
|
596
633
|
letter-spacing: var(--scb-textfield-supporting-letter-spacing);
|
|
@@ -752,64 +789,64 @@ s.styles = [
|
|
|
752
789
|
}
|
|
753
790
|
`
|
|
754
791
|
];
|
|
755
|
-
|
|
792
|
+
a([
|
|
756
793
|
n({ type: String, reflect: !0 })
|
|
757
794
|
], s.prototype, "type", 2);
|
|
758
|
-
|
|
795
|
+
a([
|
|
759
796
|
n({ type: String })
|
|
760
797
|
], s.prototype, "label", 2);
|
|
761
|
-
|
|
798
|
+
a([
|
|
762
799
|
n({ type: String, attribute: "supporting-text" })
|
|
763
800
|
], s.prototype, "supportingText", 2);
|
|
764
|
-
|
|
801
|
+
a([
|
|
765
802
|
n({ type: String, attribute: "error-text" })
|
|
766
803
|
], s.prototype, "errorText", 2);
|
|
767
|
-
|
|
804
|
+
a([
|
|
768
805
|
n({ type: String, attribute: "leading-icon" })
|
|
769
806
|
], s.prototype, "leadingIcon", 2);
|
|
770
|
-
|
|
807
|
+
a([
|
|
771
808
|
n({ type: String })
|
|
772
809
|
], s.prototype, "name", 2);
|
|
773
|
-
|
|
810
|
+
a([
|
|
774
811
|
n({ type: String })
|
|
775
812
|
], s.prototype, "pattern", 2);
|
|
776
|
-
|
|
813
|
+
a([
|
|
777
814
|
n({ type: String, attribute: "value" })
|
|
778
815
|
], s.prototype, "value", 2);
|
|
779
|
-
|
|
816
|
+
a([
|
|
780
817
|
n({ type: String })
|
|
781
818
|
], s.prototype, "underLabel", 2);
|
|
782
|
-
|
|
819
|
+
a([
|
|
783
820
|
n({ type: Boolean, reflect: !0 })
|
|
784
821
|
], s.prototype, "error", 2);
|
|
785
|
-
|
|
822
|
+
a([
|
|
786
823
|
n({ type: Boolean, reflect: !0 })
|
|
787
824
|
], s.prototype, "disabled", 2);
|
|
788
|
-
|
|
825
|
+
a([
|
|
789
826
|
n({ type: Boolean, reflect: !0 })
|
|
790
827
|
], s.prototype, "required", 2);
|
|
791
|
-
|
|
828
|
+
a([
|
|
792
829
|
n({ type: String, reflect: !0 })
|
|
793
830
|
], s.prototype, "size", 2);
|
|
794
|
-
|
|
831
|
+
a([
|
|
795
832
|
n({ type: String, reflect: !0 })
|
|
796
833
|
], s.prototype, "spacing", 2);
|
|
797
|
-
|
|
834
|
+
a([
|
|
798
835
|
n({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
799
836
|
], s.prototype, "spacingTop", 2);
|
|
800
|
-
|
|
837
|
+
a([
|
|
801
838
|
n({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
802
839
|
], s.prototype, "spacingBottom", 2);
|
|
803
|
-
|
|
840
|
+
a([
|
|
804
841
|
n({ type: String, attribute: "spacing-left", reflect: !0 })
|
|
805
842
|
], s.prototype, "spacingLeft", 2);
|
|
806
|
-
|
|
843
|
+
a([
|
|
807
844
|
n({ type: String, attribute: "spacing-right", reflect: !0 })
|
|
808
845
|
], s.prototype, "spacingRight", 2);
|
|
809
|
-
|
|
810
|
-
|
|
846
|
+
a([
|
|
847
|
+
$()
|
|
811
848
|
], s.prototype, "_showDatepicker", 2);
|
|
812
|
-
s =
|
|
849
|
+
s = a([
|
|
813
850
|
z("scb-textfield")
|
|
814
851
|
], s);
|
|
815
852
|
export {
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -3765,19 +3765,7 @@
|
|
|
3765
3765
|
.close-datepicker:hover {
|
|
3766
3766
|
background: var(--md-sys-color-primary-container, #e3f2fd);
|
|
3767
3767
|
}
|
|
3768
|
-
`],ii([C()],kt.prototype,"_currentDate",2),ii([C()],kt.prototype,"_selectedDate",2),ii([C()],kt.prototype,"_showMonthDropdown",2),ii([C()],kt.prototype,"_showYearDropdown",2),ii([o({type:String})],kt.prototype,"variant",2),ii([o({type:String})],kt.prototype,"lang",2),ii([o({type:String})],kt.prototype,"selectedValue",2),ii([o({type:Boolean})],kt.prototype,"open",2),ii([C()],kt.prototype,"_selectedHour",2),ii([C()],kt.prototype,"_selectedMinute",2),kt=ii([y("scb-datepicker")],kt);var Wv=Object.defineProperty,Uv=Object.getOwnPropertyDescriptor,Qd=t=>{throw TypeError(t)},ye=(t,e,i,r)=>{for(var s=r>1?void 0:r?Uv(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&&Wv(e,i,s),s},jv=(t,e,i)=>e.has(t)||Qd("Cannot "+i),Kv=(t,e,i)=>e.has(t)?Qd("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),Ae=(t,e,i)=>(jv(t,e,"access private method"),i),_e,fl,Xr,gl,yl,_l,ep,Js;let oe=class extends _{constructor(){super(),Kv(this,_e),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&Ae(this,_e,Js).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&Ae(this,_e,Js).call(this)},this._hasRenderedOnce=!1,this._boundField=null,this._onFieldInput=()=>{const t=this._boundField;if(!t)return;const e=t;if(this.value=e.value,this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i)}Ae(this,_e,gl).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,Ae(this,_e,Js).call(this)},this._onFieldBlur=()=>{this._inputFocused=!1,Ae(this,_e,Js).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=t=>{if(this.value=t.detail.value,this._showDatepicker=!1,this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}Ae(this,_e,gl).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")}
|
|
3769
|
-
<label
|
|
3770
|
-
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3771
|
-
for="${this._inputId}"
|
|
3772
|
-
>
|
|
3773
|
-
${this.label}
|
|
3774
|
-
</label>
|
|
3775
|
-
${this.underLabel?c`
|
|
3776
|
-
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
3777
|
-
${this.underLabel}
|
|
3778
|
-
</span>
|
|
3779
|
-
`:""}
|
|
3780
|
-
`}render(){const t=this.leadingIcon?c`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?c`<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,r=this.type==="search"&&this.value?c`
|
|
3768
|
+
`],ii([C()],kt.prototype,"_currentDate",2),ii([C()],kt.prototype,"_selectedDate",2),ii([C()],kt.prototype,"_showMonthDropdown",2),ii([C()],kt.prototype,"_showYearDropdown",2),ii([o({type:String})],kt.prototype,"variant",2),ii([o({type:String})],kt.prototype,"lang",2),ii([o({type:String})],kt.prototype,"selectedValue",2),ii([o({type:Boolean})],kt.prototype,"open",2),ii([C()],kt.prototype,"_selectedHour",2),ii([C()],kt.prototype,"_selectedMinute",2),kt=ii([y("scb-datepicker")],kt);var Wv=Object.defineProperty,Uv=Object.getOwnPropertyDescriptor,Qd=t=>{throw TypeError(t)},ye=(t,e,i,r)=>{for(var s=r>1?void 0:r?Uv(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&&Wv(e,i,s),s},jv=(t,e,i)=>e.has(t)||Qd("Cannot "+i),Kv=(t,e,i)=>e.has(t)?Qd("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),Ae=(t,e,i)=>(jv(t,e,"access private method"),i),_e,fl,Xr,gl,yl,_l,ep,Js;let oe=class extends _{constructor(){super(),Kv(this,_e),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&Ae(this,_e,Js).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&Ae(this,_e,Js).call(this)},this._hasRenderedOnce=!1,this._boundField=null,this._onFieldInput=()=>{const t=this._boundField;if(!t)return;const e=t;if(this.value=e.value,this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i)}Ae(this,_e,gl).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,Ae(this,_e,Js).call(this)},this._onFieldBlur=()=>{this._inputFocused=!1,Ae(this,_e,Js).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=t=>{if(this.value=t.detail.value,this._showDatepicker=!1,this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}Ae(this,_e,gl).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 t=this.leadingIcon?c`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?c`<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,r=this.type==="search"&&this.value?c`
|
|
3781
3769
|
<button
|
|
3782
3770
|
type="button"
|
|
3783
3771
|
class="scb-textfield-clear"
|
|
@@ -3812,7 +3800,17 @@
|
|
|
3812
3800
|
</svg>
|
|
3813
3801
|
</button>
|
|
3814
3802
|
`:null;return this.type==="textarea"?c`
|
|
3815
|
-
|
|
3803
|
+
<label
|
|
3804
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3805
|
+
for="${this._inputId}"
|
|
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}
|
|
3816
3814
|
<div class="scb-textfield-wrapper">
|
|
3817
3815
|
<div class="ripple-wrapper">
|
|
3818
3816
|
<textarea
|
|
@@ -3830,7 +3828,17 @@
|
|
|
3830
3828
|
</div>
|
|
3831
3829
|
</div>
|
|
3832
3830
|
`:this.type==="date"?c`
|
|
3833
|
-
|
|
3831
|
+
<label
|
|
3832
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3833
|
+
for="${this._inputId}"
|
|
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}
|
|
3834
3842
|
<div class="scb-textfield-wrapper">
|
|
3835
3843
|
${t}
|
|
3836
3844
|
<div class="ripple-wrapper">
|
|
@@ -3867,7 +3875,17 @@
|
|
|
3867
3875
|
></scb-datepicker>
|
|
3868
3876
|
</div>
|
|
3869
3877
|
`:this.type==="datetime-local"?c`
|
|
3870
|
-
|
|
3878
|
+
<label
|
|
3879
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3880
|
+
for="${this._inputId}"
|
|
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}
|
|
3871
3889
|
<div class="scb-textfield-wrapper" style="position:relative;">
|
|
3872
3890
|
${t}
|
|
3873
3891
|
<div class="ripple-wrapper">
|
|
@@ -3907,7 +3925,17 @@
|
|
|
3907
3925
|
></scb-datepicker>
|
|
3908
3926
|
</div>
|
|
3909
3927
|
`:this.type==="time"?c`
|
|
3910
|
-
|
|
3928
|
+
<label
|
|
3929
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3930
|
+
for="${this._inputId}"
|
|
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}
|
|
3911
3939
|
<div class="scb-textfield-wrapper">
|
|
3912
3940
|
${t}
|
|
3913
3941
|
<div class="ripple-wrapper">
|
|
@@ -3929,7 +3957,17 @@
|
|
|
3929
3957
|
</div>
|
|
3930
3958
|
</div>
|
|
3931
3959
|
`:c`
|
|
3932
|
-
|
|
3960
|
+
<label
|
|
3961
|
+
class="scb-textfield-label ${this.underLabel?"":"scb-textfield-label--without-supporting"}"
|
|
3962
|
+
for="${this._inputId}"
|
|
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}
|
|
3933
3971
|
<div class="scb-textfield-wrapper">
|
|
3934
3972
|
${t}
|
|
3935
3973
|
<div class="ripple-wrapper">
|
|
@@ -4149,6 +4187,7 @@
|
|
|
4149
4187
|
}
|
|
4150
4188
|
|
|
4151
4189
|
.scb-textfield-label {
|
|
4190
|
+
display: block;
|
|
4152
4191
|
font-size: var(--scb-textfield-label-font-size);
|
|
4153
4192
|
font-weight: var(--weight-semibold);
|
|
4154
4193
|
line-height: var(--scb-textfield-label-line-height);
|
|
@@ -4160,6 +4199,7 @@
|
|
|
4160
4199
|
}
|
|
4161
4200
|
|
|
4162
4201
|
.scb-textfield-supporting-text {
|
|
4202
|
+
display: block;
|
|
4163
4203
|
font-size: var(--scb-textfield-supporting-font-size);
|
|
4164
4204
|
line-height: var(--scb-textfield-supporting-line-height);
|
|
4165
4205
|
letter-spacing: var(--scb-textfield-supporting-letter-spacing);
|