@justeattakeaway/pie-textarea 0.10.2 → 0.11.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 +20 -4
- package/dist/index.d.ts +7 -2
- package/dist/index.js +46 -46
- package/dist/react.d.ts +7 -2
- package/package.json +1 -1
- package/src/index.ts +15 -6
package/custom-elements.json
CHANGED
|
@@ -284,13 +284,29 @@
|
|
|
284
284
|
"kind": "field",
|
|
285
285
|
"name": "handleInput",
|
|
286
286
|
"privacy": "private",
|
|
287
|
-
"description": "Handles
|
|
287
|
+
"description": "Handles input events and updates the component's value based on the input event or a provided new value.",
|
|
288
288
|
"parameters": [
|
|
289
289
|
{
|
|
290
|
-
"description": "The input event.",
|
|
291
|
-
"name": "event"
|
|
290
|
+
"description": "The input event triggered by user interaction. If null, the `newValue` is used.",
|
|
291
|
+
"name": "event",
|
|
292
|
+
"type": {
|
|
293
|
+
"text": "InputEvent | null"
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
{
|
|
297
|
+
"description": "An optional new value to set if the event is not provided.",
|
|
298
|
+
"name": "newValue",
|
|
299
|
+
"optional": true,
|
|
300
|
+
"type": {
|
|
301
|
+
"text": "string"
|
|
302
|
+
}
|
|
292
303
|
}
|
|
293
|
-
]
|
|
304
|
+
],
|
|
305
|
+
"return": {
|
|
306
|
+
"type": {
|
|
307
|
+
"text": "void"
|
|
308
|
+
}
|
|
309
|
+
}
|
|
294
310
|
},
|
|
295
311
|
{
|
|
296
312
|
"kind": "field",
|
package/dist/index.d.ts
CHANGED
|
@@ -70,8 +70,13 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
|
|
|
70
70
|
private restrictInputLength;
|
|
71
71
|
protected updated(changedProperties: PropertyValues<this>): void;
|
|
72
72
|
/**
|
|
73
|
-
* Handles
|
|
74
|
-
*
|
|
73
|
+
* Handles input events and updates the component's value based on the input event or a provided new value.
|
|
74
|
+
*
|
|
75
|
+
* @param {InputEvent | null} event - The input event triggered by user interaction. If null, the `newValue` is used.
|
|
76
|
+
* @param {string} [newValue] - An optional new value to set if the event is not provided.
|
|
77
|
+
*
|
|
78
|
+
* @private
|
|
79
|
+
* @returns {void}
|
|
75
80
|
*/
|
|
76
81
|
private handleInput;
|
|
77
82
|
private handleChange;
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { LitElement as M, html as
|
|
2
|
-
import { property as l, query as
|
|
1
|
+
import { LitElement as M, html as j, nothing as q, unsafeCSS as P } from "lit";
|
|
2
|
+
import { property as l, query as V } from "lit/decorators.js";
|
|
3
3
|
import { classMap as G } from "lit/directives/class-map.js";
|
|
4
|
-
import { ifDefined as
|
|
4
|
+
import { ifDefined as b } from "lit/directives/if-defined.js";
|
|
5
5
|
import { live as H } from "lit/directives/live.js";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
7
|
import "@justeattakeaway/pie-form-label";
|
|
@@ -10,22 +10,22 @@ var T = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : ty
|
|
|
10
10
|
function Y(t) {
|
|
11
11
|
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
|
|
12
12
|
}
|
|
13
|
-
var N = "Expected a function",
|
|
13
|
+
var N = "Expected a function", B = NaN, Z = "[object Symbol]", ee = /^\s+|\s+$/g, te = /^[-+]0x[0-9a-f]+$/i, ae = /^0b[01]+$/i, re = /^0o[0-7]+$/i, ie = parseInt, oe = typeof T == "object" && T && T.Object === Object && T, ne = typeof self == "object" && self && self.Object === Object && self, se = oe || ne || Function("return this")(), le = Object.prototype, de = le.toString, ce = Math.max, ue = Math.min, w = function() {
|
|
14
14
|
return se.Date.now();
|
|
15
15
|
};
|
|
16
16
|
function he(t, e, a) {
|
|
17
17
|
var s, o, h, u, d, p, x = 0, k = !1, v = !1, y = !0;
|
|
18
18
|
if (typeof t != "function")
|
|
19
19
|
throw new TypeError(N);
|
|
20
|
-
e =
|
|
20
|
+
e = D(e) || 0, S(a) && (k = !!a.leading, v = "maxWait" in a, h = v ? ce(D(a.maxWait) || 0, e) : h, y = "trailing" in a ? !!a.trailing : y);
|
|
21
21
|
function g(i) {
|
|
22
22
|
var f = s, z = o;
|
|
23
23
|
return s = o = void 0, x = i, u = t.apply(z, f), u;
|
|
24
24
|
}
|
|
25
|
-
function
|
|
25
|
+
function _(i) {
|
|
26
26
|
return x = i, d = setTimeout($, e), k ? g(i) : u;
|
|
27
27
|
}
|
|
28
|
-
function
|
|
28
|
+
function E(i) {
|
|
29
29
|
var f = i - p, z = i - x, R = e - f;
|
|
30
30
|
return v ? ue(R, h - z) : R;
|
|
31
31
|
}
|
|
@@ -34,10 +34,10 @@ function he(t, e, a) {
|
|
|
34
34
|
return p === void 0 || f >= e || f < 0 || v && z >= h;
|
|
35
35
|
}
|
|
36
36
|
function $() {
|
|
37
|
-
var i =
|
|
37
|
+
var i = w();
|
|
38
38
|
if (O(i))
|
|
39
39
|
return F(i);
|
|
40
|
-
d = setTimeout($,
|
|
40
|
+
d = setTimeout($, E(i));
|
|
41
41
|
}
|
|
42
42
|
function F(i) {
|
|
43
43
|
return d = void 0, y && s ? g(i) : (s = o = void 0, u);
|
|
@@ -46,19 +46,19 @@ function he(t, e, a) {
|
|
|
46
46
|
d !== void 0 && clearTimeout(d), x = 0, s = p = o = d = void 0;
|
|
47
47
|
}
|
|
48
48
|
function K() {
|
|
49
|
-
return d === void 0 ? u : F(
|
|
49
|
+
return d === void 0 ? u : F(w());
|
|
50
50
|
}
|
|
51
|
-
function
|
|
52
|
-
var i =
|
|
51
|
+
function L() {
|
|
52
|
+
var i = w(), f = O(i);
|
|
53
53
|
if (s = arguments, o = this, p = i, f) {
|
|
54
54
|
if (d === void 0)
|
|
55
|
-
return
|
|
55
|
+
return _(p);
|
|
56
56
|
if (v)
|
|
57
57
|
return d = setTimeout($, e), g(p);
|
|
58
58
|
}
|
|
59
59
|
return d === void 0 && (d = setTimeout($, e)), u;
|
|
60
60
|
}
|
|
61
|
-
return
|
|
61
|
+
return L.cancel = A, L.flush = K, L;
|
|
62
62
|
}
|
|
63
63
|
function pe(t, e, a) {
|
|
64
64
|
var s = !0, o = !0;
|
|
@@ -80,11 +80,11 @@ function fe(t) {
|
|
|
80
80
|
function xe(t) {
|
|
81
81
|
return typeof t == "symbol" || fe(t) && de.call(t) == Z;
|
|
82
82
|
}
|
|
83
|
-
function
|
|
83
|
+
function D(t) {
|
|
84
84
|
if (typeof t == "number")
|
|
85
85
|
return t;
|
|
86
86
|
if (xe(t))
|
|
87
|
-
return
|
|
87
|
+
return B;
|
|
88
88
|
if (S(t)) {
|
|
89
89
|
var e = typeof t.valueOf == "function" ? t.valueOf() : t;
|
|
90
90
|
t = S(e) ? e + "" : e;
|
|
@@ -93,10 +93,10 @@ function B(t) {
|
|
|
93
93
|
return t === 0 ? t : +t;
|
|
94
94
|
t = t.replace(ee, "");
|
|
95
95
|
var a = ae.test(t);
|
|
96
|
-
return a || re.test(t) ? ie(t.slice(2), a ? 2 : 8) : te.test(t) ?
|
|
96
|
+
return a || re.test(t) ? ie(t.slice(2), a ? 2 : 8) : te.test(t) ? B : +t;
|
|
97
97
|
}
|
|
98
98
|
var ve = pe;
|
|
99
|
-
const ge = /* @__PURE__ */ Y(ve),
|
|
99
|
+
const ge = /* @__PURE__ */ Y(ve), be = "*,*: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-interactive-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-interactive-form)}.c-textareaWrapper.c-textarea--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(.c-textarea--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))))}}.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)}", me = ["small", "medium", "large"], ye = ["auto", "manual"], ze = ["default", "success", "error"], c = {
|
|
100
100
|
disabled: !1,
|
|
101
101
|
size: "medium",
|
|
102
102
|
resize: "auto",
|
|
@@ -113,12 +113,12 @@ var ke = Object.defineProperty, n = (t, e, a, s) => {
|
|
|
113
113
|
(u = t[h]) && (o = u(e, a, o) || o);
|
|
114
114
|
return o && ke(e, a, o), o;
|
|
115
115
|
};
|
|
116
|
-
const
|
|
116
|
+
const m = "pie-textarea", I = "assistive-text", W = class W extends U(X(M)) {
|
|
117
117
|
constructor() {
|
|
118
118
|
super(...arguments), this.value = c.value, this.disabled = c.disabled, this.size = c.size, this.resize = c.resize, this.label = c.label, this.readonly = c.readonly, this.autoFocus = c.autoFocus, this.required = c.required, this.status = c.status, this._throttledResize = ge(() => {
|
|
119
119
|
this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
|
|
120
|
-
}, 100), this.handleInput = (e) => {
|
|
121
|
-
this.value = e.target.value, this.restrictInputLength(), this._internals.setFormValue(this.value), this.handleResize();
|
|
120
|
+
}, 100), this.handleInput = (e, a) => {
|
|
121
|
+
e ? this.value = e.target.value : a && (this.value = a), this.restrictInputLength(), this._internals.setFormValue(this.value), this.handleResize();
|
|
122
122
|
}, this.handleChange = (e) => {
|
|
123
123
|
const a = J(e);
|
|
124
124
|
this.dispatchEvent(a);
|
|
@@ -162,24 +162,24 @@ const b = "pie-textarea", I = "assistive-text", _ = class _ extends U(X(M)) {
|
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
164
|
updated(e) {
|
|
165
|
-
e.has("value") &&
|
|
165
|
+
e.has("value") && this.handleInput(null, this.value), this.resize === "auto" && (e.has("resize") || e.has("size")) && this.handleResize();
|
|
166
166
|
}
|
|
167
167
|
disconnectedCallback() {
|
|
168
168
|
this._textarea.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", () => this.handleResize());
|
|
169
169
|
}
|
|
170
170
|
renderLabel(e, a) {
|
|
171
171
|
const s = a ? `${this.value.length}/${a}` : void 0;
|
|
172
|
-
return e != null && e.length ?
|
|
172
|
+
return e != null && e.length ? j`<pie-form-label for="${m}" trailing=${b(s)}>${e}</pie-form-label>` : q;
|
|
173
173
|
}
|
|
174
174
|
renderAssistiveText() {
|
|
175
|
-
return this.assistiveText ?
|
|
175
|
+
return this.assistiveText ? j`
|
|
176
176
|
<pie-assistive-text
|
|
177
177
|
id="${I}"
|
|
178
|
-
variant=${
|
|
178
|
+
variant=${b(this.status)}
|
|
179
179
|
data-test-id="pie-textarea-assistive-text">
|
|
180
180
|
${this.assistiveText}
|
|
181
181
|
</pie-assistive-text>
|
|
182
|
-
` :
|
|
182
|
+
` : q;
|
|
183
183
|
}
|
|
184
184
|
render() {
|
|
185
185
|
const {
|
|
@@ -196,8 +196,8 @@ const b = "pie-textarea", I = "assistive-text", _ = class _ extends U(X(M)) {
|
|
|
196
196
|
label: v,
|
|
197
197
|
maxLength: y,
|
|
198
198
|
status: g,
|
|
199
|
-
assistiveText:
|
|
200
|
-
} = this,
|
|
199
|
+
assistiveText: _
|
|
200
|
+
} = this, E = {
|
|
201
201
|
"c-textareaWrapper": !0,
|
|
202
202
|
"c-textarea--disabled": e,
|
|
203
203
|
"c-textarea--readonly": d,
|
|
@@ -205,25 +205,25 @@ const b = "pie-textarea", I = "assistive-text", _ = class _ extends U(X(M)) {
|
|
|
205
205
|
[`c-textarea--resize-${a}`]: !0,
|
|
206
206
|
[`c-textarea--${s}`]: !0
|
|
207
207
|
};
|
|
208
|
-
return
|
|
208
|
+
return j`<div>
|
|
209
209
|
${this.renderLabel(v, y)}
|
|
210
210
|
<div
|
|
211
|
-
class="${G(
|
|
211
|
+
class="${G(E)}"
|
|
212
212
|
data-test-id="pie-textarea-wrapper">
|
|
213
213
|
<textarea
|
|
214
|
-
id="${
|
|
215
|
-
data-test-id="${
|
|
216
|
-
name=${
|
|
217
|
-
autocomplete=${
|
|
218
|
-
placeholder=${
|
|
214
|
+
id="${m}"
|
|
215
|
+
data-test-id="${m}"
|
|
216
|
+
name=${b(u)}
|
|
217
|
+
autocomplete=${b(o)}
|
|
218
|
+
placeholder=${b(p)}
|
|
219
219
|
.value=${H(x)}
|
|
220
220
|
?autofocus=${h}
|
|
221
221
|
?readonly=${d}
|
|
222
222
|
?required=${k}
|
|
223
223
|
?disabled=${e}
|
|
224
|
-
aria-describedby=${
|
|
224
|
+
aria-describedby=${b(_ ? I : void 0)}
|
|
225
225
|
aria-invalid=${g === "error" ? "true" : "false"}
|
|
226
|
-
aria-errormessage="${
|
|
226
|
+
aria-errormessage="${b(g === "error" ? I : void 0)}"
|
|
227
227
|
@input=${this.handleInput}
|
|
228
228
|
@change=${this.handleChange}
|
|
229
229
|
></textarea>
|
|
@@ -232,8 +232,8 @@ const b = "pie-textarea", I = "assistive-text", _ = class _ extends U(X(M)) {
|
|
|
232
232
|
</div>`;
|
|
233
233
|
}
|
|
234
234
|
};
|
|
235
|
-
|
|
236
|
-
let r =
|
|
235
|
+
W.shadowRootOptions = { ...M.shadowRootOptions, delegatesFocus: !0 }, W.styles = P(be);
|
|
236
|
+
let r = W;
|
|
237
237
|
n([
|
|
238
238
|
l({ type: String })
|
|
239
239
|
], r.prototype, "value");
|
|
@@ -245,11 +245,11 @@ n([
|
|
|
245
245
|
], r.prototype, "disabled");
|
|
246
246
|
n([
|
|
247
247
|
l({ type: String }),
|
|
248
|
-
C(
|
|
248
|
+
C(m, me, c.size)
|
|
249
249
|
], r.prototype, "size");
|
|
250
250
|
n([
|
|
251
251
|
l({ type: String }),
|
|
252
|
-
C(
|
|
252
|
+
C(m, ye, c.resize)
|
|
253
253
|
], r.prototype, "resize");
|
|
254
254
|
n([
|
|
255
255
|
l({ type: String })
|
|
@@ -268,7 +268,7 @@ n([
|
|
|
268
268
|
], r.prototype, "required");
|
|
269
269
|
n([
|
|
270
270
|
l({ type: String }),
|
|
271
|
-
C(
|
|
271
|
+
C(m, ze, c.status)
|
|
272
272
|
], r.prototype, "status");
|
|
273
273
|
n([
|
|
274
274
|
l({ type: String })
|
|
@@ -283,16 +283,16 @@ n([
|
|
|
283
283
|
l({ type: String })
|
|
284
284
|
], r.prototype, "placeholder");
|
|
285
285
|
n([
|
|
286
|
-
|
|
286
|
+
V("textarea")
|
|
287
287
|
], r.prototype, "_textarea");
|
|
288
288
|
n([
|
|
289
|
-
|
|
289
|
+
V("textarea")
|
|
290
290
|
], r.prototype, "focusTarget");
|
|
291
|
-
Q(
|
|
291
|
+
Q(m, r);
|
|
292
292
|
export {
|
|
293
293
|
r as PieTextarea,
|
|
294
294
|
c as defaultProps,
|
|
295
295
|
ye as resizeModes,
|
|
296
|
-
|
|
296
|
+
me as sizes,
|
|
297
297
|
ze as statusTypes
|
|
298
298
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -73,8 +73,13 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
|
|
|
73
73
|
private restrictInputLength;
|
|
74
74
|
protected updated(changedProperties: PropertyValues<this>): void;
|
|
75
75
|
/**
|
|
76
|
-
* Handles
|
|
77
|
-
*
|
|
76
|
+
* Handles input events and updates the component's value based on the input event or a provided new value.
|
|
77
|
+
*
|
|
78
|
+
* @param {InputEvent | null} event - The input event triggered by user interaction. If null, the `newValue` is used.
|
|
79
|
+
* @param {string} [newValue] - An optional new value to set if the event is not provided.
|
|
80
|
+
*
|
|
81
|
+
* @private
|
|
82
|
+
* @returns {void}
|
|
78
83
|
*/
|
|
79
84
|
private handleInput;
|
|
80
85
|
private handleChange;
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -145,8 +145,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
145
145
|
|
|
146
146
|
protected updated (changedProperties: PropertyValues<this>) {
|
|
147
147
|
if (changedProperties.has('value')) {
|
|
148
|
-
this.
|
|
149
|
-
this._internals.setFormValue(this.value);
|
|
148
|
+
this.handleInput(null, this.value);
|
|
150
149
|
}
|
|
151
150
|
|
|
152
151
|
if (this.resize === 'auto' && (changedProperties.has('resize') || changedProperties.has('size'))) {
|
|
@@ -155,11 +154,21 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
155
154
|
}
|
|
156
155
|
|
|
157
156
|
/**
|
|
158
|
-
* Handles
|
|
159
|
-
*
|
|
157
|
+
* Handles input events and updates the component's value based on the input event or a provided new value.
|
|
158
|
+
*
|
|
159
|
+
* @param {InputEvent | null} event - The input event triggered by user interaction. If null, the `newValue` is used.
|
|
160
|
+
* @param {string} [newValue] - An optional new value to set if the event is not provided.
|
|
161
|
+
*
|
|
162
|
+
* @private
|
|
163
|
+
* @returns {void}
|
|
160
164
|
*/
|
|
161
|
-
private handleInput = (event: InputEvent) => {
|
|
162
|
-
|
|
165
|
+
private handleInput = (event: InputEvent | null, newValue?: string) => {
|
|
166
|
+
if (event) {
|
|
167
|
+
this.value = (event.target as HTMLTextAreaElement).value;
|
|
168
|
+
} else if (newValue) {
|
|
169
|
+
this.value = newValue;
|
|
170
|
+
}
|
|
171
|
+
|
|
163
172
|
this.restrictInputLength();
|
|
164
173
|
this._internals.setFormValue(this.value);
|
|
165
174
|
|