gov-gui
Version:
Gov UI Component Library Typscript Build
240 lines (239 loc) • 8.77 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovProgressBar {
constructor() {
this.variant = 'success'; // Color of the progress bar fill
this.progress = 0; // Progress value (0-100)
this.type = 'linear'; // Determines the variant of the progress bar
this.animationDelay = '2s';
this.allClasses = '';
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
// inject the animations and styles on component load
componentWillLoad() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
get normalizedProgress() {
return Math.min(this.progress >= 0 ? this.progress : 0, 100);
}
getColor() {
switch (this.variant) {
case 'success':
return 'var(--success-color)';
case 'info':
return 'var(--info-color)';
case 'warning':
return 'var(--warning-color)';
case 'danger':
return 'var(--danger-color)';
case 'primary':
return 'var(--primary-color)';
default:
return 'var(--primary-color)';
}
}
render() {
const fillStyle = {
width: `${this.normalizedProgress}%`,
backgroundColor: this.getColor(),
};
const radius = 50;
const circumference = 2 * Math.PI * radius;
const offset = circumference - (this.normalizedProgress / 100) * circumference;
return (h("div", { key: '5bc59cc94571bc932fa119e7fa441b298c85c36a', class: `progress-container ${this.allClasses}` }, h("div", { key: 'e6720ee6c2fc9c1ade592c8d8bc5d42efbe65a99', style: { alignSelf: this.type == 'linear' ? 'start' : 'center', } }, this.label ? `${this.label}` : ''), this.type === 'linear' ? (h("div", { class: "progress-bar" }, h("div", { class: "progress-fill", style: fillStyle }, h("div", { class: "progress-label" }, Math.round(this.normalizedProgress) > 35, Math.round(this.normalizedProgress), "%")))) : (h("div", { class: "circular-container" }, h("svg", { width: "120", height: "120" }, h("circle", { class: "circle-background", cx: "60", cy: "60", r: radius }), h("circle", { class: "circle-progress", cx: "60", cy: "60", r: radius, stroke: this.getColor(), "stroke-dasharray": circumference, "stroke-dashoffset": offset })), h("div", { class: "progress-text" }, Math.round(this.normalizedProgress), "%")))));
}
static get is() { return "gov-progress-bar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-progress-bar.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-progress-bar.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false
},
"variant": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "variant",
"reflect": false,
"defaultValue": "'success'"
},
"progress": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "progress",
"reflect": false,
"defaultValue": "0"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'linear' | 'circular'",
"resolved": "\"circular\" | \"linear\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "type",
"reflect": false,
"defaultValue": "'linear'"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-progress-bar.js.map