@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{height:var(--size);width:var(--size);display:block}pn-spinner svg{animation:rotate 1s infinite;display:block}pn-spinner svg .circle{stroke:#005d92;transform-origin:center center;transform:rotate(-310deg);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:64;animation:loading 2s infinite}pn-spinner svg .dot{fill:#005d92}pn-spinner.light .circle{stroke:#ffffff}pn-spinner.light .dot{fill:#ffffff}pn-spinner svg,pn-spinner svg .circle{animation-timing-function:cubic-bezier(0.5, 0, 0.5, 1)}@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; }
    render() {
        return (h(Host, { key: 'c3aefa642631aafc5356a6d07db7ef7b57b14857', class: this.light ? 'light' : '', style: { '--size': this.size + 'em' } }, h("svg", { key: 'bdb72cf0bf961bc9e8fcb66f47849025e5bc5481', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("circle", { key: '9fc2108ee526f4a743ed23f42ee31a2aaa1b6ddd', class: "circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }), h("circle", { key: 'aa7133f6a1752e8834d32e270c62b77e96049930', class: "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