@dropi/ui 0.1.24 → 0.1.26

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

@@ -1,808 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-input
- * Text input with floating label, validation states, password toggle,
- * number/letter restrictions, thousand separator, and native form association.
- *
- * ## Form usage (native HTML form)
- * ```html
- * <form>
- *   <dropi-input name="email" label="Email" required></dropi-input>
- * </form>
- * ```
- *
- * ## Controlled usage (React / Vue / Angular)
- * Pass `value` and listen to `dropiInput` to update.
- */
-export class DropiInput {
-    internals;
-    // ── Identification ──────────────────────────────────────────
-    /** Input id. Defaults to label label. */
-    id = '';
-    /** Name attribute for native form submission */
-    name = '';
-    // ── Content ─────────────────────────────────────────────────
-    /** Floating or fixed label text */
-    label = '';
-    /** Placeholder text (visible in fixedLabel mode or on focus) */
-    placeholder = ' ';
-    /** Current value (controlled) */
-    value = '';
-    /** Max character length */
-    maxLength;
-    // ── Behavior ────────────────────────────────────────────────
-    /** Disable the input */
-    disabled = false;
-    /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */
-    required = false;
-    /** Show the required asterisk on the label */
-    showObligatoryAsterisk = true;
-    /** Show label above the input (fixed), instead of floating inside */
-    fixedLabel = false;
-    /** Keyboard input mode hint */
-    inputMode = 'text';
-    // ── Input type modifiers ────────────────────────────────────
-    /** Show password visibility toggle (renders as password field) */
-    passwordInput = false;
-    /** Apply thousand separator formatting (e.g. 1,000,000) */
-    isMoneyInput = false;
-    /** Apply thousand separator without currency symbol */
-    isThousandSeparator = false;
-    /** Only allow numeric characters */
-    isNumericInput = false;
-    /** Allow decimal point when isNumericInput is true */
-    allowDecimals = false;
-    /** Only allow letter characters */
-    isLettersOnly = false;
-    // ── Icon ────────────────────────────────────────────────────
-    /** Icon name shown inside the input (only visible when value is not empty) */
-    icon = '';
-    /** Color token for the icon */
-    iconColor = 'Gray-Gray-400';
-    // ── Validation ──────────────────────────────────────────────
-    /** Mark the field as invalid (consumer-controlled) */
-    hasError = false;
-    /** Helper / error text shown below the field */
-    textHelper = '';
-    /** Only show textHelper when the field is invalid */
-    showHelperOnlyOnError = false;
-    // ── Angular-parity ──────────────────────────────────────────
-    /**
-     * Convenience object prop — matches Angular `inputProperties: InputProperties`.
-     * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,
-     * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,
-     * allowDecimals, isThousandSeparator, showHelperOnlyOnError,
-     * isLettersOnly, inputMode.
-     * Note: `formControl` is not supported; use `value` + onInput event instead.
-     */
-    inputProperties = null;
-    // ── Internal state ──────────────────────────────────────────
-    showPassword = false;
-    touched = false;
-    // ── Events ──────────────────────────────────────────────────
-    /** Emitted on every keystroke with the current value */
-    onInput;
-    /** Emitted on blur with the final value */
-    onChange;
-    /** Emitted on focus */
-    onFocus;
-    /** Emitted on blur */
-    onBlur;
-    inputPropertiesChanged(val) {
-        if (!val)
-            return;
-        if (val.id !== undefined)
-            this.id = val.id;
-        if (val.label !== undefined)
-            this.label = val.label;
-        if (val.placeholder !== undefined)
-            this.placeholder = val.placeholder;
-        if (val.maxLength !== undefined)
-            this.maxLength = val.maxLength;
-        if (val.textHelper !== undefined)
-            this.textHelper = val.textHelper;
-        if (val.passwordInput !== undefined)
-            this.passwordInput = val.passwordInput;
-        if (val.isPasswordInput !== undefined)
-            this.passwordInput = val.isPasswordInput; // Fallback
-        if (val.icon !== undefined)
-            this.icon = val.icon;
-        if (val.iconColor !== undefined)
-            this.iconColor = val.iconColor;
-        if (val.isMoneyInput !== undefined)
-            this.isMoneyInput = val.isMoneyInput;
-        if (val.showObligatoryAsterisk !== undefined)
-            this.showObligatoryAsterisk = val.showObligatoryAsterisk;
-        if (val.isNumericInput !== undefined)
-            this.isNumericInput = val.isNumericInput;
-        if (val.allowDecimals !== undefined)
-            this.allowDecimals = val.allowDecimals;
-        if (val.isThousandSeparator !== undefined)
-            this.isThousandSeparator = val.isThousandSeparator;
-        if (val.showHelperOnlyOnError !== undefined)
-            this.showHelperOnlyOnError = val.showHelperOnlyOnError;
-        if (val.isLettersOnly !== undefined)
-            this.isLettersOnly = val.isLettersOnly;
-        if (val.inputMode !== undefined)
-            this.inputMode = val.inputMode;
-    }
-    valueChanged(val) {
-        this.internals.setFormValue(val);
-    }
-    disabledChanged(val) {
-        this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');
-    }
-    componentWillLoad() {
-        this.internals.setFormValue(this.value ?? '');
-        if (this.inputProperties)
-            this.inputPropertiesChanged(this.inputProperties);
-    }
-    // ── Handlers ────────────────────────────────────────────────
-    handleInput(e) {
-        let val = e.target.value;
-        if (this.isNumericInput)
-            val = this.filterNumbers(val);
-        if (this.isLettersOnly)
-            val = this.filterLetters(val);
-        if (this.isMoneyInput || this.isThousandSeparator)
-            val = this.formatThousands(val, this.isMoneyInput);
-        this.value = val;
-        this.internals.setFormValue(val);
-        this.onInput.emit(val);
-    }
-    handleKeyDown(e) {
-        if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
-            e.preventDefault();
-        }
-        if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {
-            e.preventDefault();
-        }
-    }
-    handleFocus() {
-        this.onFocus.emit();
-    }
-    handleBlur() {
-        this.touched = true;
-        this.onChange.emit(this.value);
-        this.onBlur.emit();
-    }
-    togglePassword() {
-        if (this.disabled)
-            return;
-        this.showPassword = !this.showPassword;
-    }
-    // ── Helpers ─────────────────────────────────────────────────
-    filterNumbers(val) {
-        const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;
-        return val.replace(pattern, '');
-    }
-    filterLetters(val) {
-        return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g, '');
-    }
-    isAllowedNumberKey(e) {
-        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];
-        if (allowed.includes(e.key))
-            return true;
-        if (e.ctrlKey || e.metaKey)
-            return true; // copy/paste/select-all
-        if (/^[0-9]$/.test(e.key))
-            return true;
-        if (this.allowDecimals && e.key === '.')
-            return true;
-        return false;
-    }
-    isAllowedLetterKey(e) {
-        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];
-        if (allowed.includes(e.key))
-            return true;
-        if (e.ctrlKey || e.metaKey)
-            return true;
-        return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);
-    }
-    formatThousands(val, withCurrency) {
-        const raw = val.replace(/[^0-9.]/g, '');
-        const [integer, decimal] = raw.split('.');
-        const formatted = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;
-        return withCurrency ? `$${result}` : result;
-    }
-    // ── Computed ─────────────────────────────────────────────────
-    get resolvedId() {
-        return this.id || this.label;
-    }
-    get inputType() {
-        if (this.passwordInput)
-            return this.showPassword ? 'text' : 'password';
-        return 'text';
-    }
-    get showHelper() {
-        if (!this.textHelper)
-            return false;
-        if (this.showHelperOnlyOnError)
-            return this.hasError && this.touched;
-        return true;
-    }
-    get isInvalid() {
-        return this.hasError && this.touched;
-    }
-    // ── Render ───────────────────────────────────────────────────
-    render() {
-        const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
-        const showIconInline = !!this.icon;
-        return (h("div", { key: 'cc38b113d77982ba53665a6c8ccbf39a393da696', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '06bb6b6df585f859dc7a903fac4ed3f9f6c31077', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: '6e87d6717a312d7497c2cf438aec7a692b974dda', class: "asterisk" }, " *"))), h("div", { key: '2eb67324cb06e04ee9fc5507a319a2eda8b5e410', class: "form-group" }, h("div", { key: '9d8d6f8df83c33782fd61810267e433fdab452d9', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && h("dropi-icon", { key: '370070a0e75a929438cb564698ee10c866e944a9', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" }), this.passwordInput && (h("dropi-icon", { key: '675958939e32a94060993515f9b9a58513ec2adc', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'd2ac98c43f9863ea8153dc66dd3fe347a7c28473', id: this.resolvedId, class: {
-                'form-control': true,
-                'form-control-valid': !this.isInvalid && this.touched && !!this.value,
-                'form-control-invalid': this.isInvalid,
-                'padding-icon': showIconInline,
-                'text-password': this.passwordInput && !this.showPassword,
-                'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '45eb57801e7d199532215ba069af8ba01714a46f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '5d4d83ce2575d60567a4a947d643a89f760cb3bd', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'b78fdac5f0c46b827c9dd2895d43a5e1724058d8', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'f037c95230fe0fa57540a1b74a26c14e56e555e4', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'fc48f7418c36f7ded7a999e446323ca8adb2b590', class: {
-                'disabled-helper': this.disabled,
-                'invalid-color': this.isInvalid,
-            } }, this.textHelper)))))));
-    }
-    static get is() { return "dropi-input"; }
-    static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-input.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-input.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "id": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Input id. Defaults to label label."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "id",
-                "defaultValue": "''"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Name attribute for native form submission"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name",
-                "defaultValue": "''"
-            },
-            "label": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Floating or fixed label text"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Placeholder text (visible in fixedLabel mode or on focus)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "' '"
-            },
-            "value": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Current value (controlled)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
-            },
-            "maxLength": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Max character length"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-length"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Disable the input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Mark as required (shows asterisk when showObligatoryAsterisk is true)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
-            "showObligatoryAsterisk": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show the required asterisk on the label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-obligatory-asterisk",
-                "defaultValue": "true"
-            },
-            "fixedLabel": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show label above the input (fixed), instead of floating inside"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "fixed-label",
-                "defaultValue": "false"
-            },
-            "inputMode": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "InputMode",
-                    "resolved": "\"decimal\" | \"email\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"",
-                    "references": {
-                        "InputMode": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-input/dropi-input.tsx",
-                            "id": "src/components/dropi-input/dropi-input.tsx::InputMode"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Keyboard input mode hint"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "input-mode",
-                "defaultValue": "'text'"
-            },
-            "passwordInput": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show password visibility toggle (renders as password field)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "password-input",
-                "defaultValue": "false"
-            },
-            "isMoneyInput": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Apply thousand separator formatting (e.g. 1,000,000)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-money-input",
-                "defaultValue": "false"
-            },
-            "isThousandSeparator": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Apply thousand separator without currency symbol"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-thousand-separator",
-                "defaultValue": "false"
-            },
-            "isNumericInput": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Only allow numeric characters"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-numeric-input",
-                "defaultValue": "false"
-            },
-            "allowDecimals": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Allow decimal point when isNumericInput is true"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "allow-decimals",
-                "defaultValue": "false"
-            },
-            "isLettersOnly": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Only allow letter characters"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-letters-only",
-                "defaultValue": "false"
-            },
-            "icon": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Icon name shown inside the input (only visible when value is not empty)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon",
-                "defaultValue": "''"
-            },
-            "iconColor": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Color token for the icon"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon-color",
-                "defaultValue": "'Gray-Gray-400'"
-            },
-            "hasError": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Mark the field as invalid (consumer-controlled)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "has-error",
-                "defaultValue": "false"
-            },
-            "textHelper": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Helper / error text shown below the field"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "text-helper",
-                "defaultValue": "''"
-            },
-            "showHelperOnlyOnError": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Only show textHelper when the field is invalid"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-helper-only-on-error",
-                "defaultValue": "false"
-            },
-            "inputProperties": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Convenience object prop \u2014 matches Angular `inputProperties: InputProperties`.\nFields: id, label, placeholder, maxLength, textHelper, passwordInput,\nicon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\nallowDecimals, isThousandSeparator, showHelperOnlyOnError,\nisLettersOnly, inputMode.\nNote: `formControl` is not supported; use `value` + onInput event instead."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "input-properties",
-                "defaultValue": "null"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "showPassword": {},
-            "touched": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "onInput",
-                "name": "onInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted on every keystroke with the current value"
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }, {
-                "method": "onChange",
-                "name": "onChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted on blur with the final value"
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }, {
-                "method": "onFocus",
-                "name": "onFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted on focus"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "onBlur",
-                "name": "onBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted on blur"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-    static get watchers() {
-        return [{
-                "propName": "inputProperties",
-                "methodName": "inputPropertiesChanged"
-            }, {
-                "propName": "value",
-                "methodName": "valueChanged"
-            }, {
-                "propName": "disabled",
-                "methodName": "disabledChanged"
-            }];
-    }
-    static get attachInternalsMemberName() { return "internals"; }
-}