@justeattakeaway/pie-textarea 0.14.1 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +126 -113
- package/dist/react.d.ts +2 -2
- package/package.json +6 -5
- package/src/index.ts +2 -1
package/custom-elements.json
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ 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 { LitElement } from 'lit';
|
|
6
5
|
import type { nothing } from 'lit';
|
|
6
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
7
7
|
import type { PIEInputElement } from '@justeattakeaway/pie-webc-core';
|
|
8
8
|
import type { PropertyValues } from 'lit';
|
|
9
9
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
@@ -84,7 +84,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
|
|
|
84
84
|
static styles: CSSResult;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
declare const PieTextarea_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof
|
|
87
|
+
declare const PieTextarea_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
|
|
88
88
|
|
|
89
89
|
export declare const resizeModes: readonly ["auto", "manual"];
|
|
90
90
|
|
package/dist/index.js
CHANGED
|
@@ -1,101 +1,114 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
3
|
-
import { classMap as
|
|
1
|
+
import { LitElement as M, nothing as K, html as F, unsafeCSS as G } from "lit";
|
|
2
|
+
import { property as u, query as q } from "lit/decorators.js";
|
|
3
|
+
import { classMap as H } from "lit/directives/class-map.js";
|
|
4
4
|
import { ifDefined as g } from "lit/directives/if-defined.js";
|
|
5
|
-
import { live as
|
|
5
|
+
import { live as U } from "lit/directives/live.js";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
import { FormControlMixin as
|
|
7
|
+
import { FormControlMixin as X, RtlMixin as J, wrapNativeEvent as Q, validPropertyValues as w, 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 M {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments), this.v = "0.15.0";
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
ee([
|
|
19
|
+
u({ type: String, reflect: !0 })
|
|
20
|
+
], B.prototype, "v");
|
|
8
21
|
var T = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
|
|
9
|
-
function
|
|
22
|
+
function te(e) {
|
|
10
23
|
return e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
11
24
|
}
|
|
12
|
-
var
|
|
13
|
-
return
|
|
25
|
+
var D = "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 T == "object" && T && T.Object === Object && T, 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, E = function() {
|
|
26
|
+
return ce.Date.now();
|
|
14
27
|
};
|
|
15
|
-
function
|
|
16
|
-
var
|
|
28
|
+
function xe(e, t, r) {
|
|
29
|
+
var s, a, l, d, c, h, v = 0, k = !1, f = !1, m = !0;
|
|
17
30
|
if (typeof e != "function")
|
|
18
|
-
throw new TypeError(
|
|
19
|
-
t =
|
|
20
|
-
function y(
|
|
21
|
-
var x =
|
|
22
|
-
return
|
|
31
|
+
throw new TypeError(D);
|
|
32
|
+
t = L(t) || 0, _(r) && (k = !!r.leading, f = "maxWait" in r, l = f ? he(L(r.maxWait) || 0, t) : l, m = "trailing" in r ? !!r.trailing : m);
|
|
33
|
+
function y(i) {
|
|
34
|
+
var x = s, z = a;
|
|
35
|
+
return s = a = void 0, v = i, d = e.apply(z, x), d;
|
|
23
36
|
}
|
|
24
|
-
function
|
|
25
|
-
return v =
|
|
37
|
+
function P(i) {
|
|
38
|
+
return v = i, c = setTimeout($, t), k ? y(i) : d;
|
|
26
39
|
}
|
|
27
|
-
function V(
|
|
28
|
-
var x =
|
|
29
|
-
return f ?
|
|
40
|
+
function V(i) {
|
|
41
|
+
var x = i - h, z = i - v, I = t - x;
|
|
42
|
+
return f ? fe(I, l - z) : I;
|
|
30
43
|
}
|
|
31
|
-
function O(
|
|
32
|
-
var x =
|
|
33
|
-
return h === void 0 || x >= t || x < 0 || f && z >=
|
|
44
|
+
function O(i) {
|
|
45
|
+
var x = i - h, z = i - v;
|
|
46
|
+
return h === void 0 || x >= t || x < 0 || f && z >= l;
|
|
34
47
|
}
|
|
35
48
|
function $() {
|
|
36
|
-
var
|
|
37
|
-
if (O(
|
|
38
|
-
return C(
|
|
39
|
-
|
|
49
|
+
var i = E();
|
|
50
|
+
if (O(i))
|
|
51
|
+
return C(i);
|
|
52
|
+
c = setTimeout($, V(i));
|
|
40
53
|
}
|
|
41
|
-
function C(
|
|
42
|
-
return
|
|
54
|
+
function C(i) {
|
|
55
|
+
return c = void 0, m && s ? y(i) : (s = a = void 0, d);
|
|
43
56
|
}
|
|
44
57
|
function A() {
|
|
45
|
-
|
|
58
|
+
c !== void 0 && clearTimeout(c), v = 0, s = h = a = c = void 0;
|
|
46
59
|
}
|
|
47
60
|
function N() {
|
|
48
|
-
return
|
|
61
|
+
return c === void 0 ? d : C(E());
|
|
49
62
|
}
|
|
50
|
-
function
|
|
51
|
-
var
|
|
52
|
-
if (
|
|
53
|
-
if (
|
|
54
|
-
return
|
|
63
|
+
function W() {
|
|
64
|
+
var i = E(), x = O(i);
|
|
65
|
+
if (s = arguments, a = this, h = i, x) {
|
|
66
|
+
if (c === void 0)
|
|
67
|
+
return P(h);
|
|
55
68
|
if (f)
|
|
56
|
-
return
|
|
69
|
+
return c = setTimeout($, t), y(h);
|
|
57
70
|
}
|
|
58
|
-
return
|
|
71
|
+
return c === void 0 && (c = setTimeout($, t)), d;
|
|
59
72
|
}
|
|
60
|
-
return
|
|
73
|
+
return W.cancel = A, W.flush = N, W;
|
|
61
74
|
}
|
|
62
|
-
function
|
|
63
|
-
var
|
|
75
|
+
function ve(e, t, r) {
|
|
76
|
+
var s = !0, a = !0;
|
|
64
77
|
if (typeof e != "function")
|
|
65
|
-
throw new TypeError(
|
|
66
|
-
return
|
|
67
|
-
leading:
|
|
78
|
+
throw new TypeError(D);
|
|
79
|
+
return _(r) && (s = "leading" in r ? !!r.leading : s, a = "trailing" in r ? !!r.trailing : a), xe(e, t, {
|
|
80
|
+
leading: s,
|
|
68
81
|
maxWait: t,
|
|
69
|
-
trailing:
|
|
82
|
+
trailing: a
|
|
70
83
|
});
|
|
71
84
|
}
|
|
72
|
-
function
|
|
85
|
+
function _(e) {
|
|
73
86
|
var t = typeof e;
|
|
74
87
|
return !!e && (t == "object" || t == "function");
|
|
75
88
|
}
|
|
76
|
-
function
|
|
89
|
+
function ge(e) {
|
|
77
90
|
return !!e && typeof e == "object";
|
|
78
91
|
}
|
|
79
|
-
function
|
|
80
|
-
return typeof e == "symbol" ||
|
|
92
|
+
function be(e) {
|
|
93
|
+
return typeof e == "symbol" || ge(e) && pe.call(e) == re;
|
|
81
94
|
}
|
|
82
|
-
function
|
|
95
|
+
function L(e) {
|
|
83
96
|
if (typeof e == "number")
|
|
84
97
|
return e;
|
|
85
|
-
if (
|
|
86
|
-
return
|
|
87
|
-
if (
|
|
98
|
+
if (be(e))
|
|
99
|
+
return R;
|
|
100
|
+
if (_(e)) {
|
|
88
101
|
var t = typeof e.valueOf == "function" ? e.valueOf() : e;
|
|
89
|
-
e =
|
|
102
|
+
e = _(t) ? t + "" : t;
|
|
90
103
|
}
|
|
91
104
|
if (typeof e != "string")
|
|
92
105
|
return e === 0 ? e : +e;
|
|
93
|
-
e = e.replace(
|
|
94
|
-
var
|
|
95
|
-
return
|
|
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;
|
|
96
109
|
}
|
|
97
|
-
var
|
|
98
|
-
const
|
|
110
|
+
var me = ve;
|
|
111
|
+
const ye = /* @__PURE__ */ te(me), ze = "*,*: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)}", ke = ["small", "medium", "large"], $e = ["auto", "manual"], Te = ["default", "success", "error"], p = {
|
|
99
112
|
disabled: !1,
|
|
100
113
|
size: "medium",
|
|
101
114
|
resize: "auto",
|
|
@@ -106,20 +119,20 @@ const ge = /* @__PURE__ */ Y(ve), be = "*,*:after,*:before{box-sizing:inherit}.c
|
|
|
106
119
|
readonly: !1,
|
|
107
120
|
required: !1
|
|
108
121
|
};
|
|
109
|
-
var
|
|
110
|
-
for (var
|
|
111
|
-
(
|
|
112
|
-
return
|
|
122
|
+
var _e = 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 && _e(t, r, a), a;
|
|
113
126
|
};
|
|
114
|
-
const b = "pie-textarea",
|
|
127
|
+
const b = "pie-textarea", j = "assistive-text", S = class S extends X(J(B)) {
|
|
115
128
|
constructor() {
|
|
116
|
-
super(...arguments), this.value =
|
|
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(() => {
|
|
117
130
|
this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
|
|
118
|
-
}, 100), this.handleInput = (t,
|
|
119
|
-
t ? this.value = t.target.value :
|
|
131
|
+
}, 100), this.handleInput = (t, r) => {
|
|
132
|
+
t ? this.value = t.target.value : r && (this.value = r), this._internals.setFormValue(this.value), this.handleResize();
|
|
120
133
|
}, this.handleChange = (t) => {
|
|
121
|
-
const
|
|
122
|
-
this.dispatchEvent(
|
|
134
|
+
const r = Q(t);
|
|
135
|
+
this.dispatchEvent(r);
|
|
123
136
|
}, this.handleKeyDown = (t) => {
|
|
124
137
|
t.key === "Enter" && t.stopPropagation();
|
|
125
138
|
};
|
|
@@ -145,7 +158,7 @@ const b = "pie-textarea", _ = "assistive-text", W = class W extends U(X(F)) {
|
|
|
145
158
|
* Resets the value to the default value.
|
|
146
159
|
*/
|
|
147
160
|
formResetCallback() {
|
|
148
|
-
this.value = this.defaultValue ??
|
|
161
|
+
this.value = this.defaultValue ?? p.value, this._internals.setFormValue(this.value);
|
|
149
162
|
}
|
|
150
163
|
firstUpdated() {
|
|
151
164
|
this._internals.setFormValue(this.value), window.addEventListener("resize", () => this.handleResize()), this._textarea.addEventListener("keydown", this.handleKeyDown);
|
|
@@ -160,9 +173,9 @@ const b = "pie-textarea", _ = "assistive-text", W = class W extends U(X(F)) {
|
|
|
160
173
|
this._textarea.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", () => this.handleResize());
|
|
161
174
|
}
|
|
162
175
|
renderAssistiveText() {
|
|
163
|
-
return this.assistiveText ?
|
|
176
|
+
return this.assistiveText ? F`
|
|
164
177
|
<pie-assistive-text
|
|
165
|
-
id="${
|
|
178
|
+
id="${j}"
|
|
166
179
|
variant=${g(this.status)}
|
|
167
180
|
data-test-id="pie-textarea-assistive-text">
|
|
168
181
|
${this.assistiveText}
|
|
@@ -172,12 +185,12 @@ const b = "pie-textarea", _ = "assistive-text", W = class W extends U(X(F)) {
|
|
|
172
185
|
render() {
|
|
173
186
|
const {
|
|
174
187
|
disabled: t,
|
|
175
|
-
resize:
|
|
176
|
-
size:
|
|
177
|
-
autocomplete:
|
|
178
|
-
autoFocus:
|
|
179
|
-
name:
|
|
180
|
-
readonly:
|
|
188
|
+
resize: r,
|
|
189
|
+
size: s,
|
|
190
|
+
autocomplete: a,
|
|
191
|
+
autoFocus: l,
|
|
192
|
+
name: d,
|
|
193
|
+
readonly: c,
|
|
181
194
|
placeholder: h,
|
|
182
195
|
value: v,
|
|
183
196
|
required: k,
|
|
@@ -186,29 +199,29 @@ const b = "pie-textarea", _ = "assistive-text", W = class W extends U(X(F)) {
|
|
|
186
199
|
} = this, y = {
|
|
187
200
|
"c-textareaWrapper": !0,
|
|
188
201
|
"is-disabled": t,
|
|
189
|
-
"c-textarea--readonly":
|
|
202
|
+
"c-textarea--readonly": c,
|
|
190
203
|
"c-textarea--error": f === "error",
|
|
191
|
-
[`c-textarea--resize-${
|
|
192
|
-
[`c-textarea--${
|
|
204
|
+
[`c-textarea--resize-${r}`]: !0,
|
|
205
|
+
[`c-textarea--${s}`]: !0
|
|
193
206
|
};
|
|
194
|
-
return
|
|
207
|
+
return F`<div>
|
|
195
208
|
<div
|
|
196
|
-
class="${
|
|
209
|
+
class="${H(y)}"
|
|
197
210
|
data-test-id="pie-textarea-wrapper">
|
|
198
211
|
<textarea
|
|
199
212
|
id="${b}"
|
|
200
213
|
data-test-id="${b}"
|
|
201
|
-
name=${g(
|
|
202
|
-
autocomplete=${g(
|
|
214
|
+
name=${g(d)}
|
|
215
|
+
autocomplete=${g(a)}
|
|
203
216
|
placeholder=${g(h)}
|
|
204
|
-
.value=${
|
|
205
|
-
?autofocus=${
|
|
206
|
-
?readonly=${
|
|
217
|
+
.value=${U(v)}
|
|
218
|
+
?autofocus=${l}
|
|
219
|
+
?readonly=${c}
|
|
207
220
|
?required=${k}
|
|
208
221
|
?disabled=${t}
|
|
209
|
-
aria-describedby=${g(m ?
|
|
222
|
+
aria-describedby=${g(m ? j : void 0)}
|
|
210
223
|
aria-invalid=${f === "error" ? "true" : "false"}
|
|
211
|
-
aria-errormessage="${g(f === "error" ?
|
|
224
|
+
aria-errormessage="${g(f === "error" ? j : void 0)}"
|
|
212
225
|
@input=${this.handleInput}
|
|
213
226
|
@change=${this.handleChange}
|
|
214
227
|
></textarea>
|
|
@@ -217,49 +230,49 @@ const b = "pie-textarea", _ = "assistive-text", W = class W extends U(X(F)) {
|
|
|
217
230
|
</div>`;
|
|
218
231
|
}
|
|
219
232
|
};
|
|
220
|
-
|
|
221
|
-
let o =
|
|
233
|
+
S.shadowRootOptions = { ...M.shadowRootOptions, delegatesFocus: !0 }, S.styles = G(ze);
|
|
234
|
+
let o = S;
|
|
222
235
|
n([
|
|
223
|
-
|
|
236
|
+
u({ type: String })
|
|
224
237
|
], o.prototype, "value");
|
|
225
238
|
n([
|
|
226
|
-
|
|
239
|
+
u({ type: String })
|
|
227
240
|
], o.prototype, "defaultValue");
|
|
228
241
|
n([
|
|
229
|
-
|
|
242
|
+
u({ type: Boolean, reflect: !0 })
|
|
230
243
|
], o.prototype, "disabled");
|
|
231
244
|
n([
|
|
232
|
-
|
|
233
|
-
|
|
245
|
+
u({ type: String }),
|
|
246
|
+
w(b, ke, p.size)
|
|
234
247
|
], o.prototype, "size");
|
|
235
248
|
n([
|
|
236
|
-
|
|
237
|
-
|
|
249
|
+
u({ type: String }),
|
|
250
|
+
w(b, $e, p.resize)
|
|
238
251
|
], o.prototype, "resize");
|
|
239
252
|
n([
|
|
240
|
-
|
|
253
|
+
u({ type: Boolean })
|
|
241
254
|
], o.prototype, "readonly");
|
|
242
255
|
n([
|
|
243
|
-
|
|
256
|
+
u({ type: Boolean })
|
|
244
257
|
], o.prototype, "autoFocus");
|
|
245
258
|
n([
|
|
246
|
-
|
|
259
|
+
u({ type: Boolean })
|
|
247
260
|
], o.prototype, "required");
|
|
248
261
|
n([
|
|
249
|
-
|
|
250
|
-
|
|
262
|
+
u({ type: String }),
|
|
263
|
+
w(b, Te, p.status)
|
|
251
264
|
], o.prototype, "status");
|
|
252
265
|
n([
|
|
253
|
-
|
|
266
|
+
u({ type: String })
|
|
254
267
|
], o.prototype, "assistiveText");
|
|
255
268
|
n([
|
|
256
|
-
|
|
269
|
+
u({ type: String })
|
|
257
270
|
], o.prototype, "name");
|
|
258
271
|
n([
|
|
259
|
-
|
|
272
|
+
u({ type: String })
|
|
260
273
|
], o.prototype, "autocomplete");
|
|
261
274
|
n([
|
|
262
|
-
|
|
275
|
+
u({ type: String })
|
|
263
276
|
], o.prototype, "placeholder");
|
|
264
277
|
n([
|
|
265
278
|
q("textarea")
|
|
@@ -267,11 +280,11 @@ n([
|
|
|
267
280
|
n([
|
|
268
281
|
q("textarea")
|
|
269
282
|
], o.prototype, "focusTarget");
|
|
270
|
-
|
|
283
|
+
Y(b, o);
|
|
271
284
|
export {
|
|
272
285
|
o as PieTextarea,
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
286
|
+
p as defaultProps,
|
|
287
|
+
$e as resizeModes,
|
|
288
|
+
ke as sizes,
|
|
289
|
+
Te as statusTypes
|
|
277
290
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ 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 { LitElement } from 'lit';
|
|
6
5
|
import type { nothing } from 'lit';
|
|
6
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
7
7
|
import type { PIEInputElement } from '@justeattakeaway/pie-webc-core';
|
|
8
8
|
import type { PropertyValues } from 'lit';
|
|
9
9
|
import * as React_2 from 'react';
|
|
@@ -87,7 +87,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
|
|
|
87
87
|
static styles: CSSResult;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
declare const PieTextarea_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof
|
|
90
|
+
declare const PieTextarea_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;
|
|
91
91
|
|
|
92
92
|
declare type PieTextareaEvents = {
|
|
93
93
|
onInput?: (event: InputEvent) => void;
|
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.
|
|
4
|
+
"version": "0.15.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -33,14 +33,15 @@
|
|
|
33
33
|
"license": "Apache-2.0",
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
36
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
37
|
-
"@justeattakeaway/pie-css": "0.
|
|
36
|
+
"@justeattakeaway/pie-components-config": "0.19.0",
|
|
37
|
+
"@justeattakeaway/pie-css": "0.16.0",
|
|
38
|
+
"@justeattakeaway/pie-monorepo-utils": "0.5.0",
|
|
38
39
|
"@types/lodash.throttle": "4.1.9",
|
|
39
40
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
40
41
|
},
|
|
41
42
|
"dependencies": {
|
|
42
|
-
"@justeattakeaway/pie-assistive-text": "0.
|
|
43
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
43
|
+
"@justeattakeaway/pie-assistive-text": "0.9.0",
|
|
44
|
+
"@justeattakeaway/pie-webc-core": "0.25.0",
|
|
44
45
|
"lodash.throttle": "4.1.1"
|
|
45
46
|
},
|
|
46
47
|
"volta": {
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
LitElement, html, unsafeCSS, type PropertyValues, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
|
+
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
4
5
|
import { property, query } from 'lit/decorators.js';
|
|
5
6
|
import { classMap } from 'lit/directives/class-map.js';
|
|
6
7
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
@@ -28,7 +29,7 @@ const assistiveTextIdValue = 'assistive-text';
|
|
|
28
29
|
* @event {InputEvent} input - when the textarea value is changed.
|
|
29
30
|
* @event {CustomEvent} change - when the textarea value is changed.
|
|
30
31
|
*/
|
|
31
|
-
export class PieTextarea extends FormControlMixin(RtlMixin(
|
|
32
|
+
export class PieTextarea extends FormControlMixin(RtlMixin(PieElement)) implements TextareaProps, PIEInputElement {
|
|
32
33
|
static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
|
|
33
34
|
|
|
34
35
|
@property({ type: String })
|