bromcom-ui-next 0.1.3 → 0.1.4

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

@@ -0,0 +1,1013 @@
+import { h } from "@stencil/core";
+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 BcmTextarea {
+    constructor() {
+        this.isFocused = false;
+        this.isValid = true;
+        this.internalStatus = 'default';
+        /** Textarea value */
+        this.value = '';
+        /** Textarea rows */
+        this.rows = 3;
+        /** Resize behavior */
+        this.resize = 'none';
+        /** Auto grow height based on content */
+        this.autoGrow = false;
+        /** Input id */
+        this._id = generateId('textarea');
+        /** Controls the textarea size */
+        this.size = 'medium';
+        /** Defines the textarea's status/state */
+        this.status = 'default';
+        /** Full width textarea */
+        this.fullWidth = false;
+        /** Whether the textarea is disabled */
+        this.disabled = false;
+        /** Whether the textarea is readonly */
+        this.readonly = false;
+        /** Whether the textarea is required */
+        this.required = false;
+        /** Show character counter */
+        this.showCounter = true;
+        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-textarea bcm-textarea__container',
+                    'bg-[--bcm-ui-color-background-base-default]',
+                    'border border-solid rounded',
+                    'flex flex-col', // flex-col ekledik
+                    'transition-colors duration-200',
+                    'px-2 py-2',
+                    'w-full', // w-full ekledik
+                ],
+                textareaClass: [
+                    'textarea',
+                    'w-full',
+                    'border-0 outline-0 bg-transparent',
+                    'appearance-none',
+                    'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',
+                    'font-sans antialiased font-medium',
+                    'px-1',
+                    'overflow-y-auto', // overflow-y-auto ekledik
+                    'min-h-0', // min-h-0 ekledik
+                ],
+                counterText: ['textarea-counter-text', 'text-[--bcm-ui-color-text-placeholder]', 'text-right', 'mt-1'],
+            },
+            variants: {
+                size: {
+                    small: {
+                        base: '',
+                        textareaClass: 'text-size-4 min-h-[3rem]',
+                        counterText: 'text-size-3',
+                    },
+                    medium: {
+                        base: '',
+                        textareaClass: 'text-size-5 min-h-[4rem]',
+                        counterText: 'text-size-4',
+                    },
+                    large: {
+                        base: '',
+                        textareaClass: 'text-size-6 min-h-[5rem]',
+                        counterText: 'text-size-5',
+                    },
+                },
+                resize: {
+                    none: { textareaClass: '!resize-none' },
+                    both: { textareaClass: '!resize' },
+                    horizontal: { textareaClass: '!resize-x' },
+                    vertical: { textareaClass: '!resize-y' },
+                },
+                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: {
+                        base: 'disabled cursor-not-allowed opacity-50',
+                        textareaClass: '!resize-none', // disabled durumunda resize'ı engelle
+                    },
+                    false: '',
+                },
+                focused: {
+                    true: {
+                        base: 'ring-2 ring-[--bcm-ui-color-border-primary] ring-opacity-50',
+                    },
+                    false: '',
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                status: 'default',
+                resize: 'vertical',
+                fullWidth: false,
+                disabled: false,
+                focused: false,
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    handleValueChange(newValue) {
+        if (this.textareaRef) {
+            this.textareaRef.value = newValue;
+            if (this.autoGrow) {
+                this.adjustHeight();
+            }
+        }
+    }
+    watchStatus(newValue) {
+        this.internalStatus = newValue;
+    }
+    watchErrorMessage(newValue) {
+        this.internalErrorMessage = newValue;
+    }
+    componentWillLoad() {
+        setValidationMessages('en', defaultValidationMessages);
+        this.internalStatus = this.status;
+        this.internalErrorMessage = this.errorMessage;
+    }
+    componentDidLoad() {
+        var _a;
+        if (this.autoGrow) {
+            this.adjustHeight();
+            // Input event'ini dinle
+            (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.addEventListener('input', () => this.adjustHeight());
+        }
+    }
+    disconnectedCallback() {
+        // Event listener'ı temizle
+        if (this.autoGrow && this.textareaRef) {
+            this.textareaRef.removeEventListener('input', () => this.adjustHeight());
+        }
+    }
+    async setFocus() {
+        var _a;
+        (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    async setBlur() {
+        var _a;
+        (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    async select() {
+        var _a;
+        (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.select();
+    }
+    adjustHeight() {
+        if (!this.autoGrow || !this.textareaRef)
+            return;
+        requestAnimationFrame(() => {
+            // Önce height'ı sıfırla ki scrollHeight doğru hesaplansın
+            this.textareaRef.style.height = '0px';
+            const computedStyle = getComputedStyle(this.textareaRef);
+            const lineHeight = parseInt(computedStyle.lineHeight);
+            const paddingTop = parseInt(computedStyle.paddingTop);
+            const paddingBottom = parseInt(computedStyle.paddingBottom);
+            const scrollHeight = this.textareaRef.scrollHeight;
+            let newHeight = scrollHeight;
+            // Min/max kontrolleri
+            if (this.minRows) {
+                const minHeight = this.minRows * lineHeight + paddingTop + paddingBottom;
+                newHeight = Math.max(newHeight, minHeight);
+            }
+            if (this.maxRows) {
+                const maxHeight = this.maxRows * lineHeight + paddingTop + paddingBottom;
+                newHeight = Math.min(newHeight, maxHeight);
+            }
+            this.textareaRef.style.height = `${newHeight}px`;
+        });
+    }
+    validateInput() {
+        if (!this.textareaRef)
+            return;
+        // Reset validation state
+        this.isValid = true;
+        this.validationMessage = '';
+        const value = this.textareaRef.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
+        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 });
+        }
+        // Custom validator
+        if (this.validator) {
+            const customError = this.validator(value);
+            if (customError) {
+                this.isValid = false;
+                this.validationMessage = customError;
+            }
+        }
+        // Update component state
+        this.internalStatus = this.isValid ? 'default' : 'error';
+        this.internalErrorMessage = this.validationMessage;
+    }
+    render() {
+        const textareaId = this._id + '-textarea' || this.name;
+        const { base, textareaClass, counterText } = this.styleClass({
+            size: this.size,
+            status: this.internalStatus,
+            resize: this.resize,
+            fullWidth: this.fullWidth,
+            disabled: this.disabled,
+            focused: this.isFocused,
+        });
+        return (h("div", { key: '3b518823eafee23f5efb8fecdd1869cb0625f712', class: "bcm-ui-element" }, this.label && (h("label", { key: '17851980564ab95c9a1ac30fa494c3b4ef50f75b', class: classNames('textarea-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: textareaId }, h("slot", { key: '3a0c9c5d95ac3389f3d48d41577b88ee21dfb940', name: "label" }, this.label), this.required && h("span", { key: 'fd499a157c4ff22f17feaabcbe7c5a2d2d75e35b' }, "*"))), h("div", { key: '625e4a27c30495aaf39259e8ac68bc1d819fd506', class: base() }, h("textarea", { key: 'be30548713a724d4f535885c7b6838fb056d0b3d', ref: el => (this.textareaRef = el), id: textareaId, class: textareaClass(), name: this.name, rows: this.rows, cols: this.cols, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, minLength: this.minLength, maxLength: this.maxLength, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: event => {
+                const target = event.target;
+                this.value = target.value;
+                this.bcmInput.emit(event);
+                this.validateInput();
+                if (this.autoGrow) {
+                    this.adjustHeight();
+                }
+            }, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), this.showCounter && (h("div", { key: '1ebabb979efac47054160558fab66d4fccc603f9', class: counterText() }, this.value.length, this.maxLength ? `/${this.maxLength}` : ''))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '1c7f59c0d4337c7c359dc9aea3e332e5715bf80d', class: classNames('textarea-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-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["textarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Textarea value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Textarea rows"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rows",
+                "reflect": false,
+                "defaultValue": "3"
+            },
+            "cols": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Textarea cols"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "cols",
+                "reflect": false
+            },
+            "minRows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum height in rows"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-rows",
+                "reflect": false
+            },
+            "maxRows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height in rows"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-rows",
+                "reflect": false
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextareaResize",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {
+                        "TextareaResize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/textarea/types.ts::TextareaResize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resize behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "resize",
+                "reflect": false,
+                "defaultValue": "'none'"
+            },
+            "autoGrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto grow height based on content"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "auto-grow",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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('textarea')"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "InputSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/textarea/types.ts::InputSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the textarea 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/textarea/types.ts::InputStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the textarea'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 textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "full-width",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the textarea 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 textarea 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 textarea is required"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "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
+            },
+            "showCounter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show character counter"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-counter",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Textarea 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 textarea"
+                },
+                "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
+            },
+            "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": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "status",
+                "methodName": "watchStatus"
+            }, {
+                "propName": "errorMessage",
+                "methodName": "watchErrorMessage"
+            }];
+    }
+}
+//# sourceMappingURL=textarea.component.js.map