UNPKG

igniteui-angular

Version:

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

378 lines (377 loc) 12.7 kB
import { EventEmitter, Renderer2, AfterContentInit, ChangeDetectorRef, NgZone } from '@angular/core'; import { IgxProgressBarTextTemplateDirective, IgxProgressBarGradientDirective } from './progressbar.common'; import { IBaseEventArgs } from '../core/utils'; import * as i0 from "@angular/core"; export declare const IgxTextAlign: { START: "start"; CENTER: "center"; END: "end"; }; export type IgxTextAlign = (typeof IgxTextAlign)[keyof typeof IgxTextAlign]; export declare const IgxProgressType: { ERROR: "error"; INFO: "info"; WARNING: "warning"; SUCCESS: "success"; }; export type IgxProgressType = (typeof IgxProgressType)[keyof typeof IgxProgressType]; export interface IChangeProgressEventArgs extends IBaseEventArgs { previousValue: number; currentValue: number; } export declare const valueInRange: (value: number, max: number, min?: number) => number; /** * @hidden */ export declare abstract class BaseProgressDirective { /** * An event, which is triggered after progress is changed. * ```typescript * public progressChange(event) { * alert("Progress made!"); * } * //... * ``` * ```html * <igx-circular-bar (progressChanged)="progressChange($event)"></igx-circular-bar> * <igx-linear-bar (progressChanged)="progressChange($event)"></igx-linear-bar> * ``` */ progressChanged: EventEmitter<IChangeProgressEventArgs>; /** * Sets/Gets progressbar animation duration. By default, it is 2000ms. * ```html * <igx-linear-bar [animationDuration]="3000"></igx-linear-bar> * <igx-circular-bar [animationDuration]="3000"></igx-linear-bar> * ``` */ animationDuration: number; protected _contentInit: boolean; protected _indeterminate: boolean; protected _text: string; protected _max: number; protected _value: number; protected _animate: boolean; protected _step: number; protected _fraction: number; protected _integer: number; protected _cdr: ChangeDetectorRef; protected _zone: NgZone; /** * Sets progressbar in indeterminate. By default, it is set to false. * ```html * <igx-linear-bar [indeterminate]="true"></igx-linear-bar> * <igx-circular-bar [indeterminate]="true"></igx-circular-bar> * ``` */ set indeterminate(isIndeterminate: boolean); /** * Gets the current state of the progress bar: * - `true` if in the indeterminate state (no progress value displayed), * - `false` if the progress bar shows the actual progress. * * ```typescript * const isIndeterminate = progressBar.indeterminate; * ``` */ get indeterminate(): boolean; /** * Returns the value which update the progress indicator of the `progress bar`. * ```typescript * @ViewChild("MyProgressBar") * public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; * public stepValue(event) { * let step = this.progressBar.step; * alert(step); * } * ``` */ get step(): number; /** * Sets the value by which progress indicator is updated. By default, it is 1. * ```html * <igx-linear-bar [step]="1"></igx-linear-bar> * <igx-circular-bar [step]="1"></igx-circular-bar> * ``` */ set step(val: number); /** * Set a custom text. This will hide the counter value. * ```html * <igx-circular-bar text="my text"></igx-circular-bar> * ``` */ set text(value: string); /** * Gets a custom text. * ```typescript * let text = this.circularBar.text; * ``` */ get text(): string; /** * Animating the progress. By default, it is set to true. * ```html * <igx-linear-bar [animate]="false"></igx-linear-bar> * <igx-circular-bar [animate]="false"></igx-circular-bar> * ``` */ set animate(animate: boolean); /** * Returns whether the `progress bar` has animation true/false. * ```typescript * @ViewChild("MyProgressBar") * public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; * public animationStatus(event) { * let animationStatus = this.progressBar.animate; * alert(animationStatus); * } * ``` */ get animate(): boolean; /** * Set maximum value that can be passed. By default it is set to 100. * ```html * <igx-linear-bar [max]="200"></igx-linear-bar> * <igx-circular-bar [max]="200"></igx-circular-bar> * ``` */ set max(maxNum: number); /** * Returns the maximum progress value of the `progress bar`. * ```typescript * @ViewChild("MyProgressBar") * public progressBar: IgxLinearProgressBarComponent | IgxCircularBarComponent; * public maxValue(event) { * let max = this.progressBar.max; * alert(max); * } * ``` */ get max(): number; private get progressInteger(); private get progressFraction(); private get progressWhole(); private get transitionDuration(); /** * @hidden */ protected get hasFraction(): boolean; /** * Returns the `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` value in percentage. * ```typescript * @ViewChild("MyProgressBar") * public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent * public valuePercent(event){ * let percentValue = this.progressBar.valueInPercent; * alert(percentValue); * } * ``` */ get valueInPercent(): number; /** * Returns value that indicates the current `IgxLinearProgressBarComponent`/`IgxCircularProgressBarComponent` position. * ```typescript * @ViewChild("MyProgressBar") * public progressBar: IgxLinearProgressBarComponent / IgxCircularProgressBarComponent; * public getValue(event) { * let value = this.progressBar.value; * alert(value); * } * ``` */ get value(): number; /** * @hidden */ protected _updateProgressValues(): void; private _resetCounterValues; /** * Set value that indicates the current `IgxLinearProgressBarComponent / IgxCircularProgressBarComponent` position. * ```html * <igx-linear-bar [value]="50"></igx-linear-bar> * <igx-circular-bar [value]="50"></igx-circular-bar> * ``` */ set value(val: number); static ɵfac: i0.ɵɵFactoryDeclaration<BaseProgressDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<BaseProgressDirective, never, never, { "animationDuration": { "alias": "animationDuration"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "step": { "alias": "step"; "required": false; }; "text": { "alias": "text"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "progressChanged": "progressChanged"; }, never, never, true, never>; static ngAcceptInputType_indeterminate: unknown; static ngAcceptInputType_animate: unknown; } export declare class IgxLinearProgressBarComponent extends BaseProgressDirective implements AfterContentInit { valueMin: number; cssClass: string; /** * Set `IgxLinearProgressBarComponent` to have striped style. By default it is set to false. * ```html * <igx-linear-bar [striped]="true" [max]="200" [value]="50"></igx-linear-bar> * ``` */ striped: boolean; /** * @hidden * ``` */ get isIndeterminate(): boolean; /** * Sets the value of the `role` attribute. If not provided it will be automatically set to `progressbar`. * ```html * <igx-linear-bar role="progressbar"></igx-linear-bar> * ``` */ role: string; /** * Sets the value of `id` attribute. If not provided it will be automatically generated. * ```html * <igx-linear-bar [id]="'igx-linear-bar-55'" [striped]="true" [max]="200" [value]="50"></igx-linear-bar> * ``` */ id: string; /** * @hidden */ get disableAnimationClass(): boolean; /** * @hidden */ get hasText(): boolean; /** * Set the position that defines where the text is aligned. * Possible options - `IgxTextAlign.START` (default), `IgxTextAlign.CENTER`, `IgxTextAlign.END`. * ```typescript * public positionCenter: IgxTextAlign; * public ngOnInit() { * this.positionCenter = IgxTextAlign.CENTER; * } * //... * ``` * ```html * <igx-linear-bar [textAlign]="positionCenter"></igx-linear-bar> * ``` */ textAlign: IgxTextAlign; /** * Set the text to be visible. By default, it is set to true. * ```html * <igx-linear-bar [textVisibility]="false"></igx-linear-bar> * ``` */ textVisibility: boolean; /** * Set the position that defines if the text should be aligned above the progress line. By default, is set to false. * ```html * <igx-linear-bar [textTop]="true"></igx-linear-bar> * ``` */ textTop: boolean; /** * Set type of the `IgxLinearProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `error`. * ```html * <igx-linear-bar [type]="'error'"></igx-linear-bar> * ``` */ type: string; /** * @hidden */ get error(): boolean; /** * @hidden */ get info(): boolean; /** * @hidden */ get warning(): boolean; /** * @hidden */ get success(): boolean; ngAfterContentInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration<IgxLinearProgressBarComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxLinearProgressBarComponent, "igx-linear-bar", never, { "striped": { "alias": "striped"; "required": false; }; "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "textAlign": { "alias": "textAlign"; "required": false; }; "textVisibility": { "alias": "textVisibility"; "required": false; }; "textTop": { "alias": "textTop"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, never, never, true, never>; static ngAcceptInputType_striped: unknown; static ngAcceptInputType_textVisibility: unknown; static ngAcceptInputType_textTop: unknown; } export declare class IgxCircularProgressBarComponent extends BaseProgressDirective implements AfterContentInit { private renderer; /** * @hidden */ cssClass: string; /** * Sets the value of `id` attribute. If not provided it will be automatically generated. * ```html * <igx-circular-bar [id]="'igx-circular-bar-55'"></igx-circular-bar> * ``` */ id: string; /** * @hidden */ get isIndeterminate(): boolean; /** * @hidden */ get disableAnimationClass(): boolean; /** * @hidden */ get hasText(): boolean; /** * Sets the text visibility. By default, it is set to true. * ```html * <igx-circular-bar [textVisibility]="false"></igx-circular-bar> * ``` */ textVisibility: boolean; textTemplate: IgxProgressBarTextTemplateDirective; gradientTemplate: IgxProgressBarGradientDirective; private _svgCircle; /** * @hidden */ gradientId: string; /** * @hidden */ get context(): any; /** * @hidden */ get textContent(): string; constructor(renderer: Renderer2); /** * Set type of the `IgxCircularProgressBarComponent`. Possible options - `default`, `success`, `info`, `warning`, and `error`. * ```html * <igx-circular-bar [type]="'error'"></igx-circular-bar> * ``` */ type: string; /** * @hidden */ get error(): boolean; /** * @hidden */ get info(): boolean; /** * @hidden */ get warning(): boolean; /** * @hidden */ get success(): boolean; /** * @hidden */ get strokeStyle(): string; ngAfterContentInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration<IgxCircularProgressBarComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxCircularProgressBarComponent, "igx-circular-bar", never, { "id": { "alias": "id"; "required": false; }; "textVisibility": { "alias": "textVisibility"; "required": false; }; "type": { "alias": "type"; "required": false; }; }, {}, ["textTemplate", "gradientTemplate"], never, true, never>; static ngAcceptInputType_textVisibility: unknown; }