@progress/kendo-angular-progressbar 17.0.0-develop.8 → 17.0.0
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/README.md +36 -18
- package/chunk/chunk-progressbar.component.d.ts +1 -1
- package/circularprogressbar/circular-progressbar.component.d.ts +1 -1
- package/common/localization/messages.d.ts +1 -1
- package/common/progressbar-base.d.ts +1 -1
- package/{esm2020 → esm2022}/chunk/chunk-progressbar.component.mjs +52 -27
- package/{esm2020 → esm2022}/circularprogressbar/center-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/circularprogressbar/circular-progressbar.component.mjs +59 -44
- package/{esm2020 → esm2022}/common/localization/custom-messages.component.mjs +9 -8
- package/{esm2020 → esm2022}/common/localization/localized-messages.directive.mjs +9 -8
- package/{esm2020 → esm2022}/common/localization/messages.mjs +7 -3
- package/{esm2020 → esm2022}/common/progressbar-base.mjs +69 -64
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/progressbar.component.mjs +68 -33
- package/{esm2020 → esm2022}/progressbar.module.mjs +5 -8
- package/{fesm2015 → fesm2022}/progress-kendo-angular-progressbar.mjs +286 -202
- package/package.json +12 -18
- package/progressbar.component.d.ts +1 -1
- package/progressbar.module.d.ts +0 -4
- package/types/label-fn-type.d.ts +1 -1
- package/types/label-position.d.ts +1 -1
- package/types/label-type.d.ts +1 -1
- package/types/progressbar-orientation.d.ts +1 -1
- package/fesm2020/progress-kendo-angular-progressbar.mjs +0 -1471
- /package/{esm2020 → esm2022}/circularprogressbar/models/center-template-context.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/circularprogressbar/models/circular-progressbar-progress-color-interface.mjs +0 -0
- /package/{esm2020 → esm2022}/common/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/common/util.mjs +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-progressbar.mjs +0 -0
- /package/{esm2020 → esm2022}/types/animation-end-event.mjs +0 -0
- /package/{esm2020 → esm2022}/types/animation-options.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/types/label-fn-type.mjs +0 -0
- /package/{esm2020 → esm2022}/types/label-position.mjs +0 -0
- /package/{esm2020 → esm2022}/types/label-settings.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/types/label-type.mjs +0 -0
- /package/{esm2020 → esm2022}/types/progressbar-animation.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/types/progressbar-orientation.mjs +0 -0
package/README.md
CHANGED
|
@@ -1,33 +1,51 @@
|
|
|
1
|
-
<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
|
|
1
|
+
<a href="https://www.telerik.com/kendo-angular-ui/components/progressbars" target="_blank">
|
|
2
2
|
<img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
|
|
3
3
|
</a>
|
|
4
4
|
|
|
5
|
-
## Kendo UI for Angular ProgressBars Package
|
|
5
|
+
## Kendo UI for Angular ProgressBars Package
|
|
6
6
|
|
|
7
|
-
>
|
|
8
|
-
> *
|
|
9
|
-
> *
|
|
10
|
-
> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-progressbar) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-progressbar). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-progressbar).
|
|
11
|
-
> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
|
|
12
|
-
>
|
|
13
|
-
> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-progressbar) and speed up your development process!
|
|
7
|
+
> * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)—a commercial UI library.
|
|
8
|
+
> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
|
|
9
|
+
> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
|
|
14
10
|
|
|
15
|
-
Kendo UI for Angular
|
|
11
|
+
The [Kendo UI for Angular ProgressBars](https://www.telerik.com/kendo-angular-ui/components/progressbars) package contains a set of components display the progress of an ongoing task.
|
|
12
|
+
|
|
13
|
+
## What's Included in the Angular ProgressBars Package
|
|
14
|
+
|
|
15
|
+
The [Angular ProgressBars](https://www.telerik.com/kendo-angular-ui/components/progressbars) package includes three built-in components:
|
|
16
|
+
|
|
17
|
+
* [Angular ChunkProgressBar Component](https://www.telerik.com/kendo-angular-ui/components/progressbars/chunkprogressbar)—Displays and tracks the progress of a task as a predefined number of chunks, and supports horizontal and vertical orientation, as well as rendering in different directions.
|
|
18
|
+
* [Angular CircularProgressBar Component](https://www.telerik.com/kendo-angular-ui/components/progressbars/circularprogressbar)—Displays and tracks the progress of a task on an arc over a fully enclosed circle, allows for custom center templates and different colors depending on the progress.
|
|
19
|
+
* [Angular ProgressBar Component](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar)—Displays and tracks the progress of a task, supports multiple label formats, horizontal and vertical orientation as well as rendering in different directions.
|
|
20
|
+
|
|
21
|
+
## Key Features
|
|
22
|
+
|
|
23
|
+
Among the many features which the Kendo UI for Angular ProgressBars deliver are:
|
|
24
|
+
|
|
25
|
+
* [Orientation](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/orientation)—You can customize the orientation of the ProgressBars components, choosing between a horizontal and a vertical layout.
|
|
26
|
+
* [Direction](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/direction)—You can reverse the direction of the ProgressBars by setting their `reverse` option to `true`.
|
|
27
|
+
* [Appearance](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/appearance)—The ProgressBars enable you to set their height and width, as well as implement custom styling for their status indicator and label.
|
|
28
|
+
* [Disabled ProgressBars](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/disabled)—You can choose to render the ProgressBars in their disabled state so that, if need be present, users will not be able to interact with them.
|
|
29
|
+
* [Indeterminate State](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/indeterminate)—The ProgressBars allow you to indicate that a task is still in progress by setting an indeterminate state for the components.
|
|
30
|
+
* [Globalization](https://www.telerik.com/kendo-angular-ui/components/progressbars/globalization)—The ProgressBars support globalization to ensure that they can fit well in any application, no matter what languages and locales need to be supported. Additionally, the components support rendering in a right-to-left (RTL) direction.
|
|
31
|
+
* [Accessibility](https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/accessibility)—The ProgressBars are accessible for screen readers and support WAI-ARIA attributes.
|
|
32
|
+
|
|
33
|
+
## Support Options
|
|
34
|
+
|
|
35
|
+
For any issues you might encounter while working with the Kendo UI for Angular ProgressBars, you have the following support channels available:
|
|
36
|
+
|
|
37
|
+
* Industry-leading technical support—Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-tickets).
|
|
38
|
+
* Product forums—The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
|
|
39
|
+
* Feedback portal—The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
|
|
16
40
|
|
|
17
41
|
## Resources
|
|
18
42
|
|
|
19
|
-
* [
|
|
43
|
+
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
|
|
44
|
+
* [Getting Started with the Kendo UI for Angular ProgressBars](https://www.telerik.com/kendo-angular-ui/components/progressbars/installation/getting-started)
|
|
20
45
|
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
|
|
21
46
|
* [Blogs](http://www.telerik.com/blogs/kendo-ui)
|
|
22
47
|
* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
|
|
23
48
|
|
|
24
|
-
## Questions and Feedback
|
|
25
|
-
|
|
26
|
-
* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
|
|
27
|
-
* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
|
|
28
|
-
* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
|
|
29
|
-
* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
|
|
30
|
-
|
|
31
49
|
*Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
|
|
32
50
|
|
|
33
51
|
*Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*
|
|
@@ -82,5 +82,5 @@ export declare class ChunkProgressBarComponent extends ProgressBarBase {
|
|
|
82
82
|
*/
|
|
83
83
|
constructor(localization: LocalizationService, elem: ElementRef, renderer: Renderer2);
|
|
84
84
|
static ɵfac: i0.ɵɵFactoryDeclaration<ChunkProgressBarComponent, never>;
|
|
85
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ChunkProgressBarComponent, "kendo-chunkprogressbar", ["kendoChunkProgressBar"], { "chunkCount": "chunkCount"; "progressCssStyle": "progressCssStyle"; "progressCssClass": "progressCssClass"; "emptyCssStyle": "emptyCssStyle"; "emptyCssClass": "emptyCssClass"; }, {}, never, never, true, never>;
|
|
85
|
+
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>;
|
|
86
86
|
}
|
|
@@ -117,5 +117,5 @@ export declare class CircularProgressBarComponent implements AfterViewInit, OnCh
|
|
|
117
117
|
private setDirection;
|
|
118
118
|
private rtlChange;
|
|
119
119
|
static ɵfac: i0.ɵɵFactoryDeclaration<CircularProgressBarComponent, never>;
|
|
120
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<CircularProgressBarComponent, "kendo-circularprogressbar", ["kendoCircularProgressBar"], { "value": "value"; "max": "max"; "min": "min"; "animation": "animation"; "opacity": "opacity"; "indeterminate": "indeterminate"; "progressColor": "progressColor"; }, { "animationEnd": "animationEnd"; }, ["centerTemplate"], never, true, never>;
|
|
120
|
+
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>;
|
|
121
121
|
}
|
|
@@ -13,5 +13,5 @@ export declare class ProgressBarMessages extends ComponentMessages {
|
|
|
13
13
|
*/
|
|
14
14
|
progressBarLabel: string;
|
|
15
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarMessages, never>;
|
|
16
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<ProgressBarMessages, never, never, { "progressBarLabel": "progressBarLabel"; }, {}, never, never, false, never>;
|
|
16
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ProgressBarMessages, never, never, { "progressBarLabel": { "alias": "progressBarLabel"; "required": false; }; }, {}, never, never, false, never>;
|
|
17
17
|
}
|
|
@@ -103,5 +103,5 @@ export declare abstract class ProgressBarBase implements OnChanges {
|
|
|
103
103
|
ngOnChanges(changes: SimpleChanges): void;
|
|
104
104
|
ngOnDestroy(): void;
|
|
105
105
|
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarBase, never>;
|
|
106
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarBase, "ng-component", never, { "max": "max"; "min": "min"; "value": "value"; "orientation": "orientation"; "disabled": "disabled"; "reverse": "reverse"; "indeterminate": "indeterminate"; }, {}, never, never, false, never>;
|
|
106
|
+
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, false, never>;
|
|
107
107
|
}
|
|
@@ -27,25 +27,15 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
29
|
export class ChunkProgressBarComponent extends ProgressBarBase {
|
|
30
|
+
localization;
|
|
31
|
+
elem;
|
|
32
|
+
renderer;
|
|
33
|
+
chunkClass = true;
|
|
30
34
|
/**
|
|
31
|
-
*
|
|
35
|
+
* Sets the number of chunks into which the ChunkProgressBar will be split.
|
|
36
|
+
* Defaults to `5`.
|
|
32
37
|
*/
|
|
33
|
-
|
|
34
|
-
super(elem, renderer, localization);
|
|
35
|
-
this.localization = localization;
|
|
36
|
-
this.elem = elem;
|
|
37
|
-
this.renderer = renderer;
|
|
38
|
-
this.chunkClass = true;
|
|
39
|
-
/**
|
|
40
|
-
* Sets the number of chunks into which the ChunkProgressBar will be split.
|
|
41
|
-
* Defaults to `5`.
|
|
42
|
-
*/
|
|
43
|
-
this.chunkCount = 5;
|
|
44
|
-
this._orientationStyles = {
|
|
45
|
-
width: `${this.chunkSizePercentage}%`,
|
|
46
|
-
height: null
|
|
47
|
-
};
|
|
48
|
-
}
|
|
38
|
+
chunkCount = 5;
|
|
49
39
|
/**
|
|
50
40
|
* @hidden
|
|
51
41
|
*/
|
|
@@ -58,6 +48,28 @@ export class ChunkProgressBarComponent extends ProgressBarBase {
|
|
|
58
48
|
}
|
|
59
49
|
return chunks;
|
|
60
50
|
}
|
|
51
|
+
/**
|
|
52
|
+
* The CSS styles that will be rendered on the full chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
|
|
53
|
+
* Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
|
|
54
|
+
*/
|
|
55
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
56
|
+
progressCssStyle;
|
|
57
|
+
/**
|
|
58
|
+
* The CSS classes that will be rendered on the full chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
|
|
59
|
+
* Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
|
|
60
|
+
*/
|
|
61
|
+
progressCssClass;
|
|
62
|
+
/**
|
|
63
|
+
* The CSS styles that will be rendered on the empty chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
|
|
64
|
+
* Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
|
|
65
|
+
*/
|
|
66
|
+
emptyCssStyle;
|
|
67
|
+
/**
|
|
68
|
+
* The CSS classes that will be rendered on the empty chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
|
|
69
|
+
* Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
|
|
70
|
+
*/
|
|
71
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
72
|
+
emptyCssClass;
|
|
61
73
|
/**
|
|
62
74
|
* @hidden
|
|
63
75
|
*/
|
|
@@ -78,15 +90,27 @@ export class ChunkProgressBarComponent extends ProgressBarBase {
|
|
|
78
90
|
}
|
|
79
91
|
return this._orientationStyles;
|
|
80
92
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
93
|
+
_orientationStyles = {
|
|
94
|
+
width: `${this.chunkSizePercentage}%`,
|
|
95
|
+
height: null
|
|
96
|
+
};
|
|
97
|
+
/**
|
|
98
|
+
* @hidden
|
|
99
|
+
*/
|
|
100
|
+
constructor(localization, elem, renderer) {
|
|
101
|
+
super(elem, renderer, localization);
|
|
102
|
+
this.localization = localization;
|
|
103
|
+
this.elem = elem;
|
|
104
|
+
this.renderer = renderer;
|
|
105
|
+
}
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChunkProgressBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [
|
|
108
|
+
LocalizationService,
|
|
109
|
+
{
|
|
110
|
+
provide: L10N_PREFIX,
|
|
111
|
+
useValue: 'kendo.chunkprogressbar'
|
|
112
|
+
}
|
|
113
|
+
], exportAs: ["kendoChunkProgressBar"], usesInheritance: true, ngImport: i0, template: `
|
|
90
114
|
<ng-container kendoProgressBarLocalizedMessages
|
|
91
115
|
i18n-progressBarLabel="kendo.chunkprogressbar.progressBarLabel|The aria-label attribute for the ChunkProgressBar component."
|
|
92
116
|
progressBarLabel="Chunk progressbar"
|
|
@@ -105,7 +129,8 @@ ChunkProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
|
|
|
105
129
|
</li>
|
|
106
130
|
</ul>
|
|
107
131
|
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
108
|
-
|
|
132
|
+
}
|
|
133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChunkProgressBarComponent, decorators: [{
|
|
109
134
|
type: Component,
|
|
110
135
|
args: [{
|
|
111
136
|
exportAs: 'kendoChunkProgressBar',
|
|
@@ -9,13 +9,14 @@ import * as i0 from "@angular/core";
|
|
|
9
9
|
* ([see example]({% slug center_template_circularprogressbar %})).
|
|
10
10
|
*/
|
|
11
11
|
export class CircularProgressbarCenterTemplateDirective {
|
|
12
|
+
templateRef;
|
|
12
13
|
constructor(templateRef) {
|
|
13
14
|
this.templateRef = templateRef;
|
|
14
15
|
}
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
17
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CircularProgressbarCenterTemplateDirective, isStandalone: true, selector: "[kendoCircularProgressbarCenterTemplate]", ngImport: i0 });
|
|
15
18
|
}
|
|
16
|
-
|
|
17
|
-
CircularProgressbarCenterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CircularProgressbarCenterTemplateDirective, isStandalone: true, selector: "[kendoCircularProgressbarCenterTemplate]", ngImport: i0 });
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, decorators: [{
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularProgressbarCenterTemplateDirective, decorators: [{
|
|
19
20
|
type: Directive,
|
|
20
21
|
args: [{
|
|
21
22
|
selector: '[kendoCircularProgressbarCenterTemplate]',
|
|
@@ -33,40 +33,12 @@ const DEFAULT_SURFACE_SIZE = 200;
|
|
|
33
33
|
* ```
|
|
34
34
|
*/
|
|
35
35
|
export class CircularProgressBarComponent {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
this.hostClasses = true;
|
|
43
|
-
this.roleAttribute = 'progressbar';
|
|
44
|
-
/**
|
|
45
|
-
* Indicates whether an animation will be played on value changes.
|
|
46
|
-
*
|
|
47
|
-
* @default false
|
|
48
|
-
*/
|
|
49
|
-
this.animation = false;
|
|
50
|
-
/**
|
|
51
|
-
* The opacity of the value arc.
|
|
52
|
-
* @default 1
|
|
53
|
-
*/
|
|
54
|
-
this.opacity = 1;
|
|
55
|
-
/**
|
|
56
|
-
* Fires when the animation which indicates the latest value change is completed.
|
|
57
|
-
*/
|
|
58
|
-
this.animationEnd = new EventEmitter();
|
|
59
|
-
this.centerTemplateContext = {};
|
|
60
|
-
this._indeterminate = false;
|
|
61
|
-
this._max = 100;
|
|
62
|
-
this._min = 0;
|
|
63
|
-
this._value = 0;
|
|
64
|
-
this.previousValue = 0;
|
|
65
|
-
this.internalValue = 0;
|
|
66
|
-
this.subscriptions = new Subscription();
|
|
67
|
-
validatePackage(packageMetadata);
|
|
68
|
-
this.subscriptions.add(this.localization.changes.subscribe(this.rtlChange.bind(this)));
|
|
69
|
-
}
|
|
36
|
+
renderer;
|
|
37
|
+
cdr;
|
|
38
|
+
localization;
|
|
39
|
+
element;
|
|
40
|
+
zone;
|
|
41
|
+
hostClasses = true;
|
|
70
42
|
get ariaMinAttribute() {
|
|
71
43
|
return String(this.min);
|
|
72
44
|
}
|
|
@@ -76,6 +48,7 @@ export class CircularProgressBarComponent {
|
|
|
76
48
|
get ariaValueAttribute() {
|
|
77
49
|
return this.indeterminate ? undefined : String(this.value);
|
|
78
50
|
}
|
|
51
|
+
roleAttribute = 'progressbar';
|
|
79
52
|
/**
|
|
80
53
|
* Sets the default value of the Circular Progressbar between `min` and `max`.
|
|
81
54
|
*
|
|
@@ -122,6 +95,17 @@ export class CircularProgressBarComponent {
|
|
|
122
95
|
get min() {
|
|
123
96
|
return this._min;
|
|
124
97
|
}
|
|
98
|
+
/**
|
|
99
|
+
* Indicates whether an animation will be played on value changes.
|
|
100
|
+
*
|
|
101
|
+
* @default false
|
|
102
|
+
*/
|
|
103
|
+
animation = false;
|
|
104
|
+
/**
|
|
105
|
+
* The opacity of the value arc.
|
|
106
|
+
* @default 1
|
|
107
|
+
*/
|
|
108
|
+
opacity = 1;
|
|
125
109
|
/**
|
|
126
110
|
* Puts the Circular ProgressBar in indeterminate state.
|
|
127
111
|
* @default false
|
|
@@ -132,6 +116,37 @@ export class CircularProgressBarComponent {
|
|
|
132
116
|
get indeterminate() {
|
|
133
117
|
return this._indeterminate;
|
|
134
118
|
}
|
|
119
|
+
/**
|
|
120
|
+
* Configures the pointer color. Could be set to a single color string or customized per progress stages.
|
|
121
|
+
*/
|
|
122
|
+
progressColor;
|
|
123
|
+
/**
|
|
124
|
+
* Fires when the animation which indicates the latest value change is completed.
|
|
125
|
+
*/
|
|
126
|
+
animationEnd = new EventEmitter();
|
|
127
|
+
progress;
|
|
128
|
+
scale;
|
|
129
|
+
labelElement;
|
|
130
|
+
surface;
|
|
131
|
+
centerTemplate;
|
|
132
|
+
centerTemplateContext = {};
|
|
133
|
+
_indeterminate = false;
|
|
134
|
+
_max = 100;
|
|
135
|
+
_min = 0;
|
|
136
|
+
_value = 0;
|
|
137
|
+
previousValue = 0;
|
|
138
|
+
internalValue = 0;
|
|
139
|
+
rtl;
|
|
140
|
+
subscriptions = new Subscription();
|
|
141
|
+
constructor(renderer, cdr, localization, element, zone) {
|
|
142
|
+
this.renderer = renderer;
|
|
143
|
+
this.cdr = cdr;
|
|
144
|
+
this.localization = localization;
|
|
145
|
+
this.element = element;
|
|
146
|
+
this.zone = zone;
|
|
147
|
+
validatePackage(packageMetadata);
|
|
148
|
+
this.subscriptions.add(this.localization.changes.subscribe(this.rtlChange.bind(this)));
|
|
149
|
+
}
|
|
135
150
|
ngAfterViewInit() {
|
|
136
151
|
if (!isDocumentAvailable()) {
|
|
137
152
|
return;
|
|
@@ -376,15 +391,14 @@ export class CircularProgressBarComponent {
|
|
|
376
391
|
this.setDirection();
|
|
377
392
|
}
|
|
378
393
|
}
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
}
|
|
387
|
-
], 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: `
|
|
394
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularProgressBarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
395
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [
|
|
396
|
+
LocalizationService,
|
|
397
|
+
{
|
|
398
|
+
provide: L10N_PREFIX,
|
|
399
|
+
useValue: 'kendo.circularprogressbar'
|
|
400
|
+
}
|
|
401
|
+
], 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: `
|
|
388
402
|
<ng-container kendoProgressBarLocalizedMessages
|
|
389
403
|
i18n-progressBarLabel="kendo.circularprogressbar.progressBarLabel|The aria-label attribute for the Circular ProgressBar component."
|
|
390
404
|
progressBarLabel="Circular progressbar"
|
|
@@ -405,7 +419,8 @@ CircularProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
|
|
|
405
419
|
</div>
|
|
406
420
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
407
421
|
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedProgressBarMessagesDirective, selector: "[kendoProgressBarLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
408
|
-
|
|
422
|
+
}
|
|
423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CircularProgressBarComponent, decorators: [{
|
|
409
424
|
type: Component,
|
|
410
425
|
args: [{
|
|
411
426
|
exportAs: 'kendoCircularProgressBar',
|
|
@@ -12,6 +12,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
12
12
|
* ([see example]({% slug rtl_layout %})).
|
|
13
13
|
*/
|
|
14
14
|
export class ProgressBarCustomMessagesComponent extends ProgressBarMessages {
|
|
15
|
+
service;
|
|
15
16
|
constructor(service) {
|
|
16
17
|
super();
|
|
17
18
|
this.service = service;
|
|
@@ -19,15 +20,15 @@ export class ProgressBarCustomMessagesComponent extends ProgressBarMessages {
|
|
|
19
20
|
get override() {
|
|
20
21
|
return true;
|
|
21
22
|
}
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressBarCustomMessagesComponent, isStandalone: true, selector: "kendo-progressbar-messages", providers: [
|
|
25
|
+
{
|
|
26
|
+
provide: ProgressBarMessages,
|
|
27
|
+
useExisting: forwardRef(() => ProgressBarCustomMessagesComponent)
|
|
28
|
+
}
|
|
29
|
+
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
22
30
|
}
|
|
23
|
-
|
|
24
|
-
ProgressBarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ProgressBarCustomMessagesComponent, isStandalone: true, selector: "kendo-progressbar-messages", providers: [
|
|
25
|
-
{
|
|
26
|
-
provide: ProgressBarMessages,
|
|
27
|
-
useExisting: forwardRef(() => ProgressBarCustomMessagesComponent)
|
|
28
|
-
}
|
|
29
|
-
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
30
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProgressBarCustomMessagesComponent, decorators: [{
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarCustomMessagesComponent, decorators: [{
|
|
31
32
|
type: Component,
|
|
32
33
|
args: [{
|
|
33
34
|
providers: [
|
|
@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
11
11
|
* @hidden
|
|
12
12
|
*/
|
|
13
13
|
export class LocalizedProgressBarMessagesDirective extends ProgressBarMessages {
|
|
14
|
+
service;
|
|
14
15
|
constructor(service) {
|
|
15
16
|
super();
|
|
16
17
|
this.service = service;
|
|
17
18
|
}
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedProgressBarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
20
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedProgressBarMessagesDirective, isStandalone: true, selector: "[kendoProgressBarLocalizedMessages]", providers: [
|
|
21
|
+
{
|
|
22
|
+
provide: ProgressBarMessages,
|
|
23
|
+
useExisting: forwardRef(() => LocalizedProgressBarMessagesDirective)
|
|
24
|
+
}
|
|
25
|
+
], usesInheritance: true, ngImport: i0 });
|
|
18
26
|
}
|
|
19
|
-
|
|
20
|
-
LocalizedProgressBarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedProgressBarMessagesDirective, isStandalone: true, selector: "[kendoProgressBarLocalizedMessages]", providers: [
|
|
21
|
-
{
|
|
22
|
-
provide: ProgressBarMessages,
|
|
23
|
-
useExisting: forwardRef(() => LocalizedProgressBarMessagesDirective)
|
|
24
|
-
}
|
|
25
|
-
], usesInheritance: true, ngImport: i0 });
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedProgressBarMessagesDirective, decorators: [{
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedProgressBarMessagesDirective, decorators: [{
|
|
27
28
|
type: Directive,
|
|
28
29
|
args: [{
|
|
29
30
|
providers: [
|
|
@@ -9,10 +9,14 @@ import * as i0 from "@angular/core";
|
|
|
9
9
|
* @hidden
|
|
10
10
|
*/
|
|
11
11
|
export class ProgressBarMessages extends ComponentMessages {
|
|
12
|
+
/**
|
|
13
|
+
* The aria-label attribute for the ProgressBar component.
|
|
14
|
+
*/
|
|
15
|
+
progressBarLabel;
|
|
16
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
17
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ProgressBarMessages, inputs: { progressBarLabel: "progressBarLabel" }, usesInheritance: true, ngImport: i0 });
|
|
12
18
|
}
|
|
13
|
-
|
|
14
|
-
ProgressBarMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ProgressBarMessages, inputs: { progressBarLabel: "progressBarLabel" }, usesInheritance: true, ngImport: i0 });
|
|
15
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProgressBarMessages, decorators: [{
|
|
19
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarMessages, decorators: [{
|
|
16
20
|
type: Directive,
|
|
17
21
|
args: [{}]
|
|
18
22
|
}], propDecorators: { progressBarLabel: [{
|