@svgflex/angular 0.1.2 → 0.1.4
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, HostBinding, Input, Component } from '@angular/core';
|
|
2
|
+
import { Injectable, inject, ChangeDetectorRef, HostBinding, Input, Component } from '@angular/core';
|
|
3
3
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import { of } from 'rxjs';
|
|
@@ -64,6 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
64
64
|
*
|
|
65
65
|
* Renders SVG icons with customizable color and size.
|
|
66
66
|
* Supports both inline SVG (for full style control) and external references.
|
|
67
|
+
* Compatible with both Zone.js and Zoneless Angular applications.
|
|
67
68
|
*
|
|
68
69
|
* @example
|
|
69
70
|
* <svgflex src="assets/icons/home.svg" color="red" size="32"></svgflex>
|
|
@@ -72,6 +73,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
72
73
|
class SvgflexComponent {
|
|
73
74
|
svgLoader = inject(SvgLoaderService);
|
|
74
75
|
sanitizer = inject(DomSanitizer);
|
|
76
|
+
cdr = inject(ChangeDetectorRef);
|
|
75
77
|
/** Path or URL to the SVG file */
|
|
76
78
|
src;
|
|
77
79
|
/** Color for the SVG (defaults to 'currentColor') */
|
|
@@ -91,7 +93,6 @@ class SvgflexComponent {
|
|
|
91
93
|
// Processed values
|
|
92
94
|
width = '24px';
|
|
93
95
|
height = '24px';
|
|
94
|
-
processedColor = 'currentColor';
|
|
95
96
|
processedReplaceColors = true;
|
|
96
97
|
svgContent = null;
|
|
97
98
|
// Apply CSS classes to :host element
|
|
@@ -118,13 +119,12 @@ class SvgflexComponent {
|
|
|
118
119
|
const processed = processSvgConfig(config);
|
|
119
120
|
this.width = processed.width;
|
|
120
121
|
this.height = processed.height;
|
|
121
|
-
this.processedColor = processed.color;
|
|
122
122
|
this.processedReplaceColors = processed.replaceColors;
|
|
123
123
|
this.ariaLabel = processed.ariaLabel;
|
|
124
124
|
console.log('[SvgflexComponent] Processed config:', {
|
|
125
125
|
width: this.width,
|
|
126
126
|
height: this.height,
|
|
127
|
-
color: this.
|
|
127
|
+
color: this.color,
|
|
128
128
|
replaceColors: this.processedReplaceColors,
|
|
129
129
|
src: this.src
|
|
130
130
|
});
|
|
@@ -151,14 +151,16 @@ class SvgflexComponent {
|
|
|
151
151
|
else {
|
|
152
152
|
console.log('[SvgflexComponent] Received empty content');
|
|
153
153
|
}
|
|
154
|
+
// Manually trigger change detection for Zoneless compatibility
|
|
155
|
+
this.cdr.markForCheck();
|
|
154
156
|
});
|
|
155
157
|
}
|
|
156
158
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgflexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: SvgflexComponent, isStandalone: true, selector: "svgflex", inputs: { src: "src", color: "color", size: "size", class: "class", ariaLabel: "ariaLabel", alt: "alt", inline: "inline", replaceColors: "replaceColors" }, host: { properties: { "class": "this.hostClasses", "style.width": "this.hostWidth", "style.height": "this.hostHeight" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"svgflex-container\"\n [style.color]=\"
|
|
159
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: SvgflexComponent, isStandalone: true, selector: "svgflex", inputs: { src: "src", color: "color", size: "size", class: "class", ariaLabel: "ariaLabel", alt: "alt", inline: "inline", replaceColors: "replaceColors" }, host: { properties: { "class": "this.hostClasses", "style.width": "this.hostWidth", "style.height": "this.hostHeight" } }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"svgflex-container\"\n [style.color]=\"color || null\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.role]=\"ariaLabel ? 'img' : null\"\n [attr.title]=\"ariaLabel\"\n>\n @if (inline && svgContent) {\n <div [innerHTML]=\"svgContent\" class=\"svgflex-inline\"></div>\n } @else if (!inline) {\n <img\n [src]=\"src\"\n [alt]=\"ariaLabel || ''\"\n [title]=\"ariaLabel\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n />\n } @else {\n <div class=\"svgflex-loading\"></div>\n }\n</div>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}:host.block{display:block}:host.flex{display:flex}.svgflex-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:inherit}.svgflex-inline{display:contents}.svgflex-inline ::ng-deep svg{width:100%;height:100%;fill:currentColor}.svgflex-inline ::ng-deep svg path,.svgflex-inline ::ng-deep svg circle,.svgflex-inline ::ng-deep svg rect,.svgflex-inline ::ng-deep svg polygon,.svgflex-inline ::ng-deep svg polyline,.svgflex-inline ::ng-deep svg ellipse,.svgflex-inline ::ng-deep svg line{fill:currentColor}.svgflex-inline ::ng-deep svg[stroke]{stroke:currentColor}.svgflex-inline ::ng-deep svg[stroke] path,.svgflex-inline ::ng-deep svg[stroke] circle,.svgflex-inline ::ng-deep svg[stroke] rect,.svgflex-inline ::ng-deep svg[stroke] polygon,.svgflex-inline ::ng-deep svg[stroke] polyline,.svgflex-inline ::ng-deep svg[stroke] ellipse,.svgflex-inline ::ng-deep svg[stroke] line{stroke:currentColor}.svgflex-loading{width:100%;height:100%;background-color:currentColor;opacity:.1;border-radius:2px}img{display:block;max-width:100%;max-height:100%}:host.icon-sm{width:16px;height:16px}:host.icon-md{width:24px;height:24px}:host.icon-lg{width:32px;height:32px}:host.icon-xl{width:48px;height:48px}:host.icon-2xl{width:64px;height:64px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
158
160
|
}
|
|
159
161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgflexComponent, decorators: [{
|
|
160
162
|
type: Component,
|
|
161
|
-
args: [{ selector: 'svgflex', standalone: true, imports: [CommonModule], template: "<div\n class=\"svgflex-container\"\n [style.color]=\"
|
|
163
|
+
args: [{ selector: 'svgflex', standalone: true, imports: [CommonModule], template: "<div\n class=\"svgflex-container\"\n [style.color]=\"color || null\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.role]=\"ariaLabel ? 'img' : null\"\n [attr.title]=\"ariaLabel\"\n>\n @if (inline && svgContent) {\n <div [innerHTML]=\"svgContent\" class=\"svgflex-inline\"></div>\n } @else if (!inline) {\n <img\n [src]=\"src\"\n [alt]=\"ariaLabel || ''\"\n [title]=\"ariaLabel\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n />\n } @else {\n <div class=\"svgflex-loading\"></div>\n }\n</div>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}:host.block{display:block}:host.flex{display:flex}.svgflex-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:inherit}.svgflex-inline{display:contents}.svgflex-inline ::ng-deep svg{width:100%;height:100%;fill:currentColor}.svgflex-inline ::ng-deep svg path,.svgflex-inline ::ng-deep svg circle,.svgflex-inline ::ng-deep svg rect,.svgflex-inline ::ng-deep svg polygon,.svgflex-inline ::ng-deep svg polyline,.svgflex-inline ::ng-deep svg ellipse,.svgflex-inline ::ng-deep svg line{fill:currentColor}.svgflex-inline ::ng-deep svg[stroke]{stroke:currentColor}.svgflex-inline ::ng-deep svg[stroke] path,.svgflex-inline ::ng-deep svg[stroke] circle,.svgflex-inline ::ng-deep svg[stroke] rect,.svgflex-inline ::ng-deep svg[stroke] polygon,.svgflex-inline ::ng-deep svg[stroke] polyline,.svgflex-inline ::ng-deep svg[stroke] ellipse,.svgflex-inline ::ng-deep svg[stroke] line{stroke:currentColor}.svgflex-loading{width:100%;height:100%;background-color:currentColor;opacity:.1;border-radius:2px}img{display:block;max-width:100%;max-height:100%}:host.icon-sm{width:16px;height:16px}:host.icon-md{width:24px;height:24px}:host.icon-lg{width:32px;height:32px}:host.icon-xl{width:48px;height:48px}:host.icon-2xl{width:64px;height:64px}\n"] }]
|
|
162
164
|
}], propDecorators: { src: [{
|
|
163
165
|
type: Input,
|
|
164
166
|
args: [{ required: true }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svgflex-angular.mjs","sources":["../../../packages/angular/src/lib/services/svg-loader.service.ts","../../../packages/angular/src/lib/components/svgflex.component.ts","../../../packages/angular/src/lib/components/svgflex.component.html","../../../packages/angular/src/public-api.ts","../../../packages/angular/src/svgflex-angular.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { Observable, of } from 'rxjs';\nimport { map, catchError, shareReplay } from 'rxjs/operators';\nimport { sanitizeSvg } from '@svgflex/core';\n\n/**\n * Service for loading and caching SVG content\n */\n@Injectable({\n providedIn: 'root'\n})\nexport class SvgLoaderService {\n private cache = new Map<string, Map<boolean, Observable<string>>>();\n\n constructor(private http: HttpClient) {}\n\n /**\n * Loads SVG content from a URL with caching\n * @param url - URL to load the SVG from\n * @param replaceColors - Whether to replace hardcoded colors with currentColor (default: true)\n */\n loadSvg(url: string, replaceColors: boolean = true): Observable<string> {\n console.log('[SvgLoaderService] Loading SVG from:', url, 'replaceColors:', replaceColors);\n\n // Check cache with both url and replaceColors as key\n if (!this.cache.has(url)) {\n this.cache.set(url, new Map());\n }\n\n const urlCache = this.cache.get(url)!;\n if (urlCache.has(replaceColors)) {\n console.log('[SvgLoaderService] Returning cached SVG for:', url, 'replaceColors:', replaceColors);\n return urlCache.get(replaceColors)!;\n }\n\n const svg$ = this.http.get(url, { responseType: 'text' }).pipe(\n map(svgContent => {\n console.log('[SvgLoaderService] Successfully loaded SVG from:', url, 'Length:', svgContent.length);\n return sanitizeSvg(svgContent, replaceColors);\n }),\n catchError(error => {\n console.error(`[SvgLoaderService] Failed to load SVG from ${url}:`, error);\n return of('');\n }),\n shareReplay(1)\n );\n\n urlCache.set(replaceColors, svg$);\n return svg$;\n }\n\n /**\n * Clears the SVG cache\n */\n clearCache(): void {\n this.cache.clear();\n }\n}\n","import {\n Component,\n Input,\n OnChanges,\n SimpleChanges,\n HostBinding,\n inject\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { CommonModule } from '@angular/common';\nimport { SvgLoaderService } from '../services/svg-loader.service';\nimport { processSvgConfig, SvgFlexConfig, SvgSize, SvgColor } from '@svgflex/core';\n\n/**\n * SVGFlex Component\n *\n * Renders SVG icons with customizable color and size.\n * Supports both inline SVG (for full style control) and external references.\n *\n * @example\n * <svgflex src=\"assets/icons/home.svg\" color=\"red\" size=\"32\"></svgflex>\n * <svgflex src=\"assets/icons/user.svg\" color=\"currentColor\" [size]=\"{width: '2rem', height: '2rem'}\"></svgflex>\n */\n@Component({\n selector: 'svgflex',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './svgflex.component.html',\n styleUrl: './svgflex.component.scss'\n})\nexport class SvgflexComponent implements OnChanges {\n private svgLoader = inject(SvgLoaderService);\n private sanitizer = inject(DomSanitizer);\n\n /** Path or URL to the SVG file */\n @Input({ required: true }) src!: string;\n\n /** Color for the SVG (defaults to 'currentColor') */\n @Input() color?: SvgColor;\n\n /** Size for the SVG (number in px, string with units, or {width, height} object) */\n @Input() size?: SvgSize;\n\n /** Additional CSS classes */\n @Input() class?: string;\n\n /** Accessibility label */\n @Input() ariaLabel?: string;\n\n /** Alternative text / Accessibility label (alias for ariaLabel) */\n @Input() alt?: string;\n\n /** Whether to inline the SVG (default: true) */\n @Input() inline: boolean = true;\n\n /** Whether to replace hardcoded colors with currentColor (default: true) */\n @Input() replaceColors: boolean = true;\n\n // Processed values\n protected width: string = '24px';\n protected height: string = '24px';\n protected processedColor: string = 'currentColor';\n protected processedReplaceColors: boolean = true;\n protected svgContent: any = null;\n\n // Apply CSS classes to :host element\n @HostBinding('class')\n get hostClasses(): string {\n return this.class || '';\n }\n\n // Apply inline styles to :host element when size is specified\n @HostBinding('style.width')\n get hostWidth(): string | null {\n return this.size ? this.width : null;\n }\n\n @HostBinding('style.height')\n get hostHeight(): string | null {\n return this.size ? this.height : null;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n const config: SvgFlexConfig = {\n src: this.src,\n color: this.color,\n size: this.size,\n class: this.class,\n ariaLabel: this.ariaLabel || this.alt,\n inline: this.inline,\n replaceColors: this.replaceColors\n };\n\n const processed = processSvgConfig(config);\n\n this.width = processed.width;\n this.height = processed.height;\n this.processedColor = processed.color;\n this.processedReplaceColors = processed.replaceColors;\n this.ariaLabel = processed.ariaLabel;\n\n console.log('[SvgflexComponent] Processed config:', {\n width: this.width,\n height: this.height,\n color: this.processedColor,\n replaceColors: this.processedReplaceColors,\n src: this.src\n });\n\n // Load SVG content if inline mode is enabled\n // Check if src or inline changed, or if it's the first change (firstChange)\n if (this.inline && (changes['src'] || changes['inline'] || changes['replaceColors'] || Object.keys(changes).length > 0)) {\n this.loadSvgContent();\n }\n }\n\n private loadSvgContent(): void {\n console.log('[SvgflexComponent] loadSvgContent called, src:', this.src, 'inline:', this.inline, 'replaceColors:', this.processedReplaceColors);\n\n if (!this.src) {\n console.log('[SvgflexComponent] No src provided, skipping load');\n return;\n }\n\n this.svgLoader.loadSvg(this.src, this.processedReplaceColors).subscribe((content: string) => {\n console.log('[SvgflexComponent] Received SVG content, length:', content.length);\n if (content) {\n // SVG is already sanitized by SvgLoaderService\n // Directly bypass security and trust the HTML\n this.svgContent = this.sanitizer.bypassSecurityTrustHtml(content);\n console.log('[SvgflexComponent] SVG content set successfully');\n } else {\n console.log('[SvgflexComponent] Received empty content');\n }\n });\n }\n}\n","<div\n class=\"svgflex-container\"\n [style.color]=\"processedColor\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.role]=\"ariaLabel ? 'img' : null\"\n [attr.title]=\"ariaLabel\"\n>\n @if (inline && svgContent) {\n <div [innerHTML]=\"svgContent\" class=\"svgflex-inline\"></div>\n } @else if (!inline) {\n <img\n [src]=\"src\"\n [alt]=\"ariaLabel || ''\"\n [title]=\"ariaLabel\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n />\n } @else {\n <div class=\"svgflex-loading\"></div>\n }\n</div>\n","/*\n * Public API Surface of @svgflex/angular\n */\n\n// Components\nexport * from './lib/components/svgflex.component';\n\n// Services\nexport * from './lib/services/svg-loader.service';\n\n// Re-export core types and utils for convenience\nexport * from '@svgflex/core';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"svgflex-angular.mjs","sources":["../../../packages/angular/src/lib/services/svg-loader.service.ts","../../../packages/angular/src/lib/components/svgflex.component.ts","../../../packages/angular/src/lib/components/svgflex.component.html","../../../packages/angular/src/public-api.ts","../../../packages/angular/src/svgflex-angular.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { Observable, of } from 'rxjs';\nimport { map, catchError, shareReplay } from 'rxjs/operators';\nimport { sanitizeSvg } from '@svgflex/core';\n\n/**\n * Service for loading and caching SVG content\n */\n@Injectable({\n providedIn: 'root'\n})\nexport class SvgLoaderService {\n private cache = new Map<string, Map<boolean, Observable<string>>>();\n\n constructor(private http: HttpClient) {}\n\n /**\n * Loads SVG content from a URL with caching\n * @param url - URL to load the SVG from\n * @param replaceColors - Whether to replace hardcoded colors with currentColor (default: true)\n */\n loadSvg(url: string, replaceColors: boolean = true): Observable<string> {\n console.log('[SvgLoaderService] Loading SVG from:', url, 'replaceColors:', replaceColors);\n\n // Check cache with both url and replaceColors as key\n if (!this.cache.has(url)) {\n this.cache.set(url, new Map());\n }\n\n const urlCache = this.cache.get(url)!;\n if (urlCache.has(replaceColors)) {\n console.log('[SvgLoaderService] Returning cached SVG for:', url, 'replaceColors:', replaceColors);\n return urlCache.get(replaceColors)!;\n }\n\n const svg$ = this.http.get(url, { responseType: 'text' }).pipe(\n map(svgContent => {\n console.log('[SvgLoaderService] Successfully loaded SVG from:', url, 'Length:', svgContent.length);\n return sanitizeSvg(svgContent, replaceColors);\n }),\n catchError(error => {\n console.error(`[SvgLoaderService] Failed to load SVG from ${url}:`, error);\n return of('');\n }),\n shareReplay(1)\n );\n\n urlCache.set(replaceColors, svg$);\n return svg$;\n }\n\n /**\n * Clears the SVG cache\n */\n clearCache(): void {\n this.cache.clear();\n }\n}\n","import {\n Component,\n Input,\n OnChanges,\n SimpleChanges,\n HostBinding,\n inject,\n ChangeDetectorRef\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { CommonModule } from '@angular/common';\nimport { SvgLoaderService } from '../services/svg-loader.service';\nimport { processSvgConfig, SvgFlexConfig, SvgSize, SvgColor } from '@svgflex/core';\n\n/**\n * SVGFlex Component\n *\n * Renders SVG icons with customizable color and size.\n * Supports both inline SVG (for full style control) and external references.\n * Compatible with both Zone.js and Zoneless Angular applications.\n *\n * @example\n * <svgflex src=\"assets/icons/home.svg\" color=\"red\" size=\"32\"></svgflex>\n * <svgflex src=\"assets/icons/user.svg\" color=\"currentColor\" [size]=\"{width: '2rem', height: '2rem'}\"></svgflex>\n */\n@Component({\n selector: 'svgflex',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './svgflex.component.html',\n styleUrl: './svgflex.component.scss'\n})\nexport class SvgflexComponent implements OnChanges {\n private svgLoader = inject(SvgLoaderService);\n private sanitizer = inject(DomSanitizer);\n private cdr = inject(ChangeDetectorRef);\n\n /** Path or URL to the SVG file */\n @Input({ required: true }) src!: string;\n\n /** Color for the SVG (defaults to 'currentColor') */\n @Input() color?: SvgColor;\n\n /** Size for the SVG (number in px, string with units, or {width, height} object) */\n @Input() size?: SvgSize;\n\n /** Additional CSS classes */\n @Input() class?: string;\n\n /** Accessibility label */\n @Input() ariaLabel?: string;\n\n /** Alternative text / Accessibility label (alias for ariaLabel) */\n @Input() alt?: string;\n\n /** Whether to inline the SVG (default: true) */\n @Input() inline: boolean = true;\n\n /** Whether to replace hardcoded colors with currentColor (default: true) */\n @Input() replaceColors: boolean = true;\n\n // Processed values\n protected width: string = '24px';\n protected height: string = '24px';\n protected processedReplaceColors: boolean = true;\n protected svgContent: any = null;\n\n // Apply CSS classes to :host element\n @HostBinding('class')\n get hostClasses(): string {\n return this.class || '';\n }\n\n // Apply inline styles to :host element when size is specified\n @HostBinding('style.width')\n get hostWidth(): string | null {\n return this.size ? this.width : null;\n }\n\n @HostBinding('style.height')\n get hostHeight(): string | null {\n return this.size ? this.height : null;\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n const config: SvgFlexConfig = {\n src: this.src,\n color: this.color,\n size: this.size,\n class: this.class,\n ariaLabel: this.ariaLabel || this.alt,\n inline: this.inline,\n replaceColors: this.replaceColors\n };\n\n const processed = processSvgConfig(config);\n\n this.width = processed.width;\n this.height = processed.height;\n this.processedReplaceColors = processed.replaceColors;\n this.ariaLabel = processed.ariaLabel;\n\n console.log('[SvgflexComponent] Processed config:', {\n width: this.width,\n height: this.height,\n color: this.color,\n replaceColors: this.processedReplaceColors,\n src: this.src\n });\n\n // Load SVG content if inline mode is enabled\n // Check if src or inline changed, or if it's the first change (firstChange)\n if (this.inline && (changes['src'] || changes['inline'] || changes['replaceColors'] || Object.keys(changes).length > 0)) {\n this.loadSvgContent();\n }\n }\n\n private loadSvgContent(): void {\n console.log('[SvgflexComponent] loadSvgContent called, src:', this.src, 'inline:', this.inline, 'replaceColors:', this.processedReplaceColors);\n\n if (!this.src) {\n console.log('[SvgflexComponent] No src provided, skipping load');\n return;\n }\n\n this.svgLoader.loadSvg(this.src, this.processedReplaceColors).subscribe((content: string) => {\n console.log('[SvgflexComponent] Received SVG content, length:', content.length);\n if (content) {\n // SVG is already sanitized by SvgLoaderService\n // Directly bypass security and trust the HTML\n this.svgContent = this.sanitizer.bypassSecurityTrustHtml(content);\n console.log('[SvgflexComponent] SVG content set successfully');\n } else {\n console.log('[SvgflexComponent] Received empty content');\n }\n // Manually trigger change detection for Zoneless compatibility\n this.cdr.markForCheck();\n });\n }\n}\n","<div\n class=\"svgflex-container\"\n [style.color]=\"color || null\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.role]=\"ariaLabel ? 'img' : null\"\n [attr.title]=\"ariaLabel\"\n>\n @if (inline && svgContent) {\n <div [innerHTML]=\"svgContent\" class=\"svgflex-inline\"></div>\n } @else if (!inline) {\n <img\n [src]=\"src\"\n [alt]=\"ariaLabel || ''\"\n [title]=\"ariaLabel\"\n [style.width]=\"width\"\n [style.height]=\"height\"\n />\n } @else {\n <div class=\"svgflex-loading\"></div>\n }\n</div>\n","/*\n * Public API Surface of @svgflex/angular\n */\n\n// Components\nexport * from './lib/components/svgflex.component';\n\n// Services\nexport * from './lib/services/svg-loader.service';\n\n// Re-export core types and utils for convenience\nexport * from '@svgflex/core';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ import { Observable } from 'rxjs';
|
|
|
10
10
|
*
|
|
11
11
|
* Renders SVG icons with customizable color and size.
|
|
12
12
|
* Supports both inline SVG (for full style control) and external references.
|
|
13
|
+
* Compatible with both Zone.js and Zoneless Angular applications.
|
|
13
14
|
*
|
|
14
15
|
* @example
|
|
15
16
|
* <svgflex src="assets/icons/home.svg" color="red" size="32"></svgflex>
|
|
@@ -18,6 +19,7 @@ import { Observable } from 'rxjs';
|
|
|
18
19
|
declare class SvgflexComponent implements OnChanges {
|
|
19
20
|
private svgLoader;
|
|
20
21
|
private sanitizer;
|
|
22
|
+
private cdr;
|
|
21
23
|
/** Path or URL to the SVG file */
|
|
22
24
|
src: string;
|
|
23
25
|
/** Color for the SVG (defaults to 'currentColor') */
|
|
@@ -36,7 +38,6 @@ declare class SvgflexComponent implements OnChanges {
|
|
|
36
38
|
replaceColors: boolean;
|
|
37
39
|
protected width: string;
|
|
38
40
|
protected height: string;
|
|
39
|
-
protected processedColor: string;
|
|
40
41
|
protected processedReplaceColors: boolean;
|
|
41
42
|
protected svgContent: any;
|
|
42
43
|
get hostClasses(): string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@svgflex/angular",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "Angular library for SVG icons with easy color and size customization",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svg",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@angular/common": "^20.0.0",
|
|
30
30
|
"@angular/core": "^20.0.0",
|
|
31
|
-
"@svgflex/core": "^0.1.
|
|
31
|
+
"@svgflex/core": "^0.1.4"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"tslib": "^2.3.0"
|