@justeattakeaway/pie-text-input 0.28.12 → 0.29.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/custom-elements.json +4 -9
- package/dist/index.d.ts +0 -6
- package/dist/index.js +106 -107
- package/dist/react.d.ts +0 -6
- package/package.json +11 -6
- package/src/index.ts +3 -4
package/custom-elements.json
CHANGED
|
@@ -124,15 +124,6 @@
|
|
|
124
124
|
}
|
|
125
125
|
],
|
|
126
126
|
"members": [
|
|
127
|
-
{
|
|
128
|
-
"kind": "field",
|
|
129
|
-
"name": "shadowRootOptions",
|
|
130
|
-
"type": {
|
|
131
|
-
"text": "object"
|
|
132
|
-
},
|
|
133
|
-
"static": true,
|
|
134
|
-
"default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
|
|
135
|
-
},
|
|
136
127
|
{
|
|
137
128
|
"kind": "field",
|
|
138
129
|
"name": "type",
|
|
@@ -382,6 +373,10 @@
|
|
|
382
373
|
{
|
|
383
374
|
"name": "RtlMixin",
|
|
384
375
|
"package": "@justeattakeaway/pie-webc-core"
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"name": "DelegatesFocusMixin",
|
|
379
|
+
"package": "@justeattakeaway/pie-webc-core"
|
|
385
380
|
}
|
|
386
381
|
],
|
|
387
382
|
"superclass": {
|
package/dist/index.d.ts
CHANGED
|
@@ -30,12 +30,6 @@ export declare const inputModes: readonly ["none", "text", "tel", "url", "email"
|
|
|
30
30
|
* @slot trailingIcon - An icon to display at the end of the input. Do not use with trailingText at the same time.
|
|
31
31
|
*/
|
|
32
32
|
export declare class PieTextInput extends PieTextInput_base implements TextInputProps, PIEInputElement {
|
|
33
|
-
static shadowRootOptions: {
|
|
34
|
-
delegatesFocus: boolean;
|
|
35
|
-
mode: ShadowRootMode;
|
|
36
|
-
serializable?: boolean;
|
|
37
|
-
slotAssignment?: SlotAssignmentMode;
|
|
38
|
-
};
|
|
39
33
|
type: "number" | "text" | "password" | "url" | "email" | "tel";
|
|
40
34
|
value: string;
|
|
41
35
|
name: TextInputProps['name'];
|
package/dist/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as u, query as
|
|
1
|
+
import { LitElement as Vt, nothing as Nt, html as mt, unsafeCSS as Lt } from "lit";
|
|
2
|
+
import { property as u, query as ft } from "lit/decorators.js";
|
|
3
3
|
import { ifDefined as f } from "lit/directives/if-defined.js";
|
|
4
4
|
import { classMap as $t } from "lit/directives/class-map.js";
|
|
5
5
|
import { live as ht } from "lit/directives/live.js";
|
|
6
|
-
import { FormControlMixin as Ot, RtlMixin as Rt, wrapNativeEvent as
|
|
6
|
+
import { FormControlMixin as Ot, RtlMixin as Pt, DelegatesFocusMixin as Rt, wrapNativeEvent as Dt, validPropertyValues as Y, safeCustomElement as _t } from "@justeattakeaway/pie-webc-core";
|
|
7
7
|
import "@justeattakeaway/pie-assistive-text";
|
|
8
|
-
const z = class z extends
|
|
8
|
+
const z = class z extends Vt {
|
|
9
9
|
willUpdate() {
|
|
10
10
|
this.getAttribute("v") || this.setAttribute("v", z.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
z.v = "0.
|
|
13
|
+
z.v = "0.29.1";
|
|
14
14
|
let X = z;
|
|
15
|
-
const
|
|
15
|
+
const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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}", zt = ["text", "number", "password", "url", "email", "tel"], te = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], Wt = ["default", "success", "error"], qt = ["small", "medium", "large"], w = {
|
|
16
16
|
type: "text",
|
|
17
17
|
value: "",
|
|
18
18
|
size: "medium",
|
|
@@ -69,44 +69,44 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
69
69
|
for (let a in C) {
|
|
70
70
|
t[a] = null;
|
|
71
71
|
let i = null;
|
|
72
|
-
const
|
|
72
|
+
const n = C[a];
|
|
73
73
|
Object.defineProperty(t, a, {
|
|
74
74
|
get() {
|
|
75
75
|
return i;
|
|
76
76
|
},
|
|
77
|
-
set(
|
|
78
|
-
i =
|
|
77
|
+
set(o) {
|
|
78
|
+
i = o, e.isConnected ? e.setAttribute(n, o) : S.set(e, t);
|
|
79
79
|
}
|
|
80
80
|
});
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
function O(e) {
|
|
84
84
|
const t = l.get(e), { form: a } = t;
|
|
85
|
-
|
|
85
|
+
nt(e, a, t), it(e, t.labels);
|
|
86
86
|
}
|
|
87
|
-
const
|
|
87
|
+
const P = (e, t = !1) => {
|
|
88
88
|
const a = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
|
|
89
|
-
acceptNode(
|
|
90
|
-
return l.has(
|
|
89
|
+
acceptNode(o) {
|
|
90
|
+
return l.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
91
91
|
}
|
|
92
92
|
});
|
|
93
93
|
let i = a.nextNode();
|
|
94
|
-
const
|
|
94
|
+
const n = !t || e.disabled;
|
|
95
95
|
for (; i; )
|
|
96
|
-
i.formDisabledCallback &&
|
|
97
|
-
}, tt = { attributes: !0, attributeFilter: ["disabled", "name"] },
|
|
96
|
+
i.formDisabledCallback && n && U(i, e.disabled), i = a.nextNode();
|
|
97
|
+
}, tt = { attributes: !0, attributeFilter: ["disabled", "name"] }, R = H() ? new MutationObserver((e) => {
|
|
98
98
|
for (const t of e) {
|
|
99
99
|
const a = t.target;
|
|
100
|
-
if (t.attributeName === "disabled" && (a.constructor.formAssociated ? U(a, a.hasAttribute("disabled")) : a.localName === "fieldset" &&
|
|
101
|
-
const i = l.get(a),
|
|
102
|
-
i.setFormValue(
|
|
100
|
+
if (t.attributeName === "disabled" && (a.constructor.formAssociated ? U(a, a.hasAttribute("disabled")) : a.localName === "fieldset" && P(a)), t.attributeName === "name" && a.constructor.formAssociated) {
|
|
101
|
+
const i = l.get(a), n = N.get(a);
|
|
102
|
+
i.setFormValue(n);
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
}) : {};
|
|
106
106
|
function q(e) {
|
|
107
107
|
e.forEach((t) => {
|
|
108
|
-
const { addedNodes: a, removedNodes: i } = t,
|
|
109
|
-
|
|
108
|
+
const { addedNodes: a, removedNodes: i } = t, n = Array.from(a), o = Array.from(i);
|
|
109
|
+
n.forEach((r) => {
|
|
110
110
|
var h;
|
|
111
111
|
if (l.has(r) && r.constructor.formAssociated && O(r), S.has(r)) {
|
|
112
112
|
const m = S.get(r);
|
|
@@ -128,25 +128,25 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
128
128
|
for (; b; )
|
|
129
129
|
O(b), b = E.nextNode();
|
|
130
130
|
}
|
|
131
|
-
r.localName === "fieldset" && ((h =
|
|
132
|
-
}),
|
|
131
|
+
r.localName === "fieldset" && ((h = R.observe) === null || h === void 0 || h.call(R, r, tt), P(r, !0));
|
|
132
|
+
}), o.forEach((r) => {
|
|
133
133
|
const h = l.get(r);
|
|
134
134
|
h && g.get(h) && et(h), F.has(r) && F.get(r).disconnect();
|
|
135
135
|
});
|
|
136
136
|
});
|
|
137
137
|
}
|
|
138
|
-
function
|
|
138
|
+
function gt(e) {
|
|
139
139
|
e.forEach((t) => {
|
|
140
140
|
const { removedNodes: a } = t;
|
|
141
141
|
a.forEach((i) => {
|
|
142
|
-
const
|
|
143
|
-
l.has(i) && rt(i),
|
|
142
|
+
const n = A.get(t.target);
|
|
143
|
+
l.has(i) && rt(i), n.disconnect();
|
|
144
144
|
});
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
|
-
const
|
|
147
|
+
const vt = (e) => {
|
|
148
148
|
var t, a;
|
|
149
|
-
const i = new MutationObserver(
|
|
149
|
+
const i = new MutationObserver(gt);
|
|
150
150
|
!((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 }), A.set(e, i);
|
|
151
151
|
};
|
|
152
152
|
H() && new MutationObserver(q);
|
|
@@ -162,9 +162,9 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
162
162
|
}, at = (e, t) => {
|
|
163
163
|
const a = document.createElement("input");
|
|
164
164
|
return a.type = "hidden", a.name = e.getAttribute("name"), e.after(a), g.get(t).push(a), a;
|
|
165
|
-
},
|
|
165
|
+
}, yt = (e, t) => {
|
|
166
166
|
var a;
|
|
167
|
-
g.set(t, []), (a =
|
|
167
|
+
g.set(t, []), (a = R.observe) === null || a === void 0 || a.call(R, e, tt);
|
|
168
168
|
}, it = (e, t) => {
|
|
169
169
|
if (t.length) {
|
|
170
170
|
Array.from(t).forEach((i) => i.addEventListener("click", e.click.bind(e)));
|
|
@@ -172,35 +172,35 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
172
172
|
t[0].id || (a = `${t[0].htmlFor}_Label`, t[0].id = a), e.setAttribute("aria-labelledby", a);
|
|
173
173
|
}
|
|
174
174
|
}, D = (e) => {
|
|
175
|
-
const t = Array.from(e.elements).filter((
|
|
176
|
-
e.toggleAttribute("internals-invalid",
|
|
175
|
+
const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), a = y.get(e) || [], i = Array.from(a).filter((o) => o.isConnected).map((o) => l.get(o).validity.valid), n = [...t, ...i].includes(!1);
|
|
176
|
+
e.toggleAttribute("internals-invalid", n), e.toggleAttribute("internals-valid", !n);
|
|
177
|
+
}, bt = (e) => {
|
|
178
|
+
D(_(e.target));
|
|
177
179
|
}, wt = (e) => {
|
|
178
180
|
D(_(e.target));
|
|
179
181
|
}, xt = (e) => {
|
|
180
|
-
D(_(e.target));
|
|
181
|
-
}, Et = (e) => {
|
|
182
182
|
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(",");
|
|
183
183
|
e.addEventListener("click", (a) => {
|
|
184
184
|
if (a.target.closest(t)) {
|
|
185
|
-
const
|
|
185
|
+
const n = y.get(e);
|
|
186
186
|
if (e.noValidate)
|
|
187
187
|
return;
|
|
188
|
-
|
|
188
|
+
n.size && Array.from(n).reverse().map((h) => l.get(h).reportValidity()).includes(!1) && a.preventDefault();
|
|
189
189
|
}
|
|
190
190
|
});
|
|
191
|
-
},
|
|
191
|
+
}, Et = (e) => {
|
|
192
192
|
const t = y.get(e.target);
|
|
193
193
|
t && t.size && t.forEach((a) => {
|
|
194
194
|
a.constructor.formAssociated && a.formResetCallback && a.formResetCallback.apply(a);
|
|
195
195
|
});
|
|
196
|
-
},
|
|
196
|
+
}, nt = (e, t, a) => {
|
|
197
197
|
if (t) {
|
|
198
198
|
const i = y.get(t);
|
|
199
199
|
if (i)
|
|
200
200
|
i.add(e);
|
|
201
201
|
else {
|
|
202
|
-
const
|
|
203
|
-
|
|
202
|
+
const n = /* @__PURE__ */ new Set();
|
|
203
|
+
n.add(e), y.set(t, n), xt(t), t.addEventListener("reset", Et), t.addEventListener("input", bt), t.addEventListener("change", wt);
|
|
204
204
|
}
|
|
205
205
|
M.set(t, { ref: e, internals: a }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
|
|
206
206
|
e.formAssociatedCallback.apply(e, [t]);
|
|
@@ -212,26 +212,26 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
212
212
|
}, x = (e, t, a = DOMException) => {
|
|
213
213
|
if (!e.constructor.formAssociated)
|
|
214
214
|
throw new a(t);
|
|
215
|
-
},
|
|
215
|
+
}, ot = (e, t, a) => {
|
|
216
216
|
const i = y.get(e);
|
|
217
|
-
return i && i.size && i.forEach((
|
|
218
|
-
l.get(
|
|
217
|
+
return i && i.size && i.forEach((n) => {
|
|
218
|
+
l.get(n)[a]() || (t = !1);
|
|
219
219
|
}), t;
|
|
220
220
|
}, rt = (e) => {
|
|
221
221
|
if (e.constructor.formAssociated) {
|
|
222
222
|
const t = l.get(e), { labels: a, form: i } = t;
|
|
223
|
-
it(e, a),
|
|
223
|
+
it(e, a), nt(e, i, t);
|
|
224
224
|
}
|
|
225
225
|
};
|
|
226
226
|
function H() {
|
|
227
227
|
return typeof MutationObserver < "u";
|
|
228
228
|
}
|
|
229
|
-
class
|
|
229
|
+
class It {
|
|
230
230
|
constructor() {
|
|
231
231
|
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);
|
|
232
232
|
}
|
|
233
233
|
}
|
|
234
|
-
const
|
|
234
|
+
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((i) => e[i] = t[i]), a && D(a), e), St = (e) => {
|
|
235
235
|
let t = !0;
|
|
236
236
|
for (let a in e)
|
|
237
237
|
a !== "valid" && e[a] !== !1 && (t = !1);
|
|
@@ -252,9 +252,9 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
252
252
|
add(t) {
|
|
253
253
|
if (!/^--/.test(t) || typeof t != "string")
|
|
254
254
|
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
|
|
255
|
-
const a = super.add(t), i = j.get(this),
|
|
256
|
-
return i.isConnected ? st(i,
|
|
257
|
-
st(i,
|
|
255
|
+
const a = super.add(t), i = j.get(this), n = `state${t}`;
|
|
256
|
+
return i.isConnected ? st(i, n) : setTimeout(() => {
|
|
257
|
+
st(i, n);
|
|
258
258
|
}), a;
|
|
259
259
|
}
|
|
260
260
|
clear() {
|
|
@@ -273,14 +273,14 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
273
273
|
if (typeof t == "function" ? e !== t || !i : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
274
274
|
return a === "m" ? i : a === "a" ? i.call(e) : i ? i.value : t.get(e);
|
|
275
275
|
}
|
|
276
|
-
function
|
|
276
|
+
function Tt(e, t, a, i, n) {
|
|
277
277
|
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");
|
|
278
278
|
return t.set(e, a), a;
|
|
279
279
|
}
|
|
280
280
|
var V;
|
|
281
|
-
class
|
|
281
|
+
class Ct {
|
|
282
282
|
constructor(t) {
|
|
283
|
-
V.set(this, void 0),
|
|
283
|
+
V.set(this, void 0), Tt(this, V, t);
|
|
284
284
|
for (let a = 0; a < t.length; a++) {
|
|
285
285
|
let i = t[a];
|
|
286
286
|
this[a] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
|
|
@@ -300,27 +300,27 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
300
300
|
return this[t] == null ? null : this[t];
|
|
301
301
|
}
|
|
302
302
|
}
|
|
303
|
-
function
|
|
303
|
+
function Ft() {
|
|
304
304
|
const e = HTMLFormElement.prototype.checkValidity;
|
|
305
305
|
HTMLFormElement.prototype.checkValidity = a;
|
|
306
306
|
const t = HTMLFormElement.prototype.reportValidity;
|
|
307
307
|
HTMLFormElement.prototype.reportValidity = i;
|
|
308
|
-
function a(...
|
|
309
|
-
let r = e.apply(this,
|
|
310
|
-
return
|
|
308
|
+
function a(...o) {
|
|
309
|
+
let r = e.apply(this, o);
|
|
310
|
+
return ot(this, r, "checkValidity");
|
|
311
311
|
}
|
|
312
|
-
function i(...
|
|
313
|
-
let r = t.apply(this,
|
|
314
|
-
return
|
|
312
|
+
function i(...o) {
|
|
313
|
+
let r = t.apply(this, o);
|
|
314
|
+
return ot(this, r, "reportValidity");
|
|
315
315
|
}
|
|
316
|
-
const { get:
|
|
316
|
+
const { get: n } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
317
317
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
318
|
-
get(...
|
|
319
|
-
const r =
|
|
318
|
+
get(...o) {
|
|
319
|
+
const r = n.call(this, ...o), h = Array.from(y.get(this) || []);
|
|
320
320
|
if (h.length === 0)
|
|
321
321
|
return r;
|
|
322
322
|
const m = Array.from(r).concat(h).sort((E, b) => E.compareDocumentPosition ? E.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
|
|
323
|
-
return new
|
|
323
|
+
return new Ct(m);
|
|
324
324
|
}
|
|
325
325
|
});
|
|
326
326
|
}
|
|
@@ -331,8 +331,8 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
331
331
|
constructor(t) {
|
|
332
332
|
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
333
333
|
throw new TypeError("Illegal constructor");
|
|
334
|
-
const a = t.getRootNode(), i = new
|
|
335
|
-
this.states = new K(t), d.set(this, t), v.set(this, i), l.set(t, this), W(t, this),
|
|
334
|
+
const a = t.getRootNode(), i = new It();
|
|
335
|
+
this.states = new K(t), d.set(this, t), v.set(this, i), l.set(t, this), W(t, this), yt(t, this), Object.seal(this), a instanceof DocumentFragment && vt(a);
|
|
336
336
|
}
|
|
337
337
|
checkValidity() {
|
|
338
338
|
const t = d.get(this);
|
|
@@ -377,29 +377,29 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
377
377
|
const i = at(a, this);
|
|
378
378
|
i.value = t;
|
|
379
379
|
}
|
|
380
|
-
} else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i,
|
|
381
|
-
if (typeof
|
|
382
|
-
const
|
|
383
|
-
|
|
380
|
+
} else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, n]) => {
|
|
381
|
+
if (typeof n == "string") {
|
|
382
|
+
const o = at(a, this);
|
|
383
|
+
o.name = i, o.value = n;
|
|
384
384
|
}
|
|
385
385
|
});
|
|
386
386
|
N.set(a, t);
|
|
387
387
|
}
|
|
388
388
|
setValidity(t, a, i) {
|
|
389
|
-
const
|
|
390
|
-
if (x(
|
|
389
|
+
const n = d.get(this);
|
|
390
|
+
if (x(n, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
|
|
391
391
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
392
392
|
$.set(this, i);
|
|
393
|
-
const
|
|
393
|
+
const o = v.get(this), r = {};
|
|
394
394
|
for (const E in t)
|
|
395
395
|
r[E] = t[E];
|
|
396
|
-
Object.keys(r).length === 0 &&
|
|
397
|
-
const h = Object.assign(Object.assign({},
|
|
396
|
+
Object.keys(r).length === 0 && Mt(o);
|
|
397
|
+
const h = Object.assign(Object.assign({}, o), r);
|
|
398
398
|
delete h.valid;
|
|
399
|
-
const { valid: m } =
|
|
399
|
+
const { valid: m } = kt(o, h, this.form);
|
|
400
400
|
if (!m && !a)
|
|
401
401
|
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.");
|
|
402
|
-
I.set(this, m ? "" : a),
|
|
402
|
+
I.set(this, m ? "" : a), n.isConnected ? (n.toggleAttribute("internals-invalid", !m), n.toggleAttribute("internals-valid", m), n.setAttribute("aria-invalid", `${!m}`)) : T.set(n, this);
|
|
403
403
|
}
|
|
404
404
|
get shadowRoot() {
|
|
405
405
|
const t = d.get(this), a = L.get(t);
|
|
@@ -418,7 +418,7 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
418
418
|
return x(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"));
|
|
419
419
|
}
|
|
420
420
|
}
|
|
421
|
-
function
|
|
421
|
+
function At() {
|
|
422
422
|
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
|
|
423
423
|
return !1;
|
|
424
424
|
class e extends HTMLElement {
|
|
@@ -453,14 +453,14 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
453
453
|
if (!dt) {
|
|
454
454
|
if (dt = !0, typeof window < "u" && (window.ElementInternals = ct), typeof CustomElementRegistry < "u") {
|
|
455
455
|
const t = CustomElementRegistry.prototype.define;
|
|
456
|
-
CustomElementRegistry.prototype.define = function(a, i,
|
|
456
|
+
CustomElementRegistry.prototype.define = function(a, i, n) {
|
|
457
457
|
if (i.formAssociated) {
|
|
458
|
-
const
|
|
458
|
+
const o = i.prototype.connectedCallback;
|
|
459
459
|
i.prototype.connectedCallback = function() {
|
|
460
|
-
k.has(this) || (k.set(this, !0), this.hasAttribute("disabled") && U(this, !0)),
|
|
460
|
+
k.has(this) || (k.set(this, !0), this.hasAttribute("disabled") && U(this, !0)), o != null && o.apply(this), rt(this);
|
|
461
461
|
};
|
|
462
462
|
}
|
|
463
|
-
t.call(this, a, i,
|
|
463
|
+
t.call(this, a, i, n);
|
|
464
464
|
};
|
|
465
465
|
}
|
|
466
466
|
if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
|
|
@@ -473,34 +473,34 @@ const _t = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
473
473
|
return new ct(this);
|
|
474
474
|
}), typeof Element < "u") {
|
|
475
475
|
let t = function(...i) {
|
|
476
|
-
const
|
|
477
|
-
if (L.set(this,
|
|
478
|
-
const
|
|
479
|
-
window.ShadyDOM ?
|
|
476
|
+
const n = a.apply(this, i);
|
|
477
|
+
if (L.set(this, n), H()) {
|
|
478
|
+
const o = new MutationObserver(q);
|
|
479
|
+
window.ShadyDOM ? o.observe(this, B) : o.observe(n, B), F.set(this, o);
|
|
480
480
|
}
|
|
481
|
-
return
|
|
481
|
+
return n;
|
|
482
482
|
};
|
|
483
483
|
const a = Element.prototype.attachShadow;
|
|
484
484
|
Element.prototype.attachShadow = t;
|
|
485
485
|
}
|
|
486
|
-
H() && typeof document < "u" && new MutationObserver(q).observe(document.documentElement, B), typeof HTMLFormElement < "u" &&
|
|
486
|
+
H() && typeof document < "u" && new MutationObserver(q).observe(document.documentElement, B), typeof HTMLFormElement < "u" && Ft(), (e || typeof window < "u" && !window.CustomStateSet) && G();
|
|
487
487
|
}
|
|
488
488
|
}
|
|
489
|
-
return !!customElements.polyfillWrapFlushCallback || (
|
|
489
|
+
return !!customElements.polyfillWrapFlushCallback || (At() ? typeof window < "u" && !window.CustomStateSet && G(HTMLElement.prototype.attachInternals) : pt(!1)), p.forceCustomStateSetPolyfill = G, p.forceElementInternalsPolyfill = pt, Object.defineProperty(p, "__esModule", { value: !0 }), p;
|
|
490
490
|
})({});
|
|
491
491
|
})();
|
|
492
|
-
var
|
|
493
|
-
for (var l = g > 1 ? void 0 : g ?
|
|
492
|
+
var Bt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, c = (p, d, v, g) => {
|
|
493
|
+
for (var l = g > 1 ? void 0 : g ? Ut(d, v) : d, I = p.length - 1, M; I >= 0; I--)
|
|
494
494
|
(M = p[I]) && (l = (g ? M(d, v, l) : M(l)) || l);
|
|
495
|
-
return g && l &&
|
|
495
|
+
return g && l && Bt(d, v, l), l;
|
|
496
496
|
};
|
|
497
497
|
const Z = "pie-text-input", Q = "assistive-text";
|
|
498
|
-
let s = class extends Ot(Rt(X)) {
|
|
498
|
+
let s = class extends Ot(Pt(Rt(X))) {
|
|
499
499
|
constructor() {
|
|
500
500
|
super(...arguments), this.type = w.type, this.value = w.value, this.disabled = w.disabled, this.readonly = w.readonly, this.status = w.status, this.size = w.size, this.required = !1, this.handleInput = (p) => {
|
|
501
501
|
this.value = p.target.value, this._internals.setFormValue(this.value);
|
|
502
502
|
}, this.handleChange = (p) => {
|
|
503
|
-
const d =
|
|
503
|
+
const d = Dt(p);
|
|
504
504
|
this.dispatchEvent(d);
|
|
505
505
|
};
|
|
506
506
|
}
|
|
@@ -554,7 +554,7 @@ let s = class extends Ot(Rt(X)) {
|
|
|
554
554
|
value: C,
|
|
555
555
|
size: W,
|
|
556
556
|
required: O
|
|
557
|
-
} = this,
|
|
557
|
+
} = this, P = {
|
|
558
558
|
"c-textInput": !0,
|
|
559
559
|
[`c-textInput--${W}`]: !0,
|
|
560
560
|
[`c-textInput--${k}`]: !0,
|
|
@@ -563,7 +563,7 @@ let s = class extends Ot(Rt(X)) {
|
|
|
563
563
|
};
|
|
564
564
|
return mt`
|
|
565
565
|
<div
|
|
566
|
-
class="${$t(
|
|
566
|
+
class="${$t(P)}"
|
|
567
567
|
data-test-id="pie-text-input-shell">
|
|
568
568
|
<!-- The reason for separate slots for icons and text is that we cannot programmatically be aware of the
|
|
569
569
|
HTML used inside of the slot without breaking SSR in consuming applications (icons need to use different colours than text content)
|
|
@@ -611,11 +611,10 @@ let s = class extends Ot(Rt(X)) {
|
|
|
611
611
|
` : Nt}`;
|
|
612
612
|
}
|
|
613
613
|
};
|
|
614
|
-
s.
|
|
615
|
-
s.styles = Lt(_t);
|
|
614
|
+
s.styles = Lt(Ht);
|
|
616
615
|
c([
|
|
617
616
|
u({ type: String, reflect: !0 }),
|
|
618
|
-
Y(Z,
|
|
617
|
+
Y(Z, zt, w.type)
|
|
619
618
|
], s.prototype, "type", 2);
|
|
620
619
|
c([
|
|
621
620
|
u({ type: String })
|
|
@@ -658,7 +657,7 @@ c([
|
|
|
658
657
|
], s.prototype, "assistiveText", 2);
|
|
659
658
|
c([
|
|
660
659
|
u({ type: String }),
|
|
661
|
-
Y(Z,
|
|
660
|
+
Y(Z, Wt, w.status)
|
|
662
661
|
], s.prototype, "status", 2);
|
|
663
662
|
c([
|
|
664
663
|
u({ type: Number })
|
|
@@ -671,25 +670,25 @@ c([
|
|
|
671
670
|
], s.prototype, "max", 2);
|
|
672
671
|
c([
|
|
673
672
|
u({ type: String }),
|
|
674
|
-
Y(Z,
|
|
673
|
+
Y(Z, qt, w.size)
|
|
675
674
|
], s.prototype, "size", 2);
|
|
676
675
|
c([
|
|
677
676
|
u({ type: Boolean })
|
|
678
677
|
], s.prototype, "required", 2);
|
|
679
678
|
c([
|
|
680
|
-
|
|
679
|
+
ft("input")
|
|
681
680
|
], s.prototype, "input", 2);
|
|
682
681
|
c([
|
|
683
|
-
|
|
682
|
+
ft("input")
|
|
684
683
|
], s.prototype, "focusTarget", 2);
|
|
685
684
|
s = c([
|
|
686
|
-
|
|
685
|
+
_t("pie-text-input")
|
|
687
686
|
], s);
|
|
688
687
|
export {
|
|
689
688
|
s as PieTextInput,
|
|
690
689
|
w as defaultProps,
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
690
|
+
te as inputModes,
|
|
691
|
+
qt as sizes,
|
|
692
|
+
Wt as statusTypes,
|
|
693
|
+
zt as types
|
|
695
694
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -33,12 +33,6 @@ export declare const PieTextInput: React_2.ForwardRefExoticComponent<React_2.Pro
|
|
|
33
33
|
* @slot trailingIcon - An icon to display at the end of the input. Do not use with trailingText at the same time.
|
|
34
34
|
*/
|
|
35
35
|
declare class PieTextInput_2 extends PieTextInput_base implements TextInputProps, PIEInputElement {
|
|
36
|
-
static shadowRootOptions: {
|
|
37
|
-
delegatesFocus: boolean;
|
|
38
|
-
mode: ShadowRootMode;
|
|
39
|
-
serializable?: boolean;
|
|
40
|
-
slotAssignment?: SlotAssignmentMode;
|
|
41
|
-
};
|
|
42
36
|
type: "number" | "text" | "password" | "url" | "email" | "tel";
|
|
43
37
|
value: string;
|
|
44
38
|
name: TextInputProps['name'];
|
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.29.1",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -19,7 +19,12 @@
|
|
|
19
19
|
"**/*.d.ts"
|
|
20
20
|
],
|
|
21
21
|
"pieMetadata": {
|
|
22
|
-
"componentStatus": "beta"
|
|
22
|
+
"componentStatus": "beta",
|
|
23
|
+
"replaces": {
|
|
24
|
+
"snacks": [
|
|
25
|
+
"Input"
|
|
26
|
+
]
|
|
27
|
+
}
|
|
23
28
|
},
|
|
24
29
|
"scripts": {
|
|
25
30
|
"build": "run -T vite build",
|
|
@@ -40,15 +45,15 @@
|
|
|
40
45
|
"devDependencies": {
|
|
41
46
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
47
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
43
|
-
"@justeattakeaway/pie-css": "0.
|
|
44
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
48
|
+
"@justeattakeaway/pie-css": "0.23.0",
|
|
49
|
+
"@justeattakeaway/pie-icons-webc": "1.15.1",
|
|
45
50
|
"@justeattakeaway/pie-monorepo-utils": "0.7.0",
|
|
46
51
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
47
52
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
48
53
|
},
|
|
49
54
|
"dependencies": {
|
|
50
|
-
"@justeattakeaway/pie-assistive-text": "0.
|
|
51
|
-
"@justeattakeaway/pie-webc-core": "
|
|
55
|
+
"@justeattakeaway/pie-assistive-text": "0.11.1",
|
|
56
|
+
"@justeattakeaway/pie-webc-core": "3.0.0",
|
|
52
57
|
"element-internals-polyfill": "1.3.11"
|
|
53
58
|
},
|
|
54
59
|
"volta": {
|
package/src/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
2
|
+
html, unsafeCSS, type PropertyValues, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
5
|
import { property, query } from 'lit/decorators.js';
|
|
@@ -10,6 +10,7 @@ import { live } from 'lit/directives/live.js';
|
|
|
10
10
|
import {
|
|
11
11
|
validPropertyValues, RtlMixin, FormControlMixin, wrapNativeEvent, type PIEInputElement,
|
|
12
12
|
safeCustomElement,
|
|
13
|
+
DelegatesFocusMixin,
|
|
13
14
|
} from '@justeattakeaway/pie-webc-core';
|
|
14
15
|
import '@justeattakeaway/pie-assistive-text';
|
|
15
16
|
|
|
@@ -36,9 +37,7 @@ const assistiveTextIdValue = 'assistive-text';
|
|
|
36
37
|
* @slot trailingIcon - An icon to display at the end of the input. Do not use with trailingText at the same time.
|
|
37
38
|
*/
|
|
38
39
|
@safeCustomElement('pie-text-input')
|
|
39
|
-
export class PieTextInput extends FormControlMixin(RtlMixin(PieElement)) implements TextInputProps, PIEInputElement {
|
|
40
|
-
static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
|
|
41
|
-
|
|
40
|
+
export class PieTextInput extends FormControlMixin(RtlMixin(DelegatesFocusMixin(PieElement))) implements TextInputProps, PIEInputElement {
|
|
42
41
|
@property({ type: String, reflect: true })
|
|
43
42
|
@validPropertyValues(componentSelector, types, defaultProps.type)
|
|
44
43
|
public type = defaultProps.type;
|