@svgflex/angular 0.1.0 → 0.1.1

package/fesm2022/svgflex-angular.mjs

@@ -75,6 +75,8 @@ class SvgflexComponent {
     class;
     /** Accessibility label */
     ariaLabel;
+    /** Alternative text / Accessibility label (alias for ariaLabel) */
+    alt;
     /** Whether to inline the SVG (default: true) */
     inline = true;
     // Processed values
@@ -99,7 +101,7 @@ class SvgflexComponent {
             color: this.color,
             size: this.size,
             class: this.class,
-            ariaLabel: this.ariaLabel,
+            ariaLabel: this.ariaLabel || this.alt,
             inline: this.inline
         };
         const processed = processSvgConfig(config);
@@ -139,11 +141,11 @@ class SvgflexComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgflexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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", inline: "inline" }, 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]=\"processedColor\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.role]=\"ariaLabel ? 'img' : null\"\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      [style.width]=\"width\"\n      [style.height]=\"height\"\n    />\n  } @else {\n    <div class=\"svgflex-loading\"></div>\n  }\n</div>\n", styles: [":host{display:inline-block}: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 }] });
+    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" }, 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]=\"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", styles: [":host{display:inline-block}: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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SvgflexComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svgflex', standalone: true, imports: [CommonModule], template: "<div\n  class=\"svgflex-container\"\n  [style.color]=\"processedColor\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.role]=\"ariaLabel ? 'img' : null\"\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      [style.width]=\"width\"\n      [style.height]=\"height\"\n    />\n  } @else {\n    <div class=\"svgflex-loading\"></div>\n  }\n</div>\n", styles: [":host{display:inline-block}: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"] }]
+            args: [{ selector: 'svgflex', standalone: true, imports: [CommonModule], template: "<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", styles: [":host{display:inline-block}: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"] }]
         }], propDecorators: { src: [{
                 type: Input,
                 args: [{ required: true }]
@@ -155,6 +157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], ariaLabel: [{
                 type: Input
+            }], alt: [{
+                type: Input
             }], inline: [{
                 type: Input
             }], hostClasses: [{

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, Observable<string>>();\n\n  constructor(private http: HttpClient) {}\n\n  /**\n   * Loads SVG content from a URL with caching\n   */\n  loadSvg(url: string): Observable<string> {\n    console.log('[SvgLoaderService] Loading SVG from:', url);\n\n    if (this.cache.has(url)) {\n      console.log('[SvgLoaderService] Returning cached SVG for:', url);\n      return this.cache.get(url)!;\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);\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    this.cache.set(url, 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  /** Whether to inline the SVG (default: true) */\n  @Input() inline: boolean = true;\n\n  // Processed values\n  protected width: string = '24px';\n  protected height: string = '24px';\n  protected processedColor: string = 'currentColor';\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,\n      inline: this.inline\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.ariaLabel = processed.ariaLabel;\n\n    console.log('[SvgflexComponent] Processed config:', {\n      width: this.width,\n      height: this.height,\n      color: this.processedColor,\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'] || 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);\n\n    if (!this.src) {\n      console.log('[SvgflexComponent] No src provided, skipping load');\n      return;\n    }\n\n    this.svgLoader.loadSvg(this.src).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>\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      [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, Observable<string>>();\n\n  constructor(private http: HttpClient) {}\n\n  /**\n   * Loads SVG content from a URL with caching\n   */\n  loadSvg(url: string): Observable<string> {\n    console.log('[SvgLoaderService] Loading SVG from:', url);\n\n    if (this.cache.has(url)) {\n      console.log('[SvgLoaderService] Returning cached SVG for:', url);\n      return this.cache.get(url)!;\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);\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    this.cache.set(url, 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  // Processed values\n  protected width: string = '24px';\n  protected height: string = '24px';\n  protected processedColor: string = 'currentColor';\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    };\n\n    const processed = processSvgConfig(config);\n\n    this.width = processed.width;\n    this.height = processed.height;\n    this.processedColor = processed.color;\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      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'] || 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);\n\n    if (!this.src) {\n      console.log('[SvgflexComponent] No src provided, skipping load');\n      return;\n    }\n\n    this.svgLoader.loadSvg(this.src).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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"}

package/index.d.ts

@@ -28,6 +28,8 @@ declare class SvgflexComponent implements OnChanges {
     class?: string;
     /** Accessibility label */
     ariaLabel?: string;
+    /** Alternative text / Accessibility label (alias for ariaLabel) */
+    alt?: string;
     /** Whether to inline the SVG (default: true) */
     inline: boolean;
     protected width: string;
@@ -40,7 +42,7 @@ declare class SvgflexComponent implements OnChanges {
     ngOnChanges(changes: SimpleChanges): void;
     private loadSvgContent;
     static ɵfac: i0.ɵɵFactoryDeclaration<SvgflexComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SvgflexComponent, "svgflex", never, { "src": { "alias": "src"; "required": true; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SvgflexComponent, "svgflex", never, { "src": { "alias": "src"; "required": true; }; "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgflex/angular",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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.0"
+    "@svgflex/core": "^0.1.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"