ghostfolio/node_modules/@rspack/dev-server/client/progress.js

/**
 * The following code is modified based on
 * https://github.com/webpack/webpack-dev-server
 *
 * MIT Licensed
 * Author Tobias Koppers @sokra
 * Copyright (c) JS Foundation and other contributors
 * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
 */
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
export function isProgressSupported() {
    return ('customElements' in self && Boolean(HTMLElement.prototype.attachShadow));
}
export function defineProgressElement() {
    if (customElements.get('wds-progress')) {
        return;
    }
    var WebpackDevServerProgress = /** @class */ (function (_super) {
        __extends(WebpackDevServerProgress, _super);
        function WebpackDevServerProgress() {
            var _this = _super.call(this) || this;
            _this.attachShadow({ mode: 'open' });
            _this.maxDashOffset = -219.99078369140625;
            _this.animationTimer = undefined;
            _this.type = 'circular';
            _this.initialProgress = 0;
            return _this;
        }
        WebpackDevServerProgress.prototype.reset = function () {
            var _a;
            clearTimeout(this.animationTimer);
            this.animationTimer = undefined;
            var typeAttr = (_a = this.getAttribute('type')) === null || _a === void 0 ? void 0 : _a.toLowerCase();
            this.type = typeAttr === 'circular' ? 'circular' : 'linear';
            var innerHTML = this.type === 'circular'
                ? WebpackDevServerProgress.circularTemplate()
                : WebpackDevServerProgress.linearTemplate();
            this.shadowRoot.innerHTML = innerHTML;
            var progressValue = this.getAttribute('progress');
            this.initialProgress = progressValue ? Number(progressValue) : 0;
            this.update(this.initialProgress);
        };
        WebpackDevServerProgress.circularTemplate = function () {
            return "\n        <style>\n        :host {\n            width: 200px;\n            height: 200px;\n            position: fixed;\n            right: 5%;\n            top: 5%;\n            pointer-events: none;\n            transition: opacity .25s ease-in-out;\n            z-index: 2147483645;\n        }\n\n        circle {\n            fill: #282d35;\n        }\n\n        path {\n            fill: rgba(0, 0, 0, 0);\n            stroke: rgb(186, 223, 172);\n            stroke-dasharray: 219.99078369140625;\n            stroke-dashoffset: -219.99078369140625;\n            stroke-width: 10;\n            transform: rotate(90deg) translate(0px, -80px);\n        }\n\n        text {\n            font-family: 'Open Sans', sans-serif;\n            font-size: 18px;\n            fill: #ffffff;\n            dominant-baseline: middle;\n            text-anchor: middle;\n        }\n\n        tspan#percent-super {\n            fill: #bdc3c7;\n            font-size: 0.45em;\n            baseline-shift: 10%;\n        }\n\n        @keyframes fade {\n            0% { opacity: 1; transform: scale(1); }\n            100% { opacity: 0; transform: scale(0); }\n        }\n\n        .disappear {\n            animation: fade 0.3s;\n            animation-fill-mode: forwards;\n            animation-delay: 0.5s;\n        }\n\n        .hidden {\n            display: none;\n        }\n        </style>\n        <svg id=\"progress\" class=\"hidden noselect\" viewBox=\"0 0 80 80\">\n        <circle cx=\"50%\" cy=\"50%\" r=\"35\"></circle>\n        <path d=\"M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0\"></path>\n        <text x=\"50%\" y=\"51%\">\n            <tspan id=\"percent-value\">0</tspan>\n            <tspan id=\"percent-super\">%</tspan>\n        </text>\n        </svg>\n      ";
        };
        WebpackDevServerProgress.linearTemplate = function () {
            return "\n        <style>\n        :host {\n            position: fixed;\n            top: 0;\n            left: 0;\n            pointer-events: none;\n            height: 4px;\n            width: 100vw;\n            z-index: 2147483645;\n        }\n\n        #bar {\n            width: 0%;\n            height: 4px;\n            background-color: rgb(186, 223, 172);\n        }\n\n        @keyframes fade {\n            0% { opacity: 1; }\n            100% { opacity: 0; }\n        }\n\n        .disappear {\n            animation: fade 0.3s;\n            animation-fill-mode: forwards;\n            animation-delay: 0.5s;\n        }\n\n        .hidden {\n            display: none;\n        }\n        </style>\n        <div id=\"progress\"></div>\n        ";
        };
        WebpackDevServerProgress.prototype.connectedCallback = function () {
            this.reset();
        };
        Object.defineProperty(WebpackDevServerProgress, "observedAttributes", {
            get: function () {
                return ['progress', 'type'];
            },
            enumerable: false,
            configurable: true
        });
        WebpackDevServerProgress.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
            if (name === 'progress') {
                this.update(Number(newValue));
            }
            else if (name === 'type') {
                this.reset();
            }
        };
        WebpackDevServerProgress.prototype.update = function (percent) {
            var shadowRoot = this.shadowRoot;
            var element = shadowRoot.querySelector('#progress');
            if (this.type === 'circular') {
                var path = shadowRoot.querySelector('path');
                var value = shadowRoot.querySelector('#percent-value');
                var offset = ((100 - percent) / 100) * this.maxDashOffset;
                path.style.strokeDashoffset = String(offset);
                value.textContent = String(percent);
            }
            else {
                element.style.width = "".concat(percent, "%");
            }
            if (percent >= 100) {
                this.hide();
            }
            else if (percent > 0) {
                this.show();
            }
        };
        WebpackDevServerProgress.prototype.show = function () {
            var shadowRoot = this.shadowRoot;
            var element = shadowRoot.querySelector('#progress');
            element.classList.remove('hidden');
        };
        WebpackDevServerProgress.prototype.hide = function () {
            var _this = this;
            var shadowRoot = this.shadowRoot;
            var element = shadowRoot.querySelector('#progress');
            if (this.type === 'circular') {
                element.classList.add('disappear');
                element.addEventListener('animationend', function () {
                    element.classList.add('hidden');
                    _this.update(0);
                }, { once: true });
            }
            else if (this.type === 'linear') {
                element.classList.add('disappear');
                this.animationTimer = setTimeout(function () {
                    element.classList.remove('disappear');
                    element.classList.add('hidden');
                    element.style.width = '0%';
                    _this.animationTimer = undefined;
                }, 800);
            }
        };
        return WebpackDevServerProgress;
    }(HTMLElement));
    customElements.define('wds-progress', WebpackDevServerProgress);
}