@justeattakeaway/pie-text-input 0.21.0 → 0.22.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/custom-elements.json +12 -4
- package/dist/index.d.ts +4 -2
- package/dist/index.js +133 -123
- package/dist/react.d.ts +4 -2
- package/package.json +2 -2
- package/src/index.ts +16 -4
- package/src/text-input.scss +15 -7
package/README.md
CHANGED
|
@@ -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
|
@@ -2,17 +2,17 @@ import { LitElement as pt, html as ut, nothing as At, unsafeCSS as Vt } from "li
|
|
|
2
2
|
import { property as u, query as mt } from "lit/decorators.js";
|
|
3
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 Nt, RtlMixin 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 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=
|
|
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
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
|
-
(function(
|
|
15
|
-
const s = /* @__PURE__ */ new WeakMap(),
|
|
14
|
+
(function(E) {
|
|
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,16 +56,16 @@ const Pt = `*,*: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
67
|
set(n) {
|
|
68
|
-
i = n, e.isConnected ? e.setAttribute(
|
|
68
|
+
i = n, e.isConnected ? e.setAttribute(o, n) : T.set(e, t);
|
|
69
69
|
}
|
|
70
70
|
});
|
|
71
71
|
}
|
|
@@ -81,63 +81,63 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
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 &&
|
|
86
|
+
i.formDisabledCallback && o && B(i, e.disabled), i = a.nextNode();
|
|
87
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 (b.has(
|
|
108
|
-
const p = b.get(
|
|
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
|
-
O(v), v =
|
|
119
|
+
O(v), v = x.nextNode();
|
|
120
120
|
}
|
|
121
|
-
|
|
122
|
-
}), n.forEach((
|
|
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
|
}
|
|
128
|
-
function
|
|
128
|
+
function ft(e) {
|
|
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
137
|
const gt = (e) => {
|
|
138
138
|
var t, a;
|
|
139
|
-
const i = new MutationObserver(
|
|
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 }),
|
|
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 }), $.set(e, i);
|
|
141
141
|
};
|
|
142
142
|
z() && new MutationObserver(W);
|
|
143
143
|
const q = {
|
|
@@ -162,8 +162,8 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
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((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),
|
|
166
|
-
e.toggleAttribute("internals-invalid",
|
|
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);
|
|
167
167
|
}, vt = (e) => {
|
|
168
168
|
_(D(e.target));
|
|
169
169
|
}, bt = (e) => {
|
|
@@ -172,13 +172,13 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
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);
|
|
@@ -189,8 +189,8 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
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]);
|
|
@@ -204,10 +204,10 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
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);
|
|
@@ -216,12 +216,12 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
216
216
|
function z() {
|
|
217
217
|
return typeof MutationObserver < "u";
|
|
218
218
|
}
|
|
219
|
-
class
|
|
219
|
+
class Et {
|
|
220
220
|
constructor() {
|
|
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 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 =
|
|
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 Pt = `*,*: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() {
|
|
@@ -259,26 +259,26 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
259
259
|
}), a;
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
|
-
function
|
|
262
|
+
function rt(e, t, a, i) {
|
|
263
263
|
if (a === "a" && !i)
|
|
264
264
|
throw new TypeError("Private accessor was defined without a getter");
|
|
265
265
|
if (typeof t == "function" ? e !== t || !i : !t.has(e))
|
|
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
|
|
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
|
|
278
|
+
var F;
|
|
279
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 Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
286
286
|
Object.freeze(this);
|
|
287
287
|
}
|
|
288
288
|
get length() {
|
|
289
|
-
return
|
|
289
|
+
return rt(this, F, "f").length;
|
|
290
290
|
}
|
|
291
|
-
[(
|
|
292
|
-
return
|
|
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,26 +298,26 @@ const Pt = `*,*: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
306
|
function a(...n) {
|
|
307
|
-
let
|
|
308
|
-
return it(this,
|
|
307
|
+
let r = e.apply(this, n);
|
|
308
|
+
return it(this, r, "checkValidity");
|
|
309
309
|
}
|
|
310
310
|
function i(...n) {
|
|
311
|
-
let
|
|
312
|
-
return it(this,
|
|
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
316
|
get(...n) {
|
|
317
|
-
const
|
|
318
|
-
if (
|
|
319
|
-
return
|
|
320
|
-
const p = Array.from(
|
|
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
321
|
return new St(p);
|
|
322
322
|
}
|
|
323
323
|
});
|
|
@@ -329,14 +329,14 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
329
329
|
constructor(t) {
|
|
330
330
|
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
331
331
|
throw new TypeError("Illegal constructor");
|
|
332
|
-
const a = t.getRootNode(), i = new
|
|
333
|
-
this.states = new j(t), s.set(this, t),
|
|
332
|
+
const a = t.getRootNode(), i = new Et();
|
|
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
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,
|
|
@@ -363,7 +363,7 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
363
363
|
const t = s.get(this);
|
|
364
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
|
-
const a = this.checkValidity(), i =
|
|
366
|
+
const a = this.checkValidity(), i = L.get(this);
|
|
367
367
|
if (i && !t.constructor.formAssociated)
|
|
368
368
|
throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
|
|
369
369
|
return !a && i && (t.focus(), i.focus()), a;
|
|
@@ -376,29 +376,29 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
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
|
|
379
|
+
t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, o]) => {
|
|
380
|
+
if (typeof o == "string") {
|
|
381
381
|
const n = tt(a, this);
|
|
382
|
-
n.name = i, n.value =
|
|
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 (w(
|
|
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
|
-
|
|
392
|
-
const n =
|
|
393
|
-
for (const
|
|
394
|
-
|
|
395
|
-
Object.keys(
|
|
396
|
-
const
|
|
397
|
-
delete
|
|
398
|
-
const { valid: p } = It(n,
|
|
391
|
+
L.set(this, i);
|
|
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
|
-
M.set(this, p ? "" : a),
|
|
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);
|
|
@@ -410,14 +410,14 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
410
410
|
}
|
|
411
411
|
get validity() {
|
|
412
412
|
const t = s.get(this);
|
|
413
|
-
return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."),
|
|
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
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
|
-
function
|
|
420
|
+
function Ft() {
|
|
421
421
|
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
|
|
422
422
|
return !1;
|
|
423
423
|
class e extends HTMLElement {
|
|
@@ -452,14 +452,14 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
452
452
|
if (!lt) {
|
|
453
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
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() {
|
|
@@ -473,35 +473,35 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
|
|
|
473
473
|
return new st(this);
|
|
474
474
|
}), typeof Element < "u") {
|
|
475
475
|
let t = function(...i) {
|
|
476
|
-
const
|
|
477
|
-
if (N.set(this,
|
|
476
|
+
const o = a.apply(this, i);
|
|
477
|
+
if (N.set(this, o), z()) {
|
|
478
478
|
const n = new MutationObserver(W);
|
|
479
|
-
window.ShadyDOM ? n.observe(this, q) : n.observe(
|
|
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 || (
|
|
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 Dt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, d = (
|
|
493
|
-
for (var c = g > 1 ? void 0 : g ? zt(s,
|
|
494
|
-
(I =
|
|
495
|
-
return g && c && Dt(s,
|
|
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
497
|
const X = "pie-text-input", Q = "assistive-text";
|
|
498
|
-
class l extends Nt(
|
|
498
|
+
class l extends Nt(Lt(pt)) {
|
|
499
499
|
constructor() {
|
|
500
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
|
/**
|
|
@@ -536,7 +536,7 @@ class l extends Nt($t(pt)) {
|
|
|
536
536
|
render() {
|
|
537
537
|
const {
|
|
538
538
|
assistiveText: s,
|
|
539
|
-
autocomplete:
|
|
539
|
+
autocomplete: f,
|
|
540
540
|
autoFocus: g,
|
|
541
541
|
disabled: c,
|
|
542
542
|
inputmode: M,
|
|
@@ -544,13 +544,13 @@ class l extends Nt($t(pt)) {
|
|
|
544
544
|
minlength: S,
|
|
545
545
|
min: y,
|
|
546
546
|
max: V,
|
|
547
|
-
name:
|
|
547
|
+
name: T,
|
|
548
548
|
pattern: N,
|
|
549
|
-
step:
|
|
550
|
-
placeholder:
|
|
551
|
-
readonly:
|
|
549
|
+
step: L,
|
|
550
|
+
placeholder: $,
|
|
551
|
+
readonly: C,
|
|
552
552
|
status: b,
|
|
553
|
-
type:
|
|
553
|
+
type: k,
|
|
554
554
|
value: H,
|
|
555
555
|
size: O,
|
|
556
556
|
required: P
|
|
@@ -562,24 +562,29 @@ class l extends Nt($t(pt)) {
|
|
|
562
562
|
data-pie-size=${m(O)}
|
|
563
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=${m(
|
|
573
|
+
type=${m(k)}
|
|
569
574
|
.value=${J(H)}
|
|
570
|
-
name=${m(
|
|
575
|
+
name=${m(T)}
|
|
571
576
|
?disabled=${J(c)}
|
|
572
577
|
pattern=${m(N)}
|
|
573
|
-
step=${m(
|
|
578
|
+
step=${m(L)}
|
|
574
579
|
minlength=${m(S)}
|
|
575
580
|
maxlength=${m(I)}
|
|
576
581
|
min=${m(y)}
|
|
577
582
|
max=${m(V)}
|
|
578
|
-
autocomplete=${m(
|
|
583
|
+
autocomplete=${m(f)}
|
|
579
584
|
?autofocus=${g}
|
|
580
585
|
inputmode=${m(M)}
|
|
581
|
-
placeholder=${m(
|
|
582
|
-
?readonly=${
|
|
586
|
+
placeholder=${m($)}
|
|
587
|
+
?readonly=${C}
|
|
583
588
|
?required=${P}
|
|
584
589
|
aria-describedby=${m(s ? Q : void 0)}
|
|
585
590
|
aria-invalid=${b === "error" ? "true" : "false"}
|
|
@@ -587,7 +592,12 @@ class l extends Nt($t(pt)) {
|
|
|
587
592
|
@input=${this.handleInput}
|
|
588
593
|
@change=${this.handleChange}
|
|
589
594
|
data-test-id="pie-text-input">
|
|
590
|
-
|
|
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>
|
|
591
601
|
</div>
|
|
592
602
|
${s ? ut`<pie-assistive-text id="${Q}" variant=${m(b)} data-test-id="pie-text-input-assistive-text">${s}</pie-assistive-text>` : At}`;
|
|
593
603
|
}
|
|
@@ -596,7 +606,7 @@ l.shadowRootOptions = { ...pt.shadowRootOptions, delegatesFocus: !0 };
|
|
|
596
606
|
l.styles = Vt(Pt);
|
|
597
607
|
d([
|
|
598
608
|
u({ type: String, reflect: !0 }),
|
|
599
|
-
|
|
609
|
+
ht(X, Rt, A.type)
|
|
600
610
|
], l.prototype, "type", 2);
|
|
601
611
|
d([
|
|
602
612
|
u({ type: String })
|
|
@@ -639,7 +649,7 @@ d([
|
|
|
639
649
|
], l.prototype, "assistiveText", 2);
|
|
640
650
|
d([
|
|
641
651
|
u({ type: String }),
|
|
642
|
-
|
|
652
|
+
ht(X, _t, void 0)
|
|
643
653
|
], l.prototype, "status", 2);
|
|
644
654
|
d([
|
|
645
655
|
u({ type: Number })
|
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.1",
|
|
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
|
@@ -26,8 +26,10 @@ const assistiveTextIdValue = 'assistive-text';
|
|
|
26
26
|
* @tagname pie-text-input
|
|
27
27
|
* @event {InputEvent} input - when the input value is changed.
|
|
28
28
|
* @event {CustomEvent} change - when the input value is changed.
|
|
29
|
-
* @slot
|
|
30
|
-
* @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.
|
|
31
33
|
*/
|
|
32
34
|
export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) implements TextInputProps, PIEInputElement {
|
|
33
35
|
static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
|
|
@@ -201,7 +203,12 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
|
|
|
201
203
|
data-pie-status=${ifDefined(status)}
|
|
202
204
|
?data-pie-disabled=${live(disabled)}
|
|
203
205
|
?data-pie-readonly=${readonly}>
|
|
204
|
-
|
|
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>
|
|
205
212
|
<input
|
|
206
213
|
type=${ifDefined(type)}
|
|
207
214
|
.value=${live(value)}
|
|
@@ -225,7 +232,12 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
|
|
|
225
232
|
@input=${this.handleInput}
|
|
226
233
|
@change=${this.handleChange}
|
|
227
234
|
data-test-id="pie-text-input">
|
|
228
|
-
|
|
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>
|
|
229
241
|
</div>
|
|
230
242
|
${assistiveText ? html`<pie-assistive-text id="${assistiveTextIdValue}" variant=${ifDefined(status)} data-test-id="pie-text-input-assistive-text">${assistiveText}</pie-assistive-text>` : nothing}`;
|
|
231
243
|
}
|
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
|