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: '94e23125afe0b480df20b8dc9e1f73d7dfec9dcf' }, h("div", { key: '7c4c9fba988da7535c632bcae584df1997b15cdc', "aria-busy": "true", "aria-hidden": "true", class: Object.assign({ 'digi-loader-skeleton': true }, this.cssModifiers) }, this.afVariation === LoaderSkeletonVariation.HEADER && (h("div", { key: 'c1a86951c9883b5e7fed74ed7d9455a27239b463', class: "digi-loader-skeleton__item digi-loader-skeleton__item--header" })), this.afVariation === LoaderSkeletonVariation.LINE && (h("div", { key: '15e228e4eb1b49f6b2dd54685dd86760ae549c17', 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: 'c0ea93a7df8b8baa3869344b9b08d333b90131f3', 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: 'ba3a19e4654c0f3025878a4df1e4c3dcf97b3cee', class: "digi-loader-skeleton__item digi-loader-skeleton__item--circle" })), this.afVariation === LoaderSkeletonVariation.ROUNDED && (h("div", { key: '41dc0d82672470964bcf242e1cf6a0fdf105d310', 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"; }
}
