@justeattakeaway/pie-text-input 0.29.24 → 0.29.26

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 (5) hide show
  1. package/custom-elements.json +4 -4
  2. package/dist/index.js +3 -3
  3. package/package.json +7 -7
  4. package/src/index.ts +1 -1
  5. package/src/text-input.scss +2 -2
package/custom-elements.json CHANGED
@@ -50,7 +50,7 @@
50
50
  "type": {
51
51
  "text": "DefaultProps"
52
52
  },
53
- "default": "{\n type: 'text',\n value: '',\n size: 'medium',\n status: 'default',\n disabled: false,\n readonly: false,\n}",
53
+ "default": "{\r\n type: 'text',\r\n value: '',\r\n size: 'medium',\r\n status: 'default',\r\n disabled: false,\r\n readonly: false,\r\n}",
54
54
  "description": "Default values for optional properties that have default fallback values in the component."
55
55
  }
56
56
  ],
@@ -290,7 +290,7 @@
290
290
  "text": "ValidityState"
291
291
  },
292
292
  "privacy": "public",
293
- "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
293
+ "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
294
294
  "readonly": true
295
295
  },
296
296
  {
@@ -311,7 +311,7 @@
311
311
  "description": "The latest disabled state of the input."
312
312
  }
313
313
  ],
314
- "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
314
+ "description": "Called after the disabled state of the element changes,\r\neither because the disabled attribute of this element was added or removed;\r\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
315
315
  },
316
316
  {
317
317
  "kind": "method",
@@ -322,7 +322,7 @@
322
322
  "text": "void"
323
323
  }
324
324
  },
325
- "description": "Called when the form that owns this component is reset.\nResets the value to the default value."
325
+ "description": "Called when the form that owns this component is reset.\r\nResets the value to the default value."
326
326
  },
327
327
  {
328
328
  "kind": "field",
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.24";
13
+ z.v = "0.29.26";
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.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.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
- "c-textInput--readonly": A
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.24",
4
+ "version": "0.29.26",
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.32.0",
49
- "@justeattakeaway/pie-icons-webc": "1.21.1",
50
- "@justeattakeaway/pie-monorepo-utils": "0.7.0",
51
- "@justeattakeaway/pie-wrapper-react": "0.14.3",
48
+ "@justeattakeaway/pie-css": "1.1.0",
49
+ "@justeattakeaway/pie-icons-webc": "1.21.3",
50
+ "@justeattakeaway/pie-monorepo-utils": "0.8.0",
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.22",
56
- "@justeattakeaway/pie-webc-core": "12.0.0",
55
+ "@justeattakeaway/pie-assistive-text": "0.11.24",
56
+ "@justeattakeaway/pie-webc-core": "14.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
- 'c-textInput--readonly': readonly,
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
- &.c-textInput--readonly {
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.c-textInput--readonly,
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);