refactor(pagination): signal inputs, host bindings, cleanup, tests

Author: xidedix

CHANGELOG.md

@@ -12,6 +12,7 @@
 - refactor(header): signal inputs, host bindings, cleanup, tests
 - refactor(theme.directive): signal inputs, host bindings, cleanup, tests
 - refactor(offcanvas): signal inputs, host bindings, cleanup, tests
+- refactor(pagination): signal inputs, host bindings, cleanup, tests
 - test(accordion): coverage
 - test(element-ref): update
 - test(backdrop): coverage

projects/coreui-angular/src/lib/pagination/page-item/page-item.component.spec.ts

@@ -9,8 +9,7 @@ describe('PaginationItemComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [PageItemComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {

projects/coreui-angular/src/lib/pagination/page-item/page-item.directive.spec.ts

@@ -1,17 +1,60 @@
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { Component, ComponentRef, DebugElement, input, Renderer2 } from '@angular/core';
+import { provideRouter, RouterLink } from '@angular/router';
+
+import { PageLinkDirective } from '../page-link/page-link.directive';
+import { PageItemComponent } from './page-item.component';
 import { PageItemDirective } from './page-item.directive';
-import { TestBed } from '@angular/core/testing';
-import { Renderer2 } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  selector: 'c-test',
+  imports: [PageItemComponent, PageLinkDirective, PageItemComponent, PageLinkDirective, RouterLink],
+  template: `
+    <c-page-item [disabled]="disabled()">
+      <a cPageLink [routerLink]="[]">Previous</a>
+    </c-page-item>
+  `
+})
+export class TestComponent {
+  readonly disabled = input(false);
+}
 
 describe('PageItemDirective', () => {
+  let component: TestComponent;
+  let componentRef: ComponentRef<TestComponent>;
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [Renderer2]
-    });
+      imports: [TestComponent],
+      providers: [Renderer2, provideRouter([])]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+    debugElement = fixture.debugElement.query(By.directive(PageLinkDirective));
   });
+
   it('should create an instance', () => {
     TestBed.runInInjectionContext(() => {
       const directive = new PageItemDirective();
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should toggle disable state for the component', fakeAsync(() => {
+    expect(debugElement.nativeElement.getAttribute('aria-disabled')).toBeNull();
+    expect(debugElement.nativeElement.getAttribute('tabindex')).toBeNull();
+    componentRef.setInput('disabled', true);
+    tick();
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.getAttribute('aria-disabled')).toBe('true');
+    expect(debugElement.nativeElement.getAttribute('tabindex')).toBe('-1');
+    componentRef.setInput('disabled', false);
+    tick();
+    fixture.detectChanges();
+  }));
 });

projects/coreui-angular/src/lib/pagination/page-item/page-item.directive.ts

@@ -1,74 +1,58 @@
-import {
-  AfterContentInit,
-  ContentChild,
-  Directive,
-  ElementRef,
-  HostBinding,
-  inject,
-  Input,
-  OnChanges,
-  Renderer2,
-  SimpleChanges
-} from '@angular/core';
+import { computed, contentChild, Directive, effect, ElementRef, inject, input, Renderer2 } from '@angular/core';
 
 import { PageLinkDirective } from '../page-link/page-link.directive';
 
 @Directive({
   selector: '[cPageItem]',
-  host: { class: 'page-item' }
+  host: {
+    class: 'page-item',
+    '[class]': 'hostClasses()',
+    '[attr.aria-current]': 'ariaCurrent()'
+  }
 })
-export class PageItemDirective implements AfterContentInit, OnChanges {
+export class PageItemDirective {
   readonly #renderer = inject(Renderer2);
 
   /**
    * Toggle the active state for the component.
-   * @type boolean
+   * @return boolean
    */
-  @Input() active?: boolean;
+  readonly active = input<boolean>();
+
   /**
    * Toggle the disabled state for the component.
-   * @type boolean
+   * @return boolean
    */
-  @Input() disabled?: boolean;
+  readonly disabled = input<boolean>();
 
-  @HostBinding('attr.aria-current')
-  get ariaCurrent(): string | null {
-    return this.active ? 'page' : null;
-  }
+  readonly ariaCurrent = computed(() => {
+    return this.active() ? 'page' : null;
+  });
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
     return {
       'page-item': true,
-      disabled: this.disabled,
-      active: this.active
-    };
-  }
-
-  @ContentChild(PageLinkDirective, { read: ElementRef }) pageLinkElementRef!: ElementRef;
+      disabled: this.disabled(),
+      active: this.active()
+    } as Record<string, boolean>;
+  });
 
-  ngAfterContentInit(): void {
-    this.setAttributes();
-  }
+  readonly pageLinkElementRef = contentChild(PageLinkDirective, { read: ElementRef });
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['disabled']) {
-      this.setAttributes();
-    }
-  }
-
-  setAttributes(): void {
-    if (!this.pageLinkElementRef) {
+  readonly pageLinkElementRefEffect = effect(() => {
+    const pageLinkElementRef = this.pageLinkElementRef();
+    const disabled = this.disabled();
+    if (!pageLinkElementRef) {
       return;
     }
-    const pageLinkElement = this.pageLinkElementRef.nativeElement;
+    const pageLinkElement = pageLinkElementRef.nativeElement;
 
-    if (this.disabled) {
+    if (disabled) {
       this.#renderer.setAttribute(pageLinkElement, 'aria-disabled', 'true');
       this.#renderer.setAttribute(pageLinkElement, 'tabindex', '-1');
     } else {
       this.#renderer.removeAttribute(pageLinkElement, 'aria-disabled');
       this.#renderer.removeAttribute(pageLinkElement, 'tabindex');
     }
-  }
+  });
 }

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

@@ -1,3 +1,3 @@
-<ul [ngClass]="paginationClass">
+<ul [ngClass]="paginationClass()">
   <ng-content />
 </ul>

projects/coreui-angular/src/lib/pagination/pagination/pagination.component.ts

@@ -1,37 +1,39 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { NgClass } from '@angular/common';
 
 @Component({
-    selector: 'c-pagination',
-    templateUrl: './pagination.component.html',
-    imports: [NgClass]
+  selector: 'c-pagination',
+  templateUrl: './pagination.component.html',
+  imports: [NgClass],
+  host: {
+    '[attr.role]': 'role()'
+  }
 })
 export class PaginationComponent {
-
   /**
    * Set the alignment of pagination components.
    * @values 'start', 'center', 'end'
    */
-  @Input() align: 'start' | 'center' | 'end' | '' = '';
+  readonly align = input<'start' | 'center' | 'end' | ''>('');
   /**
    * Size the component small or large.
    * @values 'sm', 'lg'
    */
-  @Input() size?: 'sm' | 'lg';
+  readonly size = input<'sm' | 'lg'>();
   /**
    * Default role for pagination. [docs]
-   * @type string
+   * @return string
    * @default 'navigation'
    */
-  @HostBinding('attr.role')
-  @Input() role = 'navigation';
+  readonly role = input<string>('navigation');
 
-  get paginationClass(): any {
+  readonly paginationClass = computed(() => {
+    const size = this.size();
+    const align = this.align();
     return {
       pagination: true,
-      [`pagination-${this.size}`]: !!this.size,
-      [`justify-content-${this.align}`]: !!this.align
-    };
-  }
-
+      [`pagination-${size}`]: !!size,
+      [`justify-content-${align}`]: !!align
+    } as Record<string, boolean>;
+  });
 }