@syncfusion/ej2-progressbar
Version:
Essential JS 2 ProgressBar Component
1,291 lines (1,285 loc) • 180 kB
JavaScript
import { createElement, remove, Property, ChildProperty, Complex, Browser, Animation as Animation$1, animationMode, isNullOrUndefined, extend, EventHandler, Event, Collection, NotifyPropertyChanges, Component } from '@syncfusion/ej2-base';
import { PathOption, Tooltip, getElement as getElement$1, measureText, SvgRenderer } from '@syncfusion/ej2-svg-base';
var __extends = (undefined && undefined.__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 (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/**
* helper for progress bar
*/
/** @private */
var Rect = /** @__PURE__ @class */ (function () {
function Rect(x, y, height, width) {
this.x = x;
this.y = y;
this.height = height;
this.width = width;
}
return Rect;
}());
/** @private */
var Size = /** @__PURE__ @class */ (function () {
function Size(height, width) {
this.height = height;
this.width = width;
}
return Size;
}());
/** @private */
var Pos = /** @__PURE__ @class */ (function () {
function Pos(x, y) {
this.x = x;
this.y = y;
}
return Pos;
}());
/** @private */
var RectOption = /** @__PURE__ @class */ (function (_super) {
__extends(RectOption, _super);
function RectOption(id, fill, width, color, opacity, rect, rx, ry, transform, dashArray) {
var _this = _super.call(this, id, fill, width, color, opacity, dashArray) || this;
_this.y = rect.y;
_this.x = rect.x;
_this.height = rect.height;
_this.width = rect.width;
_this.rx = rx ? rx : 0;
_this.ry = ry ? ry : 0;
_this.transform = transform ? transform : '';
_this.stroke = (width !== 0 && _this.stroke !== '') ? color : 'transparent';
return _this;
}
return RectOption;
}(PathOption));
/** @private */
var ColorValue = /** @__PURE__ @class */ (function () {
function ColorValue(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
return ColorValue;
}());
/**
* Converts a color value to its hexadecimal representation.
*
* @param {ColorValue} value - The color value to convert.
* @returns {string} - The hexadecimal representation of the color.
* @private
*/
function convertToHexCode(value) {
return '#' + componentToHex(value.r) + componentToHex(value.g) + componentToHex(value.b);
}
/**
* Converts a color component value to its hexadecimal representation.
*
* @param {number} value - The color component value to convert.
* @returns {string} - The hexadecimal representation of the color component.
* @private
*/
function componentToHex(value) {
var hex = value.toString(16);
return hex.length === 1 ? '0' + hex : hex;
}
/**
* Converts a hexadecimal color code to a ColorValue.
*
* @param {string} hex - The hexadecimal color code to convert.
* @returns {ColorValue} - The ColorValue representing the color.
* @private
*/
function convertHexToColor(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? new ColorValue(parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)) :
new ColorValue(255, 255, 255);
}
/**
* Converts a color name to its corresponding hexadecimal representation.
*
* @param {string} color - The color name to convert.
* @returns {string} - The hexadecimal representation of the color.
* @private
*/
function colorNameToHex(color) {
color = color === 'transparent' ? 'white' : color;
document.body.appendChild(createElement('text', { id: 'chartmeasuretext' }));
var element = document.getElementById('chartmeasuretext');
element.style.color = color;
color = window.getComputedStyle(element).color;
remove(element);
var isRGBValue;
if (color.indexOf('rgb') === 0 || color.indexOf('hsl') === 0) {
color = color.replace(/\s/g, '').replace(/[()]/g, '');
isRGBValue = color.slice(3).split(',');
}
return convertToHexCode(new ColorValue(parseInt(isRGBValue[3], 10), parseInt(isRGBValue[4], 10), parseInt(isRGBValue[5], 10)));
}
/** @private */
var TextOption = /** @__PURE__ @class */ (function () {
function TextOption(id, fontSize, fontStyle, fontFamily, fontWeight, textAnchor, fill, x, y, width, height) {
this.id = id;
this['font-size'] = fontSize;
this['font-style'] = fontStyle;
this['font-family'] = fontFamily;
this['font-weight'] = fontWeight;
this['text-anchor'] = textAnchor;
this.fill = fill;
this.x = x;
this.y = y;
this.width = width ? width : 0;
this.height = height ? height : 0;
}
return TextOption;
}());
/**
* Converts polar coordinates (angle in degrees) to Cartesian coordinates.
*
* @param {number} centerX - The x-coordinate of the center point.
* @param {number} centerY - The y-coordinate of the center point.
* @param {number} radius - The radius from the center point.
* @param {number} angleInDegrees - The angle in degrees.
* @returns {Pos} - The Cartesian coordinates (x, y) corresponding to the given polar coordinates.
*/
function degreeToLocation(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * (Math.PI / 180);
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
/**
* Generates an SVG path arc string based on given parameters.
*
* @param {number} x - The x-coordinate of the center of the arc.
* @param {number} y - The y-coordinate of the center of the arc.
* @param {number} radius - The radius of the arc.
* @param {number} startAngle - The start angle of the arc in degrees.
* @param {number} endAngle - The end angle of the arc in degrees.
* @param {boolean} enableRtl - Indicates whether the drawing direction is right-to-left.
* @param {boolean} pieView - Indicates whether the arc should be drawn as a pie slice.
* @returns {string} - The SVG path arc string representing the arc.
*/
function getPathArc(x, y, radius, startAngle, endAngle, enableRtl, pieView) {
var start = degreeToLocation(x, y, radius, startAngle);
var end = degreeToLocation(x, y, radius, endAngle);
var largeArcFlag = '0';
var sweepFlag = (enableRtl) ? '0' : '1';
if (!enableRtl) {
largeArcFlag = ((endAngle >= startAngle) ? endAngle : endAngle + 360) - startAngle <= 180 ? '0' : '1';
}
else {
largeArcFlag = ((startAngle >= endAngle) ? startAngle : startAngle + 360) - endAngle <= 180 ? '0' : '1';
}
var d;
if (pieView) {
d = 'M ' + x + ' ' + y + ' L ' + start.x + ' ' + start.y + ' A ' + radius + ' ' +
radius + ' ' + ' 0 ' + ' ' + largeArcFlag + ' ' + sweepFlag + ' ' + end.x + ' ' + end.y + ' ' + 'Z';
}
else {
d = 'M' + start.x + ' ' + start.y +
'A' + radius + ' ' + radius + ' ' + '0' + ' ' + largeArcFlag + ' ' + sweepFlag + ' ' + end.x + ' ' + end.y;
}
return d;
}
/**
* Converts a string value to a number, considering the container size.
*
* @param {string} value - The string value to convert to a number.
* @param {number} containerSize - The size of the container to consider for relative values.
* @returns {number} - The converted number value.
* @private
*/
function stringToNumber(value, containerSize) {
if (value !== null && value !== undefined) {
return value.indexOf('%') !== -1 ? (containerSize / 100) * parseInt(value, 10) : parseInt(value, 10);
}
return null;
}
/**
* Sets attributes on an HTML element based on the provided options.
*
* @param {any} options - The options object containing attributes to set.
* @param {Element} element - The HTML element to set attributes on.
* @returns {Element} - The modified HTML element.
* @private
*/
function setAttributes(options, element) {
var keys = Object.keys(options);
for (var i = 0; i < keys.length; i++) {
element.setAttribute(keys[i], options[keys[i]]);
}
return element;
}
/**
* Calculates the effect value at a given time based on the start and end values, duration, and direction.
*
* @param {number} currentTime - The current time in milliseconds.
* @param {number} startValue - The start value of the effect.
* @param {number} endValue - The end value of the effect.
* @param {number} duration - The duration of the effect in milliseconds.
* @param {boolean} enableRtl - Indicates whether the effect direction is right-to-left.
* @returns {number} - The calculated effect value at the given time.
* @private
*/
function effect(currentTime, startValue, endValue, duration, enableRtl) {
var start = (enableRtl) ? endValue : -endValue;
var end = startValue + ((enableRtl) ? -endValue : endValue);
return start * Math.cos(currentTime / duration * (Math.PI / 2)) + end;
}
/**
* @private
*/
var annotationRender = 'annotationRender';
/**
* Retrieves an HTML element from the DOM by its ID.
*
* @param {string} id - The ID of the HTML element to retrieve.
* @returns {Element} - The HTML element with the specified ID.
* @private
*/
function getElement(id) {
return document.getElementById(id);
}
/**
* Removes an HTML element from the DOM.
*
* @param {string | Element} id - The ID of the HTML element or the element itself to remove.
* If provided as a string, it's assumed to be the ID of the element.
* @returns {void}
* @private
*/
function removeElement(id) {
if (!id) {
return null;
}
var element = typeof id === 'string' ? getElement(id) : id;
if (element) {
remove(element);
}
}
/**
* @private
*/
var ProgressLocation = /** @__PURE__ @class */ (function () {
function ProgressLocation(x, y) {
this.x = x;
this.y = y;
}
return ProgressLocation;
}());
var __extends$1 = (undefined && undefined.__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 (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/**
* progress bar complex interface
*/
var Margin = /** @__PURE__ @class */ (function (_super) {
__extends$1(Margin, _super);
function Margin() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(10)
], Margin.prototype, "top", void 0);
__decorate([
Property(10)
], Margin.prototype, "bottom", void 0);
__decorate([
Property(10)
], Margin.prototype, "left", void 0);
__decorate([
Property(10)
], Margin.prototype, "right", void 0);
return Margin;
}(ChildProperty));
/**
* Configures the fonts in progressbar
*/
var Font = /** @__PURE__ @class */ (function (_super) {
__extends$1(Font, _super);
function Font() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('Normal')
], Font.prototype, "fontStyle", void 0);
__decorate([
Property('16px')
], Font.prototype, "size", void 0);
__decorate([
Property('Normal')
], Font.prototype, "fontWeight", void 0);
__decorate([
Property('')
], Font.prototype, "color", void 0);
__decorate([
Property('Segoe UI')
], Font.prototype, "fontFamily", void 0);
__decorate([
Property(null)
], Font.prototype, "opacity", void 0);
__decorate([
Property('Far')
], Font.prototype, "textAlignment", void 0);
__decorate([
Property('')
], Font.prototype, "text", void 0);
return Font;
}(ChildProperty));
/**
* Animation
*/
var Animation = /** @__PURE__ @class */ (function (_super) {
__extends$1(Animation, _super);
function Animation() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], Animation.prototype, "enable", void 0);
__decorate([
Property(2000)
], Animation.prototype, "duration", void 0);
__decorate([
Property(0)
], Animation.prototype, "delay", void 0);
return Animation;
}(ChildProperty));
/**
* Annotation
*/
var ProgressAnnotationSettings = /** @__PURE__ @class */ (function (_super) {
__extends$1(ProgressAnnotationSettings, _super);
function ProgressAnnotationSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], ProgressAnnotationSettings.prototype, "content", void 0);
__decorate([
Property(0)
], ProgressAnnotationSettings.prototype, "annotationAngle", void 0);
__decorate([
Property('0%')
], ProgressAnnotationSettings.prototype, "annotationRadius", void 0);
return ProgressAnnotationSettings;
}(ChildProperty));
/**
* Configures the borders .
*/
var Border = /** @__PURE__ @class */ (function (_super) {
__extends$1(Border, _super);
function Border() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], Border.prototype, "color", void 0);
__decorate([
Property(1)
], Border.prototype, "width", void 0);
return Border;
}(ChildProperty));
/**
* Options to customize the tooltip for the progress bar.
*
* @default {}
*/
var TooltipSettings = /** @__PURE__ @class */ (function (_super) {
__extends$1(TooltipSettings, _super);
function TooltipSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], TooltipSettings.prototype, "enable", void 0);
__decorate([
Property(null)
], TooltipSettings.prototype, "fill", void 0);
__decorate([
Property(null)
], TooltipSettings.prototype, "format", void 0);
__decorate([
Property(false)
], TooltipSettings.prototype, "showTooltipOnHover", void 0);
__decorate([
Complex({ fontFamily: null, size: '12px', fontWeight: null, fontStyle: 'Normal', color: null }, Font)
], TooltipSettings.prototype, "textStyle", void 0);
__decorate([
Complex({ color: '#cccccc', width: 0.5 }, Border)
], TooltipSettings.prototype, "border", void 0);
return TooltipSettings;
}(ChildProperty));
/**
* RangeColor
*/
var RangeColor = /** @__PURE__ @class */ (function (_super) {
__extends$1(RangeColor, _super);
function RangeColor() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], RangeColor.prototype, "color", void 0);
__decorate([
Property(null)
], RangeColor.prototype, "start", void 0);
__decorate([
Property(null)
], RangeColor.prototype, "end", void 0);
return RangeColor;
}(ChildProperty));
/**
* Retrieves the theme color settings for a progress bar.
*
* @param {ProgressTheme} theme - The theme of the progress bar.
* @returns {IProgressStyle} - The style settings for the progress bar based on the theme.
* @private
*/
function getProgressThemeColor(theme) {
var style;
switch (theme) {
case 'Material':
style = {
linearTrackColor: '#E3165B',
linearProgressColor: '#E3165B',
circularTrackColor: '#E3165B',
circularProgressColor: '#E3165B',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 0.26,
bufferOpacity: 0.4,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: 4,
linearProgressThickness: 4,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#ffffff',
tooltipLightLabel: '#000000',
success: '#4caf50',
danger: '#ff6652',
warning: '#ff9800',
info: '#03a9f4',
tooltipLabelFont: {
color: 'rgba(249, 250, 251, 1)', fontFamily: 'Roboto', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#000000', fontStyle: 'Normal', fontFamily: 'Roboto'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#000000', fontStyle: 'Normal', fontFamily: 'Roboto'
}
};
break;
case 'Bootstrap':
style = {
linearTrackColor: '#EEEEEE',
linearProgressColor: '#317ab9',
circularTrackColor: '#EEEEEE',
circularProgressColor: '#317ab9',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.44,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: 20,
linearProgressThickness: 20,
circularTrackThickness: 6,
circularProgressThickness: 6,
tooltipFill: '#ffffff',
tooltipLightLabel: '#000000',
success: '#48b14c',
danger: '#d44f4f',
warning: '#fac168',
info: '#2aaac0',
tooltipLabelFont: {
color: '#F9FAFB', fontFamily: 'Helvetica Neue', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#000000', fontStyle: 'Normal', fontFamily: 'Helvetica Neue'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#000000', fontStyle: 'Normal', fontFamily: 'Helvetica Neue'
}
};
break;
case 'Bootstrap4':
style = {
linearTrackColor: '#E9ECEF',
linearProgressColor: '#007bff',
circularTrackColor: '#E9ECEF',
circularProgressColor: '#007bff',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.44,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: 16,
linearProgressThickness: 16,
circularTrackThickness: 6,
circularProgressThickness: 6,
tooltipFill: '#ffffff',
tooltipLightLabel: '#000000',
success: '#28a745',
danger: '#dc3545',
warning: '#ffc107',
info: '#17a2b8',
tooltipLabelFont: {
color: '#F9FAFB', fontFamily: 'Helvetica Neue', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#000000', fontStyle: 'Normal', fontFamily: 'Helvetica Neue'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#000000', fontStyle: 'Normal', fontFamily: 'Helvetica Neue'
}
};
break;
case 'HighContrast':
style = {
linearTrackColor: '#BFBFBF',
linearProgressColor: '#FFD939',
circularTrackColor: '#BFBFBF',
circularProgressColor: '#FFD939',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.35,
linearGapWidth: 2,
circularGapWidth: 4,
linearTrackThickness: 2,
linearProgressThickness: 2,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#ffffff',
tooltipLightLabel: '#000000',
success: '#2bc700',
danger: '#ff6161',
warning: '#ff7d1a',
info: '#66b0ff',
tooltipLabelFont: {
color: '#000000', fontFamily: 'Segoe UI', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Segoe UI'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Segoe UI'
}
};
break;
case 'Tailwind3':
style = {
linearTrackColor: '#E5E7EB',
linearProgressColor: '#4F46E5',
circularTrackColor: '#E5E7EB',
circularProgressColor: '#4F46E5',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.35,
bufferColor: '#818CF8',
linearGapWidth: 2,
circularGapWidth: 4,
linearTrackThickness: 2,
linearProgressThickness: 2,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#111827',
tooltipLightLabel: '#F9FAFB',
success: '#15803D',
danger: '#DC2626',
warning: '#C2410C',
info: '#0E7490',
tooltipLabelFont: {
color: '#F9FAFB', fontFamily: 'Inter', fontWeight: '500'
},
linearLabelFont: {
size: '10', fontWeight: '500', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Inter'
},
circularLabelFont: {
size: '10', fontWeight: '500', color: '#4F46E5', fontStyle: 'Normal', fontFamily: 'Inter'
}
};
break;
case 'Tailwind3Dark':
style = {
linearTrackColor: '#282F3C',
linearProgressColor: '#6366F1',
circularTrackColor: '#282F3C',
circularProgressColor: '#6366F1',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.45,
bufferColor: '#3730A3',
linearGapWidth: 2,
circularGapWidth: 4,
linearTrackThickness: 2,
linearProgressThickness: 2,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#F9FAFB',
tooltipLightLabel: '#1F2937',
success: '#22C55E',
danger: '#F87171',
warning: '#F97316',
info: '#38BDF8',
tooltipLabelFont: {
color: '#1F2937', fontFamily: 'Inter', fontWeight: '500'
},
linearLabelFont: {
size: '10', fontWeight: '500', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Inter'
},
circularLabelFont: {
size: '10', fontWeight: '500', color: '#6366F1', fontStyle: 'Normal', fontFamily: 'Inter'
}
};
break;
case 'Tailwind':
style = {
linearTrackColor: '#E5E7EB',
linearProgressColor: '#4F46E5',
circularTrackColor: '#E5E7EB',
circularProgressColor: '#4F46E5',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.35,
linearGapWidth: 2,
circularGapWidth: 4,
linearTrackThickness: 2,
linearProgressThickness: 2,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#ffffff',
tooltipLightLabel: '#000000',
success: '#15803D',
danger: '#DC2626',
warning: '#C2410C',
info: '#0E7490',
tooltipLabelFont: {
color: '#F9FAFB', fontFamily: 'Inter', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Inter'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Inter'
}
};
break;
case 'TailwindDark':
style = {
linearTrackColor: '#4B5563',
linearProgressColor: '#22D3EE',
circularTrackColor: '#4B5563',
circularProgressColor: '#22D3EE',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.45,
linearGapWidth: 2,
circularGapWidth: 4,
linearTrackThickness: 2,
linearProgressThickness: 2,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#ffffff',
tooltipLightLabel: '#000000',
success: '#22C55E',
danger: '#F87171',
warning: '#ea580c',
info: '#06B6D4',
tooltipLabelFont: {
color: '#1F2937', fontFamily: 'Inter', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#D1D5DB', fontStyle: 'Normal', fontFamily: 'Inter'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#D1D5DB', fontStyle: 'Normal', fontFamily: 'Inter'
}
};
break;
case 'FabricDark':
case 'BootstrapDark':
case 'MaterialDark':
style = {
linearTrackColor: '#C8C8C8',
linearProgressColor: '#9A9A9A',
circularTrackColor: '#C8C8C8',
circularProgressColor: '#9A9A9A',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.44,
linearGapWidth: 2,
circularGapWidth: 4,
linearTrackThickness: 16,
linearProgressThickness: 16,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#ffffff',
tooltipLightLabel: '#000000',
success: '#22b24b',
danger: '#ac2a2a',
warning: '#ffca1c',
info: '#489bd5',
tooltipLabelFont: {
color: theme === 'BootstrapDark' ? '#1A1A1A' : theme === 'FabricDark' ? '#DADADA' : 'rgba(18, 18, 18, 1)', fontFamily: theme === 'BootstrapDark' ? 'Helvetica Neue' : theme === 'FabricDark' ? 'Segoe UI' : 'Roboto', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#000000', fontStyle: 'Normal', fontFamily: theme === 'BootstrapDark' ? 'Helvetica Neue' : theme === 'FabricDark' ? 'Segoe UI' : 'Roboto'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#000000', fontStyle: 'Normal', fontFamily: theme === 'BootstrapDark' ? 'Helvetica Neue' : theme === 'FabricDark' ? 'Segoe UI' : 'Roboto'
}
};
break;
case 'Bootstrap5':
style = {
linearTrackColor: '#DEE2E6',
linearProgressColor: '#0D6EFD',
circularTrackColor: '#DEE2E6',
circularProgressColor: '#0D6EFD',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.44,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: 2,
linearProgressThickness: 2,
circularTrackThickness: 2,
circularProgressThickness: 2,
tooltipFill: '#000000E5',
tooltipLightLabel: '#FFFFFF',
success: '#198754',
danger: '#DC3545',
warning: '#FFC107',
info: '#0DCAF0',
tooltipLabelFont: {
color: '#F9FAFB', fontFamily: 'Segoe UI', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Segoe UI'
},
circularLabelFont: {
size: '12', fontWeight: '400', color: '#0D6EFD', fontStyle: 'Normal', fontFamily: 'Segoe UI'
}
};
break;
case 'Bootstrap5Dark':
style = {
linearTrackColor: '#495057',
linearProgressColor: '#0D6EFD',
circularTrackColor: '#495057',
circularProgressColor: '#0D6EFD',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.4,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: 2,
linearProgressThickness: 2,
circularTrackThickness: 2,
circularProgressThickness: 2,
tooltipFill: '#FFFFFFE5',
tooltipLightLabel: '#212529',
success: '#198754',
danger: '#DC3545',
warning: '#FFC107',
info: '#0DCAF0',
tooltipLabelFont: {
color: '#212529', fontFamily: 'Segoe UI', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Segoe UI'
},
circularLabelFont: {
size: '12', fontWeight: '400', color: '#0D6EFD', fontStyle: 'Normal', fontFamily: 'Segoe UI'
}
};
break;
case 'Fluent':
style = {
linearTrackColor: '#F3F2F1',
linearProgressColor: '#0D6EFD',
circularTrackColor: '#F3F2F1',
circularProgressColor: '#0D6EFD',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.45,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: 16,
linearProgressThickness: 16,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#ffffff',
tooltipLightLabel: '#000000',
success: '#0B6A0B',
danger: '#D13438',
warning: '#CA5010',
info: '#038387',
tooltipLabelFont: {
color: '#323130', fontFamily: 'Segoe UI', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#0D6EFD', fontStyle: 'Normal', fontFamily: 'Segoe UI'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#0D6EFD', fontStyle: 'Normal', fontFamily: 'Segoe UI'
}
};
break;
case 'FluentDark':
style = {
linearTrackColor: '#3B4248',
linearProgressColor: '#0D6EFD',
circularTrackColor: '#3B4248',
circularProgressColor: '#0D6EFD',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.35,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: 16,
linearProgressThickness: 16,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#ffffff',
tooltipLightLabel: '#000000',
success: '#0B6A0B',
danger: '#D13438',
warning: '#CA5010',
info: '#038387',
tooltipLabelFont: {
color: '#F3F2F1', fontFamily: 'Segoe UI', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#0D6EFD', fontStyle: 'Normal', fontFamily: 'Segoe UI'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#0D6EFD', fontStyle: 'Normal', fontFamily: 'Segoe UI'
}
};
break;
case 'Fluent2':
style = {
linearTrackColor: '#E6E6E6',
linearProgressColor: '#0F6CBD',
circularTrackColor: '#E6E6E6',
circularProgressColor: '#0F6CBD',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.35,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: Browser.isDevice ? 4 : 2,
linearProgressThickness: Browser.isDevice ? 4 : 2,
circularTrackThickness: Browser.isDevice ? 2 : 2,
circularProgressThickness: Browser.isDevice ? 2 : 2,
tooltipFill: '#FFFFFF',
tooltipLightLabel: '#242424',
success: '#107C10',
danger: '#D13438',
warning: '#BC4B09',
info: '#008AA9',
tooltipLabelFont: {
color: '#242424', fontFamily: 'Segoe UI', fontWeight: '400'
},
linearLabelFont: {
size: '12', fontWeight: '400', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Segoe UI'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#242424', fontStyle: 'Normal', fontFamily: 'Segoe UI'
}
};
break;
case 'Fluent2Dark':
style = {
linearTrackColor: '#333333',
linearProgressColor: '#115EA3',
circularTrackColor: '#333333',
circularProgressColor: '#115EA3',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.35,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: Browser.isDevice ? 4 : 2,
linearProgressThickness: Browser.isDevice ? 4 : 2,
circularTrackThickness: Browser.isDevice ? 2 : 2,
circularProgressThickness: Browser.isDevice ? 2 : 2,
tooltipFill: '#292929',
tooltipLightLabel: '#FFFFFF',
success: '#107C10',
danger: '#DC626D',
warning: '#FAA06B',
info: '#0099BC',
tooltipLabelFont: {
color: '#FFFFFF', fontFamily: 'Segoe UI', fontWeight: '400'
},
linearLabelFont: {
size: '12', fontWeight: '400', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Segoe UI'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Segoe UI'
}
};
break;
case 'Fluent2HighContrast':
style = {
linearTrackColor: '#000000',
linearProgressColor: '#1AEBFF',
circularTrackColor: '#000000',
circularProgressColor: '#1AEBFF',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.35,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: Browser.isDevice ? 4 : 2,
linearProgressThickness: Browser.isDevice ? 4 : 2,
circularTrackThickness: Browser.isDevice ? 2 : 2,
circularProgressThickness: Browser.isDevice ? 2 : 2,
tooltipFill: '#000000',
tooltipLightLabel: '#FFFFFF',
success: '#107C10',
danger: '#C50F1F',
warning: '#F7630C',
info: '#0099BC',
tooltipLabelFont: {
color: '#FFFFFF', fontFamily: 'Segoe UI', fontWeight: '400'
},
linearLabelFont: {
size: '12', fontWeight: '400', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Segoe UI'
},
circularLabelFont: {
size: '12', fontWeight: '400', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Segoe UI'
}
};
break;
case 'Material3':
style = {
linearTrackColor: '#E7E0EC',
linearProgressColor: '#6750A4',
circularTrackColor: '#E7E0EC',
circularProgressColor: '#6750A4',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.24,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: 4,
linearProgressThickness: 4,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#313033',
tooltipLightLabel: '#F4EFF4',
success: '#0B6A0B',
danger: '#D13438',
warning: '#CA5010',
info: '#038387',
tooltipLabelFont: {
size: '12px', fontWeight: '400', color: '#F4EFF4', fontStyle: 'Normal', fontFamily: 'Roboto'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#FFFFFF', fontStyle: 'Normal', fontFamily: 'Roboto'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#6750A4', fontStyle: 'Normal', fontFamily: 'Roboto'
}
};
break;
case 'Material3Dark':
style = {
linearTrackColor: '#49454F',
linearProgressColor: '#D0BCFF',
circularTrackColor: '#49454F',
circularProgressColor: '#D0BCFF',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.24,
linearGapWidth: 4,
circularGapWidth: 4,
linearTrackThickness: 4,
linearProgressThickness: 4,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#E6E1E5',
tooltipLightLabel: '#313033',
success: '#0B6A0B',
danger: '#D13438',
warning: '#CA5010',
info: '#038387',
tooltipLabelFont: {
color: '#313033', fontFamily: 'roboto', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: '#371E73', fontStyle: 'Normal', fontFamily: 'Roboto'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: '#D0BCFF', fontStyle: 'Normal', fontFamily: 'Roboto'
}
};
break;
default:
style = {
linearTrackColor: '#EAEAEA',
linearProgressColor: '#0078D6',
circularTrackColor: '#E6E6E6',
circularProgressColor: '#0078D6',
backgroundColor: 'transparent',
progressOpacity: 1,
trackOpacity: 1,
bufferOpacity: 0.3,
linearGapWidth: 2,
circularGapWidth: 4,
linearTrackThickness: 2,
linearProgressThickness: 2,
circularTrackThickness: 4,
circularProgressThickness: 4,
tooltipFill: '#ffffff',
tooltipLightLabel: '#000000',
success: '#166600',
danger: '#b30900',
warning: '#944000',
info: '#0056b3',
tooltipLabelFont: {
color: '#333333', fontFamily: 'Segoe UI', fontWeight: '400'
},
linearLabelFont: {
size: '10', fontWeight: '400', color: null, fontStyle: 'Normal', fontFamily: 'Segoe UI'
},
circularLabelFont: {
size: '12', fontWeight: '500', color: null, fontStyle: 'Normal', fontFamily: 'Segoe UI'
}
};
break;
}
return style;
}
/**
* corner Radius
*/
var lineCapRadius = 0.9;
/**
* complete Angle
*/
var completeAngle = 359.99;
/**
* valueChanged event
*/
var valueChanged = 'valueChanged';
/**
* progressCompleted event
*/
var progressCompleted = 'progressCompleted';
/**
* mouseClick event
*/
var mouseClick = 'mouseClick';
/**
* mouseDown event
*/
var mouseDown = 'mouseDown';
/**
* mouseUp event
*/
var mouseUp = 'mouseUp';
/**
* mouseMove event
*/
var mouseMove = 'mouseMove';
/**
* mouseLeave event
*/
var mouseLeave = 'mouseLeave';
/**
* svgLink
*/
var svgLink = 'http://www.w3.org/2000/svg';
/**
* gradient type
*/
var gradientType = 'linearGradient';
/**
* stop element
*/
var stopElement = 'stop';
/**
* Render for the tooltip.
*/
var tooltipRender = 'tooltipRender';
/**
* Base file for annotation
*/
var AnnotationBase = /** @__PURE__ @class */ (function () {
/**
* Constructor for progress annotation
*
* @param {ProgressBar} control It called constructor
*/
function AnnotationBase(control) {
this.control = control;
}
AnnotationBase.prototype.render = function (annotation, index) {
this.annotation = annotation;
var childElement = createElement('div', {
id: this.control.element.id + 'Annotation' + index,
styles: 'position:absolute;z-index:1', innerHTML: annotation.content
});
return childElement;
};
/**
* To process the annotation
*
* @param {ProgressAnnotationSettings} annotation One of the parameter called annotation
* @param {number} index Index of the annotation
* @param {HTMLElement} parentElement Parent element of the annotation
* @returns {void}
*/
AnnotationBase.prototype.processAnnotation = function (annotation, index, parentElement) {
var location = new ProgressLocation(0, 0);
var annotationElement = this.render(annotation, index);
if (annotationElement) {
this.setElementStyle(location, annotationElement, parentElement);
}
else if (this.control.redraw) {
removeElement(annotationElement.id);
if (this.control.isReact) {
this.control.clearTemplate();
}
}
};
AnnotationBase.prototype.setElementStyle = function (location, element, parentElement) {
var argsData = {
cancel: false, name: annotationRender, content: element,
location: location
};
this.control.trigger(annotationRender, argsData);
if (!argsData.cancel) {
var result = this.Location(this.annotation.annotationRadius, this.annotation.annotationAngle);
argsData.content.style.left = result.left + 'px';
argsData.content.style.top = result.top + 'px';
argsData.content.style.transform = 'translate(-50%, -50%)';
argsData.content.setAttribute('aria-label', 'Annotation');
parentElement.appendChild(argsData.content);
if (this.control.isReact) {
this.control.renderReactTemplates();
}
}
};
AnnotationBase.prototype.Location = function (radius, angle) {
var top;
var left;
var radius1 = parseFloat(radius);
if (radius1 === 0 && angle === 0) {
var rect = this.control.progressRect;
left = rect.x + (rect.width / 2);
top = rect.y + (rect.height / 2);
}
else {
var degToRadFactor = Math.PI / 180;
angle = angle - 90;
angle = angle * degToRadFactor;
var x = Math.round(this.control.progressSize.width / 2.25);
var y = Math.round(this.control.progressSize.height / 2.25);
left = (radius1 * Math.cos(angle)) + x;
top = (radius1 * Math.sin(angle)) + y;
}
return {
top: top, left: left
};
};
return AnnotationBase;
}());
/**
* Animation for progress bar
*/
var ProgressAnimation = /** @__PURE__ @class */ (function () {
function ProgressAnimation() {
}
/**
* Performs linear animation on the specified element.
*
* @param {Element} element - The HTML element to animate.
* @param {ProgressBar} progress - The progress bar control.
* @param {number} delay - The delay before starting the animation, in milliseconds.
* @param {number} previousWidth - The previous width of the progress.
* @param {Element} active - The active element to control the animation.
* @returns {void}
*/
ProgressAnimation.prototype.doLinearAnimation = function (element, progress, delay, previousWidth, active) {
var _this = this;
var animation = new Animation$1({});
var linearPath = element;
var duration = (progress.isActive) ? 3000 : progress.animation.duration;
var width = linearPath.getAttribute('width');
var x = linearPath.getAttribute('x');
var opacityValue = 0;
var value = 0;
var start = (!progress.enableRtl || (progress.cornerRadius === 'Round4px')) ? previousWidth : parseInt(x, 10);
var end = (!progress.enableRtl || (progress.cornerRadius === 'Round4px')) ? parseInt(width, 10) - start :
parseInt(width, 10) - previousWidth;
var rtlX = parseInt(x, 10) - end;
linearPath.style.visibility = 'hidden';
animation.animate(linearPath, {
duration: (progress.animation.duration === 0 && animationMode === 'Enable') ? 2000 : duration,
delay: delay,
progress: function (args) {
progress.cancelResize = true;
if (progress.enableRtl && !(progress.cornerRadius === 'Round4px')) {
if (args.timeStamp >= args.delay) {
linearPath.style.visibility = 'visible';
if (progress.isActive) {
value = _this.activeAnimate((args.timeStamp / args.duration), parseInt(x, 10), parseInt(width, 10), true);
opacityValue = effect(args.timeStamp, 0.5, 0.5, args.duration, true);
active.setAttribute('opacity', opacityValue.toString());
linearPath.setAttribute('x', value.toString());
}
else {
value = effect(args.timeStamp, start, end, args.duration, true);
linearPath.setAttribute('x', value.toString());
}
}
}
else {