import { Host, h } from "@stencil/core";
export class Spinner {
    static toPixelSize(size) {
        switch (size) {
            case 'xsmall': {
                return 16;
            }
            case 'small': {
                return 24;
            }
            case 'large': {
                return 60;
            }
            default: {
                return 48;
            }
        }
    }
    render() {
        const size = `${Spinner.toPixelSize(this.size)}px`;
        return (h(Host, { style: { height: size, width: size } },
            h("div", { class: "anj-fading-circle" },
                h("div", { class: "anj-circle1 anj-circle" }),
                h("div", { class: "anj-circle2 anj-circle" }),
                h("div", { class: "anj-circle3 anj-circle" }),
                h("div", { class: "anj-circle4 anj-circle" }),
                h("div", { class: "anj-circle5 anj-circle" }),
                h("div", { class: "anj-circle6 anj-circle" }),
                h("div", { class: "anj-circle7 anj-circle" }),
                h("div", { class: "anj-circle8 anj-circle" }),
                h("div", { class: "anj-circle9 anj-circle" }),
                h("div", { class: "anj-circle10 anj-circle" }),
                h("div", { class: "anj-circle11 anj-circle" }),
                h("div", { class: "anj-circle12 anj-circle" }))));
    }
    static get is() { return "anj-spinner"; }
    static get originalStyleUrls() { return {
        "$": ["spinner.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["spinner.css"]
    }; }
    static get properties() { return {
        "fixed": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "If true the spinner will load as a fixed element"
            },
            "attribute": "fixed",
            "reflect": true
        },
        "size": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'default' | 'xsmall' | 'small' | 'large'",
                "resolved": "\"default\" | \"large\" | \"small\" | \"xsmall\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The spinner size.\nPossible values are: `\"default\", \"xsmall\", \"small\", \"large\"`.\nThe default is \"large\"."
            },
            "attribute": "size",
            "reflect": true
        }
    }; }
}
