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