'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-f6e770c8.js');
const helpers = require('./helpers-987f948e.js');

const styleCss$2 = "x-container,x-col{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}x-row,x-col{text-align:inherit}";
const XColStyle0 = styleCss$2;

const XGridColumn = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.size = undefined;
        this.order = undefined;
        this.offset = undefined;
        this.align = undefined;
        this.auto = undefined;
        this.sizeSm = undefined;
        this.sizeMd = undefined;
        this.sizeLg = undefined;
        this.sizeXl = undefined;
        this.orderSm = undefined;
        this.orderMd = undefined;
        this.orderLg = undefined;
        this.orderXl = undefined;
        this.offsetSm = undefined;
        this.offsetMd = undefined;
        this.offsetLg = undefined;
        this.offsetXl = undefined;
        this.alignSm = undefined;
        this.alignMd = undefined;
        this.alignLg = undefined;
        this.alignXl = undefined;
        this.paddingGutterBase = undefined;
        this.paddingGutterSm = undefined;
        this.paddingGutterMd = undefined;
        this.paddingGutterLg = undefined;
        this.paddingGutterXl = undefined;
    }
    async setPaddingGutters(size, type = 'base') {
        switch (type) {
            case 'sm':
                this.paddingGutterSm = size;
                break;
            case 'md':
                this.paddingGutterMd = size;
                break;
            case 'lg':
                this.paddingGutterLg = size;
                break;
            case 'xl':
                this.paddingGutterXl = size;
                break;
            default: this.paddingGutterBase = size;
        }
    }
    /**
     * Render component
     */
    render() {
        return index.h(index.Host, { key: '91ce36af75b8d50476edb4e7f24b3f991d9696f4', class: helpers.cls(this.size ? `col-${this.size}` : 'col', this.sizeSm && `col-sm-${this.sizeSm}`, this.sizeMd && `col-md-${this.sizeMd}`, this.sizeLg && `col-lg-${this.sizeLg}`, this.sizeXl && `col-xl-${this.sizeXl}`, this.order && `order-${this.order}`, this.orderSm && `order-sm-${this.orderSm}`, this.orderMd && `order-md-${this.orderMd}`, this.orderLg && `order-lg-${this.orderLg}`, this.orderXl && `order-xl-${this.orderXl}`, this.offset && `offset-${this.offset}`, this.offsetSm && `offset-sm-${this.offsetSm}`, this.offsetMd && `offset-md-${this.offsetMd}`, this.offsetLg && `offset-lg-${this.offsetLg}`, this.offsetXl && `offset-xl-${this.offsetXl}`, this.align && `align-self-${this.align}`, this.alignSm && `align-self-sm-${this.alignSm}`, this.alignMd && `align-self-md-${this.alignMd}`, this.alignLg && `align-self-lg-${this.alignLg}`, this.alignXl && `align-self-xl-${this.alignXl}`, this.paddingGutterBase && `px-${this.paddingGutterBase}`, this.paddingGutterSm && `px-sm-${this.paddingGutterSm}`, this.paddingGutterMd && `px-md-${this.paddingGutterMd}`, this.paddingGutterLg && `px-lg-${this.paddingGutterLg}`, this.paddingGutterXl && `px-xl-${this.paddingGutterXl}`, { 'col-auto': this.size === 'auto' || this.auto }) }, index.h("slot", { key: '5e3d949b7bab0b38ab9833caed541fde33c01acf' }));
    }
};
XGridColumn.style = XColStyle0;

const styleCss$1 = "x-container,x-col{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}x-row,x-col{text-align:inherit}";
const XContainerStyle0 = styleCss$1;

const XGridContainer = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.break = undefined;
    }
    /**
     * Render component
     */
    render() {
        return index.h(index.Host, { key: 'c4709b8c1069cc4b1b7e0f20c0337098a671a59d', class: helpers.cls(this.break ? `container-${this.break}` : 'container') }, index.h("slot", { key: '93fd511b9e2f0befcc7c249d2bd8ead15d3a08d1' }));
    }
};
XGridContainer.style = XContainerStyle0;

const styleCss = "x-container,x-col{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}x-row,x-col{text-align:inherit}";
const XRowStyle0 = styleCss;

const XGridRow = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.gutter = undefined;
        this.cols = undefined;
        this.align = undefined;
        this.justify = undefined;
        this.gutterSm = undefined;
        this.gutterMd = undefined;
        this.gutterLg = undefined;
        this.gutterXl = undefined;
        this.colsSm = undefined;
        this.colsMd = undefined;
        this.colsLg = undefined;
        this.colsXl = undefined;
        this.alignSm = undefined;
        this.alignMd = undefined;
        this.alignLg = undefined;
        this.alignXl = undefined;
        this.justifySm = undefined;
        this.justifyMd = undefined;
        this.justifyLg = undefined;
        this.justifyXl = undefined;
    }
    /**
     * Watch gutters property changes for update child items padding
     */
    onGuttersPropertyChange() {
        this.updateChildsElements();
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        this.updateChildsElements();
    }
    /**
     * Update child classes of item
     */
    updateChildsElements() {
        Array.from(this.el.children)
            .filter(el => el.nodeName.toLowerCase() === 'x-col')
            .map((el) => {
            this.gutter && el.setPaddingGutters(this.gutter);
            this.gutterSm && el.setPaddingGutters(this.gutterSm, 'sm');
            this.gutterMd && el.setPaddingGutters(this.gutterMd, 'md');
            this.gutterLg && el.setPaddingGutters(this.gutterLg, 'lg');
            this.gutterXl && el.setPaddingGutters(this.gutterXl, 'xl');
        });
    }
    /**
     * Render component
     */
    render() {
        return index.h(index.Host, { key: '5294d4298168fc43a26ffc088d8bd9ba1e838e27', class: helpers.cls('row', this.gutter && (this.gutter === '0' ? 'no-gutters' : `mx-n${this.gutter}`), this.gutterSm && `mx-sm-n${this.gutterSm}`, this.gutterMd && `mx-md-n${this.gutterMd}`, this.gutterLg && `mx-lg-n${this.gutterLg}`, this.gutterXl && `mx-xl-n${this.gutterXl}`, this.cols && `row-cols-${this.cols}`, this.colsSm && `row-cols-sm-${this.colsSm}`, this.colsMd && `row-cols-md-${this.colsMd}`, this.colsLg && `row-cols-lg-${this.colsLg}`, this.colsXl && `row-cols-xl-${this.colsXl}`, this.align && `align-items-${this.align}`, this.alignSm && `align-items-sm-${this.alignSm}`, this.alignMd && `align-items-md-${this.alignMd}`, this.alignLg && `align-items-lg-${this.alignLg}`, this.alignXl && `align-items-xl-${this.alignXl}`, this.justify && `justify-content-${this.justify}`, this.justifySm && `justify-content-sm-${this.justifySm}`, this.justifyMd && `justify-content-md-${this.justifyMd}`, this.justifyLg && `justify-content-lg-${this.justifyLg}`, this.justifyXl && `justify-content-xl-${this.justifyXl}`) }, index.h("slot", { key: '3c9db17a9ee482aa6d8cdca3c9f81e3e9579e1ec' }));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "gutters": ["onGuttersPropertyChange"],
        "guttersSm": ["onGuttersPropertyChange"],
        "guttersMd": ["onGuttersPropertyChange"],
        "guttersLg": ["onGuttersPropertyChange"],
        "guttersXl": ["onGuttersPropertyChange"]
    }; }
};
XGridRow.style = XRowStyle0;

exports.x_col = XGridColumn;
exports.x_container = XGridContainer;
exports.x_row = XGridRow;
