@justeattakeaway/pie-text-input 0.26.2 → 0.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +197 -184
- package/dist/react.d.ts +2 -2
- package/package.json +7 -6
- package/src/index.ts +2 -1
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';
|
|
@@ -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
|
|
1
|
+
import { LitElement as ft, html as pt, nothing as Nt, unsafeCSS as Lt } from "lit";
|
|
2
2
|
import { property as u, query as ht } from "lit/decorators.js";
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import { classMap as
|
|
5
|
-
import { live as
|
|
6
|
-
import { FormControlMixin as
|
|
3
|
+
import { ifDefined as h } from "lit/directives/if-defined.js";
|
|
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 = (y, l, f, x) => {
|
|
9
|
+
for (var s = void 0, g = y.length - 1, E; g >= 0; g--)
|
|
10
|
+
(E = y[g]) && (s = E(l, f, s) || s);
|
|
11
|
+
return s && Ht(l, f, s), s;
|
|
12
|
+
};
|
|
13
|
+
class gt extends ft {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments), this.v = "0.27.0";
|
|
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(y) {
|
|
31
|
+
const l = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), v = /* @__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(), I = /* @__PURE__ */ new WeakMap(), C = {
|
|
19
32
|
ariaAtomic: "aria-atomic",
|
|
20
33
|
ariaAutoComplete: "aria-autocomplete",
|
|
21
34
|
ariaBusy: "aria-busy",
|
|
@@ -74,24 +87,24 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
74
87
|
}
|
|
75
88
|
};
|
|
76
89
|
function O(e) {
|
|
77
|
-
const t =
|
|
90
|
+
const t = s.get(e), { form: a } = t;
|
|
78
91
|
nt(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
99
|
let n = a.nextNode();
|
|
87
100
|
const i = !t || e.disabled;
|
|
88
101
|
for (; n; )
|
|
89
|
-
n.formDisabledCallback && i &&
|
|
90
|
-
}, P = { attributes: !0, attributeFilter: ["disabled", "name"] },
|
|
102
|
+
n.formDisabledCallback && i && K(n, e.disabled), n = 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 n =
|
|
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 n = s.get(a), i = V.get(a);
|
|
95
108
|
n.setFormValue(i);
|
|
96
109
|
}
|
|
97
110
|
}
|
|
@@ -101,130 +114,130 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
101
114
|
const { addedNodes: a, removedNodes: n } = t, i = Array.from(a), o = Array.from(n);
|
|
102
115
|
i.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 = v.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), T.has(r) && T.get(r).disconnect();
|
|
128
141
|
});
|
|
129
142
|
});
|
|
130
143
|
}
|
|
131
|
-
function
|
|
144
|
+
function yt(e) {
|
|
132
145
|
e.forEach((t) => {
|
|
133
146
|
const { removedNodes: a } = t;
|
|
134
147
|
a.forEach((n) => {
|
|
135
148
|
const i = $.get(t.target);
|
|
136
|
-
|
|
149
|
+
s.has(n) && ot(n), i.disconnect();
|
|
137
150
|
});
|
|
138
151
|
});
|
|
139
152
|
}
|
|
140
|
-
const
|
|
153
|
+
const vt = (e) => {
|
|
141
154
|
var t, a;
|
|
142
|
-
const n = new MutationObserver(
|
|
155
|
+
const n = new MutationObserver(yt);
|
|
143
156
|
!((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (a = n.observe) === null || a === void 0 || a.call(n, e, { childList: !0 }), $.set(e, n);
|
|
144
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
176
|
Array.from(t).forEach((n) => n.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 =
|
|
180
|
+
}, H = (e) => {
|
|
181
|
+
const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), a = v.get(e) || [], n = Array.from(a).filter((o) => o.isConnected).map((o) => s.get(o).validity.valid), i = [...t, ...n].includes(!1);
|
|
169
182
|
e.toggleAttribute("internals-invalid", i), e.toggleAttribute("internals-valid", !i);
|
|
170
|
-
}, bt = (e) => {
|
|
171
|
-
D(_(e.target));
|
|
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 i =
|
|
191
|
+
const i = v.get(e);
|
|
179
192
|
if (e.noValidate)
|
|
180
193
|
return;
|
|
181
|
-
i.size && Array.from(i).reverse().map((m) =>
|
|
194
|
+
i.size && Array.from(i).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 = v.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
|
}, nt = (e, t, a) => {
|
|
190
203
|
if (t) {
|
|
191
|
-
const n =
|
|
204
|
+
const n = v.get(t);
|
|
192
205
|
if (n)
|
|
193
206
|
n.add(e);
|
|
194
207
|
else {
|
|
195
208
|
const i = /* @__PURE__ */ new Set();
|
|
196
|
-
i.add(e),
|
|
209
|
+
i.add(e), v.set(t, i), 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
221
|
}, it = (e, t, a) => {
|
|
209
|
-
const n =
|
|
222
|
+
const n = v.get(e);
|
|
210
223
|
return n && n.size && n.forEach((i) => {
|
|
211
|
-
|
|
224
|
+
s.get(i)[a]() || (t = !1);
|
|
212
225
|
}), t;
|
|
213
226
|
}, ot = (e) => {
|
|
214
227
|
if (e.constructor.formAssociated) {
|
|
215
|
-
const t =
|
|
228
|
+
const t = s.get(e), { labels: a, form: n } = t;
|
|
216
229
|
at(e, a), nt(e, n, 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((n) => e[n] = t[n]), 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);
|
|
@@ -267,14 +280,14 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
267
280
|
if (typeof t == "function" ? e !== t || !n : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
268
281
|
return a === "m" ? n : a === "a" ? n.call(e) : n ? n.value : t.get(e);
|
|
269
282
|
}
|
|
270
|
-
function
|
|
283
|
+
function Tt(e, t, a, n, i) {
|
|
271
284
|
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
285
|
return t.set(e, a), a;
|
|
273
286
|
}
|
|
274
287
|
var A;
|
|
275
|
-
class
|
|
288
|
+
class Ft {
|
|
276
289
|
constructor(t) {
|
|
277
|
-
A.set(this, void 0),
|
|
290
|
+
A.set(this, void 0), Tt(this, A, t);
|
|
278
291
|
for (let a = 0; a < t.length; a++) {
|
|
279
292
|
let n = t[a];
|
|
280
293
|
this[a] = n, n.hasAttribute("name") && (this[n.getAttribute("name")] = n);
|
|
@@ -294,7 +307,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
294
307
|
return this[t] == null ? null : this[t];
|
|
295
308
|
}
|
|
296
309
|
}
|
|
297
|
-
function
|
|
310
|
+
function At() {
|
|
298
311
|
const e = HTMLFormElement.prototype.checkValidity;
|
|
299
312
|
HTMLFormElement.prototype.checkValidity = a;
|
|
300
313
|
const t = HTMLFormElement.prototype.reportValidity;
|
|
@@ -310,11 +323,11 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
310
323
|
const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
311
324
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
312
325
|
get(...o) {
|
|
313
|
-
const r = i.call(this, ...o), m = Array.from(
|
|
326
|
+
const r = i.call(this, ...o), m = Array.from(v.get(this) || []);
|
|
314
327
|
if (m.length === 0)
|
|
315
328
|
return r;
|
|
316
|
-
const p = Array.from(r).concat(m).sort((
|
|
317
|
-
return new
|
|
329
|
+
const p = Array.from(r).concat(m).sort((k, b) => k.compareDocumentPosition ? k.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
|
|
330
|
+
return new Ft(p);
|
|
318
331
|
}
|
|
319
332
|
});
|
|
320
333
|
}
|
|
@@ -325,14 +338,14 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
325
338
|
constructor(t) {
|
|
326
339
|
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
327
340
|
throw new TypeError("Illegal constructor");
|
|
328
|
-
const a = t.getRootNode(), n = new
|
|
329
|
-
this.states = new J(t),
|
|
341
|
+
const a = t.getRootNode(), n = new Mt();
|
|
342
|
+
this.states = new J(t), l.set(this, t), f.set(this, n), s.set(t, this), B(t, this), bt(t, this), Object.seal(this), a instanceof DocumentFragment && vt(a);
|
|
330
343
|
}
|
|
331
344
|
checkValidity() {
|
|
332
|
-
const t =
|
|
333
|
-
if (
|
|
345
|
+
const t = l.get(this);
|
|
346
|
+
if (M(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
334
347
|
return !0;
|
|
335
|
-
const a =
|
|
348
|
+
const a = f.get(this);
|
|
336
349
|
if (!a.valid) {
|
|
337
350
|
const n = new Event("invalid", {
|
|
338
351
|
bubbles: !1,
|
|
@@ -344,20 +357,20 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
344
357
|
return a.valid;
|
|
345
358
|
}
|
|
346
359
|
get form() {
|
|
347
|
-
const t =
|
|
348
|
-
|
|
360
|
+
const t = l.get(this);
|
|
361
|
+
M(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
349
362
|
let a;
|
|
350
|
-
return t.constructor.formAssociated === !0 && (a =
|
|
363
|
+
return t.constructor.formAssociated === !0 && (a = D(t)), a;
|
|
351
364
|
}
|
|
352
365
|
get labels() {
|
|
353
|
-
const t =
|
|
354
|
-
|
|
366
|
+
const t = l.get(this);
|
|
367
|
+
M(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
355
368
|
const a = t.getAttribute("id"), n = t.getRootNode();
|
|
356
369
|
return n && a ? n.querySelectorAll(`[for="${a}"]`) : [];
|
|
357
370
|
}
|
|
358
371
|
reportValidity() {
|
|
359
|
-
const t =
|
|
360
|
-
if (
|
|
372
|
+
const t = l.get(this);
|
|
373
|
+
if (M(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
361
374
|
return !0;
|
|
362
375
|
const a = this.checkValidity(), n = L.get(this);
|
|
363
376
|
if (n && !t.constructor.formAssociated)
|
|
@@ -365,8 +378,8 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
365
378
|
return !a && n && (t.focus(), n.focus()), a;
|
|
366
379
|
}
|
|
367
380
|
setFormValue(t) {
|
|
368
|
-
const a =
|
|
369
|
-
if (
|
|
381
|
+
const a = l.get(this);
|
|
382
|
+
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
383
|
if (a.getAttribute("name")) {
|
|
371
384
|
const n = et(a, this);
|
|
372
385
|
n.value = t;
|
|
@@ -380,39 +393,39 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
380
393
|
V.set(a, t);
|
|
381
394
|
}
|
|
382
395
|
setValidity(t, a, n) {
|
|
383
|
-
const i =
|
|
384
|
-
if (
|
|
396
|
+
const i = l.get(this);
|
|
397
|
+
if (M(i, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
|
|
385
398
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
386
399
|
L.set(this, n);
|
|
387
|
-
const o =
|
|
388
|
-
for (const
|
|
389
|
-
r[
|
|
390
|
-
Object.keys(r).length === 0 &&
|
|
400
|
+
const o = f.get(this), r = {};
|
|
401
|
+
for (const k in t)
|
|
402
|
+
r[k] = t[k];
|
|
403
|
+
Object.keys(r).length === 0 && kt(o);
|
|
391
404
|
const m = Object.assign(Object.assign({}, o), r);
|
|
392
405
|
delete m.valid;
|
|
393
|
-
const { valid: p } =
|
|
406
|
+
const { valid: p } = St(o, m, this.form);
|
|
394
407
|
if (!p && !a)
|
|
395
408
|
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
|
-
|
|
409
|
+
g.set(this, p ? "" : a), i.isConnected ? (i.toggleAttribute("internals-invalid", !p), i.toggleAttribute("internals-valid", p), i.setAttribute("aria-invalid", `${!p}`)) : I.set(i, this);
|
|
397
410
|
}
|
|
398
411
|
get shadowRoot() {
|
|
399
|
-
const t =
|
|
412
|
+
const t = l.get(this), a = N.get(t);
|
|
400
413
|
return a || null;
|
|
401
414
|
}
|
|
402
415
|
get validationMessage() {
|
|
403
|
-
const t =
|
|
404
|
-
return
|
|
416
|
+
const t = l.get(this);
|
|
417
|
+
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
418
|
}
|
|
406
419
|
get validity() {
|
|
407
|
-
const t =
|
|
408
|
-
return
|
|
420
|
+
const t = l.get(this);
|
|
421
|
+
return M(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), f.get(this);
|
|
409
422
|
}
|
|
410
423
|
get willValidate() {
|
|
411
|
-
const t =
|
|
412
|
-
return
|
|
424
|
+
const t = l.get(this);
|
|
425
|
+
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
426
|
}
|
|
414
427
|
}
|
|
415
|
-
function
|
|
428
|
+
function Vt() {
|
|
416
429
|
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
|
|
417
430
|
return !1;
|
|
418
431
|
class e extends HTMLElement {
|
|
@@ -451,7 +464,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
451
464
|
if (n.formAssociated) {
|
|
452
465
|
const o = n.prototype.connectedCallback;
|
|
453
466
|
n.prototype.connectedCallback = function() {
|
|
454
|
-
F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") &&
|
|
467
|
+
F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") && K(this, !0)), o != null && o.apply(this), ot(this);
|
|
455
468
|
};
|
|
456
469
|
}
|
|
457
470
|
t.call(this, a, n, i);
|
|
@@ -462,7 +475,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
462
475
|
if (this.tagName.indexOf("-") === -1)
|
|
463
476
|
throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
|
|
464
477
|
} else return {};
|
|
465
|
-
if (
|
|
478
|
+
if (s.has(this))
|
|
466
479
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
467
480
|
return new lt(this);
|
|
468
481
|
}), typeof Element < "u") {
|
|
@@ -470,31 +483,31 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
470
483
|
const i = a.apply(this, n);
|
|
471
484
|
if (N.set(this, i), z()) {
|
|
472
485
|
const o = new MutationObserver(U);
|
|
473
|
-
window.ShadyDOM ? o.observe(this,
|
|
486
|
+
window.ShadyDOM ? o.observe(this, j) : o.observe(i, j), T.set(this, o);
|
|
474
487
|
}
|
|
475
488
|
return i;
|
|
476
489
|
};
|
|
477
490
|
const a = Element.prototype.attachShadow;
|
|
478
491
|
Element.prototype.attachShadow = t;
|
|
479
492
|
}
|
|
480
|
-
z() && typeof document < "u" && new MutationObserver(U).observe(document.documentElement,
|
|
493
|
+
z() && typeof document < "u" && new MutationObserver(U).observe(document.documentElement, j), typeof HTMLFormElement < "u" && At(), (e || typeof window < "u" && !window.CustomStateSet) && Q();
|
|
481
494
|
}
|
|
482
495
|
}
|
|
483
|
-
return !!customElements.polyfillWrapFlushCallback || (
|
|
496
|
+
return !!customElements.polyfillWrapFlushCallback || (Vt() ? typeof window < "u" && !window.CustomStateSet && Q(HTMLElement.prototype.attachInternals) : ut(!1)), y.forceCustomStateSetPolyfill = Q, y.forceElementInternalsPolyfill = ut, Object.defineProperty(y, "__esModule", { value: !0 }), y;
|
|
484
497
|
})({});
|
|
485
498
|
})();
|
|
486
|
-
var
|
|
487
|
-
for (var
|
|
488
|
-
(
|
|
489
|
-
return
|
|
499
|
+
var Ut = Object.defineProperty, d = (y, l, f, x) => {
|
|
500
|
+
for (var s = void 0, g = y.length - 1, E; g >= 0; g--)
|
|
501
|
+
(E = y[g]) && (s = E(l, f, s) || s);
|
|
502
|
+
return s && Ut(l, f, s), s;
|
|
490
503
|
};
|
|
491
|
-
const q = "pie-text-input", Y = "assistive-text", W = class W extends
|
|
504
|
+
const q = "pie-text-input", Y = "assistive-text", W = class W extends Ot(Rt(gt)) {
|
|
492
505
|
constructor() {
|
|
493
|
-
super(...arguments), this.type =
|
|
494
|
-
this.value =
|
|
495
|
-
}, this.handleChange = (
|
|
496
|
-
const
|
|
497
|
-
this.dispatchEvent(
|
|
506
|
+
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) => {
|
|
507
|
+
this.value = l.target.value, this._internals.setFormValue(this.value);
|
|
508
|
+
}, this.handleChange = (l) => {
|
|
509
|
+
const f = Pt(l);
|
|
510
|
+
this.dispatchEvent(f);
|
|
498
511
|
};
|
|
499
512
|
}
|
|
500
513
|
/**
|
|
@@ -510,39 +523,39 @@ const q = "pie-text-input", Y = "assistive-text", W = class W extends $t(Ot(pt))
|
|
|
510
523
|
* or because the disabled state changed on a <fieldset> that's an ancestor of this element.
|
|
511
524
|
* @param disabled - The latest disabled state of the input.
|
|
512
525
|
*/
|
|
513
|
-
formDisabledCallback(
|
|
514
|
-
this.disabled =
|
|
526
|
+
formDisabledCallback(l) {
|
|
527
|
+
this.disabled = l;
|
|
515
528
|
}
|
|
516
529
|
/**
|
|
517
530
|
* Called when the form that owns this component is reset.
|
|
518
531
|
* Resets the value to the default value.
|
|
519
532
|
*/
|
|
520
533
|
formResetCallback() {
|
|
521
|
-
this.value = this.defaultValue ??
|
|
534
|
+
this.value = this.defaultValue ?? w.value, this.input.value = this.value, this._internals.setFormValue(this.value);
|
|
522
535
|
}
|
|
523
536
|
firstUpdated() {
|
|
524
537
|
this._internals.setFormValue(this.value);
|
|
525
538
|
}
|
|
526
|
-
updated(
|
|
527
|
-
|
|
539
|
+
updated(l) {
|
|
540
|
+
l.has("value") && this._internals.setFormValue(this.value);
|
|
528
541
|
}
|
|
529
542
|
render() {
|
|
530
543
|
const {
|
|
531
|
-
assistiveText:
|
|
532
|
-
autocomplete:
|
|
533
|
-
autoFocus:
|
|
534
|
-
disabled:
|
|
535
|
-
inputmode:
|
|
536
|
-
maxlength:
|
|
544
|
+
assistiveText: l,
|
|
545
|
+
autocomplete: f,
|
|
546
|
+
autoFocus: x,
|
|
547
|
+
disabled: s,
|
|
548
|
+
inputmode: g,
|
|
549
|
+
maxlength: E,
|
|
537
550
|
minlength: T,
|
|
538
|
-
min:
|
|
551
|
+
min: v,
|
|
539
552
|
max: V,
|
|
540
553
|
name: S,
|
|
541
554
|
pattern: N,
|
|
542
555
|
step: L,
|
|
543
556
|
placeholder: $,
|
|
544
557
|
readonly: F,
|
|
545
|
-
status:
|
|
558
|
+
status: I,
|
|
546
559
|
type: C,
|
|
547
560
|
value: B,
|
|
548
561
|
size: O,
|
|
@@ -550,13 +563,13 @@ const q = "pie-text-input", Y = "assistive-text", W = class W extends $t(Ot(pt))
|
|
|
550
563
|
} = this, P = {
|
|
551
564
|
"c-textInput": !0,
|
|
552
565
|
[`c-textInput--${O}`]: !0,
|
|
553
|
-
[`c-textInput--${
|
|
554
|
-
"is-disabled":
|
|
566
|
+
[`c-textInput--${I}`]: !0,
|
|
567
|
+
"is-disabled": s,
|
|
555
568
|
"c-textInput--readonly": F
|
|
556
569
|
};
|
|
557
|
-
return
|
|
570
|
+
return pt`
|
|
558
571
|
<div
|
|
559
|
-
class="${
|
|
572
|
+
class="${$t(P)}"
|
|
560
573
|
data-test-id="pie-text-input-shell">
|
|
561
574
|
<!-- The reason for separate slots for icons and text is that we cannot programmatically be aware of the
|
|
562
575
|
HTML used inside of the slot without breaking SSR in consuming applications (icons need to use different colours than text content)
|
|
@@ -565,25 +578,25 @@ const q = "pie-text-input", Y = "assistive-text", W = class W extends $t(Ot(pt))
|
|
|
565
578
|
<slot name="leadingIcon"></slot>
|
|
566
579
|
<slot name="leadingText"></slot>
|
|
567
580
|
<input
|
|
568
|
-
type=${
|
|
569
|
-
.value=${
|
|
570
|
-
name=${
|
|
571
|
-
?disabled=${
|
|
572
|
-
pattern=${
|
|
573
|
-
step=${
|
|
574
|
-
minlength=${
|
|
575
|
-
maxlength=${
|
|
576
|
-
min=${
|
|
577
|
-
max=${
|
|
578
|
-
autocomplete=${f
|
|
579
|
-
?autofocus=${
|
|
580
|
-
inputmode=${
|
|
581
|
-
placeholder=${
|
|
581
|
+
type=${h(C)}
|
|
582
|
+
.value=${mt(B)}
|
|
583
|
+
name=${h(S)}
|
|
584
|
+
?disabled=${mt(s)}
|
|
585
|
+
pattern=${h(N)}
|
|
586
|
+
step=${h(L)}
|
|
587
|
+
minlength=${h(T)}
|
|
588
|
+
maxlength=${h(E)}
|
|
589
|
+
min=${h(v)}
|
|
590
|
+
max=${h(V)}
|
|
591
|
+
autocomplete=${h(f)}
|
|
592
|
+
?autofocus=${x}
|
|
593
|
+
inputmode=${h(g)}
|
|
594
|
+
placeholder=${h($)}
|
|
582
595
|
?readonly=${F}
|
|
583
596
|
?required=${R}
|
|
584
|
-
aria-describedby=${
|
|
585
|
-
aria-invalid=${
|
|
586
|
-
aria-errormessage="${
|
|
597
|
+
aria-describedby=${h(l ? Y : void 0)}
|
|
598
|
+
aria-invalid=${I === "error" ? "true" : "false"}
|
|
599
|
+
aria-errormessage="${h(I === "error" ? Y : void 0)}"
|
|
587
600
|
@input=${this.handleInput}
|
|
588
601
|
@change=${this.handleChange}
|
|
589
602
|
data-test-id="pie-text-input">
|
|
@@ -594,93 +607,93 @@ const q = "pie-text-input", Y = "assistive-text", W = class W extends $t(Ot(pt))
|
|
|
594
607
|
<slot name="trailingIcon"></slot>
|
|
595
608
|
<slot name="trailingText"></slot>
|
|
596
609
|
</div>
|
|
597
|
-
${
|
|
610
|
+
${l ? pt`
|
|
598
611
|
<pie-assistive-text
|
|
599
612
|
id="${Y}"
|
|
600
|
-
variant=${
|
|
613
|
+
variant=${h(I)}
|
|
601
614
|
data-test-id="pie-text-input-assistive-text">
|
|
602
|
-
${
|
|
615
|
+
${l}
|
|
603
616
|
</pie-assistive-text>
|
|
604
|
-
` :
|
|
617
|
+
` : Nt}`;
|
|
605
618
|
}
|
|
606
619
|
};
|
|
607
|
-
W.shadowRootOptions = { ...
|
|
608
|
-
let
|
|
620
|
+
W.shadowRootOptions = { ...ft.shadowRootOptions, delegatesFocus: !0 }, W.styles = Lt(zt);
|
|
621
|
+
let c = W;
|
|
609
622
|
d([
|
|
610
623
|
u({ type: String, reflect: !0 }),
|
|
611
|
-
Z(q,
|
|
612
|
-
],
|
|
624
|
+
Z(q, Wt, w.type)
|
|
625
|
+
], c.prototype, "type");
|
|
613
626
|
d([
|
|
614
627
|
u({ type: String })
|
|
615
|
-
],
|
|
628
|
+
], c.prototype, "value");
|
|
616
629
|
d([
|
|
617
630
|
u({ type: String })
|
|
618
|
-
],
|
|
631
|
+
], c.prototype, "name");
|
|
619
632
|
d([
|
|
620
633
|
u({ type: Boolean, reflect: !0 })
|
|
621
|
-
],
|
|
634
|
+
], c.prototype, "disabled");
|
|
622
635
|
d([
|
|
623
636
|
u({ type: String })
|
|
624
|
-
],
|
|
637
|
+
], c.prototype, "pattern");
|
|
625
638
|
d([
|
|
626
639
|
u({ type: Number })
|
|
627
|
-
],
|
|
640
|
+
], c.prototype, "minlength");
|
|
628
641
|
d([
|
|
629
642
|
u({ type: Number })
|
|
630
|
-
],
|
|
643
|
+
], c.prototype, "maxlength");
|
|
631
644
|
d([
|
|
632
645
|
u({ type: String })
|
|
633
|
-
],
|
|
646
|
+
], c.prototype, "autocomplete");
|
|
634
647
|
d([
|
|
635
648
|
u({ type: String })
|
|
636
|
-
],
|
|
649
|
+
], c.prototype, "placeholder");
|
|
637
650
|
d([
|
|
638
651
|
u({ type: Boolean })
|
|
639
|
-
],
|
|
652
|
+
], c.prototype, "autoFocus");
|
|
640
653
|
d([
|
|
641
654
|
u({ type: String })
|
|
642
|
-
],
|
|
655
|
+
], c.prototype, "inputmode");
|
|
643
656
|
d([
|
|
644
657
|
u({ type: Boolean })
|
|
645
|
-
],
|
|
658
|
+
], c.prototype, "readonly");
|
|
646
659
|
d([
|
|
647
660
|
u({ type: String })
|
|
648
|
-
],
|
|
661
|
+
], c.prototype, "defaultValue");
|
|
649
662
|
d([
|
|
650
663
|
u({ type: String })
|
|
651
|
-
],
|
|
664
|
+
], c.prototype, "assistiveText");
|
|
652
665
|
d([
|
|
653
666
|
u({ type: String }),
|
|
654
|
-
Z(q,
|
|
655
|
-
],
|
|
667
|
+
Z(q, qt, w.status)
|
|
668
|
+
], c.prototype, "status");
|
|
656
669
|
d([
|
|
657
670
|
u({ type: Number })
|
|
658
|
-
],
|
|
671
|
+
], c.prototype, "step");
|
|
659
672
|
d([
|
|
660
673
|
u({ type: Number })
|
|
661
|
-
],
|
|
674
|
+
], c.prototype, "min");
|
|
662
675
|
d([
|
|
663
676
|
u({ type: Number })
|
|
664
|
-
],
|
|
677
|
+
], c.prototype, "max");
|
|
665
678
|
d([
|
|
666
679
|
u({ type: String }),
|
|
667
|
-
Z(q,
|
|
668
|
-
],
|
|
680
|
+
Z(q, Bt, w.size)
|
|
681
|
+
], c.prototype, "size");
|
|
669
682
|
d([
|
|
670
683
|
u({ type: Boolean })
|
|
671
|
-
],
|
|
684
|
+
], c.prototype, "required");
|
|
672
685
|
d([
|
|
673
686
|
ht("input")
|
|
674
|
-
],
|
|
687
|
+
], c.prototype, "input");
|
|
675
688
|
d([
|
|
676
689
|
ht("input")
|
|
677
|
-
],
|
|
678
|
-
|
|
690
|
+
], c.prototype, "focusTarget");
|
|
691
|
+
_t(q, c);
|
|
679
692
|
export {
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
693
|
+
c as PieTextInput,
|
|
694
|
+
w as defaultProps,
|
|
695
|
+
te as inputModes,
|
|
696
|
+
Bt as sizes,
|
|
697
|
+
qt as statusTypes,
|
|
698
|
+
Wt as types
|
|
686
699
|
};
|
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';
|
|
@@ -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.0",
|
|
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.0",
|
|
43
|
+
"@justeattakeaway/pie-css": "0.16.0",
|
|
44
|
+
"@justeattakeaway/pie-icons-webc": "1.6.1",
|
|
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.0",
|
|
51
|
+
"@justeattakeaway/pie-webc-core": "0.25.0",
|
|
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 })
|