import { Host, h } from "@stencil/core";
const DEFAULT_HEIGHTS = {
    text: "1em",
    circle: "25px",
    rectangle: "93px",
};
export class Skeleton {
    constructor() {
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * The variant of the skeleton that will be displayed.
         */
        this.variant = "rectangle";
    }
    render() {
        const { variant, theme, el } = this;
        const style = !el.firstElementChild
            ? {
                height: el.style.height || DEFAULT_HEIGHTS[variant],
                width: el.style.width || (variant === "circle" ? "25px" : "260px"),
            }
            : undefined;
        return (h(Host, { key: 'bc26af3bed291b88d9eba417aba8b1bd20d02071', class: {
                skeleton: true,
                "ic-skeleton-circle": variant === "circle",
                [`ic-theme-${theme}`]: theme !== "inherit",
            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'b7e19d9b7fc55069b1a5a3d82698378fb2a4fff4' })));
    }
    static get is() { return "ic-skeleton"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-skeleton.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-skeleton.css"]
        };
    }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSkeletonVariants",
                    "resolved": "\"circle\" | \"rectangle\" | \"text\" | undefined",
                    "references": {
                        "IcSkeletonVariants": {
                            "location": "import",
                            "path": "./ic-skeleton.types",
                            "id": "src/components/ic-skeleton/ic-skeleton.types.ts::IcSkeletonVariants"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The variant of the skeleton that will be displayed."
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "\"rectangle\""
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=ic-skeleton.js.map
