@progress/kendo-angular-icons 17.0.0-develop.9 → 17.0.1-develop.1
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
package/README.md
CHANGED
|
@@ -1,33 +1,40 @@
|
|
|
1
|
-
<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
|
|
1
|
+
<a href="https://www.telerik.com/kendo-angular-ui/components/icons" target="_blank">
|
|
2
2
|
<img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
|
|
3
3
|
</a>
|
|
4
4
|
|
|
5
|
-
## Kendo UI for Angular Icons Package
|
|
5
|
+
## Kendo UI for Angular Icons Package
|
|
6
6
|
|
|
7
|
-
>
|
|
8
|
-
> *
|
|
9
|
-
> *
|
|
10
|
-
> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-icons) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-icons). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-icons).
|
|
11
|
-
> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
|
|
12
|
-
>
|
|
13
|
-
> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-icons) and speed up your development process!
|
|
7
|
+
> * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)—a commercial UI library.
|
|
8
|
+
> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
|
|
9
|
+
> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
|
|
14
10
|
|
|
15
|
-
Kendo UI for Angular
|
|
11
|
+
The Kendo UI for Angular Icons represent components for displaying font or SVG icons. The Icons are built from the ground up and specifically for Angular, so that you get high-performance icon controls which integrate tightly with your application and with the rest of the Kendo UI for Angular components.
|
|
12
|
+
|
|
13
|
+
## What's Included in the Angular Icons Package
|
|
14
|
+
|
|
15
|
+
The [Angular Icons](https://www.telerik.com/kendo-angular-ui/components/icons) package includes two built-in components:
|
|
16
|
+
|
|
17
|
+
* [Angular Icon](https://www.telerik.com/kendo-angular-ui/components/icons/icon)
|
|
18
|
+
* [Angular SVGIcon](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon)
|
|
19
|
+
|
|
20
|
+
The Icons components allow you customize their appearance. The color and style of the Icons are normally picked up by the current Kendo UI theme, but each aspect of the Icons can be customized by theme variables or configuration options. Kendo UI for Angular delivers a set of popular themes including Bootstrap and Material, all of which can be easily customized with the Progress ThemeBuilder online utility. [Read more about the appearance of the Icon...](https://www.telerik.com/kendo-angular-ui/components/icons/icon/appearance)
|
|
21
|
+
|
|
22
|
+
## Support Options
|
|
23
|
+
|
|
24
|
+
For any issues you might encounter while working with the Kendo UI for Angular Icons, you have the following support channels available:
|
|
25
|
+
|
|
26
|
+
* Industry-leading technical support—Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
|
|
27
|
+
* Product forums—The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
|
|
28
|
+
* Feedback portal—The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
|
|
16
29
|
|
|
17
30
|
## Resources
|
|
18
31
|
|
|
19
|
-
* [
|
|
32
|
+
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
|
|
33
|
+
* [Getting Started with the Kendo UI for Angular Icons](https://www.telerik.com/kendo-angular-ui/components/icons/installation/getting-started)
|
|
20
34
|
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
|
|
21
35
|
* [Blogs](http://www.telerik.com/blogs/kendo-ui)
|
|
22
36
|
* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
|
|
23
37
|
|
|
24
|
-
## Questions and Feedback
|
|
25
|
-
|
|
26
|
-
* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
|
|
27
|
-
* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
|
|
28
|
-
* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
|
|
29
|
-
* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
|
|
30
|
-
|
|
31
38
|
*Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
|
|
32
39
|
|
|
33
40
|
*Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*
|
package/common/icon-base.d.ts
CHANGED
|
@@ -58,5 +58,5 @@ export declare abstract class IconBaseDirective {
|
|
|
58
58
|
_size: IconSize;
|
|
59
59
|
constructor(element: ElementRef, renderer: Renderer2);
|
|
60
60
|
static ɵfac: i0.ɵɵFactoryDeclaration<IconBaseDirective, never>;
|
|
61
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<IconBaseDirective, "[kendoIconBase]", never, { "flip": "flip"; "themeColor": "themeColor"; "size": "size"; }, {}, never, never, false, never>;
|
|
61
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<IconBaseDirective, "[kendoIconBase]", never, { "flip": { "alias": "flip"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
|
|
62
62
|
}
|
package/common/models/flip.d.ts
CHANGED
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
* Copyright © 2024 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
|
-
export
|
|
5
|
+
export type IconType = 'font' | 'svg';
|
package/common/models/size.d.ts
CHANGED
|
@@ -16,4 +16,4 @@
|
|
|
16
16
|
* * `xxxlarge`—Font-size: 48px; Width: 48px; Height: 48px.
|
|
17
17
|
*
|
|
18
18
|
*/
|
|
19
|
-
export
|
|
19
|
+
export type IconSize = 'default' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
|
|
@@ -19,4 +19,4 @@
|
|
|
19
19
|
* * `inverse`— Applies coloring based on inverse theme color.
|
|
20
20
|
*
|
|
21
21
|
*/
|
|
22
|
-
export
|
|
22
|
+
export type IconThemeColor = 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
|
|
@@ -20,17 +20,18 @@ const sizeClasses = {
|
|
|
20
20
|
* @hidden
|
|
21
21
|
*/
|
|
22
22
|
export class IconBaseDirective {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
this.renderer = renderer;
|
|
26
|
-
validatePackage(packageMetadata);
|
|
27
|
-
}
|
|
23
|
+
element;
|
|
24
|
+
renderer;
|
|
28
25
|
get horizontalFlip() {
|
|
29
26
|
return this.flip === 'horizontal' || this.flip === 'both';
|
|
30
27
|
}
|
|
31
28
|
get verticalFlip() {
|
|
32
29
|
return this.flip === 'vertical' || this.flip === 'both';
|
|
33
30
|
}
|
|
31
|
+
/**
|
|
32
|
+
* Flips the icon horizontally, vertically or in both directions.
|
|
33
|
+
*/
|
|
34
|
+
flip;
|
|
34
35
|
/**
|
|
35
36
|
* Specifies the theme color for the Icon.
|
|
36
37
|
*
|
|
@@ -90,10 +91,17 @@ export class IconBaseDirective {
|
|
|
90
91
|
get size() {
|
|
91
92
|
return this._size;
|
|
92
93
|
}
|
|
94
|
+
_themeColor;
|
|
95
|
+
_size;
|
|
96
|
+
constructor(element, renderer) {
|
|
97
|
+
this.element = element;
|
|
98
|
+
this.renderer = renderer;
|
|
99
|
+
validatePackage(packageMetadata);
|
|
100
|
+
}
|
|
101
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
102
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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 });
|
|
93
103
|
}
|
|
94
|
-
|
|
95
|
-
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 });
|
|
96
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconBaseDirective, decorators: [{
|
|
104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconBaseDirective, decorators: [{
|
|
97
105
|
type: Directive,
|
|
98
106
|
args: [{
|
|
99
107
|
selector: '[kendoIconBase]'
|
|
@@ -10,12 +10,10 @@ import * as i0 from "@angular/core";
|
|
|
10
10
|
* Use the public `notify` method to change the icon settings dynamically.
|
|
11
11
|
*/
|
|
12
12
|
export class IconSettingsService {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
this.changes = new Subject();
|
|
18
|
-
}
|
|
13
|
+
/**
|
|
14
|
+
* @hidden
|
|
15
|
+
*/
|
|
16
|
+
changes = new Subject();
|
|
19
17
|
/**
|
|
20
18
|
* Notifies subscribers that the icon settings were changed.
|
|
21
19
|
*
|
|
@@ -42,9 +40,9 @@ export class IconSettingsService {
|
|
|
42
40
|
getCustomFontIconClass(_key) {
|
|
43
41
|
return null;
|
|
44
42
|
}
|
|
43
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
44
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconSettingsService });
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
IconSettingsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconSettingsService });
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconSettingsService, decorators: [{
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconSettingsService, decorators: [{
|
|
49
47
|
type: Injectable
|
|
50
48
|
}] });
|
|
@@ -14,14 +14,16 @@ import * as i1 from "./icon-settings.service";
|
|
|
14
14
|
* @hidden
|
|
15
15
|
*/
|
|
16
16
|
export class IconsService {
|
|
17
|
+
_iconSettings;
|
|
18
|
+
iconSettingsService;
|
|
19
|
+
/**
|
|
20
|
+
* Notifies subscribers of the initial icon settings, and upon each call to `notify`.
|
|
21
|
+
*/
|
|
22
|
+
changes = new BehaviorSubject(this.iconSettings || { type: 'svg' });
|
|
23
|
+
subs = new Subscription();
|
|
17
24
|
constructor(_iconSettings, iconSettingsService) {
|
|
18
25
|
this._iconSettings = _iconSettings;
|
|
19
26
|
this.iconSettingsService = iconSettingsService;
|
|
20
|
-
/**
|
|
21
|
-
* Notifies subscribers of the initial icon settings, and upon each call to `notify`.
|
|
22
|
-
*/
|
|
23
|
-
this.changes = new BehaviorSubject(this.iconSettings || { type: 'svg' });
|
|
24
|
-
this.subs = new Subscription();
|
|
25
27
|
if (iconSettingsService) {
|
|
26
28
|
this.subs.add(iconSettingsService.changes
|
|
27
29
|
.pipe(map(iconSettings => isPresent(iconSettings) ? iconSettings : this._iconSettings), tap(iconSettings => this._iconSettings = iconSettings))
|
|
@@ -53,10 +55,10 @@ export class IconsService {
|
|
|
53
55
|
const customClass = this.iconSettingsService && this.iconSettingsService.getCustomFontIconClass(key);
|
|
54
56
|
return customClass;
|
|
55
57
|
}
|
|
58
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsService, deps: [{ token: ICON_SETTINGS, optional: true }, { token: i1.IconSettingsService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
59
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsService, providedIn: 'root' });
|
|
56
60
|
}
|
|
57
|
-
|
|
58
|
-
IconsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconsService, providedIn: 'root' });
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconsService, decorators: [{
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsService, decorators: [{
|
|
60
62
|
type: Injectable,
|
|
61
63
|
args: [{
|
|
62
64
|
providedIn: 'root'
|
|
@@ -10,13 +10,10 @@ import * as i0 from "@angular/core";
|
|
|
10
10
|
* Represents the Kendo UI Icon component for Angular.
|
|
11
11
|
*/
|
|
12
12
|
export class IconComponent extends IconBaseDirective {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
this.hostClass = true;
|
|
18
|
-
this.hostAriaHidden = true;
|
|
19
|
-
}
|
|
13
|
+
element;
|
|
14
|
+
renderer;
|
|
15
|
+
hostClass = true;
|
|
16
|
+
hostAriaHidden = true;
|
|
20
17
|
/**
|
|
21
18
|
* Defines the name for an existing icon in a Kendo UI theme, which will be rendered.
|
|
22
19
|
* All [Kendo UI Icons](slug:icon_list) are supported.
|
|
@@ -35,10 +32,16 @@ export class IconComponent extends IconBaseDirective {
|
|
|
35
32
|
get name() {
|
|
36
33
|
return this._name;
|
|
37
34
|
}
|
|
35
|
+
_name;
|
|
36
|
+
constructor(element, renderer) {
|
|
37
|
+
super(element, renderer);
|
|
38
|
+
this.element = element;
|
|
39
|
+
this.renderer = renderer;
|
|
40
|
+
}
|
|
41
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
42
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 });
|
|
38
43
|
}
|
|
39
|
-
|
|
40
|
-
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 });
|
|
41
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, decorators: [{
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconComponent, decorators: [{
|
|
42
45
|
type: Component,
|
|
43
46
|
args: [{
|
|
44
47
|
exportAs: 'kendoIcon',
|
|
@@ -14,28 +14,47 @@ import * as i1 from "../common/icons.service";
|
|
|
14
14
|
* @hidden
|
|
15
15
|
*/
|
|
16
16
|
export class IconWrapperComponent {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
17
|
+
iconsService;
|
|
18
|
+
hostClass = true;
|
|
19
|
+
/**
|
|
20
|
+
* Defines the name for an existing font icon in a Kendo UI theme, which will be rendered.
|
|
21
|
+
* All [Kendo UI Icons]({% slug icons %}#toc-list-of-font-icons) are supported.
|
|
22
|
+
*/
|
|
23
|
+
name;
|
|
24
|
+
/**
|
|
25
|
+
* Defines an [SVGIcon](slug:api_icons_svgicon) to be rendered.
|
|
26
|
+
*/
|
|
27
|
+
svgIcon;
|
|
28
|
+
/**
|
|
29
|
+
* Provided by consuming components in case an additional k-specific class needs to be rendered
|
|
30
|
+
* on the internal Icon component.
|
|
31
|
+
*/
|
|
32
|
+
innerCssClass = '';
|
|
33
|
+
/**
|
|
34
|
+
* Provided by consuming components in case a custom font icon class is set
|
|
35
|
+
* by the developer using the consuming component through its API.
|
|
36
|
+
*/
|
|
37
|
+
customFontClass = '';
|
|
38
|
+
/**
|
|
39
|
+
* Specifies the size of the Icon.
|
|
40
|
+
*
|
|
41
|
+
* The possible values are:
|
|
42
|
+
* * `default` (Default) (Font-size: 16px; Width: 16px; Height: 16px)
|
|
43
|
+
* * `xsmall` (Font-size: 12px; Width: 12px; Height: 12px;)
|
|
44
|
+
* * `small` (Font-size: 14px; Width: 14px; Height: 14px;)
|
|
45
|
+
* * `medium` (Font-size: 16px; Width: 16px; Height: 16px;)
|
|
46
|
+
* * `large` (Font-size: 20px; Width: 20px; Height: 20px;)
|
|
47
|
+
* * `xlarge` (Font-size: 24px; Width: 24px; Height: 24px;)
|
|
48
|
+
* * `xxlarge` (Font-size: 32px; Width: 32px; Height: 32px;)
|
|
49
|
+
* * `xxxlarge` (Font-size: 48px; Width: 48px; Height: 48px;)
|
|
50
|
+
*
|
|
51
|
+
*/
|
|
52
|
+
size;
|
|
35
53
|
get customClasses() {
|
|
36
54
|
const classes = [this.customFontClass, this.innerCssClass, this.customFontIconClass].filter(cl => !!cl).join(' ');
|
|
37
55
|
return classes;
|
|
38
56
|
}
|
|
57
|
+
iconSettings;
|
|
39
58
|
get hasSvgIcon() {
|
|
40
59
|
this.svgIcon = this.iconsService.getSvgIcon(this.name) || this.svgIcon;
|
|
41
60
|
if (this.svgIcon) {
|
|
@@ -64,12 +83,18 @@ https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
|
|
|
64
83
|
get customFontIconClass() {
|
|
65
84
|
return this.iconsService.getCustomFontIconClass(this.name) || this.customFontClass;
|
|
66
85
|
}
|
|
86
|
+
subs = new Subscription();
|
|
87
|
+
constructor(iconsService) {
|
|
88
|
+
this.iconsService = iconsService;
|
|
89
|
+
this.subs = iconsService.changes.subscribe(iconSettings => {
|
|
90
|
+
this.iconSettings = iconSettings;
|
|
91
|
+
});
|
|
92
|
+
}
|
|
67
93
|
ngOnDestroy() {
|
|
68
94
|
this.subs.unsubscribe();
|
|
69
95
|
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
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: `
|
|
96
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconWrapperComponent, deps: [{ token: i1.IconsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
97
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: `
|
|
73
98
|
<kendo-svgicon
|
|
74
99
|
*ngIf="iconSettings?.type === 'svg' && hasSvgIcon; else font"
|
|
75
100
|
[ngClass]="innerCssClass"
|
|
@@ -90,7 +115,8 @@ IconWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
90
115
|
</ng-template>
|
|
91
116
|
</ng-template>
|
|
92
117
|
`, 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"] }] });
|
|
93
|
-
|
|
118
|
+
}
|
|
119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconWrapperComponent, decorators: [{
|
|
94
120
|
type: Component,
|
|
95
121
|
args: [{
|
|
96
122
|
exportAs: 'kendoIconWrapper',
|
|
@@ -38,11 +38,11 @@ import * as i0 from "@angular/core";
|
|
|
38
38
|
* ```
|
|
39
39
|
*/
|
|
40
40
|
export class IconModule {
|
|
41
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
42
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IconModule, imports: [IconComponent], exports: [IconComponent] });
|
|
43
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconModule });
|
|
41
44
|
}
|
|
42
|
-
|
|
43
|
-
IconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: IconModule, imports: [IconComponent], exports: [IconComponent] });
|
|
44
|
-
IconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconModule, imports: [IconComponent] });
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconModule, decorators: [{
|
|
45
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconModule, decorators: [{
|
|
46
46
|
type: NgModule,
|
|
47
47
|
args: [{
|
|
48
48
|
exports: [IconComponent],
|
|
@@ -41,11 +41,11 @@ import * as i2 from "./svg-icon/svg-icon.component";
|
|
|
41
41
|
* ```
|
|
42
42
|
*/
|
|
43
43
|
export class IconsModule {
|
|
44
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
45
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IconsModule, imports: [i1.IconComponent, i2.SVGIconComponent], exports: [i1.IconComponent, i2.SVGIconComponent] });
|
|
46
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsModule, providers: [IconsService] });
|
|
44
47
|
}
|
|
45
|
-
|
|
46
|
-
IconsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: IconsModule, imports: [i1.IconComponent, i2.SVGIconComponent], exports: [i1.IconComponent, i2.SVGIconComponent] });
|
|
47
|
-
IconsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconsModule, providers: [IconsService], imports: [KENDO_ICONS] });
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconsModule, decorators: [{
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsModule, decorators: [{
|
|
49
49
|
type: NgModule,
|
|
50
50
|
args: [{
|
|
51
51
|
imports: [
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-icons',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '17.0.
|
|
12
|
+
publishDate: 1731429572,
|
|
13
|
+
version: '17.0.1-develop.1',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -14,14 +14,11 @@ const areSame = (i1, i2) => i1?.name === i2?.name && i1.content === i2.content &
|
|
|
14
14
|
* Represents the Kendo UI SVG Icon component for Angular.
|
|
15
15
|
*/
|
|
16
16
|
export class SVGIconComponent extends IconBaseDirective {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
this.hostClass = true;
|
|
23
|
-
this.hostAriaHidden = true;
|
|
24
|
-
}
|
|
17
|
+
domSanitizer;
|
|
18
|
+
element;
|
|
19
|
+
renderer;
|
|
20
|
+
hostClass = true;
|
|
21
|
+
hostAriaHidden = true;
|
|
25
22
|
/**
|
|
26
23
|
* Defines the SVG icon, which will be rendered. All [Kendo UI SVG Icons](slug:svgicon_list) are supported.
|
|
27
24
|
*/
|
|
@@ -48,6 +45,13 @@ export class SVGIconComponent extends IconBaseDirective {
|
|
|
48
45
|
get visible() {
|
|
49
46
|
return this.icon && isDocumentAvailable();
|
|
50
47
|
}
|
|
48
|
+
_icon;
|
|
49
|
+
constructor(domSanitizer, element, renderer) {
|
|
50
|
+
super(element, renderer);
|
|
51
|
+
this.domSanitizer = domSanitizer;
|
|
52
|
+
this.element = element;
|
|
53
|
+
this.renderer = renderer;
|
|
54
|
+
}
|
|
51
55
|
ngOnInit() {
|
|
52
56
|
this.verifyIconProperty();
|
|
53
57
|
}
|
|
@@ -63,13 +67,13 @@ export class SVGIconComponent extends IconBaseDirective {
|
|
|
63
67
|
`);
|
|
64
68
|
}
|
|
65
69
|
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
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: `
|
|
70
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SVGIconComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
71
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: `
|
|
69
72
|
<svg [style.pointerEvents]="'none'" *ngIf="visible" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
70
73
|
[attr.viewBox]="icon.viewBox" [innerHTML]="content">
|
|
71
74
|
</svg>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
72
|
-
|
|
75
|
+
}
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SVGIconComponent, decorators: [{
|
|
73
77
|
type: Component,
|
|
74
78
|
args: [{
|
|
75
79
|
exportAs: 'kendoSVGIcon',
|
|
@@ -38,11 +38,11 @@ import * as i0 from "@angular/core";
|
|
|
38
38
|
* ```
|
|
39
39
|
*/
|
|
40
40
|
export class SVGIconModule {
|
|
41
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SVGIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
42
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SVGIconModule, imports: [SVGIconComponent], exports: [SVGIconComponent] });
|
|
43
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SVGIconModule });
|
|
41
44
|
}
|
|
42
|
-
|
|
43
|
-
SVGIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SVGIconModule, imports: [SVGIconComponent], exports: [SVGIconComponent] });
|
|
44
|
-
SVGIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SVGIconModule, imports: [SVGIconComponent] });
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SVGIconModule, decorators: [{
|
|
45
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SVGIconModule, decorators: [{
|
|
46
46
|
type: NgModule,
|
|
47
47
|
args: [{
|
|
48
48
|
exports: [SVGIconComponent],
|