scb-wc-test 0.1.110 → 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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as v,n as a,
|
|
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"
|
|
@@ -39,20 +39,22 @@ import{a as v,n as a,i as x,x as h,t as y}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
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
42
|
+
<div class="scb-textfield-wrapper">
|
|
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
|
-
|
|
54
|
+
>
|
|
55
|
+
<md-ripple></md-ripple>
|
|
56
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
57
|
+
</div>
|
|
56
58
|
</div>
|
|
57
59
|
`:this.type==="date"?h`
|
|
58
60
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
@@ -61,28 +63,37 @@ ${this.value}</textarea
|
|
|
61
63
|
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
62
64
|
>${this.underLabel}</span
|
|
63
65
|
>
|
|
64
|
-
<div class="scb-textfield-wrapper"
|
|
66
|
+
<div class="scb-textfield-wrapper">
|
|
65
67
|
${t}
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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>
|
|
79
91
|
<scb-datepicker
|
|
80
92
|
variant="popup"
|
|
81
93
|
.selectedValue=${this.value}
|
|
82
94
|
.open=${this._showDatepicker}
|
|
83
95
|
@date-selected=${this._onDateSelected}
|
|
84
96
|
></scb-datepicker>
|
|
85
|
-
${e}
|
|
86
97
|
</div>
|
|
87
98
|
`:h`
|
|
88
99
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
@@ -91,25 +102,27 @@ ${this.value}</textarea
|
|
|
91
102
|
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
92
103
|
>${this.underLabel}</span
|
|
93
104
|
>
|
|
94
|
-
<div class="scb-textfield-wrapper
|
|
105
|
+
<div class="scb-textfield-wrapper">
|
|
95
106
|
${t}
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
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>
|
|
111
124
|
</div>
|
|
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
|
|
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`
|
|
113
126
|
:host {
|
|
114
127
|
--scb-textfield-number-max-width: 280px;
|
|
115
128
|
--scb-textfield-text-max-width: 400px;
|
|
@@ -135,9 +148,6 @@ ${this.value}</textarea
|
|
|
135
148
|
:host([type='text']) {
|
|
136
149
|
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
137
150
|
}
|
|
138
|
-
:host([type='date']) {
|
|
139
|
-
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
140
|
-
}
|
|
141
151
|
:host([type='search']) {
|
|
142
152
|
--scb-textfield-max-width: var(--scb-textfield-search-max-width);
|
|
143
153
|
}
|
|
@@ -156,6 +166,9 @@ ${this.value}</textarea
|
|
|
156
166
|
:host([type='textarea']) {
|
|
157
167
|
--scb-textfield-max-width: var(--scb-textfield-textarea-max-width);
|
|
158
168
|
}
|
|
169
|
+
:host([type='date']) {
|
|
170
|
+
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
171
|
+
}
|
|
159
172
|
|
|
160
173
|
:host {
|
|
161
174
|
display: flex;
|
|
@@ -214,6 +227,10 @@ ${this.value}</textarea
|
|
|
214
227
|
padding-right: var(--spacing-11);
|
|
215
228
|
}
|
|
216
229
|
|
|
230
|
+
:host([type='date']) .scb-textfield {
|
|
231
|
+
padding-right: var(--spacing-11);
|
|
232
|
+
}
|
|
233
|
+
|
|
217
234
|
md-icon + .scb-textfield {
|
|
218
235
|
padding-left: var(--spacing-10);
|
|
219
236
|
}
|
|
@@ -325,4 +342,13 @@ ${this.value}</textarea
|
|
|
325
342
|
height: 100%;
|
|
326
343
|
display: block;
|
|
327
344
|
}
|
|
328
|
-
|
|
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);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.111",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -341,5 +341,5 @@
|
|
|
341
341
|
},
|
|
342
342
|
"./mvc/*": "./mvc/*"
|
|
343
343
|
},
|
|
344
|
-
"buildHash": "
|
|
344
|
+
"buildHash": "F453A993B52781DB4833FB0A7627C0B71D023A5C1FBBBF9B74FEA6B871E7F367"
|
|
345
345
|
}
|
|
@@ -1,26 +1,35 @@
|
|
|
1
1
|
import { css as v, LitElement as x, html as c } from "lit";
|
|
2
|
-
import { property as a, customElement as y } from "lit/decorators.js";
|
|
2
|
+
import { property as a, state as g, customElement as y } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/icon/icon.js";
|
|
4
|
-
import "../scb-datepicker/scb-datepicker.js";
|
|
5
4
|
import "@material/web/ripple/ripple.js";
|
|
6
5
|
import "@material/web/focus/md-focus-ring.js";
|
|
7
|
-
|
|
6
|
+
import "../scb-datepicker/scb-datepicker.js";
|
|
7
|
+
import "../scb-icon-button/scb-icon-button.js";
|
|
8
|
+
var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (t) => {
|
|
8
9
|
throw TypeError(t);
|
|
9
|
-
}, r = (t, e, i,
|
|
10
|
-
for (var
|
|
11
|
-
(b = t[u]) && (
|
|
12
|
-
return
|
|
13
|
-
},
|
|
10
|
+
}, r = (t, e, i, l) => {
|
|
11
|
+
for (var n = l > 1 ? void 0 : l ? _(e, i) : e, u = t.length - 1, b; u >= 0; u--)
|
|
12
|
+
(b = t[u]) && (n = (l ? b(e, i, n) : b(n)) || n);
|
|
13
|
+
return l && n && w(e, i, n), n;
|
|
14
|
+
}, 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), o, f, h, p;
|
|
14
15
|
let s = class extends x {
|
|
15
16
|
constructor() {
|
|
16
|
-
super(),
|
|
17
|
-
t.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && d(this,
|
|
17
|
+
super(), $(this, o), this._internals = null, this._inputFocused = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (t) => {
|
|
18
|
+
t.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && d(this, o, p).call(this));
|
|
18
19
|
}, this._onGlobalPointerDown = () => {
|
|
19
|
-
this._kbShouldShowRing = !1, this._inputFocused && d(this,
|
|
20
|
+
this._kbShouldShowRing = !1, this._inputFocused && d(this, o, p).call(this);
|
|
20
21
|
}, 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 = () => {
|
|
21
22
|
this._showDatepicker = !this._showDatepicker;
|
|
22
23
|
}, this._onDateSelected = (t) => {
|
|
23
|
-
this.value = t.detail.value, this._showDatepicker = !1, this.
|
|
24
|
+
if (this.value = t.detail.value, this._showDatepicker = !1, this._internals) {
|
|
25
|
+
const e = this.disabled ? null : this.value;
|
|
26
|
+
this._internals.setFormValue(e);
|
|
27
|
+
}
|
|
28
|
+
if (this.pattern) {
|
|
29
|
+
const e = new RegExp(this.pattern);
|
|
30
|
+
this.error = !e.test(this.value);
|
|
31
|
+
}
|
|
32
|
+
this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
|
|
24
33
|
new CustomEvent("onValueChanged", {
|
|
25
34
|
detail: { value: this.value },
|
|
26
35
|
bubbles: !0,
|
|
@@ -32,7 +41,7 @@ let s = class extends x {
|
|
|
32
41
|
render() {
|
|
33
42
|
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;
|
|
34
43
|
this.underLabel = this.error ? this.errorText || "Ogiltig inmatning." : this.supportingText, this.value = this.value || "";
|
|
35
|
-
const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0,
|
|
44
|
+
const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0, l = this.type === "search" && this.value ? c`
|
|
36
45
|
<button
|
|
37
46
|
type="button"
|
|
38
47
|
class="scb-textfield-clear"
|
|
@@ -74,20 +83,22 @@ let s = class extends x {
|
|
|
74
83
|
id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
|
|
75
84
|
>${this.underLabel}</span
|
|
76
85
|
>
|
|
77
|
-
<div class="scb-textfield-wrapper
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
<div class="scb-textfield-wrapper">
|
|
87
|
+
<div class="ripple-wrapper">
|
|
88
|
+
<textarea
|
|
89
|
+
class="scb-textfield"
|
|
90
|
+
?disabled=${this.disabled}
|
|
91
|
+
name="${this.name}"
|
|
92
|
+
id="${this._inputId}"
|
|
93
|
+
?required=${this.required}
|
|
94
|
+
aria-invalid=${this.error ? "true" : "false"}
|
|
95
|
+
aria-describedby=${i}
|
|
96
|
+
>
|
|
87
97
|
${this.value}</textarea
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
98
|
+
>
|
|
99
|
+
<md-ripple></md-ripple>
|
|
100
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
101
|
+
</div>
|
|
91
102
|
</div>
|
|
92
103
|
` : this.type === "date" ? c`
|
|
93
104
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
@@ -96,28 +107,37 @@ ${this.value}</textarea
|
|
|
96
107
|
id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
|
|
97
108
|
>${this.underLabel}</span
|
|
98
109
|
>
|
|
99
|
-
<div class="scb-textfield-wrapper"
|
|
110
|
+
<div class="scb-textfield-wrapper">
|
|
100
111
|
${t}
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
<div class="ripple-wrapper">
|
|
113
|
+
<input
|
|
114
|
+
class="scb-textfield${this.error ? " has-error-icon" : ""}"
|
|
115
|
+
.value=${this.value}
|
|
116
|
+
type="text"
|
|
117
|
+
name="${this.name}"
|
|
118
|
+
id="${this._inputId}"
|
|
119
|
+
?disabled=${this.disabled}
|
|
120
|
+
?required=${this.required}
|
|
121
|
+
aria-invalid=${this.error ? "true" : "false"}
|
|
122
|
+
aria-describedby=${i}
|
|
123
|
+
readonly
|
|
124
|
+
/>
|
|
125
|
+
${e}
|
|
126
|
+
<md-ripple></md-ripple>
|
|
127
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
128
|
+
</div>
|
|
129
|
+
<scb-icon-button
|
|
130
|
+
class="scb-textfield-datepicker-button"
|
|
131
|
+
icon="calendar_today"
|
|
132
|
+
@click=${this._toggleDatepicker}
|
|
133
|
+
aria-label="Välj datum"
|
|
134
|
+
></scb-icon-button>
|
|
114
135
|
<scb-datepicker
|
|
115
136
|
variant="popup"
|
|
116
137
|
.selectedValue=${this.value}
|
|
117
138
|
.open=${this._showDatepicker}
|
|
118
139
|
@date-selected=${this._onDateSelected}
|
|
119
140
|
></scb-datepicker>
|
|
120
|
-
${e}
|
|
121
141
|
</div>
|
|
122
142
|
` : c`
|
|
123
143
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
@@ -126,23 +146,25 @@ ${this.value}</textarea
|
|
|
126
146
|
id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
|
|
127
147
|
>${this.underLabel}</span
|
|
128
148
|
>
|
|
129
|
-
<div class="scb-textfield-wrapper
|
|
149
|
+
<div class="scb-textfield-wrapper">
|
|
130
150
|
${t}
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
151
|
+
<div class="ripple-wrapper">
|
|
152
|
+
<input
|
|
153
|
+
class="scb-textfield${this.error ? " has-error-icon" : ""}"
|
|
154
|
+
.value=${this.value}
|
|
155
|
+
type="${this.type}"
|
|
156
|
+
name="${this.name}"
|
|
157
|
+
id="${this._inputId}"
|
|
158
|
+
?disabled=${this.disabled}
|
|
159
|
+
?required=${this.required}
|
|
160
|
+
aria-invalid=${this.error ? "true" : "false"}
|
|
161
|
+
aria-describedby=${i}
|
|
162
|
+
/>
|
|
163
|
+
${l}
|
|
164
|
+
${e}
|
|
165
|
+
<md-ripple></md-ripple>
|
|
166
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
167
|
+
</div>
|
|
146
168
|
</div>
|
|
147
169
|
`;
|
|
148
170
|
}
|
|
@@ -155,14 +177,14 @@ ${this.value}</textarea
|
|
|
155
177
|
super.firstUpdated(t), this._initialValue = this.value;
|
|
156
178
|
const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scb-textfield");
|
|
157
179
|
e && (e.addEventListener("input", () => {
|
|
158
|
-
const
|
|
159
|
-
if (this.value =
|
|
160
|
-
const
|
|
161
|
-
this._internals.setFormValue(
|
|
180
|
+
const l = e;
|
|
181
|
+
if (this.value = l.value, this._internals) {
|
|
182
|
+
const n = this.disabled ? null : this.value;
|
|
183
|
+
this._internals.setFormValue(n);
|
|
162
184
|
}
|
|
163
185
|
if (this.pattern) {
|
|
164
|
-
const
|
|
165
|
-
this.error = !
|
|
186
|
+
const n = new RegExp(this.pattern);
|
|
187
|
+
this.error = !n.test(this.value);
|
|
166
188
|
}
|
|
167
189
|
this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
|
|
168
190
|
new CustomEvent("onValueChanged", {
|
|
@@ -176,17 +198,17 @@ ${this.value}</textarea
|
|
|
176
198
|
}), e.addEventListener("select", () => {
|
|
177
199
|
this.dispatchEvent(new Event("select", { bubbles: !0, composed: !0 }));
|
|
178
200
|
}), e.addEventListener("focus", () => {
|
|
179
|
-
this._inputFocused = !0, d(this,
|
|
201
|
+
this._inputFocused = !0, d(this, o, p).call(this);
|
|
180
202
|
}), e.addEventListener("blur", () => {
|
|
181
|
-
this._inputFocused = !1, d(this,
|
|
182
|
-
})), d(this,
|
|
203
|
+
this._inputFocused = !1, d(this, o, p).call(this);
|
|
204
|
+
})), d(this, o, f).call(this);
|
|
183
205
|
}
|
|
184
206
|
updated(t) {
|
|
185
207
|
if (super.updated(t), this.toggleAttribute("aria-disabled", this.disabled), this._internals && (t.has("value") || t.has("disabled"))) {
|
|
186
208
|
const e = this.disabled ? null : this.value;
|
|
187
209
|
this._internals.setFormValue(e);
|
|
188
210
|
}
|
|
189
|
-
(t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && d(this,
|
|
211
|
+
(t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && d(this, o, f).call(this);
|
|
190
212
|
}
|
|
191
213
|
// Körs av webbläsaren när formuläret sätter disabled på kontrollen
|
|
192
214
|
formDisabledCallback(t) {
|
|
@@ -216,8 +238,8 @@ ${this.value}</textarea
|
|
|
216
238
|
this.required && !t.value ? t.setCustomValidity(this.errorText || "Ogiltig inmatning.") : t.setCustomValidity("");
|
|
217
239
|
const i = t.reportValidity();
|
|
218
240
|
this.error = !i;
|
|
219
|
-
const
|
|
220
|
-
return i || (this.errorText =
|
|
241
|
+
const l = i ? "" : this.errorText || t.validationMessage || "Ogiltig inmatning.";
|
|
242
|
+
return i || (this.errorText = l), this._internals && (i ? this._internals.setValidity({}) : this._internals.setValidity({ customError: !0 }, l, t)), i;
|
|
221
243
|
}
|
|
222
244
|
return !0;
|
|
223
245
|
}
|
|
@@ -243,9 +265,9 @@ ${this.value}</textarea
|
|
|
243
265
|
}
|
|
244
266
|
}
|
|
245
267
|
};
|
|
246
|
-
|
|
268
|
+
o = /* @__PURE__ */ new WeakSet();
|
|
247
269
|
f = function() {
|
|
248
|
-
const t = d(this,
|
|
270
|
+
const t = d(this, o, h).call(this, this.spacing), e = d(this, o, h).call(this, this.spacingTop) ?? t, i = d(this, o, h).call(this, this.spacingBottom) ?? t;
|
|
249
271
|
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");
|
|
250
272
|
};
|
|
251
273
|
h = function(t) {
|
|
@@ -287,9 +309,6 @@ s.styles = [
|
|
|
287
309
|
:host([type='text']) {
|
|
288
310
|
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
289
311
|
}
|
|
290
|
-
:host([type='date']) {
|
|
291
|
-
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
292
|
-
}
|
|
293
312
|
:host([type='search']) {
|
|
294
313
|
--scb-textfield-max-width: var(--scb-textfield-search-max-width);
|
|
295
314
|
}
|
|
@@ -308,6 +327,9 @@ s.styles = [
|
|
|
308
327
|
:host([type='textarea']) {
|
|
309
328
|
--scb-textfield-max-width: var(--scb-textfield-textarea-max-width);
|
|
310
329
|
}
|
|
330
|
+
:host([type='date']) {
|
|
331
|
+
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
332
|
+
}
|
|
311
333
|
|
|
312
334
|
:host {
|
|
313
335
|
display: flex;
|
|
@@ -366,6 +388,10 @@ s.styles = [
|
|
|
366
388
|
padding-right: var(--spacing-11);
|
|
367
389
|
}
|
|
368
390
|
|
|
391
|
+
:host([type='date']) .scb-textfield {
|
|
392
|
+
padding-right: var(--spacing-11);
|
|
393
|
+
}
|
|
394
|
+
|
|
369
395
|
md-icon + .scb-textfield {
|
|
370
396
|
padding-left: var(--spacing-10);
|
|
371
397
|
}
|
|
@@ -477,6 +503,15 @@ s.styles = [
|
|
|
477
503
|
height: 100%;
|
|
478
504
|
display: block;
|
|
479
505
|
}
|
|
506
|
+
|
|
507
|
+
/* Datumknappen ovanför input/ripple */
|
|
508
|
+
.scb-textfield-datepicker-button {
|
|
509
|
+
position: absolute;
|
|
510
|
+
right: var(--spacing-4);
|
|
511
|
+
top: 50%;
|
|
512
|
+
transform: translateY(-50%);
|
|
513
|
+
z-index: 4;
|
|
514
|
+
}
|
|
480
515
|
`
|
|
481
516
|
];
|
|
482
517
|
r([
|
|
@@ -525,7 +560,7 @@ r([
|
|
|
525
560
|
a({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
526
561
|
], s.prototype, "spacingBottom", 2);
|
|
527
562
|
r([
|
|
528
|
-
|
|
563
|
+
g()
|
|
529
564
|
], s.prototype, "_showDatepicker", 2);
|
|
530
565
|
s = r([
|
|
531
566
|
y("scb-textfield")
|
package/scb-wc-test.bundle.js
CHANGED
|
@@ -4147,7 +4147,7 @@ var ScbWcTest=function(a){"use strict";var Sl;function d(o,e,t,i){var r=argument
|
|
|
4147
4147
|
.close-datepicker:hover {
|
|
4148
4148
|
background: var(--md-sys-color-primary-container, #e3f2fd);
|
|
4149
4149
|
}
|
|
4150
|
-
`],je([w()],a.ScbDatepicker.prototype,"_currentDate",2),je([w()],a.ScbDatepicker.prototype,"_selectedDate",2),je([w()],a.ScbDatepicker.prototype,"_showMonthDropdown",2),je([w()],a.ScbDatepicker.prototype,"_showYearDropdown",2),je([n({type:String})],a.ScbDatepicker.prototype,"variant",2),je([n({type:String})],a.ScbDatepicker.prototype,"lang",2),je([n({type:String})],a.ScbDatepicker.prototype,"selectedValue",2),je([n({type:Boolean})],a.ScbDatepicker.prototype,"open",2),a.ScbDatepicker=je([g("scb-datepicker")],a.ScbDatepicker);var Ep=Object.defineProperty,Tp=Object.getOwnPropertyDescriptor,jn=o=>{throw TypeError(o)},Y=(o,e,t,i)=>{for(var r=i>1?void 0:i?Tp(e,t):e,s=o.length-1,l;s>=0;s--)(l=o[s])&&(r=(i?l(e,t,r):l(r))||r);return i&&r&&Ep(e,t,r),r},Ap=(o,e,t)=>e.has(o)||jn("Cannot "+t),zp=(o,e,t)=>e.has(o)?jn("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t),Ke=(o,e,t)=>(Ap(o,e,"access private method"),t),Ce,Fa,Xr,Pi;a.ScbTextField=class extends y{constructor(){super(),zp(this,Ce),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=e=>{e.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&Ke(this,Ce,Pi).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&Ke(this,Ce,Pi).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=e=>{this.value=e.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 e=this.leadingIcon?c`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,t=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`
|
|
4150
|
+
`],je([w()],a.ScbDatepicker.prototype,"_currentDate",2),je([w()],a.ScbDatepicker.prototype,"_selectedDate",2),je([w()],a.ScbDatepicker.prototype,"_showMonthDropdown",2),je([w()],a.ScbDatepicker.prototype,"_showYearDropdown",2),je([n({type:String})],a.ScbDatepicker.prototype,"variant",2),je([n({type:String})],a.ScbDatepicker.prototype,"lang",2),je([n({type:String})],a.ScbDatepicker.prototype,"selectedValue",2),je([n({type:Boolean})],a.ScbDatepicker.prototype,"open",2),a.ScbDatepicker=je([g("scb-datepicker")],a.ScbDatepicker);var Ep=Object.defineProperty,Tp=Object.getOwnPropertyDescriptor,jn=o=>{throw TypeError(o)},Y=(o,e,t,i)=>{for(var r=i>1?void 0:i?Tp(e,t):e,s=o.length-1,l;s>=0;s--)(l=o[s])&&(r=(i?l(e,t,r):l(r))||r);return i&&r&&Ep(e,t,r),r},Ap=(o,e,t)=>e.has(o)||jn("Cannot "+t),zp=(o,e,t)=>e.has(o)?jn("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t),Ke=(o,e,t)=>(Ap(o,e,"access private method"),t),Ce,Fa,Xr,Pi;a.ScbTextField=class extends y{constructor(){super(),zp(this,Ce),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=e=>{e.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&Ke(this,Ce,Pi).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&Ke(this,Ce,Pi).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=e=>{if(this.value=e.detail.value,this._showDatepicker=!1,this._internals){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}if(this.pattern){const t=new RegExp(this.pattern);this.error=!t.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 e=this.leadingIcon?c`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,t=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`
|
|
4151
4151
|
<button
|
|
4152
4152
|
type="button"
|
|
4153
4153
|
class="scb-textfield-clear"
|
|
@@ -4188,20 +4188,22 @@ var ScbWcTest=function(a){"use strict";var Sl;function d(o,e,t,i){var r=argument
|
|
|
4188
4188
|
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
4189
4189
|
>${this.underLabel}</span
|
|
4190
4190
|
>
|
|
4191
|
-
<div class="scb-textfield-wrapper
|
|
4192
|
-
<
|
|
4193
|
-
|
|
4194
|
-
|
|
4195
|
-
|
|
4196
|
-
|
|
4197
|
-
|
|
4198
|
-
|
|
4199
|
-
|
|
4200
|
-
|
|
4191
|
+
<div class="scb-textfield-wrapper">
|
|
4192
|
+
<div class="ripple-wrapper">
|
|
4193
|
+
<textarea
|
|
4194
|
+
class="scb-textfield"
|
|
4195
|
+
?disabled=${this.disabled}
|
|
4196
|
+
name="${this.name}"
|
|
4197
|
+
id="${this._inputId}"
|
|
4198
|
+
?required=${this.required}
|
|
4199
|
+
aria-invalid=${this.error?"true":"false"}
|
|
4200
|
+
aria-describedby=${i}
|
|
4201
|
+
>
|
|
4201
4202
|
${this.value}</textarea
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
4203
|
+
>
|
|
4204
|
+
<md-ripple></md-ripple>
|
|
4205
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
4206
|
+
</div>
|
|
4205
4207
|
</div>
|
|
4206
4208
|
`:this.type==="date"?c`
|
|
4207
4209
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
@@ -4210,28 +4212,37 @@ ${this.value}</textarea
|
|
|
4210
4212
|
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
4211
4213
|
>${this.underLabel}</span
|
|
4212
4214
|
>
|
|
4213
|
-
<div class="scb-textfield-wrapper"
|
|
4215
|
+
<div class="scb-textfield-wrapper">
|
|
4214
4216
|
${e}
|
|
4215
|
-
<
|
|
4216
|
-
|
|
4217
|
-
|
|
4218
|
-
|
|
4219
|
-
|
|
4220
|
-
|
|
4221
|
-
|
|
4222
|
-
|
|
4223
|
-
|
|
4224
|
-
|
|
4225
|
-
|
|
4226
|
-
|
|
4227
|
-
|
|
4217
|
+
<div class="ripple-wrapper">
|
|
4218
|
+
<input
|
|
4219
|
+
class="scb-textfield${this.error?" has-error-icon":""}"
|
|
4220
|
+
.value=${this.value}
|
|
4221
|
+
type="text"
|
|
4222
|
+
name="${this.name}"
|
|
4223
|
+
id="${this._inputId}"
|
|
4224
|
+
?disabled=${this.disabled}
|
|
4225
|
+
?required=${this.required}
|
|
4226
|
+
aria-invalid=${this.error?"true":"false"}
|
|
4227
|
+
aria-describedby=${i}
|
|
4228
|
+
readonly
|
|
4229
|
+
/>
|
|
4230
|
+
${t}
|
|
4231
|
+
<md-ripple></md-ripple>
|
|
4232
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
4233
|
+
</div>
|
|
4234
|
+
<scb-icon-button
|
|
4235
|
+
class="scb-textfield-datepicker-button"
|
|
4236
|
+
icon="calendar_today"
|
|
4237
|
+
@click=${this._toggleDatepicker}
|
|
4238
|
+
aria-label="Välj datum"
|
|
4239
|
+
></scb-icon-button>
|
|
4228
4240
|
<scb-datepicker
|
|
4229
4241
|
variant="popup"
|
|
4230
4242
|
.selectedValue=${this.value}
|
|
4231
4243
|
.open=${this._showDatepicker}
|
|
4232
4244
|
@date-selected=${this._onDateSelected}
|
|
4233
4245
|
></scb-datepicker>
|
|
4234
|
-
${t}
|
|
4235
4246
|
</div>
|
|
4236
4247
|
`:c`
|
|
4237
4248
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
@@ -4240,23 +4251,25 @@ ${this.value}</textarea
|
|
|
4240
4251
|
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
4241
4252
|
>${this.underLabel}</span
|
|
4242
4253
|
>
|
|
4243
|
-
<div class="scb-textfield-wrapper
|
|
4254
|
+
<div class="scb-textfield-wrapper">
|
|
4244
4255
|
${e}
|
|
4245
|
-
<
|
|
4246
|
-
|
|
4247
|
-
|
|
4248
|
-
|
|
4249
|
-
|
|
4250
|
-
|
|
4251
|
-
|
|
4252
|
-
|
|
4253
|
-
|
|
4254
|
-
|
|
4255
|
-
|
|
4256
|
-
|
|
4257
|
-
|
|
4258
|
-
|
|
4259
|
-
|
|
4256
|
+
<div class="ripple-wrapper">
|
|
4257
|
+
<input
|
|
4258
|
+
class="scb-textfield${this.error?" has-error-icon":""}"
|
|
4259
|
+
.value=${this.value}
|
|
4260
|
+
type="${this.type}"
|
|
4261
|
+
name="${this.name}"
|
|
4262
|
+
id="${this._inputId}"
|
|
4263
|
+
?disabled=${this.disabled}
|
|
4264
|
+
?required=${this.required}
|
|
4265
|
+
aria-invalid=${this.error?"true":"false"}
|
|
4266
|
+
aria-describedby=${i}
|
|
4267
|
+
/>
|
|
4268
|
+
${r}
|
|
4269
|
+
${t}
|
|
4270
|
+
<md-ripple></md-ripple>
|
|
4271
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
4272
|
+
</div>
|
|
4260
4273
|
</div>
|
|
4261
4274
|
`}firstUpdated(e){var i;super.firstUpdated(e),this._initialValue=this.value;const t=(i=this.shadowRoot)==null?void 0:i.querySelector(".scb-textfield");t&&(t.addEventListener("input",()=>{const r=t;if(this.value=r.value,this._internals){const s=this.disabled?null:this.value;this._internals.setFormValue(s)}if(this.pattern){const s=new RegExp(this.pattern);this.error=!s.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}))}),t.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),t.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}),t.addEventListener("focus",()=>{this._inputFocused=!0,Ke(this,Ce,Pi).call(this)}),t.addEventListener("blur",()=>{this._inputFocused=!1,Ke(this,Ce,Pi).call(this)})),Ke(this,Ce,Fa).call(this)}updated(e){if(super.updated(e),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(e.has("value")||e.has("disabled"))){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom"))&&Ke(this,Ce,Fa).call(this)}formDisabledCallback(e){this.disabled=e}connectedCallback(){super.connectedCallback(),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=()=>{var t;this.value=this._initialValue;const e=(t=this.shadowRoot)==null?void 0:t.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)),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){var t;const e=(t=this.shadowRoot)==null?void 0:t.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){this.required&&!e.value?e.setCustomValidity(this.errorText||"Ogiltig inmatning."):e.setCustomValidity("");const i=e.reportValidity();this.error=!i;const r=i?"":this.errorText||e.validationMessage||"Ogiltig inmatning.";return i||(this.errorText=r),this._internals&&(i?this._internals.setValidity({}):this._internals.setValidity({customError:!0},r,e)),i}return!0}_onClearClick(){var t;const e=(t=this.shadowRoot)==null?void 0:t.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){if(e.value="",this.value="",this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i),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()}}},Ce=new WeakSet,Fa=function(){const o=Ke(this,Ce,Xr).call(this,this.spacing),e=Ke(this,Ce,Xr).call(this,this.spacingTop)??o,t=Ke(this,Ce,Xr).call(this,this.spacingBottom)??o;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),t?this.style.setProperty("--scb-textfield-spacing-block-end",t):this.style.removeProperty("--scb-textfield-spacing-block-end")},Xr=function(o){if(!o)return;const e=String(o).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e},Pi=function(){var e;const o=(e=this.renderRoot)==null?void 0:e.querySelector(".ripple-wrapper");o&&(this._inputFocused&&this._kbShouldShowRing?o.setAttribute("data-kb-focus","true"):o.removeAttribute("data-kb-focus"))},a.ScbTextField.formAssociated=!0,a.ScbTextField.styles=[m`
|
|
4262
4275
|
:host {
|
|
@@ -4284,9 +4297,6 @@ ${this.value}</textarea
|
|
|
4284
4297
|
:host([type='text']) {
|
|
4285
4298
|
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
4286
4299
|
}
|
|
4287
|
-
:host([type='date']) {
|
|
4288
|
-
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
4289
|
-
}
|
|
4290
4300
|
:host([type='search']) {
|
|
4291
4301
|
--scb-textfield-max-width: var(--scb-textfield-search-max-width);
|
|
4292
4302
|
}
|
|
@@ -4305,6 +4315,9 @@ ${this.value}</textarea
|
|
|
4305
4315
|
:host([type='textarea']) {
|
|
4306
4316
|
--scb-textfield-max-width: var(--scb-textfield-textarea-max-width);
|
|
4307
4317
|
}
|
|
4318
|
+
:host([type='date']) {
|
|
4319
|
+
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
4320
|
+
}
|
|
4308
4321
|
|
|
4309
4322
|
:host {
|
|
4310
4323
|
display: flex;
|
|
@@ -4363,6 +4376,10 @@ ${this.value}</textarea
|
|
|
4363
4376
|
padding-right: var(--spacing-11);
|
|
4364
4377
|
}
|
|
4365
4378
|
|
|
4379
|
+
:host([type='date']) .scb-textfield {
|
|
4380
|
+
padding-right: var(--spacing-11);
|
|
4381
|
+
}
|
|
4382
|
+
|
|
4366
4383
|
md-icon + .scb-textfield {
|
|
4367
4384
|
padding-left: var(--spacing-10);
|
|
4368
4385
|
}
|
|
@@ -4474,7 +4491,16 @@ ${this.value}</textarea
|
|
|
4474
4491
|
height: 100%;
|
|
4475
4492
|
display: block;
|
|
4476
4493
|
}
|
|
4477
|
-
|
|
4494
|
+
|
|
4495
|
+
/* Datumknappen ovanför input/ripple */
|
|
4496
|
+
.scb-textfield-datepicker-button {
|
|
4497
|
+
position: absolute;
|
|
4498
|
+
right: var(--spacing-4);
|
|
4499
|
+
top: 50%;
|
|
4500
|
+
transform: translateY(-50%);
|
|
4501
|
+
z-index: 4;
|
|
4502
|
+
}
|
|
4503
|
+
`],Y([n({type:String,reflect:!0})],a.ScbTextField.prototype,"type",2),Y([n({type:String})],a.ScbTextField.prototype,"label",2),Y([n({type:String,attribute:"supporting-text"})],a.ScbTextField.prototype,"supportingText",2),Y([n({type:String,attribute:"error-text"})],a.ScbTextField.prototype,"errorText",2),Y([n({type:String,attribute:"leading-icon"})],a.ScbTextField.prototype,"leadingIcon",2),Y([n({type:String})],a.ScbTextField.prototype,"name",2),Y([n({type:String})],a.ScbTextField.prototype,"pattern",2),Y([n({type:String,attribute:"value"})],a.ScbTextField.prototype,"value",2),Y([n({type:String})],a.ScbTextField.prototype,"underLabel",2),Y([n({type:Boolean,reflect:!0})],a.ScbTextField.prototype,"error",2),Y([n({type:Boolean,reflect:!0})],a.ScbTextField.prototype,"disabled",2),Y([n({type:Boolean,reflect:!0})],a.ScbTextField.prototype,"required",2),Y([n({type:String,reflect:!0})],a.ScbTextField.prototype,"spacing",2),Y([n({type:String,attribute:"spacing-top",reflect:!0})],a.ScbTextField.prototype,"spacingTop",2),Y([n({type:String,attribute:"spacing-bottom",reflect:!0})],a.ScbTextField.prototype,"spacingBottom",2),Y([w()],a.ScbTextField.prototype,"_showDatepicker",2),a.ScbTextField=Y([g("scb-textfield")],a.ScbTextField);var Ip=Object.defineProperty,Pp=Object.getOwnPropertyDescriptor,Kn=o=>{throw TypeError(o)},Ge=(o,e,t,i)=>{for(var r=i>1?void 0:i?Pp(e,t):e,s=o.length-1,l;s>=0;s--)(l=o[s])&&(r=(i?l(e,t,r):l(r))||r);return i&&r&&Ip(e,t,r),r},Gn=(o,e,t)=>e.has(o)||Kn("Cannot "+t),Tt=(o,e,t)=>(Gn(o,e,"read from private field"),t?t.call(o):e.get(o)),Zr=(o,e,t)=>e.has(o)?Kn("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t),Oi=(o,e,t)=>(Gn(o,e,"access private method"),t),Ha,Zt,Jr,At,Na,Qr;a.ScbRadioGroup=class extends y{constructor(){super(),Zr(this,At),this.name="",this.orientation="vertical",this.disabled=!1,this.ariaLabel=null,this.spacing="",this.spacingTop="",this.spacingBottom="",this.value="",this._internals=null,this._form=null,this._formResetHandler=null,this._initialValue="",Zr(this,Ha,()=>{var t;const e=(t=this.shadowRoot)==null?void 0:t.querySelector("slot");return e?e.assignedElements({flatten:!0}).filter(i=>i.tagName.toLowerCase()==="scb-radio-button"):[]}),Zr(this,Zt,()=>{const e=Tt(this,Ha).call(this);if(!e.length)return;let t=null;for(const i of e){const r=i;this.name&&i.setAttribute("name",this.name),this.disabled?i.setAttribute("disabled",""):i.removeAttribute("disabled"),this.orientation==="horizontal"?i.setAttribute("orientation","horizontal"):i.removeAttribute("orientation");const s=r.value??i.getAttribute("value")??"",l=typeof r.checked=="boolean"?r.checked:i.hasAttribute("checked");if(this.value){const h=String(s)===this.value;h&&!l?r.checked=!0:!h&&l&&(r.checked=!1)}else l&&t===null&&(t=String(s))}!this.value&&t!==null&&(this.value=t)}),Zr(this,Jr,e=>{var r,s;const t=e.composedPath().find(l=>{var h;return((h=l==null?void 0:l.tagName)==null?void 0:h.toLowerCase())==="scb-radio-button"}),i=(t==null?void 0:t.value)??((r=t==null?void 0:t.getAttribute)==null?void 0:r.call(t,"value"))??((s=e.target)==null?void 0:s.value)??"";this.value=String(i??""),this.dispatchEvent(new CustomEvent("scb-change",{detail:{value:String(i??""),originalIsTrusted:(e==null?void 0:e.isTrusted)===!0},bubbles:!0,composed:!0}))}),"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const e=this.orientation==="horizontal"?"row":"column";return c`
|
|
4478
4504
|
<div
|
|
4479
4505
|
class="g"
|
|
4480
4506
|
role="radiogroup"
|