@progress/kendo-angular-indicators 19.1.1 → 19.1.2-develop.2
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/badge/badge.component.d.ts +10 -50
- package/badge/models/align.d.ts +4 -3
- package/badge/models/fill.d.ts +2 -2
- package/badge/models/position.d.ts +2 -2
- package/badge/models/rounded.d.ts +3 -3
- package/badge/models/size.d.ts +2 -2
- package/badge/models/theme-color.d.ts +2 -2
- package/directives.d.ts +5 -5
- package/esm2022/badge/badge-container.component.mjs +11 -0
- package/esm2022/badge/badge.component.mjs +10 -50
- package/esm2022/directives.mjs +5 -5
- package/esm2022/indicators.module.mjs +4 -13
- package/esm2022/loader/loader.component.mjs +10 -21
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/skeleton/skeleton.component.mjs +15 -16
- package/fesm2022/progress-kendo-angular-indicators.mjs +57 -107
- package/indicators.module.d.ts +4 -13
- package/loader/loader.component.d.ts +10 -21
- package/loader/models/size.d.ts +2 -2
- package/loader/models/theme-color.d.ts +12 -12
- package/loader/models/type.d.ts +1 -1
- package/package.json +6 -6
- package/skeleton/models.d.ts +8 -8
- package/skeleton/skeleton.component.d.ts +15 -16
|
@@ -13,7 +13,14 @@ import { BadgePosition } from './models/position';
|
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
/**
|
|
15
15
|
* Represents the [Kendo UI Badge component for Angular]({% slug overview_badge %}).
|
|
16
|
-
*
|
|
16
|
+
* Displays additional information or status related to an element, such as notifications or counts.
|
|
17
|
+
*
|
|
18
|
+
* Provides configuration options for alignment, size, fill, theme color, roundness, position, and cutout border.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```html
|
|
22
|
+
* <kendo-badge [size]="'large'" [themeColor]="'success'">99+</kendo-badge>
|
|
23
|
+
* ```
|
|
17
24
|
*/
|
|
18
25
|
export declare class BadgeComponent implements AfterViewInit, OnChanges, OnDestroy {
|
|
19
26
|
private element;
|
|
@@ -28,12 +35,6 @@ export declare class BadgeComponent implements AfterViewInit, OnChanges, OnDestr
|
|
|
28
35
|
/**
|
|
29
36
|
* Specifies the alignment of the Badge ([see example]({% slug alignandposition_badge %}#toc-alignment)).
|
|
30
37
|
*
|
|
31
|
-
* The possible values are:
|
|
32
|
-
* * `{ vertical: 'top', horizontal: 'end' }`
|
|
33
|
-
* * `{ vertical: 'top', horizontal: 'start' }`
|
|
34
|
-
* * `{ vertical: 'bottom', horizontal: 'start' }`
|
|
35
|
-
* * `{ vertical: 'bottom', horizontal: 'end' }`
|
|
36
|
-
*
|
|
37
38
|
* @default "{ vertical: 'top', horizontal: 'end' }"
|
|
38
39
|
*/
|
|
39
40
|
get align(): BadgeAlign;
|
|
@@ -41,78 +42,37 @@ export declare class BadgeComponent implements AfterViewInit, OnChanges, OnDestr
|
|
|
41
42
|
/**
|
|
42
43
|
* Specifies the size of the Badge ([see example]({% slug appearance_badge %}#toc-size)).
|
|
43
44
|
*
|
|
44
|
-
* The possible values are:
|
|
45
|
-
* * `small`
|
|
46
|
-
* * `medium`
|
|
47
|
-
* * `large`
|
|
48
|
-
* * `none`
|
|
49
|
-
*
|
|
50
45
|
* @default medium
|
|
51
46
|
*/
|
|
52
47
|
size: BadgeSize;
|
|
53
48
|
/**
|
|
54
49
|
* Specifies the appearance fill style of the Badge ([see example]({% slug appearance_badge %}#toc-fill)).
|
|
55
50
|
*
|
|
56
|
-
* The possible values are:
|
|
57
|
-
* * `solid`
|
|
58
|
-
* * `outline`
|
|
59
|
-
* * `none`
|
|
60
|
-
*
|
|
61
51
|
* @default solid
|
|
62
52
|
*/
|
|
63
53
|
fill: BadgeFill;
|
|
64
54
|
/**
|
|
65
55
|
* Specifies the theme color of the Badge.
|
|
66
|
-
* The theme color
|
|
56
|
+
* The theme color applies as background and border color, while also amending the text color accordingly
|
|
67
57
|
* ([see example]({% slug appearance_badge %}#toc-theme-color)).
|
|
68
58
|
*
|
|
69
|
-
* The possible values are:
|
|
70
|
-
* * `primary`
|
|
71
|
-
* * `secondary`
|
|
72
|
-
* * `tertiary`
|
|
73
|
-
* * `inherit`
|
|
74
|
-
* * `info`
|
|
75
|
-
* * `success`
|
|
76
|
-
* * `warning`
|
|
77
|
-
* * `error`
|
|
78
|
-
* * `dark`
|
|
79
|
-
* * `light`
|
|
80
|
-
* * `inverse`
|
|
81
|
-
* * `none`
|
|
82
|
-
*
|
|
83
59
|
* @default primary
|
|
84
60
|
*/
|
|
85
61
|
themeColor: BadgeThemeColor;
|
|
86
62
|
/**
|
|
87
63
|
* Specifies the roundness of the Badge ([see example]({% slug appearance_badge %}#toc-rounded)).
|
|
88
64
|
*
|
|
89
|
-
* The possible values are:
|
|
90
|
-
* * `small`
|
|
91
|
-
* * `medium`
|
|
92
|
-
* * `large`
|
|
93
|
-
* * `full`
|
|
94
|
-
* * `none`
|
|
95
|
-
*
|
|
96
65
|
* @default medium
|
|
97
66
|
*/
|
|
98
67
|
rounded: BadgeRounded;
|
|
99
68
|
/**
|
|
100
69
|
* Specifies the position of the Badge relative to the edge of the parent container element ([see example]({% slug alignandposition_badge %}#toc-position)).
|
|
101
70
|
*
|
|
102
|
-
* The possible values are:
|
|
103
|
-
* * `edge`
|
|
104
|
-
* * `inside`
|
|
105
|
-
* * `outside`
|
|
106
|
-
*
|
|
107
71
|
* @default edge
|
|
108
72
|
*/
|
|
109
73
|
position: BadgePosition;
|
|
110
74
|
/**
|
|
111
|
-
* Specifies whether
|
|
112
|
-
*
|
|
113
|
-
* The possible values are:
|
|
114
|
-
* * `true`
|
|
115
|
-
* * `false`
|
|
75
|
+
* Specifies whether to render additional `cutout` border around the Badge ([see example]({% slug appearance_badge %}#toc-cutout-border)).
|
|
116
76
|
*
|
|
117
77
|
* @default false
|
|
118
78
|
*/
|
package/badge/models/align.d.ts
CHANGED
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Specifies the horizontal and vertical alignment
|
|
7
|
-
*
|
|
6
|
+
* Specifies the horizontal and vertical alignment options for the Badge component.
|
|
7
|
+
*
|
|
8
|
+
* For usage examples, see the [Badge Alignment documentation](slug:alignandposition_badge#toc-alignment).
|
|
8
9
|
*/
|
|
9
10
|
export interface BadgeAlign {
|
|
10
11
|
/**
|
|
@@ -16,7 +17,7 @@ export interface BadgeAlign {
|
|
|
16
17
|
*/
|
|
17
18
|
vertical?: 'top' | 'bottom';
|
|
18
19
|
/**
|
|
19
|
-
* Specifies the
|
|
20
|
+
* Specifies the horizontal alignment of the Badge.
|
|
20
21
|
*
|
|
21
22
|
* The available options are:
|
|
22
23
|
* - `start`
|
package/badge/models/fill.d.ts
CHANGED
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Specifies the appearance fill style of the Badge
|
|
7
|
-
* ([see example]({% slug appearance_badge %}#toc-fill)).
|
|
6
|
+
* Specifies the appearance fill style of the Badge component.
|
|
8
7
|
*
|
|
9
8
|
* The possible values are:
|
|
10
9
|
* * `solid` (Default)
|
|
11
10
|
* * `outline`
|
|
12
11
|
*
|
|
12
|
+
* For more information, see the [Badge Appearance - Fill]({% slug appearance_badge %}#toc-fill) documentation.
|
|
13
13
|
*/
|
|
14
14
|
export type BadgeFill = 'solid' | 'outline' | 'none';
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Specifies the position of the Badge relative to the edge of the parent container element
|
|
7
|
-
* ([see example]({% slug alignandposition_badge %}#toc-position)).
|
|
6
|
+
* Specifies the position of the Badge relative to the edge of the parent container element.
|
|
8
7
|
*
|
|
9
8
|
* The possible values are:
|
|
10
9
|
* * `edge` (Default)—The center of the Badge is positioned on the edge of the parent container element.
|
|
11
10
|
* * `inside`—The Badge is entirely positioned inside the edge of the parent container element.
|
|
12
11
|
* * `outside`—The Badge is entirely positioned outside the edge of the parent container element.
|
|
13
12
|
*
|
|
13
|
+
* For more information, see the [Badge Alignment and Position - Position]({% slug alignandposition_badge %}#toc-position) documentation.
|
|
14
14
|
*/
|
|
15
15
|
export type BadgePosition = 'edge' | 'outside' | 'inside';
|
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Specifies the roundness of the Badge
|
|
7
|
-
* ([see example]({% slug appearance_badge %}#toc-rounded)).
|
|
6
|
+
* Specifies the roundness of the Badge component.
|
|
8
7
|
*
|
|
9
8
|
* The possible values are:
|
|
10
9
|
* * `small`—Sets the `border radius` to `1px`.
|
|
11
10
|
* * `medium` (Default)—Sets the `border radius` to `2px`.
|
|
12
11
|
* * `large`—Sets the `border radius` to `4px`.
|
|
13
12
|
* * `full`—Sets the `border radius` to `9999px`.
|
|
14
|
-
* * `none`—The none option removes the built-in roundness
|
|
13
|
+
* * `none`—The none option removes the built-in roundness allowing for custom `border radius`.
|
|
15
14
|
*
|
|
15
|
+
* For more information, see the [Badge Appearance - Rounded]({% slug appearance_badge %}#toc-rounded) documentation.
|
|
16
16
|
*/
|
|
17
17
|
export type BadgeRounded = 'small' | 'medium' | 'large' | 'full' | 'none';
|
package/badge/models/size.d.ts
CHANGED
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Specifies the size
|
|
7
|
-
* ([see example]({% slug appearance_badge %}#toc-size)).
|
|
6
|
+
* Specifies the size options for the Badge component.
|
|
8
7
|
*
|
|
9
8
|
* The possible values are:
|
|
10
9
|
* * `small`
|
|
@@ -12,5 +11,6 @@
|
|
|
12
11
|
* * `large`
|
|
13
12
|
* * `none`
|
|
14
13
|
*
|
|
14
|
+
* For more information, see the [Badge Appearance - Size]({% slug appearance_badge %}#toc-size) documentation.
|
|
15
15
|
*/
|
|
16
16
|
export type BadgeSize = 'small' | 'medium' | 'large' | 'none';
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Specifies the theme color
|
|
7
|
-
*
|
|
6
|
+
* Specifies the theme color options for the Badge component.
|
|
7
|
+
* For more details, see the [Badge Appearance - Theme Color]({% slug appearance_badge %}#toc-theme-color) documentation.
|
|
8
8
|
*
|
|
9
9
|
* The possible values are:
|
|
10
10
|
* * `primary` (Default)—Applies coloring based on primary theme color.
|
package/directives.d.ts
CHANGED
|
@@ -7,22 +7,22 @@ import { BadgeComponent } from "./badge/badge.component";
|
|
|
7
7
|
import { LoaderComponent } from "./loader/loader.component";
|
|
8
8
|
import { SkeletonComponent } from "./skeleton/skeleton.component";
|
|
9
9
|
/**
|
|
10
|
-
* Utility array that contains all `Badge` related components and directives
|
|
10
|
+
* Utility array that contains all `Badge` related components and directives.
|
|
11
11
|
*/
|
|
12
12
|
export declare const KENDO_BADGE: readonly [typeof BadgeComponent];
|
|
13
13
|
/**
|
|
14
|
-
* Utility array that contains all `BadgeContainer` related components and directives
|
|
14
|
+
* Utility array that contains all `BadgeContainer` related components and directives.
|
|
15
15
|
*/
|
|
16
16
|
export declare const KENDO_BADGECONTAINER: readonly [typeof BadgeComponent, typeof BadgeContainerComponent];
|
|
17
17
|
/**
|
|
18
|
-
* Utility array that contains all `Loader` related components and directives
|
|
18
|
+
* Utility array that contains all `Loader` related components and directives.
|
|
19
19
|
*/
|
|
20
20
|
export declare const KENDO_LOADER: readonly [typeof LoaderComponent];
|
|
21
21
|
/**
|
|
22
|
-
* Utility array that contains all `Skeleton` related components and directives
|
|
22
|
+
* Utility array that contains all `Skeleton` related components and directives.
|
|
23
23
|
*/
|
|
24
24
|
export declare const KENDO_SKELETON: readonly [typeof SkeletonComponent];
|
|
25
25
|
/**
|
|
26
|
-
* Utility array that contains all `@progress/kendo-angular-indicators` related components and directives
|
|
26
|
+
* Utility array that contains all `@progress/kendo-angular-indicators` related components and directives.
|
|
27
27
|
*/
|
|
28
28
|
export declare const KENDO_INDICATORS: readonly [typeof BadgeComponent, typeof BadgeContainerComponent, typeof LoaderComponent, typeof SkeletonComponent];
|
|
@@ -6,6 +6,17 @@ import { Component, HostBinding } from '@angular/core';
|
|
|
6
6
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
9
|
+
/**
|
|
10
|
+
* Represents the Kendo UI BadgeContainer component for Angular.
|
|
11
|
+
* Groups and aligns one or more Badge components within a parent element.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```html
|
|
15
|
+
* <kendo-badge-container>
|
|
16
|
+
* <kendo-badge>new</kendo-badge>
|
|
17
|
+
* </kendo-badge-container>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
9
20
|
export class BadgeContainerComponent {
|
|
10
21
|
localizationService;
|
|
11
22
|
hostClass = true;
|
|
@@ -21,7 +21,14 @@ const ROUNDED_CLASSES = {
|
|
|
21
21
|
};
|
|
22
22
|
/**
|
|
23
23
|
* Represents the [Kendo UI Badge component for Angular]({% slug overview_badge %}).
|
|
24
|
-
*
|
|
24
|
+
* Displays additional information or status related to an element, such as notifications or counts.
|
|
25
|
+
*
|
|
26
|
+
* Provides configuration options for alignment, size, fill, theme color, roundness, position, and cutout border.
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```html
|
|
30
|
+
* <kendo-badge [size]="'large'" [themeColor]="'success'">99+</kendo-badge>
|
|
31
|
+
* ```
|
|
25
32
|
*/
|
|
26
33
|
export class BadgeComponent {
|
|
27
34
|
element;
|
|
@@ -38,12 +45,6 @@ export class BadgeComponent {
|
|
|
38
45
|
/**
|
|
39
46
|
* Specifies the alignment of the Badge ([see example]({% slug alignandposition_badge %}#toc-alignment)).
|
|
40
47
|
*
|
|
41
|
-
* The possible values are:
|
|
42
|
-
* * `{ vertical: 'top', horizontal: 'end' }`
|
|
43
|
-
* * `{ vertical: 'top', horizontal: 'start' }`
|
|
44
|
-
* * `{ vertical: 'bottom', horizontal: 'start' }`
|
|
45
|
-
* * `{ vertical: 'bottom', horizontal: 'end' }`
|
|
46
|
-
*
|
|
47
48
|
* @default "{ vertical: 'top', horizontal: 'end' }"
|
|
48
49
|
*/
|
|
49
50
|
get align() {
|
|
@@ -55,78 +56,37 @@ export class BadgeComponent {
|
|
|
55
56
|
/**
|
|
56
57
|
* Specifies the size of the Badge ([see example]({% slug appearance_badge %}#toc-size)).
|
|
57
58
|
*
|
|
58
|
-
* The possible values are:
|
|
59
|
-
* * `small`
|
|
60
|
-
* * `medium`
|
|
61
|
-
* * `large`
|
|
62
|
-
* * `none`
|
|
63
|
-
*
|
|
64
59
|
* @default medium
|
|
65
60
|
*/
|
|
66
61
|
size = 'medium';
|
|
67
62
|
/**
|
|
68
63
|
* Specifies the appearance fill style of the Badge ([see example]({% slug appearance_badge %}#toc-fill)).
|
|
69
64
|
*
|
|
70
|
-
* The possible values are:
|
|
71
|
-
* * `solid`
|
|
72
|
-
* * `outline`
|
|
73
|
-
* * `none`
|
|
74
|
-
*
|
|
75
65
|
* @default solid
|
|
76
66
|
*/
|
|
77
67
|
fill = 'solid';
|
|
78
68
|
/**
|
|
79
69
|
* Specifies the theme color of the Badge.
|
|
80
|
-
* The theme color
|
|
70
|
+
* The theme color applies as background and border color, while also amending the text color accordingly
|
|
81
71
|
* ([see example]({% slug appearance_badge %}#toc-theme-color)).
|
|
82
72
|
*
|
|
83
|
-
* The possible values are:
|
|
84
|
-
* * `primary`
|
|
85
|
-
* * `secondary`
|
|
86
|
-
* * `tertiary`
|
|
87
|
-
* * `inherit`
|
|
88
|
-
* * `info`
|
|
89
|
-
* * `success`
|
|
90
|
-
* * `warning`
|
|
91
|
-
* * `error`
|
|
92
|
-
* * `dark`
|
|
93
|
-
* * `light`
|
|
94
|
-
* * `inverse`
|
|
95
|
-
* * `none`
|
|
96
|
-
*
|
|
97
73
|
* @default primary
|
|
98
74
|
*/
|
|
99
75
|
themeColor = 'primary';
|
|
100
76
|
/**
|
|
101
77
|
* Specifies the roundness of the Badge ([see example]({% slug appearance_badge %}#toc-rounded)).
|
|
102
78
|
*
|
|
103
|
-
* The possible values are:
|
|
104
|
-
* * `small`
|
|
105
|
-
* * `medium`
|
|
106
|
-
* * `large`
|
|
107
|
-
* * `full`
|
|
108
|
-
* * `none`
|
|
109
|
-
*
|
|
110
79
|
* @default medium
|
|
111
80
|
*/
|
|
112
81
|
rounded = 'medium';
|
|
113
82
|
/**
|
|
114
83
|
* Specifies the position of the Badge relative to the edge of the parent container element ([see example]({% slug alignandposition_badge %}#toc-position)).
|
|
115
84
|
*
|
|
116
|
-
* The possible values are:
|
|
117
|
-
* * `edge`
|
|
118
|
-
* * `inside`
|
|
119
|
-
* * `outside`
|
|
120
|
-
*
|
|
121
85
|
* @default edge
|
|
122
86
|
*/
|
|
123
87
|
position = 'edge';
|
|
124
88
|
/**
|
|
125
|
-
* Specifies whether
|
|
126
|
-
*
|
|
127
|
-
* The possible values are:
|
|
128
|
-
* * `true`
|
|
129
|
-
* * `false`
|
|
89
|
+
* Specifies whether to render additional `cutout` border around the Badge ([see example]({% slug appearance_badge %}#toc-cutout-border)).
|
|
130
90
|
*
|
|
131
91
|
* @default false
|
|
132
92
|
*/
|
package/esm2022/directives.mjs
CHANGED
|
@@ -7,32 +7,32 @@ import { BadgeComponent } from "./badge/badge.component";
|
|
|
7
7
|
import { LoaderComponent } from "./loader/loader.component";
|
|
8
8
|
import { SkeletonComponent } from "./skeleton/skeleton.component";
|
|
9
9
|
/**
|
|
10
|
-
* Utility array that contains all `Badge` related components and directives
|
|
10
|
+
* Utility array that contains all `Badge` related components and directives.
|
|
11
11
|
*/
|
|
12
12
|
export const KENDO_BADGE = [
|
|
13
13
|
BadgeComponent
|
|
14
14
|
];
|
|
15
15
|
/**
|
|
16
|
-
* Utility array that contains all `BadgeContainer` related components and directives
|
|
16
|
+
* Utility array that contains all `BadgeContainer` related components and directives.
|
|
17
17
|
*/
|
|
18
18
|
export const KENDO_BADGECONTAINER = [
|
|
19
19
|
BadgeComponent,
|
|
20
20
|
BadgeContainerComponent
|
|
21
21
|
];
|
|
22
22
|
/**
|
|
23
|
-
* Utility array that contains all `Loader` related components and directives
|
|
23
|
+
* Utility array that contains all `Loader` related components and directives.
|
|
24
24
|
*/
|
|
25
25
|
export const KENDO_LOADER = [
|
|
26
26
|
LoaderComponent
|
|
27
27
|
];
|
|
28
28
|
/**
|
|
29
|
-
* Utility array that contains all `Skeleton` related components and directives
|
|
29
|
+
* Utility array that contains all `Skeleton` related components and directives.
|
|
30
30
|
*/
|
|
31
31
|
export const KENDO_SKELETON = [
|
|
32
32
|
SkeletonComponent
|
|
33
33
|
];
|
|
34
34
|
/**
|
|
35
|
-
* Utility array that contains all `@progress/kendo-angular-indicators` related components and directives
|
|
35
|
+
* Utility array that contains all `@progress/kendo-angular-indicators` related components and directives.
|
|
36
36
|
*/
|
|
37
37
|
export const KENDO_INDICATORS = [
|
|
38
38
|
...KENDO_BADGECONTAINER,
|
|
@@ -17,28 +17,19 @@ import * as i4 from "./skeleton/skeleton.component";
|
|
|
17
17
|
* @example
|
|
18
18
|
*
|
|
19
19
|
* ```ts-no-run
|
|
20
|
-
* // Import the Indicators module
|
|
21
20
|
* import { IndicatorsModule } from '@progress/kendo-angular-indicators';
|
|
22
|
-
*
|
|
23
|
-
* // The browser platform with a compiler
|
|
24
21
|
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
25
|
-
*
|
|
26
22
|
* import { NgModule } from '@angular/core';
|
|
27
|
-
*
|
|
28
|
-
* // Import the app component
|
|
29
23
|
* import { AppComponent } from './app.component';
|
|
30
24
|
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
* bootstrap: [AppComponent]
|
|
25
|
+
* @NgModule({
|
|
26
|
+
* declarations: [AppComponent],
|
|
27
|
+
* imports: [BrowserModule, IndicatorsModule],
|
|
28
|
+
* bootstrap: [AppComponent]
|
|
36
29
|
* })
|
|
37
30
|
* export class AppModule {}
|
|
38
31
|
*
|
|
39
|
-
* // Compile and launch the module
|
|
40
32
|
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
41
|
-
*
|
|
42
33
|
* ```
|
|
43
34
|
*/
|
|
44
35
|
export class IndicatorsModule {
|
|
@@ -25,6 +25,13 @@ const TYPE_CLASSES = {
|
|
|
25
25
|
/**
|
|
26
26
|
* Represents the [Kendo UI Loader component for Angular]({% slug overview_loader %}).
|
|
27
27
|
* Displays a Loader that represents an indeterminate wait time.
|
|
28
|
+
*
|
|
29
|
+
* Provides configuration options for animation type, theme color, and size.
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```html
|
|
33
|
+
* <kendo-loader [type]="'infinite-spinner'" [themeColor]="'primary'" [size]="'large'"></kendo-loader>
|
|
34
|
+
* ```
|
|
28
35
|
*/
|
|
29
36
|
export class LoaderComponent {
|
|
30
37
|
element;
|
|
@@ -33,10 +40,7 @@ export class LoaderComponent {
|
|
|
33
40
|
/**
|
|
34
41
|
* Specifies the Loader animation type.
|
|
35
42
|
*
|
|
36
|
-
*
|
|
37
|
-
* - `pulsing` (default)
|
|
38
|
-
* - `infinite-spinner`
|
|
39
|
-
* - `converging-spinner`
|
|
43
|
+
* @default pulsing
|
|
40
44
|
*/
|
|
41
45
|
set type(type) {
|
|
42
46
|
this.renderer.removeClass(this.loader, TYPE_CLASSES[this.type]);
|
|
@@ -49,18 +53,7 @@ export class LoaderComponent {
|
|
|
49
53
|
/**
|
|
50
54
|
* Specifies the theme color of the Loader.
|
|
51
55
|
*
|
|
52
|
-
*
|
|
53
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
54
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
55
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
56
|
-
* * `info`—Applies coloring based on info theme color.
|
|
57
|
-
* * `success`— Applies coloring based on success theme color.
|
|
58
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
59
|
-
* * `error`— Applies coloring based on error theme color.
|
|
60
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
61
|
-
* * `light`— Applies coloring based on light theme color.
|
|
62
|
-
* * `inverse`— Applies coloring based on inverted theme color.
|
|
63
|
-
*
|
|
56
|
+
* @default primary
|
|
64
57
|
*/
|
|
65
58
|
set themeColor(themeColor) {
|
|
66
59
|
this.renderer.removeClass(this.loader, `k-loader-${this.themeColor}`);
|
|
@@ -73,11 +66,7 @@ export class LoaderComponent {
|
|
|
73
66
|
/**
|
|
74
67
|
* Specifies the size of the Loader.
|
|
75
68
|
*
|
|
76
|
-
*
|
|
77
|
-
* * `small`
|
|
78
|
-
* * `medium` (Default)
|
|
79
|
-
* * `large`
|
|
80
|
-
*
|
|
69
|
+
* @default medium
|
|
81
70
|
*/
|
|
82
71
|
set size(size) {
|
|
83
72
|
this.renderer.removeClass(this.loader, SIZE_CLASSES[this.size]);
|
|
@@ -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: '19.1.
|
|
13
|
+
publishDate: 1749820392,
|
|
14
|
+
version: '19.1.2-develop.2',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -8,7 +8,14 @@ import { validAnimations, validShapes } from "./models";
|
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
/**
|
|
10
10
|
* Represents the [Kendo UI Skeleton component for Angular]({% slug overview_skeleton %}).
|
|
11
|
-
* Displays a Skeleton that represents loading content.
|
|
11
|
+
* Displays a Skeleton placeholder that represents loading content.
|
|
12
|
+
*
|
|
13
|
+
* Provides configuration options for animation, shape, width, and height.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```html
|
|
17
|
+
* <kendo-skeleton [shape]="'circle'" [animation]="'wave'" width="40px" height="40px"></kendo-skeleton>
|
|
18
|
+
* ```
|
|
12
19
|
*/
|
|
13
20
|
export class SkeletonComponent {
|
|
14
21
|
renderer;
|
|
@@ -16,10 +23,7 @@ export class SkeletonComponent {
|
|
|
16
23
|
/**
|
|
17
24
|
* Specifies the animation settings of the Skeleton.
|
|
18
25
|
*
|
|
19
|
-
*
|
|
20
|
-
* * `pulse` — (Default) Shows a pulse animation effect.
|
|
21
|
-
* * `wave` — Shows a wave animation effect.
|
|
22
|
-
* * `false` — Disables the animation. Note that it's a boolean, not a string.
|
|
26
|
+
* @default pulse
|
|
23
27
|
*/
|
|
24
28
|
set animation(animation) {
|
|
25
29
|
if (isDevMode() && validAnimations.indexOf(animation) === -1) {
|
|
@@ -39,10 +43,7 @@ export class SkeletonComponent {
|
|
|
39
43
|
/**
|
|
40
44
|
* Specifies the shape of the Skeleton.
|
|
41
45
|
*
|
|
42
|
-
*
|
|
43
|
-
* * `text` — (Default) Renders a line Skeleton.
|
|
44
|
-
* * `circle` — Renders a circular Skeleton.
|
|
45
|
-
* * `rectangle` — Renders a rectangular Skeleton.
|
|
46
|
+
* @default text
|
|
46
47
|
*/
|
|
47
48
|
set shape(shape) {
|
|
48
49
|
if (isDevMode() && validShapes.indexOf(shape) === -1) {
|
|
@@ -57,19 +58,17 @@ export class SkeletonComponent {
|
|
|
57
58
|
}
|
|
58
59
|
/**
|
|
59
60
|
* Specifies the width of the Skeleton component.
|
|
60
|
-
*
|
|
61
|
-
*
|
|
62
|
-
* * Can be set to an integer number (will be read as width in pixels).
|
|
61
|
+
* Required for all Skeleton shapes.
|
|
62
|
+
* Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
|
|
63
63
|
*/
|
|
64
64
|
set width(width) {
|
|
65
65
|
this.renderer.setStyle(this.hostElement.nativeElement, "width", typeof width === "string" ? width : width + "px");
|
|
66
66
|
}
|
|
67
67
|
/**
|
|
68
68
|
* Specifies the height of the Skeleton component.
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
* * Can be set to an integer number (will be read as height in pixels).
|
|
69
|
+
* Required for `circle` and `rectangle` shapes.
|
|
70
|
+
* Not required for `text`, as it derives from the current CSS font-size.
|
|
71
|
+
* Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
|
|
73
72
|
*/
|
|
74
73
|
set height(height) {
|
|
75
74
|
this.renderer.setStyle(this.hostElement.nativeElement, "height", typeof height === "string" ? height : height + "px");
|
|
@@ -9,6 +9,17 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
10
|
import { NgFor } from '@angular/common';
|
|
11
11
|
|
|
12
|
+
/**
|
|
13
|
+
* Represents the Kendo UI BadgeContainer component for Angular.
|
|
14
|
+
* Groups and aligns one or more Badge components within a parent element.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```html
|
|
18
|
+
* <kendo-badge-container>
|
|
19
|
+
* <kendo-badge>new</kendo-badge>
|
|
20
|
+
* </kendo-badge-container>
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
12
23
|
class BadgeContainerComponent {
|
|
13
24
|
localizationService;
|
|
14
25
|
hostClass = true;
|
|
@@ -69,8 +80,8 @@ const packageMetadata = {
|
|
|
69
80
|
productName: 'Kendo UI for Angular',
|
|
70
81
|
productCode: 'KENDOUIANGULAR',
|
|
71
82
|
productCodes: ['KENDOUIANGULAR'],
|
|
72
|
-
publishDate:
|
|
73
|
-
version: '19.1.
|
|
83
|
+
publishDate: 1749820392,
|
|
84
|
+
version: '19.1.2-develop.2',
|
|
74
85
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
75
86
|
};
|
|
76
87
|
|
|
@@ -87,7 +98,14 @@ const ROUNDED_CLASSES = {
|
|
|
87
98
|
};
|
|
88
99
|
/**
|
|
89
100
|
* Represents the [Kendo UI Badge component for Angular]({% slug overview_badge %}).
|
|
90
|
-
*
|
|
101
|
+
* Displays additional information or status related to an element, such as notifications or counts.
|
|
102
|
+
*
|
|
103
|
+
* Provides configuration options for alignment, size, fill, theme color, roundness, position, and cutout border.
|
|
104
|
+
*
|
|
105
|
+
* @example
|
|
106
|
+
* ```html
|
|
107
|
+
* <kendo-badge [size]="'large'" [themeColor]="'success'">99+</kendo-badge>
|
|
108
|
+
* ```
|
|
91
109
|
*/
|
|
92
110
|
class BadgeComponent {
|
|
93
111
|
element;
|
|
@@ -104,12 +122,6 @@ class BadgeComponent {
|
|
|
104
122
|
/**
|
|
105
123
|
* Specifies the alignment of the Badge ([see example]({% slug alignandposition_badge %}#toc-alignment)).
|
|
106
124
|
*
|
|
107
|
-
* The possible values are:
|
|
108
|
-
* * `{ vertical: 'top', horizontal: 'end' }`
|
|
109
|
-
* * `{ vertical: 'top', horizontal: 'start' }`
|
|
110
|
-
* * `{ vertical: 'bottom', horizontal: 'start' }`
|
|
111
|
-
* * `{ vertical: 'bottom', horizontal: 'end' }`
|
|
112
|
-
*
|
|
113
125
|
* @default "{ vertical: 'top', horizontal: 'end' }"
|
|
114
126
|
*/
|
|
115
127
|
get align() {
|
|
@@ -121,78 +133,37 @@ class BadgeComponent {
|
|
|
121
133
|
/**
|
|
122
134
|
* Specifies the size of the Badge ([see example]({% slug appearance_badge %}#toc-size)).
|
|
123
135
|
*
|
|
124
|
-
* The possible values are:
|
|
125
|
-
* * `small`
|
|
126
|
-
* * `medium`
|
|
127
|
-
* * `large`
|
|
128
|
-
* * `none`
|
|
129
|
-
*
|
|
130
136
|
* @default medium
|
|
131
137
|
*/
|
|
132
138
|
size = 'medium';
|
|
133
139
|
/**
|
|
134
140
|
* Specifies the appearance fill style of the Badge ([see example]({% slug appearance_badge %}#toc-fill)).
|
|
135
141
|
*
|
|
136
|
-
* The possible values are:
|
|
137
|
-
* * `solid`
|
|
138
|
-
* * `outline`
|
|
139
|
-
* * `none`
|
|
140
|
-
*
|
|
141
142
|
* @default solid
|
|
142
143
|
*/
|
|
143
144
|
fill = 'solid';
|
|
144
145
|
/**
|
|
145
146
|
* Specifies the theme color of the Badge.
|
|
146
|
-
* The theme color
|
|
147
|
+
* The theme color applies as background and border color, while also amending the text color accordingly
|
|
147
148
|
* ([see example]({% slug appearance_badge %}#toc-theme-color)).
|
|
148
149
|
*
|
|
149
|
-
* The possible values are:
|
|
150
|
-
* * `primary`
|
|
151
|
-
* * `secondary`
|
|
152
|
-
* * `tertiary`
|
|
153
|
-
* * `inherit`
|
|
154
|
-
* * `info`
|
|
155
|
-
* * `success`
|
|
156
|
-
* * `warning`
|
|
157
|
-
* * `error`
|
|
158
|
-
* * `dark`
|
|
159
|
-
* * `light`
|
|
160
|
-
* * `inverse`
|
|
161
|
-
* * `none`
|
|
162
|
-
*
|
|
163
150
|
* @default primary
|
|
164
151
|
*/
|
|
165
152
|
themeColor = 'primary';
|
|
166
153
|
/**
|
|
167
154
|
* Specifies the roundness of the Badge ([see example]({% slug appearance_badge %}#toc-rounded)).
|
|
168
155
|
*
|
|
169
|
-
* The possible values are:
|
|
170
|
-
* * `small`
|
|
171
|
-
* * `medium`
|
|
172
|
-
* * `large`
|
|
173
|
-
* * `full`
|
|
174
|
-
* * `none`
|
|
175
|
-
*
|
|
176
156
|
* @default medium
|
|
177
157
|
*/
|
|
178
158
|
rounded = 'medium';
|
|
179
159
|
/**
|
|
180
160
|
* Specifies the position of the Badge relative to the edge of the parent container element ([see example]({% slug alignandposition_badge %}#toc-position)).
|
|
181
161
|
*
|
|
182
|
-
* The possible values are:
|
|
183
|
-
* * `edge`
|
|
184
|
-
* * `inside`
|
|
185
|
-
* * `outside`
|
|
186
|
-
*
|
|
187
162
|
* @default edge
|
|
188
163
|
*/
|
|
189
164
|
position = 'edge';
|
|
190
165
|
/**
|
|
191
|
-
* Specifies whether
|
|
192
|
-
*
|
|
193
|
-
* The possible values are:
|
|
194
|
-
* * `true`
|
|
195
|
-
* * `false`
|
|
166
|
+
* Specifies whether to render additional `cutout` border around the Badge ([see example]({% slug appearance_badge %}#toc-cutout-border)).
|
|
196
167
|
*
|
|
197
168
|
* @default false
|
|
198
169
|
*/
|
|
@@ -339,6 +310,13 @@ const TYPE_CLASSES = {
|
|
|
339
310
|
/**
|
|
340
311
|
* Represents the [Kendo UI Loader component for Angular]({% slug overview_loader %}).
|
|
341
312
|
* Displays a Loader that represents an indeterminate wait time.
|
|
313
|
+
*
|
|
314
|
+
* Provides configuration options for animation type, theme color, and size.
|
|
315
|
+
*
|
|
316
|
+
* @example
|
|
317
|
+
* ```html
|
|
318
|
+
* <kendo-loader [type]="'infinite-spinner'" [themeColor]="'primary'" [size]="'large'"></kendo-loader>
|
|
319
|
+
* ```
|
|
342
320
|
*/
|
|
343
321
|
class LoaderComponent {
|
|
344
322
|
element;
|
|
@@ -347,10 +325,7 @@ class LoaderComponent {
|
|
|
347
325
|
/**
|
|
348
326
|
* Specifies the Loader animation type.
|
|
349
327
|
*
|
|
350
|
-
*
|
|
351
|
-
* - `pulsing` (default)
|
|
352
|
-
* - `infinite-spinner`
|
|
353
|
-
* - `converging-spinner`
|
|
328
|
+
* @default pulsing
|
|
354
329
|
*/
|
|
355
330
|
set type(type) {
|
|
356
331
|
this.renderer.removeClass(this.loader, TYPE_CLASSES[this.type]);
|
|
@@ -363,18 +338,7 @@ class LoaderComponent {
|
|
|
363
338
|
/**
|
|
364
339
|
* Specifies the theme color of the Loader.
|
|
365
340
|
*
|
|
366
|
-
*
|
|
367
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
368
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
369
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
370
|
-
* * `info`—Applies coloring based on info theme color.
|
|
371
|
-
* * `success`— Applies coloring based on success theme color.
|
|
372
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
373
|
-
* * `error`— Applies coloring based on error theme color.
|
|
374
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
375
|
-
* * `light`— Applies coloring based on light theme color.
|
|
376
|
-
* * `inverse`— Applies coloring based on inverted theme color.
|
|
377
|
-
*
|
|
341
|
+
* @default primary
|
|
378
342
|
*/
|
|
379
343
|
set themeColor(themeColor) {
|
|
380
344
|
this.renderer.removeClass(this.loader, `k-loader-${this.themeColor}`);
|
|
@@ -387,11 +351,7 @@ class LoaderComponent {
|
|
|
387
351
|
/**
|
|
388
352
|
* Specifies the size of the Loader.
|
|
389
353
|
*
|
|
390
|
-
*
|
|
391
|
-
* * `small`
|
|
392
|
-
* * `medium` (Default)
|
|
393
|
-
* * `large`
|
|
394
|
-
*
|
|
354
|
+
* @default medium
|
|
395
355
|
*/
|
|
396
356
|
set size(size) {
|
|
397
357
|
this.renderer.removeClass(this.loader, SIZE_CLASSES[this.size]);
|
|
@@ -490,7 +450,14 @@ const skeletonAnimationError = (input) => `"${input}" is not a valid kendo-skele
|
|
|
490
450
|
|
|
491
451
|
/**
|
|
492
452
|
* Represents the [Kendo UI Skeleton component for Angular]({% slug overview_skeleton %}).
|
|
493
|
-
* Displays a Skeleton that represents loading content.
|
|
453
|
+
* Displays a Skeleton placeholder that represents loading content.
|
|
454
|
+
*
|
|
455
|
+
* Provides configuration options for animation, shape, width, and height.
|
|
456
|
+
*
|
|
457
|
+
* @example
|
|
458
|
+
* ```html
|
|
459
|
+
* <kendo-skeleton [shape]="'circle'" [animation]="'wave'" width="40px" height="40px"></kendo-skeleton>
|
|
460
|
+
* ```
|
|
494
461
|
*/
|
|
495
462
|
class SkeletonComponent {
|
|
496
463
|
renderer;
|
|
@@ -498,10 +465,7 @@ class SkeletonComponent {
|
|
|
498
465
|
/**
|
|
499
466
|
* Specifies the animation settings of the Skeleton.
|
|
500
467
|
*
|
|
501
|
-
*
|
|
502
|
-
* * `pulse` — (Default) Shows a pulse animation effect.
|
|
503
|
-
* * `wave` — Shows a wave animation effect.
|
|
504
|
-
* * `false` — Disables the animation. Note that it's a boolean, not a string.
|
|
468
|
+
* @default pulse
|
|
505
469
|
*/
|
|
506
470
|
set animation(animation) {
|
|
507
471
|
if (isDevMode() && validAnimations.indexOf(animation) === -1) {
|
|
@@ -521,10 +485,7 @@ class SkeletonComponent {
|
|
|
521
485
|
/**
|
|
522
486
|
* Specifies the shape of the Skeleton.
|
|
523
487
|
*
|
|
524
|
-
*
|
|
525
|
-
* * `text` — (Default) Renders a line Skeleton.
|
|
526
|
-
* * `circle` — Renders a circular Skeleton.
|
|
527
|
-
* * `rectangle` — Renders a rectangular Skeleton.
|
|
488
|
+
* @default text
|
|
528
489
|
*/
|
|
529
490
|
set shape(shape) {
|
|
530
491
|
if (isDevMode() && validShapes.indexOf(shape) === -1) {
|
|
@@ -539,19 +500,17 @@ class SkeletonComponent {
|
|
|
539
500
|
}
|
|
540
501
|
/**
|
|
541
502
|
* Specifies the width of the Skeleton component.
|
|
542
|
-
*
|
|
543
|
-
*
|
|
544
|
-
* * Can be set to an integer number (will be read as width in pixels).
|
|
503
|
+
* Required for all Skeleton shapes.
|
|
504
|
+
* Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
|
|
545
505
|
*/
|
|
546
506
|
set width(width) {
|
|
547
507
|
this.renderer.setStyle(this.hostElement.nativeElement, "width", typeof width === "string" ? width : width + "px");
|
|
548
508
|
}
|
|
549
509
|
/**
|
|
550
510
|
* Specifies the height of the Skeleton component.
|
|
551
|
-
*
|
|
552
|
-
*
|
|
553
|
-
*
|
|
554
|
-
* * Can be set to an integer number (will be read as height in pixels).
|
|
511
|
+
* Required for `circle` and `rectangle` shapes.
|
|
512
|
+
* Not required for `text`, as it derives from the current CSS font-size.
|
|
513
|
+
* Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
|
|
555
514
|
*/
|
|
556
515
|
set height(height) {
|
|
557
516
|
this.renderer.setStyle(this.hostElement.nativeElement, "height", typeof height === "string" ? height : height + "px");
|
|
@@ -591,32 +550,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
591
550
|
}] } });
|
|
592
551
|
|
|
593
552
|
/**
|
|
594
|
-
* Utility array that contains all `Badge` related components and directives
|
|
553
|
+
* Utility array that contains all `Badge` related components and directives.
|
|
595
554
|
*/
|
|
596
555
|
const KENDO_BADGE = [
|
|
597
556
|
BadgeComponent
|
|
598
557
|
];
|
|
599
558
|
/**
|
|
600
|
-
* Utility array that contains all `BadgeContainer` related components and directives
|
|
559
|
+
* Utility array that contains all `BadgeContainer` related components and directives.
|
|
601
560
|
*/
|
|
602
561
|
const KENDO_BADGECONTAINER = [
|
|
603
562
|
BadgeComponent,
|
|
604
563
|
BadgeContainerComponent
|
|
605
564
|
];
|
|
606
565
|
/**
|
|
607
|
-
* Utility array that contains all `Loader` related components and directives
|
|
566
|
+
* Utility array that contains all `Loader` related components and directives.
|
|
608
567
|
*/
|
|
609
568
|
const KENDO_LOADER = [
|
|
610
569
|
LoaderComponent
|
|
611
570
|
];
|
|
612
571
|
/**
|
|
613
|
-
* Utility array that contains all `Skeleton` related components and directives
|
|
572
|
+
* Utility array that contains all `Skeleton` related components and directives.
|
|
614
573
|
*/
|
|
615
574
|
const KENDO_SKELETON = [
|
|
616
575
|
SkeletonComponent
|
|
617
576
|
];
|
|
618
577
|
/**
|
|
619
|
-
* Utility array that contains all `@progress/kendo-angular-indicators` related components and directives
|
|
578
|
+
* Utility array that contains all `@progress/kendo-angular-indicators` related components and directives.
|
|
620
579
|
*/
|
|
621
580
|
const KENDO_INDICATORS = [
|
|
622
581
|
...KENDO_BADGECONTAINER,
|
|
@@ -686,28 +645,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
686
645
|
* @example
|
|
687
646
|
*
|
|
688
647
|
* ```ts-no-run
|
|
689
|
-
* // Import the Indicators module
|
|
690
648
|
* import { IndicatorsModule } from '@progress/kendo-angular-indicators';
|
|
691
|
-
*
|
|
692
|
-
* // The browser platform with a compiler
|
|
693
649
|
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
694
|
-
*
|
|
695
650
|
* import { NgModule } from '@angular/core';
|
|
696
|
-
*
|
|
697
|
-
* // Import the app component
|
|
698
651
|
* import { AppComponent } from './app.component';
|
|
699
652
|
*
|
|
700
|
-
*
|
|
701
|
-
*
|
|
702
|
-
*
|
|
703
|
-
*
|
|
704
|
-
* bootstrap: [AppComponent]
|
|
653
|
+
* @NgModule({
|
|
654
|
+
* declarations: [AppComponent],
|
|
655
|
+
* imports: [BrowserModule, IndicatorsModule],
|
|
656
|
+
* bootstrap: [AppComponent]
|
|
705
657
|
* })
|
|
706
658
|
* export class AppModule {}
|
|
707
659
|
*
|
|
708
|
-
* // Compile and launch the module
|
|
709
660
|
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
710
|
-
*
|
|
711
661
|
* ```
|
|
712
662
|
*/
|
|
713
663
|
class IndicatorsModule {
|
package/indicators.module.d.ts
CHANGED
|
@@ -14,28 +14,19 @@ import * as i4 from "./skeleton/skeleton.component";
|
|
|
14
14
|
* @example
|
|
15
15
|
*
|
|
16
16
|
* ```ts-no-run
|
|
17
|
-
* // Import the Indicators module
|
|
18
17
|
* import { IndicatorsModule } from '@progress/kendo-angular-indicators';
|
|
19
|
-
*
|
|
20
|
-
* // The browser platform with a compiler
|
|
21
18
|
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
22
|
-
*
|
|
23
19
|
* import { NgModule } from '@angular/core';
|
|
24
|
-
*
|
|
25
|
-
* // Import the app component
|
|
26
20
|
* import { AppComponent } from './app.component';
|
|
27
21
|
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* bootstrap: [AppComponent]
|
|
22
|
+
* @NgModule({
|
|
23
|
+
* declarations: [AppComponent],
|
|
24
|
+
* imports: [BrowserModule, IndicatorsModule],
|
|
25
|
+
* bootstrap: [AppComponent]
|
|
33
26
|
* })
|
|
34
27
|
* export class AppModule {}
|
|
35
28
|
*
|
|
36
|
-
* // Compile and launch the module
|
|
37
29
|
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
38
|
-
*
|
|
39
30
|
* ```
|
|
40
31
|
*/
|
|
41
32
|
export declare class IndicatorsModule {
|
|
@@ -10,6 +10,13 @@ import * as i0 from "@angular/core";
|
|
|
10
10
|
/**
|
|
11
11
|
* Represents the [Kendo UI Loader component for Angular]({% slug overview_loader %}).
|
|
12
12
|
* Displays a Loader that represents an indeterminate wait time.
|
|
13
|
+
*
|
|
14
|
+
* Provides configuration options for animation type, theme color, and size.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```html
|
|
18
|
+
* <kendo-loader [type]="'infinite-spinner'" [themeColor]="'primary'" [size]="'large'"></kendo-loader>
|
|
19
|
+
* ```
|
|
13
20
|
*/
|
|
14
21
|
export declare class LoaderComponent implements AfterViewInit {
|
|
15
22
|
private element;
|
|
@@ -18,39 +25,21 @@ export declare class LoaderComponent implements AfterViewInit {
|
|
|
18
25
|
/**
|
|
19
26
|
* Specifies the Loader animation type.
|
|
20
27
|
*
|
|
21
|
-
*
|
|
22
|
-
* - `pulsing` (default)
|
|
23
|
-
* - `infinite-spinner`
|
|
24
|
-
* - `converging-spinner`
|
|
28
|
+
* @default pulsing
|
|
25
29
|
*/
|
|
26
30
|
set type(type: LoaderType);
|
|
27
31
|
get type(): LoaderType;
|
|
28
32
|
/**
|
|
29
33
|
* Specifies the theme color of the Loader.
|
|
30
34
|
*
|
|
31
|
-
*
|
|
32
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
33
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
34
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
35
|
-
* * `info`—Applies coloring based on info theme color.
|
|
36
|
-
* * `success`— Applies coloring based on success theme color.
|
|
37
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
38
|
-
* * `error`— Applies coloring based on error theme color.
|
|
39
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
40
|
-
* * `light`— Applies coloring based on light theme color.
|
|
41
|
-
* * `inverse`— Applies coloring based on inverted theme color.
|
|
42
|
-
*
|
|
35
|
+
* @default primary
|
|
43
36
|
*/
|
|
44
37
|
set themeColor(themeColor: LoaderThemeColor);
|
|
45
38
|
get themeColor(): LoaderThemeColor;
|
|
46
39
|
/**
|
|
47
40
|
* Specifies the size of the Loader.
|
|
48
41
|
*
|
|
49
|
-
*
|
|
50
|
-
* * `small`
|
|
51
|
-
* * `medium` (Default)
|
|
52
|
-
* * `large`
|
|
53
|
-
*
|
|
42
|
+
* @default medium
|
|
54
43
|
*/
|
|
55
44
|
set size(size: LoaderSize);
|
|
56
45
|
get size(): LoaderSize;
|
package/loader/models/size.d.ts
CHANGED
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Specifies the size
|
|
7
|
-
* ([see example]({% slug appearance_loader %}#toc-size)).
|
|
6
|
+
* Specifies the size options for the Loader component.
|
|
8
7
|
*
|
|
9
8
|
* The possible values are:
|
|
10
9
|
* * `small`
|
|
11
10
|
* * `medium` (Default)
|
|
12
11
|
* * `large`
|
|
13
12
|
*
|
|
13
|
+
* For more information, see the [Loader Appearance - Size]({% slug appearance_loader %}#toc-size) documentation.
|
|
14
14
|
*/
|
|
15
15
|
export type LoaderSize = 'small' | 'medium' | 'large';
|
|
@@ -3,20 +3,20 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Specifies the theme color
|
|
7
|
-
* ([see example]({% slug appearance_loader %}#toc-theme-color)).
|
|
6
|
+
* Specifies the theme color options for the Loader component.
|
|
8
7
|
*
|
|
9
8
|
* The possible values are:
|
|
10
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
11
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
12
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
13
|
-
* * `info`—Applies coloring based on info theme color.
|
|
14
|
-
* * `success`— Applies coloring based on success theme color.
|
|
15
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
16
|
-
* * `error`— Applies coloring based on error theme color.
|
|
17
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
18
|
-
* * `light`— Applies coloring based on light theme color.
|
|
19
|
-
* * `inverse`— Applies coloring based on inverted theme color.
|
|
9
|
+
* * `primary` (Default)—Applies coloring based on the primary theme color.
|
|
10
|
+
* * `secondary`—Applies coloring based on the secondary theme color.
|
|
11
|
+
* * `tertiary`— Applies coloring based on the tertiary theme color.
|
|
12
|
+
* * `info`—Applies coloring based on the info theme color.
|
|
13
|
+
* * `success`— Applies coloring based on the success theme color.
|
|
14
|
+
* * `warning`— Applies coloring based on the warning theme color.
|
|
15
|
+
* * `error`— Applies coloring based on the error theme color.
|
|
16
|
+
* * `dark`— Applies coloring based on the dark theme color.
|
|
17
|
+
* * `light`— Applies coloring based on the light theme color.
|
|
18
|
+
* * `inverse`— Applies coloring based on the inverted theme color.
|
|
20
19
|
*
|
|
20
|
+
* For more information, see the [Loader Appearance - Theme Color]({% slug appearance_loader %}#toc-theme-color) documentation.
|
|
21
21
|
*/
|
|
22
22
|
export type LoaderThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
|
package/loader/models/type.d.ts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Specifies the
|
|
6
|
+
* Specifies the animation type for the Loader component.
|
|
7
7
|
*
|
|
8
8
|
* The possible values are:
|
|
9
9
|
* - `pulsing` (default)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-indicators",
|
|
3
|
-
"version": "19.1.
|
|
3
|
+
"version": "19.1.2-develop.2",
|
|
4
4
|
"description": "Kendo UI Indicators for Angular",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"package": {
|
|
18
18
|
"productName": "Kendo UI for Angular",
|
|
19
19
|
"productCode": "KENDOUIANGULAR",
|
|
20
|
-
"publishDate":
|
|
20
|
+
"publishDate": 1749820392,
|
|
21
21
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
22
22
|
}
|
|
23
23
|
},
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
"@angular/core": "16 - 20",
|
|
28
28
|
"@angular/platform-browser": "16 - 20",
|
|
29
29
|
"@progress/kendo-licensing": "^1.5.0",
|
|
30
|
-
"@progress/kendo-angular-common": "19.1.
|
|
31
|
-
"@progress/kendo-angular-intl": "19.1.
|
|
32
|
-
"@progress/kendo-angular-l10n": "19.1.
|
|
30
|
+
"@progress/kendo-angular-common": "19.1.2-develop.2",
|
|
31
|
+
"@progress/kendo-angular-intl": "19.1.2-develop.2",
|
|
32
|
+
"@progress/kendo-angular-l10n": "19.1.2-develop.2",
|
|
33
33
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"tslib": "^2.3.1",
|
|
37
|
-
"@progress/kendo-angular-schematics": "19.1.
|
|
37
|
+
"@progress/kendo-angular-schematics": "19.1.2-develop.2"
|
|
38
38
|
},
|
|
39
39
|
"schematics": "./schematics/collection.json",
|
|
40
40
|
"module": "fesm2022/progress-kendo-angular-indicators.mjs",
|
package/skeleton/models.d.ts
CHANGED
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Specifies the animation settings
|
|
6
|
+
* Specifies the animation settings for the Skeleton component.
|
|
7
7
|
*
|
|
8
8
|
* The possible values are:
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
9
|
+
* - `pulse`—(Default) Shows a pulse animation effect.
|
|
10
|
+
* - `wave`—Shows a wave animation effect.
|
|
11
|
+
* - `false`—Disables the animation. (Boolean, not a string)
|
|
12
12
|
*/
|
|
13
13
|
export type SkeletonAnimation = false | 'pulse' | 'wave';
|
|
14
14
|
/**
|
|
@@ -16,12 +16,12 @@ export type SkeletonAnimation = false | 'pulse' | 'wave';
|
|
|
16
16
|
*/
|
|
17
17
|
export declare const validAnimations: SkeletonAnimation[];
|
|
18
18
|
/**
|
|
19
|
-
* Specifies the shape of the Skeleton.
|
|
19
|
+
* Specifies the shape of the Skeleton component.
|
|
20
20
|
*
|
|
21
21
|
* The possible values are:
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
22
|
+
* - `text`—(Default) Renders a line Skeleton.
|
|
23
|
+
* - `circle`—Renders a circular Skeleton.
|
|
24
|
+
* - `rectangle`—Renders a rectangular Skeleton.
|
|
25
25
|
*/
|
|
26
26
|
export type SkeletonShape = 'circle' | 'rectangle' | 'text';
|
|
27
27
|
/**
|
|
@@ -7,7 +7,14 @@ import { SkeletonAnimation, SkeletonShape } from "./models";
|
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
9
|
* Represents the [Kendo UI Skeleton component for Angular]({% slug overview_skeleton %}).
|
|
10
|
-
* Displays a Skeleton that represents loading content.
|
|
10
|
+
* Displays a Skeleton placeholder that represents loading content.
|
|
11
|
+
*
|
|
12
|
+
* Provides configuration options for animation, shape, width, and height.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```html
|
|
16
|
+
* <kendo-skeleton [shape]="'circle'" [animation]="'wave'" width="40px" height="40px"></kendo-skeleton>
|
|
17
|
+
* ```
|
|
11
18
|
*/
|
|
12
19
|
export declare class SkeletonComponent implements AfterViewInit {
|
|
13
20
|
private renderer;
|
|
@@ -15,36 +22,28 @@ export declare class SkeletonComponent implements AfterViewInit {
|
|
|
15
22
|
/**
|
|
16
23
|
* Specifies the animation settings of the Skeleton.
|
|
17
24
|
*
|
|
18
|
-
*
|
|
19
|
-
* * `pulse` — (Default) Shows a pulse animation effect.
|
|
20
|
-
* * `wave` — Shows a wave animation effect.
|
|
21
|
-
* * `false` — Disables the animation. Note that it's a boolean, not a string.
|
|
25
|
+
* @default pulse
|
|
22
26
|
*/
|
|
23
27
|
set animation(animation: SkeletonAnimation);
|
|
24
28
|
get animation(): SkeletonAnimation;
|
|
25
29
|
/**
|
|
26
30
|
* Specifies the shape of the Skeleton.
|
|
27
31
|
*
|
|
28
|
-
*
|
|
29
|
-
* * `text` — (Default) Renders a line Skeleton.
|
|
30
|
-
* * `circle` — Renders a circular Skeleton.
|
|
31
|
-
* * `rectangle` — Renders a rectangular Skeleton.
|
|
32
|
+
* @default text
|
|
32
33
|
*/
|
|
33
34
|
set shape(shape: SkeletonShape);
|
|
34
35
|
get shape(): SkeletonShape;
|
|
35
36
|
/**
|
|
36
37
|
* Specifies the width of the Skeleton component.
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
* * Can be set to an integer number (will be read as width in pixels).
|
|
38
|
+
* Required for all Skeleton shapes.
|
|
39
|
+
* Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
|
|
40
40
|
*/
|
|
41
41
|
set width(width: string | number);
|
|
42
42
|
/**
|
|
43
43
|
* Specifies the height of the Skeleton component.
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
* * Can be set to an integer number (will be read as height in pixels).
|
|
44
|
+
* Required for `circle` and `rectangle` shapes.
|
|
45
|
+
* Not required for `text`, as it derives from the current CSS font-size.
|
|
46
|
+
* Accepts a string like `100px`, `3em`, or `50%`, or an integer number for pixels.
|
|
48
47
|
*/
|
|
49
48
|
set height(height: string | number);
|
|
50
49
|
private _animation;
|