@justeattakeaway/pie-textarea 0.13.3 → 0.14.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 (4) hide show
  1. package/dist/index.js +16 -16
  2. package/package.json +3 -3
  3. package/src/index.ts +1 -1
  4. package/src/textarea.scss +6 -2
package/dist/index.js CHANGED
@@ -4,12 +4,12 @@ import { classMap as G } from "lit/directives/class-map.js";
4
4
  import { ifDefined as g } 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
- import { FormControlMixin as U, RtlMixin as X, wrapNativeEvent as J, validPropertyValues as w, defineCustomElement as Q } from "@justeattakeaway/pie-webc-core";
7
+ import { FormControlMixin as U, RtlMixin as X, wrapNativeEvent as J, validPropertyValues as j, defineCustomElement as Q } from "@justeattakeaway/pie-webc-core";
8
8
  var T = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
9
9
  function Y(e) {
10
10
  return e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
11
11
  }
12
- var B = "Expected a function", L = 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, _ = function() {
12
+ var B = "Expected a function", L = 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, E = function() {
13
13
  return se.Date.now();
14
14
  };
15
15
  function pe(e, t, a) {
@@ -33,7 +33,7 @@ function pe(e, t, a) {
33
33
  return h === void 0 || x >= t || x < 0 || f && z >= p;
34
34
  }
35
35
  function $() {
36
- var r = _();
36
+ var r = E();
37
37
  if (O(r))
38
38
  return C(r);
39
39
  s = setTimeout($, V(r));
@@ -45,10 +45,10 @@ function pe(e, t, a) {
45
45
  s !== void 0 && clearTimeout(s), v = 0, l = h = i = s = void 0;
46
46
  }
47
47
  function N() {
48
- return s === void 0 ? u : C(_());
48
+ return s === void 0 ? u : C(E());
49
49
  }
50
- function E() {
51
- var r = _(), x = O(r);
50
+ function w() {
51
+ var r = E(), x = O(r);
52
52
  if (l = arguments, i = this, h = r, x) {
53
53
  if (s === void 0)
54
54
  return D(h);
@@ -57,7 +57,7 @@ function pe(e, t, a) {
57
57
  }
58
58
  return s === void 0 && (s = setTimeout($, t)), u;
59
59
  }
60
- return E.cancel = A, E.flush = N, E;
60
+ return w.cancel = A, w.flush = N, w;
61
61
  }
62
62
  function he(e, t, a) {
63
63
  var l = !0, i = !0;
@@ -95,7 +95,7 @@ function M(e) {
95
95
  return a || re.test(e) ? ie(e.slice(2), a ? 2 : 8) : te.test(e) ? L : +e;
96
96
  }
97
97
  var ve = he;
98
- 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-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.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 = {
98
+ 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-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)}", me = ["small", "medium", "large"], ye = ["auto", "manual"], ze = ["default", "success", "error"], c = {
99
99
  disabled: !1,
100
100
  size: "medium",
101
101
  resize: "auto",
@@ -111,7 +111,7 @@ var ke = Object.defineProperty, n = (e, t, a, l) => {
111
111
  (u = e[p]) && (i = u(t, a, i) || i);
112
112
  return i && ke(t, a, i), i;
113
113
  };
114
- const b = "pie-textarea", j = "assistive-text", W = class W extends U(X(F)) {
114
+ const b = "pie-textarea", _ = "assistive-text", W = class W extends U(X(F)) {
115
115
  constructor() {
116
116
  super(...arguments), this.value = c.value, this.disabled = c.disabled, this.size = c.size, this.resize = c.resize, this.readonly = c.readonly, this.autoFocus = c.autoFocus, this.required = c.required, this.status = c.status, this._throttledResize = ge(() => {
117
117
  this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
@@ -162,7 +162,7 @@ const b = "pie-textarea", j = "assistive-text", W = class W extends U(X(F)) {
162
162
  renderAssistiveText() {
163
163
  return this.assistiveText ? R`
164
164
  <pie-assistive-text
165
- id="${j}"
165
+ id="${_}"
166
166
  variant=${g(this.status)}
167
167
  data-test-id="pie-textarea-assistive-text">
168
168
  ${this.assistiveText}
@@ -185,7 +185,7 @@ const b = "pie-textarea", j = "assistive-text", W = class W extends U(X(F)) {
185
185
  assistiveText: m
186
186
  } = this, y = {
187
187
  "c-textareaWrapper": !0,
188
- "c-textarea--disabled": t,
188
+ "is-disabled": t,
189
189
  "c-textarea--readonly": s,
190
190
  "c-textarea--error": f === "error",
191
191
  [`c-textarea--resize-${a}`]: !0,
@@ -206,9 +206,9 @@ const b = "pie-textarea", j = "assistive-text", W = class W extends U(X(F)) {
206
206
  ?readonly=${s}
207
207
  ?required=${k}
208
208
  ?disabled=${t}
209
- aria-describedby=${g(m ? j : void 0)}
209
+ aria-describedby=${g(m ? _ : void 0)}
210
210
  aria-invalid=${f === "error" ? "true" : "false"}
211
- aria-errormessage="${g(f === "error" ? j : void 0)}"
211
+ aria-errormessage="${g(f === "error" ? _ : void 0)}"
212
212
  @input=${this.handleInput}
213
213
  @change=${this.handleChange}
214
214
  ></textarea>
@@ -230,11 +230,11 @@ n([
230
230
  ], o.prototype, "disabled");
231
231
  n([
232
232
  d({ type: String }),
233
- w(b, me, c.size)
233
+ j(b, me, c.size)
234
234
  ], o.prototype, "size");
235
235
  n([
236
236
  d({ type: String }),
237
- w(b, ye, c.resize)
237
+ j(b, ye, c.resize)
238
238
  ], o.prototype, "resize");
239
239
  n([
240
240
  d({ type: Boolean })
@@ -247,7 +247,7 @@ n([
247
247
  ], o.prototype, "required");
248
248
  n([
249
249
  d({ type: String }),
250
- w(b, ze, c.status)
250
+ j(b, ze, c.status)
251
251
  ], o.prototype, "status");
252
252
  n([
253
253
  d({ type: String })
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.13.3",
4
+ "version": "0.14.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -34,12 +34,12 @@
34
34
  "devDependencies": {
35
35
  "@custom-elements-manifest/analyzer": "0.9.0",
36
36
  "@justeattakeaway/pie-components-config": "0.18.0",
37
- "@justeattakeaway/pie-css": "0.14.1",
37
+ "@justeattakeaway/pie-css": "0.15.0",
38
38
  "@types/lodash.throttle": "4.1.9",
39
39
  "cem-plugin-module-file-extensions": "0.0.5"
40
40
  },
41
41
  "dependencies": {
42
- "@justeattakeaway/pie-assistive-text": "0.8.3",
42
+ "@justeattakeaway/pie-assistive-text": "0.8.4",
43
43
  "@justeattakeaway/pie-webc-core": "0.24.2",
44
44
  "lodash.throttle": "4.1.1"
45
45
  },
package/src/index.ts CHANGED
@@ -210,7 +210,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
210
210
 
211
211
  const classes = {
212
212
  'c-textareaWrapper': true,
213
- 'c-textarea--disabled': disabled,
213
+ 'is-disabled': disabled,
214
214
  'c-textarea--readonly': readonly,
215
215
  'c-textarea--error': status === 'error',
216
216
  [`c-textarea--resize-${resize}`]: true,
package/src/textarea.scss CHANGED
@@ -63,7 +63,7 @@
63
63
  --textarea-border-color: var(--dt-color-border-form);
64
64
  }
65
65
 
66
- &.c-textarea--disabled {
66
+ &.is-disabled {
67
67
  --textarea-background-color: var(--dt-color-disabled-01);
68
68
  --textarea-border-color: var(--dt-color-disabled-01);
69
69
  --textarea-content-color: var(--dt-color-content-disabled);
@@ -71,8 +71,12 @@
71
71
  }
72
72
 
73
73
  @media (hover: hover) {
74
- &:hover:not(.c-textarea--disabled, .c-textarea--readonly) {
74
+ &:hover:not(.is-disabled, .c-textarea--readonly) {
75
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))));
76
+
77
+ @supports (background-color: color-mix(in srgb, black, white)) {
78
+ --textarea-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default));
79
+ }
76
80
  }
77
81
  }
78
82