@justeattakeaway/pie-textarea 0.17.31 → 0.18.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/README.md +7 -2
- package/custom-elements.json +16 -0
- package/dist/index.d.ts +6 -1
- package/dist/index.js +89 -84
- package/dist/react.d.ts +6 -1
- package/dist/react.js +0 -0
- package/package.json +1 -4
- package/src/defs.ts +6 -1
- package/src/index.ts +5 -0
package/README.md
CHANGED
|
@@ -43,6 +43,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
43
43
|
| `autoFocus` | `true`, `false` | If true, focuses the textarea on first render. Only one element should have `autofocus`. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus). | `false` |
|
|
44
44
|
| `defaultValue` | `string` | Value used during a form reset to replace the current value. | `undefined` |
|
|
45
45
|
| `disabled` | `true`, `false` | When true, the user cannot edit or interact with the textarea. | `false` |
|
|
46
|
+
| `maxlength` | `number` | The maximum number of characters the textarea can hold. | `undefined` |
|
|
46
47
|
| `name` | `string` | Name of the textarea (used in form key/value pairs). | `undefined` |
|
|
47
48
|
| `placeholder` | `string` | Placeholder text shown when textarea is empty. | `""` |
|
|
48
49
|
| `readonly` | `true`, `false` | When true, the user cannot edit the textarea. Not the same as disabled. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly). | `false` |
|
|
@@ -76,11 +77,12 @@ const textarea = document.querySelector('pie-textarea');
|
|
|
76
77
|
console.log(textarea.validity.valid);
|
|
77
78
|
```
|
|
78
79
|
|
|
79
|
-
This getter can be useful for reducing the amount of validation code in your application. For example, if you want to create a textarea that requires
|
|
80
|
+
This getter can be useful for reducing the amount of validation code in your application. For example, if you want to create a textarea that should be at most 200 characters long and requires a value, you can set the `maxlength` and `required` properties on the component. You can then check the validity of the textarea in your application code:
|
|
80
81
|
|
|
81
82
|
```html
|
|
82
83
|
<pie-textarea
|
|
83
84
|
id="my-textarea"
|
|
85
|
+
maxlength="200"
|
|
84
86
|
required>
|
|
85
87
|
</pie-textarea>
|
|
86
88
|
```
|
|
@@ -92,7 +94,7 @@ const isValid = textarea.validity.valid;
|
|
|
92
94
|
// We could use this to drive the status and assistiveText properties on our textarea (this would likely be inside a submit event handler in a real application)
|
|
93
95
|
if (!isValid) {
|
|
94
96
|
textarea.status = 'error';
|
|
95
|
-
textarea.assistiveText = '
|
|
97
|
+
textarea.assistiveText = 'Please enter a value of no more than 200 characters';
|
|
96
98
|
}
|
|
97
99
|
```
|
|
98
100
|
|
|
@@ -137,6 +139,7 @@ import '@justeattakeaway/pie-webc/components/textarea.js';
|
|
|
137
139
|
name="my-textarea"
|
|
138
140
|
placeholder="Please enter a value"
|
|
139
141
|
autocomplete="on"
|
|
142
|
+
maxlength="200"
|
|
140
143
|
value=""
|
|
141
144
|
autoFocus
|
|
142
145
|
readonly>
|
|
@@ -154,6 +157,7 @@ import '@justeattakeaway/pie-webc/components/textarea.js';
|
|
|
154
157
|
name="my-textarea"
|
|
155
158
|
placeholder="Please enter a value"
|
|
156
159
|
autocomplete="on"
|
|
160
|
+
maxlength="200"
|
|
157
161
|
value=""
|
|
158
162
|
autoFocus
|
|
159
163
|
readonly>
|
|
@@ -169,6 +173,7 @@ import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js';
|
|
|
169
173
|
name="my-textarea"
|
|
170
174
|
placeholder="Please enter a value"
|
|
171
175
|
autocomplete="on"
|
|
176
|
+
maxlength="200"
|
|
172
177
|
value=""
|
|
173
178
|
autoFocus
|
|
174
179
|
readonly>
|
package/custom-elements.json
CHANGED
|
@@ -185,6 +185,15 @@
|
|
|
185
185
|
"privacy": "public",
|
|
186
186
|
"attribute": "placeholder"
|
|
187
187
|
},
|
|
188
|
+
{
|
|
189
|
+
"kind": "field",
|
|
190
|
+
"name": "maxlength",
|
|
191
|
+
"type": {
|
|
192
|
+
"text": "TextareaProps['maxlength']"
|
|
193
|
+
},
|
|
194
|
+
"privacy": "public",
|
|
195
|
+
"attribute": "maxlength"
|
|
196
|
+
},
|
|
188
197
|
{
|
|
189
198
|
"kind": "field",
|
|
190
199
|
"name": "_textarea",
|
|
@@ -387,6 +396,13 @@
|
|
|
387
396
|
"text": "TextareaProps['placeholder']"
|
|
388
397
|
},
|
|
389
398
|
"fieldName": "placeholder"
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
"name": "maxlength",
|
|
402
|
+
"type": {
|
|
403
|
+
"text": "TextareaProps['maxlength']"
|
|
404
|
+
},
|
|
405
|
+
"fieldName": "maxlength"
|
|
390
406
|
}
|
|
391
407
|
],
|
|
392
408
|
"mixins": [
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ import { TemplateResult } from 'lit-html';
|
|
|
11
11
|
/**
|
|
12
12
|
* The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
|
|
13
13
|
*/
|
|
14
|
-
declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue'>>;
|
|
14
|
+
declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength'>>;
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* Default values for optional properties that have default fallback values in the component.
|
|
@@ -37,6 +37,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
|
|
|
37
37
|
name: TextareaProps['name'];
|
|
38
38
|
autocomplete: TextareaProps['autocomplete'];
|
|
39
39
|
placeholder: TextareaProps['placeholder'];
|
|
40
|
+
maxlength: TextareaProps['maxlength'];
|
|
40
41
|
private _textarea;
|
|
41
42
|
focusTarget: HTMLElement;
|
|
42
43
|
private _abortController;
|
|
@@ -147,6 +148,10 @@ export declare interface TextareaProps {
|
|
|
147
148
|
* The placeholder text to display when the textarea is empty.
|
|
148
149
|
*/
|
|
149
150
|
placeholder?: string;
|
|
151
|
+
/**
|
|
152
|
+
* The maximum number of characters allowed in the textarea.
|
|
153
|
+
*/
|
|
154
|
+
maxlength?: number;
|
|
150
155
|
}
|
|
151
156
|
|
|
152
157
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
import { LitElement as de, nothing as ce, html as
|
|
2
|
-
import { property as l, query as
|
|
1
|
+
import { LitElement as de, nothing as ce, html as Q, unsafeCSS as ue } from "lit";
|
|
2
|
+
import { property as l, query as Z } from "lit/decorators.js";
|
|
3
3
|
import { classMap as pe } from "lit/directives/class-map.js";
|
|
4
|
-
import { ifDefined as
|
|
4
|
+
import { ifDefined as y } from "lit/directives/if-defined.js";
|
|
5
5
|
import { live as he } from "lit/directives/live.js";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
import { FormControlMixin as fe, RtlMixin as xe, DelegatesFocusMixin as ve, wrapNativeEvent as ge, validPropertyValues as
|
|
7
|
+
import { FormControlMixin as fe, RtlMixin as xe, DelegatesFocusMixin as ve, wrapNativeEvent as ge, validPropertyValues as U, safeCustomElement as be } 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.
|
|
13
|
+
O.v = "0.18.0";
|
|
14
14
|
let V = O;
|
|
15
15
|
var w = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
|
|
16
16
|
function me(t) {
|
|
17
17
|
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
|
|
18
18
|
}
|
|
19
|
-
var
|
|
19
|
+
var P, Y;
|
|
20
20
|
function ye() {
|
|
21
|
-
if (
|
|
22
|
-
|
|
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,
|
|
21
|
+
if (Y) return P;
|
|
22
|
+
Y = 1;
|
|
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
|
-
function te(e,
|
|
27
|
-
var p, h, W,
|
|
26
|
+
function te(e, i, n) {
|
|
27
|
+
var p, h, W, z, u, m, $ = 0, H = !1, T = !1, D = !0;
|
|
28
28
|
if (typeof e != "function")
|
|
29
29
|
throw new TypeError(t);
|
|
30
|
-
|
|
31
|
-
function
|
|
32
|
-
var v = p,
|
|
33
|
-
return p = h = void 0,
|
|
30
|
+
i = G(i) || 0, S(n) && (H = !!n.leading, T = "maxWait" in n, W = T ? M(G(n.maxWait) || 0, i) : W, D = "trailing" in n ? !!n.trailing : D);
|
|
31
|
+
function A(r) {
|
|
32
|
+
var v = p, _ = h;
|
|
33
|
+
return p = h = void 0, $ = r, z = e.apply(_, v), z;
|
|
34
34
|
}
|
|
35
35
|
function oe(r) {
|
|
36
|
-
return
|
|
36
|
+
return $ = r, u = setTimeout(j, i), H ? A(r) : z;
|
|
37
37
|
}
|
|
38
38
|
function ne(r) {
|
|
39
|
-
var v = r - m,
|
|
40
|
-
return
|
|
39
|
+
var v = r - m, _ = r - $, J = i - v;
|
|
40
|
+
return T ? ee(J, W - _) : J;
|
|
41
41
|
}
|
|
42
|
-
function
|
|
43
|
-
var v = r - m,
|
|
44
|
-
return m === void 0 || v >=
|
|
42
|
+
function K(r) {
|
|
43
|
+
var v = r - m, _ = r - $;
|
|
44
|
+
return m === void 0 || v >= i || v < 0 || T && _ >= W;
|
|
45
45
|
}
|
|
46
46
|
function j() {
|
|
47
|
-
var r =
|
|
48
|
-
if (
|
|
49
|
-
return
|
|
47
|
+
var r = q();
|
|
48
|
+
if (K(r))
|
|
49
|
+
return X(r);
|
|
50
50
|
u = setTimeout(j, ne(r));
|
|
51
51
|
}
|
|
52
|
-
function
|
|
53
|
-
return u = void 0,
|
|
52
|
+
function X(r) {
|
|
53
|
+
return u = void 0, D && p ? A(r) : (p = h = void 0, z);
|
|
54
54
|
}
|
|
55
55
|
function se() {
|
|
56
|
-
u !== void 0 && clearTimeout(u),
|
|
56
|
+
u !== void 0 && clearTimeout(u), $ = 0, p = m = h = u = void 0;
|
|
57
57
|
}
|
|
58
58
|
function le() {
|
|
59
|
-
return u === void 0 ?
|
|
59
|
+
return u === void 0 ? z : X(q());
|
|
60
60
|
}
|
|
61
|
-
function
|
|
62
|
-
var r =
|
|
61
|
+
function B() {
|
|
62
|
+
var r = q(), v = K(r);
|
|
63
63
|
if (p = arguments, h = this, m = r, v) {
|
|
64
64
|
if (u === void 0)
|
|
65
65
|
return oe(m);
|
|
66
|
-
if (
|
|
67
|
-
return u = setTimeout(j,
|
|
66
|
+
if (T)
|
|
67
|
+
return u = setTimeout(j, i), A(m);
|
|
68
68
|
}
|
|
69
|
-
return u === void 0 && (u = setTimeout(j,
|
|
69
|
+
return u === void 0 && (u = setTimeout(j, i)), z;
|
|
70
70
|
}
|
|
71
|
-
return
|
|
71
|
+
return B.cancel = se, B.flush = le, B;
|
|
72
72
|
}
|
|
73
|
-
function re(e,
|
|
73
|
+
function re(e, i, n) {
|
|
74
74
|
var p = !0, h = !0;
|
|
75
75
|
if (typeof e != "function")
|
|
76
76
|
throw new TypeError(t);
|
|
77
|
-
return S(n) && (p = "leading" in n ? !!n.leading : p, h = "trailing" in n ? !!n.trailing : h), te(e,
|
|
77
|
+
return S(n) && (p = "leading" in n ? !!n.leading : p, h = "trailing" in n ? !!n.trailing : h), te(e, i, {
|
|
78
78
|
leading: p,
|
|
79
|
-
maxWait:
|
|
79
|
+
maxWait: i,
|
|
80
80
|
trailing: h
|
|
81
81
|
});
|
|
82
82
|
}
|
|
83
83
|
function S(e) {
|
|
84
|
-
var
|
|
85
|
-
return !!e && (
|
|
84
|
+
var i = typeof e;
|
|
85
|
+
return !!e && (i == "object" || i == "function");
|
|
86
86
|
}
|
|
87
87
|
function ae(e) {
|
|
88
88
|
return !!e && typeof e == "object";
|
|
@@ -90,14 +90,14 @@ 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 G(e) {
|
|
94
94
|
if (typeof e == "number")
|
|
95
95
|
return e;
|
|
96
96
|
if (ie(e))
|
|
97
97
|
return s;
|
|
98
98
|
if (S(e)) {
|
|
99
|
-
var
|
|
100
|
-
e = S(
|
|
99
|
+
var i = typeof e.valueOf == "function" ? e.valueOf() : e;
|
|
100
|
+
e = S(i) ? i + "" : i;
|
|
101
101
|
}
|
|
102
102
|
if (typeof e != "string")
|
|
103
103
|
return e === 0 ? e : +e;
|
|
@@ -105,10 +105,10 @@ function ye() {
|
|
|
105
105
|
var n = b.test(e);
|
|
106
106
|
return n || x.test(e) ? E(e.slice(2), n ? 2 : 8) : c.test(e) ? s : +e;
|
|
107
107
|
}
|
|
108
|
-
return
|
|
108
|
+
return P = re, P;
|
|
109
109
|
}
|
|
110
110
|
var ze = ye();
|
|
111
|
-
const ke = /* @__PURE__ */ me(ze),
|
|
111
|
+
const ke = /* @__PURE__ */ me(ze), $e = "*,*: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)}", Te = ["small", "medium", "large"], _e = ["auto", "manual"], Ce = ["default", "success", "error"], d = {
|
|
112
112
|
disabled: !1,
|
|
113
113
|
size: "medium",
|
|
114
114
|
resize: "auto",
|
|
@@ -124,8 +124,8 @@ var Se = Object.defineProperty, We = Object.getOwnPropertyDescriptor, o = (t, s,
|
|
|
124
124
|
(x = t[b]) && (c = (f ? x(s, g, c) : x(c)) || c);
|
|
125
125
|
return f && c && Se(s, g, c), c;
|
|
126
126
|
};
|
|
127
|
-
const C = "pie-textarea",
|
|
128
|
-
let
|
|
127
|
+
const C = "pie-textarea", N = "assistive-text";
|
|
128
|
+
let a = class extends fe(xe(ve(V))) {
|
|
129
129
|
constructor() {
|
|
130
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 = ke(() => {
|
|
131
131
|
this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
|
|
@@ -180,10 +180,10 @@ let i = class extends fe(xe(ve(V))) {
|
|
|
180
180
|
this._throttledResize();
|
|
181
181
|
}
|
|
182
182
|
renderAssistiveText() {
|
|
183
|
-
return this.assistiveText ?
|
|
183
|
+
return this.assistiveText ? Q`
|
|
184
184
|
<pie-assistive-text
|
|
185
|
-
id="${
|
|
186
|
-
variant=${
|
|
185
|
+
id="${N}"
|
|
186
|
+
variant=${y(this.status)}
|
|
187
187
|
data-test-id="pie-textarea-assistive-text">
|
|
188
188
|
${this.assistiveText}
|
|
189
189
|
</pie-assistive-text>
|
|
@@ -202,8 +202,9 @@ let i = class extends fe(xe(ve(V))) {
|
|
|
202
202
|
value: I,
|
|
203
203
|
required: F,
|
|
204
204
|
status: k,
|
|
205
|
-
assistiveText: R
|
|
206
|
-
|
|
205
|
+
assistiveText: R,
|
|
206
|
+
maxlength: L
|
|
207
|
+
} = this, M = {
|
|
207
208
|
"c-textareaWrapper": !0,
|
|
208
209
|
"is-disabled": t,
|
|
209
210
|
"is-readonly": x,
|
|
@@ -211,88 +212,92 @@ let i = class extends fe(xe(ve(V))) {
|
|
|
211
212
|
[`c-textarea--resize-${s}`]: !0,
|
|
212
213
|
[`c-textarea--${g}`]: !0
|
|
213
214
|
};
|
|
214
|
-
return
|
|
215
|
+
return Q`<div>
|
|
215
216
|
<div
|
|
216
|
-
class="${pe(
|
|
217
|
+
class="${pe(M)}"
|
|
217
218
|
data-test-id="pie-textarea-wrapper">
|
|
218
219
|
<textarea
|
|
219
220
|
id="${C}"
|
|
220
221
|
data-test-id="${C}"
|
|
221
|
-
name=${
|
|
222
|
-
autocomplete=${
|
|
223
|
-
placeholder=${
|
|
222
|
+
name=${y(b)}
|
|
223
|
+
autocomplete=${y(f)}
|
|
224
|
+
placeholder=${y(E)}
|
|
224
225
|
.value=${he(I)}
|
|
225
226
|
?autofocus=${c}
|
|
226
227
|
?readonly=${x}
|
|
227
228
|
?required=${F}
|
|
228
229
|
?disabled=${t}
|
|
229
|
-
aria-describedby=${
|
|
230
|
+
aria-describedby=${y(R ? N : void 0)}
|
|
230
231
|
aria-invalid=${k === "error" ? "true" : "false"}
|
|
231
|
-
aria-errormessage="${
|
|
232
|
+
aria-errormessage="${y(k === "error" ? N : void 0)}"
|
|
232
233
|
@input=${this.handleInput}
|
|
233
234
|
@change=${this.handleChange}
|
|
235
|
+
maxlength=${y(L)}
|
|
234
236
|
></textarea>
|
|
235
237
|
</div>
|
|
236
238
|
${this.renderAssistiveText()}
|
|
237
239
|
</div>`;
|
|
238
240
|
}
|
|
239
241
|
};
|
|
240
|
-
|
|
242
|
+
a.styles = ue($e);
|
|
241
243
|
o([
|
|
242
244
|
l({ type: String })
|
|
243
|
-
],
|
|
245
|
+
], a.prototype, "value", 2);
|
|
244
246
|
o([
|
|
245
247
|
l({ type: String })
|
|
246
|
-
],
|
|
248
|
+
], a.prototype, "defaultValue", 2);
|
|
247
249
|
o([
|
|
248
250
|
l({ type: Boolean, reflect: !0 })
|
|
249
|
-
],
|
|
251
|
+
], a.prototype, "disabled", 2);
|
|
250
252
|
o([
|
|
251
253
|
l({ type: String }),
|
|
252
|
-
|
|
253
|
-
],
|
|
254
|
+
U(C, Te, d.size)
|
|
255
|
+
], a.prototype, "size", 2);
|
|
254
256
|
o([
|
|
255
257
|
l({ type: String }),
|
|
256
|
-
|
|
257
|
-
],
|
|
258
|
+
U(C, _e, d.resize)
|
|
259
|
+
], a.prototype, "resize", 2);
|
|
258
260
|
o([
|
|
259
261
|
l({ type: Boolean })
|
|
260
|
-
],
|
|
262
|
+
], a.prototype, "readonly", 2);
|
|
261
263
|
o([
|
|
262
264
|
l({ type: Boolean })
|
|
263
|
-
],
|
|
265
|
+
], a.prototype, "autoFocus", 2);
|
|
264
266
|
o([
|
|
265
267
|
l({ type: Boolean })
|
|
266
|
-
],
|
|
268
|
+
], a.prototype, "required", 2);
|
|
267
269
|
o([
|
|
268
270
|
l({ type: String }),
|
|
269
|
-
|
|
270
|
-
],
|
|
271
|
+
U(C, Ce, d.status)
|
|
272
|
+
], a.prototype, "status", 2);
|
|
271
273
|
o([
|
|
272
274
|
l({ type: String })
|
|
273
|
-
],
|
|
275
|
+
], a.prototype, "assistiveText", 2);
|
|
274
276
|
o([
|
|
275
277
|
l({ type: String, reflect: !0 })
|
|
276
|
-
],
|
|
278
|
+
], a.prototype, "name", 2);
|
|
277
279
|
o([
|
|
278
280
|
l({ type: String })
|
|
279
|
-
],
|
|
281
|
+
], a.prototype, "autocomplete", 2);
|
|
280
282
|
o([
|
|
281
283
|
l({ type: String })
|
|
282
|
-
],
|
|
284
|
+
], a.prototype, "placeholder", 2);
|
|
285
|
+
o([
|
|
286
|
+
l({ type: Number })
|
|
287
|
+
], a.prototype, "maxlength", 2);
|
|
283
288
|
o([
|
|
284
|
-
|
|
285
|
-
],
|
|
289
|
+
Z("textarea")
|
|
290
|
+
], a.prototype, "_textarea", 2);
|
|
286
291
|
o([
|
|
287
|
-
|
|
288
|
-
],
|
|
289
|
-
|
|
292
|
+
Z("textarea")
|
|
293
|
+
], a.prototype, "focusTarget", 2);
|
|
294
|
+
a = o([
|
|
290
295
|
be("pie-textarea")
|
|
291
|
-
],
|
|
296
|
+
], a);
|
|
292
297
|
export {
|
|
293
|
-
|
|
298
|
+
a as PieTextarea,
|
|
294
299
|
d as defaultProps,
|
|
295
|
-
|
|
296
|
-
|
|
300
|
+
_e as resizeModes,
|
|
301
|
+
Te as sizes,
|
|
297
302
|
Ce as statusTypes
|
|
298
303
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ import { TemplateResult } from 'lit-html';
|
|
|
12
12
|
/**
|
|
13
13
|
* The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
|
|
14
14
|
*/
|
|
15
|
-
declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue'>>;
|
|
15
|
+
declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength'>>;
|
|
16
16
|
|
|
17
17
|
/**
|
|
18
18
|
* Default values for optional properties that have default fallback values in the component.
|
|
@@ -40,6 +40,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
|
|
|
40
40
|
name: TextareaProps['name'];
|
|
41
41
|
autocomplete: TextareaProps['autocomplete'];
|
|
42
42
|
placeholder: TextareaProps['placeholder'];
|
|
43
|
+
maxlength: TextareaProps['maxlength'];
|
|
43
44
|
private _textarea;
|
|
44
45
|
focusTarget: HTMLElement;
|
|
45
46
|
private _abortController;
|
|
@@ -157,6 +158,10 @@ export declare interface TextareaProps {
|
|
|
157
158
|
* The placeholder text to display when the textarea is empty.
|
|
158
159
|
*/
|
|
159
160
|
placeholder?: string;
|
|
161
|
+
/**
|
|
162
|
+
* The maximum number of characters allowed in the textarea.
|
|
163
|
+
*/
|
|
164
|
+
maxlength?: number;
|
|
160
165
|
}
|
|
161
166
|
|
|
162
167
|
export { }
|
package/dist/react.js
CHANGED
|
File without changes
|
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.18.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -53,9 +53,6 @@
|
|
|
53
53
|
"@justeattakeaway/pie-webc-core": "14.0.1",
|
|
54
54
|
"lodash.throttle": "4.1.1"
|
|
55
55
|
},
|
|
56
|
-
"volta": {
|
|
57
|
-
"extends": "../../../package.json"
|
|
58
|
-
},
|
|
59
56
|
"customElements": "custom-elements.json",
|
|
60
57
|
"sideEffects": [
|
|
61
58
|
"dist/*.js"
|
package/src/defs.ts
CHANGED
|
@@ -75,12 +75,17 @@ export interface TextareaProps {
|
|
|
75
75
|
* The placeholder text to display when the textarea is empty.
|
|
76
76
|
*/
|
|
77
77
|
placeholder?: string;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* The maximum number of characters allowed in the textarea.
|
|
81
|
+
*/
|
|
82
|
+
maxlength?: number;
|
|
78
83
|
}
|
|
79
84
|
|
|
80
85
|
/**
|
|
81
86
|
* The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
|
|
82
87
|
*/
|
|
83
|
-
type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue'>>;
|
|
88
|
+
type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue'| 'maxlength'>>;
|
|
84
89
|
|
|
85
90
|
/**
|
|
86
91
|
* Default values for optional properties that have default fallback values in the component.
|
package/src/index.ts
CHANGED
|
@@ -75,6 +75,9 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
|
|
|
75
75
|
@property({ type: String })
|
|
76
76
|
public placeholder: TextareaProps['placeholder'];
|
|
77
77
|
|
|
78
|
+
@property({ type: Number })
|
|
79
|
+
public maxlength: TextareaProps['maxlength'];
|
|
80
|
+
|
|
78
81
|
@query('textarea')
|
|
79
82
|
private _textarea!: HTMLTextAreaElement;
|
|
80
83
|
|
|
@@ -216,6 +219,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
|
|
|
216
219
|
required,
|
|
217
220
|
status,
|
|
218
221
|
assistiveText,
|
|
222
|
+
maxlength,
|
|
219
223
|
} = this;
|
|
220
224
|
|
|
221
225
|
const classes = {
|
|
@@ -247,6 +251,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
|
|
|
247
251
|
aria-errormessage="${ifDefined(status === 'error' ? assistiveTextIdValue : undefined)}"
|
|
248
252
|
@input=${this.handleInput}
|
|
249
253
|
@change=${this.handleChange}
|
|
254
|
+
maxlength=${ifDefined(maxlength)}
|
|
250
255
|
></textarea>
|
|
251
256
|
</div>
|
|
252
257
|
${this.renderAssistiveText()}
|