@progress/kendo-angular-icons 17.0.0-develop.9 → 17.0.0
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 +25 -18
- package/common/icon-base.d.ts +1 -1
- package/common/models/flip.d.ts +1 -1
- package/common/models/icon-type.d.ts +1 -1
- package/common/models/size.d.ts +1 -1
- package/common/models/theme-color.d.ts +1 -1
- package/{esm2020 → esm2022}/common/icon-base.mjs +16 -8
- package/{esm2020 → esm2022}/common/icon-settings.service.mjs +7 -9
- package/{esm2020 → esm2022}/common/icons.service.mjs +10 -8
- package/{esm2020 → esm2022}/icon/icon.component.mjs +13 -10
- package/{esm2020 → esm2022}/icon-wrapper/icon-wrapper.component.mjs +48 -22
- package/{esm2020 → esm2022}/icon.module.mjs +4 -4
- package/{esm2020 → esm2022}/icons.module.mjs +4 -4
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/svg-icon/svg-icon.component.mjs +16 -12
- package/{esm2020 → esm2022}/svg-icon.module.mjs +4 -4
- package/{fesm2020 → fesm2022}/progress-kendo-angular-icons.mjs +124 -83
- package/icon/icon.component.d.ts +1 -1
- package/icon-wrapper/icon-wrapper.component.d.ts +1 -1
- package/package.json +12 -18
- package/svg-icon/svg-icon.component.d.ts +1 -1
- package/fesm2015/progress-kendo-angular-icons.mjs +0 -688
- /package/{esm2020 → esm2022}/common/icon-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/flip.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/icon-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/icon-type.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/index.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/size.mjs +0 -0
- /package/{esm2020 → esm2022}/common/models/theme-color.mjs +0 -0
- /package/{esm2020 → esm2022}/common/util.mjs +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-icons.mjs +0 -0
|
@@ -1,688 +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 { Directive, HostBinding, Input, Component, isDevMode, ChangeDetectionStrategy, InjectionToken, Injectable, Optional, Inject, NgModule } from '@angular/core';
|
|
7
|
-
import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
8
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
9
|
-
import { NgIf, NgClass } from '@angular/common';
|
|
10
|
-
import * as i1 from '@angular/platform-browser';
|
|
11
|
-
import { Subject, BehaviorSubject, Subscription } from 'rxjs';
|
|
12
|
-
import { map, tap } from 'rxjs/operators';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* @hidden
|
|
16
|
-
*/
|
|
17
|
-
const packageMetadata = {
|
|
18
|
-
name: '@progress/kendo-angular-icons',
|
|
19
|
-
productName: 'Kendo UI for Angular',
|
|
20
|
-
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
21
|
-
publishDate: 1729174246,
|
|
22
|
-
version: '17.0.0-develop.9',
|
|
23
|
-
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const sizeClasses = {
|
|
27
|
-
'default': 'k-icon',
|
|
28
|
-
'xsmall': 'k-icon-xs',
|
|
29
|
-
'small': 'k-icon-sm',
|
|
30
|
-
'medium': 'k-icon-md',
|
|
31
|
-
'large': 'k-icon-lg',
|
|
32
|
-
'xlarge': 'k-icon-xl',
|
|
33
|
-
'xxlarge': 'k-icon-xxl',
|
|
34
|
-
'xxxlarge': 'k-icon-xxxl'
|
|
35
|
-
};
|
|
36
|
-
/**
|
|
37
|
-
* @hidden
|
|
38
|
-
*/
|
|
39
|
-
class IconBaseDirective {
|
|
40
|
-
constructor(element, renderer) {
|
|
41
|
-
this.element = element;
|
|
42
|
-
this.renderer = renderer;
|
|
43
|
-
validatePackage(packageMetadata);
|
|
44
|
-
}
|
|
45
|
-
get horizontalFlip() {
|
|
46
|
-
return this.flip === 'horizontal' || this.flip === 'both';
|
|
47
|
-
}
|
|
48
|
-
get verticalFlip() {
|
|
49
|
-
return this.flip === 'vertical' || this.flip === 'both';
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Specifies the theme color for the Icon.
|
|
53
|
-
*
|
|
54
|
-
* The possible values are:
|
|
55
|
-
* * `inherit` (Default)—Applies coloring based on the current color.
|
|
56
|
-
* * `primary` —Applies coloring based on primary theme color.
|
|
57
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
58
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
59
|
-
* * `info`—Applies coloring based on info theme color.
|
|
60
|
-
* * `success`— Applies coloring based on success theme color.
|
|
61
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
62
|
-
* * `error`— Applies coloring based on error theme color.
|
|
63
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
64
|
-
* * `light`— Applies coloring based on light theme color.
|
|
65
|
-
* * `inverse`— Applies coloring based on inverse theme color.
|
|
66
|
-
*
|
|
67
|
-
*/
|
|
68
|
-
set themeColor(themeColor) {
|
|
69
|
-
const element = this.element.nativeElement;
|
|
70
|
-
if (this._themeColor) {
|
|
71
|
-
this.renderer.removeClass(element, `!k-color-${this._themeColor}`);
|
|
72
|
-
}
|
|
73
|
-
this._themeColor = themeColor;
|
|
74
|
-
// needed to ensure the theme color will be always applied; e.g. the class .k-button-icon, specific
|
|
75
|
-
// for icon buttons applies "color: inherit" which overwrites the theme color
|
|
76
|
-
if (themeColor) {
|
|
77
|
-
this.renderer.addClass(element, `!k-color-${themeColor}`);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
get themeColor() {
|
|
81
|
-
return this._themeColor;
|
|
82
|
-
}
|
|
83
|
-
/**
|
|
84
|
-
* Specifies the size of the Icon.
|
|
85
|
-
*
|
|
86
|
-
* The possible values are:
|
|
87
|
-
* * `default` (Default) (Font-size: 16px; Width: 16px; Height: 16px)
|
|
88
|
-
* * `xsmall` (Font-size: 12px; Width: 12px; Height: 12px;)
|
|
89
|
-
* * `small` (Font-size: 14px; Width: 14px; Height: 14px;)
|
|
90
|
-
* * `medium` (Font-size: 16px; Width: 16px; Height: 16px;)
|
|
91
|
-
* * `large` (Font-size: 20px; Width: 20px; Height: 20px;)
|
|
92
|
-
* * `xlarge` (Font-size: 24px; Width: 24px; Height: 24px;)
|
|
93
|
-
* * `xxlarge` (Font-size: 32px; Width: 32px; Height: 32px;)
|
|
94
|
-
* * `xxxlarge` (Font-size: 48px; Width: 48px; Height: 48px;)
|
|
95
|
-
*
|
|
96
|
-
*/
|
|
97
|
-
set size(size) {
|
|
98
|
-
const currentClass = sizeClasses[this.size];
|
|
99
|
-
const newClass = sizeClasses[size];
|
|
100
|
-
const element = this.element.nativeElement;
|
|
101
|
-
this.renderer.removeClass(element, currentClass);
|
|
102
|
-
if (size && size !== 'default') {
|
|
103
|
-
this.renderer.addClass(element, newClass);
|
|
104
|
-
}
|
|
105
|
-
this._size = size;
|
|
106
|
-
}
|
|
107
|
-
get size() {
|
|
108
|
-
return this._size;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
IconBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
112
|
-
IconBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: IconBaseDirective, selector: "[kendoIconBase]", inputs: { flip: "flip", themeColor: "themeColor", size: "size" }, host: { properties: { "class.k-flip-h": "this.horizontalFlip", "class.k-flip-v": "this.verticalFlip" } }, ngImport: i0 });
|
|
113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconBaseDirective, decorators: [{
|
|
114
|
-
type: Directive,
|
|
115
|
-
args: [{
|
|
116
|
-
selector: '[kendoIconBase]'
|
|
117
|
-
}]
|
|
118
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { horizontalFlip: [{
|
|
119
|
-
type: HostBinding,
|
|
120
|
-
args: ['class.k-flip-h']
|
|
121
|
-
}], verticalFlip: [{
|
|
122
|
-
type: HostBinding,
|
|
123
|
-
args: ['class.k-flip-v']
|
|
124
|
-
}], flip: [{
|
|
125
|
-
type: Input
|
|
126
|
-
}], themeColor: [{
|
|
127
|
-
type: Input
|
|
128
|
-
}], size: [{
|
|
129
|
-
type: Input
|
|
130
|
-
}] } });
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* Represents the Kendo UI Icon component for Angular.
|
|
134
|
-
*/
|
|
135
|
-
class IconComponent extends IconBaseDirective {
|
|
136
|
-
constructor(element, renderer) {
|
|
137
|
-
super(element, renderer);
|
|
138
|
-
this.element = element;
|
|
139
|
-
this.renderer = renderer;
|
|
140
|
-
this.hostClass = true;
|
|
141
|
-
this.hostAriaHidden = true;
|
|
142
|
-
}
|
|
143
|
-
/**
|
|
144
|
-
* Defines the name for an existing icon in a Kendo UI theme, which will be rendered.
|
|
145
|
-
* All [Kendo UI Icons](slug:icon_list) are supported.
|
|
146
|
-
*/
|
|
147
|
-
set name(name) {
|
|
148
|
-
if (isDocumentAvailable()) {
|
|
149
|
-
const newName = name !== this._name;
|
|
150
|
-
if (newName) {
|
|
151
|
-
const element = this.element.nativeElement;
|
|
152
|
-
this.renderer.removeClass(element, `k-i-${this.name}`);
|
|
153
|
-
this.renderer.addClass(element, `k-i-${name}`);
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
this._name = name;
|
|
157
|
-
}
|
|
158
|
-
get name() {
|
|
159
|
-
return this._name;
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
163
|
-
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IconComponent, isStandalone: true, selector: "kendo-icon", inputs: { name: "name" }, host: { properties: { "class.k-icon": "this.hostClass", "class.k-font-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoIcon"], usesInheritance: true, ngImport: i0, template: '', isInline: true });
|
|
164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, decorators: [{
|
|
165
|
-
type: Component,
|
|
166
|
-
args: [{
|
|
167
|
-
exportAs: 'kendoIcon',
|
|
168
|
-
selector: 'kendo-icon',
|
|
169
|
-
template: '',
|
|
170
|
-
standalone: true
|
|
171
|
-
}]
|
|
172
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
|
|
173
|
-
type: HostBinding,
|
|
174
|
-
args: ['class.k-icon']
|
|
175
|
-
}, {
|
|
176
|
-
type: HostBinding,
|
|
177
|
-
args: ['class.k-font-icon']
|
|
178
|
-
}], hostAriaHidden: [{
|
|
179
|
-
type: HostBinding,
|
|
180
|
-
args: ['attr.aria-hidden']
|
|
181
|
-
}], name: [{
|
|
182
|
-
type: Input
|
|
183
|
-
}] } });
|
|
184
|
-
|
|
185
|
-
const areSame = (i1, i2) => (i1 === null || i1 === void 0 ? void 0 : i1.name) === (i2 === null || i2 === void 0 ? void 0 : i2.name) && i1.content === i2.content && i1.viewBox === i2.viewBox;
|
|
186
|
-
/**
|
|
187
|
-
* Represents the Kendo UI SVG Icon component for Angular.
|
|
188
|
-
*/
|
|
189
|
-
class SVGIconComponent extends IconBaseDirective {
|
|
190
|
-
constructor(domSanitizer, element, renderer) {
|
|
191
|
-
super(element, renderer);
|
|
192
|
-
this.domSanitizer = domSanitizer;
|
|
193
|
-
this.element = element;
|
|
194
|
-
this.renderer = renderer;
|
|
195
|
-
this.hostClass = true;
|
|
196
|
-
this.hostAriaHidden = true;
|
|
197
|
-
}
|
|
198
|
-
/**
|
|
199
|
-
* Defines the SVG icon, which will be rendered. All [Kendo UI SVG Icons](slug:svgicon_list) are supported.
|
|
200
|
-
*/
|
|
201
|
-
set icon(icon) {
|
|
202
|
-
var _a;
|
|
203
|
-
const element = this.element.nativeElement;
|
|
204
|
-
const hasDocument = isDocumentAvailable();
|
|
205
|
-
const newName = (icon === null || icon === void 0 ? void 0 : icon.name) && icon.name !== ((_a = this._icon) === null || _a === void 0 ? void 0 : _a.name);
|
|
206
|
-
if (this._icon && this._icon.name && newName && hasDocument) {
|
|
207
|
-
this.renderer.removeClass(element, `k-svg-i-${this._icon.name}`);
|
|
208
|
-
}
|
|
209
|
-
if (!areSame(icon, this._icon)) {
|
|
210
|
-
this._icon = icon;
|
|
211
|
-
}
|
|
212
|
-
if (hasDocument && newName) {
|
|
213
|
-
this.renderer.addClass(element, `k-svg-i-${this._icon.name}`);
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
get icon() {
|
|
217
|
-
return this._icon;
|
|
218
|
-
}
|
|
219
|
-
get content() {
|
|
220
|
-
return this.domSanitizer.bypassSecurityTrustHtml(this.icon.content);
|
|
221
|
-
}
|
|
222
|
-
get visible() {
|
|
223
|
-
return this.icon && isDocumentAvailable();
|
|
224
|
-
}
|
|
225
|
-
ngOnInit() {
|
|
226
|
-
this.verifyIconProperty();
|
|
227
|
-
}
|
|
228
|
-
verifyIconProperty() {
|
|
229
|
-
if (!isDevMode()) {
|
|
230
|
-
return;
|
|
231
|
-
}
|
|
232
|
-
if (!this._icon) {
|
|
233
|
-
throw new Error(`
|
|
234
|
-
Invalid configuration.
|
|
235
|
-
The input [icon] is required for the Kendo UI SVG Icon component for Angular.
|
|
236
|
-
See https://www.telerik.com/kendo-angular-ui/components/icons/svg-icon
|
|
237
|
-
`);
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
SVGIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SVGIconComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
242
|
-
SVGIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SVGIconComponent, isStandalone: true, selector: "kendo-svg-icon, kendo-svgicon", inputs: { icon: "icon" }, host: { properties: { "class.k-svg-icon": "this.hostClass", "class.k-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoSVGIcon"], usesInheritance: true, ngImport: i0, template: `
|
|
243
|
-
<svg [style.pointerEvents]="'none'" *ngIf="visible" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
244
|
-
[attr.viewBox]="icon.viewBox" [innerHTML]="content">
|
|
245
|
-
</svg>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SVGIconComponent, decorators: [{
|
|
247
|
-
type: Component,
|
|
248
|
-
args: [{
|
|
249
|
-
exportAs: 'kendoSVGIcon',
|
|
250
|
-
selector: 'kendo-svg-icon, kendo-svgicon',
|
|
251
|
-
template: `
|
|
252
|
-
<svg [style.pointerEvents]="'none'" *ngIf="visible" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
253
|
-
[attr.viewBox]="icon.viewBox" [innerHTML]="content">
|
|
254
|
-
</svg>`,
|
|
255
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
256
|
-
standalone: true,
|
|
257
|
-
imports: [NgIf, NgClass]
|
|
258
|
-
}]
|
|
259
|
-
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
|
|
260
|
-
type: HostBinding,
|
|
261
|
-
args: ['class.k-svg-icon']
|
|
262
|
-
}, {
|
|
263
|
-
type: HostBinding,
|
|
264
|
-
args: ['class.k-icon']
|
|
265
|
-
}], hostAriaHidden: [{
|
|
266
|
-
type: HostBinding,
|
|
267
|
-
args: ['attr.aria-hidden']
|
|
268
|
-
}], icon: [{
|
|
269
|
-
type: Input
|
|
270
|
-
}] } });
|
|
271
|
-
|
|
272
|
-
/**
|
|
273
|
-
* @hidden
|
|
274
|
-
*/
|
|
275
|
-
const isPresent = (value) => value !== null && value !== undefined;
|
|
276
|
-
|
|
277
|
-
/**
|
|
278
|
-
* A token that specifies the [IconSettings](slug:api_icons_iconsettings) of the Kendo UI for Angular components ([see example](slug:icon_settings#toc-icons-configuration)).
|
|
279
|
-
*
|
|
280
|
-
* ```ts
|
|
281
|
-
* import { NgModule } from '@angular/core';
|
|
282
|
-
*
|
|
283
|
-
* @NgModule({
|
|
284
|
-
* ...
|
|
285
|
-
* providers: [{ provide: ICON_SETTINGS, useValue: { type: 'svg', size: 'xsmall' }}]
|
|
286
|
-
* })
|
|
287
|
-
* export class AppModule {}
|
|
288
|
-
* ```
|
|
289
|
-
*
|
|
290
|
-
*/
|
|
291
|
-
const ICON_SETTINGS = new InjectionToken('Kendo UI Icon-Settings token');
|
|
292
|
-
|
|
293
|
-
/**
|
|
294
|
-
* A service that returns the current icon settings to be used in subscribers.
|
|
295
|
-
* Use the public `notify` method to change the icon settings dynamically.
|
|
296
|
-
*/
|
|
297
|
-
class IconSettingsService {
|
|
298
|
-
constructor() {
|
|
299
|
-
/**
|
|
300
|
-
* @hidden
|
|
301
|
-
*/
|
|
302
|
-
this.changes = new Subject();
|
|
303
|
-
}
|
|
304
|
-
/**
|
|
305
|
-
* Notifies subscribers that the icon settings were changed.
|
|
306
|
-
*
|
|
307
|
-
* @param iconSettings - (Optional) A new value for the [icon settings token]({% slug api_icons_icon_settings %}).
|
|
308
|
-
*/
|
|
309
|
-
notify(iconSettings) {
|
|
310
|
-
this.changes.next(iconSettings);
|
|
311
|
-
}
|
|
312
|
-
/**
|
|
313
|
-
* Returns the [`SVGIcon`](slug:api_icons_svgicon) object for the provided key.
|
|
314
|
-
* Override in a custom service to provide custom SVG icons.
|
|
315
|
-
*
|
|
316
|
-
* @hidden
|
|
317
|
-
*/
|
|
318
|
-
getSvgIcon(_name) {
|
|
319
|
-
return null;
|
|
320
|
-
}
|
|
321
|
-
/**
|
|
322
|
-
* Returns the list of classes to be rendered on the host `SPAN` element of custom font icons.
|
|
323
|
-
* Override in a custom service to provide classes for custom font icons.
|
|
324
|
-
*
|
|
325
|
-
* @hidden
|
|
326
|
-
*/
|
|
327
|
-
getCustomFontIconClass(_key) {
|
|
328
|
-
return null;
|
|
329
|
-
}
|
|
330
|
-
}
|
|
331
|
-
IconSettingsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
332
|
-
IconSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconSettingsService });
|
|
333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconSettingsService, decorators: [{
|
|
334
|
-
type: Injectable
|
|
335
|
-
}] });
|
|
336
|
-
|
|
337
|
-
/**
|
|
338
|
-
* @hidden
|
|
339
|
-
*/
|
|
340
|
-
class IconsService {
|
|
341
|
-
constructor(_iconSettings, iconSettingsService) {
|
|
342
|
-
this._iconSettings = _iconSettings;
|
|
343
|
-
this.iconSettingsService = iconSettingsService;
|
|
344
|
-
/**
|
|
345
|
-
* Notifies subscribers of the initial icon settings, and upon each call to `notify`.
|
|
346
|
-
*/
|
|
347
|
-
this.changes = new BehaviorSubject(this.iconSettings || { type: 'svg' });
|
|
348
|
-
this.subs = new Subscription();
|
|
349
|
-
if (iconSettingsService) {
|
|
350
|
-
this.subs.add(iconSettingsService.changes
|
|
351
|
-
.pipe(map(iconSettings => isPresent(iconSettings) ? iconSettings : this._iconSettings), tap(iconSettings => this._iconSettings = iconSettings))
|
|
352
|
-
.subscribe(iconSettings => this.changes.next(iconSettings)));
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
/**
|
|
356
|
-
* @hidden
|
|
357
|
-
*/
|
|
358
|
-
get iconSettings() {
|
|
359
|
-
return this._iconSettings;
|
|
360
|
-
}
|
|
361
|
-
ngOnDestroy() {
|
|
362
|
-
this.subs.unsubscribe();
|
|
363
|
-
}
|
|
364
|
-
/**
|
|
365
|
-
* Returns the [`SVGIcon`](slug:api_icons_svgicon) object for the provided key.
|
|
366
|
-
* Override in a custom service to provide custom SVG icons.
|
|
367
|
-
*/
|
|
368
|
-
getSvgIcon(name) {
|
|
369
|
-
const customIcon = this.iconSettingsService && this.iconSettingsService.getSvgIcon(name);
|
|
370
|
-
return customIcon;
|
|
371
|
-
}
|
|
372
|
-
/**
|
|
373
|
-
* Returns the list of classes to be rendered on the host `SPAN` element of custom font icons.
|
|
374
|
-
* Override in a custom service to provide classes for custom font icons.
|
|
375
|
-
*/
|
|
376
|
-
getCustomFontIconClass(key) {
|
|
377
|
-
const customClass = this.iconSettingsService && this.iconSettingsService.getCustomFontIconClass(key);
|
|
378
|
-
return customClass;
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
IconsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconsService, deps: [{ token: ICON_SETTINGS, optional: true }, { token: IconSettingsService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
382
|
-
IconsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconsService, providedIn: 'root' });
|
|
383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconsService, decorators: [{
|
|
384
|
-
type: Injectable,
|
|
385
|
-
args: [{
|
|
386
|
-
providedIn: 'root'
|
|
387
|
-
}]
|
|
388
|
-
}], ctorParameters: function () {
|
|
389
|
-
return [{ type: undefined, decorators: [{
|
|
390
|
-
type: Optional
|
|
391
|
-
}, {
|
|
392
|
-
type: Inject,
|
|
393
|
-
args: [ICON_SETTINGS]
|
|
394
|
-
}] }, { type: IconSettingsService, decorators: [{
|
|
395
|
-
type: Optional
|
|
396
|
-
}] }];
|
|
397
|
-
} });
|
|
398
|
-
|
|
399
|
-
/**
|
|
400
|
-
* @hidden
|
|
401
|
-
*/
|
|
402
|
-
class IconWrapperComponent {
|
|
403
|
-
constructor(iconsService) {
|
|
404
|
-
this.iconsService = iconsService;
|
|
405
|
-
this.hostClass = true;
|
|
406
|
-
/**
|
|
407
|
-
* Provided by consuming components in case an additional k-specific class needs to be rendered
|
|
408
|
-
* on the internal Icon component.
|
|
409
|
-
*/
|
|
410
|
-
this.innerCssClass = '';
|
|
411
|
-
/**
|
|
412
|
-
* Provided by consuming components in case a custom font icon class is set
|
|
413
|
-
* by the developer using the consuming component through its API.
|
|
414
|
-
*/
|
|
415
|
-
this.customFontClass = '';
|
|
416
|
-
this.subs = new Subscription();
|
|
417
|
-
this.subs = iconsService.changes.subscribe(iconSettings => {
|
|
418
|
-
this.iconSettings = iconSettings;
|
|
419
|
-
});
|
|
420
|
-
}
|
|
421
|
-
get customClasses() {
|
|
422
|
-
const classes = [this.customFontClass, this.innerCssClass, this.customFontIconClass].filter(cl => !!cl).join(' ');
|
|
423
|
-
return classes;
|
|
424
|
-
}
|
|
425
|
-
get hasSvgIcon() {
|
|
426
|
-
this.svgIcon = this.iconsService.getSvgIcon(this.name) || this.svgIcon;
|
|
427
|
-
if (this.svgIcon) {
|
|
428
|
-
return true;
|
|
429
|
-
}
|
|
430
|
-
if (isDevMode()) {
|
|
431
|
-
console.groupCollapsed(`Kendo UI for Angular: Icon type is set to 'svg', but only font icon name is provided. The "${this.name}" font icon will be rendered instead.`);
|
|
432
|
-
console.warn(`
|
|
433
|
-
Starting from v7.0.0 (October, 2023) of the Kendo Themes, the font icons will be removed from the theme.
|
|
434
|
-
* To render an SVG icon, update the component configuration by setting the "svgIcon" input to the respective icon definition.
|
|
435
|
-
* To continue to use font icons, install the "@progress/kendo-font-icons" package and import "@progress/kendo-font-icons/dist/index.css".
|
|
436
|
-
|
|
437
|
-
Please note, that font icons are not compatible with a strict Content Security Policy and require the use of the "unsafe-inline" override.
|
|
438
|
-
|
|
439
|
-
For further details, check the following documentation articles:
|
|
440
|
-
https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings
|
|
441
|
-
https://www.telerik.com/kendo-angular-ui/components/styling/icons/
|
|
442
|
-
https://www.telerik.com/kendo-angular-ui/components/styling/svg-icons/
|
|
443
|
-
https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/
|
|
444
|
-
https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
|
|
445
|
-
`);
|
|
446
|
-
console.groupEnd();
|
|
447
|
-
}
|
|
448
|
-
return false;
|
|
449
|
-
}
|
|
450
|
-
get customFontIconClass() {
|
|
451
|
-
return this.iconsService.getCustomFontIconClass(this.name) || this.customFontClass;
|
|
452
|
-
}
|
|
453
|
-
ngOnDestroy() {
|
|
454
|
-
this.subs.unsubscribe();
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
IconWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconWrapperComponent, deps: [{ token: IconsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
458
|
-
IconWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IconWrapperComponent, isStandalone: true, selector: "kendo-icon-wrapper", inputs: { name: "name", svgIcon: "svgIcon", innerCssClass: "innerCssClass", customFontClass: "customFontClass", size: "size" }, host: { properties: { "class.k-icon-wrapper-host": "this.hostClass" } }, exportAs: ["kendoIconWrapper"], ngImport: i0, template: `
|
|
459
|
-
<kendo-svgicon
|
|
460
|
-
*ngIf="iconSettings?.type === 'svg' && hasSvgIcon; else font"
|
|
461
|
-
[ngClass]="innerCssClass"
|
|
462
|
-
[icon]="svgIcon"
|
|
463
|
-
[size]="size || iconSettings?.size"
|
|
464
|
-
[themeColor]="iconSettings?.themeColor"
|
|
465
|
-
[flip]="iconSettings?.flip"></kendo-svgicon>
|
|
466
|
-
<ng-template #font>
|
|
467
|
-
<kendo-icon
|
|
468
|
-
*ngIf="!customFontIconClass; else custom"
|
|
469
|
-
[ngClass]="innerCssClass"
|
|
470
|
-
[name]="name"
|
|
471
|
-
[size]="size || iconSettings?.size"
|
|
472
|
-
[themeColor]="iconSettings?.themeColor"
|
|
473
|
-
[flip]="iconSettings?.flip"></kendo-icon>
|
|
474
|
-
<ng-template #custom>
|
|
475
|
-
<span [ngClass]="customClasses"></span>
|
|
476
|
-
</ng-template>
|
|
477
|
-
</ng-template>
|
|
478
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }] });
|
|
479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconWrapperComponent, decorators: [{
|
|
480
|
-
type: Component,
|
|
481
|
-
args: [{
|
|
482
|
-
exportAs: 'kendoIconWrapper',
|
|
483
|
-
selector: 'kendo-icon-wrapper',
|
|
484
|
-
template: `
|
|
485
|
-
<kendo-svgicon
|
|
486
|
-
*ngIf="iconSettings?.type === 'svg' && hasSvgIcon; else font"
|
|
487
|
-
[ngClass]="innerCssClass"
|
|
488
|
-
[icon]="svgIcon"
|
|
489
|
-
[size]="size || iconSettings?.size"
|
|
490
|
-
[themeColor]="iconSettings?.themeColor"
|
|
491
|
-
[flip]="iconSettings?.flip"></kendo-svgicon>
|
|
492
|
-
<ng-template #font>
|
|
493
|
-
<kendo-icon
|
|
494
|
-
*ngIf="!customFontIconClass; else custom"
|
|
495
|
-
[ngClass]="innerCssClass"
|
|
496
|
-
[name]="name"
|
|
497
|
-
[size]="size || iconSettings?.size"
|
|
498
|
-
[themeColor]="iconSettings?.themeColor"
|
|
499
|
-
[flip]="iconSettings?.flip"></kendo-icon>
|
|
500
|
-
<ng-template #custom>
|
|
501
|
-
<span [ngClass]="customClasses"></span>
|
|
502
|
-
</ng-template>
|
|
503
|
-
</ng-template>
|
|
504
|
-
`,
|
|
505
|
-
standalone: true,
|
|
506
|
-
imports: [NgClass, NgIf, IconComponent, SVGIconComponent]
|
|
507
|
-
}]
|
|
508
|
-
}], ctorParameters: function () { return [{ type: IconsService }]; }, propDecorators: { hostClass: [{
|
|
509
|
-
type: HostBinding,
|
|
510
|
-
args: ['class.k-icon-wrapper-host']
|
|
511
|
-
}], name: [{
|
|
512
|
-
type: Input
|
|
513
|
-
}], svgIcon: [{
|
|
514
|
-
type: Input
|
|
515
|
-
}], innerCssClass: [{
|
|
516
|
-
type: Input
|
|
517
|
-
}], customFontClass: [{
|
|
518
|
-
type: Input
|
|
519
|
-
}], size: [{
|
|
520
|
-
type: Input
|
|
521
|
-
}] } });
|
|
522
|
-
|
|
523
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
524
|
-
/**
|
|
525
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
526
|
-
* definition for the Icon component.
|
|
527
|
-
*
|
|
528
|
-
* @example
|
|
529
|
-
*
|
|
530
|
-
* ```ts-no-run
|
|
531
|
-
* // Import the Icon module
|
|
532
|
-
* import { IconModule } from '@progress/kendo-angular-icons';
|
|
533
|
-
*
|
|
534
|
-
* // The browser platform with a compiler
|
|
535
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
536
|
-
*
|
|
537
|
-
* import { NgModule } from '@angular/core';
|
|
538
|
-
*
|
|
539
|
-
* // Import the app component
|
|
540
|
-
* import { AppComponent } from './app.component';
|
|
541
|
-
*
|
|
542
|
-
* // Define the app module
|
|
543
|
-
* _@NgModule({
|
|
544
|
-
* declarations: [AppComponent], // declare app component
|
|
545
|
-
* imports: [BrowserModule, IconModule], // import Icon module
|
|
546
|
-
* bootstrap: [AppComponent]
|
|
547
|
-
* })
|
|
548
|
-
* export class AppModule {}
|
|
549
|
-
*
|
|
550
|
-
* // Compile and launch the module
|
|
551
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
552
|
-
*
|
|
553
|
-
* ```
|
|
554
|
-
*/
|
|
555
|
-
class IconModule {
|
|
556
|
-
}
|
|
557
|
-
IconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
558
|
-
IconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: IconModule, imports: [IconComponent], exports: [IconComponent] });
|
|
559
|
-
IconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconModule, imports: [IconComponent] });
|
|
560
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconModule, decorators: [{
|
|
561
|
-
type: NgModule,
|
|
562
|
-
args: [{
|
|
563
|
-
exports: [IconComponent],
|
|
564
|
-
imports: [IconComponent]
|
|
565
|
-
}]
|
|
566
|
-
}] });
|
|
567
|
-
|
|
568
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
569
|
-
/**
|
|
570
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
571
|
-
* definition for the SVG Icon component.
|
|
572
|
-
*
|
|
573
|
-
* @example
|
|
574
|
-
*
|
|
575
|
-
* ```ts-no-run
|
|
576
|
-
* // Import the SVG Icon module
|
|
577
|
-
* import { SVGIconModule } from '@progress/kendo-angular-icons';
|
|
578
|
-
*
|
|
579
|
-
* // The browser platform with a compiler
|
|
580
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
581
|
-
*
|
|
582
|
-
* import { NgModule } from '@angular/core';
|
|
583
|
-
*
|
|
584
|
-
* // Import the app component
|
|
585
|
-
* import { AppComponent } from './app.component';
|
|
586
|
-
*
|
|
587
|
-
* // Define the app module
|
|
588
|
-
* _@NgModule({
|
|
589
|
-
* declarations: [AppComponent], // declare app component
|
|
590
|
-
* imports: [BrowserModule, SVGIconModule], // import SVG Icon module
|
|
591
|
-
* bootstrap: [AppComponent]
|
|
592
|
-
* })
|
|
593
|
-
* export class AppModule {}
|
|
594
|
-
*
|
|
595
|
-
* // Compile and launch the module
|
|
596
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
597
|
-
*
|
|
598
|
-
* ```
|
|
599
|
-
*/
|
|
600
|
-
class SVGIconModule {
|
|
601
|
-
}
|
|
602
|
-
SVGIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SVGIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
603
|
-
SVGIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SVGIconModule, imports: [SVGIconComponent], exports: [SVGIconComponent] });
|
|
604
|
-
SVGIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SVGIconModule, imports: [SVGIconComponent] });
|
|
605
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SVGIconModule, decorators: [{
|
|
606
|
-
type: NgModule,
|
|
607
|
-
args: [{
|
|
608
|
-
exports: [SVGIconComponent],
|
|
609
|
-
imports: [SVGIconComponent]
|
|
610
|
-
}]
|
|
611
|
-
}] });
|
|
612
|
-
|
|
613
|
-
/**
|
|
614
|
-
* Utility array that contains all `KendoIcon` related components and directives
|
|
615
|
-
*/
|
|
616
|
-
const KENDO_ICON = [
|
|
617
|
-
IconComponent
|
|
618
|
-
];
|
|
619
|
-
/**
|
|
620
|
-
* Utility array that contains all `KendoSVGIcon` related components and directives
|
|
621
|
-
*/
|
|
622
|
-
const KENDO_SVGICON = [
|
|
623
|
-
SVGIconComponent
|
|
624
|
-
];
|
|
625
|
-
/**
|
|
626
|
-
* Utility array that contains all `@progress/kendo-angular-icons` related components and directives
|
|
627
|
-
*/
|
|
628
|
-
const KENDO_ICONS = [
|
|
629
|
-
...KENDO_ICON,
|
|
630
|
-
...KENDO_SVGICON
|
|
631
|
-
];
|
|
632
|
-
|
|
633
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
634
|
-
/**
|
|
635
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
636
|
-
* definition for the Icons components.
|
|
637
|
-
*
|
|
638
|
-
* @example
|
|
639
|
-
*
|
|
640
|
-
* ```ts-no-run
|
|
641
|
-
* // Import the Icons module
|
|
642
|
-
* import { IconsModule } from '@progress/kendo-angular-icons';
|
|
643
|
-
*
|
|
644
|
-
* // The browser platform with a compiler
|
|
645
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
646
|
-
*
|
|
647
|
-
* import { NgModule } from '@angular/core';
|
|
648
|
-
*
|
|
649
|
-
* // Import the app component
|
|
650
|
-
* import { AppComponent } from './app.component';
|
|
651
|
-
*
|
|
652
|
-
* // Define the app module
|
|
653
|
-
* _@NgModule({
|
|
654
|
-
* declarations: [AppComponent], // declare app component
|
|
655
|
-
* imports: [BrowserModule, IconsModule], // import Icons module
|
|
656
|
-
* bootstrap: [AppComponent]
|
|
657
|
-
* })
|
|
658
|
-
* export class AppModule {}
|
|
659
|
-
*
|
|
660
|
-
* // Compile and launch the module
|
|
661
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
662
|
-
*
|
|
663
|
-
* ```
|
|
664
|
-
*/
|
|
665
|
-
class IconsModule {
|
|
666
|
-
}
|
|
667
|
-
IconsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
668
|
-
IconsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: IconsModule, imports: [IconComponent, SVGIconComponent], exports: [IconComponent, SVGIconComponent] });
|
|
669
|
-
IconsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconsModule, providers: [IconsService], imports: [KENDO_ICONS] });
|
|
670
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconsModule, decorators: [{
|
|
671
|
-
type: NgModule,
|
|
672
|
-
args: [{
|
|
673
|
-
imports: [
|
|
674
|
-
...KENDO_ICONS
|
|
675
|
-
],
|
|
676
|
-
exports: [
|
|
677
|
-
...KENDO_ICONS
|
|
678
|
-
],
|
|
679
|
-
providers: [IconsService]
|
|
680
|
-
}]
|
|
681
|
-
}] });
|
|
682
|
-
|
|
683
|
-
/**
|
|
684
|
-
* Generated bundle index. Do not edit.
|
|
685
|
-
*/
|
|
686
|
-
|
|
687
|
-
export { ICON_SETTINGS, IconComponent, IconModule, IconSettingsService, IconWrapperComponent, IconsModule, IconsService, KENDO_ICON, KENDO_ICONS, KENDO_SVGICON, SVGIconComponent, SVGIconModule };
|
|
688
|
-
|
|
File without changes
|
|
File without changes
|