refactor(progress): signal inputs, host bindings, cleanup, tests, service introduction

Author: xidedix

projects/coreui-angular/src/lib/progress/progress-bar.component.spec.ts

@@ -1,24 +1,31 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
+import { ComponentRef } from '@angular/core';
 import { ProgressBarComponent } from './progress-bar.component';
 import { ProgressBarDirective } from './progress-bar.directive';
+import { ProgressService } from './progress.service';
 
 describe('ProgressBarComponent', () => {
   let component: ProgressBarComponent;
+  let componentRef: ComponentRef<ProgressBarComponent>;
   let fixture: ComponentFixture<ProgressBarComponent>;
+  let directive: ProgressBarDirective;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [ProgressBarComponent, ProgressBarDirective]
+      imports: [ProgressBarComponent],
+      providers: [ProgressService]
     }).compileComponents();
 
     fixture = TestBed.createComponent(ProgressBarComponent);
 
     component = fixture.componentInstance;
-    fixture.debugElement.injector.get(ProgressBarDirective).value = 42;
-    fixture.debugElement.injector.get(ProgressBarDirective).color = 'success';
-    fixture.debugElement.injector.get(ProgressBarDirective).variant = 'striped';
-    fixture.debugElement.injector.get(ProgressBarDirective).animated = true;
+    componentRef = fixture.componentRef;
+    directive = fixture.debugElement.injector.get(ProgressBarDirective);
+    componentRef.setInput('value', 42);
+    componentRef.setInput('color', 'success');
+    componentRef.setInput('variant', 'striped');
+    componentRef.setInput('animated', true);
     fixture.detectChanges();
   }));
 
@@ -45,7 +52,7 @@ describe('ProgressBarComponent', () => {
   });
 
   it('should not have aria-* attributes', () => {
-    fixture.debugElement.injector.get(ProgressBarDirective).value = undefined;
+    componentRef.setInput('value', undefined);
     fixture.detectChanges();
     expect(fixture.nativeElement.getAttribute('aria-valuenow')).toBeFalsy();
     expect(fixture.nativeElement.getAttribute('aria-valuemin')).toBeFalsy();
@@ -54,15 +61,4 @@ describe('ProgressBarComponent', () => {
     // expect(fixture.nativeElement.style.width).toBeFalsy();
     expect(fixture.nativeElement.style.width).toBe('0%');
   });
-
-  it('should not have aria-* attributes', () => {
-    fixture.debugElement.injector.get(ProgressBarDirective).value = undefined;
-    fixture.debugElement.injector.get(ProgressBarDirective).width = 84;
-    fixture.detectChanges();
-    expect(fixture.nativeElement.getAttribute('aria-valuenow')).toBeFalsy();
-    expect(fixture.nativeElement.getAttribute('aria-valuemin')).toBeFalsy();
-    expect(fixture.nativeElement.getAttribute('aria-valuemax')).toBeFalsy();
-    expect(fixture.nativeElement.getAttribute('role')).toBeFalsy();
-    expect(fixture.nativeElement.style.width).toBe('84%');
-  });
 });

projects/coreui-angular/src/lib/progress/progress-bar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostBinding, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { ProgressBarDirective } from './progress-bar.directive';
 
 @Component({
@@ -7,25 +7,23 @@ import { ProgressBarDirective } from './progress-bar.directive';
   hostDirectives: [
     {
       directive: ProgressBarDirective,
-      inputs: ['animated', 'color', 'max', 'role', 'stacked', 'value', 'variant', 'width']
+      inputs: ['animated', 'color', 'max', 'role', 'value', 'variant']
     }
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'progress-bar' }
+  host: { class: 'progress-bar', '[class]': 'hostClasses()' }
 })
 export class ProgressBarComponent {
   readonly #progressBarDirective: ProgressBarDirective | null = inject(ProgressBarDirective, { optional: true });
 
-  @HostBinding('class')
-  get hostClasses(): Record<string, boolean> {
-    const animated = this.#progressBarDirective?.animated;
-    const color = this.#progressBarDirective?.color;
-    const variant = this.#progressBarDirective?.variant;
+  readonly hostClasses = computed(() => {
+    const animated = this.#progressBarDirective?.animated();
+    const color = this.#progressBarDirective?.color();
+    const variant = this.#progressBarDirective?.variant();
     return {
       'progress-bar': true,
       'progress-bar-animated': !!animated,
       [`progress-bar-${variant}`]: !!variant,
       [`bg-${color}`]: !!color
-    };
-  }
+    } as Record<string, boolean>;
+  });
 }

projects/coreui-angular/src/lib/progress/progress-bar.directive.spec.ts

@@ -1,33 +1,81 @@
-import { ElementRef, Renderer2 } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { Component, ComponentRef, DebugElement, ElementRef, input, Renderer2 } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ProgressBarDirective } from './progress-bar.directive';
+import { By } from '@angular/platform-browser';
+import { ProgressService } from './progress.service';
 
 class MockElementRef extends ElementRef {}
 
+@Component({
+  template: `<div cProgressBar [value]="value()" [color]="color()" variant="striped" animated></div>`,
+  selector: 'c-test',
+  imports: [ProgressBarDirective]
+})
+export class TestComponent {
+  readonly value = input(42);
+  readonly color = input('success');
+}
+
 describe('ProgressBarDirective', () => {
   let directive: ProgressBarDirective;
+  let debugElement: DebugElement;
+  let fixture: ComponentFixture<TestComponent>;
+  let componentRef: ComponentRef<TestComponent>;
 
   beforeEach(() => {
-
     TestBed.configureTestingModule({
-      providers: [
-        Renderer2,
-        { provide: ElementRef, useClass: MockElementRef }
-      ]
+      providers: [Renderer2, { provide: ElementRef, useClass: MockElementRef }, ProgressService],
+      imports: [TestComponent]
     });
+    fixture = TestBed.createComponent(TestComponent);
+    componentRef = fixture.componentRef;
+    debugElement = fixture.debugElement.query(By.directive(ProgressBarDirective));
+    directive = debugElement.injector.get(ProgressBarDirective);
+    fixture.detectChanges();
 
-    TestBed.runInInjectionContext(() => {
-      directive = new ProgressBarDirective();
-    });
+    // TestBed.runInInjectionContext(() => {
+    //   directive = new ProgressBarDirective();
+    // });
   });
 
   it('should create an instance', () => {
     expect(directive).toBeDefined();
   });
 
-  it('should have percent value', () => {
-    directive.value = 42;
-    expect(directive.percent()).toBe(42);
+  it('should have color value', () => {
+    expect(directive.color()).toBe('success');
+  });
+
+  it('should have max value', () => {
+    expect(directive.max()).toBe(100);
+  });
+
+  it('should have variant value', () => {
+    expect(directive.variant()).toBe('striped');
   });
 
+  it('should have role value', () => {
+    expect(directive.role()).toBe('progressbar');
+  });
+
+  it('should have precision value', () => {
+    expect(directive.precision()).toBe(0);
+  });
+
+  it('should have animated value', () => {
+    expect(directive.animated()).toBe(true);
+  });
+
+  it('should have aria-* attributes', () => {
+    expect(debugElement.nativeElement.getAttribute('aria-valuenow')).toBe('42');
+    expect(debugElement.nativeElement.getAttribute('aria-valuemin')).toBe('0');
+    expect(debugElement.nativeElement.getAttribute('aria-valuemax')).toBe('100');
+    expect(debugElement.nativeElement.getAttribute('role')).toBe('progressbar');
+    componentRef.setInput('value', undefined);
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.getAttribute('aria-valuenow')).toBeNull();
+    expect(debugElement.nativeElement.getAttribute('aria-valuemin')).toBeNull();
+    expect(debugElement.nativeElement.getAttribute('aria-valuemax')).toBeNull();
+    expect(debugElement.nativeElement.getAttribute('role')).toBeNull();
+  });
 });

projects/coreui-angular/src/lib/progress/progress-bar.directive.ts

@@ -1,122 +1,96 @@
 import {
   booleanAttribute,
-  computed,
   Directive,
   effect,
   EffectRef,
   ElementRef,
   inject,
-  Input,
+  input,
   numberAttribute,
-  Renderer2,
-  signal,
-  WritableSignal
+  Renderer2
 } from '@angular/core';
 import { Colors } from '../coreui.types';
-import { IProgressBar } from './progress.type';
+import { ProgressService } from './progress.service';
 
 @Directive({
-  selector: '[cProgressBar]'
+  selector: '[cProgressBar]',
+  exportAs: 'cProgressBar'
 })
-export class ProgressBarDirective implements IProgressBar {
+export class ProgressBarDirective {
   readonly #renderer = inject(Renderer2);
   readonly #hostElement = inject(ElementRef);
-
-  readonly #max = signal(100);
-  readonly #min = 0;
-  readonly #value: WritableSignal<number | undefined> = signal(undefined);
-  readonly #width: WritableSignal<number | undefined> = signal(undefined);
-
-  readonly percent = computed(() => {
-    return +((((this.#value() ?? this.#width() ?? 0) - this.#min) / (this.#max() - this.#min)) * 100).toFixed(
-      this.precision
-    );
-  });
+  readonly #progressService = inject(ProgressService);
 
   readonly #valuesEffect: EffectRef = effect(() => {
     const host: HTMLElement = this.#hostElement.nativeElement;
-    if (this.#value() === undefined || this.#width()) {
+    const value = this.#progressService.value();
+    const percent = this.#progressService.percent();
+    const stacked = this.#progressService.stacked();
+    if (value === undefined) {
       for (const name of ['aria-valuenow', 'aria-valuemax', 'aria-valuemin', 'role']) {
         this.#renderer.removeAttribute(host, name);
       }
     } else {
-      this.#renderer.setAttribute(host, 'aria-valuenow', String(this.#value()));
-      this.#renderer.setAttribute(host, 'aria-valuemin', String(this.#min));
-      this.#renderer.setAttribute(host, 'aria-valuemax', String(this.#max()));
-      this.#renderer.setAttribute(host, 'role', this.role);
+      const { min, max } = this.#progressService;
+      this.#renderer.setAttribute(host, 'aria-valuenow', String(value));
+      this.#renderer.setAttribute(host, 'aria-valuemin', String(min()));
+      this.#renderer.setAttribute(host, 'aria-valuemax', String(max()));
+      this.#renderer.setAttribute(host, 'role', this.role());
     }
     const tagName = host.tagName;
-    if (
-      this.percent() >= 0 &&
-      ((this.stacked && tagName === 'C-PROGRESS') || (!this.stacked && tagName !== 'C-PROGRESS'))
-    ) {
-      this.#renderer.setStyle(host, 'width', `${this.percent()}%`);
+    if (percent >= 0 && ((stacked && tagName === 'C-PROGRESS') || (!stacked && tagName !== 'C-PROGRESS'))) {
+      this.#renderer.setStyle(host, 'width', `${percent}%`);
     } else {
       this.#renderer.removeStyle(host, 'width');
     }
   });
 
   /**
    * Use to animate the stripes right to left via CSS3 animations.
-   * @type boolean
+   * @return boolean
    */
-  @Input({ transform: booleanAttribute }) animated?: boolean;
+  readonly animated = input<boolean, unknown>(undefined, { transform: booleanAttribute });
 
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
    * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
    */
-  @Input() color?: Colors;
+  readonly color = input<Colors>();
 
-  // TODO: check if this is necessary.
-  @Input({ transform: numberAttribute }) precision: number = 0;
+  readonly precision = input(0, { transform: numberAttribute });
 
   /**
    * The percent value the ProgressBar.
-   * @type number
+   * @return number
    * @default 0
    */
-  @Input({ transform: numberAttribute })
-  set value(value: number | undefined) {
-    this.#value.set(value);
-  }
-
-  get value() {
-    return this.#value();
-  }
-
-  @Input({ transform: numberAttribute })
-  set width(value: number | undefined) {
-    this.#width.set(value);
-  }
+  readonly value = input(undefined, { transform: numberAttribute });
 
   /**
    * Set the progress bar variant to optional striped.
    * @values 'striped'
    * @default undefined
    */
-  @Input() variant?: 'striped';
+  readonly variant = input<'striped'>();
 
   /**
    * The max value of the ProgressBar.
-   * @type number
+   * @return number
    * @default 100
    */
-  @Input({ transform: numberAttribute })
-  set max(max: number) {
-    this.#max.set(isNaN(max) || max <= 0 ? 100 : max);
-  }
-
-  /**
-   * Stacked ProgressBars.
-   * @type boolean
-   * @default false
-   */
-  @Input({ transform: booleanAttribute }) stacked?: boolean = false;
+  readonly max = input(100, { transform: numberAttribute });
 
   /**
    * Set default html role attribute.
-   * @type string
+   * @return string
    */
-  @Input() role: string = 'progressbar';
+  readonly role = input<string>('progressbar');
+
+  readonly #serviceEffect = effect(() => {
+    this.#progressService.precision.set(this.precision());
+    const max = this.max();
+    this.#progressService.max.set(isNaN(max) || max <= 0 ? 100 : max);
+    const value = this.value();
+    this.#progressService.value.set(value && !isNaN(value) ? value : undefined);
+  });
 }

projects/coreui-angular/src/lib/progress/progress-stacked.component.ts

@@ -1,18 +1,16 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
-import { IProgressBarStacked } from './progress.type';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'c-progress-stacked',
+  exportAs: 'cProgressStacked',
   template: '<ng-content />',
   styles: `
     :host {
       display: flex;
     }
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  host: { '[class.progress-stacked]': 'stacked()' }
 })
-export class ProgressStackedComponent implements IProgressBarStacked {
-  @Input()
-  @HostBinding('class.progress-stacked')
-  stacked = true;
+export class ProgressStackedComponent {
+  readonly stacked = input(true);
 }

projects/coreui-angular/src/lib/progress/progress.component.html

@@ -1,11 +1,8 @@
-@if (contentProgressBars.length) {
+@if (contentProgressBars()?.length) {
   <ng-container *ngTemplateOutlet="defaultContent" />
-} @else if (pbd?.stacked) {
-  <c-progress-bar [animated]="pbd?.animated" [variant]="pbd?.variant" [color]="pbd?.color" stacked>
-    <ng-container *ngTemplateOutlet="defaultContent" />
-  </c-progress-bar>
 } @else {
-  <c-progress-bar [width]="pbd?.percent()" [animated]="pbd?.animated" [variant]="pbd?.variant" [color]="pbd?.color">
+  @let pbd = progressBarDirective;
+  <c-progress-bar [animated]="pbd?.animated()" [variant]="pbd?.variant()" [color]="pbd?.color()" [value]="value()">
     <ng-container *ngTemplateOutlet="defaultContent" />
   </c-progress-bar>
 }