@progress/kendo-angular-progressbar
Version:
Kendo UI Angular component starter template
122 lines (121 loc) • 4.64 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
* ```ts-preview
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-circularprogressbar [value]="value"></kendo-circularprogressbar>
* `
* })
* class AppComponent {
* public value: number = 50;
* }
* ```
*/
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;
/**
* The maximum value which the Circular Progressbar can accept.
*
* @default 100
*/
set max(max: number);
get max(): number;
/**
* The minimum value which the Circular Progressbar can accept.
*
* @default 0
*/
set min(min: number);
get min(): number;
/**
* Indicates whether an animation will be played on value changes.
*
* @default false
*/
animation: boolean;
/**
* 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. Could be set to a single color string or customized per progress stages.
*/
progressColor: string | ProgressColor[];
/**
* Fires when the animation which indicates the latest value change is completed.
*/
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>;
}