import { h } from "@stencil/core";
export class EclGrid {
    constructor() {
        this.styleClass = '';
        this.theme = 'ec';
        this.columns = 12;
        this.row = false;
        this.container = false;
    }
    getClass() {
        let styleClasses = [];
        if (this.row || this.container) {
            if (this.row) {
                styleClasses = [
                    `ecl-row`,
                    this.styleClass,
                ];
            }
            else {
                styleClasses = [
                    `ecl-container`,
                    this.styleClass,
                ];
            }
        }
        else {
            if (!this.breakpoint) {
                styleClasses = [
                    `ecl-col-${this.columns}`,
                    this.styleClass,
                ];
            }
            else {
                styleClasses = [
                    `ecl-col-${this.breakpoint}-${this.columns}`,
                    this.styleClass,
                ];
            }
        }
        return styleClasses.join(' ');
    }
    componentDidRender() {
        const parent = this.el.parentNode;
        while (this.el.firstChild)
            parent.insertBefore(this.el.firstChild, this.el);
        parent.removeChild(this.el);
    }
    render() {
        return (h("div", { key: '76cc7fe9582ba9058a7baca8e4d4666abe4a060d', class: this.getClass() }, h("slot", { key: '2c66223a5dd891653309a860ccb81137559bd6ff' })));
    }
    static get is() { return "ecl-grid"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-grid-ec.css"],
            "eu": ["./build/styles/ecl-grid-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-grid-ec.css"],
            "eu": ["build/styles/ecl-grid-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": "''"
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme",
                "defaultValue": "'ec'"
            },
            "columns": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "columns",
                "defaultValue": "12"
            },
            "breakpoint": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "breakpoint"
            },
            "row": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "row",
                "defaultValue": "false"
            },
            "container": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "container",
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "el"; }
}
