@justeattakeaway/pie-textarea 0.8.0 → 0.9.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.
Files changed (8) hide show
  1. package/custom-elements.json +17 -1
  2. package/dist/index.d.ts +5 -0
  3. package/dist/index.js +103 -96
  4. package/dist/react.d.ts +5 -0
  5. package/package.json +1 -1
  6. package/src/defs.ts +6 -0
  7. package/src/index.ts +6 -0
  8. package/src/textarea.scss +14 -1
package/custom-elements.json CHANGED
@@ -42,7 +42,7 @@
42
42
  "type": {
43
43
  "text": "DefaultProps"
44
44
  },
45
- "default": "{\n disabled: false,\n size: 'medium',\n resize: 'auto',\n label: '',\n value: '',\n status: 'default',\n autoFocus: false,\n readonly: false,\n required: false,\n}",
45
+ "default": "{\n disabled: false,\n size: 'medium',\n resize: 'auto',\n label: '',\n value: '',\n placeholder: '',\n status: 'default',\n autoFocus: false,\n readonly: false,\n required: false,\n}",
46
46
  "description": "Default values for optional properties that have default fallback values in the component."
47
47
  }
48
48
  ],
@@ -199,6 +199,15 @@
199
199
  "privacy": "public",
200
200
  "attribute": "autocomplete"
201
201
  },
202
+ {
203
+ "kind": "field",
204
+ "name": "placeholder",
205
+ "type": {
206
+ "text": "TextareaProps['placeholder']"
207
+ },
208
+ "privacy": "public",
209
+ "attribute": "placeholder"
210
+ },
202
211
  {
203
212
  "kind": "field",
204
213
  "name": "_textarea",
@@ -404,6 +413,13 @@
404
413
  "text": "TextareaProps['autocomplete']"
405
414
  },
406
415
  "fieldName": "autocomplete"
416
+ },
417
+ {
418
+ "name": "placeholder",
419
+ "type": {
420
+ "text": "TextareaProps['placeholder']"
421
+ },
422
+ "fieldName": "placeholder"
407
423
  }
408
424
  ],
409
425
  "mixins": [
package/dist/index.d.ts CHANGED
@@ -44,6 +44,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
44
44
  assistiveText: TextareaProps['assistiveText'];
45
45
  name: TextareaProps['name'];
46
46
  autocomplete: TextareaProps['autocomplete'];
47
+ placeholder: TextareaProps['placeholder'];
47
48
  private _textarea;
48
49
  focusTarget: HTMLElement;
49
50
  private _throttledResize;
@@ -154,6 +155,10 @@ export declare interface TextareaProps {
154
155
  * If the `label` property is not set, this property will have no effect.
155
156
  */
156
157
  maxLength?: number;
158
+ /**
159
+ * The placeholder text to display when the textarea is empty.
160
+ */
161
+ placeholder?: string;
157
162
  }
158
163
 
159
164
  export { }
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { LitElement as M, html as L, nothing as F, unsafeCSS as A } from "lit";
2
- import { property as l, query as P } from "lit/decorators.js";
1
+ import { LitElement as P, html as W, nothing as R, unsafeCSS as A } from "lit";
2
+ import { property as l, query as V } from "lit/decorators.js";
3
3
  import { classMap as K } from "lit/directives/class-map.js";
4
4
  import { ifDefined as b } from "lit/directives/if-defined.js";
5
5
  import { live as G } from "lit/directives/live.js";
@@ -10,81 +10,81 @@ var T = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : ty
10
10
  function Q(t) {
11
11
  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
12
12
  }
13
- var V = "Expected a function", R = 0 / 0, Y = "[object Symbol]", Z = /^\s+|\s+$/g, ee = /^[-+]0x[0-9a-f]+$/i, te = /^0b[01]+$/i, ae = /^0o[0-7]+$/i, re = parseInt, ie = typeof T == "object" && T && T.Object === Object && T, ne = typeof self == "object" && self && self.Object === Object && self, oe = ie || ne || Function("return this")(), se = Object.prototype, le = se.toString, de = Math.max, ce = Math.min, j = function() {
14
- return oe.Date.now();
13
+ var q = "Expected a function", D = 0 / 0, Y = "[object Symbol]", Z = /^\s+|\s+$/g, ee = /^[-+]0x[0-9a-f]+$/i, te = /^0b[01]+$/i, ae = /^0o[0-7]+$/i, re = parseInt, ie = typeof T == "object" && T && T.Object === Object && T, oe = typeof self == "object" && self && self.Object === Object && self, ne = ie || oe || Function("return this")(), se = Object.prototype, le = se.toString, de = Math.max, ce = Math.min, j = function() {
14
+ return ne.Date.now();
15
15
  };
16
16
  function ue(t, e, a) {
17
- var r, i, h, u, d, p, x = 0, k = !1, v = !1, g = !0;
17
+ var i, o, p, u, d, h, f = 0, k = !1, v = !1, y = !0;
18
18
  if (typeof t != "function")
19
- throw new TypeError(V);
20
- e = D(e) || 0, _(a) && (k = !!a.leading, v = "maxWait" in a, h = v ? de(D(a.maxWait) || 0, e) : h, g = "trailing" in a ? !!a.trailing : g);
21
- function y(n) {
22
- var f = r, z = i;
23
- return r = i = void 0, x = n, u = t.apply(z, f), u;
19
+ throw new TypeError(q);
20
+ e = M(e) || 0, _(a) && (k = !!a.leading, v = "maxWait" in a, p = v ? de(M(a.maxWait) || 0, e) : p, y = "trailing" in a ? !!a.trailing : y);
21
+ function g(n) {
22
+ var x = i, z = o;
23
+ return i = o = void 0, f = n, u = t.apply(z, x), u;
24
24
  }
25
- function w(n) {
26
- return x = n, d = setTimeout($, e), k ? y(n) : u;
25
+ function S(n) {
26
+ return f = n, d = setTimeout($, e), k ? g(n) : u;
27
27
  }
28
- function q(n) {
29
- var f = n - p, z = n - x, C = e - f;
30
- return v ? ce(C, h - z) : C;
28
+ function w(n) {
29
+ var x = n - h, z = n - f, F = e - x;
30
+ return v ? ce(F, p - z) : F;
31
31
  }
32
32
  function I(n) {
33
- var f = n - p, z = n - x;
34
- return p === void 0 || f >= e || f < 0 || v && z >= h;
33
+ var x = n - h, z = n - f;
34
+ return h === void 0 || x >= e || x < 0 || v && z >= p;
35
35
  }
36
36
  function $() {
37
37
  var n = j();
38
38
  if (I(n))
39
- return W(n);
40
- d = setTimeout($, q(n));
39
+ return C(n);
40
+ d = setTimeout($, w(n));
41
41
  }
42
- function W(n) {
43
- return d = void 0, g && r ? y(n) : (r = i = void 0, u);
42
+ function C(n) {
43
+ return d = void 0, y && i ? g(n) : (i = o = void 0, u);
44
44
  }
45
45
  function B() {
46
- d !== void 0 && clearTimeout(d), x = 0, r = p = i = d = void 0;
46
+ d !== void 0 && clearTimeout(d), f = 0, i = h = o = d = void 0;
47
47
  }
48
48
  function N() {
49
- return d === void 0 ? u : W(j());
49
+ return d === void 0 ? u : C(j());
50
50
  }
51
- function S() {
52
- var n = j(), f = I(n);
53
- if (r = arguments, i = this, p = n, f) {
51
+ function L() {
52
+ var n = j(), x = I(n);
53
+ if (i = arguments, o = this, h = n, x) {
54
54
  if (d === void 0)
55
- return w(p);
55
+ return S(h);
56
56
  if (v)
57
- return d = setTimeout($, e), y(p);
57
+ return d = setTimeout($, e), g(h);
58
58
  }
59
59
  return d === void 0 && (d = setTimeout($, e)), u;
60
60
  }
61
- return S.cancel = B, S.flush = N, S;
61
+ return L.cancel = B, L.flush = N, L;
62
62
  }
63
- function he(t, e, a) {
64
- var r = !0, i = !0;
63
+ function pe(t, e, a) {
64
+ var i = !0, o = !0;
65
65
  if (typeof t != "function")
66
- throw new TypeError(V);
67
- return _(a) && (r = "leading" in a ? !!a.leading : r, i = "trailing" in a ? !!a.trailing : i), ue(t, e, {
68
- leading: r,
66
+ throw new TypeError(q);
67
+ return _(a) && (i = "leading" in a ? !!a.leading : i, o = "trailing" in a ? !!a.trailing : o), ue(t, e, {
68
+ leading: i,
69
69
  maxWait: e,
70
- trailing: i
70
+ trailing: o
71
71
  });
72
72
  }
73
73
  function _(t) {
74
74
  var e = typeof t;
75
75
  return !!t && (e == "object" || e == "function");
76
76
  }
77
- function pe(t) {
77
+ function he(t) {
78
78
  return !!t && typeof t == "object";
79
79
  }
80
- function fe(t) {
81
- return typeof t == "symbol" || pe(t) && le.call(t) == Y;
80
+ function xe(t) {
81
+ return typeof t == "symbol" || he(t) && le.call(t) == Y;
82
82
  }
83
- function D(t) {
83
+ function M(t) {
84
84
  if (typeof t == "number")
85
85
  return t;
86
- if (fe(t))
87
- return R;
86
+ if (xe(t))
87
+ return D;
88
88
  if (_(t)) {
89
89
  var e = typeof t.valueOf == "function" ? t.valueOf() : t;
90
90
  t = _(e) ? e + "" : e;
@@ -93,28 +93,29 @@ function D(t) {
93
93
  return t === 0 ? t : +t;
94
94
  t = t.replace(Z, "");
95
95
  var a = te.test(t);
96
- return a || ae.test(t) ? re(t.slice(2), a ? 2 : 8) : ee.test(t) ? R : +t;
96
+ return a || ae.test(t) ? re(t.slice(2), a ? 2 : 8) : ee.test(t) ? D : +t;
97
97
  }
98
- var xe = he;
99
- const ve = /* @__PURE__ */ Q(xe), ge = `*,*: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-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.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)}@media (hover: hover){.c-textareaWrapper:hover:not(.c-textarea--disabled){--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)}
100
- `, me = ["small", "medium", "large"], be = ["auto", "manual"], ye = ["default", "success", "error"], c = {
98
+ var fe = pe;
99
+ const ve = /* @__PURE__ */ Q(fe), ge = `*,*: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-subdued);--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)}
100
+ `, be = ["small", "medium", "large"], me = ["auto", "manual"], ye = ["default", "success", "error"], c = {
101
101
  disabled: !1,
102
102
  size: "medium",
103
103
  resize: "auto",
104
104
  label: "",
105
105
  value: "",
106
+ placeholder: "",
106
107
  status: "default",
107
108
  autoFocus: !1,
108
109
  readonly: !1,
109
110
  required: !1
110
111
  };
111
- var ze = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, s = (t, e, a, r) => {
112
- for (var i = r > 1 ? void 0 : r ? ke(e, a) : e, h = t.length - 1, u; h >= 0; h--)
113
- (u = t[h]) && (i = (r ? u(e, a, i) : u(i)) || i);
114
- return r && i && ze(e, a, i), i;
112
+ var ze = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, s = (t, e, a, i) => {
113
+ for (var o = i > 1 ? void 0 : i ? ke(e, a) : e, p = t.length - 1, u; p >= 0; p--)
114
+ (u = t[p]) && (o = (i ? u(e, a, o) : u(o)) || o);
115
+ return i && o && ze(e, a, o), o;
115
116
  };
116
117
  const m = "pie-textarea", E = "assistive-text";
117
- class o extends H(U(M)) {
118
+ class r extends H(U(P)) {
118
119
  constructor() {
119
120
  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 = ve(() => {
120
121
  this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
@@ -169,43 +170,45 @@ class o extends H(U(M)) {
169
170
  this._textarea.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", () => this.handleResize());
170
171
  }
171
172
  renderLabel(e, a) {
172
- const r = a ? `${this.value.length}/${a}` : void 0;
173
- return e != null && e.length ? L`<pie-form-label for="${m}" trailing=${b(r)}>${e}</pie-form-label>` : F;
173
+ const i = a ? `${this.value.length}/${a}` : void 0;
174
+ return e != null && e.length ? W`<pie-form-label for="${m}" trailing=${b(i)}>${e}</pie-form-label>` : R;
174
175
  }
175
176
  renderAssistiveText() {
176
- return this.assistiveText ? L`
177
+ return this.assistiveText ? W`
177
178
  <pie-assistive-text
178
179
  id="${E}"
179
180
  variant=${b(this.status)}
180
181
  data-test-id="pie-textarea-assistive-text">
181
182
  ${this.assistiveText}
182
183
  </pie-assistive-text>
183
- ` : F;
184
+ ` : R;
184
185
  }
185
186
  render() {
186
187
  const {
187
188
  disabled: e,
188
189
  resize: a,
189
- size: r,
190
- autocomplete: i,
191
- autoFocus: h,
190
+ size: i,
191
+ autocomplete: o,
192
+ autoFocus: p,
192
193
  name: u,
193
194
  readonly: d,
194
- value: p,
195
- required: x,
196
- label: k,
197
- maxLength: v,
195
+ placeholder: h,
196
+ value: f,
197
+ required: k,
198
+ label: v,
199
+ maxLength: y,
198
200
  status: g,
199
- assistiveText: y
201
+ assistiveText: S
200
202
  } = this, w = {
201
203
  "c-textareaWrapper": !0,
202
204
  "c-textarea--disabled": e,
205
+ "c-textarea--readonly": d,
203
206
  "c-textarea--error": g === "error",
204
207
  [`c-textarea--resize-${a}`]: !0,
205
- [`c-textarea--${r}`]: !0
208
+ [`c-textarea--${i}`]: !0
206
209
  };
207
- return L`<div>
208
- ${this.renderLabel(k, v)}
210
+ return W`<div>
211
+ ${this.renderLabel(v, y)}
209
212
  <div
210
213
  class="${K(w)}"
211
214
  data-test-id="pie-textarea-wrapper">
@@ -213,13 +216,14 @@ class o extends H(U(M)) {
213
216
  id="${m}"
214
217
  data-test-id="${m}"
215
218
  name=${b(u)}
216
- autocomplete=${b(i)}
217
- .value=${G(p)}
218
- ?autofocus=${h}
219
+ autocomplete=${b(o)}
220
+ placeholder=${b(h)}
221
+ .value=${G(f)}
222
+ ?autofocus=${p}
219
223
  ?readonly=${d}
220
- ?required=${x}
224
+ ?required=${k}
221
225
  ?disabled=${e}
222
- aria-describedby=${b(y ? E : void 0)}
226
+ aria-describedby=${b(S ? E : void 0)}
223
227
  aria-invalid=${g === "error" ? "true" : "false"}
224
228
  aria-errormessage="${b(g === "error" ? E : void 0)}"
225
229
  @input=${this.handleInput}
@@ -230,64 +234,67 @@ class o extends H(U(M)) {
230
234
  </div>`;
231
235
  }
232
236
  }
233
- o.shadowRootOptions = { ...M.shadowRootOptions, delegatesFocus: !0 };
234
- o.styles = A(ge);
237
+ r.shadowRootOptions = { ...P.shadowRootOptions, delegatesFocus: !0 };
238
+ r.styles = A(ge);
235
239
  s([
236
240
  l({ type: String })
237
- ], o.prototype, "value", 2);
241
+ ], r.prototype, "value", 2);
238
242
  s([
239
243
  l({ type: String })
240
- ], o.prototype, "defaultValue", 2);
244
+ ], r.prototype, "defaultValue", 2);
241
245
  s([
242
246
  l({ type: Boolean, reflect: !0 })
243
- ], o.prototype, "disabled", 2);
247
+ ], r.prototype, "disabled", 2);
244
248
  s([
245
249
  l({ type: String }),
246
- O(m, me, c.size)
247
- ], o.prototype, "size", 2);
250
+ O(m, be, c.size)
251
+ ], r.prototype, "size", 2);
248
252
  s([
249
253
  l({ type: String }),
250
- O(m, be, c.resize)
251
- ], o.prototype, "resize", 2);
254
+ O(m, me, c.resize)
255
+ ], r.prototype, "resize", 2);
252
256
  s([
253
257
  l({ type: String })
254
- ], o.prototype, "label", 2);
258
+ ], r.prototype, "label", 2);
255
259
  s([
256
260
  l({ type: Number })
257
- ], o.prototype, "maxLength", 2);
261
+ ], r.prototype, "maxLength", 2);
258
262
  s([
259
263
  l({ type: Boolean })
260
- ], o.prototype, "readonly", 2);
264
+ ], r.prototype, "readonly", 2);
261
265
  s([
262
266
  l({ type: Boolean })
263
- ], o.prototype, "autoFocus", 2);
267
+ ], r.prototype, "autoFocus", 2);
264
268
  s([
265
269
  l({ type: Boolean })
266
- ], o.prototype, "required", 2);
270
+ ], r.prototype, "required", 2);
267
271
  s([
268
272
  l({ type: String }),
269
273
  O(m, ye, c.status)
270
- ], o.prototype, "status", 2);
274
+ ], r.prototype, "status", 2);
275
+ s([
276
+ l({ type: String })
277
+ ], r.prototype, "assistiveText", 2);
271
278
  s([
272
279
  l({ type: String })
273
- ], o.prototype, "assistiveText", 2);
280
+ ], r.prototype, "name", 2);
274
281
  s([
275
282
  l({ type: String })
276
- ], o.prototype, "name", 2);
283
+ ], r.prototype, "autocomplete", 2);
277
284
  s([
278
285
  l({ type: String })
279
- ], o.prototype, "autocomplete", 2);
286
+ ], r.prototype, "placeholder", 2);
280
287
  s([
281
- P("textarea")
282
- ], o.prototype, "_textarea", 2);
288
+ V("textarea")
289
+ ], r.prototype, "_textarea", 2);
283
290
  s([
284
- P("textarea")
285
- ], o.prototype, "focusTarget", 2);
286
- J(m, o);
291
+ V("textarea")
292
+ ], r.prototype, "focusTarget", 2);
293
+ J(m, r);
287
294
  export {
288
- o as PieTextarea,
295
+ r as PieTextarea,
289
296
  c as defaultProps,
290
- be as resizeModes,
291
- me as sizes,
297
+ me as resizeModes,
298
+ be as sizes,
292
299
  ye as statusTypes
293
300
  };
package/dist/react.d.ts CHANGED
@@ -47,6 +47,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
47
47
  assistiveText: TextareaProps['assistiveText'];
48
48
  name: TextareaProps['name'];
49
49
  autocomplete: TextareaProps['autocomplete'];
50
+ placeholder: TextareaProps['placeholder'];
50
51
  private _textarea;
51
52
  focusTarget: HTMLElement;
52
53
  private _throttledResize;
@@ -164,6 +165,10 @@ export declare interface TextareaProps {
164
165
  * If the `label` property is not set, this property will have no effect.
165
166
  */
166
167
  maxLength?: number;
168
+ /**
169
+ * The placeholder text to display when the textarea is empty.
170
+ */
171
+ placeholder?: string;
167
172
  }
168
173
 
169
174
  export { }
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.8.0",
4
+ "version": "0.9.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
package/src/defs.ts CHANGED
@@ -81,6 +81,11 @@ export interface TextareaProps {
81
81
  * If the `label` property is not set, this property will have no effect.
82
82
  */
83
83
  maxLength?: number;
84
+
85
+ /**
86
+ * The placeholder text to display when the textarea is empty.
87
+ */
88
+ placeholder?: string;
84
89
  }
85
90
 
86
91
  /**
@@ -97,6 +102,7 @@ export const defaultProps: DefaultProps = {
97
102
  resize: 'auto',
98
103
  label: '',
99
104
  value: '',
105
+ placeholder: '',
100
106
  status: 'default',
101
107
  autoFocus: false,
102
108
  readonly: false,
package/src/index.ts CHANGED
@@ -77,6 +77,9 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
77
77
  @property({ type: String })
78
78
  public autocomplete: TextareaProps['autocomplete'];
79
79
 
80
+ @property({ type: String })
81
+ public placeholder: TextareaProps['placeholder'];
82
+
80
83
  @query('textarea')
81
84
  private _textarea!: HTMLTextAreaElement;
82
85
 
@@ -216,6 +219,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
216
219
  autoFocus,
217
220
  name,
218
221
  readonly,
222
+ placeholder,
219
223
  value,
220
224
  required,
221
225
  label,
@@ -227,6 +231,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
227
231
  const classes = {
228
232
  'c-textareaWrapper': true,
229
233
  'c-textarea--disabled': disabled,
234
+ 'c-textarea--readonly': readonly,
230
235
  'c-textarea--error': status === 'error',
231
236
  [`c-textarea--resize-${resize}`]: true,
232
237
  [`c-textarea--${size}`]: true,
@@ -242,6 +247,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
242
247
  data-test-id="${componentSelector}"
243
248
  name=${ifDefined(name)}
244
249
  autocomplete=${ifDefined(autocomplete)}
250
+ placeholder=${ifDefined(placeholder)}
245
251
  .value=${live(value)}
246
252
  ?autofocus=${autoFocus}
247
253
  ?readonly=${readonly}
package/src/textarea.scss CHANGED
@@ -15,6 +15,7 @@
15
15
  --textarea-background-color: var(--dt-color-container-default);
16
16
  --textarea-border-color: var(--dt-color-interactive-form);
17
17
  --textarea-content-color: var(--dt-color-content-default);
18
+ --textarea-placeholder-color: var(--dt-color-content-subdued);
18
19
 
19
20
  // Default height is two lines of text
20
21
  --textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2));
@@ -49,16 +50,28 @@
49
50
  box-shadow: none;
50
51
  outline: none;
51
52
  }
53
+
54
+ &::placeholder {
55
+ color: var(--textarea-placeholder-color);
56
+
57
+ opacity: 1; // normalize opacity for all browsers
58
+ }
59
+ }
60
+
61
+ &.c-textarea--readonly {
62
+ --textarea-background-color: var(--dt-color-container-subtle);
63
+ --textarea-border-color: var(--dt-color-interactive-form);
52
64
  }
53
65
 
54
66
  &.c-textarea--disabled {
55
67
  --textarea-background-color: var(--dt-color-disabled-01);
56
68
  --textarea-border-color: var(--dt-color-disabled-01);
57
69
  --textarea-content-color: var(--dt-color-content-disabled);
70
+ --textarea-placeholder-color: var(--dt-color-content-disabled);
58
71
  }
59
72
 
60
73
  @media (hover: hover) {
61
- &:hover:not(.c-textarea--disabled) {
74
+ &:hover:not(.c-textarea--disabled, .c-textarea--readonly) {
62
75
  --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))));
63
76
  }
64
77
  }