@loyalty-cloud/ui-icons 1.1.60 → 1.1.62
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/esm2020/lib/lc-icon.component.mjs +6 -3
- package/esm2020/lib/svg-icon-cache.service.mjs +10 -3
- package/fesm2015/loyalty-cloud-ui-icons.mjs +14 -4
- package/fesm2015/loyalty-cloud-ui-icons.mjs.map +1 -1
- package/fesm2020/loyalty-cloud-ui-icons.mjs +14 -4
- package/fesm2020/loyalty-cloud-ui-icons.mjs.map +1 -1
- package/lib/lc-icon.component.d.ts +2 -1
- package/lib/svg-icon-cache.service.d.ts +1 -1
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@ export class LcIconComponent {
|
|
|
9
9
|
this.category = '';
|
|
10
10
|
this.size = 24;
|
|
11
11
|
this.color = 'currentColor';
|
|
12
|
+
this.strokeColor = '';
|
|
12
13
|
this.disabled = false;
|
|
13
14
|
this.svgIcon = null;
|
|
14
15
|
this.disabledColor = '#e0e0e0';
|
|
@@ -29,7 +30,7 @@ export class LcIconComponent {
|
|
|
29
30
|
? `../assets/icons/${this.category}/${this.name}.svg`
|
|
30
31
|
: `../assets/icons/${this.name}.svg`;
|
|
31
32
|
this.iconRegistry
|
|
32
|
-
.registerIcon(this.name, iconPath, this.size, this.color, this.disabled) // Dynamically register and fetch the icon
|
|
33
|
+
.registerIcon(this.name, iconPath, this.size, this.color, this.disabled, this.strokeColor) // Dynamically register and fetch the icon
|
|
33
34
|
.subscribe((icon) => {
|
|
34
35
|
this.svgIcon = icon;
|
|
35
36
|
this.cdr.detectChanges();
|
|
@@ -39,7 +40,7 @@ export class LcIconComponent {
|
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
42
|
LcIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: LcIconComponent, deps: [{ token: i1.SvgIconCacheService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
42
|
-
LcIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: LcIconComponent, selector: "lc-icon", inputs: { name: "name", category: "category", size: "size", color: "color", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: `
|
|
43
|
+
LcIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: LcIconComponent, selector: "lc-icon", inputs: { name: "name", category: "category", size: "size", color: "color", strokeColor: "strokeColor", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: `
|
|
43
44
|
<div
|
|
44
45
|
class="icon"
|
|
45
46
|
[innerHTML]="svgIcon"
|
|
@@ -67,7 +68,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
|
|
|
67
68
|
type: Input
|
|
68
69
|
}], color: [{
|
|
69
70
|
type: Input
|
|
71
|
+
}], strokeColor: [{
|
|
72
|
+
type: Input
|
|
70
73
|
}], disabled: [{
|
|
71
74
|
type: Input
|
|
72
75
|
}] } });
|
|
73
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
76
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGMtaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9sb3lhbHR5LWNsb3VkLXVpLWljb25zL3NyYy9saWIvbGMtaWNvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFxQixTQUFTLEVBQUUsS0FBSyxFQUF5QixNQUFNLGVBQWUsQ0FBQzs7O0FBb0JwSCxNQUFNLE9BQU8sZUFBZTtJQVcxQixZQUNVLFlBQWlDLEVBQ2pDLEdBQXNCO1FBRHRCLGlCQUFZLEdBQVosWUFBWSxDQUFxQjtRQUNqQyxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQVp2QixTQUFJLEdBQVcsRUFBRSxDQUFDO1FBQ2xCLGFBQVEsR0FBVyxFQUFFLENBQUM7UUFDdEIsU0FBSSxHQUFXLEVBQUUsQ0FBQztRQUNsQixVQUFLLEdBQVcsY0FBYyxDQUFDO1FBQy9CLGdCQUFXLEdBQVcsRUFBRSxDQUFDO1FBQ3pCLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFbkMsWUFBTyxHQUFnQyxJQUFJLENBQUM7UUFDNUMsa0JBQWEsR0FBVyxTQUFTLENBQUM7SUFLOUIsQ0FBQztJQUVMLFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVPLFFBQVE7UUFDZCxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRTtZQUNkLE9BQU8sQ0FBQyxJQUFJLENBQUMsd0JBQXdCLENBQUMsQ0FBQztZQUN2QyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztZQUNwQixPQUFPO1NBQ1I7UUFFRCxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsUUFBUTtZQUM1QixDQUFDLENBQUMsbUJBQW1CLElBQUksQ0FBQyxRQUFRLElBQUksSUFBSSxDQUFDLElBQUksTUFBTTtZQUNyRCxDQUFDLENBQUMsbUJBQW1CLElBQUksQ0FBQyxJQUFJLE1BQU0sQ0FBQztRQUV2QyxJQUFJLENBQUMsWUFBWTthQUNkLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLFFBQVEsRUFBRSxJQUFJLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsMENBQTBDO2FBQ3BJLFNBQVMsQ0FDUixDQUFDLElBQUksRUFBRSxFQUFFO1lBQ1AsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7WUFDcEIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUMzQixDQUFDLEVBQ0QsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUNSLE9BQU8sQ0FBQyxLQUFLLENBQUMsdUJBQXVCLElBQUksQ0FBQyxJQUFJLElBQUksRUFBRSxLQUFLLENBQUMsQ0FBQztRQUM3RCxDQUFDLENBQ0YsQ0FBQztJQUNOLENBQUM7OzRHQTlDVSxlQUFlO2dHQUFmLGVBQWUsb01BZGhCOzs7Ozs7OztHQVFUOzJGQU1VLGVBQWU7a0JBaEIzQixTQUFTOytCQUNFLFNBQVMsWUFDVDs7Ozs7Ozs7R0FRVCxtQkFJZ0IsdUJBQXVCLENBQUMsT0FBTzswSUFHdkMsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2FmZUh0bWwgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7IFN2Z0ljb25DYWNoZVNlcnZpY2UgfSBmcm9tICcuL3N2Zy1pY29uLWNhY2hlLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsYy1pY29uJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IFxuICAgICAgY2xhc3M9XCJpY29uXCJcbiAgICAgIFtpbm5lckhUTUxdPVwic3ZnSWNvblwiIFxuICAgICAgW3N0eWxlLndpZHRoLnB4XT1cInNpemVcIiBcbiAgICAgIFtzdHlsZS5oZWlnaHQucHhdPVwic2l6ZVwiXG4gICAgICBbc3R5bGUuY29sb3JdPVwiY29sb3JcIj5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVVcmxzOiBbXG4gICAgJ2xjLWljb24uY29tcG9uZW50LnNjc3MnXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuRGVmYXVsdFxufSlcbmV4cG9ydCBjbGFzcyBMY0ljb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgY2F0ZWdvcnk6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBzaXplOiBudW1iZXIgPSAyNDtcbiAgQElucHV0KCkgY29sb3I6IHN0cmluZyA9ICdjdXJyZW50Q29sb3InO1xuICBASW5wdXQoKSBzdHJva2VDb2xvcjogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgc3ZnSWNvbjogU2FmZUh0bWwgfCBudWxsIHwgdW5kZWZpbmVkID0gbnVsbDtcbiAgZGlzYWJsZWRDb2xvcjogc3RyaW5nID0gJyNlMGUwZTAnO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgaWNvblJlZ2lzdHJ5OiBTdmdJY29uQ2FjaGVTZXJ2aWNlLFxuICAgIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZlxuICApIHsgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICB0aGlzLmxvYWRJY29uKCk7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmxvYWRJY29uKCk7XG4gIH1cblxuICBwcml2YXRlIGxvYWRJY29uKCkge1xuICAgIGlmICghdGhpcy5uYW1lKSB7XG4gICAgICBjb25zb2xlLndhcm4oJ0ljb24gbmFtZSBpcyByZXF1aXJlZC4nKTtcbiAgICAgIHRoaXMuc3ZnSWNvbiA9IG51bGw7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgY29uc3QgaWNvblBhdGggPSB0aGlzLmNhdGVnb3J5XG4gICAgICA/IGAuLi9hc3NldHMvaWNvbnMvJHt0aGlzLmNhdGVnb3J5fS8ke3RoaXMubmFtZX0uc3ZnYFxuICAgICAgOiBgLi4vYXNzZXRzL2ljb25zLyR7dGhpcy5uYW1lfS5zdmdgO1xuXG4gICAgdGhpcy5pY29uUmVnaXN0cnlcbiAgICAgIC5yZWdpc3Rlckljb24odGhpcy5uYW1lLCBpY29uUGF0aCwgdGhpcy5zaXplLCB0aGlzLmNvbG9yLCB0aGlzLmRpc2FibGVkLCB0aGlzLnN0cm9rZUNvbG9yKSAvLyBEeW5hbWljYWxseSByZWdpc3RlciBhbmQgZmV0Y2ggdGhlIGljb25cbiAgICAgIC5zdWJzY3JpYmUoXG4gICAgICAgIChpY29uKSA9PiB7XG4gICAgICAgICAgdGhpcy5zdmdJY29uID0gaWNvbjtcbiAgICAgICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgICAgIH0sXG4gICAgICAgIChlcnJvcikgPT4ge1xuICAgICAgICAgIGNvbnNvbGUuZXJyb3IoYEVycm9yIGxvYWRpbmcgaWNvbiBcIiR7dGhpcy5uYW1lfVwiOmAsIGVycm9yKTtcbiAgICAgICAgfVxuICAgICAgKTtcbiAgfVxufVxuXG5cblxuIl19
|
|
@@ -11,8 +11,8 @@ export class SvgIconCacheService {
|
|
|
11
11
|
this.iconCache = new Map();
|
|
12
12
|
this.disabledColor = '#e0e0e0';
|
|
13
13
|
}
|
|
14
|
-
registerIcon(name, url, size, color, disabled = false) {
|
|
15
|
-
const cacheKey = `${name}-${size}-${color}-${disabled}`; // Unique cache key
|
|
14
|
+
registerIcon(name, url, size, color, disabled = false, strokeColor) {
|
|
15
|
+
const cacheKey = `${name}-${size}-${color}-${disabled}-${strokeColor}`; // Unique cache key
|
|
16
16
|
if (this.iconCache.has(cacheKey)) {
|
|
17
17
|
return of(this.iconCache.get(cacheKey)); // Return the cached icon
|
|
18
18
|
}
|
|
@@ -31,6 +31,13 @@ export class SvgIconCacheService {
|
|
|
31
31
|
el.setAttribute('fill', disabled ? this.disabledColor : color || 'black');
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
|
+
// If color is NOT present but strokeColor is provided, apply it to elements with stroke
|
|
35
|
+
if ((!color || color === 'currentColor') && strokeColor) {
|
|
36
|
+
const elementsWithStroke = svgElement.querySelectorAll('[stroke]');
|
|
37
|
+
elementsWithStroke.forEach((el) => {
|
|
38
|
+
el.setAttribute('stroke', strokeColor);
|
|
39
|
+
});
|
|
40
|
+
}
|
|
34
41
|
const serializedSvg = new XMLSerializer().serializeToString(svgElement);
|
|
35
42
|
const sanitizedSvg = this.sanitizer.bypassSecurityTrustHtml(serializedSvg);
|
|
36
43
|
this.iconCache.set(cacheKey, sanitizedSvg); // Cache using the unique key
|
|
@@ -48,4 +55,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
|
|
|
48
55
|
providedIn: 'root'
|
|
49
56
|
}]
|
|
50
57
|
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i2.HttpClient }]; } });
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3ZnLWljb24tY2FjaGUuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2xveWFsdHktY2xvdWQtdWktaWNvbnMvc3JjL2xpYi9zdmctaWNvbi1jYWNoZS5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFM0MsT0FBTyxFQUFjLEVBQUUsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN0QyxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUFLckMsTUFBTSxPQUFPLG1CQUFtQjtJQUk5QixZQUFvQixTQUF1QixFQUFVLElBQWdCO1FBQWpELGNBQVMsR0FBVCxTQUFTLENBQWM7UUFBVSxTQUFJLEdBQUosSUFBSSxDQUFZO1FBSDdELGNBQVMsR0FBRyxJQUFJLEdBQUcsRUFBb0IsQ0FBQztRQUNoRCxrQkFBYSxHQUFXLFNBQVMsQ0FBQztJQUV1QyxDQUFDO0lBRTFFLFlBQVksQ0FBQyxJQUFZLEVBQUUsR0FBVyxFQUFFLElBQVksRUFBRSxLQUFhLEVBQUUsV0FBb0IsS0FBSyxFQUFFLFdBQWtCO1FBQ2hILE1BQU0sUUFBUSxHQUFHLEdBQUcsSUFBSSxJQUFJLElBQUksSUFBSSxLQUFLLElBQUksUUFBUSxJQUFJLFdBQVcsRUFBRSxDQUFDLENBQUMsbUJBQW1CO1FBRTNGLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFDLEVBQUU7WUFDaEMsT0FBTyxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsUUFBUSxDQUFFLENBQUMsQ0FBQyxDQUFDLHlCQUF5QjtTQUNwRTtRQUVELE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLEVBQUUsWUFBWSxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUMsSUFBSSxDQUN0RCxHQUFHLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRTtZQUNWLE1BQU0sTUFBTSxHQUFHLElBQUksU0FBUyxFQUFFLENBQUM7WUFDL0IsTUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFDLGVBQWUsQ0FBQyxHQUFHLEVBQUUsZUFBZSxDQUFDLENBQUM7WUFDekQsTUFBTSxVQUFVLEdBQUcsR0FBRyxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUU1QyxJQUFJLFVBQVUsRUFBRTtnQkFDZCx5QkFBeUI7Z0JBQ3pCLFVBQVUsQ0FBQyxZQUFZLENBQUMsT0FBTyxFQUFFLEdBQUcsSUFBSSxFQUFFLENBQUMsQ0FBQztnQkFDNUMsVUFBVSxDQUFDLFlBQVksQ0FBQyxRQUFRLEVBQUUsR0FBRyxJQUFJLEVBQUUsQ0FBQyxDQUFDO2dCQUU3Qyw0REFBNEQ7Z0JBQzVELE1BQU0sZ0JBQWdCLEdBQUcsVUFBVSxDQUFDLGdCQUFnQixDQUFDLHNDQUFzQyxDQUFDLENBQUM7Z0JBQzdGLGdCQUFnQixDQUFDLE9BQU8sQ0FBQyxDQUFDLEVBQUUsRUFBRSxFQUFFO29CQUM5QixJQUFJLENBQUMsRUFBRSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsRUFBRTt3QkFDNUIsRUFBRSxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxLQUFLLElBQUksT0FBTyxDQUFDLENBQUM7cUJBQzNFO2dCQUNILENBQUMsQ0FBQyxDQUFDO2dCQUVILHdGQUF3RjtnQkFDeEYsSUFBSSxDQUFDLENBQUMsS0FBSyxJQUFJLEtBQUssS0FBSyxjQUFjLENBQUMsSUFBSSxXQUFXLEVBQUU7b0JBQ3ZELE1BQU0sa0JBQWtCLEdBQUcsVUFBVSxDQUFDLGdCQUFnQixDQUFDLFVBQVUsQ0FBQyxDQUFDO29CQUNuRSxrQkFBa0IsQ0FBQyxPQUFPLENBQUMsQ0FBQyxFQUFFLEVBQUUsRUFBRTt3QkFDaEMsRUFBRSxDQUFDLFlBQVksQ0FBQyxRQUFRLEVBQUUsV0FBVyxDQUFDLENBQUM7b0JBQ3pDLENBQUMsQ0FBQyxDQUFDO2lCQUNKO2dCQUVELE1BQU0sYUFBYSxHQUFHLElBQUksYUFBYSxFQUFFLENBQUMsaUJBQWlCLENBQUMsVUFBVSxDQUFDLENBQUM7Z0JBQ3hFLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsdUJBQXVCLENBQUMsYUFBYSxDQUFDLENBQUM7Z0JBQzNFLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxZQUFZLENBQUMsQ0FBQyxDQUFDLDZCQUE2QjtnQkFDekUsT0FBTyxZQUFZLENBQUM7YUFDckI7WUFFRCxNQUFNLElBQUksS0FBSyxDQUFDLGlDQUFpQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO1FBQzNELENBQUMsQ0FBQyxDQUNILENBQUM7SUFDSixDQUFDOztnSEFqRFUsbUJBQW1CO29IQUFuQixtQkFBbUIsY0FGbEIsTUFBTTsyRkFFUCxtQkFBbUI7a0JBSC9CLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSHR0cENsaWVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcbmltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERvbVNhbml0aXplciwgU2FmZUh0bWwgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7IE9ic2VydmFibGUsIG9mIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBtYXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnXG59KVxuZXhwb3J0IGNsYXNzIFN2Z0ljb25DYWNoZVNlcnZpY2Uge1xuICBwcml2YXRlIGljb25DYWNoZSA9IG5ldyBNYXA8c3RyaW5nLCBTYWZlSHRtbD4oKTtcbiAgZGlzYWJsZWRDb2xvcjogc3RyaW5nID0gJyNlMGUwZTAnO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgc2FuaXRpemVyOiBEb21TYW5pdGl6ZXIsIHByaXZhdGUgaHR0cDogSHR0cENsaWVudCkgeyB9XG5cbiAgcmVnaXN0ZXJJY29uKG5hbWU6IHN0cmluZywgdXJsOiBzdHJpbmcsIHNpemU6IG51bWJlciwgY29sb3I6IHN0cmluZywgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZSwgc3Ryb2tlQ29sb3I6c3RyaW5nKTogT2JzZXJ2YWJsZTxTYWZlSHRtbD4ge1xuICAgIGNvbnN0IGNhY2hlS2V5ID0gYCR7bmFtZX0tJHtzaXplfS0ke2NvbG9yfS0ke2Rpc2FibGVkfS0ke3N0cm9rZUNvbG9yfWA7IC8vIFVuaXF1ZSBjYWNoZSBrZXlcblxuICAgIGlmICh0aGlzLmljb25DYWNoZS5oYXMoY2FjaGVLZXkpKSB7XG4gICAgICByZXR1cm4gb2YodGhpcy5pY29uQ2FjaGUuZ2V0KGNhY2hlS2V5KSEpOyAvLyBSZXR1cm4gdGhlIGNhY2hlZCBpY29uXG4gICAgfVxuXG4gICAgcmV0dXJuIHRoaXMuaHR0cC5nZXQodXJsLCB7IHJlc3BvbnNlVHlwZTogJ3RleHQnIH0pLnBpcGUoXG4gICAgICBtYXAoKHN2ZykgPT4ge1xuICAgICAgICBjb25zdCBwYXJzZXIgPSBuZXcgRE9NUGFyc2VyKCk7XG4gICAgICAgIGNvbnN0IGRvYyA9IHBhcnNlci5wYXJzZUZyb21TdHJpbmcoc3ZnLCAnaW1hZ2Uvc3ZnK3htbCcpO1xuICAgICAgICBjb25zdCBzdmdFbGVtZW50ID0gZG9jLnF1ZXJ5U2VsZWN0b3IoJ3N2ZycpO1xuXG4gICAgICAgIGlmIChzdmdFbGVtZW50KSB7XG4gICAgICAgICAgLy8gVXBkYXRlIHNpemUgYXR0cmlidXRlc1xuICAgICAgICAgIHN2Z0VsZW1lbnQuc2V0QXR0cmlidXRlKCd3aWR0aCcsIGAke3NpemV9YCk7XG4gICAgICAgICAgc3ZnRWxlbWVudC5zZXRBdHRyaWJ1dGUoJ2hlaWdodCcsIGAke3NpemV9YCk7XG5cbiAgICAgICAgICAvLyBVcGRhdGUgY29sb3Igb25seSBmb3IgZWxlbWVudHMgd2l0aG91dCBhICdmaWxsJyBhdHRyaWJ1dGVcbiAgICAgICAgICBjb25zdCBlbGVtZW50c1RvVXBkYXRlID0gc3ZnRWxlbWVudC5xdWVyeVNlbGVjdG9yQWxsKCdwYXRoLCBjaXJjbGUsIHJlY3QsIHBvbHlnb24sIGVsbGlwc2UnKTtcbiAgICAgICAgICBlbGVtZW50c1RvVXBkYXRlLmZvckVhY2goKGVsKSA9PiB7XG4gICAgICAgICAgICBpZiAoIWVsLmhhc0F0dHJpYnV0ZSgnZmlsbCcpKSB7XG4gICAgICAgICAgICAgIGVsLnNldEF0dHJpYnV0ZSgnZmlsbCcsIGRpc2FibGVkID8gdGhpcy5kaXNhYmxlZENvbG9yIDogY29sb3IgfHwgJ2JsYWNrJyk7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgfSk7XG5cbiAgICAgICAgICAvLyBJZiBjb2xvciBpcyBOT1QgcHJlc2VudCBidXQgc3Ryb2tlQ29sb3IgaXMgcHJvdmlkZWQsIGFwcGx5IGl0IHRvIGVsZW1lbnRzIHdpdGggc3Ryb2tlXG4gICAgICAgICAgaWYgKCghY29sb3IgfHwgY29sb3IgPT09ICdjdXJyZW50Q29sb3InKSAmJiBzdHJva2VDb2xvcikge1xuICAgICAgICAgICAgY29uc3QgZWxlbWVudHNXaXRoU3Ryb2tlID0gc3ZnRWxlbWVudC5xdWVyeVNlbGVjdG9yQWxsKCdbc3Ryb2tlXScpO1xuICAgICAgICAgICAgZWxlbWVudHNXaXRoU3Ryb2tlLmZvckVhY2goKGVsKSA9PiB7XG4gICAgICAgICAgICAgIGVsLnNldEF0dHJpYnV0ZSgnc3Ryb2tlJywgc3Ryb2tlQ29sb3IpO1xuICAgICAgICAgICAgfSk7XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgY29uc3Qgc2VyaWFsaXplZFN2ZyA9IG5ldyBYTUxTZXJpYWxpemVyKCkuc2VyaWFsaXplVG9TdHJpbmcoc3ZnRWxlbWVudCk7XG4gICAgICAgICAgY29uc3Qgc2FuaXRpemVkU3ZnID0gdGhpcy5zYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdEh0bWwoc2VyaWFsaXplZFN2Zyk7XG4gICAgICAgICAgdGhpcy5pY29uQ2FjaGUuc2V0KGNhY2hlS2V5LCBzYW5pdGl6ZWRTdmcpOyAvLyBDYWNoZSB1c2luZyB0aGUgdW5pcXVlIGtleVxuICAgICAgICAgIHJldHVybiBzYW5pdGl6ZWRTdmc7XG4gICAgICAgIH1cblxuICAgICAgICB0aHJvdyBuZXcgRXJyb3IoYEludmFsaWQgU1ZHIGNvbnRlbnQgZm9yIGljb246ICR7bmFtZX1gKTtcbiAgICAgIH0pXG4gICAgKTtcbiAgfVxufVxuIl19
|
|
@@ -14,8 +14,8 @@ class SvgIconCacheService {
|
|
|
14
14
|
this.iconCache = new Map();
|
|
15
15
|
this.disabledColor = '#e0e0e0';
|
|
16
16
|
}
|
|
17
|
-
registerIcon(name, url, size, color, disabled = false) {
|
|
18
|
-
const cacheKey = `${name}-${size}-${color}-${disabled}`; // Unique cache key
|
|
17
|
+
registerIcon(name, url, size, color, disabled = false, strokeColor) {
|
|
18
|
+
const cacheKey = `${name}-${size}-${color}-${disabled}-${strokeColor}`; // Unique cache key
|
|
19
19
|
if (this.iconCache.has(cacheKey)) {
|
|
20
20
|
return of(this.iconCache.get(cacheKey)); // Return the cached icon
|
|
21
21
|
}
|
|
@@ -34,6 +34,13 @@ class SvgIconCacheService {
|
|
|
34
34
|
el.setAttribute('fill', disabled ? this.disabledColor : color || 'black');
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
|
+
// If color is NOT present but strokeColor is provided, apply it to elements with stroke
|
|
38
|
+
if ((!color || color === 'currentColor') && strokeColor) {
|
|
39
|
+
const elementsWithStroke = svgElement.querySelectorAll('[stroke]');
|
|
40
|
+
elementsWithStroke.forEach((el) => {
|
|
41
|
+
el.setAttribute('stroke', strokeColor);
|
|
42
|
+
});
|
|
43
|
+
}
|
|
37
44
|
const serializedSvg = new XMLSerializer().serializeToString(svgElement);
|
|
38
45
|
const sanitizedSvg = this.sanitizer.bypassSecurityTrustHtml(serializedSvg);
|
|
39
46
|
this.iconCache.set(cacheKey, sanitizedSvg); // Cache using the unique key
|
|
@@ -60,6 +67,7 @@ class LcIconComponent {
|
|
|
60
67
|
this.category = '';
|
|
61
68
|
this.size = 24;
|
|
62
69
|
this.color = 'currentColor';
|
|
70
|
+
this.strokeColor = '';
|
|
63
71
|
this.disabled = false;
|
|
64
72
|
this.svgIcon = null;
|
|
65
73
|
this.disabledColor = '#e0e0e0';
|
|
@@ -80,7 +88,7 @@ class LcIconComponent {
|
|
|
80
88
|
? `../assets/icons/${this.category}/${this.name}.svg`
|
|
81
89
|
: `../assets/icons/${this.name}.svg`;
|
|
82
90
|
this.iconRegistry
|
|
83
|
-
.registerIcon(this.name, iconPath, this.size, this.color, this.disabled) // Dynamically register and fetch the icon
|
|
91
|
+
.registerIcon(this.name, iconPath, this.size, this.color, this.disabled, this.strokeColor) // Dynamically register and fetch the icon
|
|
84
92
|
.subscribe((icon) => {
|
|
85
93
|
this.svgIcon = icon;
|
|
86
94
|
this.cdr.detectChanges();
|
|
@@ -90,7 +98,7 @@ class LcIconComponent {
|
|
|
90
98
|
}
|
|
91
99
|
}
|
|
92
100
|
LcIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: LcIconComponent, deps: [{ token: SvgIconCacheService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
93
|
-
LcIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: LcIconComponent, selector: "lc-icon", inputs: { name: "name", category: "category", size: "size", color: "color", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: `
|
|
101
|
+
LcIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: LcIconComponent, selector: "lc-icon", inputs: { name: "name", category: "category", size: "size", color: "color", strokeColor: "strokeColor", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: `
|
|
94
102
|
<div
|
|
95
103
|
class="icon"
|
|
96
104
|
[innerHTML]="svgIcon"
|
|
@@ -118,6 +126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
|
|
|
118
126
|
type: Input
|
|
119
127
|
}], color: [{
|
|
120
128
|
type: Input
|
|
129
|
+
}], strokeColor: [{
|
|
130
|
+
type: Input
|
|
121
131
|
}], disabled: [{
|
|
122
132
|
type: Input
|
|
123
133
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loyalty-cloud-ui-icons.mjs","sources":["../../../projects/loyalty-cloud-ui-icons/src/lib/svg-icon-cache.service.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/lc-icon.component.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/safe-html.pipe.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/lc-icon.module.ts","../../../projects/loyalty-cloud-ui-icons/src/public-api.ts","../../../projects/loyalty-cloud-ui-icons/src/loyalty-cloud-ui-icons.ts"],"sourcesContent":["import { HttpClient } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { Observable, of } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class SvgIconCacheService {\n private iconCache = new Map<string, SafeHtml>();\n disabledColor: string = '#e0e0e0';\n\n constructor(private sanitizer: DomSanitizer, private http: HttpClient) { }\n\n registerIcon(name: string, url: string, size: number, color: string, disabled: boolean = false): Observable<SafeHtml> {\n const cacheKey = `${name}-${size}-${color}-${disabled}`; // Unique cache key\n\n if (this.iconCache.has(cacheKey)) {\n return of(this.iconCache.get(cacheKey)!); // Return the cached icon\n }\n\n return this.http.get(url, { responseType: 'text' }).pipe(\n map((svg) => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(svg, 'image/svg+xml');\n const svgElement = doc.querySelector('svg');\n\n if (svgElement) {\n // Update size attributes\n svgElement.setAttribute('width', `${size}`);\n svgElement.setAttribute('height', `${size}`);\n\n // Update color only for elements without a 'fill' attribute\n const elementsToUpdate = svgElement.querySelectorAll('path, circle, rect, polygon, ellipse');\n elementsToUpdate.forEach((el) => {\n if (!el.hasAttribute('fill')) {\n el.setAttribute('fill', disabled ? this.disabledColor : color || 'black');\n }\n });\n\n const serializedSvg = new XMLSerializer().serializeToString(svgElement);\n const sanitizedSvg = this.sanitizer.bypassSecurityTrustHtml(serializedSvg);\n this.iconCache.set(cacheKey, sanitizedSvg); // Cache using the unique key\n return sanitizedSvg;\n }\n\n throw new Error(`Invalid SVG content for icon: ${name}`);\n })\n );\n }\n}\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, SimpleChanges } from '@angular/core';\nimport { SafeHtml } from '@angular/platform-browser';\nimport { SvgIconCacheService } from './svg-icon-cache.service';\n\n@Component({\n selector: 'lc-icon',\n template: `\n <div \n class=\"icon\"\n [innerHTML]=\"svgIcon\" \n [style.width.px]=\"size\" \n [style.height.px]=\"size\"\n [style.color]=\"color\">\n </div>\n `,\n styleUrls: [\n 'lc-icon.component.scss'\n ],\n changeDetection: ChangeDetectionStrategy.Default\n})\nexport class LcIconComponent implements OnInit {\n @Input() name: string = '';\n @Input() category: string = '';\n @Input() size: number = 24;\n @Input() color: string = 'currentColor';\n @Input() disabled: boolean = false;\n\n svgIcon: SafeHtml | null | undefined = null;\n disabledColor: string = '#e0e0e0';\n\n constructor(\n private iconRegistry: SvgIconCacheService,\n private cdr: ChangeDetectorRef\n ) { }\n\n ngOnChanges(changes: SimpleChanges) {\n this.loadIcon();\n }\n\n ngOnInit() {\n this.loadIcon();\n }\n\n private loadIcon() {\n if (!this.name) {\n console.warn('Icon name is required.');\n this.svgIcon = null;\n return;\n }\n\n const iconPath = this.category\n ? `../assets/icons/${this.category}/${this.name}.svg`\n : `../assets/icons/${this.name}.svg`;\n\n this.iconRegistry\n .registerIcon(this.name, iconPath, this.size, this.color, this.disabled) // Dynamically register and fetch the icon\n .subscribe(\n (icon) => {\n this.svgIcon = icon;\n this.cdr.detectChanges();\n },\n (error) => {\n console.error(`Error loading icon \"${this.name}\":`, error);\n }\n );\n }\n}\n\n\n\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\n@Pipe({\n name: 'safeHtml'\n})\nexport class SafeHtmlPipe implements PipeTransform {\n constructor(private sanitizer: DomSanitizer) {}\n\n transform(value: string): SafeHtml {\n return this.sanitizer.bypassSecurityTrustHtml(value);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { LcIconComponent } from './lc-icon.component';\nimport { SafeHtmlPipe } from './safe-html.pipe';\nimport { HttpClientModule } from '@angular/common/http';\n\n\n@NgModule({\n declarations: [LcIconComponent, SafeHtmlPipe],\n imports: [CommonModule, HttpClientModule],\n exports: [LcIconComponent]\n})\nexport class LcIconModule {}\n","/*\n * Public API Surface of @loyalty-cloud/ui-icons\n */\n\nexport * from './lib/lc-icon.module';\nexport * from './lib/lc-icon.component';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SvgIconCacheService"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"loyalty-cloud-ui-icons.mjs","sources":["../../../projects/loyalty-cloud-ui-icons/src/lib/svg-icon-cache.service.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/lc-icon.component.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/safe-html.pipe.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/lc-icon.module.ts","../../../projects/loyalty-cloud-ui-icons/src/public-api.ts","../../../projects/loyalty-cloud-ui-icons/src/loyalty-cloud-ui-icons.ts"],"sourcesContent":["import { HttpClient } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { Observable, of } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class SvgIconCacheService {\n private iconCache = new Map<string, SafeHtml>();\n disabledColor: string = '#e0e0e0';\n\n constructor(private sanitizer: DomSanitizer, private http: HttpClient) { }\n\n registerIcon(name: string, url: string, size: number, color: string, disabled: boolean = false, strokeColor:string): Observable<SafeHtml> {\n const cacheKey = `${name}-${size}-${color}-${disabled}-${strokeColor}`; // Unique cache key\n\n if (this.iconCache.has(cacheKey)) {\n return of(this.iconCache.get(cacheKey)!); // Return the cached icon\n }\n\n return this.http.get(url, { responseType: 'text' }).pipe(\n map((svg) => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(svg, 'image/svg+xml');\n const svgElement = doc.querySelector('svg');\n\n if (svgElement) {\n // Update size attributes\n svgElement.setAttribute('width', `${size}`);\n svgElement.setAttribute('height', `${size}`);\n\n // Update color only for elements without a 'fill' attribute\n const elementsToUpdate = svgElement.querySelectorAll('path, circle, rect, polygon, ellipse');\n elementsToUpdate.forEach((el) => {\n if (!el.hasAttribute('fill')) {\n el.setAttribute('fill', disabled ? this.disabledColor : color || 'black');\n }\n });\n\n // If color is NOT present but strokeColor is provided, apply it to elements with stroke\n if ((!color || color === 'currentColor') && strokeColor) {\n const elementsWithStroke = svgElement.querySelectorAll('[stroke]');\n elementsWithStroke.forEach((el) => {\n el.setAttribute('stroke', strokeColor);\n });\n }\n\n const serializedSvg = new XMLSerializer().serializeToString(svgElement);\n const sanitizedSvg = this.sanitizer.bypassSecurityTrustHtml(serializedSvg);\n this.iconCache.set(cacheKey, sanitizedSvg); // Cache using the unique key\n return sanitizedSvg;\n }\n\n throw new Error(`Invalid SVG content for icon: ${name}`);\n })\n );\n }\n}\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, SimpleChanges } from '@angular/core';\nimport { SafeHtml } from '@angular/platform-browser';\nimport { SvgIconCacheService } from './svg-icon-cache.service';\n\n@Component({\n selector: 'lc-icon',\n template: `\n <div \n class=\"icon\"\n [innerHTML]=\"svgIcon\" \n [style.width.px]=\"size\" \n [style.height.px]=\"size\"\n [style.color]=\"color\">\n </div>\n `,\n styleUrls: [\n 'lc-icon.component.scss'\n ],\n changeDetection: ChangeDetectionStrategy.Default\n})\nexport class LcIconComponent implements OnInit {\n @Input() name: string = '';\n @Input() category: string = '';\n @Input() size: number = 24;\n @Input() color: string = 'currentColor';\n @Input() strokeColor: string = '';\n @Input() disabled: boolean = false;\n\n svgIcon: SafeHtml | null | undefined = null;\n disabledColor: string = '#e0e0e0';\n\n constructor(\n private iconRegistry: SvgIconCacheService,\n private cdr: ChangeDetectorRef\n ) { }\n\n ngOnChanges(changes: SimpleChanges) {\n this.loadIcon();\n }\n\n ngOnInit() {\n this.loadIcon();\n }\n\n private loadIcon() {\n if (!this.name) {\n console.warn('Icon name is required.');\n this.svgIcon = null;\n return;\n }\n\n const iconPath = this.category\n ? `../assets/icons/${this.category}/${this.name}.svg`\n : `../assets/icons/${this.name}.svg`;\n\n this.iconRegistry\n .registerIcon(this.name, iconPath, this.size, this.color, this.disabled, this.strokeColor) // Dynamically register and fetch the icon\n .subscribe(\n (icon) => {\n this.svgIcon = icon;\n this.cdr.detectChanges();\n },\n (error) => {\n console.error(`Error loading icon \"${this.name}\":`, error);\n }\n );\n }\n}\n\n\n\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\n@Pipe({\n name: 'safeHtml'\n})\nexport class SafeHtmlPipe implements PipeTransform {\n constructor(private sanitizer: DomSanitizer) {}\n\n transform(value: string): SafeHtml {\n return this.sanitizer.bypassSecurityTrustHtml(value);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { LcIconComponent } from './lc-icon.component';\nimport { SafeHtmlPipe } from './safe-html.pipe';\nimport { HttpClientModule } from '@angular/common/http';\n\n\n@NgModule({\n declarations: [LcIconComponent, SafeHtmlPipe],\n imports: [CommonModule, HttpClientModule],\n exports: [LcIconComponent]\n})\nexport class LcIconModule {}\n","/*\n * Public API Surface of @loyalty-cloud/ui-icons\n */\n\nexport * from './lib/lc-icon.module';\nexport * from './lib/lc-icon.component';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SvgIconCacheService"],"mappings":"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"}
|
|
@@ -14,8 +14,8 @@ class SvgIconCacheService {
|
|
|
14
14
|
this.iconCache = new Map();
|
|
15
15
|
this.disabledColor = '#e0e0e0';
|
|
16
16
|
}
|
|
17
|
-
registerIcon(name, url, size, color, disabled = false) {
|
|
18
|
-
const cacheKey = `${name}-${size}-${color}-${disabled}`; // Unique cache key
|
|
17
|
+
registerIcon(name, url, size, color, disabled = false, strokeColor) {
|
|
18
|
+
const cacheKey = `${name}-${size}-${color}-${disabled}-${strokeColor}`; // Unique cache key
|
|
19
19
|
if (this.iconCache.has(cacheKey)) {
|
|
20
20
|
return of(this.iconCache.get(cacheKey)); // Return the cached icon
|
|
21
21
|
}
|
|
@@ -34,6 +34,13 @@ class SvgIconCacheService {
|
|
|
34
34
|
el.setAttribute('fill', disabled ? this.disabledColor : color || 'black');
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
|
+
// If color is NOT present but strokeColor is provided, apply it to elements with stroke
|
|
38
|
+
if ((!color || color === 'currentColor') && strokeColor) {
|
|
39
|
+
const elementsWithStroke = svgElement.querySelectorAll('[stroke]');
|
|
40
|
+
elementsWithStroke.forEach((el) => {
|
|
41
|
+
el.setAttribute('stroke', strokeColor);
|
|
42
|
+
});
|
|
43
|
+
}
|
|
37
44
|
const serializedSvg = new XMLSerializer().serializeToString(svgElement);
|
|
38
45
|
const sanitizedSvg = this.sanitizer.bypassSecurityTrustHtml(serializedSvg);
|
|
39
46
|
this.iconCache.set(cacheKey, sanitizedSvg); // Cache using the unique key
|
|
@@ -60,6 +67,7 @@ class LcIconComponent {
|
|
|
60
67
|
this.category = '';
|
|
61
68
|
this.size = 24;
|
|
62
69
|
this.color = 'currentColor';
|
|
70
|
+
this.strokeColor = '';
|
|
63
71
|
this.disabled = false;
|
|
64
72
|
this.svgIcon = null;
|
|
65
73
|
this.disabledColor = '#e0e0e0';
|
|
@@ -80,7 +88,7 @@ class LcIconComponent {
|
|
|
80
88
|
? `../assets/icons/${this.category}/${this.name}.svg`
|
|
81
89
|
: `../assets/icons/${this.name}.svg`;
|
|
82
90
|
this.iconRegistry
|
|
83
|
-
.registerIcon(this.name, iconPath, this.size, this.color, this.disabled) // Dynamically register and fetch the icon
|
|
91
|
+
.registerIcon(this.name, iconPath, this.size, this.color, this.disabled, this.strokeColor) // Dynamically register and fetch the icon
|
|
84
92
|
.subscribe((icon) => {
|
|
85
93
|
this.svgIcon = icon;
|
|
86
94
|
this.cdr.detectChanges();
|
|
@@ -90,7 +98,7 @@ class LcIconComponent {
|
|
|
90
98
|
}
|
|
91
99
|
}
|
|
92
100
|
LcIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: LcIconComponent, deps: [{ token: SvgIconCacheService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
93
|
-
LcIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: LcIconComponent, selector: "lc-icon", inputs: { name: "name", category: "category", size: "size", color: "color", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: `
|
|
101
|
+
LcIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: LcIconComponent, selector: "lc-icon", inputs: { name: "name", category: "category", size: "size", color: "color", strokeColor: "strokeColor", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: `
|
|
94
102
|
<div
|
|
95
103
|
class="icon"
|
|
96
104
|
[innerHTML]="svgIcon"
|
|
@@ -118,6 +126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
|
|
|
118
126
|
type: Input
|
|
119
127
|
}], color: [{
|
|
120
128
|
type: Input
|
|
129
|
+
}], strokeColor: [{
|
|
130
|
+
type: Input
|
|
121
131
|
}], disabled: [{
|
|
122
132
|
type: Input
|
|
123
133
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loyalty-cloud-ui-icons.mjs","sources":["../../../projects/loyalty-cloud-ui-icons/src/lib/svg-icon-cache.service.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/lc-icon.component.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/safe-html.pipe.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/lc-icon.module.ts","../../../projects/loyalty-cloud-ui-icons/src/public-api.ts","../../../projects/loyalty-cloud-ui-icons/src/loyalty-cloud-ui-icons.ts"],"sourcesContent":["import { HttpClient } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { Observable, of } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class SvgIconCacheService {\n private iconCache = new Map<string, SafeHtml>();\n disabledColor: string = '#e0e0e0';\n\n constructor(private sanitizer: DomSanitizer, private http: HttpClient) { }\n\n registerIcon(name: string, url: string, size: number, color: string, disabled: boolean = false): Observable<SafeHtml> {\n const cacheKey = `${name}-${size}-${color}-${disabled}`; // Unique cache key\n\n if (this.iconCache.has(cacheKey)) {\n return of(this.iconCache.get(cacheKey)!); // Return the cached icon\n }\n\n return this.http.get(url, { responseType: 'text' }).pipe(\n map((svg) => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(svg, 'image/svg+xml');\n const svgElement = doc.querySelector('svg');\n\n if (svgElement) {\n // Update size attributes\n svgElement.setAttribute('width', `${size}`);\n svgElement.setAttribute('height', `${size}`);\n\n // Update color only for elements without a 'fill' attribute\n const elementsToUpdate = svgElement.querySelectorAll('path, circle, rect, polygon, ellipse');\n elementsToUpdate.forEach((el) => {\n if (!el.hasAttribute('fill')) {\n el.setAttribute('fill', disabled ? this.disabledColor : color || 'black');\n }\n });\n\n const serializedSvg = new XMLSerializer().serializeToString(svgElement);\n const sanitizedSvg = this.sanitizer.bypassSecurityTrustHtml(serializedSvg);\n this.iconCache.set(cacheKey, sanitizedSvg); // Cache using the unique key\n return sanitizedSvg;\n }\n\n throw new Error(`Invalid SVG content for icon: ${name}`);\n })\n );\n }\n}\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, SimpleChanges } from '@angular/core';\nimport { SafeHtml } from '@angular/platform-browser';\nimport { SvgIconCacheService } from './svg-icon-cache.service';\n\n@Component({\n selector: 'lc-icon',\n template: `\n <div \n class=\"icon\"\n [innerHTML]=\"svgIcon\" \n [style.width.px]=\"size\" \n [style.height.px]=\"size\"\n [style.color]=\"color\">\n </div>\n `,\n styleUrls: [\n 'lc-icon.component.scss'\n ],\n changeDetection: ChangeDetectionStrategy.Default\n})\nexport class LcIconComponent implements OnInit {\n @Input() name: string = '';\n @Input() category: string = '';\n @Input() size: number = 24;\n @Input() color: string = 'currentColor';\n @Input() disabled: boolean = false;\n\n svgIcon: SafeHtml | null | undefined = null;\n disabledColor: string = '#e0e0e0';\n\n constructor(\n private iconRegistry: SvgIconCacheService,\n private cdr: ChangeDetectorRef\n ) { }\n\n ngOnChanges(changes: SimpleChanges) {\n this.loadIcon();\n }\n\n ngOnInit() {\n this.loadIcon();\n }\n\n private loadIcon() {\n if (!this.name) {\n console.warn('Icon name is required.');\n this.svgIcon = null;\n return;\n }\n\n const iconPath = this.category\n ? `../assets/icons/${this.category}/${this.name}.svg`\n : `../assets/icons/${this.name}.svg`;\n\n this.iconRegistry\n .registerIcon(this.name, iconPath, this.size, this.color, this.disabled) // Dynamically register and fetch the icon\n .subscribe(\n (icon) => {\n this.svgIcon = icon;\n this.cdr.detectChanges();\n },\n (error) => {\n console.error(`Error loading icon \"${this.name}\":`, error);\n }\n );\n }\n}\n\n\n\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\n@Pipe({\n name: 'safeHtml'\n})\nexport class SafeHtmlPipe implements PipeTransform {\n constructor(private sanitizer: DomSanitizer) {}\n\n transform(value: string): SafeHtml {\n return this.sanitizer.bypassSecurityTrustHtml(value);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { LcIconComponent } from './lc-icon.component';\nimport { SafeHtmlPipe } from './safe-html.pipe';\nimport { HttpClientModule } from '@angular/common/http';\n\n\n@NgModule({\n declarations: [LcIconComponent, SafeHtmlPipe],\n imports: [CommonModule, HttpClientModule],\n exports: [LcIconComponent]\n})\nexport class LcIconModule {}\n","/*\n * Public API Surface of @loyalty-cloud/ui-icons\n */\n\nexport * from './lib/lc-icon.module';\nexport * from './lib/lc-icon.component';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SvgIconCacheService"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"loyalty-cloud-ui-icons.mjs","sources":["../../../projects/loyalty-cloud-ui-icons/src/lib/svg-icon-cache.service.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/lc-icon.component.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/safe-html.pipe.ts","../../../projects/loyalty-cloud-ui-icons/src/lib/lc-icon.module.ts","../../../projects/loyalty-cloud-ui-icons/src/public-api.ts","../../../projects/loyalty-cloud-ui-icons/src/loyalty-cloud-ui-icons.ts"],"sourcesContent":["import { HttpClient } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { Observable, of } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class SvgIconCacheService {\n private iconCache = new Map<string, SafeHtml>();\n disabledColor: string = '#e0e0e0';\n\n constructor(private sanitizer: DomSanitizer, private http: HttpClient) { }\n\n registerIcon(name: string, url: string, size: number, color: string, disabled: boolean = false, strokeColor:string): Observable<SafeHtml> {\n const cacheKey = `${name}-${size}-${color}-${disabled}-${strokeColor}`; // Unique cache key\n\n if (this.iconCache.has(cacheKey)) {\n return of(this.iconCache.get(cacheKey)!); // Return the cached icon\n }\n\n return this.http.get(url, { responseType: 'text' }).pipe(\n map((svg) => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(svg, 'image/svg+xml');\n const svgElement = doc.querySelector('svg');\n\n if (svgElement) {\n // Update size attributes\n svgElement.setAttribute('width', `${size}`);\n svgElement.setAttribute('height', `${size}`);\n\n // Update color only for elements without a 'fill' attribute\n const elementsToUpdate = svgElement.querySelectorAll('path, circle, rect, polygon, ellipse');\n elementsToUpdate.forEach((el) => {\n if (!el.hasAttribute('fill')) {\n el.setAttribute('fill', disabled ? this.disabledColor : color || 'black');\n }\n });\n\n // If color is NOT present but strokeColor is provided, apply it to elements with stroke\n if ((!color || color === 'currentColor') && strokeColor) {\n const elementsWithStroke = svgElement.querySelectorAll('[stroke]');\n elementsWithStroke.forEach((el) => {\n el.setAttribute('stroke', strokeColor);\n });\n }\n\n const serializedSvg = new XMLSerializer().serializeToString(svgElement);\n const sanitizedSvg = this.sanitizer.bypassSecurityTrustHtml(serializedSvg);\n this.iconCache.set(cacheKey, sanitizedSvg); // Cache using the unique key\n return sanitizedSvg;\n }\n\n throw new Error(`Invalid SVG content for icon: ${name}`);\n })\n );\n }\n}\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, SimpleChanges } from '@angular/core';\nimport { SafeHtml } from '@angular/platform-browser';\nimport { SvgIconCacheService } from './svg-icon-cache.service';\n\n@Component({\n selector: 'lc-icon',\n template: `\n <div \n class=\"icon\"\n [innerHTML]=\"svgIcon\" \n [style.width.px]=\"size\" \n [style.height.px]=\"size\"\n [style.color]=\"color\">\n </div>\n `,\n styleUrls: [\n 'lc-icon.component.scss'\n ],\n changeDetection: ChangeDetectionStrategy.Default\n})\nexport class LcIconComponent implements OnInit {\n @Input() name: string = '';\n @Input() category: string = '';\n @Input() size: number = 24;\n @Input() color: string = 'currentColor';\n @Input() strokeColor: string = '';\n @Input() disabled: boolean = false;\n\n svgIcon: SafeHtml | null | undefined = null;\n disabledColor: string = '#e0e0e0';\n\n constructor(\n private iconRegistry: SvgIconCacheService,\n private cdr: ChangeDetectorRef\n ) { }\n\n ngOnChanges(changes: SimpleChanges) {\n this.loadIcon();\n }\n\n ngOnInit() {\n this.loadIcon();\n }\n\n private loadIcon() {\n if (!this.name) {\n console.warn('Icon name is required.');\n this.svgIcon = null;\n return;\n }\n\n const iconPath = this.category\n ? `../assets/icons/${this.category}/${this.name}.svg`\n : `../assets/icons/${this.name}.svg`;\n\n this.iconRegistry\n .registerIcon(this.name, iconPath, this.size, this.color, this.disabled, this.strokeColor) // Dynamically register and fetch the icon\n .subscribe(\n (icon) => {\n this.svgIcon = icon;\n this.cdr.detectChanges();\n },\n (error) => {\n console.error(`Error loading icon \"${this.name}\":`, error);\n }\n );\n }\n}\n\n\n\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\n@Pipe({\n name: 'safeHtml'\n})\nexport class SafeHtmlPipe implements PipeTransform {\n constructor(private sanitizer: DomSanitizer) {}\n\n transform(value: string): SafeHtml {\n return this.sanitizer.bypassSecurityTrustHtml(value);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { LcIconComponent } from './lc-icon.component';\nimport { SafeHtmlPipe } from './safe-html.pipe';\nimport { HttpClientModule } from '@angular/common/http';\n\n\n@NgModule({\n declarations: [LcIconComponent, SafeHtmlPipe],\n imports: [CommonModule, HttpClientModule],\n exports: [LcIconComponent]\n})\nexport class LcIconModule {}\n","/*\n * Public API Surface of @loyalty-cloud/ui-icons\n */\n\nexport * from './lib/lc-icon.module';\nexport * from './lib/lc-icon.component';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.SvgIconCacheService"],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ export declare class LcIconComponent implements OnInit {
|
|
|
9
9
|
category: string;
|
|
10
10
|
size: number;
|
|
11
11
|
color: string;
|
|
12
|
+
strokeColor: string;
|
|
12
13
|
disabled: boolean;
|
|
13
14
|
svgIcon: SafeHtml | null | undefined;
|
|
14
15
|
disabledColor: string;
|
|
@@ -17,5 +18,5 @@ export declare class LcIconComponent implements OnInit {
|
|
|
17
18
|
ngOnInit(): void;
|
|
18
19
|
private loadIcon;
|
|
19
20
|
static ɵfac: i0.ɵɵFactoryDeclaration<LcIconComponent, never>;
|
|
20
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<LcIconComponent, "lc-icon", never, { "name": "name"; "category": "category"; "size": "size"; "color": "color"; "disabled": "disabled"; }, {}, never, never, false>;
|
|
21
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LcIconComponent, "lc-icon", never, { "name": "name"; "category": "category"; "size": "size"; "color": "color"; "strokeColor": "strokeColor"; "disabled": "disabled"; }, {}, never, never, false>;
|
|
21
22
|
}
|
|
@@ -8,7 +8,7 @@ export declare class SvgIconCacheService {
|
|
|
8
8
|
private iconCache;
|
|
9
9
|
disabledColor: string;
|
|
10
10
|
constructor(sanitizer: DomSanitizer, http: HttpClient);
|
|
11
|
-
registerIcon(name: string, url: string, size: number, color: string, disabled
|
|
11
|
+
registerIcon(name: string, url: string, size: number, color: string, disabled: boolean | undefined, strokeColor: string): Observable<SafeHtml>;
|
|
12
12
|
static ɵfac: i0.ɵɵFactoryDeclaration<SvgIconCacheService, never>;
|
|
13
13
|
static ɵprov: i0.ɵɵInjectableDeclaration<SvgIconCacheService>;
|
|
14
14
|
}
|