@progress/kendo-angular-progressbar 21.4.1 → 22.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/common/localization/messages.d.ts +1 -1
- package/common/progressbar-base.d.ts +1 -1
- package/fesm2022/progress-kendo-angular-progressbar.mjs +31 -31
- package/package.json +9 -17
- package/esm2022/chunk/chunk-progressbar.component.mjs +0 -192
- package/esm2022/circularprogressbar/center-template.directive.mjs +0 -34
- package/esm2022/circularprogressbar/circular-progressbar.component.mjs +0 -523
- package/esm2022/circularprogressbar/models/center-template-context.interface.mjs +0 -5
- package/esm2022/circularprogressbar/models/circular-progressbar-progress-color-interface.mjs +0 -8
- package/esm2022/common/constants.mjs +0 -16
- package/esm2022/common/localization/custom-messages.component.mjs +0 -68
- package/esm2022/common/localization/localized-messages.directive.mjs +0 -39
- package/esm2022/common/localization/messages.mjs +0 -24
- package/esm2022/common/progressbar-base.mjs +0 -228
- package/esm2022/common/util.mjs +0 -99
- package/esm2022/directives.mjs +0 -85
- package/esm2022/index.mjs +0 -12
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/progress-kendo-angular-progressbar.mjs +0 -8
- package/esm2022/progressbar.component.mjs +0 -380
- package/esm2022/progressbar.module.mjs +0 -45
- package/esm2022/types/animation-end-event.mjs +0 -5
- package/esm2022/types/animation-options.interface.mjs +0 -5
- package/esm2022/types/label-fn-type.mjs +0 -5
- package/esm2022/types/label-position.mjs +0 -5
- package/esm2022/types/label-settings.interface.mjs +0 -5
- package/esm2022/types/label-type.mjs +0 -5
- package/esm2022/types/progressbar-animation.interface.mjs +0 -5
- package/esm2022/types/progressbar-orientation.mjs +0 -5
|
@@ -1,523 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, NgZone, Output, Renderer2, ViewChild } from '@angular/core';
|
|
6
|
-
import { hasObservers, isChanged, isDocumentAvailable, ResizeSensorComponent } from '@progress/kendo-angular-common';
|
|
7
|
-
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
9
|
-
import { Subscription } from 'rxjs';
|
|
10
|
-
import { take } from 'rxjs/operators';
|
|
11
|
-
import { hasElementSize, removeProgressBarStyles, setProgressBarStyles } from '../common/util';
|
|
12
|
-
import { packageMetadata } from '../package-metadata';
|
|
13
|
-
import { CircularProgressbarCenterTemplateDirective } from './center-template.directive';
|
|
14
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
15
|
-
import { LocalizedProgressBarMessagesDirective } from '../common/localization/localized-messages.directive';
|
|
16
|
-
import * as i0 from "@angular/core";
|
|
17
|
-
import * as i1 from "@progress/kendo-angular-l10n";
|
|
18
|
-
const DEFAULT_SURFACE_SIZE = 200;
|
|
19
|
-
/**
|
|
20
|
-
* Represents the [Kendo UI Circular ProgressBar component for Angular]({% slug overview_circularprogressbar %}).
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```typescript
|
|
24
|
-
* import { Component } from '@angular/core';
|
|
25
|
-
*
|
|
26
|
-
* @Component({
|
|
27
|
-
* selector: 'my-app',
|
|
28
|
-
* template: `
|
|
29
|
-
* <kendo-circularprogressbar
|
|
30
|
-
* [value]="currentValue"
|
|
31
|
-
* [max]="100"
|
|
32
|
-
* [animation]="true">
|
|
33
|
-
* </kendo-circularprogressbar>
|
|
34
|
-
* `
|
|
35
|
-
* })
|
|
36
|
-
* export class AppComponent {
|
|
37
|
-
* public currentValue: number = 65;
|
|
38
|
-
* }
|
|
39
|
-
* ```
|
|
40
|
-
*
|
|
41
|
-
* @remarks
|
|
42
|
-
* Supported children components are: {@link ProgressBarCustomMessagesComponent}
|
|
43
|
-
*/
|
|
44
|
-
export class CircularProgressBarComponent {
|
|
45
|
-
renderer;
|
|
46
|
-
cdr;
|
|
47
|
-
localization;
|
|
48
|
-
element;
|
|
49
|
-
zone;
|
|
50
|
-
hostClasses = true;
|
|
51
|
-
get ariaMinAttribute() {
|
|
52
|
-
return String(this.min);
|
|
53
|
-
}
|
|
54
|
-
get ariaMaxAttribute() {
|
|
55
|
-
return String(this.max);
|
|
56
|
-
}
|
|
57
|
-
get ariaValueAttribute() {
|
|
58
|
-
return this.indeterminate ? undefined : String(this.value);
|
|
59
|
-
}
|
|
60
|
-
roleAttribute = 'progressbar';
|
|
61
|
-
/**
|
|
62
|
-
* Sets the default value of the Circular ProgressBar between `min` and `max`.
|
|
63
|
-
*
|
|
64
|
-
* @default 0
|
|
65
|
-
*/
|
|
66
|
-
set value(value) {
|
|
67
|
-
if (value > this.max) {
|
|
68
|
-
this.handleErrors('value > max');
|
|
69
|
-
}
|
|
70
|
-
if (value < this.min) {
|
|
71
|
-
this.handleErrors('value < min');
|
|
72
|
-
}
|
|
73
|
-
this.previousValue = this.value;
|
|
74
|
-
this._value = value;
|
|
75
|
-
}
|
|
76
|
-
get value() {
|
|
77
|
-
return this._value;
|
|
78
|
-
}
|
|
79
|
-
/**
|
|
80
|
-
* Sets the maximum value which the Circular ProgressBar can accept.
|
|
81
|
-
*
|
|
82
|
-
* @default 100
|
|
83
|
-
*/
|
|
84
|
-
set max(max) {
|
|
85
|
-
if (max < this.min) {
|
|
86
|
-
this.handleErrors('max < min');
|
|
87
|
-
}
|
|
88
|
-
this._max = max;
|
|
89
|
-
}
|
|
90
|
-
get max() {
|
|
91
|
-
return this._max;
|
|
92
|
-
}
|
|
93
|
-
/**
|
|
94
|
-
* Sets the minimum value which the Circular ProgressBar can accept.
|
|
95
|
-
*
|
|
96
|
-
* @default 0
|
|
97
|
-
*/
|
|
98
|
-
set min(min) {
|
|
99
|
-
if (min > this.max) {
|
|
100
|
-
this.handleErrors('max < min');
|
|
101
|
-
}
|
|
102
|
-
this._min = min;
|
|
103
|
-
}
|
|
104
|
-
get min() {
|
|
105
|
-
return this._min;
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* Specifies whether to play an animation when the value changes.
|
|
109
|
-
*
|
|
110
|
-
* @default false
|
|
111
|
-
*/
|
|
112
|
-
animation = false;
|
|
113
|
-
/**
|
|
114
|
-
* Sets the opacity of the value arc.
|
|
115
|
-
*
|
|
116
|
-
* @default 1
|
|
117
|
-
*/
|
|
118
|
-
opacity = 1;
|
|
119
|
-
/**
|
|
120
|
-
* Puts the Circular ProgressBar in indeterminate state.
|
|
121
|
-
*
|
|
122
|
-
* @default false
|
|
123
|
-
*/
|
|
124
|
-
set indeterminate(indeterminate) {
|
|
125
|
-
this._indeterminate = indeterminate;
|
|
126
|
-
}
|
|
127
|
-
get indeterminate() {
|
|
128
|
-
return this._indeterminate;
|
|
129
|
-
}
|
|
130
|
-
/**
|
|
131
|
-
* Configures the pointer color. You can set it to a single color string or customize it per progress stages.
|
|
132
|
-
*/
|
|
133
|
-
progressColor;
|
|
134
|
-
/**
|
|
135
|
-
* Fires when the animation that indicates the latest value change completes.
|
|
136
|
-
*/
|
|
137
|
-
animationEnd = new EventEmitter();
|
|
138
|
-
progress;
|
|
139
|
-
scale;
|
|
140
|
-
labelElement;
|
|
141
|
-
surface;
|
|
142
|
-
centerTemplate;
|
|
143
|
-
centerTemplateContext = {};
|
|
144
|
-
_indeterminate = false;
|
|
145
|
-
_max = 100;
|
|
146
|
-
_min = 0;
|
|
147
|
-
_value = 0;
|
|
148
|
-
previousValue = 0;
|
|
149
|
-
internalValue = 0;
|
|
150
|
-
rtl;
|
|
151
|
-
subscriptions = new Subscription();
|
|
152
|
-
constructor(renderer, cdr, localization, element, zone) {
|
|
153
|
-
this.renderer = renderer;
|
|
154
|
-
this.cdr = cdr;
|
|
155
|
-
this.localization = localization;
|
|
156
|
-
this.element = element;
|
|
157
|
-
this.zone = zone;
|
|
158
|
-
validatePackage(packageMetadata);
|
|
159
|
-
this.subscriptions.add(this.localization.changes.subscribe(this.rtlChange.bind(this)));
|
|
160
|
-
}
|
|
161
|
-
ngAfterViewInit() {
|
|
162
|
-
if (!isDocumentAvailable()) {
|
|
163
|
-
return;
|
|
164
|
-
}
|
|
165
|
-
const elem = this.element.nativeElement;
|
|
166
|
-
const ariaLabel = this.localization.get('progressBarLabel');
|
|
167
|
-
this.renderer.setAttribute(elem, 'aria-label', ariaLabel);
|
|
168
|
-
this.initProgressArc();
|
|
169
|
-
}
|
|
170
|
-
ngOnChanges(changes) {
|
|
171
|
-
const skipFirstChange = true;
|
|
172
|
-
if (isChanged('value', changes, skipFirstChange) && this.progress) {
|
|
173
|
-
if (this.animation) {
|
|
174
|
-
this.progressbarAnimation();
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
const value = this.value - this.min;
|
|
178
|
-
this.internalValue = changes['value'].currentValue;
|
|
179
|
-
this.calculateProgress(value);
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
if (changes['opacity'] && this.progress) {
|
|
183
|
-
setProgressBarStyles([{ method: 'setAttribute', el: this.progress.nativeElement, attr: 'opacity', attrValue: this.opacity.toString() }], this.renderer);
|
|
184
|
-
}
|
|
185
|
-
if (changes['indeterminate'] && !changes['indeterminate'].firstChange) {
|
|
186
|
-
this.indeterminateState();
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
ngOnDestroy() {
|
|
190
|
-
this.subscriptions.unsubscribe();
|
|
191
|
-
}
|
|
192
|
-
/**
|
|
193
|
-
* @hidden
|
|
194
|
-
*/
|
|
195
|
-
onResize() {
|
|
196
|
-
this.setStyles();
|
|
197
|
-
const value = this.animation ? this.internalValue : this.value;
|
|
198
|
-
this.calculateProgress(value);
|
|
199
|
-
this.updateCenterTemplate(value);
|
|
200
|
-
}
|
|
201
|
-
initProgressArc() {
|
|
202
|
-
this.setStyles();
|
|
203
|
-
if (this.indeterminate) {
|
|
204
|
-
this.indeterminateState();
|
|
205
|
-
}
|
|
206
|
-
else {
|
|
207
|
-
if (!this.animation) {
|
|
208
|
-
const value = this.value - this.min;
|
|
209
|
-
this.calculateProgress(value);
|
|
210
|
-
}
|
|
211
|
-
else {
|
|
212
|
-
this.progressbarAnimation();
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
calculateProgress(value) {
|
|
217
|
-
if (this.progressColor) {
|
|
218
|
-
this.updateProgressColor(value);
|
|
219
|
-
}
|
|
220
|
-
// needed when we have *ngIf inside the template to render different content depending on some condition
|
|
221
|
-
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
222
|
-
this.updateCenterTemplate(value + this.min);
|
|
223
|
-
});
|
|
224
|
-
const progressArc = this.progress.nativeElement;
|
|
225
|
-
const radius = this.progress.nativeElement.r.baseVal.value;
|
|
226
|
-
const circumference = Math.PI * (radius * 2);
|
|
227
|
-
const dir = this.rtl ? circumference * -1 : circumference;
|
|
228
|
-
const strokeDashOffest = circumference - dir * (value / (this.max - this.min));
|
|
229
|
-
const progressCalculations = [
|
|
230
|
-
{ method: 'setStyle', el: progressArc, attr: 'strokeDasharray', attrValue: circumference.toString() },
|
|
231
|
-
{ method: 'setStyle', el: progressArc, attr: 'strokeDashoffset', attrValue: strokeDashOffest.toString() }
|
|
232
|
-
];
|
|
233
|
-
setProgressBarStyles(progressCalculations, this.renderer);
|
|
234
|
-
}
|
|
235
|
-
progressbarAnimation() {
|
|
236
|
-
const forwardProgress = {
|
|
237
|
-
isOngoing: this.internalValue > this.value - this.min,
|
|
238
|
-
isPositive: this.value >= this.previousValue
|
|
239
|
-
};
|
|
240
|
-
const backwardProgress = {
|
|
241
|
-
isOngoing: this.internalValue < this.value - this.min,
|
|
242
|
-
isNegative: this.value <= this.previousValue
|
|
243
|
-
};
|
|
244
|
-
if (forwardProgress.isOngoing && forwardProgress.isPositive ||
|
|
245
|
-
backwardProgress.isOngoing && backwardProgress.isNegative) {
|
|
246
|
-
return;
|
|
247
|
-
}
|
|
248
|
-
this.calculateProgress(this.internalValue);
|
|
249
|
-
const from = this.internalValue;
|
|
250
|
-
if (hasObservers(this.animationEnd)) {
|
|
251
|
-
this.animationEnd.emit({
|
|
252
|
-
from: from,
|
|
253
|
-
to: this.internalValue
|
|
254
|
-
});
|
|
255
|
-
}
|
|
256
|
-
if (forwardProgress.isPositive) {
|
|
257
|
-
this.internalValue += 1;
|
|
258
|
-
}
|
|
259
|
-
else {
|
|
260
|
-
this.internalValue -= 1;
|
|
261
|
-
}
|
|
262
|
-
requestAnimationFrame(this.progressbarAnimation.bind(this));
|
|
263
|
-
}
|
|
264
|
-
setStyles() {
|
|
265
|
-
const progressArc = this.progress.nativeElement;
|
|
266
|
-
const scale = this.scale.nativeElement;
|
|
267
|
-
const surface = this.surface.nativeElement;
|
|
268
|
-
const element = this.element.nativeElement;
|
|
269
|
-
let elWidth = element.getBoundingClientRect().width;
|
|
270
|
-
if (!hasElementSize(element)) {
|
|
271
|
-
const surfaceSize = [
|
|
272
|
-
{ method: 'setStyle', el: surface, attr: 'width', attrValue: `${DEFAULT_SURFACE_SIZE}px` },
|
|
273
|
-
{ method: 'setStyle', el: surface, attr: 'height', attrValue: `${DEFAULT_SURFACE_SIZE}px` }
|
|
274
|
-
];
|
|
275
|
-
elWidth = DEFAULT_SURFACE_SIZE;
|
|
276
|
-
setProgressBarStyles(surfaceSize, this.renderer);
|
|
277
|
-
}
|
|
278
|
-
const attributesArray = [
|
|
279
|
-
{ method: 'setAttribute', el: progressArc, attr: 'r', attrValue: String((elWidth / 2) - 10) },
|
|
280
|
-
{ method: 'setAttribute', el: progressArc, attr: 'cx', attrValue: String((elWidth / 2)) },
|
|
281
|
-
{ method: 'setAttribute', el: progressArc, attr: 'cy', attrValue: String((elWidth / 2)) },
|
|
282
|
-
{ method: 'setAttribute', el: progressArc, attr: 'opacity', attrValue: String(this.opacity) },
|
|
283
|
-
{ method: 'setAttribute', el: scale, attr: 'r', attrValue: String((elWidth / 2) - 10) },
|
|
284
|
-
{ method: 'setAttribute', el: scale, attr: 'cx', attrValue: String(elWidth / 2) },
|
|
285
|
-
{ method: 'setAttribute', el: scale, attr: 'cy', attrValue: String(elWidth / 2) }
|
|
286
|
-
];
|
|
287
|
-
setProgressBarStyles(attributesArray, this.renderer);
|
|
288
|
-
}
|
|
289
|
-
indeterminateState() {
|
|
290
|
-
const progressArc = this.progress.nativeElement;
|
|
291
|
-
if (this.indeterminate) {
|
|
292
|
-
// the indeterminate state wont work as the `k-circular-progressbar-arc` has a transform: rotate(-90deg) which is
|
|
293
|
-
// interfering with the svg animation as the animateTransform brings its own transform: rotate()
|
|
294
|
-
// This will be like this until the themes release a new version, bringing a new class `k-circular-progressbar-indeterminate-arc`
|
|
295
|
-
// containing only the necassery CSS styles and we will switch between them when the state of the progressbar is switched.
|
|
296
|
-
this.calculateProgress(this.value - this.min);
|
|
297
|
-
const rotate = this.rtl ? { from: 360, to: 0 } : { from: 0, to: 360 };
|
|
298
|
-
let color;
|
|
299
|
-
if (!this.progressColor) {
|
|
300
|
-
color = getComputedStyle(progressArc).stroke;
|
|
301
|
-
}
|
|
302
|
-
const indeterminateStyles = [
|
|
303
|
-
{ method: 'setStyle', el: progressArc, attr: 'transform-origin', attrValue: 'center' },
|
|
304
|
-
{ method: 'setStyle', el: progressArc, attr: 'fill', attrValue: 'none' },
|
|
305
|
-
{ method: 'setStyle', el: progressArc, attr: 'stroke-linecap', attrValue: 'round' },
|
|
306
|
-
{ method: 'setStyle', el: progressArc, attr: 'stroke', attrValue: color ? color : this.currentColor }
|
|
307
|
-
];
|
|
308
|
-
setProgressBarStyles(indeterminateStyles, this.renderer);
|
|
309
|
-
this.renderer.removeClass(progressArc, 'k-circular-progressbar-arc');
|
|
310
|
-
progressArc.innerHTML = `<animateTransform attributeName="transform" type="rotate" from="${rotate.from} 0 0" to="${rotate.to} 0 0" dur="1s" repeatCount="indefinite" />`;
|
|
311
|
-
}
|
|
312
|
-
else {
|
|
313
|
-
this.renderer.addClass(progressArc, 'k-circular-progressbar-arc');
|
|
314
|
-
const removeIndeterminateStyles = [
|
|
315
|
-
{ method: 'removeStyle', el: progressArc, attr: 'transform-origin' },
|
|
316
|
-
{ method: 'removeStyle', el: progressArc, attr: 'fill' },
|
|
317
|
-
{ method: 'removeStyle', el: progressArc, attr: 'stroke-linecap' }
|
|
318
|
-
];
|
|
319
|
-
removeProgressBarStyles(removeIndeterminateStyles, this.renderer);
|
|
320
|
-
progressArc.innerHTML = '';
|
|
321
|
-
if (this.animation) {
|
|
322
|
-
this.progressbarAnimation();
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
updateCenterTemplate(value) {
|
|
327
|
-
if (!this.centerTemplate) {
|
|
328
|
-
return;
|
|
329
|
-
}
|
|
330
|
-
this.centerTemplateContext.value = value;
|
|
331
|
-
this.centerTemplateContext.color = this.currentColor;
|
|
332
|
-
this.cdr.detectChanges();
|
|
333
|
-
this.positionLabel();
|
|
334
|
-
}
|
|
335
|
-
positionLabel() {
|
|
336
|
-
const labelEl = this.labelElement.nativeElement;
|
|
337
|
-
const element = this.element.nativeElement;
|
|
338
|
-
const surface = this.surface.nativeElement;
|
|
339
|
-
let elWidth;
|
|
340
|
-
let elHeight;
|
|
341
|
-
if (!hasElementSize(element)) {
|
|
342
|
-
const surfaceSize = surface.getBoundingClientRect();
|
|
343
|
-
elWidth = surfaceSize.width;
|
|
344
|
-
elHeight = surfaceSize.height;
|
|
345
|
-
}
|
|
346
|
-
else {
|
|
347
|
-
const elementSize = element.getBoundingClientRect();
|
|
348
|
-
elWidth = elementSize.width;
|
|
349
|
-
elHeight = elementSize.height;
|
|
350
|
-
}
|
|
351
|
-
const left = (elWidth / 2) - (labelEl.offsetWidth / 2);
|
|
352
|
-
const top = (elHeight / 2) - (labelEl.offsetHeight / 2);
|
|
353
|
-
const labelCalculations = [
|
|
354
|
-
{ method: 'setStyle', el: labelEl, attr: 'left', attrValue: `${left}px` },
|
|
355
|
-
{ method: 'setStyle', el: labelEl, attr: 'top', attrValue: `${top}px` }
|
|
356
|
-
];
|
|
357
|
-
setProgressBarStyles(labelCalculations, this.renderer);
|
|
358
|
-
}
|
|
359
|
-
get currentColor() {
|
|
360
|
-
const currentColor = this.progress.nativeElement.style.stroke;
|
|
361
|
-
return currentColor;
|
|
362
|
-
}
|
|
363
|
-
updateProgressColor(value) {
|
|
364
|
-
const progressArc = this.progress.nativeElement;
|
|
365
|
-
if (typeof this.progressColor === 'string') {
|
|
366
|
-
this.renderer.setStyle(progressArc, 'stroke', this.progressColor);
|
|
367
|
-
}
|
|
368
|
-
else {
|
|
369
|
-
for (let i = 0; i < this.progressColor.length; i++) {
|
|
370
|
-
const from = this.progressColor[i].from;
|
|
371
|
-
const to = this.progressColor[i].to;
|
|
372
|
-
if (value >= from && value <= to || (!from && value <= to)) {
|
|
373
|
-
this.renderer.setStyle(progressArc, 'stroke', this.progressColor[i].color);
|
|
374
|
-
break;
|
|
375
|
-
}
|
|
376
|
-
if (!to && value >= from) {
|
|
377
|
-
this.renderer.setStyle(progressArc, 'stroke', this.progressColor[i].color);
|
|
378
|
-
}
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
}
|
|
382
|
-
handleErrors(type) {
|
|
383
|
-
if (isDevMode()) {
|
|
384
|
-
switch (type) {
|
|
385
|
-
case 'value > max':
|
|
386
|
-
throw new Error('The value of the CircularProgressbar cannot exceed the max value');
|
|
387
|
-
case 'value < min':
|
|
388
|
-
throw new Error('The value of the CircularProgressbar cannot be lower than the min value');
|
|
389
|
-
case 'max < min':
|
|
390
|
-
throw new Error('The min value cannot be higher than the max value');
|
|
391
|
-
default:
|
|
392
|
-
}
|
|
393
|
-
}
|
|
394
|
-
}
|
|
395
|
-
setDirection() {
|
|
396
|
-
this.rtl = this.localization.rtl;
|
|
397
|
-
if (this.element) {
|
|
398
|
-
this.renderer.setAttribute(this.element.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
|
|
399
|
-
}
|
|
400
|
-
if (this.labelElement) {
|
|
401
|
-
this.renderer.setAttribute(this.labelElement.nativeElement, 'dir', this.rtl ? 'rtl' : 'ltr');
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
rtlChange() {
|
|
405
|
-
if (this.element && this.rtl !== this.localization.rtl) {
|
|
406
|
-
this.setDirection();
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CircularProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
410
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CircularProgressBarComponent, isStandalone: true, selector: "kendo-circularprogressbar", inputs: { value: "value", max: "max", min: "min", animation: "animation", opacity: "opacity", indeterminate: "indeterminate", progressColor: "progressColor" }, outputs: { animationEnd: "animationEnd" }, host: { properties: { "class.k-circular-progressbar": "this.hostClasses", "attr.aria-valuemin": "this.ariaMinAttribute", "attr.aria-valuemax": "this.ariaMaxAttribute", "attr.aria-valuenow": "this.ariaValueAttribute", "attr.role": "this.roleAttribute" } }, providers: [
|
|
411
|
-
LocalizationService,
|
|
412
|
-
{
|
|
413
|
-
provide: L10N_PREFIX,
|
|
414
|
-
useValue: 'kendo.circularprogressbar'
|
|
415
|
-
}
|
|
416
|
-
], queries: [{ propertyName: "centerTemplate", first: true, predicate: CircularProgressbarCenterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "progress", first: true, predicate: ["progress"], descendants: true }, { propertyName: "scale", first: true, predicate: ["scale"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }, { propertyName: "surface", first: true, predicate: ["surface"], descendants: true }], exportAs: ["kendoCircularProgressBar"], usesOnChanges: true, ngImport: i0, template: `
|
|
417
|
-
<ng-container kendoProgressBarLocalizedMessages
|
|
418
|
-
i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The aria-label attribute for the Circular ProgressBar component."
|
|
419
|
-
progressBarLabel="Circular progressbar"
|
|
420
|
-
>
|
|
421
|
-
</ng-container>
|
|
422
|
-
<div #surface class="k-circular-progressbar-surface">
|
|
423
|
-
<div>
|
|
424
|
-
<svg #svg>
|
|
425
|
-
<g>
|
|
426
|
-
<circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>
|
|
427
|
-
<circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>
|
|
428
|
-
</g>
|
|
429
|
-
</svg>
|
|
430
|
-
@if (centerTemplate) {
|
|
431
|
-
<div class="k-circular-progressbar-label" #label>
|
|
432
|
-
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
|
|
433
|
-
</div>
|
|
434
|
-
}
|
|
435
|
-
</div>
|
|
436
|
-
</div>
|
|
437
|
-
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
438
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
439
|
-
}
|
|
440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
|
|
441
|
-
type: Component,
|
|
442
|
-
args: [{
|
|
443
|
-
exportAs: 'kendoCircularProgressBar',
|
|
444
|
-
selector: 'kendo-circularprogressbar',
|
|
445
|
-
template: `
|
|
446
|
-
<ng-container kendoProgressBarLocalizedMessages
|
|
447
|
-
i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The aria-label attribute for the Circular ProgressBar component."
|
|
448
|
-
progressBarLabel="Circular progressbar"
|
|
449
|
-
>
|
|
450
|
-
</ng-container>
|
|
451
|
-
<div #surface class="k-circular-progressbar-surface">
|
|
452
|
-
<div>
|
|
453
|
-
<svg #svg>
|
|
454
|
-
<g>
|
|
455
|
-
<circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>
|
|
456
|
-
<circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>
|
|
457
|
-
</g>
|
|
458
|
-
</svg>
|
|
459
|
-
@if (centerTemplate) {
|
|
460
|
-
<div class="k-circular-progressbar-label" #label>
|
|
461
|
-
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
|
|
462
|
-
</div>
|
|
463
|
-
}
|
|
464
|
-
</div>
|
|
465
|
-
</div>
|
|
466
|
-
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
467
|
-
`, providers: [
|
|
468
|
-
LocalizationService,
|
|
469
|
-
{
|
|
470
|
-
provide: L10N_PREFIX,
|
|
471
|
-
useValue: 'kendo.circularprogressbar'
|
|
472
|
-
}
|
|
473
|
-
],
|
|
474
|
-
standalone: true,
|
|
475
|
-
imports: [LocalizedProgressBarMessagesDirective, NgTemplateOutlet, ResizeSensorComponent]
|
|
476
|
-
}]
|
|
477
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { hostClasses: [{
|
|
478
|
-
type: HostBinding,
|
|
479
|
-
args: ['class.k-circular-progressbar']
|
|
480
|
-
}], ariaMinAttribute: [{
|
|
481
|
-
type: HostBinding,
|
|
482
|
-
args: ['attr.aria-valuemin']
|
|
483
|
-
}], ariaMaxAttribute: [{
|
|
484
|
-
type: HostBinding,
|
|
485
|
-
args: ['attr.aria-valuemax']
|
|
486
|
-
}], ariaValueAttribute: [{
|
|
487
|
-
type: HostBinding,
|
|
488
|
-
args: ['attr.aria-valuenow']
|
|
489
|
-
}], roleAttribute: [{
|
|
490
|
-
type: HostBinding,
|
|
491
|
-
args: ['attr.role']
|
|
492
|
-
}], value: [{
|
|
493
|
-
type: Input
|
|
494
|
-
}], max: [{
|
|
495
|
-
type: Input
|
|
496
|
-
}], min: [{
|
|
497
|
-
type: Input
|
|
498
|
-
}], animation: [{
|
|
499
|
-
type: Input
|
|
500
|
-
}], opacity: [{
|
|
501
|
-
type: Input
|
|
502
|
-
}], indeterminate: [{
|
|
503
|
-
type: Input
|
|
504
|
-
}], progressColor: [{
|
|
505
|
-
type: Input
|
|
506
|
-
}], animationEnd: [{
|
|
507
|
-
type: Output
|
|
508
|
-
}], progress: [{
|
|
509
|
-
type: ViewChild,
|
|
510
|
-
args: ['progress']
|
|
511
|
-
}], scale: [{
|
|
512
|
-
type: ViewChild,
|
|
513
|
-
args: ['scale']
|
|
514
|
-
}], labelElement: [{
|
|
515
|
-
type: ViewChild,
|
|
516
|
-
args: ["label"]
|
|
517
|
-
}], surface: [{
|
|
518
|
-
type: ViewChild,
|
|
519
|
-
args: ["surface"]
|
|
520
|
-
}], centerTemplate: [{
|
|
521
|
-
type: ContentChild,
|
|
522
|
-
args: [CircularProgressbarCenterTemplateDirective]
|
|
523
|
-
}] } });
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
package/esm2022/circularprogressbar/models/circular-progressbar-progress-color-interface.mjs
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* Defines the color range configuration of the pointer.
|
|
7
|
-
*/
|
|
8
|
-
export {};
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export const MIN_MAX_ERROR_MESSAGE = `The max value should be greater than the min.`;
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export const LABEL_DECIMALS = 3;
|
|
13
|
-
/**
|
|
14
|
-
* @hidden
|
|
15
|
-
*/
|
|
16
|
-
export const MIN_RATIO = 0.0001;
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, forwardRef } from '@angular/core';
|
|
6
|
-
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
|
-
import { ProgressBarMessages } from './messages';
|
|
8
|
-
import * as i0 from "@angular/core";
|
|
9
|
-
import * as i1 from "@progress/kendo-angular-l10n";
|
|
10
|
-
/**
|
|
11
|
-
* Custom component messages override default component messages
|
|
12
|
-
* ([see example]({% slug rtl_layout %})).
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* ```html
|
|
16
|
-
* <!-- Custom messages for ProgressBar -->
|
|
17
|
-
* <kendo-progressbar [value]="value">
|
|
18
|
-
* <kendo-progressbar-messages
|
|
19
|
-
* progressBarLabel="Changed ProgressBar Label"
|
|
20
|
-
* ></kendo-progressbar-messages>
|
|
21
|
-
* </kendo-progressbar>
|
|
22
|
-
*
|
|
23
|
-
* <!-- Custom messages for ChunkProgressBar -->
|
|
24
|
-
* <kendo-chunkprogressbar [value]="value" [chunkCount]="chunks">
|
|
25
|
-
* <kendo-progressbar-messages
|
|
26
|
-
* progressBarLabel="Changed Chunk Label"
|
|
27
|
-
* ></kendo-progressbar-messages>
|
|
28
|
-
* </kendo-chunkprogressbar>
|
|
29
|
-
*
|
|
30
|
-
* <!-- Custom messages for CircularProgressBar -->
|
|
31
|
-
* <kendo-circularprogressbar [value]="value">
|
|
32
|
-
* <kendo-progressbar-messages
|
|
33
|
-
* progressBarLabel="Changed Circular Label"
|
|
34
|
-
* ></kendo-progressbar-messages>
|
|
35
|
-
* </kendo-circularprogressbar>
|
|
36
|
-
* ```
|
|
37
|
-
*/
|
|
38
|
-
export class ProgressBarCustomMessagesComponent extends ProgressBarMessages {
|
|
39
|
-
service;
|
|
40
|
-
constructor(service) {
|
|
41
|
-
super();
|
|
42
|
-
this.service = service;
|
|
43
|
-
}
|
|
44
|
-
get override() {
|
|
45
|
-
return true;
|
|
46
|
-
}
|
|
47
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProgressBarCustomMessagesComponent, isStandalone: true, selector: "kendo-progressbar-messages", providers: [
|
|
49
|
-
{
|
|
50
|
-
provide: ProgressBarMessages,
|
|
51
|
-
useExisting: forwardRef(() => ProgressBarCustomMessagesComponent)
|
|
52
|
-
}
|
|
53
|
-
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
54
|
-
}
|
|
55
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarCustomMessagesComponent, decorators: [{
|
|
56
|
-
type: Component,
|
|
57
|
-
args: [{
|
|
58
|
-
providers: [
|
|
59
|
-
{
|
|
60
|
-
provide: ProgressBarMessages,
|
|
61
|
-
useExisting: forwardRef(() => ProgressBarCustomMessagesComponent)
|
|
62
|
-
}
|
|
63
|
-
],
|
|
64
|
-
selector: 'kendo-progressbar-messages',
|
|
65
|
-
template: ``,
|
|
66
|
-
standalone: true
|
|
67
|
-
}]
|
|
68
|
-
}], ctorParameters: () => [{ type: i1.LocalizationService }] });
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive, forwardRef } from '@angular/core';
|
|
6
|
-
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
|
-
import { ProgressBarMessages } from './messages';
|
|
8
|
-
import * as i0 from "@angular/core";
|
|
9
|
-
import * as i1 from "@progress/kendo-angular-l10n";
|
|
10
|
-
/**
|
|
11
|
-
* @hidden
|
|
12
|
-
*/
|
|
13
|
-
export class LocalizedProgressBarMessagesDirective extends ProgressBarMessages {
|
|
14
|
-
service;
|
|
15
|
-
constructor(service) {
|
|
16
|
-
super();
|
|
17
|
-
this.service = service;
|
|
18
|
-
}
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalizedProgressBarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
20
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LocalizedProgressBarMessagesDirective, isStandalone: true, selector: "[kendoProgressBarLocalizedMessages]", providers: [
|
|
21
|
-
{
|
|
22
|
-
provide: ProgressBarMessages,
|
|
23
|
-
useExisting: forwardRef(() => LocalizedProgressBarMessagesDirective)
|
|
24
|
-
}
|
|
25
|
-
], usesInheritance: true, ngImport: i0 });
|
|
26
|
-
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalizedProgressBarMessagesDirective, decorators: [{
|
|
28
|
-
type: Directive,
|
|
29
|
-
args: [{
|
|
30
|
-
providers: [
|
|
31
|
-
{
|
|
32
|
-
provide: ProgressBarMessages,
|
|
33
|
-
useExisting: forwardRef(() => LocalizedProgressBarMessagesDirective)
|
|
34
|
-
}
|
|
35
|
-
],
|
|
36
|
-
selector: `[kendoProgressBarLocalizedMessages]`,
|
|
37
|
-
standalone: true
|
|
38
|
-
}]
|
|
39
|
-
}], ctorParameters: () => [{ type: i1.LocalizationService }] });
|