scb-wc-test 0.1.109 → 0.1.111
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/blazor/ScbBlazorInteropBase.cs +313 -12
- package/blazor/scb-blazor-bridge.js +603 -8
- package/mvc/components/scb-search/scb-search.js +2 -2
- package/mvc/components/scb-textfield/scb-textfield.js +110 -44
- package/mvc/scb-blazor-bridge.js +603 -8
- package/package.json +2 -2
- package/scb-search/scb-search.js +2 -2
- package/scb-textfield/scb-textfield.d.ts +4 -0
- package/scb-textfield/scb-textfield.js +160 -70
- package/scb-wc-test.bundle.js +456 -390
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as v,n as a,r as x,i as g,x as h,t as y}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 t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,n,o){try{customElements.get(i)||e(i,n,o)}catch(p){var c=String(p||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var _=Object.defineProperty,w=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},r=(t,e,i,n)=>{for(var o=n>1?void 0:n?w(e,i):e,c=t.length-1,p;c>=0;c--)(p=t[c])&&(o=(n?p(e,i,o):p(o))||o);return n&&o&&_(e,i,o),o},k=(t,e,i)=>e.has(t)||m("Cannot "+i),$=(t,e,i)=>e.has(t)?m("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),d=(t,e,i)=>(k(t,e,"access private method"),i),l,f,b,u;let s=class extends g{constructor(){super(),$(this,l),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&d(this,l,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&d(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.spacing="",this.spacingTop="",this.spacingBottom="",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)}if(this.pattern){const e=new RegExp(this.pattern);this.error=!e.test(this.value)}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())}render(){const t=this.leadingIcon?h`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?h`<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,n=this.type==="search"&&this.value?h`
|
|
2
2
|
<button
|
|
3
3
|
type="button"
|
|
4
4
|
class="scb-textfield-clear"
|
|
@@ -40,17 +40,21 @@ import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"..
|
|
|
40
40
|
>${this.underLabel}</span
|
|
41
41
|
>
|
|
42
42
|
<div class="scb-textfield-wrapper">
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
43
|
+
<div class="ripple-wrapper">
|
|
44
|
+
<textarea
|
|
45
|
+
class="scb-textfield"
|
|
46
|
+
?disabled=${this.disabled}
|
|
47
|
+
name="${this.name}"
|
|
48
|
+
id="${this._inputId}"
|
|
49
|
+
?required=${this.required}
|
|
50
|
+
aria-invalid=${this.error?"true":"false"}
|
|
51
|
+
aria-describedby=${i}
|
|
52
|
+
>
|
|
52
53
|
${this.value}</textarea
|
|
53
|
-
|
|
54
|
+
>
|
|
55
|
+
<md-ripple></md-ripple>
|
|
56
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
57
|
+
</div>
|
|
54
58
|
</div>
|
|
55
59
|
`:this.type==="date"?h`
|
|
56
60
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
@@ -59,28 +63,37 @@ ${this.value}</textarea
|
|
|
59
63
|
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
60
64
|
>${this.underLabel}</span
|
|
61
65
|
>
|
|
62
|
-
<div class="scb-textfield-wrapper"
|
|
66
|
+
<div class="scb-textfield-wrapper">
|
|
63
67
|
${t}
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
68
|
+
<div class="ripple-wrapper">
|
|
69
|
+
<input
|
|
70
|
+
class="scb-textfield${this.error?" has-error-icon":""}"
|
|
71
|
+
.value=${this.value}
|
|
72
|
+
type="text"
|
|
73
|
+
name="${this.name}"
|
|
74
|
+
id="${this._inputId}"
|
|
75
|
+
?disabled=${this.disabled}
|
|
76
|
+
?required=${this.required}
|
|
77
|
+
aria-invalid=${this.error?"true":"false"}
|
|
78
|
+
aria-describedby=${i}
|
|
79
|
+
readonly
|
|
80
|
+
/>
|
|
81
|
+
${e}
|
|
82
|
+
<md-ripple></md-ripple>
|
|
83
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
84
|
+
</div>
|
|
85
|
+
<scb-icon-button
|
|
86
|
+
class="scb-textfield-datepicker-button"
|
|
87
|
+
icon="calendar_today"
|
|
88
|
+
@click=${this._toggleDatepicker}
|
|
89
|
+
aria-label="Välj datum"
|
|
90
|
+
></scb-icon-button>
|
|
77
91
|
<scb-datepicker
|
|
78
92
|
variant="popup"
|
|
79
93
|
.selectedValue=${this.value}
|
|
80
94
|
.open=${this._showDatepicker}
|
|
81
95
|
@date-selected=${this._onDateSelected}
|
|
82
96
|
></scb-datepicker>
|
|
83
|
-
${e}
|
|
84
97
|
</div>
|
|
85
98
|
`:h`
|
|
86
99
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
@@ -91,21 +104,25 @@ ${this.value}</textarea
|
|
|
91
104
|
>
|
|
92
105
|
<div class="scb-textfield-wrapper">
|
|
93
106
|
${t}
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
+
<div class="ripple-wrapper">
|
|
108
|
+
<input
|
|
109
|
+
class="scb-textfield${this.error?" has-error-icon":""}"
|
|
110
|
+
.value=${this.value}
|
|
111
|
+
type="${this.type}"
|
|
112
|
+
name="${this.name}"
|
|
113
|
+
id="${this._inputId}"
|
|
114
|
+
?disabled=${this.disabled}
|
|
115
|
+
?required=${this.required}
|
|
116
|
+
aria-invalid=${this.error?"true":"false"}
|
|
117
|
+
aria-describedby=${i}
|
|
118
|
+
/>
|
|
119
|
+
${n}
|
|
120
|
+
${e}
|
|
121
|
+
<md-ripple></md-ripple>
|
|
122
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
123
|
+
</div>
|
|
107
124
|
</div>
|
|
108
|
-
`}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const
|
|
125
|
+
`}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const n=this.disabled?null:this.value;this._internals.setFormValue(n)}if(this.pattern){const n=new RegExp(this.pattern);this.error=!n.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),e.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}),e.addEventListener("focus",()=>{this._inputFocused=!0,d(this,l,u).call(this)}),e.addEventListener("blur",()=>{this._inputFocused=!1,d(this,l,u).call(this)})),d(this,l,f).call(this)}updated(t){if(super.updated(t),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(t.has("value")||t.has("disabled"))){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&d(this,l,f).call(this)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.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)),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};l=new WeakSet;f=function(){const t=d(this,l,b).call(this,this.spacing),e=d(this,l,b).call(this,this.spacingTop)??t,i=d(this,l,b).call(this,this.spacingBottom)??t;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):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")};b=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};u=function(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[v`
|
|
109
126
|
:host {
|
|
110
127
|
--scb-textfield-number-max-width: 280px;
|
|
111
128
|
--scb-textfield-text-max-width: 400px;
|
|
@@ -121,6 +138,8 @@ ${this.value}</textarea
|
|
|
121
138
|
/* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
|
|
122
139
|
margin-block-start: var(--scb-textfield-spacing-block-start, 0);
|
|
123
140
|
margin-block-end: var(--scb-textfield-spacing-block-end, 0);
|
|
141
|
+
|
|
142
|
+
-webkit-tap-highlight-color: transparent;
|
|
124
143
|
}
|
|
125
144
|
|
|
126
145
|
:host([type='number']) {
|
|
@@ -129,9 +148,6 @@ ${this.value}</textarea
|
|
|
129
148
|
:host([type='text']) {
|
|
130
149
|
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
131
150
|
}
|
|
132
|
-
:host([type='date']) {
|
|
133
|
-
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
134
|
-
}
|
|
135
151
|
:host([type='search']) {
|
|
136
152
|
--scb-textfield-max-width: var(--scb-textfield-search-max-width);
|
|
137
153
|
}
|
|
@@ -150,6 +166,9 @@ ${this.value}</textarea
|
|
|
150
166
|
:host([type='textarea']) {
|
|
151
167
|
--scb-textfield-max-width: var(--scb-textfield-textarea-max-width);
|
|
152
168
|
}
|
|
169
|
+
:host([type='date']) {
|
|
170
|
+
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
171
|
+
}
|
|
153
172
|
|
|
154
173
|
:host {
|
|
155
174
|
display: flex;
|
|
@@ -200,12 +219,18 @@ ${this.value}</textarea
|
|
|
200
219
|
box-sizing: border-box;
|
|
201
220
|
background-color: transparent;
|
|
202
221
|
color: var(--md-sys-color-on-surface);
|
|
222
|
+
position: relative;
|
|
223
|
+
z-index: 1;
|
|
203
224
|
}
|
|
204
225
|
|
|
205
226
|
:host([type='search']) .scb-textfield {
|
|
206
227
|
padding-right: var(--spacing-11);
|
|
207
228
|
}
|
|
208
229
|
|
|
230
|
+
:host([type='date']) .scb-textfield {
|
|
231
|
+
padding-right: var(--spacing-11);
|
|
232
|
+
}
|
|
233
|
+
|
|
209
234
|
md-icon + .scb-textfield {
|
|
210
235
|
padding-left: var(--spacing-10);
|
|
211
236
|
}
|
|
@@ -217,6 +242,7 @@ ${this.value}</textarea
|
|
|
217
242
|
transform: translateY(-50%);
|
|
218
243
|
pointer-events: none;
|
|
219
244
|
font-size: var(--scale-06);
|
|
245
|
+
z-index: 2;
|
|
220
246
|
}
|
|
221
247
|
|
|
222
248
|
.scb-textfield:focus-visible {
|
|
@@ -231,6 +257,35 @@ ${this.value}</textarea
|
|
|
231
257
|
width: 100%;
|
|
232
258
|
}
|
|
233
259
|
|
|
260
|
+
/* Wrapper som bär ripple och md-focus-ring */
|
|
261
|
+
.ripple-wrapper {
|
|
262
|
+
position: relative;
|
|
263
|
+
width: 100%;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
md-focus-ring.input-ring {
|
|
267
|
+
position: absolute;
|
|
268
|
+
inset: 0;
|
|
269
|
+
pointer-events: none;
|
|
270
|
+
display: none;
|
|
271
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
272
|
+
z-index: 3;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.ripple-wrapper[data-kb-focus='true'] md-focus-ring.input-ring {
|
|
276
|
+
display: block;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
md-ripple {
|
|
280
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
281
|
+
position: absolute;
|
|
282
|
+
inset: 0;
|
|
283
|
+
z-index: 0;
|
|
284
|
+
pointer-events: none;
|
|
285
|
+
--md-ripple-hover-color: transparent;
|
|
286
|
+
--md-ripple-hover-opacity: 0;
|
|
287
|
+
}
|
|
288
|
+
|
|
234
289
|
input[type='search']::-webkit-search-cancel-button {
|
|
235
290
|
appearance: none;
|
|
236
291
|
display: none;
|
|
@@ -244,6 +299,7 @@ ${this.value}</textarea
|
|
|
244
299
|
pointer-events: none;
|
|
245
300
|
font-size: var(--scale-06);
|
|
246
301
|
color: var(--md-sys-color-error);
|
|
302
|
+
z-index: 2;
|
|
247
303
|
}
|
|
248
304
|
|
|
249
305
|
.scb-textfield.has-error-icon {
|
|
@@ -269,6 +325,7 @@ ${this.value}</textarea
|
|
|
269
325
|
justify-content: center;
|
|
270
326
|
cursor: pointer;
|
|
271
327
|
color: var(--md-sys-color-on-surface);
|
|
328
|
+
z-index: 2;
|
|
272
329
|
}
|
|
273
330
|
|
|
274
331
|
:host([error]) .scb-textfield-clear {
|
|
@@ -285,4 +342,13 @@ ${this.value}</textarea
|
|
|
285
342
|
height: 100%;
|
|
286
343
|
display: block;
|
|
287
344
|
}
|
|
288
|
-
|
|
345
|
+
|
|
346
|
+
/* Datumknappen ovanför input/ripple */
|
|
347
|
+
.scb-textfield-datepicker-button {
|
|
348
|
+
position: absolute;
|
|
349
|
+
right: var(--spacing-4);
|
|
350
|
+
top: 50%;
|
|
351
|
+
transform: translateY(-50%);
|
|
352
|
+
z-index: 4;
|
|
353
|
+
}
|
|
354
|
+
`];r([a({type:String,reflect:!0})],s.prototype,"type",2);r([a({type:String})],s.prototype,"label",2);r([a({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);r([a({type:String,attribute:"error-text"})],s.prototype,"errorText",2);r([a({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);r([a({type:String})],s.prototype,"name",2);r([a({type:String})],s.prototype,"pattern",2);r([a({type:String,attribute:"value"})],s.prototype,"value",2);r([a({type:String})],s.prototype,"underLabel",2);r([a({type:Boolean,reflect:!0})],s.prototype,"error",2);r([a({type:Boolean,reflect:!0})],s.prototype,"disabled",2);r([a({type:Boolean,reflect:!0})],s.prototype,"required",2);r([a({type:String,reflect:!0})],s.prototype,"spacing",2);r([a({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);r([a({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);r([x()],s.prototype,"_showDatepicker",2);s=r([y("scb-textfield")],s);
|