scb-wc-test 0.1.109 → 0.1.110
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 +46 -6
- 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 +89 -34
- package/scb-wc-test.bundle.js +391 -351
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as v,n as a,i as x,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"../../vendor/preload-helper.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.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,o,l){try{customElements.get(i)||e(i,o,l)}catch(p){var c=String(p||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var g=Object.defineProperty,_=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},r=(t,e,i,o)=>{for(var l=o>1?void 0:o?_(e,i):e,c=t.length-1,p;c>=0;c--)(p=t[c])&&(l=(o?p(e,i,l):p(l))||l);return o&&l&&g(e,i,l),l},w=(t,e,i)=>e.has(t)||m("Cannot "+i),k=(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)=>(w(t,e,"access private method"),i),n,f,b,u;let s=class extends x{constructor(){super(),k(this,n),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&d(this,n,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&d(this,n,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=>{this.value=t.detail.value,this._showDatepicker=!1,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,o=this.type==="search"&&this.value?h`
|
|
2
2
|
<button
|
|
3
3
|
type="button"
|
|
4
4
|
class="scb-textfield-clear"
|
|
@@ -39,7 +39,7 @@ import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"..
|
|
|
39
39
|
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
40
40
|
>${this.underLabel}</span
|
|
41
41
|
>
|
|
42
|
-
<div class="scb-textfield-wrapper">
|
|
42
|
+
<div class="scb-textfield-wrapper ripple-wrapper">
|
|
43
43
|
<textarea
|
|
44
44
|
class="scb-textfield"
|
|
45
45
|
?disabled=${this.disabled}
|
|
@@ -51,6 +51,8 @@ import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"..
|
|
|
51
51
|
>
|
|
52
52
|
${this.value}</textarea
|
|
53
53
|
>
|
|
54
|
+
<md-ripple></md-ripple>
|
|
55
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
54
56
|
</div>
|
|
55
57
|
`:this.type==="date"?h`
|
|
56
58
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
@@ -89,7 +91,7 @@ ${this.value}</textarea
|
|
|
89
91
|
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
90
92
|
>${this.underLabel}</span
|
|
91
93
|
>
|
|
92
|
-
<div class="scb-textfield-wrapper">
|
|
94
|
+
<div class="scb-textfield-wrapper ripple-wrapper">
|
|
93
95
|
${t}
|
|
94
96
|
<input
|
|
95
97
|
class="scb-textfield${this.error?" has-error-icon":""}"
|
|
@@ -102,10 +104,12 @@ ${this.value}</textarea
|
|
|
102
104
|
aria-invalid=${this.error?"true":"false"}
|
|
103
105
|
aria-describedby=${i}
|
|
104
106
|
/>
|
|
105
|
-
${
|
|
107
|
+
${o}
|
|
106
108
|
${e}
|
|
109
|
+
<md-ripple></md-ripple>
|
|
110
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
107
111
|
</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
|
|
112
|
+
`}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 o=this.disabled?null:this.value;this._internals.setFormValue(o)}if(this.pattern){const o=new RegExp(this.pattern);this.error=!o.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,n,u).call(this)}),e.addEventListener("blur",()=>{this._inputFocused=!1,d(this,n,u).call(this)})),d(this,n,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,n,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()}}};n=new WeakSet;f=function(){const t=d(this,n,b).call(this,this.spacing),e=d(this,n,b).call(this,this.spacingTop)??t,i=d(this,n,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
113
|
:host {
|
|
110
114
|
--scb-textfield-number-max-width: 280px;
|
|
111
115
|
--scb-textfield-text-max-width: 400px;
|
|
@@ -121,6 +125,8 @@ ${this.value}</textarea
|
|
|
121
125
|
/* Vertikalt avstånd styrs av spacing-attributen via CSS-variabler */
|
|
122
126
|
margin-block-start: var(--scb-textfield-spacing-block-start, 0);
|
|
123
127
|
margin-block-end: var(--scb-textfield-spacing-block-end, 0);
|
|
128
|
+
|
|
129
|
+
-webkit-tap-highlight-color: transparent;
|
|
124
130
|
}
|
|
125
131
|
|
|
126
132
|
:host([type='number']) {
|
|
@@ -200,6 +206,8 @@ ${this.value}</textarea
|
|
|
200
206
|
box-sizing: border-box;
|
|
201
207
|
background-color: transparent;
|
|
202
208
|
color: var(--md-sys-color-on-surface);
|
|
209
|
+
position: relative;
|
|
210
|
+
z-index: 1;
|
|
203
211
|
}
|
|
204
212
|
|
|
205
213
|
:host([type='search']) .scb-textfield {
|
|
@@ -217,6 +225,7 @@ ${this.value}</textarea
|
|
|
217
225
|
transform: translateY(-50%);
|
|
218
226
|
pointer-events: none;
|
|
219
227
|
font-size: var(--scale-06);
|
|
228
|
+
z-index: 2;
|
|
220
229
|
}
|
|
221
230
|
|
|
222
231
|
.scb-textfield:focus-visible {
|
|
@@ -231,6 +240,35 @@ ${this.value}</textarea
|
|
|
231
240
|
width: 100%;
|
|
232
241
|
}
|
|
233
242
|
|
|
243
|
+
/* Wrapper som bär ripple och md-focus-ring */
|
|
244
|
+
.ripple-wrapper {
|
|
245
|
+
position: relative;
|
|
246
|
+
width: 100%;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
md-focus-ring.input-ring {
|
|
250
|
+
position: absolute;
|
|
251
|
+
inset: 0;
|
|
252
|
+
pointer-events: none;
|
|
253
|
+
display: none;
|
|
254
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
255
|
+
z-index: 3;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.ripple-wrapper[data-kb-focus='true'] md-focus-ring.input-ring {
|
|
259
|
+
display: block;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
md-ripple {
|
|
263
|
+
border-radius: var(--md-sys-shape-corner-small);
|
|
264
|
+
position: absolute;
|
|
265
|
+
inset: 0;
|
|
266
|
+
z-index: 0;
|
|
267
|
+
pointer-events: none;
|
|
268
|
+
--md-ripple-hover-color: transparent;
|
|
269
|
+
--md-ripple-hover-opacity: 0;
|
|
270
|
+
}
|
|
271
|
+
|
|
234
272
|
input[type='search']::-webkit-search-cancel-button {
|
|
235
273
|
appearance: none;
|
|
236
274
|
display: none;
|
|
@@ -244,6 +282,7 @@ ${this.value}</textarea
|
|
|
244
282
|
pointer-events: none;
|
|
245
283
|
font-size: var(--scale-06);
|
|
246
284
|
color: var(--md-sys-color-error);
|
|
285
|
+
z-index: 2;
|
|
247
286
|
}
|
|
248
287
|
|
|
249
288
|
.scb-textfield.has-error-icon {
|
|
@@ -269,6 +308,7 @@ ${this.value}</textarea
|
|
|
269
308
|
justify-content: center;
|
|
270
309
|
cursor: pointer;
|
|
271
310
|
color: var(--md-sys-color-on-surface);
|
|
311
|
+
z-index: 2;
|
|
272
312
|
}
|
|
273
313
|
|
|
274
314
|
:host([error]) .scb-textfield-clear {
|
|
@@ -285,4 +325,4 @@ ${this.value}</textarea
|
|
|
285
325
|
height: 100%;
|
|
286
326
|
display: block;
|
|
287
327
|
}
|
|
288
|
-
`];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([a({type:Boolean})],s.prototype,"_showDatepicker",2);s=r([
|
|
328
|
+
`];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([a({type:Boolean})],s.prototype,"_showDatepicker",2);s=r([y("scb-textfield")],s);
|