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 { inputTemplate } from './input.template.js';
import { inputStyles } from './input.styles.js';
/**
 * ml-input - Text input component with label, hint, and error states
 *
 * @example
 * ```html
 * <ml-input label="Email" type="email" placeholder="Enter email"></ml-input>
 * <ml-input label="Password" type="password" required></ml-input>
 * <ml-input label="Name" hint="Enter your full name"></ml-input>
 * <ml-input label="Username" error="Username is taken"></ml-input>
 * ```
 *
 * @slot prefix - Content before the input (icon, text)
 * @slot suffix - Content after the input (icon, button)
 *
 * @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 InputComponent = class InputComponent {
    constructor() {
        /** Input type */
        this.type = 'text';
        /** Current value */
        this.value = '';
        /** Placeholder text */
        this.placeholder = '';
        /** Label text */
        this.label = '';
        /** Hint text shown below input */
        this.hint = '';
        /** Error message (shows error state when set) */
        this.error = '';
        /** Input size */
        this.size = 'md';
        /** Disable the input */
        this.disabled = false;
        /** Make input readonly */
        this.readonly = false;
        /** Mark as required */
        this.required = false;
        /** Autocomplete attribute */
        this.autocomplete = 'off';
        /** 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() {
        // Set up aria-label if no label provided
        if (!this.label && this.placeholder) {
            this.elementRef.setAttribute('aria-label', this.placeholder);
        }
    }
};
InputComponent = __decorate([
    MelodicComponent({
        selector: 'ml-input',
        template: inputTemplate,
        styles: inputStyles,
        attributes: ['type', 'value', 'placeholder', 'label', 'hint', 'error', 'size', 'disabled', 'readonly', 'required', 'autocomplete']
    })
], InputComponent);
export { InputComponent };
