@justeattakeaway/pie-textarea 0.18.3 → 0.19.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/dist/index.js +38 -37
- package/package.json +5 -5
- package/src/index.ts +3 -6
package/dist/index.js
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
import { LitElement as de,
|
|
1
|
+
import { LitElement as de, html as Q, unsafeCSS as ce } from "lit";
|
|
2
2
|
import { property as l, query as Z } from "lit/decorators.js";
|
|
3
|
-
import { classMap as
|
|
3
|
+
import { classMap as ue } from "lit/directives/class-map.js";
|
|
4
4
|
import { ifDefined as y } from "lit/directives/if-defined.js";
|
|
5
|
-
import { live as
|
|
5
|
+
import { live as pe } from "lit/directives/live.js";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
import { FormControlMixin as
|
|
7
|
+
import { FormControlMixin as he, RtlMixin as fe, DelegatesFocusMixin as xe, wrapNativeEvent as ve, validPropertyValues as H, safeCustomElement as ge } from "@justeattakeaway/pie-webc-core";
|
|
8
8
|
const O = class O extends de {
|
|
9
9
|
willUpdate() {
|
|
10
10
|
this.getAttribute("v") || this.setAttribute("v", O.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
O.v = "0.
|
|
14
|
-
let
|
|
13
|
+
O.v = "0.19.0";
|
|
14
|
+
let N = O;
|
|
15
15
|
var w = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
|
|
16
|
-
function
|
|
16
|
+
function be(t) {
|
|
17
17
|
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
|
|
18
18
|
}
|
|
19
19
|
var P, Y;
|
|
20
|
-
function
|
|
20
|
+
function me() {
|
|
21
21
|
if (Y) return P;
|
|
22
22
|
Y = 1;
|
|
23
23
|
var t = "Expected a function", s = NaN, g = "[object Symbol]", f = /^\s+|\s+$/g, c = /^[-+]0x[0-9a-f]+$/i, b = /^0b[01]+$/i, x = /^0o[0-7]+$/i, E = parseInt, I = typeof w == "object" && w && w.Object === Object && w, F = typeof self == "object" && self && self.Object === Object && self, k = I || F || Function("return this")(), R = Object.prototype, L = R.toString, M = Math.max, ee = Math.min, q = function() {
|
|
24
24
|
return k.Date.now();
|
|
25
25
|
};
|
|
26
26
|
function te(e, i, n) {
|
|
27
|
-
var p, h, W, z, u, m, $ = 0,
|
|
27
|
+
var p, h, W, z, u, m, $ = 0, G = !1, T = !1, D = !0;
|
|
28
28
|
if (typeof e != "function")
|
|
29
29
|
throw new TypeError(t);
|
|
30
|
-
i =
|
|
30
|
+
i = U(i) || 0, S(n) && (G = !!n.leading, T = "maxWait" in n, W = T ? M(U(n.maxWait) || 0, i) : W, D = "trailing" in n ? !!n.trailing : D);
|
|
31
31
|
function A(r) {
|
|
32
32
|
var v = p, _ = h;
|
|
33
33
|
return p = h = void 0, $ = r, z = e.apply(_, v), z;
|
|
34
34
|
}
|
|
35
35
|
function oe(r) {
|
|
36
|
-
return $ = r, u = setTimeout(j, i),
|
|
36
|
+
return $ = r, u = setTimeout(j, i), G ? A(r) : z;
|
|
37
37
|
}
|
|
38
38
|
function ne(r) {
|
|
39
39
|
var v = r - m, _ = r - $, J = i - v;
|
|
@@ -90,7 +90,7 @@ function ye() {
|
|
|
90
90
|
function ie(e) {
|
|
91
91
|
return typeof e == "symbol" || ae(e) && L.call(e) == g;
|
|
92
92
|
}
|
|
93
|
-
function
|
|
93
|
+
function U(e) {
|
|
94
94
|
if (typeof e == "number")
|
|
95
95
|
return e;
|
|
96
96
|
if (ie(e))
|
|
@@ -107,8 +107,8 @@ function ye() {
|
|
|
107
107
|
}
|
|
108
108
|
return P = re, P;
|
|
109
109
|
}
|
|
110
|
-
var
|
|
111
|
-
const
|
|
110
|
+
var ye = me();
|
|
111
|
+
const ze = /* @__PURE__ */ be(ye), ke = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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.is-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,.is-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,.is-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.has-error{--textarea-border-color: var(--dt-color-support-error)}", $e = ["small", "medium", "large"], Te = ["auto", "manual"], _e = ["default", "success", "error"], d = {
|
|
112
112
|
disabled: !1,
|
|
113
113
|
size: "medium",
|
|
114
114
|
resize: "auto",
|
|
@@ -119,20 +119,20 @@ const ke = /* @__PURE__ */ me(ze), $e = "*,*:after,*:before{box-sizing:inherit}:
|
|
|
119
119
|
readonly: !1,
|
|
120
120
|
required: !1
|
|
121
121
|
};
|
|
122
|
-
var
|
|
123
|
-
for (var c = f > 1 ? void 0 : f ?
|
|
122
|
+
var Ce = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, o = (t, s, g, f) => {
|
|
123
|
+
for (var c = f > 1 ? void 0 : f ? Se(s, g) : s, b = t.length - 1, x; b >= 0; b--)
|
|
124
124
|
(x = t[b]) && (c = (f ? x(s, g, c) : x(c)) || c);
|
|
125
|
-
return f && c &&
|
|
125
|
+
return f && c && Ce(s, g, c), c;
|
|
126
126
|
};
|
|
127
|
-
const C = "pie-textarea",
|
|
128
|
-
let a = class extends fe(xe(
|
|
127
|
+
const C = "pie-textarea", V = "assistive-text";
|
|
128
|
+
let a = class extends he(fe(xe(N))) {
|
|
129
129
|
constructor() {
|
|
130
|
-
super(...arguments), this.value = d.value, this.disabled = d.disabled, this.size = d.size, this.resize = d.resize, this.readonly = d.readonly, this.autoFocus = d.autoFocus, this.required = d.required, this.status = d.status, this._throttledResize =
|
|
130
|
+
super(...arguments), this.value = d.value, this.disabled = d.disabled, this.size = d.size, this.resize = d.resize, this.readonly = d.readonly, this.autoFocus = d.autoFocus, this.required = d.required, this.status = d.status, this._throttledResize = ze(() => {
|
|
131
131
|
this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
|
|
132
132
|
}, 100), this.handleInput = (t, s) => {
|
|
133
133
|
t ? this.value = t.target.value : s && (this.value = s), this._internals.setFormValue(this.value), this.handleResize();
|
|
134
134
|
}, this.handleChange = (t) => {
|
|
135
|
-
const s =
|
|
135
|
+
const s = ve(t);
|
|
136
136
|
this.dispatchEvent(s);
|
|
137
137
|
}, this.handleKeyDown = (t) => {
|
|
138
138
|
t.key === "Enter" && t.stopPropagation();
|
|
@@ -180,14 +180,15 @@ let a = class extends fe(xe(ve(V))) {
|
|
|
180
180
|
this._throttledResize();
|
|
181
181
|
}
|
|
182
182
|
renderAssistiveText() {
|
|
183
|
-
return
|
|
183
|
+
return Q`
|
|
184
184
|
<pie-assistive-text
|
|
185
|
-
id="${
|
|
185
|
+
id="${V}"
|
|
186
186
|
variant=${y(this.status)}
|
|
187
|
+
message=${this.assistiveText || ""}
|
|
188
|
+
?isVisuallyHidden=${!this.assistiveText}
|
|
187
189
|
data-test-id="pie-textarea-assistive-text">
|
|
188
|
-
${this.assistiveText}
|
|
189
190
|
</pie-assistive-text>
|
|
190
|
-
|
|
191
|
+
`;
|
|
191
192
|
}
|
|
192
193
|
render() {
|
|
193
194
|
const {
|
|
@@ -214,7 +215,7 @@ let a = class extends fe(xe(ve(V))) {
|
|
|
214
215
|
};
|
|
215
216
|
return Q`<div>
|
|
216
217
|
<div
|
|
217
|
-
class="${
|
|
218
|
+
class="${ue(M)}"
|
|
218
219
|
data-test-id="pie-textarea-wrapper">
|
|
219
220
|
<textarea
|
|
220
221
|
id="${C}"
|
|
@@ -222,14 +223,14 @@ let a = class extends fe(xe(ve(V))) {
|
|
|
222
223
|
name=${y(b)}
|
|
223
224
|
autocomplete=${y(f)}
|
|
224
225
|
placeholder=${y(E)}
|
|
225
|
-
.value=${
|
|
226
|
+
.value=${pe(I)}
|
|
226
227
|
?autofocus=${c}
|
|
227
228
|
?readonly=${x}
|
|
228
229
|
?required=${F}
|
|
229
230
|
?disabled=${t}
|
|
230
|
-
aria-describedby=${y(R ?
|
|
231
|
+
aria-describedby=${y(R ? V : void 0)}
|
|
231
232
|
aria-invalid=${k === "error" ? "true" : "false"}
|
|
232
|
-
aria-errormessage="${y(k === "error" ?
|
|
233
|
+
aria-errormessage="${y(k === "error" ? V : void 0)}"
|
|
233
234
|
@input=${this.handleInput}
|
|
234
235
|
@change=${this.handleChange}
|
|
235
236
|
maxlength=${y(L)}
|
|
@@ -239,7 +240,7 @@ let a = class extends fe(xe(ve(V))) {
|
|
|
239
240
|
</div>`;
|
|
240
241
|
}
|
|
241
242
|
};
|
|
242
|
-
a.styles =
|
|
243
|
+
a.styles = ce(ke);
|
|
243
244
|
o([
|
|
244
245
|
l({ type: String })
|
|
245
246
|
], a.prototype, "value", 2);
|
|
@@ -251,11 +252,11 @@ o([
|
|
|
251
252
|
], a.prototype, "disabled", 2);
|
|
252
253
|
o([
|
|
253
254
|
l({ type: String }),
|
|
254
|
-
|
|
255
|
+
H(C, $e, d.size)
|
|
255
256
|
], a.prototype, "size", 2);
|
|
256
257
|
o([
|
|
257
258
|
l({ type: String }),
|
|
258
|
-
|
|
259
|
+
H(C, Te, d.resize)
|
|
259
260
|
], a.prototype, "resize", 2);
|
|
260
261
|
o([
|
|
261
262
|
l({ type: Boolean })
|
|
@@ -268,7 +269,7 @@ o([
|
|
|
268
269
|
], a.prototype, "required", 2);
|
|
269
270
|
o([
|
|
270
271
|
l({ type: String }),
|
|
271
|
-
|
|
272
|
+
H(C, _e, d.status)
|
|
272
273
|
], a.prototype, "status", 2);
|
|
273
274
|
o([
|
|
274
275
|
l({ type: String })
|
|
@@ -292,12 +293,12 @@ o([
|
|
|
292
293
|
Z("textarea")
|
|
293
294
|
], a.prototype, "focusTarget", 2);
|
|
294
295
|
a = o([
|
|
295
|
-
|
|
296
|
+
ge("pie-textarea")
|
|
296
297
|
], a);
|
|
297
298
|
export {
|
|
298
299
|
a as PieTextarea,
|
|
299
300
|
d as defaultProps,
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
301
|
+
Te as resizeModes,
|
|
302
|
+
$e as sizes,
|
|
303
|
+
_e as statusTypes
|
|
303
304
|
};
|
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.19.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -44,13 +44,13 @@
|
|
|
44
44
|
"license": "Apache-2.0",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@justeattakeaway/pie-components-config": "0.21.3",
|
|
47
|
-
"@justeattakeaway/pie-css": "1.
|
|
48
|
-
"@justeattakeaway/pie-monorepo-utils": "0.9.
|
|
47
|
+
"@justeattakeaway/pie-css": "1.2.0",
|
|
48
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.5",
|
|
49
49
|
"@types/lodash.throttle": "4.1.9"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@justeattakeaway/pie-assistive-text": "0.
|
|
53
|
-
"@justeattakeaway/pie-webc-core": "
|
|
52
|
+
"@justeattakeaway/pie-assistive-text": "1.0.0",
|
|
53
|
+
"@justeattakeaway/pie-webc-core": "15.0.0",
|
|
54
54
|
"lodash.throttle": "4.1.1"
|
|
55
55
|
},
|
|
56
56
|
"customElements": "custom-elements.json",
|
package/src/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
-
html, unsafeCSS, type PropertyValues,
|
|
2
|
+
html, unsafeCSS, type PropertyValues,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
5
|
import { property, query } from 'lit/decorators.js';
|
|
@@ -191,16 +191,13 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
|
|
|
191
191
|
};
|
|
192
192
|
|
|
193
193
|
private renderAssistiveText () {
|
|
194
|
-
if (!this.assistiveText) {
|
|
195
|
-
return nothing;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
194
|
return html`
|
|
199
195
|
<pie-assistive-text
|
|
200
196
|
id="${assistiveTextIdValue}"
|
|
201
197
|
variant=${ifDefined(this.status)}
|
|
198
|
+
message=${this.assistiveText || ''}
|
|
199
|
+
?isVisuallyHidden=${!this.assistiveText}
|
|
202
200
|
data-test-id="pie-textarea-assistive-text">
|
|
203
|
-
${this.assistiveText}
|
|
204
201
|
</pie-assistive-text>
|
|
205
202
|
`;
|
|
206
203
|
}
|