refactor(progress): add progress-bar props for simplified use with [value], add progress-stacked component, update testing, rewrite with signals

Author: xidedix

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

@@ -1,25 +1,67 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ProgressBarComponent } from './progress-bar.component';
+import { ProgressBarDirective } from './progress-bar.directive';
 
 describe('ProgressBarComponent', () => {
   let component: ProgressBarComponent;
   let fixture: ComponentFixture<ProgressBarComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [ProgressBarComponent]
-    })
-      .compileComponents();
-  }));
+      imports: [ProgressBarComponent, ProgressBarDirective]
+    }).compileComponents();
 
-  beforeEach(() => {
     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;
     fixture.detectChanges();
-  });
+  }));
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(component).toBeDefined();
+  });
+
+  it('should have css class="progress-bar"', () => {
+    expect(fixture.nativeElement.classList.contains('progress-bar')).toBeTruthy();
+    expect(fixture.nativeElement.classList.contains('bg-success')).toBeTruthy();
+    expect(fixture.nativeElement.classList.contains('progress-bar-striped')).toBeTruthy();
+    expect(fixture.nativeElement.classList.contains('progress-bar-animated')).toBeTruthy();
+  });
+
+  it('should have style width %', () => {
+    expect(fixture.nativeElement.style.width).toBe('42%');
+  });
+
+  it('should have aria-* attributes', () => {
+    expect(fixture.nativeElement.getAttribute('aria-valuenow')).toBe('42');
+    expect(fixture.nativeElement.getAttribute('aria-valuemin')).toBe('0');
+    expect(fixture.nativeElement.getAttribute('aria-valuemax')).toBe('100');
+    expect(fixture.nativeElement.getAttribute('role')).toBe('progressbar');
+  });
+
+  it('should not have aria-* attributes', () => {
+    fixture.debugElement.injector.get(ProgressBarDirective).value = undefined;
+    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).toBeFalsy();
+  });
+
+  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,112 +1,30 @@
-import {
-  booleanAttribute,
-  Component,
-  ElementRef,
-  HostBinding,
-  Input,
-  numberAttribute,
-  OnChanges,
-  OnInit,
-  Renderer2,
-  SimpleChanges
-} from '@angular/core';
-import { Colors } from '../coreui.types';
+import { ChangeDetectionStrategy, Component, HostBinding, inject } from '@angular/core';
+import { ProgressBarDirective } from './progress-bar.directive';
 
 @Component({
   selector: 'c-progress-bar',
-  template: '<ng-content></ng-content>',
-  standalone: true
+  template: '<ng-content />',
+  standalone: true,
+  hostDirectives: [{
+    directive: ProgressBarDirective,
+    inputs: ['animated', 'color', 'max', 'role', 'stacked', 'value', 'variant', 'width']
+  }],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ProgressBarComponent implements OnInit, OnChanges {
+export class ProgressBarComponent {
 
-  /**
-   * Use to animate the stripes right to left via CSS3 animations.
-   * @type boolean
-   */
-  @Input({ transform: booleanAttribute }) animated: string | boolean = false;
-
-  /**
-   * 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;
-  // TODO: check if this is necessary.
-  @Input({ transform: numberAttribute }) precision: string | number = 0;
-  /**
-   * The percent to progress the ProgressBar.
-   * @type number
-   */
-  @Input({ transform: numberAttribute }) value: string | number = 0;
-
-  /**
-   * Set the progress bar variant to optional striped.
-   * @values 'striped'
-   */
-  @Input() variant?: 'striped';
-
-  /**
-   * Set default html role attribute.
-   * @type string
-   */
-  @Input()
-  @HostBinding('attr.role') role = 'progressbar';
-  private state = {
-    percent: 0,
-    min: 0,
-    max: 100
-  };
-
-  constructor(
-    private renderer: Renderer2,
-    private hostElement: ElementRef
-  ) { }
-
-  get min(): number {
-    return this.state.min;
-  }
-
-  @Input()
-  set min(value: number) {
-    this.state.min = isNaN(value) ? 0 : value;
-  }
-
-  get max(): number {
-    return this.state.max;
-  }
-
-  @Input()
-  set max(value: number) {
-    this.state.max = isNaN(value) || value <= 0 || value === this.min ? 100 : value;
-  }
+  readonly #progressBarDirective: ProgressBarDirective | null = inject(ProgressBarDirective, { optional: true });
 
   @HostBinding('class')
-  get hostClasses(): any {
+  get hostClasses(): Record<string, boolean> {
+    const animated = this.#progressBarDirective?.animated;
+    const color = this.#progressBarDirective?.color;
+    const variant = this.#progressBarDirective?.variant;
     return {
       'progress-bar': true,
-      'progress-bar-animated': this.animated,
-      [`progress-bar-${this.variant}`]: !!this.variant,
-      [`bg-${this.color}`]: !!this.color
+      'progress-bar-animated': !!animated,
+      [`progress-bar-${variant}`]: !!variant,
+      [`bg-${color}`]: !!color
     };
   }
-
-  ngOnInit(): void {
-    this.setValues();
-  }
-
-  setPercent(): void {
-    this.state.percent = +((<number>this.value / (this.max - this.min)) * 100).toFixed(<number>this.precision);
-  }
-
-  setValues(): void {
-    this.setPercent();
-    const host: HTMLElement = this.hostElement.nativeElement;
-    this.renderer.setStyle(host, 'width', `${this.state.percent}%`);
-    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));
-  }
-
-  public ngOnChanges(changes: SimpleChanges): void {
-    this.setValues();
-  }
 }

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

@@ -0,0 +1,33 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { ProgressBarDirective } from './progress-bar.directive';
+
+class MockElementRef extends ElementRef {}
+
+describe('ProgressBarDirective', () => {
+  let directive: ProgressBarDirective;
+
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      providers: [
+        Renderer2,
+        { provide: ElementRef, useClass: MockElementRef }
+      ]
+    });
+
+    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);
+  });
+
+});

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

@@ -0,0 +1,122 @@
+import {
+  booleanAttribute,
+  computed,
+  Directive,
+  effect,
+  EffectRef,
+  ElementRef,
+  inject,
+  Input,
+  numberAttribute,
+  Renderer2,
+  signal,
+  WritableSignal
+} from '@angular/core';
+import { Colors } from '../coreui.types';
+import { IProgressBar } from './progress.type';
+
+@Directive({
+  selector: '[cProgressBar]',
+  standalone: true
+})
+export class ProgressBarDirective implements IProgressBar {
+
+  constructor() {}
+
+  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 #valuesEffect: EffectRef = effect(() => {
+    const host: HTMLElement = this.#hostElement.nativeElement;
+    if (this.#value() === undefined || this.#width()) {
+      for (let 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 tagName = host.tagName;
+    if (this.percent() && ((this.stacked && tagName === 'C-PROGRESS') || (!this.stacked && tagName !== 'C-PROGRESS'))) {
+      this.#renderer.setStyle(host, 'width', `${this.percent()}%`);
+    } else {
+      this.#renderer.removeStyle(host, 'width');
+    }
+  });
+
+  /**
+   * Use to animate the stripes right to left via CSS3 animations.
+   * @type boolean
+   */
+  @Input({ transform: booleanAttribute }) animated?: boolean;
+
+  /**
+   * 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;
+
+  // TODO: check if this is necessary.
+  @Input({ transform: numberAttribute }) precision: number = 0;
+
+  /**
+   * The percent value the ProgressBar.
+   * @type 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);
+  }
+
+  /**
+   * Set the progress bar variant to optional striped.
+   * @values 'striped'
+   * @default undefined
+   */
+  @Input() variant?: 'striped';
+
+  /**
+   * The max value of the ProgressBar.
+   * @type 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;
+
+  /**
+   * Set default html role attribute.
+   * @type string
+   */
+  @Input() role: string = 'progressbar';
+
+}

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

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressStackedComponent } from './progress-stacked.component';
+
+describe('ProgressStackedComponent', () => {
+  let component: ProgressStackedComponent;
+  let fixture: ComponentFixture<ProgressStackedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProgressStackedComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ProgressStackedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeDefined();
+    expect(component.stacked).toBeTruthy();
+  });
+});