import { h } from '@stencil/core';
export class Layout {
    constructor() {
        this.gridGap = '0px';
        this.cellWidth = '230px';
        this.cellHeight = '210px';
        this.paddingStyle = '0 0 0 0';
    }
    componentDidLoad() {
        this.class = this.host.className;
        if (this.host.querySelectorAll('header').length) {
            this.host.querySelectorAll('header').item(0).className += ' header';
        }
        if (this.host.querySelectorAll('aside').length) {
            this.host.querySelectorAll('aside').item(0).className += ' sidebar';
        }
        if (this.host.querySelectorAll('article').length) {
            this.host.querySelectorAll('article').item(0).className += ' content';
        }
        if (this.host.querySelectorAll('footer').length) {
            this.host.querySelectorAll('footer').item(0).className += ' footer';
        }
        this.host.querySelectorAll('.ema-layout-wrapper').item(0)['style'].gridGap = this.gridGap;
        let divs = this.host.querySelectorAll('.ema-layout-wrapper > *'), i;
        for (i = 0; i < divs.length; ++i) {
            divs[i]['style']['padding'] = this.paddingStyle;
        }
        if (this.class.match('layout-grid-fill')) {
            let wrapper = this.host.getElementsByClassName('ema-layout-wrapper')[0];
            wrapper['style'].gridTemplateColumns = 'repeat(auto-fill, minmax(' + this.cellWidth + ', 1fr))';
            wrapper['style'].gridAutoRows = ' minmax(' + this.cellHeight + ', auto)';
            // for (i = 0; i < divs.length; ++i) {
            //     divs[i]['style'].width = this.cellWidth;
            //     divs[i]['style'].height = this.cellHeight;
            // }
        }
    }
    render() {
        return (h("div", { class: "ema-layout-wrapper" },
            h("slot", null),
            h("slot", null)));
    }
    static get is() { return "ema-layout"; }
    static get originalStyleUrls() { return {
        "$": ["layout.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["layout.css"]
    }; }
    static get properties() { return {
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": false
        },
        "gridGap": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "grid-gap",
            "reflect": false,
            "defaultValue": "'0px'"
        },
        "cellWidth": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "cell-width",
            "reflect": false,
            "defaultValue": "'230px'"
        },
        "cellHeight": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "cell-height",
            "reflect": false,
            "defaultValue": "'210px'"
        },
        "paddingStyle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "padding-style",
            "reflect": false,
            "defaultValue": "'0 0 0 0'"
        }
    }; }
    static get elementRef() { return "host"; }
}
