@justeattakeaway/pie-text-input 0.29.18 → 0.29.20

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 (3) hide show
  1. package/dist/index.js +34 -34
  2. package/package.json +5 -5
  3. package/src/text-input.scss +2 -0
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { LitElement as Vt, nothing as Nt, html as mt, unsafeCSS as Lt } from "lit";
2
- import { property as u, query as ft } from "lit/decorators.js";
3
- import { ifDefined as f } from "lit/directives/if-defined.js";
2
+ import { property as u, query as ht } from "lit/decorators.js";
3
+ import { ifDefined as h } from "lit/directives/if-defined.js";
4
4
  import { classMap as $t } from "lit/directives/class-map.js";
5
- import { live as ht } from "lit/directives/live.js";
5
+ import { live as ft } from "lit/directives/live.js";
6
6
  import { FormControlMixin as Ot, RtlMixin as Pt, DelegatesFocusMixin as Rt, wrapNativeEvent as Dt, validPropertyValues as Y, safeCustomElement as _t } from "@justeattakeaway/pie-webc-core";
7
7
  import "@justeattakeaway/pie-assistive-text";
8
8
  const z = class z extends Vt {
@@ -10,9 +10,9 @@ const z = class z extends Vt {
10
10
  this.getAttribute("v") || this.setAttribute("v", z.v);
11
11
  }
12
12
  };
13
- z.v = "0.29.18";
13
+ z.v = "0.29.20";
14
14
  let X = z;
15
- const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInput{--input-padding-block: var(--dt-spacing-c);--input-padding-inline: var(--dt-spacing-d);--input-gap: var(--dt-spacing-d);--input-text-color: var(--dt-color-content-default);--input-text-color-leading-trailing-content: var(--dt-color-content-default);--input-text-color-placeholder: var(--dt-color-content-placeholder);--input-border-color: var(--dt-color-border-form);--input-container-color: var(--dt-color-container-default);--input-radius: var(--dt-radius-rounded-c);--input-font-size: calc(var(--dt-font-body-l-size) * 1px);--input-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--input-height: 48px;--input-cursor: text;--icon-size-override: 24px;height:var(--input-height);border:1px solid var(--input-border-color);border-radius:var(--input-radius);padding-inline-start:var(--input-padding-inline);padding-inline-end:var(--input-padding-inline);padding-block-start:var(--input-padding-block);padding-block-end:var(--input-padding-block);font-size:var(--input-font-size);line-height:var(--input-line-height);display:flex;flex-wrap:nowrap;align-items:center;background-color:var(--input-container-color);color:var(--input-text-color-leading-trailing-content);cursor:var(--input-cursor)}.c-textInput.c-textInput--large{--input-padding-block: var(--dt-spacing-d);--input-height: 56px}.c-textInput.c-textInput--small{--input-padding-block: var(--dt-spacing-b);--input-height: 40px}.c-textInput.c-textInput--error{--input-border-color: var(--dt-color-support-error)}.c-textInput ::slotted([slot=leadingText]),.c-textInput ::slotted([slot=leadingIcon]){margin-inline-end:var(--input-gap)}.c-textInput ::slotted([slot=trailingText]),.c-textInput ::slotted([slot=trailingIcon]){margin-inline-start:var(--input-gap)}@supports (gap: var(--input-gap)){.c-textInput{gap:var(--input-gap)}.c-textInput ::slotted([slot=leadingText]),.c-textInput ::slotted([slot=leadingIcon]){margin-inline-end:0}.c-textInput ::slotted([slot=trailingText]),.c-textInput ::slotted([slot=trailingIcon]){margin-inline-start:0}}.c-textInput:not(.is-disabled) ::slotted([slot=leadingIcon]),.c-textInput:not(.is-disabled) ::slotted([slot=trailingIcon]){color:var(--dt-color-content-subdued)}@media (hover: hover){.c-textInput:hover{--input-container-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-textInput:hover{--input-container-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-textInput.c-textInput--readonly{--input-container-color: var(--dt-color-container-subtle);--input-border-color: var(--dt-color-border-form)}.c-textInput.is-disabled.c-textInput--readonly,.c-textInput.is-disabled{--input-container-color: var(--dt-color-disabled-01);--input-border-color: var(--dt-color-disabled-01);--input-text-color: var(--dt-color-content-disabled);--input-text-color-placeholder: var(--dt-color-content-disabled);--input-text-color-leading-trailing-content: var(--dt-color-content-disabled);--input-cursor: auto}.c-textInput:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}input{border:0;outline:0;height:24px;padding:0;color:var(--input-text-color);width:100%;font-size:var(--input-font-size);font-family:inherit;background:none;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}input::placeholder{color:var(--input-text-color-placeholder);opacity:1}input:disabled{-webkit-text-fill-color:var(--input-text-color);color:var(--input-text-color);-webkit-opacity:1;opacity:1}input[type=number]:not([step])::-webkit-inner-spin-button,input[type=number]:not([step])::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]:not([step]){-moz-appearance:textfield}", zt = ["text", "number", "password", "url", "email", "tel"], te = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], Wt = ["default", "success", "error"], qt = ["small", "medium", "large"], w = {
15
+ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInput{--input-padding-block: var(--dt-spacing-c);--input-padding-inline: var(--dt-spacing-d);--input-gap: var(--dt-spacing-d);--input-text-color: var(--dt-color-content-default);--input-text-color-leading-trailing-content: var(--dt-color-content-default);--input-text-color-placeholder: var(--dt-color-content-placeholder);--input-border-color: var(--dt-color-border-form);--input-container-color: var(--dt-color-container-default);--input-radius: var(--dt-radius-rounded-c);--input-font-family: var(--dt-font-body-l-family);--input-font-size: calc(var(--dt-font-body-l-size) * 1px);--input-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--input-height: 48px;--input-cursor: text;--icon-size-override: 24px;height:var(--input-height);border:1px solid var(--input-border-color);border-radius:var(--input-radius);padding-inline-start:var(--input-padding-inline);padding-inline-end:var(--input-padding-inline);padding-block-start:var(--input-padding-block);padding-block-end:var(--input-padding-block);font-family:var(--input-font-family);font-size:var(--input-font-size);line-height:var(--input-line-height);display:flex;flex-wrap:nowrap;align-items:center;background-color:var(--input-container-color);color:var(--input-text-color-leading-trailing-content);cursor:var(--input-cursor)}.c-textInput.c-textInput--large{--input-padding-block: var(--dt-spacing-d);--input-height: 56px}.c-textInput.c-textInput--small{--input-padding-block: var(--dt-spacing-b);--input-height: 40px}.c-textInput.c-textInput--error{--input-border-color: var(--dt-color-support-error)}.c-textInput ::slotted([slot=leadingText]),.c-textInput ::slotted([slot=leadingIcon]){margin-inline-end:var(--input-gap)}.c-textInput ::slotted([slot=trailingText]),.c-textInput ::slotted([slot=trailingIcon]){margin-inline-start:var(--input-gap)}@supports (gap: var(--input-gap)){.c-textInput{gap:var(--input-gap)}.c-textInput ::slotted([slot=leadingText]),.c-textInput ::slotted([slot=leadingIcon]){margin-inline-end:0}.c-textInput ::slotted([slot=trailingText]),.c-textInput ::slotted([slot=trailingIcon]){margin-inline-start:0}}.c-textInput:not(.is-disabled) ::slotted([slot=leadingIcon]),.c-textInput:not(.is-disabled) ::slotted([slot=trailingIcon]){color:var(--dt-color-content-subdued)}@media (hover: hover){.c-textInput:hover{--input-container-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-textInput:hover{--input-container-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-textInput.c-textInput--readonly{--input-container-color: var(--dt-color-container-subtle);--input-border-color: var(--dt-color-border-form)}.c-textInput.is-disabled.c-textInput--readonly,.c-textInput.is-disabled{--input-container-color: var(--dt-color-disabled-01);--input-border-color: var(--dt-color-disabled-01);--input-text-color: var(--dt-color-content-disabled);--input-text-color-placeholder: var(--dt-color-content-disabled);--input-text-color-leading-trailing-content: var(--dt-color-content-disabled);--input-cursor: auto}.c-textInput:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}input{border:0;outline:0;height:24px;padding:0;color:var(--input-text-color);width:100%;font-size:var(--input-font-size);font-family:inherit;background:none;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}input::placeholder{color:var(--input-text-color-placeholder);opacity:1}input:disabled{-webkit-text-fill-color:var(--input-text-color);color:var(--input-text-color);-webkit-opacity:1;opacity:1}input[type=number]:not([step])::-webkit-inner-spin-button,input[type=number]:not([step])::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]:not([step]){-moz-appearance:textfield}", zt = ["text", "number", "password", "url", "email", "tel"], te = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], Wt = ["default", "success", "error"], qt = ["small", "medium", "large"], w = {
16
16
  type: "text",
17
17
  value: "",
18
18
  size: "medium",
@@ -107,7 +107,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
107
107
  e.forEach((t) => {
108
108
  const { addedNodes: a, removedNodes: i } = t, n = Array.from(a), o = Array.from(i);
109
109
  n.forEach((r) => {
110
- var h;
110
+ var f;
111
111
  if (l.has(r) && r.constructor.formAssociated && O(r), S.has(r)) {
112
112
  const m = S.get(r);
113
113
  Object.keys(C).filter((b) => m[b] !== null).forEach((b) => {
@@ -128,10 +128,10 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
128
128
  for (; b; )
129
129
  O(b), b = E.nextNode();
130
130
  }
131
- r.localName === "fieldset" && ((h = R.observe) === null || h === void 0 || h.call(R, r, tt), P(r, !0));
131
+ r.localName === "fieldset" && ((f = R.observe) === null || f === void 0 || f.call(R, r, tt), P(r, !0));
132
132
  }), o.forEach((r) => {
133
- const h = l.get(r);
134
- h && g.get(h) && et(h), F.has(r) && F.get(r).disconnect();
133
+ const f = l.get(r);
134
+ f && g.get(f) && et(f), F.has(r) && F.get(r).disconnect();
135
135
  });
136
136
  });
137
137
  }
@@ -185,7 +185,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
185
185
  const n = y.get(e);
186
186
  if (e.noValidate)
187
187
  return;
188
- n.size && Array.from(n).reverse().map((h) => l.get(h).reportValidity()).includes(!1) && a.preventDefault();
188
+ n.size && Array.from(n).reverse().map((f) => l.get(f).reportValidity()).includes(!1) && a.preventDefault();
189
189
  }
190
190
  });
191
191
  }, Et = (e) => {
@@ -316,10 +316,10 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
316
316
  const { get: n } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
317
317
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
318
318
  get(...o) {
319
- const r = n.call(this, ...o), h = Array.from(y.get(this) || []);
320
- if (h.length === 0)
319
+ const r = n.call(this, ...o), f = Array.from(y.get(this) || []);
320
+ if (f.length === 0)
321
321
  return r;
322
- const m = Array.from(r).concat(h).sort((E, b) => E.compareDocumentPosition ? E.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
322
+ const m = Array.from(r).concat(f).sort((E, b) => E.compareDocumentPosition ? E.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
323
323
  return new Ct(m);
324
324
  }
325
325
  });
@@ -394,9 +394,9 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
394
394
  for (const E in t)
395
395
  r[E] = t[E];
396
396
  Object.keys(r).length === 0 && Mt(o);
397
- const h = Object.assign(Object.assign({}, o), r);
398
- delete h.valid;
399
- const { valid: m } = kt(o, h, this.form);
397
+ const f = Object.assign(Object.assign({}, o), r);
398
+ delete f.valid;
399
+ const { valid: m } = kt(o, f, this.form);
400
400
  if (!m && !a)
401
401
  throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
402
402
  I.set(this, m ? "" : a), n.isConnected ? (n.toggleAttribute("internals-invalid", !m), n.toggleAttribute("internals-valid", m), n.setAttribute("aria-invalid", `${!m}`)) : T.set(n, this);
@@ -572,25 +572,25 @@ let s = class extends Ot(Pt(Rt(X))) {
572
572
  <slot name="leadingIcon"></slot>
573
573
  <slot name="leadingText"></slot>
574
574
  <input
575
- type=${f(T)}
576
- .value=${ht(C)}
577
- name=${f(N)}
578
- ?disabled=${ht(g)}
579
- pattern=${f(S)}
580
- step=${f(L)}
581
- minlength=${f(M)}
582
- maxlength=${f(I)}
583
- min=${f(F)}
584
- max=${f(y)}
585
- autocomplete=${f(d)}
575
+ type=${h(T)}
576
+ .value=${ft(C)}
577
+ name=${h(N)}
578
+ ?disabled=${ft(g)}
579
+ pattern=${h(S)}
580
+ step=${h(L)}
581
+ minlength=${h(M)}
582
+ maxlength=${h(I)}
583
+ min=${h(F)}
584
+ max=${h(y)}
585
+ autocomplete=${h(d)}
586
586
  ?autofocus=${v}
587
- inputmode=${f(l)}
588
- placeholder=${f($)}
587
+ inputmode=${h(l)}
588
+ placeholder=${h($)}
589
589
  ?readonly=${A}
590
590
  ?required=${O}
591
- aria-describedby=${f(p ? Q : void 0)}
591
+ aria-describedby=${h(p ? Q : void 0)}
592
592
  aria-invalid=${k === "error" ? "true" : "false"}
593
- aria-errormessage="${f(k === "error" ? Q : void 0)}"
593
+ aria-errormessage="${h(k === "error" ? Q : void 0)}"
594
594
  @input=${this.handleInput}
595
595
  @change=${this.handleChange}
596
596
  data-test-id="pie-text-input">
@@ -604,7 +604,7 @@ let s = class extends Ot(Pt(Rt(X))) {
604
604
  ${p ? mt`
605
605
  <pie-assistive-text
606
606
  id="${Q}"
607
- variant=${f(k)}
607
+ variant=${h(k)}
608
608
  data-test-id="pie-text-input-assistive-text">
609
609
  ${p}
610
610
  </pie-assistive-text>
@@ -676,10 +676,10 @@ c([
676
676
  u({ type: Boolean })
677
677
  ], s.prototype, "required", 2);
678
678
  c([
679
- ft("input")
679
+ ht("input")
680
680
  ], s.prototype, "input", 2);
681
681
  c([
682
- ft("input")
682
+ ht("input")
683
683
  ], s.prototype, "focusTarget", 2);
684
684
  s = c([
685
685
  _t("pie-text-input")
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-text-input",
3
3
  "description": "PIE Design System Input built using Web Components",
4
- "version": "0.29.18",
4
+ "version": "0.29.20",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -45,15 +45,15 @@
45
45
  "devDependencies": {
46
46
  "@custom-elements-manifest/analyzer": "0.9.0",
47
47
  "@justeattakeaway/pie-components-config": "0.21.0",
48
- "@justeattakeaway/pie-css": "0.29.0",
49
- "@justeattakeaway/pie-icons-webc": "1.20.5",
48
+ "@justeattakeaway/pie-css": "0.30.0",
49
+ "@justeattakeaway/pie-icons-webc": "1.20.6",
50
50
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
51
51
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
52
52
  "cem-plugin-module-file-extensions": "0.0.5"
53
53
  },
54
54
  "dependencies": {
55
- "@justeattakeaway/pie-assistive-text": "0.11.17",
56
- "@justeattakeaway/pie-webc-core": "9.0.0",
55
+ "@justeattakeaway/pie-assistive-text": "0.11.18",
56
+ "@justeattakeaway/pie-webc-core": "10.0.0",
57
57
  "element-internals-polyfill": "1.3.11"
58
58
  },
59
59
  "volta": {
package/src/text-input.scss CHANGED
@@ -14,6 +14,7 @@
14
14
  --input-border-color: var(--dt-color-border-form);
15
15
  --input-container-color: var(--dt-color-container-default);
16
16
  --input-radius: var(--dt-radius-rounded-c);
17
+ --input-font-family: var(--dt-font-body-l-family);
17
18
  --input-font-size: #{p.font-size(--dt-font-body-l-size)};
18
19
  --input-line-height: #{p.font-size(--dt-font-body-l-line-height)};
19
20
  --input-height: 48px;
@@ -29,6 +30,7 @@
29
30
  padding-inline-end: var(--input-padding-inline);
30
31
  padding-block-start: var(--input-padding-block);
31
32
  padding-block-end: var(--input-padding-block);
33
+ font-family: var(--input-font-family);
32
34
  font-size: var(--input-font-size);
33
35
  line-height: var(--input-line-height);
34
36
  display: flex;