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)';
        }
    }
    render() {
        return (h("div", { class: "ema-layout-wrapper" },
            h("slot", null),
            h("slot", null)));
    }
    static get is() { return "ema-layout"; }
    static get properties() { return {
        "cellHeight": {
            "type": String,
            "attr": "cell-height"
        },
        "cellWidth": {
            "type": String,
            "attr": "cell-width"
        },
        "gridGap": {
            "type": String,
            "attr": "grid-gap"
        },
        "host": {
            "elementRef": true
        },
        "paddingStyle": {
            "type": String,
            "attr": "padding-style"
        },
        "type": {
            "type": String,
            "attr": "type"
        }
    }; }
    static get style() { return "/**style-placeholder:ema-layout:**/"; }
}
