@peculiar/fortify-webcomponents/components/circular-progress.js

Web-components for creating CSR or Certificate and viewing certificates list using Fortify

/*!
 * © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
 */
import { proxyCustomElement, HTMLElement, h, Host, transformTag } from '@stencil/core/internal/client';

const circularProgressCss = () => `:host{display:block;width:100%}@-webkit-keyframes circular-rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes circular-rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes circular-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:100, 200;stroke-dashoffset:-15}to{stroke-dasharray:100, 200;stroke-dashoffset:-120}}@keyframes circular-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:100, 200;stroke-dashoffset:-15}to{stroke-dasharray:100, 200;stroke-dashoffset:-120}}.circle_progress{margin:0 auto}.circle_progress_svg{-webkit-animation:circular-rotate 1.4s linear infinite;animation:circular-rotate 1.4s linear infinite}.circle_progress_circle{stroke-linecap:round;-webkit-animation:circular-dash 1.4s ease-in-out infinite;animation:circular-dash 1.4s ease-in-out infinite;stroke-dasharray:80, 200;stroke-dashoffset:0;stroke:var(--pv-color-secondary)}.circle_progress_backdrop{stroke:var(--pv-color-gray-3)}`;

const CircularProgress = /*@__PURE__*/ proxyCustomElement(class CircularProgress extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        /**
         * Width/height of progress circle.
         */
        this.size = 24;
        /**
         * Stroke width of progress bar circle.
         */
        this.width = 4;
        this.box = 50;
    }
    render() {
        return (h(Host, { key: '0a7d6a83e20839fb324b3f24c7e8b1074775c6a3' }, h("div", { key: '88111c52129ca2806ab67f7862ccdbec0e55e68f', class: "circle_progress", style: {
                width: `${this.size}px`,
                height: `${this.size}px`,
            } }, h("svg", { key: '73b6d9ef7d0b5d09049f8b0c3477e633fa6ee8a3', class: "circle_progress_svg", viewBox: `0 0 ${this.box} ${this.box}` }, h("circle", { key: '764d4d27927cd961c84631ac2d9bf2d0ca3e542f', class: "circle_progress_backdrop", cx: this.box / 2, cy: this.box / 2, r: (this.box / 2) - 5, fill: "none", style: { strokeWidth: `${this.width}px` } }), h("circle", { key: 'b24985974a66d754514f5a82b06fa6e7cae77133', class: "circle_progress_circle", cx: this.box / 2, cy: this.box / 2, r: (this.box / 2) - 5, fill: "none", style: { strokeWidth: `${this.width}px` } })))));
    }
    static get style() { return circularProgressCss(); }
}, [257, "peculiar-circular-progress", {
        "size": [2],
        "width": [2]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["peculiar-circular-progress"];
    components.forEach(tagName => { switch (tagName) {
        case "peculiar-circular-progress":
            if (!customElements.get(transformTag(tagName))) {
                customElements.define(transformTag(tagName), CircularProgress);
            }
            break;
    } });
}

export { CircularProgress as C, defineCustomElement as d };
//# sourceMappingURL=circular-progress.js.map

//# sourceMappingURL=circular-progress.js.map