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