@getpara/core-components 0.1.0

package/dist/collection/components/cpsl-input/cpsl-input.js

@@ -0,0 +1,951 @@
+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.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;
+        return (h(Host, { key: 'fba918642761d2d430ce71d0ffb18c103b7cbd46', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value), 'contrast-text': this.contrastText } }, this.label && (h("label", { key: '91ce78dd87eeccbea2769d2fe43a3724fcaa6d3f', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? h("span", { class: "optional-label" }, "(optional)") : '')), h("div", { key: '49abe74e0003f2ad3def70d11bc3e812edf4488b', class: { 'input-container': true, 'error-container': Boolean(this.errorText), 'textarea': this.as === 'textarea' } }, h("slot", { key: '5191799e84eb5a7a62cf966060dae77a9d37d270', name: "start" }), h(this.as, { key: '09a4a3be9bcc9608127634587b4ff86da3304a55', 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, spellcheck: this.spellcheck, type: this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : '', rows: this.rows, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: 'b53e9fc972d166a5a3c7795f10cb5ebc9104a3be', name: "end" })), (this.errorText || this.helperText) && (h("div", { key: 'f04d756ef4bd27c4ca9154df5b02806e42b33046', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("span", { key: 'f68e00473cd424ea0654fea61262295b55761d31' }, (_b = this.errorText) !== null && _b !== void 0 ? _b : 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
+            },
+            "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\" | \"arrowNarrow\" | \"arrow\" | \"asterisk\" | \"backupKit\" | \"bank\" | \"baseBrand\" | \"brush\" | \"celoBrand\" | \"checkCircleFilled\" | \"checkCircle\" | \"checkSquare\" | \"check\" | \"chevronDown\" | \"chevronRight\" | \"chevronSelectorVertical\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"code\" | \"copy07\" | \"copy\" | \"cosmos\" | \"creditCard02\" | \"creditCard\" | \"cube03\" | \"cubeOutline\" | \"cube\" | \"currencyDollar\" | \"decentBrand\" | \"decent\" | \"dell\" | \"discordBrand\" | \"discord\" | \"dot\" | \"dots\" | \"downloadCloud\" | \"download\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"edit02\" | \"emptyCircle\" | \"ethereum\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"farcasterBrand\" | \"farcaster\" | \"figmaBrand\" | \"figma\" | \"file\" | \"folder\" | \"githubBrand\" | \"github\" | \"globe\" | \"googleBrand\" | \"google\" | \"gridDots\" | \"helpCircle\" | \"heroAlertCircle\" | \"heroCheckmarkCapsule\" | \"heroCheckmark\" | \"heroEmail\" | \"heroExternalConnection\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroPlusCircleCapsule\" | \"heroPlusCircle\" | \"heroWallet\" | \"home\" | \"hp\" | \"image\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"laptop\" | \"lenovo\" | \"lightning01\" | \"lightning\" | \"linkExternal\" | \"linkedinBrand\" | \"linkedin\" | \"lockKeyholeCircle\" | \"logOut\" | \"mail\" | \"menu\" | \"monitor\" | \"moonpayBrand\" | \"moreLoginOptions\" | \"motorola\" | \"nobleBrand\" | \"optimismBrand\" | \"paraBlackBg\" | \"paraBrand\" | \"paraIconBrand\" | \"paraIconQr\" | \"paraIcon\" | \"paraLogo\" | \"paraRingsDark\" | \"paraRings\" | \"para\" | \"passcode\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"plus\" | \"polygonBrand\" | \"polygon\" | \"puzzlePiece\" | \"qrCode02\" | \"qrCode\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"refresh\" | \"samsung\" | \"send\" | \"settings\" | \"share\" | \"shield\" | \"signalBrand\" | \"signal\" | \"sliders\" | \"snapchatBrand\" | \"snapchat\" | \"solana\" | \"spacingHeight\" | \"star04Filled\" | \"stars01Filled\" | \"stars\" | \"stopSquare\" | \"stripeBrand\" | \"telegramBrand\" | \"telegram\" | \"tetherBrand\" | \"tikTokBrand\" | \"tikTok\" | \"trash\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"usdcBrand\" | \"userCircle\" | \"user\" | \"wallet\" | \"x\" | \"youtubeBrand\" | \"youtube\" | \"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