import { h } from "@stencil/core";
export class EclButton {
    constructor() {
        this.styleClass = '';
        this.type = 'button';
        this.variant = '';
        this.size = 'l';
        this.hideLabel = false;
        this.indicator = false;
        this.indicatorValue = '';
        this.disabled = false;
        this.hasLabelContent = false;
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidLoad() {
        const dataAttrs = Object.keys(this.el.dataset);
        if (dataAttrs) {
            dataAttrs.forEach((attr) => {
                const button = this.el.querySelector('button');
                const attrValue = this.el.dataset[attr];
                if (attrValue === '' || attrValue === attr) {
                    button.dataset[attr] = attr;
                }
                else {
                    button.dataset[attr] = attrValue;
                }
                delete this.el.dataset[attr];
            });
        }
        const attributes = this.el.attributes;
        Array.from(attributes).forEach((attr) => {
            if (attr.name.startsWith('aria-')) {
                this.el.querySelector('button').setAttribute(attr.name, attr.value);
            }
        });
        if (this.el.getElementsByTagName('ecl-icon')[0] && this.el.querySelector('.ecl-icon')) {
            this.el.querySelector('.ecl-icon').classList.add('ecl-button__icon', `sc-ecl-button-${this.theme}`);
        }
    }
    getClass() {
        return [
            'ecl-button',
            this.variant ? `ecl-button--${this.variant}` : '',
            this.hideLabel ? 'ecl-button--icon-only' : '',
            this.buttonStyle ? `ecl-button--${this.buttonStyle}` : '',
            this.size !== 'l' ? `ecl-button--${this.size}` : '',
            this.styleClass,
        ].join(' ').trim();
    }
    get hasIconBefore() {
        return !!this.el.querySelector('[slot="icon-before"]');
    }
    get hasIconAfter() {
        return !!this.el.querySelector('[slot="icon-after"]');
    }
    render() {
        return (h("button", Object.assign({ key: '862f69aefd1d9ef105988f970157f9a456833161', class: this.getClass(), type: this.type, disabled: this.disabled }, (this.itemId && { id: this.itemId })), h("span", { key: 'e611c26f94bcff754f357347a8f37f8b3b9502d6', class: `ecl-button__container${this.containerExtraClasses ? ' ' + this.containerExtraClasses : ''}` }, this.hasIconBefore && !this.indicator && (h("slot", { key: '0d13e1c0e6d17f1ee416a8af44ff958ba272bc05', name: "icon-before" })), this.indicator && this.hasIconBefore && (h("span", { key: '3d4afe4ffbcabe7e9d25ccfadc110765e919bd92', class: "ecl-button__icon-container" }, h("slot", { key: '6e0340f7101e4208c079250f4c154ce4df210901', name: "icon-before" }), h("ecl-indicator", { key: 'd0ac04fdb55c703c9eba4eef7199fe52c9261cfd', value: this.indicatorValue }))), h("span", { key: 'e975567f52dd5c86570d42485e609e66984cb80d', class: "ecl-button__label", "data-ecl-label": true }, h("slot", { key: 'fc5d003cdccaa484aaf0e69403ed32094b92ae7b' })), this.hasIconAfter && !this.indicator && (h("slot", { key: '0d6879ebd7f1fd63382d7ce398c5264cc6a04ee0', name: "icon-after" })), this.indicator && this.hasIconAfter && (h("span", { key: '3979af369c8ef272afbfa7c6d114f5d20e586d10', class: "ecl-button__icon-container" }, h("slot", { key: '1d4d6a8f90fef58f27b860c4f2935b9350cdffce', name: "icon-after" }), h("ecl-indicator", { key: 'e8b17c3b1433f234f298a33c02451877901860f2', value: this.indicatorValue }))))));
    }
    static get is() { return "ecl-button"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-button-ec.css"],
            "eu": ["./build/styles/ecl-button-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-button-ec.css"],
            "eu": ["build/styles/ecl-button-eu.css"]
        };
    }
    static get properties() {
        return {
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class",
                "defaultValue": "''"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "'button'"
            },
            "buttonStyle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button-style"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "''"
            },
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "'l'"
            },
            "containerExtraClasses": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "container-extra-classes"
            },
            "hideLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hide-label",
                "defaultValue": "false"
            },
            "ariaControls": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-controls"
            },
            "itemId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "item-id"
            },
            "indicator": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "indicator",
                "defaultValue": "false"
            },
            "indicatorValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "indicator-value",
                "defaultValue": "''"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "hasLabelContent": {}
        };
    }
    static get elementRef() { return "el"; }
}
