Add setInputType and setInputMode methods to TextField

[TatuLund]

Describe your motivation

Sometimes there is a need to define either type or input mode in the TextField in order to improve behavior of the field e.g. with mobile devices or improve accessibility.

Describe the solution you'd like

Here is a one possible prototype:

@Route(value = "input-modes", layout = MainLayout.class)
public class IconButtonView extends VerticalLayout {

    public IconButtonView() {
        var telField = new CustomTextField("Telephone");
        telField.setAutocomplete(Autocomplete.TEL);
        telField.setInputMode(InputMode.TEL);
        telField.setInputType(InputType.TEL);
        add(telField);

        var searchField = new CustomTextField("Search");
        searchField.setInputMode(InputMode.SEARCH);
        searchField.setInputType(InputType.SEARCH);
        add(searchField);

        var codeField = new CustomTextField("Code");
        codeField.setInputMode(InputMode.NUMERIC);
        add(codeField);

        var urlField = new CustomTextField("Url");
        urlField.setInputMode(InputMode.URL);
        urlField.setInputType(InputType.URL);
        add(urlField);
    }

    public enum InputType {
        TEL("tel"), SEARCH("search"), TEXT("text"), URL("url");

        final String value;

        InputType(String value) {
            this.value = value;
        }
    }

    public enum InputMode {
        NONE("none"), TEXT("text"), DECIMAL("decimal"), NUMERIC("numeric"), TEL(
                "tel"), SEARCH("search"), EMAIL("email"), URL("url");

        final String value;

        InputMode(String value) {
            this.value = value;
        }
    }

    public static class CustomTextField extends TextField {

        private InputMode inputMode;
        private InputType inputType;

        public CustomTextField(String label) {
            setLabel(label);
        }

        public void setInputType(InputType inputType) {
            this.inputType = inputType;
            getElement().executeJs(
                    "this.inputElement.setAttribute('type', $0);",
                    inputType.value);
        }

        public InputType getInputType() {
            return inputType;
        }

        public void setInputMode(InputMode inputMode) {
            this.inputMode = inputMode;
            getElement().executeJs(
                    "this.inputElement.setAttribute('inputmode', $0);",
                    inputMode.value);
        }

        public InputMode getInputMode() {
            return inputMode;
        }
    }
}

Describe alternatives you've considered

One could also consider adding these as mixin interfaces in similar style as HasAutocomplete is done. However certain combinations do not work well and we have dedicated fields for many types. So practically there is not many fields that could implement these as mixins.

Additional context

No response

[yuriy-fix]

It's an idea that was discussed before as well and we can consider to add it.