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 XColStyle0 = styleCss;

const XGridColumn = /*@__PURE__*/ proxyCustomElement(class XGridColumn extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        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 h(Host, { key: 'a17a9d942c6fd8bcc8bc12f5988c0bb31353b7d6', class: 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 }) }, h("slot", { key: '04b6596b3a63bd433d375053d42602f92f304571' }));
    }
    static get style() { return XColStyle0; }
}, [4, "x-col", {
        "size": [1],
        "order": [1],
        "offset": [1],
        "align": [1],
        "auto": [4],
        "sizeSm": [1, "size-sm"],
        "sizeMd": [1, "size-md"],
        "sizeLg": [1, "size-lg"],
        "sizeXl": [1, "size-xl"],
        "orderSm": [1, "order-sm"],
        "orderMd": [1, "order-md"],
        "orderLg": [1, "order-lg"],
        "orderXl": [1, "order-xl"],
        "offsetSm": [1, "offset-sm"],
        "offsetMd": [1, "offset-md"],
        "offsetLg": [1, "offset-lg"],
        "offsetXl": [1, "offset-xl"],
        "alignSm": [1, "align-sm"],
        "alignMd": [1, "align-md"],
        "alignLg": [1, "align-lg"],
        "alignXl": [1, "align-xl"],
        "paddingGutterBase": [32],
        "paddingGutterSm": [32],
        "paddingGutterMd": [32],
        "paddingGutterLg": [32],
        "paddingGutterXl": [32],
        "setPaddingGutters": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-col"];
    components.forEach(tagName => { switch (tagName) {
        case "x-col":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XGridColumn);
            }
            break;
    } });
}

const XCol = XGridColumn;
const defineCustomElement = defineCustomElement$1;

export { XCol, defineCustomElement };
