@justeattakeaway/pie-textarea 0.15.1 → 0.15.2
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/custom-elements.json +10 -1
- package/dist/index.d.ts +6 -5
- package/dist/index.js +72 -66
- package/dist/react.d.ts +6 -5
- package/package.json +3 -3
- package/src/index.ts +31 -23
package/custom-elements.json
CHANGED
|
@@ -209,6 +209,14 @@
|
|
|
209
209
|
},
|
|
210
210
|
"privacy": "public"
|
|
211
211
|
},
|
|
212
|
+
{
|
|
213
|
+
"kind": "field",
|
|
214
|
+
"name": "_abortController",
|
|
215
|
+
"type": {
|
|
216
|
+
"text": "AbortController"
|
|
217
|
+
},
|
|
218
|
+
"privacy": "private"
|
|
219
|
+
},
|
|
212
220
|
{
|
|
213
221
|
"kind": "field",
|
|
214
222
|
"name": "_throttledResize",
|
|
@@ -300,7 +308,8 @@
|
|
|
300
308
|
},
|
|
301
309
|
{
|
|
302
310
|
"kind": "method",
|
|
303
|
-
"name": "renderAssistiveText"
|
|
311
|
+
"name": "renderAssistiveText",
|
|
312
|
+
"privacy": "private"
|
|
304
313
|
}
|
|
305
314
|
],
|
|
306
315
|
"events": [
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
3
|
import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
4
4
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
5
|
-
import type { nothing } from 'lit';
|
|
6
5
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
7
6
|
import type { PIEInputElement } from '@justeattakeaway/pie-webc-core';
|
|
8
7
|
import type { PropertyValues } from 'lit';
|
|
@@ -45,6 +44,11 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
|
|
|
45
44
|
placeholder: TextareaProps['placeholder'];
|
|
46
45
|
private _textarea;
|
|
47
46
|
focusTarget: HTMLElement;
|
|
47
|
+
private _abortController;
|
|
48
|
+
connectedCallback(): void;
|
|
49
|
+
disconnectedCallback(): void;
|
|
50
|
+
protected firstUpdated(): void;
|
|
51
|
+
protected updated(changedProperties: PropertyValues<this>): void;
|
|
48
52
|
private _throttledResize;
|
|
49
53
|
/**
|
|
50
54
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
@@ -63,9 +67,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
|
|
|
63
67
|
* Resets the value to the default value.
|
|
64
68
|
*/
|
|
65
69
|
formResetCallback(): void;
|
|
66
|
-
protected firstUpdated(): void;
|
|
67
70
|
private handleResize;
|
|
68
|
-
protected updated(changedProperties: PropertyValues<this>): void;
|
|
69
71
|
/**
|
|
70
72
|
* Handles input events and updates the component's value based on the input event or a provided new value.
|
|
71
73
|
*
|
|
@@ -78,8 +80,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
|
|
|
78
80
|
private handleInput;
|
|
79
81
|
private handleChange;
|
|
80
82
|
private handleKeyDown;
|
|
81
|
-
|
|
82
|
-
renderAssistiveText(): typeof nothing | TemplateResult<1>;
|
|
83
|
+
private renderAssistiveText;
|
|
83
84
|
render(): TemplateResult<1>;
|
|
84
85
|
static styles: CSSResult;
|
|
85
86
|
}
|
package/dist/index.js
CHANGED
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as L, nothing as G, html as F, unsafeCSS as H } from "lit";
|
|
2
2
|
import { property as u, query as q } from "lit/decorators.js";
|
|
3
|
-
import { classMap as
|
|
3
|
+
import { classMap as K } from "lit/directives/class-map.js";
|
|
4
4
|
import { ifDefined as g } from "lit/directives/if-defined.js";
|
|
5
5
|
import { live as U } 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
|
|
7
|
+
import { FormControlMixin as X, RtlMixin as J, wrapNativeEvent as Q, validPropertyValues as E, defineCustomElement as Y } from "@justeattakeaway/pie-webc-core";
|
|
8
8
|
var Z = Object.defineProperty, ee = (e, t, r, s) => {
|
|
9
9
|
for (var a = void 0, l = e.length - 1, d; l >= 0; l--)
|
|
10
10
|
(d = e[l]) && (a = d(t, r, a) || a);
|
|
11
11
|
return a && Z(t, r, a), a;
|
|
12
12
|
};
|
|
13
|
-
class B extends
|
|
13
|
+
class B extends L {
|
|
14
14
|
constructor() {
|
|
15
|
-
super(...arguments), this.v = "0.15.
|
|
15
|
+
super(...arguments), this.v = "0.15.2";
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
ee([
|
|
19
19
|
u({ type: String, reflect: !0 })
|
|
20
20
|
], B.prototype, "v");
|
|
21
|
-
var
|
|
21
|
+
var _ = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
|
|
22
22
|
function te(e) {
|
|
23
23
|
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
24
24
|
}
|
|
25
|
-
var
|
|
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
26
|
return ce.Date.now();
|
|
27
27
|
};
|
|
28
|
-
function
|
|
29
|
-
var s, a, l, d, c, h,
|
|
28
|
+
function xe(e, t, r) {
|
|
29
|
+
var s, a, l, d, c, h, v = 0, z = !1, f = !1, m = !0;
|
|
30
30
|
if (typeof e != "function")
|
|
31
|
-
throw new TypeError(
|
|
32
|
-
t =
|
|
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
33
|
function y(i) {
|
|
34
|
-
var
|
|
35
|
-
return s = a = void 0,
|
|
34
|
+
var x = s, k = a;
|
|
35
|
+
return s = a = void 0, v = i, d = e.apply(k, x), d;
|
|
36
36
|
}
|
|
37
|
-
function
|
|
38
|
-
return
|
|
37
|
+
function D(i) {
|
|
38
|
+
return v = i, c = setTimeout($, t), z ? y(i) : d;
|
|
39
39
|
}
|
|
40
|
-
function
|
|
41
|
-
var
|
|
42
|
-
return f ? fe(I, l -
|
|
40
|
+
function P(i) {
|
|
41
|
+
var x = i - h, k = i - v, I = t - x;
|
|
42
|
+
return f ? fe(I, l - k) : I;
|
|
43
43
|
}
|
|
44
44
|
function O(i) {
|
|
45
|
-
var
|
|
46
|
-
return h === void 0 ||
|
|
45
|
+
var x = i - h, k = i - v;
|
|
46
|
+
return h === void 0 || x >= t || x < 0 || f && k >= l;
|
|
47
47
|
}
|
|
48
48
|
function $() {
|
|
49
|
-
var i =
|
|
49
|
+
var i = W();
|
|
50
50
|
if (O(i))
|
|
51
|
-
return
|
|
52
|
-
c = setTimeout($,
|
|
51
|
+
return w(i);
|
|
52
|
+
c = setTimeout($, P(i));
|
|
53
53
|
}
|
|
54
|
-
function
|
|
54
|
+
function w(i) {
|
|
55
55
|
return c = void 0, m && s ? y(i) : (s = a = void 0, d);
|
|
56
56
|
}
|
|
57
|
-
function
|
|
58
|
-
c !== void 0 && clearTimeout(c),
|
|
57
|
+
function V() {
|
|
58
|
+
c !== void 0 && clearTimeout(c), v = 0, s = h = a = c = void 0;
|
|
59
59
|
}
|
|
60
60
|
function N() {
|
|
61
|
-
return c === void 0 ? d :
|
|
61
|
+
return c === void 0 ? d : w(W());
|
|
62
62
|
}
|
|
63
|
-
function
|
|
64
|
-
var i =
|
|
65
|
-
if (s = arguments, a = this, h = i,
|
|
63
|
+
function S() {
|
|
64
|
+
var i = W(), x = O(i);
|
|
65
|
+
if (s = arguments, a = this, h = i, x) {
|
|
66
66
|
if (c === void 0)
|
|
67
|
-
return
|
|
67
|
+
return D(h);
|
|
68
68
|
if (f)
|
|
69
69
|
return c = setTimeout($, t), y(h);
|
|
70
70
|
}
|
|
71
71
|
return c === void 0 && (c = setTimeout($, t)), d;
|
|
72
72
|
}
|
|
73
|
-
return
|
|
73
|
+
return S.cancel = V, S.flush = N, S;
|
|
74
74
|
}
|
|
75
|
-
function
|
|
75
|
+
function ve(e, t, r) {
|
|
76
76
|
var s = !0, a = !0;
|
|
77
77
|
if (typeof e != "function")
|
|
78
|
-
throw new TypeError(
|
|
79
|
-
return
|
|
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
80
|
leading: s,
|
|
81
81
|
maxWait: t,
|
|
82
82
|
trailing: a
|
|
83
83
|
});
|
|
84
84
|
}
|
|
85
|
-
function
|
|
85
|
+
function C(e) {
|
|
86
86
|
var t = typeof e;
|
|
87
87
|
return !!e && (t == "object" || t == "function");
|
|
88
88
|
}
|
|
@@ -92,14 +92,14 @@ function ge(e) {
|
|
|
92
92
|
function be(e) {
|
|
93
93
|
return typeof e == "symbol" || ge(e) && pe.call(e) == re;
|
|
94
94
|
}
|
|
95
|
-
function
|
|
95
|
+
function M(e) {
|
|
96
96
|
if (typeof e == "number")
|
|
97
97
|
return e;
|
|
98
98
|
if (be(e))
|
|
99
99
|
return R;
|
|
100
|
-
if (
|
|
100
|
+
if (C(e)) {
|
|
101
101
|
var t = typeof e.valueOf == "function" ? e.valueOf() : e;
|
|
102
|
-
e =
|
|
102
|
+
e = C(t) ? t + "" : t;
|
|
103
103
|
}
|
|
104
104
|
if (typeof e != "string")
|
|
105
105
|
return e === 0 ? e : +e;
|
|
@@ -107,8 +107,8 @@ function L(e) {
|
|
|
107
107
|
var r = oe.test(e);
|
|
108
108
|
return r || ne.test(e) ? se(e.slice(2), r ? 2 : 8) : ie.test(e) ? R : +e;
|
|
109
109
|
}
|
|
110
|
-
var me =
|
|
111
|
-
const ye = /* @__PURE__ */ te(me),
|
|
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 = {
|
|
112
112
|
disabled: !1,
|
|
113
113
|
size: "medium",
|
|
114
114
|
resize: "auto",
|
|
@@ -119,12 +119,12 @@ const ye = /* @__PURE__ */ te(me), ze = "*,*:after,*:before{box-sizing:inherit}.
|
|
|
119
119
|
readonly: !1,
|
|
120
120
|
required: !1
|
|
121
121
|
};
|
|
122
|
-
var
|
|
122
|
+
var Ce = Object.defineProperty, n = (e, t, r, s) => {
|
|
123
123
|
for (var a = void 0, l = e.length - 1, d; l >= 0; l--)
|
|
124
124
|
(d = e[l]) && (a = d(t, r, a) || a);
|
|
125
|
-
return a &&
|
|
125
|
+
return a && Ce(t, r, a), a;
|
|
126
126
|
};
|
|
127
|
-
const b = "pie-textarea", j = "assistive-text",
|
|
127
|
+
const b = "pie-textarea", j = "assistive-text", T = class T extends X(J(B)) {
|
|
128
128
|
constructor() {
|
|
129
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(() => {
|
|
130
130
|
this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
|
|
@@ -137,6 +137,21 @@ const b = "pie-textarea", j = "assistive-text", S = class S extends X(J(B)) {
|
|
|
137
137
|
t.key === "Enter" && t.stopPropagation();
|
|
138
138
|
};
|
|
139
139
|
}
|
|
140
|
+
connectedCallback() {
|
|
141
|
+
super.connectedCallback(), this._abortController = new AbortController();
|
|
142
|
+
const { signal: t } = this._abortController;
|
|
143
|
+
window.addEventListener("resize", () => this.handleResize(), { signal: t });
|
|
144
|
+
}
|
|
145
|
+
disconnectedCallback() {
|
|
146
|
+
super.disconnectedCallback(), this._abortController.abort();
|
|
147
|
+
}
|
|
148
|
+
firstUpdated() {
|
|
149
|
+
const { signal: t } = this._abortController;
|
|
150
|
+
this._textarea.addEventListener("keydown", this.handleKeyDown, { signal: t }), this._internals.setFormValue(this.value);
|
|
151
|
+
}
|
|
152
|
+
updated(t) {
|
|
153
|
+
t.has("value") && this.handleInput(null, this.value), this.resize === "auto" && (t.has("resize") || t.has("size")) && this.handleResize();
|
|
154
|
+
}
|
|
140
155
|
/**
|
|
141
156
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
142
157
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
@@ -160,18 +175,9 @@ const b = "pie-textarea", j = "assistive-text", S = class S extends X(J(B)) {
|
|
|
160
175
|
formResetCallback() {
|
|
161
176
|
this.value = this.defaultValue ?? p.value, this._internals.setFormValue(this.value);
|
|
162
177
|
}
|
|
163
|
-
firstUpdated() {
|
|
164
|
-
this._internals.setFormValue(this.value), window.addEventListener("resize", () => this.handleResize()), this._textarea.addEventListener("keydown", this.handleKeyDown);
|
|
165
|
-
}
|
|
166
178
|
handleResize() {
|
|
167
179
|
this._throttledResize();
|
|
168
180
|
}
|
|
169
|
-
updated(t) {
|
|
170
|
-
t.has("value") && this.handleInput(null, this.value), this.resize === "auto" && (t.has("resize") || t.has("size")) && this.handleResize();
|
|
171
|
-
}
|
|
172
|
-
disconnectedCallback() {
|
|
173
|
-
this._textarea.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", () => this.handleResize());
|
|
174
|
-
}
|
|
175
181
|
renderAssistiveText() {
|
|
176
182
|
return this.assistiveText ? F`
|
|
177
183
|
<pie-assistive-text
|
|
@@ -180,7 +186,7 @@ const b = "pie-textarea", j = "assistive-text", S = class S extends X(J(B)) {
|
|
|
180
186
|
data-test-id="pie-textarea-assistive-text">
|
|
181
187
|
${this.assistiveText}
|
|
182
188
|
</pie-assistive-text>
|
|
183
|
-
` :
|
|
189
|
+
` : G;
|
|
184
190
|
}
|
|
185
191
|
render() {
|
|
186
192
|
const {
|
|
@@ -192,8 +198,8 @@ const b = "pie-textarea", j = "assistive-text", S = class S extends X(J(B)) {
|
|
|
192
198
|
name: d,
|
|
193
199
|
readonly: c,
|
|
194
200
|
placeholder: h,
|
|
195
|
-
value:
|
|
196
|
-
required:
|
|
201
|
+
value: v,
|
|
202
|
+
required: z,
|
|
197
203
|
status: f,
|
|
198
204
|
assistiveText: m
|
|
199
205
|
} = this, y = {
|
|
@@ -206,7 +212,7 @@ const b = "pie-textarea", j = "assistive-text", S = class S extends X(J(B)) {
|
|
|
206
212
|
};
|
|
207
213
|
return F`<div>
|
|
208
214
|
<div
|
|
209
|
-
class="${
|
|
215
|
+
class="${K(y)}"
|
|
210
216
|
data-test-id="pie-textarea-wrapper">
|
|
211
217
|
<textarea
|
|
212
218
|
id="${b}"
|
|
@@ -214,10 +220,10 @@ const b = "pie-textarea", j = "assistive-text", S = class S extends X(J(B)) {
|
|
|
214
220
|
name=${g(d)}
|
|
215
221
|
autocomplete=${g(a)}
|
|
216
222
|
placeholder=${g(h)}
|
|
217
|
-
.value=${U(
|
|
223
|
+
.value=${U(v)}
|
|
218
224
|
?autofocus=${l}
|
|
219
225
|
?readonly=${c}
|
|
220
|
-
?required=${
|
|
226
|
+
?required=${z}
|
|
221
227
|
?disabled=${t}
|
|
222
228
|
aria-describedby=${g(m ? j : void 0)}
|
|
223
229
|
aria-invalid=${f === "error" ? "true" : "false"}
|
|
@@ -230,8 +236,8 @@ const b = "pie-textarea", j = "assistive-text", S = class S extends X(J(B)) {
|
|
|
230
236
|
</div>`;
|
|
231
237
|
}
|
|
232
238
|
};
|
|
233
|
-
|
|
234
|
-
let o =
|
|
239
|
+
T.shadowRootOptions = { ...L.shadowRootOptions, delegatesFocus: !0 }, T.styles = H(ke);
|
|
240
|
+
let o = T;
|
|
235
241
|
n([
|
|
236
242
|
u({ type: String })
|
|
237
243
|
], o.prototype, "value");
|
|
@@ -243,11 +249,11 @@ n([
|
|
|
243
249
|
], o.prototype, "disabled");
|
|
244
250
|
n([
|
|
245
251
|
u({ type: String }),
|
|
246
|
-
|
|
252
|
+
E(b, ze, p.size)
|
|
247
253
|
], o.prototype, "size");
|
|
248
254
|
n([
|
|
249
255
|
u({ type: String }),
|
|
250
|
-
|
|
256
|
+
E(b, $e, p.resize)
|
|
251
257
|
], o.prototype, "resize");
|
|
252
258
|
n([
|
|
253
259
|
u({ type: Boolean })
|
|
@@ -260,7 +266,7 @@ n([
|
|
|
260
266
|
], o.prototype, "required");
|
|
261
267
|
n([
|
|
262
268
|
u({ type: String }),
|
|
263
|
-
|
|
269
|
+
E(b, _e, p.status)
|
|
264
270
|
], o.prototype, "status");
|
|
265
271
|
n([
|
|
266
272
|
u({ type: String })
|
|
@@ -285,6 +291,6 @@ export {
|
|
|
285
291
|
o as PieTextarea,
|
|
286
292
|
p as defaultProps,
|
|
287
293
|
$e as resizeModes,
|
|
288
|
-
|
|
289
|
-
|
|
294
|
+
ze as sizes,
|
|
295
|
+
_e as statusTypes
|
|
290
296
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
3
|
import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
4
4
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
5
|
-
import type { nothing } from 'lit';
|
|
6
5
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
7
6
|
import type { PIEInputElement } from '@justeattakeaway/pie-webc-core';
|
|
8
7
|
import type { PropertyValues } from 'lit';
|
|
@@ -48,6 +47,11 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
|
|
|
48
47
|
placeholder: TextareaProps['placeholder'];
|
|
49
48
|
private _textarea;
|
|
50
49
|
focusTarget: HTMLElement;
|
|
50
|
+
private _abortController;
|
|
51
|
+
connectedCallback(): void;
|
|
52
|
+
disconnectedCallback(): void;
|
|
53
|
+
protected firstUpdated(): void;
|
|
54
|
+
protected updated(changedProperties: PropertyValues<this>): void;
|
|
51
55
|
private _throttledResize;
|
|
52
56
|
/**
|
|
53
57
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
@@ -66,9 +70,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
|
|
|
66
70
|
* Resets the value to the default value.
|
|
67
71
|
*/
|
|
68
72
|
formResetCallback(): void;
|
|
69
|
-
protected firstUpdated(): void;
|
|
70
73
|
private handleResize;
|
|
71
|
-
protected updated(changedProperties: PropertyValues<this>): void;
|
|
72
74
|
/**
|
|
73
75
|
* Handles input events and updates the component's value based on the input event or a provided new value.
|
|
74
76
|
*
|
|
@@ -81,8 +83,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
|
|
|
81
83
|
private handleInput;
|
|
82
84
|
private handleChange;
|
|
83
85
|
private handleKeyDown;
|
|
84
|
-
|
|
85
|
-
renderAssistiveText(): typeof nothing | TemplateResult<1>;
|
|
86
|
+
private renderAssistiveText;
|
|
86
87
|
render(): TemplateResult<1>;
|
|
87
88
|
static styles: CSSResult;
|
|
88
89
|
}
|
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.
|
|
4
|
+
"version": "0.15.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
"license": "Apache-2.0",
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
36
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
36
|
+
"@justeattakeaway/pie-components-config": "0.20.0",
|
|
37
37
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
38
38
|
"@justeattakeaway/pie-monorepo-utils": "0.5.0",
|
|
39
39
|
"@types/lodash.throttle": "4.1.9",
|
|
40
40
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@justeattakeaway/pie-assistive-text": "0.9.
|
|
43
|
+
"@justeattakeaway/pie-assistive-text": "0.9.2",
|
|
44
44
|
"@justeattakeaway/pie-webc-core": "0.25.1",
|
|
45
45
|
"lodash.throttle": "4.1.1"
|
|
46
46
|
},
|
package/src/index.ts
CHANGED
|
@@ -80,6 +80,36 @@ export class PieTextarea extends FormControlMixin(RtlMixin(PieElement)) implemen
|
|
|
80
80
|
@query('textarea')
|
|
81
81
|
public focusTarget!: HTMLElement;
|
|
82
82
|
|
|
83
|
+
private _abortController!: AbortController;
|
|
84
|
+
|
|
85
|
+
connectedCallback () {
|
|
86
|
+
super.connectedCallback();
|
|
87
|
+
this._abortController = new AbortController();
|
|
88
|
+
const { signal } = this._abortController;
|
|
89
|
+
window.addEventListener('resize', () => this.handleResize(), { signal });
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
public disconnectedCallback (): void {
|
|
93
|
+
super.disconnectedCallback();
|
|
94
|
+
this._abortController.abort();
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
protected firstUpdated (): void {
|
|
98
|
+
const { signal } = this._abortController;
|
|
99
|
+
this._textarea.addEventListener('keydown', this.handleKeyDown, { signal });
|
|
100
|
+
this._internals.setFormValue(this.value);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
protected updated (changedProperties: PropertyValues<this>) {
|
|
104
|
+
if (changedProperties.has('value')) {
|
|
105
|
+
this.handleInput(null, this.value);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
if (this.resize === 'auto' && (changedProperties.has('resize') || changedProperties.has('size'))) {
|
|
109
|
+
this.handleResize();
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
83
113
|
private _throttledResize = throttle(() => {
|
|
84
114
|
if (this.resize === 'auto') {
|
|
85
115
|
this._textarea.style.height = 'auto';
|
|
@@ -115,27 +145,10 @@ export class PieTextarea extends FormControlMixin(RtlMixin(PieElement)) implemen
|
|
|
115
145
|
this._internals.setFormValue(this.value);
|
|
116
146
|
}
|
|
117
147
|
|
|
118
|
-
protected firstUpdated (): void {
|
|
119
|
-
this._internals.setFormValue(this.value);
|
|
120
|
-
|
|
121
|
-
window.addEventListener('resize', () => this.handleResize());
|
|
122
|
-
this._textarea.addEventListener('keydown', this.handleKeyDown);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
148
|
private handleResize () {
|
|
126
149
|
this._throttledResize();
|
|
127
150
|
}
|
|
128
151
|
|
|
129
|
-
protected updated (changedProperties: PropertyValues<this>) {
|
|
130
|
-
if (changedProperties.has('value')) {
|
|
131
|
-
this.handleInput(null, this.value);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
if (this.resize === 'auto' && (changedProperties.has('resize') || changedProperties.has('size'))) {
|
|
135
|
-
this.handleResize();
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
152
|
/**
|
|
140
153
|
* Handles input events and updates the component's value based on the input event or a provided new value.
|
|
141
154
|
*
|
|
@@ -173,12 +186,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(PieElement)) implemen
|
|
|
173
186
|
}
|
|
174
187
|
};
|
|
175
188
|
|
|
176
|
-
|
|
177
|
-
this._textarea.removeEventListener('keydown', this.handleKeyDown);
|
|
178
|
-
window.removeEventListener('resize', () => this.handleResize());
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
renderAssistiveText () {
|
|
189
|
+
private renderAssistiveText () {
|
|
182
190
|
if (!this.assistiveText) {
|
|
183
191
|
return nothing;
|
|
184
192
|
}
|