@progress/kendo-angular-progressbar
Version:
Kendo UI Angular component starter template
133 lines (132 loc) • 4.9 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { AnimationEndEvent } from '../types/animation-end-event';
import { CircularProgressbarCenterTemplateDirective } from './center-template.directive';
import { CenterTemplateContext } from './models/center-template-context.interface';
import { ProgressColor } from './models/circular-progressbar-progress-color-interface';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI Circular ProgressBar component for Angular]({% slug overview_circularprogressbar %}).
*
* @example
* ```typescript
* import { Component } from '@angular/core';
*
* @Component({
* selector: 'my-app',
* template: `
* <kendo-circularprogressbar
* [value]="currentValue"
* [max]="100"
* [animation]="true">
* </kendo-circularprogressbar>
* `
* })
* export class AppComponent {
* public currentValue: number = 65;
* }
* ```
*
* @remarks
* Supported children components are: {@link ProgressBarCustomMessagesComponent}
*/
export declare class CircularProgressBarComponent implements AfterViewInit, OnChanges, OnDestroy {
private renderer;
private cdr;
private localization;
private element;
private zone;
hostClasses: boolean;
get ariaMinAttribute(): string;
get ariaMaxAttribute(): string;
get ariaValueAttribute(): string;
roleAttribute: string;
/**
* Sets the default value of the Circular ProgressBar between `min` and `max`.
*
* @default 0
*/
set value(value: number);
get value(): number;
/**
* Sets the maximum value which the Circular ProgressBar can accept.
*
* @default 100
*/
set max(max: number);
get max(): number;
/**
* Sets the minimum value which the Circular ProgressBar can accept.
*
* @default 0
*/
set min(min: number);
get min(): number;
/**
* Specifies whether to play an animation when the value changes.
*
* @default false
*/
animation: boolean;
/**
* Sets the opacity of the value arc.
*
* @default 1
*/
opacity: number;
/**
* Puts the Circular ProgressBar in indeterminate state.
*
* @default false
*/
set indeterminate(indeterminate: boolean);
get indeterminate(): boolean;
/**
* Configures the pointer color. You can set it to a single color string or customize it per progress stages.
*/
progressColor: string | ProgressColor[];
/**
* Fires when the animation that indicates the latest value change completes.
*/
animationEnd: EventEmitter<AnimationEndEvent>;
progress: ElementRef;
scale: ElementRef;
labelElement: ElementRef;
surface: ElementRef;
centerTemplate: CircularProgressbarCenterTemplateDirective;
centerTemplateContext: CenterTemplateContext;
private _indeterminate;
private _max;
private _min;
private _value;
private previousValue;
private internalValue;
private rtl;
private subscriptions;
constructor(renderer: Renderer2, cdr: ChangeDetectorRef, localization: LocalizationService, element: ElementRef, zone: NgZone);
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* @hidden
*/
onResize(): void;
private initProgressArc;
private calculateProgress;
private progressbarAnimation;
private setStyles;
private indeterminateState;
private updateCenterTemplate;
private positionLabel;
private get currentColor();
private updateProgressColor;
private handleErrors;
private setDirection;
private rtlChange;
static ɵfac: i0.ɵɵFactoryDeclaration<CircularProgressBarComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CircularProgressBarComponent, "kendo-circularprogressbar", ["kendoCircularProgressBar"], { "value": { "alias": "value"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "progressColor": { "alias": "progressColor"; "required": false; }; }, { "animationEnd": "animationEnd"; }, ["centerTemplate"], never, true, never>;
}