refactor(pagination): input transform for disabled prop, cleanups

Author: xidedix

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ---
 
+#### `5.5.22` next
+
+- refactor(pagination): input transform for disabled prop, cleanups
+
+---
+
 #### `5.5.21`
 
 - chore(dependencies): update to `Angular 20.3.10`

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

@@ -1,4 +1,15 @@
-import { computed, contentChild, Directive, effect, ElementRef, inject, input, Renderer2 } from '@angular/core';
+import {
+  booleanAttribute,
+  computed,
+  contentChild,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  Renderer2
+} from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 
 import { PageLinkDirective } from '../page-link/page-link.directive';
 
@@ -11,6 +22,8 @@ import { PageLinkDirective } from '../page-link/page-link.directive';
   }
 })
 export class PageItemDirective {
+  static ngAcceptInputType_disabled: BooleanInput;
+
   readonly #renderer = inject(Renderer2);
 
   /**
@@ -23,7 +36,7 @@ export class PageItemDirective {
    * Toggle the disabled state for the component.
    * @return boolean
    */
-  readonly disabled = input<boolean>();
+  readonly disabled = input(false, { transform: booleanAttribute });
 
   readonly ariaCurrent = computed(() => {
     return this.active() ? 'page' : null;

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

@@ -1,8 +1,11 @@
+import { TestBed } from '@angular/core/testing';
 import { PageLinkDirective } from './page-link.directive';
 
 describe('PageLinkDirective', () => {
   it('should create an instance', () => {
-    const directive = new PageLinkDirective();
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new PageLinkDirective();
+      expect(directive).toBeTruthy();
+    });
   });
 });

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

@@ -1,7 +1,19 @@
-import { Directive } from '@angular/core';
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
 
 @Directive({
   selector: '[cPageLink]',
-  host: { class: 'page-link' }
+  host: { class: 'page-link', '[class]': 'hostClasses()' }
 })
-export class PageLinkDirective {}
+export class PageLinkDirective {
+  static ngAcceptInputType_disabled: BooleanInput;
+
+  readonly disabled = input(false, { transform: booleanAttribute });
+
+  readonly hostClasses = computed(() => {
+    return {
+      'page-link': true,
+      disabled: this.disabled()
+    } as Record<string, boolean>;
+  });
+}