@justeattakeaway/pie-text-input 0.25.0 → 0.25.2
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 +1 -1
- package/package.json +4 -7
- package/src/text-input.scss +2 -2
package/dist/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { classMap as Lt } from "lit/directives/class-map.js";
|
|
|
5
5
|
import { live as mt } from "lit/directives/live.js";
|
|
6
6
|
import { FormControlMixin as $t, RtlMixin as Ot, wrapNativeEvent as Rt, validPropertyValues as ht, defineCustomElement as Pt } from "@justeattakeaway/pie-webc-core";
|
|
7
7
|
import "@justeattakeaway/pie-assistive-text";
|
|
8
|
-
const Ht = "*,*:after,*:before{box-sizing:inherit}.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-
|
|
8
|
+
const Ht = "*,*:after,*:before{box-sizing:inherit}.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-display-override: block;--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(.c-textInput--disabled) ::slotted([slot=leadingIcon]),.c-textInput:not(.c-textInput--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))))}}.c-textInput.c-textInput--readonly{--input-container-color: var(--dt-color-container-subtle);--input-border-color: var(--dt-color-border-form)}.c-textInput.c-textInput--disabled.c-textInput--readonly,.c-textInput.c-textInput--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}", Dt = ["text", "number", "password", "url", "email", "tel"], Qt = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], _t = ["default", "success", "error"], Xt = ["small", "medium", "large"], x = {
|
|
9
9
|
type: "text",
|
|
10
10
|
value: "",
|
|
11
11
|
size: "medium",
|
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.25.
|
|
4
|
+
"version": "0.25.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -24,9 +24,6 @@
|
|
|
24
24
|
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
|
|
25
25
|
"lint:style:fix": "yarn lint:style --fix",
|
|
26
26
|
"watch": "run -T vite build --watch",
|
|
27
|
-
"test": "echo \"Error: no test specified\" && exit 0",
|
|
28
|
-
"test:ci": "yarn test",
|
|
29
|
-
"test:browsers-setup": "npx playwright-lit-setup",
|
|
30
27
|
"test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
|
|
31
28
|
"test:browsers:ci": "yarn test:browsers",
|
|
32
29
|
"test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TEXT_INPUT} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
|
|
@@ -37,13 +34,13 @@
|
|
|
37
34
|
"devDependencies": {
|
|
38
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
39
36
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
40
|
-
"@justeattakeaway/pie-css": "0.14.
|
|
41
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
37
|
+
"@justeattakeaway/pie-css": "0.14.1",
|
|
38
|
+
"@justeattakeaway/pie-icons-webc": "1.4.0",
|
|
42
39
|
"@justeattakeaway/pie-wrapper-react": "0.14.2",
|
|
43
40
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
44
41
|
},
|
|
45
42
|
"dependencies": {
|
|
46
|
-
"@justeattakeaway/pie-assistive-text": "0.8.
|
|
43
|
+
"@justeattakeaway/pie-assistive-text": "0.8.3",
|
|
47
44
|
"@justeattakeaway/pie-webc-core": "0.24.2",
|
|
48
45
|
"element-internals-polyfill": "1.3.11"
|
|
49
46
|
},
|
package/src/text-input.scss
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
--input-text-color: var(--dt-color-content-default);
|
|
8
8
|
--input-text-color-leading-trailing-content: var(--dt-color-content-default);
|
|
9
9
|
--input-text-color-placeholder: var(--dt-color-content-placeholder);
|
|
10
|
-
--input-border-color: var(--dt-color-
|
|
10
|
+
--input-border-color: var(--dt-color-border-form);
|
|
11
11
|
--input-container-color: var(--dt-color-container-default);
|
|
12
12
|
--input-radius: var(--dt-radius-rounded-c);
|
|
13
13
|
--input-font-size: #{p.font-size(--dt-font-body-l-size)};
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
|
|
87
87
|
&.c-textInput--readonly {
|
|
88
88
|
--input-container-color: var(--dt-color-container-subtle);
|
|
89
|
-
--input-border-color: var(--dt-color-
|
|
89
|
+
--input-border-color: var(--dt-color-border-form);
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
// Ensure that if an input is readonly and disabled, the disabled styles take precedence
|