import { Host, h, forceUpdate, } from "@stencil/core";
import { IcInformationStatus, } from "../../utils/types";
import { inheritAttributes, debounceEvent, getInputDescribedByText, renderHiddenInput, isEmptyString, onComponentRequiredPropUndefined, addFormResetListener, removeFormResetListener, isSlotUsed, removeDisabledFalse, checkSlotInChildMutations, removeHiddenInput, } from "../../utils/helpers";
import { IC_INHERITED_ARIA, IGNORED_KEYBOARD_CHARACTERS, } from "../../utils/constants";
let inputIds = 0;
const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "title"];
/**
 * @slot helper-text - Content is set as the helper text for the text field.
 * @slot validation-text - Content is set as validation text for the text field.
 * @slot icon - Content will be placed to the left of the text input.
 */
export class TextField {
    constructor() {
        this.inheritedAttributes = {};
        this.hostMutationObserver = null;
        this.numChars = 0;
        this.maxCharactersReached = false;
        this.maxCharactersWarning = false;
        this.minCharactersUnattained = false;
        this.maxValueExceeded = false;
        this.minValueUnattained = false;
        this.isFocussed = false;
        /**
         * The automatic capitalisation of the text value as it is entered/edited by the user.
         * Available options: "off", "none", "on", "sentences", "words", "characters".
         */
        this.autocapitalize = "off";
        /**
         * The state of autocompletion the browser can apply on the text value.
         */
        this.autocomplete = "off";
        /**
         * The state of autocorrection the browser can apply when the user is entering/editing the text value.
         */
        this.autocorrect = "off";
        /**
         * If `true`, the form control will have input focus when the page loads.
         */
        this.autofocus = false;
        /**
         * If `true`, the disabled state will be set.
         */
        this.disabled = false;
        /**
         * Specify whether the text field fills the full width of the container.
         * If `true`, this overrides the --input-width CSS variable.
         */
        this.fullWidth = false;
        /**
         * The helper text that will be displayed for additional field guidance.
         */
        this.helperText = "";
        /**
         * If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.
         */
        this.hideCharCount = false;
        /**
         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
         */
        this.hideLabel = false;
        /**
         * @internal If `true`, the hidden form input will stop rendering for form submission.
         */
        this.hiddenInput = true;
        /**
         * The ID for the input.
         */
        this.inputId = `ic-text-field-input-${inputIds++}`;
        /**
         * A hint to the browser for which keyboard to display.
         * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
         * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
         */
        this.inputmode = "text";
        /**
         * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
         */
        this.maxCharacters = 0;
        /**
         * The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.
         */
        // prettier-ignore
        this.maxCharactersMessage = `Maximum input is ${this.maxCharacters} characters`;
        /**
         * The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.
         */
        this.maxMessage = `Maximum value of ${this.max} exceeded`;
        /**
         * The minimum number of characters that can be entered in the field.
         */
        this.minCharacters = 0;
        /**
         * The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.
         */
        // prettier-ignore
        this.minCharactersMessage = `Minimum input is ${this.minCharacters} characters`;
        /**
         * The text to display as the error message when the minimum value (the `min` prop value) has not been met.
         */
        this.minMessage = `Minimum value of ${this.min} not met`;
        /**
         * The name of the control, which is submitted with the form data.
         */
        this.name = this.inputId;
        /**
         * The placeholder value to be displayed.
         */
        this.placeholder = "";
        /**
         * If `true`, the read only state will be set.
         */
        this.readonly = false;
        /**
         * If `true`, the input will require a value.
         */
        this.required = false;
        /**
         * If `true`, the multiline text area will be resizeable.
         */
        this.resize = false;
        /**
         * The number of rows to transform the text field into a text area with a specific height.
         */
        this.rows = 1;
        /**
         * The size of the text field component.
         */
        this.size = "medium";
        /**
         * If `true`, the value of the text field will have its spelling and grammar checked.
         */
        this.spellcheck = false;
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
         */
        this.truncateValue = false;
        /**
         * The type of control to display. The default type is text.
         */
        this.type = "text";
        /**
         * The value of the `aria-live` attribute on the validation message. When set to "default", the `aria-live` value will be handled automatically, e.g. "assertive" for `validation-status="error"`.
         */
        this.validationAriaLive = "default";
        /**
         * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
         */
        this.validationInline = false;
        /**
         *  @internal If `true`, the validation will display inline.
         */
        this.validationInlineInternal = false;
        /**
         * The validation state - e.g. 'error' | 'warning' | 'success'.
         */
        this.validationStatus = "";
        /**
         * The text to display as the validation message.
         */
        this.validationText = "";
        /**
         * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
         */
        this.debounce = 0;
        /**
         * The value of the text field.
         */
        this.value = "";
        this.initialValue = this.value;
        this.checkChildHydration = () => {
            var _a, _b;
            if (this.hideLabel ||
                ((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-typography")) === null || _b === void 0 ? void 0 : _b.classList.contains("hydrated"))) {
                this.setFocus();
                clearInterval(this.interval);
            }
        };
        this.getNumberOfCharacters = (value) => value !== null && value !== undefined ? value.length : 0;
        this.getMaxValueExceeded = (value) => {
            this.numChars = this.getNumberOfCharacters(value);
            if (this.type === "number") {
                this.minValueUnattained = !!value && Number(value) < Number(this.min);
                this.maxValueExceeded = Number(value) > Number(this.max);
            }
        };
        this.getMaxCharactersReached = (value) => {
            this.numChars = this.getNumberOfCharacters(value);
            this.maxCharactersReached =
                this.maxCharacters > 0 && this.numChars >= this.maxCharacters;
            if (this.maxCharactersWarning && !this.maxCharactersReached) {
                this.maxCharactersWarning = false;
            }
        };
        this.onInput = (ev) => {
            this.value = ev.target.value;
            this.icInput.emit({ value: this.value });
        };
        this.onBlur = (ev) => {
            const target = ev.target;
            target.removeEventListener("wheel", this.onWheel);
            const { value } = target;
            this.numChars = value.length;
            this.minCharactersUnattained =
                this.minCharacters > 0 && this.numChars < this.minCharacters;
            this.icBlur.emit({ value });
            this.isFocussed = false;
        };
        this.onFocus = (ev) => {
            const target = ev.target;
            target.addEventListener("wheel", this.onWheel);
            this.icFocus.emit({ value: target.value });
            this.isFocussed = true;
        };
        this.onTextAreaScroll = () => {
            this.icScroll.emit();
        };
        this.onWheel = (ev) => {
            const target = ev.target;
            if (target.type === "number") {
                target.blur();
                setTimeout(() => {
                    target.focus();
                }, 0);
            }
        };
        this.hasStatus = (status) => status !== "" && !this.disabled;
        this.handleFormReset = () => {
            this.value = this.initialValue;
        };
        this.showValidationMargin = () => {
            const maxNumChars = this.readonly ? 0 : this.maxCharacters;
            const emptyString = isEmptyString(this.validationStatus) ||
                isEmptyString(this.validationText);
            const valueOutsideRange = this.minValueUnattained || this.maxValueExceeded;
            const charsOutsideRange = maxNumChars > 0 || this.minCharactersUnattained;
            return ((!emptyString || valueOutsideRange || charsOutsideRange) &&
                !this.validationInlineInternal);
        };
        // triggered when attributes of host element change
        this.hostMutationCallback = (mutationList) => {
            let forceComponentUpdate = false;
            mutationList.forEach(({ attributeName, type, addedNodes, removedNodes }) => {
                if (attributeName && MUTABLE_ATTRIBUTES.includes(attributeName)) {
                    const attribute = this.el.getAttribute(attributeName);
                    if (attribute) {
                        this.inheritedAttributes[attributeName] = attribute;
                    }
                    forceComponentUpdate = true;
                }
                else if (type === "childList") {
                    forceComponentUpdate = checkSlotInChildMutations(addedNodes, removedNodes, "icon");
                }
            });
            if (forceComponentUpdate) {
                forceUpdate(this);
            }
        };
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    debounceChanged() {
        this.icChange = debounceEvent(this.icChange, this.debounce);
    }
    watchValueHandler(newValue) {
        let value;
        if (this.maxCharacters > 0) {
            value = newValue.substring(0, this.maxCharacters);
            if (value.length < newValue.length) {
                this.maxCharactersWarning = true;
            }
            this.value = value;
        }
        else {
            value = newValue;
        }
        if (this.inputEl && this.inputEl.value !== value) {
            this.inputEl.value = value;
        }
        this.getMaxValueExceeded(value);
        this.getMaxCharactersReached(value);
        this.icChange.emit({ value });
    }
    connectedCallback() {
        this.debounceChanged();
    }
    disconnectedCallback() {
        var _a;
        removeFormResetListener(this.el, this.handleFormReset);
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentWillLoad() {
        if (this.value !== this.initialValue) {
            this.watchValueHandler(this.value);
        }
        else if (this.maxCharacters > 0) {
            this.value = this.value.substring(0, this.maxCharacters);
        }
        this.getMaxValueExceeded(this.value);
        this.getMaxCharactersReached(this.value);
        this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);
        if (this.readonly) {
            this.maxValueExceeded = false;
            this.minValueUnattained = false;
        }
        addFormResetListener(this.el, this.handleFormReset);
        removeDisabledFalse(this.disabled, this.el);
    }
    componentDidLoad() {
        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Text Field");
        if (this.validationInlineInternal) {
            this.getValidationText.emit({ value: this.validationText });
        }
        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
        this.hostMutationObserver.observe(this.el, {
            attributes: true,
            childList: true,
        });
        if (this.autofocus && !this.disabled && !this.readonly) {
            this.interval = setInterval(this.checkChildHydration, 50);
        }
    }
    handleKeyDown(ev) {
        var _a, _b;
        this.icKeydown.emit({
            event: ev,
            cursorPosition: (_a = this.inputEl.selectionStart) !== null && _a !== void 0 ? _a : 0,
            selectionEnd: (_b = this.inputEl.selectionEnd) !== null && _b !== void 0 ? _b : 0,
        });
        if (!ev.ctrlKey && !IGNORED_KEYBOARD_CHARACTERS.includes(ev.key)) {
            this.maxCharactersWarning = this.maxCharactersReached;
        }
    }
    /**
     * Sets focus on the native `input`.
     */
    async setFocus() {
        var _a;
        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
    }
    render() {
        const { inputId, name, label, required, size, placeholder, helperText, hideCharCount, rows, resize, disabled, value, min, max, numChars, readonly, maxCharacters, maxCharactersMessage, maxCharactersWarning, maxCharactersReached, maxMessage, minCharacters, minCharactersMessage, minCharactersUnattained, minMessage, minValueUnattained, maxValueExceeded, validationAriaLive, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, theme, hideLabel, type, autocapitalize, ariaActiveDescendant, inheritedAttributes, ariaExpanded, ariaOwns, autocomplete, role, isFocussed, } = this;
        const el = this.el;
        const disabledMode = readonly || disabled;
        const currentStatus = maxValueExceeded ||
            minValueUnattained ||
            minCharactersUnattained ||
            maxCharactersWarning
            ? maxCharactersWarning
                ? IcInformationStatus.Warning
                : IcInformationStatus.Error
            : validationStatus;
        const currentValidationText = maxCharactersWarning
            ? maxCharactersMessage
            : maxValueExceeded
                ? maxMessage
                : minValueUnattained
                    ? minMessage
                    : minCharactersUnattained
                        ? minCharactersMessage
                        : validationText;
        const maxNumChars = readonly ? 0 : maxCharacters;
        const messageAriaLive = validationAriaLive === "default"
            ? maxCharactersWarning ||
                maxValueExceeded ||
                minValueUnattained ||
                currentStatus === IcInformationStatus.Error
                ? "assertive"
                : "polite"
            : validationAriaLive;
        const showStatusText = this.hasStatus(currentStatus) &&
            !(currentStatus == IcInformationStatus.Success && validationInline) &&
            !validationInlineInternal;
        const multiline = rows > 1;
        const hiddenCharCountDescId = maxCharacters > 0 ? `${inputId}-char-count-desc` : "";
        const charsRemaining = maxNumChars - numChars;
        const remainingCharCountDescId = maxCharacters > 0 ? `${inputId}-remaining-char-count-desc` : "";
        const remainingCharCountDesc = `${charsRemaining} character${charsRemaining === 1 ? "" : "s"} remaining.`;
        const describedBy = `${getInputDescribedByText(this.el, inputId, helperText !== "", showStatusText)} ${hiddenCharCountDescId} ${numChars > 0 ? remainingCharCountDescId : ""}`.trim();
        const disabledText = disabledMode && !readonly;
        const showLeftIcon = !!this.el.querySelector(`[slot="icon"]`) && !disabledText;
        const invalid = `${currentStatus === IcInformationStatus.Error}`;
        hiddenInput
            ? renderHiddenInput(this.el, value, name, disabledMode)
            : removeHiddenInput(this.el);
        return (h(Host, { key: '6300558c65d21c3cf9fcb2af66774cbdf274cf89', class: {
                "ic-text-field-full-width": fullWidth,
                "ic-text-field-disabled": disabledMode,
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h("ic-input-container", { key: '6f0d1a6cf4ed01bd98c3b69d37f6ffb473e1201e', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '71cc64b0733fbe16b21f389000c8a6813ad9f07f', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: '985b82195b09acc991bbed6c0be5210cba70f59e', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '95df2f453e06c5dec6788e98db94e5e4ce129d04', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '62a052203a6b9e35858e7103f505bdf38eda7349', class: {
                readonly,
                "has-value": this.getNumberOfCharacters(value) > 0,
            }, slot: "left-icon" }, h("slot", { key: '12ee0976840d954f7f855740db4098983ccf73a5', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
                "no-left-pad": !showLeftIcon && readonly,
                readonly,
                "truncate-value": truncateValue,
            }, placeholder: placeholder ? placeholder : "", required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": ariaExpanded, "aria-owns": ariaOwns, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, role: role || undefined, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))) : (h("textarea", Object.assign({ id: inputId, class: {
                "no-resize": resize === false || !!readonly,
                "no-left-pad": !showLeftIcon && !!readonly,
                readonly: !!readonly,
            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '4bd5b1b44a9fded9be98c35d3e49f357b99adf26', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'fccd3ae4e454d661540f45b748440aa8c9c28baf', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'aca9fabb2b029547a713e75be81c179e3c1e3b52', name: "menu" }), h("ic-input-validation", { key: '1d2443ab140751bd21f247f5136254498ffc8004', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
                (currentStatus === IcInformationStatus.Success &&
                    validationInline) ||
                validationInlineInternal
                ? ""
                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, isSlotUsed(el, "validation-text") && (h("slot", { key: 'e8f5abdc72b047998c5164ec7bef70eab2d7af81', name: "validation-text", slot: "validation-message" })), !readonly && maxNumChars > 0 && (h("div", { key: '9458320139c6c17b4db3f40ef91ed8f35667e612', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '26663bbc0dbc1e5183cfb4af5b2f9a244fa303c5', variant: "caption", class: "char-count-text" }, h("span", { key: '84a9de3338f2fee09b3712fcc56dd509bbc672e2', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'cb1d19f9755ea5b393e03ab19da262c67ce6e19e', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '87cfdac09956c5e749ff4c06bb58228d2d40feb5', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
    }
    static get is() { return "ic-text-field"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-text-field.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-text-field.css"]
        };
    }
    static get properties() {
        return {
            "ariaActiveDescendant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "The active element when focus is on the ic-menu items."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "aria-active-descendant",
                "reflect": false
            },
            "ariaAutocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAriaAutocompleteTypes",
                    "resolved": "\"inline\" | \"list\" | undefined",
                    "references": {
                        "IcAriaAutocompleteTypes": {
                            "location": "import",
                            "path": "./ic-text-field.types",
                            "id": "src/components/ic-text-field/ic-text-field.types.ts::IcAriaAutocompleteTypes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Used to identify whether inputting any text triggers more predictions"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "aria-autocomplete",
                "reflect": false
            },
            "ariaExpanded": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "null | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Used to identify if the slotted menu is rendered"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "aria-expanded",
                "reflect": false
            },
            "ariaOwns": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Used to identify any related child component"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "aria-owns",
                "reflect": false
            },
            "autocapitalize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The automatic capitalisation of the text value as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"."
                },
                "getter": false,
                "setter": false,
                "attribute": "autocapitalize",
                "reflect": false,
                "defaultValue": "\"off\""
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAutocompleteTypes",
                    "resolved": "IcAutocompleteTypes | undefined",
                    "references": {
                        "IcAutocompleteTypes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAutocompleteTypes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The state of autocompletion the browser can apply on the text value."
                },
                "getter": false,
                "setter": false,
                "attribute": "autocomplete",
                "reflect": false,
                "defaultValue": "\"off\""
            },
            "autocorrect": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAutocorrectStates",
                    "resolved": "\"off\" | \"on\" | undefined",
                    "references": {
                        "IcAutocorrectStates": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAutocorrectStates"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
                },
                "getter": false,
                "setter": false,
                "attribute": "autocorrect",
                "reflect": false,
                "defaultValue": "\"off\""
            },
            "autofocus": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the form control will have input focus when the page loads."
                },
                "getter": false,
                "setter": false,
                "attribute": "autofocus",
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the disabled state will be set."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specify whether the text field fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
                },
                "getter": false,
                "setter": false,
                "attribute": "full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The helper text that will be displayed for additional field guidance."
                },
                "getter": false,
                "setter": false,
                "attribute": "helper-text",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "hideCharCount": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden."
                },
                "getter": false,
                "setter": false,
                "attribute": "hide-char-count",
                "reflect": false,
                "defaultValue": "false"
            },
            "hideLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
                },
                "getter": false,
                "setter": false,
                "attribute": "hide-label",
                "reflect": false,
                "defaultValue": "false"
            },
            "hiddenInput": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "If `true`, the hidden form input will stop rendering for form submission."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "hidden-input",
                "reflect": false,
                "defaultValue": "true"
            },
            "inputId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The ID for the input."
                },
                "getter": false,
                "setter": false,
                "attribute": "input-id",
                "reflect": false,
                "defaultValue": "`ic-text-field-input-${inputIds++}`"
            },
            "inputmode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcTextFieldInputModes",
                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
                    "references": {
                        "IcTextFieldInputModes": {
                            "location": "import",
                            "path": "./ic-text-field.types",
                            "id": "src/components/ic-text-field/ic-text-field.types.ts::IcTextFieldInputModes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`."
                },
                "getter": false,
                "setter": false,
                "attribute": "inputmode",
                "reflect": false,
                "defaultValue": "\"text\""
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label for the input."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "max": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)"
                },
                "getter": false,
                "setter": false,
                "attribute": "max",
                "reflect": false
            },
            "maxCharacters": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)"
                },
                "getter": false,
                "setter": false,
                "attribute": "max-characters",
                "reflect": false,
                "defaultValue": "0"
            },
            "maxCharactersMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached."
                },
                "getter": false,
                "setter": false,
                "attribute": "max-characters-message",
                "reflect": false,
                "defaultValue": "`Maximum input is ${this.maxCharacters} characters`"
            },
            "maxMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text to display as the error message when the maximum value (the `max` prop value) has been exceeded."
                },
                "getter": false,
                "setter": false,
                "attribute": "max-message",
                "reflect": false,
                "defaultValue": "`Maximum value of ${this.max} exceeded`"
            },
            "min": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)"
                },
                "getter": false,
                "setter": false,
                "attribute": "min",
                "reflect": false
            },
            "minCharacters": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The minimum number of characters that can be entered in the field."
                },
                "getter": false,
                "setter": false,
                "attribute": "min-characters",
                "reflect": false,
                "defaultValue": "0"
            },
            "minCharactersMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met."
                },
                "getter": false,
                "setter": false,
                "attribute": "min-characters-message",
                "reflect": false,
                "defaultValue": "`Minimum input is ${this.minCharacters} characters`"
            },
            "minMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text to display as the error message when the minimum value (the `min` prop value) has not been met."
                },
                "getter": false,
                "setter": false,
                "attribute": "min-message",
                "reflect": false,
                "defaultValue": "`Minimum value of ${this.min} not met`"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of the control, which is submitted with the form data."
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false,
                "defaultValue": "this.inputId"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The placeholder value to be displayed."
                },
                "getter": false,
                "setter": false,
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the read only state will be set."
                },
                "getter": false,
                "setter": false,
                "attribute": "readonly",
                "reflect": true,
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the input will require a value."
                },
                "getter": false,
                "setter": false,
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "resize": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the multiline text area will be resizeable."
                },
                "getter": false,
                "setter": false,
                "attribute": "resize",
                "reflect": false,
                "defaultValue": "false"
            },
            "role": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "null | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Used to set the role if not default textbox;"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "role",
                "reflect": false
            },
            "rows": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The number of rows to transform the text field into a text area with a specific height."
                },
                "getter": false,
                "setter": false,
                "attribute": "rows",
                "reflect": false,
                "defaultValue": "1"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizesNoLarge",
                    "resolved": "\"medium\" | \"small\"",
                    "references": {
                        "IcSizesNoLarge": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizesNoLarge"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The size of the text field component."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "spellcheck": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the value of the text field will have its spelling and grammar checked."
                },
                "getter": false,
                "setter": false,
                "attribute": "spellcheck",
                "reflect": false,
                "defaultValue": "false"
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "truncateValue": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "truncate-value",
                "reflect": false,
                "defaultValue": "false"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcTextFieldTypes",
                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
                    "references": {
                        "IcTextFieldTypes": {
                            "location": "import",
                            "path": "./ic-text-field.types",
                            "id": "src/components/ic-text-field/ic-text-field.types.ts::IcTextFieldTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The type of control to display. The default type is text."
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false,
                "defaultValue": "\"text\""
            },
            "validationAriaLive": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcValidationAriaLive",
                    "resolved": "\"assertive\" | \"default\" | \"off\" | \"polite\"",
                    "references": {
                        "IcValidationAriaLive": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcValidationAriaLive"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the `aria-live` attribute on the validation message. When set to \"default\", the `aria-live` value will be handled automatically, e.g. \"assertive\" for `validation-status=\"error\"`."
                },
                "getter": false,
                "setter": false,
                "attribute": "validation-aria-live",
                "reflect": false,
                "defaultValue": "\"default\""
            },
            "validationInline": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'."
                },
                "getter": false,
                "setter": false,
                "attribute": "validation-inline",
                "reflect": false,
                "defaultValue": "false"
            },
            "validationInlineInternal": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "If `true`, the validation will display inline."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "validation-inline-internal",
                "reflect": false,
                "defaultValue": "false"
            },
            "validationStatus": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcInformationStatusOrEmpty",
                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
                    "references": {
                        "IcInformationStatusOrEmpty": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcInformationStatusOrEmpty"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The validation state - e.g. 'error' | 'warning' | 'success'."
                },
                "getter": false,
                "setter": false,
                "attribute": "validation-status",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "validationText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text to display as the validation message."
                },
                "getter": false,
                "setter": false,
                "attribute": "validation-text",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "debounce": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
                },
                "getter": false,
                "setter": false,
                "attribute": "debounce",
                "reflect": false,
                "defaultValue": "0"
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the text field."
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": true,
                "defaultValue": "\"\""
            }
        };
    }
    static get states() {
        return {
            "numChars": {},
            "maxCharactersReached": {},
            "maxCharactersWarning": {},
            "minCharactersUnattained": {},
            "maxValueExceeded": {},
            "minValueUnattained": {},
            "isFocussed": {},
            "initialValue": {}
        };
    }
    static get events() {
        return [{
                "method": "getValidationText",
                "name": "getValidationText",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Emitted when the validationInlineInternal is `true`"
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "IcValueEventDetail",
                    "resolved": "IcValueEventDetail",
                    "references": {
                        "IcValueEventDetail": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcValueEventDetail"
                        }
                    }
                }
            }, {
                "method": "icBlur",
                "name": "icBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when input loses focus."
                },
                "complexType": {
                    "original": "IcValueEventDetail",
                    "resolved": "IcValueEventDetail",
                    "references": {
                        "IcValueEventDetail": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcValueEventDetail"
                        }
                    }
                }
            }, {
                "method": "icChange",
                "name": "icChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the value has changed."
                },
                "complexType": {
                    "original": "IcValueEventDetail",
                    "resolved": "IcValueEventDetail",
                    "references": {
                        "IcValueEventDetail": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcValueEventDetail"
                        }
                    }
                }
            }, {
                "method": "icFocus",
                "name": "icFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when input gains focus."
                },
                "complexType": {
                    "original": "IcValueEventDetail",
                    "resolved": "IcValueEventDetail",
                    "references": {
                        "IcValueEventDetail": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcValueEventDetail"
                        }
                    }
                }
            }, {
                "method": "icInput",
                "name": "icInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a keyboard input occurred."
                },
                "complexType": {
                    "original": "IcValueEventDetail",
                    "resolved": "IcValueEventDetail",
                    "references": {
                        "IcValueEventDetail": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcValueEventDetail"
                        }
                    }
                }
            }, {
                "method": "icKeydown",
                "name": "icKeydown",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a keydown event occurred."
                },
                "complexType": {
                    "original": "IcTextFieldKeydownEventDetail",
                    "resolved": "IcTextFieldKeydownEventDetail",
                    "references": {
                        "IcTextFieldKeydownEventDetail": {
                            "location": "import",
                            "path": "./ic-text-field.types",
                            "id": "src/components/ic-text-field/ic-text-field.types.ts::IcTextFieldKeydownEventDetail"
                        }
                    }
                }
            }, {
                "method": "icScroll",
                "name": "icScroll",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the textarea variant is scrolled."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the native `input`.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }, {
                "propName": "debounce",
                "methodName": "debounceChanged"
            }, {
                "propName": "value",
                "methodName": "watchValueHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "keydown",
                "method": "handleKeyDown",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-text-field.js.map
