@justeattakeaway/pie-text-input 0.29.23 → 0.29.25
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 +3 -3
- package/package.json +6 -6
- package/src/index.ts +1 -1
- package/src/text-input.scss +2 -2
package/dist/index.js
CHANGED
|
@@ -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.
|
|
13
|
+
z.v = "0.29.25";
|
|
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-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.
|
|
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.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}", 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",
|
|
@@ -559,7 +559,7 @@ let s = class extends Ot(Pt(Rt(X))) {
|
|
|
559
559
|
[`c-textInput--${W}`]: !0,
|
|
560
560
|
[`c-textInput--${k}`]: !0,
|
|
561
561
|
"is-disabled": g,
|
|
562
|
-
"
|
|
562
|
+
"is-readonly": A
|
|
563
563
|
};
|
|
564
564
|
return mt`
|
|
565
565
|
<div
|
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.25",
|
|
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.
|
|
49
|
-
"@justeattakeaway/pie-icons-webc": "1.21.
|
|
48
|
+
"@justeattakeaway/pie-css": "1.0.0",
|
|
49
|
+
"@justeattakeaway/pie-icons-webc": "1.21.2",
|
|
50
50
|
"@justeattakeaway/pie-monorepo-utils": "0.7.0",
|
|
51
|
-
"@justeattakeaway/pie-wrapper-react": "0.14.
|
|
51
|
+
"@justeattakeaway/pie-wrapper-react": "0.14.4",
|
|
52
52
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@justeattakeaway/pie-assistive-text": "0.11.
|
|
56
|
-
"@justeattakeaway/pie-webc-core": "
|
|
55
|
+
"@justeattakeaway/pie-assistive-text": "0.11.23",
|
|
56
|
+
"@justeattakeaway/pie-webc-core": "13.0.0",
|
|
57
57
|
"element-internals-polyfill": "1.3.11"
|
|
58
58
|
},
|
|
59
59
|
"volta": {
|
package/src/index.ts
CHANGED
|
@@ -200,7 +200,7 @@ export class PieTextInput extends FormControlMixin(RtlMixin(DelegatesFocusMixin(
|
|
|
200
200
|
[`c-textInput--${size}`]: true,
|
|
201
201
|
[`c-textInput--${status}`]: true,
|
|
202
202
|
'is-disabled': disabled,
|
|
203
|
-
'
|
|
203
|
+
'is-readonly': readonly,
|
|
204
204
|
};
|
|
205
205
|
|
|
206
206
|
return html`
|
package/src/text-input.scss
CHANGED
|
@@ -93,13 +93,13 @@
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
|
|
96
|
-
&.
|
|
96
|
+
&.is-readonly {
|
|
97
97
|
--input-container-color: var(--dt-color-container-subtle);
|
|
98
98
|
--input-border-color: var(--dt-color-border-form);
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
// Ensure that if an input is readonly and disabled, the disabled styles take precedence
|
|
102
|
-
&.is-disabled.
|
|
102
|
+
&.is-disabled.is-readonly,
|
|
103
103
|
&.is-disabled {
|
|
104
104
|
--input-container-color: var(--dt-color-disabled-01);
|
|
105
105
|
--input-border-color: var(--dt-color-disabled-01);
|