@postnord/web-components/collection/components/feedback/pn-spinner/pn-spinner.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { h, Host } from "@stencil/core";
/** Display a spinner to indicate a loading state. */
export class PnSpinner {
    constructor() {
        this.light = false;
        this.size = 1.5;
    }
    hostElement;
    getColor() {
        if (this.light)
            return '#fff';
        return '#005d92';
    }
    getSize() {
        return `${this.size}em`;
    }
    render() {
        return (h(Host, { key: '70929226e52cdda66312d599b0f8d4c83e902263' }, h("svg", { key: '0e4a3843737f29304996b5eb81b772b904f2d1c7', class: "pn-spinner", style: { '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: '09d5ab69786a82fa44fc8b62aeb00b93ae4e8c0d', class: "pn-spinner-circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { key: 'de94ea674640b278406a32486d8dbac3ebaec156', class: "pn-spinner-dot", cx: "21.3", cy: "16", r: "1.48" }))));
    }
    static get is() { return "pn-spinner"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-spinner.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-spinner.css"]
        };
    }
    static get properties() {
        return {
            "light": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Light version of the spinner."
                },
                "attribute": "light",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size in em."
                },
                "attribute": "size",
                "reflect": false,
                "defaultValue": "1.5"
            }
        };
    }
    static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-spinner.js.map