@justeattakeaway/pie-text-input 0.25.3 → 0.26.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/dist/index.js +104 -103
- package/package.json +2 -2
- package/src/index.ts +3 -1
- package/src/text-input.scss +8 -4
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as u, query as
|
|
1
|
+
import { LitElement as pt, html as mt, nothing as Vt, unsafeCSS as Nt } from "lit";
|
|
2
|
+
import { property as u, query as ht } from "lit/decorators.js";
|
|
3
3
|
import { ifDefined as f } from "lit/directives/if-defined.js";
|
|
4
4
|
import { classMap as Lt } from "lit/directives/class-map.js";
|
|
5
|
-
import { live as
|
|
6
|
-
import { FormControlMixin as $t, RtlMixin as Ot, wrapNativeEvent as Rt, validPropertyValues as
|
|
5
|
+
import { live as ft } from "lit/directives/live.js";
|
|
6
|
+
import { FormControlMixin as $t, RtlMixin as Ot, wrapNativeEvent as Rt, validPropertyValues as Z, 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-border-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(.
|
|
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-border-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(.is-disabled) ::slotted([slot=leadingIcon]),.c-textInput:not(.is-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))))}@supports (background-color: color-mix(in srgb,black,white)){.c-textInput:hover{--input-container-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-textInput.c-textInput--readonly{--input-container-color: var(--dt-color-container-subtle);--input-border-color: var(--dt-color-border-form)}.c-textInput.is-disabled.c-textInput--readonly,.c-textInput.is-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"], Xt = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], _t = ["default", "success", "error"], zt = ["small", "medium", "large"], v = {
|
|
9
9
|
type: "text",
|
|
10
10
|
value: "",
|
|
11
11
|
size: "medium",
|
|
@@ -15,7 +15,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
15
15
|
};
|
|
16
16
|
(function() {
|
|
17
17
|
(function(M) {
|
|
18
|
-
const s = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(),
|
|
18
|
+
const s = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), C = {
|
|
19
19
|
ariaAtomic: "aria-atomic",
|
|
20
20
|
ariaAutoComplete: "aria-autocomplete",
|
|
21
21
|
ariaBusy: "aria-busy",
|
|
@@ -58,7 +58,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
58
58
|
ariaValueNow: "aria-valuenow",
|
|
59
59
|
ariaValueText: "aria-valuetext",
|
|
60
60
|
role: "role"
|
|
61
|
-
},
|
|
61
|
+
}, B = (e, t) => {
|
|
62
62
|
for (let a in C) {
|
|
63
63
|
t[a] = null;
|
|
64
64
|
let n = null;
|
|
@@ -75,7 +75,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
75
75
|
};
|
|
76
76
|
function O(e) {
|
|
77
77
|
const t = c.get(e), { form: a } = t;
|
|
78
|
-
|
|
78
|
+
nt(e, a, t), at(e, t.labels);
|
|
79
79
|
}
|
|
80
80
|
const R = (e, t = !1) => {
|
|
81
81
|
const a = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
|
|
@@ -86,17 +86,17 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
86
86
|
let n = a.nextNode();
|
|
87
87
|
const i = !t || e.disabled;
|
|
88
88
|
for (; n; )
|
|
89
|
-
n.formDisabledCallback && i &&
|
|
89
|
+
n.formDisabledCallback && i && j(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
|
-
if (t.attributeName === "disabled" && (a.constructor.formAssociated ?
|
|
93
|
+
if (t.attributeName === "disabled" && (a.constructor.formAssociated ? j(a, a.hasAttribute("disabled")) : a.localName === "fieldset" && R(a)), t.attributeName === "name" && a.constructor.formAssociated) {
|
|
94
94
|
const n = c.get(a), i = V.get(a);
|
|
95
95
|
n.setFormValue(i);
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
}) : {};
|
|
99
|
-
function
|
|
99
|
+
function U(e) {
|
|
100
100
|
e.forEach((t) => {
|
|
101
101
|
const { addedNodes: a, removedNodes: n } = t, i = Array.from(a), o = Array.from(n);
|
|
102
102
|
i.forEach((r) => {
|
|
@@ -107,24 +107,24 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
107
107
|
r.setAttribute(C[y], p[y]);
|
|
108
108
|
}), S.delete(r);
|
|
109
109
|
}
|
|
110
|
-
if (
|
|
111
|
-
const p =
|
|
112
|
-
r.setAttribute("internals-valid", p.validity.valid.toString()), r.setAttribute("internals-invalid", (!p.validity.valid).toString()), r.setAttribute("aria-invalid", (!p.validity.valid).toString()),
|
|
110
|
+
if (b.has(r)) {
|
|
111
|
+
const p = b.get(r);
|
|
112
|
+
r.setAttribute("internals-valid", p.validity.valid.toString()), r.setAttribute("internals-invalid", (!p.validity.valid).toString()), r.setAttribute("aria-invalid", (!p.validity.valid).toString()), b.delete(r);
|
|
113
113
|
}
|
|
114
114
|
if (r.localName === "form") {
|
|
115
|
-
const p = g.get(r),
|
|
116
|
-
acceptNode(
|
|
117
|
-
return c.has(
|
|
115
|
+
const p = g.get(r), x = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
|
|
116
|
+
acceptNode(X) {
|
|
117
|
+
return c.has(X) && X.constructor.formAssociated && !(p && p.has(X)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
118
118
|
}
|
|
119
119
|
});
|
|
120
|
-
let y =
|
|
120
|
+
let y = x.nextNode();
|
|
121
121
|
for (; y; )
|
|
122
|
-
O(y), y =
|
|
122
|
+
O(y), y = x.nextNode();
|
|
123
123
|
}
|
|
124
124
|
r.localName === "fieldset" && ((m = H.observe) === null || m === void 0 || m.call(H, r, P), R(r, !0));
|
|
125
125
|
}), o.forEach((r) => {
|
|
126
126
|
const m = c.get(r);
|
|
127
|
-
m && E.get(m) &&
|
|
127
|
+
m && E.get(m) && tt(m), T.has(r) && T.get(r).disconnect();
|
|
128
128
|
});
|
|
129
129
|
});
|
|
130
130
|
}
|
|
@@ -133,7 +133,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
133
133
|
const { removedNodes: a } = t;
|
|
134
134
|
a.forEach((n) => {
|
|
135
135
|
const i = $.get(t.target);
|
|
136
|
-
c.has(n) &&
|
|
136
|
+
c.has(n) && ot(n), i.disconnect();
|
|
137
137
|
});
|
|
138
138
|
});
|
|
139
139
|
}
|
|
@@ -142,23 +142,23 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
142
142
|
const n = new MutationObserver(gt);
|
|
143
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
|
-
z() && new MutationObserver(
|
|
146
|
-
const
|
|
145
|
+
z() && new MutationObserver(U);
|
|
146
|
+
const K = {
|
|
147
147
|
childList: !0,
|
|
148
148
|
subtree: !0
|
|
149
|
-
},
|
|
149
|
+
}, j = (e, t) => {
|
|
150
150
|
e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
|
|
151
|
-
},
|
|
151
|
+
}, tt = (e) => {
|
|
152
152
|
E.get(e).forEach((a) => {
|
|
153
153
|
a.remove();
|
|
154
154
|
}), E.set(e, []);
|
|
155
|
-
},
|
|
155
|
+
}, et = (e, t) => {
|
|
156
156
|
const a = document.createElement("input");
|
|
157
157
|
return a.type = "hidden", a.name = e.getAttribute("name"), e.after(a), E.get(t).push(a), a;
|
|
158
158
|
}, vt = (e, t) => {
|
|
159
159
|
var a;
|
|
160
160
|
E.set(t, []), (a = H.observe) === null || a === void 0 || a.call(H, e, P);
|
|
161
|
-
},
|
|
161
|
+
}, at = (e, t) => {
|
|
162
162
|
if (t.length) {
|
|
163
163
|
Array.from(t).forEach((n) => n.addEventListener("click", e.click.bind(e)));
|
|
164
164
|
let a = t[0].id;
|
|
@@ -186,7 +186,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
186
186
|
t && t.size && t.forEach((a) => {
|
|
187
187
|
a.constructor.formAssociated && a.formResetCallback && a.formResetCallback.apply(a);
|
|
188
188
|
});
|
|
189
|
-
},
|
|
189
|
+
}, nt = (e, t, a) => {
|
|
190
190
|
if (t) {
|
|
191
191
|
const n = g.get(t);
|
|
192
192
|
if (n)
|
|
@@ -202,18 +202,18 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
202
202
|
}, _ = (e) => {
|
|
203
203
|
let t = e.parentNode;
|
|
204
204
|
return t && t.tagName !== "FORM" && (t = _(t)), t;
|
|
205
|
-
},
|
|
205
|
+
}, w = (e, t, a = DOMException) => {
|
|
206
206
|
if (!e.constructor.formAssociated)
|
|
207
207
|
throw new a(t);
|
|
208
|
-
},
|
|
208
|
+
}, it = (e, t, a) => {
|
|
209
209
|
const n = g.get(e);
|
|
210
210
|
return n && n.size && n.forEach((i) => {
|
|
211
211
|
c.get(i)[a]() || (t = !1);
|
|
212
212
|
}), t;
|
|
213
|
-
},
|
|
213
|
+
}, ot = (e) => {
|
|
214
214
|
if (e.constructor.formAssociated) {
|
|
215
215
|
const t = c.get(e), { labels: a, form: n } = t;
|
|
216
|
-
|
|
216
|
+
at(e, a), nt(e, n, t);
|
|
217
217
|
}
|
|
218
218
|
};
|
|
219
219
|
function z() {
|
|
@@ -229,25 +229,25 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
229
229
|
for (let a in e)
|
|
230
230
|
a !== "valid" && e[a] !== !1 && (t = !1);
|
|
231
231
|
return t;
|
|
232
|
-
},
|
|
233
|
-
function
|
|
232
|
+
}, G = /* @__PURE__ */ new WeakMap();
|
|
233
|
+
function rt(e, t) {
|
|
234
234
|
e.toggleAttribute(t, !0), e.part && e.part.add(t);
|
|
235
235
|
}
|
|
236
|
-
class
|
|
236
|
+
class J extends Set {
|
|
237
237
|
static get isPolyfilled() {
|
|
238
238
|
return !0;
|
|
239
239
|
}
|
|
240
240
|
constructor(t) {
|
|
241
241
|
if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
242
242
|
throw new TypeError("Illegal constructor");
|
|
243
|
-
|
|
243
|
+
G.set(this, t);
|
|
244
244
|
}
|
|
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), n =
|
|
249
|
-
return n.isConnected ?
|
|
250
|
-
|
|
248
|
+
const a = super.add(t), n = G.get(this), i = `state${t}`;
|
|
249
|
+
return n.isConnected ? rt(n, i) : setTimeout(() => {
|
|
250
|
+
rt(n, i);
|
|
251
251
|
}), a;
|
|
252
252
|
}
|
|
253
253
|
clear() {
|
|
@@ -256,13 +256,13 @@ 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), n =
|
|
259
|
+
const a = super.delete(t), n = G.get(this);
|
|
260
260
|
return n.isConnected ? (n.toggleAttribute(`state${t}`, !1), n.part && n.part.remove(`state${t}`)) : setTimeout(() => {
|
|
261
261
|
n.toggleAttribute(`state${t}`, !1), n.part && n.part.remove(`state${t}`);
|
|
262
262
|
}), a;
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
|
-
function
|
|
265
|
+
function st(e, t, a, n) {
|
|
266
266
|
if (a === "a" && !n) throw new TypeError("Private accessor was defined without a getter");
|
|
267
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
268
|
return a === "m" ? n : a === "a" ? n.call(e) : n ? n.value : t.get(e);
|
|
@@ -282,10 +282,10 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
282
282
|
Object.freeze(this);
|
|
283
283
|
}
|
|
284
284
|
get length() {
|
|
285
|
-
return
|
|
285
|
+
return st(this, A, "f").length;
|
|
286
286
|
}
|
|
287
287
|
[(A = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
288
|
-
return
|
|
288
|
+
return st(this, A, "f")[Symbol.iterator]();
|
|
289
289
|
}
|
|
290
290
|
item(t) {
|
|
291
291
|
return this[t] == null ? null : this[t];
|
|
@@ -301,11 +301,11 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
301
301
|
HTMLFormElement.prototype.reportValidity = n;
|
|
302
302
|
function a(...o) {
|
|
303
303
|
let r = e.apply(this, o);
|
|
304
|
-
return
|
|
304
|
+
return it(this, r, "checkValidity");
|
|
305
305
|
}
|
|
306
306
|
function n(...o) {
|
|
307
307
|
let r = t.apply(this, o);
|
|
308
|
-
return
|
|
308
|
+
return it(this, r, "reportValidity");
|
|
309
309
|
}
|
|
310
310
|
const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
311
311
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
@@ -313,12 +313,12 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
313
313
|
const r = i.call(this, ...o), m = Array.from(g.get(this) || []);
|
|
314
314
|
if (m.length === 0)
|
|
315
315
|
return r;
|
|
316
|
-
const p = Array.from(r).concat(m).sort((
|
|
316
|
+
const p = Array.from(r).concat(m).sort((x, y) => x.compareDocumentPosition ? x.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
|
|
317
317
|
return new Tt(p);
|
|
318
318
|
}
|
|
319
319
|
});
|
|
320
320
|
}
|
|
321
|
-
class
|
|
321
|
+
class lt {
|
|
322
322
|
static get isPolyfilled() {
|
|
323
323
|
return !0;
|
|
324
324
|
}
|
|
@@ -326,11 +326,11 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
326
326
|
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
327
327
|
throw new TypeError("Illegal constructor");
|
|
328
328
|
const a = t.getRootNode(), n = new It();
|
|
329
|
-
this.states = new
|
|
329
|
+
this.states = new J(t), s.set(this, t), h.set(this, n), c.set(t, this), B(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);
|
|
333
|
-
if (
|
|
333
|
+
if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
334
334
|
return !0;
|
|
335
335
|
const a = h.get(this);
|
|
336
336
|
if (!a.valid) {
|
|
@@ -345,19 +345,19 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
345
345
|
}
|
|
346
346
|
get form() {
|
|
347
347
|
const t = s.get(this);
|
|
348
|
-
|
|
348
|
+
w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
349
349
|
let a;
|
|
350
350
|
return t.constructor.formAssociated === !0 && (a = _(t)), a;
|
|
351
351
|
}
|
|
352
352
|
get labels() {
|
|
353
353
|
const t = s.get(this);
|
|
354
|
-
|
|
354
|
+
w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
355
355
|
const a = t.getAttribute("id"), n = t.getRootNode();
|
|
356
356
|
return n && a ? n.querySelectorAll(`[for="${a}"]`) : [];
|
|
357
357
|
}
|
|
358
358
|
reportValidity() {
|
|
359
359
|
const t = s.get(this);
|
|
360
|
-
if (
|
|
360
|
+
if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
361
361
|
return !0;
|
|
362
362
|
const a = this.checkValidity(), n = L.get(this);
|
|
363
363
|
if (n && !t.constructor.formAssociated)
|
|
@@ -366,14 +366,14 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
366
366
|
}
|
|
367
367
|
setFormValue(t) {
|
|
368
368
|
const a = s.get(this);
|
|
369
|
-
if (
|
|
369
|
+
if (w(a, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), tt(this), t != null && !(t instanceof FormData)) {
|
|
370
370
|
if (a.getAttribute("name")) {
|
|
371
|
-
const n =
|
|
371
|
+
const n = et(a, this);
|
|
372
372
|
n.value = t;
|
|
373
373
|
}
|
|
374
374
|
} else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([n, i]) => {
|
|
375
375
|
if (typeof i == "string") {
|
|
376
|
-
const o =
|
|
376
|
+
const o = et(a, this);
|
|
377
377
|
o.name = n, o.value = i;
|
|
378
378
|
}
|
|
379
379
|
});
|
|
@@ -381,19 +381,19 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
381
381
|
}
|
|
382
382
|
setValidity(t, a, n) {
|
|
383
383
|
const i = s.get(this);
|
|
384
|
-
if (
|
|
384
|
+
if (w(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
386
|
L.set(this, n);
|
|
387
387
|
const o = h.get(this), r = {};
|
|
388
|
-
for (const
|
|
389
|
-
r[
|
|
388
|
+
for (const x in t)
|
|
389
|
+
r[x] = t[x];
|
|
390
390
|
Object.keys(r).length === 0 && Mt(o);
|
|
391
391
|
const m = Object.assign(Object.assign({}, o), r);
|
|
392
392
|
delete m.valid;
|
|
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), i.isConnected ? (i.toggleAttribute("internals-invalid", !p), i.toggleAttribute("internals-valid", p), i.setAttribute("aria-invalid", `${!p}`)) :
|
|
396
|
+
I.set(this, p ? "" : a), i.isConnected ? (i.toggleAttribute("internals-invalid", !p), i.toggleAttribute("internals-valid", p), i.setAttribute("aria-invalid", `${!p}`)) : b.set(i, this);
|
|
397
397
|
}
|
|
398
398
|
get shadowRoot() {
|
|
399
399
|
const t = s.get(this), a = N.get(t);
|
|
@@ -401,15 +401,15 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
401
401
|
}
|
|
402
402
|
get validationMessage() {
|
|
403
403
|
const t = s.get(this);
|
|
404
|
-
return
|
|
404
|
+
return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), I.get(this);
|
|
405
405
|
}
|
|
406
406
|
get validity() {
|
|
407
407
|
const t = s.get(this);
|
|
408
|
-
return
|
|
408
|
+
return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
|
|
409
409
|
}
|
|
410
410
|
get willValidate() {
|
|
411
411
|
const t = s.get(this);
|
|
412
|
-
return
|
|
412
|
+
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"));
|
|
413
413
|
}
|
|
414
414
|
}
|
|
415
415
|
function At() {
|
|
@@ -436,22 +436,22 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
436
436
|
"reportValidity"
|
|
437
437
|
].every((n) => n in a.internals);
|
|
438
438
|
}
|
|
439
|
-
let
|
|
440
|
-
function
|
|
441
|
-
|
|
439
|
+
let ct = !1, dt = !1;
|
|
440
|
+
function Q(e) {
|
|
441
|
+
dt || (dt = !0, window.CustomStateSet = J, e && (HTMLElement.prototype.attachInternals = function(...t) {
|
|
442
442
|
const a = e.call(this, t);
|
|
443
|
-
return a.states = new
|
|
443
|
+
return a.states = new J(this), a;
|
|
444
444
|
}));
|
|
445
445
|
}
|
|
446
|
-
function
|
|
447
|
-
if (!
|
|
448
|
-
if (
|
|
446
|
+
function ut(e = !0) {
|
|
447
|
+
if (!ct) {
|
|
448
|
+
if (ct = !0, typeof window < "u" && (window.ElementInternals = lt), typeof CustomElementRegistry < "u") {
|
|
449
449
|
const t = CustomElementRegistry.prototype.define;
|
|
450
450
|
CustomElementRegistry.prototype.define = function(a, n, i) {
|
|
451
451
|
if (n.formAssociated) {
|
|
452
452
|
const o = n.prototype.connectedCallback;
|
|
453
453
|
n.prototype.connectedCallback = function() {
|
|
454
|
-
F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") &&
|
|
454
|
+
F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") && j(this, !0)), o != null && o.apply(this), ot(this);
|
|
455
455
|
};
|
|
456
456
|
}
|
|
457
457
|
t.call(this, a, n, i);
|
|
@@ -464,33 +464,33 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
464
464
|
} else return {};
|
|
465
465
|
if (c.has(this))
|
|
466
466
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
467
|
-
return new
|
|
467
|
+
return new lt(this);
|
|
468
468
|
}), typeof Element < "u") {
|
|
469
469
|
let t = function(...n) {
|
|
470
470
|
const i = a.apply(this, n);
|
|
471
471
|
if (N.set(this, i), z()) {
|
|
472
|
-
const o = new MutationObserver(
|
|
473
|
-
window.ShadyDOM ? o.observe(this,
|
|
472
|
+
const o = new MutationObserver(U);
|
|
473
|
+
window.ShadyDOM ? o.observe(this, K) : o.observe(i, K), T.set(this, o);
|
|
474
474
|
}
|
|
475
475
|
return i;
|
|
476
476
|
};
|
|
477
477
|
const a = Element.prototype.attachShadow;
|
|
478
478
|
Element.prototype.attachShadow = t;
|
|
479
479
|
}
|
|
480
|
-
z() && typeof document < "u" && new MutationObserver(
|
|
480
|
+
z() && typeof document < "u" && new MutationObserver(U).observe(document.documentElement, K), typeof HTMLFormElement < "u" && Ft(), (e || typeof window < "u" && !window.CustomStateSet) && Q();
|
|
481
481
|
}
|
|
482
482
|
}
|
|
483
|
-
return !!customElements.polyfillWrapFlushCallback || (At() ? typeof window < "u" && !window.CustomStateSet &&
|
|
483
|
+
return !!customElements.polyfillWrapFlushCallback || (At() ? typeof window < "u" && !window.CustomStateSet && Q(HTMLElement.prototype.attachInternals) : ut(!1)), M.forceCustomStateSetPolyfill = Q, M.forceElementInternalsPolyfill = ut, Object.defineProperty(M, "__esModule", { value: !0 }), M;
|
|
484
484
|
})({});
|
|
485
485
|
})();
|
|
486
|
-
var
|
|
486
|
+
var Wt = Object.defineProperty, d = (M, s, h, E) => {
|
|
487
487
|
for (var c = void 0, I = M.length - 1, k; I >= 0; I--)
|
|
488
488
|
(k = M[I]) && (c = k(s, h, c) || c);
|
|
489
|
-
return c &&
|
|
489
|
+
return c && Wt(s, h, c), c;
|
|
490
490
|
};
|
|
491
|
-
const
|
|
491
|
+
const q = "pie-text-input", Y = "assistive-text", W = class W extends $t(Ot(pt)) {
|
|
492
492
|
constructor() {
|
|
493
|
-
super(...arguments), this.type =
|
|
493
|
+
super(...arguments), this.type = v.type, this.value = v.value, this.disabled = v.disabled, this.readonly = v.readonly, this.status = v.status, this.size = v.size, this.required = !1, this.handleInput = (s) => {
|
|
494
494
|
this.value = s.target.value, this._internals.setFormValue(this.value);
|
|
495
495
|
}, this.handleChange = (s) => {
|
|
496
496
|
const h = Rt(s);
|
|
@@ -518,7 +518,7 @@ const Y = "pie-text-input", X = "assistive-text", W = class W extends $t(Ot(ut))
|
|
|
518
518
|
* Resets the value to the default value.
|
|
519
519
|
*/
|
|
520
520
|
formResetCallback() {
|
|
521
|
-
this.value = this.defaultValue ??
|
|
521
|
+
this.value = this.defaultValue ?? v.value, this.input.value = this.value, this._internals.setFormValue(this.value);
|
|
522
522
|
}
|
|
523
523
|
firstUpdated() {
|
|
524
524
|
this._internals.setFormValue(this.value);
|
|
@@ -542,19 +542,19 @@ const Y = "pie-text-input", X = "assistive-text", W = class W extends $t(Ot(ut))
|
|
|
542
542
|
step: L,
|
|
543
543
|
placeholder: $,
|
|
544
544
|
readonly: F,
|
|
545
|
-
status:
|
|
545
|
+
status: b,
|
|
546
546
|
type: C,
|
|
547
|
-
value:
|
|
547
|
+
value: B,
|
|
548
548
|
size: O,
|
|
549
549
|
required: R
|
|
550
550
|
} = this, P = {
|
|
551
551
|
"c-textInput": !0,
|
|
552
552
|
[`c-textInput--${O}`]: !0,
|
|
553
|
-
[`c-textInput--${
|
|
554
|
-
"
|
|
553
|
+
[`c-textInput--${b}`]: !0,
|
|
554
|
+
"is-disabled": c,
|
|
555
555
|
"c-textInput--readonly": F
|
|
556
556
|
};
|
|
557
|
-
return
|
|
557
|
+
return mt`
|
|
558
558
|
<div
|
|
559
559
|
class="${Lt(P)}"
|
|
560
560
|
data-test-id="pie-text-input-shell">
|
|
@@ -566,9 +566,9 @@ const Y = "pie-text-input", X = "assistive-text", W = class W extends $t(Ot(ut))
|
|
|
566
566
|
<slot name="leadingText"></slot>
|
|
567
567
|
<input
|
|
568
568
|
type=${f(C)}
|
|
569
|
-
.value=${
|
|
569
|
+
.value=${ft(B)}
|
|
570
570
|
name=${f(S)}
|
|
571
|
-
?disabled=${
|
|
571
|
+
?disabled=${ft(c)}
|
|
572
572
|
pattern=${f(N)}
|
|
573
573
|
step=${f(L)}
|
|
574
574
|
minlength=${f(T)}
|
|
@@ -581,9 +581,9 @@ const Y = "pie-text-input", X = "assistive-text", W = class W extends $t(Ot(ut))
|
|
|
581
581
|
placeholder=${f($)}
|
|
582
582
|
?readonly=${F}
|
|
583
583
|
?required=${R}
|
|
584
|
-
aria-describedby=${f(s ?
|
|
585
|
-
aria-invalid=${
|
|
586
|
-
aria-errormessage="${f(
|
|
584
|
+
aria-describedby=${f(s ? Y : void 0)}
|
|
585
|
+
aria-invalid=${b === "error" ? "true" : "false"}
|
|
586
|
+
aria-errormessage="${f(b === "error" ? Y : void 0)}"
|
|
587
587
|
@input=${this.handleInput}
|
|
588
588
|
@change=${this.handleChange}
|
|
589
589
|
data-test-id="pie-text-input">
|
|
@@ -594,21 +594,21 @@ const Y = "pie-text-input", X = "assistive-text", W = class W extends $t(Ot(ut))
|
|
|
594
594
|
<slot name="trailingIcon"></slot>
|
|
595
595
|
<slot name="trailingText"></slot>
|
|
596
596
|
</div>
|
|
597
|
-
${s ?
|
|
597
|
+
${s ? mt`
|
|
598
598
|
<pie-assistive-text
|
|
599
|
-
id="${
|
|
600
|
-
variant=${f(
|
|
599
|
+
id="${Y}"
|
|
600
|
+
variant=${f(b)}
|
|
601
601
|
data-test-id="pie-text-input-assistive-text">
|
|
602
602
|
${s}
|
|
603
603
|
</pie-assistive-text>
|
|
604
604
|
` : Vt}`;
|
|
605
605
|
}
|
|
606
606
|
};
|
|
607
|
-
W.shadowRootOptions = { ...
|
|
607
|
+
W.shadowRootOptions = { ...pt.shadowRootOptions, delegatesFocus: !0 }, W.styles = Nt(Ht);
|
|
608
608
|
let l = W;
|
|
609
609
|
d([
|
|
610
610
|
u({ type: String, reflect: !0 }),
|
|
611
|
-
|
|
611
|
+
Z(q, Dt, v.type)
|
|
612
612
|
], l.prototype, "type");
|
|
613
613
|
d([
|
|
614
614
|
u({ type: String })
|
|
@@ -651,7 +651,7 @@ d([
|
|
|
651
651
|
], l.prototype, "assistiveText");
|
|
652
652
|
d([
|
|
653
653
|
u({ type: String }),
|
|
654
|
-
|
|
654
|
+
Z(q, _t, v.status)
|
|
655
655
|
], l.prototype, "status");
|
|
656
656
|
d([
|
|
657
657
|
u({ type: Number })
|
|
@@ -663,23 +663,24 @@ d([
|
|
|
663
663
|
u({ type: Number })
|
|
664
664
|
], l.prototype, "max");
|
|
665
665
|
d([
|
|
666
|
-
u({ type: String })
|
|
666
|
+
u({ type: String }),
|
|
667
|
+
Z(q, zt, v.size)
|
|
667
668
|
], l.prototype, "size");
|
|
668
669
|
d([
|
|
669
670
|
u({ type: Boolean })
|
|
670
671
|
], l.prototype, "required");
|
|
671
672
|
d([
|
|
672
|
-
|
|
673
|
+
ht("input")
|
|
673
674
|
], l.prototype, "input");
|
|
674
675
|
d([
|
|
675
|
-
|
|
676
|
+
ht("input")
|
|
676
677
|
], l.prototype, "focusTarget");
|
|
677
|
-
Pt(
|
|
678
|
+
Pt(q, l);
|
|
678
679
|
export {
|
|
679
680
|
l as PieTextInput,
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
681
|
+
v as defaultProps,
|
|
682
|
+
Xt as inputModes,
|
|
683
|
+
zt as sizes,
|
|
683
684
|
_t as statusTypes,
|
|
684
685
|
Dt as types
|
|
685
686
|
};
|
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.26.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
36
36
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
37
|
-
"@justeattakeaway/pie-css": "0.
|
|
37
|
+
"@justeattakeaway/pie-css": "0.15.0",
|
|
38
38
|
"@justeattakeaway/pie-icons-webc": "1.5.0",
|
|
39
39
|
"@justeattakeaway/pie-wrapper-react": "0.14.2",
|
|
40
40
|
"cem-plugin-module-file-extensions": "0.0.5"
|
package/src/index.ts
CHANGED
|
@@ -14,6 +14,7 @@ import '@justeattakeaway/pie-assistive-text';
|
|
|
14
14
|
import styles from './text-input.scss?inline';
|
|
15
15
|
import {
|
|
16
16
|
type TextInputProps, types, statusTypes, defaultProps,
|
|
17
|
+
sizes,
|
|
17
18
|
} from './defs';
|
|
18
19
|
import 'element-internals-polyfill';
|
|
19
20
|
|
|
@@ -92,6 +93,7 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
|
|
|
92
93
|
public max: TextInputProps['max'];
|
|
93
94
|
|
|
94
95
|
@property({ type: String })
|
|
96
|
+
@validPropertyValues(componentSelector, sizes, defaultProps.size)
|
|
95
97
|
public size = defaultProps.size;
|
|
96
98
|
|
|
97
99
|
@property({ type: Boolean })
|
|
@@ -195,7 +197,7 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
|
|
|
195
197
|
'c-textInput': true,
|
|
196
198
|
[`c-textInput--${size}`]: true,
|
|
197
199
|
[`c-textInput--${status}`]: true,
|
|
198
|
-
'
|
|
200
|
+
'is-disabled': disabled,
|
|
199
201
|
'c-textInput--readonly': readonly,
|
|
200
202
|
};
|
|
201
203
|
|
package/src/text-input.scss
CHANGED
|
@@ -73,14 +73,18 @@
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
&:not(.
|
|
77
|
-
&:not(.
|
|
76
|
+
&:not(.is-disabled) ::slotted([slot="leadingIcon"]),
|
|
77
|
+
&:not(.is-disabled) ::slotted([slot="trailingIcon"]) {
|
|
78
78
|
color: var(--dt-color-content-subdued);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
@media (hover: hover) {
|
|
82
82
|
&:hover {
|
|
83
83
|
--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))));
|
|
84
|
+
|
|
85
|
+
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
86
|
+
--input-container-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default));
|
|
87
|
+
}
|
|
84
88
|
}
|
|
85
89
|
}
|
|
86
90
|
|
|
@@ -90,8 +94,8 @@
|
|
|
90
94
|
}
|
|
91
95
|
|
|
92
96
|
// Ensure that if an input is readonly and disabled, the disabled styles take precedence
|
|
93
|
-
&.
|
|
94
|
-
&.
|
|
97
|
+
&.is-disabled.c-textInput--readonly,
|
|
98
|
+
&.is-disabled {
|
|
95
99
|
--input-container-color: var(--dt-color-disabled-01);
|
|
96
100
|
--input-border-color: var(--dt-color-disabled-01);
|
|
97
101
|
--input-text-color: var(--dt-color-content-disabled);
|