import { h } from "@stencil/core";
/**
 * Layout 布局组件
 * 通过基础的 24 分栏，迅速简便地创建布局
 */
export class Layout {
    /**
     * 栅格占据的列数
     * @default 24
     */
    span = 24;
    /**
     * 栅格左侧的间隔格数
     * @default 0
     */
    offset = 0;
    /**
     * 栅格向右移动格数
     * @default 0
     */
    push = 0;
    /**
     * 栅格向左移动格数
     * @default 0
     */
    pull = 0;
    /**
     * <768px 响应式栅格数或者栅格属性对象
     */
    xs;
    /**
     * ≥768px 响应式栅格数或者栅格属性对象
     */
    sm;
    /**
     * ≥992px 响应式栅格数或者栅格属性对象
     */
    md;
    /**
     * ≥1200px 响应式栅格数或者栅格属性对象
     */
    lg;
    /**
     * ≥1920px 响应式栅格数或者栅格属性对象
     */
    xl;
    getColClass() {
        const classes = ['hb-col'];
        if (this.span) {
            classes.push(`hb-col-${this.span}`);
        }
        if (this.offset) {
            classes.push(`hb-col-offset-${this.offset}`);
        }
        if (this.push) {
            classes.push(`hb-col-push-${this.push}`);
        }
        if (this.pull) {
            classes.push(`hb-col-pull-${this.pull}`);
        }
        return classes.join(' ');
    }
    render() {
        return (h("div", { key: 'fc06cef5bbbcb0c108907a16b5c96fe8dc9f4f77', class: this.getColClass() }, h("slot", { key: '9ca9f6e93df8c29dc901f84a39b3eed635b953bb' })));
    }
    static get is() { return "hb-layout"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["layout.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["layout.css"]
        };
    }
    static get properties() {
        return {
            "span": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "24"
                        }],
                    "text": "\u6805\u683C\u5360\u636E\u7684\u5217\u6570"
                },
                "getter": false,
                "setter": false,
                "attribute": "span",
                "reflect": false,
                "defaultValue": "24"
            },
            "offset": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "0"
                        }],
                    "text": "\u6805\u683C\u5DE6\u4FA7\u7684\u95F4\u9694\u683C\u6570"
                },
                "getter": false,
                "setter": false,
                "attribute": "offset",
                "reflect": false,
                "defaultValue": "0"
            },
            "push": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "0"
                        }],
                    "text": "\u6805\u683C\u5411\u53F3\u79FB\u52A8\u683C\u6570"
                },
                "getter": false,
                "setter": false,
                "attribute": "push",
                "reflect": false,
                "defaultValue": "0"
            },
            "pull": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "0"
                        }],
                    "text": "\u6805\u683C\u5411\u5DE6\u79FB\u52A8\u683C\u6570"
                },
                "getter": false,
                "setter": false,
                "attribute": "pull",
                "reflect": false,
                "defaultValue": "0"
            },
            "xs": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number | object",
                    "resolved": "number | object",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "<768px \u54CD\u5E94\u5F0F\u6805\u683C\u6570\u6216\u8005\u6805\u683C\u5C5E\u6027\u5BF9\u8C61"
                },
                "getter": false,
                "setter": false,
                "attribute": "xs",
                "reflect": false
            },
            "sm": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number | object",
                    "resolved": "number | object",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u2265768px \u54CD\u5E94\u5F0F\u6805\u683C\u6570\u6216\u8005\u6805\u683C\u5C5E\u6027\u5BF9\u8C61"
                },
                "getter": false,
                "setter": false,
                "attribute": "sm",
                "reflect": false
            },
            "md": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number | object",
                    "resolved": "number | object",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u2265992px \u54CD\u5E94\u5F0F\u6805\u683C\u6570\u6216\u8005\u6805\u683C\u5C5E\u6027\u5BF9\u8C61"
                },
                "getter": false,
                "setter": false,
                "attribute": "md",
                "reflect": false
            },
            "lg": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number | object",
                    "resolved": "number | object",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u22651200px \u54CD\u5E94\u5F0F\u6805\u683C\u6570\u6216\u8005\u6805\u683C\u5C5E\u6027\u5BF9\u8C61"
                },
                "getter": false,
                "setter": false,
                "attribute": "lg",
                "reflect": false
            },
            "xl": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number | object",
                    "resolved": "number | object",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u22651920px \u54CD\u5E94\u5F0F\u6805\u683C\u6570\u6216\u8005\u6805\u683C\u5C5E\u6027\u5BF9\u8C61"
                },
                "getter": false,
                "setter": false,
                "attribute": "xl",
                "reflect": false
            }
        };
    }
}
//# sourceMappingURL=Layout.js.map
