@justeattakeaway/pie-text-input 0.24.0 → 0.24.2
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 +211 -222
- package/dist/react.js +9 -16
- package/package.json +6 -6
- package/src/react.ts +2 -2
package/dist/index.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as u, query as
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import { classMap as
|
|
5
|
-
import { live as
|
|
6
|
-
import { FormControlMixin as
|
|
1
|
+
import { LitElement as ut, html as pt, nothing as Vt, unsafeCSS as Nt } from "lit";
|
|
2
|
+
import { property as u, query as ft } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as f } from "lit/directives/if-defined.js";
|
|
4
|
+
import { classMap as Lt } from "lit/directives/class-map.js";
|
|
5
|
+
import { live as mt } from "lit/directives/live.js";
|
|
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
|
|
9
|
-
`, _t = ["text", "number", "password", "url", "email", "tel"], Qt = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], Dt = ["default", "success", "error"], Xt = ["small", "medium", "large"], E = {
|
|
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);line-height:24px;font-size:var(--input-font-size);display:flex;flex-wrap:nowrap;align-items:center;background-color:var(--input-container-color);color:var(--input-text-color-leading-trailing-content);cursor:var(--input-cursor)}.c-textInput.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 = {
|
|
10
9
|
type: "text",
|
|
11
10
|
value: "",
|
|
12
11
|
size: "medium",
|
|
@@ -15,8 +14,8 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
15
14
|
readonly: !1
|
|
16
15
|
};
|
|
17
16
|
(function() {
|
|
18
|
-
(function(
|
|
19
|
-
const s = /* @__PURE__ */ new WeakMap(),
|
|
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(), v = /* @__PURE__ */ new WeakMap(), C = {
|
|
20
19
|
ariaAtomic: "aria-atomic",
|
|
21
20
|
ariaAutoComplete: "aria-autocomplete",
|
|
22
21
|
ariaBusy: "aria-busy",
|
|
@@ -59,26 +58,26 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
59
58
|
ariaValueNow: "aria-valuenow",
|
|
60
59
|
ariaValueText: "aria-valuetext",
|
|
61
60
|
role: "role"
|
|
62
|
-
},
|
|
63
|
-
for (let a in
|
|
61
|
+
}, q = (e, t) => {
|
|
62
|
+
for (let a in C) {
|
|
64
63
|
t[a] = null;
|
|
65
64
|
let i = null;
|
|
66
|
-
const n =
|
|
65
|
+
const n = C[a];
|
|
67
66
|
Object.defineProperty(t, a, {
|
|
68
67
|
get() {
|
|
69
68
|
return i;
|
|
70
69
|
},
|
|
71
70
|
set(o) {
|
|
72
|
-
i = o, e.isConnected ? e.setAttribute(n, o) :
|
|
71
|
+
i = o, e.isConnected ? e.setAttribute(n, o) : S.set(e, t);
|
|
73
72
|
}
|
|
74
73
|
});
|
|
75
74
|
}
|
|
76
75
|
};
|
|
77
76
|
function O(e) {
|
|
78
77
|
const t = c.get(e), { form: a } = t;
|
|
79
|
-
|
|
78
|
+
at(e, a, t), et(e, t.labels);
|
|
80
79
|
}
|
|
81
|
-
const
|
|
80
|
+
const R = (e, t = !1) => {
|
|
82
81
|
const a = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
|
|
83
82
|
acceptNode(o) {
|
|
84
83
|
return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
@@ -87,154 +86,154 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
87
86
|
let i = a.nextNode();
|
|
88
87
|
const n = !t || e.disabled;
|
|
89
88
|
for (; i; )
|
|
90
|
-
i.formDisabledCallback && n &&
|
|
91
|
-
},
|
|
89
|
+
i.formDisabledCallback && n && K(i, e.disabled), i = a.nextNode();
|
|
90
|
+
}, P = { attributes: !0, attributeFilter: ["disabled", "name"] }, H = z() ? new MutationObserver((e) => {
|
|
92
91
|
for (const t of e) {
|
|
93
92
|
const a = t.target;
|
|
94
|
-
if (t.attributeName === "disabled" && (a.constructor.formAssociated ?
|
|
93
|
+
if (t.attributeName === "disabled" && (a.constructor.formAssociated ? K(a, a.hasAttribute("disabled")) : a.localName === "fieldset" && R(a)), t.attributeName === "name" && a.constructor.formAssociated) {
|
|
95
94
|
const i = c.get(a), n = V.get(a);
|
|
96
95
|
i.setFormValue(n);
|
|
97
96
|
}
|
|
98
97
|
}
|
|
99
98
|
}) : {};
|
|
100
|
-
function
|
|
99
|
+
function B(e) {
|
|
101
100
|
e.forEach((t) => {
|
|
102
101
|
const { addedNodes: a, removedNodes: i } = t, n = Array.from(a), o = Array.from(i);
|
|
103
102
|
n.forEach((r) => {
|
|
104
103
|
var m;
|
|
105
|
-
if (c.has(r) && r.constructor.formAssociated && O(r),
|
|
106
|
-
const p =
|
|
107
|
-
Object.keys(
|
|
108
|
-
r.setAttribute(
|
|
109
|
-
}),
|
|
104
|
+
if (c.has(r) && r.constructor.formAssociated && O(r), S.has(r)) {
|
|
105
|
+
const p = S.get(r);
|
|
106
|
+
Object.keys(C).filter((y) => p[y] !== null).forEach((y) => {
|
|
107
|
+
r.setAttribute(C[y], p[y]);
|
|
108
|
+
}), S.delete(r);
|
|
110
109
|
}
|
|
111
|
-
if (
|
|
112
|
-
const p =
|
|
113
|
-
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 (v.has(r)) {
|
|
111
|
+
const p = v.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()), v.delete(r);
|
|
114
113
|
}
|
|
115
114
|
if (r.localName === "form") {
|
|
116
|
-
const p =
|
|
117
|
-
acceptNode(
|
|
118
|
-
return c.has(
|
|
115
|
+
const p = g.get(r), w = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
|
|
116
|
+
acceptNode(Q) {
|
|
117
|
+
return c.has(Q) && Q.constructor.formAssociated && !(p && p.has(Q)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
119
118
|
}
|
|
120
119
|
});
|
|
121
|
-
let
|
|
122
|
-
for (;
|
|
123
|
-
O(
|
|
120
|
+
let y = w.nextNode();
|
|
121
|
+
for (; y; )
|
|
122
|
+
O(y), y = w.nextNode();
|
|
124
123
|
}
|
|
125
|
-
r.localName === "fieldset" && ((m =
|
|
124
|
+
r.localName === "fieldset" && ((m = H.observe) === null || m === void 0 || m.call(H, r, P), R(r, !0));
|
|
126
125
|
}), o.forEach((r) => {
|
|
127
126
|
const m = c.get(r);
|
|
128
|
-
m &&
|
|
127
|
+
m && E.get(m) && Z(m), T.has(r) && T.get(r).disconnect();
|
|
129
128
|
});
|
|
130
129
|
});
|
|
131
130
|
}
|
|
132
|
-
function
|
|
131
|
+
function gt(e) {
|
|
133
132
|
e.forEach((t) => {
|
|
134
133
|
const { removedNodes: a } = t;
|
|
135
134
|
a.forEach((i) => {
|
|
136
135
|
const n = $.get(t.target);
|
|
137
|
-
c.has(i) &&
|
|
136
|
+
c.has(i) && nt(i), n.disconnect();
|
|
138
137
|
});
|
|
139
138
|
});
|
|
140
139
|
}
|
|
141
|
-
const
|
|
140
|
+
const yt = (e) => {
|
|
142
141
|
var t, a;
|
|
143
|
-
const i = new MutationObserver(
|
|
142
|
+
const i = new MutationObserver(gt);
|
|
144
143
|
!((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 }), $.set(e, i);
|
|
145
144
|
};
|
|
146
|
-
z() && new MutationObserver(
|
|
147
|
-
const
|
|
145
|
+
z() && new MutationObserver(B);
|
|
146
|
+
const U = {
|
|
148
147
|
childList: !0,
|
|
149
148
|
subtree: !0
|
|
150
|
-
},
|
|
149
|
+
}, K = (e, t) => {
|
|
151
150
|
e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
|
|
152
|
-
},
|
|
153
|
-
|
|
151
|
+
}, Z = (e) => {
|
|
152
|
+
E.get(e).forEach((a) => {
|
|
154
153
|
a.remove();
|
|
155
|
-
}),
|
|
156
|
-
},
|
|
154
|
+
}), E.set(e, []);
|
|
155
|
+
}, tt = (e, t) => {
|
|
157
156
|
const a = document.createElement("input");
|
|
158
|
-
return a.type = "hidden", a.name = e.getAttribute("name"), e.after(a),
|
|
159
|
-
},
|
|
157
|
+
return a.type = "hidden", a.name = e.getAttribute("name"), e.after(a), E.get(t).push(a), a;
|
|
158
|
+
}, vt = (e, t) => {
|
|
160
159
|
var a;
|
|
161
|
-
|
|
162
|
-
},
|
|
160
|
+
E.set(t, []), (a = H.observe) === null || a === void 0 || a.call(H, e, P);
|
|
161
|
+
}, et = (e, t) => {
|
|
163
162
|
if (t.length) {
|
|
164
163
|
Array.from(t).forEach((i) => i.addEventListener("click", e.click.bind(e)));
|
|
165
164
|
let a = t[0].id;
|
|
166
165
|
t[0].id || (a = `${t[0].htmlFor}_Label`, t[0].id = a), e.setAttribute("aria-labelledby", a);
|
|
167
166
|
}
|
|
168
167
|
}, D = (e) => {
|
|
169
|
-
const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), a =
|
|
168
|
+
const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), a = g.get(e) || [], i = Array.from(a).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), n = [...t, ...i].includes(!1);
|
|
170
169
|
e.toggleAttribute("internals-invalid", n), e.toggleAttribute("internals-valid", !n);
|
|
171
|
-
}, vt = (e) => {
|
|
172
|
-
D(H(e.target));
|
|
173
170
|
}, bt = (e) => {
|
|
174
|
-
D(
|
|
171
|
+
D(_(e.target));
|
|
175
172
|
}, wt = (e) => {
|
|
173
|
+
D(_(e.target));
|
|
174
|
+
}, xt = (e) => {
|
|
176
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(",");
|
|
177
176
|
e.addEventListener("click", (a) => {
|
|
178
177
|
if (a.target.closest(t)) {
|
|
179
|
-
const n =
|
|
178
|
+
const n = g.get(e);
|
|
180
179
|
if (e.noValidate)
|
|
181
180
|
return;
|
|
182
181
|
n.size && Array.from(n).reverse().map((m) => c.get(m).reportValidity()).includes(!1) && a.preventDefault();
|
|
183
182
|
}
|
|
184
183
|
});
|
|
185
|
-
},
|
|
186
|
-
const t =
|
|
184
|
+
}, Et = (e) => {
|
|
185
|
+
const t = g.get(e.target);
|
|
187
186
|
t && t.size && t.forEach((a) => {
|
|
188
187
|
a.constructor.formAssociated && a.formResetCallback && a.formResetCallback.apply(a);
|
|
189
188
|
});
|
|
190
|
-
},
|
|
189
|
+
}, at = (e, t, a) => {
|
|
191
190
|
if (t) {
|
|
192
|
-
const i =
|
|
191
|
+
const i = g.get(t);
|
|
193
192
|
if (i)
|
|
194
193
|
i.add(e);
|
|
195
194
|
else {
|
|
196
195
|
const n = /* @__PURE__ */ new Set();
|
|
197
|
-
n.add(e),
|
|
196
|
+
n.add(e), g.set(t, n), xt(t), t.addEventListener("reset", Et), t.addEventListener("input", bt), t.addEventListener("change", wt);
|
|
198
197
|
}
|
|
199
|
-
|
|
198
|
+
k.set(t, { ref: e, internals: a }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
|
|
200
199
|
e.formAssociatedCallback.apply(e, [t]);
|
|
201
200
|
}, 0), D(t);
|
|
202
201
|
}
|
|
203
|
-
},
|
|
202
|
+
}, _ = (e) => {
|
|
204
203
|
let t = e.parentNode;
|
|
205
|
-
return t && t.tagName !== "FORM" && (t =
|
|
206
|
-
},
|
|
204
|
+
return t && t.tagName !== "FORM" && (t = _(t)), t;
|
|
205
|
+
}, b = (e, t, a = DOMException) => {
|
|
207
206
|
if (!e.constructor.formAssociated)
|
|
208
207
|
throw new a(t);
|
|
209
|
-
},
|
|
210
|
-
const i =
|
|
208
|
+
}, it = (e, t, a) => {
|
|
209
|
+
const i = g.get(e);
|
|
211
210
|
return i && i.size && i.forEach((n) => {
|
|
212
211
|
c.get(n)[a]() || (t = !1);
|
|
213
212
|
}), t;
|
|
214
|
-
},
|
|
213
|
+
}, nt = (e) => {
|
|
215
214
|
if (e.constructor.formAssociated) {
|
|
216
215
|
const t = c.get(e), { labels: a, form: i } = t;
|
|
217
|
-
|
|
216
|
+
et(e, a), at(e, i, t);
|
|
218
217
|
}
|
|
219
218
|
};
|
|
220
219
|
function z() {
|
|
221
220
|
return typeof MutationObserver < "u";
|
|
222
221
|
}
|
|
223
|
-
class
|
|
222
|
+
class It {
|
|
224
223
|
constructor() {
|
|
225
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);
|
|
226
225
|
}
|
|
227
226
|
}
|
|
228
|
-
const
|
|
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((i) => e[i] = t[i]), a && D(a), e), St = (e) => {
|
|
229
228
|
let t = !0;
|
|
230
229
|
for (let a in e)
|
|
231
230
|
a !== "valid" && e[a] !== !1 && (t = !1);
|
|
232
231
|
return t;
|
|
233
232
|
}, j = /* @__PURE__ */ new WeakMap();
|
|
234
|
-
function
|
|
233
|
+
function ot(e, t) {
|
|
235
234
|
e.toggleAttribute(t, !0), e.part && e.part.add(t);
|
|
236
235
|
}
|
|
237
|
-
class
|
|
236
|
+
class G extends Set {
|
|
238
237
|
static get isPolyfilled() {
|
|
239
238
|
return !0;
|
|
240
239
|
}
|
|
@@ -247,8 +246,8 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
247
246
|
if (!/^--/.test(t) || typeof t != "string")
|
|
248
247
|
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
|
|
249
248
|
const a = super.add(t), i = j.get(this), n = `state${t}`;
|
|
250
|
-
return i.isConnected ?
|
|
251
|
-
|
|
249
|
+
return i.isConnected ? ot(i, n) : setTimeout(() => {
|
|
250
|
+
ot(i, n);
|
|
252
251
|
}), a;
|
|
253
252
|
}
|
|
254
253
|
clear() {
|
|
@@ -263,26 +262,19 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
263
262
|
}), a;
|
|
264
263
|
}
|
|
265
264
|
}
|
|
266
|
-
function
|
|
267
|
-
if (a === "a" && !i)
|
|
268
|
-
|
|
269
|
-
if (typeof t == "function" ? e !== t || !i : !t.has(e))
|
|
270
|
-
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
265
|
+
function rt(e, t, a, i) {
|
|
266
|
+
if (a === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
|
|
267
|
+
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");
|
|
271
268
|
return a === "m" ? i : a === "a" ? i.call(e) : i ? i.value : t.get(e);
|
|
272
269
|
}
|
|
273
|
-
function
|
|
274
|
-
if (
|
|
275
|
-
|
|
276
|
-
if (i === "a" && !n)
|
|
277
|
-
throw new TypeError("Private accessor was defined without a setter");
|
|
278
|
-
if (typeof t == "function" ? e !== t || !n : !t.has(e))
|
|
279
|
-
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
280
|
-
return i === "a" ? n.call(e, a) : n ? n.value = a : t.set(e, a), a;
|
|
270
|
+
function Ct(e, t, a, i, n) {
|
|
271
|
+
if (typeof t == "function" ? e !== t || !n : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
272
|
+
return t.set(e, a), a;
|
|
281
273
|
}
|
|
282
274
|
var A;
|
|
283
|
-
class
|
|
275
|
+
class Tt {
|
|
284
276
|
constructor(t) {
|
|
285
|
-
A.set(this, void 0),
|
|
277
|
+
A.set(this, void 0), Ct(this, A, t);
|
|
286
278
|
for (let a = 0; a < t.length; a++) {
|
|
287
279
|
let i = t[a];
|
|
288
280
|
this[a] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
|
|
@@ -290,10 +282,10 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
290
282
|
Object.freeze(this);
|
|
291
283
|
}
|
|
292
284
|
get length() {
|
|
293
|
-
return
|
|
285
|
+
return rt(this, A, "f").length;
|
|
294
286
|
}
|
|
295
287
|
[(A = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
296
|
-
return
|
|
288
|
+
return rt(this, A, "f")[Symbol.iterator]();
|
|
297
289
|
}
|
|
298
290
|
item(t) {
|
|
299
291
|
return this[t] == null ? null : this[t];
|
|
@@ -302,45 +294,45 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
302
294
|
return this[t] == null ? null : this[t];
|
|
303
295
|
}
|
|
304
296
|
}
|
|
305
|
-
function
|
|
297
|
+
function Ft() {
|
|
306
298
|
const e = HTMLFormElement.prototype.checkValidity;
|
|
307
299
|
HTMLFormElement.prototype.checkValidity = a;
|
|
308
300
|
const t = HTMLFormElement.prototype.reportValidity;
|
|
309
301
|
HTMLFormElement.prototype.reportValidity = i;
|
|
310
302
|
function a(...o) {
|
|
311
303
|
let r = e.apply(this, o);
|
|
312
|
-
return
|
|
304
|
+
return it(this, r, "checkValidity");
|
|
313
305
|
}
|
|
314
306
|
function i(...o) {
|
|
315
307
|
let r = t.apply(this, o);
|
|
316
|
-
return
|
|
308
|
+
return it(this, r, "reportValidity");
|
|
317
309
|
}
|
|
318
310
|
const { get: n } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
319
311
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
320
312
|
get(...o) {
|
|
321
|
-
const r = n.call(this, ...o), m = Array.from(
|
|
313
|
+
const r = n.call(this, ...o), m = Array.from(g.get(this) || []);
|
|
322
314
|
if (m.length === 0)
|
|
323
315
|
return r;
|
|
324
|
-
const p = Array.from(r).concat(m).sort((
|
|
325
|
-
return new
|
|
316
|
+
const p = Array.from(r).concat(m).sort((w, y) => w.compareDocumentPosition ? w.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
|
|
317
|
+
return new Tt(p);
|
|
326
318
|
}
|
|
327
319
|
});
|
|
328
320
|
}
|
|
329
|
-
class
|
|
321
|
+
class st {
|
|
330
322
|
static get isPolyfilled() {
|
|
331
323
|
return !0;
|
|
332
324
|
}
|
|
333
325
|
constructor(t) {
|
|
334
326
|
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
335
327
|
throw new TypeError("Illegal constructor");
|
|
336
|
-
const a = t.getRootNode(), i = new
|
|
337
|
-
this.states = new
|
|
328
|
+
const a = t.getRootNode(), i = new It();
|
|
329
|
+
this.states = new G(t), s.set(this, t), h.set(this, i), c.set(t, this), q(t, this), vt(t, this), Object.seal(this), a instanceof DocumentFragment && yt(a);
|
|
338
330
|
}
|
|
339
331
|
checkValidity() {
|
|
340
332
|
const t = s.get(this);
|
|
341
|
-
if (
|
|
333
|
+
if (b(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
342
334
|
return !0;
|
|
343
|
-
const a =
|
|
335
|
+
const a = h.get(this);
|
|
344
336
|
if (!a.valid) {
|
|
345
337
|
const i = new Event("invalid", {
|
|
346
338
|
bubbles: !1,
|
|
@@ -353,19 +345,19 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
353
345
|
}
|
|
354
346
|
get form() {
|
|
355
347
|
const t = s.get(this);
|
|
356
|
-
|
|
348
|
+
b(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
357
349
|
let a;
|
|
358
|
-
return t.constructor.formAssociated === !0 && (a =
|
|
350
|
+
return t.constructor.formAssociated === !0 && (a = _(t)), a;
|
|
359
351
|
}
|
|
360
352
|
get labels() {
|
|
361
353
|
const t = s.get(this);
|
|
362
|
-
|
|
354
|
+
b(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
363
355
|
const a = t.getAttribute("id"), i = t.getRootNode();
|
|
364
356
|
return i && a ? i.querySelectorAll(`[for="${a}"]`) : [];
|
|
365
357
|
}
|
|
366
358
|
reportValidity() {
|
|
367
359
|
const t = s.get(this);
|
|
368
|
-
if (
|
|
360
|
+
if (b(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
369
361
|
return !0;
|
|
370
362
|
const a = this.checkValidity(), i = L.get(this);
|
|
371
363
|
if (i && !t.constructor.formAssociated)
|
|
@@ -374,35 +366,34 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
374
366
|
}
|
|
375
367
|
setFormValue(t) {
|
|
376
368
|
const a = s.get(this);
|
|
377
|
-
if (
|
|
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)) {
|
|
378
370
|
if (a.getAttribute("name")) {
|
|
379
|
-
const i =
|
|
371
|
+
const i = tt(a, this);
|
|
380
372
|
i.value = t;
|
|
381
373
|
}
|
|
382
|
-
} else
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
});
|
|
374
|
+
} else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, n]) => {
|
|
375
|
+
if (typeof n == "string") {
|
|
376
|
+
const o = tt(a, this);
|
|
377
|
+
o.name = i, o.value = n;
|
|
378
|
+
}
|
|
379
|
+
});
|
|
389
380
|
V.set(a, t);
|
|
390
381
|
}
|
|
391
382
|
setValidity(t, a, i) {
|
|
392
383
|
const n = s.get(this);
|
|
393
|
-
if (
|
|
384
|
+
if (b(n, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
|
|
394
385
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
395
386
|
L.set(this, i);
|
|
396
|
-
const o =
|
|
397
|
-
for (const
|
|
398
|
-
r[
|
|
399
|
-
Object.keys(r).length === 0 &&
|
|
387
|
+
const o = h.get(this), r = {};
|
|
388
|
+
for (const w in t)
|
|
389
|
+
r[w] = t[w];
|
|
390
|
+
Object.keys(r).length === 0 && Mt(o);
|
|
400
391
|
const m = Object.assign(Object.assign({}, o), r);
|
|
401
392
|
delete m.valid;
|
|
402
|
-
const { valid: p } =
|
|
393
|
+
const { valid: p } = kt(o, m, this.form);
|
|
403
394
|
if (!p && !a)
|
|
404
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.");
|
|
405
|
-
|
|
396
|
+
I.set(this, p ? "" : a), n.isConnected ? (n.toggleAttribute("internals-invalid", !p), n.toggleAttribute("internals-valid", p), n.setAttribute("aria-invalid", `${!p}`)) : v.set(n, this);
|
|
406
397
|
}
|
|
407
398
|
get shadowRoot() {
|
|
408
399
|
const t = s.get(this), a = N.get(t);
|
|
@@ -410,18 +401,18 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
410
401
|
}
|
|
411
402
|
get validationMessage() {
|
|
412
403
|
const t = s.get(this);
|
|
413
|
-
return
|
|
404
|
+
return b(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), I.get(this);
|
|
414
405
|
}
|
|
415
406
|
get validity() {
|
|
416
407
|
const t = s.get(this);
|
|
417
|
-
return
|
|
408
|
+
return b(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
|
|
418
409
|
}
|
|
419
410
|
get willValidate() {
|
|
420
411
|
const t = s.get(this);
|
|
421
|
-
return
|
|
412
|
+
return b(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"));
|
|
422
413
|
}
|
|
423
414
|
}
|
|
424
|
-
function
|
|
415
|
+
function At() {
|
|
425
416
|
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
|
|
426
417
|
return !1;
|
|
427
418
|
class e extends HTMLElement {
|
|
@@ -445,22 +436,22 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
445
436
|
"reportValidity"
|
|
446
437
|
].every((i) => i in a.internals);
|
|
447
438
|
}
|
|
448
|
-
let
|
|
449
|
-
function
|
|
450
|
-
|
|
439
|
+
let lt = !1, ct = !1;
|
|
440
|
+
function J(e) {
|
|
441
|
+
ct || (ct = !0, window.CustomStateSet = G, e && (HTMLElement.prototype.attachInternals = function(...t) {
|
|
451
442
|
const a = e.call(this, t);
|
|
452
|
-
return a.states = new
|
|
443
|
+
return a.states = new G(this), a;
|
|
453
444
|
}));
|
|
454
445
|
}
|
|
455
|
-
function
|
|
456
|
-
if (!
|
|
457
|
-
if (
|
|
446
|
+
function dt(e = !0) {
|
|
447
|
+
if (!lt) {
|
|
448
|
+
if (lt = !0, typeof window < "u" && (window.ElementInternals = st), typeof CustomElementRegistry < "u") {
|
|
458
449
|
const t = CustomElementRegistry.prototype.define;
|
|
459
450
|
CustomElementRegistry.prototype.define = function(a, i, n) {
|
|
460
451
|
if (i.formAssociated) {
|
|
461
452
|
const o = i.prototype.connectedCallback;
|
|
462
453
|
i.prototype.connectedCallback = function() {
|
|
463
|
-
F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") &&
|
|
454
|
+
F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") && K(this, !0)), o != null && o.apply(this), nt(this);
|
|
464
455
|
};
|
|
465
456
|
}
|
|
466
457
|
t.call(this, a, i, n);
|
|
@@ -470,42 +461,40 @@ const Rt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
470
461
|
if (this.tagName) {
|
|
471
462
|
if (this.tagName.indexOf("-") === -1)
|
|
472
463
|
throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
|
|
473
|
-
} else
|
|
474
|
-
return {};
|
|
464
|
+
} else return {};
|
|
475
465
|
if (c.has(this))
|
|
476
466
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
477
|
-
return new
|
|
467
|
+
return new st(this);
|
|
478
468
|
}), typeof Element < "u") {
|
|
479
469
|
let t = function(...i) {
|
|
480
470
|
const n = a.apply(this, i);
|
|
481
471
|
if (N.set(this, n), z()) {
|
|
482
|
-
const o = new MutationObserver(
|
|
483
|
-
window.ShadyDOM ? o.observe(this,
|
|
472
|
+
const o = new MutationObserver(B);
|
|
473
|
+
window.ShadyDOM ? o.observe(this, U) : o.observe(n, U), T.set(this, o);
|
|
484
474
|
}
|
|
485
475
|
return n;
|
|
486
476
|
};
|
|
487
477
|
const a = Element.prototype.attachShadow;
|
|
488
478
|
Element.prototype.attachShadow = t;
|
|
489
479
|
}
|
|
490
|
-
z() && typeof document < "u" && new MutationObserver(
|
|
480
|
+
z() && typeof document < "u" && new MutationObserver(B).observe(document.documentElement, U), typeof HTMLFormElement < "u" && Ft(), (e || typeof window < "u" && !window.CustomStateSet) && J();
|
|
491
481
|
}
|
|
492
482
|
}
|
|
493
|
-
return !!customElements.polyfillWrapFlushCallback || (
|
|
483
|
+
return !!customElements.polyfillWrapFlushCallback || (At() ? typeof window < "u" && !window.CustomStateSet && J(HTMLElement.prototype.attachInternals) : dt(!1)), M.forceCustomStateSetPolyfill = J, M.forceElementInternalsPolyfill = dt, Object.defineProperty(M, "__esModule", { value: !0 }), M;
|
|
494
484
|
})({});
|
|
495
485
|
})();
|
|
496
|
-
var
|
|
497
|
-
for (var c =
|
|
498
|
-
(
|
|
499
|
-
return
|
|
486
|
+
var zt = Object.defineProperty, d = (M, s, h, E) => {
|
|
487
|
+
for (var c = void 0, I = M.length - 1, k; I >= 0; I--)
|
|
488
|
+
(k = M[I]) && (c = k(s, h, c) || c);
|
|
489
|
+
return c && zt(s, h, c), c;
|
|
500
490
|
};
|
|
501
|
-
const
|
|
502
|
-
class l extends Lt($t(pt)) {
|
|
491
|
+
const Y = "pie-text-input", X = "assistive-text", W = class W extends $t(Ot(ut)) {
|
|
503
492
|
constructor() {
|
|
504
|
-
super(...arguments), this.type =
|
|
493
|
+
super(...arguments), this.type = x.type, this.value = x.value, this.disabled = x.disabled, this.readonly = x.readonly, this.status = x.status, this.size = x.size, this.required = !1, this.handleInput = (s) => {
|
|
505
494
|
this.value = s.target.value, this._internals.setFormValue(this.value);
|
|
506
495
|
}, this.handleChange = (s) => {
|
|
507
|
-
const
|
|
508
|
-
this.dispatchEvent(
|
|
496
|
+
const h = Rt(s);
|
|
497
|
+
this.dispatchEvent(h);
|
|
509
498
|
};
|
|
510
499
|
}
|
|
511
500
|
/**
|
|
@@ -529,7 +518,7 @@ class l extends Lt($t(pt)) {
|
|
|
529
518
|
* Resets the value to the default value.
|
|
530
519
|
*/
|
|
531
520
|
formResetCallback() {
|
|
532
|
-
this.value = this.defaultValue ??
|
|
521
|
+
this.value = this.defaultValue ?? x.value, this.input.value = this.value, this._internals.setFormValue(this.value);
|
|
533
522
|
}
|
|
534
523
|
firstUpdated() {
|
|
535
524
|
this._internals.setFormValue(this.value);
|
|
@@ -540,34 +529,34 @@ class l extends Lt($t(pt)) {
|
|
|
540
529
|
render() {
|
|
541
530
|
const {
|
|
542
531
|
assistiveText: s,
|
|
543
|
-
autocomplete:
|
|
544
|
-
autoFocus:
|
|
532
|
+
autocomplete: h,
|
|
533
|
+
autoFocus: E,
|
|
545
534
|
disabled: c,
|
|
546
|
-
inputmode:
|
|
547
|
-
maxlength:
|
|
548
|
-
minlength:
|
|
549
|
-
min:
|
|
535
|
+
inputmode: I,
|
|
536
|
+
maxlength: k,
|
|
537
|
+
minlength: T,
|
|
538
|
+
min: g,
|
|
550
539
|
max: V,
|
|
551
|
-
name:
|
|
540
|
+
name: S,
|
|
552
541
|
pattern: N,
|
|
553
542
|
step: L,
|
|
554
543
|
placeholder: $,
|
|
555
544
|
readonly: F,
|
|
556
|
-
status:
|
|
557
|
-
type:
|
|
558
|
-
value:
|
|
545
|
+
status: v,
|
|
546
|
+
type: C,
|
|
547
|
+
value: q,
|
|
559
548
|
size: O,
|
|
560
|
-
required:
|
|
561
|
-
} = this,
|
|
549
|
+
required: R
|
|
550
|
+
} = this, P = {
|
|
562
551
|
"c-textInput": !0,
|
|
563
552
|
[`c-textInput--${O}`]: !0,
|
|
564
|
-
[`c-textInput--${
|
|
553
|
+
[`c-textInput--${v}`]: !0,
|
|
565
554
|
"c-textInput--disabled": c,
|
|
566
555
|
"c-textInput--readonly": F
|
|
567
556
|
};
|
|
568
|
-
return
|
|
557
|
+
return pt`
|
|
569
558
|
<div
|
|
570
|
-
class="${
|
|
559
|
+
class="${Lt(P)}"
|
|
571
560
|
data-test-id="pie-text-input-shell">
|
|
572
561
|
<!-- The reason for separate slots for icons and text is that we cannot programmatically be aware of the
|
|
573
562
|
HTML used inside of the slot without breaking SSR in consuming applications (icons need to use different colours than text content)
|
|
@@ -576,25 +565,25 @@ class l extends Lt($t(pt)) {
|
|
|
576
565
|
<slot name="leadingIcon"></slot>
|
|
577
566
|
<slot name="leadingText"></slot>
|
|
578
567
|
<input
|
|
579
|
-
type=${
|
|
580
|
-
.value=${
|
|
581
|
-
name=${
|
|
582
|
-
?disabled=${
|
|
583
|
-
pattern=${
|
|
584
|
-
step=${
|
|
585
|
-
minlength=${
|
|
586
|
-
maxlength=${
|
|
587
|
-
min=${
|
|
588
|
-
max=${
|
|
589
|
-
autocomplete=${h
|
|
590
|
-
?autofocus=${
|
|
591
|
-
inputmode=${
|
|
592
|
-
placeholder=${
|
|
568
|
+
type=${f(C)}
|
|
569
|
+
.value=${mt(q)}
|
|
570
|
+
name=${f(S)}
|
|
571
|
+
?disabled=${mt(c)}
|
|
572
|
+
pattern=${f(N)}
|
|
573
|
+
step=${f(L)}
|
|
574
|
+
minlength=${f(T)}
|
|
575
|
+
maxlength=${f(k)}
|
|
576
|
+
min=${f(g)}
|
|
577
|
+
max=${f(V)}
|
|
578
|
+
autocomplete=${f(h)}
|
|
579
|
+
?autofocus=${E}
|
|
580
|
+
inputmode=${f(I)}
|
|
581
|
+
placeholder=${f($)}
|
|
593
582
|
?readonly=${F}
|
|
594
|
-
?required=${
|
|
595
|
-
aria-describedby=${
|
|
596
|
-
aria-invalid=${
|
|
597
|
-
aria-errormessage="${
|
|
583
|
+
?required=${R}
|
|
584
|
+
aria-describedby=${f(s ? X : void 0)}
|
|
585
|
+
aria-invalid=${v === "error" ? "true" : "false"}
|
|
586
|
+
aria-errormessage="${f(v === "error" ? X : void 0)}"
|
|
598
587
|
@input=${this.handleInput}
|
|
599
588
|
@change=${this.handleChange}
|
|
600
589
|
data-test-id="pie-text-input">
|
|
@@ -605,92 +594,92 @@ class l extends Lt($t(pt)) {
|
|
|
605
594
|
<slot name="trailingIcon"></slot>
|
|
606
595
|
<slot name="trailingText"></slot>
|
|
607
596
|
</div>
|
|
608
|
-
${s ?
|
|
597
|
+
${s ? pt`
|
|
609
598
|
<pie-assistive-text
|
|
610
|
-
id="${
|
|
611
|
-
variant=${
|
|
599
|
+
id="${X}"
|
|
600
|
+
variant=${f(v)}
|
|
612
601
|
data-test-id="pie-text-input-assistive-text">
|
|
613
602
|
${s}
|
|
614
603
|
</pie-assistive-text>
|
|
615
|
-
` :
|
|
604
|
+
` : Vt}`;
|
|
616
605
|
}
|
|
617
|
-
}
|
|
618
|
-
|
|
619
|
-
l
|
|
606
|
+
};
|
|
607
|
+
W.shadowRootOptions = { ...ut.shadowRootOptions, delegatesFocus: !0 }, W.styles = Nt(Ht);
|
|
608
|
+
let l = W;
|
|
620
609
|
d([
|
|
621
610
|
u({ type: String, reflect: !0 }),
|
|
622
|
-
ht(
|
|
623
|
-
], l.prototype, "type"
|
|
611
|
+
ht(Y, Dt, x.type)
|
|
612
|
+
], l.prototype, "type");
|
|
624
613
|
d([
|
|
625
614
|
u({ type: String })
|
|
626
|
-
], l.prototype, "value"
|
|
615
|
+
], l.prototype, "value");
|
|
627
616
|
d([
|
|
628
617
|
u({ type: String })
|
|
629
|
-
], l.prototype, "name"
|
|
618
|
+
], l.prototype, "name");
|
|
630
619
|
d([
|
|
631
620
|
u({ type: Boolean, reflect: !0 })
|
|
632
|
-
], l.prototype, "disabled"
|
|
621
|
+
], l.prototype, "disabled");
|
|
633
622
|
d([
|
|
634
623
|
u({ type: String })
|
|
635
|
-
], l.prototype, "pattern"
|
|
624
|
+
], l.prototype, "pattern");
|
|
636
625
|
d([
|
|
637
626
|
u({ type: Number })
|
|
638
|
-
], l.prototype, "minlength"
|
|
627
|
+
], l.prototype, "minlength");
|
|
639
628
|
d([
|
|
640
629
|
u({ type: Number })
|
|
641
|
-
], l.prototype, "maxlength"
|
|
630
|
+
], l.prototype, "maxlength");
|
|
642
631
|
d([
|
|
643
632
|
u({ type: String })
|
|
644
|
-
], l.prototype, "autocomplete"
|
|
633
|
+
], l.prototype, "autocomplete");
|
|
645
634
|
d([
|
|
646
635
|
u({ type: String })
|
|
647
|
-
], l.prototype, "placeholder"
|
|
636
|
+
], l.prototype, "placeholder");
|
|
648
637
|
d([
|
|
649
638
|
u({ type: Boolean })
|
|
650
|
-
], l.prototype, "autoFocus"
|
|
639
|
+
], l.prototype, "autoFocus");
|
|
651
640
|
d([
|
|
652
641
|
u({ type: String })
|
|
653
|
-
], l.prototype, "inputmode"
|
|
642
|
+
], l.prototype, "inputmode");
|
|
654
643
|
d([
|
|
655
644
|
u({ type: Boolean })
|
|
656
|
-
], l.prototype, "readonly"
|
|
645
|
+
], l.prototype, "readonly");
|
|
657
646
|
d([
|
|
658
647
|
u({ type: String })
|
|
659
|
-
], l.prototype, "defaultValue"
|
|
648
|
+
], l.prototype, "defaultValue");
|
|
660
649
|
d([
|
|
661
650
|
u({ type: String })
|
|
662
|
-
], l.prototype, "assistiveText"
|
|
651
|
+
], l.prototype, "assistiveText");
|
|
663
652
|
d([
|
|
664
653
|
u({ type: String }),
|
|
665
|
-
ht(
|
|
666
|
-
], l.prototype, "status"
|
|
654
|
+
ht(Y, _t, x.status)
|
|
655
|
+
], l.prototype, "status");
|
|
667
656
|
d([
|
|
668
657
|
u({ type: Number })
|
|
669
|
-
], l.prototype, "step"
|
|
658
|
+
], l.prototype, "step");
|
|
670
659
|
d([
|
|
671
660
|
u({ type: Number })
|
|
672
|
-
], l.prototype, "min"
|
|
661
|
+
], l.prototype, "min");
|
|
673
662
|
d([
|
|
674
663
|
u({ type: Number })
|
|
675
|
-
], l.prototype, "max"
|
|
664
|
+
], l.prototype, "max");
|
|
676
665
|
d([
|
|
677
666
|
u({ type: String })
|
|
678
|
-
], l.prototype, "size"
|
|
667
|
+
], l.prototype, "size");
|
|
679
668
|
d([
|
|
680
669
|
u({ type: Boolean })
|
|
681
|
-
], l.prototype, "required"
|
|
670
|
+
], l.prototype, "required");
|
|
682
671
|
d([
|
|
683
|
-
|
|
684
|
-
], l.prototype, "input"
|
|
672
|
+
ft("input")
|
|
673
|
+
], l.prototype, "input");
|
|
685
674
|
d([
|
|
686
|
-
|
|
687
|
-
], l.prototype, "focusTarget"
|
|
688
|
-
Pt(
|
|
675
|
+
ft("input")
|
|
676
|
+
], l.prototype, "focusTarget");
|
|
677
|
+
Pt(Y, l);
|
|
689
678
|
export {
|
|
690
679
|
l as PieTextInput,
|
|
691
|
-
|
|
680
|
+
x as defaultProps,
|
|
692
681
|
Qt as inputModes,
|
|
693
682
|
Xt as sizes,
|
|
694
|
-
|
|
695
|
-
|
|
683
|
+
_t as statusTypes,
|
|
684
|
+
Dt as types
|
|
696
685
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
import * as t from "react";
|
|
2
2
|
import { createComponent as e } from "@lit/react";
|
|
3
3
|
import { PieTextInput as p } from "./index.js";
|
|
4
|
-
import { defaultProps as
|
|
5
|
-
|
|
6
|
-
import "lit/decorators.js";
|
|
7
|
-
import "lit/directives/if-defined.js";
|
|
8
|
-
import "lit/directives/class-map.js";
|
|
9
|
-
import "lit/directives/live.js";
|
|
10
|
-
import "@justeattakeaway/pie-webc-core";
|
|
11
|
-
import "@justeattakeaway/pie-assistive-text";
|
|
12
|
-
const o = e({
|
|
4
|
+
import { defaultProps as m, inputModes as u, sizes as x, statusTypes as c, types as I } from "./index.js";
|
|
5
|
+
const n = e({
|
|
13
6
|
displayName: "PieTextInput",
|
|
14
7
|
elementClass: p,
|
|
15
8
|
react: t,
|
|
@@ -20,12 +13,12 @@ const o = e({
|
|
|
20
13
|
onChange: "change"
|
|
21
14
|
// when the input value is changed.
|
|
22
15
|
}
|
|
23
|
-
}),
|
|
16
|
+
}), a = n;
|
|
24
17
|
export {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
18
|
+
a as PieTextInput,
|
|
19
|
+
m as defaultProps,
|
|
20
|
+
u as inputModes,
|
|
21
|
+
x as sizes,
|
|
22
|
+
c as statusTypes,
|
|
23
|
+
I as types
|
|
31
24
|
};
|
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.24.
|
|
4
|
+
"version": "0.24.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -37,14 +37,14 @@
|
|
|
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": "0.25.
|
|
42
|
-
"@justeattakeaway/pie-wrapper-react": "0.14.
|
|
40
|
+
"@justeattakeaway/pie-css": "0.13.1",
|
|
41
|
+
"@justeattakeaway/pie-icons-webc": "0.25.3",
|
|
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.7.
|
|
47
|
-
"@justeattakeaway/pie-webc-core": "0.24.
|
|
46
|
+
"@justeattakeaway/pie-assistive-text": "0.7.3",
|
|
47
|
+
"@justeattakeaway/pie-webc-core": "0.24.2",
|
|
48
48
|
"element-internals-polyfill": "1.3.11"
|
|
49
49
|
},
|
|
50
50
|
"volta": {
|
package/src/react.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { createComponent, EventName } from '@lit/react';
|
|
2
|
+
import { createComponent, type EventName } from '@lit/react';
|
|
3
3
|
import { PieTextInput as PieTextInputLit } from './index';
|
|
4
|
-
import { TextInputProps } from './defs';
|
|
4
|
+
import { type TextInputProps } from './defs';
|
|
5
5
|
|
|
6
6
|
export * from './defs';
|
|
7
7
|
|