@progress/kendo-angular-progressbar 19.1.2-develop.3 → 19.1.2-develop.5
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/chunk/chunk-progressbar.component.d.ts +26 -18
- package/circularprogressbar/center-template.directive.d.ts +10 -1
- package/circularprogressbar/circular-progressbar.component.d.ts +26 -15
- package/circularprogressbar/models/circular-progressbar-progress-color-interface.d.ts +4 -4
- package/common/localization/custom-messages.component.d.ts +24 -0
- package/directives.d.ts +50 -4
- package/esm2022/chunk/chunk-progressbar.component.mjs +26 -18
- package/esm2022/circularprogressbar/center-template.directive.mjs +10 -1
- package/esm2022/circularprogressbar/circular-progressbar.component.mjs +26 -15
- package/esm2022/circularprogressbar/models/circular-progressbar-progress-color-interface.mjs +1 -1
- package/esm2022/common/localization/custom-messages.component.mjs +24 -0
- package/esm2022/directives.mjs +50 -4
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/progressbar.component.mjs +17 -15
- package/esm2022/progressbar.module.mjs +8 -21
- package/fesm2022/progress-kendo-angular-progressbar.mjs +163 -76
- package/package.json +5 -5
- package/progressbar.component.d.ts +17 -15
- package/progressbar.module.d.ts +8 -21
- package/types/animation-end-event.d.ts +1 -1
- package/types/label-fn-type.d.ts +3 -3
- package/types/label-position.d.ts +1 -1
- package/types/label-settings.interface.d.ts +8 -30
- package/types/label-type.d.ts +2 -3
- package/types/progressbar-animation.interface.d.ts +4 -19
- package/types/progressbar-orientation.d.ts +1 -1
|
@@ -15,8 +15,8 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
15
15
|
* Represents the [Kendo UI ProgressBar component for Angular]({% slug overview_progressbar %}).
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
|
-
* ```
|
|
19
|
-
*
|
|
18
|
+
* ```typescript
|
|
19
|
+
* @Component({
|
|
20
20
|
* selector: 'my-app',
|
|
21
21
|
* template: `
|
|
22
22
|
* <kendo-progressbar [value]="value">
|
|
@@ -27,6 +27,9 @@ import * as i1 from "@progress/kendo-angular-l10n";
|
|
|
27
27
|
* public value = 50;
|
|
28
28
|
* }
|
|
29
29
|
* ```
|
|
30
|
+
*
|
|
31
|
+
* @remarks
|
|
32
|
+
* Supported children components are: {@link ProgressBarCustomMessagesComponent}
|
|
30
33
|
*/
|
|
31
34
|
export class ProgressBarComponent extends ProgressBarBase {
|
|
32
35
|
localization;
|
|
@@ -34,44 +37,43 @@ export class ProgressBarComponent extends ProgressBarBase {
|
|
|
34
37
|
renderer;
|
|
35
38
|
zone;
|
|
36
39
|
/**
|
|
37
|
-
* Determines whether the status label
|
|
38
|
-
*
|
|
39
|
-
* `LabelSettings` having its position set to `end` and its format set to `value`.
|
|
40
|
+
* Determines whether the status label displays.
|
|
41
|
+
* @default true
|
|
40
42
|
*/
|
|
41
43
|
label = true;
|
|
42
44
|
/**
|
|
43
|
-
*
|
|
45
|
+
* Sets the CSS styles that will be rendered on the inner element, which represents the full portion of the progress bar
|
|
44
46
|
* ([see example]({% slug progressbar_appearance %})).
|
|
45
|
-
* Supports the type of values that
|
|
47
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
46
48
|
*/
|
|
47
49
|
progressCssStyle;
|
|
48
50
|
/**
|
|
49
|
-
* The CSS classes that
|
|
51
|
+
* The CSS classes that render on the inner element which represents the full portion of the progress bar
|
|
50
52
|
* ([see example]({% slug progressbar_appearance %})).
|
|
51
|
-
* Supports the type of values that
|
|
53
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
52
54
|
*/
|
|
53
55
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
54
56
|
progressCssClass;
|
|
55
57
|
/**
|
|
56
|
-
* The CSS styles that
|
|
58
|
+
* The CSS styles that render on the inner element which represents the empty portion of the progress bar
|
|
57
59
|
* ([see example]({% slug progressbar_appearance %})).
|
|
58
|
-
* Supports the type of values that
|
|
60
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
59
61
|
*/
|
|
60
62
|
emptyCssStyle;
|
|
61
63
|
/**
|
|
62
|
-
* The CSS classes that
|
|
64
|
+
* The CSS classes that render on the inner element which represents the empty portion of the progress bar
|
|
63
65
|
* ([see example]({% slug progressbar_appearance %})).
|
|
64
|
-
* Supports the type of values that
|
|
66
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
65
67
|
*/
|
|
66
68
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
67
69
|
emptyCssClass;
|
|
68
70
|
/**
|
|
69
71
|
* The animation configuration of the ProgressBar.
|
|
70
|
-
*
|
|
72
|
+
* @default false
|
|
71
73
|
*/
|
|
72
74
|
animation = false;
|
|
73
75
|
/**
|
|
74
|
-
* Fires when the animation which indicates the latest value change
|
|
76
|
+
* Fires when the animation which indicates the latest value change completes.
|
|
75
77
|
*/
|
|
76
78
|
animationEnd = new EventEmitter();
|
|
77
79
|
/**
|
|
@@ -17,30 +17,17 @@ import * as i5 from "./progressbar.component";
|
|
|
17
17
|
* definition for the ProgressBar components.
|
|
18
18
|
*
|
|
19
19
|
* @example
|
|
20
|
-
*
|
|
21
|
-
* ```ts-no-run
|
|
22
|
-
* // Import the ProgressBar module
|
|
23
|
-
* import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
|
|
24
|
-
*
|
|
25
|
-
* // The browser platform with a compiler
|
|
26
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
27
|
-
*
|
|
20
|
+
* ```typescript
|
|
28
21
|
* import { NgModule } from '@angular/core';
|
|
22
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
23
|
+
* import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
|
|
29
24
|
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* _@NgModule({
|
|
35
|
-
* declarations: [AppComponent], // declare app component
|
|
36
|
-
* imports: [BrowserModule, ProgressBarModule], // import ProgressBar module
|
|
37
|
-
* bootstrap: [AppComponent]
|
|
25
|
+
* @NgModule({
|
|
26
|
+
* imports: [BrowserModule, ProgressBarModule],
|
|
27
|
+
* declarations: [AppComponent],
|
|
28
|
+
* bootstrap: [AppComponent]
|
|
38
29
|
* })
|
|
39
|
-
* export class AppModule {}
|
|
40
|
-
*
|
|
41
|
-
* // Compile and launch the module
|
|
42
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
43
|
-
*
|
|
30
|
+
* export class AppModule { }
|
|
44
31
|
* ```
|
|
45
32
|
*/
|
|
46
33
|
export class ProgressBarModule {
|
|
@@ -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: '19.1.2-develop.
|
|
23
|
+
publishDate: 1750430725,
|
|
24
|
+
version: '19.1.2-develop.5',
|
|
25
25
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
26
26
|
};
|
|
27
27
|
|
|
@@ -403,8 +403,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
403
403
|
* Represents the [Kendo UI ProgressBar component for Angular]({% slug overview_progressbar %}).
|
|
404
404
|
*
|
|
405
405
|
* @example
|
|
406
|
-
* ```
|
|
407
|
-
*
|
|
406
|
+
* ```typescript
|
|
407
|
+
* @Component({
|
|
408
408
|
* selector: 'my-app',
|
|
409
409
|
* template: `
|
|
410
410
|
* <kendo-progressbar [value]="value">
|
|
@@ -415,6 +415,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
415
415
|
* public value = 50;
|
|
416
416
|
* }
|
|
417
417
|
* ```
|
|
418
|
+
*
|
|
419
|
+
* @remarks
|
|
420
|
+
* Supported children components are: {@link ProgressBarCustomMessagesComponent}
|
|
418
421
|
*/
|
|
419
422
|
class ProgressBarComponent extends ProgressBarBase {
|
|
420
423
|
localization;
|
|
@@ -422,44 +425,43 @@ class ProgressBarComponent extends ProgressBarBase {
|
|
|
422
425
|
renderer;
|
|
423
426
|
zone;
|
|
424
427
|
/**
|
|
425
|
-
* Determines whether the status label
|
|
426
|
-
*
|
|
427
|
-
* `LabelSettings` having its position set to `end` and its format set to `value`.
|
|
428
|
+
* Determines whether the status label displays.
|
|
429
|
+
* @default true
|
|
428
430
|
*/
|
|
429
431
|
label = true;
|
|
430
432
|
/**
|
|
431
|
-
*
|
|
433
|
+
* Sets the CSS styles that will be rendered on the inner element, which represents the full portion of the progress bar
|
|
432
434
|
* ([see example]({% slug progressbar_appearance %})).
|
|
433
|
-
* Supports the type of values that
|
|
435
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
434
436
|
*/
|
|
435
437
|
progressCssStyle;
|
|
436
438
|
/**
|
|
437
|
-
* The CSS classes that
|
|
439
|
+
* The CSS classes that render on the inner element which represents the full portion of the progress bar
|
|
438
440
|
* ([see example]({% slug progressbar_appearance %})).
|
|
439
|
-
* Supports the type of values that
|
|
441
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
440
442
|
*/
|
|
441
443
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
442
444
|
progressCssClass;
|
|
443
445
|
/**
|
|
444
|
-
* The CSS styles that
|
|
446
|
+
* The CSS styles that render on the inner element which represents the empty portion of the progress bar
|
|
445
447
|
* ([see example]({% slug progressbar_appearance %})).
|
|
446
|
-
* Supports the type of values that
|
|
448
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
447
449
|
*/
|
|
448
450
|
emptyCssStyle;
|
|
449
451
|
/**
|
|
450
|
-
* The CSS classes that
|
|
452
|
+
* The CSS classes that render on the inner element which represents the empty portion of the progress bar
|
|
451
453
|
* ([see example]({% slug progressbar_appearance %})).
|
|
452
|
-
* Supports the type of values that
|
|
454
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
453
455
|
*/
|
|
454
456
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
455
457
|
emptyCssClass;
|
|
456
458
|
/**
|
|
457
459
|
* The animation configuration of the ProgressBar.
|
|
458
|
-
*
|
|
460
|
+
* @default false
|
|
459
461
|
*/
|
|
460
462
|
animation = false;
|
|
461
463
|
/**
|
|
462
|
-
* Fires when the animation which indicates the latest value change
|
|
464
|
+
* Fires when the animation which indicates the latest value change completes.
|
|
463
465
|
*/
|
|
464
466
|
animationEnd = new EventEmitter();
|
|
465
467
|
/**
|
|
@@ -761,18 +763,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
761
763
|
* Represents the [Kendo UI ChunkProgressBar component for Angular]({% slug overview_chunkprogressbar %}).
|
|
762
764
|
*
|
|
763
765
|
* @example
|
|
764
|
-
* ```
|
|
765
|
-
*
|
|
766
|
-
*
|
|
767
|
-
*
|
|
768
|
-
*
|
|
769
|
-
*
|
|
770
|
-
*
|
|
766
|
+
* ```typescript
|
|
767
|
+
* import { Component } from '@angular/core';
|
|
768
|
+
*
|
|
769
|
+
* @Component({
|
|
770
|
+
* selector: 'my-app',
|
|
771
|
+
* template: `
|
|
772
|
+
* <kendo-chunkprogressbar
|
|
773
|
+
* [value]="progressValue"
|
|
774
|
+
* [chunkCount]="8">
|
|
775
|
+
* </kendo-chunkprogressbar>
|
|
776
|
+
* `
|
|
771
777
|
* })
|
|
772
|
-
* class AppComponent {
|
|
773
|
-
*
|
|
778
|
+
* export class AppComponent {
|
|
779
|
+
* public progressValue: number = 40;
|
|
774
780
|
* }
|
|
775
781
|
* ```
|
|
782
|
+
*
|
|
783
|
+
* @remarks
|
|
784
|
+
* Supported children components are: {@link ProgressBarCustomMessagesComponent}
|
|
776
785
|
*/
|
|
777
786
|
class ChunkProgressBarComponent extends ProgressBarBase {
|
|
778
787
|
localization;
|
|
@@ -781,7 +790,8 @@ class ChunkProgressBarComponent extends ProgressBarBase {
|
|
|
781
790
|
chunkClass = true;
|
|
782
791
|
/**
|
|
783
792
|
* Sets the number of chunks into which the ChunkProgressBar will be split.
|
|
784
|
-
*
|
|
793
|
+
*
|
|
794
|
+
* @default 5
|
|
785
795
|
*/
|
|
786
796
|
chunkCount = 5;
|
|
787
797
|
/**
|
|
@@ -797,24 +807,24 @@ class ChunkProgressBarComponent extends ProgressBarBase {
|
|
|
797
807
|
return chunks;
|
|
798
808
|
}
|
|
799
809
|
/**
|
|
800
|
-
*
|
|
801
|
-
* Supports the type of values that
|
|
810
|
+
* Sets the CSS styles that will be rendered on the full chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
|
|
811
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
802
812
|
*/
|
|
803
813
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
804
814
|
progressCssStyle;
|
|
805
815
|
/**
|
|
806
|
-
*
|
|
807
|
-
* Supports the type of values that
|
|
816
|
+
* Sets the CSS classes that will be rendered on the full chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
|
|
817
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
808
818
|
*/
|
|
809
819
|
progressCssClass;
|
|
810
820
|
/**
|
|
811
|
-
*
|
|
812
|
-
* Supports the type of values that
|
|
821
|
+
* Sets the CSS styles that will be rendered on the empty chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
|
|
822
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
813
823
|
*/
|
|
814
824
|
emptyCssStyle;
|
|
815
825
|
/**
|
|
816
|
-
*
|
|
817
|
-
* Supports the type of values that
|
|
826
|
+
* Sets the CSS classes that will be rendered on the empty chunk elements ([see example]({% slug chunkprogressbar_appearance %})).
|
|
827
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
818
828
|
*/
|
|
819
829
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
820
830
|
emptyCssClass;
|
|
@@ -928,8 +938,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
928
938
|
}] } });
|
|
929
939
|
|
|
930
940
|
/**
|
|
931
|
-
*
|
|
941
|
+
* Represents a template that allows you to customize the content in the center of the `<kendo-circularprogessbar>` component. To define the template, nest an `<ng-template>` tag with the `kendoCircularProgressbarCenterTemplate` directive inside a `<kendo-circularprogessbar>` component.
|
|
932
942
|
* ([see example]({% slug center_template_circularprogressbar %})).
|
|
943
|
+
*
|
|
944
|
+
* @example
|
|
945
|
+
* ```html
|
|
946
|
+
* <kendo-circularprogressbar [value]="75">
|
|
947
|
+
* <ng-template kendoCircularProgressbarCenterTemplate>
|
|
948
|
+
* <span class="custom-center-text">75%</span>
|
|
949
|
+
* </ng-template>
|
|
950
|
+
* </kendo-circularprogressbar>
|
|
951
|
+
* ```
|
|
933
952
|
*/
|
|
934
953
|
class CircularProgressbarCenterTemplateDirective {
|
|
935
954
|
templateRef;
|
|
@@ -952,17 +971,26 @@ const DEFAULT_SURFACE_SIZE = 200;
|
|
|
952
971
|
* Represents the [Kendo UI Circular ProgressBar component for Angular]({% slug overview_circularprogressbar %}).
|
|
953
972
|
*
|
|
954
973
|
* @example
|
|
955
|
-
* ```
|
|
956
|
-
*
|
|
957
|
-
*
|
|
958
|
-
*
|
|
959
|
-
*
|
|
960
|
-
*
|
|
974
|
+
* ```typescript
|
|
975
|
+
* import { Component } from '@angular/core';
|
|
976
|
+
*
|
|
977
|
+
* @Component({
|
|
978
|
+
* selector: 'my-app',
|
|
979
|
+
* template: `
|
|
980
|
+
* <kendo-circularprogressbar
|
|
981
|
+
* [value]="currentValue"
|
|
982
|
+
* [max]="100"
|
|
983
|
+
* [animation]="true">
|
|
984
|
+
* </kendo-circularprogressbar>
|
|
985
|
+
* `
|
|
961
986
|
* })
|
|
962
|
-
* class AppComponent {
|
|
963
|
-
*
|
|
987
|
+
* export class AppComponent {
|
|
988
|
+
* public currentValue: number = 65;
|
|
964
989
|
* }
|
|
965
990
|
* ```
|
|
991
|
+
*
|
|
992
|
+
* @remarks
|
|
993
|
+
* Supported children components are: {@link ProgressBarCustomMessagesComponent}
|
|
966
994
|
*/
|
|
967
995
|
class CircularProgressBarComponent {
|
|
968
996
|
renderer;
|
|
@@ -982,7 +1010,7 @@ class CircularProgressBarComponent {
|
|
|
982
1010
|
}
|
|
983
1011
|
roleAttribute = 'progressbar';
|
|
984
1012
|
/**
|
|
985
|
-
* Sets the default value of the Circular
|
|
1013
|
+
* Sets the default value of the Circular ProgressBar between `min` and `max`.
|
|
986
1014
|
*
|
|
987
1015
|
* @default 0
|
|
988
1016
|
*/
|
|
@@ -1000,7 +1028,7 @@ class CircularProgressBarComponent {
|
|
|
1000
1028
|
return this._value;
|
|
1001
1029
|
}
|
|
1002
1030
|
/**
|
|
1003
|
-
*
|
|
1031
|
+
* Sets the maximum value which the Circular ProgressBar can accept.
|
|
1004
1032
|
*
|
|
1005
1033
|
* @default 100
|
|
1006
1034
|
*/
|
|
@@ -1014,7 +1042,7 @@ class CircularProgressBarComponent {
|
|
|
1014
1042
|
return this._max;
|
|
1015
1043
|
}
|
|
1016
1044
|
/**
|
|
1017
|
-
*
|
|
1045
|
+
* Sets the minimum value which the Circular ProgressBar can accept.
|
|
1018
1046
|
*
|
|
1019
1047
|
* @default 0
|
|
1020
1048
|
*/
|
|
@@ -1028,18 +1056,20 @@ class CircularProgressBarComponent {
|
|
|
1028
1056
|
return this._min;
|
|
1029
1057
|
}
|
|
1030
1058
|
/**
|
|
1031
|
-
*
|
|
1059
|
+
* Specifies whether to play an animation when the value changes.
|
|
1032
1060
|
*
|
|
1033
1061
|
* @default false
|
|
1034
1062
|
*/
|
|
1035
1063
|
animation = false;
|
|
1036
1064
|
/**
|
|
1037
|
-
*
|
|
1065
|
+
* Sets the opacity of the value arc.
|
|
1066
|
+
*
|
|
1038
1067
|
* @default 1
|
|
1039
1068
|
*/
|
|
1040
1069
|
opacity = 1;
|
|
1041
1070
|
/**
|
|
1042
1071
|
* Puts the Circular ProgressBar in indeterminate state.
|
|
1072
|
+
*
|
|
1043
1073
|
* @default false
|
|
1044
1074
|
*/
|
|
1045
1075
|
set indeterminate(indeterminate) {
|
|
@@ -1049,11 +1079,11 @@ class CircularProgressBarComponent {
|
|
|
1049
1079
|
return this._indeterminate;
|
|
1050
1080
|
}
|
|
1051
1081
|
/**
|
|
1052
|
-
* Configures the pointer color.
|
|
1082
|
+
* Configures the pointer color. You can set it to a single color string or customize it per progress stages.
|
|
1053
1083
|
*/
|
|
1054
1084
|
progressColor;
|
|
1055
1085
|
/**
|
|
1056
|
-
* Fires when the animation
|
|
1086
|
+
* Fires when the animation that indicates the latest value change completes.
|
|
1057
1087
|
*/
|
|
1058
1088
|
animationEnd = new EventEmitter();
|
|
1059
1089
|
progress;
|
|
@@ -1438,6 +1468,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1438
1468
|
/**
|
|
1439
1469
|
* Custom component messages override default component messages
|
|
1440
1470
|
* ([see example]({% slug rtl_layout %})).
|
|
1471
|
+
*
|
|
1472
|
+
* @example
|
|
1473
|
+
* ```html
|
|
1474
|
+
* <!-- Custom messages for ProgressBar -->
|
|
1475
|
+
* <kendo-progressbar [value]="value">
|
|
1476
|
+
* <kendo-progressbar-messages
|
|
1477
|
+
* progressBarLabel="Changed ProgressBar Label"
|
|
1478
|
+
* ></kendo-progressbar-messages>
|
|
1479
|
+
* </kendo-progressbar>
|
|
1480
|
+
*
|
|
1481
|
+
* <!-- Custom messages for ChunkProgressBar -->
|
|
1482
|
+
* <kendo-chunkprogressbar [value]="value" [chunkCount]="chunks">
|
|
1483
|
+
* <kendo-progressbar-messages
|
|
1484
|
+
* progressBarLabel="Changed Chunk Label"
|
|
1485
|
+
* ></kendo-progressbar-messages>
|
|
1486
|
+
* </kendo-chunkprogressbar>
|
|
1487
|
+
*
|
|
1488
|
+
* <!-- Custom messages for CircularProgressBar -->
|
|
1489
|
+
* <kendo-circularprogressbar [value]="value">
|
|
1490
|
+
* <kendo-progressbar-messages
|
|
1491
|
+
* progressBarLabel="Changed Circular Label"
|
|
1492
|
+
* ></kendo-progressbar-messages>
|
|
1493
|
+
* </kendo-circularprogressbar>
|
|
1494
|
+
* ```
|
|
1441
1495
|
*/
|
|
1442
1496
|
class ProgressBarCustomMessagesComponent extends ProgressBarMessages {
|
|
1443
1497
|
service;
|
|
@@ -1472,14 +1526,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1472
1526
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
|
|
1473
1527
|
|
|
1474
1528
|
/**
|
|
1475
|
-
*
|
|
1529
|
+
* Use this utility array to access all ChunkProgressBar-related components and directives in a standalone Angular component.
|
|
1530
|
+
*
|
|
1531
|
+
* @example
|
|
1532
|
+
* ```typescript
|
|
1533
|
+
* import { KENDO_CHUNKPROGRESSBAR } from '@progress/kendo-angular-progressbar';
|
|
1534
|
+
* @Component({
|
|
1535
|
+
* standalone: true,
|
|
1536
|
+
* imports: [KENDO_CHUNKPROGRESSBAR],
|
|
1537
|
+
* template: `<kendo-chunkprogressbar [value]="50"></kendo-chunkprogressbar>`,
|
|
1538
|
+
* })
|
|
1539
|
+
* export class MyComponent {}
|
|
1540
|
+
* ```
|
|
1476
1541
|
*/
|
|
1477
1542
|
const KENDO_CHUNKPROGRESSBAR = [
|
|
1478
1543
|
ChunkProgressBarComponent,
|
|
1479
1544
|
ProgressBarCustomMessagesComponent
|
|
1480
1545
|
];
|
|
1481
1546
|
/**
|
|
1482
|
-
*
|
|
1547
|
+
* Use this utility array to access all CircularProgressbar-related components and directives in a standalone Angular component.
|
|
1548
|
+
*
|
|
1549
|
+
* @example
|
|
1550
|
+
* ```typescript
|
|
1551
|
+
* import { KENDO_CIRCULARPROGRESSBAR } from '@progress/kendo-angular-progressbar';
|
|
1552
|
+
* @Component({
|
|
1553
|
+
* standalone: true,
|
|
1554
|
+
* imports: [KENDO_CIRCULARPROGRESSBAR],
|
|
1555
|
+
* template: `<kendo-circularprogressbar [value]="75"></kendo-circularprogressbar>`,
|
|
1556
|
+
* })
|
|
1557
|
+
* export class MyComponent {}
|
|
1558
|
+
* ```
|
|
1483
1559
|
*/
|
|
1484
1560
|
const KENDO_CIRCULARPROGRESSBAR = [
|
|
1485
1561
|
CircularProgressbarCenterTemplateDirective,
|
|
@@ -1487,14 +1563,38 @@ const KENDO_CIRCULARPROGRESSBAR = [
|
|
|
1487
1563
|
ProgressBarCustomMessagesComponent
|
|
1488
1564
|
];
|
|
1489
1565
|
/**
|
|
1490
|
-
*
|
|
1566
|
+
* Use this utility array to access all ProgressBar-related components and directives in a standalone Angular component.
|
|
1567
|
+
*
|
|
1568
|
+
* @example
|
|
1569
|
+
* ```typescript
|
|
1570
|
+
* import { KENDO_PROGRESSBAR } from '@progress/kendo-angular-progressbar';
|
|
1571
|
+
* @Component({
|
|
1572
|
+
* standalone: true,
|
|
1573
|
+
* imports: [KENDO_PROGRESSBAR],
|
|
1574
|
+
* template: `<kendo-progressbar [value]="75"></kendo-progressbar>`,
|
|
1575
|
+
* })
|
|
1576
|
+
* export class MyComponent {}
|
|
1577
|
+
* ```
|
|
1491
1578
|
*/
|
|
1492
1579
|
const KENDO_PROGRESSBAR = [
|
|
1493
1580
|
ProgressBarComponent,
|
|
1494
1581
|
ProgressBarCustomMessagesComponent
|
|
1495
1582
|
];
|
|
1496
1583
|
/**
|
|
1497
|
-
*
|
|
1584
|
+
* Use this utility array all `@progress/kendo-angular-progressbar`-related components and directives.
|
|
1585
|
+
* @example
|
|
1586
|
+
* ```typescript
|
|
1587
|
+
* import { KENDO_PROGRESSBARS } from '@progress/kendo-angular-progressbar';
|
|
1588
|
+
* @Component({
|
|
1589
|
+
* standalone: true,
|
|
1590
|
+
* imports: [KENDO_PROGRESSBARS],
|
|
1591
|
+
* template: `
|
|
1592
|
+
* <kendo-progressbar [value]="75"></kendo-progressbar>
|
|
1593
|
+
* <kendo-circularprogressbar [value]="75"></kendo-circularprogressbar>
|
|
1594
|
+
* `,
|
|
1595
|
+
* })
|
|
1596
|
+
* export class MyComponent {}
|
|
1597
|
+
* ```
|
|
1498
1598
|
*/
|
|
1499
1599
|
const KENDO_PROGRESSBARS = [
|
|
1500
1600
|
...KENDO_CHUNKPROGRESSBAR,
|
|
@@ -1508,30 +1608,17 @@ const KENDO_PROGRESSBARS = [
|
|
|
1508
1608
|
* definition for the ProgressBar components.
|
|
1509
1609
|
*
|
|
1510
1610
|
* @example
|
|
1511
|
-
*
|
|
1512
|
-
* ```ts-no-run
|
|
1513
|
-
* // Import the ProgressBar module
|
|
1514
|
-
* import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
|
|
1515
|
-
*
|
|
1516
|
-
* // The browser platform with a compiler
|
|
1517
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
1518
|
-
*
|
|
1611
|
+
* ```typescript
|
|
1519
1612
|
* import { NgModule } from '@angular/core';
|
|
1613
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
1614
|
+
* import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
|
|
1520
1615
|
*
|
|
1521
|
-
*
|
|
1522
|
-
*
|
|
1523
|
-
*
|
|
1524
|
-
*
|
|
1525
|
-
* _@NgModule({
|
|
1526
|
-
* declarations: [AppComponent], // declare app component
|
|
1527
|
-
* imports: [BrowserModule, ProgressBarModule], // import ProgressBar module
|
|
1528
|
-
* bootstrap: [AppComponent]
|
|
1616
|
+
* @NgModule({
|
|
1617
|
+
* imports: [BrowserModule, ProgressBarModule],
|
|
1618
|
+
* declarations: [AppComponent],
|
|
1619
|
+
* bootstrap: [AppComponent]
|
|
1529
1620
|
* })
|
|
1530
|
-
* export class AppModule {}
|
|
1531
|
-
*
|
|
1532
|
-
* // Compile and launch the module
|
|
1533
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
1534
|
-
*
|
|
1621
|
+
* export class AppModule { }
|
|
1535
1622
|
* ```
|
|
1536
1623
|
*/
|
|
1537
1624
|
class ProgressBarModule {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-progressbar",
|
|
3
|
-
"version": "19.1.2-develop.
|
|
3
|
+
"version": "19.1.2-develop.5",
|
|
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": 1750430725,
|
|
23
23
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"@angular/core": "16 - 20",
|
|
30
30
|
"@angular/platform-browser": "16 - 20",
|
|
31
31
|
"@progress/kendo-licensing": "^1.5.0",
|
|
32
|
-
"@progress/kendo-angular-common": "19.1.2-develop.
|
|
33
|
-
"@progress/kendo-angular-l10n": "19.1.2-develop.
|
|
32
|
+
"@progress/kendo-angular-common": "19.1.2-develop.5",
|
|
33
|
+
"@progress/kendo-angular-l10n": "19.1.2-develop.5",
|
|
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": "19.1.2-develop.
|
|
38
|
+
"@progress/kendo-angular-schematics": "19.1.2-develop.5"
|
|
39
39
|
},
|
|
40
40
|
"schematics": "./schematics/collection.json",
|
|
41
41
|
"module": "fesm2022/progress-kendo-angular-progressbar.mjs",
|
|
@@ -13,8 +13,8 @@ import * as i0 from "@angular/core";
|
|
|
13
13
|
* Represents the [Kendo UI ProgressBar component for Angular]({% slug overview_progressbar %}).
|
|
14
14
|
*
|
|
15
15
|
* @example
|
|
16
|
-
* ```
|
|
17
|
-
*
|
|
16
|
+
* ```typescript
|
|
17
|
+
* @Component({
|
|
18
18
|
* selector: 'my-app',
|
|
19
19
|
* template: `
|
|
20
20
|
* <kendo-progressbar [value]="value">
|
|
@@ -25,6 +25,9 @@ import * as i0 from "@angular/core";
|
|
|
25
25
|
* public value = 50;
|
|
26
26
|
* }
|
|
27
27
|
* ```
|
|
28
|
+
*
|
|
29
|
+
* @remarks
|
|
30
|
+
* Supported children components are: {@link ProgressBarCustomMessagesComponent}
|
|
28
31
|
*/
|
|
29
32
|
export declare class ProgressBarComponent extends ProgressBarBase {
|
|
30
33
|
localization: LocalizationService;
|
|
@@ -32,50 +35,49 @@ export declare class ProgressBarComponent extends ProgressBarBase {
|
|
|
32
35
|
renderer: Renderer2;
|
|
33
36
|
private zone;
|
|
34
37
|
/**
|
|
35
|
-
* Determines whether the status label
|
|
36
|
-
*
|
|
37
|
-
* `LabelSettings` having its position set to `end` and its format set to `value`.
|
|
38
|
+
* Determines whether the status label displays.
|
|
39
|
+
* @default true
|
|
38
40
|
*/
|
|
39
41
|
label: boolean | LabelSettings;
|
|
40
42
|
/**
|
|
41
|
-
*
|
|
43
|
+
* Sets the CSS styles that will be rendered on the inner element, which represents the full portion of the progress bar
|
|
42
44
|
* ([see example]({% slug progressbar_appearance %})).
|
|
43
|
-
* Supports the type of values that
|
|
45
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
44
46
|
*/
|
|
45
47
|
progressCssStyle: {
|
|
46
48
|
[key: string]: string;
|
|
47
49
|
};
|
|
48
50
|
/**
|
|
49
|
-
* The CSS classes that
|
|
51
|
+
* The CSS classes that render on the inner element which represents the full portion of the progress bar
|
|
50
52
|
* ([see example]({% slug progressbar_appearance %})).
|
|
51
|
-
* Supports the type of values that
|
|
53
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
52
54
|
*/
|
|
53
55
|
progressCssClass: string | string[] | Set<string> | {
|
|
54
56
|
[key: string]: any;
|
|
55
57
|
};
|
|
56
58
|
/**
|
|
57
|
-
* The CSS styles that
|
|
59
|
+
* The CSS styles that render on the inner element which represents the empty portion of the progress bar
|
|
58
60
|
* ([see example]({% slug progressbar_appearance %})).
|
|
59
|
-
* Supports the type of values that
|
|
61
|
+
* Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
|
|
60
62
|
*/
|
|
61
63
|
emptyCssStyle: {
|
|
62
64
|
[key: string]: string;
|
|
63
65
|
};
|
|
64
66
|
/**
|
|
65
|
-
* The CSS classes that
|
|
67
|
+
* The CSS classes that render on the inner element which represents the empty portion of the progress bar
|
|
66
68
|
* ([see example]({% slug progressbar_appearance %})).
|
|
67
|
-
* Supports the type of values that
|
|
69
|
+
* Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
|
|
68
70
|
*/
|
|
69
71
|
emptyCssClass: string | string[] | Set<string> | {
|
|
70
72
|
[key: string]: any;
|
|
71
73
|
};
|
|
72
74
|
/**
|
|
73
75
|
* The animation configuration of the ProgressBar.
|
|
74
|
-
*
|
|
76
|
+
* @default false
|
|
75
77
|
*/
|
|
76
78
|
animation: boolean | ProgressBarAnimation;
|
|
77
79
|
/**
|
|
78
|
-
* Fires when the animation which indicates the latest value change
|
|
80
|
+
* Fires when the animation which indicates the latest value change completes.
|
|
79
81
|
*/
|
|
80
82
|
animationEnd: EventEmitter<AnimationEndEvent>;
|
|
81
83
|
/**
|