scb-wc-test 0.1.115 → 0.1.117
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mvc/components/scb-datepicker/scb-datepicker.js +33 -25
- package/mvc/components/scb-textfield/scb-textfield.js +103 -38
- package/package.json +2 -2
- package/scb-datepicker/scb-datepicker.d.ts +9 -5
- package/scb-datepicker/scb-datepicker.js +130 -91
- package/scb-textfield/scb-textfield.js +153 -69
- package/scb-wc-test.bundle.js +177 -104
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css as v, LitElement as x, html as
|
|
1
|
+
import { css as v, LitElement as x, html as d } from "lit";
|
|
2
2
|
import { property as a, state as g, customElement as y } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/icon/icon.js";
|
|
4
4
|
import "@material/web/ripple/ripple.js";
|
|
@@ -7,17 +7,17 @@ import "../scb-datepicker/scb-datepicker.js";
|
|
|
7
7
|
import "../scb-icon-button/scb-icon-button.js";
|
|
8
8
|
var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, m = (t) => {
|
|
9
9
|
throw TypeError(t);
|
|
10
|
-
}, r = (t, e, i,
|
|
11
|
-
for (var
|
|
12
|
-
(
|
|
13
|
-
return
|
|
14
|
-
},
|
|
10
|
+
}, r = (t, e, i, n) => {
|
|
11
|
+
for (var l = n > 1 ? void 0 : n ? _(e, i) : e, p = t.length - 1, h; p >= 0; p--)
|
|
12
|
+
(h = t[p]) && (l = (n ? h(e, i, l) : h(l)) || l);
|
|
13
|
+
return n && l && w(e, i, l), l;
|
|
14
|
+
}, $ = (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), c = (t, e, i) => ($(t, e, "access private method"), i), o, f, b, u;
|
|
15
15
|
let s = class extends x {
|
|
16
16
|
constructor() {
|
|
17
|
-
super(),
|
|
18
|
-
t.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused &&
|
|
17
|
+
super(), k(this, o), this._internals = null, this._inputFocused = !1, this._kbShouldShowRing = !1, this._onGlobalKeydown = (t) => {
|
|
18
|
+
t.key === "Tab" && (this._kbShouldShowRing = !0, this._inputFocused && c(this, o, u).call(this));
|
|
19
19
|
}, this._onGlobalPointerDown = () => {
|
|
20
|
-
this._kbShouldShowRing = !1, this._inputFocused &&
|
|
20
|
+
this._kbShouldShowRing = !1, this._inputFocused && c(this, o, u).call(this);
|
|
21
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 = () => {
|
|
22
22
|
this._showDatepicker = !this._showDatepicker;
|
|
23
23
|
}, this._onDateSelected = (t) => {
|
|
@@ -25,10 +25,13 @@ let s = class extends x {
|
|
|
25
25
|
const e = this.disabled ? null : this.value;
|
|
26
26
|
this._internals.setFormValue(e);
|
|
27
27
|
}
|
|
28
|
-
if (this.pattern)
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
if (this.pattern)
|
|
29
|
+
if (!this.value)
|
|
30
|
+
this.error = !1;
|
|
31
|
+
else {
|
|
32
|
+
const e = new RegExp(this.pattern);
|
|
33
|
+
this.error = !e.test(this.value);
|
|
34
|
+
}
|
|
32
35
|
this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
|
|
33
36
|
new CustomEvent("onValueChanged", {
|
|
34
37
|
detail: { value: this.value },
|
|
@@ -39,9 +42,9 @@ let s = class extends x {
|
|
|
39
42
|
}, "attachInternals" in this && (this._internals = this.attachInternals());
|
|
40
43
|
}
|
|
41
44
|
render() {
|
|
42
|
-
const t = this.leadingIcon ?
|
|
45
|
+
const t = this.leadingIcon ? d`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, e = this.error ? d`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>` : null;
|
|
43
46
|
this.underLabel = this.error ? this.errorText || "Ogiltig inmatning." : this.supportingText, this.value = this.value || "";
|
|
44
|
-
const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0,
|
|
47
|
+
const i = this.underLabel ? `${this._inputId}-supporting-text` : void 0, n = this.type === "search" && this.value ? d`
|
|
45
48
|
<button
|
|
46
49
|
type="button"
|
|
47
50
|
class="scb-textfield-clear"
|
|
@@ -49,34 +52,13 @@ let s = class extends x {
|
|
|
49
52
|
aria-label="Rensa fält"
|
|
50
53
|
>
|
|
51
54
|
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
|
52
|
-
<circle
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
r="10"
|
|
56
|
-
fill="none"
|
|
57
|
-
stroke="currentColor"
|
|
58
|
-
stroke-width="2"
|
|
59
|
-
></circle>
|
|
60
|
-
<line
|
|
61
|
-
x1="8"
|
|
62
|
-
y1="8"
|
|
63
|
-
x2="16"
|
|
64
|
-
y2="16"
|
|
65
|
-
stroke="currentColor"
|
|
66
|
-
stroke-width="2"
|
|
67
|
-
></line>
|
|
68
|
-
<line
|
|
69
|
-
x1="16"
|
|
70
|
-
y1="8"
|
|
71
|
-
x2="8"
|
|
72
|
-
y2="16"
|
|
73
|
-
stroke="currentColor"
|
|
74
|
-
stroke-width="2"
|
|
75
|
-
></line>
|
|
55
|
+
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"></circle>
|
|
56
|
+
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2"></line>
|
|
57
|
+
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2"></line>
|
|
76
58
|
</svg>
|
|
77
59
|
</button>
|
|
78
60
|
` : null;
|
|
79
|
-
return this.type === "textarea" ?
|
|
61
|
+
return this.type === "textarea" ? d`
|
|
80
62
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
81
63
|
<span
|
|
82
64
|
class="scb-textfield-supporting-text"
|
|
@@ -100,7 +82,7 @@ ${this.value}</textarea
|
|
|
100
82
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
101
83
|
</div>
|
|
102
84
|
</div>
|
|
103
|
-
` : this.type === "date" ?
|
|
85
|
+
` : this.type === "date" ? d`
|
|
104
86
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
105
87
|
<span
|
|
106
88
|
class="scb-textfield-supporting-text"
|
|
@@ -121,25 +103,111 @@ ${this.value}</textarea
|
|
|
121
103
|
aria-invalid=${this.error ? "true" : "false"}
|
|
122
104
|
aria-describedby=${i}
|
|
123
105
|
readonly
|
|
106
|
+
@focus=${this._toggleDatepicker}
|
|
107
|
+
@click=${this._toggleDatepicker}
|
|
124
108
|
/>
|
|
125
|
-
${e}
|
|
126
109
|
<md-ripple></md-ripple>
|
|
127
110
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
128
111
|
</div>
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
112
|
+
${this.error ? e : d`
|
|
113
|
+
<scb-icon-button
|
|
114
|
+
class="scb-textfield-datepicker-button"
|
|
115
|
+
icon="calendar_today"
|
|
116
|
+
@click=${this._toggleDatepicker}
|
|
117
|
+
aria-label="Välj datum"
|
|
118
|
+
></scb-icon-button>
|
|
119
|
+
`}
|
|
135
120
|
<scb-datepicker
|
|
136
|
-
variant="popup"
|
|
137
121
|
.selectedValue=${this.value}
|
|
138
122
|
.open=${this._showDatepicker}
|
|
139
123
|
@date-selected=${this._onDateSelected}
|
|
140
124
|
></scb-datepicker>
|
|
141
125
|
</div>
|
|
142
|
-
` :
|
|
126
|
+
` : this.type === "datetime-local" ? d`
|
|
127
|
+
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
128
|
+
<span
|
|
129
|
+
class="scb-textfield-supporting-text"
|
|
130
|
+
id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
|
|
131
|
+
>${this.underLabel}</span
|
|
132
|
+
>
|
|
133
|
+
<div class="scb-textfield-wrapper" style="position:relative;">
|
|
134
|
+
${t}
|
|
135
|
+
<div class="ripple-wrapper">
|
|
136
|
+
<input
|
|
137
|
+
class="scb-textfield${this.error ? " has-error-icon" : ""}"
|
|
138
|
+
.value=${this.value}
|
|
139
|
+
type="text"
|
|
140
|
+
name="${this.name}"
|
|
141
|
+
id="${this._inputId}"
|
|
142
|
+
?disabled=${this.disabled}
|
|
143
|
+
?required=${this.required}
|
|
144
|
+
aria-invalid=${this.error ? "true" : "false"}
|
|
145
|
+
aria-describedby=${i}
|
|
146
|
+
readonly
|
|
147
|
+
@focus=${this._toggleDatepicker}
|
|
148
|
+
@click=${this._toggleDatepicker}
|
|
149
|
+
/>
|
|
150
|
+
|
|
151
|
+
<md-ripple></md-ripple>
|
|
152
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
${this.error ? e : d`
|
|
156
|
+
<scb-icon-button
|
|
157
|
+
class="scb-textfield-datepicker-button"
|
|
158
|
+
icon="calendar_today"
|
|
159
|
+
@click=${this._toggleDatepicker}
|
|
160
|
+
aria-label="Välj datum"
|
|
161
|
+
></scb-icon-button>
|
|
162
|
+
`}
|
|
163
|
+
<scb-datepicker
|
|
164
|
+
variant="datetime-local"
|
|
165
|
+
.selectedValue=${this.value}
|
|
166
|
+
.open=${this._showDatepicker}
|
|
167
|
+
@date-selected=${this._onDateSelected}
|
|
168
|
+
></scb-datepicker>
|
|
169
|
+
</div>
|
|
170
|
+
` : this.type === "time" ? d`
|
|
171
|
+
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
172
|
+
<span
|
|
173
|
+
class="scb-textfield-supporting-text"
|
|
174
|
+
id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
|
|
175
|
+
>${this.underLabel}</span
|
|
176
|
+
>
|
|
177
|
+
<div class="scb-textfield-wrapper">
|
|
178
|
+
${t}
|
|
179
|
+
<div class="ripple-wrapper">
|
|
180
|
+
<input
|
|
181
|
+
class="scb-textfield${this.error ? " has-error-icon" : ""}"
|
|
182
|
+
.value=${this.value}
|
|
183
|
+
type="time"
|
|
184
|
+
name="${this.name}"
|
|
185
|
+
id="${this._inputId}"
|
|
186
|
+
?disabled=${this.disabled}
|
|
187
|
+
?required=${this.required}
|
|
188
|
+
aria-invalid=${this.error ? "true" : "false"}
|
|
189
|
+
aria-describedby=${i}
|
|
190
|
+
@input=${(l) => {
|
|
191
|
+
const p = l.target;
|
|
192
|
+
if (this.value = p.value, this._internals) {
|
|
193
|
+
const h = this.disabled ? null : this.value;
|
|
194
|
+
this._internals.setFormValue(h);
|
|
195
|
+
}
|
|
196
|
+
this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
|
|
197
|
+
new CustomEvent("onValueChanged", {
|
|
198
|
+
detail: { value: this.value },
|
|
199
|
+
bubbles: !0,
|
|
200
|
+
composed: !0
|
|
201
|
+
})
|
|
202
|
+
);
|
|
203
|
+
}}
|
|
204
|
+
/>
|
|
205
|
+
${e}
|
|
206
|
+
<md-ripple></md-ripple>
|
|
207
|
+
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
` : d`
|
|
143
211
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
144
212
|
<span
|
|
145
213
|
class="scb-textfield-supporting-text"
|
|
@@ -160,7 +228,7 @@ ${this.value}</textarea
|
|
|
160
228
|
aria-invalid=${this.error ? "true" : "false"}
|
|
161
229
|
aria-describedby=${i}
|
|
162
230
|
/>
|
|
163
|
-
${
|
|
231
|
+
${n}
|
|
164
232
|
${e}
|
|
165
233
|
<md-ripple></md-ripple>
|
|
166
234
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
@@ -177,15 +245,18 @@ ${this.value}</textarea
|
|
|
177
245
|
super.firstUpdated(t), this._initialValue = this.value;
|
|
178
246
|
const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scb-textfield");
|
|
179
247
|
e && (e.addEventListener("input", () => {
|
|
180
|
-
const
|
|
181
|
-
if (this.value =
|
|
182
|
-
const
|
|
183
|
-
this._internals.setFormValue(
|
|
184
|
-
}
|
|
185
|
-
if (this.pattern)
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
248
|
+
const n = e;
|
|
249
|
+
if (this.value = n.value, this._internals) {
|
|
250
|
+
const l = this.disabled ? null : this.value;
|
|
251
|
+
this._internals.setFormValue(l);
|
|
252
|
+
}
|
|
253
|
+
if (this.pattern)
|
|
254
|
+
if (!this.value)
|
|
255
|
+
this.error = !1;
|
|
256
|
+
else {
|
|
257
|
+
const l = new RegExp(this.pattern);
|
|
258
|
+
this.error = !l.test(this.value);
|
|
259
|
+
}
|
|
189
260
|
this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
|
|
190
261
|
new CustomEvent("onValueChanged", {
|
|
191
262
|
detail: { value: this.value },
|
|
@@ -198,17 +269,17 @@ ${this.value}</textarea
|
|
|
198
269
|
}), e.addEventListener("select", () => {
|
|
199
270
|
this.dispatchEvent(new Event("select", { bubbles: !0, composed: !0 }));
|
|
200
271
|
}), e.addEventListener("focus", () => {
|
|
201
|
-
this._inputFocused = !0,
|
|
272
|
+
this._inputFocused = !0, c(this, o, u).call(this);
|
|
202
273
|
}), e.addEventListener("blur", () => {
|
|
203
|
-
this._inputFocused = !1,
|
|
204
|
-
})),
|
|
274
|
+
this._inputFocused = !1, c(this, o, u).call(this);
|
|
275
|
+
})), c(this, o, f).call(this);
|
|
205
276
|
}
|
|
206
277
|
updated(t) {
|
|
207
278
|
if (super.updated(t), this.toggleAttribute("aria-disabled", this.disabled), this._internals && (t.has("value") || t.has("disabled"))) {
|
|
208
279
|
const e = this.disabled ? null : this.value;
|
|
209
280
|
this._internals.setFormValue(e);
|
|
210
281
|
}
|
|
211
|
-
(t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) &&
|
|
282
|
+
(t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && c(this, o, f).call(this);
|
|
212
283
|
}
|
|
213
284
|
// Körs av webbläsaren när formuläret sätter disabled på kontrollen
|
|
214
285
|
formDisabledCallback(t) {
|
|
@@ -238,8 +309,8 @@ ${this.value}</textarea
|
|
|
238
309
|
this.required && !t.value ? t.setCustomValidity(this.errorText || "Ogiltig inmatning.") : t.setCustomValidity("");
|
|
239
310
|
const i = t.reportValidity();
|
|
240
311
|
this.error = !i;
|
|
241
|
-
const
|
|
242
|
-
return i || (this.errorText =
|
|
312
|
+
const n = i ? "" : this.errorText || t.validationMessage || "Ogiltig inmatning.";
|
|
313
|
+
return i || (this.errorText = n), this._internals && (i ? this._internals.setValidity({}) : this._internals.setValidity({ customError: !0 }, n, t)), i;
|
|
243
314
|
}
|
|
244
315
|
return !0;
|
|
245
316
|
}
|
|
@@ -267,16 +338,16 @@ ${this.value}</textarea
|
|
|
267
338
|
};
|
|
268
339
|
o = /* @__PURE__ */ new WeakSet();
|
|
269
340
|
f = function() {
|
|
270
|
-
const t =
|
|
341
|
+
const t = c(this, o, b).call(this, this.spacing), e = c(this, o, b).call(this, this.spacingTop) ?? t, i = c(this, o, b).call(this, this.spacingBottom) ?? t;
|
|
271
342
|
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");
|
|
272
343
|
};
|
|
273
|
-
|
|
344
|
+
b = function(t) {
|
|
274
345
|
if (!t) return;
|
|
275
346
|
const e = String(t).trim();
|
|
276
347
|
if (e)
|
|
277
348
|
return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
|
|
278
349
|
};
|
|
279
|
-
|
|
350
|
+
u = function() {
|
|
280
351
|
var e;
|
|
281
352
|
const t = (e = this.renderRoot) == null ? void 0 : e.querySelector(".ripple-wrapper");
|
|
282
353
|
t && (this._inputFocused && this._kbShouldShowRing ? t.setAttribute("data-kb-focus", "true") : t.removeAttribute("data-kb-focus"));
|
|
@@ -309,6 +380,12 @@ s.styles = [
|
|
|
309
380
|
:host([type='text']) {
|
|
310
381
|
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
311
382
|
}
|
|
383
|
+
:host([type='date']) {
|
|
384
|
+
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
385
|
+
}
|
|
386
|
+
:host([type='datetime-local']) {
|
|
387
|
+
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
388
|
+
}
|
|
312
389
|
:host([type='search']) {
|
|
313
390
|
--scb-textfield-max-width: var(--scb-textfield-search-max-width);
|
|
314
391
|
}
|
|
@@ -330,6 +407,13 @@ s.styles = [
|
|
|
330
407
|
:host([type='date']) {
|
|
331
408
|
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
332
409
|
}
|
|
410
|
+
:host([type='time']) {
|
|
411
|
+
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
412
|
+
}
|
|
413
|
+
input[type='time']::-webkit-calendar-picker-indicator {
|
|
414
|
+
display: none;
|
|
415
|
+
background: none;
|
|
416
|
+
}
|
|
333
417
|
|
|
334
418
|
:host {
|
|
335
419
|
display: flex;
|