@coreui/angular
Version:
CoreUI for Angular UI components library
112 lines • 12.2 kB
JavaScript
import { Component, HostBinding, Input } from '@angular/core';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import * as i0 from "@angular/core";
export class ProgressBarComponent {
constructor(renderer, hostElement) {
this.renderer = renderer;
this.hostElement = hostElement;
this._animated = false;
// TODO: check if this is necessary.
this.precision = 0;
this._value = 0;
/**
* Set default html role attribute.
* @type string
*/
this.role = 'progressbar';
this.state = {
percent: 0,
min: 0,
max: 100
};
}
/**
* Use to animate the stripes right to left via CSS3 animations.
* @type boolean
*/
set animated(value) {
this._animated = coerceBooleanProperty(value);
}
get animated() {
return this._animated;
}
/**
* The percent to progress the ProgressBar.
*/
set value(value) {
this._value = coerceNumberProperty(value);
}
;
get value() {
return this._value;
}
get min() {
return this.state.min;
}
set min(value) {
this.state.min = isNaN(value) ? 0 : value;
}
get max() {
return this.state.max;
}
set max(value) {
this.state.max = isNaN(value) || value <= 0 || value === this.min ? 100 : value;
}
get hostClasses() {
return {
'progress-bar': true,
'progress-bar-animated': this.animated,
[`progress-bar-${this.variant}`]: !!this.variant,
[`bg-${this.color}`]: !!this.color
};
}
ngOnInit() {
this.setValues();
}
setPercent() {
this.state.percent = +((this.value / (this.max - this.min)) * 100).toFixed(this.precision);
}
setValues() {
this.setPercent();
const host = this.hostElement.nativeElement;
this.renderer.setStyle(host, 'width', `${this.state.percent}%`);
this.renderer.setAttribute(host, 'aria-valuenow', String(this.value));
this.renderer.setAttribute(host, 'aria-valuemin', String(this.min));
this.renderer.setAttribute(host, 'aria-valuemax', String(this.max));
}
ngOnChanges(changes) {
this.setValues();
}
}
ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ProgressBarComponent, selector: "c-progress-bar", inputs: { animated: "animated", color: "color", precision: "precision", value: "value", variant: "variant", role: "role", min: "min", max: "max" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ProgressBarComponent, decorators: [{
type: Component,
args: [{
selector: 'c-progress-bar',
template: '<ng-content></ng-content>'
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { animated: [{
type: Input
}], color: [{
type: Input
}], precision: [{
type: Input
}], value: [{
type: Input
}], variant: [{
type: Input
}], role: [{
type: Input
}, {
type: HostBinding,
args: ['attr.role']
}], min: [{
type: Input
}], max: [{
type: Input
}], hostClasses: [{
type: HostBinding,
args: ['class']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmV1aS1hbmd1bGFyL3NyYy9saWIvcHJvZ3Jlc3MvcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFdBQVcsRUFBRSxLQUFLLEVBQStDLE1BQU0sZUFBZSxDQUFDO0FBRXZILE9BQU8sRUFBZ0IscUJBQXFCLEVBQUUsb0JBQW9CLEVBQWUsTUFBTSx1QkFBdUIsQ0FBQzs7QUFNL0csTUFBTSxPQUFPLG9CQUFvQjtJQXVEL0IsWUFDVSxRQUFtQixFQUNuQixXQUF1QjtRQUR2QixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQ25CLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBeEN6QixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBTzFCLG9DQUFvQztRQUMzQixjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBV2YsV0FBTSxHQUFHLENBQUMsQ0FBQztRQU9uQjs7O1dBR0c7UUFFdUIsU0FBSSxHQUFHLGFBQWEsQ0FBQztRQUN2QyxVQUFLLEdBQUc7WUFDZCxPQUFPLEVBQUUsQ0FBQztZQUNWLEdBQUcsRUFBRSxDQUFDO1lBQ04sR0FBRyxFQUFFLEdBQUc7U0FDVCxDQUFDO0lBS0UsQ0FBQztJQXJETDs7O09BR0c7SUFDSCxJQUNJLFFBQVEsQ0FBQyxLQUFjO1FBQ3pCLElBQUksQ0FBQyxTQUFTLEdBQUcscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUM7SUFFaEQsQ0FBQztJQUNELElBQUksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUN4QixDQUFDO0lBVUQ7O09BRUc7SUFDSCxJQUNJLEtBQUssQ0FBQyxLQUFhO1FBQ3JCLElBQUksQ0FBQyxNQUFNLEdBQUcsb0JBQW9CLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUFBLENB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O2dCQU9vQixJQUFJO3NCQUQ3QixLQUFLOztzQkFDTCxXQUFXO3VCQUFDLFdBQVc7Z0JBaUJwQixHQUFHO3NCQUROLEtBQUs7Z0JBVUYsR0FBRztzQkFETixLQUFLO2dCQU1GLFdBQVc7c0JBRGQsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBIb3N0QmluZGluZywgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBSZW5kZXJlcjIsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbG9ycyB9IGZyb20gJy4uL2NvcmV1aS50eXBlcyc7XG5pbXBvcnQgeyBCb29sZWFuSW5wdXQsIGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSwgY29lcmNlTnVtYmVyUHJvcGVydHksIE51bWJlcklucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYy1wcm9ncmVzcy1iYXInLFxuICB0ZW1wbGF0ZTogJzxuZy1jb250ZW50PjwvbmctY29udGVudD4nXG59KVxuZXhwb3J0IGNsYXNzIFByb2dyZXNzQmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuXG4gIHN0YXRpYyBuZ0FjY2VwdElucHV0VHlwZV9hbmltYXRlZDogQm9vbGVhbklucHV0O1xuICBzdGF0aWMgbmdBY2NlcHRJbnB1dFR5cGVfdmFsdWU6IE51bWJlcklucHV0O1xuXG4gIC8qKlxuICAgKiBVc2UgdG8gYW5pbWF0ZSB0aGUgc3RyaXBlcyByaWdodCB0byBsZWZ0IHZpYSBDU1MzIGFuaW1hdGlvbnMuXG4gICAqIEB0eXBlIGJvb2xlYW5cbiAgICovXG4gIEBJbnB1dCgpXG4gIHNldCBhbmltYXRlZCh2YWx1ZTogYm9vbGVhbikge1xuICAgIHRoaXMuX2FuaW1hdGVkID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcblxuICB9XG4gIGdldCBhbmltYXRlZCgpIHtcbiAgICByZXR1cm4gdGhpcy5fYW5pbWF0ZWQ7XG4gIH1cbiAgcHJpdmF0ZSBfYW5pbWF0ZWQgPSBmYWxzZTtcblxuICAvKipcbiAgICogU2V0cyB0aGUgY29sb3IgY29udGV4dCBvZiB0aGUgY29tcG9uZW50IHRvIG9uZSBvZiBDb3JlVUnigJlzIHRoZW1lZCBjb2xvcnMuXG4gICAqIEB2YWx1ZXMgJ3ByaW1hcnknLCAnc2Vjb25kYXJ5JywgJ3N1Y2Nlc3MnLCAnZGFuZ2VyJywgJ3dhcm5pbmcnLCAnaW5mbycsICdkYXJrJywgJ2xpZ2h0J1xuICAgKi9cbiAgQElucHV0KCkgY29sb3I/OiBDb2xvcnM7XG4gIC8vIFRPRE86IGNoZWNrIGlmIHRoaXMgaXMgbmVjZXNzYXJ5LlxuICBASW5wdXQoKSBwcmVjaXNpb24gPSAwO1xuICAvKipcbiAgICogVGhlIHBlcmNlbnQgdG8gcHJvZ3Jlc3MgdGhlIFByb2dyZXNzQmFyLlxuICAgKi9cbiAgQElucHV0KClcbiAgc2V0IHZhbHVlKHZhbHVlOiBudW1iZXIpIHtcbiAgICB0aGlzLl92YWx1ZSA9IGNvZXJjZU51bWJlclByb3BlcnR5KHZhbHVlKTtcbiAgfTtcbiAgZ2V0IHZhbHVlKCkge1xuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgfVxuICBwcml2YXRlIF92YWx1ZSA9IDA7XG4gIC8qKlxuICAgKiBTZXQgdGhlIHByb2dyZXNzIGJhciB2YXJpYW50IHRvIG9wdGlvbmFsIHN0cmlwZWQuXG4gICAqIEB2YWx1ZXMgJ3N0cmlwZWQnXG4gICAqL1xuICBASW5wdXQoKSB2YXJpYW50PzogJ3N0cmlwZWQnO1xuXG4gIC8qKlxuICAgKiBTZXQgZGVmYXVsdCBodG1sIHJvbGUgYXR0cmlidXRlLlxuICAgKiBAdHlwZSBzdHJpbmdcbiAgICovXG4gIEBJbnB1dCgpXG4gIEBIb3N0QmluZGluZygnYXR0ci5yb2xlJykgcm9sZSA9ICdwcm9ncmVzc2Jhcic7XG4gIHByaXZhdGUgc3RhdGUgPSB7XG4gICAgcGVyY2VudDogMCxcbiAgICBtaW46IDAsXG4gICAgbWF4OiAxMDBcbiAgfTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICAgcHJpdmF0ZSBob3N0RWxlbWVudDogRWxlbWVudFJlZlxuICApIHsgfVxuXG4gIGdldCBtaW4oKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5zdGF0ZS5taW47XG4gIH1cblxuICBASW5wdXQoKVxuICBzZXQgbWluKHZhbHVlOiBudW1iZXIpIHtcbiAgICB0aGlzLnN0YXRlLm1pbiA9IGlzTmFOKHZhbHVlKSA/IDAgOiB2YWx1ZTtcbiAgfVxuXG4gIGdldCBtYXgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5zdGF0ZS5tYXg7XG4gIH1cblxuICBASW5wdXQoKVxuICBzZXQgbWF4KHZhbHVlOiBudW1iZXIpIHtcbiAgICB0aGlzLnN0YXRlLm1heCA9IGlzTmFOKHZhbHVlKSB8fCB2YWx1ZSA8PSAwIHx8IHZhbHVlID09PSB0aGlzLm1pbiA/IDEwMCA6IHZhbHVlO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXG4gIGdldCBob3N0Q2xhc3NlcygpOiBhbnkge1xuICAgIHJldHVybiB7XG4gICAgICAncHJvZ3Jlc3MtYmFyJzogdHJ1ZSxcbiAgICAgICdwcm9ncmVzcy1iYXItYW5pbWF0ZWQnOiB0aGlzLmFuaW1hdGVkLFxuICAgICAgW2Bwcm9ncmVzcy1iYXItJHt0aGlzLnZhcmlhbnR9YF06ICEhdGhpcy52YXJpYW50LFxuICAgICAgW2BiZy0ke3RoaXMuY29sb3J9YF06ICEhdGhpcy5jb2xvclxuICAgIH07XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnNldFZhbHVlcygpO1xuICB9XG5cbiAgc2V0UGVyY2VudCgpOiB2b2lkIHtcbiAgICB0aGlzLnN0YXRlLnBlcmNlbnQgPSArKCh0aGlzLnZhbHVlIC8gKHRoaXMubWF4IC0gdGhpcy5taW4pKSAqIDEwMCkudG9GaXhlZCh0aGlzLnByZWNpc2lvbik7XG4gIH1cblxuICBzZXRWYWx1ZXMoKTogdm9pZCB7XG4gICAgdGhpcy5zZXRQZXJjZW50KCk7XG4gICAgY29uc3QgaG9zdDogSFRNTEVsZW1lbnQgPSB0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQ7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShob3N0LCAnd2lkdGgnLCBgJHt0aGlzLnN0YXRlLnBlcmNlbnR9JWApO1xuICAgIHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKGhvc3QsICdhcmlhLXZhbHVlbm93JywgU3RyaW5nKHRoaXMudmFsdWUpKTtcbiAgICB0aGlzLnJlbmRlcmVyLnNldEF0dHJpYnV0ZShob3N0LCAnYXJpYS12YWx1ZW1pbicsIFN0cmluZyh0aGlzLm1pbikpO1xuICAgIHRoaXMucmVuZGVyZXIuc2V0QXR0cmlidXRlKGhvc3QsICdhcmlhLXZhbHVlbWF4JywgU3RyaW5nKHRoaXMubWF4KSk7XG4gIH1cblxuICBwdWJsaWMgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIHRoaXMuc2V0VmFsdWVzKCk7XG4gIH1cbn1cbiJdfQ==