@progress/kendo-angular-indicators 1.1.3 → 2.0.0-next.202203230839
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/es2015/badge → badge}/badge-container.component.d.ts +3 -0
- package/{dist/es2015/badge → badge}/badge.component.d.ts +6 -2
- package/{dist/es2015/badge → badge}/models/align.d.ts +0 -0
- package/{dist/es2015/badge → badge}/models/fill.d.ts +0 -0
- package/{dist/es2015/badge → badge}/models/position.d.ts +0 -0
- package/{dist/es2015/badge → badge}/models/shape.d.ts +0 -0
- package/{dist/es2015/badge → badge}/models/size.d.ts +0 -0
- package/{dist/es2015/badge → badge}/models/theme-color.d.ts +0 -0
- package/badge.module.d.ts +17 -0
- package/bundles/kendo-angular-indicators.umd.js +5 -0
- package/esm2015/badge/badge-container.component.js +52 -0
- package/{dist/es2015 → esm2015}/badge/badge.component.js +50 -63
- package/{dist/es → esm2015}/badge/models/align.js +1 -0
- package/{dist/es2015 → esm2015}/badge/models/fill.js +1 -0
- package/{dist/es2015 → esm2015}/badge/models/position.js +1 -0
- package/{dist/es2015 → esm2015}/badge/models/shape.js +1 -0
- package/{dist/es → esm2015}/badge/models/size.js +1 -0
- package/{dist/es → esm2015}/badge/models/theme-color.js +1 -0
- package/esm2015/badge.module.js +35 -0
- package/{dist/es → esm2015}/indicators.module.js +20 -16
- package/{dist/es/index.js → esm2015/kendo-angular-indicators.js} +0 -1
- package/{dist/es2015 → esm2015}/loader/loader.component.js +27 -32
- package/{dist/es → esm2015}/loader/models/size.js +1 -0
- package/{dist/es → esm2015}/loader/models/theme-color.js +1 -0
- package/{dist/es → esm2015}/loader/models/type.js +1 -0
- package/esm2015/loader.module.js +31 -0
- package/{dist/es → esm2015}/main.js +1 -0
- package/{dist/es2015 → esm2015}/package-metadata.js +1 -1
- package/{dist/es2015 → esm2015}/skeleton/constants.js +0 -0
- package/{dist/es2015 → esm2015}/skeleton/models.js +0 -0
- package/{dist/es2015 → esm2015}/skeleton/skeleton.component.js +22 -33
- package/esm2015/skeleton.module.js +25 -0
- package/{dist/fesm2015/index.js → fesm2015/kendo-angular-indicators.js} +206 -203
- package/{dist/es2015/indicators.module.d.ts → indicators.module.d.ts} +7 -0
- package/{dist/es2015/index.d.ts → kendo-angular-indicators.d.ts} +1 -1
- package/{dist/es2015/loader → loader}/loader.component.d.ts +10 -4
- package/{dist/es2015/loader → loader}/models/size.d.ts +0 -0
- package/{dist/es2015/loader → loader}/models/theme-color.d.ts +0 -0
- package/{dist/es2015/loader → loader}/models/type.d.ts +0 -0
- package/{dist/es2015/loader.module.d.ts → loader.module.d.ts} +6 -0
- package/{dist/es2015/main.d.ts → main.d.ts} +1 -0
- package/{dist/es2015/package-metadata.d.ts → package-metadata.d.ts} +0 -0
- package/package.json +30 -98
- package/schematics/ngAdd/index.js +5 -2
- package/schematics/ngAdd/index.js.map +1 -1
- package/{dist/es2015/skeleton → skeleton}/constants.d.ts +0 -0
- package/{dist/es2015/skeleton → skeleton}/models.d.ts +0 -0
- package/{dist/es2015/skeleton → skeleton}/skeleton.component.d.ts +9 -4
- package/{dist/es2015/skeleton.module.d.ts → skeleton.module.d.ts} +6 -0
- package/dist/cdn/js/kendo-angular-indicators.js +0 -20
- package/dist/cdn/main.js +0 -5
- package/dist/es/badge/badge-container.component.js +0 -49
- package/dist/es/badge/badge.component.js +0 -241
- package/dist/es/badge/models/fill.js +0 -4
- package/dist/es/badge/models/position.js +0 -4
- package/dist/es/badge/models/shape.js +0 -4
- package/dist/es/badge.module.js +0 -31
- package/dist/es/loader/loader.component.js +0 -155
- package/dist/es/loader.module.js +0 -29
- package/dist/es/package-metadata.js +0 -15
- package/dist/es/skeleton/constants.js +0 -28
- package/dist/es/skeleton/models.js +0 -12
- package/dist/es/skeleton/skeleton.component.js +0 -134
- package/dist/es/skeleton.module.js +0 -25
- package/dist/es2015/badge/badge-container.component.js +0 -46
- package/dist/es2015/badge/models/align.js +0 -4
- package/dist/es2015/badge/models/size.js +0 -4
- package/dist/es2015/badge/models/theme-color.js +0 -4
- package/dist/es2015/badge.module.d.ts +0 -10
- package/dist/es2015/badge.module.js +0 -30
- package/dist/es2015/index.js +0 -9
- package/dist/es2015/index.metadata.json +0 -1
- package/dist/es2015/indicators.module.js +0 -52
- package/dist/es2015/loader/models/size.js +0 -4
- package/dist/es2015/loader/models/theme-color.js +0 -4
- package/dist/es2015/loader/models/type.js +0 -4
- package/dist/es2015/loader.module.js +0 -28
- package/dist/es2015/main.js +0 -11
- package/dist/es2015/skeleton.module.js +0 -22
- package/dist/fesm5/index.js +0 -713
- package/dist/npm/badge/badge-container.component.js +0 -51
- package/dist/npm/badge/badge.component.js +0 -243
- package/dist/npm/badge/models/align.js +0 -6
- package/dist/npm/badge/models/fill.js +0 -6
- package/dist/npm/badge/models/position.js +0 -6
- package/dist/npm/badge/models/shape.js +0 -6
- package/dist/npm/badge/models/size.js +0 -6
- package/dist/npm/badge/models/theme-color.js +0 -6
- package/dist/npm/badge.module.js +0 -33
- package/dist/npm/index.js +0 -13
- package/dist/npm/indicators.module.js +0 -57
- package/dist/npm/loader/loader.component.js +0 -157
- package/dist/npm/loader/models/size.js +0 -6
- package/dist/npm/loader/models/theme-color.js +0 -6
- package/dist/npm/loader/models/type.js +0 -6
- package/dist/npm/loader.module.js +0 -31
- package/dist/npm/main.js +0 -20
- package/dist/npm/package-metadata.js +0 -17
- package/dist/npm/skeleton/constants.js +0 -30
- package/dist/npm/skeleton/models.js +0 -14
- package/dist/npm/skeleton/skeleton.component.js +0 -136
- package/dist/npm/skeleton.module.js +0 -27
- package/dist/systemjs/kendo-angular-indicators.js +0 -5
|
@@ -1,241 +0,0 @@
|
|
|
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, ElementRef, Input, Renderer2, HostBinding } from '@angular/core';
|
|
7
|
-
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
8
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
9
|
-
import { packageMetadata } from '../package-metadata';
|
|
10
|
-
var SIZE_CLASSES = {
|
|
11
|
-
'small': 'k-badge-sm',
|
|
12
|
-
'medium': 'k-badge-md',
|
|
13
|
-
'large': 'k-badge-lg'
|
|
14
|
-
};
|
|
15
|
-
/**
|
|
16
|
-
* Represents the [Kendo UI Badge component for Angular]({% slug overview_badge %}).
|
|
17
|
-
* Used to display additional information or status that is related to an element.
|
|
18
|
-
*/
|
|
19
|
-
var BadgeComponent = /** @class */ (function () {
|
|
20
|
-
function BadgeComponent(element, renderer, localizationService) {
|
|
21
|
-
var _this = this;
|
|
22
|
-
this.element = element;
|
|
23
|
-
this.renderer = renderer;
|
|
24
|
-
this.localizationService = localizationService;
|
|
25
|
-
this.hostClass = true;
|
|
26
|
-
/**
|
|
27
|
-
* Specifies the size of the Badge.
|
|
28
|
-
*
|
|
29
|
-
* The possible values are:
|
|
30
|
-
* * `small`
|
|
31
|
-
* * `medium` (Default)
|
|
32
|
-
* * `large`
|
|
33
|
-
*
|
|
34
|
-
*/
|
|
35
|
-
this.size = 'medium';
|
|
36
|
-
/**
|
|
37
|
-
* Specifies the appearance fill style of the Badge.
|
|
38
|
-
*
|
|
39
|
-
* The possible values are:
|
|
40
|
-
* * `solid` (Default)
|
|
41
|
-
* * `outline`
|
|
42
|
-
*
|
|
43
|
-
*/
|
|
44
|
-
this.fill = 'solid';
|
|
45
|
-
/**
|
|
46
|
-
* Specifies the theme color of the Badge.
|
|
47
|
-
* The theme color will be applied as background and border color, while also amending the text color accordingly.
|
|
48
|
-
*
|
|
49
|
-
* The possible values are:
|
|
50
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
51
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
52
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
53
|
-
* * `inherit`— Applies inherited coloring value.
|
|
54
|
-
* * `info`—Applies coloring based on info theme color.
|
|
55
|
-
* * `success`— Applies coloring based on success theme color.
|
|
56
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
57
|
-
* * `error`— Applies coloring based on error theme color.
|
|
58
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
59
|
-
* * `light`— Applies coloring based on light theme color.
|
|
60
|
-
* * `inverse`— Applies coloring based on inverted theme color.
|
|
61
|
-
*
|
|
62
|
-
*/
|
|
63
|
-
this.themeColor = 'primary';
|
|
64
|
-
/**
|
|
65
|
-
* Specifies the shape of the Badge.
|
|
66
|
-
*
|
|
67
|
-
* The possible values are:
|
|
68
|
-
* * `circle` (Default)—Applies circular shape on the Badge.
|
|
69
|
-
* * `rectangle`—Applies rectangular shape on the Badge.
|
|
70
|
-
* * `rounded`—Applies rounded shape on the Badge.
|
|
71
|
-
* * `dot`—Applies dot shape on the Badge.
|
|
72
|
-
* * `pill`—Applies border radius equal to half of the height of the Badge.
|
|
73
|
-
*
|
|
74
|
-
*/
|
|
75
|
-
this.shape = 'circle';
|
|
76
|
-
/**
|
|
77
|
-
* Specifies the position of the Badge relative to the edge of the parent container element.
|
|
78
|
-
*
|
|
79
|
-
* The possible values are:
|
|
80
|
-
* * `edge` (Default)—The center of the Badge is positioned on the edge of the parent container element.
|
|
81
|
-
* * `inside`—The Badge is entirely positioned inside the edge of the parent container element.
|
|
82
|
-
* * `outside`—The Badge is entirely positioned outside the edge of the parent container element.
|
|
83
|
-
*
|
|
84
|
-
*/
|
|
85
|
-
this.position = 'edge';
|
|
86
|
-
/**
|
|
87
|
-
* Specifies whether or not to render additional `cutout` border around the Badge.
|
|
88
|
-
*
|
|
89
|
-
* The possible values are:
|
|
90
|
-
* * `true`
|
|
91
|
-
* * `false` (Default)
|
|
92
|
-
*
|
|
93
|
-
*/
|
|
94
|
-
this.cutoutBorder = false;
|
|
95
|
-
this.badgeClasses = [];
|
|
96
|
-
this.badgeAlign = { vertical: 'top', horizontal: 'end' };
|
|
97
|
-
this.rtl = false;
|
|
98
|
-
validatePackage(packageMetadata);
|
|
99
|
-
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
|
|
100
|
-
var rtl = _a.rtl;
|
|
101
|
-
_this.rtl = rtl;
|
|
102
|
-
_this.direction = _this.rtl ? 'rtl' : 'ltr';
|
|
103
|
-
});
|
|
104
|
-
}
|
|
105
|
-
Object.defineProperty(BadgeComponent.prototype, "cutoutBorderClass", {
|
|
106
|
-
get: function () {
|
|
107
|
-
return this.cutoutBorder;
|
|
108
|
-
},
|
|
109
|
-
enumerable: true,
|
|
110
|
-
configurable: true
|
|
111
|
-
});
|
|
112
|
-
Object.defineProperty(BadgeComponent.prototype, "align", {
|
|
113
|
-
/**
|
|
114
|
-
* Specifies the alignment of the Badge.
|
|
115
|
-
*
|
|
116
|
-
* The possible values are:
|
|
117
|
-
* * `{ vertical: 'top', horizontal: 'end' }` (Default)
|
|
118
|
-
* * `{ vertical: 'top', horizontal: 'start' }`
|
|
119
|
-
* * `{ vertical: 'bottom', horizontal: 'start' }`
|
|
120
|
-
* * `{ vertical: 'bottom', horizontal: 'end' }`
|
|
121
|
-
*
|
|
122
|
-
*/
|
|
123
|
-
get: function () {
|
|
124
|
-
return this.badgeAlign;
|
|
125
|
-
},
|
|
126
|
-
set: function (align) {
|
|
127
|
-
this.badgeAlign = Object.assign(this.badgeAlign, align);
|
|
128
|
-
},
|
|
129
|
-
enumerable: true,
|
|
130
|
-
configurable: true
|
|
131
|
-
});
|
|
132
|
-
BadgeComponent.prototype.ngAfterViewInit = function () {
|
|
133
|
-
if (!this.badgeClasses.length) {
|
|
134
|
-
this.setBadgeClasses();
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
BadgeComponent.prototype.ngOnChanges = function () {
|
|
138
|
-
this.setBadgeClasses();
|
|
139
|
-
};
|
|
140
|
-
BadgeComponent.prototype.ngOnDestroy = function () {
|
|
141
|
-
if (this.dynamicRTLSubscription) {
|
|
142
|
-
this.dynamicRTLSubscription.unsubscribe();
|
|
143
|
-
}
|
|
144
|
-
};
|
|
145
|
-
BadgeComponent.prototype.alignClass = function () {
|
|
146
|
-
return "k-" + this.badgeAlign.vertical + "-" + this.badgeAlign.horizontal;
|
|
147
|
-
};
|
|
148
|
-
BadgeComponent.prototype.positionClass = function () {
|
|
149
|
-
return "k-badge-" + this.position;
|
|
150
|
-
};
|
|
151
|
-
BadgeComponent.prototype.sizeClass = function () {
|
|
152
|
-
return SIZE_CLASSES[this.size];
|
|
153
|
-
};
|
|
154
|
-
BadgeComponent.prototype.shapeClass = function () {
|
|
155
|
-
return "k-badge-" + this.shape;
|
|
156
|
-
};
|
|
157
|
-
BadgeComponent.prototype.themeColorClass = function () {
|
|
158
|
-
return "k-badge-" + this.themeColor;
|
|
159
|
-
};
|
|
160
|
-
BadgeComponent.prototype.fillClass = function () {
|
|
161
|
-
return "k-badge-" + this.fill;
|
|
162
|
-
};
|
|
163
|
-
BadgeComponent.prototype.setBadgeClasses = function () {
|
|
164
|
-
var _this = this;
|
|
165
|
-
var element = this.element.nativeElement;
|
|
166
|
-
this.badgeClasses.forEach(function (className) {
|
|
167
|
-
_this.renderer.removeClass(element, className);
|
|
168
|
-
});
|
|
169
|
-
this.badgeClasses = [
|
|
170
|
-
this.themeColorClass(),
|
|
171
|
-
this.fillClass(),
|
|
172
|
-
this.sizeClass(),
|
|
173
|
-
this.shapeClass(),
|
|
174
|
-
this.alignClass(),
|
|
175
|
-
this.positionClass()
|
|
176
|
-
];
|
|
177
|
-
this.badgeClasses.forEach(function (className) {
|
|
178
|
-
_this.renderer.addClass(element, className);
|
|
179
|
-
});
|
|
180
|
-
};
|
|
181
|
-
tslib_1.__decorate([
|
|
182
|
-
HostBinding('class.k-badge'),
|
|
183
|
-
tslib_1.__metadata("design:type", Boolean)
|
|
184
|
-
], BadgeComponent.prototype, "hostClass", void 0);
|
|
185
|
-
tslib_1.__decorate([
|
|
186
|
-
HostBinding('class.k-badge-border-cutout'),
|
|
187
|
-
tslib_1.__metadata("design:type", Boolean),
|
|
188
|
-
tslib_1.__metadata("design:paramtypes", [])
|
|
189
|
-
], BadgeComponent.prototype, "cutoutBorderClass", null);
|
|
190
|
-
tslib_1.__decorate([
|
|
191
|
-
HostBinding('attr.dir'),
|
|
192
|
-
tslib_1.__metadata("design:type", String)
|
|
193
|
-
], BadgeComponent.prototype, "direction", void 0);
|
|
194
|
-
tslib_1.__decorate([
|
|
195
|
-
Input(),
|
|
196
|
-
tslib_1.__metadata("design:type", Object),
|
|
197
|
-
tslib_1.__metadata("design:paramtypes", [Object])
|
|
198
|
-
], BadgeComponent.prototype, "align", null);
|
|
199
|
-
tslib_1.__decorate([
|
|
200
|
-
Input(),
|
|
201
|
-
tslib_1.__metadata("design:type", String)
|
|
202
|
-
], BadgeComponent.prototype, "size", void 0);
|
|
203
|
-
tslib_1.__decorate([
|
|
204
|
-
Input(),
|
|
205
|
-
tslib_1.__metadata("design:type", String)
|
|
206
|
-
], BadgeComponent.prototype, "fill", void 0);
|
|
207
|
-
tslib_1.__decorate([
|
|
208
|
-
Input(),
|
|
209
|
-
tslib_1.__metadata("design:type", String)
|
|
210
|
-
], BadgeComponent.prototype, "themeColor", void 0);
|
|
211
|
-
tslib_1.__decorate([
|
|
212
|
-
Input(),
|
|
213
|
-
tslib_1.__metadata("design:type", String)
|
|
214
|
-
], BadgeComponent.prototype, "shape", void 0);
|
|
215
|
-
tslib_1.__decorate([
|
|
216
|
-
Input(),
|
|
217
|
-
tslib_1.__metadata("design:type", String)
|
|
218
|
-
], BadgeComponent.prototype, "position", void 0);
|
|
219
|
-
tslib_1.__decorate([
|
|
220
|
-
Input(),
|
|
221
|
-
tslib_1.__metadata("design:type", Boolean)
|
|
222
|
-
], BadgeComponent.prototype, "cutoutBorder", void 0);
|
|
223
|
-
BadgeComponent = tslib_1.__decorate([
|
|
224
|
-
Component({
|
|
225
|
-
selector: 'kendo-badge',
|
|
226
|
-
providers: [
|
|
227
|
-
LocalizationService,
|
|
228
|
-
{
|
|
229
|
-
provide: L10N_PREFIX,
|
|
230
|
-
useValue: 'kendo.badge.component'
|
|
231
|
-
}
|
|
232
|
-
],
|
|
233
|
-
template: "<ng-content></ng-content>"
|
|
234
|
-
}),
|
|
235
|
-
tslib_1.__metadata("design:paramtypes", [ElementRef,
|
|
236
|
-
Renderer2,
|
|
237
|
-
LocalizationService])
|
|
238
|
-
], BadgeComponent);
|
|
239
|
-
return BadgeComponent;
|
|
240
|
-
}());
|
|
241
|
-
export { BadgeComponent };
|
|
@@ -1,4 +0,0 @@
|
|
|
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
|
-
*-------------------------------------------------------------------------------------------*/
|
|
@@ -1,4 +0,0 @@
|
|
|
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
|
-
*-------------------------------------------------------------------------------------------*/
|
|
@@ -1,4 +0,0 @@
|
|
|
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
|
-
*-------------------------------------------------------------------------------------------*/
|
package/dist/es/badge.module.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
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 { NgModule } from '@angular/core';
|
|
7
|
-
import { CommonModule } from '@angular/common';
|
|
8
|
-
import { BadgeContainerComponent } from './badge/badge-container.component';
|
|
9
|
-
import { BadgeComponent } from './badge/badge.component';
|
|
10
|
-
var exportedModules = [
|
|
11
|
-
BadgeComponent,
|
|
12
|
-
BadgeContainerComponent
|
|
13
|
-
];
|
|
14
|
-
var declarations = exportedModules.slice();
|
|
15
|
-
/**
|
|
16
|
-
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
17
|
-
* definition for the Badge component.
|
|
18
|
-
*/
|
|
19
|
-
var BadgeModule = /** @class */ (function () {
|
|
20
|
-
function BadgeModule() {
|
|
21
|
-
}
|
|
22
|
-
BadgeModule = tslib_1.__decorate([
|
|
23
|
-
NgModule({
|
|
24
|
-
declarations: [declarations],
|
|
25
|
-
exports: [exportedModules],
|
|
26
|
-
imports: [CommonModule]
|
|
27
|
-
})
|
|
28
|
-
], BadgeModule);
|
|
29
|
-
return BadgeModule;
|
|
30
|
-
}());
|
|
31
|
-
export { BadgeModule };
|
|
@@ -1,155 +0,0 @@
|
|
|
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, Input, HostBinding, ElementRef, Renderer2 } from '@angular/core';
|
|
7
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
8
|
-
import { packageMetadata } from '../package-metadata';
|
|
9
|
-
var SIZE_CLASSES = {
|
|
10
|
-
'small': 'k-loader-sm',
|
|
11
|
-
'medium': 'k-loader-md',
|
|
12
|
-
'large': 'k-loader-lg'
|
|
13
|
-
};
|
|
14
|
-
var SEGMENT_COUNT = {
|
|
15
|
-
'pulsing': 2,
|
|
16
|
-
'infinite-spinner': 3,
|
|
17
|
-
'converging-spinner': 4
|
|
18
|
-
};
|
|
19
|
-
var TYPE_CLASSES = {
|
|
20
|
-
'pulsing': 'k-loader-pulsing-2',
|
|
21
|
-
'infinite-spinner': 'k-loader-spinner-3',
|
|
22
|
-
'converging-spinner': 'k-loader-spinner-4'
|
|
23
|
-
};
|
|
24
|
-
/**
|
|
25
|
-
* Represents the [Kendo UI Loader component for Angular]({% slug overview_loader %}).
|
|
26
|
-
* Displays a Loader that represents an indeterminate wait time.
|
|
27
|
-
*/
|
|
28
|
-
var LoaderComponent = /** @class */ (function () {
|
|
29
|
-
function LoaderComponent(element, renderer) {
|
|
30
|
-
this.element = element;
|
|
31
|
-
this.renderer = renderer;
|
|
32
|
-
this.hostClass = true;
|
|
33
|
-
this._type = 'pulsing';
|
|
34
|
-
this._themeColor = 'primary';
|
|
35
|
-
this._size = 'medium';
|
|
36
|
-
this.loader = this.element.nativeElement;
|
|
37
|
-
validatePackage(packageMetadata);
|
|
38
|
-
}
|
|
39
|
-
Object.defineProperty(LoaderComponent.prototype, "type", {
|
|
40
|
-
get: function () {
|
|
41
|
-
return this._type;
|
|
42
|
-
},
|
|
43
|
-
/**
|
|
44
|
-
* Specifies the Loader animation type.
|
|
45
|
-
*
|
|
46
|
-
* The possible values are:
|
|
47
|
-
* - `pulsing` (default)
|
|
48
|
-
* - `infinite-spinner`
|
|
49
|
-
* - `converging-spinner`
|
|
50
|
-
*/
|
|
51
|
-
set: function (type) {
|
|
52
|
-
this.renderer.removeClass(this.loader, TYPE_CLASSES[this.type]);
|
|
53
|
-
this.renderer.addClass(this.loader, TYPE_CLASSES[type]);
|
|
54
|
-
this._type = type;
|
|
55
|
-
},
|
|
56
|
-
enumerable: true,
|
|
57
|
-
configurable: true
|
|
58
|
-
});
|
|
59
|
-
Object.defineProperty(LoaderComponent.prototype, "themeColor", {
|
|
60
|
-
get: function () {
|
|
61
|
-
return this._themeColor;
|
|
62
|
-
},
|
|
63
|
-
/**
|
|
64
|
-
* Specifies the theme color of the Loader.
|
|
65
|
-
*
|
|
66
|
-
* The possible values are:
|
|
67
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
68
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
69
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
70
|
-
* * `info`—Applies coloring based on info theme color.
|
|
71
|
-
* * `success`— Applies coloring based on success theme color.
|
|
72
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
73
|
-
* * `error`— Applies coloring based on error theme color.
|
|
74
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
75
|
-
* * `light`— Applies coloring based on light theme color.
|
|
76
|
-
* * `inverse`— Applies coloring based on inverted theme color.
|
|
77
|
-
*
|
|
78
|
-
*/
|
|
79
|
-
set: function (themeColor) {
|
|
80
|
-
this.renderer.removeClass(this.loader, "k-loader-" + this.themeColor);
|
|
81
|
-
this.renderer.addClass(this.loader, "k-loader-" + themeColor);
|
|
82
|
-
this._themeColor = themeColor;
|
|
83
|
-
},
|
|
84
|
-
enumerable: true,
|
|
85
|
-
configurable: true
|
|
86
|
-
});
|
|
87
|
-
Object.defineProperty(LoaderComponent.prototype, "size", {
|
|
88
|
-
get: function () {
|
|
89
|
-
return this._size;
|
|
90
|
-
},
|
|
91
|
-
/**
|
|
92
|
-
* Specifies the size of the Loader.
|
|
93
|
-
*
|
|
94
|
-
* The possible values are:
|
|
95
|
-
* * `small`
|
|
96
|
-
* * `medium` (Default)
|
|
97
|
-
* * `large`
|
|
98
|
-
*
|
|
99
|
-
*/
|
|
100
|
-
set: function (size) {
|
|
101
|
-
this.renderer.removeClass(this.loader, SIZE_CLASSES[this.size]);
|
|
102
|
-
this.renderer.addClass(this.loader, SIZE_CLASSES[size]);
|
|
103
|
-
this._size = size;
|
|
104
|
-
},
|
|
105
|
-
enumerable: true,
|
|
106
|
-
configurable: true
|
|
107
|
-
});
|
|
108
|
-
LoaderComponent.prototype.ngAfterViewInit = function () {
|
|
109
|
-
this.setLoaderClasses();
|
|
110
|
-
};
|
|
111
|
-
Object.defineProperty(LoaderComponent.prototype, "segmentCount", {
|
|
112
|
-
/**
|
|
113
|
-
* @hidden
|
|
114
|
-
*/
|
|
115
|
-
get: function () {
|
|
116
|
-
return new Array(SEGMENT_COUNT[this.type]);
|
|
117
|
-
},
|
|
118
|
-
enumerable: true,
|
|
119
|
-
configurable: true
|
|
120
|
-
});
|
|
121
|
-
LoaderComponent.prototype.setLoaderClasses = function () {
|
|
122
|
-
this.renderer.addClass(this.loader, TYPE_CLASSES[this.type]);
|
|
123
|
-
this.renderer.addClass(this.loader, "k-loader-" + this.themeColor);
|
|
124
|
-
this.renderer.addClass(this.loader, SIZE_CLASSES[this.size]);
|
|
125
|
-
};
|
|
126
|
-
tslib_1.__decorate([
|
|
127
|
-
HostBinding('class.k-loader'),
|
|
128
|
-
tslib_1.__metadata("design:type", Boolean)
|
|
129
|
-
], LoaderComponent.prototype, "hostClass", void 0);
|
|
130
|
-
tslib_1.__decorate([
|
|
131
|
-
Input(),
|
|
132
|
-
tslib_1.__metadata("design:type", String),
|
|
133
|
-
tslib_1.__metadata("design:paramtypes", [String])
|
|
134
|
-
], LoaderComponent.prototype, "type", null);
|
|
135
|
-
tslib_1.__decorate([
|
|
136
|
-
Input(),
|
|
137
|
-
tslib_1.__metadata("design:type", String),
|
|
138
|
-
tslib_1.__metadata("design:paramtypes", [String])
|
|
139
|
-
], LoaderComponent.prototype, "themeColor", null);
|
|
140
|
-
tslib_1.__decorate([
|
|
141
|
-
Input(),
|
|
142
|
-
tslib_1.__metadata("design:type", String),
|
|
143
|
-
tslib_1.__metadata("design:paramtypes", [String])
|
|
144
|
-
], LoaderComponent.prototype, "size", null);
|
|
145
|
-
LoaderComponent = tslib_1.__decorate([
|
|
146
|
-
Component({
|
|
147
|
-
selector: 'kendo-loader',
|
|
148
|
-
template: "\n <div class=\"k-loader-canvas\">\n <span *ngFor=\"let segment of segmentCount\" class=\"k-loader-segment\"></span>\n </div>\n "
|
|
149
|
-
}),
|
|
150
|
-
tslib_1.__metadata("design:paramtypes", [ElementRef,
|
|
151
|
-
Renderer2])
|
|
152
|
-
], LoaderComponent);
|
|
153
|
-
return LoaderComponent;
|
|
154
|
-
}());
|
|
155
|
-
export { LoaderComponent };
|
package/dist/es/loader.module.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
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 { NgModule } from '@angular/core';
|
|
7
|
-
import { CommonModule } from '@angular/common';
|
|
8
|
-
import { LoaderComponent } from './loader/loader.component';
|
|
9
|
-
var exportedModules = [
|
|
10
|
-
LoaderComponent
|
|
11
|
-
];
|
|
12
|
-
var declarations = exportedModules.slice();
|
|
13
|
-
/**
|
|
14
|
-
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
15
|
-
* definition for the Loader component.
|
|
16
|
-
*/
|
|
17
|
-
var LoaderModule = /** @class */ (function () {
|
|
18
|
-
function LoaderModule() {
|
|
19
|
-
}
|
|
20
|
-
LoaderModule = tslib_1.__decorate([
|
|
21
|
-
NgModule({
|
|
22
|
-
declarations: [declarations],
|
|
23
|
-
exports: [exportedModules],
|
|
24
|
-
imports: [CommonModule]
|
|
25
|
-
})
|
|
26
|
-
], LoaderModule);
|
|
27
|
-
return LoaderModule;
|
|
28
|
-
}());
|
|
29
|
-
export { LoaderModule };
|
|
@@ -1,15 +0,0 @@
|
|
|
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
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export var packageMetadata = {
|
|
9
|
-
name: '@progress/kendo-angular-indicators',
|
|
10
|
-
productName: 'Kendo UI for Angular',
|
|
11
|
-
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate: 1646219044,
|
|
13
|
-
version: '',
|
|
14
|
-
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'
|
|
15
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
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 { validShapes } from "./models";
|
|
6
|
-
/**
|
|
7
|
-
* @hidden
|
|
8
|
-
*/
|
|
9
|
-
export var ANIMATION_CLASSES = {
|
|
10
|
-
pulse: 'k-skeleton-pulse',
|
|
11
|
-
wave: 'k-skeleton-wave'
|
|
12
|
-
};
|
|
13
|
-
/**
|
|
14
|
-
* @hidden
|
|
15
|
-
*/
|
|
16
|
-
export var SHAPE_CLASSES = {
|
|
17
|
-
rectangle: 'k-skeleton-rect',
|
|
18
|
-
circle: 'k-skeleton-circle',
|
|
19
|
-
text: 'k-skeleton-text'
|
|
20
|
-
};
|
|
21
|
-
/**
|
|
22
|
-
* @hidden
|
|
23
|
-
*/
|
|
24
|
-
export var skeletonShapeError = function (input) { return "\"" + input + "\" is not a valid kendo-skeleton shape. Valid shapes are: " + validShapes.map(function (s) { return "\"" + s + "\""; }).join(" | ") + "."; };
|
|
25
|
-
/**
|
|
26
|
-
* @hidden
|
|
27
|
-
*/
|
|
28
|
-
export var skeletonAnimationError = function (input) { return "\"" + input + "\" is not a valid kendo-skeleton animation. Valid values are: 'pulse' | 'wave' | false."; };
|
|
@@ -1,12 +0,0 @@
|
|
|
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
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export var validAnimations = [false, 'pulse', 'wave'];
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export var validShapes = ['circle', 'rectangle', 'text'];
|
|
@@ -1,134 +0,0 @@
|
|
|
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
|
-
var SkeletonComponent = /** @class */ (function () {
|
|
14
|
-
function SkeletonComponent(renderer, hostElement) {
|
|
15
|
-
this.renderer = renderer;
|
|
16
|
-
this.hostElement = hostElement;
|
|
17
|
-
this._animation = "pulse";
|
|
18
|
-
this._shape = 'text';
|
|
19
|
-
}
|
|
20
|
-
Object.defineProperty(SkeletonComponent.prototype, "animation", {
|
|
21
|
-
get: function () {
|
|
22
|
-
return this._animation;
|
|
23
|
-
},
|
|
24
|
-
/**
|
|
25
|
-
* Specifies the animation settings of the Skeleton.
|
|
26
|
-
*
|
|
27
|
-
* The possible values are:
|
|
28
|
-
* * `pulse` — (Default) Shows a pulse animation effect.
|
|
29
|
-
* * `wave` — Shows a wave animation effect.
|
|
30
|
-
* * `false` — Disables the animation. Note that it's a boolean, not a string.
|
|
31
|
-
*/
|
|
32
|
-
set: function (animation) {
|
|
33
|
-
if (isDevMode() && validAnimations.indexOf(animation) === -1) {
|
|
34
|
-
throw new Error(skeletonAnimationError(animation));
|
|
35
|
-
}
|
|
36
|
-
if (this.animation) {
|
|
37
|
-
this.renderer.removeClass(this.hostElement.nativeElement, ANIMATION_CLASSES[this.animation]);
|
|
38
|
-
}
|
|
39
|
-
if (animation) {
|
|
40
|
-
this.renderer.addClass(this.hostElement.nativeElement, ANIMATION_CLASSES[animation]);
|
|
41
|
-
}
|
|
42
|
-
this._animation = animation;
|
|
43
|
-
},
|
|
44
|
-
enumerable: true,
|
|
45
|
-
configurable: true
|
|
46
|
-
});
|
|
47
|
-
Object.defineProperty(SkeletonComponent.prototype, "shape", {
|
|
48
|
-
get: function () {
|
|
49
|
-
return this._shape;
|
|
50
|
-
},
|
|
51
|
-
/**
|
|
52
|
-
* Specifies the shape of the Skeleton.
|
|
53
|
-
*
|
|
54
|
-
* The possible values are:
|
|
55
|
-
* * `text` — (Default) Renders a line Skeleton.
|
|
56
|
-
* * `circle` — Renders a circular Skeleton.
|
|
57
|
-
* * `rectangle` — Renders a rectangular Skeleton.
|
|
58
|
-
*/
|
|
59
|
-
set: function (shape) {
|
|
60
|
-
if (isDevMode() && validShapes.indexOf(shape) === -1) {
|
|
61
|
-
throw new Error(skeletonShapeError(shape));
|
|
62
|
-
}
|
|
63
|
-
this.renderer.removeClass(this.hostElement.nativeElement, SHAPE_CLASSES[this.shape]);
|
|
64
|
-
this.renderer.addClass(this.hostElement.nativeElement, SHAPE_CLASSES[shape]);
|
|
65
|
-
this._shape = shape;
|
|
66
|
-
},
|
|
67
|
-
enumerable: true,
|
|
68
|
-
configurable: true
|
|
69
|
-
});
|
|
70
|
-
Object.defineProperty(SkeletonComponent.prototype, "width", {
|
|
71
|
-
/**
|
|
72
|
-
* Specifies the width of the Skeleton component.
|
|
73
|
-
* * Required for all Skeleton shapes.
|
|
74
|
-
* * Can be set to a string, e.g. '100px', '3em', '50%'.
|
|
75
|
-
* * Can be set to an integer number (will be read as width in pixels).
|
|
76
|
-
*/
|
|
77
|
-
set: function (width) {
|
|
78
|
-
this.renderer.setStyle(this.hostElement.nativeElement, "width", typeof width === "string" ? width : width + "px");
|
|
79
|
-
},
|
|
80
|
-
enumerable: true,
|
|
81
|
-
configurable: true
|
|
82
|
-
});
|
|
83
|
-
Object.defineProperty(SkeletonComponent.prototype, "height", {
|
|
84
|
-
/**
|
|
85
|
-
* Specifies the height of the Skeleton component.
|
|
86
|
-
* * Required for 'circle' and 'rectangle' shapes.
|
|
87
|
-
* * Not required for 'text', as it is derived from the current CSS font-size.
|
|
88
|
-
* * Can be set to a string, e.g. '100px', '3em', '50%'.
|
|
89
|
-
* * Can be set to an integer number (will be read as height in pixels).
|
|
90
|
-
*/
|
|
91
|
-
set: function (height) {
|
|
92
|
-
this.renderer.setStyle(this.hostElement.nativeElement, "height", typeof height === "string" ? height : height + "px");
|
|
93
|
-
},
|
|
94
|
-
enumerable: true,
|
|
95
|
-
configurable: true
|
|
96
|
-
});
|
|
97
|
-
SkeletonComponent.prototype.ngAfterViewInit = function () {
|
|
98
|
-
var hostElement = this.hostElement.nativeElement;
|
|
99
|
-
hostElement.classList.add("k-skeleton", SHAPE_CLASSES[this.shape]);
|
|
100
|
-
if (this.animation) {
|
|
101
|
-
hostElement.classList.add(ANIMATION_CLASSES[this.animation]);
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
tslib_1.__decorate([
|
|
105
|
-
Input(),
|
|
106
|
-
tslib_1.__metadata("design:type", Object),
|
|
107
|
-
tslib_1.__metadata("design:paramtypes", [Object])
|
|
108
|
-
], SkeletonComponent.prototype, "animation", null);
|
|
109
|
-
tslib_1.__decorate([
|
|
110
|
-
Input(),
|
|
111
|
-
tslib_1.__metadata("design:type", String),
|
|
112
|
-
tslib_1.__metadata("design:paramtypes", [String])
|
|
113
|
-
], SkeletonComponent.prototype, "shape", null);
|
|
114
|
-
tslib_1.__decorate([
|
|
115
|
-
Input(),
|
|
116
|
-
tslib_1.__metadata("design:type", Object),
|
|
117
|
-
tslib_1.__metadata("design:paramtypes", [Object])
|
|
118
|
-
], SkeletonComponent.prototype, "width", null);
|
|
119
|
-
tslib_1.__decorate([
|
|
120
|
-
Input(),
|
|
121
|
-
tslib_1.__metadata("design:type", Object),
|
|
122
|
-
tslib_1.__metadata("design:paramtypes", [Object])
|
|
123
|
-
], SkeletonComponent.prototype, "height", null);
|
|
124
|
-
SkeletonComponent = tslib_1.__decorate([
|
|
125
|
-
Component({
|
|
126
|
-
selector: "kendo-skeleton",
|
|
127
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
128
|
-
template: ""
|
|
129
|
-
}),
|
|
130
|
-
tslib_1.__metadata("design:paramtypes", [Renderer2, ElementRef])
|
|
131
|
-
], SkeletonComponent);
|
|
132
|
-
return SkeletonComponent;
|
|
133
|
-
}());
|
|
134
|
-
export { SkeletonComponent };
|