/**
* 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 \n \n ";
};
WebpackDevServerProgress.linearTemplate = function () {
return "\n \n \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);
}