import { h, Host } from "@stencil/core";
import { BEM } from "../../utils/bem";
export class InputGroup {
    constructor() {
        /**
         * If `true` the component gets a invalid style.
         */
        this.invalid = false;
        /**
         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
         */
        this.disabled = false;
        /**
         * If `true` the element can not mutated, meaning the user can not edit the control.
         */
        this.readonly = false;
    }
    render() {
        const block = BEM.block('input-group');
        const dangerClass = 'is-danger';
        const hasDanger = this.invalid;
        const disabledClass = 'is-disabled';
        const hasDisabled = this.disabled || this.readonly;
        return (h(Host, { key: '4e70d05568802c062f5b9574eac4ec92d97ac802', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: '66341e0036de49d244c8d6350d46c9c6c3920d35' })));
    }
    static get is() { return "bal-input-group"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-input-group.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-input-group.css"]
        };
    }
    static get properties() {
        return {
            "invalid": {
                "type": "boolean",
                "attribute": "invalid",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the component gets a invalid style."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "attribute": "readonly",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the element can not mutated, meaning the user can not edit the control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "el"; }
}
