import { h } from "@stencil/core";
export class TypingIndicator {
    constructor() {
        /** Size of dots in pixels (e.g., 8 = 8px) */
        this.size = 10;
        /** Color of dots (any valid CSS color) */
        this.color = "#4e7becc0"; // Tailwind blue-500
        /** Gap between dots in pixels */
        this.spacing = 6;
    }
    render() {
        const dotStyle = {
            width: `${this.size}px`,
            height: `${this.size}px`,
            backgroundColor: this.color,
            marginRight: `${this.spacing}px`,
        };
        return (h("div", { key: 'bd85182ca31ecc6d35c911a567daed098164ea59', class: "typing-indicator", role: "status", "aria-live": "polite", "aria-label": "Typing indicator" }, h("span", { key: '63c24fa73702c58e120f8be7f41829b9776c0fb4', class: "dot", style: Object.assign(Object.assign({}, dotStyle), { animationDelay: "0s" }) }), h("span", { key: '9dc45671673597a3e62d837a6bba1e91cf6597ef', class: "dot", style: Object.assign(Object.assign({}, dotStyle), { animationDelay: "0.2s" }) }), h("span", { key: '9c820b6f1255c932301c46c3d1abc51ff6d1dd87', class: "dot", style: Object.assign(Object.assign({}, dotStyle), { marginRight: "0", animationDelay: "0.4s" }) })));
    }
    static get is() { return "typing-indicator"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["typing-indicator.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["typing-indicator.css"]
        };
    }
    static get properties() {
        return {
            "size": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size of dots in pixels (e.g., 8 = 8px)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "10"
            },
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Color of dots (any valid CSS color)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color",
                "defaultValue": "\"#4e7becc0\""
            },
            "spacing": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Gap between dots in pixels"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "spacing",
                "defaultValue": "6"
            }
        };
    }
}
