var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { MelodicComponent } from '@melodicdev/core';
import { textareaTemplate } from './textarea.template.js';
import { textareaStyles } from './textarea.styles.js';
/**
 * ml-textarea - Multi-line text input component
 *
 * @example
 * ```html
 * <ml-textarea label="Description" placeholder="Enter description"></ml-textarea>
 * <ml-textarea label="Bio" rows="5" max-length="500"></ml-textarea>
 * <ml-textarea label="Notes" auto-resize></ml-textarea>
 * ```
 *
 * @fires ml:input - Emitted on input
 * @fires ml:change - Emitted on change (blur)
 * @fires ml:focus - Emitted on focus
 * @fires ml:blur - Emitted on blur
 */
let TextareaComponent = class TextareaComponent {
    constructor() {
        /** Current value */
        this.value = '';
        /** Placeholder text */
        this.placeholder = '';
        /** Label text */
        this.label = '';
        /** Hint text shown below textarea */
        this.hint = '';
        /** Error message (shows error state when set) */
        this.error = '';
        /** Input size */
        this.size = 'md';
        /** Number of visible text lines */
        this.rows = 3;
        /** Maximum character length */
        this.maxLength = 0;
        /** Disable the textarea */
        this.disabled = false;
        /** Make textarea readonly */
        this.readonly = false;
        /** Mark as required */
        this.required = false;
        /** Allow vertical resize */
        this.resize = false;
        /** Internal focus state */
        this.focused = false;
        this.handleInput = (event) => {
            const target = event.target;
            this.value = target.value;
            this.elementRef.dispatchEvent(new CustomEvent('ml:input', {
                bubbles: true,
                composed: true,
                detail: { value: this.value }
            }));
        };
        this.handleChange = (event) => {
            const target = event.target;
            this.value = target.value;
            this.elementRef.dispatchEvent(new CustomEvent('ml:change', {
                bubbles: true,
                composed: true,
                detail: { value: this.value }
            }));
        };
        this.handleFocus = () => {
            this.focused = true;
            this.elementRef.dispatchEvent(new CustomEvent('ml:focus', {
                bubbles: true,
                composed: true
            }));
        };
        this.handleBlur = () => {
            this.focused = false;
            this.elementRef.dispatchEvent(new CustomEvent('ml:blur', {
                bubbles: true,
                composed: true
            }));
        };
    }
    onInit() {
        if (!this.label && this.placeholder) {
            this.elementRef.setAttribute('aria-label', this.placeholder);
        }
    }
};
TextareaComponent = __decorate([
    MelodicComponent({
        selector: 'ml-textarea',
        template: textareaTemplate,
        styles: textareaStyles,
        attributes: ['value', 'placeholder', 'label', 'hint', 'error', 'size', 'rows', 'max-length', 'disabled', 'readonly', 'required', 'resize']
    })
], TextareaComponent);
export { TextareaComponent };
