@justeattakeaway/pie-text-input 0.24.6 → 0.25.1
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/dist/index.js +87 -87
- package/package.json +4 -4
- package/src/text-input.scss +3 -2
package/dist/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { classMap as Lt } from "lit/directives/class-map.js";
|
|
|
5
5
|
import { live as mt } from "lit/directives/live.js";
|
|
6
6
|
import { FormControlMixin as $t, RtlMixin as Ot, wrapNativeEvent as Rt, validPropertyValues as ht, defineCustomElement as Pt } from "@justeattakeaway/pie-webc-core";
|
|
7
7
|
import "@justeattakeaway/pie-assistive-text";
|
|
8
|
-
const Ht = "*,*: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-placeholder);--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);
|
|
8
|
+
const Ht = "*,*: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-placeholder);--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: calc(var(--dt-font-body-l-size) * 1px);--input-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--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);font-size:var(--input-font-size);line-height:var(--input-line-height);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.c-textInput--large{--input-padding-block: var(--dt-spacing-d);--input-height: 56px}.c-textInput.c-textInput--small{--input-padding-block: var(--dt-spacing-b);--input-height: 40px}.c-textInput.c-textInput--error{--input-border-color: var(--dt-color-support-error)}.c-textInput ::slotted([slot=leadingText]),.c-textInput ::slotted([slot=leadingIcon]){margin-inline-end:var(--input-gap)}.c-textInput ::slotted([slot=trailingText]),.c-textInput ::slotted([slot=trailingIcon]){margin-inline-start:var(--input-gap)}@supports (gap: var(--input-gap)){.c-textInput{gap:var(--input-gap)}.c-textInput ::slotted([slot=leadingText]),.c-textInput ::slotted([slot=leadingIcon]){margin-inline-end:0}.c-textInput ::slotted([slot=trailingText]),.c-textInput ::slotted([slot=trailingIcon]){margin-inline-start:0}}.c-textInput:not(.c-textInput--disabled) ::slotted([slot=leadingIcon]),.c-textInput:not(.c-textInput--disabled) ::slotted([slot=trailingIcon]){color:var(--dt-color-content-subdued)}@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.c-textInput--readonly{--input-container-color: var(--dt-color-container-subtle);--input-border-color: var(--dt-color-interactive-form)}.c-textInput.c-textInput--disabled.c-textInput--readonly,.c-textInput.c-textInput--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);opacity:1}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}", Dt = ["text", "number", "password", "url", "email", "tel"], Qt = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], _t = ["default", "success", "error"], Xt = ["small", "medium", "large"], x = {
|
|
9
9
|
type: "text",
|
|
10
10
|
value: "",
|
|
11
11
|
size: "medium",
|
|
@@ -61,14 +61,14 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
61
61
|
}, q = (e, t) => {
|
|
62
62
|
for (let a in C) {
|
|
63
63
|
t[a] = null;
|
|
64
|
-
let
|
|
65
|
-
const
|
|
64
|
+
let n = null;
|
|
65
|
+
const i = C[a];
|
|
66
66
|
Object.defineProperty(t, a, {
|
|
67
67
|
get() {
|
|
68
|
-
return
|
|
68
|
+
return n;
|
|
69
69
|
},
|
|
70
70
|
set(o) {
|
|
71
|
-
|
|
71
|
+
n = o, e.isConnected ? e.setAttribute(i, o) : S.set(e, t);
|
|
72
72
|
}
|
|
73
73
|
});
|
|
74
74
|
}
|
|
@@ -83,23 +83,23 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
83
83
|
return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
84
84
|
}
|
|
85
85
|
});
|
|
86
|
-
let
|
|
87
|
-
const
|
|
88
|
-
for (;
|
|
89
|
-
|
|
86
|
+
let n = a.nextNode();
|
|
87
|
+
const i = !t || e.disabled;
|
|
88
|
+
for (; n; )
|
|
89
|
+
n.formDisabledCallback && i && K(n, e.disabled), n = a.nextNode();
|
|
90
90
|
}, P = { attributes: !0, attributeFilter: ["disabled", "name"] }, H = z() ? new MutationObserver((e) => {
|
|
91
91
|
for (const t of e) {
|
|
92
92
|
const a = t.target;
|
|
93
93
|
if (t.attributeName === "disabled" && (a.constructor.formAssociated ? K(a, a.hasAttribute("disabled")) : a.localName === "fieldset" && R(a)), t.attributeName === "name" && a.constructor.formAssociated) {
|
|
94
|
-
const
|
|
95
|
-
|
|
94
|
+
const n = c.get(a), i = V.get(a);
|
|
95
|
+
n.setFormValue(i);
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
}) : {};
|
|
99
99
|
function B(e) {
|
|
100
100
|
e.forEach((t) => {
|
|
101
|
-
const { addedNodes: a, removedNodes:
|
|
102
|
-
|
|
101
|
+
const { addedNodes: a, removedNodes: n } = t, i = Array.from(a), o = Array.from(n);
|
|
102
|
+
i.forEach((r) => {
|
|
103
103
|
var m;
|
|
104
104
|
if (c.has(r) && r.constructor.formAssociated && O(r), S.has(r)) {
|
|
105
105
|
const p = S.get(r);
|
|
@@ -131,16 +131,16 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
131
131
|
function gt(e) {
|
|
132
132
|
e.forEach((t) => {
|
|
133
133
|
const { removedNodes: a } = t;
|
|
134
|
-
a.forEach((
|
|
135
|
-
const
|
|
136
|
-
c.has(
|
|
134
|
+
a.forEach((n) => {
|
|
135
|
+
const i = $.get(t.target);
|
|
136
|
+
c.has(n) && it(n), i.disconnect();
|
|
137
137
|
});
|
|
138
138
|
});
|
|
139
139
|
}
|
|
140
140
|
const yt = (e) => {
|
|
141
141
|
var t, a;
|
|
142
|
-
const
|
|
143
|
-
!((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (a =
|
|
142
|
+
const n = new MutationObserver(gt);
|
|
143
|
+
!((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (a = n.observe) === null || a === void 0 || a.call(n, e, { childList: !0 }), $.set(e, n);
|
|
144
144
|
};
|
|
145
145
|
z() && new MutationObserver(B);
|
|
146
146
|
const U = {
|
|
@@ -160,13 +160,13 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
160
160
|
E.set(t, []), (a = H.observe) === null || a === void 0 || a.call(H, e, P);
|
|
161
161
|
}, et = (e, t) => {
|
|
162
162
|
if (t.length) {
|
|
163
|
-
Array.from(t).forEach((
|
|
163
|
+
Array.from(t).forEach((n) => n.addEventListener("click", e.click.bind(e)));
|
|
164
164
|
let a = t[0].id;
|
|
165
165
|
t[0].id || (a = `${t[0].htmlFor}_Label`, t[0].id = a), e.setAttribute("aria-labelledby", a);
|
|
166
166
|
}
|
|
167
167
|
}, D = (e) => {
|
|
168
|
-
const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), a = g.get(e) || [],
|
|
169
|
-
e.toggleAttribute("internals-invalid",
|
|
168
|
+
const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), a = g.get(e) || [], n = Array.from(a).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), i = [...t, ...n].includes(!1);
|
|
169
|
+
e.toggleAttribute("internals-invalid", i), e.toggleAttribute("internals-valid", !i);
|
|
170
170
|
}, bt = (e) => {
|
|
171
171
|
D(_(e.target));
|
|
172
172
|
}, wt = (e) => {
|
|
@@ -175,10 +175,10 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
175
175
|
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(",");
|
|
176
176
|
e.addEventListener("click", (a) => {
|
|
177
177
|
if (a.target.closest(t)) {
|
|
178
|
-
const
|
|
178
|
+
const i = g.get(e);
|
|
179
179
|
if (e.noValidate)
|
|
180
180
|
return;
|
|
181
|
-
|
|
181
|
+
i.size && Array.from(i).reverse().map((m) => c.get(m).reportValidity()).includes(!1) && a.preventDefault();
|
|
182
182
|
}
|
|
183
183
|
});
|
|
184
184
|
}, Et = (e) => {
|
|
@@ -188,12 +188,12 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
188
188
|
});
|
|
189
189
|
}, at = (e, t, a) => {
|
|
190
190
|
if (t) {
|
|
191
|
-
const
|
|
192
|
-
if (
|
|
193
|
-
|
|
191
|
+
const n = g.get(t);
|
|
192
|
+
if (n)
|
|
193
|
+
n.add(e);
|
|
194
194
|
else {
|
|
195
|
-
const
|
|
196
|
-
|
|
195
|
+
const i = /* @__PURE__ */ new Set();
|
|
196
|
+
i.add(e), g.set(t, i), xt(t), t.addEventListener("reset", Et), t.addEventListener("input", bt), t.addEventListener("change", wt);
|
|
197
197
|
}
|
|
198
198
|
k.set(t, { ref: e, internals: a }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
|
|
199
199
|
e.formAssociatedCallback.apply(e, [t]);
|
|
@@ -205,15 +205,15 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
205
205
|
}, b = (e, t, a = DOMException) => {
|
|
206
206
|
if (!e.constructor.formAssociated)
|
|
207
207
|
throw new a(t);
|
|
208
|
-
},
|
|
209
|
-
const
|
|
210
|
-
return
|
|
211
|
-
c.get(
|
|
208
|
+
}, nt = (e, t, a) => {
|
|
209
|
+
const n = g.get(e);
|
|
210
|
+
return n && n.size && n.forEach((i) => {
|
|
211
|
+
c.get(i)[a]() || (t = !1);
|
|
212
212
|
}), t;
|
|
213
|
-
},
|
|
213
|
+
}, it = (e) => {
|
|
214
214
|
if (e.constructor.formAssociated) {
|
|
215
|
-
const t = c.get(e), { labels: a, form:
|
|
216
|
-
et(e, a), at(e,
|
|
215
|
+
const t = c.get(e), { labels: a, form: n } = t;
|
|
216
|
+
et(e, a), at(e, n, t);
|
|
217
217
|
}
|
|
218
218
|
};
|
|
219
219
|
function z() {
|
|
@@ -224,7 +224,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
224
224
|
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);
|
|
225
225
|
}
|
|
226
226
|
}
|
|
227
|
-
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), kt = (e, t, a) => (e.valid = St(t), Object.keys(t).forEach((
|
|
227
|
+
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), kt = (e, t, a) => (e.valid = St(t), Object.keys(t).forEach((n) => e[n] = t[n]), a && D(a), e), St = (e) => {
|
|
228
228
|
let t = !0;
|
|
229
229
|
for (let a in e)
|
|
230
230
|
a !== "valid" && e[a] !== !1 && (t = !1);
|
|
@@ -245,9 +245,9 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
245
245
|
add(t) {
|
|
246
246
|
if (!/^--/.test(t) || typeof t != "string")
|
|
247
247
|
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
|
|
248
|
-
const a = super.add(t),
|
|
249
|
-
return
|
|
250
|
-
ot(
|
|
248
|
+
const a = super.add(t), n = j.get(this), i = `state${t}`;
|
|
249
|
+
return n.isConnected ? ot(n, i) : setTimeout(() => {
|
|
250
|
+
ot(n, i);
|
|
251
251
|
}), a;
|
|
252
252
|
}
|
|
253
253
|
clear() {
|
|
@@ -256,19 +256,19 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
256
256
|
super.clear();
|
|
257
257
|
}
|
|
258
258
|
delete(t) {
|
|
259
|
-
const a = super.delete(t),
|
|
260
|
-
return
|
|
261
|
-
|
|
259
|
+
const a = super.delete(t), n = j.get(this);
|
|
260
|
+
return n.isConnected ? (n.toggleAttribute(`state${t}`, !1), n.part && n.part.remove(`state${t}`)) : setTimeout(() => {
|
|
261
|
+
n.toggleAttribute(`state${t}`, !1), n.part && n.part.remove(`state${t}`);
|
|
262
262
|
}), a;
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
|
-
function rt(e, t, a,
|
|
266
|
-
if (a === "a" && !
|
|
267
|
-
if (typeof t == "function" ? e !== t || !
|
|
268
|
-
return a === "m" ?
|
|
265
|
+
function rt(e, t, a, n) {
|
|
266
|
+
if (a === "a" && !n) throw new TypeError("Private accessor was defined without a getter");
|
|
267
|
+
if (typeof t == "function" ? e !== t || !n : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
268
|
+
return a === "m" ? n : a === "a" ? n.call(e) : n ? n.value : t.get(e);
|
|
269
269
|
}
|
|
270
|
-
function Ct(e, t, a,
|
|
271
|
-
if (typeof t == "function" ? e !== t || !
|
|
270
|
+
function Ct(e, t, a, n, i) {
|
|
271
|
+
if (typeof t == "function" ? e !== t || !0 : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
272
272
|
return t.set(e, a), a;
|
|
273
273
|
}
|
|
274
274
|
var A;
|
|
@@ -276,8 +276,8 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
276
276
|
constructor(t) {
|
|
277
277
|
A.set(this, void 0), Ct(this, A, t);
|
|
278
278
|
for (let a = 0; a < t.length; a++) {
|
|
279
|
-
let
|
|
280
|
-
this[a] =
|
|
279
|
+
let n = t[a];
|
|
280
|
+
this[a] = n, n.hasAttribute("name") && (this[n.getAttribute("name")] = n);
|
|
281
281
|
}
|
|
282
282
|
Object.freeze(this);
|
|
283
283
|
}
|
|
@@ -298,19 +298,19 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
298
298
|
const e = HTMLFormElement.prototype.checkValidity;
|
|
299
299
|
HTMLFormElement.prototype.checkValidity = a;
|
|
300
300
|
const t = HTMLFormElement.prototype.reportValidity;
|
|
301
|
-
HTMLFormElement.prototype.reportValidity =
|
|
301
|
+
HTMLFormElement.prototype.reportValidity = n;
|
|
302
302
|
function a(...o) {
|
|
303
303
|
let r = e.apply(this, o);
|
|
304
|
-
return
|
|
304
|
+
return nt(this, r, "checkValidity");
|
|
305
305
|
}
|
|
306
|
-
function
|
|
306
|
+
function n(...o) {
|
|
307
307
|
let r = t.apply(this, o);
|
|
308
|
-
return
|
|
308
|
+
return nt(this, r, "reportValidity");
|
|
309
309
|
}
|
|
310
|
-
const { get:
|
|
310
|
+
const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
311
311
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
312
312
|
get(...o) {
|
|
313
|
-
const r =
|
|
313
|
+
const r = i.call(this, ...o), m = Array.from(g.get(this) || []);
|
|
314
314
|
if (m.length === 0)
|
|
315
315
|
return r;
|
|
316
316
|
const p = Array.from(r).concat(m).sort((w, y) => w.compareDocumentPosition ? w.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
|
|
@@ -325,8 +325,8 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
325
325
|
constructor(t) {
|
|
326
326
|
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
327
327
|
throw new TypeError("Illegal constructor");
|
|
328
|
-
const a = t.getRootNode(),
|
|
329
|
-
this.states = new G(t), s.set(this, t), h.set(this,
|
|
328
|
+
const a = t.getRootNode(), n = new It();
|
|
329
|
+
this.states = new G(t), s.set(this, t), h.set(this, n), c.set(t, this), q(t, this), vt(t, this), Object.seal(this), a instanceof DocumentFragment && yt(a);
|
|
330
330
|
}
|
|
331
331
|
checkValidity() {
|
|
332
332
|
const t = s.get(this);
|
|
@@ -334,12 +334,12 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
334
334
|
return !0;
|
|
335
335
|
const a = h.get(this);
|
|
336
336
|
if (!a.valid) {
|
|
337
|
-
const
|
|
337
|
+
const n = new Event("invalid", {
|
|
338
338
|
bubbles: !1,
|
|
339
339
|
cancelable: !0,
|
|
340
340
|
composed: !1
|
|
341
341
|
});
|
|
342
|
-
t.dispatchEvent(
|
|
342
|
+
t.dispatchEvent(n);
|
|
343
343
|
}
|
|
344
344
|
return a.valid;
|
|
345
345
|
}
|
|
@@ -352,38 +352,38 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
352
352
|
get labels() {
|
|
353
353
|
const t = s.get(this);
|
|
354
354
|
b(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
355
|
-
const a = t.getAttribute("id"),
|
|
356
|
-
return
|
|
355
|
+
const a = t.getAttribute("id"), n = t.getRootNode();
|
|
356
|
+
return n && a ? n.querySelectorAll(`[for="${a}"]`) : [];
|
|
357
357
|
}
|
|
358
358
|
reportValidity() {
|
|
359
359
|
const t = s.get(this);
|
|
360
360
|
if (b(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
361
361
|
return !0;
|
|
362
|
-
const a = this.checkValidity(),
|
|
363
|
-
if (
|
|
362
|
+
const a = this.checkValidity(), n = L.get(this);
|
|
363
|
+
if (n && !t.constructor.formAssociated)
|
|
364
364
|
throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
|
|
365
|
-
return !a &&
|
|
365
|
+
return !a && n && (t.focus(), n.focus()), a;
|
|
366
366
|
}
|
|
367
367
|
setFormValue(t) {
|
|
368
368
|
const a = s.get(this);
|
|
369
369
|
if (b(a, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Z(this), t != null && !(t instanceof FormData)) {
|
|
370
370
|
if (a.getAttribute("name")) {
|
|
371
|
-
const
|
|
372
|
-
|
|
371
|
+
const n = tt(a, this);
|
|
372
|
+
n.value = t;
|
|
373
373
|
}
|
|
374
|
-
} else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([
|
|
375
|
-
if (typeof
|
|
374
|
+
} else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([n, i]) => {
|
|
375
|
+
if (typeof i == "string") {
|
|
376
376
|
const o = tt(a, this);
|
|
377
|
-
o.name =
|
|
377
|
+
o.name = n, o.value = i;
|
|
378
378
|
}
|
|
379
379
|
});
|
|
380
380
|
V.set(a, t);
|
|
381
381
|
}
|
|
382
|
-
setValidity(t, a,
|
|
383
|
-
const
|
|
384
|
-
if (b(
|
|
382
|
+
setValidity(t, a, n) {
|
|
383
|
+
const i = s.get(this);
|
|
384
|
+
if (b(i, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
|
|
385
385
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
386
|
-
L.set(this,
|
|
386
|
+
L.set(this, n);
|
|
387
387
|
const o = h.get(this), r = {};
|
|
388
388
|
for (const w in t)
|
|
389
389
|
r[w] = t[w];
|
|
@@ -393,7 +393,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
393
393
|
const { valid: p } = kt(o, m, this.form);
|
|
394
394
|
if (!p && !a)
|
|
395
395
|
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.");
|
|
396
|
-
I.set(this, p ? "" : a),
|
|
396
|
+
I.set(this, p ? "" : a), i.isConnected ? (i.toggleAttribute("internals-invalid", !p), i.toggleAttribute("internals-valid", p), i.setAttribute("aria-invalid", `${!p}`)) : v.set(i, this);
|
|
397
397
|
}
|
|
398
398
|
get shadowRoot() {
|
|
399
399
|
const t = s.get(this), a = N.get(t);
|
|
@@ -434,7 +434,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
434
434
|
"setValidity",
|
|
435
435
|
"checkValidity",
|
|
436
436
|
"reportValidity"
|
|
437
|
-
].every((
|
|
437
|
+
].every((n) => n in a.internals);
|
|
438
438
|
}
|
|
439
439
|
let lt = !1, ct = !1;
|
|
440
440
|
function J(e) {
|
|
@@ -447,14 +447,14 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
447
447
|
if (!lt) {
|
|
448
448
|
if (lt = !0, typeof window < "u" && (window.ElementInternals = st), typeof CustomElementRegistry < "u") {
|
|
449
449
|
const t = CustomElementRegistry.prototype.define;
|
|
450
|
-
CustomElementRegistry.prototype.define = function(a,
|
|
451
|
-
if (
|
|
452
|
-
const o =
|
|
453
|
-
|
|
454
|
-
F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") && K(this, !0)), o != null && o.apply(this),
|
|
450
|
+
CustomElementRegistry.prototype.define = function(a, n, i) {
|
|
451
|
+
if (n.formAssociated) {
|
|
452
|
+
const o = n.prototype.connectedCallback;
|
|
453
|
+
n.prototype.connectedCallback = function() {
|
|
454
|
+
F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") && K(this, !0)), o != null && o.apply(this), it(this);
|
|
455
455
|
};
|
|
456
456
|
}
|
|
457
|
-
t.call(this, a,
|
|
457
|
+
t.call(this, a, n, i);
|
|
458
458
|
};
|
|
459
459
|
}
|
|
460
460
|
if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
|
|
@@ -466,13 +466,13 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
466
466
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
467
467
|
return new st(this);
|
|
468
468
|
}), typeof Element < "u") {
|
|
469
|
-
let t = function(...
|
|
470
|
-
const
|
|
471
|
-
if (N.set(this,
|
|
469
|
+
let t = function(...n) {
|
|
470
|
+
const i = a.apply(this, n);
|
|
471
|
+
if (N.set(this, i), z()) {
|
|
472
472
|
const o = new MutationObserver(B);
|
|
473
|
-
window.ShadyDOM ? o.observe(this, U) : o.observe(
|
|
473
|
+
window.ShadyDOM ? o.observe(this, U) : o.observe(i, U), T.set(this, o);
|
|
474
474
|
}
|
|
475
|
-
return
|
|
475
|
+
return i;
|
|
476
476
|
};
|
|
477
477
|
const a = Element.prototype.attachShadow;
|
|
478
478
|
Element.prototype.attachShadow = t;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-text-input",
|
|
3
3
|
"description": "PIE Design System Input built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.25.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -37,13 +37,13 @@
|
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
39
39
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
40
|
-
"@justeattakeaway/pie-css": "0.
|
|
41
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
40
|
+
"@justeattakeaway/pie-css": "0.14.1",
|
|
41
|
+
"@justeattakeaway/pie-icons-webc": "1.3.0",
|
|
42
42
|
"@justeattakeaway/pie-wrapper-react": "0.14.2",
|
|
43
43
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@justeattakeaway/pie-assistive-text": "0.8.
|
|
46
|
+
"@justeattakeaway/pie-assistive-text": "0.8.2",
|
|
47
47
|
"@justeattakeaway/pie-webc-core": "0.24.2",
|
|
48
48
|
"element-internals-polyfill": "1.3.11"
|
|
49
49
|
},
|
package/src/text-input.scss
CHANGED
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
--input-border-color: var(--dt-color-interactive-form);
|
|
11
11
|
--input-container-color: var(--dt-color-container-default);
|
|
12
12
|
--input-radius: var(--dt-radius-rounded-c);
|
|
13
|
-
--input-font-size:
|
|
13
|
+
--input-font-size: #{p.font-size(--dt-font-body-l-size)};
|
|
14
|
+
--input-line-height: #{p.font-size(--dt-font-body-l-line-height)};
|
|
14
15
|
--input-height: 48px;
|
|
15
16
|
--input-cursor: text;
|
|
16
17
|
|
|
@@ -25,8 +26,8 @@
|
|
|
25
26
|
padding-inline-end: var(--input-padding-inline);
|
|
26
27
|
padding-block-start: var(--input-padding-block);
|
|
27
28
|
padding-block-end: var(--input-padding-block);
|
|
28
|
-
line-height: 24px;
|
|
29
29
|
font-size: var(--input-font-size);
|
|
30
|
+
line-height: var(--input-line-height);
|
|
30
31
|
display: flex;
|
|
31
32
|
flex-wrap: nowrap;
|
|
32
33
|
align-items: center;
|