@justeattakeaway/pie-text-input 0.29.35 → 0.29.37
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 +17 -17
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement as Lt, nothing as
|
|
1
|
+
import { LitElement as Lt, nothing as $t, html as mt, unsafeCSS as Ot } from "lit";
|
|
2
2
|
import { property as u, query as vt } from "lit/decorators.js";
|
|
3
3
|
import { ifDefined as h } from "lit/directives/if-defined.js";
|
|
4
4
|
import { classMap as Pt } from "lit/directives/class-map.js";
|
|
@@ -10,9 +10,9 @@ const z = class z extends Lt {
|
|
|
10
10
|
this.getAttribute("v") || this.setAttribute("v", z.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
z.v = "0.29.
|
|
13
|
+
z.v = "0.29.37";
|
|
14
14
|
let X = z;
|
|
15
|
-
const Wt = "*,*: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
|
|
15
|
+
const Wt = "*,*: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.is-readonly{--input-container-color: var(--dt-color-container-subtle);--input-border-color: var(--dt-color-border-form)}.c-textInput.is-disabled.is-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}", qt = ["text", "number", "password", "url", "email", "tel"], ie = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], Bt = ["default", "success", "error"], Ut = ["small", "medium", "large"], w = {
|
|
16
16
|
type: "text",
|
|
17
17
|
value: "",
|
|
18
18
|
size: "medium",
|
|
@@ -22,9 +22,9 @@ const Wt = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
|
|
|
22
22
|
};
|
|
23
23
|
var ht = {}, gt;
|
|
24
24
|
function jt() {
|
|
25
|
-
return gt || (gt = 1, function() {
|
|
25
|
+
return gt || (gt = 1, (function() {
|
|
26
26
|
(function(p) {
|
|
27
|
-
const d = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(),
|
|
27
|
+
const d = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), C = {
|
|
28
28
|
ariaAtomic: "aria-atomic",
|
|
29
29
|
ariaAutoComplete: "aria-autocomplete",
|
|
30
30
|
ariaBusy: "aria-busy",
|
|
@@ -82,7 +82,7 @@ function jt() {
|
|
|
82
82
|
});
|
|
83
83
|
}
|
|
84
84
|
};
|
|
85
|
-
function
|
|
85
|
+
function O(e) {
|
|
86
86
|
const t = l.get(e), { form: a } = t;
|
|
87
87
|
nt(e, a, t), it(e, t.labels);
|
|
88
88
|
}
|
|
@@ -110,7 +110,7 @@ function jt() {
|
|
|
110
110
|
const { addedNodes: a, removedNodes: i } = t, n = Array.from(a), o = Array.from(i);
|
|
111
111
|
n.forEach((r) => {
|
|
112
112
|
var f;
|
|
113
|
-
if (l.has(r) && r.constructor.formAssociated &&
|
|
113
|
+
if (l.has(r) && r.constructor.formAssociated && O(r), S.has(r)) {
|
|
114
114
|
const m = S.get(r);
|
|
115
115
|
Object.keys(C).filter((b) => m[b] !== null).forEach((b) => {
|
|
116
116
|
r.setAttribute(C[b], m[b]);
|
|
@@ -128,7 +128,7 @@ function jt() {
|
|
|
128
128
|
});
|
|
129
129
|
let b = E.nextNode();
|
|
130
130
|
for (; b; )
|
|
131
|
-
|
|
131
|
+
O(b), b = E.nextNode();
|
|
132
132
|
}
|
|
133
133
|
r.localName === "fieldset" && ((f = R.observe) === null || f === void 0 || f.call(R, r, tt), P(r, !0));
|
|
134
134
|
}), o.forEach((r) => {
|
|
@@ -367,7 +367,7 @@ function jt() {
|
|
|
367
367
|
const t = d.get(this);
|
|
368
368
|
if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
369
369
|
return !0;
|
|
370
|
-
const a = this.checkValidity(), i =
|
|
370
|
+
const a = this.checkValidity(), i = $.get(this);
|
|
371
371
|
if (i && !t.constructor.formAssociated)
|
|
372
372
|
throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
|
|
373
373
|
return !a && i && (t.focus(), i.focus()), a;
|
|
@@ -391,7 +391,7 @@ function jt() {
|
|
|
391
391
|
const n = d.get(this);
|
|
392
392
|
if (x(n, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
|
|
393
393
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
394
|
-
|
|
394
|
+
$.set(this, i);
|
|
395
395
|
const o = v.get(this), r = {};
|
|
396
396
|
for (const E in t)
|
|
397
397
|
r[E] = t[E];
|
|
@@ -490,7 +490,7 @@ function jt() {
|
|
|
490
490
|
}
|
|
491
491
|
return !!customElements.polyfillWrapFlushCallback || (Nt() ? typeof window < "u" && !window.CustomStateSet && G(HTMLElement.prototype.attachInternals) : pt(!1)), p.forceCustomStateSetPolyfill = G, p.forceElementInternalsPolyfill = pt, Object.defineProperty(p, "__esModule", { value: !0 }), p;
|
|
492
492
|
})({});
|
|
493
|
-
}()), ht;
|
|
493
|
+
})()), ht;
|
|
494
494
|
}
|
|
495
495
|
jt();
|
|
496
496
|
var Kt = Object.defineProperty, Gt = Object.getOwnPropertyDescriptor, c = (p, d, v, g) => {
|
|
@@ -551,13 +551,13 @@ let s = class extends Rt(Dt(_t(X))) {
|
|
|
551
551
|
name: N,
|
|
552
552
|
pattern: S,
|
|
553
553
|
step: L,
|
|
554
|
-
placeholder:
|
|
554
|
+
placeholder: $,
|
|
555
555
|
readonly: A,
|
|
556
556
|
status: k,
|
|
557
557
|
type: T,
|
|
558
558
|
value: C,
|
|
559
559
|
size: W,
|
|
560
|
-
required:
|
|
560
|
+
required: O
|
|
561
561
|
} = this, P = {
|
|
562
562
|
"c-textInput": !0,
|
|
563
563
|
[`c-textInput--${W}`]: !0,
|
|
@@ -589,9 +589,9 @@ let s = class extends Rt(Dt(_t(X))) {
|
|
|
589
589
|
autocomplete=${h(d)}
|
|
590
590
|
?autofocus=${v}
|
|
591
591
|
inputmode=${h(l)}
|
|
592
|
-
placeholder=${h(
|
|
592
|
+
placeholder=${h($)}
|
|
593
593
|
?readonly=${A}
|
|
594
|
-
?required=${
|
|
594
|
+
?required=${O}
|
|
595
595
|
aria-describedby=${h(p ? Q : void 0)}
|
|
596
596
|
aria-invalid=${k === "error" ? "true" : "false"}
|
|
597
597
|
aria-errormessage="${h(k === "error" ? Q : void 0)}"
|
|
@@ -612,10 +612,10 @@ let s = class extends Rt(Dt(_t(X))) {
|
|
|
612
612
|
data-test-id="pie-text-input-assistive-text">
|
|
613
613
|
${p}
|
|
614
614
|
</pie-assistive-text>
|
|
615
|
-
` :
|
|
615
|
+
` : $t}`;
|
|
616
616
|
}
|
|
617
617
|
};
|
|
618
|
-
s.styles =
|
|
618
|
+
s.styles = Ot(Wt);
|
|
619
619
|
c([
|
|
620
620
|
u({ type: String, reflect: !0 }),
|
|
621
621
|
Y(Z, qt, w.type)
|
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.
|
|
4
|
+
"version": "0.29.37",
|
|
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.1.
|
|
48
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
49
|
-
"@justeattakeaway/pie-monorepo-utils": "0.9.
|
|
47
|
+
"@justeattakeaway/pie-css": "1.1.2",
|
|
48
|
+
"@justeattakeaway/pie-icons-webc": "1.25.0",
|
|
49
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.4",
|
|
50
50
|
"@justeattakeaway/pie-wrapper-react": "0.14.5"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@justeattakeaway/pie-assistive-text": "0.11.
|
|
53
|
+
"@justeattakeaway/pie-assistive-text": "0.11.35",
|
|
54
54
|
"@justeattakeaway/pie-webc-core": "14.0.2",
|
|
55
55
|
"element-internals-polyfill": "1.3.11"
|
|
56
56
|
},
|