@progress/kendo-angular-progressbar 24.2.2-develop.9 → 25.0.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/progress-kendo-angular-progressbar.mjs +30 -30
- package/index.d.ts +720 -16
- package/package-metadata.mjs +2 -2
- package/package.json +9 -9
- package/chunk/chunk-progressbar.component.d.ts +0 -94
- package/circularprogressbar/center-template.directive.d.ts +0 -25
- package/circularprogressbar/circular-progressbar.component.d.ts +0 -132
- package/circularprogressbar/models/center-template-context.interface.d.ts +0 -17
- package/circularprogressbar/models/circular-progressbar-progress-color-interface.d.ts +0 -21
- package/common/constants.d.ts +0 -16
- package/common/localization/custom-messages.component.d.ts +0 -42
- package/common/localization/localized-messages.directive.d.ts +0 -16
- package/common/localization/messages.d.ts +0 -17
- package/common/progressbar-base.d.ts +0 -107
- package/common/util.d.ts +0 -60
- package/directives.d.ts +0 -71
- package/package-metadata.d.ts +0 -9
- package/progressbar.component.d.ts +0 -139
- package/progressbar.module.d.ts +0 -33
- package/types/animation-end-event.d.ts +0 -17
- package/types/animation-options.interface.d.ts +0 -14
- package/types/label-fn-type.d.ts +0 -10
- package/types/label-position.d.ts +0 -8
- package/types/label-settings.interface.d.ts +0 -32
- package/types/label-type.d.ts +0 -12
- package/types/progressbar-animation.interface.d.ts +0 -16
- package/types/progressbar-orientation.d.ts +0 -8
package/index.d.ts
CHANGED
|
@@ -2,19 +2,723 @@
|
|
|
2
2
|
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
5
|
+
import { LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n';
|
|
6
|
+
import * as i0 from '@angular/core';
|
|
7
|
+
import { OnChanges, ElementRef, Renderer2, SimpleChanges, EventEmitter, NgZone, TemplateRef, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
|
8
|
+
import { Subscription } from 'rxjs';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* The data for the `animationEnd` event.
|
|
12
|
+
*/
|
|
13
|
+
interface AnimationEndEvent {
|
|
14
|
+
/**
|
|
15
|
+
* The value from which the animation starts.
|
|
16
|
+
*/
|
|
17
|
+
from: number;
|
|
18
|
+
/**
|
|
19
|
+
* The value to which the animation runs.
|
|
20
|
+
*/
|
|
21
|
+
to: number;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Represents the orientation options of the ProgressBar component.
|
|
26
|
+
*/
|
|
27
|
+
type ProgressBarOrientation = 'horizontal' | 'vertical';
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* @hidden
|
|
31
|
+
*/
|
|
32
|
+
declare abstract class ProgressBarBase implements OnChanges {
|
|
33
|
+
protected elem: ElementRef;
|
|
34
|
+
protected renderer: Renderer2;
|
|
35
|
+
protected localization: LocalizationService;
|
|
36
|
+
hostClasses: boolean;
|
|
37
|
+
get isHorizontal(): boolean;
|
|
38
|
+
get isVertical(): boolean;
|
|
39
|
+
get disabledClass(): boolean;
|
|
40
|
+
get reverseClass(): boolean;
|
|
41
|
+
get indeterminateClass(): boolean;
|
|
42
|
+
get dirAttribute(): string;
|
|
43
|
+
roleAttribute: string;
|
|
44
|
+
get ariaMinAttribute(): string;
|
|
45
|
+
get ariaMaxAttribute(): string;
|
|
46
|
+
get ariaValueAttribute(): string;
|
|
47
|
+
/**
|
|
48
|
+
* The maximum value of the ProgressBar.
|
|
49
|
+
* Defaults to `100`.
|
|
50
|
+
*/
|
|
51
|
+
max: number;
|
|
52
|
+
/**
|
|
53
|
+
* The minimum value of the ProgressBar.
|
|
54
|
+
* Defaults to `0`.
|
|
55
|
+
*/
|
|
56
|
+
min: number;
|
|
57
|
+
/**
|
|
58
|
+
* The value of the ProgressBar.
|
|
59
|
+
* Has to be between `min` and `max`.
|
|
60
|
+
* By default, the value is equal to the `min` value.
|
|
61
|
+
*/
|
|
62
|
+
/**
|
|
63
|
+
* The value of the ProgressBar.
|
|
64
|
+
* Has to be between `min` and `max`.
|
|
65
|
+
* Defaults to `0`.
|
|
66
|
+
*/
|
|
67
|
+
value: number;
|
|
68
|
+
/**
|
|
69
|
+
* @hidden
|
|
70
|
+
*/
|
|
71
|
+
get isCompleted(): boolean;
|
|
72
|
+
/**
|
|
73
|
+
* @hidden
|
|
74
|
+
*/
|
|
75
|
+
get statusWidth(): number;
|
|
76
|
+
/**
|
|
77
|
+
* @hidden
|
|
78
|
+
*/
|
|
79
|
+
get statusHeight(): number;
|
|
80
|
+
/**
|
|
81
|
+
* @hidden
|
|
82
|
+
*/
|
|
83
|
+
get statusWrapperWidth(): number;
|
|
84
|
+
/**
|
|
85
|
+
* @hidden
|
|
86
|
+
*/
|
|
87
|
+
get statusWrapperHeight(): number;
|
|
88
|
+
protected get _progressRatio(): number;
|
|
89
|
+
/**
|
|
90
|
+
* Defines the orientation of the ProgressBar
|
|
91
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/orientation)).
|
|
92
|
+
* Defaults to `horizontal`.
|
|
93
|
+
*/
|
|
94
|
+
orientation: ProgressBarOrientation;
|
|
95
|
+
/**
|
|
96
|
+
* If set to `true`, the ProgressBar will be disabled
|
|
97
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/disabled)).
|
|
98
|
+
* It will still allow you to change its value.
|
|
99
|
+
* Defaults to `false`.
|
|
100
|
+
*/
|
|
101
|
+
disabled: boolean;
|
|
102
|
+
/**
|
|
103
|
+
* If set to `true`, the ProgressBar will be reversed
|
|
104
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/direction)).
|
|
105
|
+
* Defaults to `false`.
|
|
106
|
+
*/
|
|
107
|
+
reverse: boolean;
|
|
108
|
+
/**
|
|
109
|
+
* Sets the `indeterminate` state of the ProgressBar.
|
|
110
|
+
* Defaults to `false`.
|
|
111
|
+
*/
|
|
112
|
+
indeterminate: boolean;
|
|
113
|
+
protected direction: string;
|
|
114
|
+
protected localizationChangeSubscription: Subscription;
|
|
115
|
+
protected displayValue: number;
|
|
116
|
+
protected previousValue: number;
|
|
117
|
+
/**
|
|
118
|
+
* @hidden
|
|
119
|
+
*/
|
|
120
|
+
constructor(elem: ElementRef, renderer: Renderer2, localization: LocalizationService);
|
|
121
|
+
ngAfterViewInit(): void;
|
|
122
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
123
|
+
ngOnDestroy(): void;
|
|
124
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarBase, never>;
|
|
125
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarBase, "ng-component", never, { "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "value": { "alias": "value"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "reverse": { "alias": "reverse"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, {}, never, never, true, never>;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* The predefined label types.
|
|
130
|
+
*
|
|
131
|
+
* The supported values are:
|
|
132
|
+
* * `value`—Shows the current display value trimmed to the third decimal.
|
|
133
|
+
* * `percent`—Shows the calculated percentage value based on the current display value and the range defined by the `min` and `max` options.
|
|
134
|
+
*/
|
|
135
|
+
type LabelType = 'value' | 'percent';
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* The callback that returns the string content of the status label. You can access the current value as an argument.
|
|
139
|
+
* @param value - The currently set value.
|
|
140
|
+
* @returns The formatted string that displays within the label.
|
|
141
|
+
*/
|
|
142
|
+
type LabelFn = (value: number) => string;
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* The position where the status label displays when visible.
|
|
146
|
+
*/
|
|
147
|
+
type LabelPosition = 'start' | 'end' | 'center';
|
|
148
|
+
|
|
149
|
+
/**
|
|
150
|
+
* Represents the settings of the label that shows the progress status of the ProgressBar.
|
|
151
|
+
*
|
|
152
|
+
*/
|
|
153
|
+
interface LabelSettings {
|
|
154
|
+
/**
|
|
155
|
+
* Shows or hides the label for the progress status.
|
|
156
|
+
*/
|
|
157
|
+
visible?: boolean;
|
|
158
|
+
/**
|
|
159
|
+
* Sets the position of the progress status label.
|
|
160
|
+
* @default 'end'
|
|
161
|
+
*/
|
|
162
|
+
position?: LabelPosition;
|
|
163
|
+
/**
|
|
164
|
+
* Sets the format for rendering the value in the label.
|
|
165
|
+
* The supported preset types are `value` (default) and `percent`.
|
|
166
|
+
* You can also provide a callback that exposes the current value and returns
|
|
167
|
+
* the formatted string to display in the label
|
|
168
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/label#using-a-formatting-function)).
|
|
169
|
+
*
|
|
170
|
+
* @default 'value'
|
|
171
|
+
*/
|
|
172
|
+
format?: LabelType | LabelFn;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/**
|
|
176
|
+
* Represents the settings of the animation that indicates the progress status of the ProgressBar.
|
|
177
|
+
*
|
|
178
|
+
*/
|
|
179
|
+
interface ProgressBarAnimation {
|
|
180
|
+
/**
|
|
181
|
+
* Sets the duration of the animation in milliseconds.
|
|
182
|
+
*
|
|
183
|
+
* @default 400
|
|
184
|
+
*/
|
|
185
|
+
duration: number;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* Represents the [Kendo UI ProgressBar component for Angular](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar).
|
|
190
|
+
*
|
|
191
|
+
* @example
|
|
192
|
+
* ```typescript
|
|
193
|
+
* @Component({
|
|
194
|
+
* selector: 'my-app',
|
|
195
|
+
* template: `
|
|
196
|
+
* <kendo-progressbar [value]="value">
|
|
197
|
+
* </kendo-progressbar>
|
|
198
|
+
* `
|
|
199
|
+
* })
|
|
200
|
+
* class AppComponent {
|
|
201
|
+
* public value = 50;
|
|
202
|
+
* }
|
|
203
|
+
* ```
|
|
204
|
+
*
|
|
205
|
+
* @remarks
|
|
206
|
+
* Supported children components are: {@link ProgressBarCustomMessagesComponent}
|
|
207
|
+
*/
|
|
208
|
+
declare class ProgressBarComponent extends ProgressBarBase {
|
|
209
|
+
localization: LocalizationService;
|
|
210
|
+
elem: ElementRef;
|
|
211
|
+
renderer: Renderer2;
|
|
212
|
+
private zone;
|
|
213
|
+
/**
|
|
214
|
+
* Determines whether the status label displays.
|
|
215
|
+
* @default true
|
|
216
|
+
*/
|
|
217
|
+
label: boolean | LabelSettings;
|
|
218
|
+
/**
|
|
219
|
+
* Sets the CSS styles that will be rendered on the inner element, which represents the full portion of the progress bar
|
|
220
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/appearance)).
|
|
221
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
222
|
+
*/
|
|
223
|
+
progressCssStyle: {
|
|
224
|
+
[key: string]: string;
|
|
225
|
+
};
|
|
226
|
+
/**
|
|
227
|
+
* The CSS classes that render on the inner element which represents the full portion of the progress bar
|
|
228
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/appearance)).
|
|
229
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
230
|
+
*/
|
|
231
|
+
progressCssClass: string | string[] | Set<string> | {
|
|
232
|
+
[key: string]: any;
|
|
233
|
+
};
|
|
234
|
+
/**
|
|
235
|
+
* The CSS styles that render on the inner element which represents the empty portion of the progress bar
|
|
236
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/appearance)).
|
|
237
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
238
|
+
*/
|
|
239
|
+
emptyCssStyle: {
|
|
240
|
+
[key: string]: string;
|
|
241
|
+
};
|
|
242
|
+
/**
|
|
243
|
+
* The CSS classes that render on the inner element which represents the empty portion of the progress bar
|
|
244
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/appearance)).
|
|
245
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
246
|
+
*/
|
|
247
|
+
emptyCssClass: string | string[] | Set<string> | {
|
|
248
|
+
[key: string]: any;
|
|
249
|
+
};
|
|
250
|
+
/**
|
|
251
|
+
* The animation configuration of the ProgressBar.
|
|
252
|
+
* @default false
|
|
253
|
+
*/
|
|
254
|
+
animation: boolean | ProgressBarAnimation;
|
|
255
|
+
/**
|
|
256
|
+
* Fires when the animation which indicates the latest value change completes.
|
|
257
|
+
*/
|
|
258
|
+
animationEnd: EventEmitter<AnimationEndEvent>;
|
|
259
|
+
/**
|
|
260
|
+
* @hidden
|
|
261
|
+
*/
|
|
262
|
+
get showLabel(): boolean;
|
|
263
|
+
/**
|
|
264
|
+
* @hidden
|
|
265
|
+
*/
|
|
266
|
+
get labelPosition(): string;
|
|
267
|
+
/**
|
|
268
|
+
* @hidden
|
|
269
|
+
*/
|
|
270
|
+
get isPositionStart(): boolean;
|
|
271
|
+
/**
|
|
272
|
+
* @hidden
|
|
273
|
+
*/
|
|
274
|
+
get isPositionCenter(): boolean;
|
|
275
|
+
/**
|
|
276
|
+
* @hidden
|
|
277
|
+
*/
|
|
278
|
+
get isPositionEnd(): boolean;
|
|
279
|
+
/**
|
|
280
|
+
* @hidden
|
|
281
|
+
*/
|
|
282
|
+
get formattedLabelValue(): string;
|
|
283
|
+
private progressStatusElement;
|
|
284
|
+
private progressStatusWrapperElement;
|
|
285
|
+
private animationFrame;
|
|
286
|
+
private cancelCurrentAnimation;
|
|
287
|
+
private isAnimationInProgress;
|
|
288
|
+
private previousMax;
|
|
289
|
+
/**
|
|
290
|
+
* @hidden
|
|
291
|
+
*/
|
|
292
|
+
constructor(localization: LocalizationService, elem: ElementRef, renderer: Renderer2, zone: NgZone);
|
|
293
|
+
/**
|
|
294
|
+
* @hidden
|
|
295
|
+
*/
|
|
296
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
297
|
+
/**
|
|
298
|
+
* @hidden
|
|
299
|
+
*/
|
|
300
|
+
ngOnDestroy(): void;
|
|
301
|
+
/**
|
|
302
|
+
* @hidden
|
|
303
|
+
*/
|
|
304
|
+
protected startAnimation(previousValue: number): void;
|
|
305
|
+
/**
|
|
306
|
+
* @hidden
|
|
307
|
+
*/
|
|
308
|
+
protected get animationDuration(): number;
|
|
309
|
+
private stopAnimation;
|
|
310
|
+
private getAnimationOptions;
|
|
311
|
+
private renderValueChange;
|
|
312
|
+
private resetProgress;
|
|
313
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
|
|
314
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "kendo-progressbar", ["kendoProgressBar"], { "label": { "alias": "label"; "required": false; }; "progressCssStyle": { "alias": "progressCssStyle"; "required": false; }; "progressCssClass": { "alias": "progressCssClass"; "required": false; }; "emptyCssStyle": { "alias": "emptyCssStyle"; "required": false; }; "emptyCssClass": { "alias": "emptyCssClass"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; }, { "animationEnd": "animationEnd"; }, never, never, true, never>;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/**
|
|
318
|
+
* Represents the [Kendo UI ChunkProgressBar component for Angular](https://www.telerik.com/kendo-angular-ui/components/progressbars/chunkprogressbar).
|
|
319
|
+
*
|
|
320
|
+
* @example
|
|
321
|
+
* ```typescript
|
|
322
|
+
* import { Component } from '@angular/core';
|
|
323
|
+
*
|
|
324
|
+
* @Component({
|
|
325
|
+
* selector: 'my-app',
|
|
326
|
+
* template: `
|
|
327
|
+
* <kendo-chunkprogressbar
|
|
328
|
+
* [value]="progressValue"
|
|
329
|
+
* [chunkCount]="8">
|
|
330
|
+
* </kendo-chunkprogressbar>
|
|
331
|
+
* `
|
|
332
|
+
* })
|
|
333
|
+
* export class AppComponent {
|
|
334
|
+
* public progressValue: number = 40;
|
|
335
|
+
* }
|
|
336
|
+
* ```
|
|
337
|
+
*
|
|
338
|
+
* @remarks
|
|
339
|
+
* Supported children components are: {@link ProgressBarCustomMessagesComponent}
|
|
340
|
+
*/
|
|
341
|
+
declare class ChunkProgressBarComponent extends ProgressBarBase {
|
|
342
|
+
localization: LocalizationService;
|
|
343
|
+
elem: ElementRef;
|
|
344
|
+
renderer: Renderer2;
|
|
345
|
+
chunkClass: boolean;
|
|
346
|
+
/**
|
|
347
|
+
* Sets the number of chunks into which the ChunkProgressBar will be split.
|
|
348
|
+
*
|
|
349
|
+
* @default 5
|
|
350
|
+
*/
|
|
351
|
+
chunkCount: number;
|
|
352
|
+
/**
|
|
353
|
+
* @hidden
|
|
354
|
+
*/
|
|
355
|
+
get chunks(): boolean[];
|
|
356
|
+
/**
|
|
357
|
+
* Sets the CSS styles that will be rendered on the full chunk elements ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/circularprogressbar/appearance)).
|
|
358
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
359
|
+
*/
|
|
360
|
+
progressCssStyle: {
|
|
361
|
+
[key: string]: any;
|
|
362
|
+
};
|
|
363
|
+
/**
|
|
364
|
+
* Sets the CSS classes that will be rendered on the full chunk elements ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/circularprogressbar/appearance)).
|
|
365
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
366
|
+
*/
|
|
367
|
+
progressCssClass: string | string[] | Set<string> | {
|
|
368
|
+
[key: string]: string;
|
|
369
|
+
};
|
|
370
|
+
/**
|
|
371
|
+
* Sets the CSS styles that will be rendered on the empty chunk elements ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/circularprogressbar/appearance)).
|
|
372
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
373
|
+
*/
|
|
374
|
+
emptyCssStyle: {
|
|
375
|
+
[key: string]: string;
|
|
376
|
+
};
|
|
377
|
+
/**
|
|
378
|
+
* Sets the CSS classes that will be rendered on the empty chunk elements ([see example](https://www.telerik.com/kendo-angular-ui/components/progressbars/circularprogressbar/appearance)).
|
|
379
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
380
|
+
*/
|
|
381
|
+
emptyCssClass: string | string[] | Set<string> | {
|
|
382
|
+
[key: string]: any;
|
|
383
|
+
};
|
|
384
|
+
/**
|
|
385
|
+
* @hidden
|
|
386
|
+
*/
|
|
387
|
+
get chunkSizePercentage(): number;
|
|
388
|
+
/**
|
|
389
|
+
* @hidden
|
|
390
|
+
*/
|
|
391
|
+
get orientationStyles(): {
|
|
392
|
+
width: string;
|
|
393
|
+
height: string;
|
|
394
|
+
};
|
|
395
|
+
private _orientationStyles;
|
|
396
|
+
/**
|
|
397
|
+
* @hidden
|
|
398
|
+
*/
|
|
399
|
+
constructor(localization: LocalizationService, elem: ElementRef, renderer: Renderer2);
|
|
400
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ChunkProgressBarComponent, never>;
|
|
401
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ChunkProgressBarComponent, "kendo-chunkprogressbar", ["kendoChunkProgressBar"], { "chunkCount": { "alias": "chunkCount"; "required": false; }; "progressCssStyle": { "alias": "progressCssStyle"; "required": false; }; "progressCssClass": { "alias": "progressCssClass"; "required": false; }; "emptyCssStyle": { "alias": "emptyCssStyle"; "required": false; }; "emptyCssClass": { "alias": "emptyCssClass"; "required": false; }; }, {}, never, never, true, never>;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
/**
|
|
405
|
+
* Represents a template that allows you to customize the content in the center of the `<kendo-circularprogessbar>` component. To define the template, nest an `<ng-template>` tag with the `kendoCircularProgressbarCenterTemplate` directive inside a `<kendo-circularprogessbar>` component.
|
|
406
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/gauges/circulargauge/center-template)).
|
|
407
|
+
*
|
|
408
|
+
* @example
|
|
409
|
+
* ```html
|
|
410
|
+
* <kendo-circularprogressbar [value]="75">
|
|
411
|
+
* <ng-template kendoCircularProgressbarCenterTemplate>
|
|
412
|
+
* <span class="custom-center-text">75%</span>
|
|
413
|
+
* </ng-template>
|
|
414
|
+
* </kendo-circularprogressbar>
|
|
415
|
+
* ```
|
|
416
|
+
*/
|
|
417
|
+
declare class CircularProgressbarCenterTemplateDirective {
|
|
418
|
+
templateRef: TemplateRef<unknown>;
|
|
419
|
+
constructor(templateRef: TemplateRef<unknown>);
|
|
420
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<CircularProgressbarCenterTemplateDirective, never>;
|
|
421
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<CircularProgressbarCenterTemplateDirective, "[kendoCircularProgressbarCenterTemplate]", never, {}, {}, never, never, true, never>;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
/**
|
|
425
|
+
* @hidden
|
|
426
|
+
*/
|
|
427
|
+
interface CenterTemplateContext {
|
|
428
|
+
/**
|
|
429
|
+
* The current value of the Circular Progressbar.
|
|
430
|
+
*/
|
|
431
|
+
value?: number;
|
|
432
|
+
/**
|
|
433
|
+
* The current color of the progress arc.
|
|
434
|
+
*/
|
|
435
|
+
color?: string;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
/**
|
|
439
|
+
* Defines the color range configuration of the pointer.
|
|
440
|
+
*/
|
|
441
|
+
interface ProgressColor {
|
|
442
|
+
/**
|
|
443
|
+
* Sets the color of the range. Accepts valid CSS color strings, including hex and rgb.
|
|
444
|
+
*/
|
|
445
|
+
color?: string;
|
|
446
|
+
/**
|
|
447
|
+
* Sets the range start value.
|
|
448
|
+
*/
|
|
449
|
+
from?: number;
|
|
450
|
+
/**
|
|
451
|
+
* Sets the range end value.
|
|
452
|
+
*/
|
|
453
|
+
to?: number;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
/**
|
|
457
|
+
* Represents the [Kendo UI Circular ProgressBar component for Angular](https://www.telerik.com/kendo-angular-ui/components/progressbars/circularprogressbar).
|
|
458
|
+
*
|
|
459
|
+
* @example
|
|
460
|
+
* ```typescript
|
|
461
|
+
* import { Component } from '@angular/core';
|
|
462
|
+
*
|
|
463
|
+
* @Component({
|
|
464
|
+
* selector: 'my-app',
|
|
465
|
+
* template: `
|
|
466
|
+
* <kendo-circularprogressbar
|
|
467
|
+
* [value]="currentValue"
|
|
468
|
+
* [max]="100"
|
|
469
|
+
* [animation]="true">
|
|
470
|
+
* </kendo-circularprogressbar>
|
|
471
|
+
* `
|
|
472
|
+
* })
|
|
473
|
+
* export class AppComponent {
|
|
474
|
+
* public currentValue: number = 65;
|
|
475
|
+
* }
|
|
476
|
+
* ```
|
|
477
|
+
*
|
|
478
|
+
* @remarks
|
|
479
|
+
* Supported children components are: {@link ProgressBarCustomMessagesComponent}
|
|
480
|
+
*/
|
|
481
|
+
declare class CircularProgressBarComponent implements AfterViewInit, OnChanges, OnDestroy {
|
|
482
|
+
private renderer;
|
|
483
|
+
private cdr;
|
|
484
|
+
private localization;
|
|
485
|
+
private element;
|
|
486
|
+
private zone;
|
|
487
|
+
hostClasses: boolean;
|
|
488
|
+
get ariaMinAttribute(): string;
|
|
489
|
+
get ariaMaxAttribute(): string;
|
|
490
|
+
get ariaValueAttribute(): string;
|
|
491
|
+
roleAttribute: string;
|
|
492
|
+
/**
|
|
493
|
+
* Sets the default value of the Circular ProgressBar between `min` and `max`.
|
|
494
|
+
*
|
|
495
|
+
* @default 0
|
|
496
|
+
*/
|
|
497
|
+
set value(value: number);
|
|
498
|
+
get value(): number;
|
|
499
|
+
/**
|
|
500
|
+
* Sets the maximum value which the Circular ProgressBar can accept.
|
|
501
|
+
*
|
|
502
|
+
* @default 100
|
|
503
|
+
*/
|
|
504
|
+
set max(max: number);
|
|
505
|
+
get max(): number;
|
|
506
|
+
/**
|
|
507
|
+
* Sets the minimum value which the Circular ProgressBar can accept.
|
|
508
|
+
*
|
|
509
|
+
* @default 0
|
|
510
|
+
*/
|
|
511
|
+
set min(min: number);
|
|
512
|
+
get min(): number;
|
|
513
|
+
/**
|
|
514
|
+
* Specifies whether to play an animation when the value changes.
|
|
515
|
+
*
|
|
516
|
+
* @default false
|
|
517
|
+
*/
|
|
518
|
+
animation: boolean;
|
|
519
|
+
/**
|
|
520
|
+
* Sets the opacity of the value arc.
|
|
521
|
+
*
|
|
522
|
+
* @default 1
|
|
523
|
+
*/
|
|
524
|
+
opacity: number;
|
|
525
|
+
/**
|
|
526
|
+
* Puts the Circular ProgressBar in indeterminate state.
|
|
527
|
+
*
|
|
528
|
+
* @default false
|
|
529
|
+
*/
|
|
530
|
+
set indeterminate(indeterminate: boolean);
|
|
531
|
+
get indeterminate(): boolean;
|
|
532
|
+
/**
|
|
533
|
+
* Configures the pointer color. You can set it to a single color string or customize it per progress stages.
|
|
534
|
+
*/
|
|
535
|
+
progressColor: string | ProgressColor[];
|
|
536
|
+
/**
|
|
537
|
+
* Fires when the animation that indicates the latest value change completes.
|
|
538
|
+
*/
|
|
539
|
+
animationEnd: EventEmitter<AnimationEndEvent>;
|
|
540
|
+
progress: ElementRef;
|
|
541
|
+
scale: ElementRef;
|
|
542
|
+
labelElement: ElementRef;
|
|
543
|
+
surface: ElementRef;
|
|
544
|
+
centerTemplate: CircularProgressbarCenterTemplateDirective;
|
|
545
|
+
centerTemplateContext: CenterTemplateContext;
|
|
546
|
+
private _indeterminate;
|
|
547
|
+
private _max;
|
|
548
|
+
private _min;
|
|
549
|
+
private _value;
|
|
550
|
+
private previousValue;
|
|
551
|
+
private internalValue;
|
|
552
|
+
private rtl;
|
|
553
|
+
private subscriptions;
|
|
554
|
+
constructor(renderer: Renderer2, cdr: ChangeDetectorRef, localization: LocalizationService, element: ElementRef, zone: NgZone);
|
|
555
|
+
ngAfterViewInit(): void;
|
|
556
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
557
|
+
ngOnDestroy(): void;
|
|
558
|
+
/**
|
|
559
|
+
* @hidden
|
|
560
|
+
*/
|
|
561
|
+
onResize(): void;
|
|
562
|
+
private initProgressArc;
|
|
563
|
+
private calculateProgress;
|
|
564
|
+
private progressbarAnimation;
|
|
565
|
+
private setStyles;
|
|
566
|
+
private indeterminateState;
|
|
567
|
+
private updateCenterTemplate;
|
|
568
|
+
private positionLabel;
|
|
569
|
+
private get currentColor();
|
|
570
|
+
private updateProgressColor;
|
|
571
|
+
private handleErrors;
|
|
572
|
+
private setDirection;
|
|
573
|
+
private rtlChange;
|
|
574
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<CircularProgressBarComponent, never>;
|
|
575
|
+
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>;
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
/**
|
|
579
|
+
* @hidden
|
|
580
|
+
*/
|
|
581
|
+
declare class ProgressBarMessages extends ComponentMessages {
|
|
582
|
+
/**
|
|
583
|
+
* The aria-label attribute for the ProgressBar component.
|
|
584
|
+
*/
|
|
585
|
+
progressBarLabel: string;
|
|
586
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarMessages, never>;
|
|
587
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ProgressBarMessages, never, never, { "progressBarLabel": { "alias": "progressBarLabel"; "required": false; }; }, {}, never, never, true, never>;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
/**
|
|
591
|
+
* Custom component messages override default component messages
|
|
592
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/layout/globalization)).
|
|
593
|
+
*
|
|
594
|
+
* @example
|
|
595
|
+
* ```html
|
|
596
|
+
* <!-- Custom messages for ProgressBar -->
|
|
597
|
+
* <kendo-progressbar [value]="value">
|
|
598
|
+
* <kendo-progressbar-messages
|
|
599
|
+
* progressBarLabel="Changed ProgressBar Label"
|
|
600
|
+
* ></kendo-progressbar-messages>
|
|
601
|
+
* </kendo-progressbar>
|
|
602
|
+
*
|
|
603
|
+
* <!-- Custom messages for ChunkProgressBar -->
|
|
604
|
+
* <kendo-chunkprogressbar [value]="value" [chunkCount]="chunks">
|
|
605
|
+
* <kendo-progressbar-messages
|
|
606
|
+
* progressBarLabel="Changed Chunk Label"
|
|
607
|
+
* ></kendo-progressbar-messages>
|
|
608
|
+
* </kendo-chunkprogressbar>
|
|
609
|
+
*
|
|
610
|
+
* <!-- Custom messages for CircularProgressBar -->
|
|
611
|
+
* <kendo-circularprogressbar [value]="value">
|
|
612
|
+
* <kendo-progressbar-messages
|
|
613
|
+
* progressBarLabel="Changed Circular Label"
|
|
614
|
+
* ></kendo-progressbar-messages>
|
|
615
|
+
* </kendo-circularprogressbar>
|
|
616
|
+
* ```
|
|
617
|
+
*/
|
|
618
|
+
declare class ProgressBarCustomMessagesComponent extends ProgressBarMessages {
|
|
619
|
+
protected service: LocalizationService;
|
|
620
|
+
constructor(service: LocalizationService);
|
|
621
|
+
protected get override(): boolean;
|
|
622
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarCustomMessagesComponent, never>;
|
|
623
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarCustomMessagesComponent, "kendo-progressbar-messages", never, {}, {}, never, never, true, never>;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
/**
|
|
627
|
+
* Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
|
|
628
|
+
* definition for the ProgressBar components.
|
|
629
|
+
*
|
|
630
|
+
* @example
|
|
631
|
+
* ```typescript
|
|
632
|
+
* import { NgModule } from '@angular/core';
|
|
633
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
634
|
+
* import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
|
|
635
|
+
*
|
|
636
|
+
* @NgModule({
|
|
637
|
+
* imports: [BrowserModule, ProgressBarModule],
|
|
638
|
+
* declarations: [AppComponent],
|
|
639
|
+
* bootstrap: [AppComponent]
|
|
640
|
+
* })
|
|
641
|
+
* export class AppModule { }
|
|
642
|
+
* ```
|
|
643
|
+
*/
|
|
644
|
+
declare class ProgressBarModule {
|
|
645
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarModule, never>;
|
|
646
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarModule, never, [typeof ChunkProgressBarComponent, typeof ProgressBarCustomMessagesComponent, typeof CircularProgressbarCenterTemplateDirective, typeof CircularProgressBarComponent, typeof ProgressBarCustomMessagesComponent, typeof ProgressBarComponent, typeof ProgressBarCustomMessagesComponent], [typeof ChunkProgressBarComponent, typeof ProgressBarCustomMessagesComponent, typeof CircularProgressbarCenterTemplateDirective, typeof CircularProgressBarComponent, typeof ProgressBarCustomMessagesComponent, typeof ProgressBarComponent, typeof ProgressBarCustomMessagesComponent]>;
|
|
647
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarModule>;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
/**
|
|
651
|
+
* @hidden
|
|
652
|
+
*/
|
|
653
|
+
declare class LocalizedProgressBarMessagesDirective extends ProgressBarMessages {
|
|
654
|
+
protected service: LocalizationService;
|
|
655
|
+
constructor(service: LocalizationService);
|
|
656
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LocalizedProgressBarMessagesDirective, never>;
|
|
657
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<LocalizedProgressBarMessagesDirective, "[kendoProgressBarLocalizedMessages]", never, {}, {}, never, never, true, never>;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
/**
|
|
661
|
+
* Use this utility array to access all ChunkProgressBar-related components and directives in a standalone Angular component.
|
|
662
|
+
*
|
|
663
|
+
* @example
|
|
664
|
+
* ```typescript
|
|
665
|
+
* import { KENDO_CHUNKPROGRESSBAR } from '@progress/kendo-angular-progressbar';
|
|
666
|
+
* @Component({
|
|
667
|
+
* standalone: true,
|
|
668
|
+
* imports: [KENDO_CHUNKPROGRESSBAR],
|
|
669
|
+
* template: `<kendo-chunkprogressbar [value]="50"></kendo-chunkprogressbar>`,
|
|
670
|
+
* })
|
|
671
|
+
* export class MyComponent {}
|
|
672
|
+
* ```
|
|
673
|
+
*/
|
|
674
|
+
declare const KENDO_CHUNKPROGRESSBAR: readonly [typeof ChunkProgressBarComponent, typeof ProgressBarCustomMessagesComponent];
|
|
675
|
+
/**
|
|
676
|
+
* Use this utility array to access all CircularProgressbar-related components and directives in a standalone Angular component.
|
|
677
|
+
*
|
|
678
|
+
* @example
|
|
679
|
+
* ```typescript
|
|
680
|
+
* import { KENDO_CIRCULARPROGRESSBAR } from '@progress/kendo-angular-progressbar';
|
|
681
|
+
* @Component({
|
|
682
|
+
* standalone: true,
|
|
683
|
+
* imports: [KENDO_CIRCULARPROGRESSBAR],
|
|
684
|
+
* template: `<kendo-circularprogressbar [value]="75"></kendo-circularprogressbar>`,
|
|
685
|
+
* })
|
|
686
|
+
* export class MyComponent {}
|
|
687
|
+
* ```
|
|
688
|
+
*/
|
|
689
|
+
declare const KENDO_CIRCULARPROGRESSBAR: readonly [typeof CircularProgressbarCenterTemplateDirective, typeof CircularProgressBarComponent, typeof ProgressBarCustomMessagesComponent];
|
|
690
|
+
/**
|
|
691
|
+
* Use this utility array to access all ProgressBar-related components and directives in a standalone Angular component.
|
|
692
|
+
*
|
|
693
|
+
* @example
|
|
694
|
+
* ```typescript
|
|
695
|
+
* import { KENDO_PROGRESSBAR } from '@progress/kendo-angular-progressbar';
|
|
696
|
+
* @Component({
|
|
697
|
+
* standalone: true,
|
|
698
|
+
* imports: [KENDO_PROGRESSBAR],
|
|
699
|
+
* template: `<kendo-progressbar [value]="75"></kendo-progressbar>`,
|
|
700
|
+
* })
|
|
701
|
+
* export class MyComponent {}
|
|
702
|
+
* ```
|
|
703
|
+
*/
|
|
704
|
+
declare const KENDO_PROGRESSBAR: readonly [typeof ProgressBarComponent, typeof ProgressBarCustomMessagesComponent];
|
|
705
|
+
/**
|
|
706
|
+
* Use this utility array all `@progress/kendo-angular-progressbar`-related components and directives.
|
|
707
|
+
* @example
|
|
708
|
+
* ```typescript
|
|
709
|
+
* import { KENDO_PROGRESSBARS } from '@progress/kendo-angular-progressbar';
|
|
710
|
+
* @Component({
|
|
711
|
+
* standalone: true,
|
|
712
|
+
* imports: [KENDO_PROGRESSBARS],
|
|
713
|
+
* template: `
|
|
714
|
+
* <kendo-progressbar [value]="75"></kendo-progressbar>
|
|
715
|
+
* <kendo-circularprogressbar [value]="75"></kendo-circularprogressbar>
|
|
716
|
+
* `,
|
|
717
|
+
* })
|
|
718
|
+
* export class MyComponent {}
|
|
719
|
+
* ```
|
|
720
|
+
*/
|
|
721
|
+
declare const KENDO_PROGRESSBARS: readonly [typeof ChunkProgressBarComponent, typeof ProgressBarCustomMessagesComponent, typeof CircularProgressbarCenterTemplateDirective, typeof CircularProgressBarComponent, typeof ProgressBarCustomMessagesComponent, typeof ProgressBarComponent, typeof ProgressBarCustomMessagesComponent];
|
|
722
|
+
|
|
723
|
+
export { ChunkProgressBarComponent, CircularProgressBarComponent, CircularProgressbarCenterTemplateDirective, KENDO_CHUNKPROGRESSBAR, KENDO_CIRCULARPROGRESSBAR, KENDO_PROGRESSBAR, KENDO_PROGRESSBARS, LocalizedProgressBarMessagesDirective, ProgressBarComponent, ProgressBarCustomMessagesComponent, ProgressBarModule };
|
|
724
|
+
export type { AnimationEndEvent, LabelFn, LabelPosition, LabelSettings, LabelType, ProgressBarAnimation, ProgressBarOrientation, ProgressColor };
|