gentics-ui-core/components/progress-bar/progress-bar.component.d.ts

This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.

import { ElementRef, NgZone, OnDestroy } from '@angular/core';
import { Subscribable } from 'rxjs';
import * as i0 from "@angular/core";
/**
 * A progress bar that attachs to the top of the parent container and can be used to display activity or progress.
 * It can be used for determinate tasks with a known duration and an exact progress
 * or for indeterminate tasks for which only start/end calls exist, e.g. an xhr call.
 *
 * ```html
 * <!-- progress bar without a known progress duration (indeterminate) -->
 * <gtx-progress-bar [active]="isLoadingData"></gtx-progress-bar>
 *
 * <!-- progress bar for tasks where the progress is known (determinate)-->
 * <gtx-progress-bar [active]="isUploadingFile" [progress]="uploadProgress"></gtx-progress-bar>
 *
 * <!-- progress bar for a Promise or Observable -->
 * <gtx-progress-bar [for]="backgroundProgress$"></gtx-progress-bar>
 * ```
 *
 * ## Using the progress bar with observables
 *
 * When an observable is assigned to the ProgressBar with "for", the observable should emit numbers
 * in the range [0..1] for a determinate progress bar or boolean values for indeterminate progress.
 * This will instantly animate the progress bar instead of relying on angular change detection.
 *
 * ```html
 * <gtx-progress-bar [for]="uploadProgress$"></gtx-progress-bar>
 * <gtx-progress-bar [for]="anythingLoading$"></gtx-progress-bar>
 * ```
 * ```typescript
 * class MyComponent {
 *     uploadProgress$: Observable<number>;
 *     anythingLoading$: Observable<boolean>;
 * }
 * ```
 *
 * ## Using the progress bar programmatically inside another component
 *
 * The ProgressBar instance exposes two public methods, `start()`, `complete()` which can be used
 * to manually control the progress bar visibility and progress in a parent component.
 *
 * ```typescript
 * export class App {
 *   @ViewChild(ProgressBar)
 *   private progressBar: ProgressBar;
 *
 *   loadUserData() {
 *     this.progressBar.start();
 *     restclient.get('/users', (response, users) => {
 *       this.progressBar.complete();
 *       if (users) {
 *         doSomethingWith(users);
 *       } else {
 *         handleError(response);
 *       }
 *     });
 *   }
 * }
 * ```
 */
export declare class ProgressBar implements OnDestroy {
    private zone;
    /**
     * Shows or hides the progress bar. When no "progress" value
     * is provided, the progress bar is in "indeterminate" mode
     * and grows until "active" is set to false.
     */
    get active(): boolean;
    set active(active: boolean);
    /**
     * Sets the progress of the progress bar as a fraction [0...1].
     * When set, the progress bar is in "determinate" mode and will only update
     * when the "progress" value changes or `complete()` is called.
     */
    set progress(progress: number);
    /**
     * Sets the speed of the indeterminate animation required to reach
     * 50% of the progress bar. Accepts values like "500ms", "0.5s", 500.
     * *Default: 500ms*
     */
    set speed(speed: string | number);
    /**
     * Automatically starts, stops and updates the progress bar for a Promise
     * or when an Observable emits values or completes.
     */
    set for(promiseOrObservable: PromiseLike<any> | Subscribable<number> | Subscribable<boolean>);
    progressBarWrapper: ElementRef;
    progressIndicator: ElementRef;
    private isActive;
    private progressPercentage;
    private indeterminateSpeed;
    private determinate;
    private animationRequest;
    private lastAnimationFrame;
    private removePendingHandler;
    private cleanupSubscription;
    private currentPromiseOrObservable;
    private wrapperClasses;
    constructor(zone: NgZone);
    ngAfterViewInit(): void;
    /** Starts showing the progress bar in "indeterminate" mode. */
    start(): void;
    /** Starts animating the progress bar, animates as "finished" when the passed Promise resolves. */
    start(promise: PromiseLike<any>): void;
    /** Animates the progress bar by discrete values ([0...1]) emitted by the passed observable. */
    start(progressObservable: Subscribable<number>): void;
    /**
     * Animates the progress bar based on the values emitted by the passed observable.
     * `true` animates as "active", `false` as "completed".
     */
    start(progressObservable: Subscribable<boolean>): void;
    start(promiseOrObservable?: PromiseLike<any> | Subscribable<number> | Subscribable<boolean>): void;
    /**
     * Animates the progress bar to 100% and hides it
     */
    complete(): void;
    ngOnDestroy(): void;
    private cleanup;
    private fadeOutProgressBar;
    private setProgressBarWidth;
    private transitionTo100Percent;
    private animateIndeterminate;
    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBar, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBar, "gtx-progress-bar", never, { "active": "active"; "progress": "progress"; "speed": "speed"; "for": "for"; }, {}, never, never>;
}