@coreui/icons-angular 4.3.0 → 4.3.9

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.
@@ -4,385 +4,385 @@ import * as i1 from '@angular/platform-browser';
4
4
  import * as i3 from '@angular/common';
5
5
  import { CommonModule } from '@angular/common';
6
6
 
7
- class IconSetService {
8
- constructor() {
9
- this._iconNames = {};
10
- this._icons = {};
11
- }
12
- get iconNames() {
13
- return this._iconNames;
14
- }
15
- ;
16
- get icons() {
17
- return this._icons;
18
- }
19
- set icons(iconSet) {
20
- for (const iconsKey in iconSet) {
21
- this._iconNames[iconsKey] = iconsKey;
22
- }
23
- this._icons = iconSet;
24
- }
25
- getIcon(name) {
26
- const icon = this.icons[name];
27
- if (!icon) {
28
- console.warn(`CoreUI WARN: Icon ${name} is not registered in IconService`);
29
- }
30
- return this.icons[name];
31
- }
32
- }
33
- IconSetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconSetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
34
- IconSetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconSetService, providedIn: 'root' });
35
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconSetService, decorators: [{
36
- type: Injectable,
37
- args: [{
38
- providedIn: 'root'
39
- }]
7
+ class IconSetService {
8
+ constructor() {
9
+ this._iconNames = {};
10
+ this._icons = {};
11
+ }
12
+ get iconNames() {
13
+ return this._iconNames;
14
+ }
15
+ ;
16
+ get icons() {
17
+ return this._icons;
18
+ }
19
+ set icons(iconSet) {
20
+ for (const iconsKey in iconSet) {
21
+ this._iconNames[iconsKey] = iconsKey;
22
+ }
23
+ this._icons = iconSet;
24
+ }
25
+ getIcon(name) {
26
+ const icon = this.icons[name];
27
+ if (!icon) {
28
+ console.warn(`CoreUI WARN: Icon ${name} is not registered in IconService`);
29
+ }
30
+ return this.icons[name];
31
+ }
32
+ }
33
+ IconSetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconSetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
34
+ IconSetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconSetService, providedIn: 'root' });
35
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconSetService, decorators: [{
36
+ type: Injectable,
37
+ args: [{
38
+ providedIn: 'root'
39
+ }]
40
40
  }], ctorParameters: function () { return []; } });
41
41
 
42
- class IconSetModule {
43
- constructor(parentModule) {
44
- if (parentModule) {
45
- throw new Error('CoreUI IconSetModule is already loaded. Import it in the AppModule only');
46
- }
47
- }
48
- static forRoot() {
49
- return {
50
- ngModule: IconSetModule,
51
- providers: [
52
- { provide: IconSetService }
53
- ]
54
- };
55
- }
56
- }
57
- IconSetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconSetModule, deps: [{ token: IconSetModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule });
58
- IconSetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: IconSetModule, imports: [CommonModule] });
59
- IconSetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconSetModule, providers: [
60
- IconSetService
61
- ], imports: [CommonModule] });
62
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconSetModule, decorators: [{
63
- type: NgModule,
64
- args: [{
65
- imports: [
66
- CommonModule
67
- ],
68
- providers: [
69
- IconSetService
70
- ]
71
- }]
72
- }], ctorParameters: function () { return [{ type: IconSetModule, decorators: [{
73
- type: Optional
74
- }, {
75
- type: SkipSelf
42
+ class IconSetModule {
43
+ constructor(parentModule) {
44
+ if (parentModule) {
45
+ throw new Error('CoreUI IconSetModule is already loaded. Import it in the AppModule only');
46
+ }
47
+ }
48
+ static forRoot() {
49
+ return {
50
+ ngModule: IconSetModule,
51
+ providers: [
52
+ { provide: IconSetService }
53
+ ]
54
+ };
55
+ }
56
+ }
57
+ IconSetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconSetModule, deps: [{ token: IconSetModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule });
58
+ IconSetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.2", ngImport: i0, type: IconSetModule, imports: [CommonModule] });
59
+ IconSetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconSetModule, providers: [
60
+ IconSetService
61
+ ], imports: [CommonModule] });
62
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconSetModule, decorators: [{
63
+ type: NgModule,
64
+ args: [{
65
+ imports: [
66
+ CommonModule
67
+ ],
68
+ providers: [
69
+ IconSetService
70
+ ]
71
+ }]
72
+ }], ctorParameters: function () { return [{ type: IconSetModule, decorators: [{
73
+ type: Optional
74
+ }, {
75
+ type: SkipSelf
76
76
  }] }]; } });
77
77
 
78
- class IconDirective {
79
- constructor(renderer, elementRef, sanitizer, iconSet) {
80
- this.renderer = renderer;
81
- this.elementRef = elementRef;
82
- this.sanitizer = sanitizer;
83
- this.iconSet = iconSet;
84
- this.size = '';
85
- this.xmlns = 'http://www.w3.org/2000/svg';
86
- this.pointerEvents = 'none';
87
- this.role = 'img';
88
- }
89
- set name(name) {
90
- this._name = name?.includes('-') ? this.toCamelCase(name) : name;
91
- }
92
- get name() {
93
- return this._name;
94
- }
95
- set viewBox(viewBox) {
96
- this._viewBox = viewBox;
97
- }
98
- get viewBox() {
99
- return this._viewBox ?? this.scale;
100
- }
101
- get hostClasses() {
102
- const classes = {
103
- icon: true,
104
- [`icon-${this.computedSize}`]: !!this.computedSize
105
- };
106
- return this.customClasses ?? classes;
107
- }
108
- get innerHtml() {
109
- const code = Array.isArray(this.code) ? this.code[1] || this.code[0] : this.code ?? '';
110
- // todo proper sanitize
111
- // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
112
- return this.sanitizer.bypassSecurityTrustHtml((this.titleCode + code) ?? '');
113
- }
114
- get titleCode() {
115
- return this.title ? `<title>${this.title}</title>` : '';
116
- }
117
- get code() {
118
- if (this.content) {
119
- return this.content;
120
- }
121
- if (this.iconSet && this.name) {
122
- return this.iconSet.getIcon(this.name);
123
- }
124
- if (this.name && !this.iconSet?.icons[this.name])
125
- console.warn(`c-icon component: icon name '${this.name}' does not exist for IconSet service. ` +
126
- `To use icon by 'name' prop you need to add it to IconSet service. \n`, this.name);
127
- return undefined;
128
- }
129
- get scale() {
130
- return Array.isArray(this.code) && this.code.length > 1 ? `0 0 ${this.code[0]}` : '0 0 64 64';
131
- }
132
- get computedSize() {
133
- const addCustom = !this.size && (this.width || this.height);
134
- return this.size === 'custom' || addCustom ? 'custom-size' : this.size;
135
- }
136
- get computedClasses() {
137
- const classes = {
138
- icon: true,
139
- [`icon-${this.computedSize}`]: !!this.computedSize
140
- };
141
- return !!this.customClasses ? this.customClasses : classes;
142
- }
143
- toCamelCase(str) {
144
- return str.replace(/([-_][a-z0-9])/ig, ($1) => {
145
- return $1.toUpperCase().replace('-', '');
146
- });
147
- }
148
- }
149
- IconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: IconSetService }], target: i0.ɵɵFactoryTarget.Directive });
150
- IconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: IconDirective, selector: "svg[cIcon]", inputs: { content: ["cIcon", "content"], size: "size", title: "title", customClasses: "customClasses", width: "width", height: "height", name: "name", viewBox: "viewBox", xmlns: "xmlns", pointerEvents: ["pointer-events", "pointerEvents"], role: "role" }, host: { properties: { "attr.viewBox": "this.viewBox", "attr.xmlns": "this.xmlns", "attr.pointer-events": "this.pointerEvents", "attr.role": "this.role", "class": "this.hostClasses", "innerHtml": "this.innerHtml" } }, exportAs: ["cIcon"], ngImport: i0 });
151
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconDirective, decorators: [{
152
- type: Directive,
153
- args: [{
154
- selector: 'svg[cIcon]',
155
- exportAs: 'cIcon'
156
- }]
157
- }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.DomSanitizer }, { type: IconSetService }]; }, propDecorators: { content: [{
158
- type: Input,
159
- args: ['cIcon']
160
- }], size: [{
161
- type: Input
162
- }], title: [{
163
- type: Input
164
- }], customClasses: [{
165
- type: Input
166
- }], width: [{
167
- type: Input
168
- }], height: [{
169
- type: Input
170
- }], name: [{
171
- type: Input
172
- }], viewBox: [{
173
- type: HostBinding,
174
- args: ['attr.viewBox']
175
- }, {
176
- type: Input
177
- }], xmlns: [{
178
- type: HostBinding,
179
- args: ['attr.xmlns']
180
- }, {
181
- type: Input
182
- }], pointerEvents: [{
183
- type: HostBinding,
184
- args: ['attr.pointer-events']
185
- }, {
186
- type: Input,
187
- args: ['pointer-events']
188
- }], role: [{
189
- type: HostBinding,
190
- args: ['attr.role']
191
- }, {
192
- type: Input
193
- }], hostClasses: [{
194
- type: HostBinding,
195
- args: ['class']
196
- }], innerHtml: [{
197
- type: HostBinding,
198
- args: ['innerHtml']
78
+ class IconDirective {
79
+ set name(name) {
80
+ this._name = name?.includes('-') ? this.toCamelCase(name) : name;
81
+ }
82
+ get name() {
83
+ return this._name;
84
+ }
85
+ set viewBox(viewBox) {
86
+ this._viewBox = viewBox;
87
+ }
88
+ get viewBox() {
89
+ return this._viewBox ?? this.scale;
90
+ }
91
+ get hostClasses() {
92
+ const classes = {
93
+ icon: true,
94
+ [`icon-${this.computedSize}`]: !!this.computedSize
95
+ };
96
+ return this.customClasses ?? classes;
97
+ }
98
+ get innerHtml() {
99
+ const code = Array.isArray(this.code) ? this.code[1] || this.code[0] : this.code ?? '';
100
+ // todo proper sanitize
101
+ // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
102
+ return this.sanitizer.bypassSecurityTrustHtml((this.titleCode + code) ?? '');
103
+ }
104
+ constructor(renderer, elementRef, sanitizer, iconSet) {
105
+ this.renderer = renderer;
106
+ this.elementRef = elementRef;
107
+ this.sanitizer = sanitizer;
108
+ this.iconSet = iconSet;
109
+ this.size = '';
110
+ this.xmlns = 'http://www.w3.org/2000/svg';
111
+ this.pointerEvents = 'none';
112
+ this.role = 'img';
113
+ }
114
+ get titleCode() {
115
+ return this.title ? `<title>${this.title}</title>` : '';
116
+ }
117
+ get code() {
118
+ if (this.content) {
119
+ return this.content;
120
+ }
121
+ if (this.iconSet && this.name) {
122
+ return this.iconSet.getIcon(this.name);
123
+ }
124
+ if (this.name && !this.iconSet?.icons[this.name])
125
+ console.warn(`c-icon component: icon name '${this.name}' does not exist for IconSet service. ` +
126
+ `To use icon by 'name' prop you need to add it to IconSet service. \n`, this.name);
127
+ return undefined;
128
+ }
129
+ get scale() {
130
+ return Array.isArray(this.code) && this.code.length > 1 ? `0 0 ${this.code[0]}` : '0 0 64 64';
131
+ }
132
+ get computedSize() {
133
+ const addCustom = !this.size && (this.width || this.height);
134
+ return this.size === 'custom' || addCustom ? 'custom-size' : this.size;
135
+ }
136
+ get computedClasses() {
137
+ const classes = {
138
+ icon: true,
139
+ [`icon-${this.computedSize}`]: !!this.computedSize
140
+ };
141
+ return !!this.customClasses ? this.customClasses : classes;
142
+ }
143
+ toCamelCase(str) {
144
+ return str.replace(/([-_][a-z0-9])/ig, ($1) => {
145
+ return $1.toUpperCase().replace('-', '');
146
+ });
147
+ }
148
+ }
149
+ IconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: IconSetService }], target: i0.ɵɵFactoryTarget.Directive });
150
+ IconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.2", type: IconDirective, selector: "svg[cIcon]", inputs: { content: ["cIcon", "content"], size: "size", title: "title", customClasses: "customClasses", width: "width", height: "height", name: "name", viewBox: "viewBox", xmlns: "xmlns", pointerEvents: ["pointer-events", "pointerEvents"], role: "role" }, host: { properties: { "attr.viewBox": "this.viewBox", "attr.xmlns": "this.xmlns", "attr.pointer-events": "this.pointerEvents", "attr.role": "this.role", "class": "this.hostClasses", "innerHtml": "this.innerHtml" } }, exportAs: ["cIcon"], ngImport: i0 });
151
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconDirective, decorators: [{
152
+ type: Directive,
153
+ args: [{
154
+ selector: 'svg[cIcon]',
155
+ exportAs: 'cIcon'
156
+ }]
157
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.DomSanitizer }, { type: IconSetService }]; }, propDecorators: { content: [{
158
+ type: Input,
159
+ args: ['cIcon']
160
+ }], size: [{
161
+ type: Input
162
+ }], title: [{
163
+ type: Input
164
+ }], customClasses: [{
165
+ type: Input
166
+ }], width: [{
167
+ type: Input
168
+ }], height: [{
169
+ type: Input
170
+ }], name: [{
171
+ type: Input
172
+ }], viewBox: [{
173
+ type: HostBinding,
174
+ args: ['attr.viewBox']
175
+ }, {
176
+ type: Input
177
+ }], xmlns: [{
178
+ type: HostBinding,
179
+ args: ['attr.xmlns']
180
+ }, {
181
+ type: Input
182
+ }], pointerEvents: [{
183
+ type: HostBinding,
184
+ args: ['attr.pointer-events']
185
+ }, {
186
+ type: Input,
187
+ args: ['pointer-events']
188
+ }], role: [{
189
+ type: HostBinding,
190
+ args: ['attr.role']
191
+ }, {
192
+ type: Input
193
+ }], hostClasses: [{
194
+ type: HostBinding,
195
+ args: ['class']
196
+ }], innerHtml: [{
197
+ type: HostBinding,
198
+ args: ['innerHtml']
199
199
  }] } });
200
200
 
201
- class HtmlAttributesDirective {
202
- constructor(renderer, el) {
203
- this.renderer = renderer;
204
- this.el = el;
205
- }
206
- ngOnInit() {
207
- const attribs = this.cHtmlAttr;
208
- for (const attr in attribs) {
209
- if (attr === 'style' && typeof (attribs[attr]) === 'object') {
210
- this.setStyle(attribs[attr]);
211
- }
212
- else if (attr === 'class') {
213
- this.addClass(attribs[attr]);
214
- }
215
- else {
216
- this.setAttrib(attr, attribs[attr]);
217
- }
218
- }
219
- }
220
- setStyle(styles) {
221
- // tslint:disable-next-line:forin
222
- for (const style in styles) {
223
- this.renderer.setStyle(this.el.nativeElement, style, styles[style]);
224
- }
225
- }
226
- addClass(classes) {
227
- const classArray = (Array.isArray(classes) ? classes : classes.split(' '));
228
- classArray.filter((element) => element.length > 0).forEach(element => {
229
- this.renderer.addClass(this.el.nativeElement, element);
230
- });
231
- }
232
- setAttrib(key, value) {
233
- value !== null ?
234
- this.renderer.setAttribute(this.el.nativeElement, key, value) :
235
- this.renderer.removeAttribute(this.el.nativeElement, key);
236
- }
237
- }
238
- HtmlAttributesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HtmlAttributesDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
239
- HtmlAttributesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: { cHtmlAttr: "cHtmlAttr" }, exportAs: ["cHtmlAttr"], ngImport: i0 });
240
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HtmlAttributesDirective, decorators: [{
241
- type: Directive,
242
- args: [{
243
- selector: '[cHtmlAttr]',
244
- exportAs: 'cHtmlAttr'
245
- }]
246
- }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { cHtmlAttr: [{
247
- type: Input
201
+ class HtmlAttributesDirective {
202
+ constructor(renderer, el) {
203
+ this.renderer = renderer;
204
+ this.el = el;
205
+ }
206
+ ngOnInit() {
207
+ const attribs = this.cHtmlAttr;
208
+ for (const attr in attribs) {
209
+ if (attr === 'style' && typeof (attribs[attr]) === 'object') {
210
+ this.setStyle(attribs[attr]);
211
+ }
212
+ else if (attr === 'class') {
213
+ this.addClass(attribs[attr]);
214
+ }
215
+ else {
216
+ this.setAttrib(attr, attribs[attr]);
217
+ }
218
+ }
219
+ }
220
+ setStyle(styles) {
221
+ // tslint:disable-next-line:forin
222
+ for (const style in styles) {
223
+ this.renderer.setStyle(this.el.nativeElement, style, styles[style]);
224
+ }
225
+ }
226
+ addClass(classes) {
227
+ const classArray = (Array.isArray(classes) ? classes : classes.split(' '));
228
+ classArray.filter((element) => element.length > 0).forEach(element => {
229
+ this.renderer.addClass(this.el.nativeElement, element);
230
+ });
231
+ }
232
+ setAttrib(key, value) {
233
+ value !== null ?
234
+ this.renderer.setAttribute(this.el.nativeElement, key, value) :
235
+ this.renderer.removeAttribute(this.el.nativeElement, key);
236
+ }
237
+ }
238
+ HtmlAttributesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: HtmlAttributesDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
239
+ HtmlAttributesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.2", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: { cHtmlAttr: "cHtmlAttr" }, exportAs: ["cHtmlAttr"], ngImport: i0 });
240
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: HtmlAttributesDirective, decorators: [{
241
+ type: Directive,
242
+ args: [{
243
+ selector: '[cHtmlAttr]',
244
+ exportAs: 'cHtmlAttr'
245
+ }]
246
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { cHtmlAttr: [{
247
+ type: Input
248
248
  }] } });
249
249
 
250
- class IconComponent {
251
- constructor(renderer, elementRef, sanitizer, iconSet) {
252
- this.renderer = renderer;
253
- this.elementRef = elementRef;
254
- this.sanitizer = sanitizer;
255
- this.iconSet = iconSet;
256
- this.attributes = { role: 'img' };
257
- this.size = '';
258
- this.use = '';
259
- this.customClasses = '';
260
- this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');
261
- }
262
- set name(name) {
263
- this._name = name.includes('-') ? this.toCamelCase(name) : name;
264
- }
265
- get name() {
266
- return this._name;
267
- }
268
- set viewBox(viewBox) {
269
- this._viewBox = viewBox;
270
- }
271
- get viewBox() {
272
- return this._viewBox ?? this.scale;
273
- }
274
- get innerHtml() {
275
- const code = Array.isArray(this.code) ? this.code[1] || this.code[0] : this.code ?? '';
276
- // todo proper sanitize
277
- // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
278
- return this.sanitizer.bypassSecurityTrustHtml((this.titleCode + code) ?? '');
279
- }
280
- ngAfterViewInit() {
281
- this.elementRef.nativeElement.classList.forEach((item) => {
282
- this.renderer.addClass(this.svgElementRef.nativeElement, item);
283
- });
284
- const parentElement = this.renderer.parentNode(this.elementRef.nativeElement);
285
- const svgElement = this.svgElementRef.nativeElement;
286
- this.renderer.insertBefore(parentElement, svgElement, this.elementRef.nativeElement);
287
- this.renderer.removeChild(parentElement, this.elementRef.nativeElement);
288
- }
289
- get titleCode() {
290
- return this.title ? `<title>${this.title}</title>` : '';
291
- }
292
- get code() {
293
- if (this.content) {
294
- return this.content;
295
- }
296
- if (this.iconSet && this.name) {
297
- return this.iconSet.getIcon(this.name);
298
- }
299
- if (this.name && !this.iconSet?.icons[this.name])
300
- console.warn(`c-icon component: icon name '${this.name}' does not exist for IconSet service. ` +
301
- `To use icon by 'name' prop you need to add it to IconSet service. \n`, this.name);
302
- return undefined;
303
- }
304
- get scale() {
305
- return Array.isArray(this.code) && this.code.length > 1 ? `0 0 ${this.code[0]}` : '0 0 64 64';
306
- }
307
- get computedSize() {
308
- const addCustom = !this.size && (this.width || this.height);
309
- return this.size === 'custom' || addCustom ? 'custom-size' : this.size;
310
- }
311
- get computedClasses() {
312
- const classes = {
313
- icon: true,
314
- [`icon-${this.computedSize}`]: !!this.computedSize
315
- };
316
- return !!this.customClasses ? this.customClasses : classes;
317
- }
318
- toCamelCase(str) {
319
- return str.replace(/([-_][a-z0-9])/ig, ($1) => {
320
- return $1.toUpperCase().replace('-', '');
321
- });
322
- }
323
- }
324
- IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: IconSetService }], target: i0.ɵɵFactoryTarget.Component });
325
- IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IconComponent, selector: "c-icon", inputs: { attributes: "attributes", content: "content", size: "size", title: "title", use: "use", customClasses: "customClasses", width: "width", height: "height", name: "name", viewBox: "viewBox" }, viewQueries: [{ propertyName: "svgElementRef", first: true, predicate: ["svgElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<svg *ngIf=\"(!use) && (!!code)\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n [attr.width]=\"width\"\r\n [attr.height]=\"height || width\"\r\n [attr.viewBox]=\"viewBox\"\r\n [innerHtml]=\"innerHtml\"\r\n [ngClass]=\"computedClasses\"\r\n [cHtmlAttr]=\"attributes\"\r\n role=\"img\"\r\n pointer-events=\"none\"\r\n #svgElement\r\n>\r\n</svg>\r\n\r\n<svg *ngIf=\"use\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n [attr.width]=\"width\"\r\n [attr.height]=\"height || width\"\r\n [ngClass]=\"computedClasses\"\r\n [cHtmlAttr]=\"attributes\"\r\n role=\"img\"\r\n pointer-events=\"none\"\r\n>\r\n <use [attr.href]=\"use\"></use>\r\n</svg>\r\n", styles: [".icon{display:inline-block;color:inherit;text-align:center;vertical-align:-.125rem;fill:currentColor}.icon:not(.icon-c-s):not(.icon-custom-size){width:1rem;height:1rem;font-size:1rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xxl{width:2rem;height:2rem;font-size:2rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl{width:1.5rem;height:1.5rem;font-size:1.5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg{width:1.25rem;height:1.25rem;font-size:1.25rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm{width:.875rem;height:.875rem;font-size:.875rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl{width:3rem;height:3rem;font-size:3rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl{width:4rem;height:4rem;font-size:4rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl{width:5rem;height:5rem;font-size:5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl{width:6rem;height:6rem;font-size:6rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl{width:7rem;height:7rem;font-size:7rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl{width:8rem;height:8rem;font-size:8rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl{width:9rem;height:9rem;font-size:9rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }] });
326
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, decorators: [{
327
- type: Component,
328
- args: [{ selector: 'c-icon', template: "<svg *ngIf=\"(!use) && (!!code)\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n [attr.width]=\"width\"\r\n [attr.height]=\"height || width\"\r\n [attr.viewBox]=\"viewBox\"\r\n [innerHtml]=\"innerHtml\"\r\n [ngClass]=\"computedClasses\"\r\n [cHtmlAttr]=\"attributes\"\r\n role=\"img\"\r\n pointer-events=\"none\"\r\n #svgElement\r\n>\r\n</svg>\r\n\r\n<svg *ngIf=\"use\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n [attr.width]=\"width\"\r\n [attr.height]=\"height || width\"\r\n [ngClass]=\"computedClasses\"\r\n [cHtmlAttr]=\"attributes\"\r\n role=\"img\"\r\n pointer-events=\"none\"\r\n>\r\n <use [attr.href]=\"use\"></use>\r\n</svg>\r\n", styles: [".icon{display:inline-block;color:inherit;text-align:center;vertical-align:-.125rem;fill:currentColor}.icon:not(.icon-c-s):not(.icon-custom-size){width:1rem;height:1rem;font-size:1rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xxl{width:2rem;height:2rem;font-size:2rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl{width:1.5rem;height:1.5rem;font-size:1.5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg{width:1.25rem;height:1.25rem;font-size:1.25rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm{width:.875rem;height:.875rem;font-size:.875rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl{width:3rem;height:3rem;font-size:3rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl{width:4rem;height:4rem;font-size:4rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl{width:5rem;height:5rem;font-size:5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl{width:6rem;height:6rem;font-size:6rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl{width:7rem;height:7rem;font-size:7rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl{width:8rem;height:8rem;font-size:8rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl{width:9rem;height:9rem;font-size:9rem}\n"] }]
329
- }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.DomSanitizer }, { type: IconSetService }]; }, propDecorators: { attributes: [{
330
- type: Input
331
- }], content: [{
332
- type: Input
333
- }], size: [{
334
- type: Input
335
- }], title: [{
336
- type: Input
337
- }], use: [{
338
- type: Input
339
- }], customClasses: [{
340
- type: Input
341
- }], width: [{
342
- type: Input
343
- }], height: [{
344
- type: Input
345
- }], name: [{
346
- type: Input
347
- }], viewBox: [{
348
- type: Input
349
- }], svgElementRef: [{
350
- type: ViewChild,
351
- args: ['svgElement', { read: ElementRef }]
250
+ class IconComponent {
251
+ set name(name) {
252
+ this._name = name.includes('-') ? this.toCamelCase(name) : name;
253
+ }
254
+ get name() {
255
+ return this._name;
256
+ }
257
+ set viewBox(viewBox) {
258
+ this._viewBox = viewBox;
259
+ }
260
+ get viewBox() {
261
+ return this._viewBox ?? this.scale;
262
+ }
263
+ get innerHtml() {
264
+ const code = Array.isArray(this.code) ? this.code[1] || this.code[0] : this.code ?? '';
265
+ // todo proper sanitize
266
+ // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
267
+ return this.sanitizer.bypassSecurityTrustHtml((this.titleCode + code) ?? '');
268
+ }
269
+ constructor(renderer, elementRef, sanitizer, iconSet) {
270
+ this.renderer = renderer;
271
+ this.elementRef = elementRef;
272
+ this.sanitizer = sanitizer;
273
+ this.iconSet = iconSet;
274
+ this.attributes = { role: 'img' };
275
+ this.size = '';
276
+ this.use = '';
277
+ this.customClasses = '';
278
+ this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');
279
+ }
280
+ ngAfterViewInit() {
281
+ this.elementRef.nativeElement.classList.forEach((item) => {
282
+ this.renderer.addClass(this.svgElementRef.nativeElement, item);
283
+ });
284
+ const parentElement = this.renderer.parentNode(this.elementRef.nativeElement);
285
+ const svgElement = this.svgElementRef.nativeElement;
286
+ this.renderer.insertBefore(parentElement, svgElement, this.elementRef.nativeElement);
287
+ this.renderer.removeChild(parentElement, this.elementRef.nativeElement);
288
+ }
289
+ get titleCode() {
290
+ return this.title ? `<title>${this.title}</title>` : '';
291
+ }
292
+ get code() {
293
+ if (this.content) {
294
+ return this.content;
295
+ }
296
+ if (this.iconSet && this.name) {
297
+ return this.iconSet.getIcon(this.name);
298
+ }
299
+ if (this.name && !this.iconSet?.icons[this.name])
300
+ console.warn(`c-icon component: icon name '${this.name}' does not exist for IconSet service. ` +
301
+ `To use icon by 'name' prop you need to add it to IconSet service. \n`, this.name);
302
+ return undefined;
303
+ }
304
+ get scale() {
305
+ return Array.isArray(this.code) && this.code.length > 1 ? `0 0 ${this.code[0]}` : '0 0 64 64';
306
+ }
307
+ get computedSize() {
308
+ const addCustom = !this.size && (this.width || this.height);
309
+ return this.size === 'custom' || addCustom ? 'custom-size' : this.size;
310
+ }
311
+ get computedClasses() {
312
+ const classes = {
313
+ icon: true,
314
+ [`icon-${this.computedSize}`]: !!this.computedSize
315
+ };
316
+ return !!this.customClasses ? this.customClasses : classes;
317
+ }
318
+ toCamelCase(str) {
319
+ return str.replace(/([-_][a-z0-9])/ig, ($1) => {
320
+ return $1.toUpperCase().replace('-', '');
321
+ });
322
+ }
323
+ }
324
+ IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: IconSetService }], target: i0.ɵɵFactoryTarget.Component });
325
+ IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.2", type: IconComponent, selector: "c-icon", inputs: { attributes: "attributes", content: "content", size: "size", title: "title", use: "use", customClasses: "customClasses", width: "width", height: "height", name: "name", viewBox: "viewBox" }, viewQueries: [{ propertyName: "svgElementRef", first: true, predicate: ["svgElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<svg *ngIf=\"(!use) && (!!code)\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\"\n [attr.viewBox]=\"viewBox\"\n [innerHtml]=\"innerHtml\"\n [ngClass]=\"computedClasses\"\n [cHtmlAttr]=\"attributes\"\n role=\"img\"\n pointer-events=\"none\"\n #svgElement\n>\n</svg>\n\n<svg *ngIf=\"use\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\"\n [ngClass]=\"computedClasses\"\n [cHtmlAttr]=\"attributes\"\n role=\"img\"\n pointer-events=\"none\"\n>\n <use [attr.href]=\"use\"></use>\n</svg>\n", styles: [".icon{display:inline-block;color:inherit;text-align:center;vertical-align:-.125rem;fill:currentColor}.icon:not(.icon-c-s):not(.icon-custom-size){width:1rem;height:1rem;font-size:1rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xxl{width:2rem;height:2rem;font-size:2rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl{width:1.5rem;height:1.5rem;font-size:1.5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg{width:1.25rem;height:1.25rem;font-size:1.25rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm{width:.875rem;height:.875rem;font-size:.875rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl{width:3rem;height:3rem;font-size:3rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl{width:4rem;height:4rem;font-size:4rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl{width:5rem;height:5rem;font-size:5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl{width:6rem;height:6rem;font-size:6rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl{width:7rem;height:7rem;font-size:7rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl{width:8rem;height:8rem;font-size:8rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl{width:9rem;height:9rem;font-size:9rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }] });
326
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconComponent, decorators: [{
327
+ type: Component,
328
+ args: [{ selector: 'c-icon', template: "<svg *ngIf=\"(!use) && (!!code)\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\"\n [attr.viewBox]=\"viewBox\"\n [innerHtml]=\"innerHtml\"\n [ngClass]=\"computedClasses\"\n [cHtmlAttr]=\"attributes\"\n role=\"img\"\n pointer-events=\"none\"\n #svgElement\n>\n</svg>\n\n<svg *ngIf=\"use\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"width\"\n [attr.height]=\"height || width\"\n [ngClass]=\"computedClasses\"\n [cHtmlAttr]=\"attributes\"\n role=\"img\"\n pointer-events=\"none\"\n>\n <use [attr.href]=\"use\"></use>\n</svg>\n", styles: [".icon{display:inline-block;color:inherit;text-align:center;vertical-align:-.125rem;fill:currentColor}.icon:not(.icon-c-s):not(.icon-custom-size){width:1rem;height:1rem;font-size:1rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xxl{width:2rem;height:2rem;font-size:2rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl{width:1.5rem;height:1.5rem;font-size:1.5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg{width:1.25rem;height:1.25rem;font-size:1.25rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm{width:.875rem;height:.875rem;font-size:.875rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl{width:3rem;height:3rem;font-size:3rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl{width:4rem;height:4rem;font-size:4rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl{width:5rem;height:5rem;font-size:5rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl{width:6rem;height:6rem;font-size:6rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl{width:7rem;height:7rem;font-size:7rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl{width:8rem;height:8rem;font-size:8rem}.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl{width:9rem;height:9rem;font-size:9rem}\n"] }]
329
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.DomSanitizer }, { type: IconSetService }]; }, propDecorators: { attributes: [{
330
+ type: Input
331
+ }], content: [{
332
+ type: Input
333
+ }], size: [{
334
+ type: Input
335
+ }], title: [{
336
+ type: Input
337
+ }], use: [{
338
+ type: Input
339
+ }], customClasses: [{
340
+ type: Input
341
+ }], width: [{
342
+ type: Input
343
+ }], height: [{
344
+ type: Input
345
+ }], name: [{
346
+ type: Input
347
+ }], viewBox: [{
348
+ type: Input
349
+ }], svgElementRef: [{
350
+ type: ViewChild,
351
+ args: ['svgElement', { read: ElementRef }]
352
352
  }] } });
353
353
 
354
- class IconModule {
355
- }
356
- IconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
357
- IconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: IconModule, declarations: [IconComponent,
358
- HtmlAttributesDirective,
359
- IconDirective], imports: [CommonModule], exports: [IconComponent,
360
- IconDirective] });
361
- IconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconModule, imports: [CommonModule] });
362
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconModule, decorators: [{
363
- type: NgModule,
364
- args: [{
365
- declarations: [
366
- IconComponent,
367
- HtmlAttributesDirective,
368
- IconDirective
369
- ],
370
- imports: [
371
- CommonModule,
372
- ],
373
- exports: [
374
- IconComponent,
375
- IconDirective
376
- ],
377
- }]
354
+ class IconModule {
355
+ }
356
+ IconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
357
+ IconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.2", ngImport: i0, type: IconModule, declarations: [IconComponent,
358
+ HtmlAttributesDirective,
359
+ IconDirective], imports: [CommonModule], exports: [IconComponent,
360
+ IconDirective] });
361
+ IconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconModule, imports: [CommonModule] });
362
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.2", ngImport: i0, type: IconModule, decorators: [{
363
+ type: NgModule,
364
+ args: [{
365
+ declarations: [
366
+ IconComponent,
367
+ HtmlAttributesDirective,
368
+ IconDirective
369
+ ],
370
+ imports: [
371
+ CommonModule,
372
+ ],
373
+ exports: [
374
+ IconComponent,
375
+ IconDirective
376
+ ],
377
+ }]
378
378
  }] });
379
379
 
380
- /*
381
- * Public API Surface of @coreui/icons-angular
380
+ /*
381
+ * Public API Surface of @coreui/icons-angular
382
382
  */
383
383
 
384
- /**
385
- * Generated bundle index. Do not edit.
384
+ /**
385
+ * Generated bundle index. Do not edit.
386
386
  */
387
387
 
388
388
  export { IconComponent, IconDirective, IconModule, IconSetModule, IconSetService };