import { h } from "@stencil/core";
/**
 * Skeleton 骨架屏组件
 * 在需要等待加载数据的内容位置提供一个占位图形组合
 */
export class Skeleton {
    /** 是否展示动画效果 */
    active = false;
    /** 占位段落行数 */
    rows = 3;
    /** 为 true 时显示骨架，为 false 时直接渲染子内容 */
    loading = true;
    /** 是否显示头像占位图 */
    avatar = false;
    /** 是否显示标题占位图 */
    showTitle = true;
    /** 是否显示段落占位图 */
    paragraph = true;
    renderAvatar() {
        return h("div", { class: "hb-skeleton__avatar" });
    }
    renderTitle() {
        return h("div", { class: "hb-skeleton__title" });
    }
    renderParagraph() {
        const count = Math.max(1, this.rows);
        const rowsArr = Array.from({ length: count }, (_, i) => i);
        return (h("ul", { class: "hb-skeleton__paragraph" }, rowsArr.map((i) => {
            // 最后一行宽度收窄，更贴近真实段落排版
            const isLast = i === count - 1;
            return h("li", { class: { 'hb-skeleton__row': true, 'hb-skeleton__row--short': isLast } });
        })));
    }
    render() {
        // loading=false 时直接透传子内容
        if (!this.loading) {
            return (h("div", { class: "hb-skeleton" }, h("slot", null)));
        }
        return (h("div", { class: { 'hb-skeleton': true, 'hb-skeleton--active': this.active } }, this.avatar && h("div", { class: "hb-skeleton__header" }, this.renderAvatar()), h("div", { class: "hb-skeleton__content" }, this.showTitle && this.renderTitle(), this.paragraph && this.renderParagraph())));
    }
    static get is() { return "hb-skeleton"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["skeleton.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["skeleton.css"]
        };
    }
    static get properties() {
        return {
            "active": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u5C55\u793A\u52A8\u753B\u6548\u679C"
                },
                "getter": false,
                "setter": false,
                "attribute": "active",
                "reflect": false,
                "defaultValue": "false"
            },
            "rows": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5360\u4F4D\u6BB5\u843D\u884C\u6570"
                },
                "getter": false,
                "setter": false,
                "attribute": "rows",
                "reflect": false,
                "defaultValue": "3"
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u4E3A true \u65F6\u663E\u793A\u9AA8\u67B6\uFF0C\u4E3A false \u65F6\u76F4\u63A5\u6E32\u67D3\u5B50\u5185\u5BB9"
                },
                "getter": false,
                "setter": false,
                "attribute": "loading",
                "reflect": false,
                "defaultValue": "true"
            },
            "avatar": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE"
                },
                "getter": false,
                "setter": false,
                "attribute": "avatar",
                "reflect": false,
                "defaultValue": "false"
            },
            "showTitle": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE"
                },
                "getter": false,
                "setter": false,
                "attribute": "show-title",
                "reflect": false,
                "defaultValue": "true"
            },
            "paragraph": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u6BB5\u843D\u5360\u4F4D\u56FE"
                },
                "getter": false,
                "setter": false,
                "attribute": "paragraph",
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
}
//# sourceMappingURL=Skeleton.js.map
