fix(icon): cIcon directive [name] binding does not refresh icon for Angular 17, refactor, closes #203, thanks @ProDInfo

Author: xidedix

projects/coreui-icons-angular/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 creativeLabs Łukasz Holeczek
+Copyright (c) 2024 creativeLabs Łukasz Holeczek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

projects/coreui-icons-angular/README.md

@@ -56,8 +56,8 @@ For directive description visit [https://coreui.io/angular/docs/](https://coreui
 ### Installation
 
 ```shell
-npm install @coreui/icons
-npm install @coreui/icons-angular
+npm install @coreui/icons@3
+npm install @coreui/icons-angular@4
 ```
 
 ### Usage
@@ -169,5 +169,5 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back
 
 ## Copyright and license
 
-Copyright 2023 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-angular/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Copyright 2024 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-angular/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
 

projects/coreui-icons-angular/package.json

@@ -27,8 +27,7 @@
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0",
-    "@angular/platform-browser": "^17.3.0",
-    "@coreui/icons": "^2.1.0 || ^3.0.0"
+    "@angular/platform-browser": "^17.3.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

projects/coreui-icons-angular/src/lib/icon/icon.component.svg

@@ -1,96 +1,122 @@
-import { NgClass, NgIf } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { NgClass } from '@angular/common';
+import {
+  AfterViewInit,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  Input,
+  Renderer2,
+  signal,
+  ViewChild
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 
 import { HtmlAttributesDirective } from '../shared/html-attr.directive';
 import { IconSetService } from '../icon-set';
 import { IconSize, IIcon } from './icon.interface';
-import { toCamelCase } from './icon.utils';
+import { transformName } from './icon.utils';
 
 @Component({
+  exportAs: 'cIconComponent',
+  imports: [NgClass, HtmlAttributesDirective],
   selector: 'c-icon',
-  templateUrl: './icon.component.svg',
-  styleUrls: ['./icon.component.scss'],
   standalone: true,
-  imports: [NgClass, NgIf, HtmlAttributesDirective],
+  styleUrls: ['./icon.component.scss'],
+  templateUrl: './icon.component.svg',
   // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: { ngSkipHydration: 'true' }
 })
 export class IconComponent implements IIcon, AfterViewInit {
 
+  readonly #renderer = inject(Renderer2);
+  readonly #elementRef = inject(ElementRef);
+  readonly #sanitizer = inject(DomSanitizer);
+  readonly #iconSet = inject(IconSetService);
+
+  constructor() {
+    this.#renderer.setStyle(this.#elementRef.nativeElement, 'display', 'none');
+  }
+
+  @Input()
+  set content(value: string | string[] | any[]) {
+    this.#content.set(value);
+  };
+
+  readonly #content = signal<string | string[] | any[]>('');
+
   @Input() attributes: any = { role: 'img' };
-  @Input() content?: string | string[] | any[];
+  @Input() customClasses?: string | string[] | Set<string> | { [klass: string]: any };
   @Input() size: IconSize = '';
   @Input() title?: string;
   @Input() use = '';
-  @Input() customClasses?: string | string[] | Set<string> | { [klass: string]: any } = '';
-  @Input() width?: string;
   @Input() height?: string;
+  @Input() width?: string;
+
+  @Input({ transform: transformName })
+  set name(value: string) {
+    this.#name.set(value);
+  };
 
-  @Input({ transform: (value: string) => value && value.includes('-') ? toCamelCase(value) : value }) name!: string;
+  get name() {
+    return this.#name();
+  }
+
+  readonly #name = signal('');
 
   @Input()
   set viewBox(viewBox: string) {
     this._viewBox = viewBox;
   }
 
   get viewBox(): string {
-    return this._viewBox ?? this.scale;
+    return this._viewBox ?? this.scale();
   }
 
   private _viewBox!: string;
 
   @ViewChild('svgElement', { read: ElementRef }) svgElementRef!: ElementRef;
 
-  get innerHtml(): SafeHtml {
-    const code = Array.isArray(this.code) ? this.code[1] || this.code[0] : this.code ?? '';
-    // todo proper sanitize
-    // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
-    return this.sanitizer.bypassSecurityTrustHtml((this.titleCode + code) ?? '');
-  }
-
-  constructor(
-    private renderer: Renderer2,
-    private elementRef: ElementRef,
-    private sanitizer: DomSanitizer,
-    private iconSet: IconSetService
-  ) {
-    this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');
-  }
-
   ngAfterViewInit(): void {
-    this.elementRef.nativeElement.classList.forEach((item: string) => {
-      this.renderer.addClass(this.svgElementRef.nativeElement, item);
+    this.#elementRef.nativeElement.classList.forEach((item: string) => {
+      this.#renderer.addClass(this.svgElementRef.nativeElement, item);
     });
-    const parentElement = this.renderer.parentNode(this.elementRef.nativeElement);
+    const parentElement = this.#renderer.parentNode(this.#elementRef.nativeElement);
     const svgElement = this.svgElementRef.nativeElement;
-    this.renderer.insertBefore(parentElement, svgElement, this.elementRef.nativeElement);
-    this.renderer.removeChild(parentElement, this.elementRef.nativeElement);
+    this.#renderer.insertBefore(parentElement, svgElement, this.#elementRef.nativeElement);
+    this.#renderer.removeChild(parentElement, this.#elementRef.nativeElement);
   }
 
+  readonly innerHtml = computed(() => {
+    const code = Array.isArray(this.code()) ? (this.code()[1] ?? this.code()[0] ?? '') : this.code() || '';
+    // todo proper sanitize
+    // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
+    return this.#sanitizer.bypassSecurityTrustHtml((this.titleCode + code) || '');
+  });
+
   get titleCode(): string {
     return this.title ? `<title>${this.title}</title>` : '';
   }
 
-  get code(): string | string[] | undefined {
-    if (this.content) {
-      return this.content;
+  readonly code = computed(() => {
+    if (this.#content()) {
+      return this.#content();
     }
-    if (this.iconSet && this.name) {
-      return this.iconSet.getIcon(this.name);
+    if (this.#iconSet && this.#name()) {
+      return this.#iconSet.getIcon(this.#name());
     }
-    if (this.name && !this.iconSet?.icons[this.name]) {
-      console.warn(`c-icon component: icon name '${this.name}' does not exist for IconSet service. ` +
+    if (this.#name() && !this.#iconSet?.icons[this.#name()]) {
+      console.warn(`c-icon component: icon name '${this.#name()}' does not exist for IconSet service. ` +
         `To use icon by 'name' prop you need to add it to IconSet service. \n`,
-        this.name
+        this.#name()
       );
     }
-    return undefined;
-  }
+    return '';
+  });
 
-  get scale(): string {
-    return Array.isArray(this.code) && this.code.length > 1 ? `0 0 ${this.code[0]}` : '0 0 64 64';
-  }
+  readonly scale = computed(() => {
+    return Array.isArray(this.code()) && this.code().length > 1 ? `0 0 ${this.code()[0]}` : '0 0 64 64';
+  });
 
   get computedSize(): Exclude<IconSize, 'custom'> | undefined {
     const addCustom = !this.size && (this.width || this.height);
@@ -102,10 +128,7 @@ export class IconComponent implements IIcon, AfterViewInit {
       icon: true,
       [`icon-${this.computedSize}`]: !!this.computedSize
     };
-    return !this.customClasses ? classes : this.customClasses;
+    return this.customClasses ?? classes;
   }
 
-  toCamelCase(str: string): string {
-    return toCamelCase(str);
-  }
 }