@justeattakeaway/pie-text-input 0.25.1 → 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 +3 -6
- 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",
|
|
@@ -38,12 +35,12 @@
|
|
|
38
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
39
36
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
40
37
|
"@justeattakeaway/pie-css": "0.14.1",
|
|
41
|
-
"@justeattakeaway/pie-icons-webc": "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
|