From c28f0585884c59293b209a5564c12ef1d5d735e0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 7 Nov 2022 12:35:51 -0500 Subject: [PATCH 01/14] feat(input): add new js and css props (#26192) --- angular/src/directives/proxies.ts | 4 +- core/api.txt | 15 +++++++ core/src/components.d.ts | 64 ++++++++++++++++++++++++++++ core/src/components/input/input.scss | 9 ++++ core/src/components/input/input.tsx | 47 ++++++++++++++++++++ packages/vue/src/proxies.ts | 8 ++++ 6 files changed, 145 insertions(+), 2 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index c72ceeb3a28..97c1ef3c149 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -856,14 +856,14 @@ where the user's interaction is typing. @ProxyCmp({ defineCustomElementFn: undefined, - inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'], + inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'], methods: ['setFocus', 'getInputElement'] }) @Component({ selector: 'ion-input', changeDetection: ChangeDetectionStrategy.OnPush, template: '', - inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'] + inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'] }) export class IonInput { protected el: HTMLElement; diff --git a/core/api.txt b/core/api.txt index 17fd18ae3c6..64229865812 100644 --- a/core/api.txt +++ b/core/api.txt @@ -527,10 +527,17 @@ ion-input,prop,autofocus,boolean,false,false,false ion-input,prop,clearInput,boolean,false,false,false ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true +ion-input,prop,counter,boolean,false,false,false +ion-input,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false ion-input,prop,debounce,number,0,false,false ion-input,prop,disabled,boolean,false,false,false ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false +ion-input,prop,errorText,string | undefined,undefined,false,false +ion-input,prop,fill,"outline" | "solid" | undefined,undefined,false,false +ion-input,prop,helperText,string | undefined,undefined,false,false ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false +ion-input,prop,label,string | undefined,undefined,false,false +ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false ion-input,prop,max,number | string | undefined,undefined,false,false ion-input,prop,maxlength,number | undefined,undefined,false,false ion-input,prop,min,number | string | undefined,undefined,false,false @@ -542,6 +549,7 @@ ion-input,prop,pattern,string | undefined,undefined,false,false ion-input,prop,placeholder,string | undefined,undefined,false,false ion-input,prop,readonly,boolean,false,false,false ion-input,prop,required,boolean,false,false,false +ion-input,prop,shape,"round" | undefined,undefined,false,false ion-input,prop,size,number | undefined,undefined,false,false ion-input,prop,spellcheck,boolean,false,false,false ion-input,prop,step,string | undefined,undefined,false,false @@ -554,7 +562,14 @@ ion-input,event,ionChange,InputChangeEventDetail,true ion-input,event,ionFocus,FocusEvent,true ion-input,event,ionInput,Event | InputEvent,true ion-input,css-prop,--background +ion-input,css-prop,--border-color +ion-input,css-prop,--border-radius +ion-input,css-prop,--border-style +ion-input,css-prop,--border-width ion-input,css-prop,--color +ion-input,css-prop,--highlight-color-focused +ion-input,css-prop,--highlight-color-invalid +ion-input,css-prop,--highlight-color-valid ion-input,css-prop,--padding-bottom ion-input,css-prop,--padding-end ion-input,css-prop,--padding-start diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 27d3d7405e3..4b5a222fc83 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1073,6 +1073,14 @@ export namespace Components { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; + /** + * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly. + */ + "counter": boolean; + /** + * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". + */ + "counterFormatter"?: (inputLength: number, maxLength: number) => string; /** * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. */ @@ -1085,14 +1093,34 @@ export namespace Components { * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. */ "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; + /** + * Text that is placed under the input and displayed when an error is detected. + */ + "errorText"?: string; + /** + * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode. + */ + "fill"?: 'outline' | 'solid'; /** * Returns the native `` element used under the hood. */ "getInputElement": () => Promise; + /** + * Text that is placed under the input and displayed when no error is detected. + */ + "helperText"?: string; /** * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. */ "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'; + /** + * The visible label associated with the input. + */ + "label"?: string; + /** + * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + */ + "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed'; /** * The maximum value, which must not be less than its minimum (min attribute) value. */ @@ -1141,6 +1169,10 @@ export namespace Components { * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`. */ "setFocus": () => Promise; + /** + * The shape of the input. If "round" it will have an increased border radius. + */ + "shape"?: 'round'; /** * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. */ @@ -4879,6 +4911,14 @@ declare namespace LocalJSX { * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; + /** + * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly. + */ + "counter"?: boolean; + /** + * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". + */ + "counterFormatter"?: (inputLength: number, maxLength: number) => string; /** * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. */ @@ -4891,10 +4931,30 @@ declare namespace LocalJSX { * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. */ "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; + /** + * Text that is placed under the input and displayed when an error is detected. + */ + "errorText"?: string; + /** + * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode. + */ + "fill"?: 'outline' | 'solid'; + /** + * Text that is placed under the input and displayed when no error is detected. + */ + "helperText"?: string; /** * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. */ "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'; + /** + * The visible label associated with the input. + */ + "label"?: string; + /** + * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + */ + "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed'; /** * The maximum value, which must not be less than its minimum (min attribute) value. */ @@ -4959,6 +5019,10 @@ declare namespace LocalJSX { * If `true`, the user must fill in a value before submitting a form. */ "required"?: boolean; + /** + * The shape of the input. If "round" it will have an increased border radius. + */ + "shape"?: 'round'; /** * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. */ diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index b08914f1b1d..570407df233 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -18,6 +18,15 @@ * @prop --placeholder-font-style: Font style of the input placeholder text * @prop --placeholder-font-weight: Font weight of the input placeholder text * @prop --placeholder-opacity: Opacity of the input placeholder text + * + * @prop --highlight-color-focused: The color of the highlight on the input when focused + * @prop --highlight-color-valid: The color of the highlight on the input when valid + * @prop --highlight-color-invalid: The color of the highlight on the input when invalid + * + * @prop --border-color: Color of the input border + * @prop --border-radius: Radius of the input border + * @prop --border-style: Style of the input border + * @prop --border-width: Width of the input border */ --placeholder-color: initial; --placeholder-font-style: initial; diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 528871a9a5c..5c5ec9cd2f6 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -90,6 +90,17 @@ export class Input implements ComponentInterface { */ @Prop() clearOnEdit?: boolean; + /** + * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly. + */ + @Prop() counter = false; + + /** + * A callback used to format the counter text. + * By default the counter text is set to "itemLength / maxLength". + */ + @Prop() counterFormatter?: (inputLength: number, maxLength: number) => string; + /** * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke. */ @@ -117,6 +128,17 @@ export class Input implements ComponentInterface { */ @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; + /** + * Text that is placed under the input and displayed when an error is detected. + */ + @Prop() errorText?: string; + + /** + * The fill for the item. If `'solid'` the item will have a background. If + * `'outline'` the item will be transparent with a border. Only available in `md` mode. + */ + @Prop() fill?: 'outline' | 'solid'; + /** * A hint to the browser for which keyboard to display. * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, @@ -124,6 +146,26 @@ export class Input implements ComponentInterface { */ @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'; + /** + * Text that is placed under the input and displayed when no error is detected. + */ + @Prop() helperText?: string; + + /** + * The visible label associated with the input. + */ + @Prop() label?: string; + + /** + * Where to place the label relative to the input. + * `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. + * `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. + * `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. + * `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. + * `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("..."). + */ + @Prop() labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed' = 'start'; + /** * The maximum value, which must not be less than its minimum (min attribute) value. */ @@ -176,6 +218,11 @@ export class Input implements ComponentInterface { */ @Prop() required = false; + /** + * The shape of the input. If "round" it will have an increased border radius. + */ + @Prop() shape?: 'round'; + /** * If `true`, the element will have its spelling and grammar checked. */ diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 38214f38e75..420bbe8ff20 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -396,10 +396,17 @@ export const IonInput = /*@__PURE__*/ defineContainer('ion-input', 'autofocus', 'clearInput', 'clearOnEdit', + 'counter', + 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', + 'errorText', + 'fill', 'inputmode', + 'helperText', + 'label', + 'labelPlacement', 'max', 'maxlength', 'min', @@ -410,6 +417,7 @@ export const IonInput = /*@__PURE__*/ defineContainer('ion-input', 'placeholder', 'readonly', 'required', + 'shape', 'spellcheck', 'step', 'size', From 7d674560604cbc6d825f274de2e83ce966e7d2c9 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 7 Nov 2022 13:00:38 -0500 Subject: [PATCH 02/14] feat(input): add legacy and modern template rendering (#26193) --- core/src/components/input/input.tsx | 57 ++++-- .../components/input/test/basic/index.html | 21 ++- .../input/test/{ => legacy}/a11y/input.e2e.ts | 0 .../test/{ => legacy}/attributes/index.html | 0 .../input/test/legacy/basic/index.html | 169 ++++++++++++++++++ .../test/{ => legacy}/basic/input.e2e.ts | 0 ...t-disabled-ios-ltr-Mobile-Chrome-linux.png | Bin ...-disabled-ios-ltr-Mobile-Firefox-linux.png | Bin ...t-disabled-ios-ltr-Mobile-Safari-linux.png | Bin ...t-disabled-ios-rtl-Mobile-Chrome-linux.png | Bin ...-disabled-ios-rtl-Mobile-Firefox-linux.png | Bin ...t-disabled-ios-rtl-Mobile-Safari-linux.png | Bin ...ut-disabled-md-ltr-Mobile-Chrome-linux.png | Bin ...t-disabled-md-ltr-Mobile-Firefox-linux.png | Bin ...ut-disabled-md-ltr-Mobile-Safari-linux.png | Bin ...ut-disabled-md-rtl-Mobile-Chrome-linux.png | Bin ...t-disabled-md-rtl-Mobile-Firefox-linux.png | Bin ...ut-disabled-md-rtl-Mobile-Safari-linux.png | Bin ...ear-button-ios-ltr-Mobile-Chrome-linux.png | Bin ...ar-button-ios-ltr-Mobile-Firefox-linux.png | Bin ...ear-button-ios-ltr-Mobile-Safari-linux.png | Bin ...ear-button-ios-rtl-Mobile-Chrome-linux.png | Bin ...ar-button-ios-rtl-Mobile-Firefox-linux.png | Bin ...ear-button-ios-rtl-Mobile-Safari-linux.png | Bin ...lear-button-md-ltr-Mobile-Chrome-linux.png | Bin ...ear-button-md-ltr-Mobile-Firefox-linux.png | Bin ...lear-button-md-ltr-Mobile-Safari-linux.png | Bin ...lear-button-md-rtl-Mobile-Chrome-linux.png | Bin ...ear-button-md-rtl-Mobile-Firefox-linux.png | Bin ...lear-button-md-rtl-Mobile-Safari-linux.png | Bin ...ll-focused-ios-ltr-Mobile-Chrome-linux.png | Bin ...l-focused-ios-ltr-Mobile-Firefox-linux.png | Bin ...ll-focused-ios-ltr-Mobile-Safari-linux.png | Bin ...ll-focused-ios-rtl-Mobile-Chrome-linux.png | Bin ...l-focused-ios-rtl-Mobile-Firefox-linux.png | Bin ...ll-focused-ios-rtl-Mobile-Safari-linux.png | Bin ...ull-focused-md-ltr-Mobile-Chrome-linux.png | Bin ...ll-focused-md-ltr-Mobile-Firefox-linux.png | Bin ...ull-focused-md-ltr-Mobile-Safari-linux.png | Bin ...ull-focused-md-rtl-Mobile-Chrome-linux.png | Bin ...ll-focused-md-rtl-Mobile-Firefox-linux.png | Bin ...ull-focused-md-rtl-Mobile-Safari-linux.png | Bin ...lines-full-ios-ltr-Mobile-Chrome-linux.png | Bin ...ines-full-ios-ltr-Mobile-Firefox-linux.png | Bin ...lines-full-ios-ltr-Mobile-Safari-linux.png | Bin ...lines-full-ios-rtl-Mobile-Chrome-linux.png | Bin ...ines-full-ios-rtl-Mobile-Firefox-linux.png | Bin ...lines-full-ios-rtl-Mobile-Safari-linux.png | Bin ...-lines-full-md-ltr-Mobile-Chrome-linux.png | Bin ...lines-full-md-ltr-Mobile-Firefox-linux.png | Bin ...-lines-full-md-ltr-Mobile-Safari-linux.png | Bin ...-lines-full-md-rtl-Mobile-Chrome-linux.png | Bin ...lines-full-md-rtl-Mobile-Firefox-linux.png | Bin ...-lines-full-md-rtl-Mobile-Safari-linux.png | Bin ...et-focused-ios-ltr-Mobile-Chrome-linux.png | Bin ...t-focused-ios-ltr-Mobile-Firefox-linux.png | Bin ...et-focused-ios-ltr-Mobile-Safari-linux.png | Bin ...et-focused-ios-rtl-Mobile-Chrome-linux.png | Bin ...t-focused-ios-rtl-Mobile-Firefox-linux.png | Bin ...et-focused-ios-rtl-Mobile-Safari-linux.png | Bin ...set-focused-md-ltr-Mobile-Chrome-linux.png | Bin ...et-focused-md-ltr-Mobile-Firefox-linux.png | Bin ...set-focused-md-ltr-Mobile-Safari-linux.png | Bin ...set-focused-md-rtl-Mobile-Chrome-linux.png | Bin ...et-focused-md-rtl-Mobile-Firefox-linux.png | Bin ...set-focused-md-rtl-Mobile-Safari-linux.png | Bin ...ines-inset-ios-ltr-Mobile-Chrome-linux.png | Bin ...nes-inset-ios-ltr-Mobile-Firefox-linux.png | Bin ...ines-inset-ios-ltr-Mobile-Safari-linux.png | Bin ...ines-inset-ios-rtl-Mobile-Chrome-linux.png | Bin ...nes-inset-ios-rtl-Mobile-Firefox-linux.png | Bin ...ines-inset-ios-rtl-Mobile-Safari-linux.png | Bin ...lines-inset-md-ltr-Mobile-Chrome-linux.png | Bin ...ines-inset-md-ltr-Mobile-Firefox-linux.png | Bin ...lines-inset-md-ltr-Mobile-Safari-linux.png | Bin ...lines-inset-md-rtl-Mobile-Chrome-linux.png | Bin ...ines-inset-md-rtl-Mobile-Firefox-linux.png | Bin ...lines-inset-md-rtl-Mobile-Safari-linux.png | Bin ...ne-focused-ios-ltr-Mobile-Chrome-linux.png | Bin ...e-focused-ios-ltr-Mobile-Firefox-linux.png | Bin ...ne-focused-ios-ltr-Mobile-Safari-linux.png | Bin ...ne-focused-ios-rtl-Mobile-Chrome-linux.png | Bin ...e-focused-ios-rtl-Mobile-Firefox-linux.png | Bin ...ne-focused-ios-rtl-Mobile-Safari-linux.png | Bin ...one-focused-md-ltr-Mobile-Chrome-linux.png | Bin ...ne-focused-md-ltr-Mobile-Firefox-linux.png | Bin ...one-focused-md-ltr-Mobile-Safari-linux.png | Bin ...one-focused-md-rtl-Mobile-Chrome-linux.png | Bin ...ne-focused-md-rtl-Mobile-Firefox-linux.png | Bin ...one-focused-md-rtl-Mobile-Safari-linux.png | Bin ...lines-none-ios-ltr-Mobile-Chrome-linux.png | Bin ...ines-none-ios-ltr-Mobile-Firefox-linux.png | Bin ...lines-none-ios-ltr-Mobile-Safari-linux.png | Bin ...lines-none-ios-rtl-Mobile-Chrome-linux.png | Bin ...ines-none-ios-rtl-Mobile-Firefox-linux.png | Bin ...lines-none-ios-rtl-Mobile-Safari-linux.png | Bin ...-lines-none-md-ltr-Mobile-Chrome-linux.png | Bin ...lines-none-md-ltr-Mobile-Firefox-linux.png | Bin ...-lines-none-md-ltr-Mobile-Safari-linux.png | Bin ...-lines-none-md-rtl-Mobile-Chrome-linux.png | Bin ...lines-none-md-rtl-Mobile-Firefox-linux.png | Bin ...-lines-none-md-rtl-Mobile-Safari-linux.png | Bin ...laceholder-ios-ltr-Mobile-Chrome-linux.png | Bin ...aceholder-ios-ltr-Mobile-Firefox-linux.png | Bin ...laceholder-ios-ltr-Mobile-Safari-linux.png | Bin ...laceholder-ios-rtl-Mobile-Chrome-linux.png | Bin ...aceholder-ios-rtl-Mobile-Firefox-linux.png | Bin ...laceholder-ios-rtl-Mobile-Safari-linux.png | Bin ...placeholder-md-ltr-Mobile-Chrome-linux.png | Bin ...laceholder-md-ltr-Mobile-Firefox-linux.png | Bin ...placeholder-md-ltr-Mobile-Safari-linux.png | Bin ...placeholder-md-rtl-Mobile-Chrome-linux.png | Bin ...laceholder-md-rtl-Mobile-Firefox-linux.png | Bin ...placeholder-md-rtl-Mobile-Safari-linux.png | Bin ...t-overflow-ios-ltr-Mobile-Chrome-linux.png | Bin ...-overflow-ios-ltr-Mobile-Firefox-linux.png | Bin ...t-overflow-ios-ltr-Mobile-Safari-linux.png | Bin ...t-overflow-ios-rtl-Mobile-Chrome-linux.png | Bin ...-overflow-ios-rtl-Mobile-Firefox-linux.png | Bin ...t-overflow-ios-rtl-Mobile-Safari-linux.png | Bin ...xt-overflow-md-ltr-Mobile-Chrome-linux.png | Bin ...t-overflow-md-ltr-Mobile-Firefox-linux.png | Bin ...xt-overflow-md-ltr-Mobile-Safari-linux.png | Bin ...xt-overflow-md-rtl-Mobile-Chrome-linux.png | Bin ...t-overflow-md-rtl-Mobile-Firefox-linux.png | Bin ...xt-overflow-md-rtl-Mobile-Safari-linux.png | Bin .../{ => legacy}/clearOnEdit/input.e2e.ts | 0 .../test/{ => legacy}/input-events.e2e.ts | 0 .../test/{ => legacy}/masking/index.html | 0 .../test/{ => legacy}/masking/input.e2e.ts | 2 +- .../input/test/{ => legacy}/spec/index.html | 0 .../input/test/{ => legacy}/spec/input.e2e.ts | 2 +- ...-spec-diff-ios-ltr-Mobile-Chrome-linux.png | Bin ...spec-diff-ios-ltr-Mobile-Firefox-linux.png | Bin ...-spec-diff-ios-ltr-Mobile-Safari-linux.png | Bin ...-spec-diff-ios-rtl-Mobile-Chrome-linux.png | Bin ...spec-diff-ios-rtl-Mobile-Firefox-linux.png | Bin ...-spec-diff-ios-rtl-Mobile-Safari-linux.png | Bin ...t-spec-diff-md-ltr-Mobile-Chrome-linux.png | Bin ...-spec-diff-md-ltr-Mobile-Firefox-linux.png | Bin ...t-spec-diff-md-ltr-Mobile-Safari-linux.png | Bin ...t-spec-diff-md-rtl-Mobile-Chrome-linux.png | Bin ...-spec-diff-md-rtl-Mobile-Firefox-linux.png | Bin ...t-spec-diff-md-rtl-Mobile-Safari-linux.png | Bin .../test/{ => legacy}/tabindex/index.html | 0 core/src/utils/forms/form-controller.ts | 31 ++++ core/src/utils/forms/index.ts | 1 + 147 files changed, 262 insertions(+), 21 deletions(-) rename core/src/components/input/test/{ => legacy}/a11y/input.e2e.ts (100%) rename core/src/components/input/test/{ => legacy}/attributes/index.html (100%) create mode 100644 core/src/components/input/test/legacy/basic/index.html rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/clearOnEdit/input.e2e.ts (100%) rename core/src/components/input/test/{ => legacy}/input-events.e2e.ts (100%) rename core/src/components/input/test/{ => legacy}/masking/index.html (100%) rename core/src/components/input/test/{ => legacy}/masking/input.e2e.ts (91%) rename core/src/components/input/test/{ => legacy}/spec/index.html (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts (86%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Chrome-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Firefox-linux.png (100%) rename core/src/components/input/test/{ => legacy}/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Safari-linux.png (100%) rename core/src/components/input/test/{ => legacy}/tabindex/index.html (100%) create mode 100644 core/src/utils/forms/form-controller.ts create mode 100644 core/src/utils/forms/index.ts diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 5c5ec9cd2f6..7cd9b931ef9 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -1,5 +1,8 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Build, Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core'; +import { createLegacyFormController } from '@utils/forms'; +import type { LegacyFormController } from '@utils/forms'; +import { printIonWarning } from '@utils/logging'; import { getIonMode } from '../../global/ionic-global'; import type { @@ -30,6 +33,12 @@ export class Input implements ComponentInterface { private inputId = `ion-input-${inputIds++}`; private inheritedAttributes: Attributes = {}; private isComposing = false; + + private legacyFormController!: LegacyFormController; + + // This flag ensures we log the deprecation warning at most once. + private hasLoggedDeprecationWarning = false; + /** * `true` if the input was cleared as a result of the user typing * with `clearOnEdit` enabled. @@ -44,7 +53,7 @@ export class Input implements ComponentInterface { @State() hasFocus = false; - @Element() el!: HTMLElement; + @Element() el!: HTMLIonInputElement; /** * The color to use from your application's color palette. @@ -328,6 +337,10 @@ export class Input implements ComponentInterface { } connectedCallback() { + const { el } = this; + + this.legacyFormController = createLegacyFormController(el); + this.emitStyle(); this.debounceChanged(); if (Build.isBrowser) { @@ -408,14 +421,16 @@ export class Input implements ComponentInterface { } private emitStyle() { - this.ionStyle.emit({ - interactive: true, - input: true, - 'has-placeholder': this.placeholder !== undefined, - 'has-value': this.hasValue(), - 'has-focus': this.hasFocus, - 'interactive-disabled': this.disabled, - }); + if (this.legacyFormController.hasLegacyControl()) { + this.ionStyle.emit({ + interactive: true, + input: true, + 'has-placeholder': this.placeholder !== undefined, + 'has-value': this.hasValue(), + 'has-focus': this.hasFocus, + 'interactive-disabled': this.disabled, + }); + } } private onInput = (ev: InputEvent | Event) => { @@ -497,7 +512,21 @@ export class Input implements ComponentInterface { return this.getValue().length > 0; } - render() { + private renderInput() { + return Stubbed input; + } + + private renderLegacyInput() { + if (!this.hasLoggedDeprecationWarning) { + printIonWarning( + `Using ion-input with an ion-label has been deprecated. To migrate, remove the ion-label and use the "label" property on ion-input instead. + +For inputs that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the input.`, + this.el + ); + this.hasLoggedDeprecationWarning = true; + } + const mode = getIonMode(this); const value = this.getValue(); const labelId = this.inputId + '-lbl'; @@ -518,7 +547,7 @@ export class Input implements ComponentInterface { (this.nativeInput = input)} - aria-labelledby={label ? labelId : null} + aria-labelledby={label ? label.id : null} disabled={this.disabled} accept={this.accept} autoCapitalize={this.autocapitalize} @@ -568,6 +597,12 @@ export class Input implements ComponentInterface { ); } + + render() { + const { legacyFormController } = this; + + return legacyFormController.hasLegacyControl() ? this.renderLegacyInput() : this.renderInput(); + } } let inputIds = 0; diff --git a/core/src/components/input/test/basic/index.html b/core/src/components/input/test/basic/index.html index 2f63b0b96b1..a98bada1199 100644 --- a/core/src/components/input/test/basic/index.html +++ b/core/src/components/input/test/basic/index.html @@ -25,10 +25,13 @@ - + - + - Default Label - + - + Right - + --> + + + + + + + + + + Input - Basic + + + + + + + + + + + + + + + + + + + + + + + + + + + Default Label + + + + + Clear Input + + + + + Floating + + + + + Type # + + + + + Password + + + + + Placeholder + + + + + Disabled + + + + + Readonly + + + + + Slot + + + + + Toggle + + + + + Type # +
+ + + +
+ + + +
+ Toggle Disabled + + + Toggle Readonly + +
+ + + Clear Input + + + + + Clear On Edit + + + + + + Left + + + + Right + + + + + + + + diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/legacy/basic/input.e2e.ts similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts rename to core/src/components/input/test/legacy/basic/input.e2e.ts diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-disabled-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-clear-button-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-full-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-inset-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-focused-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-lines-none-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-placeholder-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/basic/input.e2e.ts-snapshots/input-with-text-overflow-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/clearOnEdit/input.e2e.ts b/core/src/components/input/test/legacy/clearOnEdit/input.e2e.ts similarity index 100% rename from core/src/components/input/test/clearOnEdit/input.e2e.ts rename to core/src/components/input/test/legacy/clearOnEdit/input.e2e.ts diff --git a/core/src/components/input/test/input-events.e2e.ts b/core/src/components/input/test/legacy/input-events.e2e.ts similarity index 100% rename from core/src/components/input/test/input-events.e2e.ts rename to core/src/components/input/test/legacy/input-events.e2e.ts diff --git a/core/src/components/input/test/masking/index.html b/core/src/components/input/test/legacy/masking/index.html similarity index 100% rename from core/src/components/input/test/masking/index.html rename to core/src/components/input/test/legacy/masking/index.html diff --git a/core/src/components/input/test/masking/input.e2e.ts b/core/src/components/input/test/legacy/masking/input.e2e.ts similarity index 91% rename from core/src/components/input/test/masking/input.e2e.ts rename to core/src/components/input/test/legacy/masking/input.e2e.ts index 9fd4ca7032f..e315f211dd9 100644 --- a/core/src/components/input/test/masking/input.e2e.ts +++ b/core/src/components/input/test/legacy/masking/input.e2e.ts @@ -3,7 +3,7 @@ import { test } from '@utils/test/playwright'; test.describe('input: masking', () => { test.beforeEach(async ({ page }) => { - await page.goto('/src/components/input/test/masking'); + await page.goto('/src/components/input/test/legacy/masking'); }); test('should filter out spaces', async ({ page, skip }) => { diff --git a/core/src/components/input/test/spec/index.html b/core/src/components/input/test/legacy/spec/index.html similarity index 100% rename from core/src/components/input/test/spec/index.html rename to core/src/components/input/test/legacy/spec/index.html diff --git a/core/src/components/input/test/spec/input.e2e.ts b/core/src/components/input/test/legacy/spec/input.e2e.ts similarity index 86% rename from core/src/components/input/test/spec/input.e2e.ts rename to core/src/components/input/test/legacy/spec/input.e2e.ts index 29c5e4c3cbe..d25e4cb8da9 100644 --- a/core/src/components/input/test/spec/input.e2e.ts +++ b/core/src/components/input/test/legacy/spec/input.e2e.ts @@ -3,7 +3,7 @@ import { test } from '@utils/test/playwright'; test.describe('input: spec', () => { test.beforeEach(async ({ page }) => { - await page.goto('/src/components/input/test/spec'); + await page.goto('/src/components/input/test/legacy/spec'); }); test('should not have visual regressions', async ({ page }) => { diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/input/test/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Safari-linux.png rename to core/src/components/input/test/legacy/spec/input.e2e.ts-snapshots/input-spec-diff-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/input/test/tabindex/index.html b/core/src/components/input/test/legacy/tabindex/index.html similarity index 100% rename from core/src/components/input/test/tabindex/index.html rename to core/src/components/input/test/legacy/tabindex/index.html diff --git a/core/src/utils/forms/form-controller.ts b/core/src/utils/forms/form-controller.ts new file mode 100644 index 00000000000..3c45bad41ed --- /dev/null +++ b/core/src/utils/forms/form-controller.ts @@ -0,0 +1,31 @@ +/** + * Creates a controller that tracks whether a form control is using the legacy or modern syntax. This should be removed when the legacy form control syntax is removed. + * + * @internal + * @prop el: The Ionic form component to reference + */ +export const createLegacyFormController = (el: HTMLIonInputElement): LegacyFormController => { + const controlEl: HTMLIonInputElement = el; + let legacyControl = true; + + /** + * Detect if developers are using the legacy form control syntax + * so a deprecation warning is logged. This warning can be disabled + * by either using the new `label` property or setting `aria-label` + * on the control. + */ + const hasLabelProp = controlEl.label !== undefined; + const hasAriaLabelAttribute = controlEl.hasAttribute('aria-label'); + + legacyControl = !hasLabelProp && !hasAriaLabelAttribute; + + const hasLegacyControl = () => { + return legacyControl; + }; + + return { hasLegacyControl }; +}; + +export type LegacyFormController = { + hasLegacyControl: () => boolean; +}; diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts new file mode 100644 index 00000000000..d7c63744bdc --- /dev/null +++ b/core/src/utils/forms/index.ts @@ -0,0 +1 @@ +export * from './form-controller'; From 14b7bd4d33acc63ded1006d0f3c3d000fd809942 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 7 Nov 2022 13:20:46 -0500 Subject: [PATCH 03/14] feat(input): add base functionality and tests (#26194) --- core/src/components/input/input.tsx | 67 ++++++++++++++++++- .../src/components/input/test/a11y/index.html | 22 ++++++ 2 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 core/src/components/input/test/a11y/index.html diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 7cd9b931ef9..c7dad4157cb 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -513,7 +513,72 @@ export class Input implements ComponentInterface { } private renderInput() { - return Stubbed input; + const { disabled, readonly, inputId } = this; + const mode = getIonMode(this); + const value = this.getValue(); + + return ( + + + (this.nativeInput = input)} + id={inputId} + disabled={disabled} + accept={this.accept} + autoCapitalize={this.autocapitalize} + autoComplete={this.autocomplete} + autoCorrect={this.autocorrect} + autoFocus={this.autofocus} + enterKeyHint={this.enterkeyhint} + inputMode={this.inputmode} + min={this.min} + max={this.max} + minLength={this.minlength} + maxLength={this.maxlength} + multiple={this.multiple} + name={this.name} + pattern={this.pattern} + placeholder={this.placeholder || ''} + readOnly={readonly} + required={this.required} + spellcheck={this.spellcheck} + step={this.step} + size={this.size} + type={this.type} + value={value} + onInput={this.onInput} + onChange={this.onChange} + onBlur={this.onBlur} + onFocus={this.onFocus} + onKeyDown={this.onKeydown} + {...this.inheritedAttributes} + /> + {this.clearInput && !readonly && !disabled && ( +