@vonage/vwc-textfield 2.25.10 → 2.27.1

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vonage/vwc-textfield",
3
- "version": "2.25.10",
3
+ "version": "2.27.1",
4
4
  "description": "texfield component",
5
5
  "author": "yinonov <yinon@hotmail.com>",
6
6
  "homepage": "https://github.com/Vonage/vivid/tree/master/components/textfield#readme",
@@ -28,21 +28,21 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@material/mwc-textfield": "^0.22.1",
31
- "@vonage/vvd-core": "2.25.10",
32
- "@vonage/vvd-foundation": "2.25.10",
33
- "@vonage/vvd-style-coupling": "2.25.10",
34
- "@vonage/vwc-helper-message": "2.25.10",
35
- "@vonage/vwc-icon": "2.25.10",
36
- "@vonage/vwc-notched-outline": "2.25.10",
31
+ "@vonage/vvd-core": "2.27.1",
32
+ "@vonage/vvd-foundation": "2.27.1",
33
+ "@vonage/vvd-style-coupling": "2.27.1",
34
+ "@vonage/vwc-helper-message": "2.27.1",
35
+ "@vonage/vwc-icon": "2.27.1",
36
+ "@vonage/vwc-notched-outline": "2.27.1",
37
37
  "lit-element": "^2.4.0",
38
38
  "lit-html": "^1.3.0",
39
39
  "tslib": "^2.3.0"
40
40
  },
41
41
  "devDependencies": {
42
- "@vonage/vvd-design-tokens": "2.25.10",
43
- "@vonage/vvd-typography": "2.25.10",
44
- "@vonage/vvd-umbrella": "2.25.10",
42
+ "@vonage/vvd-design-tokens": "2.27.1",
43
+ "@vonage/vvd-typography": "2.27.1",
44
+ "@vonage/vvd-umbrella": "2.27.1",
45
45
  "typescript": "^4.3.2"
46
46
  },
47
- "gitHead": "bd24e3dd8c755fe6372bd70ed478800c172f7242"
47
+ "gitHead": "92d02e341d7ede16d784b09ece22c7ad1d9649fd"
48
48
  }
@@ -1,3 +1,3 @@
1
1
  import { css } from 'lit-element';
2
- export const style = css `:host .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label--float-above{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host([dense]) .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}::slotted(.vivid-input-internal){font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box !important;border:unset;background:unset;block-size:100%;border-radius:var(--vvd-textfield-shape);color:var(--vvd-color-on-canvas);inline-size:100%;inset:0;outline:unset}:host([disabled]) ::slotted(.vivid-input-internal),:host([disabled]) ::slotted(.vivid-input-internal)::placeholder{color:var(--vvd-formfield-disabled-ink)}::slotted(.vivid-input-internal:not([style*=padding i])){opacity:0}::slotted(.vivid-input-internal:-webkit-autofill),::slotted(.vivid-input-internal:-webkit-autofill:hover),::slotted(.vivid-input-internal:-webkit-autofill:focus){z-index:-1;box-shadow:0 0 0 30px var(--vvd-color-neutral-20) inset;-webkit-text-fill-color:var(--vvd-color-on-canvas)}:host(:not([dense])) :not(.mdc-text-field--no-label) ::slotted(.vivid-input-internal){padding-block-start:calc( var(--vvd-textfield-block-size) - 32px )}:host(:not([dense])) ::slotted(.vivid-input-internal){transition:opacity 100ms}:host(:not([dense])) ::slotted(.vivid-input-internal:placeholder-shown:not(:focus)){opacity:0}slot[name=action i]::slotted(vwc-icon-button){align-self:center;margin-inline-start:4px}:host(:not([dense])) slot[name=action i]::slotted(vwc-icon-button){--vvd-icon-button-icon-size:var(--vvd-textfield-action-icon-size, 20px)}:host([dense]) slot[name=action i]::slotted(vwc-icon-button){--vvd-icon-button-icon-size:var(--vvd-textfield-action-icon-size, 16px)}:host{--mdc-shape-small: var(--vvd-textfield-shape);--mdc-theme-error: --vvd-formfield-label-error-ink;--mdc-text-field-fill-color: var(--vvd-color-canvas);--mdc-text-field-ink-color: var(--vvd-color-on-canvas);--mdc-text-field-label-ink-color: var(--vvd-formfield-label-idle-ink);--mdc-text-field-disabled-ink-color: var( --vvd-formfield-disabled-ink );--mdc-text-field-disabled-fill-color: var( --vvd-formfield-disabled-fill );--mdc-text-field-outlined-idle-border-color: var( --vvd-formfield-border-idle );--mdc-text-field-outlined-hover-border-color: var( --vvd-formfield-border-hover );--mdc-text-field-outlined-disabled-border-color: var( --vvd-formfield-border-disabled );--mdc-text-field-error-color: var( --vvd-formfield-label-error-ink );--mdc-text-field-error-fill-color: var( --vvd-formfield-error-fill );--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);min-width:180px;font-stretch:var(--mdc-typography-subtitle1-font-stretch)}:host .mdc-text-field__input{pointer-events:none}:host([readonly]) vwc-notched-outline,:host([disabled]) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-disabled-border-color )}:host([readonly]) .mdc-text-field,:host([disabled]) .mdc-text-field{background-color:var(--mdc-text-field-disabled-fill-color)}:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-hover-border-color )}:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label{color:var(--mdc-text-field-label-ink-color)}:host([dense]){--vvd-textfield-block-size:40px}:host(:not([dense])){--vvd-textfield-block-size:48px}:host([dense][label]:not([label=""])){padding-top:24px}:host([dense][label]:not([label=""])) .mdc-text-field .mdc-floating-label{top:-25px;left:-12px;transform:none}:host([dense][label]:not([label=""])) .mdc-text-field .mdc-floating-label,:host([dense][label]:not([label=""])) .mdc-text-field--invalid.mdc-text-field--outlined .mdc-floating-label,:host([dense][label]:not([label=""])) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,:host([dense][label]:not([label=""])) .mdc-text-field:not(.mdc-text-field--invalid).mdc-text-field--focused .mdc-floating-label{color:var(--mdc-text-field-ink-color)}.mdc-text-field{height:var(--vvd-textfield-block-size);border-bottom-left-radius:var(--vvd-textfield-shape);border-bottom-right-radius:var(--vvd-textfield-shape)}.mdc-text-field .mdc-floating-label{left:14px;font-stretch:var(--mdc-typography-subtitle1-font-stretch);line-height:var(--mdc-typography-subtitle1-line-height);transition-property:transform,font-size}.mdc-text-field .mdc-floating-label--float-above{font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-18px)}.mdc-text-field .mdc-floating-label--float-above.mdc-floating-label--shake{animation:none}.mdc-text-field--outlined{padding-left:max(16px, var(--mdc-shape-small, 4px));background-color:var(--mdc-text-field-fill-color)}.mdc-text-field--outlined .mdc-floating-label{left:4px}.mdc-text-field--outlined.vvd-text-field--with-action,.mdc-text-field--outlined.vvd-text-field--with-action.mdc-text-field--with-trailing-icon{padding-inline-end:4px}.mdc-text-field--invalid{--vvd-outline-color: var(--mdc-text-field-error-color)}.mdc-text-field--invalid.mdc-text-field--outlined{background-color:var(--mdc-text-field-error-fill-color)}.mdc-text-field--invalid.mdc-text-field--outlined vwc-notched-outline{--mdc-notched-outline-border-color: var(--mdc-text-field-error-color)}.mdc-text-field--invalid.mdc-text-field--outlined .mdc-floating-label{color:var(--mdc-text-field-error-color)}.mdc-text-field--invalid .mdc-text-field__icon--trailing{color:var(--mdc-text-field-label-ink-color)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:var(--mdc-text-field-label-ink-color)}:host(:hover) .mdc-text-field,.mdc-text-field:hover,.mdc-text-field--focused{--vvd-outline-color: var(--mdc-text-field-outlined-hover-border-color)}:host(:hover) .mdc-text-field.mdc-text-field--invalid,.mdc-text-field:hover.mdc-text-field--invalid,.mdc-text-field--focused.mdc-text-field--invalid{--vvd-outline-color: var(--mdc-text-field-error-color)}.mdc-text-field--disabled .mdc-text-field__icon--leading,.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:var(--mdc-text-field-disabled-ink-color)}.mdc-text-field .mdc-text-field__icon--leading,.mdc-text-field .mdc-text-field__icon--trailing{display:flex;align-self:center;padding:0;margin:0 16px}.mdc-text-field .mdc-text-field__icon--leading vwc-icon,.mdc-text-field .mdc-text-field__icon--trailing vwc-icon{--vvd-icon-size:var(--vvd-textfield-action-icon-size, 20px)}vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-idle-border-color )}:host(:not([disabled]):hover) :not(.mdc-text-field--invalid):not(.mdc-text-field--focused) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-hover-border-color )}:host(:not([shape=pill i])),:host([shape=rounded i]){--vvd-textfield-shape:6px}:host([shape=pill i]){--vvd-textfield-shape:24px}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-18px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:40px}`;
2
+ export const style = css `:host .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label--float-above{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host([dense]) .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}::slotted(.vivid-input-internal){font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box !important;border:unset;background:unset;block-size:100%;border-radius:var(--vvd-textfield-shape);color:var(--vvd-color-on-canvas);inline-size:100%;inset:0;outline:unset}:host([disabled]) ::slotted(.vivid-input-internal),:host([disabled]) ::slotted(.vivid-input-internal)::placeholder{color:var(--vvd-formfield-disabled-ink)}::slotted(.vivid-input-internal:not([style*=padding i])){opacity:0}::slotted(.vivid-input-internal:-webkit-autofill),::slotted(.vivid-input-internal:-webkit-autofill:hover),::slotted(.vivid-input-internal:-webkit-autofill:focus){z-index:-1;box-shadow:0 0 0 30px var(--vvd-color-neutral-20) inset;-webkit-text-fill-color:var(--vvd-color-on-canvas)}:host(:not([dense])) :not(.mdc-text-field--no-label) ::slotted(.vivid-input-internal){padding-block-start:calc( var(--vvd-textfield-block-size) - 32px )}:host(:not([dense])) ::slotted(.vivid-input-internal){transition:opacity 100ms}:host(:not([dense])) ::slotted(.vivid-input-internal:placeholder-shown:not(:focus)){opacity:0}slot[name=action i]::slotted(vwc-icon-button){align-self:center;margin-inline-start:4px}:host(:not([dense])) slot[name=action i]::slotted(vwc-icon-button){--vvd-icon-button-icon-size:var(--vvd-textfield-action-icon-size, 20px)}:host([dense]) slot[name=action i]::slotted(vwc-icon-button){--vvd-icon-button-icon-size:var(--vvd-textfield-action-icon-size, 16px)}:host{--mdc-shape-small: var(--vvd-textfield-shape);--mdc-theme-error: --vvd-formfield-label-error-ink;--mdc-text-field-fill-color: var(--vvd-color-canvas);--mdc-text-field-ink-color: var(--vvd-color-on-canvas);--mdc-text-field-label-ink-color: var(--vvd-formfield-label-idle-ink);--mdc-text-field-disabled-ink-color: var( --vvd-formfield-disabled-ink );--mdc-text-field-disabled-fill-color: var( --vvd-formfield-disabled-fill );--mdc-text-field-outlined-idle-border-color: var( --vvd-formfield-border-idle );--mdc-text-field-outlined-hover-border-color: var( --vvd-formfield-border-hover );--mdc-text-field-outlined-disabled-border-color: var( --vvd-formfield-border-disabled );--mdc-text-field-error-color: var( --vvd-formfield-label-error-ink );--mdc-text-field-error-fill-color: var( --vvd-formfield-error-fill );--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);min-width:180px;font-stretch:var(--mdc-typography-subtitle1-font-stretch)}:host .mdc-text-field__input{pointer-events:none}:host([readonly]) vwc-notched-outline,:host([disabled]) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-disabled-border-color )}:host([readonly]) .mdc-text-field,:host([disabled]) .mdc-text-field{background-color:var(--mdc-text-field-disabled-fill-color)}:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-hover-border-color )}:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label{color:var(--mdc-text-field-label-ink-color)}:host([dense]){--vvd-textfield-block-size:40px}:host(:not([dense])){--vvd-textfield-block-size:48px}:host([dense][label]:not([label=""])) .mdc-text-field .mdc-floating-label{top:-25px;left:-12px;transform:none}:host([dense][label]:not([label=""])) .mdc-text-field .mdc-floating-label,:host([dense][label]:not([label=""])) .mdc-text-field--invalid.mdc-text-field--outlined .mdc-floating-label,:host([dense][label]:not([label=""])) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,:host([dense][label]:not([label=""])) .mdc-text-field:not(.mdc-text-field--invalid).mdc-text-field--focused .mdc-floating-label{color:var(--mdc-text-field-ink-color)}:host([charcounter]),:host([dense][label]:not([label=""])){padding-top:24px}.mdc-text-field{height:var(--vvd-textfield-block-size);border-bottom-left-radius:var(--vvd-textfield-shape);border-bottom-right-radius:var(--vvd-textfield-shape)}.mdc-text-field .mdc-floating-label{left:14px;font-stretch:var(--mdc-typography-subtitle1-font-stretch);line-height:var(--mdc-typography-subtitle1-line-height);transition-property:transform,font-size}.mdc-text-field .mdc-floating-label--float-above{font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-18px)}.mdc-text-field .mdc-floating-label--float-above.mdc-floating-label--shake{animation:none}.mdc-text-field--outlined{padding-left:max(16px, var(--mdc-shape-small, 4px));background-color:var(--mdc-text-field-fill-color)}.mdc-text-field--outlined .mdc-floating-label{left:4px}.mdc-text-field--outlined.vvd-text-field--with-action,.mdc-text-field--outlined.vvd-text-field--with-action.mdc-text-field--with-trailing-icon{padding-inline-end:4px}.mdc-text-field--invalid{--vvd-outline-color: var(--mdc-text-field-error-color)}.mdc-text-field--invalid.mdc-text-field--outlined{background-color:var(--mdc-text-field-error-fill-color)}.mdc-text-field--invalid.mdc-text-field--outlined vwc-notched-outline{--mdc-notched-outline-border-color: var(--mdc-text-field-error-color)}.mdc-text-field--invalid.mdc-text-field--outlined .mdc-floating-label{color:var(--mdc-text-field-error-color)}.mdc-text-field--invalid .mdc-text-field__icon--trailing{color:var(--mdc-text-field-label-ink-color)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:var(--mdc-text-field-label-ink-color)}:host(:hover) .mdc-text-field,.mdc-text-field:hover,.mdc-text-field--focused{--vvd-outline-color: var(--mdc-text-field-outlined-hover-border-color)}:host(:hover) .mdc-text-field.mdc-text-field--invalid,.mdc-text-field:hover.mdc-text-field--invalid,.mdc-text-field--focused.mdc-text-field--invalid{--vvd-outline-color: var(--mdc-text-field-error-color)}.mdc-text-field--disabled .mdc-text-field__icon--leading,.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:var(--mdc-text-field-disabled-ink-color)}.mdc-text-field .mdc-text-field__icon--leading,.mdc-text-field .mdc-text-field__icon--trailing{display:flex;align-self:center;padding:0;margin:0 16px}.mdc-text-field .mdc-text-field__icon--leading vwc-icon,.mdc-text-field .mdc-text-field__icon--trailing vwc-icon{--vvd-icon-size:var(--vvd-textfield-action-icon-size, 20px)}vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-idle-border-color )}:host(:not([disabled]):hover) :not(.mdc-text-field--invalid):not(.mdc-text-field--focused) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-hover-border-color )}:host(:not([shape=pill i])),:host([shape=rounded i]){--vvd-textfield-shape:6px}:host([shape=pill i]){--vvd-textfield-shape:24px}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-18px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:40px}.mdc-text-field-character-counter{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:absolute;top:-25px;right:0;color:var(--vvd-color-neutral-70) !important}`;
3
3
  //# sourceMappingURL=vwc-textfield.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"vwc-textfield.css.js","sourceRoot":"","sources":["src/vwc-textfield.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,2oUAA2oU,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`:host .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label--float-above{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host([dense]) .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}::slotted(.vivid-input-internal){font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box !important;border:unset;background:unset;block-size:100%;border-radius:var(--vvd-textfield-shape);color:var(--vvd-color-on-canvas);inline-size:100%;inset:0;outline:unset}:host([disabled]) ::slotted(.vivid-input-internal),:host([disabled]) ::slotted(.vivid-input-internal)::placeholder{color:var(--vvd-formfield-disabled-ink)}::slotted(.vivid-input-internal:not([style*=padding i])){opacity:0}::slotted(.vivid-input-internal:-webkit-autofill),::slotted(.vivid-input-internal:-webkit-autofill:hover),::slotted(.vivid-input-internal:-webkit-autofill:focus){z-index:-1;box-shadow:0 0 0 30px var(--vvd-color-neutral-20) inset;-webkit-text-fill-color:var(--vvd-color-on-canvas)}:host(:not([dense])) :not(.mdc-text-field--no-label) ::slotted(.vivid-input-internal){padding-block-start:calc( \t\t\t\tvar(--vvd-textfield-block-size) - 32px \t\t\t)}:host(:not([dense])) ::slotted(.vivid-input-internal){transition:opacity 100ms}:host(:not([dense])) ::slotted(.vivid-input-internal:placeholder-shown:not(:focus)){opacity:0}slot[name=action i]::slotted(vwc-icon-button){align-self:center;margin-inline-start:4px}:host(:not([dense])) slot[name=action i]::slotted(vwc-icon-button){--vvd-icon-button-icon-size:var(--vvd-textfield-action-icon-size, 20px)}:host([dense]) slot[name=action i]::slotted(vwc-icon-button){--vvd-icon-button-icon-size:var(--vvd-textfield-action-icon-size, 16px)}:host{--mdc-shape-small: var(--vvd-textfield-shape);--mdc-theme-error: --vvd-formfield-label-error-ink;--mdc-text-field-fill-color: var(--vvd-color-canvas);--mdc-text-field-ink-color: var(--vvd-color-on-canvas);--mdc-text-field-label-ink-color: var(--vvd-formfield-label-idle-ink);--mdc-text-field-disabled-ink-color: var( --vvd-formfield-disabled-ink );--mdc-text-field-disabled-fill-color: var( --vvd-formfield-disabled-fill );--mdc-text-field-outlined-idle-border-color: var( --vvd-formfield-border-idle );--mdc-text-field-outlined-hover-border-color: var( --vvd-formfield-border-hover );--mdc-text-field-outlined-disabled-border-color: var( --vvd-formfield-border-disabled );--mdc-text-field-error-color: var( --vvd-formfield-label-error-ink );--mdc-text-field-error-fill-color: var( --vvd-formfield-error-fill );--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);min-width:180px;font-stretch:var(--mdc-typography-subtitle1-font-stretch)}:host .mdc-text-field__input{pointer-events:none}:host([readonly]) vwc-notched-outline,:host([disabled]) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-disabled-border-color )}:host([readonly]) .mdc-text-field,:host([disabled]) .mdc-text-field{background-color:var(--mdc-text-field-disabled-fill-color)}:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-hover-border-color )}:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label{color:var(--mdc-text-field-label-ink-color)}:host([dense]){--vvd-textfield-block-size:40px}:host(:not([dense])){--vvd-textfield-block-size:48px}:host([dense][label]:not([label=\"\"])){padding-top:24px}:host([dense][label]:not([label=\"\"])) .mdc-text-field .mdc-floating-label{top:-25px;left:-12px;transform:none}:host([dense][label]:not([label=\"\"])) .mdc-text-field .mdc-floating-label,:host([dense][label]:not([label=\"\"])) .mdc-text-field--invalid.mdc-text-field--outlined .mdc-floating-label,:host([dense][label]:not([label=\"\"])) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,:host([dense][label]:not([label=\"\"])) .mdc-text-field:not(.mdc-text-field--invalid).mdc-text-field--focused .mdc-floating-label{color:var(--mdc-text-field-ink-color)}.mdc-text-field{height:var(--vvd-textfield-block-size);border-bottom-left-radius:var(--vvd-textfield-shape);border-bottom-right-radius:var(--vvd-textfield-shape)}.mdc-text-field .mdc-floating-label{left:14px;font-stretch:var(--mdc-typography-subtitle1-font-stretch);line-height:var(--mdc-typography-subtitle1-line-height);transition-property:transform,font-size}.mdc-text-field .mdc-floating-label--float-above{font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-18px)}.mdc-text-field .mdc-floating-label--float-above.mdc-floating-label--shake{animation:none}.mdc-text-field--outlined{padding-left:max(16px, var(--mdc-shape-small, 4px));background-color:var(--mdc-text-field-fill-color)}.mdc-text-field--outlined .mdc-floating-label{left:4px}.mdc-text-field--outlined.vvd-text-field--with-action,.mdc-text-field--outlined.vvd-text-field--with-action.mdc-text-field--with-trailing-icon{padding-inline-end:4px}.mdc-text-field--invalid{--vvd-outline-color: var(--mdc-text-field-error-color)}.mdc-text-field--invalid.mdc-text-field--outlined{background-color:var(--mdc-text-field-error-fill-color)}.mdc-text-field--invalid.mdc-text-field--outlined vwc-notched-outline{--mdc-notched-outline-border-color: var(--mdc-text-field-error-color)}.mdc-text-field--invalid.mdc-text-field--outlined .mdc-floating-label{color:var(--mdc-text-field-error-color)}.mdc-text-field--invalid .mdc-text-field__icon--trailing{color:var(--mdc-text-field-label-ink-color)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:var(--mdc-text-field-label-ink-color)}:host(:hover) .mdc-text-field,.mdc-text-field:hover,.mdc-text-field--focused{--vvd-outline-color: var(--mdc-text-field-outlined-hover-border-color)}:host(:hover) .mdc-text-field.mdc-text-field--invalid,.mdc-text-field:hover.mdc-text-field--invalid,.mdc-text-field--focused.mdc-text-field--invalid{--vvd-outline-color: var(--mdc-text-field-error-color)}.mdc-text-field--disabled .mdc-text-field__icon--leading,.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:var(--mdc-text-field-disabled-ink-color)}.mdc-text-field .mdc-text-field__icon--leading,.mdc-text-field .mdc-text-field__icon--trailing{display:flex;align-self:center;padding:0;margin:0 16px}.mdc-text-field .mdc-text-field__icon--leading vwc-icon,.mdc-text-field .mdc-text-field__icon--trailing vwc-icon{--vvd-icon-size:var(--vvd-textfield-action-icon-size, 20px)}vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-idle-border-color )}:host(:not([disabled]):hover) :not(.mdc-text-field--invalid):not(.mdc-text-field--focused) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-hover-border-color )}:host(:not([shape=pill i])),:host([shape=rounded i]){--vvd-textfield-shape:6px}:host([shape=pill i]){--vvd-textfield-shape:24px}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-18px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:40px}`;"]}
1
+ {"version":3,"file":"vwc-textfield.css.js","sourceRoot":"","sources":["src/vwc-textfield.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,s4UAAs4U,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`:host .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 16px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 24px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host .mdc-floating-label--float-above{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 12px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 16px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}:host([dense]) .mdc-floating-label{--vvd-typography-font-family: SpeziaWebVariable;--vvd-typography-font-size: 14px;--vvd-typography-font-stretch: 50%;--vvd-typography-font-weight: 400;--vvd-typography-letter-spacing: 0px;--vvd-typography-line-height: 20px;--vvd-typography-text-decoration: none;--vvd-typography-text-transform: none;--mdc-typography-subtitle1-font-family: var(--vvd-typography-font-family);--mdc-typography-subtitle1-font-size: var(--vvd-typography-font-size);--mdc-typography-subtitle1-font-stretch: var(--vvd-typography-font-stretch);--mdc-typography-subtitle1-font-weight: var(--vvd-typography-font-weight);--mdc-typography-subtitle1-letter-spacing: var(--vvd-typography-letter-spacing);--mdc-typography-subtitle1-line-height: var(--vvd-typography-line-height);--mdc-typography-subtitle1-text-decoration: var(--vvd-typography-text-decoration);--mdc-typography-subtitle1-text-transform: var(--vvd-typography-text-transform)}::slotted(.vivid-input-internal){font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box !important;border:unset;background:unset;block-size:100%;border-radius:var(--vvd-textfield-shape);color:var(--vvd-color-on-canvas);inline-size:100%;inset:0;outline:unset}:host([disabled]) ::slotted(.vivid-input-internal),:host([disabled]) ::slotted(.vivid-input-internal)::placeholder{color:var(--vvd-formfield-disabled-ink)}::slotted(.vivid-input-internal:not([style*=padding i])){opacity:0}::slotted(.vivid-input-internal:-webkit-autofill),::slotted(.vivid-input-internal:-webkit-autofill:hover),::slotted(.vivid-input-internal:-webkit-autofill:focus){z-index:-1;box-shadow:0 0 0 30px var(--vvd-color-neutral-20) inset;-webkit-text-fill-color:var(--vvd-color-on-canvas)}:host(:not([dense])) :not(.mdc-text-field--no-label) ::slotted(.vivid-input-internal){padding-block-start:calc( \t\t\t\tvar(--vvd-textfield-block-size) - 32px \t\t\t)}:host(:not([dense])) ::slotted(.vivid-input-internal){transition:opacity 100ms}:host(:not([dense])) ::slotted(.vivid-input-internal:placeholder-shown:not(:focus)){opacity:0}slot[name=action i]::slotted(vwc-icon-button){align-self:center;margin-inline-start:4px}:host(:not([dense])) slot[name=action i]::slotted(vwc-icon-button){--vvd-icon-button-icon-size:var(--vvd-textfield-action-icon-size, 20px)}:host([dense]) slot[name=action i]::slotted(vwc-icon-button){--vvd-icon-button-icon-size:var(--vvd-textfield-action-icon-size, 16px)}:host{--mdc-shape-small: var(--vvd-textfield-shape);--mdc-theme-error: --vvd-formfield-label-error-ink;--mdc-text-field-fill-color: var(--vvd-color-canvas);--mdc-text-field-ink-color: var(--vvd-color-on-canvas);--mdc-text-field-label-ink-color: var(--vvd-formfield-label-idle-ink);--mdc-text-field-disabled-ink-color: var( --vvd-formfield-disabled-ink );--mdc-text-field-disabled-fill-color: var( --vvd-formfield-disabled-fill );--mdc-text-field-outlined-idle-border-color: var( --vvd-formfield-border-idle );--mdc-text-field-outlined-hover-border-color: var( --vvd-formfield-border-hover );--mdc-text-field-outlined-disabled-border-color: var( --vvd-formfield-border-disabled );--mdc-text-field-error-color: var( --vvd-formfield-label-error-ink );--mdc-text-field-error-fill-color: var( --vvd-formfield-error-fill );--vvd-formfield-disabled-ink:var(--vvd-color-neutral-50);--vvd-formfield-disabled-fill:var(--vvd-color-neutral-20);--vvd-formfield-label-idle-ink:var(--vvd-color-neutral-70);--vvd-formfield-border-idle:var(--vvd-color-neutral-50);--vvd-formfield-border-hover:var(--vvd-color-on-canvas);--vvd-formfield-border-disabled:var(--vvd-color-neutral-50);--vvd-formfield-error-fill:var(--vvd-color-alert-20);--vvd-formfield-label-error-ink:var(--vvd-color-alert);min-width:180px;font-stretch:var(--mdc-typography-subtitle1-font-stretch)}:host .mdc-text-field__input{pointer-events:none}:host([readonly]) vwc-notched-outline,:host([disabled]) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-disabled-border-color )}:host([readonly]) .mdc-text-field,:host([disabled]) .mdc-text-field{background-color:var(--mdc-text-field-disabled-fill-color)}:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-hover-border-color )}:host(:not([disabled])) .mdc-text-field.mdc-text-field--focused:not(.mdc-text-field--invalid) .mdc-floating-label{color:var(--mdc-text-field-label-ink-color)}:host([dense]){--vvd-textfield-block-size:40px}:host(:not([dense])){--vvd-textfield-block-size:48px}:host([dense][label]:not([label=\"\"])) .mdc-text-field .mdc-floating-label{top:-25px;left:-12px;transform:none}:host([dense][label]:not([label=\"\"])) .mdc-text-field .mdc-floating-label,:host([dense][label]:not([label=\"\"])) .mdc-text-field--invalid.mdc-text-field--outlined .mdc-floating-label,:host([dense][label]:not([label=\"\"])) .mdc-text-field:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) .mdc-floating-label,:host([dense][label]:not([label=\"\"])) .mdc-text-field:not(.mdc-text-field--invalid).mdc-text-field--focused .mdc-floating-label{color:var(--mdc-text-field-ink-color)}:host([charcounter]),:host([dense][label]:not([label=\"\"])){padding-top:24px}.mdc-text-field{height:var(--vvd-textfield-block-size);border-bottom-left-radius:var(--vvd-textfield-shape);border-bottom-right-radius:var(--vvd-textfield-shape)}.mdc-text-field .mdc-floating-label{left:14px;font-stretch:var(--mdc-typography-subtitle1-font-stretch);line-height:var(--mdc-typography-subtitle1-line-height);transition-property:transform,font-size}.mdc-text-field .mdc-floating-label--float-above{font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-18px)}.mdc-text-field .mdc-floating-label--float-above.mdc-floating-label--shake{animation:none}.mdc-text-field--outlined{padding-left:max(16px, var(--mdc-shape-small, 4px));background-color:var(--mdc-text-field-fill-color)}.mdc-text-field--outlined .mdc-floating-label{left:4px}.mdc-text-field--outlined.vvd-text-field--with-action,.mdc-text-field--outlined.vvd-text-field--with-action.mdc-text-field--with-trailing-icon{padding-inline-end:4px}.mdc-text-field--invalid{--vvd-outline-color: var(--mdc-text-field-error-color)}.mdc-text-field--invalid.mdc-text-field--outlined{background-color:var(--mdc-text-field-error-fill-color)}.mdc-text-field--invalid.mdc-text-field--outlined vwc-notched-outline{--mdc-notched-outline-border-color: var(--mdc-text-field-error-color)}.mdc-text-field--invalid.mdc-text-field--outlined .mdc-floating-label{color:var(--mdc-text-field-error-color)}.mdc-text-field--invalid .mdc-text-field__icon--trailing{color:var(--mdc-text-field-label-ink-color)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:var(--mdc-text-field-label-ink-color)}:host(:hover) .mdc-text-field,.mdc-text-field:hover,.mdc-text-field--focused{--vvd-outline-color: var(--mdc-text-field-outlined-hover-border-color)}:host(:hover) .mdc-text-field.mdc-text-field--invalid,.mdc-text-field:hover.mdc-text-field--invalid,.mdc-text-field--focused.mdc-text-field--invalid{--vvd-outline-color: var(--mdc-text-field-error-color)}.mdc-text-field--disabled .mdc-text-field__icon--leading,.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:var(--mdc-text-field-disabled-ink-color)}.mdc-text-field .mdc-text-field__icon--leading,.mdc-text-field .mdc-text-field__icon--trailing{display:flex;align-self:center;padding:0;margin:0 16px}.mdc-text-field .mdc-text-field__icon--leading vwc-icon,.mdc-text-field .mdc-text-field__icon--trailing vwc-icon{--vvd-icon-size:var(--vvd-textfield-action-icon-size, 20px)}vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-idle-border-color )}:host(:not([disabled]):hover) :not(.mdc-text-field--invalid):not(.mdc-text-field--focused) vwc-notched-outline{--mdc-notched-outline-border-color: var( --mdc-text-field-outlined-hover-border-color )}:host(:not([shape=pill i])),:host([shape=rounded i]){--vvd-textfield-shape:6px}:host([shape=pill i]){--vvd-textfield-shape:24px}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:var(--mdc-typography-subtitle1-font-size);transform:translateY(-18px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:40px}.mdc-text-field-character-counter{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;position:absolute;top:-25px;right:0;color:var(--vvd-color-neutral-70) !important}`;"]}
package/vwc-textfield.js CHANGED
@@ -75,7 +75,7 @@ let VWCTextField = class VWCTextField extends MWCTextField {
75
75
  }
76
76
  render() {
77
77
  const shouldRenderCharCounter = this.charCounter && this.maxLength !== -1;
78
- const shouldRenderHelperText = !!this.helper || !!this.validationMessage || shouldRenderCharCounter;
78
+ const shouldRenderHelperText = !!this.helper || !!this.validationMessage;
79
79
  const classes = {
80
80
  'mdc-text-field--disabled': this.disabled,
81
81
  'mdc-text-field--no-label': !this.label,
@@ -90,6 +90,7 @@ let VWCTextField = class VWCTextField extends MWCTextField {
90
90
  <label class="mdc-text-field ${classMap(classes)}">
91
91
  ${this.renderRipple()}
92
92
  ${this.outlined ? this.renderOutline() : this.renderLabel()}
93
+ ${this.renderCharCounter(shouldRenderCharCounter)}
93
94
  ${this.renderLeadingIcon()}
94
95
  ${this.renderPrefix()}
95
96
  ${this.renderInput(shouldRenderHelperText)}
@@ -1 +1 @@
1
- {"version":3,"file":"vwc-textfield.js","sourceRoot":"","sources":["src/vwc-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import '@vonage/vvd-core';\nimport '@vonage/vwc-helper-message';\nimport '@vonage/vwc-icon';\nimport '@vonage/vwc-notched-outline';\n\nimport {\n\tcustomElement,\n\tproperty,\n\thtml,\n\tTemplateResult,\n\tqueryAssignedNodes,\n\tquery,\n\tinternalProperty\n} from 'lit-element';\nimport type { PropertyValues } from 'lit-element';\nimport { classMap } from 'lit-html/directives/class-map.js';\n\nimport { TextField as MWCTextField } from '@material/mwc-textfield';\nimport { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css.js';\nimport { style as vwcTextFieldStyle } from './vwc-textfield.css.js';\nimport { styles as mwcTextFieldStyles } from '@material/mwc-textfield/mwc-textfield.css.js';\nimport type { Shape } from '@vonage/vvd-foundation/constants.js';\nimport { debounced, handleAutofocus } from '@vonage/vvd-foundation/general-utils.js';\n\nexport type { TextFieldType } from '@material/mwc-textfield';\n\nexport const COMPONENT_NAME = 'vwc-textfield';\nexport const VALID_BUTTON_ELEMENTS = ['vwc-icon-button'];\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t[COMPONENT_NAME]: VWCTextField;\n\t}\n}\n\ntype TextfieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;\n\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore\nMWCTextField.styles = [styleCoupling, mwcTextFieldStyles, vwcTextFieldStyle];\n\nconst INPUT_ELEMENT_SLOT_NAME = 'formInputElement';\nconst INPUT_ELEMENT_CLASS_NAME = 'vivid-input-internal';\nconst MDC_FLOAT_ABOVE_CLASS_NAME = 'mdc-floating-label--float-above';\n\n@customElement('vwc-textfield')\nexport class VWCTextField extends MWCTextField {\n\t@property({\n\t\ttype: Boolean,\n\t\treflect: true,\n\t\tattribute: 'no-actions-sync'\n\t})\n\t\tnoActionsSync = false;\n\n\t@property({\n\t\ttype: Boolean,\n\t\treflect: true\n\t})\n\t\tdense = false;\n\n\t@property({\n\t\ttype: String,\n\t\treflect: true\n\t})\n\t\tshape?: TextfieldShape;\n\n\t@property({\n\t\ttype: String,\n\t\treflect: true\n\t})\n\t\tform: string | undefined;\n\n\t@property({\n\t\ttype: String,\n\t\treflect: true,\n\t\tconverter: v => v || ' '\n\t})\n\toverride placeholder = ' ';\n\t@query('.mdc-text-field__input') protected inputElementWrapper!: HTMLInputElement;\n\t@internalProperty()\n\tprivate hasActionButtons = false;\n\t@queryAssignedNodes('action', true, VALID_BUTTON_ELEMENTS.join(', '))\n\tprivate actionButtons?: NodeListOf<HTMLElement>;\n\n\tprivate inputResizeObserver?: ResizeObserver;\n\n\tconstructor() {\n\t\tsuper();\n\t\tObject.defineProperty(this, 'formElement', {\n\t\t\tvalue: this.createInputElement(),\n\t\t});\n\t\tObject.defineProperty(this, 'value', {\n\t\t\tget: function () {\n\t\t\t\treturn this.formElement.value;\n\t\t\t},\n\t\t\tset: function (newValue: string) {\n\t\t\t\tthis.formElement.value = newValue;\n\t\t\t\tthis.floatLabel();\n\t\t\t\tthis.requestUpdate('value', null);\n\t\t\t},\n\t\t});\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tif (!this.hasAttribute('outlined')) {\n\t\t\tthis.outlined = true;\n\t\t}\n\t\tthis.formElement.value = this.value;\n\t\tthis.appendChild(this.formElement);\n\t\tthis.formElement.addEventListener('transitionend', () => {\n\t\t\tthis.floatLabel();\n\t\t});\n\t\tthis.floatLabel();\n\t}\n\n\toverride async firstUpdated(): Promise<void> {\n\t\tawait super.firstUpdated();\n\t\tthis.shadowRoot\n\t\t\t?.querySelector('.mdc-notched-outline')\n\t\t\t?.classList\n\t\t\t.add('vvd-notch');\n\t\tthis.floatLabel();\n\t\thandleAutofocus(this);\n\t\tthis.observeInputSize();\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tthis.inputResizeObserver?.disconnect();\n\t}\n\n\toverride updated(changes: PropertyValues): void {\n\t\tsuper.updated(changes);\n\t\tif (this.shape === 'pill') {\n\t\t\tthis.dense = true;\n\t\t}\n\t\tif (\n\t\t\tchanges.has('disabled') ||\n\t\t\tchanges.has('shape') ||\n\t\t\tchanges.has('dense')\n\t\t) {\n\t\t\tthis.enforcePropsOnActionNodes();\n\t\t}\n\t}\n\n\t/** @soyTemplate */\n\toverride render(): TemplateResult {\n\t\tconst shouldRenderCharCounter = this.charCounter && this.maxLength !== -1;\n\t\tconst shouldRenderHelperText =\n\t\t\t!!this.helper || !!this.validationMessage || shouldRenderCharCounter;\n\n\t\t/** @classMap */\n\t\tconst classes = {\n\t\t\t'mdc-text-field--disabled': this.disabled,\n\t\t\t'mdc-text-field--no-label': !this.label,\n\t\t\t'mdc-text-field--filled': !this.outlined,\n\t\t\t'mdc-text-field--outlined': this.outlined,\n\t\t\t'mdc-text-field--with-leading-icon': this.icon,\n\t\t\t'mdc-text-field--with-trailing-icon': this.iconTrailing,\n\t\t\t'mdc-text-field--end-aligned': this.endAligned,\n\t\t\t'vvd-text-field--with-action': this.hasActionButtons,\n\t\t};\n\n\t\treturn html`\n\t\t\t<label class=\"mdc-text-field ${classMap(classes)}\">\n\t\t\t\t${this.renderRipple()}\n\t\t\t\t${this.outlined ? this.renderOutline() : this.renderLabel()}\n\t\t\t\t${this.renderLeadingIcon()}\n\t\t\t\t${this.renderPrefix()}\n\t\t\t\t${this.renderInput(shouldRenderHelperText)}\n\t\t\t\t${this.renderSuffix()}\n\t\t\t\t${this.renderTrailingIcon()}\n\t\t\t\t<slot name=\"action\" @slotchange=\"${this.onActionSlotChange}\"></slot>\n\t\t\t\t${this.renderLineRipple()}\n\t\t\t</label>\n\t\t\t${this.renderHelperText(shouldRenderHelperText)}\n\t\t`;\n\t}\n\n\tprotected observeInputSize(): void {\n\t\t// eslint-disable-next-line compat/compat\n\t\tthis.inputResizeObserver = new ResizeObserver(() => {\n\t\t\tthis.syncInputSize();\n\t\t});\n\t\tthis.inputResizeObserver.observe(this.inputElementWrapper);\n\t}\n\n\tprotected override renderInput(shouldRenderHelperText: boolean): TemplateResult {\n\t\tthis.updateInputElement(shouldRenderHelperText);\n\t\treturn html`\n\t\t\t<div class=\"mdc-text-field__input\"></div>\n\t\t\t<slot name=\"${INPUT_ELEMENT_SLOT_NAME}\"></slot>\n\t\t`;\n\t}\n\n\tprotected override renderIcon(icon: string, isTrailingIcon = false): TemplateResult {\n\t\tconst iconClass = isTrailingIcon\n\t\t\t? 'mdc-text-field__icon--trailing'\n\t\t\t: 'mdc-text-field__icon--leading';\n\n\t\treturn html`\n\t\t\t<span class=\"${iconClass}\">\n\t\t\t\t<vwc-icon type=\"${icon}\" size=\"small\"></vwc-icon>\n\t\t\t</span>\n\t\t`;\n\t}\n\n\tprotected override renderOutline(): TemplateResult | string {\n\t\treturn !this.outlined\n\t\t\t? ''\n\t\t\t: html`\n\t\t\t\t<vwc-notched-outline class=\"mdc-notched-outline vvd-notch\">\n\t\t\t\t\t${this.renderLabel()}\n\t\t\t\t</vwc-notched-outline>`;\n\t}\n\n\tprotected override renderHelperText(\n\t\tshouldRenderHelperText: boolean\n\t): TemplateResult | string {\n\t\tif (!shouldRenderHelperText) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst isError = this.validationMessage && !this.isUiValid;\n\t\tconst text = isError ? this.validationMessage : this.helper;\n\n\t\treturn html`\n\t\t\t<vwc-helper-message\n\t\t\t\tid=\"helper-text\"\n\t\t\t\tclass=\"helper-message\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t?is-error=\"${isError}\"\n\t\t\t>${text}\n\t\t\t</vwc-helper-message\n\t\t\t>`;\n\t}\n\n\tprotected override renderRipple(): TemplateResult {\n\t\treturn html``;\n\t}\n\n\tprotected override renderLineRipple(): TemplateResult {\n\t\treturn html``;\n\t}\n\n\tprotected onActionSlotChange(): void {\n\t\tthis.hasActionButtons = Boolean(this.actionButtons?.length);\n\t\tthis.enforcePropsOnActionNodes();\n\t}\n\n\tprotected enforcePropsOnActionNodes(): void {\n\t\tconst buttons = Array.from(this.actionButtons || []);\n\n\t\tbuttons.forEach((button) => {\n\t\t\tif (!this.noActionsSync) {\n\t\t\t\tbutton.toggleAttribute('disabled', this.disabled);\n\t\t\t}\n\t\t\tbutton.toggleAttribute('dense', this.dense);\n\n\t\t\tconst buttonShape = this.shape == 'pill'\n\t\t\t\t? 'circled'\n\t\t\t\t: this.shape;\n\t\t\tif (buttonShape) {\n\t\t\t\tbutton.setAttribute('shape', buttonShape);\n\t\t\t} else {\n\t\t\t\tbutton.removeAttribute('shape');\n\t\t\t}\n\t\t});\n\t}\n\n\t@debounced(50)\n\tprivate syncInputSize() {\n\t\tconst {\n\t\t\twidth: hostWidth,\n\t\t\tleft: hostLeft\n\t\t} = this.getBoundingClientRect();\n\t\tconst {\n\t\t\twidth: wrapperWidth,\n\t\t\tleft: wrapperLeft\n\t\t} = this.inputElementWrapper.getBoundingClientRect();\n\t\tconst paddingLeft = wrapperLeft - hostLeft;\n\t\tconst paddingRight = hostWidth - wrapperWidth - paddingLeft;\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.formElement.style.paddingLeft = `${paddingLeft}px`;\n\t\t\tthis.formElement.style.paddingRight = `${paddingRight}px`;\n\t\t});\n\t}\n\n\tprivate createInputElement(): HTMLInputElement {\n\t\tconst element = document.createElement('input');\n\t\tconst defaultValue = this.getAttribute('value');\n\t\telement.defaultValue = defaultValue || '';\n\t\telement.setAttribute('slot', INPUT_ELEMENT_SLOT_NAME);\n\t\telement.className = INPUT_ELEMENT_CLASS_NAME;\n\t\treturn element;\n\t}\n\n\tprivate updateInputElement(shouldRenderHelperText: boolean): void {\n\t\tconst fe = this.formElement;\n\n\t\t//\tevent listeners\n\t\tfe.onfocus = () => {\n\t\t\tthis.dispatchEvent(new FocusEvent('focus', { composed: true }));\n\t\t\tthis.onInputFocus();\n\t\t};\n\n\t\tfe.onblur = () => {\n\t\t\tthis.dispatchEvent(new FocusEvent('blur', { composed: true }));\n\t\t\tthis.onInputBlur();\n\t\t};\n\n\t\tfe.oninput = (e) => {\n\t\t\te.stopImmediatePropagation();\n\t\t\tthis.dispatchEvent(new InputEvent('input', { bubbles: true }));\n\t\t\tthis.handleInputChange();\n\t\t};\n\n\t\t//\tattributes\n\t\tsetAttributeByValue('name', this.name, fe);\n\t\tsetAttributeByValue('type', this.type, fe);\n\t\tsetAttributeByValue('form', this.form, fe);\n\t\tsetAttributeByValue('placeholder', this.placeholder, fe);\n\n\t\tsetAttributeByValue('min', this.min, fe);\n\t\tsetAttributeByValue('max', this.max, fe);\n\t\tsetAttributeByValue('step', this.step, fe);\n\t\tsetAttributeByValue('size', this.size, fe);\n\n\t\tconst autoCapOrNone = this.autocapitalize ? this.autocapitalize : undefined;\n\t\tconst minOrNone = this.minLength === -1 ? undefined : this.minLength;\n\t\tconst maxOrNone = this.maxLength === -1 ? undefined : this.maxLength;\n\t\tsetAttributeByValue('autocapitalize', autoCapOrNone, fe);\n\t\tsetAttributeByValue('minlength', minOrNone, fe);\n\t\tsetAttributeByValue('maxlength', maxOrNone, fe);\n\t\tsetAttributeByValue('pattern', this.pattern, fe);\n\t\tsetAttributeByValue('inputmode', this.inputMode, fe);\n\n\t\tsetAttributeByValue('disabled', this.disabled, fe, true);\n\t\tsetAttributeByValue('readonly', this.readOnly, fe, true);\n\t\tsetAttributeByValue('required', this.required, fe, true);\n\n\t\tconst ariaLabel = shouldRenderHelperText ? 'helper-text' : undefined;\n\t\tconst ariaError =\n\t\t\tthis.validationMessage && !this.isUiValid ? 'helper-text' : undefined;\n\t\tsetAttributeByValue('aria-controls', ariaLabel, fe);\n\t\tsetAttributeByValue('aria-describedby', ariaLabel, fe);\n\t\tsetAttributeByValue('aria-errortext', ariaError, fe);\n\t}\n\n\tprivate floatLabel(): void {\n\t\tconst fle = this.shadowRoot?.querySelector('.mdc-floating-label');\n\t\tconst isUp = this.value || this.focused;\n\t\tif (!fle) {\n\t\t\treturn;\n\t\t}\n\t\tif (isUp) {\n\t\t\tfle.classList.add(MDC_FLOAT_ABOVE_CLASS_NAME);\n\t\t} else {\n\t\t\tfle.classList.remove(MDC_FLOAT_ABOVE_CLASS_NAME);\n\t\t}\n\t}\n}\n\nconst setAttributeByValue = (function () {\n\tconst NOT_ASSIGNED = Symbol('NotAssigned');\n\treturn function (\n\t\tattributeName: string,\n\t\tvalue: unknown,\n\t\ttarget: HTMLInputElement,\n\t\tasEmpty = false\n\t): void {\n\t\tconst newValue: unknown = value\n\t\t\t? (() => {\n\t\t\t\treturn asEmpty ? '' : String(value);\n\t\t\t})()\n\t\t\t: NOT_ASSIGNED;\n\n\t\tconst currentValue: unknown = target.hasAttribute(attributeName)\n\t\t\t? target.getAttribute(attributeName)\n\t\t\t: NOT_ASSIGNED;\n\n\t\tif (newValue !== currentValue) {\n\t\t\tif (newValue === NOT_ASSIGNED) {\n\t\t\t\ttarget.removeAttribute(attributeName);\n\t\t\t} else {\n\t\t\t\ttarget.setAttribute(attributeName, newValue as string);\n\t\t\t}\n\t\t}\n\t};\n}());\n"]}
1
+ {"version":3,"file":"vwc-textfield.js","sourceRoot":"","sources":["src/vwc-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import '@vonage/vvd-core';\nimport '@vonage/vwc-helper-message';\nimport '@vonage/vwc-icon';\nimport '@vonage/vwc-notched-outline';\n\nimport {\n\tcustomElement,\n\tproperty,\n\thtml,\n\tTemplateResult,\n\tqueryAssignedNodes,\n\tquery,\n\tinternalProperty\n} from 'lit-element';\nimport type { PropertyValues } from 'lit-element';\nimport { classMap } from 'lit-html/directives/class-map.js';\n\nimport { TextField as MWCTextField } from '@material/mwc-textfield';\nimport { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css.js';\nimport { style as vwcTextFieldStyle } from './vwc-textfield.css.js';\nimport { styles as mwcTextFieldStyles } from '@material/mwc-textfield/mwc-textfield.css.js';\nimport type { Shape } from '@vonage/vvd-foundation/constants.js';\nimport { debounced, handleAutofocus } from '@vonage/vvd-foundation/general-utils.js';\n\nexport type { TextFieldType } from '@material/mwc-textfield';\n\nexport const COMPONENT_NAME = 'vwc-textfield';\nexport const VALID_BUTTON_ELEMENTS = ['vwc-icon-button'];\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t[COMPONENT_NAME]: VWCTextField;\n\t}\n}\n\ntype TextfieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;\n\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore\nMWCTextField.styles = [styleCoupling, mwcTextFieldStyles, vwcTextFieldStyle];\n\nconst INPUT_ELEMENT_SLOT_NAME = 'formInputElement';\nconst INPUT_ELEMENT_CLASS_NAME = 'vivid-input-internal';\nconst MDC_FLOAT_ABOVE_CLASS_NAME = 'mdc-floating-label--float-above';\n\n@customElement('vwc-textfield')\nexport class VWCTextField extends MWCTextField {\n\t@property({\n\t\ttype: Boolean,\n\t\treflect: true,\n\t\tattribute: 'no-actions-sync'\n\t})\n\t\tnoActionsSync = false;\n\n\t@property({\n\t\ttype: Boolean,\n\t\treflect: true\n\t})\n\t\tdense = false;\n\n\t@property({\n\t\ttype: String,\n\t\treflect: true\n\t})\n\t\tshape?: TextfieldShape;\n\n\t@property({\n\t\ttype: String,\n\t\treflect: true\n\t})\n\t\tform: string | undefined;\n\n\t@property({\n\t\ttype: String,\n\t\treflect: true,\n\t\tconverter: v => v || ' '\n\t})\n\toverride placeholder = ' ';\n\t@query('.mdc-text-field__input') protected inputElementWrapper!: HTMLInputElement;\n\t@internalProperty()\n\tprivate hasActionButtons = false;\n\t@queryAssignedNodes('action', true, VALID_BUTTON_ELEMENTS.join(', '))\n\tprivate actionButtons?: NodeListOf<HTMLElement>;\n\n\tprivate inputResizeObserver?: ResizeObserver;\n\n\tconstructor() {\n\t\tsuper();\n\t\tObject.defineProperty(this, 'formElement', {\n\t\t\tvalue: this.createInputElement(),\n\t\t});\n\t\tObject.defineProperty(this, 'value', {\n\t\t\tget: function () {\n\t\t\t\treturn this.formElement.value;\n\t\t\t},\n\t\t\tset: function (newValue: string) {\n\t\t\t\tthis.formElement.value = newValue;\n\t\t\t\tthis.floatLabel();\n\t\t\t\tthis.requestUpdate('value', null);\n\t\t\t},\n\t\t});\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tif (!this.hasAttribute('outlined')) {\n\t\t\tthis.outlined = true;\n\t\t}\n\t\tthis.formElement.value = this.value;\n\t\tthis.appendChild(this.formElement);\n\t\tthis.formElement.addEventListener('transitionend', () => {\n\t\t\tthis.floatLabel();\n\t\t});\n\t\tthis.floatLabel();\n\t}\n\n\toverride async firstUpdated(): Promise<void> {\n\t\tawait super.firstUpdated();\n\t\tthis.shadowRoot\n\t\t\t?.querySelector('.mdc-notched-outline')\n\t\t\t?.classList\n\t\t\t.add('vvd-notch');\n\t\tthis.floatLabel();\n\t\thandleAutofocus(this);\n\t\tthis.observeInputSize();\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tthis.inputResizeObserver?.disconnect();\n\t}\n\n\toverride updated(changes: PropertyValues): void {\n\t\tsuper.updated(changes);\n\t\tif (this.shape === 'pill') {\n\t\t\tthis.dense = true;\n\t\t}\n\t\tif (\n\t\t\tchanges.has('disabled') ||\n\t\t\tchanges.has('shape') ||\n\t\t\tchanges.has('dense')\n\t\t) {\n\t\t\tthis.enforcePropsOnActionNodes();\n\t\t}\n\t}\n\n\t/** @soyTemplate */\n\toverride render(): TemplateResult {\n\t\tconst shouldRenderCharCounter = this.charCounter && this.maxLength !== -1;\n\t\tconst shouldRenderHelperText =\n\t\t\t!!this.helper || !!this.validationMessage;\n\n\t\t/** @classMap */\n\t\tconst classes = {\n\t\t\t'mdc-text-field--disabled': this.disabled,\n\t\t\t'mdc-text-field--no-label': !this.label,\n\t\t\t'mdc-text-field--filled': !this.outlined,\n\t\t\t'mdc-text-field--outlined': this.outlined,\n\t\t\t'mdc-text-field--with-leading-icon': this.icon,\n\t\t\t'mdc-text-field--with-trailing-icon': this.iconTrailing,\n\t\t\t'mdc-text-field--end-aligned': this.endAligned,\n\t\t\t'vvd-text-field--with-action': this.hasActionButtons,\n\t\t};\n\n\t\treturn html`\n\t\t\t<label class=\"mdc-text-field ${classMap(classes)}\">\n\t\t\t\t${this.renderRipple()}\n\t\t\t\t${this.outlined ? this.renderOutline() : this.renderLabel()}\n\t\t\t\t${this.renderCharCounter(shouldRenderCharCounter)}\n\t\t\t\t${this.renderLeadingIcon()}\n\t\t\t\t${this.renderPrefix()}\n\t\t\t\t${this.renderInput(shouldRenderHelperText)}\n\t\t\t\t${this.renderSuffix()}\n\t\t\t\t${this.renderTrailingIcon()}\n\t\t\t\t<slot name=\"action\" @slotchange=\"${this.onActionSlotChange}\"></slot>\n\t\t\t\t${this.renderLineRipple()}\n\t\t\t</label>\n\t\t\t${this.renderHelperText(shouldRenderHelperText)}\n\t\t`;\n\t}\n\n\tprotected observeInputSize(): void {\n\t\t// eslint-disable-next-line compat/compat\n\t\tthis.inputResizeObserver = new ResizeObserver(() => {\n\t\t\tthis.syncInputSize();\n\t\t});\n\t\tthis.inputResizeObserver.observe(this.inputElementWrapper);\n\t}\n\n\tprotected override renderInput(shouldRenderHelperText: boolean): TemplateResult {\n\t\tthis.updateInputElement(shouldRenderHelperText);\n\t\treturn html`\n\t\t\t<div class=\"mdc-text-field__input\"></div>\n\t\t\t<slot name=\"${INPUT_ELEMENT_SLOT_NAME}\"></slot>\n\t\t`;\n\t}\n\n\tprotected override renderIcon(icon: string, isTrailingIcon = false): TemplateResult {\n\t\tconst iconClass = isTrailingIcon\n\t\t\t? 'mdc-text-field__icon--trailing'\n\t\t\t: 'mdc-text-field__icon--leading';\n\n\t\treturn html`\n\t\t\t<span class=\"${iconClass}\">\n\t\t\t\t<vwc-icon type=\"${icon}\" size=\"small\"></vwc-icon>\n\t\t\t</span>\n\t\t`;\n\t}\n\n\tprotected override renderOutline(): TemplateResult | string {\n\t\treturn !this.outlined\n\t\t\t? ''\n\t\t\t: html`\n\t\t\t\t<vwc-notched-outline class=\"mdc-notched-outline vvd-notch\">\n\t\t\t\t\t${this.renderLabel()}\n\t\t\t\t</vwc-notched-outline>`;\n\t}\n\n\tprotected override renderHelperText(\n\t\tshouldRenderHelperText: boolean\n\t): TemplateResult | string {\n\t\tif (!shouldRenderHelperText) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst isError = this.validationMessage && !this.isUiValid;\n\t\tconst text = isError ? this.validationMessage : this.helper;\n\n\t\treturn html`\n\t\t\t<vwc-helper-message\n\t\t\t\tid=\"helper-text\"\n\t\t\t\tclass=\"helper-message\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t?is-error=\"${isError}\"\n\t\t\t>${text}\n\t\t\t</vwc-helper-message\n\t\t\t>`;\n\t}\n\n\tprotected override renderRipple(): TemplateResult {\n\t\treturn html``;\n\t}\n\n\tprotected override renderLineRipple(): TemplateResult {\n\t\treturn html``;\n\t}\n\n\tprotected onActionSlotChange(): void {\n\t\tthis.hasActionButtons = Boolean(this.actionButtons?.length);\n\t\tthis.enforcePropsOnActionNodes();\n\t}\n\n\tprotected enforcePropsOnActionNodes(): void {\n\t\tconst buttons = Array.from(this.actionButtons || []);\n\n\t\tbuttons.forEach((button) => {\n\t\t\tif (!this.noActionsSync) {\n\t\t\t\tbutton.toggleAttribute('disabled', this.disabled);\n\t\t\t}\n\t\t\tbutton.toggleAttribute('dense', this.dense);\n\n\t\t\tconst buttonShape = this.shape == 'pill'\n\t\t\t\t? 'circled'\n\t\t\t\t: this.shape;\n\t\t\tif (buttonShape) {\n\t\t\t\tbutton.setAttribute('shape', buttonShape);\n\t\t\t} else {\n\t\t\t\tbutton.removeAttribute('shape');\n\t\t\t}\n\t\t});\n\t}\n\n\t@debounced(50)\n\tprivate syncInputSize() {\n\t\tconst {\n\t\t\twidth: hostWidth,\n\t\t\tleft: hostLeft\n\t\t} = this.getBoundingClientRect();\n\t\tconst {\n\t\t\twidth: wrapperWidth,\n\t\t\tleft: wrapperLeft\n\t\t} = this.inputElementWrapper.getBoundingClientRect();\n\t\tconst paddingLeft = wrapperLeft - hostLeft;\n\t\tconst paddingRight = hostWidth - wrapperWidth - paddingLeft;\n\t\trequestAnimationFrame(() => {\n\t\t\tthis.formElement.style.paddingLeft = `${paddingLeft}px`;\n\t\t\tthis.formElement.style.paddingRight = `${paddingRight}px`;\n\t\t});\n\t}\n\n\tprivate createInputElement(): HTMLInputElement {\n\t\tconst element = document.createElement('input');\n\t\tconst defaultValue = this.getAttribute('value');\n\t\telement.defaultValue = defaultValue || '';\n\t\telement.setAttribute('slot', INPUT_ELEMENT_SLOT_NAME);\n\t\telement.className = INPUT_ELEMENT_CLASS_NAME;\n\t\treturn element;\n\t}\n\n\tprivate updateInputElement(shouldRenderHelperText: boolean): void {\n\t\tconst fe = this.formElement;\n\n\t\t//\tevent listeners\n\t\tfe.onfocus = () => {\n\t\t\tthis.dispatchEvent(new FocusEvent('focus', { composed: true }));\n\t\t\tthis.onInputFocus();\n\t\t};\n\n\t\tfe.onblur = () => {\n\t\t\tthis.dispatchEvent(new FocusEvent('blur', { composed: true }));\n\t\t\tthis.onInputBlur();\n\t\t};\n\n\t\tfe.oninput = (e) => {\n\t\t\te.stopImmediatePropagation();\n\t\t\tthis.dispatchEvent(new InputEvent('input', { bubbles: true }));\n\t\t\tthis.handleInputChange();\n\t\t};\n\n\t\t//\tattributes\n\t\tsetAttributeByValue('name', this.name, fe);\n\t\tsetAttributeByValue('type', this.type, fe);\n\t\tsetAttributeByValue('form', this.form, fe);\n\t\tsetAttributeByValue('placeholder', this.placeholder, fe);\n\n\t\tsetAttributeByValue('min', this.min, fe);\n\t\tsetAttributeByValue('max', this.max, fe);\n\t\tsetAttributeByValue('step', this.step, fe);\n\t\tsetAttributeByValue('size', this.size, fe);\n\n\t\tconst autoCapOrNone = this.autocapitalize ? this.autocapitalize : undefined;\n\t\tconst minOrNone = this.minLength === -1 ? undefined : this.minLength;\n\t\tconst maxOrNone = this.maxLength === -1 ? undefined : this.maxLength;\n\t\tsetAttributeByValue('autocapitalize', autoCapOrNone, fe);\n\t\tsetAttributeByValue('minlength', minOrNone, fe);\n\t\tsetAttributeByValue('maxlength', maxOrNone, fe);\n\t\tsetAttributeByValue('pattern', this.pattern, fe);\n\t\tsetAttributeByValue('inputmode', this.inputMode, fe);\n\n\t\tsetAttributeByValue('disabled', this.disabled, fe, true);\n\t\tsetAttributeByValue('readonly', this.readOnly, fe, true);\n\t\tsetAttributeByValue('required', this.required, fe, true);\n\n\t\tconst ariaLabel = shouldRenderHelperText ? 'helper-text' : undefined;\n\t\tconst ariaError =\n\t\t\tthis.validationMessage && !this.isUiValid ? 'helper-text' : undefined;\n\t\tsetAttributeByValue('aria-controls', ariaLabel, fe);\n\t\tsetAttributeByValue('aria-describedby', ariaLabel, fe);\n\t\tsetAttributeByValue('aria-errortext', ariaError, fe);\n\t}\n\n\tprivate floatLabel(): void {\n\t\tconst fle = this.shadowRoot?.querySelector('.mdc-floating-label');\n\t\tconst isUp = this.value || this.focused;\n\t\tif (!fle) {\n\t\t\treturn;\n\t\t}\n\t\tif (isUp) {\n\t\t\tfle.classList.add(MDC_FLOAT_ABOVE_CLASS_NAME);\n\t\t} else {\n\t\t\tfle.classList.remove(MDC_FLOAT_ABOVE_CLASS_NAME);\n\t\t}\n\t}\n}\n\nconst setAttributeByValue = (function () {\n\tconst NOT_ASSIGNED = Symbol('NotAssigned');\n\treturn function (\n\t\tattributeName: string,\n\t\tvalue: unknown,\n\t\ttarget: HTMLInputElement,\n\t\tasEmpty = false\n\t): void {\n\t\tconst newValue: unknown = value\n\t\t\t? (() => {\n\t\t\t\treturn asEmpty ? '' : String(value);\n\t\t\t})()\n\t\t\t: NOT_ASSIGNED;\n\n\t\tconst currentValue: unknown = target.hasAttribute(attributeName)\n\t\t\t? target.getAttribute(attributeName)\n\t\t\t: NOT_ASSIGNED;\n\n\t\tif (newValue !== currentValue) {\n\t\t\tif (newValue === NOT_ASSIGNED) {\n\t\t\t\ttarget.removeAttribute(attributeName);\n\t\t\t} else {\n\t\t\t\ttarget.setAttribute(attributeName, newValue as string);\n\t\t\t}\n\t\t}\n\t};\n}());\n"]}