@justeattakeaway/pie-text-input 0.20.0 → 0.22.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/README.md +5 -3
- package/custom-elements.json +12 -4
- package/dist/index.d.ts +4 -2
- package/dist/index.js +199 -186
- package/dist/react.d.ts +4 -2
- package/package.json +2 -2
- package/src/index.ts +21 -5
- package/src/text-input.scss +15 -7
package/README.md
CHANGED
|
@@ -90,7 +90,7 @@ import { PieTextInput } from '@justeattakeaway/pie-text-input/dist/react';
|
|
|
90
90
|
| `type` | `'text'`, `'number'`, `'password'`, `'url'`, `'email'`, `'tel'` | `text` | The type of HTML input to render. |
|
|
91
91
|
| `value` | `string` | `''` | The value of the input (used as a key/value pair in HTML forms with `name`). |
|
|
92
92
|
| `assistiveText` | `string` | `''` | Allows assistive text to be displayed below the input element. |
|
|
93
|
-
| `status` | `'error'`, `'success'` | `undefined` | The status of the input component / assistive text. |
|
|
93
|
+
| `status` | `'error'`, `'success'` | `undefined` | The status of the input component / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. |
|
|
94
94
|
| `step` | `number` | - | An optional amount that value should be incremented or decremented by when using the up and down arrows in the input. Only applies when type is `number`. |
|
|
95
95
|
| `min` | `number` | - | The minimum value of the input. Only applies when type is `number`. If the value provided is lower, the input is invalid. |
|
|
96
96
|
| `max` | `number` | - | The maximum value of the input. Only applies when type is `number`. If the value provided is higher, the input is invalid. |
|
|
@@ -140,8 +140,10 @@ In your markup or JSX, you can then use these to set the properties for the `pie
|
|
|
140
140
|
## Slots
|
|
141
141
|
| Slot | Description |
|
|
142
142
|
|------|-------------|
|
|
143
|
-
| `
|
|
144
|
-
| `
|
|
143
|
+
| `leadingText` | Short text to display at the start of the input. Wrap the text in a `<span>`. Do not use with `leadingIcon` at the same time. |
|
|
144
|
+
| `leadingIcon` | An icon to display at the start of the input. Do not use with `leadingText` at the same time. |
|
|
145
|
+
| `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. |
|
|
146
|
+
| `trailingIcon` | An icon to display at the end of the input. Do not use with `trailingText` at the same time. |
|
|
145
147
|
|
|
146
148
|
## Contributing
|
|
147
149
|
|
package/custom-elements.json
CHANGED
|
@@ -107,12 +107,20 @@
|
|
|
107
107
|
"name": "PieTextInput",
|
|
108
108
|
"slots": [
|
|
109
109
|
{
|
|
110
|
-
"description": "
|
|
111
|
-
"name": "
|
|
110
|
+
"description": "Short text to display at the start of the input. Wrap the text in a <span>. Do not use with leadingIcon at the same time.",
|
|
111
|
+
"name": "leadingText"
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"description": "An icon
|
|
115
|
-
"name": "
|
|
114
|
+
"description": "An icon to display at the start of the input. Do not use with leadingText at the same time.",
|
|
115
|
+
"name": "leadingIcon"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"description": "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.",
|
|
119
|
+
"name": "trailingText"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"description": "An icon to display at the end of the input. Do not use with trailingText at the same time.",
|
|
123
|
+
"name": "trailingIcon"
|
|
116
124
|
}
|
|
117
125
|
],
|
|
118
126
|
"members": [
|
package/dist/index.d.ts
CHANGED
|
@@ -24,8 +24,10 @@ export declare const inputModes: readonly ["none", "text", "tel", "url", "email"
|
|
|
24
24
|
* @tagname pie-text-input
|
|
25
25
|
* @event {InputEvent} input - when the input value is changed.
|
|
26
26
|
* @event {CustomEvent} change - when the input value is changed.
|
|
27
|
-
* @slot
|
|
28
|
-
* @slot
|
|
27
|
+
* @slot leadingText - Short text to display at the start of the input. Wrap the text in a <span>. Do not use with leadingIcon at the same time.
|
|
28
|
+
* @slot leadingIcon - An icon to display at the start of the input. Do not use with leadingText at the same time.
|
|
29
|
+
* @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.
|
|
30
|
+
* @slot trailingIcon - An icon to display at the end of the input. Do not use with trailingText at the same time.
|
|
29
31
|
*/
|
|
30
32
|
export declare class PieTextInput extends PieTextInput_base implements TextInputProps, PIEInputElement {
|
|
31
33
|
static shadowRootOptions: {
|
package/dist/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as u, query as
|
|
3
|
-
import { ifDefined as
|
|
1
|
+
import { LitElement as pt, html as ut, nothing as At, unsafeCSS as Vt } from "lit";
|
|
2
|
+
import { property as u, query as mt } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as m } from "lit/directives/if-defined.js";
|
|
4
4
|
import { live as J } from "lit/directives/live.js";
|
|
5
|
-
import { FormControlMixin as
|
|
5
|
+
import { FormControlMixin as Nt, RtlMixin as Lt, wrapNativeEvent as $t, validPropertyValues as ht, defineCustomElement as Ot } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
const
|
|
8
|
-
`,
|
|
7
|
+
const Pt = `*,*: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-subdued);--input-border-color: var(--dt-color-interactive-form);--input-container-color: var(--dt-color-container-default);--input-radius: var(--dt-radius-rounded-c);--input-font-size: var(--dt-font-body-l-size);--input-height: 48px;--input-cursor: text;--icon-display-override: block;--icon-size-override: 24px;height:var(--input-height);border:1px solid var(--input-border-color);border-radius:var(--input-radius);padding-inline-start:var(--input-padding-inline);padding-inline-end:var(--input-padding-inline);padding-block-start:var(--input-padding-block);padding-block-end:var(--input-padding-block);line-height:24px;font-size:var(--input-font-size);display:flex;flex-wrap:nowrap;align-items:center;background-color:var(--input-container-color);color:var(--input-text-color-leading-trailing-content);cursor:var(--input-cursor)}.c-textInput[data-pie-size=large]{--input-padding-block: var(--dt-spacing-d);--input-height: 56px}.c-textInput[data-pie-size=small]{--input-padding-block: var(--dt-spacing-b);--input-height: 40px}.c-textInput[data-pie-status=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([data-pie-disabled]) ::slotted([slot=leadingIcon]),.c-textInput:not([data-pie-disabled]) ::slotted([slot=trailingIcon]){color:var(--dt-color-content-subdued)}@media (hover: hover){.c-textInput:hover{--input-container-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}}.c-textInput[data-pie-readonly]{--input-container-color: var(--dt-color-disabled-01);--input-border-color: var(--dt-color-interactive-form)}.c-textInput[data-pie-disabled][data-pie-readonly],.c-textInput[data-pie-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)}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}
|
|
8
|
+
`, Rt = ["text", "number", "password", "url", "email", "tel"], Gt = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], _t = ["success", "error"], Jt = ["small", "medium", "large"], A = {
|
|
9
9
|
type: "text",
|
|
10
10
|
value: "",
|
|
11
11
|
size: "medium"
|
|
12
12
|
};
|
|
13
13
|
(function() {
|
|
14
14
|
(function(E) {
|
|
15
|
-
const s = /* @__PURE__ */ new WeakMap(),
|
|
15
|
+
const s = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), k = {
|
|
16
16
|
ariaAtomic: "aria-atomic",
|
|
17
17
|
ariaAutoComplete: "aria-autocomplete",
|
|
18
18
|
ariaBusy: "aria-busy",
|
|
@@ -56,72 +56,72 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
56
56
|
ariaValueText: "aria-valuetext",
|
|
57
57
|
role: "role"
|
|
58
58
|
}, H = (e, t) => {
|
|
59
|
-
for (let a in
|
|
59
|
+
for (let a in k) {
|
|
60
60
|
t[a] = null;
|
|
61
61
|
let i = null;
|
|
62
|
-
const
|
|
62
|
+
const o = k[a];
|
|
63
63
|
Object.defineProperty(t, a, {
|
|
64
64
|
get() {
|
|
65
65
|
return i;
|
|
66
66
|
},
|
|
67
|
-
set(
|
|
68
|
-
i =
|
|
67
|
+
set(n) {
|
|
68
|
+
i = n, e.isConnected ? e.setAttribute(o, n) : T.set(e, t);
|
|
69
69
|
}
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
72
|
};
|
|
73
|
-
function
|
|
73
|
+
function O(e) {
|
|
74
74
|
const t = c.get(e), { form: a } = t;
|
|
75
|
-
|
|
75
|
+
at(e, a, t), et(e, t.labels);
|
|
76
76
|
}
|
|
77
77
|
const P = (e, t = !1) => {
|
|
78
78
|
const a = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
|
|
79
|
-
acceptNode(
|
|
80
|
-
return c.has(
|
|
79
|
+
acceptNode(n) {
|
|
80
|
+
return c.has(n) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
81
81
|
}
|
|
82
82
|
});
|
|
83
83
|
let i = a.nextNode();
|
|
84
|
-
const
|
|
84
|
+
const o = !t || e.disabled;
|
|
85
85
|
for (; i; )
|
|
86
|
-
i.formDisabledCallback &&
|
|
87
|
-
},
|
|
86
|
+
i.formDisabledCallback && o && B(i, e.disabled), i = a.nextNode();
|
|
87
|
+
}, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, R = z() ? new MutationObserver((e) => {
|
|
88
88
|
for (const t of e) {
|
|
89
89
|
const a = t.target;
|
|
90
90
|
if (t.attributeName === "disabled" && (a.constructor.formAssociated ? B(a, a.hasAttribute("disabled")) : a.localName === "fieldset" && P(a)), t.attributeName === "name" && a.constructor.formAssociated) {
|
|
91
|
-
const i = c.get(a),
|
|
92
|
-
i.setFormValue(
|
|
91
|
+
const i = c.get(a), o = V.get(a);
|
|
92
|
+
i.setFormValue(o);
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
}) : {};
|
|
96
96
|
function W(e) {
|
|
97
97
|
e.forEach((t) => {
|
|
98
|
-
const { addedNodes: a, removedNodes: i } = t,
|
|
99
|
-
|
|
100
|
-
var
|
|
101
|
-
if (c.has(
|
|
102
|
-
const p =
|
|
103
|
-
Object.keys(
|
|
104
|
-
|
|
105
|
-
}),
|
|
98
|
+
const { addedNodes: a, removedNodes: i } = t, o = Array.from(a), n = Array.from(i);
|
|
99
|
+
o.forEach((r) => {
|
|
100
|
+
var h;
|
|
101
|
+
if (c.has(r) && r.constructor.formAssociated && O(r), T.has(r)) {
|
|
102
|
+
const p = T.get(r);
|
|
103
|
+
Object.keys(k).filter((v) => p[v] !== null).forEach((v) => {
|
|
104
|
+
r.setAttribute(k[v], p[v]);
|
|
105
|
+
}), T.delete(r);
|
|
106
106
|
}
|
|
107
|
-
if (
|
|
108
|
-
const p =
|
|
109
|
-
|
|
107
|
+
if (b.has(r)) {
|
|
108
|
+
const p = b.get(r);
|
|
109
|
+
r.setAttribute("internals-valid", p.validity.valid.toString()), r.setAttribute("internals-invalid", (!p.validity.valid).toString()), r.setAttribute("aria-invalid", (!p.validity.valid).toString()), b.delete(r);
|
|
110
110
|
}
|
|
111
|
-
if (
|
|
112
|
-
const p = y.get(
|
|
111
|
+
if (r.localName === "form") {
|
|
112
|
+
const p = y.get(r), x = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
|
|
113
113
|
acceptNode(G) {
|
|
114
114
|
return c.has(G) && G.constructor.formAssociated && !(p && p.has(G)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
115
115
|
}
|
|
116
116
|
});
|
|
117
|
-
let v =
|
|
117
|
+
let v = x.nextNode();
|
|
118
118
|
for (; v; )
|
|
119
|
-
|
|
119
|
+
O(v), v = x.nextNode();
|
|
120
120
|
}
|
|
121
|
-
|
|
122
|
-
}),
|
|
123
|
-
const
|
|
124
|
-
|
|
121
|
+
r.localName === "fieldset" && ((h = R.observe) === null || h === void 0 || h.call(R, r, Y), P(r, !0));
|
|
122
|
+
}), n.forEach((r) => {
|
|
123
|
+
const h = c.get(r);
|
|
124
|
+
h && g.get(h) && Z(h), S.has(r) && S.get(r).disconnect();
|
|
125
125
|
});
|
|
126
126
|
});
|
|
127
127
|
}
|
|
@@ -129,15 +129,15 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
129
129
|
e.forEach((t) => {
|
|
130
130
|
const { removedNodes: a } = t;
|
|
131
131
|
a.forEach((i) => {
|
|
132
|
-
const
|
|
133
|
-
c.has(i) &&
|
|
132
|
+
const o = $.get(t.target);
|
|
133
|
+
c.has(i) && ot(i), o.disconnect();
|
|
134
134
|
});
|
|
135
135
|
});
|
|
136
136
|
}
|
|
137
|
-
const
|
|
137
|
+
const gt = (e) => {
|
|
138
138
|
var t, a;
|
|
139
139
|
const i = new MutationObserver(ft);
|
|
140
|
-
!((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 }),
|
|
140
|
+
!((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);
|
|
141
141
|
};
|
|
142
142
|
z() && new MutationObserver(W);
|
|
143
143
|
const q = {
|
|
@@ -145,72 +145,72 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
145
145
|
subtree: !0
|
|
146
146
|
}, B = (e, t) => {
|
|
147
147
|
e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
|
|
148
|
-
},
|
|
148
|
+
}, Z = (e) => {
|
|
149
149
|
g.get(e).forEach((a) => {
|
|
150
150
|
a.remove();
|
|
151
151
|
}), g.set(e, []);
|
|
152
|
-
},
|
|
152
|
+
}, tt = (e, t) => {
|
|
153
153
|
const a = document.createElement("input");
|
|
154
154
|
return a.type = "hidden", a.name = e.getAttribute("name"), e.after(a), g.get(t).push(a), a;
|
|
155
|
-
},
|
|
155
|
+
}, yt = (e, t) => {
|
|
156
156
|
var a;
|
|
157
|
-
g.set(t, []), (a = R.observe) === null || a === void 0 || a.call(R, e,
|
|
158
|
-
},
|
|
157
|
+
g.set(t, []), (a = R.observe) === null || a === void 0 || a.call(R, e, Y);
|
|
158
|
+
}, et = (e, t) => {
|
|
159
159
|
if (t.length) {
|
|
160
160
|
Array.from(t).forEach((i) => i.addEventListener("click", e.click.bind(e)));
|
|
161
161
|
let a = t[0].id;
|
|
162
162
|
t[0].id || (a = `${t[0].htmlFor}_Label`, t[0].id = a), e.setAttribute("aria-labelledby", a);
|
|
163
163
|
}
|
|
164
164
|
}, _ = (e) => {
|
|
165
|
-
const t = Array.from(e.elements).filter((
|
|
166
|
-
e.toggleAttribute("internals-invalid",
|
|
167
|
-
}, yt = (e) => {
|
|
168
|
-
_(D(e.target));
|
|
165
|
+
const t = Array.from(e.elements).filter((n) => !n.tagName.includes("-") && n.validity).map((n) => n.validity.valid), a = y.get(e) || [], i = Array.from(a).filter((n) => n.isConnected).map((n) => c.get(n).validity.valid), o = [...t, ...i].includes(!1);
|
|
166
|
+
e.toggleAttribute("internals-invalid", o), e.toggleAttribute("internals-valid", !o);
|
|
169
167
|
}, vt = (e) => {
|
|
170
168
|
_(D(e.target));
|
|
171
169
|
}, bt = (e) => {
|
|
170
|
+
_(D(e.target));
|
|
171
|
+
}, wt = (e) => {
|
|
172
172
|
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(",");
|
|
173
173
|
e.addEventListener("click", (a) => {
|
|
174
174
|
if (a.target.closest(t)) {
|
|
175
|
-
const
|
|
175
|
+
const o = y.get(e);
|
|
176
176
|
if (e.noValidate)
|
|
177
177
|
return;
|
|
178
|
-
|
|
178
|
+
o.size && Array.from(o).reverse().map((h) => c.get(h).reportValidity()).includes(!1) && a.preventDefault();
|
|
179
179
|
}
|
|
180
180
|
});
|
|
181
|
-
},
|
|
181
|
+
}, xt = (e) => {
|
|
182
182
|
const t = y.get(e.target);
|
|
183
183
|
t && t.size && t.forEach((a) => {
|
|
184
184
|
a.constructor.formAssociated && a.formResetCallback && a.formResetCallback.apply(a);
|
|
185
185
|
});
|
|
186
|
-
},
|
|
186
|
+
}, at = (e, t, a) => {
|
|
187
187
|
if (t) {
|
|
188
188
|
const i = y.get(t);
|
|
189
189
|
if (i)
|
|
190
190
|
i.add(e);
|
|
191
191
|
else {
|
|
192
|
-
const
|
|
193
|
-
|
|
192
|
+
const o = /* @__PURE__ */ new Set();
|
|
193
|
+
o.add(e), y.set(t, o), wt(t), t.addEventListener("reset", xt), t.addEventListener("input", vt), t.addEventListener("change", bt);
|
|
194
194
|
}
|
|
195
|
-
|
|
195
|
+
I.set(t, { ref: e, internals: a }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
|
|
196
196
|
e.formAssociatedCallback.apply(e, [t]);
|
|
197
197
|
}, 0), _(t);
|
|
198
198
|
}
|
|
199
199
|
}, D = (e) => {
|
|
200
200
|
let t = e.parentNode;
|
|
201
201
|
return t && t.tagName !== "FORM" && (t = D(t)), t;
|
|
202
|
-
},
|
|
202
|
+
}, w = (e, t, a = DOMException) => {
|
|
203
203
|
if (!e.constructor.formAssociated)
|
|
204
204
|
throw new a(t);
|
|
205
|
-
},
|
|
205
|
+
}, it = (e, t, a) => {
|
|
206
206
|
const i = y.get(e);
|
|
207
|
-
return i && i.size && i.forEach((
|
|
208
|
-
c.get(
|
|
207
|
+
return i && i.size && i.forEach((o) => {
|
|
208
|
+
c.get(o)[a]() || (t = !1);
|
|
209
209
|
}), t;
|
|
210
|
-
},
|
|
210
|
+
}, ot = (e) => {
|
|
211
211
|
if (e.constructor.formAssociated) {
|
|
212
212
|
const t = c.get(e), { labels: a, form: i } = t;
|
|
213
|
-
|
|
213
|
+
et(e, a), at(e, i, t);
|
|
214
214
|
}
|
|
215
215
|
};
|
|
216
216
|
function z() {
|
|
@@ -221,7 +221,7 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
221
221
|
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);
|
|
222
222
|
}
|
|
223
223
|
}
|
|
224
|
-
const
|
|
224
|
+
const Mt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), It = (e, t, a) => (e.valid = Tt(t), Object.keys(t).forEach((i) => e[i] = t[i]), a && _(a), e), Tt = (e) => {
|
|
225
225
|
let t = !0;
|
|
226
226
|
for (let a in e)
|
|
227
227
|
a !== "valid" && e[a] !== !1 && (t = !1);
|
|
@@ -242,9 +242,9 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
242
242
|
add(t) {
|
|
243
243
|
if (!/^--/.test(t) || typeof t != "string")
|
|
244
244
|
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
|
|
245
|
-
const a = super.add(t), i = U.get(this),
|
|
246
|
-
return i.isConnected ? nt(i,
|
|
247
|
-
nt(i,
|
|
245
|
+
const a = super.add(t), i = U.get(this), o = `state${t}`;
|
|
246
|
+
return i.isConnected ? nt(i, o) : setTimeout(() => {
|
|
247
|
+
nt(i, o);
|
|
248
248
|
}), a;
|
|
249
249
|
}
|
|
250
250
|
clear() {
|
|
@@ -266,19 +266,19 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
266
266
|
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
267
267
|
return a === "m" ? i : a === "a" ? i.call(e) : i ? i.value : t.get(e);
|
|
268
268
|
}
|
|
269
|
-
function kt(e, t, a, i,
|
|
269
|
+
function kt(e, t, a, i, o) {
|
|
270
270
|
if (i === "m")
|
|
271
271
|
throw new TypeError("Private method is not writable");
|
|
272
|
-
if (i === "a" && !
|
|
272
|
+
if (i === "a" && !o)
|
|
273
273
|
throw new TypeError("Private accessor was defined without a setter");
|
|
274
|
-
if (typeof t == "function" ? e !== t || !
|
|
274
|
+
if (typeof t == "function" ? e !== t || !o : !t.has(e))
|
|
275
275
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
276
|
-
return i === "a" ?
|
|
276
|
+
return i === "a" ? o.call(e, a) : o ? o.value = a : t.set(e, a), a;
|
|
277
277
|
}
|
|
278
|
-
var
|
|
279
|
-
class
|
|
278
|
+
var F;
|
|
279
|
+
class St {
|
|
280
280
|
constructor(t) {
|
|
281
|
-
|
|
281
|
+
F.set(this, void 0), kt(this, F, t, "f");
|
|
282
282
|
for (let a = 0; a < t.length; a++) {
|
|
283
283
|
let i = t[a];
|
|
284
284
|
this[a] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
|
|
@@ -286,10 +286,10 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
286
286
|
Object.freeze(this);
|
|
287
287
|
}
|
|
288
288
|
get length() {
|
|
289
|
-
return rt(this,
|
|
289
|
+
return rt(this, F, "f").length;
|
|
290
290
|
}
|
|
291
|
-
[(
|
|
292
|
-
return rt(this,
|
|
291
|
+
[(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
292
|
+
return rt(this, F, "f")[Symbol.iterator]();
|
|
293
293
|
}
|
|
294
294
|
item(t) {
|
|
295
295
|
return this[t] == null ? null : this[t];
|
|
@@ -298,31 +298,31 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
298
298
|
return this[t] == null ? null : this[t];
|
|
299
299
|
}
|
|
300
300
|
}
|
|
301
|
-
function
|
|
301
|
+
function Ct() {
|
|
302
302
|
const e = HTMLFormElement.prototype.checkValidity;
|
|
303
303
|
HTMLFormElement.prototype.checkValidity = a;
|
|
304
304
|
const t = HTMLFormElement.prototype.reportValidity;
|
|
305
305
|
HTMLFormElement.prototype.reportValidity = i;
|
|
306
|
-
function a(...
|
|
307
|
-
let
|
|
308
|
-
return
|
|
306
|
+
function a(...n) {
|
|
307
|
+
let r = e.apply(this, n);
|
|
308
|
+
return it(this, r, "checkValidity");
|
|
309
309
|
}
|
|
310
|
-
function i(...
|
|
311
|
-
let
|
|
312
|
-
return
|
|
310
|
+
function i(...n) {
|
|
311
|
+
let r = t.apply(this, n);
|
|
312
|
+
return it(this, r, "reportValidity");
|
|
313
313
|
}
|
|
314
|
-
const { get:
|
|
314
|
+
const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
315
315
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
316
|
-
get(...
|
|
317
|
-
const
|
|
318
|
-
if (
|
|
319
|
-
return
|
|
320
|
-
const p = Array.from(
|
|
321
|
-
return new
|
|
316
|
+
get(...n) {
|
|
317
|
+
const r = o.call(this, ...n), h = Array.from(y.get(this) || []);
|
|
318
|
+
if (h.length === 0)
|
|
319
|
+
return r;
|
|
320
|
+
const p = Array.from(r).concat(h).sort((x, v) => x.compareDocumentPosition ? x.compareDocumentPosition(v) & 2 ? 1 : -1 : 0);
|
|
321
|
+
return new St(p);
|
|
322
322
|
}
|
|
323
323
|
});
|
|
324
324
|
}
|
|
325
|
-
class
|
|
325
|
+
class st {
|
|
326
326
|
static get isPolyfilled() {
|
|
327
327
|
return !0;
|
|
328
328
|
}
|
|
@@ -330,13 +330,13 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
330
330
|
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
331
331
|
throw new TypeError("Illegal constructor");
|
|
332
332
|
const a = t.getRootNode(), i = new Et();
|
|
333
|
-
this.states = new j(t), s.set(this, t),
|
|
333
|
+
this.states = new j(t), s.set(this, t), f.set(this, i), c.set(t, this), H(t, this), yt(t, this), Object.seal(this), a instanceof DocumentFragment && gt(a);
|
|
334
334
|
}
|
|
335
335
|
checkValidity() {
|
|
336
336
|
const t = s.get(this);
|
|
337
|
-
if (
|
|
337
|
+
if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
338
338
|
return !0;
|
|
339
|
-
const a =
|
|
339
|
+
const a = f.get(this);
|
|
340
340
|
if (!a.valid) {
|
|
341
341
|
const i = new Event("invalid", {
|
|
342
342
|
bubbles: !1,
|
|
@@ -349,19 +349,19 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
349
349
|
}
|
|
350
350
|
get form() {
|
|
351
351
|
const t = s.get(this);
|
|
352
|
-
|
|
352
|
+
w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
353
353
|
let a;
|
|
354
354
|
return t.constructor.formAssociated === !0 && (a = D(t)), a;
|
|
355
355
|
}
|
|
356
356
|
get labels() {
|
|
357
357
|
const t = s.get(this);
|
|
358
|
-
|
|
358
|
+
w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
359
359
|
const a = t.getAttribute("id"), i = t.getRootNode();
|
|
360
360
|
return i && a ? i.querySelectorAll(`[for="${a}"]`) : [];
|
|
361
361
|
}
|
|
362
362
|
reportValidity() {
|
|
363
363
|
const t = s.get(this);
|
|
364
|
-
if (
|
|
364
|
+
if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
365
365
|
return !0;
|
|
366
366
|
const a = this.checkValidity(), i = L.get(this);
|
|
367
367
|
if (i && !t.constructor.formAssociated)
|
|
@@ -370,35 +370,35 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
370
370
|
}
|
|
371
371
|
setFormValue(t) {
|
|
372
372
|
const a = s.get(this);
|
|
373
|
-
if (
|
|
373
|
+
if (w(a, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Z(this), t != null && !(t instanceof FormData)) {
|
|
374
374
|
if (a.getAttribute("name")) {
|
|
375
|
-
const i =
|
|
375
|
+
const i = tt(a, this);
|
|
376
376
|
i.value = t;
|
|
377
377
|
}
|
|
378
378
|
} else
|
|
379
|
-
t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i,
|
|
380
|
-
if (typeof
|
|
381
|
-
const
|
|
382
|
-
|
|
379
|
+
t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, o]) => {
|
|
380
|
+
if (typeof o == "string") {
|
|
381
|
+
const n = tt(a, this);
|
|
382
|
+
n.name = i, n.value = o;
|
|
383
383
|
}
|
|
384
384
|
});
|
|
385
385
|
V.set(a, t);
|
|
386
386
|
}
|
|
387
387
|
setValidity(t, a, i) {
|
|
388
|
-
const
|
|
389
|
-
if (
|
|
388
|
+
const o = s.get(this);
|
|
389
|
+
if (w(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
|
|
390
390
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
391
391
|
L.set(this, i);
|
|
392
|
-
const
|
|
393
|
-
for (const
|
|
394
|
-
|
|
395
|
-
Object.keys(
|
|
396
|
-
const
|
|
397
|
-
delete
|
|
398
|
-
const { valid: p } =
|
|
392
|
+
const n = f.get(this), r = {};
|
|
393
|
+
for (const x in t)
|
|
394
|
+
r[x] = t[x];
|
|
395
|
+
Object.keys(r).length === 0 && Mt(n);
|
|
396
|
+
const h = Object.assign(Object.assign({}, n), r);
|
|
397
|
+
delete h.valid;
|
|
398
|
+
const { valid: p } = It(n, h, this.form);
|
|
399
399
|
if (!p && !a)
|
|
400
400
|
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.");
|
|
401
|
-
|
|
401
|
+
M.set(this, p ? "" : a), o.isConnected ? (o.toggleAttribute("internals-invalid", !p), o.toggleAttribute("internals-valid", p), o.setAttribute("aria-invalid", `${!p}`)) : b.set(o, this);
|
|
402
402
|
}
|
|
403
403
|
get shadowRoot() {
|
|
404
404
|
const t = s.get(this), a = N.get(t);
|
|
@@ -406,15 +406,15 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
406
406
|
}
|
|
407
407
|
get validationMessage() {
|
|
408
408
|
const t = s.get(this);
|
|
409
|
-
return
|
|
409
|
+
return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), M.get(this);
|
|
410
410
|
}
|
|
411
411
|
get validity() {
|
|
412
412
|
const t = s.get(this);
|
|
413
|
-
return
|
|
413
|
+
return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), f.get(this);
|
|
414
414
|
}
|
|
415
415
|
get willValidate() {
|
|
416
416
|
const t = s.get(this);
|
|
417
|
-
return
|
|
417
|
+
return w(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"));
|
|
418
418
|
}
|
|
419
419
|
}
|
|
420
420
|
function Ft() {
|
|
@@ -441,25 +441,25 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
441
441
|
"reportValidity"
|
|
442
442
|
].every((i) => i in a.internals);
|
|
443
443
|
}
|
|
444
|
-
let
|
|
444
|
+
let lt = !1, ct = !1;
|
|
445
445
|
function K(e) {
|
|
446
|
-
|
|
446
|
+
ct || (ct = !0, window.CustomStateSet = j, e && (HTMLElement.prototype.attachInternals = function(...t) {
|
|
447
447
|
const a = e.call(this, t);
|
|
448
448
|
return a.states = new j(this), a;
|
|
449
449
|
}));
|
|
450
450
|
}
|
|
451
|
-
function
|
|
452
|
-
if (!
|
|
453
|
-
if (
|
|
451
|
+
function dt(e = !0) {
|
|
452
|
+
if (!lt) {
|
|
453
|
+
if (lt = !0, typeof window < "u" && (window.ElementInternals = st), typeof CustomElementRegistry < "u") {
|
|
454
454
|
const t = CustomElementRegistry.prototype.define;
|
|
455
|
-
CustomElementRegistry.prototype.define = function(a, i,
|
|
455
|
+
CustomElementRegistry.prototype.define = function(a, i, o) {
|
|
456
456
|
if (i.formAssociated) {
|
|
457
|
-
const
|
|
457
|
+
const n = i.prototype.connectedCallback;
|
|
458
458
|
i.prototype.connectedCallback = function() {
|
|
459
|
-
|
|
459
|
+
C.has(this) || (C.set(this, !0), this.hasAttribute("disabled") && B(this, !0)), n != null && n.apply(this), ot(this);
|
|
460
460
|
};
|
|
461
461
|
}
|
|
462
|
-
t.call(this, a, i,
|
|
462
|
+
t.call(this, a, i, o);
|
|
463
463
|
};
|
|
464
464
|
}
|
|
465
465
|
if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
|
|
@@ -470,38 +470,38 @@ const $t = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
470
470
|
return {};
|
|
471
471
|
if (c.has(this))
|
|
472
472
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
473
|
-
return new
|
|
473
|
+
return new st(this);
|
|
474
474
|
}), typeof Element < "u") {
|
|
475
475
|
let t = function(...i) {
|
|
476
|
-
const
|
|
477
|
-
if (N.set(this,
|
|
478
|
-
const
|
|
479
|
-
window.ShadyDOM ?
|
|
476
|
+
const o = a.apply(this, i);
|
|
477
|
+
if (N.set(this, o), z()) {
|
|
478
|
+
const n = new MutationObserver(W);
|
|
479
|
+
window.ShadyDOM ? n.observe(this, q) : n.observe(o, q), S.set(this, n);
|
|
480
480
|
}
|
|
481
|
-
return
|
|
481
|
+
return o;
|
|
482
482
|
};
|
|
483
483
|
const a = Element.prototype.attachShadow;
|
|
484
484
|
Element.prototype.attachShadow = t;
|
|
485
485
|
}
|
|
486
|
-
z() && typeof document < "u" && new MutationObserver(W).observe(document.documentElement, q), typeof HTMLFormElement < "u" &&
|
|
486
|
+
z() && typeof document < "u" && new MutationObserver(W).observe(document.documentElement, q), typeof HTMLFormElement < "u" && Ct(), (e || typeof window < "u" && !window.CustomStateSet) && K();
|
|
487
487
|
}
|
|
488
488
|
}
|
|
489
|
-
return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && K(HTMLElement.prototype.attachInternals) :
|
|
489
|
+
return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && K(HTMLElement.prototype.attachInternals) : dt(!1)), E.forceCustomStateSetPolyfill = K, E.forceElementInternalsPolyfill = dt, Object.defineProperty(E, "__esModule", { value: !0 }), E;
|
|
490
490
|
})({});
|
|
491
491
|
})();
|
|
492
|
-
var
|
|
493
|
-
for (var c = g > 1 ? void 0 : g ?
|
|
494
|
-
(
|
|
495
|
-
return g && c &&
|
|
492
|
+
var Dt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, d = (E, s, f, g) => {
|
|
493
|
+
for (var c = g > 1 ? void 0 : g ? zt(s, f) : s, M = E.length - 1, I; M >= 0; M--)
|
|
494
|
+
(I = E[M]) && (c = (g ? I(s, f, c) : I(c)) || c);
|
|
495
|
+
return g && c && Dt(s, f, c), c;
|
|
496
496
|
};
|
|
497
|
-
const
|
|
498
|
-
class l extends
|
|
497
|
+
const X = "pie-text-input", Q = "assistive-text";
|
|
498
|
+
class l extends Nt(Lt(pt)) {
|
|
499
499
|
constructor() {
|
|
500
|
-
super(...arguments), this.type =
|
|
500
|
+
super(...arguments), this.type = A.type, this.value = A.value, this.size = A.size, this.required = !1, this.handleInput = (s) => {
|
|
501
501
|
this.value = s.target.value, this._internals.setFormValue(this.value);
|
|
502
502
|
}, this.handleChange = (s) => {
|
|
503
|
-
const
|
|
504
|
-
this.dispatchEvent(
|
|
503
|
+
const f = $t(s);
|
|
504
|
+
this.dispatchEvent(f);
|
|
505
505
|
};
|
|
506
506
|
}
|
|
507
507
|
/**
|
|
@@ -525,7 +525,7 @@ class l extends Vt(Nt(ut)) {
|
|
|
525
525
|
* Resets the value to the default value.
|
|
526
526
|
*/
|
|
527
527
|
formResetCallback() {
|
|
528
|
-
this.value = this.defaultValue ??
|
|
528
|
+
this.value = this.defaultValue ?? A.value, this.input && (this.input.value = this.value), this._internals.setFormValue(this.value);
|
|
529
529
|
}
|
|
530
530
|
firstUpdated(s) {
|
|
531
531
|
super.firstUpdated(s), this._internals.setFormValue(this.value);
|
|
@@ -536,64 +536,77 @@ class l extends Vt(Nt(ut)) {
|
|
|
536
536
|
render() {
|
|
537
537
|
const {
|
|
538
538
|
assistiveText: s,
|
|
539
|
-
autocomplete:
|
|
539
|
+
autocomplete: f,
|
|
540
540
|
autoFocus: g,
|
|
541
541
|
disabled: c,
|
|
542
|
-
inputmode:
|
|
543
|
-
maxlength:
|
|
542
|
+
inputmode: M,
|
|
543
|
+
maxlength: I,
|
|
544
544
|
minlength: S,
|
|
545
545
|
min: y,
|
|
546
546
|
max: V,
|
|
547
|
-
name:
|
|
547
|
+
name: T,
|
|
548
548
|
pattern: N,
|
|
549
549
|
step: L,
|
|
550
|
-
placeholder:
|
|
551
|
-
readonly:
|
|
552
|
-
status:
|
|
553
|
-
type:
|
|
550
|
+
placeholder: $,
|
|
551
|
+
readonly: C,
|
|
552
|
+
status: b,
|
|
553
|
+
type: k,
|
|
554
554
|
value: H,
|
|
555
|
-
size:
|
|
555
|
+
size: O,
|
|
556
556
|
required: P
|
|
557
557
|
} = this;
|
|
558
|
-
return
|
|
558
|
+
return ut`
|
|
559
559
|
<div
|
|
560
560
|
class="c-textInput"
|
|
561
561
|
data-test-id="pie-text-input-shell"
|
|
562
|
-
data-pie-size=${
|
|
563
|
-
data-pie-status=${
|
|
562
|
+
data-pie-size=${m(O)}
|
|
563
|
+
data-pie-status=${m(b)}
|
|
564
564
|
?data-pie-disabled=${J(c)}
|
|
565
|
-
?data-pie-readonly=${
|
|
566
|
-
|
|
565
|
+
?data-pie-readonly=${C}>
|
|
566
|
+
<!-- The reason for separate slots for icons and text is that we cannot programmatically be aware of the
|
|
567
|
+
HTML used inside of the slot without breaking SSR in consuming applications (icons need to use different colours than text content)
|
|
568
|
+
Therefore, we provide two slots and advise consumers do not attempt to use both leading/trailing at the same time
|
|
569
|
+
as this would violate the design guidelines for this component. -->
|
|
570
|
+
<slot name="leadingIcon"></slot>
|
|
571
|
+
<slot name="leadingText"></slot>
|
|
567
572
|
<input
|
|
568
|
-
type=${
|
|
573
|
+
type=${m(k)}
|
|
569
574
|
.value=${J(H)}
|
|
570
|
-
name=${
|
|
575
|
+
name=${m(T)}
|
|
571
576
|
?disabled=${J(c)}
|
|
572
|
-
pattern=${
|
|
573
|
-
step=${
|
|
574
|
-
minlength=${
|
|
575
|
-
maxlength=${
|
|
576
|
-
min=${
|
|
577
|
-
max=${
|
|
578
|
-
autocomplete=${f
|
|
577
|
+
pattern=${m(N)}
|
|
578
|
+
step=${m(L)}
|
|
579
|
+
minlength=${m(S)}
|
|
580
|
+
maxlength=${m(I)}
|
|
581
|
+
min=${m(y)}
|
|
582
|
+
max=${m(V)}
|
|
583
|
+
autocomplete=${m(f)}
|
|
579
584
|
?autofocus=${g}
|
|
580
|
-
inputmode=${
|
|
581
|
-
placeholder=${
|
|
582
|
-
?readonly=${
|
|
585
|
+
inputmode=${m(M)}
|
|
586
|
+
placeholder=${m($)}
|
|
587
|
+
?readonly=${C}
|
|
583
588
|
?required=${P}
|
|
589
|
+
aria-describedby=${m(s ? Q : void 0)}
|
|
590
|
+
aria-invalid=${b === "error" ? "true" : "false"}
|
|
591
|
+
aria-errormessage="${m(b === "error" ? Q : void 0)}"
|
|
584
592
|
@input=${this.handleInput}
|
|
585
593
|
@change=${this.handleChange}
|
|
586
594
|
data-test-id="pie-text-input">
|
|
587
|
-
|
|
595
|
+
<!-- The reason for separate slots for icons and text is that we cannot programmatically be aware of the
|
|
596
|
+
HTML used inside of the slot without breaking SSR in consuming applications (icons need to use different colours than text content)
|
|
597
|
+
Therefore, we provide two slots and advise consumers do not attempt to use both leading/trailing at the same time
|
|
598
|
+
as this would violate the design guidelines for this component. -->
|
|
599
|
+
<slot name="trailingIcon"></slot>
|
|
600
|
+
<slot name="trailingText"></slot>
|
|
588
601
|
</div>
|
|
589
|
-
${s ?
|
|
602
|
+
${s ? ut`<pie-assistive-text id="${Q}" variant=${m(b)} data-test-id="pie-text-input-assistive-text">${s}</pie-assistive-text>` : At}`;
|
|
590
603
|
}
|
|
591
604
|
}
|
|
592
|
-
l.shadowRootOptions = { ...
|
|
593
|
-
l.styles =
|
|
605
|
+
l.shadowRootOptions = { ...pt.shadowRootOptions, delegatesFocus: !0 };
|
|
606
|
+
l.styles = Vt(Pt);
|
|
594
607
|
d([
|
|
595
608
|
u({ type: String, reflect: !0 }),
|
|
596
|
-
|
|
609
|
+
ht(X, Rt, A.type)
|
|
597
610
|
], l.prototype, "type", 2);
|
|
598
611
|
d([
|
|
599
612
|
u({ type: String })
|
|
@@ -636,7 +649,7 @@ d([
|
|
|
636
649
|
], l.prototype, "assistiveText", 2);
|
|
637
650
|
d([
|
|
638
651
|
u({ type: String }),
|
|
639
|
-
|
|
652
|
+
ht(X, _t, void 0)
|
|
640
653
|
], l.prototype, "status", 2);
|
|
641
654
|
d([
|
|
642
655
|
u({ type: Number })
|
|
@@ -654,17 +667,17 @@ d([
|
|
|
654
667
|
u({ type: Boolean })
|
|
655
668
|
], l.prototype, "required", 2);
|
|
656
669
|
d([
|
|
657
|
-
|
|
670
|
+
mt("input")
|
|
658
671
|
], l.prototype, "input", 2);
|
|
659
672
|
d([
|
|
660
|
-
|
|
673
|
+
mt("input")
|
|
661
674
|
], l.prototype, "focusTarget", 2);
|
|
662
|
-
Ot(
|
|
675
|
+
Ot(X, l);
|
|
663
676
|
export {
|
|
664
677
|
l as PieTextInput,
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
678
|
+
A as defaultProps,
|
|
679
|
+
Gt as inputModes,
|
|
680
|
+
Jt as sizes,
|
|
681
|
+
_t as statusTypes,
|
|
682
|
+
Rt as types
|
|
670
683
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -27,8 +27,10 @@ export declare const PieTextInput: React_2.ForwardRefExoticComponent<TextInputPr
|
|
|
27
27
|
* @tagname pie-text-input
|
|
28
28
|
* @event {InputEvent} input - when the input value is changed.
|
|
29
29
|
* @event {CustomEvent} change - when the input value is changed.
|
|
30
|
-
* @slot
|
|
31
|
-
* @slot
|
|
30
|
+
* @slot leadingText - Short text to display at the start of the input. Wrap the text in a <span>. Do not use with leadingIcon at the same time.
|
|
31
|
+
* @slot leadingIcon - An icon to display at the start of the input. Do not use with leadingText at the same time.
|
|
32
|
+
* @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.
|
|
33
|
+
* @slot trailingIcon - An icon to display at the end of the input. Do not use with trailingText at the same time.
|
|
32
34
|
*/
|
|
33
35
|
declare class PieTextInput_2 extends PieTextInput_base implements TextInputProps, PIEInputElement {
|
|
34
36
|
static shadowRootOptions: {
|
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.22.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@justeattakeaway/pie-assistive-text": "0.
|
|
45
|
+
"@justeattakeaway/pie-assistive-text": "0.4.0",
|
|
46
46
|
"@justeattakeaway/pie-webc-core": "0.23.0",
|
|
47
47
|
"element-internals-polyfill": "1.3.11"
|
|
48
48
|
},
|
package/src/index.ts
CHANGED
|
@@ -20,13 +20,16 @@ import 'element-internals-polyfill';
|
|
|
20
20
|
export * from './defs';
|
|
21
21
|
|
|
22
22
|
const componentSelector = 'pie-text-input';
|
|
23
|
+
const assistiveTextIdValue = 'assistive-text';
|
|
23
24
|
|
|
24
25
|
/**
|
|
25
26
|
* @tagname pie-text-input
|
|
26
27
|
* @event {InputEvent} input - when the input value is changed.
|
|
27
28
|
* @event {CustomEvent} change - when the input value is changed.
|
|
28
|
-
* @slot
|
|
29
|
-
* @slot
|
|
29
|
+
* @slot leadingText - Short text to display at the start of the input. Wrap the text in a <span>. Do not use with leadingIcon at the same time.
|
|
30
|
+
* @slot leadingIcon - An icon to display at the start of the input. Do not use with leadingText at the same time.
|
|
31
|
+
* @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.
|
|
32
|
+
* @slot trailingIcon - An icon to display at the end of the input. Do not use with trailingText at the same time.
|
|
30
33
|
*/
|
|
31
34
|
export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) implements TextInputProps, PIEInputElement {
|
|
32
35
|
static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
|
|
@@ -200,7 +203,12 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
|
|
|
200
203
|
data-pie-status=${ifDefined(status)}
|
|
201
204
|
?data-pie-disabled=${live(disabled)}
|
|
202
205
|
?data-pie-readonly=${readonly}>
|
|
203
|
-
|
|
206
|
+
<!-- The reason for separate slots for icons and text is that we cannot programmatically be aware of the
|
|
207
|
+
HTML used inside of the slot without breaking SSR in consuming applications (icons need to use different colours than text content)
|
|
208
|
+
Therefore, we provide two slots and advise consumers do not attempt to use both leading/trailing at the same time
|
|
209
|
+
as this would violate the design guidelines for this component. -->
|
|
210
|
+
<slot name="leadingIcon"></slot>
|
|
211
|
+
<slot name="leadingText"></slot>
|
|
204
212
|
<input
|
|
205
213
|
type=${ifDefined(type)}
|
|
206
214
|
.value=${live(value)}
|
|
@@ -218,12 +226,20 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
|
|
|
218
226
|
placeholder=${ifDefined(placeholder)}
|
|
219
227
|
?readonly=${readonly}
|
|
220
228
|
?required=${required}
|
|
229
|
+
aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
|
|
230
|
+
aria-invalid=${status === 'error' ? 'true' : 'false'}
|
|
231
|
+
aria-errormessage="${ifDefined(status === 'error' ? assistiveTextIdValue : undefined)}"
|
|
221
232
|
@input=${this.handleInput}
|
|
222
233
|
@change=${this.handleChange}
|
|
223
234
|
data-test-id="pie-text-input">
|
|
224
|
-
|
|
235
|
+
<!-- The reason for separate slots for icons and text is that we cannot programmatically be aware of the
|
|
236
|
+
HTML used inside of the slot without breaking SSR in consuming applications (icons need to use different colours than text content)
|
|
237
|
+
Therefore, we provide two slots and advise consumers do not attempt to use both leading/trailing at the same time
|
|
238
|
+
as this would violate the design guidelines for this component. -->
|
|
239
|
+
<slot name="trailingIcon"></slot>
|
|
240
|
+
<slot name="trailingText"></slot>
|
|
225
241
|
</div>
|
|
226
|
-
${assistiveText ? html`<pie-assistive-text variant=${ifDefined(status)} data-test-id="pie-text-input-assistive-text">${assistiveText}</pie-assistive-text>` : nothing}`;
|
|
242
|
+
${assistiveText ? html`<pie-assistive-text id="${assistiveTextIdValue}" variant=${ifDefined(status)} data-test-id="pie-text-input-assistive-text">${assistiveText}</pie-assistive-text>` : nothing}`;
|
|
227
243
|
}
|
|
228
244
|
|
|
229
245
|
// Renders a `CSSResult` generated from SCSS by Vite
|
package/src/text-input.scss
CHANGED
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
--icon-display-override: block;
|
|
19
19
|
--icon-size-override: 24px;
|
|
20
20
|
|
|
21
|
-
|
|
22
21
|
height: var(--input-height);
|
|
23
22
|
border: 1px solid var(--input-border-color);
|
|
24
23
|
border-radius: var(--input-radius);
|
|
@@ -32,7 +31,7 @@
|
|
|
32
31
|
flex-wrap: nowrap;
|
|
33
32
|
align-items: center;
|
|
34
33
|
background-color: var(--input-container-color);
|
|
35
|
-
color: var(--input-text-color-leading-trailing-content); // Applies to the
|
|
34
|
+
color: var(--input-text-color-leading-trailing-content); // Applies to the leadingText and trailingText slot content
|
|
36
35
|
cursor: var(--input-cursor);
|
|
37
36
|
|
|
38
37
|
&[data-pie-size="large"] {
|
|
@@ -49,26 +48,35 @@
|
|
|
49
48
|
--input-border-color: var(--dt-color-support-error);
|
|
50
49
|
}
|
|
51
50
|
|
|
52
|
-
::slotted([slot="
|
|
51
|
+
::slotted([slot="leadingText"]),
|
|
52
|
+
::slotted([slot="leadingIcon"]) {
|
|
53
53
|
margin-inline-end: var(--input-gap);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
::slotted([slot="
|
|
56
|
+
::slotted([slot="trailingText"]),
|
|
57
|
+
::slotted([slot="trailingIcon"]) {
|
|
57
58
|
margin-inline-start: var(--input-gap);
|
|
58
59
|
}
|
|
59
60
|
|
|
60
61
|
@supports (gap: var(--input-gap)) {
|
|
61
62
|
gap: var(--input-gap);
|
|
62
63
|
|
|
63
|
-
::slotted([slot="
|
|
64
|
+
::slotted([slot="leadingText"]),
|
|
65
|
+
::slotted([slot="leadingIcon"]) {
|
|
64
66
|
margin-inline-end: 0;
|
|
65
67
|
}
|
|
66
68
|
|
|
67
|
-
::slotted([slot="
|
|
69
|
+
::slotted([slot="trailingText"]),
|
|
70
|
+
::slotted([slot="trailingIcon"]) {
|
|
68
71
|
margin-inline-start: 0;
|
|
69
72
|
}
|
|
70
73
|
}
|
|
71
74
|
|
|
75
|
+
&:not([data-pie-disabled]) ::slotted([slot="leadingIcon"]),
|
|
76
|
+
&:not([data-pie-disabled]) ::slotted([slot="trailingIcon"]) {
|
|
77
|
+
color: var(--dt-color-content-subdued);
|
|
78
|
+
}
|
|
79
|
+
|
|
72
80
|
@media (hover: hover) {
|
|
73
81
|
&:hover {
|
|
74
82
|
--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))));
|
|
@@ -77,7 +85,7 @@
|
|
|
77
85
|
|
|
78
86
|
&[data-pie-readonly] {
|
|
79
87
|
--input-container-color: var(--dt-color-disabled-01);
|
|
80
|
-
--input-border-color: var(--dt-color-
|
|
88
|
+
--input-border-color: var(--dt-color-interactive-form);
|
|
81
89
|
}
|
|
82
90
|
|
|
83
91
|
// Ensure that if an input is readonly and disabled, the disabled styles take precedence
|