@progress/kendo-angular-indicators 17.0.0-develop.4 → 17.0.0-develop.40
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 +31 -18
- package/badge/badge.component.d.ts +1 -1
- package/badge/models/fill.d.ts +1 -1
- package/badge/models/position.d.ts +1 -1
- package/badge/models/rounded.d.ts +1 -1
- package/badge/models/size.d.ts +1 -1
- package/badge/models/theme-color.d.ts +1 -1
- package/{esm2020 → esm2022}/badge/badge-container.component.mjs +17 -11
- package/{esm2020 → esm2022}/badge/badge.component.mjs +110 -102
- package/{esm2020 → esm2022}/badge.module.mjs +4 -4
- package/{esm2020 → esm2022}/indicators.module.mjs +4 -4
- package/{esm2020 → esm2022}/loader/loader.component.mjs +17 -14
- package/{esm2020 → esm2022}/loader.module.mjs +4 -4
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/skeleton/skeleton.component.mjs +11 -9
- package/{esm2020 → esm2022}/skeleton.module.mjs +4 -4
- package/{fesm2015 → fesm2022}/progress-kendo-angular-indicators.mjs +173 -154
- package/loader/loader.component.d.ts +1 -1
- package/loader/models/size.d.ts +1 -1
- package/loader/models/theme-color.d.ts +1 -1
- package/loader/models/type.d.ts +1 -1
- package/package.json +13 -19
- package/skeleton/models.d.ts +2 -2
- package/skeleton/skeleton.component.d.ts +1 -1
- package/fesm2020/progress-kendo-angular-indicators.mjs +0 -711
- /package/{esm2020 → esm2022}/badge/models/align.mjs +0 -0
- /package/{esm2020 → esm2022}/badge/models/fill.mjs +0 -0
- /package/{esm2020 → esm2022}/badge/models/position.mjs +0 -0
- /package/{esm2020 → esm2022}/badge/models/rounded.mjs +0 -0
- /package/{esm2020 → esm2022}/badge/models/size.mjs +0 -0
- /package/{esm2020 → esm2022}/badge/models/theme-color.mjs +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/loader/models/size.mjs +0 -0
- /package/{esm2020 → esm2022}/loader/models/theme-color.mjs +0 -0
- /package/{esm2020 → esm2022}/loader/models/type.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-indicators.mjs +0 -0
- /package/{esm2020 → esm2022}/skeleton/constants.mjs +0 -0
- /package/{esm2020 → esm2022}/skeleton/models.mjs +0 -0
|
@@ -1,711 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import * as i0 from '@angular/core';
|
|
6
|
-
import { Component, HostBinding, Input, isDevMode, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
7
|
-
import * as i1 from '@progress/kendo-angular-l10n';
|
|
8
|
-
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
9
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
|
-
import { NgFor } from '@angular/common';
|
|
11
|
-
|
|
12
|
-
class BadgeContainerComponent {
|
|
13
|
-
constructor(localizationService) {
|
|
14
|
-
this.localizationService = localizationService;
|
|
15
|
-
this.hostClass = true;
|
|
16
|
-
this.rtl = false;
|
|
17
|
-
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
|
|
18
|
-
this.rtl = rtl;
|
|
19
|
-
this.direction = this.rtl ? 'rtl' : 'ltr';
|
|
20
|
-
});
|
|
21
|
-
}
|
|
22
|
-
ngOnDestroy() {
|
|
23
|
-
if (this.dynamicRTLSubscription) {
|
|
24
|
-
this.dynamicRTLSubscription.unsubscribe();
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
BadgeContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BadgeContainerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
29
|
-
BadgeContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BadgeContainerComponent, isStandalone: true, selector: "kendo-badge-container", host: { properties: { "class.k-badge-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
|
|
30
|
-
LocalizationService,
|
|
31
|
-
{
|
|
32
|
-
provide: L10N_PREFIX,
|
|
33
|
-
useValue: 'kendo.badge.component'
|
|
34
|
-
}
|
|
35
|
-
], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BadgeContainerComponent, decorators: [{
|
|
37
|
-
type: Component,
|
|
38
|
-
args: [{
|
|
39
|
-
selector: 'kendo-badge-container',
|
|
40
|
-
providers: [
|
|
41
|
-
LocalizationService,
|
|
42
|
-
{
|
|
43
|
-
provide: L10N_PREFIX,
|
|
44
|
-
useValue: 'kendo.badge.component'
|
|
45
|
-
}
|
|
46
|
-
],
|
|
47
|
-
template: `<ng-content></ng-content>`,
|
|
48
|
-
standalone: true
|
|
49
|
-
}]
|
|
50
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
|
|
51
|
-
type: HostBinding,
|
|
52
|
-
args: ['class.k-badge-container']
|
|
53
|
-
}], direction: [{
|
|
54
|
-
type: HostBinding,
|
|
55
|
-
args: ['attr.dir']
|
|
56
|
-
}] } });
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* @hidden
|
|
60
|
-
*/
|
|
61
|
-
const packageMetadata = {
|
|
62
|
-
name: '@progress/kendo-angular-indicators',
|
|
63
|
-
productName: 'Kendo UI for Angular',
|
|
64
|
-
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
65
|
-
publishDate: 1728985126,
|
|
66
|
-
version: '17.0.0-develop.4',
|
|
67
|
-
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
const SIZE_CLASSES$1 = {
|
|
71
|
-
'small': 'k-badge-sm',
|
|
72
|
-
'medium': 'k-badge-md',
|
|
73
|
-
'large': 'k-badge-lg'
|
|
74
|
-
};
|
|
75
|
-
const ROUNDED_CLASSES = {
|
|
76
|
-
'small': 'k-rounded-sm',
|
|
77
|
-
'medium': 'k-rounded-md',
|
|
78
|
-
'large': 'k-rounded-lg',
|
|
79
|
-
'full': 'k-rounded-full'
|
|
80
|
-
};
|
|
81
|
-
/**
|
|
82
|
-
* Represents the [Kendo UI Badge component for Angular]({% slug overview_badge %}).
|
|
83
|
-
* Used to display additional information or status that is related to an element.
|
|
84
|
-
*/
|
|
85
|
-
class BadgeComponent {
|
|
86
|
-
constructor(element, renderer, localizationService) {
|
|
87
|
-
this.element = element;
|
|
88
|
-
this.renderer = renderer;
|
|
89
|
-
this.localizationService = localizationService;
|
|
90
|
-
this.hostClass = true;
|
|
91
|
-
/**
|
|
92
|
-
* Specifies the size of the Badge ([see example]({% slug appearance_badge %}#toc-size)).
|
|
93
|
-
*
|
|
94
|
-
* The possible values are:
|
|
95
|
-
* * `small`
|
|
96
|
-
* * `medium`
|
|
97
|
-
* * `large`
|
|
98
|
-
* * `none`
|
|
99
|
-
*
|
|
100
|
-
* @default medium
|
|
101
|
-
*/
|
|
102
|
-
this.size = 'medium';
|
|
103
|
-
/**
|
|
104
|
-
* Specifies the appearance fill style of the Badge ([see example]({% slug appearance_badge %}#toc-fill)).
|
|
105
|
-
*
|
|
106
|
-
* The possible values are:
|
|
107
|
-
* * `solid`
|
|
108
|
-
* * `outline`
|
|
109
|
-
* * `none`
|
|
110
|
-
*
|
|
111
|
-
* @default solid
|
|
112
|
-
*/
|
|
113
|
-
this.fill = 'solid';
|
|
114
|
-
/**
|
|
115
|
-
* Specifies the theme color of the Badge.
|
|
116
|
-
* The theme color will be applied as background and border color, while also amending the text color accordingly
|
|
117
|
-
* ([see example]({% slug appearance_badge %}#toc-theme-color)).
|
|
118
|
-
*
|
|
119
|
-
* The possible values are:
|
|
120
|
-
* * `primary`
|
|
121
|
-
* * `secondary`
|
|
122
|
-
* * `tertiary`
|
|
123
|
-
* * `inherit`
|
|
124
|
-
* * `info`
|
|
125
|
-
* * `success`
|
|
126
|
-
* * `warning`
|
|
127
|
-
* * `error`
|
|
128
|
-
* * `dark`
|
|
129
|
-
* * `light`
|
|
130
|
-
* * `inverse`
|
|
131
|
-
* * `none`
|
|
132
|
-
*
|
|
133
|
-
* @default primary
|
|
134
|
-
*/
|
|
135
|
-
this.themeColor = 'primary';
|
|
136
|
-
/**
|
|
137
|
-
* Specifies the roundness of the Badge ([see example]({% slug appearance_badge %}#toc-rounded)).
|
|
138
|
-
*
|
|
139
|
-
* The possible values are:
|
|
140
|
-
* * `small`
|
|
141
|
-
* * `medium`
|
|
142
|
-
* * `large`
|
|
143
|
-
* * `full`
|
|
144
|
-
* * `none`
|
|
145
|
-
*
|
|
146
|
-
* @default medium
|
|
147
|
-
*/
|
|
148
|
-
this.rounded = 'medium';
|
|
149
|
-
/**
|
|
150
|
-
* Specifies the position of the Badge relative to the edge of the parent container element ([see example]({% slug alignandposition_badge %}#toc-position)).
|
|
151
|
-
*
|
|
152
|
-
* The possible values are:
|
|
153
|
-
* * `edge`
|
|
154
|
-
* * `inside`
|
|
155
|
-
* * `outside`
|
|
156
|
-
*
|
|
157
|
-
* @default edge
|
|
158
|
-
*/
|
|
159
|
-
this.position = 'edge';
|
|
160
|
-
/**
|
|
161
|
-
* Specifies whether or not to render additional `cutout` border around the Badge ([see example]({% slug appearance_badge %}#toc-cutout-border)).
|
|
162
|
-
*
|
|
163
|
-
* The possible values are:
|
|
164
|
-
* * `true`
|
|
165
|
-
* * `false`
|
|
166
|
-
*
|
|
167
|
-
* @default false
|
|
168
|
-
*/
|
|
169
|
-
this.cutoutBorder = false;
|
|
170
|
-
this.badgeClasses = [];
|
|
171
|
-
this.badgeAlign = { vertical: 'top', horizontal: 'end' };
|
|
172
|
-
this.rtl = false;
|
|
173
|
-
validatePackage(packageMetadata);
|
|
174
|
-
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
|
|
175
|
-
this.rtl = rtl;
|
|
176
|
-
this.direction = this.rtl ? 'rtl' : 'ltr';
|
|
177
|
-
});
|
|
178
|
-
}
|
|
179
|
-
get cutoutBorderClass() {
|
|
180
|
-
return this.cutoutBorder;
|
|
181
|
-
}
|
|
182
|
-
/**
|
|
183
|
-
* Specifies the alignment of the Badge ([see example]({% slug alignandposition_badge %}#toc-alignment)).
|
|
184
|
-
*
|
|
185
|
-
* The possible values are:
|
|
186
|
-
* * `{ vertical: 'top', horizontal: 'end' }`
|
|
187
|
-
* * `{ vertical: 'top', horizontal: 'start' }`
|
|
188
|
-
* * `{ vertical: 'bottom', horizontal: 'start' }`
|
|
189
|
-
* * `{ vertical: 'bottom', horizontal: 'end' }`
|
|
190
|
-
*
|
|
191
|
-
* @default "{ vertical: 'top', horizontal: 'end' }"
|
|
192
|
-
*/
|
|
193
|
-
get align() {
|
|
194
|
-
return this.badgeAlign;
|
|
195
|
-
}
|
|
196
|
-
set align(align) {
|
|
197
|
-
this.badgeAlign = Object.assign(this.badgeAlign, align);
|
|
198
|
-
}
|
|
199
|
-
ngAfterViewInit() {
|
|
200
|
-
if (!this.badgeClasses.length) {
|
|
201
|
-
this.setBadgeClasses();
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
ngOnChanges() {
|
|
205
|
-
this.setBadgeClasses();
|
|
206
|
-
}
|
|
207
|
-
ngOnDestroy() {
|
|
208
|
-
if (this.dynamicRTLSubscription) {
|
|
209
|
-
this.dynamicRTLSubscription.unsubscribe();
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
alignClass() {
|
|
213
|
-
return `k-${this.badgeAlign.vertical}-${this.badgeAlign.horizontal}`;
|
|
214
|
-
}
|
|
215
|
-
positionClass() {
|
|
216
|
-
return `k-badge-${this.position}`;
|
|
217
|
-
}
|
|
218
|
-
sizeClass() {
|
|
219
|
-
if (this.size !== 'none') {
|
|
220
|
-
return SIZE_CLASSES$1[this.size];
|
|
221
|
-
}
|
|
222
|
-
return '';
|
|
223
|
-
}
|
|
224
|
-
roundedClass() {
|
|
225
|
-
if (this.rounded !== 'none') {
|
|
226
|
-
return ROUNDED_CLASSES[this.rounded];
|
|
227
|
-
}
|
|
228
|
-
return '';
|
|
229
|
-
}
|
|
230
|
-
themeColorClass() {
|
|
231
|
-
if (this.themeColor !== 'none' && this.fill !== 'none') {
|
|
232
|
-
return `k-badge-${this.fill}-${this.themeColor}`;
|
|
233
|
-
}
|
|
234
|
-
return '';
|
|
235
|
-
}
|
|
236
|
-
fillClass() {
|
|
237
|
-
if (this.fill !== 'none') {
|
|
238
|
-
return `k-badge-${this.fill}`;
|
|
239
|
-
}
|
|
240
|
-
return '';
|
|
241
|
-
}
|
|
242
|
-
setBadgeClasses() {
|
|
243
|
-
const element = this.element.nativeElement;
|
|
244
|
-
this.badgeClasses.forEach((className) => {
|
|
245
|
-
this.renderer.removeClass(element, className);
|
|
246
|
-
});
|
|
247
|
-
this.badgeClasses = [
|
|
248
|
-
this.themeColorClass(),
|
|
249
|
-
this.fillClass(),
|
|
250
|
-
this.sizeClass(),
|
|
251
|
-
this.roundedClass(),
|
|
252
|
-
this.alignClass(),
|
|
253
|
-
this.positionClass()
|
|
254
|
-
];
|
|
255
|
-
this.badgeClasses.forEach((className) => {
|
|
256
|
-
if (className) {
|
|
257
|
-
this.renderer.addClass(element, className);
|
|
258
|
-
}
|
|
259
|
-
});
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BadgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
263
|
-
BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BadgeComponent, isStandalone: true, selector: "kendo-badge", inputs: { align: "align", size: "size", fill: "fill", themeColor: "themeColor", rounded: "rounded", position: "position", cutoutBorder: "cutoutBorder" }, host: { properties: { "class.k-badge": "this.hostClass", "class.k-badge-border-cutout": "this.cutoutBorderClass", "attr.dir": "this.direction" } }, providers: [
|
|
264
|
-
LocalizationService,
|
|
265
|
-
{
|
|
266
|
-
provide: L10N_PREFIX,
|
|
267
|
-
useValue: 'kendo.badge.component'
|
|
268
|
-
}
|
|
269
|
-
], usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
271
|
-
type: Component,
|
|
272
|
-
args: [{
|
|
273
|
-
selector: 'kendo-badge',
|
|
274
|
-
providers: [
|
|
275
|
-
LocalizationService,
|
|
276
|
-
{
|
|
277
|
-
provide: L10N_PREFIX,
|
|
278
|
-
useValue: 'kendo.badge.component'
|
|
279
|
-
}
|
|
280
|
-
],
|
|
281
|
-
template: `<ng-content></ng-content>`,
|
|
282
|
-
standalone: true
|
|
283
|
-
}]
|
|
284
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
|
|
285
|
-
type: HostBinding,
|
|
286
|
-
args: ['class.k-badge']
|
|
287
|
-
}], cutoutBorderClass: [{
|
|
288
|
-
type: HostBinding,
|
|
289
|
-
args: ['class.k-badge-border-cutout']
|
|
290
|
-
}], direction: [{
|
|
291
|
-
type: HostBinding,
|
|
292
|
-
args: ['attr.dir']
|
|
293
|
-
}], align: [{
|
|
294
|
-
type: Input
|
|
295
|
-
}], size: [{
|
|
296
|
-
type: Input
|
|
297
|
-
}], fill: [{
|
|
298
|
-
type: Input
|
|
299
|
-
}], themeColor: [{
|
|
300
|
-
type: Input
|
|
301
|
-
}], rounded: [{
|
|
302
|
-
type: Input
|
|
303
|
-
}], position: [{
|
|
304
|
-
type: Input
|
|
305
|
-
}], cutoutBorder: [{
|
|
306
|
-
type: Input
|
|
307
|
-
}] } });
|
|
308
|
-
|
|
309
|
-
const SIZE_CLASSES = {
|
|
310
|
-
'small': 'k-loader-sm',
|
|
311
|
-
'medium': 'k-loader-md',
|
|
312
|
-
'large': 'k-loader-lg'
|
|
313
|
-
};
|
|
314
|
-
const SEGMENT_COUNT = {
|
|
315
|
-
'pulsing': 2,
|
|
316
|
-
'infinite-spinner': 3,
|
|
317
|
-
'converging-spinner': 4
|
|
318
|
-
};
|
|
319
|
-
const TYPE_CLASSES = {
|
|
320
|
-
'pulsing': 'k-loader-pulsing-2',
|
|
321
|
-
'infinite-spinner': 'k-loader-spinner-3',
|
|
322
|
-
'converging-spinner': 'k-loader-spinner-4'
|
|
323
|
-
};
|
|
324
|
-
/**
|
|
325
|
-
* Represents the [Kendo UI Loader component for Angular]({% slug overview_loader %}).
|
|
326
|
-
* Displays a Loader that represents an indeterminate wait time.
|
|
327
|
-
*/
|
|
328
|
-
class LoaderComponent {
|
|
329
|
-
constructor(element, renderer) {
|
|
330
|
-
this.element = element;
|
|
331
|
-
this.renderer = renderer;
|
|
332
|
-
this.hostClass = true;
|
|
333
|
-
this._type = 'pulsing';
|
|
334
|
-
this._themeColor = 'primary';
|
|
335
|
-
this._size = 'medium';
|
|
336
|
-
this.loader = this.element.nativeElement;
|
|
337
|
-
validatePackage(packageMetadata);
|
|
338
|
-
}
|
|
339
|
-
/**
|
|
340
|
-
* Specifies the Loader animation type.
|
|
341
|
-
*
|
|
342
|
-
* The possible values are:
|
|
343
|
-
* - `pulsing` (default)
|
|
344
|
-
* - `infinite-spinner`
|
|
345
|
-
* - `converging-spinner`
|
|
346
|
-
*/
|
|
347
|
-
set type(type) {
|
|
348
|
-
this.renderer.removeClass(this.loader, TYPE_CLASSES[this.type]);
|
|
349
|
-
this.renderer.addClass(this.loader, TYPE_CLASSES[type]);
|
|
350
|
-
this._type = type;
|
|
351
|
-
}
|
|
352
|
-
get type() {
|
|
353
|
-
return this._type;
|
|
354
|
-
}
|
|
355
|
-
/**
|
|
356
|
-
* Specifies the theme color of the Loader.
|
|
357
|
-
*
|
|
358
|
-
* The possible values are:
|
|
359
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
360
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
361
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
362
|
-
* * `info`—Applies coloring based on info theme color.
|
|
363
|
-
* * `success`— Applies coloring based on success theme color.
|
|
364
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
365
|
-
* * `error`— Applies coloring based on error theme color.
|
|
366
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
367
|
-
* * `light`— Applies coloring based on light theme color.
|
|
368
|
-
* * `inverse`— Applies coloring based on inverted theme color.
|
|
369
|
-
*
|
|
370
|
-
*/
|
|
371
|
-
set themeColor(themeColor) {
|
|
372
|
-
this.renderer.removeClass(this.loader, `k-loader-${this.themeColor}`);
|
|
373
|
-
this.renderer.addClass(this.loader, `k-loader-${themeColor}`);
|
|
374
|
-
this._themeColor = themeColor;
|
|
375
|
-
}
|
|
376
|
-
get themeColor() {
|
|
377
|
-
return this._themeColor;
|
|
378
|
-
}
|
|
379
|
-
/**
|
|
380
|
-
* Specifies the size of the Loader.
|
|
381
|
-
*
|
|
382
|
-
* The possible values are:
|
|
383
|
-
* * `small`
|
|
384
|
-
* * `medium` (Default)
|
|
385
|
-
* * `large`
|
|
386
|
-
*
|
|
387
|
-
*/
|
|
388
|
-
set size(size) {
|
|
389
|
-
this.renderer.removeClass(this.loader, SIZE_CLASSES[this.size]);
|
|
390
|
-
this.renderer.addClass(this.loader, SIZE_CLASSES[size]);
|
|
391
|
-
this._size = size;
|
|
392
|
-
}
|
|
393
|
-
get size() {
|
|
394
|
-
return this._size;
|
|
395
|
-
}
|
|
396
|
-
ngAfterViewInit() {
|
|
397
|
-
this.setLoaderClasses();
|
|
398
|
-
}
|
|
399
|
-
/**
|
|
400
|
-
* @hidden
|
|
401
|
-
*/
|
|
402
|
-
get segmentCount() {
|
|
403
|
-
return new Array(SEGMENT_COUNT[this.type]);
|
|
404
|
-
}
|
|
405
|
-
setLoaderClasses() {
|
|
406
|
-
this.renderer.addClass(this.loader, TYPE_CLASSES[this.type]);
|
|
407
|
-
this.renderer.addClass(this.loader, `k-loader-${this.themeColor}`);
|
|
408
|
-
this.renderer.addClass(this.loader, SIZE_CLASSES[this.size]);
|
|
409
|
-
}
|
|
410
|
-
}
|
|
411
|
-
LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
412
|
-
LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LoaderComponent, isStandalone: true, selector: "kendo-loader", inputs: { type: "type", themeColor: "themeColor", size: "size" }, host: { properties: { "class.k-loader": "this.hostClass" } }, ngImport: i0, template: `
|
|
413
|
-
<div class="k-loader-canvas">
|
|
414
|
-
<span *ngFor="let segment of segmentCount" class="k-loader-segment"></span>
|
|
415
|
-
</div>
|
|
416
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
417
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
418
|
-
type: Component,
|
|
419
|
-
args: [{
|
|
420
|
-
selector: 'kendo-loader',
|
|
421
|
-
template: `
|
|
422
|
-
<div class="k-loader-canvas">
|
|
423
|
-
<span *ngFor="let segment of segmentCount" class="k-loader-segment"></span>
|
|
424
|
-
</div>
|
|
425
|
-
`,
|
|
426
|
-
standalone: true,
|
|
427
|
-
imports: [NgFor]
|
|
428
|
-
}]
|
|
429
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
|
|
430
|
-
type: HostBinding,
|
|
431
|
-
args: ['class.k-loader']
|
|
432
|
-
}], type: [{
|
|
433
|
-
type: Input
|
|
434
|
-
}], themeColor: [{
|
|
435
|
-
type: Input
|
|
436
|
-
}], size: [{
|
|
437
|
-
type: Input
|
|
438
|
-
}] } });
|
|
439
|
-
|
|
440
|
-
/**
|
|
441
|
-
* @hidden
|
|
442
|
-
*/
|
|
443
|
-
const validAnimations = [false, 'pulse', 'wave'];
|
|
444
|
-
/**
|
|
445
|
-
* @hidden
|
|
446
|
-
*/
|
|
447
|
-
const validShapes = ['circle', 'rectangle', 'text'];
|
|
448
|
-
|
|
449
|
-
/**
|
|
450
|
-
* @hidden
|
|
451
|
-
*/
|
|
452
|
-
const ANIMATION_CLASSES = {
|
|
453
|
-
pulse: 'k-skeleton-pulse',
|
|
454
|
-
wave: 'k-skeleton-wave'
|
|
455
|
-
};
|
|
456
|
-
/**
|
|
457
|
-
* @hidden
|
|
458
|
-
*/
|
|
459
|
-
const SHAPE_CLASSES = {
|
|
460
|
-
rectangle: 'k-skeleton-rect',
|
|
461
|
-
circle: 'k-skeleton-circle',
|
|
462
|
-
text: 'k-skeleton-text'
|
|
463
|
-
};
|
|
464
|
-
/**
|
|
465
|
-
* @hidden
|
|
466
|
-
*/
|
|
467
|
-
const skeletonShapeError = (input) => `"${input}" is not a valid kendo-skeleton shape. Valid shapes are: ${validShapes.map(s => `"${s}"`).join(" | ")}.`;
|
|
468
|
-
/**
|
|
469
|
-
* @hidden
|
|
470
|
-
*/
|
|
471
|
-
const skeletonAnimationError = (input) => `"${input}" is not a valid kendo-skeleton animation. Valid values are: 'pulse' | 'wave' | false.`;
|
|
472
|
-
|
|
473
|
-
/**
|
|
474
|
-
* Represents the [Kendo UI Skeleton component for Angular]({% slug overview_skeleton %}).
|
|
475
|
-
* Displays a Skeleton that represents loading content.
|
|
476
|
-
*/
|
|
477
|
-
class SkeletonComponent {
|
|
478
|
-
constructor(renderer, hostElement) {
|
|
479
|
-
this.renderer = renderer;
|
|
480
|
-
this.hostElement = hostElement;
|
|
481
|
-
this._animation = "pulse";
|
|
482
|
-
this._shape = 'text';
|
|
483
|
-
}
|
|
484
|
-
/**
|
|
485
|
-
* Specifies the animation settings of the Skeleton.
|
|
486
|
-
*
|
|
487
|
-
* The possible values are:
|
|
488
|
-
* * `pulse` — (Default) Shows a pulse animation effect.
|
|
489
|
-
* * `wave` — Shows a wave animation effect.
|
|
490
|
-
* * `false` — Disables the animation. Note that it's a boolean, not a string.
|
|
491
|
-
*/
|
|
492
|
-
set animation(animation) {
|
|
493
|
-
if (isDevMode() && validAnimations.indexOf(animation) === -1) {
|
|
494
|
-
throw new Error(skeletonAnimationError(animation));
|
|
495
|
-
}
|
|
496
|
-
if (this.animation) {
|
|
497
|
-
this.renderer.removeClass(this.hostElement.nativeElement, ANIMATION_CLASSES[this.animation]);
|
|
498
|
-
}
|
|
499
|
-
if (animation) {
|
|
500
|
-
this.renderer.addClass(this.hostElement.nativeElement, ANIMATION_CLASSES[animation]);
|
|
501
|
-
}
|
|
502
|
-
this._animation = animation;
|
|
503
|
-
}
|
|
504
|
-
get animation() {
|
|
505
|
-
return this._animation;
|
|
506
|
-
}
|
|
507
|
-
/**
|
|
508
|
-
* Specifies the shape of the Skeleton.
|
|
509
|
-
*
|
|
510
|
-
* The possible values are:
|
|
511
|
-
* * `text` — (Default) Renders a line Skeleton.
|
|
512
|
-
* * `circle` — Renders a circular Skeleton.
|
|
513
|
-
* * `rectangle` — Renders a rectangular Skeleton.
|
|
514
|
-
*/
|
|
515
|
-
set shape(shape) {
|
|
516
|
-
if (isDevMode() && validShapes.indexOf(shape) === -1) {
|
|
517
|
-
throw new Error(skeletonShapeError(shape));
|
|
518
|
-
}
|
|
519
|
-
this.renderer.removeClass(this.hostElement.nativeElement, SHAPE_CLASSES[this.shape]);
|
|
520
|
-
this.renderer.addClass(this.hostElement.nativeElement, SHAPE_CLASSES[shape]);
|
|
521
|
-
this._shape = shape;
|
|
522
|
-
}
|
|
523
|
-
get shape() {
|
|
524
|
-
return this._shape;
|
|
525
|
-
}
|
|
526
|
-
/**
|
|
527
|
-
* Specifies the width of the Skeleton component.
|
|
528
|
-
* * Required for all Skeleton shapes.
|
|
529
|
-
* * Can be set to a string, e.g. '100px', '3em', '50%'.
|
|
530
|
-
* * Can be set to an integer number (will be read as width in pixels).
|
|
531
|
-
*/
|
|
532
|
-
set width(width) {
|
|
533
|
-
this.renderer.setStyle(this.hostElement.nativeElement, "width", typeof width === "string" ? width : width + "px");
|
|
534
|
-
}
|
|
535
|
-
/**
|
|
536
|
-
* Specifies the height of the Skeleton component.
|
|
537
|
-
* * Required for 'circle' and 'rectangle' shapes.
|
|
538
|
-
* * Not required for 'text', as it is derived from the current CSS font-size.
|
|
539
|
-
* * Can be set to a string, e.g. '100px', '3em', '50%'.
|
|
540
|
-
* * Can be set to an integer number (will be read as height in pixels).
|
|
541
|
-
*/
|
|
542
|
-
set height(height) {
|
|
543
|
-
this.renderer.setStyle(this.hostElement.nativeElement, "height", typeof height === "string" ? height : height + "px");
|
|
544
|
-
}
|
|
545
|
-
ngAfterViewInit() {
|
|
546
|
-
const hostElement = this.hostElement.nativeElement;
|
|
547
|
-
hostElement.classList.add("k-skeleton", SHAPE_CLASSES[this.shape]);
|
|
548
|
-
if (this.animation) {
|
|
549
|
-
hostElement.classList.add(ANIMATION_CLASSES[this.animation]);
|
|
550
|
-
}
|
|
551
|
-
}
|
|
552
|
-
}
|
|
553
|
-
SkeletonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
554
|
-
SkeletonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SkeletonComponent, isStandalone: true, selector: "kendo-skeleton", inputs: { animation: "animation", shape: "shape", width: "width", height: "height" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
556
|
-
type: Component,
|
|
557
|
-
args: [{
|
|
558
|
-
selector: "kendo-skeleton",
|
|
559
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
560
|
-
template: ``,
|
|
561
|
-
standalone: true
|
|
562
|
-
}]
|
|
563
|
-
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { animation: [{
|
|
564
|
-
type: Input
|
|
565
|
-
}], shape: [{
|
|
566
|
-
type: Input
|
|
567
|
-
}], width: [{
|
|
568
|
-
type: Input
|
|
569
|
-
}], height: [{
|
|
570
|
-
type: Input
|
|
571
|
-
}] } });
|
|
572
|
-
|
|
573
|
-
/**
|
|
574
|
-
* Utility array that contains all `Badge` related components and directives
|
|
575
|
-
*/
|
|
576
|
-
const KENDO_BADGE = [
|
|
577
|
-
BadgeComponent
|
|
578
|
-
];
|
|
579
|
-
/**
|
|
580
|
-
* Utility array that contains all `BadgeContainer` related components and directives
|
|
581
|
-
*/
|
|
582
|
-
const KENDO_BADGECONTAINER = [
|
|
583
|
-
BadgeComponent,
|
|
584
|
-
BadgeContainerComponent
|
|
585
|
-
];
|
|
586
|
-
/**
|
|
587
|
-
* Utility array that contains all `Loader` related components and directives
|
|
588
|
-
*/
|
|
589
|
-
const KENDO_LOADER = [
|
|
590
|
-
LoaderComponent
|
|
591
|
-
];
|
|
592
|
-
/**
|
|
593
|
-
* Utility array that contains all `Skeleton` related components and directives
|
|
594
|
-
*/
|
|
595
|
-
const KENDO_SKELETON = [
|
|
596
|
-
SkeletonComponent
|
|
597
|
-
];
|
|
598
|
-
/**
|
|
599
|
-
* Utility array that contains all `@progress/kendo-angular-indicators` related components and directives
|
|
600
|
-
*/
|
|
601
|
-
const KENDO_INDICATORS = [
|
|
602
|
-
...KENDO_BADGECONTAINER,
|
|
603
|
-
...KENDO_LOADER,
|
|
604
|
-
...KENDO_SKELETON
|
|
605
|
-
];
|
|
606
|
-
|
|
607
|
-
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
608
|
-
/**
|
|
609
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
610
|
-
* definition for the Badge and BadgeContainer components.
|
|
611
|
-
*/
|
|
612
|
-
class BadgeModule {
|
|
613
|
-
}
|
|
614
|
-
BadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
615
|
-
BadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BadgeModule, imports: [BadgeComponent, BadgeContainerComponent], exports: [BadgeComponent, BadgeContainerComponent] });
|
|
616
|
-
BadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BadgeModule, imports: [KENDO_BADGECONTAINER] });
|
|
617
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BadgeModule, decorators: [{
|
|
618
|
-
type: NgModule,
|
|
619
|
-
args: [{
|
|
620
|
-
exports: [...KENDO_BADGECONTAINER],
|
|
621
|
-
imports: [...KENDO_BADGECONTAINER]
|
|
622
|
-
}]
|
|
623
|
-
}] });
|
|
624
|
-
|
|
625
|
-
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
626
|
-
/**
|
|
627
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
628
|
-
* definition for the Loader component.
|
|
629
|
-
*/
|
|
630
|
-
class LoaderModule {
|
|
631
|
-
}
|
|
632
|
-
LoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
633
|
-
LoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: LoaderModule, imports: [LoaderComponent], exports: [LoaderComponent] });
|
|
634
|
-
LoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoaderModule, imports: [KENDO_LOADER] });
|
|
635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoaderModule, decorators: [{
|
|
636
|
-
type: NgModule,
|
|
637
|
-
args: [{
|
|
638
|
-
exports: [...KENDO_LOADER],
|
|
639
|
-
imports: [...KENDO_LOADER]
|
|
640
|
-
}]
|
|
641
|
-
}] });
|
|
642
|
-
|
|
643
|
-
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
644
|
-
/**
|
|
645
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
646
|
-
* definition for the Skeleton component.
|
|
647
|
-
*/
|
|
648
|
-
class SkeletonModule {
|
|
649
|
-
}
|
|
650
|
-
SkeletonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
651
|
-
SkeletonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkeletonModule, imports: [SkeletonComponent], exports: [SkeletonComponent] });
|
|
652
|
-
SkeletonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonModule, imports: [KENDO_SKELETON] });
|
|
653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkeletonModule, decorators: [{
|
|
654
|
-
type: NgModule,
|
|
655
|
-
args: [{
|
|
656
|
-
exports: [...KENDO_SKELETON],
|
|
657
|
-
imports: [...KENDO_SKELETON]
|
|
658
|
-
}]
|
|
659
|
-
}] });
|
|
660
|
-
|
|
661
|
-
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
662
|
-
/**
|
|
663
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
664
|
-
* definition for the Indicators components.
|
|
665
|
-
*
|
|
666
|
-
* @example
|
|
667
|
-
*
|
|
668
|
-
* ```ts-no-run
|
|
669
|
-
* // Import the Indicators module
|
|
670
|
-
* import { IndicatorsModule } from '@progress/kendo-angular-indicators';
|
|
671
|
-
*
|
|
672
|
-
* // The browser platform with a compiler
|
|
673
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
674
|
-
*
|
|
675
|
-
* import { NgModule } from '@angular/core';
|
|
676
|
-
*
|
|
677
|
-
* // Import the app component
|
|
678
|
-
* import { AppComponent } from './app.component';
|
|
679
|
-
*
|
|
680
|
-
* // Define the app module
|
|
681
|
-
* _@NgModule({
|
|
682
|
-
* declarations: [AppComponent], // declare app component
|
|
683
|
-
* imports: [BrowserModule, IndicatorsModule], // import Indicators module
|
|
684
|
-
* bootstrap: [AppComponent]
|
|
685
|
-
* })
|
|
686
|
-
* export class AppModule {}
|
|
687
|
-
*
|
|
688
|
-
* // Compile and launch the module
|
|
689
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
690
|
-
*
|
|
691
|
-
* ```
|
|
692
|
-
*/
|
|
693
|
-
class IndicatorsModule {
|
|
694
|
-
}
|
|
695
|
-
IndicatorsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IndicatorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
696
|
-
IndicatorsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: IndicatorsModule, imports: [BadgeComponent, BadgeContainerComponent, LoaderComponent, SkeletonComponent], exports: [BadgeComponent, BadgeContainerComponent, LoaderComponent, SkeletonComponent] });
|
|
697
|
-
IndicatorsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IndicatorsModule, imports: [KENDO_INDICATORS] });
|
|
698
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IndicatorsModule, decorators: [{
|
|
699
|
-
type: NgModule,
|
|
700
|
-
args: [{
|
|
701
|
-
imports: [...KENDO_INDICATORS],
|
|
702
|
-
exports: [...KENDO_INDICATORS]
|
|
703
|
-
}]
|
|
704
|
-
}] });
|
|
705
|
-
|
|
706
|
-
/**
|
|
707
|
-
* Generated bundle index. Do not edit.
|
|
708
|
-
*/
|
|
709
|
-
|
|
710
|
-
export { BadgeComponent, BadgeContainerComponent, BadgeModule, IndicatorsModule, KENDO_BADGE, KENDO_BADGECONTAINER, KENDO_INDICATORS, KENDO_LOADER, KENDO_SKELETON, LoaderComponent, LoaderModule, SkeletonComponent, SkeletonModule };
|
|
711
|
-
|