@postnord/web-components/components/pn-spinner2.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const pnSpinnerCss = "pn-spinner{display:inline-block}pn-spinner .pn-spinner{--pn-spinner-size:1.5em;--pn-spinner-color:main.$blue700;height:var(--pn-spinner-size);width:var(--pn-spinner-size);display:block;animation:rotate 1s infinite;animation-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-spinner .pn-spinner{animation-duration:2s}}pn-spinner .pn-spinner-circle{stroke:var(--pn-spinner-color);transform-origin:center center;transform:rotate(-310deg);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:64;animation:loading 2s infinite;animation-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-spinner .pn-spinner-circle{animation-duration:4s}}pn-spinner .pn-spinner-dot{fill:var(--pn-spinner-color)}@keyframes loading{0%{stroke-dashoffset:55}50%{stroke-dashoffset:12}100%{stroke-dashoffset:55}}@keyframes rotate{from{transform:rotate(-180deg) scaleX(-1)}to{transform:rotate(180deg) scaleX(-1)}}";
const PnSpinnerStyle0 = pnSpinnerCss;

const PnSpinner = /*@__PURE__*/ proxyCustomElement(class PnSpinner extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.light = false;
        this.size = 1.5;
    }
    get hostElement() { return this; }
    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 style() { return PnSpinnerStyle0; }
}, [0, "pn-spinner", {
        "light": [4],
        "size": [2]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-spinner"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-spinner":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnSpinner);
            }
            break;
    } });
}

export { PnSpinner as P, defineCustomElement as d };

//# sourceMappingURL=pn-spinner2.js.map