@svgflex/angular 0.1.2 → 0.1.3

package/fesm2022/svgflex-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, HostBinding, Input, Component } from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, HostBinding, Input, Component } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { of } from 'rxjs';
@@ -64,6 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  *
  * Renders SVG icons with customizable color and size.
  * Supports both inline SVG (for full style control) and external references.
+ * Compatible with both Zone.js and Zoneless Angular applications.
  *
  * @example
  * <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
 class SvgflexComponent {
     svgLoader = inject(SvgLoaderService);
     sanitizer = inject(DomSanitizer);
+    cdr = inject(ChangeDetectorRef);
     /** Path or URL to the SVG file */
     src;
     /** Color for the SVG (defaults to 'currentColor') */
@@ -151,6 +153,8 @@ class SvgflexComponent {
             else {
                 console.log('[SvgflexComponent] Received empty content');
             }
+            // Manually trigger change detection for Zoneless compatibility
+            this.cdr.markForCheck();
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgflexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });

package/fesm2022/svgflex-angular.mjs.map

@@ -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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"}
+{"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 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      // Manually trigger change detection for Zoneless compatibility\n      this.cdr.markForCheck();\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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"}

package/index.d.ts

@@ -10,6 +10,7 @@ import { Observable } from 'rxjs';
  *
  * Renders SVG icons with customizable color and size.
  * Supports both inline SVG (for full style control) and external references.
+ * Compatible with both Zone.js and Zoneless Angular applications.
  *
  * @example
  * <svgflex src="assets/icons/home.svg" color="red" size="32"></svgflex>
@@ -18,6 +19,7 @@ import { Observable } from 'rxjs';
 declare class SvgflexComponent implements OnChanges {
     private svgLoader;
     private sanitizer;
+    private cdr;
     /** Path or URL to the SVG file */
     src: string;
     /** Color for the SVG (defaults to 'currentColor') */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgflex/angular",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Angular library for SVG icons with easy color and size customization",
   "keywords": [
     "svg",
@@ -28,7 +28,7 @@
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",
-    "@svgflex/core": "^0.1.2"
+    "@svgflex/core": "^0.1.3"
   },
   "dependencies": {
     "tslib": "^2.3.0"