ngx-progressbar
Version:
<p align="center"> <img height="200px" width="200px" style="text-align: center;" src="https://rawcdn.githack.com/MurhafSousli/ngx-progressbar/e5f30ba33c83690da3249ef2a665e6168b8caeb1/projects/ngx-progressbar-demo/src/assets/logo.svg"> <h1 align="cen
263 lines (255 loc) • 19.4 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, numberAttribute, inject, input, computed, signal, output, effect, untracked, Directive, booleanAttribute, Component, ChangeDetectionStrategy } from '@angular/core';
import { outputToObservable } from '@angular/core/rxjs-interop';
import { BehaviorSubject, filter, switchMap, timer, tap, EMPTY, of, delay, finalize, takeUntil } from 'rxjs';
const defaultOptions = {
min: 8,
max: 100,
speed: 200,
debounceTime: 0,
trickleSpeed: 300,
fadeOutSpeed: 50,
relative: false,
flat: false,
spinner: false,
direction: 'ltr+',
spinnerPosition: 'right',
trickleFunc: (n) => {
if (n >= 0 && n < 20) {
return 10;
}
if (n >= 20 && n < 50) {
return 4;
}
if (n >= 50 && n < 80) {
return 2;
}
if (n >= 80 && n < 99) {
return 0.5;
}
return 0;
}
};
const NG_PROGRESS_OPTIONS = new InjectionToken('NG_PROGRESS_OPTIONS', {
providedIn: 'root',
factory: () => defaultOptions
});
function provideNgProgressOptions(options) {
return {
provide: NG_PROGRESS_OPTIONS,
useValue: { ...defaultOptions, ...options }
};
}
var TriggerType;
(function (TriggerType) {
TriggerType["START"] = "START";
TriggerType["COMPLETE"] = "COMPLETE";
})(TriggerType || (TriggerType = {}));
function minAttribute(value) {
const min = numberAttribute(value) || 0;
return (min < 100 && min >= 0) ? min : 0;
}
function maxAttribute(value) {
const max = numberAttribute(value) || 100;
return (max > 0 && max <= 100) ? max : 100;
}
class NgProgressRef {
constructor() {
this.defaultOptions = inject(NG_PROGRESS_OPTIONS);
this.min = input(this.defaultOptions.min, { transform: minAttribute });
this.max = input(this.defaultOptions.max, { transform: maxAttribute });
this.speed = input(this.defaultOptions.speed, { transform: numberAttribute });
this.trickleSpeed = input(this.defaultOptions.trickleSpeed, { transform: numberAttribute });
this.fadeOutSpeed = input(this.defaultOptions.fadeOutSpeed, { transform: numberAttribute });
this.debounceTime = input(this.defaultOptions.debounceTime, { transform: numberAttribute });
this.trickleFunc = input(this.defaultOptions.trickleFunc);
this.config = computed(() => {
return {
max: this.max(),
min: this.min(),
speed: this.speed(),
trickleSpeed: this.trickleSpeed(),
fadeOutSpeed: this.fadeOutSpeed(),
trickleFunc: this.trickleFunc(),
debounceTime: this.debounceTime()
};
});
this._progress = signal(0);
this._active = signal(false);
this.active = computed(() => this._active());
this.progress = computed(() => this._progress());
// Progress start source event (used to cancel onComplete delays)
this.started = output();
// Progress ended source event
this.completed = output();
this._trigger = new BehaviorSubject(null);
let sub$;
effect((onCleanup) => {
const config = this.config();
untracked(() => {
sub$ = this._trigger.pipe(filter((trigger) => !!trigger), switchMap((trigger) => {
if (trigger === TriggerType.START) {
return timer(config.debounceTime).pipe(switchMap(() => this.onTrickling(config)));
}
return this.onComplete(config);
})).subscribe();
onCleanup(() => sub$?.unsubscribe());
});
});
}
/**
* Start the progress
*/
start() {
this.started.emit();
this._trigger.next(TriggerType.START);
this._active.set(true);
}
/**
* Complete the progress
*/
complete() {
this._trigger.next(TriggerType.COMPLETE);
}
/**
* Increment the progress
*/
inc(amount) {
const n = this.progress();
if (!this.active()) {
this.start();
}
else {
if (typeof amount !== 'number') {
amount = this.config().trickleFunc(n);
}
this.set(n + amount);
}
}
/**
* Set the progress
*/
set(n) {
this._active.set(true);
this._progress.set(this.clamp(n));
}
/**
* Clamps a value to be between min and max
*/
clamp(n) {
return Math.max(this.config().min, Math.min(this.config().max, n));
}
/**
* Keeps incrementing the progress
*/
onTrickling(config) {
if (!this.active()) {
this.set(config.min);
}
return timer(0, config.trickleSpeed).pipe(tap(() => this.inc()));
}
/**
* Completes then resets the progress
*/
onComplete(config) {
// If it's not active no need to complete
if (!this.active()) {
return EMPTY;
}
// Emit completed
this.completed.emit();
return of({}).pipe(
// Complete the progress
tap(() => this._progress.set(100)),
// Deactivate the progress after a tiny delay
delay(config.speed + 140), tap(() => this._active.set(false)),
// Use a tiny delay before resetting
delay(config.fadeOutSpeed),
// Force the progress to reset even it got cancelled
finalize(() => this._progress.set(0)),
// Cancel any of the finalizing delays if the progress has started again
takeUntil(outputToObservable(this.started)));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgProgressRef, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: NgProgressRef, isStandalone: true, selector: "[ngProgressRef]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, trickleSpeed: { classPropertyName: "trickleSpeed", publicName: "trickleSpeed", isSignal: true, isRequired: false, transformFunction: null }, fadeOutSpeed: { classPropertyName: "fadeOutSpeed", publicName: "fadeOutSpeed", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, trickleFunc: { classPropertyName: "trickleFunc", publicName: "trickleFunc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { started: "started", completed: "completed" }, exportAs: ["ngProgressRef"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgProgressRef, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[ngProgressRef]',
exportAs: 'ngProgressRef'
}]
}], ctorParameters: () => [] });
class NgProgressbar {
constructor() {
this.config = inject(NG_PROGRESS_OPTIONS);
/** Progress bar worker */
this.progressRef = inject(NgProgressRef, { host: true, self: true });
this.flat = input(this.config.flat, { transform: booleanAttribute });
this.spinner = input(this.config.spinner, { transform: booleanAttribute });
this.relative = input(this.config.relative, { transform: booleanAttribute });
this.spinnerPosition = input(this.config.spinnerPosition);
this.direction = input(this.config.direction);
this.progressTransform = computed(() => {
return `translate3d(${this.progressRef.progress()}%,0,0)`;
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgProgressbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgProgressbar, isStandalone: true, selector: "ng-progress", inputs: { flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, spinner: { classPropertyName: "spinner", publicName: "spinner", isSignal: true, isRequired: false, transformFunction: null }, relative: { classPropertyName: "relative", publicName: "relative", isSignal: true, isRequired: false, transformFunction: null }, spinnerPosition: { classPropertyName: "spinnerPosition", publicName: "spinnerPosition", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class.ng-progress-bar": "true", "class.ng-progress-bar-active": "progressRef.active()", "class.ng-progress-bar-relative": "relative()", "attr.spinnerPosition": "spinnerPosition()", "attr.direction": "direction()", "style.--_ng-progress-speed": "progressRef.speed() + \"ms\"", "style.--_ng-progress-fade-out-speed": "progressRef.fadeOutSpeed() + \"ms\"" } }, exportAs: ["ngProgress"], hostDirectives: [{ directive: NgProgressRef, inputs: ["min", "min", "max", "max", "speed", "speed", "trickleSpeed", "trickleSpeed", "fadeOutSpeed", "fadeOutSpeed", "debounceTime", "debounceTime"], outputs: ["started", "started", "completed", "completed"] }], ngImport: i0, template: `
<div class="ng-progress-bar-wrapper">
<div class="ng-bar-placeholder">
<div class="ng-bar" [style.transform]="progressTransform()">
(!flat()) {
<div class="ng-meteor"></div>
}
</div>
</div>
(spinner()) {
<div class="ng-spinner">
<div class="ng-spinner-icon"></div>
</div>
}
</div>
`, isInline: true, styles: [":host{--_ng-progress-thickness: var(--ng-progress-thickness, 2);--_ng-progress-thickness-px: calc(var(--_ng-progress-thickness) * 1px);--_ng-progress-thickness-add-one: calc(var(--_ng-progress-thickness) + 1);--_ng-progress-meteor-position-px: calc(var(--_ng-progress-thickness-add-one) * -1px);--_ng-progress-color: var(--ng-progress-color, #1B95E0);--_ng-progress-holder-color: var(--ng-progress-holder-color, transparent);--_ng-progress-ease: var(--ng-progress-ease, linear);--_ng-progress-spinner-thickness: var(--ng-progress-spinner-thickness, 2);--_ng-progress-spinner-thickness-px: calc(var(--_ng-progress-spinner-thickness) * 1px);--_ng-progress-spinner-spacing: var(--ng-progress-spinner-spacing, 15);--_ng-progress-spinner-spacing-px: calc(var(--_ng-progress-spinner-spacing) * 1px);--_ng-progress-spinner-size: var(--ng-progress-spinner-size, 18);--_ng-progress-spinner-size-px: calc(var(--_ng-progress-spinner-size) * 1px);--_ng-progress-spinner-speed: var(--ng-progress-spinner-speed, .25s);z-index:999999;pointer-events:none}:host.ng-progress-bar-active .ng-progress-bar-wrapper{filter:alpha(opacity=100);opacity:1;transition:none}:host.ng-progress-bar-active .ng-bar{transition:all var(--_ng-progress-speed) var(--_ng-progress-ease)}:host.ng-progress-bar-relative .ng-progress-bar-wrapper{position:relative}:host[direction=\"ltr+\"] .ng-meteor,:host[direction=ltr-] .ng-meteor{rotate:calc(var(--_ng-progress-thickness-add-one) * 1deg)}:host[direction=\"ltr+\"] .ng-bar,:host[direction=\"rtl+\"] .ng-bar{margin-left:-100%}:host[direction=\"ltr+\"] .ng-meteor,:host[direction=\"rtl+\"] .ng-meteor{right:0}:host[direction=\"ltr+\"] .ng-meteor,:host[direction=rtl-] .ng-meteor{top:var(--_ng-progress-meteor-position-px)}:host[direction=ltr-] .ng-meteor,:host[direction=\"rtl+\"] .ng-meteor{bottom:var(--_ng-progress-meteor-position-px)}:host[direction=ltr-] .ng-bar-placeholder,:host[direction=\"rtl+\"] .ng-bar-placeholder{transform:rotate(180deg)}:host[direction=ltr-] .ng-spinner-icon,:host[direction=\"rtl+\"] .ng-spinner-icon{animation-direction:reverse}:host[direction=\"rtl+\"] .ng-meteor,:host[direction=rtl-] .ng-meteor{rotate:calc(var(--_ng-progress-thickness-add-one) * -1deg)}:host .ng-spinner{top:var(--_ng-progress-spinner-spacing-px)}:host[spinnerPosition=left] .ng-spinner{left:var(--_ng-progress-spinner-spacing-px)}:host[spinnerPosition=right] .ng-spinner{right:var(--_ng-progress-spinner-spacing-px)}.ng-progress-bar-wrapper{position:fixed;z-index:999999;top:0;left:0;width:100%;transform:scale(1);filter:alpha(opacity=0);opacity:0;transition:opacity var(--_ng-progress-fade-out-speed) linear}.ng-bar-placeholder{position:absolute;height:var(--_ng-progress-thickness-px);width:100%}.ng-bar{width:100%;height:100%;transform:translate(-100%,0,0);background:var(--_ng-progress-color)}.ng-meteor{display:block;position:absolute;width:100px;height:100%;opacity:1;box-shadow:0 0 10px var(--_ng-progress-color),0 0 5px var(--_ng-progress-color)}.ng-spinner{position:absolute;display:block;z-index:1031;top:10px}.ng-spinner-icon{box-sizing:border-box;animation:spinner-animation var(--_ng-progress-spinner-speed) linear infinite;border-style:solid;border-color:transparent;border-radius:50%;border-top-color:var(--_ng-progress-color);border-left-color:var(--_ng-progress-color);width:var(--_ng-progress-spinner-size-px);height:var(--_ng-progress-spinner-size-px);border-width:var(--_ng-progress-spinner-thickness-px)}@keyframes spinner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgProgressbar, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'ng-progress', exportAs: 'ngProgress', host: {
'role': 'progressbar',
'[class.ng-progress-bar]': 'true',
'[class.ng-progress-bar-active]': 'progressRef.active()',
'[class.ng-progress-bar-relative]': 'relative()',
'[attr.spinnerPosition]': 'spinnerPosition()',
'[attr.direction]': 'direction()',
'[style.--_ng-progress-speed]': 'progressRef.speed() + "ms"',
'[style.--_ng-progress-fade-out-speed]': 'progressRef.fadeOutSpeed() + "ms"'
}, hostDirectives: [{
directive: NgProgressRef,
inputs: ['min', 'max', 'speed', 'trickleSpeed', 'fadeOutSpeed', 'debounceTime'],
outputs: ['started', 'completed']
}], template: `
<div class="ng-progress-bar-wrapper">
<div class="ng-bar-placeholder">
<div class="ng-bar" [style.transform]="progressTransform()">
(!flat()) {
<div class="ng-meteor"></div>
}
</div>
</div>
(spinner()) {
<div class="ng-spinner">
<div class="ng-spinner-icon"></div>
</div>
}
</div>
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--_ng-progress-thickness: var(--ng-progress-thickness, 2);--_ng-progress-thickness-px: calc(var(--_ng-progress-thickness) * 1px);--_ng-progress-thickness-add-one: calc(var(--_ng-progress-thickness) + 1);--_ng-progress-meteor-position-px: calc(var(--_ng-progress-thickness-add-one) * -1px);--_ng-progress-color: var(--ng-progress-color, #1B95E0);--_ng-progress-holder-color: var(--ng-progress-holder-color, transparent);--_ng-progress-ease: var(--ng-progress-ease, linear);--_ng-progress-spinner-thickness: var(--ng-progress-spinner-thickness, 2);--_ng-progress-spinner-thickness-px: calc(var(--_ng-progress-spinner-thickness) * 1px);--_ng-progress-spinner-spacing: var(--ng-progress-spinner-spacing, 15);--_ng-progress-spinner-spacing-px: calc(var(--_ng-progress-spinner-spacing) * 1px);--_ng-progress-spinner-size: var(--ng-progress-spinner-size, 18);--_ng-progress-spinner-size-px: calc(var(--_ng-progress-spinner-size) * 1px);--_ng-progress-spinner-speed: var(--ng-progress-spinner-speed, .25s);z-index:999999;pointer-events:none}:host.ng-progress-bar-active .ng-progress-bar-wrapper{filter:alpha(opacity=100);opacity:1;transition:none}:host.ng-progress-bar-active .ng-bar{transition:all var(--_ng-progress-speed) var(--_ng-progress-ease)}:host.ng-progress-bar-relative .ng-progress-bar-wrapper{position:relative}:host[direction=\"ltr+\"] .ng-meteor,:host[direction=ltr-] .ng-meteor{rotate:calc(var(--_ng-progress-thickness-add-one) * 1deg)}:host[direction=\"ltr+\"] .ng-bar,:host[direction=\"rtl+\"] .ng-bar{margin-left:-100%}:host[direction=\"ltr+\"] .ng-meteor,:host[direction=\"rtl+\"] .ng-meteor{right:0}:host[direction=\"ltr+\"] .ng-meteor,:host[direction=rtl-] .ng-meteor{top:var(--_ng-progress-meteor-position-px)}:host[direction=ltr-] .ng-meteor,:host[direction=\"rtl+\"] .ng-meteor{bottom:var(--_ng-progress-meteor-position-px)}:host[direction=ltr-] .ng-bar-placeholder,:host[direction=\"rtl+\"] .ng-bar-placeholder{transform:rotate(180deg)}:host[direction=ltr-] .ng-spinner-icon,:host[direction=\"rtl+\"] .ng-spinner-icon{animation-direction:reverse}:host[direction=\"rtl+\"] .ng-meteor,:host[direction=rtl-] .ng-meteor{rotate:calc(var(--_ng-progress-thickness-add-one) * -1deg)}:host .ng-spinner{top:var(--_ng-progress-spinner-spacing-px)}:host[spinnerPosition=left] .ng-spinner{left:var(--_ng-progress-spinner-spacing-px)}:host[spinnerPosition=right] .ng-spinner{right:var(--_ng-progress-spinner-spacing-px)}.ng-progress-bar-wrapper{position:fixed;z-index:999999;top:0;left:0;width:100%;transform:scale(1);filter:alpha(opacity=0);opacity:0;transition:opacity var(--_ng-progress-fade-out-speed) linear}.ng-bar-placeholder{position:absolute;height:var(--_ng-progress-thickness-px);width:100%}.ng-bar{width:100%;height:100%;transform:translate(-100%,0,0);background:var(--_ng-progress-color)}.ng-meteor{display:block;position:absolute;width:100px;height:100%;opacity:1;box-shadow:0 0 10px var(--_ng-progress-color),0 0 5px var(--_ng-progress-color)}.ng-spinner{position:absolute;display:block;z-index:1031;top:10px}.ng-spinner-icon{box-sizing:border-box;animation:spinner-animation var(--_ng-progress-spinner-speed) linear infinite;border-style:solid;border-color:transparent;border-radius:50%;border-top-color:var(--_ng-progress-color);border-left-color:var(--_ng-progress-color);width:var(--_ng-progress-spinner-size-px);height:var(--_ng-progress-spinner-size-px);border-width:var(--_ng-progress-spinner-thickness-px)}@keyframes spinner-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
}] });
/*
* Public API Surface of ngx-progressbar
*/
/**
* Generated bundle index. Do not edit.
*/
export { NG_PROGRESS_OPTIONS, NgProgressRef, NgProgressbar, provideNgProgressOptions };
//# sourceMappingURL=ngx-progressbar.mjs.map