@justeattakeaway/pie-text-input 0.20.0 → 0.21.0
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/README.md +1 -1
- package/dist/index.js +181 -178
- package/package.json +1 -1
- package/src/index.ts +5 -1
package/README.md
CHANGED
|
@@ -90,7 +90,7 @@ import { PieTextInput } from '@justeattakeaway/pie-text-input/dist/react';
|
|
|
90
90
|
| `type` | `'text'`, `'number'`, `'password'`, `'url'`, `'email'`, `'tel'` | `text` | The type of HTML input to render. |
|
|
91
91
|
| `value` | `string` | `''` | The value of the input (used as a key/value pair in HTML forms with `name`). |
|
|
92
92
|
| `assistiveText` | `string` | `''` | Allows assistive text to be displayed below the input element. |
|
|
93
|
-
| `status` | `'error'`, `'success'` | `undefined` | The status of the input component / assistive text. |
|
|
93
|
+
| `status` | `'error'`, `'success'` | `undefined` | The status of the input component / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. |
|
|
94
94
|
| `step` | `number` | - | An optional amount that value should be incremented or decremented by when using the up and down arrows in the input. Only applies when type is `number`. |
|
|
95
95
|
| `min` | `number` | - | The minimum value of the input. Only applies when type is `number`. If the value provided is lower, the input is invalid. |
|
|
96
96
|
| `max` | `number` | - | The maximum value of the input. Only applies when type is `number`. If the value provided is higher, the input is invalid. |
|
package/dist/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as u, query as
|
|
3
|
-
import { ifDefined as
|
|
1
|
+
import { LitElement as pt, html as ut, nothing as At, unsafeCSS as Vt } from "lit";
|
|
2
|
+
import { property as u, query as mt } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as m } from "lit/directives/if-defined.js";
|
|
4
4
|
import { live as J } from "lit/directives/live.js";
|
|
5
|
-
import { FormControlMixin as
|
|
5
|
+
import { FormControlMixin as Nt, RtlMixin as $t, wrapNativeEvent as Lt, validPropertyValues as ft, defineCustomElement as Ot } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
const
|
|
8
|
-
`,
|
|
7
|
+
const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-block: var(--dt-spacing-c);--input-padding-inline: var(--dt-spacing-d);--input-gap: var(--dt-spacing-d);--input-text-color: var(--dt-color-content-default);--input-text-color-leading-trailing-content: var(--dt-color-content-default);--input-text-color-placeholder: var(--dt-color-content-subdued);--input-border-color: var(--dt-color-interactive-form);--input-container-color: var(--dt-color-container-default);--input-radius: var(--dt-radius-rounded-c);--input-font-size: var(--dt-font-body-l-size);--input-height: 48px;--input-cursor: text;--icon-display-override: block;--icon-size-override: 24px;height:var(--input-height);border:1px solid var(--input-border-color);border-radius:var(--input-radius);padding-inline-start:var(--input-padding-inline);padding-inline-end:var(--input-padding-inline);padding-block-start:var(--input-padding-block);padding-block-end:var(--input-padding-block);line-height:24px;font-size:var(--input-font-size);display:flex;flex-wrap:nowrap;align-items:center;background-color:var(--input-container-color);color:var(--input-text-color-leading-trailing-content);cursor:var(--input-cursor)}.c-textInput[data-pie-size=large]{--input-padding-block: var(--dt-spacing-d);--input-height: 56px}.c-textInput[data-pie-size=small]{--input-padding-block: var(--dt-spacing-b);--input-height: 40px}.c-textInput[data-pie-status=error]{--input-border-color: var(--dt-color-support-error)}.c-textInput ::slotted([slot=leading]){margin-inline-end:var(--input-gap)}.c-textInput ::slotted([slot=trailing]){margin-inline-start:var(--input-gap)}@supports (gap: var(--input-gap)){.c-textInput{gap:var(--input-gap)}.c-textInput ::slotted([slot=leading]){margin-inline-end:0}.c-textInput ::slotted([slot=trailing]){margin-inline-start:0}}@media (hover: hover){.c-textInput:hover{--input-container-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}}.c-textInput[data-pie-readonly]{--input-container-color: var(--dt-color-disabled-01);--input-border-color: var(--dt-color-border-inverse)}.c-textInput[data-pie-disabled][data-pie-readonly],.c-textInput[data-pie-disabled]{--input-container-color: var(--dt-color-disabled-01);--input-border-color: var(--dt-color-disabled-01);--input-text-color: var(--dt-color-content-disabled);--input-text-color-placeholder: var(--dt-color-content-disabled);--input-text-color-leading-trailing-content: var(--dt-color-content-disabled);--input-cursor: auto}.c-textInput:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}input{border:0;outline:0;height:24px;padding:0;color:var(--input-text-color);width:100%;font-size:var(--input-font-size);font-family:inherit;background:none;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}input::placeholder{color:var(--input-text-color-placeholder)}input:disabled{-webkit-text-fill-color:var(--input-text-color);color:var(--input-text-color);-webkit-opacity:1;opacity:1}input[type=number]:not([step])::-webkit-inner-spin-button,input[type=number]:not([step])::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]:not([step]){-moz-appearance:textfield}
|
|
8
|
+
`, Rt = ["text", "number", "password", "url", "email", "tel"], Gt = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], _t = ["success", "error"], Jt = ["small", "medium", "large"], A = {
|
|
9
9
|
type: "text",
|
|
10
10
|
value: "",
|
|
11
11
|
size: "medium"
|
|
12
12
|
};
|
|
13
13
|
(function() {
|
|
14
|
-
(function(
|
|
15
|
-
const s = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(),
|
|
14
|
+
(function(x) {
|
|
15
|
+
const s = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), C = {
|
|
16
16
|
ariaAtomic: "aria-atomic",
|
|
17
17
|
ariaAutoComplete: "aria-autocomplete",
|
|
18
18
|
ariaBusy: "aria-busy",
|
|
@@ -59,85 +59,85 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
59
59
|
for (let a in C) {
|
|
60
60
|
t[a] = null;
|
|
61
61
|
let i = null;
|
|
62
|
-
const
|
|
62
|
+
const r = C[a];
|
|
63
63
|
Object.defineProperty(t, a, {
|
|
64
64
|
get() {
|
|
65
65
|
return i;
|
|
66
66
|
},
|
|
67
|
-
set(
|
|
68
|
-
i =
|
|
67
|
+
set(n) {
|
|
68
|
+
i = n, e.isConnected ? e.setAttribute(r, n) : k.set(e, t);
|
|
69
69
|
}
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
72
|
};
|
|
73
|
-
function
|
|
73
|
+
function O(e) {
|
|
74
74
|
const t = c.get(e), { form: a } = t;
|
|
75
|
-
|
|
75
|
+
at(e, a, t), et(e, t.labels);
|
|
76
76
|
}
|
|
77
77
|
const P = (e, t = !1) => {
|
|
78
78
|
const a = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
|
|
79
|
-
acceptNode(
|
|
80
|
-
return c.has(
|
|
79
|
+
acceptNode(n) {
|
|
80
|
+
return c.has(n) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
81
81
|
}
|
|
82
82
|
});
|
|
83
83
|
let i = a.nextNode();
|
|
84
|
-
const
|
|
84
|
+
const r = !t || e.disabled;
|
|
85
85
|
for (; i; )
|
|
86
|
-
i.formDisabledCallback &&
|
|
87
|
-
},
|
|
86
|
+
i.formDisabledCallback && r && B(i, e.disabled), i = a.nextNode();
|
|
87
|
+
}, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, R = z() ? new MutationObserver((e) => {
|
|
88
88
|
for (const t of e) {
|
|
89
89
|
const a = t.target;
|
|
90
90
|
if (t.attributeName === "disabled" && (a.constructor.formAssociated ? B(a, a.hasAttribute("disabled")) : a.localName === "fieldset" && P(a)), t.attributeName === "name" && a.constructor.formAssociated) {
|
|
91
|
-
const i = c.get(a),
|
|
92
|
-
i.setFormValue(
|
|
91
|
+
const i = c.get(a), r = V.get(a);
|
|
92
|
+
i.setFormValue(r);
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
}) : {};
|
|
96
96
|
function W(e) {
|
|
97
97
|
e.forEach((t) => {
|
|
98
|
-
const { addedNodes: a, removedNodes: i } = t,
|
|
99
|
-
|
|
100
|
-
var
|
|
101
|
-
if (c.has(o) && o.constructor.formAssociated &&
|
|
98
|
+
const { addedNodes: a, removedNodes: i } = t, r = Array.from(a), n = Array.from(i);
|
|
99
|
+
r.forEach((o) => {
|
|
100
|
+
var f;
|
|
101
|
+
if (c.has(o) && o.constructor.formAssociated && O(o), k.has(o)) {
|
|
102
102
|
const p = k.get(o);
|
|
103
103
|
Object.keys(C).filter((v) => p[v] !== null).forEach((v) => {
|
|
104
104
|
o.setAttribute(C[v], p[v]);
|
|
105
105
|
}), k.delete(o);
|
|
106
106
|
}
|
|
107
|
-
if (
|
|
108
|
-
const p =
|
|
109
|
-
o.setAttribute("internals-valid", p.validity.valid.toString()), o.setAttribute("internals-invalid", (!p.validity.valid).toString()), o.setAttribute("aria-invalid", (!p.validity.valid).toString()),
|
|
107
|
+
if (b.has(o)) {
|
|
108
|
+
const p = b.get(o);
|
|
109
|
+
o.setAttribute("internals-valid", p.validity.valid.toString()), o.setAttribute("internals-invalid", (!p.validity.valid).toString()), o.setAttribute("aria-invalid", (!p.validity.valid).toString()), b.delete(o);
|
|
110
110
|
}
|
|
111
111
|
if (o.localName === "form") {
|
|
112
|
-
const p = y.get(o),
|
|
112
|
+
const p = y.get(o), E = document.createTreeWalker(o, NodeFilter.SHOW_ELEMENT, {
|
|
113
113
|
acceptNode(G) {
|
|
114
114
|
return c.has(G) && G.constructor.formAssociated && !(p && p.has(G)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
115
115
|
}
|
|
116
116
|
});
|
|
117
|
-
let v =
|
|
117
|
+
let v = E.nextNode();
|
|
118
118
|
for (; v; )
|
|
119
|
-
|
|
119
|
+
O(v), v = E.nextNode();
|
|
120
120
|
}
|
|
121
|
-
o.localName === "fieldset" && ((
|
|
122
|
-
}),
|
|
123
|
-
const
|
|
124
|
-
|
|
121
|
+
o.localName === "fieldset" && ((f = R.observe) === null || f === void 0 || f.call(R, o, Y), P(o, !0));
|
|
122
|
+
}), n.forEach((o) => {
|
|
123
|
+
const f = c.get(o);
|
|
124
|
+
f && g.get(f) && Z(f), S.has(o) && S.get(o).disconnect();
|
|
125
125
|
});
|
|
126
126
|
});
|
|
127
127
|
}
|
|
128
|
-
function
|
|
128
|
+
function ht(e) {
|
|
129
129
|
e.forEach((t) => {
|
|
130
130
|
const { removedNodes: a } = t;
|
|
131
131
|
a.forEach((i) => {
|
|
132
|
-
const
|
|
133
|
-
c.has(i) &&
|
|
132
|
+
const r = L.get(t.target);
|
|
133
|
+
c.has(i) && rt(i), r.disconnect();
|
|
134
134
|
});
|
|
135
135
|
});
|
|
136
136
|
}
|
|
137
|
-
const
|
|
137
|
+
const gt = (e) => {
|
|
138
138
|
var t, a;
|
|
139
|
-
const i = new MutationObserver(
|
|
140
|
-
!((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (a = i.observe) === null || a === void 0 || a.call(i, e, { childList: !0 }),
|
|
139
|
+
const i = new MutationObserver(ht);
|
|
140
|
+
!((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (a = i.observe) === null || a === void 0 || a.call(i, e, { childList: !0 }), L.set(e, i);
|
|
141
141
|
};
|
|
142
142
|
z() && new MutationObserver(W);
|
|
143
143
|
const q = {
|
|
@@ -145,83 +145,83 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
145
145
|
subtree: !0
|
|
146
146
|
}, B = (e, t) => {
|
|
147
147
|
e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
|
|
148
|
-
},
|
|
148
|
+
}, Z = (e) => {
|
|
149
149
|
g.get(e).forEach((a) => {
|
|
150
150
|
a.remove();
|
|
151
151
|
}), g.set(e, []);
|
|
152
|
-
},
|
|
152
|
+
}, tt = (e, t) => {
|
|
153
153
|
const a = document.createElement("input");
|
|
154
154
|
return a.type = "hidden", a.name = e.getAttribute("name"), e.after(a), g.get(t).push(a), a;
|
|
155
|
-
},
|
|
155
|
+
}, yt = (e, t) => {
|
|
156
156
|
var a;
|
|
157
|
-
g.set(t, []), (a = R.observe) === null || a === void 0 || a.call(R, e,
|
|
158
|
-
},
|
|
157
|
+
g.set(t, []), (a = R.observe) === null || a === void 0 || a.call(R, e, Y);
|
|
158
|
+
}, et = (e, t) => {
|
|
159
159
|
if (t.length) {
|
|
160
160
|
Array.from(t).forEach((i) => i.addEventListener("click", e.click.bind(e)));
|
|
161
161
|
let a = t[0].id;
|
|
162
162
|
t[0].id || (a = `${t[0].htmlFor}_Label`, t[0].id = a), e.setAttribute("aria-labelledby", a);
|
|
163
163
|
}
|
|
164
164
|
}, _ = (e) => {
|
|
165
|
-
const t = Array.from(e.elements).filter((
|
|
166
|
-
e.toggleAttribute("internals-invalid",
|
|
167
|
-
}, yt = (e) => {
|
|
168
|
-
_(D(e.target));
|
|
165
|
+
const t = Array.from(e.elements).filter((n) => !n.tagName.includes("-") && n.validity).map((n) => n.validity.valid), a = y.get(e) || [], i = Array.from(a).filter((n) => n.isConnected).map((n) => c.get(n).validity.valid), r = [...t, ...i].includes(!1);
|
|
166
|
+
e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
|
|
169
167
|
}, vt = (e) => {
|
|
170
168
|
_(D(e.target));
|
|
171
169
|
}, bt = (e) => {
|
|
170
|
+
_(D(e.target));
|
|
171
|
+
}, wt = (e) => {
|
|
172
172
|
const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((a) => `${a}:not([disabled])`).map((a) => `${a}:not([form])${e.id ? `,${a}[form='${e.id}']` : ""}`).join(",");
|
|
173
173
|
e.addEventListener("click", (a) => {
|
|
174
174
|
if (a.target.closest(t)) {
|
|
175
|
-
const
|
|
175
|
+
const r = y.get(e);
|
|
176
176
|
if (e.noValidate)
|
|
177
177
|
return;
|
|
178
|
-
|
|
178
|
+
r.size && Array.from(r).reverse().map((f) => c.get(f).reportValidity()).includes(!1) && a.preventDefault();
|
|
179
179
|
}
|
|
180
180
|
});
|
|
181
|
-
},
|
|
181
|
+
}, Et = (e) => {
|
|
182
182
|
const t = y.get(e.target);
|
|
183
183
|
t && t.size && t.forEach((a) => {
|
|
184
184
|
a.constructor.formAssociated && a.formResetCallback && a.formResetCallback.apply(a);
|
|
185
185
|
});
|
|
186
|
-
},
|
|
186
|
+
}, at = (e, t, a) => {
|
|
187
187
|
if (t) {
|
|
188
188
|
const i = y.get(t);
|
|
189
189
|
if (i)
|
|
190
190
|
i.add(e);
|
|
191
191
|
else {
|
|
192
|
-
const
|
|
193
|
-
|
|
192
|
+
const r = /* @__PURE__ */ new Set();
|
|
193
|
+
r.add(e), y.set(t, r), wt(t), t.addEventListener("reset", Et), t.addEventListener("input", vt), t.addEventListener("change", bt);
|
|
194
194
|
}
|
|
195
|
-
|
|
195
|
+
I.set(t, { ref: e, internals: a }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
|
|
196
196
|
e.formAssociatedCallback.apply(e, [t]);
|
|
197
197
|
}, 0), _(t);
|
|
198
198
|
}
|
|
199
199
|
}, D = (e) => {
|
|
200
200
|
let t = e.parentNode;
|
|
201
201
|
return t && t.tagName !== "FORM" && (t = D(t)), t;
|
|
202
|
-
},
|
|
202
|
+
}, w = (e, t, a = DOMException) => {
|
|
203
203
|
if (!e.constructor.formAssociated)
|
|
204
204
|
throw new a(t);
|
|
205
|
-
},
|
|
205
|
+
}, it = (e, t, a) => {
|
|
206
206
|
const i = y.get(e);
|
|
207
|
-
return i && i.size && i.forEach((
|
|
208
|
-
c.get(
|
|
207
|
+
return i && i.size && i.forEach((r) => {
|
|
208
|
+
c.get(r)[a]() || (t = !1);
|
|
209
209
|
}), t;
|
|
210
|
-
},
|
|
210
|
+
}, rt = (e) => {
|
|
211
211
|
if (e.constructor.formAssociated) {
|
|
212
212
|
const t = c.get(e), { labels: a, form: i } = t;
|
|
213
|
-
|
|
213
|
+
et(e, a), at(e, i, t);
|
|
214
214
|
}
|
|
215
215
|
};
|
|
216
216
|
function z() {
|
|
217
217
|
return typeof MutationObserver < "u";
|
|
218
218
|
}
|
|
219
|
-
class
|
|
219
|
+
class xt {
|
|
220
220
|
constructor() {
|
|
221
221
|
this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
|
|
222
222
|
}
|
|
223
223
|
}
|
|
224
|
-
const
|
|
224
|
+
const Mt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), It = (e, t, a) => (e.valid = kt(t), Object.keys(t).forEach((i) => e[i] = t[i]), a && _(a), e), kt = (e) => {
|
|
225
225
|
let t = !0;
|
|
226
226
|
for (let a in e)
|
|
227
227
|
a !== "valid" && e[a] !== !1 && (t = !1);
|
|
@@ -242,9 +242,9 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
242
242
|
add(t) {
|
|
243
243
|
if (!/^--/.test(t) || typeof t != "string")
|
|
244
244
|
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
|
|
245
|
-
const a = super.add(t), i = U.get(this),
|
|
246
|
-
return i.isConnected ? nt(i,
|
|
247
|
-
nt(i,
|
|
245
|
+
const a = super.add(t), i = U.get(this), r = `state${t}`;
|
|
246
|
+
return i.isConnected ? nt(i, r) : setTimeout(() => {
|
|
247
|
+
nt(i, r);
|
|
248
248
|
}), a;
|
|
249
249
|
}
|
|
250
250
|
clear() {
|
|
@@ -259,26 +259,26 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
259
259
|
}), a;
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
|
-
function
|
|
262
|
+
function ot(e, t, a, i) {
|
|
263
263
|
if (a === "a" && !i)
|
|
264
264
|
throw new TypeError("Private accessor was defined without a getter");
|
|
265
265
|
if (typeof t == "function" ? e !== t || !i : !t.has(e))
|
|
266
266
|
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
267
267
|
return a === "m" ? i : a === "a" ? i.call(e) : i ? i.value : t.get(e);
|
|
268
268
|
}
|
|
269
|
-
function
|
|
269
|
+
function Ct(e, t, a, i, r) {
|
|
270
270
|
if (i === "m")
|
|
271
271
|
throw new TypeError("Private method is not writable");
|
|
272
|
-
if (i === "a" && !
|
|
272
|
+
if (i === "a" && !r)
|
|
273
273
|
throw new TypeError("Private accessor was defined without a setter");
|
|
274
|
-
if (typeof t == "function" ? e !== t || !
|
|
274
|
+
if (typeof t == "function" ? e !== t || !r : !t.has(e))
|
|
275
275
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
276
|
-
return i === "a" ?
|
|
276
|
+
return i === "a" ? r.call(e, a) : r ? r.value = a : t.set(e, a), a;
|
|
277
277
|
}
|
|
278
|
-
var
|
|
279
|
-
class
|
|
278
|
+
var T;
|
|
279
|
+
class St {
|
|
280
280
|
constructor(t) {
|
|
281
|
-
|
|
281
|
+
T.set(this, void 0), Ct(this, T, t, "f");
|
|
282
282
|
for (let a = 0; a < t.length; a++) {
|
|
283
283
|
let i = t[a];
|
|
284
284
|
this[a] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
|
|
@@ -286,10 +286,10 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
286
286
|
Object.freeze(this);
|
|
287
287
|
}
|
|
288
288
|
get length() {
|
|
289
|
-
return
|
|
289
|
+
return ot(this, T, "f").length;
|
|
290
290
|
}
|
|
291
|
-
[(
|
|
292
|
-
return
|
|
291
|
+
[(T = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
292
|
+
return ot(this, T, "f")[Symbol.iterator]();
|
|
293
293
|
}
|
|
294
294
|
item(t) {
|
|
295
295
|
return this[t] == null ? null : this[t];
|
|
@@ -298,43 +298,43 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
298
298
|
return this[t] == null ? null : this[t];
|
|
299
299
|
}
|
|
300
300
|
}
|
|
301
|
-
function
|
|
301
|
+
function Ft() {
|
|
302
302
|
const e = HTMLFormElement.prototype.checkValidity;
|
|
303
303
|
HTMLFormElement.prototype.checkValidity = a;
|
|
304
304
|
const t = HTMLFormElement.prototype.reportValidity;
|
|
305
305
|
HTMLFormElement.prototype.reportValidity = i;
|
|
306
|
-
function a(...
|
|
307
|
-
let o = e.apply(this,
|
|
308
|
-
return
|
|
306
|
+
function a(...n) {
|
|
307
|
+
let o = e.apply(this, n);
|
|
308
|
+
return it(this, o, "checkValidity");
|
|
309
309
|
}
|
|
310
|
-
function i(...
|
|
311
|
-
let o = t.apply(this,
|
|
312
|
-
return
|
|
310
|
+
function i(...n) {
|
|
311
|
+
let o = t.apply(this, n);
|
|
312
|
+
return it(this, o, "reportValidity");
|
|
313
313
|
}
|
|
314
|
-
const { get:
|
|
314
|
+
const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
315
315
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
316
|
-
get(...
|
|
317
|
-
const o =
|
|
318
|
-
if (
|
|
316
|
+
get(...n) {
|
|
317
|
+
const o = r.call(this, ...n), f = Array.from(y.get(this) || []);
|
|
318
|
+
if (f.length === 0)
|
|
319
319
|
return o;
|
|
320
|
-
const p = Array.from(o).concat(
|
|
321
|
-
return new
|
|
320
|
+
const p = Array.from(o).concat(f).sort((E, v) => E.compareDocumentPosition ? E.compareDocumentPosition(v) & 2 ? 1 : -1 : 0);
|
|
321
|
+
return new St(p);
|
|
322
322
|
}
|
|
323
323
|
});
|
|
324
324
|
}
|
|
325
|
-
class
|
|
325
|
+
class st {
|
|
326
326
|
static get isPolyfilled() {
|
|
327
327
|
return !0;
|
|
328
328
|
}
|
|
329
329
|
constructor(t) {
|
|
330
330
|
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
331
331
|
throw new TypeError("Illegal constructor");
|
|
332
|
-
const a = t.getRootNode(), i = new
|
|
333
|
-
this.states = new j(t), s.set(this, t), h.set(this, i), c.set(t, this), H(t, this),
|
|
332
|
+
const a = t.getRootNode(), i = new xt();
|
|
333
|
+
this.states = new j(t), s.set(this, t), h.set(this, i), c.set(t, this), H(t, this), yt(t, this), Object.seal(this), a instanceof DocumentFragment && gt(a);
|
|
334
334
|
}
|
|
335
335
|
checkValidity() {
|
|
336
336
|
const t = s.get(this);
|
|
337
|
-
if (
|
|
337
|
+
if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
338
338
|
return !0;
|
|
339
339
|
const a = h.get(this);
|
|
340
340
|
if (!a.valid) {
|
|
@@ -349,56 +349,56 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
349
349
|
}
|
|
350
350
|
get form() {
|
|
351
351
|
const t = s.get(this);
|
|
352
|
-
|
|
352
|
+
w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
353
353
|
let a;
|
|
354
354
|
return t.constructor.formAssociated === !0 && (a = D(t)), a;
|
|
355
355
|
}
|
|
356
356
|
get labels() {
|
|
357
357
|
const t = s.get(this);
|
|
358
|
-
|
|
358
|
+
w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
359
359
|
const a = t.getAttribute("id"), i = t.getRootNode();
|
|
360
360
|
return i && a ? i.querySelectorAll(`[for="${a}"]`) : [];
|
|
361
361
|
}
|
|
362
362
|
reportValidity() {
|
|
363
363
|
const t = s.get(this);
|
|
364
|
-
if (
|
|
364
|
+
if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
365
365
|
return !0;
|
|
366
|
-
const a = this.checkValidity(), i =
|
|
366
|
+
const a = this.checkValidity(), i = $.get(this);
|
|
367
367
|
if (i && !t.constructor.formAssociated)
|
|
368
368
|
throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
|
|
369
369
|
return !a && i && (t.focus(), i.focus()), a;
|
|
370
370
|
}
|
|
371
371
|
setFormValue(t) {
|
|
372
372
|
const a = s.get(this);
|
|
373
|
-
if (
|
|
373
|
+
if (w(a, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Z(this), t != null && !(t instanceof FormData)) {
|
|
374
374
|
if (a.getAttribute("name")) {
|
|
375
|
-
const i =
|
|
375
|
+
const i = tt(a, this);
|
|
376
376
|
i.value = t;
|
|
377
377
|
}
|
|
378
378
|
} else
|
|
379
|
-
t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i,
|
|
380
|
-
if (typeof
|
|
381
|
-
const
|
|
382
|
-
|
|
379
|
+
t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, r]) => {
|
|
380
|
+
if (typeof r == "string") {
|
|
381
|
+
const n = tt(a, this);
|
|
382
|
+
n.name = i, n.value = r;
|
|
383
383
|
}
|
|
384
384
|
});
|
|
385
385
|
V.set(a, t);
|
|
386
386
|
}
|
|
387
387
|
setValidity(t, a, i) {
|
|
388
|
-
const
|
|
389
|
-
if (
|
|
388
|
+
const r = s.get(this);
|
|
389
|
+
if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
|
|
390
390
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
391
|
-
|
|
392
|
-
const
|
|
393
|
-
for (const
|
|
394
|
-
o[
|
|
395
|
-
Object.keys(o).length === 0 &&
|
|
396
|
-
const
|
|
397
|
-
delete
|
|
398
|
-
const { valid: p } =
|
|
391
|
+
$.set(this, i);
|
|
392
|
+
const n = h.get(this), o = {};
|
|
393
|
+
for (const E in t)
|
|
394
|
+
o[E] = t[E];
|
|
395
|
+
Object.keys(o).length === 0 && Mt(n);
|
|
396
|
+
const f = Object.assign(Object.assign({}, n), o);
|
|
397
|
+
delete f.valid;
|
|
398
|
+
const { valid: p } = It(n, f, this.form);
|
|
399
399
|
if (!p && !a)
|
|
400
400
|
throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
|
|
401
|
-
|
|
401
|
+
M.set(this, p ? "" : a), r.isConnected ? (r.toggleAttribute("internals-invalid", !p), r.toggleAttribute("internals-valid", p), r.setAttribute("aria-invalid", `${!p}`)) : b.set(r, this);
|
|
402
402
|
}
|
|
403
403
|
get shadowRoot() {
|
|
404
404
|
const t = s.get(this), a = N.get(t);
|
|
@@ -406,18 +406,18 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
406
406
|
}
|
|
407
407
|
get validationMessage() {
|
|
408
408
|
const t = s.get(this);
|
|
409
|
-
return
|
|
409
|
+
return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), M.get(this);
|
|
410
410
|
}
|
|
411
411
|
get validity() {
|
|
412
412
|
const t = s.get(this);
|
|
413
|
-
return
|
|
413
|
+
return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
|
|
414
414
|
}
|
|
415
415
|
get willValidate() {
|
|
416
416
|
const t = s.get(this);
|
|
417
|
-
return
|
|
417
|
+
return w(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
|
|
418
418
|
}
|
|
419
419
|
}
|
|
420
|
-
function
|
|
420
|
+
function Tt() {
|
|
421
421
|
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
|
|
422
422
|
return !1;
|
|
423
423
|
class e extends HTMLElement {
|
|
@@ -441,25 +441,25 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
441
441
|
"reportValidity"
|
|
442
442
|
].every((i) => i in a.internals);
|
|
443
443
|
}
|
|
444
|
-
let
|
|
444
|
+
let lt = !1, ct = !1;
|
|
445
445
|
function K(e) {
|
|
446
|
-
|
|
446
|
+
ct || (ct = !0, window.CustomStateSet = j, e && (HTMLElement.prototype.attachInternals = function(...t) {
|
|
447
447
|
const a = e.call(this, t);
|
|
448
448
|
return a.states = new j(this), a;
|
|
449
449
|
}));
|
|
450
450
|
}
|
|
451
|
-
function
|
|
452
|
-
if (!
|
|
453
|
-
if (
|
|
451
|
+
function dt(e = !0) {
|
|
452
|
+
if (!lt) {
|
|
453
|
+
if (lt = !0, typeof window < "u" && (window.ElementInternals = st), typeof CustomElementRegistry < "u") {
|
|
454
454
|
const t = CustomElementRegistry.prototype.define;
|
|
455
|
-
CustomElementRegistry.prototype.define = function(a, i,
|
|
455
|
+
CustomElementRegistry.prototype.define = function(a, i, r) {
|
|
456
456
|
if (i.formAssociated) {
|
|
457
|
-
const
|
|
457
|
+
const n = i.prototype.connectedCallback;
|
|
458
458
|
i.prototype.connectedCallback = function() {
|
|
459
|
-
F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") && B(this, !0)),
|
|
459
|
+
F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") && B(this, !0)), n != null && n.apply(this), rt(this);
|
|
460
460
|
};
|
|
461
461
|
}
|
|
462
|
-
t.call(this, a, i,
|
|
462
|
+
t.call(this, a, i, r);
|
|
463
463
|
};
|
|
464
464
|
}
|
|
465
465
|
if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
|
|
@@ -470,34 +470,34 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
470
470
|
return {};
|
|
471
471
|
if (c.has(this))
|
|
472
472
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
473
|
-
return new
|
|
473
|
+
return new st(this);
|
|
474
474
|
}), typeof Element < "u") {
|
|
475
475
|
let t = function(...i) {
|
|
476
|
-
const
|
|
477
|
-
if (N.set(this,
|
|
478
|
-
const
|
|
479
|
-
window.ShadyDOM ?
|
|
476
|
+
const r = a.apply(this, i);
|
|
477
|
+
if (N.set(this, r), z()) {
|
|
478
|
+
const n = new MutationObserver(W);
|
|
479
|
+
window.ShadyDOM ? n.observe(this, q) : n.observe(r, q), S.set(this, n);
|
|
480
480
|
}
|
|
481
|
-
return
|
|
481
|
+
return r;
|
|
482
482
|
};
|
|
483
483
|
const a = Element.prototype.attachShadow;
|
|
484
484
|
Element.prototype.attachShadow = t;
|
|
485
485
|
}
|
|
486
|
-
z() && typeof document < "u" && new MutationObserver(W).observe(document.documentElement, q), typeof HTMLFormElement < "u" &&
|
|
486
|
+
z() && typeof document < "u" && new MutationObserver(W).observe(document.documentElement, q), typeof HTMLFormElement < "u" && Ft(), (e || typeof window < "u" && !window.CustomStateSet) && K();
|
|
487
487
|
}
|
|
488
488
|
}
|
|
489
|
-
return !!customElements.polyfillWrapFlushCallback || (
|
|
489
|
+
return !!customElements.polyfillWrapFlushCallback || (Tt() ? typeof window < "u" && !window.CustomStateSet && K(HTMLElement.prototype.attachInternals) : dt(!1)), x.forceCustomStateSetPolyfill = K, x.forceElementInternalsPolyfill = dt, Object.defineProperty(x, "__esModule", { value: !0 }), x;
|
|
490
490
|
})({});
|
|
491
491
|
})();
|
|
492
|
-
var
|
|
493
|
-
for (var c = g > 1 ? void 0 : g ?
|
|
494
|
-
(
|
|
495
|
-
return g && c &&
|
|
492
|
+
var Dt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, d = (x, s, h, g) => {
|
|
493
|
+
for (var c = g > 1 ? void 0 : g ? zt(s, h) : s, M = x.length - 1, I; M >= 0; M--)
|
|
494
|
+
(I = x[M]) && (c = (g ? I(s, h, c) : I(c)) || c);
|
|
495
|
+
return g && c && Dt(s, h, c), c;
|
|
496
496
|
};
|
|
497
|
-
const
|
|
498
|
-
class l extends
|
|
497
|
+
const X = "pie-text-input", Q = "assistive-text";
|
|
498
|
+
class l extends Nt($t(pt)) {
|
|
499
499
|
constructor() {
|
|
500
|
-
super(...arguments), this.type =
|
|
500
|
+
super(...arguments), this.type = A.type, this.value = A.value, this.size = A.size, this.required = !1, this.handleInput = (s) => {
|
|
501
501
|
this.value = s.target.value, this._internals.setFormValue(this.value);
|
|
502
502
|
}, this.handleChange = (s) => {
|
|
503
503
|
const h = Lt(s);
|
|
@@ -525,7 +525,7 @@ class l extends Vt(Nt(ut)) {
|
|
|
525
525
|
* Resets the value to the default value.
|
|
526
526
|
*/
|
|
527
527
|
formResetCallback() {
|
|
528
|
-
this.value = this.defaultValue ??
|
|
528
|
+
this.value = this.defaultValue ?? A.value, this.input && (this.input.value = this.value), this._internals.setFormValue(this.value);
|
|
529
529
|
}
|
|
530
530
|
firstUpdated(s) {
|
|
531
531
|
super.firstUpdated(s), this._internals.setFormValue(this.value);
|
|
@@ -539,61 +539,64 @@ class l extends Vt(Nt(ut)) {
|
|
|
539
539
|
autocomplete: h,
|
|
540
540
|
autoFocus: g,
|
|
541
541
|
disabled: c,
|
|
542
|
-
inputmode:
|
|
543
|
-
maxlength:
|
|
542
|
+
inputmode: M,
|
|
543
|
+
maxlength: I,
|
|
544
544
|
minlength: S,
|
|
545
545
|
min: y,
|
|
546
546
|
max: V,
|
|
547
547
|
name: k,
|
|
548
548
|
pattern: N,
|
|
549
|
-
step:
|
|
550
|
-
placeholder:
|
|
549
|
+
step: $,
|
|
550
|
+
placeholder: L,
|
|
551
551
|
readonly: F,
|
|
552
|
-
status:
|
|
552
|
+
status: b,
|
|
553
553
|
type: C,
|
|
554
554
|
value: H,
|
|
555
|
-
size:
|
|
555
|
+
size: O,
|
|
556
556
|
required: P
|
|
557
557
|
} = this;
|
|
558
|
-
return
|
|
558
|
+
return ut`
|
|
559
559
|
<div
|
|
560
560
|
class="c-textInput"
|
|
561
561
|
data-test-id="pie-text-input-shell"
|
|
562
|
-
data-pie-size=${
|
|
563
|
-
data-pie-status=${
|
|
562
|
+
data-pie-size=${m(O)}
|
|
563
|
+
data-pie-status=${m(b)}
|
|
564
564
|
?data-pie-disabled=${J(c)}
|
|
565
565
|
?data-pie-readonly=${F}>
|
|
566
566
|
<slot name="leading"></slot>
|
|
567
567
|
<input
|
|
568
|
-
type=${
|
|
568
|
+
type=${m(C)}
|
|
569
569
|
.value=${J(H)}
|
|
570
|
-
name=${
|
|
570
|
+
name=${m(k)}
|
|
571
571
|
?disabled=${J(c)}
|
|
572
|
-
pattern=${
|
|
573
|
-
step=${
|
|
574
|
-
minlength=${
|
|
575
|
-
maxlength=${
|
|
576
|
-
min=${
|
|
577
|
-
max=${
|
|
578
|
-
autocomplete=${
|
|
572
|
+
pattern=${m(N)}
|
|
573
|
+
step=${m($)}
|
|
574
|
+
minlength=${m(S)}
|
|
575
|
+
maxlength=${m(I)}
|
|
576
|
+
min=${m(y)}
|
|
577
|
+
max=${m(V)}
|
|
578
|
+
autocomplete=${m(h)}
|
|
579
579
|
?autofocus=${g}
|
|
580
|
-
inputmode=${
|
|
581
|
-
placeholder=${
|
|
580
|
+
inputmode=${m(M)}
|
|
581
|
+
placeholder=${m(L)}
|
|
582
582
|
?readonly=${F}
|
|
583
583
|
?required=${P}
|
|
584
|
+
aria-describedby=${m(s ? Q : void 0)}
|
|
585
|
+
aria-invalid=${b === "error" ? "true" : "false"}
|
|
586
|
+
aria-errormessage="${m(b === "error" ? Q : void 0)}"
|
|
584
587
|
@input=${this.handleInput}
|
|
585
588
|
@change=${this.handleChange}
|
|
586
589
|
data-test-id="pie-text-input">
|
|
587
590
|
<slot name="trailing"></slot>
|
|
588
591
|
</div>
|
|
589
|
-
${s ?
|
|
592
|
+
${s ? ut`<pie-assistive-text id="${Q}" variant=${m(b)} data-test-id="pie-text-input-assistive-text">${s}</pie-assistive-text>` : At}`;
|
|
590
593
|
}
|
|
591
594
|
}
|
|
592
|
-
l.shadowRootOptions = { ...
|
|
593
|
-
l.styles =
|
|
595
|
+
l.shadowRootOptions = { ...pt.shadowRootOptions, delegatesFocus: !0 };
|
|
596
|
+
l.styles = Vt(Pt);
|
|
594
597
|
d([
|
|
595
598
|
u({ type: String, reflect: !0 }),
|
|
596
|
-
|
|
599
|
+
ft(X, Rt, A.type)
|
|
597
600
|
], l.prototype, "type", 2);
|
|
598
601
|
d([
|
|
599
602
|
u({ type: String })
|
|
@@ -636,7 +639,7 @@ d([
|
|
|
636
639
|
], l.prototype, "assistiveText", 2);
|
|
637
640
|
d([
|
|
638
641
|
u({ type: String }),
|
|
639
|
-
|
|
642
|
+
ft(X, _t, void 0)
|
|
640
643
|
], l.prototype, "status", 2);
|
|
641
644
|
d([
|
|
642
645
|
u({ type: Number })
|
|
@@ -654,17 +657,17 @@ d([
|
|
|
654
657
|
u({ type: Boolean })
|
|
655
658
|
], l.prototype, "required", 2);
|
|
656
659
|
d([
|
|
657
|
-
|
|
660
|
+
mt("input")
|
|
658
661
|
], l.prototype, "input", 2);
|
|
659
662
|
d([
|
|
660
|
-
|
|
663
|
+
mt("input")
|
|
661
664
|
], l.prototype, "focusTarget", 2);
|
|
662
|
-
Ot(
|
|
665
|
+
Ot(X, l);
|
|
663
666
|
export {
|
|
664
667
|
l as PieTextInput,
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
668
|
+
A as defaultProps,
|
|
669
|
+
Gt as inputModes,
|
|
670
|
+
Jt as sizes,
|
|
671
|
+
_t as statusTypes,
|
|
672
|
+
Rt as types
|
|
670
673
|
};
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -20,6 +20,7 @@ import 'element-internals-polyfill';
|
|
|
20
20
|
export * from './defs';
|
|
21
21
|
|
|
22
22
|
const componentSelector = 'pie-text-input';
|
|
23
|
+
const assistiveTextIdValue = 'assistive-text';
|
|
23
24
|
|
|
24
25
|
/**
|
|
25
26
|
* @tagname pie-text-input
|
|
@@ -218,12 +219,15 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
|
|
|
218
219
|
placeholder=${ifDefined(placeholder)}
|
|
219
220
|
?readonly=${readonly}
|
|
220
221
|
?required=${required}
|
|
222
|
+
aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
|
|
223
|
+
aria-invalid=${status === 'error' ? 'true' : 'false'}
|
|
224
|
+
aria-errormessage="${ifDefined(status === 'error' ? assistiveTextIdValue : undefined)}"
|
|
221
225
|
@input=${this.handleInput}
|
|
222
226
|
@change=${this.handleChange}
|
|
223
227
|
data-test-id="pie-text-input">
|
|
224
228
|
<slot name="trailing"></slot>
|
|
225
229
|
</div>
|
|
226
|
-
${assistiveText ? html`<pie-assistive-text variant=${ifDefined(status)} data-test-id="pie-text-input-assistive-text">${assistiveText}</pie-assistive-text>` : nothing}`;
|
|
230
|
+
${assistiveText ? html`<pie-assistive-text id="${assistiveTextIdValue}" variant=${ifDefined(status)} data-test-id="pie-text-input-assistive-text">${assistiveText}</pie-assistive-text>` : nothing}`;
|
|
227
231
|
}
|
|
228
232
|
|
|
229
233
|
// Renders a `CSSResult` generated from SCSS by Vite
|