@progress/kendo-angular-indicators 1.0.1-dev.202104070907 → 1.1.1-dev.202111020845
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/dist/cdn/js/kendo-angular-indicators.js +3 -3
- package/dist/cdn/main.js +2 -2
- package/dist/es/badge/badge-container.component.js +1 -1
- package/dist/es/badge/badge.component.js +1 -1
- package/dist/es/badge/models/align.js +1 -1
- package/dist/es/badge/models/fill.js +1 -1
- package/dist/es/badge/models/position.js +1 -1
- package/dist/es/badge/models/shape.js +1 -1
- package/dist/es/badge/models/size.js +1 -1
- package/dist/es/badge/models/theme-color.js +1 -1
- package/dist/es/badge.module.js +1 -1
- package/dist/es/index.js +1 -1
- package/dist/es/indicators.module.js +4 -2
- package/dist/es/loader/loader.component.js +1 -1
- package/dist/es/loader/models/size.js +1 -1
- package/dist/es/loader/models/theme-color.js +1 -1
- package/dist/es/loader/models/type.js +1 -1
- package/dist/es/loader.module.js +1 -1
- package/dist/es/main.js +3 -1
- package/dist/es/package-metadata.js +2 -2
- package/dist/es/skeleton/constants.js +28 -0
- package/dist/es/skeleton/models.js +12 -0
- package/dist/es/skeleton/skeleton.component.js +134 -0
- package/dist/es/skeleton.module.js +25 -0
- package/dist/es2015/badge/badge-container.component.d.ts +1 -1
- package/dist/es2015/badge/badge-container.component.js +1 -1
- package/dist/es2015/badge/badge.component.d.ts +1 -1
- package/dist/es2015/badge/badge.component.js +1 -1
- package/dist/es2015/badge/models/align.d.ts +1 -1
- package/dist/es2015/badge/models/align.js +1 -1
- package/dist/es2015/badge/models/fill.d.ts +1 -1
- package/dist/es2015/badge/models/fill.js +1 -1
- package/dist/es2015/badge/models/position.d.ts +1 -1
- package/dist/es2015/badge/models/position.js +1 -1
- package/dist/es2015/badge/models/shape.d.ts +1 -1
- package/dist/es2015/badge/models/shape.js +1 -1
- package/dist/es2015/badge/models/size.d.ts +1 -1
- package/dist/es2015/badge/models/size.js +1 -1
- package/dist/es2015/badge/models/theme-color.d.ts +1 -1
- package/dist/es2015/badge/models/theme-color.js +1 -1
- package/dist/es2015/badge.module.d.ts +1 -1
- package/dist/es2015/badge.module.js +1 -1
- package/dist/es2015/index.d.ts +1 -1
- package/dist/es2015/index.js +1 -1
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/indicators.module.d.ts +1 -1
- package/dist/es2015/indicators.module.js +4 -2
- package/dist/es2015/loader/loader.component.d.ts +1 -1
- package/dist/es2015/loader/loader.component.js +1 -1
- package/dist/es2015/loader/models/size.d.ts +1 -1
- package/dist/es2015/loader/models/size.js +1 -1
- package/dist/es2015/loader/models/theme-color.d.ts +1 -1
- package/dist/es2015/loader/models/theme-color.js +1 -1
- package/dist/es2015/loader/models/type.d.ts +1 -1
- package/dist/es2015/loader/models/type.js +1 -1
- package/dist/es2015/loader.module.d.ts +1 -1
- package/dist/es2015/loader.module.js +1 -1
- package/dist/es2015/main.d.ts +4 -1
- package/dist/es2015/main.js +3 -1
- package/dist/es2015/package-metadata.d.ts +1 -1
- package/dist/es2015/package-metadata.js +2 -2
- package/dist/es2015/skeleton/constants.d.ts +27 -0
- package/dist/es2015/skeleton/constants.js +28 -0
- package/dist/es2015/skeleton/models.d.ts +30 -0
- package/dist/es2015/skeleton/models.js +12 -0
- package/dist/es2015/skeleton/skeleton.component.d.ts +51 -0
- package/dist/es2015/skeleton/skeleton.component.js +117 -0
- package/dist/es2015/skeleton.module.d.ts +10 -0
- package/dist/es2015/skeleton.module.js +22 -0
- package/dist/fesm2015/index.js +162 -5
- package/dist/fesm5/index.js +182 -5
- package/dist/npm/badge/badge-container.component.js +1 -1
- package/dist/npm/badge/badge.component.js +1 -1
- package/dist/npm/badge/models/align.js +1 -1
- package/dist/npm/badge/models/fill.js +1 -1
- package/dist/npm/badge/models/position.js +1 -1
- package/dist/npm/badge/models/shape.js +1 -1
- package/dist/npm/badge/models/size.js +1 -1
- package/dist/npm/badge/models/theme-color.js +1 -1
- package/dist/npm/badge.module.js +1 -1
- package/dist/npm/index.js +1 -1
- package/dist/npm/indicators.module.js +4 -2
- package/dist/npm/loader/loader.component.js +1 -1
- package/dist/npm/loader/models/size.js +1 -1
- package/dist/npm/loader/models/theme-color.js +1 -1
- package/dist/npm/loader/models/type.js +1 -1
- package/dist/npm/loader.module.js +1 -1
- package/dist/npm/main.js +5 -1
- package/dist/npm/package-metadata.js +2 -2
- package/dist/npm/skeleton/constants.js +30 -0
- package/dist/npm/skeleton/models.js +14 -0
- package/dist/npm/skeleton/skeleton.component.js +136 -0
- package/dist/npm/skeleton.module.js +27 -0
- package/dist/systemjs/kendo-angular-indicators.js +2 -2
- package/package.json +4 -4
- package/schematics/ngAdd/schema.json +1 -1
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2021 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 tslib_1 from "tslib";
|
|
6
|
+
import { Component, ChangeDetectionStrategy, Input, Renderer2, ElementRef, isDevMode } from "@angular/core";
|
|
7
|
+
import { ANIMATION_CLASSES, SHAPE_CLASSES, skeletonAnimationError, skeletonShapeError } from "./constants";
|
|
8
|
+
import { validAnimations, validShapes } from "./models";
|
|
9
|
+
/**
|
|
10
|
+
* Represents the [Kendo UI Skeleton component for Angular]({% slug overview_skeleton %}).
|
|
11
|
+
* Displays a Skeleton that represents loading content.
|
|
12
|
+
*/
|
|
13
|
+
let SkeletonComponent = class SkeletonComponent {
|
|
14
|
+
constructor(renderer, hostElement) {
|
|
15
|
+
this.renderer = renderer;
|
|
16
|
+
this.hostElement = hostElement;
|
|
17
|
+
this._animation = "pulse";
|
|
18
|
+
this._shape = 'text';
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Specifies the animation settings of the Skeleton.
|
|
22
|
+
*
|
|
23
|
+
* The possible values are:
|
|
24
|
+
* * `pulse` — (Default) Shows a pulse animation effect.
|
|
25
|
+
* * `wave` — Shows a wave animation effect.
|
|
26
|
+
* * `false` — Disables the animation. Note that it's a boolean, not a string.
|
|
27
|
+
*/
|
|
28
|
+
set animation(animation) {
|
|
29
|
+
if (isDevMode() && validAnimations.indexOf(animation) === -1) {
|
|
30
|
+
throw new Error(skeletonAnimationError(animation));
|
|
31
|
+
}
|
|
32
|
+
if (this.animation) {
|
|
33
|
+
this.renderer.removeClass(this.hostElement.nativeElement, ANIMATION_CLASSES[this.animation]);
|
|
34
|
+
}
|
|
35
|
+
if (animation) {
|
|
36
|
+
this.renderer.addClass(this.hostElement.nativeElement, ANIMATION_CLASSES[animation]);
|
|
37
|
+
}
|
|
38
|
+
this._animation = animation;
|
|
39
|
+
}
|
|
40
|
+
get animation() {
|
|
41
|
+
return this._animation;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Specifies the shape of the Skeleton.
|
|
45
|
+
*
|
|
46
|
+
* The possible values are:
|
|
47
|
+
* * `text` — (Default) Renders a line Skeleton.
|
|
48
|
+
* * `circle` — Renders a circular Skeleton.
|
|
49
|
+
* * `rectangle` — Renders a rectangular Skeleton.
|
|
50
|
+
*/
|
|
51
|
+
set shape(shape) {
|
|
52
|
+
if (isDevMode() && validShapes.indexOf(shape) === -1) {
|
|
53
|
+
throw new Error(skeletonShapeError(shape));
|
|
54
|
+
}
|
|
55
|
+
this.renderer.removeClass(this.hostElement.nativeElement, SHAPE_CLASSES[this.shape]);
|
|
56
|
+
this.renderer.addClass(this.hostElement.nativeElement, SHAPE_CLASSES[shape]);
|
|
57
|
+
this._shape = shape;
|
|
58
|
+
}
|
|
59
|
+
get shape() {
|
|
60
|
+
return this._shape;
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Specifies the width of the Skeleton component.
|
|
64
|
+
* * Required for all Skeleton shapes.
|
|
65
|
+
* * Can be set to a string, e.g. '100px', '3em', '50%'.
|
|
66
|
+
* * Can be set to an integer number (will be read as width in pixels).
|
|
67
|
+
*/
|
|
68
|
+
set width(width) {
|
|
69
|
+
this.renderer.setStyle(this.hostElement.nativeElement, "width", typeof width === "string" ? width : width + "px");
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Specifies the height of the Skeleton component.
|
|
73
|
+
* * Required for 'circle' and 'rectangle' shapes.
|
|
74
|
+
* * Not required for 'text', as it is derived from the current CSS font-size.
|
|
75
|
+
* * Can be set to a string, e.g. '100px', '3em', '50%'.
|
|
76
|
+
* * Can be set to an integer number (will be read as height in pixels).
|
|
77
|
+
*/
|
|
78
|
+
set height(height) {
|
|
79
|
+
this.renderer.setStyle(this.hostElement.nativeElement, "height", typeof height === "string" ? height : height + "px");
|
|
80
|
+
}
|
|
81
|
+
ngAfterViewInit() {
|
|
82
|
+
const hostElement = this.hostElement.nativeElement;
|
|
83
|
+
hostElement.classList.add("k-skeleton", SHAPE_CLASSES[this.shape]);
|
|
84
|
+
if (this.animation) {
|
|
85
|
+
hostElement.classList.add(ANIMATION_CLASSES[this.animation]);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
tslib_1.__decorate([
|
|
90
|
+
Input(),
|
|
91
|
+
tslib_1.__metadata("design:type", Object),
|
|
92
|
+
tslib_1.__metadata("design:paramtypes", [Object])
|
|
93
|
+
], SkeletonComponent.prototype, "animation", null);
|
|
94
|
+
tslib_1.__decorate([
|
|
95
|
+
Input(),
|
|
96
|
+
tslib_1.__metadata("design:type", String),
|
|
97
|
+
tslib_1.__metadata("design:paramtypes", [String])
|
|
98
|
+
], SkeletonComponent.prototype, "shape", null);
|
|
99
|
+
tslib_1.__decorate([
|
|
100
|
+
Input(),
|
|
101
|
+
tslib_1.__metadata("design:type", Object),
|
|
102
|
+
tslib_1.__metadata("design:paramtypes", [Object])
|
|
103
|
+
], SkeletonComponent.prototype, "width", null);
|
|
104
|
+
tslib_1.__decorate([
|
|
105
|
+
Input(),
|
|
106
|
+
tslib_1.__metadata("design:type", Object),
|
|
107
|
+
tslib_1.__metadata("design:paramtypes", [Object])
|
|
108
|
+
], SkeletonComponent.prototype, "height", null);
|
|
109
|
+
SkeletonComponent = tslib_1.__decorate([
|
|
110
|
+
Component({
|
|
111
|
+
selector: "kendo-skeleton",
|
|
112
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
113
|
+
template: ``
|
|
114
|
+
}),
|
|
115
|
+
tslib_1.__metadata("design:paramtypes", [Renderer2, ElementRef])
|
|
116
|
+
], SkeletonComponent);
|
|
117
|
+
export { SkeletonComponent };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
7
|
+
* definition for the Skeleton component.
|
|
8
|
+
*/
|
|
9
|
+
export declare class SkeletonModule {
|
|
10
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2021 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 tslib_1 from "tslib";
|
|
6
|
+
import { CommonModule } from '@angular/common';
|
|
7
|
+
import { NgModule } from '@angular/core';
|
|
8
|
+
import { SkeletonComponent } from './skeleton/skeleton.component';
|
|
9
|
+
/**
|
|
10
|
+
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
11
|
+
* definition for the Skeleton component.
|
|
12
|
+
*/
|
|
13
|
+
let SkeletonModule = class SkeletonModule {
|
|
14
|
+
};
|
|
15
|
+
SkeletonModule = tslib_1.__decorate([
|
|
16
|
+
NgModule({
|
|
17
|
+
declarations: [SkeletonComponent],
|
|
18
|
+
exports: [SkeletonComponent],
|
|
19
|
+
imports: [CommonModule]
|
|
20
|
+
})
|
|
21
|
+
], SkeletonModule);
|
|
22
|
+
export { SkeletonModule };
|
package/dist/fesm2015/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { __decorate, __metadata } from 'tslib';
|
|
6
|
-
import { HostBinding, Input, Component, ElementRef, Renderer2, NgModule } from '@angular/core';
|
|
6
|
+
import { HostBinding, Input, Component, ElementRef, Renderer2, NgModule, isDevMode, ChangeDetectionStrategy } from '@angular/core';
|
|
7
7
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
9
9
|
import { CommonModule } from '@angular/common';
|
|
@@ -15,7 +15,7 @@ const packageMetadata = {
|
|
|
15
15
|
name: '@progress/kendo-angular-indicators',
|
|
16
16
|
productName: 'Kendo UI for Angular',
|
|
17
17
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
18
|
-
publishDate:
|
|
18
|
+
publishDate: 1635842729,
|
|
19
19
|
version: '',
|
|
20
20
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
21
21
|
};
|
|
@@ -433,6 +433,162 @@ LoaderModule = __decorate([
|
|
|
433
433
|
})
|
|
434
434
|
], LoaderModule);
|
|
435
435
|
|
|
436
|
+
/**
|
|
437
|
+
* @hidden
|
|
438
|
+
*/
|
|
439
|
+
const validAnimations = [false, 'pulse', 'wave'];
|
|
440
|
+
/**
|
|
441
|
+
* @hidden
|
|
442
|
+
*/
|
|
443
|
+
const validShapes = ['circle', 'rectangle', 'text'];
|
|
444
|
+
|
|
445
|
+
/**
|
|
446
|
+
* @hidden
|
|
447
|
+
*/
|
|
448
|
+
const ANIMATION_CLASSES = {
|
|
449
|
+
pulse: 'k-skeleton-pulse',
|
|
450
|
+
wave: 'k-skeleton-wave'
|
|
451
|
+
};
|
|
452
|
+
/**
|
|
453
|
+
* @hidden
|
|
454
|
+
*/
|
|
455
|
+
const SHAPE_CLASSES = {
|
|
456
|
+
rectangle: 'k-skeleton-rect',
|
|
457
|
+
circle: 'k-skeleton-circle',
|
|
458
|
+
text: 'k-skeleton-text'
|
|
459
|
+
};
|
|
460
|
+
/**
|
|
461
|
+
* @hidden
|
|
462
|
+
*/
|
|
463
|
+
const skeletonShapeError = (input) => `"${input}" is not a valid kendo-skeleton shape. Valid shapes are: ${validShapes.map(s => `"${s}"`).join(" | ")}.`;
|
|
464
|
+
/**
|
|
465
|
+
* @hidden
|
|
466
|
+
*/
|
|
467
|
+
const skeletonAnimationError = (input) => `"${input}" is not a valid kendo-skeleton animation. Valid values are: 'pulse' | 'wave' | false.`;
|
|
468
|
+
|
|
469
|
+
/**
|
|
470
|
+
* Represents the [Kendo UI Skeleton component for Angular]({% slug overview_skeleton %}).
|
|
471
|
+
* Displays a Skeleton that represents loading content.
|
|
472
|
+
*/
|
|
473
|
+
let SkeletonComponent = class SkeletonComponent {
|
|
474
|
+
constructor(renderer, hostElement) {
|
|
475
|
+
this.renderer = renderer;
|
|
476
|
+
this.hostElement = hostElement;
|
|
477
|
+
this._animation = "pulse";
|
|
478
|
+
this._shape = 'text';
|
|
479
|
+
}
|
|
480
|
+
/**
|
|
481
|
+
* Specifies the animation settings of the Skeleton.
|
|
482
|
+
*
|
|
483
|
+
* The possible values are:
|
|
484
|
+
* * `pulse` — (Default) Shows a pulse animation effect.
|
|
485
|
+
* * `wave` — Shows a wave animation effect.
|
|
486
|
+
* * `false` — Disables the animation. Note that it's a boolean, not a string.
|
|
487
|
+
*/
|
|
488
|
+
set animation(animation) {
|
|
489
|
+
if (isDevMode() && validAnimations.indexOf(animation) === -1) {
|
|
490
|
+
throw new Error(skeletonAnimationError(animation));
|
|
491
|
+
}
|
|
492
|
+
if (this.animation) {
|
|
493
|
+
this.renderer.removeClass(this.hostElement.nativeElement, ANIMATION_CLASSES[this.animation]);
|
|
494
|
+
}
|
|
495
|
+
if (animation) {
|
|
496
|
+
this.renderer.addClass(this.hostElement.nativeElement, ANIMATION_CLASSES[animation]);
|
|
497
|
+
}
|
|
498
|
+
this._animation = animation;
|
|
499
|
+
}
|
|
500
|
+
get animation() {
|
|
501
|
+
return this._animation;
|
|
502
|
+
}
|
|
503
|
+
/**
|
|
504
|
+
* Specifies the shape of the Skeleton.
|
|
505
|
+
*
|
|
506
|
+
* The possible values are:
|
|
507
|
+
* * `text` — (Default) Renders a line Skeleton.
|
|
508
|
+
* * `circle` — Renders a circular Skeleton.
|
|
509
|
+
* * `rectangle` — Renders a rectangular Skeleton.
|
|
510
|
+
*/
|
|
511
|
+
set shape(shape) {
|
|
512
|
+
if (isDevMode() && validShapes.indexOf(shape) === -1) {
|
|
513
|
+
throw new Error(skeletonShapeError(shape));
|
|
514
|
+
}
|
|
515
|
+
this.renderer.removeClass(this.hostElement.nativeElement, SHAPE_CLASSES[this.shape]);
|
|
516
|
+
this.renderer.addClass(this.hostElement.nativeElement, SHAPE_CLASSES[shape]);
|
|
517
|
+
this._shape = shape;
|
|
518
|
+
}
|
|
519
|
+
get shape() {
|
|
520
|
+
return this._shape;
|
|
521
|
+
}
|
|
522
|
+
/**
|
|
523
|
+
* Specifies the width of the Skeleton component.
|
|
524
|
+
* * Required for all Skeleton shapes.
|
|
525
|
+
* * Can be set to a string, e.g. '100px', '3em', '50%'.
|
|
526
|
+
* * Can be set to an integer number (will be read as width in pixels).
|
|
527
|
+
*/
|
|
528
|
+
set width(width) {
|
|
529
|
+
this.renderer.setStyle(this.hostElement.nativeElement, "width", typeof width === "string" ? width : width + "px");
|
|
530
|
+
}
|
|
531
|
+
/**
|
|
532
|
+
* Specifies the height of the Skeleton component.
|
|
533
|
+
* * Required for 'circle' and 'rectangle' shapes.
|
|
534
|
+
* * Not required for 'text', as it is derived from the current CSS font-size.
|
|
535
|
+
* * Can be set to a string, e.g. '100px', '3em', '50%'.
|
|
536
|
+
* * Can be set to an integer number (will be read as height in pixels).
|
|
537
|
+
*/
|
|
538
|
+
set height(height) {
|
|
539
|
+
this.renderer.setStyle(this.hostElement.nativeElement, "height", typeof height === "string" ? height : height + "px");
|
|
540
|
+
}
|
|
541
|
+
ngAfterViewInit() {
|
|
542
|
+
const hostElement = this.hostElement.nativeElement;
|
|
543
|
+
hostElement.classList.add("k-skeleton", SHAPE_CLASSES[this.shape]);
|
|
544
|
+
if (this.animation) {
|
|
545
|
+
hostElement.classList.add(ANIMATION_CLASSES[this.animation]);
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
};
|
|
549
|
+
__decorate([
|
|
550
|
+
Input(),
|
|
551
|
+
__metadata("design:type", Object),
|
|
552
|
+
__metadata("design:paramtypes", [Object])
|
|
553
|
+
], SkeletonComponent.prototype, "animation", null);
|
|
554
|
+
__decorate([
|
|
555
|
+
Input(),
|
|
556
|
+
__metadata("design:type", String),
|
|
557
|
+
__metadata("design:paramtypes", [String])
|
|
558
|
+
], SkeletonComponent.prototype, "shape", null);
|
|
559
|
+
__decorate([
|
|
560
|
+
Input(),
|
|
561
|
+
__metadata("design:type", Object),
|
|
562
|
+
__metadata("design:paramtypes", [Object])
|
|
563
|
+
], SkeletonComponent.prototype, "width", null);
|
|
564
|
+
__decorate([
|
|
565
|
+
Input(),
|
|
566
|
+
__metadata("design:type", Object),
|
|
567
|
+
__metadata("design:paramtypes", [Object])
|
|
568
|
+
], SkeletonComponent.prototype, "height", null);
|
|
569
|
+
SkeletonComponent = __decorate([
|
|
570
|
+
Component({
|
|
571
|
+
selector: "kendo-skeleton",
|
|
572
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
573
|
+
template: ``
|
|
574
|
+
}),
|
|
575
|
+
__metadata("design:paramtypes", [Renderer2, ElementRef])
|
|
576
|
+
], SkeletonComponent);
|
|
577
|
+
|
|
578
|
+
/**
|
|
579
|
+
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
580
|
+
* definition for the Skeleton component.
|
|
581
|
+
*/
|
|
582
|
+
let SkeletonModule = class SkeletonModule {
|
|
583
|
+
};
|
|
584
|
+
SkeletonModule = __decorate([
|
|
585
|
+
NgModule({
|
|
586
|
+
declarations: [SkeletonComponent],
|
|
587
|
+
exports: [SkeletonComponent],
|
|
588
|
+
imports: [CommonModule]
|
|
589
|
+
})
|
|
590
|
+
], SkeletonModule);
|
|
591
|
+
|
|
436
592
|
const exportedModules$1 = [
|
|
437
593
|
BadgeComponent,
|
|
438
594
|
BadgeContainerComponent
|
|
@@ -491,7 +647,8 @@ IndicatorsModule = __decorate([
|
|
|
491
647
|
NgModule({
|
|
492
648
|
exports: [
|
|
493
649
|
BadgeModule,
|
|
494
|
-
LoaderModule
|
|
650
|
+
LoaderModule,
|
|
651
|
+
SkeletonModule
|
|
495
652
|
]
|
|
496
653
|
})
|
|
497
654
|
], IndicatorsModule);
|
|
@@ -500,4 +657,4 @@ IndicatorsModule = __decorate([
|
|
|
500
657
|
* Generated bundle index. Do not edit.
|
|
501
658
|
*/
|
|
502
659
|
|
|
503
|
-
export { BadgeModule, BadgeComponent, BadgeContainerComponent, LoaderComponent, LoaderModule, IndicatorsModule };
|
|
660
|
+
export { BadgeModule, BadgeComponent, BadgeContainerComponent, LoaderComponent, LoaderModule, SkeletonModule, SkeletonComponent, IndicatorsModule };
|
package/dist/fesm5/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { __decorate, __metadata } from 'tslib';
|
|
6
|
-
import { HostBinding, Input, Component, ElementRef, Renderer2, NgModule } from '@angular/core';
|
|
6
|
+
import { HostBinding, Input, Component, ElementRef, Renderer2, NgModule, isDevMode, ChangeDetectionStrategy } from '@angular/core';
|
|
7
7
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
9
9
|
import { CommonModule } from '@angular/common';
|
|
@@ -15,7 +15,7 @@ var packageMetadata = {
|
|
|
15
15
|
name: '@progress/kendo-angular-indicators',
|
|
16
16
|
productName: 'Kendo UI for Angular',
|
|
17
17
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
18
|
-
publishDate:
|
|
18
|
+
publishDate: 1635842729,
|
|
19
19
|
version: '',
|
|
20
20
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
21
21
|
};
|
|
@@ -462,6 +462,182 @@ var LoaderModule = /** @class */ (function () {
|
|
|
462
462
|
return LoaderModule;
|
|
463
463
|
}());
|
|
464
464
|
|
|
465
|
+
/**
|
|
466
|
+
* @hidden
|
|
467
|
+
*/
|
|
468
|
+
var validAnimations = [false, 'pulse', 'wave'];
|
|
469
|
+
/**
|
|
470
|
+
* @hidden
|
|
471
|
+
*/
|
|
472
|
+
var validShapes = ['circle', 'rectangle', 'text'];
|
|
473
|
+
|
|
474
|
+
/**
|
|
475
|
+
* @hidden
|
|
476
|
+
*/
|
|
477
|
+
var ANIMATION_CLASSES = {
|
|
478
|
+
pulse: 'k-skeleton-pulse',
|
|
479
|
+
wave: 'k-skeleton-wave'
|
|
480
|
+
};
|
|
481
|
+
/**
|
|
482
|
+
* @hidden
|
|
483
|
+
*/
|
|
484
|
+
var SHAPE_CLASSES = {
|
|
485
|
+
rectangle: 'k-skeleton-rect',
|
|
486
|
+
circle: 'k-skeleton-circle',
|
|
487
|
+
text: 'k-skeleton-text'
|
|
488
|
+
};
|
|
489
|
+
/**
|
|
490
|
+
* @hidden
|
|
491
|
+
*/
|
|
492
|
+
var skeletonShapeError = function (input) { return "\"" + input + "\" is not a valid kendo-skeleton shape. Valid shapes are: " + validShapes.map(function (s) { return "\"" + s + "\""; }).join(" | ") + "."; };
|
|
493
|
+
/**
|
|
494
|
+
* @hidden
|
|
495
|
+
*/
|
|
496
|
+
var skeletonAnimationError = function (input) { return "\"" + input + "\" is not a valid kendo-skeleton animation. Valid values are: 'pulse' | 'wave' | false."; };
|
|
497
|
+
|
|
498
|
+
/**
|
|
499
|
+
* Represents the [Kendo UI Skeleton component for Angular]({% slug overview_skeleton %}).
|
|
500
|
+
* Displays a Skeleton that represents loading content.
|
|
501
|
+
*/
|
|
502
|
+
var SkeletonComponent = /** @class */ (function () {
|
|
503
|
+
function SkeletonComponent(renderer, hostElement) {
|
|
504
|
+
this.renderer = renderer;
|
|
505
|
+
this.hostElement = hostElement;
|
|
506
|
+
this._animation = "pulse";
|
|
507
|
+
this._shape = 'text';
|
|
508
|
+
}
|
|
509
|
+
Object.defineProperty(SkeletonComponent.prototype, "animation", {
|
|
510
|
+
get: function () {
|
|
511
|
+
return this._animation;
|
|
512
|
+
},
|
|
513
|
+
/**
|
|
514
|
+
* Specifies the animation settings of the Skeleton.
|
|
515
|
+
*
|
|
516
|
+
* The possible values are:
|
|
517
|
+
* * `pulse` — (Default) Shows a pulse animation effect.
|
|
518
|
+
* * `wave` — Shows a wave animation effect.
|
|
519
|
+
* * `false` — Disables the animation. Note that it's a boolean, not a string.
|
|
520
|
+
*/
|
|
521
|
+
set: function (animation) {
|
|
522
|
+
if (isDevMode() && validAnimations.indexOf(animation) === -1) {
|
|
523
|
+
throw new Error(skeletonAnimationError(animation));
|
|
524
|
+
}
|
|
525
|
+
if (this.animation) {
|
|
526
|
+
this.renderer.removeClass(this.hostElement.nativeElement, ANIMATION_CLASSES[this.animation]);
|
|
527
|
+
}
|
|
528
|
+
if (animation) {
|
|
529
|
+
this.renderer.addClass(this.hostElement.nativeElement, ANIMATION_CLASSES[animation]);
|
|
530
|
+
}
|
|
531
|
+
this._animation = animation;
|
|
532
|
+
},
|
|
533
|
+
enumerable: true,
|
|
534
|
+
configurable: true
|
|
535
|
+
});
|
|
536
|
+
Object.defineProperty(SkeletonComponent.prototype, "shape", {
|
|
537
|
+
get: function () {
|
|
538
|
+
return this._shape;
|
|
539
|
+
},
|
|
540
|
+
/**
|
|
541
|
+
* Specifies the shape of the Skeleton.
|
|
542
|
+
*
|
|
543
|
+
* The possible values are:
|
|
544
|
+
* * `text` — (Default) Renders a line Skeleton.
|
|
545
|
+
* * `circle` — Renders a circular Skeleton.
|
|
546
|
+
* * `rectangle` — Renders a rectangular Skeleton.
|
|
547
|
+
*/
|
|
548
|
+
set: function (shape) {
|
|
549
|
+
if (isDevMode() && validShapes.indexOf(shape) === -1) {
|
|
550
|
+
throw new Error(skeletonShapeError(shape));
|
|
551
|
+
}
|
|
552
|
+
this.renderer.removeClass(this.hostElement.nativeElement, SHAPE_CLASSES[this.shape]);
|
|
553
|
+
this.renderer.addClass(this.hostElement.nativeElement, SHAPE_CLASSES[shape]);
|
|
554
|
+
this._shape = shape;
|
|
555
|
+
},
|
|
556
|
+
enumerable: true,
|
|
557
|
+
configurable: true
|
|
558
|
+
});
|
|
559
|
+
Object.defineProperty(SkeletonComponent.prototype, "width", {
|
|
560
|
+
/**
|
|
561
|
+
* Specifies the width of the Skeleton component.
|
|
562
|
+
* * Required for all Skeleton shapes.
|
|
563
|
+
* * Can be set to a string, e.g. '100px', '3em', '50%'.
|
|
564
|
+
* * Can be set to an integer number (will be read as width in pixels).
|
|
565
|
+
*/
|
|
566
|
+
set: function (width) {
|
|
567
|
+
this.renderer.setStyle(this.hostElement.nativeElement, "width", typeof width === "string" ? width : width + "px");
|
|
568
|
+
},
|
|
569
|
+
enumerable: true,
|
|
570
|
+
configurable: true
|
|
571
|
+
});
|
|
572
|
+
Object.defineProperty(SkeletonComponent.prototype, "height", {
|
|
573
|
+
/**
|
|
574
|
+
* Specifies the height of the Skeleton component.
|
|
575
|
+
* * Required for 'circle' and 'rectangle' shapes.
|
|
576
|
+
* * Not required for 'text', as it is derived from the current CSS font-size.
|
|
577
|
+
* * Can be set to a string, e.g. '100px', '3em', '50%'.
|
|
578
|
+
* * Can be set to an integer number (will be read as height in pixels).
|
|
579
|
+
*/
|
|
580
|
+
set: function (height) {
|
|
581
|
+
this.renderer.setStyle(this.hostElement.nativeElement, "height", typeof height === "string" ? height : height + "px");
|
|
582
|
+
},
|
|
583
|
+
enumerable: true,
|
|
584
|
+
configurable: true
|
|
585
|
+
});
|
|
586
|
+
SkeletonComponent.prototype.ngAfterViewInit = function () {
|
|
587
|
+
var hostElement = this.hostElement.nativeElement;
|
|
588
|
+
hostElement.classList.add("k-skeleton", SHAPE_CLASSES[this.shape]);
|
|
589
|
+
if (this.animation) {
|
|
590
|
+
hostElement.classList.add(ANIMATION_CLASSES[this.animation]);
|
|
591
|
+
}
|
|
592
|
+
};
|
|
593
|
+
__decorate([
|
|
594
|
+
Input(),
|
|
595
|
+
__metadata("design:type", Object),
|
|
596
|
+
__metadata("design:paramtypes", [Object])
|
|
597
|
+
], SkeletonComponent.prototype, "animation", null);
|
|
598
|
+
__decorate([
|
|
599
|
+
Input(),
|
|
600
|
+
__metadata("design:type", String),
|
|
601
|
+
__metadata("design:paramtypes", [String])
|
|
602
|
+
], SkeletonComponent.prototype, "shape", null);
|
|
603
|
+
__decorate([
|
|
604
|
+
Input(),
|
|
605
|
+
__metadata("design:type", Object),
|
|
606
|
+
__metadata("design:paramtypes", [Object])
|
|
607
|
+
], SkeletonComponent.prototype, "width", null);
|
|
608
|
+
__decorate([
|
|
609
|
+
Input(),
|
|
610
|
+
__metadata("design:type", Object),
|
|
611
|
+
__metadata("design:paramtypes", [Object])
|
|
612
|
+
], SkeletonComponent.prototype, "height", null);
|
|
613
|
+
SkeletonComponent = __decorate([
|
|
614
|
+
Component({
|
|
615
|
+
selector: "kendo-skeleton",
|
|
616
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
617
|
+
template: ""
|
|
618
|
+
}),
|
|
619
|
+
__metadata("design:paramtypes", [Renderer2, ElementRef])
|
|
620
|
+
], SkeletonComponent);
|
|
621
|
+
return SkeletonComponent;
|
|
622
|
+
}());
|
|
623
|
+
|
|
624
|
+
/**
|
|
625
|
+
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
626
|
+
* definition for the Skeleton component.
|
|
627
|
+
*/
|
|
628
|
+
var SkeletonModule = /** @class */ (function () {
|
|
629
|
+
function SkeletonModule() {
|
|
630
|
+
}
|
|
631
|
+
SkeletonModule = __decorate([
|
|
632
|
+
NgModule({
|
|
633
|
+
declarations: [SkeletonComponent],
|
|
634
|
+
exports: [SkeletonComponent],
|
|
635
|
+
imports: [CommonModule]
|
|
636
|
+
})
|
|
637
|
+
], SkeletonModule);
|
|
638
|
+
return SkeletonModule;
|
|
639
|
+
}());
|
|
640
|
+
|
|
465
641
|
var exportedModules$1 = [
|
|
466
642
|
BadgeComponent,
|
|
467
643
|
BadgeContainerComponent
|
|
@@ -522,7 +698,8 @@ var IndicatorsModule = /** @class */ (function () {
|
|
|
522
698
|
NgModule({
|
|
523
699
|
exports: [
|
|
524
700
|
BadgeModule,
|
|
525
|
-
LoaderModule
|
|
701
|
+
LoaderModule,
|
|
702
|
+
SkeletonModule
|
|
526
703
|
]
|
|
527
704
|
})
|
|
528
705
|
], IndicatorsModule);
|
|
@@ -533,4 +710,4 @@ var IndicatorsModule = /** @class */ (function () {
|
|
|
533
710
|
* Generated bundle index. Do not edit.
|
|
534
711
|
*/
|
|
535
712
|
|
|
536
|
-
export { BadgeModule, BadgeComponent, BadgeContainerComponent, LoaderComponent, LoaderModule, IndicatorsModule };
|
|
713
|
+
export { BadgeModule, BadgeComponent, BadgeContainerComponent, LoaderComponent, LoaderModule, SkeletonModule, SkeletonComponent, IndicatorsModule };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
package/dist/npm/badge.module.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
package/dist/npm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
"use strict";
|
|
@@ -8,6 +8,7 @@ var tslib_1 = require("tslib");
|
|
|
8
8
|
var core_1 = require("@angular/core");
|
|
9
9
|
var badge_module_1 = require("./badge.module");
|
|
10
10
|
var loader_module_1 = require("./loader.module");
|
|
11
|
+
var skeleton_module_1 = require("./skeleton.module");
|
|
11
12
|
/**
|
|
12
13
|
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
13
14
|
* definition for the Indicators components.
|
|
@@ -46,7 +47,8 @@ var IndicatorsModule = /** @class */ (function () {
|
|
|
46
47
|
core_1.NgModule({
|
|
47
48
|
exports: [
|
|
48
49
|
badge_module_1.BadgeModule,
|
|
49
|
-
loader_module_1.LoaderModule
|
|
50
|
+
loader_module_1.LoaderModule,
|
|
51
|
+
skeleton_module_1.SkeletonModule
|
|
50
52
|
]
|
|
51
53
|
})
|
|
52
54
|
], IndicatorsModule);
|