bromcom-ui-next 0.1.2 → 0.1.4

package/dist/collection/components/input/input.component.js

@@ -0,0 +1,1050 @@
+import { h } from "@stencil/core";
+import { defaultIcons } from "./types";
+import { tv } from "tailwind-variants";
+import classNames from "classnames";
+import { generateId } from "../../utils/id/generate-id";
+import { checkSlotContent } from "../../utils/slot/check-slot-content";
+import { getValidationMessage, setValidationMessages, defaultValidationMessages } from "../../utils/validation-messages";
+export class BcmInput {
+    constructor() {
+        this.isFocused = false;
+        this.isValid = true;
+        this.internalStatus = 'default';
+        /** Input value */
+        this.value = '';
+        /** Input id */
+        this._id = generateId('input');
+        /** Controls the input size */
+        this.size = 'medium';
+        /** Defines the input's status/state */
+        this.status = 'default';
+        /** Full width input */
+        this.fullWidth = false;
+        /** HTML input type */
+        this.type = 'text';
+        /** Whether the input is disabled */
+        this.disabled = false;
+        /** Whether the input is readonly */
+        this.readonly = false;
+        /** Whether the input is required */
+        this.required = false;
+        /** Whether to use native form validation
+         * If false, component will handle validation internally
+         */
+        this.useNativeValidation = true;
+        this.onInput = (event) => {
+            const input = event.target;
+            this.value = input.value;
+            this.bcmInput.emit(event);
+            this.validateInput();
+        };
+        this.onChange = (event) => {
+            this.bcmChange.emit(event);
+        };
+        this.onFocus = (event) => {
+            this.isFocused = true;
+            this.bcmFocus.emit(event);
+        };
+        this.onBlur = (event) => {
+            this.isFocused = false;
+            this.bcmBlur.emit(event);
+            this.validateInput();
+        };
+        this.onKeyDown = (event) => {
+            this.bcmKeyDown.emit(event);
+        };
+        this.onKeyUp = (event) => {
+            this.bcmKeyUp.emit(event);
+        };
+        this.styleClass = tv({
+            slots: {
+                base: [
+                    'bcm-input bcm-input__container',
+                    'bg-[--bcm-ui-color-background-base-default]',
+                    'border border-solid rounded',
+                    'flex items-center justify-between',
+                    'transition-colors duration-200',
+                    'px-2',
+                ],
+                inputClass: [
+                    'input',
+                    'w-full flex-1',
+                    'border-0 outline-0 bg-transparent',
+                    'appearance-none text-ellipsis',
+                    'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',
+                    'font-sans antialiased font-medium',
+                    'px-1',
+                ],
+            },
+            variants: {
+                size: {
+                    small: {
+                        base: '',
+                        inputClass: 'text-size-4  h-6',
+                    },
+                    medium: {
+                        base: '',
+                        inputClass: 'text-size-5  h-8',
+                    },
+                    large: {
+                        base: '',
+                        inputClass: 'text-size-6  h-10',
+                    },
+                },
+                status: {
+                    default: {
+                        base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],
+                    },
+                    error: {
+                        base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],
+                    },
+                    success: {
+                        base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],
+                    },
+                    warning: {
+                        base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],
+                    },
+                    info: {
+                        base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],
+                    },
+                },
+                fullWidth: {
+                    true: 'full-width w-full',
+                },
+                disabled: {
+                    true: 'disabled cursor-not-allowed',
+                    false: '',
+                },
+                focused: {
+                    true: {
+                        base: '',
+                    },
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                status: 'default',
+                fullWidth: false,
+                disabled: false,
+                focused: false,
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    handleValueChange(newValue) {
+        if (this.inputRef) {
+            this.inputRef.value = newValue;
+        }
+    }
+    watchStatus(newValue) {
+        this.internalStatus = newValue;
+    }
+    watchErrorMessage(newValue) {
+        this.internalErrorMessage = newValue;
+    }
+    async setFocus() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    async setBlur() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    async select() {
+        var _a;
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.select();
+    }
+    /** Sets locale and messages for all inputs */
+    async setLocale(locale, messages) {
+        // Set messages and update validation immediately
+        setValidationMessages(locale, messages);
+        // Mevcut validasyon mesajını güncelle
+        if (!this.isValid) {
+            this.validateInput();
+        }
+    }
+    componentWillLoad() {
+        // I18n için default mesajları set et
+        setValidationMessages('en', defaultValidationMessages);
+        this.internalStatus = this.status;
+        this.internalErrorMessage = this.errorMessage;
+    }
+    validateInput() {
+        if (!this.inputRef)
+            return;
+        // Reset validation state
+        this.isValid = true;
+        this.validationMessage = '';
+        const value = this.inputRef.value;
+        // Required check
+        if (this.required && !value) {
+            this.isValid = false;
+            this.validationMessage = getValidationMessage('required');
+            this.internalStatus = 'error';
+            this.internalErrorMessage = this.validationMessage;
+            return;
+        }
+        // Minimum length check
+        else if (this.minLength && value.length < this.minLength) {
+            this.isValid = false;
+            this.validationMessage = getValidationMessage('minlength', { min: this.minLength });
+        }
+        // Maximum length check
+        else if (this.maxLength && value.length > this.maxLength) {
+            this.isValid = false;
+            this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });
+        }
+        // Pattern check
+        else if (this.pattern && !new RegExp(this.pattern).test(value)) {
+            this.isValid = false;
+            this.validationMessage = getValidationMessage('pattern');
+        }
+        // Email check
+        else if (this.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+            this.isValid = false;
+            this.validationMessage = getValidationMessage('email');
+        }
+        // Number range check
+        else if (this.type === 'number' && value) {
+            const numValue = parseFloat(value);
+            if (this.min !== undefined && numValue < this.min) {
+                this.isValid = false;
+                this.validationMessage = getValidationMessage('min', { min: this.min });
+            }
+            else if (this.max !== undefined && numValue > this.max) {
+                this.isValid = false;
+                this.validationMessage = getValidationMessage('max', { max: this.max });
+            }
+        }
+        // Update component state
+        this.internalStatus = this.isValid ? 'default' : 'error';
+        this.internalErrorMessage = this.validationMessage;
+    }
+    hasSlotContent(slotName) {
+        return checkSlotContent(this.el, slotName);
+    }
+    getDefaultIconForType() {
+        return defaultIcons[this.type];
+    }
+    render() {
+        const inputId = this._id + '-input' || this.name;
+        const { base, inputClass } = this.styleClass({
+            size: this.size,
+            status: this.internalStatus,
+            fullWidth: this.fullWidth,
+            disabled: this.disabled,
+            focused: this.isFocused,
+        });
+        const iconSize = {
+            small: 14,
+            medium: 16,
+            large: 18,
+        }[this.size];
+        return (h("div", { key: '2d734e68473e991fa5bf264a000387a7e8c6d806', class: "bcm-ui-element" }, this.label && (h("label", { key: 'ed2362eae0dbedb6ab360d8c8e437a3ca282b0ea', class: classNames('input-label font-medium', {
+                'text-color-label': !this.disabled,
+                'text-color-disabled': this.disabled,
+            }, {
+                'text-size-3': this.size === 'small',
+                'text-size-4': this.size === 'medium',
+                'text-size-5': this.size === 'large',
+            }), htmlFor: inputId }, h("slot", { key: '9ef244524cbe01412d7860c4bb1842f8d3b58fdd', name: "label" }, this.label), this.required && h("span", { key: '411c0522038e0dba40bc2b335c5298dd1e538fcc' }, "*"))), h("div", { key: '567dbda203fba555203af092175165b32282c98b', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: 'cc1073ccc66a13fb0bd8a21fcd5507755a2985a4', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: '10af5ceee34923e96229b1c0cb3acfc82c042fbe', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: iconSize })), h("slot", { key: '64677d561c6b8b909f3332c831c780c8213b192f', name: "prefix" }))), h("input", { key: 'e1cf6364100bb073b20fc7d0989e8d92c9dc41e8', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: 'a3b5e1bd54d8c4a326c71e0f6a955fcbeeec9723', class: "flex items-center gap-2 px-2" }, h("slot", { key: 'a90f3f8ccb5f82f85f726c714aa1a4f70c1fcecd', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: '6551bd6154e1f15906dfc098362d8f3269bda7f2', class: "suffix-icon", "icon-name": this.suffixIcon, size: iconSize })))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '1d34fb86e2637d52ed5500e1a1906023fb084c78', class: classNames('input-caption-text font-regular mt-1', {
+                'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
+                'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
+                'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',
+                'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',
+                'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',
+                'text-[--bcm-ui-color-text-disabled]': this.disabled,
+            }, {
+                'text-size-3': this.size === 'small',
+                'text-size-4': this.size === 'medium',
+                'text-size-5': this.size === 'large',
+            }) }, !this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText))));
+    }
+    static get is() { return "bcm-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "_id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input id"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": true,
+                "defaultValue": "generateId('input')"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "InputSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::InputSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the input size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputStatus",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "InputStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::InputStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the input's status/state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full width input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full-width",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputType",
+                    "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\"",
+                    "references": {
+                        "InputType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/input/types.ts::InputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML input type"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is required"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input autocomplete attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autocomplete",
+                "reflect": false
+            },
+            "minLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Min length for text input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-length",
+                "reflect": false
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Max length for text input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-length",
+                "reflect": false
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Min value for number input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Max value for number input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Step value for number input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "step",
+                "reflect": false
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Pattern for validation"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "pattern",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message to display"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "captionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Caption text to display below input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "caption-text",
+                "reflect": false
+            },
+            "labelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of associated label element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "labelledby",
+                "reflect": false
+            },
+            "describedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of associated caption/error text element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "describedby",
+                "reflect": false
+            },
+            "prefixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix icon class name"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "prefix-icon",
+                "reflect": false
+            },
+            "suffixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Suffix icon class name"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "suffix-icon",
+                "reflect": false
+            },
+            "useNativeValidation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to use native form validation\nIf false, component will handle validation internally"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "use-native-validation",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "validator": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: string) => string | undefined",
+                    "resolved": "(value: string) => string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom validation function"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "validationMessage": {},
+            "isValid": {},
+            "internalStatus": {},
+            "internalErrorMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmInput",
+                "name": "bcmInput",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "InputEvent",
+                    "resolved": "InputEvent",
+                    "references": {
+                        "InputEvent": {
+                            "location": "global",
+                            "id": "global::InputEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmChange",
+                "name": "bcmChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Event",
+                    "resolved": "Event",
+                    "references": {
+                        "Event": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "node_modules::Event"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmFocus",
+                "name": "bcmFocus",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmBlur",
+                "name": "bcmBlur",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmKeyDown",
+                "name": "bcmKeyDown",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmKeyUp",
+                "name": "bcmKeyUp",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KeyboardEvent",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "select": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setLocale": {
+                "complexType": {
+                    "signature": "(locale: string, messages: Record<string, string>) => Promise<void>",
+                    "parameters": [{
+                            "name": "locale",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "messages",
+                            "type": "{ [x: string]: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets locale and messages for all inputs",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "status",
+                "methodName": "watchStatus"
+            }, {
+                "propName": "errorMessage",
+                "methodName": "watchErrorMessage"
+            }];
+    }
+}
+//# sourceMappingURL=input.component.js.map