@progress/kendo-angular-progressbar 21.1.1-develop.2 → 21.2.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/esm2022/chunk/chunk-progressbar.component.mjs +33 -29
- package/esm2022/circularprogressbar/circular-progressbar.component.mjs +37 -33
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/progressbar.component.mjs +65 -57
- package/fesm2022/progress-kendo-angular-progressbar.mjs +135 -119
- package/package.json +5 -5
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { ProgressBarBase } from '../common/progressbar-base';
|
|
6
6
|
import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
|
|
7
7
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
8
|
-
import {
|
|
8
|
+
import { NgClass, NgStyle } from '@angular/common';
|
|
9
9
|
import { LocalizedProgressBarMessagesDirective } from '../common/localization/localized-messages.directive';
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
11
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
@@ -112,7 +112,7 @@ export class ChunkProgressBarComponent extends ProgressBarBase {
|
|
|
112
112
|
this.renderer = renderer;
|
|
113
113
|
}
|
|
114
114
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChunkProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
115
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
115
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChunkProgressBarComponent, isStandalone: true, selector: "kendo-chunkprogressbar", inputs: { chunkCount: "chunkCount", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass" }, host: { properties: { "class.k-chunk-progressbar": "this.chunkClass" } }, providers: [
|
|
116
116
|
LocalizationService,
|
|
117
117
|
{
|
|
118
118
|
provide: L10N_PREFIX,
|
|
@@ -120,23 +120,25 @@ export class ChunkProgressBarComponent extends ProgressBarBase {
|
|
|
120
120
|
}
|
|
121
121
|
], exportAs: ["kendoChunkProgressBar"], usesInheritance: true, ngImport: i0, template: `
|
|
122
122
|
<ng-container kendoProgressBarLocalizedMessages
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
123
|
+
i18n-progressBarLabel="kendo.chunkprogressbar.progressBarLabel|The aria-label attribute for the ChunkProgressBar component."
|
|
124
|
+
progressBarLabel="Chunk progressbar"
|
|
125
|
+
>
|
|
126
126
|
</ng-container>
|
|
127
127
|
<ul class="k-reset k-progressbar-chunks">
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
128
|
+
@for (chunk of chunks; track $index; let i = $index) {
|
|
129
|
+
<li class="k-progressbar-chunk"
|
|
130
|
+
[class.k-first]="i === 0"
|
|
131
|
+
[class.k-last]="i === chunkCount - 1"
|
|
132
|
+
[class.k-selected]="chunk"
|
|
133
|
+
[ngClass]="chunk ? progressCssClass : emptyCssClass"
|
|
134
|
+
[ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
|
|
135
|
+
[style.width]="orientationStyles.width"
|
|
136
|
+
[style.height]="orientationStyles.height"
|
|
137
|
+
>
|
|
137
138
|
</li>
|
|
139
|
+
}
|
|
138
140
|
</ul>
|
|
139
|
-
|
|
141
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
140
142
|
}
|
|
141
143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChunkProgressBarComponent, decorators: [{
|
|
142
144
|
type: Component,
|
|
@@ -145,23 +147,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
145
147
|
selector: 'kendo-chunkprogressbar',
|
|
146
148
|
template: `
|
|
147
149
|
<ng-container kendoProgressBarLocalizedMessages
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
150
|
+
i18n-progressBarLabel="kendo.chunkprogressbar.progressBarLabel|The aria-label attribute for the ChunkProgressBar component."
|
|
151
|
+
progressBarLabel="Chunk progressbar"
|
|
152
|
+
>
|
|
151
153
|
</ng-container>
|
|
152
154
|
<ul class="k-reset k-progressbar-chunks">
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
155
|
+
@for (chunk of chunks; track $index; let i = $index) {
|
|
156
|
+
<li class="k-progressbar-chunk"
|
|
157
|
+
[class.k-first]="i === 0"
|
|
158
|
+
[class.k-last]="i === chunkCount - 1"
|
|
159
|
+
[class.k-selected]="chunk"
|
|
160
|
+
[ngClass]="chunk ? progressCssClass : emptyCssClass"
|
|
161
|
+
[ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
|
|
162
|
+
[style.width]="orientationStyles.width"
|
|
163
|
+
[style.height]="orientationStyles.height"
|
|
164
|
+
>
|
|
162
165
|
</li>
|
|
166
|
+
}
|
|
163
167
|
</ul>
|
|
164
|
-
|
|
168
|
+
`,
|
|
165
169
|
providers: [
|
|
166
170
|
LocalizationService,
|
|
167
171
|
{
|
|
@@ -170,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
170
174
|
}
|
|
171
175
|
],
|
|
172
176
|
standalone: true,
|
|
173
|
-
imports: [LocalizedProgressBarMessagesDirective,
|
|
177
|
+
imports: [LocalizedProgressBarMessagesDirective, NgClass, NgStyle]
|
|
174
178
|
}]
|
|
175
179
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { chunkClass: [{
|
|
176
180
|
type: HostBinding,
|
|
@@ -11,7 +11,7 @@ import { take } from 'rxjs/operators';
|
|
|
11
11
|
import { hasElementSize, removeProgressBarStyles, setProgressBarStyles } from '../common/util';
|
|
12
12
|
import { packageMetadata } from '../package-metadata';
|
|
13
13
|
import { CircularProgressbarCenterTemplateDirective } from './center-template.directive';
|
|
14
|
-
import {
|
|
14
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
15
15
|
import { LocalizedProgressBarMessagesDirective } from '../common/localization/localized-messages.directive';
|
|
16
16
|
import * as i0 from "@angular/core";
|
|
17
17
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
@@ -407,7 +407,7 @@ export class CircularProgressBarComponent {
|
|
|
407
407
|
}
|
|
408
408
|
}
|
|
409
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: "
|
|
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
411
|
LocalizationService,
|
|
412
412
|
{
|
|
413
413
|
provide: L10N_PREFIX,
|
|
@@ -415,25 +415,27 @@ export class CircularProgressBarComponent {
|
|
|
415
415
|
}
|
|
416
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
417
|
<ng-container kendoProgressBarLocalizedMessages
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
418
|
+
i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The aria-label attribute for the Circular ProgressBar component."
|
|
419
|
+
progressBarLabel="Circular progressbar"
|
|
420
|
+
>
|
|
421
421
|
</ng-container>
|
|
422
422
|
<div #surface class="k-circular-progressbar-surface">
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
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>
|
|
434
436
|
</div>
|
|
435
437
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
436
|
-
|
|
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"] }] });
|
|
437
439
|
}
|
|
438
440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
|
|
439
441
|
type: Component,
|
|
@@ -442,25 +444,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
442
444
|
selector: 'kendo-circularprogressbar',
|
|
443
445
|
template: `
|
|
444
446
|
<ng-container kendoProgressBarLocalizedMessages
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
447
|
+
i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The aria-label attribute for the Circular ProgressBar component."
|
|
448
|
+
progressBarLabel="Circular progressbar"
|
|
449
|
+
>
|
|
448
450
|
</ng-container>
|
|
449
451
|
<div #surface class="k-circular-progressbar-surface">
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
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>
|
|
461
465
|
</div>
|
|
462
466
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
463
|
-
|
|
467
|
+
`, providers: [
|
|
464
468
|
LocalizationService,
|
|
465
469
|
{
|
|
466
470
|
provide: L10N_PREFIX,
|
|
@@ -468,7 +472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
468
472
|
}
|
|
469
473
|
],
|
|
470
474
|
standalone: true,
|
|
471
|
-
imports: [LocalizedProgressBarMessagesDirective,
|
|
475
|
+
imports: [LocalizedProgressBarMessagesDirective, NgTemplateOutlet, ResizeSensorComponent]
|
|
472
476
|
}]
|
|
473
477
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { hostClasses: [{
|
|
474
478
|
type: HostBinding,
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '21.
|
|
13
|
+
publishDate: 1763998058,
|
|
14
|
+
version: '21.2.0-develop.1',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -7,7 +7,7 @@ import { Component, Input, NgZone, Renderer2, ViewChild, ElementRef, Output, Eve
|
|
|
7
7
|
import { formatValue, calculateRatio, runAnimation, stopCurrentAnimation } from './common/util';
|
|
8
8
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
9
9
|
import { hasObservers } from '@progress/kendo-angular-common';
|
|
10
|
-
import { NgStyle, NgClass
|
|
10
|
+
import { NgStyle, NgClass } from '@angular/common';
|
|
11
11
|
import { LocalizedProgressBarMessagesDirective } from './common/localization/localized-messages.directive';
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
13
13
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
@@ -255,7 +255,7 @@ export class ProgressBarComponent extends ProgressBarBase {
|
|
|
255
255
|
});
|
|
256
256
|
}
|
|
257
257
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
258
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
258
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProgressBarComponent, isStandalone: true, selector: "kendo-progressbar", inputs: { label: "label", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass", animation: "animation" }, outputs: { animationEnd: "animationEnd" }, providers: [
|
|
259
259
|
LocalizationService,
|
|
260
260
|
{
|
|
261
261
|
provide: L10N_PREFIX,
|
|
@@ -263,40 +263,44 @@ export class ProgressBarComponent extends ProgressBarBase {
|
|
|
263
263
|
}
|
|
264
264
|
], viewQueries: [{ propertyName: "progressStatusElement", first: true, predicate: ["progressStatus"], descendants: true }, { propertyName: "progressStatusWrapperElement", first: true, predicate: ["progressStatusWrap"], descendants: true }], exportAs: ["kendoProgressBar"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
265
265
|
<ng-container kendoProgressBarLocalizedMessages
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
266
|
+
i18n-progressBarLabel="kendo.progressbar.progressBarLabel|The aria-label attribute for the ProgressBar component."
|
|
267
|
+
progressBarLabel="Progressbar"
|
|
268
|
+
>
|
|
269
269
|
</ng-container>
|
|
270
270
|
<span class="k-progress-status-wrap"
|
|
271
|
+
[class.k-progress-start]="isPositionStart"
|
|
272
|
+
[class.k-progress-center]="isPositionCenter"
|
|
273
|
+
[class.k-progress-end]="isPositionEnd"
|
|
274
|
+
[ngStyle]="emptyCssStyle"
|
|
275
|
+
[ngClass]="emptyCssClass">
|
|
276
|
+
@if (showLabel) {
|
|
277
|
+
<span class="k-progress-status">{{formattedLabelValue}}</span>
|
|
278
|
+
}
|
|
279
|
+
</span>
|
|
280
|
+
<div
|
|
281
|
+
#progressStatus
|
|
282
|
+
class="k-selected k-progressbar-value"
|
|
283
|
+
[class.k-complete]="isCompleted"
|
|
284
|
+
[ngStyle]="progressCssStyle"
|
|
285
|
+
[ngClass]="progressCssClass"
|
|
286
|
+
[style.width.%]="statusWidth"
|
|
287
|
+
[style.height.%]="statusHeight"
|
|
288
|
+
>
|
|
289
|
+
<span
|
|
290
|
+
#progressStatusWrap
|
|
291
|
+
class="k-progress-status-wrap"
|
|
292
|
+
[style.width.%]="statusWrapperWidth"
|
|
293
|
+
[style.height.%]="statusWrapperHeight"
|
|
271
294
|
[class.k-progress-start]="isPositionStart"
|
|
272
295
|
[class.k-progress-center]="isPositionCenter"
|
|
273
296
|
[class.k-progress-end]="isPositionEnd"
|
|
274
|
-
[ngStyle]="emptyCssStyle"
|
|
275
|
-
[ngClass]="emptyCssClass">
|
|
276
|
-
<span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>
|
|
277
|
-
</span>
|
|
278
|
-
<div
|
|
279
|
-
#progressStatus
|
|
280
|
-
class="k-selected k-progressbar-value"
|
|
281
|
-
[class.k-complete]="isCompleted"
|
|
282
|
-
[ngStyle]="progressCssStyle"
|
|
283
|
-
[ngClass]="progressCssClass"
|
|
284
|
-
[style.width.%]="statusWidth"
|
|
285
|
-
[style.height.%]="statusHeight"
|
|
286
297
|
>
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
[style.height.%]="statusWrapperHeight"
|
|
292
|
-
[class.k-progress-start]="isPositionStart"
|
|
293
|
-
[class.k-progress-center]="isPositionCenter"
|
|
294
|
-
[class.k-progress-end]="isPositionEnd"
|
|
295
|
-
>
|
|
296
|
-
<span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>
|
|
297
|
-
</span>
|
|
298
|
+
@if (showLabel) {
|
|
299
|
+
<span class="k-progress-status">{{formattedLabelValue}}</span>
|
|
300
|
+
}
|
|
301
|
+
</span>
|
|
298
302
|
</div>
|
|
299
|
-
|
|
303
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
300
304
|
}
|
|
301
305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
302
306
|
type: Component,
|
|
@@ -305,40 +309,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
305
309
|
selector: 'kendo-progressbar',
|
|
306
310
|
template: `
|
|
307
311
|
<ng-container kendoProgressBarLocalizedMessages
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
312
|
+
i18n-progressBarLabel="kendo.progressbar.progressBarLabel|The aria-label attribute for the ProgressBar component."
|
|
313
|
+
progressBarLabel="Progressbar"
|
|
314
|
+
>
|
|
311
315
|
</ng-container>
|
|
312
316
|
<span class="k-progress-status-wrap"
|
|
317
|
+
[class.k-progress-start]="isPositionStart"
|
|
318
|
+
[class.k-progress-center]="isPositionCenter"
|
|
319
|
+
[class.k-progress-end]="isPositionEnd"
|
|
320
|
+
[ngStyle]="emptyCssStyle"
|
|
321
|
+
[ngClass]="emptyCssClass">
|
|
322
|
+
@if (showLabel) {
|
|
323
|
+
<span class="k-progress-status">{{formattedLabelValue}}</span>
|
|
324
|
+
}
|
|
325
|
+
</span>
|
|
326
|
+
<div
|
|
327
|
+
#progressStatus
|
|
328
|
+
class="k-selected k-progressbar-value"
|
|
329
|
+
[class.k-complete]="isCompleted"
|
|
330
|
+
[ngStyle]="progressCssStyle"
|
|
331
|
+
[ngClass]="progressCssClass"
|
|
332
|
+
[style.width.%]="statusWidth"
|
|
333
|
+
[style.height.%]="statusHeight"
|
|
334
|
+
>
|
|
335
|
+
<span
|
|
336
|
+
#progressStatusWrap
|
|
337
|
+
class="k-progress-status-wrap"
|
|
338
|
+
[style.width.%]="statusWrapperWidth"
|
|
339
|
+
[style.height.%]="statusWrapperHeight"
|
|
313
340
|
[class.k-progress-start]="isPositionStart"
|
|
314
341
|
[class.k-progress-center]="isPositionCenter"
|
|
315
342
|
[class.k-progress-end]="isPositionEnd"
|
|
316
|
-
[ngStyle]="emptyCssStyle"
|
|
317
|
-
[ngClass]="emptyCssClass">
|
|
318
|
-
<span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>
|
|
319
|
-
</span>
|
|
320
|
-
<div
|
|
321
|
-
#progressStatus
|
|
322
|
-
class="k-selected k-progressbar-value"
|
|
323
|
-
[class.k-complete]="isCompleted"
|
|
324
|
-
[ngStyle]="progressCssStyle"
|
|
325
|
-
[ngClass]="progressCssClass"
|
|
326
|
-
[style.width.%]="statusWidth"
|
|
327
|
-
[style.height.%]="statusHeight"
|
|
328
343
|
>
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
[style.height.%]="statusWrapperHeight"
|
|
334
|
-
[class.k-progress-start]="isPositionStart"
|
|
335
|
-
[class.k-progress-center]="isPositionCenter"
|
|
336
|
-
[class.k-progress-end]="isPositionEnd"
|
|
337
|
-
>
|
|
338
|
-
<span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>
|
|
339
|
-
</span>
|
|
344
|
+
@if (showLabel) {
|
|
345
|
+
<span class="k-progress-status">{{formattedLabelValue}}</span>
|
|
346
|
+
}
|
|
347
|
+
</span>
|
|
340
348
|
</div>
|
|
341
|
-
|
|
349
|
+
`,
|
|
342
350
|
providers: [
|
|
343
351
|
LocalizationService,
|
|
344
352
|
{
|
|
@@ -347,7 +355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
347
355
|
}
|
|
348
356
|
],
|
|
349
357
|
standalone: true,
|
|
350
|
-
imports: [LocalizedProgressBarMessagesDirective, NgStyle, NgClass
|
|
358
|
+
imports: [LocalizedProgressBarMessagesDirective, NgStyle, NgClass]
|
|
351
359
|
}]
|
|
352
360
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { label: [{
|
|
353
361
|
type: Input
|
|
@@ -8,7 +8,7 @@ import * as i0 from '@angular/core';
|
|
|
8
8
|
import { isDevMode, Component, HostBinding, Input, Directive, forwardRef, EventEmitter, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
|
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
10
|
import { hasObservers, isDocumentAvailable, isChanged, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
|
|
11
|
-
import { NgStyle, NgClass,
|
|
11
|
+
import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
12
12
|
import { Subscription } from 'rxjs';
|
|
13
13
|
import { take } from 'rxjs/operators';
|
|
14
14
|
|
|
@@ -20,8 +20,8 @@ const packageMetadata = {
|
|
|
20
20
|
productName: 'Kendo UI for Angular',
|
|
21
21
|
productCode: 'KENDOUIANGULAR',
|
|
22
22
|
productCodes: ['KENDOUIANGULAR'],
|
|
23
|
-
publishDate:
|
|
24
|
-
version: '21.
|
|
23
|
+
publishDate: 1763998058,
|
|
24
|
+
version: '21.2.0-develop.1',
|
|
25
25
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
26
26
|
};
|
|
27
27
|
|
|
@@ -643,7 +643,7 @@ class ProgressBarComponent extends ProgressBarBase {
|
|
|
643
643
|
});
|
|
644
644
|
}
|
|
645
645
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
646
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
646
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProgressBarComponent, isStandalone: true, selector: "kendo-progressbar", inputs: { label: "label", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass", animation: "animation" }, outputs: { animationEnd: "animationEnd" }, providers: [
|
|
647
647
|
LocalizationService,
|
|
648
648
|
{
|
|
649
649
|
provide: L10N_PREFIX,
|
|
@@ -651,40 +651,44 @@ class ProgressBarComponent extends ProgressBarBase {
|
|
|
651
651
|
}
|
|
652
652
|
], viewQueries: [{ propertyName: "progressStatusElement", first: true, predicate: ["progressStatus"], descendants: true }, { propertyName: "progressStatusWrapperElement", first: true, predicate: ["progressStatusWrap"], descendants: true }], exportAs: ["kendoProgressBar"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
653
653
|
<ng-container kendoProgressBarLocalizedMessages
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
654
|
+
i18n-progressBarLabel="kendo.progressbar.progressBarLabel|The aria-label attribute for the ProgressBar component."
|
|
655
|
+
progressBarLabel="Progressbar"
|
|
656
|
+
>
|
|
657
657
|
</ng-container>
|
|
658
658
|
<span class="k-progress-status-wrap"
|
|
659
|
+
[class.k-progress-start]="isPositionStart"
|
|
660
|
+
[class.k-progress-center]="isPositionCenter"
|
|
661
|
+
[class.k-progress-end]="isPositionEnd"
|
|
662
|
+
[ngStyle]="emptyCssStyle"
|
|
663
|
+
[ngClass]="emptyCssClass">
|
|
664
|
+
@if (showLabel) {
|
|
665
|
+
<span class="k-progress-status">{{formattedLabelValue}}</span>
|
|
666
|
+
}
|
|
667
|
+
</span>
|
|
668
|
+
<div
|
|
669
|
+
#progressStatus
|
|
670
|
+
class="k-selected k-progressbar-value"
|
|
671
|
+
[class.k-complete]="isCompleted"
|
|
672
|
+
[ngStyle]="progressCssStyle"
|
|
673
|
+
[ngClass]="progressCssClass"
|
|
674
|
+
[style.width.%]="statusWidth"
|
|
675
|
+
[style.height.%]="statusHeight"
|
|
676
|
+
>
|
|
677
|
+
<span
|
|
678
|
+
#progressStatusWrap
|
|
679
|
+
class="k-progress-status-wrap"
|
|
680
|
+
[style.width.%]="statusWrapperWidth"
|
|
681
|
+
[style.height.%]="statusWrapperHeight"
|
|
659
682
|
[class.k-progress-start]="isPositionStart"
|
|
660
683
|
[class.k-progress-center]="isPositionCenter"
|
|
661
684
|
[class.k-progress-end]="isPositionEnd"
|
|
662
|
-
[ngStyle]="emptyCssStyle"
|
|
663
|
-
[ngClass]="emptyCssClass">
|
|
664
|
-
<span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>
|
|
665
|
-
</span>
|
|
666
|
-
<div
|
|
667
|
-
#progressStatus
|
|
668
|
-
class="k-selected k-progressbar-value"
|
|
669
|
-
[class.k-complete]="isCompleted"
|
|
670
|
-
[ngStyle]="progressCssStyle"
|
|
671
|
-
[ngClass]="progressCssClass"
|
|
672
|
-
[style.width.%]="statusWidth"
|
|
673
|
-
[style.height.%]="statusHeight"
|
|
674
685
|
>
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
[style.height.%]="statusWrapperHeight"
|
|
680
|
-
[class.k-progress-start]="isPositionStart"
|
|
681
|
-
[class.k-progress-center]="isPositionCenter"
|
|
682
|
-
[class.k-progress-end]="isPositionEnd"
|
|
683
|
-
>
|
|
684
|
-
<span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>
|
|
685
|
-
</span>
|
|
686
|
+
@if (showLabel) {
|
|
687
|
+
<span class="k-progress-status">{{formattedLabelValue}}</span>
|
|
688
|
+
}
|
|
689
|
+
</span>
|
|
686
690
|
</div>
|
|
687
|
-
|
|
691
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
688
692
|
}
|
|
689
693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
690
694
|
type: Component,
|
|
@@ -693,40 +697,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
693
697
|
selector: 'kendo-progressbar',
|
|
694
698
|
template: `
|
|
695
699
|
<ng-container kendoProgressBarLocalizedMessages
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
700
|
+
i18n-progressBarLabel="kendo.progressbar.progressBarLabel|The aria-label attribute for the ProgressBar component."
|
|
701
|
+
progressBarLabel="Progressbar"
|
|
702
|
+
>
|
|
699
703
|
</ng-container>
|
|
700
704
|
<span class="k-progress-status-wrap"
|
|
705
|
+
[class.k-progress-start]="isPositionStart"
|
|
706
|
+
[class.k-progress-center]="isPositionCenter"
|
|
707
|
+
[class.k-progress-end]="isPositionEnd"
|
|
708
|
+
[ngStyle]="emptyCssStyle"
|
|
709
|
+
[ngClass]="emptyCssClass">
|
|
710
|
+
@if (showLabel) {
|
|
711
|
+
<span class="k-progress-status">{{formattedLabelValue}}</span>
|
|
712
|
+
}
|
|
713
|
+
</span>
|
|
714
|
+
<div
|
|
715
|
+
#progressStatus
|
|
716
|
+
class="k-selected k-progressbar-value"
|
|
717
|
+
[class.k-complete]="isCompleted"
|
|
718
|
+
[ngStyle]="progressCssStyle"
|
|
719
|
+
[ngClass]="progressCssClass"
|
|
720
|
+
[style.width.%]="statusWidth"
|
|
721
|
+
[style.height.%]="statusHeight"
|
|
722
|
+
>
|
|
723
|
+
<span
|
|
724
|
+
#progressStatusWrap
|
|
725
|
+
class="k-progress-status-wrap"
|
|
726
|
+
[style.width.%]="statusWrapperWidth"
|
|
727
|
+
[style.height.%]="statusWrapperHeight"
|
|
701
728
|
[class.k-progress-start]="isPositionStart"
|
|
702
729
|
[class.k-progress-center]="isPositionCenter"
|
|
703
730
|
[class.k-progress-end]="isPositionEnd"
|
|
704
|
-
[ngStyle]="emptyCssStyle"
|
|
705
|
-
[ngClass]="emptyCssClass">
|
|
706
|
-
<span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>
|
|
707
|
-
</span>
|
|
708
|
-
<div
|
|
709
|
-
#progressStatus
|
|
710
|
-
class="k-selected k-progressbar-value"
|
|
711
|
-
[class.k-complete]="isCompleted"
|
|
712
|
-
[ngStyle]="progressCssStyle"
|
|
713
|
-
[ngClass]="progressCssClass"
|
|
714
|
-
[style.width.%]="statusWidth"
|
|
715
|
-
[style.height.%]="statusHeight"
|
|
716
731
|
>
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
[style.height.%]="statusWrapperHeight"
|
|
722
|
-
[class.k-progress-start]="isPositionStart"
|
|
723
|
-
[class.k-progress-center]="isPositionCenter"
|
|
724
|
-
[class.k-progress-end]="isPositionEnd"
|
|
725
|
-
>
|
|
726
|
-
<span *ngIf="showLabel" class="k-progress-status">{{formattedLabelValue}}</span>
|
|
727
|
-
</span>
|
|
732
|
+
@if (showLabel) {
|
|
733
|
+
<span class="k-progress-status">{{formattedLabelValue}}</span>
|
|
734
|
+
}
|
|
735
|
+
</span>
|
|
728
736
|
</div>
|
|
729
|
-
|
|
737
|
+
`,
|
|
730
738
|
providers: [
|
|
731
739
|
LocalizationService,
|
|
732
740
|
{
|
|
@@ -735,7 +743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
735
743
|
}
|
|
736
744
|
],
|
|
737
745
|
standalone: true,
|
|
738
|
-
imports: [LocalizedProgressBarMessagesDirective, NgStyle, NgClass
|
|
746
|
+
imports: [LocalizedProgressBarMessagesDirective, NgStyle, NgClass]
|
|
739
747
|
}]
|
|
740
748
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { label: [{
|
|
741
749
|
type: Input
|
|
@@ -862,7 +870,7 @@ class ChunkProgressBarComponent extends ProgressBarBase {
|
|
|
862
870
|
this.renderer = renderer;
|
|
863
871
|
}
|
|
864
872
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChunkProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
865
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
873
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChunkProgressBarComponent, isStandalone: true, selector: "kendo-chunkprogressbar", inputs: { chunkCount: "chunkCount", progressCssStyle: "progressCssStyle", progressCssClass: "progressCssClass", emptyCssStyle: "emptyCssStyle", emptyCssClass: "emptyCssClass" }, host: { properties: { "class.k-chunk-progressbar": "this.chunkClass" } }, providers: [
|
|
866
874
|
LocalizationService,
|
|
867
875
|
{
|
|
868
876
|
provide: L10N_PREFIX,
|
|
@@ -870,23 +878,25 @@ class ChunkProgressBarComponent extends ProgressBarBase {
|
|
|
870
878
|
}
|
|
871
879
|
], exportAs: ["kendoChunkProgressBar"], usesInheritance: true, ngImport: i0, template: `
|
|
872
880
|
<ng-container kendoProgressBarLocalizedMessages
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
881
|
+
i18n-progressBarLabel="kendo.chunkprogressbar.progressBarLabel|The aria-label attribute for the ChunkProgressBar component."
|
|
882
|
+
progressBarLabel="Chunk progressbar"
|
|
883
|
+
>
|
|
876
884
|
</ng-container>
|
|
877
885
|
<ul class="k-reset k-progressbar-chunks">
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
886
|
+
@for (chunk of chunks; track $index; let i = $index) {
|
|
887
|
+
<li class="k-progressbar-chunk"
|
|
888
|
+
[class.k-first]="i === 0"
|
|
889
|
+
[class.k-last]="i === chunkCount - 1"
|
|
890
|
+
[class.k-selected]="chunk"
|
|
891
|
+
[ngClass]="chunk ? progressCssClass : emptyCssClass"
|
|
892
|
+
[ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
|
|
893
|
+
[style.width]="orientationStyles.width"
|
|
894
|
+
[style.height]="orientationStyles.height"
|
|
895
|
+
>
|
|
887
896
|
</li>
|
|
897
|
+
}
|
|
888
898
|
</ul>
|
|
889
|
-
|
|
899
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
890
900
|
}
|
|
891
901
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChunkProgressBarComponent, decorators: [{
|
|
892
902
|
type: Component,
|
|
@@ -895,23 +905,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
895
905
|
selector: 'kendo-chunkprogressbar',
|
|
896
906
|
template: `
|
|
897
907
|
<ng-container kendoProgressBarLocalizedMessages
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
908
|
+
i18n-progressBarLabel="kendo.chunkprogressbar.progressBarLabel|The aria-label attribute for the ChunkProgressBar component."
|
|
909
|
+
progressBarLabel="Chunk progressbar"
|
|
910
|
+
>
|
|
901
911
|
</ng-container>
|
|
902
912
|
<ul class="k-reset k-progressbar-chunks">
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
913
|
+
@for (chunk of chunks; track $index; let i = $index) {
|
|
914
|
+
<li class="k-progressbar-chunk"
|
|
915
|
+
[class.k-first]="i === 0"
|
|
916
|
+
[class.k-last]="i === chunkCount - 1"
|
|
917
|
+
[class.k-selected]="chunk"
|
|
918
|
+
[ngClass]="chunk ? progressCssClass : emptyCssClass"
|
|
919
|
+
[ngStyle]="chunk ? progressCssStyle : emptyCssStyle"
|
|
920
|
+
[style.width]="orientationStyles.width"
|
|
921
|
+
[style.height]="orientationStyles.height"
|
|
922
|
+
>
|
|
912
923
|
</li>
|
|
924
|
+
}
|
|
913
925
|
</ul>
|
|
914
|
-
|
|
926
|
+
`,
|
|
915
927
|
providers: [
|
|
916
928
|
LocalizationService,
|
|
917
929
|
{
|
|
@@ -920,7 +932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
920
932
|
}
|
|
921
933
|
],
|
|
922
934
|
standalone: true,
|
|
923
|
-
imports: [LocalizedProgressBarMessagesDirective,
|
|
935
|
+
imports: [LocalizedProgressBarMessagesDirective, NgClass, NgStyle]
|
|
924
936
|
}]
|
|
925
937
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { chunkClass: [{
|
|
926
938
|
type: HostBinding,
|
|
@@ -1358,7 +1370,7 @@ class CircularProgressBarComponent {
|
|
|
1358
1370
|
}
|
|
1359
1371
|
}
|
|
1360
1372
|
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 });
|
|
1361
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1373
|
+
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: [
|
|
1362
1374
|
LocalizationService,
|
|
1363
1375
|
{
|
|
1364
1376
|
provide: L10N_PREFIX,
|
|
@@ -1366,25 +1378,27 @@ class CircularProgressBarComponent {
|
|
|
1366
1378
|
}
|
|
1367
1379
|
], 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: `
|
|
1368
1380
|
<ng-container kendoProgressBarLocalizedMessages
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1381
|
+
i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The aria-label attribute for the Circular ProgressBar component."
|
|
1382
|
+
progressBarLabel="Circular progressbar"
|
|
1383
|
+
>
|
|
1372
1384
|
</ng-container>
|
|
1373
1385
|
<div #surface class="k-circular-progressbar-surface">
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1386
|
+
<div>
|
|
1387
|
+
<svg #svg>
|
|
1388
|
+
<g>
|
|
1389
|
+
<circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>
|
|
1390
|
+
<circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>
|
|
1391
|
+
</g>
|
|
1392
|
+
</svg>
|
|
1393
|
+
@if (centerTemplate) {
|
|
1394
|
+
<div class="k-circular-progressbar-label" #label>
|
|
1395
|
+
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
|
|
1396
|
+
</div>
|
|
1397
|
+
}
|
|
1398
|
+
</div>
|
|
1385
1399
|
</div>
|
|
1386
1400
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
1387
|
-
|
|
1401
|
+
`, 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"] }] });
|
|
1388
1402
|
}
|
|
1389
1403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
|
|
1390
1404
|
type: Component,
|
|
@@ -1393,25 +1407,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1393
1407
|
selector: 'kendo-circularprogressbar',
|
|
1394
1408
|
template: `
|
|
1395
1409
|
<ng-container kendoProgressBarLocalizedMessages
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1410
|
+
i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The aria-label attribute for the Circular ProgressBar component."
|
|
1411
|
+
progressBarLabel="Circular progressbar"
|
|
1412
|
+
>
|
|
1399
1413
|
</ng-container>
|
|
1400
1414
|
<div #surface class="k-circular-progressbar-surface">
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1415
|
+
<div>
|
|
1416
|
+
<svg #svg>
|
|
1417
|
+
<g>
|
|
1418
|
+
<circle class="k-circular-progressbar-scale" #scale stroke-width="9.5"></circle>
|
|
1419
|
+
<circle class="k-circular-progressbar-arc" #progress stroke-width="9.5"></circle>
|
|
1420
|
+
</g>
|
|
1421
|
+
</svg>
|
|
1422
|
+
@if (centerTemplate) {
|
|
1423
|
+
<div class="k-circular-progressbar-label" #label>
|
|
1424
|
+
<ng-template [ngTemplateOutlet]="centerTemplate.templateRef" [ngTemplateOutletContext]="centerTemplateContext"></ng-template>
|
|
1425
|
+
</div>
|
|
1426
|
+
}
|
|
1427
|
+
</div>
|
|
1412
1428
|
</div>
|
|
1413
1429
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
1414
|
-
|
|
1430
|
+
`, providers: [
|
|
1415
1431
|
LocalizationService,
|
|
1416
1432
|
{
|
|
1417
1433
|
provide: L10N_PREFIX,
|
|
@@ -1419,7 +1435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1419
1435
|
}
|
|
1420
1436
|
],
|
|
1421
1437
|
standalone: true,
|
|
1422
|
-
imports: [LocalizedProgressBarMessagesDirective,
|
|
1438
|
+
imports: [LocalizedProgressBarMessagesDirective, NgTemplateOutlet, ResizeSensorComponent]
|
|
1423
1439
|
}]
|
|
1424
1440
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { hostClasses: [{
|
|
1425
1441
|
type: HostBinding,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-progressbar",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.2.0-develop.1",
|
|
4
4
|
"description": "Kendo UI Angular component starter template",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"package": {
|
|
20
20
|
"productName": "Kendo UI for Angular",
|
|
21
21
|
"productCode": "KENDOUIANGULAR",
|
|
22
|
-
"publishDate":
|
|
22
|
+
"publishDate": 1763998058,
|
|
23
23
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"@angular/core": "18 - 21",
|
|
30
30
|
"@angular/platform-browser": "18 - 21",
|
|
31
31
|
"@progress/kendo-licensing": "^1.7.0",
|
|
32
|
-
"@progress/kendo-angular-common": "21.
|
|
33
|
-
"@progress/kendo-angular-l10n": "21.
|
|
32
|
+
"@progress/kendo-angular-common": "21.2.0-develop.1",
|
|
33
|
+
"@progress/kendo-angular-l10n": "21.2.0-develop.1",
|
|
34
34
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"tslib": "^2.3.1",
|
|
38
|
-
"@progress/kendo-angular-schematics": "21.
|
|
38
|
+
"@progress/kendo-angular-schematics": "21.2.0-develop.1"
|
|
39
39
|
},
|
|
40
40
|
"schematics": "./schematics/collection.json",
|
|
41
41
|
"module": "fesm2022/progress-kendo-angular-progressbar.mjs",
|