@engie-group/fluid-design-system-angular
Version:
Fluid Design System Angular
102 lines • 12.1 kB
JavaScript
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import { ProgressAnimation } from './progress.animation';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ProgressComponent {
constructor() {
/**
* @ignore
*/
this.progressClassName = 'nj-progress';
/**
* Progress value
*/
this.value = 0;
/**
* Whether progress description is shown on the right/bottom or hidden
*/
this.descriptionPosition = 'none';
/**
* Progress min
*/
this.min = 0;
/**
* Progress max
*/
this.max = 100;
/**
* Whether progress is animated at first render
*/
this.isAnimated = true;
/**
* Whether progress has css transitions for progress width
*/
this.hasTransition = false;
/**
* Decimal precision of the description text
*/
this.decimalPrecision = 0;
}
/**
* @ignore
*/
getTransitionClass() {
return this.hasTransition ? `${this.progressClassName}--has-transition` : '';
}
/**
* @ignore
*/
getDescriptionPositionClass() {
return this.descriptionPosition === 'right' ? `${this.progressClassName}--has-right-description` : '';
}
/**
* @ignore
*/
getFormattedValue() {
if (this.value > this.max) {
return this.max;
}
else if (this.value < this.min) {
return this.min;
}
else {
return this.value;
}
}
/**
* @ignore
*/
getFormattedPercentage() {
if (this.value < this.min) {
return '0';
}
else if (this.value > this.max) {
return '100';
}
return Number(((this.getFormattedValue() - this.min) / (this.max - this.min)) * 100).toFixed(this.decimalPrecision);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressComponent, isStandalone: true, selector: "nj-progress", inputs: { label: "label", value: "value", descriptionPosition: "descriptionPosition", min: "min", max: "max", isAnimated: "isAnimated", hasTransition: "hasTransition", decimalPrecision: "decimalPrecision" }, ngImport: i0, template: "<div class=\"nj-progress\"\n role=\"progressbar\"\n [ngClass]=\"[getTransitionClass(), getDescriptionPositionClass()]\"\n *ngIf=\"getFormattedPercentage() as percentage\"\n [attr.aria-valuenow]=\"value\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-label]=\"label\">\n <div class=\"nj-progress__bar\">\n <div class=\"nj-progress__indicator\"\n [style.width.%]=\"percentage\"\n @progressFill\n [@.disabled]=\"!isAnimated\">\n </div>\n </div>\n <div aria-hidden=\"true\" class=\"nj-progress__description\" *ngIf=\"descriptionPosition !== 'none'\">\n {{getFormattedPercentage()}}%\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [ProgressAnimation.progressFill], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'nj-progress', changeDetection: ChangeDetectionStrategy.OnPush, animations: [ProgressAnimation.progressFill], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule], template: "<div class=\"nj-progress\"\n role=\"progressbar\"\n [ngClass]=\"[getTransitionClass(), getDescriptionPositionClass()]\"\n *ngIf=\"getFormattedPercentage() as percentage\"\n [attr.aria-valuenow]=\"value\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-label]=\"label\">\n <div class=\"nj-progress__bar\">\n <div class=\"nj-progress__indicator\"\n [style.width.%]=\"percentage\"\n @progressFill\n [@.disabled]=\"!isAnimated\">\n </div>\n </div>\n <div aria-hidden=\"true\" class=\"nj-progress__description\" *ngIf=\"descriptionPosition !== 'none'\">\n {{getFormattedPercentage()}}%\n </div>\n</div>\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
type: Input
}], value: [{
type: Input
}], descriptionPosition: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], isAnimated: [{
type: Input
}], hasTransition: [{
type: Input
}], decimalPrecision: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcHJvZ3Jlc3MvcHJvZ3Jlc3MuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcHJvZ3Jlc3MvcHJvZ3Jlc3MuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzdGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDOzs7QUFXekQsTUFBTSxPQUFPLGlCQUFpQjtJQTZDNUI7UUE1Q0E7O1dBRUc7UUFDYyxzQkFBaUIsR0FBRyxhQUFhLENBQUM7UUFNbkQ7O1dBRUc7UUFDTSxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBRW5COztXQUVHO1FBQ00sd0JBQW1CLEdBQWdDLE1BQU0sQ0FBQztRQUVuRTs7V0FFRztRQUNNLFFBQUcsR0FBRyxDQUFDLENBQUM7UUFFakI7O1dBRUc7UUFDTSxRQUFHLEdBQUcsR0FBRyxDQUFDO1FBRW5COztXQUVHO1FBQ00sZUFBVSxHQUFHLElBQUksQ0FBQztRQUUzQjs7V0FFRztRQUNNLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBRS9COztXQUVHO1FBQ00scUJBQWdCLEdBQUcsQ0FBQyxDQUFDO0lBRWYsQ0FBQztJQUVoQjs7T0FFRztJQUNILGtCQUFrQjtRQUNoQixPQUFPLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixrQkFBa0IsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQy9FLENBQUM7SUFFRDs7T0FFRztJQUNILDJCQUEyQjtRQUN6QixPQUFPLElBQUksQ0FBQyxtQkFBbUIsS0FBSyxPQUFPLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLGlCQUFpQix5QkFBeUIsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQ3hHLENBQUM7SUFFRDs7T0FFRztJQUNILGlCQUFpQjtRQUNmLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ3pCLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQztTQUNqQjthQUFNLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ2hDLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQztTQUNqQjthQUFNO1lBQ0wsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO1NBQ25CO0lBQ0gsQ0FBQztJQUVEOztPQUVHO0lBQ0gsc0JBQXNCO1FBQ3BCLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFO1lBQ3pCLE9BQU8sR0FBRyxDQUFDO1NBQ1o7YUFBTSxJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsRUFBRTtZQUNoQyxPQUFPLEtBQUssQ0FBQztTQUNkO1FBQ0QsT0FBTyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0lBQ3RILENBQUM7K0dBcEZVLGlCQUFpQjttR0FBakIsaUJBQWlCLHVSQ2I5QixxckJBbUJBLDJDRFJZLFlBQVksbU5BSFYsQ0FBQyxpQkFBaUIsQ0FBQyxZQUFZLENBQUM7OzRGQUtqQyxpQkFBaUI7a0JBVDdCLFNBQVM7K0JBQ0UsYUFBYSxtQkFFTix1QkFBdUIsQ0FBQyxNQUFNLGNBQ25DLENBQUMsaUJBQWlCLENBQUMsWUFBWSxDQUFDLGlCQUM3QixpQkFBaUIsQ0FBQyxJQUFJLGNBQ3pCLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzswRUFXZCxLQUFLO3NCQUFiLEtBQUs7Z0JBSUcsS0FBSztzQkFBYixLQUFLO2dCQUtHLG1CQUFtQjtzQkFBM0IsS0FBSztnQkFLRyxHQUFHO3NCQUFYLEtBQUs7Z0JBS0csR0FBRztzQkFBWCxLQUFLO2dCQUtHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBS0csYUFBYTtzQkFBckIsS0FBSztnQkFLRyxnQkFBZ0I7c0JBQXhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQcm9ncmVzc0FuaW1hdGlvbiB9IGZyb20gJy4vcHJvZ3Jlc3MuYW5pbWF0aW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmotcHJvZ3Jlc3MnLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZ3Jlc3MuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgYW5pbWF0aW9uczogW1Byb2dyZXNzQW5pbWF0aW9uLnByb2dyZXNzRmlsbF0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdXG59KVxuZXhwb3J0IGNsYXNzIFByb2dyZXNzQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIHByaXZhdGUgcmVhZG9ubHkgcHJvZ3Jlc3NDbGFzc05hbWUgPSAnbmotcHJvZ3Jlc3MnO1xuXG4gIC8qKlxuICAgKiBMYWJlbCBvZiB0aGUgcHJvZ3Jlc3NiYXJcbiAgICovXG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBQcm9ncmVzcyB2YWx1ZVxuICAgKi9cbiAgQElucHV0KCkgdmFsdWUgPSAwO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIHByb2dyZXNzIGRlc2NyaXB0aW9uIGlzIHNob3duIG9uIHRoZSByaWdodC9ib3R0b20gb3IgaGlkZGVuXG4gICAqL1xuICBASW5wdXQoKSBkZXNjcmlwdGlvblBvc2l0aW9uOiAncmlnaHQnIHwgJ2JvdHRvbScgfCAnbm9uZScgPSAnbm9uZSc7XG5cbiAgLyoqXG4gICAqIFByb2dyZXNzIG1pblxuICAgKi9cbiAgQElucHV0KCkgbWluID0gMDtcblxuICAvKipcbiAgICogUHJvZ3Jlc3MgbWF4XG4gICAqL1xuICBASW5wdXQoKSBtYXggPSAxMDA7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgcHJvZ3Jlc3MgaXMgYW5pbWF0ZWQgYXQgZmlyc3QgcmVuZGVyXG4gICAqL1xuICBASW5wdXQoKSBpc0FuaW1hdGVkID0gdHJ1ZTtcblxuICAvKipcbiAgICogV2hldGhlciBwcm9ncmVzcyBoYXMgY3NzIHRyYW5zaXRpb25zIGZvciBwcm9ncmVzcyB3aWR0aFxuICAgKi9cbiAgQElucHV0KCkgaGFzVHJhbnNpdGlvbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBEZWNpbWFsIHByZWNpc2lvbiBvZiB0aGUgZGVzY3JpcHRpb24gdGV4dFxuICAgKi9cbiAgQElucHV0KCkgZGVjaW1hbFByZWNpc2lvbiA9IDA7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBnZXRUcmFuc2l0aW9uQ2xhc3MoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5oYXNUcmFuc2l0aW9uID8gYCR7dGhpcy5wcm9ncmVzc0NsYXNzTmFtZX0tLWhhcy10cmFuc2l0aW9uYCA6ICcnO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGdldERlc2NyaXB0aW9uUG9zaXRpb25DbGFzcygpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmRlc2NyaXB0aW9uUG9zaXRpb24gPT09ICdyaWdodCcgPyBgJHt0aGlzLnByb2dyZXNzQ2xhc3NOYW1lfS0taGFzLXJpZ2h0LWRlc2NyaXB0aW9uYCA6ICcnO1xuICB9XG5cbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIGdldEZvcm1hdHRlZFZhbHVlKCk6IG51bWJlciB7XG4gICAgaWYgKHRoaXMudmFsdWUgPiB0aGlzLm1heCkge1xuICAgICAgcmV0dXJuIHRoaXMubWF4O1xuICAgIH0gZWxzZSBpZiAodGhpcy52YWx1ZSA8IHRoaXMubWluKSB7XG4gICAgICByZXR1cm4gdGhpcy5taW47XG4gICAgfSBlbHNlIHtcbiAgICAgIHJldHVybiB0aGlzLnZhbHVlO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBnZXRGb3JtYXR0ZWRQZXJjZW50YWdlKCk6IHN0cmluZyB7XG4gICAgaWYgKHRoaXMudmFsdWUgPCB0aGlzLm1pbikge1xuICAgICAgcmV0dXJuICcwJztcbiAgICB9IGVsc2UgaWYgKHRoaXMudmFsdWUgPiB0aGlzLm1heCkge1xuICAgICAgcmV0dXJuICcxMDAnO1xuICAgIH1cbiAgICByZXR1cm4gTnVtYmVyKCgodGhpcy5nZXRGb3JtYXR0ZWRWYWx1ZSgpIC0gdGhpcy5taW4pIC8gKHRoaXMubWF4IC0gdGhpcy5taW4pKSAqIDEwMCkudG9GaXhlZCh0aGlzLmRlY2ltYWxQcmVjaXNpb24pO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibmotcHJvZ3Jlc3NcIlxuICAgICByb2xlPVwicHJvZ3Jlc3NiYXJcIlxuICAgICBbbmdDbGFzc109XCJbZ2V0VHJhbnNpdGlvbkNsYXNzKCksIGdldERlc2NyaXB0aW9uUG9zaXRpb25DbGFzcygpXVwiXG4gICAgICpuZ0lmPVwiZ2V0Rm9ybWF0dGVkUGVyY2VudGFnZSgpIGFzIHBlcmNlbnRhZ2VcIlxuICAgICBbYXR0ci5hcmlhLXZhbHVlbm93XT1cInZhbHVlXCJcbiAgICAgW2F0dHIuYXJpYS12YWx1ZW1pbl09XCJtaW5cIlxuICAgICBbYXR0ci5hcmlhLXZhbHVlbWF4XT1cIm1heFwiXG4gICAgIFthdHRyLmFyaWEtbGFiZWxdPVwibGFiZWxcIj5cbiAgPGRpdiBjbGFzcz1cIm5qLXByb2dyZXNzX19iYXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwibmotcHJvZ3Jlc3NfX2luZGljYXRvclwiXG4gICAgICAgICBbc3R5bGUud2lkdGguJV09XCJwZXJjZW50YWdlXCJcbiAgICAgICAgIEBwcm9ncmVzc0ZpbGxcbiAgICAgICAgIFtALmRpc2FibGVkXT1cIiFpc0FuaW1hdGVkXCI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGFyaWEtaGlkZGVuPVwidHJ1ZVwiIGNsYXNzPVwibmotcHJvZ3Jlc3NfX2Rlc2NyaXB0aW9uXCIgKm5nSWY9XCJkZXNjcmlwdGlvblBvc2l0aW9uICE9PSAnbm9uZSdcIj5cbiAgICB7e2dldEZvcm1hdHRlZFBlcmNlbnRhZ2UoKX19JVxuICA8L2Rpdj5cbjwvZGl2PlxuIl19