import { h } from "@stencil/core";
/**
 * Layout Row 组件
 * 行布局组件
 */
export class Row {
    /**
     * 栅格间距
     */
    gutter;
    /**
     * 布局模式，可选 flex，现代浏览器下有效
     * @default false
     */
    justify = 'start';
    /**
     * flex 布局下的垂直对齐方式
     */
    align = 'top';
    /**
     * 自定义元素标签
     * @default 'div'
     */
    tag = 'div';
    getGutterValue() {
        if (typeof this.gutter === 'number') {
            return this.gutter;
        }
        if (typeof this.gutter === 'object' && this.gutter !== null) {
            return this.gutter.xs || this.gutter.default || 0;
        }
        return 0;
    }
    render() {
        const gutter = this.getGutterValue();
        const Tag = this.tag;
        return (h(Tag, { key: 'e24936c60590569a21ee87a86c387fcc91c27cbc', class: {
                'hb-row': true,
                [`hb-row--justify-${this.justify}`]: true,
                [`hb-row--align-${this.align}`]: true,
            }, style: {
                '--hb-row-gutter': gutter ? `${gutter}px` : '0',
            } }, h("slot", { key: '32644828e97b7bfdb31e7aba4db3c16511ae8ad0' })));
    }
    static get is() { return "hb-row"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["row.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["row.css"]
        };
    }
    static get properties() {
        return {
            "gutter": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number | object",
                    "resolved": "number | object",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6805\u683C\u95F4\u8DDD"
                },
                "getter": false,
                "setter": false,
                "attribute": "gutter",
                "reflect": false
            },
            "justify": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'",
                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u5E03\u5C40\u6A21\u5F0F\uFF0C\u53EF\u9009 flex\uFF0C\u73B0\u4EE3\u6D4F\u89C8\u5668\u4E0B\u6709\u6548"
                },
                "getter": false,
                "setter": false,
                "attribute": "justify",
                "reflect": false,
                "defaultValue": "'start'"
            },
            "align": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'top' | 'middle' | 'bottom'",
                    "resolved": "\"bottom\" | \"middle\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "flex \u5E03\u5C40\u4E0B\u7684\u5782\u76F4\u5BF9\u9F50\u65B9\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "align",
                "reflect": false,
                "defaultValue": "'top'"
            },
            "tag": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "'div'"
                        }],
                    "text": "\u81EA\u5B9A\u4E49\u5143\u7D20\u6807\u7B7E"
                },
                "getter": false,
                "setter": false,
                "attribute": "tag",
                "reflect": false,
                "defaultValue": "'div'"
            }
        };
    }
}
//# sourceMappingURL=Row.js.map
