import { Host, h } from "@stencil/core";
import Inputmask from "inputmask";
export class CpslInput {
    constructor() {
        this.inputId = `cpsl-input-${inputIds++}`;
        this.onInput = (ev) => {
            const input = ev.target;
            let _value = input.value || '';
            if (input.inputmask)
                _value = input.inputmask.unmaskedvalue();
            if (Boolean(input)) {
                this.value = _value;
                input.value === '' ? this.disableSlots() : this.enableSlots();
            }
            this.emitInputChange(ev);
        };
        this.onChange = (ev) => {
            this.emitValueChange(ev);
        };
        this.onBlur = (ev) => {
            this.hasFocus = false;
            if (this.focusedValue !== this.value) {
                /**
                 * Emits the `cpslChange` event when the input value
                 * is different than the value when the input was focused.
                 */
                this.emitValueChange(ev);
            }
            this.cpslBlur.emit(ev);
        };
        this.onFocus = (ev) => {
            this.hasFocus = true;
            this.focusedValue = this.value;
            this.autoselect && ev.target.select();
            this.cpslFocus.emit(ev);
        };
        this.onPaste = (ev) => {
            var _a;
            ev.stopPropagation();
            ev.preventDefault();
            const input = ev.target;
            const pasteData = ((_a = ev.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) || '';
            // Manually set the value & cursor position
            const initialSelectionStart = input.selectionStart;
            const newVal = `${input.value.slice(0, input.selectionStart)}${pasteData}${input.value.slice(input.selectionEnd, input.value.length)}`;
            input.value = newVal;
            // this.value = newVal;
            input.selectionEnd = initialSelectionStart + pasteData.length;
            let _value = input.value || '';
            if (input.inputmask)
                _value = input.inputmask.unmaskedvalue();
            this.value = _value;
            this.value === '' ? this.disableSlots() : this.enableSlots();
            // Emit the cpslPaste event
            this.cpslPaste.emit(ev);
            // Emit the cpslChange event since the value was modified by paste
            this.emitInputChange(ev);
        };
        this.focusInput = () => {
            this.nativeInput.focus();
        };
        this.hasFocus = false;
        this.as = 'input';
        this.autocapitalize = 'off';
        this.autocomplete = 'off';
        this.autocorrect = 'off';
        this.noAutoDisable = undefined;
        this.autofocus = false;
        this.autoselect = false;
        this.disabled = false;
        this.contrastText = false;
        this.enterkeyhint = undefined;
        this.errorText = undefined;
        this.fitContent = false;
        this.mask = undefined;
        this.isPhone = undefined;
        this.helperText = undefined;
        this.inputmode = undefined;
        this.label = undefined;
        this.max = undefined;
        this.maxlength = undefined;
        this.min = undefined;
        this.minlength = undefined;
        this.multiple = undefined;
        this.name = this.inputId;
        this.pattern = undefined;
        this.placeholder = undefined;
        this.readonly = false;
        this.required = false;
        this.rows = 5;
        this.showOptionalLabel = false;
        this.spellcheck = false;
        this.startIconSrc = undefined;
        this.startIcon = undefined;
        this.step = undefined;
        this.type = 'text';
        this.value = undefined;
    }
    handleDisable() {
        if (this.disabled) {
            this.disableSlots();
        }
        else {
            this.enableSlots();
        }
    }
    handleSetupMask() {
        var _a;
        if (this.nativeInput) {
            if (this.mask) {
                const [oldValue, oldCursorPosition] = [this.value, this.nativeInput.selectionEnd];
                Inputmask({ mask: this.mask, showMaskOnHover: false }).mask(this.nativeInput);
                this.nativeInput.inputmask.shadowRoot = this.el.shadowRoot;
                if (oldCursorPosition === oldValue.length && this.isPhone) {
                    const firstUnderscore = this.nativeInput.value.indexOf('_');
                    this.nativeInput.setSelectionRange(firstUnderscore, firstUnderscore);
                }
            }
            else {
                if (this.nativeInput.inputmask) {
                    this.nativeInput.inputmask.remove();
                }
                this.nativeInput.value = (_a = this.value) !== null && _a !== void 0 ? _a : '';
            }
        }
    }
    handleValueChange() {
        var _a;
        if (!this.value) {
            this.nativeInput.value = (_a = this.value) !== null && _a !== void 0 ? _a : '';
        }
    }
    componentDidLoad() {
        this.initButtons();
        if (this.value) {
            this.enableSlots();
        }
        else {
            this.disableSlots();
        }
        this.handleSetupMask();
    }
    disableSlots() {
        var _a, _b;
        if (!this.noAutoDisable) {
            (_a = this.endEl) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'true');
            (_b = this.startEl) === null || _b === void 0 ? void 0 : _b.setAttribute('disabled', 'true');
        }
    }
    enableSlots() {
        var _a, _b;
        (_a = this.endEl) === null || _a === void 0 ? void 0 : _a.setAttribute('disabled', 'false');
        (_b = this.startEl) === null || _b === void 0 ? void 0 : _b.setAttribute('disabled', 'false');
    }
    initButtons() {
        var _a, _b;
        if (((_a = this.endEl) === null || _a === void 0 ? void 0 : _a.tagName) === 'CPSL-BUTTON') {
            this.endEl.setAttribute('full-width', 'true');
            this.endEl.addEventListener('mousedown', e => {
                e.preventDefault();
            });
        }
        if (((_b = this.startEl) === null || _b === void 0 ? void 0 : _b.tagName) === 'CPSL-BUTTON') {
            this.startEl.setAttribute('full-width', 'true');
            this.startEl.addEventListener('mousedown', e => {
                e.preventDefault();
            });
        }
    }
    /**
     * Emits a `cpslInput` event.
     */
    emitInputChange(event) {
        this.cpslInput.emit({ value: this.value || '', event });
    }
    /**
     * Emits a `cpslChange` event.
     *
     * This API should be called for user committed changes.
     * This API should not be used for external value changes.
     */
    emitValueChange(event) {
        const { value } = this;
        // Checks for both null and undefined values
        const newValue = value == null ? value : value.toString();
        // Emitting a value change should update the internal state for tracking the focused value
        this.focusedValue = newValue;
        this.cpslChange.emit({ value: newValue, event });
    }
    get startEl() {
        return this.el.querySelector('[slot="start"]');
    }
    get endEl() {
        return this.el.querySelector('[slot="end"]');
    }
    render() {
        var _a, _b, _c, _d;
        return (h(Host, { key: '3335ee77eeef1674ee4e63dd715d5bef53e7079d', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value), 'contrast-text': this.contrastText } }, this.label && (h("label", { key: '6bff728ccf314abe1901fa178442d4519eb0ea2c', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '528f02f84fa0625e7792e31308e68990303752be', class: { 'input-container': true, 'error-container': Boolean(this.errorText), 'textarea': this.as === 'textarea' } }, h("slot", { key: '140f3f895d626d947c99741b9d45c478b71e967e', name: "start" }), h(this.as, { key: 'e11a9700fab863a08cce868bb7413a2ca50ca45c', part: "native-input", class: { 'native-input': true }, ref: input => (this.nativeInput = input), id: this.inputId, disabled: this.disabled, 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: this.readonly, required: this.required, size: this.fitContent ? ((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1) : undefined, spellcheck: this.spellcheck, type: this.type, value: (_c = this.value) !== null && _c !== void 0 ? _c : '', rows: this.rows, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: 'ff447dca64a4532e305bdbe3877f04d4ea17220d', name: "end" })), (this.errorText || this.helperText) && (h("div", { key: '60330d9d1f935ebc4ab0b948c6d37439ccd7b202', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: '18fa73f7a1befbda7680acd7bbceeb355d8f8832' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText)))));
    }
    static get is() { return "cpsl-input"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["cpsl-input.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["cpsl-input.css"]
        };
    }
    static get properties() {
        return {
            "as": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'input' | 'textarea'",
                    "resolved": "\"input\" | \"textarea\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The tag for the input.\nOptions are: `\"input\"`, `\"textarea\".\nDefault is: `\"input\"`."
                },
                "attribute": "as",
                "reflect": false,
                "defaultValue": "'input'"
            },
            "autocapitalize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`."
                },
                "attribute": "autocapitalize",
                "reflect": false,
                "defaultValue": "'off'"
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "AutocompleteTypes",
                    "resolved": "\"on\" | \"off\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
                    "references": {
                        "AutocompleteTypes": {
                            "location": "import",
                            "path": "../../interface.js",
                            "id": "src/interface.ts::AutocompleteTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates whether the value of the control can be automatically completed by the browser."
                },
                "attribute": "autocomplete",
                "reflect": false,
                "defaultValue": "'off'"
            },
            "autocorrect": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'on' | 'off'",
                    "resolved": "\"off\" | \"on\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether auto correction should be enabled when the user is entering/editing the text value."
                },
                "attribute": "autocorrect",
                "reflect": false,
                "defaultValue": "'off'"
            },
            "noAutoDisable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether to disable auto disabling of the slotted components."
                },
                "attribute": "no-auto-disable",
                "reflect": false
            },
            "autofocus": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.\n\nThis may not be sufficient for the element to be focused on page load."
                },
                "attribute": "autofocus",
                "reflect": false,
                "defaultValue": "false"
            },
            "autoselect": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the input's entire contents will be selected on focus."
                },
                "attribute": "autoselect",
                "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 user cannot interact with the input."
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "contrastText": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the input primary color will use the contrast value, not the primary text value."
                },
                "attribute": "contrast-text",
                "reflect": false,
                "defaultValue": "false"
            },
            "enterkeyhint": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
                    "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`."
                },
                "attribute": "enterkeyhint",
                "reflect": false
            },
            "errorText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Error text to show below the input. If this is provided the input will enter an error state."
                },
                "attribute": "error-text",
                "reflect": false
            },
            "fitContent": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Update the native input size to match the text content"
                },
                "attribute": "fit-content",
                "reflect": false,
                "defaultValue": "false"
            },
            "mask": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Mask string to apply to the input."
                },
                "attribute": "mask",
                "reflect": false
            },
            "isPhone": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Whether the input is for a phone number."
                },
                "attribute": "is-phone",
                "reflect": false
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Helper text to show below the input. If `\"errorText\"` is provided that will take precedence."
                },
                "attribute": "helper-text",
                "reflect": false
            },
            "inputmode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "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\"`."
                },
                "attribute": "inputmode",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label for the input."
                },
                "attribute": "label",
                "reflect": false
            },
            "max": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The maximum value, which must not be less than its minimum (min attribute) value."
                },
                "attribute": "max",
                "reflect": false
            },
            "maxlength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter."
                },
                "attribute": "maxlength",
                "reflect": false
            },
            "min": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The minimum value, which must not be greater than its maximum (max attribute) value."
                },
                "attribute": "min",
                "reflect": false
            },
            "minlength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter."
                },
                "attribute": "minlength",
                "reflect": false
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored."
                },
                "attribute": "multiple",
                "reflect": false
            },
            "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."
                },
                "attribute": "name",
                "reflect": false,
                "defaultValue": "this.inputId"
            },
            "pattern": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information."
                },
                "attribute": "pattern",
                "reflect": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Instructional text that shows before the input has a value.\nThis property applies only when the `type` property is set to `\"email\"`,\n`\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored."
                },
                "attribute": "placeholder",
                "reflect": false
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user cannot modify the value."
                },
                "attribute": "readonly",
                "reflect": false,
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user must fill in a value before submitting a form."
                },
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "rows": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Number of rows for the textarea"
                },
                "attribute": "rows",
                "reflect": false,
                "defaultValue": "5"
            },
            "showOptionalLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the label will display an \"optional\" tag."
                },
                "attribute": "show-optional-label",
                "reflect": false,
                "defaultValue": "false"
            },
            "spellcheck": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the element will have its spelling and grammar checked."
                },
                "attribute": "spellcheck",
                "reflect": false,
                "defaultValue": "false"
            },
            "startIconSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The external source of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used."
                },
                "attribute": "start-icon-src",
                "reflect": false
            },
            "startIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IconType",
                    "resolved": "\"search\" | \"lg\" | \"alertCircle\" | \"alertTriangle\" | \"alignVerticalCenter\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arbitrumBrand\" | \"arrowCircleBrokenDownLeft\" | \"arrowCircleDownFilled\" | \"arrowCircleDown\" | \"arrowNarrow\" | \"arrowUpDown\" | \"arrow\" | \"asterisk\" | \"backpack\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"beraBrand\" | \"brush\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"checkSquare\" | \"check\" | \"chevronDown\" | \"chevronRight\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"code\" | \"coinbase\" | \"coins\" | \"copy07\" | \"copy\" | \"cosmosCircle\" | \"cosmos\" | \"cosmostation\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"dell\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dotsSquare\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"ethCircle\" | \"ethereum\" | \"externalLink\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"glow\" | \"googleBrand\" | \"google\" | \"gridDots\" | \"haha\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"hp\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"keplr\" | \"key\" | \"laptop\" | \"leap\" | \"lenovo\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"lockKeyholeCircle\" | \"logOut\" | \"mail\" | \"menu\" | \"metamask\" | \"monitor\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"motorola\" | \"nobleBrand\" | \"okx\" | \"optimismBrand\" | \"paraArrow\" | \"paraBlackBg\" | \"paraBrand\" | \"paraIconBrand\" | \"paraIconQr\" | \"paraIcon\" | \"paraLogo\" | \"paraRingsDark\" | \"paraRings\" | \"para\" | \"passcode\" | \"phantom\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rabby\" | \"rainbow\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"safe\" | \"samsung\" | \"send\" | \"settings\" | \"share\" | \"shield\" | \"shuffle\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solanaCircle\" | \"solana\" | \"solflare\" | \"spacingHeight\" | \"star04Filled\" | \"star05\" | \"stars01Filled\" | \"stars02\" | \"stars\" | \"stopSquare\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"user01\" | \"userCircle\" | \"userPlus\" | \"user\" | \"valora\" | \"wallet02\" | \"walletConnect\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"zap\" | \"zerion\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\"",
                    "references": {
                        "IconType": {
                            "location": "import",
                            "path": "../../interface.js",
                            "id": "src/interface.ts::IconType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The name of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used."
                },
                "attribute": "start-icon",
                "reflect": false
            },
            "step": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number."
                },
                "attribute": "step",
                "reflect": false
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "TextFieldTypes",
                    "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
                    "references": {
                        "TextFieldTypes": {
                            "location": "import",
                            "path": "../../interface.js",
                            "id": "src/interface.ts::TextFieldTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The type of control to display. The default type is `text`."
                },
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'text'"
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The value of the controlled input."
                },
                "attribute": "value",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "hasFocus": {}
        };
    }
    static get events() {
        return [{
                "method": "cpslInput",
                "name": "cpslInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "The `cpslInput` event is fired each time the user modifies the input's value.\nUnlike the `cpslChange` event, the `cpslInput` event is fired for each alteration\nto the input's value. This typically happens for each keystroke as the user types.\n\nFor elements that accept text input (`type=text`, `type=tel`, etc.), the interface\nis [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\nthe interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\nthe input is cleared on edit, the type is `null`."
                },
                "complexType": {
                    "original": "InputInputEventDetail",
                    "resolved": "InputInputEventDetail",
                    "references": {
                        "InputInputEventDetail": {
                            "location": "import",
                            "path": "./input-interface.js",
                            "id": "src/components/cpsl-input/input-interface.ts::InputInputEventDetail"
                        }
                    }
                }
            }, {
                "method": "cpslChange",
                "name": "cpslChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "The `cpslChange` event is fired when the user modifies the input's value.\nUnlike the `cpslInput` event, the `cpslChange` event is only fired when changes\nare committed, not as the user types.\n\nDepending on the way the users interacts with the element, the `cpslChange`\nevent fires at a different moment:\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing."
                },
                "complexType": {
                    "original": "InputChangeEventDetail",
                    "resolved": "InputChangeEventDetail",
                    "references": {
                        "InputChangeEventDetail": {
                            "location": "import",
                            "path": "./input-interface.js",
                            "id": "src/components/cpsl-input/input-interface.ts::InputChangeEventDetail"
                        }
                    }
                }
            }, {
                "method": "cpslBlur",
                "name": "cpslBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input loses focus."
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }, {
                "method": "cpslFocus",
                "name": "cpslFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input has focus."
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }, {
                "method": "cpslPaste",
                "name": "cpslPaste",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when something has been paste into the input."
                },
                "complexType": {
                    "original": "ClipboardEvent",
                    "resolved": "ClipboardEvent",
                    "references": {
                        "ClipboardEvent": {
                            "location": "global",
                            "id": "global::ClipboardEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "handleDisable"
            }, {
                "propName": "mask",
                "methodName": "handleSetupMask"
            }, {
                "propName": "value",
                "methodName": "handleValueChange"
            }];
    }
}
let inputIds = 0;
//# sourceMappingURL=cpsl-input.js.map
