import { h, Host } from "@stencil/core";
export class FieldControl {
    constructor() {
        /**
         * @deprecated
         * Baloise icon for the right side of the input
         */
        this.iconRight = '';
        /**
         * @deprecated
         * Baloise icon for the left side of the input
         */
        this.iconLeft = '';
        /**
         * If `true` on mobile devices the form control children are aligned verticaly and expanded to the full width
         */
        this.expandedOnMobile = undefined;
        /**
         * If `true` a loading spinner is visible at the end of the input
         */
        this.loading = false;
    }
    get buildIconLeftTemplate() {
        if (this.iconLeft) {
            return h("bal-icon", { name: this.iconLeft, color: "info", class: "is-left", size: "small" });
        }
        return '';
    }
    get buildIconRightTemplate() {
        if (this.iconRight) {
            return h("bal-icon", { name: this.iconRight, color: "info", class: "is-right", size: "small" });
        }
        return '';
    }
    render() {
        return (h(Host, { key: 'f2dbde868506b54d5b5e2fc14b5c29c417d42891', class: {
                'bal-field-control': true,
                'control': true,
                'has-icons-left': !!this.iconLeft,
                'has-icons-right': !!this.iconRight,
                'is-loading': this.loading,
                'bal-field-control--expanded-on-mobile': !!this.expandedOnMobile,
            } }, h("slot", { key: '274cd16bccefc825d85e4b1222da7c523a1aa937' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
    }
    static get is() { return "bal-field-control"; }
    static get encapsulation() { return "scoped"; }
    static get properties() {
        return {
            "iconRight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Baloise icon for the right side of the input"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon-right",
                "defaultValue": "''"
            },
            "iconLeft": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Baloise icon for the left side of the input"
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon-left",
                "defaultValue": "''"
            },
            "expandedOnMobile": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true` on mobile devices the form control children are aligned verticaly and expanded to the full width"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "expanded-on-mobile",
                "defaultValue": "undefined"
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` a loading spinner is visible at the end of the input"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "loading",
                "defaultValue": "false"
            }
        };
    }
}
