@indice/ng-components
Version:
Indice common components for Angular v12
46 lines • 6.04 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ProgressBarComponent {
constructor() {
this.value = 0;
this.total = 0;
this.text = undefined;
this.busy = false;
this.percentage = 0;
}
ngOnChanges(changes) {
if (changes.value || changes.total) {
this.calcPercentage();
}
}
calcPercentage() {
if (this.total > 0) {
this.percentage = (this.value / this.total) * 100;
}
else {
this.percentage = 0;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: { value: "value", valueText: ["value-text", "valueText"], total: "total", totalText: ["total-text", "totalText"], text: "text", busy: "busy" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"progress-bar-container\">\n <div class=\"progress-bar-label\" *ngIf=\"!busy\">{{text}} {{valueText ?? value}}/{{totalText ?? total}}</div>\n <div class=\"progress-bar-backdrop progress-bar-label w-2/3\" *ngIf=\"busy\"></div>\n <div class=\"progress-bar-backdrop\">\n <div class=\"progress-bar-inner\" [style]=\"'width:' + percentage + '%' \"></div>\n </div>\n</div>\n ", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-progress-bar', template: "<div class=\"progress-bar-container\">\n <div class=\"progress-bar-label\" *ngIf=\"!busy\">{{text}} {{valueText ?? value}}/{{totalText ?? total}}</div>\n <div class=\"progress-bar-backdrop progress-bar-label w-2/3\" *ngIf=\"busy\"></div>\n <div class=\"progress-bar-backdrop\">\n <div class=\"progress-bar-inner\" [style]=\"'width:' + percentage + '%' \"></div>\n </div>\n</div>\n " }]
}], ctorParameters: () => [], propDecorators: { value: [{
type: Input
}], valueText: [{
type: Input,
args: ['value-text']
}], total: [{
type: Input
}], totalText: [{
type: Input,
args: ['total-text']
}], text: [{
type: Input
}], busy: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9wcm9ncmVzcy1iYXIvcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9wcm9ncmVzcy1iYXIvcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUE0QixNQUFNLGVBQWUsQ0FBQzs7O0FBTTNFLE1BQU0sT0FBTyxvQkFBb0I7SUFTL0I7UUFSUyxVQUFLLEdBQVcsQ0FBQyxDQUFDO1FBRWxCLFVBQUssR0FBVyxDQUFDLENBQUM7UUFFbEIsU0FBSSxHQUF1QixTQUFTLENBQUM7UUFDckMsU0FBSSxHQUFZLEtBQUssQ0FBQztRQUN4QixlQUFVLEdBQVcsQ0FBQyxDQUFDO0lBRzlCLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsS0FBSyxJQUFJLE9BQU8sQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNuQyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDeEIsQ0FBQztJQUNILENBQUM7SUFFTyxjQUFjO1FBQ3BCLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUNuQixJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxDQUFDO1FBQ3BELENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLENBQUM7UUFDdEIsQ0FBQztJQUNILENBQUM7OEdBeEJVLG9CQUFvQjtrR0FBcEIsb0JBQW9CLHFPQ05qQyxpWkFPRTs7MkZERFcsb0JBQW9CO2tCQUpoQyxTQUFTOytCQUNFLGtCQUFrQjt3REFJbkIsS0FBSztzQkFBYixLQUFLO2dCQUNlLFNBQVM7c0JBQTdCLEtBQUs7dUJBQUMsWUFBWTtnQkFDVixLQUFLO3NCQUFiLEtBQUs7Z0JBQ2UsU0FBUztzQkFBN0IsS0FBSzt1QkFBQyxZQUFZO2dCQUNWLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLXByb2dyZXNzLWJhcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9ncmVzcy1iYXIuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFByb2dyZXNzQmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgdmFsdWU6IG51bWJlciA9IDA7XG4gIEBJbnB1dCgndmFsdWUtdGV4dCcpIHZhbHVlVGV4dDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSB0b3RhbDogbnVtYmVyID0gMDtcbiAgQElucHV0KCd0b3RhbC10ZXh0JykgdG90YWxUZXh0OiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIHRleHQ6IHN0cmluZyB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgYnVzeTogYm9vbGVhbiA9IGZhbHNlO1xuICBwdWJsaWMgcGVyY2VudGFnZTogbnVtYmVyID0gMDtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlcy52YWx1ZSB8fCBjaGFuZ2VzLnRvdGFsKSB7XG4gICAgICB0aGlzLmNhbGNQZXJjZW50YWdlKCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBjYWxjUGVyY2VudGFnZSgpIHtcbiAgICBpZiAodGhpcy50b3RhbCA+IDApIHtcbiAgICAgIHRoaXMucGVyY2VudGFnZSA9ICh0aGlzLnZhbHVlIC8gdGhpcy50b3RhbCkgKiAxMDA7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucGVyY2VudGFnZSA9IDA7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtYmFyLWNvbnRhaW5lclwiPlxuICAgIDxkaXYgY2xhc3M9XCJwcm9ncmVzcy1iYXItbGFiZWxcIiAqbmdJZj1cIiFidXN5XCI+e3t0ZXh0fX0ge3t2YWx1ZVRleHQgPz8gdmFsdWV9fS97e3RvdGFsVGV4dCA/PyB0b3RhbH19PC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInByb2dyZXNzLWJhci1iYWNrZHJvcCBwcm9ncmVzcy1iYXItbGFiZWwgdy0yLzNcIiAqbmdJZj1cImJ1c3lcIj48L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtYmFyLWJhY2tkcm9wXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwicHJvZ3Jlc3MtYmFyLWlubmVyXCIgW3N0eWxlXT1cIid3aWR0aDonICsgcGVyY2VudGFnZSArICclJyBcIj48L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuICAiXX0=