refactor(icon): signal inputs, host bindings, cleanup

Author: xidedix

projects/coreui-icons-angular/src/lib/icon-set/icon-set.service.ts

@@ -9,21 +9,23 @@ export interface IIconSet {
 })
 export class IconSetService {
   public get iconNames() {
-    return this._iconNames;
+    return this.#iconNames;
   }
 
-  private _iconNames: { [key: string]: string } = {};
+  #iconNames: Record<string, string> = {};
 
   get icons(): IIconSet {
-    return this._icons;
+    return this.#icons;
   }
+
   set icons(iconSet) {
     for (const iconsKey in iconSet) {
-      this._iconNames[iconsKey] = iconsKey;
+      this.#iconNames[iconsKey] = iconsKey;
     }
-    this._icons = iconSet;
+    this.#icons = iconSet;
   }
-  private _icons: IIconSet = {};
+
+  #icons: IIconSet = {};
 
   public getIcon(name: string): string[] {
     const icon = this.icons[name];

projects/coreui-icons-angular/src/lib/icon/icon.component.spec.ts

@@ -1,11 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Component, DebugElement, ViewChild } from '@angular/core';
+import { By } from '@angular/platform-browser';
 
 import { cilList } from '@coreui/icons';
 import { HtmlAttributesDirective } from '../shared/html-attr.directive';
-import { IconComponent } from './icon.component';
 import { IconSetService } from '../icon-set';
-import { By } from '@angular/platform-browser';
+import { IconComponent } from './icon.component';
 
 @Component({
   template: '<c-icon #icon name="cil-list" size="lg" class="test" />',
@@ -16,15 +16,13 @@ import { By } from '@angular/platform-browser';
 class TestComponent {
   @ViewChild('icon', { read: IconComponent }) iconRef!: IconComponent;
 
-  constructor(
-    public iconSet: IconSetService
-  ) {
+  constructor(public iconSet: IconSetService) {
     this.iconSet.icons = { cilList };
   }
 }
 
 describe('IconComponent', () => {
-  let inputEl: DebugElement;
+  let debugEl: DebugElement;
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
 
@@ -33,14 +31,13 @@ describe('IconComponent', () => {
       imports: [TestComponent, IconComponent, HtmlAttributesDirective],
       providers: [IconSetService]
     }).compileComponents();
-
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-    inputEl = fixture.debugElement.query(By.css('svg'));
+    debugEl = fixture.debugElement.query(By.css('svg'));
   });
 
   it('should create', () => {
@@ -52,13 +49,13 @@ describe('IconComponent', () => {
   });
   it('icon component should render', () => {
     expect(component.iconRef).toBeTruthy();
-    expect(component.iconRef.name).toBe('cilList');
+    expect(component.iconRef.name()).toBe('cilList');
     expect(component.iconRef.svgElementRef).toBeTruthy();
   });
   it('icon classes should be applied', () => {
-    expect(inputEl.nativeElement).toBeTruthy();
-    expect(inputEl.nativeElement).toHaveClass('icon');
-    expect(inputEl.nativeElement).toHaveClass('icon-lg');
-    expect(inputEl.nativeElement).toHaveClass('test');
+    expect(debugEl.nativeElement).toBeTruthy();
+    expect(debugEl.nativeElement).toHaveClass('icon');
+    expect(debugEl.nativeElement).toHaveClass('icon-lg');
+    expect(debugEl.nativeElement).toHaveClass('test');
   });
 });

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

@@ -1,20 +1,21 @@
 import { NgClass } from '@angular/common';
 import {
-  AfterViewInit,
+  afterNextRender,
   Component,
   computed,
+  effect,
   ElementRef,
   inject,
-  Input,
+  input,
   Renderer2,
   signal,
-  ViewChild
+  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 { IconSize, IIcon, NgCssClass } from './icon.interface';
 import { transformName } from './icon.utils';
 
 @Component({
@@ -24,109 +25,97 @@ import { transformName } from './icon.utils';
   standalone: true,
   styleUrls: ['./icon.component.scss'],
   templateUrl: './icon.component.svg',
-  host: { ngSkipHydration: 'true' }
+  host: { ngSkipHydration: 'true', style: 'display: none' }
 })
-export class IconComponent implements IIcon, AfterViewInit {
+export class IconComponent implements IIcon {
   readonly #renderer = inject(Renderer2);
   readonly #elementRef = inject(ElementRef);
   readonly #sanitizer = inject(DomSanitizer);
   readonly #iconSet = inject(IconSetService);
+  readonly #hostElement = signal<ElementRef<any> | undefined>(undefined);
 
   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() customClasses?: string | string[] | Set<string> | { [klass: string]: any };
-  @Input() size: IconSize = '';
-  @Input() title?: string;
-  @Input() use = '';
-  @Input() height?: string;
-  @Input() width?: string;
-
-  @Input({ transform: transformName })
-  set name(value: string) {
-    this.#name.set(value);
-  }
-
-  get name() {
-    return this.#name();
-  }
-
-  readonly #name = signal('');
-
-  @Input()
-  set viewBox(viewBox: string) {
-    this._viewBox = viewBox;
-  }
-
-  get viewBox(): string {
-    return this._viewBox ?? this.scale();
+    afterNextRender(() => {
+      this.#hostElement.set(this.#elementRef);
+    });
   }
 
-  private _viewBox!: string;
-
-  @ViewChild('svgElement', { read: ElementRef }) svgElementRef!: ElementRef;
+  readonly content = input<string | string[] | any[]>();
+
+  readonly attributes = input<Record<string, any>>({ role: 'img' });
+  readonly customClasses = input<NgCssClass>();
+  readonly size = input<IconSize>('');
+  readonly title = input<string>();
+  readonly use = input<string>('');
+  readonly height = input<string>();
+  readonly width = input<string>();
+  readonly name = input('', { transform: transformName });
+  readonly viewBoxInput = input<string | undefined>(undefined, { alias: 'viewBox' });
+
+  readonly svgElementRef = viewChild<ElementRef>('svgElement');
+
+  readonly svgElementEffect = effect(() => {
+    const svgElementRef = this.svgElementRef();
+    const hostElement = this.#hostElement()?.nativeElement;
+    if (svgElementRef && hostElement) {
+      const svgElement = svgElementRef.nativeElement;
+      hostElement.classList?.values()?.forEach((item: string) => {
+        this.#renderer.addClass(svgElement, item);
+      });
+      const parentElement = this.#renderer.parentNode(hostElement);
+      this.#renderer.insertBefore(parentElement, svgElement, hostElement);
+      this.#renderer.removeChild(parentElement, hostElement);
+    }
+  });
 
-  ngAfterViewInit(): void {
-    this.#elementRef.nativeElement.classList.forEach((item: string) => {
-      this.#renderer.addClass(this.svgElementRef.nativeElement, item);
-    });
-    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);
-  }
+  readonly viewBox = computed(() => {
+    return this.viewBoxInput() ?? this.scale();
+  });
 
   readonly innerHtml = computed(() => {
-    const code = Array.isArray(this.code()) ? (this.code()[1] ?? this.code()[0] ?? '') : this.code() || '';
+    const codeVal = this.code();
+    const code = Array.isArray(codeVal) ? (codeVal?.[1] ?? codeVal?.[0] ?? '') : codeVal || '';
     // todo proper sanitize
     // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
-    return this.#sanitizer.bypassSecurityTrustHtml(this.titleCode + code || '');
+    return this.#sanitizer.bypassSecurityTrustHtml(this.#titleCode() + code || '');
   });
 
-  get titleCode(): string {
-    return this.title ? `<title>${this.title}</title>` : '';
-  }
+  readonly #titleCode = computed(() => {
+    return this.title() ? `<title>${this.title()}</title>` : '';
+  });
 
   readonly code = computed(() => {
-    if (this.#content()) {
-      return this.#content();
+    const content = this.content();
+    if (content) {
+      return content;
     }
-    if (this.#iconSet && this.#name()) {
-      return this.#iconSet.getIcon(this.#name());
+    const name = this.name();
+    if (this.#iconSet && name) {
+      return this.#iconSet.getIcon(name);
     }
-    if (this.#name() && !this.#iconSet?.icons[this.#name()]) {
+    if (name && !this.#iconSet?.icons[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()
+        `c-icon component: The '${name}' icon not found. Add it to the IconSet service for use with the 'name' property. \n`,
+        name
       );
     }
     return '';
   });
 
   readonly scale = computed(() => {
-    return Array.isArray(this.code()) && this.code().length > 1 ? `0 0 ${this.code()[0]}` : '0 0 64 64';
+    return Array.isArray(this.code()) && (this.code()?.length ?? 0) > 1 ? `0 0 ${this.code()?.[0]}` : '0 0 64 64';
   });
 
-  get computedSize(): Exclude<IconSize, 'custom'> | undefined {
-    const addCustom = !this.size && (this.width || this.height);
-    return this.size === 'custom' || addCustom ? 'custom-size' : this.size;
-  }
+  readonly computedSize = computed(() => {
+    const addCustom = !this.size() && (this.width() || this.height());
+    return this.size() === 'custom' || addCustom ? 'custom-size' : this.size();
+  });
 
-  get computedClasses() {
+  readonly computedClasses = computed(() => {
     const classes = {
       icon: true,
-      [`icon-${this.computedSize}`]: !!this.computedSize
+      [`icon-${this.computedSize()}`]: !!this.computedSize()
     };
-    return this.customClasses ?? classes;
-  }
+    return this.customClasses() ?? classes;
+  });
 }

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

@@ -26,9 +26,6 @@ describe('IconDirective', () => {
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
   let svgEl: DebugElement;
-  // let renderer: Renderer2;
-  // let sanitizer: DomSanitizer;
-  // let iconSetService: IconSetService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -40,9 +37,6 @@ describe('IconDirective', () => {
     component = fixture.componentInstance;
     fixture.detectChanges();
     svgEl = fixture.debugElement.query(By.css('svg'));
-    // renderer = fixture.componentRef.injector.get(Renderer2 as Type<Renderer2>);
-    // sanitizer = fixture.componentRef.injector.get(DomSanitizer);
-    // iconSetService = fixture.componentRef.injector.get(IconSetService);
   });
   it('should create an instance', () => {
     TestBed.runInInjectionContext(() => {