Refactor EllipsisDirective to use signals and computed

Replaces HostBinding and getter methods with Angular signals and computed properties for class, style, and title bindings. Improves reactivity and code clarity by leveraging Angular's new reactive primitives.

npm/ng-packs/packages/theme-shared/src/lib/directives/ellipsis.directive.ts

@@ -1,47 +1,48 @@
 import {
   AfterViewInit,
   ChangeDetectorRef,
+  computed,
   Directive,
   ElementRef,
-  HostBinding,
-  Input,
   inject,
-  input
+  input,
+  signal
 } from '@angular/core';
 
 @Directive({
   selector: '[abpEllipsis]',
+  host: {
+    '[title]': 'effectiveTitle()',
+    '[class.abp-ellipsis-inline]': 'inlineClass()',
+    '[class.abp-ellipsis]': 'ellipsisClass()',
+    '[style.max-width]': 'maxWidth()'
+  }
 })
 export class EllipsisDirective implements AfterViewInit {
   private cdRef = inject(ChangeDetectorRef);
   private elRef = inject(ElementRef);
 
-  readonly width = input<string>(undefined, { alias: "abpEllipsis" });
+  readonly width = input<string | undefined>(undefined, { alias: 'abpEllipsis' });
+  readonly title = input<string | undefined>(undefined);
+  readonly enabled = input(true, { alias: 'abpEllipsisEnabled' });
 
-  @HostBinding('title')
-  @Input()
-  title?: string;
+  private readonly autoTitle = signal<string | undefined>(undefined);
 
-  readonly enabled = input(true, { alias: "abpEllipsisEnabled" });
+  protected readonly effectiveTitle = computed(() => this.title() || this.autoTitle());
 
-  @HostBinding('class.abp-ellipsis-inline')
-  get inlineClass() {
-    return this.enabled() && this.width();
-  }
+  protected readonly inlineClass = computed(() => this.enabled() && !!this.width());
 
-  @HostBinding('class.abp-ellipsis')
-  get class() {
-    return this.enabled() && !this.width();
-  }
+  protected readonly ellipsisClass = computed(() => this.enabled() && !this.width());
 
-  @HostBinding('style.max-width')
-  get maxWidth() {
+  protected readonly maxWidth = computed(() => {
     const width = this.width();
     return this.enabled() && width ? width || '170px' : undefined;
-  }
+  });
 
   ngAfterViewInit() {
-    this.title = this.title || (this.elRef.nativeElement as HTMLElement).innerText;
-    this.cdRef.detectChanges();
+    if (!this.title()) {
+      this.autoTitle.set((this.elRef.nativeElement as HTMLElement).innerText);
+      this.cdRef.detectChanges();
+    }
   }
 }