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
TypeScript
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;
}