import { Host, h } from "@stencil/core";
const DEFAULT_HEIGHTS = {
    text: "1em",
    circle: "25px",
    rectangle: "93px",
};
const DEFAULT_WIDTHS = {
    text: "260px",
    circle: "25px",
    rectangle: "260px",
};
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 = "rectangle", theme, el } = this;
        let height = this.height;
        let width = this.width;
        if (variant === "circle") {
            if (height && !width) {
                width = height;
            }
            else if (width && !height) {
                height = width;
            }
        }
        const style = !el.firstElementChild
            ? {
                height: el.style.height || height || DEFAULT_HEIGHTS[variant],
                width: el.style.width || width || DEFAULT_WIDTHS[variant],
            }
            : undefined;
        return (h(Host, { key: 'a68ad9122c6ad09b2283f2d6168e6286c8c8157f', class: {
                skeleton: true,
                "ic-skeleton-circle": variant === "circle",
                [`ic-theme-${theme}`]: theme !== "inherit",
            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'a44bc7abbfb1f33581eec83e06556936ee410636' })));
    }
    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\""
            },
            "height": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Height of the skeleton. Accepts any valid CSS length (e.g. \"24px\", \"2rem\", \"100%\")."
                },
                "getter": false,
                "setter": false,
                "attribute": "height",
                "reflect": false
            },
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Width of the skeleton. Accepts any valid CSS length (e.g. \"24px\", \"2rem\", \"100%\")."
                },
                "getter": false,
                "setter": false,
                "attribute": "width",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=ic-skeleton.js.map
