@justeattakeaway/pie-textarea 0.15.6 → 0.16.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.
Files changed (4) hide show
  1. package/custom-elements.json +4 -4
  2. package/dist/index.js +180 -183
  3. package/package.json +3 -3
  4. package/src/index.ts +3 -3
package/custom-elements.json CHANGED
@@ -42,7 +42,7 @@
42
42
  "type": {
43
43
  "text": "DefaultProps"
44
44
  },
45
- "default": "{\n disabled: false,\n size: 'medium',\n resize: 'auto',\n value: '',\n placeholder: '',\n status: 'default',\n autoFocus: false,\n readonly: false,\n required: false,\n}",
45
+ "default": "{\r\n disabled: false,\r\n size: 'medium',\r\n resize: 'auto',\r\n value: '',\r\n placeholder: '',\r\n status: 'default',\r\n autoFocus: false,\r\n readonly: false,\r\n required: false,\r\n}",
46
46
  "description": "Default values for optional properties that have default fallback values in the component."
47
47
  }
48
48
  ],
@@ -230,7 +230,7 @@
230
230
  "text": "ValidityState"
231
231
  },
232
232
  "privacy": "public",
233
- "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
233
+ "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
234
234
  "readonly": true
235
235
  },
236
236
  {
@@ -251,7 +251,7 @@
251
251
  "description": "The latest disabled state of the input."
252
252
  }
253
253
  ],
254
- "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
254
+ "description": "Called after the disabled state of the element changes,\r\neither because the disabled attribute of this element was added or removed;\r\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
255
255
  },
256
256
  {
257
257
  "kind": "method",
@@ -262,7 +262,7 @@
262
262
  "text": "void"
263
263
  }
264
264
  },
265
- "description": "Called when the form that owns this component is reset.\nResets the value to the default value."
265
+ "description": "Called when the form that owns this component is reset.\r\nResets the value to the default value."
266
266
  },
267
267
  {
268
268
  "kind": "method",
package/dist/index.js CHANGED
@@ -1,114 +1,108 @@
1
- import { LitElement as L, nothing as G, html as F, unsafeCSS as H } from "lit";
2
- import { property as u, query as q } from "lit/decorators.js";
3
- import { classMap as K } from "lit/directives/class-map.js";
4
- import { ifDefined as g } from "lit/directives/if-defined.js";
5
- import { live as U } from "lit/directives/live.js";
1
+ import { LitElement as D, nothing as U, html as R, unsafeCSS as G } from "lit";
2
+ import { property as c, query as L } from "lit/decorators.js";
3
+ import { classMap as H } from "lit/directives/class-map.js";
4
+ import { ifDefined as b } from "lit/directives/if-defined.js";
5
+ import { live as K } from "lit/directives/live.js";
6
6
  import "@justeattakeaway/pie-assistive-text";
7
- import { FormControlMixin as X, RtlMixin as J, wrapNativeEvent as Q, validPropertyValues as E, defineCustomElement as Y } from "@justeattakeaway/pie-webc-core";
8
- var Z = Object.defineProperty, ee = (e, t, r, s) => {
9
- for (var a = void 0, l = e.length - 1, d; l >= 0; l--)
10
- (d = e[l]) && (a = d(t, r, a) || a);
11
- return a && Z(t, r, a), a;
12
- };
13
- class B extends L {
14
- constructor() {
15
- super(...arguments), this.v = "0.15.6";
7
+ import { FormControlMixin as X, RtlMixin as J, wrapNativeEvent as Q, validPropertyValues as O, safeCustomElement as Y } from "@justeattakeaway/pie-webc-core";
8
+ const _ = class _ extends D {
9
+ willUpdate() {
10
+ this.getAttribute("v") || this.setAttribute("v", _.v);
16
11
  }
17
- }
18
- ee([
19
- u({ type: String, reflect: !0 })
20
- ], B.prototype, "v");
21
- var _ = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
22
- function te(e) {
12
+ };
13
+ _.v = "0.16.1";
14
+ let w = _;
15
+ var $ = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
16
+ function Z(e) {
23
17
  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
24
18
  }
25
- var A = "Expected a function", R = NaN, re = "[object Symbol]", ae = /^\s+|\s+$/g, ie = /^[-+]0x[0-9a-f]+$/i, oe = /^0b[01]+$/i, ne = /^0o[0-7]+$/i, se = parseInt, le = typeof _ == "object" && _ && _.Object === Object && _, de = typeof self == "object" && self && self.Object === Object && self, ce = le || de || Function("return this")(), ue = Object.prototype, pe = ue.toString, he = Math.max, fe = Math.min, W = function() {
26
- return ce.Date.now();
19
+ var q = "Expected a function", M = NaN, ee = "[object Symbol]", te = /^\s+|\s+$/g, re = /^[-+]0x[0-9a-f]+$/i, ae = /^0b[01]+$/i, ie = /^0o[0-7]+$/i, oe = parseInt, ne = typeof $ == "object" && $ && $.Object === Object && $, se = typeof self == "object" && self && self.Object === Object && self, le = ne || se || Function("return this")(), de = Object.prototype, ce = de.toString, ue = Math.max, pe = Math.min, W = function() {
20
+ return le.Date.now();
27
21
  };
28
- function xe(e, t, r) {
29
- var s, a, l, d, c, h, v = 0, z = !1, f = !1, m = !0;
22
+ function he(e, t, r) {
23
+ var n, a, p, l, d, h, x = 0, g = !1, v = !1, m = !0;
30
24
  if (typeof e != "function")
31
- throw new TypeError(A);
32
- t = M(t) || 0, C(r) && (z = !!r.leading, f = "maxWait" in r, l = f ? he(M(r.maxWait) || 0, t) : l, m = "trailing" in r ? !!r.trailing : m);
33
- function y(i) {
34
- var x = s, k = a;
35
- return s = a = void 0, v = i, d = e.apply(k, x), d;
25
+ throw new TypeError(q);
26
+ t = A(t) || 0, T(r) && (g = !!r.leading, v = "maxWait" in r, p = v ? ue(A(r.maxWait) || 0, t) : p, m = "trailing" in r ? !!r.trailing : m);
27
+ function C(i) {
28
+ var f = n, y = a;
29
+ return n = a = void 0, x = i, l = e.apply(y, f), l;
36
30
  }
37
- function D(i) {
38
- return v = i, c = setTimeout($, t), z ? y(i) : d;
31
+ function B(i) {
32
+ return x = i, d = setTimeout(k, t), g ? C(i) : l;
39
33
  }
40
34
  function P(i) {
41
- var x = i - h, k = i - v, I = t - x;
42
- return f ? fe(I, l - k) : I;
35
+ var f = i - h, y = i - x, F = t - f;
36
+ return v ? pe(F, p - y) : F;
43
37
  }
44
- function O(i) {
45
- var x = i - h, k = i - v;
46
- return h === void 0 || x >= t || x < 0 || f && k >= l;
38
+ function E(i) {
39
+ var f = i - h, y = i - x;
40
+ return h === void 0 || f >= t || f < 0 || v && y >= p;
47
41
  }
48
- function $() {
42
+ function k() {
49
43
  var i = W();
50
- if (O(i))
51
- return w(i);
52
- c = setTimeout($, P(i));
44
+ if (E(i))
45
+ return I(i);
46
+ d = setTimeout(k, P(i));
53
47
  }
54
- function w(i) {
55
- return c = void 0, m && s ? y(i) : (s = a = void 0, d);
48
+ function I(i) {
49
+ return d = void 0, m && n ? C(i) : (n = a = void 0, l);
56
50
  }
57
51
  function V() {
58
- c !== void 0 && clearTimeout(c), v = 0, s = h = a = c = void 0;
52
+ d !== void 0 && clearTimeout(d), x = 0, n = h = a = d = void 0;
59
53
  }
60
54
  function N() {
61
- return c === void 0 ? d : w(W());
55
+ return d === void 0 ? l : I(W());
62
56
  }
63
57
  function S() {
64
- var i = W(), x = O(i);
65
- if (s = arguments, a = this, h = i, x) {
66
- if (c === void 0)
67
- return D(h);
68
- if (f)
69
- return c = setTimeout($, t), y(h);
58
+ var i = W(), f = E(i);
59
+ if (n = arguments, a = this, h = i, f) {
60
+ if (d === void 0)
61
+ return B(h);
62
+ if (v)
63
+ return d = setTimeout(k, t), C(h);
70
64
  }
71
- return c === void 0 && (c = setTimeout($, t)), d;
65
+ return d === void 0 && (d = setTimeout(k, t)), l;
72
66
  }
73
67
  return S.cancel = V, S.flush = N, S;
74
68
  }
75
- function ve(e, t, r) {
76
- var s = !0, a = !0;
69
+ function fe(e, t, r) {
70
+ var n = !0, a = !0;
77
71
  if (typeof e != "function")
78
- throw new TypeError(A);
79
- return C(r) && (s = "leading" in r ? !!r.leading : s, a = "trailing" in r ? !!r.trailing : a), xe(e, t, {
80
- leading: s,
72
+ throw new TypeError(q);
73
+ return T(r) && (n = "leading" in r ? !!r.leading : n, a = "trailing" in r ? !!r.trailing : a), he(e, t, {
74
+ leading: n,
81
75
  maxWait: t,
82
76
  trailing: a
83
77
  });
84
78
  }
85
- function C(e) {
79
+ function T(e) {
86
80
  var t = typeof e;
87
81
  return !!e && (t == "object" || t == "function");
88
82
  }
89
- function ge(e) {
83
+ function xe(e) {
90
84
  return !!e && typeof e == "object";
91
85
  }
92
- function be(e) {
93
- return typeof e == "symbol" || ge(e) && pe.call(e) == re;
86
+ function ve(e) {
87
+ return typeof e == "symbol" || xe(e) && ce.call(e) == ee;
94
88
  }
95
- function M(e) {
89
+ function A(e) {
96
90
  if (typeof e == "number")
97
91
  return e;
98
- if (be(e))
99
- return R;
100
- if (C(e)) {
92
+ if (ve(e))
93
+ return M;
94
+ if (T(e)) {
101
95
  var t = typeof e.valueOf == "function" ? e.valueOf() : e;
102
- e = C(t) ? t + "" : t;
96
+ e = T(t) ? t + "" : t;
103
97
  }
104
98
  if (typeof e != "string")
105
99
  return e === 0 ? e : +e;
106
- e = e.replace(ae, "");
107
- var r = oe.test(e);
108
- return r || ne.test(e) ? se(e.slice(2), r ? 2 : 8) : ie.test(e) ? R : +e;
100
+ e = e.replace(te, "");
101
+ var r = ae.test(e);
102
+ return r || ie.test(e) ? oe(e.slice(2), r ? 2 : 8) : re.test(e) ? M : +e;
109
103
  }
110
- var me = ve;
111
- const ye = /* @__PURE__ */ te(me), ke = "*,*:after,*:before{box-sizing:inherit}.c-textareaWrapper{--textarea-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--textarea-border-thickness: 1px;--textarea-resize: none;--textarea-padding-inline: var(--dt-spacing-c);--textarea-padding-block: var(--dt-spacing-b);--textarea-background-color: var(--dt-color-container-default);--textarea-border-color: var(--dt-color-border-form);--textarea-content-color: var(--dt-color-content-default);--textarea-placeholder-color: var(--dt-color-content-placeholder);--textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2));line-height:0;padding:var(--dt-spacing-a);border:var(--textarea-border-thickness) solid var(--textarea-border-color);background-color:var(--textarea-background-color);border-radius:var(--dt-radius-rounded-c);inline-size:100%}.c-textareaWrapper textarea{font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:var(--textarea-line-height);font-family:var(--dt-font-body-l-family);resize:var(--textarea-resize);border:none;background-color:var(--textarea-background-color);color:var(--textarea-content-color);block-size:var(--textarea-height);max-block-size:var(--textarea-max-height);min-block-size:var(--textarea-min-height);inline-size:100%;padding-block-start:var(--textarea-padding-block);padding-block-end:var(--textarea-padding-block);padding-inline-start:var(--textarea-padding-inline);padding-inline-end:var(--textarea-padding-inline)}.c-textareaWrapper textarea:focus{box-shadow:none;outline:none}.c-textareaWrapper textarea::placeholder{color:var(--textarea-placeholder-color);opacity:1}.c-textareaWrapper.c-textarea--readonly{--textarea-background-color: var(--dt-color-container-subtle);--textarea-border-color: var(--dt-color-border-form)}.c-textareaWrapper.is-disabled{--textarea-background-color: var(--dt-color-disabled-01);--textarea-border-color: var(--dt-color-disabled-01);--textarea-content-color: var(--dt-color-content-disabled);--textarea-placeholder-color: var(--dt-color-content-disabled)}@media (hover: hover){.c-textareaWrapper:hover:not(.is-disabled,.c-textarea--readonly){--textarea-background-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-textareaWrapper:hover:not(.is-disabled,.c-textarea--readonly){--textarea-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-textareaWrapper:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-textareaWrapper.c-textarea--large{--textarea-padding-block: var(--dt-spacing-c)}.c-textareaWrapper.c-textarea--small{--textarea-padding-block: var(--dt-spacing-a)}.c-textareaWrapper.c-textarea--resize-manual{--textarea-resize: vertical;--textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2))}@media (pointer: coarse){.c-textareaWrapper.c-textarea--resize-manual{--textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-resize: none}}.c-textareaWrapper.c-textarea--resize-auto{--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-min-height: var(--textarea-height)}.c-textareaWrapper.c-textarea--error{--textarea-border-color: var(--dt-color-support-error)}", ze = ["small", "medium", "large"], $e = ["auto", "manual"], _e = ["default", "success", "error"], p = {
104
+ var ge = fe;
105
+ const be = /* @__PURE__ */ Z(ge), me = "*,*:after,*:before{box-sizing:inherit}.c-textareaWrapper{--textarea-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--textarea-border-thickness: 1px;--textarea-resize: none;--textarea-padding-inline: var(--dt-spacing-c);--textarea-padding-block: var(--dt-spacing-b);--textarea-background-color: var(--dt-color-container-default);--textarea-border-color: var(--dt-color-border-form);--textarea-content-color: var(--dt-color-content-default);--textarea-placeholder-color: var(--dt-color-content-placeholder);--textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2));line-height:0;padding:var(--dt-spacing-a);border:var(--textarea-border-thickness) solid var(--textarea-border-color);background-color:var(--textarea-background-color);border-radius:var(--dt-radius-rounded-c);inline-size:100%}.c-textareaWrapper textarea{font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:var(--textarea-line-height);font-family:var(--dt-font-body-l-family);resize:var(--textarea-resize);border:none;background-color:var(--textarea-background-color);color:var(--textarea-content-color);block-size:var(--textarea-height);max-block-size:var(--textarea-max-height);min-block-size:var(--textarea-min-height);inline-size:100%;padding-block-start:var(--textarea-padding-block);padding-block-end:var(--textarea-padding-block);padding-inline-start:var(--textarea-padding-inline);padding-inline-end:var(--textarea-padding-inline)}.c-textareaWrapper textarea:focus{box-shadow:none;outline:none}.c-textareaWrapper textarea::placeholder{color:var(--textarea-placeholder-color);opacity:1}.c-textareaWrapper.c-textarea--readonly{--textarea-background-color: var(--dt-color-container-subtle);--textarea-border-color: var(--dt-color-border-form)}.c-textareaWrapper.is-disabled{--textarea-background-color: var(--dt-color-disabled-01);--textarea-border-color: var(--dt-color-disabled-01);--textarea-content-color: var(--dt-color-content-disabled);--textarea-placeholder-color: var(--dt-color-content-disabled)}@media (hover: hover){.c-textareaWrapper:hover:not(.is-disabled,.c-textarea--readonly){--textarea-background-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-textareaWrapper:hover:not(.is-disabled,.c-textarea--readonly){--textarea-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-textareaWrapper:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-textareaWrapper.c-textarea--large{--textarea-padding-block: var(--dt-spacing-c)}.c-textareaWrapper.c-textarea--small{--textarea-padding-block: var(--dt-spacing-a)}.c-textareaWrapper.c-textarea--resize-manual{--textarea-resize: vertical;--textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2))}@media (pointer: coarse){.c-textareaWrapper.c-textarea--resize-manual{--textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-resize: none}}.c-textareaWrapper.c-textarea--resize-auto{--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-min-height: var(--textarea-height)}.c-textareaWrapper.c-textarea--error{--textarea-border-color: var(--dt-color-support-error)}", ye = ["small", "medium", "large"], ze = ["auto", "manual"], ke = ["default", "success", "error"], u = {
112
106
  disabled: !1,
113
107
  size: "medium",
114
108
  resize: "auto",
@@ -119,38 +113,39 @@ const ye = /* @__PURE__ */ te(me), ke = "*,*:after,*:before{box-sizing:inherit}.
119
113
  readonly: !1,
120
114
  required: !1
121
115
  };
122
- var Ce = Object.defineProperty, n = (e, t, r, s) => {
123
- for (var a = void 0, l = e.length - 1, d; l >= 0; l--)
124
- (d = e[l]) && (a = d(t, r, a) || a);
125
- return a && Ce(t, r, a), a;
116
+ var $e = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, s = (e, t, r, n) => {
117
+ for (var a = n > 1 ? void 0 : n ? Te(t, r) : t, p = e.length - 1, l; p >= 0; p--)
118
+ (l = e[p]) && (a = (n ? l(t, r, a) : l(a)) || a);
119
+ return n && a && $e(t, r, a), a;
126
120
  };
127
- const b = "pie-textarea", j = "assistive-text", T = class T extends X(J(B)) {
121
+ const z = "pie-textarea", j = "assistive-text";
122
+ let o = class extends X(J(w)) {
128
123
  constructor() {
129
- super(...arguments), this.value = p.value, this.disabled = p.disabled, this.size = p.size, this.resize = p.resize, this.readonly = p.readonly, this.autoFocus = p.autoFocus, this.required = p.required, this.status = p.status, this._throttledResize = ye(() => {
124
+ super(...arguments), this.value = u.value, this.disabled = u.disabled, this.size = u.size, this.resize = u.resize, this.readonly = u.readonly, this.autoFocus = u.autoFocus, this.required = u.required, this.status = u.status, this._throttledResize = be(() => {
130
125
  this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
131
- }, 100), this.handleInput = (t, r) => {
132
- t ? this.value = t.target.value : r && (this.value = r), this._internals.setFormValue(this.value), this.handleResize();
133
- }, this.handleChange = (t) => {
134
- const r = Q(t);
135
- this.dispatchEvent(r);
136
- }, this.handleKeyDown = (t) => {
137
- t.key === "Enter" && t.stopPropagation();
126
+ }, 100), this.handleInput = (e, t) => {
127
+ e ? this.value = e.target.value : t && (this.value = t), this._internals.setFormValue(this.value), this.handleResize();
128
+ }, this.handleChange = (e) => {
129
+ const t = Q(e);
130
+ this.dispatchEvent(t);
131
+ }, this.handleKeyDown = (e) => {
132
+ e.key === "Enter" && e.stopPropagation();
138
133
  };
139
134
  }
140
135
  connectedCallback() {
141
136
  super.connectedCallback(), this._abortController = new AbortController();
142
- const { signal: t } = this._abortController;
143
- window.addEventListener("resize", () => this.handleResize(), { signal: t });
137
+ const { signal: e } = this._abortController;
138
+ window.addEventListener("resize", () => this.handleResize(), { signal: e });
144
139
  }
145
140
  disconnectedCallback() {
146
141
  super.disconnectedCallback(), this._abortController.abort();
147
142
  }
148
143
  firstUpdated() {
149
- const { signal: t } = this._abortController;
150
- this._textarea.addEventListener("keydown", this.handleKeyDown, { signal: t }), this._internals.setFormValue(this.value);
144
+ const { signal: e } = this._abortController;
145
+ this._textarea.addEventListener("keydown", this.handleKeyDown, { signal: e }), this._internals.setFormValue(this.value);
151
146
  }
152
- updated(t) {
153
- t.has("value") && this.handleInput(null, this.value), this.resize === "auto" && (t.has("resize") || t.has("size")) && this.handleResize();
147
+ updated(e) {
148
+ e.has("value") && this.handleInput(null, this.value), this.resize === "auto" && (e.has("resize") || e.has("size")) && this.handleResize();
154
149
  }
155
150
  /**
156
151
  * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -165,69 +160,69 @@ const b = "pie-textarea", j = "assistive-text", T = class T extends X(J(B)) {
165
160
  * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
166
161
  * @param disabled - The latest disabled state of the input.
167
162
  */
168
- formDisabledCallback(t) {
169
- this.disabled = t;
163
+ formDisabledCallback(e) {
164
+ this.disabled = e;
170
165
  }
171
166
  /**
172
167
  * Called when the form that owns this component is reset.
173
168
  * Resets the value to the default value.
174
169
  */
175
170
  formResetCallback() {
176
- this.value = this.defaultValue ?? p.value, this._internals.setFormValue(this.value);
171
+ this.value = this.defaultValue ?? u.value, this._internals.setFormValue(this.value);
177
172
  }
178
173
  handleResize() {
179
174
  this._throttledResize();
180
175
  }
181
176
  renderAssistiveText() {
182
- return this.assistiveText ? F`
177
+ return this.assistiveText ? R`
183
178
  <pie-assistive-text
184
179
  id="${j}"
185
- variant=${g(this.status)}
180
+ variant=${b(this.status)}
186
181
  data-test-id="pie-textarea-assistive-text">
187
182
  ${this.assistiveText}
188
183
  </pie-assistive-text>
189
- ` : G;
184
+ ` : U;
190
185
  }
191
186
  render() {
192
187
  const {
193
- disabled: t,
194
- resize: r,
195
- size: s,
196
- autocomplete: a,
197
- autoFocus: l,
198
- name: d,
199
- readonly: c,
200
- placeholder: h,
201
- value: v,
202
- required: z,
203
- status: f,
204
- assistiveText: m
205
- } = this, y = {
188
+ disabled: e,
189
+ resize: t,
190
+ size: r,
191
+ autocomplete: n,
192
+ autoFocus: a,
193
+ name: p,
194
+ readonly: l,
195
+ placeholder: d,
196
+ value: h,
197
+ required: x,
198
+ status: g,
199
+ assistiveText: v
200
+ } = this, m = {
206
201
  "c-textareaWrapper": !0,
207
- "is-disabled": t,
208
- "c-textarea--readonly": c,
209
- "c-textarea--error": f === "error",
210
- [`c-textarea--resize-${r}`]: !0,
211
- [`c-textarea--${s}`]: !0
202
+ "is-disabled": e,
203
+ "c-textarea--readonly": l,
204
+ "c-textarea--error": g === "error",
205
+ [`c-textarea--resize-${t}`]: !0,
206
+ [`c-textarea--${r}`]: !0
212
207
  };
213
- return F`<div>
208
+ return R`<div>
214
209
  <div
215
- class="${K(y)}"
210
+ class="${H(m)}"
216
211
  data-test-id="pie-textarea-wrapper">
217
212
  <textarea
218
- id="${b}"
219
- data-test-id="${b}"
220
- name=${g(d)}
221
- autocomplete=${g(a)}
222
- placeholder=${g(h)}
223
- .value=${U(v)}
224
- ?autofocus=${l}
225
- ?readonly=${c}
226
- ?required=${z}
227
- ?disabled=${t}
228
- aria-describedby=${g(m ? j : void 0)}
229
- aria-invalid=${f === "error" ? "true" : "false"}
230
- aria-errormessage="${g(f === "error" ? j : void 0)}"
213
+ id="${z}"
214
+ data-test-id="${z}"
215
+ name=${b(p)}
216
+ autocomplete=${b(n)}
217
+ placeholder=${b(d)}
218
+ .value=${K(h)}
219
+ ?autofocus=${a}
220
+ ?readonly=${l}
221
+ ?required=${x}
222
+ ?disabled=${e}
223
+ aria-describedby=${b(v ? j : void 0)}
224
+ aria-invalid=${g === "error" ? "true" : "false"}
225
+ aria-errormessage="${b(g === "error" ? j : void 0)}"
231
226
  @input=${this.handleInput}
232
227
  @change=${this.handleChange}
233
228
  ></textarea>
@@ -236,61 +231,63 @@ const b = "pie-textarea", j = "assistive-text", T = class T extends X(J(B)) {
236
231
  </div>`;
237
232
  }
238
233
  };
239
- T.shadowRootOptions = { ...L.shadowRootOptions, delegatesFocus: !0 }, T.styles = H(ke);
240
- let o = T;
241
- n([
242
- u({ type: String })
243
- ], o.prototype, "value");
244
- n([
245
- u({ type: String })
246
- ], o.prototype, "defaultValue");
247
- n([
248
- u({ type: Boolean, reflect: !0 })
249
- ], o.prototype, "disabled");
250
- n([
251
- u({ type: String }),
252
- E(b, ze, p.size)
253
- ], o.prototype, "size");
254
- n([
255
- u({ type: String }),
256
- E(b, $e, p.resize)
257
- ], o.prototype, "resize");
258
- n([
259
- u({ type: Boolean })
260
- ], o.prototype, "readonly");
261
- n([
262
- u({ type: Boolean })
263
- ], o.prototype, "autoFocus");
264
- n([
265
- u({ type: Boolean })
266
- ], o.prototype, "required");
267
- n([
268
- u({ type: String }),
269
- E(b, _e, p.status)
270
- ], o.prototype, "status");
271
- n([
272
- u({ type: String })
273
- ], o.prototype, "assistiveText");
274
- n([
275
- u({ type: String, reflect: !0 })
276
- ], o.prototype, "name");
277
- n([
278
- u({ type: String })
279
- ], o.prototype, "autocomplete");
280
- n([
281
- u({ type: String })
282
- ], o.prototype, "placeholder");
283
- n([
284
- q("textarea")
285
- ], o.prototype, "_textarea");
286
- n([
287
- q("textarea")
288
- ], o.prototype, "focusTarget");
289
- Y(b, o);
234
+ o.shadowRootOptions = { ...D.shadowRootOptions, delegatesFocus: !0 };
235
+ o.styles = G(me);
236
+ s([
237
+ c({ type: String })
238
+ ], o.prototype, "value", 2);
239
+ s([
240
+ c({ type: String })
241
+ ], o.prototype, "defaultValue", 2);
242
+ s([
243
+ c({ type: Boolean, reflect: !0 })
244
+ ], o.prototype, "disabled", 2);
245
+ s([
246
+ c({ type: String }),
247
+ O(z, ye, u.size)
248
+ ], o.prototype, "size", 2);
249
+ s([
250
+ c({ type: String }),
251
+ O(z, ze, u.resize)
252
+ ], o.prototype, "resize", 2);
253
+ s([
254
+ c({ type: Boolean })
255
+ ], o.prototype, "readonly", 2);
256
+ s([
257
+ c({ type: Boolean })
258
+ ], o.prototype, "autoFocus", 2);
259
+ s([
260
+ c({ type: Boolean })
261
+ ], o.prototype, "required", 2);
262
+ s([
263
+ c({ type: String }),
264
+ O(z, ke, u.status)
265
+ ], o.prototype, "status", 2);
266
+ s([
267
+ c({ type: String })
268
+ ], o.prototype, "assistiveText", 2);
269
+ s([
270
+ c({ type: String, reflect: !0 })
271
+ ], o.prototype, "name", 2);
272
+ s([
273
+ c({ type: String })
274
+ ], o.prototype, "autocomplete", 2);
275
+ s([
276
+ c({ type: String })
277
+ ], o.prototype, "placeholder", 2);
278
+ s([
279
+ L("textarea")
280
+ ], o.prototype, "_textarea", 2);
281
+ s([
282
+ L("textarea")
283
+ ], o.prototype, "focusTarget", 2);
284
+ o = s([
285
+ Y("pie-textarea")
286
+ ], o);
290
287
  export {
291
288
  o as PieTextarea,
292
- p as defaultProps,
293
- $e as resizeModes,
294
- ze as sizes,
295
- _e as statusTypes
289
+ u as defaultProps,
290
+ ze as resizeModes,
291
+ ye as sizes,
292
+ ke as statusTypes
296
293
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-textarea",
3
3
  "description": "PIE Design System Textarea built using Web Components",
4
- "version": "0.15.6",
4
+ "version": "0.16.1",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -40,8 +40,8 @@
40
40
  "cem-plugin-module-file-extensions": "0.0.5"
41
41
  },
42
42
  "dependencies": {
43
- "@justeattakeaway/pie-assistive-text": "0.9.4",
44
- "@justeattakeaway/pie-webc-core": "0.25.1",
43
+ "@justeattakeaway/pie-assistive-text": "0.10.1",
44
+ "@justeattakeaway/pie-webc-core": "0.26.0",
45
45
  "lodash.throttle": "4.1.1"
46
46
  },
47
47
  "volta": {
package/src/index.ts CHANGED
@@ -10,7 +10,8 @@ import throttle from 'lodash.throttle';
10
10
 
11
11
  import '@justeattakeaway/pie-assistive-text';
12
12
  import {
13
- validPropertyValues, RtlMixin, defineCustomElement, FormControlMixin, wrapNativeEvent, type PIEInputElement,
13
+ validPropertyValues, RtlMixin, FormControlMixin, wrapNativeEvent, type PIEInputElement,
14
+ safeCustomElement,
14
15
  } from '@justeattakeaway/pie-webc-core';
15
16
 
16
17
  import styles from './textarea.scss?inline';
@@ -29,6 +30,7 @@ const assistiveTextIdValue = 'assistive-text';
29
30
  * @event {InputEvent} input - when the textarea value is changed.
30
31
  * @event {CustomEvent} change - when the textarea value is changed.
31
32
  */
33
+ @safeCustomElement('pie-textarea')
32
34
  export class PieTextarea extends FormControlMixin(RtlMixin(PieElement)) implements TextareaProps, PIEInputElement {
33
35
  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
34
36
 
@@ -256,8 +258,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(PieElement)) implemen
256
258
  static styles = unsafeCSS(styles);
257
259
  }
258
260
 
259
- defineCustomElement(componentSelector, PieTextarea);
260
-
261
261
  declare global {
262
262
  interface HTMLElementTagNameMap {
263
263
  [componentSelector]: PieTextarea;