import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as cls } from './helpers.js';

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 = /*@__PURE__*/ proxyCustomElement(class XGridRow extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        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 h(Host, { key: '260ffb52dd60683bcd56bf376726e3b9dc24c8f2', class: 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}`) }, h("slot", { key: '8420c8db600cbd7f63eb683270f5f487adc59b28' }));
    }
    get el() { return this; }
    static get watchers() { return {
        "gutters": ["onGuttersPropertyChange"],
        "guttersSm": ["onGuttersPropertyChange"],
        "guttersMd": ["onGuttersPropertyChange"],
        "guttersLg": ["onGuttersPropertyChange"],
        "guttersXl": ["onGuttersPropertyChange"]
    }; }
    static get style() { return XRowStyle0; }
}, [4, "x-row", {
        "gutter": [1],
        "cols": [1],
        "align": [1],
        "justify": [1],
        "gutterSm": [1, "gutter-sm"],
        "gutterMd": [1, "gutter-md"],
        "gutterLg": [1, "gutter-lg"],
        "gutterXl": [1, "gutter-xl"],
        "colsSm": [1, "cols-sm"],
        "colsMd": [1, "cols-md"],
        "colsLg": [1, "cols-lg"],
        "colsXl": [1, "cols-xl"],
        "alignSm": [1, "align-sm"],
        "alignMd": [1, "align-md"],
        "alignLg": [1, "align-lg"],
        "alignXl": [1, "align-xl"],
        "justifySm": [1, "justify-sm"],
        "justifyMd": [1, "justify-md"],
        "justifyLg": [1, "justify-lg"],
        "justifyXl": [1, "justify-xl"]
    }, undefined, {
        "gutters": ["onGuttersPropertyChange"],
        "guttersSm": ["onGuttersPropertyChange"],
        "guttersMd": ["onGuttersPropertyChange"],
        "guttersLg": ["onGuttersPropertyChange"],
        "guttersXl": ["onGuttersPropertyChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-row"];
    components.forEach(tagName => { switch (tagName) {
        case "x-row":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XGridRow);
            }
            break;
    } });
}

const XRow = XGridRow;
const defineCustomElement = defineCustomElement$1;

export { XRow, defineCustomElement };
