@justeattakeaway/pie-text-input 0.29.37 → 0.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +69 -70
- package/package.json +6 -6
- package/src/index.ts +8 -9
package/dist/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as u, query as
|
|
1
|
+
import { LitElement as Nt, html as Lt, unsafeCSS as $t } from "lit";
|
|
2
|
+
import { property as u, query as gt } from "lit/decorators.js";
|
|
3
3
|
import { ifDefined as h } from "lit/directives/if-defined.js";
|
|
4
|
-
import { classMap as
|
|
5
|
-
import { live as
|
|
6
|
-
import { FormControlMixin as
|
|
4
|
+
import { classMap as Ot } from "lit/directives/class-map.js";
|
|
5
|
+
import { live as mt } from "lit/directives/live.js";
|
|
6
|
+
import { FormControlMixin as Pt, RtlMixin as Rt, DelegatesFocusMixin as Dt, wrapNativeEvent as Ht, validPropertyValues as Y, safeCustomElement as _t } from "@justeattakeaway/pie-webc-core";
|
|
7
7
|
import "@justeattakeaway/pie-assistive-text";
|
|
8
|
-
const z = class z extends
|
|
8
|
+
const z = class z extends Nt {
|
|
9
9
|
willUpdate() {
|
|
10
10
|
this.getAttribute("v") || this.setAttribute("v", z.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
z.v = "0.
|
|
13
|
+
z.v = "0.30.0";
|
|
14
14
|
let X = z;
|
|
15
|
-
const
|
|
15
|
+
const zt = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInput{--input-padding-block: var(--dt-spacing-c);--input-padding-inline: var(--dt-spacing-d);--input-gap: var(--dt-spacing-d);--input-text-color: var(--dt-color-content-default);--input-text-color-leading-trailing-content: var(--dt-color-content-default);--input-text-color-placeholder: var(--dt-color-content-placeholder);--input-border-color: var(--dt-color-border-form);--input-container-color: var(--dt-color-container-default);--input-radius: var(--dt-radius-rounded-c);--input-font-family: var(--dt-font-body-l-family);--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-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-family:var(--input-font-family);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.is-readonly{--input-container-color: var(--dt-color-container-subtle);--input-border-color: var(--dt-color-border-form)}.c-textInput.is-disabled.is-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"], ae = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], qt = ["default", "success", "error"], Bt = ["small", "medium", "large"], w = {
|
|
16
16
|
type: "text",
|
|
17
17
|
value: "",
|
|
18
18
|
size: "medium",
|
|
@@ -20,9 +20,9 @@ const Wt = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
20
20
|
disabled: !1,
|
|
21
21
|
readonly: !1
|
|
22
22
|
};
|
|
23
|
-
var
|
|
24
|
-
function
|
|
25
|
-
return
|
|
23
|
+
var ft = {}, ht;
|
|
24
|
+
function Ut() {
|
|
25
|
+
return ht || (ht = 1, (function() {
|
|
26
26
|
(function(p) {
|
|
27
27
|
const d = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), C = {
|
|
28
28
|
ariaAtomic: "aria-atomic",
|
|
@@ -96,7 +96,7 @@ function jt() {
|
|
|
96
96
|
const n = !t || e.disabled;
|
|
97
97
|
for (; i; )
|
|
98
98
|
i.formDisabledCallback && n && U(i, e.disabled), i = a.nextNode();
|
|
99
|
-
}, tt = { attributes: !0, attributeFilter: ["disabled", "name"] }, R =
|
|
99
|
+
}, tt = { attributes: !0, attributeFilter: ["disabled", "name"] }, R = _() ? new MutationObserver((e) => {
|
|
100
100
|
for (const t of e) {
|
|
101
101
|
const a = t.target;
|
|
102
102
|
if (t.attributeName === "disabled" && (a.constructor.formAssociated ? U(a, a.hasAttribute("disabled")) : a.localName === "fieldset" && P(a)), t.attributeName === "name" && a.constructor.formAssociated) {
|
|
@@ -137,7 +137,7 @@ function jt() {
|
|
|
137
137
|
});
|
|
138
138
|
});
|
|
139
139
|
}
|
|
140
|
-
function
|
|
140
|
+
function vt(e) {
|
|
141
141
|
e.forEach((t) => {
|
|
142
142
|
const { removedNodes: a } = t;
|
|
143
143
|
a.forEach((i) => {
|
|
@@ -146,12 +146,12 @@ function jt() {
|
|
|
146
146
|
});
|
|
147
147
|
});
|
|
148
148
|
}
|
|
149
|
-
const
|
|
149
|
+
const yt = (e) => {
|
|
150
150
|
var t, a;
|
|
151
|
-
const i = new MutationObserver(
|
|
151
|
+
const i = new MutationObserver(vt);
|
|
152
152
|
!((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (a = i.observe) === null || a === void 0 || a.call(i, e, { childList: !0 }), A.set(e, i);
|
|
153
153
|
};
|
|
154
|
-
|
|
154
|
+
_() && new MutationObserver(q);
|
|
155
155
|
const B = {
|
|
156
156
|
childList: !0,
|
|
157
157
|
subtree: !0
|
|
@@ -164,7 +164,7 @@ function jt() {
|
|
|
164
164
|
}, at = (e, t) => {
|
|
165
165
|
const a = document.createElement("input");
|
|
166
166
|
return a.type = "hidden", a.name = e.getAttribute("name"), e.after(a), g.get(t).push(a), a;
|
|
167
|
-
},
|
|
167
|
+
}, bt = (e, t) => {
|
|
168
168
|
var a;
|
|
169
169
|
g.set(t, []), (a = R.observe) === null || a === void 0 || a.call(R, e, tt);
|
|
170
170
|
}, it = (e, t) => {
|
|
@@ -176,11 +176,11 @@ function jt() {
|
|
|
176
176
|
}, D = (e) => {
|
|
177
177
|
const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), a = y.get(e) || [], i = Array.from(a).filter((o) => o.isConnected).map((o) => l.get(o).validity.valid), n = [...t, ...i].includes(!1);
|
|
178
178
|
e.toggleAttribute("internals-invalid", n), e.toggleAttribute("internals-valid", !n);
|
|
179
|
+
}, wt = (e) => {
|
|
180
|
+
D(H(e.target));
|
|
179
181
|
}, xt = (e) => {
|
|
180
|
-
D(
|
|
182
|
+
D(H(e.target));
|
|
181
183
|
}, Et = (e) => {
|
|
182
|
-
D(_(e.target));
|
|
183
|
-
}, It = (e) => {
|
|
184
184
|
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(",");
|
|
185
185
|
e.addEventListener("click", (a) => {
|
|
186
186
|
if (a.target.closest(t)) {
|
|
@@ -190,7 +190,7 @@ function jt() {
|
|
|
190
190
|
n.size && Array.from(n).reverse().map((f) => l.get(f).reportValidity()).includes(!1) && a.preventDefault();
|
|
191
191
|
}
|
|
192
192
|
});
|
|
193
|
-
},
|
|
193
|
+
}, It = (e) => {
|
|
194
194
|
const t = y.get(e.target);
|
|
195
195
|
t && t.size && t.forEach((a) => {
|
|
196
196
|
a.constructor.formAssociated && a.formResetCallback && a.formResetCallback.apply(a);
|
|
@@ -202,15 +202,15 @@ function jt() {
|
|
|
202
202
|
i.add(e);
|
|
203
203
|
else {
|
|
204
204
|
const n = /* @__PURE__ */ new Set();
|
|
205
|
-
n.add(e), y.set(t, n),
|
|
205
|
+
n.add(e), y.set(t, n), Et(t), t.addEventListener("reset", It), t.addEventListener("input", wt), t.addEventListener("change", xt);
|
|
206
206
|
}
|
|
207
207
|
M.set(t, { ref: e, internals: a }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
|
|
208
208
|
e.formAssociatedCallback.apply(e, [t]);
|
|
209
209
|
}, 0), D(t);
|
|
210
210
|
}
|
|
211
|
-
},
|
|
211
|
+
}, H = (e) => {
|
|
212
212
|
let t = e.parentNode;
|
|
213
|
-
return t && t.tagName !== "FORM" && (t =
|
|
213
|
+
return t && t.tagName !== "FORM" && (t = H(t)), t;
|
|
214
214
|
}, x = (e, t, a = DOMException) => {
|
|
215
215
|
if (!e.constructor.formAssociated)
|
|
216
216
|
throw new a(t);
|
|
@@ -225,15 +225,15 @@ function jt() {
|
|
|
225
225
|
it(e, a), nt(e, i, t);
|
|
226
226
|
}
|
|
227
227
|
};
|
|
228
|
-
function
|
|
228
|
+
function _() {
|
|
229
229
|
return typeof MutationObserver < "u";
|
|
230
230
|
}
|
|
231
|
-
class
|
|
231
|
+
class Mt {
|
|
232
232
|
constructor() {
|
|
233
233
|
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);
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
|
-
const
|
|
236
|
+
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 = Tt(t), Object.keys(t).forEach((i) => e[i] = t[i]), a && D(a), e), Tt = (e) => {
|
|
237
237
|
let t = !0;
|
|
238
238
|
for (let a in e)
|
|
239
239
|
a !== "valid" && e[a] !== !1 && (t = !1);
|
|
@@ -275,14 +275,14 @@ function jt() {
|
|
|
275
275
|
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");
|
|
276
276
|
return a === "m" ? i : a === "a" ? i.call(e) : i ? i.value : t.get(e);
|
|
277
277
|
}
|
|
278
|
-
function
|
|
278
|
+
function Ct(e, t, a, i, n) {
|
|
279
279
|
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");
|
|
280
280
|
return t.set(e, a), a;
|
|
281
281
|
}
|
|
282
282
|
var V;
|
|
283
|
-
class
|
|
283
|
+
class Ft {
|
|
284
284
|
constructor(t) {
|
|
285
|
-
V.set(this, void 0),
|
|
285
|
+
V.set(this, void 0), Ct(this, V, t);
|
|
286
286
|
for (let a = 0; a < t.length; a++) {
|
|
287
287
|
let i = t[a];
|
|
288
288
|
this[a] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
|
|
@@ -302,7 +302,7 @@ function jt() {
|
|
|
302
302
|
return this[t] == null ? null : this[t];
|
|
303
303
|
}
|
|
304
304
|
}
|
|
305
|
-
function
|
|
305
|
+
function At() {
|
|
306
306
|
const e = HTMLFormElement.prototype.checkValidity;
|
|
307
307
|
HTMLFormElement.prototype.checkValidity = a;
|
|
308
308
|
const t = HTMLFormElement.prototype.reportValidity;
|
|
@@ -322,7 +322,7 @@ function jt() {
|
|
|
322
322
|
if (f.length === 0)
|
|
323
323
|
return r;
|
|
324
324
|
const m = Array.from(r).concat(f).sort((E, b) => E.compareDocumentPosition ? E.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
|
|
325
|
-
return new
|
|
325
|
+
return new Ft(m);
|
|
326
326
|
}
|
|
327
327
|
});
|
|
328
328
|
}
|
|
@@ -333,8 +333,8 @@ function jt() {
|
|
|
333
333
|
constructor(t) {
|
|
334
334
|
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
335
335
|
throw new TypeError("Illegal constructor");
|
|
336
|
-
const a = t.getRootNode(), i = new
|
|
337
|
-
this.states = new K(t), d.set(this, t), v.set(this, i), l.set(t, this), W(t, this),
|
|
336
|
+
const a = t.getRootNode(), i = new Mt();
|
|
337
|
+
this.states = new K(t), d.set(this, t), v.set(this, i), l.set(t, this), W(t, this), bt(t, this), Object.seal(this), a instanceof DocumentFragment && yt(a);
|
|
338
338
|
}
|
|
339
339
|
checkValidity() {
|
|
340
340
|
const t = d.get(this);
|
|
@@ -355,7 +355,7 @@ function jt() {
|
|
|
355
355
|
const t = d.get(this);
|
|
356
356
|
x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
357
357
|
let a;
|
|
358
|
-
return t.constructor.formAssociated === !0 && (a =
|
|
358
|
+
return t.constructor.formAssociated === !0 && (a = H(t)), a;
|
|
359
359
|
}
|
|
360
360
|
get labels() {
|
|
361
361
|
const t = d.get(this);
|
|
@@ -395,10 +395,10 @@ function jt() {
|
|
|
395
395
|
const o = v.get(this), r = {};
|
|
396
396
|
for (const E in t)
|
|
397
397
|
r[E] = t[E];
|
|
398
|
-
Object.keys(r).length === 0 &&
|
|
398
|
+
Object.keys(r).length === 0 && kt(o);
|
|
399
399
|
const f = Object.assign(Object.assign({}, o), r);
|
|
400
400
|
delete f.valid;
|
|
401
|
-
const { valid: m } =
|
|
401
|
+
const { valid: m } = St(o, f, this.form);
|
|
402
402
|
if (!m && !a)
|
|
403
403
|
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.");
|
|
404
404
|
I.set(this, m ? "" : a), n.isConnected ? (n.toggleAttribute("internals-invalid", !m), n.toggleAttribute("internals-valid", m), n.setAttribute("aria-invalid", `${!m}`)) : T.set(n, this);
|
|
@@ -420,7 +420,7 @@ function jt() {
|
|
|
420
420
|
return x(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
|
|
421
421
|
}
|
|
422
422
|
}
|
|
423
|
-
function
|
|
423
|
+
function Vt() {
|
|
424
424
|
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
|
|
425
425
|
return !1;
|
|
426
426
|
class e extends HTMLElement {
|
|
@@ -476,7 +476,7 @@ function jt() {
|
|
|
476
476
|
}), typeof Element < "u") {
|
|
477
477
|
let t = function(...i) {
|
|
478
478
|
const n = a.apply(this, i);
|
|
479
|
-
if (L.set(this, n),
|
|
479
|
+
if (L.set(this, n), _()) {
|
|
480
480
|
const o = new MutationObserver(q);
|
|
481
481
|
window.ShadyDOM ? o.observe(this, B) : o.observe(n, B), F.set(this, o);
|
|
482
482
|
}
|
|
@@ -485,21 +485,21 @@ function jt() {
|
|
|
485
485
|
const a = Element.prototype.attachShadow;
|
|
486
486
|
Element.prototype.attachShadow = t;
|
|
487
487
|
}
|
|
488
|
-
|
|
488
|
+
_() && typeof document < "u" && new MutationObserver(q).observe(document.documentElement, B), typeof HTMLFormElement < "u" && At(), (e || typeof window < "u" && !window.CustomStateSet) && G();
|
|
489
489
|
}
|
|
490
490
|
}
|
|
491
|
-
return !!customElements.polyfillWrapFlushCallback || (
|
|
491
|
+
return !!customElements.polyfillWrapFlushCallback || (Vt() ? typeof window < "u" && !window.CustomStateSet && G(HTMLElement.prototype.attachInternals) : pt(!1)), p.forceCustomStateSetPolyfill = G, p.forceElementInternalsPolyfill = pt, Object.defineProperty(p, "__esModule", { value: !0 }), p;
|
|
492
492
|
})({});
|
|
493
|
-
})()),
|
|
493
|
+
})()), ft;
|
|
494
494
|
}
|
|
495
|
-
|
|
496
|
-
var
|
|
497
|
-
for (var l = g > 1 ? void 0 : g ?
|
|
495
|
+
Ut();
|
|
496
|
+
var jt = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, c = (p, d, v, g) => {
|
|
497
|
+
for (var l = g > 1 ? void 0 : g ? Kt(d, v) : d, I = p.length - 1, M; I >= 0; I--)
|
|
498
498
|
(M = p[I]) && (l = (g ? M(d, v, l) : M(l)) || l);
|
|
499
|
-
return g && l &&
|
|
499
|
+
return g && l && jt(d, v, l), l;
|
|
500
500
|
};
|
|
501
501
|
const Z = "pie-text-input", Q = "assistive-text";
|
|
502
|
-
let s = class extends Rt(Dt(
|
|
502
|
+
let s = class extends Pt(Rt(Dt(X))) {
|
|
503
503
|
constructor() {
|
|
504
504
|
super(...arguments), this.type = w.type, this.value = w.value, this.disabled = w.disabled, this.readonly = w.readonly, this.status = w.status, this.size = w.size, this.required = !1, this.handleInput = (p) => {
|
|
505
505
|
this.value = p.target.value, this._internals.setFormValue(this.value);
|
|
@@ -565,9 +565,9 @@ let s = class extends Rt(Dt(_t(X))) {
|
|
|
565
565
|
"is-disabled": g,
|
|
566
566
|
"is-readonly": A
|
|
567
567
|
};
|
|
568
|
-
return
|
|
568
|
+
return Lt`
|
|
569
569
|
<div
|
|
570
|
-
class="${
|
|
570
|
+
class="${Ot(P)}"
|
|
571
571
|
data-test-id="pie-text-input-shell">
|
|
572
572
|
<!-- The reason for separate slots for icons and text is that we cannot programmatically be aware of the
|
|
573
573
|
HTML used inside of the slot without breaking SSR in consuming applications (icons need to use different colours than text content)
|
|
@@ -577,9 +577,9 @@ let s = class extends Rt(Dt(_t(X))) {
|
|
|
577
577
|
<slot name="leadingText"></slot>
|
|
578
578
|
<input
|
|
579
579
|
type=${h(T)}
|
|
580
|
-
.value=${
|
|
580
|
+
.value=${mt(C)}
|
|
581
581
|
name=${h(N)}
|
|
582
|
-
?disabled=${
|
|
582
|
+
?disabled=${mt(g)}
|
|
583
583
|
pattern=${h(S)}
|
|
584
584
|
step=${h(L)}
|
|
585
585
|
minlength=${h(M)}
|
|
@@ -605,20 +605,19 @@ let s = class extends Rt(Dt(_t(X))) {
|
|
|
605
605
|
<slot name="trailingIcon"></slot>
|
|
606
606
|
<slot name="trailingText"></slot>
|
|
607
607
|
</div>
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
` : $t}`;
|
|
608
|
+
<pie-assistive-text
|
|
609
|
+
id="${Q}"
|
|
610
|
+
variant=${h(k)}
|
|
611
|
+
message=${p || ""}
|
|
612
|
+
?isVisuallyHidden=${!p}
|
|
613
|
+
data-test-id="pie-text-input-assistive-text">
|
|
614
|
+
</pie-assistive-text>`;
|
|
616
615
|
}
|
|
617
616
|
};
|
|
618
|
-
s.styles =
|
|
617
|
+
s.styles = $t(zt);
|
|
619
618
|
c([
|
|
620
619
|
u({ type: String, reflect: !0 }),
|
|
621
|
-
Y(Z,
|
|
620
|
+
Y(Z, Wt, w.type)
|
|
622
621
|
], s.prototype, "type", 2);
|
|
623
622
|
c([
|
|
624
623
|
u({ type: String })
|
|
@@ -661,7 +660,7 @@ c([
|
|
|
661
660
|
], s.prototype, "assistiveText", 2);
|
|
662
661
|
c([
|
|
663
662
|
u({ type: String }),
|
|
664
|
-
Y(Z,
|
|
663
|
+
Y(Z, qt, w.status)
|
|
665
664
|
], s.prototype, "status", 2);
|
|
666
665
|
c([
|
|
667
666
|
u({ type: Number })
|
|
@@ -674,25 +673,25 @@ c([
|
|
|
674
673
|
], s.prototype, "max", 2);
|
|
675
674
|
c([
|
|
676
675
|
u({ type: String }),
|
|
677
|
-
Y(Z,
|
|
676
|
+
Y(Z, Bt, w.size)
|
|
678
677
|
], s.prototype, "size", 2);
|
|
679
678
|
c([
|
|
680
679
|
u({ type: Boolean })
|
|
681
680
|
], s.prototype, "required", 2);
|
|
682
681
|
c([
|
|
683
|
-
|
|
682
|
+
gt("input")
|
|
684
683
|
], s.prototype, "input", 2);
|
|
685
684
|
c([
|
|
686
|
-
|
|
685
|
+
gt("input")
|
|
687
686
|
], s.prototype, "focusTarget", 2);
|
|
688
687
|
s = c([
|
|
689
|
-
|
|
688
|
+
_t("pie-text-input")
|
|
690
689
|
], s);
|
|
691
690
|
export {
|
|
692
691
|
s as PieTextInput,
|
|
693
692
|
w as defaultProps,
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
693
|
+
ae as inputModes,
|
|
694
|
+
Bt as sizes,
|
|
695
|
+
qt as statusTypes,
|
|
696
|
+
Wt as types
|
|
698
697
|
};
|
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.30.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -44,14 +44,14 @@
|
|
|
44
44
|
"license": "Apache-2.0",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@justeattakeaway/pie-components-config": "0.21.3",
|
|
47
|
-
"@justeattakeaway/pie-css": "1.
|
|
48
|
-
"@justeattakeaway/pie-icons-webc": "1.25.
|
|
49
|
-
"@justeattakeaway/pie-monorepo-utils": "0.9.
|
|
47
|
+
"@justeattakeaway/pie-css": "1.2.0",
|
|
48
|
+
"@justeattakeaway/pie-icons-webc": "1.25.1",
|
|
49
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.5",
|
|
50
50
|
"@justeattakeaway/pie-wrapper-react": "0.14.5"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@justeattakeaway/pie-assistive-text": "0.
|
|
54
|
-
"@justeattakeaway/pie-webc-core": "
|
|
53
|
+
"@justeattakeaway/pie-assistive-text": "1.0.0",
|
|
54
|
+
"@justeattakeaway/pie-webc-core": "15.0.0",
|
|
55
55
|
"element-internals-polyfill": "1.3.11"
|
|
56
56
|
},
|
|
57
57
|
"customElements": "custom-elements.json",
|
package/src/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
-
html, unsafeCSS, type PropertyValues,
|
|
2
|
+
html, unsafeCSS, type PropertyValues,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
5
|
import { property, query } from 'lit/decorators.js';
|
|
@@ -243,14 +243,13 @@ export class PieTextInput extends FormControlMixin(RtlMixin(DelegatesFocusMixin(
|
|
|
243
243
|
<slot name="trailingIcon"></slot>
|
|
244
244
|
<slot name="trailingText"></slot>
|
|
245
245
|
</div>
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
` : nothing}`;
|
|
246
|
+
<pie-assistive-text
|
|
247
|
+
id="${assistiveTextIdValue}"
|
|
248
|
+
variant=${ifDefined(status)}
|
|
249
|
+
message=${assistiveText || ''}
|
|
250
|
+
?isVisuallyHidden=${!assistiveText}
|
|
251
|
+
data-test-id="pie-text-input-assistive-text">
|
|
252
|
+
</pie-assistive-text>`;
|
|
254
253
|
}
|
|
255
254
|
|
|
256
255
|
// Renders a `CSSResult` generated from SCSS by Vite
|