import { h, Host } from "@stencil/core";
import { LoaderSkeletonVariation } from "./loader-skeleton-variation.enum";
/**
 *
 * @enums myEnum - loader-skeleton-myEnum.enum.ts
 *
 * @swedishName Platshållare
 */
export class LoaderSkeleton {
    constructor() {
        this.afCount = 4;
        this.afVariation = LoaderSkeletonVariation.LINE;
        this.isLoading = true;
    }
    get cssModifiers() {
        return {
            'digi-loader-skeleton--line': this.afVariation === LoaderSkeletonVariation.LINE,
            'digi-loader-skeleton--header': this.afVariation === LoaderSkeletonVariation.HEADER,
            'digi-loader-skeleton--text': this.afVariation === LoaderSkeletonVariation.TEXT,
            'digi-loader-skeleton--circle': this.afVariation === LoaderSkeletonVariation.CIRCLE,
            'digi-loader-skeleton--section': this.afVariation === LoaderSkeletonVariation.SECTION,
            'digi-loader-skeleton--rounded': this.afVariation === LoaderSkeletonVariation.ROUNDED
        };
    }
    render() {
        return (h(Host, { key: '286887bff51330c43bf4179355ea79c3d8376b29' }, h("div", { key: 'f61dfe3255772bcfaf9ea161843607efa5a4ef04', "aria-busy": "true", "aria-hidden": "true", class: Object.assign({ 'digi-loader-skeleton': true }, this.cssModifiers) }, this.afVariation === LoaderSkeletonVariation.HEADER && (h("div", { key: 'dac4a3c06fa8ff5555b017494b645f624f49ba6f', class: "digi-loader-skeleton__item digi-loader-skeleton__item--header" })), this.afVariation === LoaderSkeletonVariation.LINE && (h("div", { key: 'a306c0bb3a35a006bbd75dccb5ce9a4a6a57ac76', class: "digi-loader-skeleton__item digi-loader-skeleton__item--line" })), this.afVariation === LoaderSkeletonVariation.TEXT &&
            Array(this.afCount)
                .fill('')
                .map(() => {
                return (h("div", { class: "digi-loader-skeleton__item digi-loader-skeleton__item--text" }));
            }), this.afVariation === LoaderSkeletonVariation.SECTION && [
            h("div", { key: 'a3cc3bfa635c05bb5f9f42a4396145ff9b17febf', class: "digi-loader-skeleton__item digi-loader-skeleton__item--section-header" }),
            ...Array(this.afCount)
                .fill('')
                .map(() => (h("div", { class: "digi-loader-skeleton__item digi-loader-skeleton__item--section-text" })))
        ], this.afVariation === LoaderSkeletonVariation.CIRCLE && (h("div", { key: 'c1f3ad4d455a57791b75138c8f59e8dba4d96973', class: "digi-loader-skeleton__item digi-loader-skeleton__item--circle" })), this.afVariation === LoaderSkeletonVariation.ROUNDED && (h("div", { key: 'a96f732b59e3a36046edc1c75fdbef1dcf3bafab', class: "digi-loader-skeleton__item digi-loader-skeleton__item--rounded" })))));
    }
    static get is() { return "digi-loader-skeleton"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["loader-skeleton.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["loader-skeleton.css"]
        };
    }
    static get properties() {
        return {
            "afCount": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "sets the amount of lines of skeleton loader"
                        }],
                    "text": "S\u00E4tter antalet rader av skeleton loader"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-count",
                "reflect": false,
                "defaultValue": "4"
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`${LoaderSkeletonVariation}`",
                    "resolved": "\"circle\" | \"header\" | \"line\" | \"rounded\" | \"section\" | \"text\"",
                    "references": {
                        "LoaderSkeletonVariation": {
                            "location": "import",
                            "path": "./loader-skeleton-variation.enum",
                            "id": "src/components/_loader/loader-skeleton/loader-skeleton-variation.enum.ts::LoaderSkeletonVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the variation."
                        }],
                    "text": "S\u00E4tter varianten"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "LoaderSkeletonVariation.LINE"
            }
        };
    }
    static get states() {
        return {
            "isLoading": {}
        };
    }
    static get elementRef() { return "hostElement"; }
}
