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')
+  private readonly autoTitle = signal<string | undefined>(undefined);
-  @Input()
-  title?: string;
 
-  readonly enabled = input(true, { alias: "abpEllipsisEnabled" });
+  protected readonly effectiveTitle = computed(() => this.title() || this.autoTitle());
 
-  @HostBinding('class.abp-ellipsis-inline')
+  protected readonly inlineClass = computed(() => this.enabled() && !!this.width());
-  get inlineClass() {
-    return this.enabled() && this.width();
-  }
 
-  @HostBinding('class.abp-ellipsis')
+  protected readonly ellipsisClass = computed(() => this.enabled() && !this.width());
-  get class() {
-    return this.enabled() && !this.width();
-  }
 
-  @HostBinding('style.max-width')
+  protected readonly maxWidth = computed(() => {
-  get maxWidth() {
     const width = this.width();
     return this.enabled() && width ? width || '170px' : undefined;
-  }
+  });
 
   ngAfterViewInit() {
-    this.title = this.title || (this.elRef.nativeElement as HTMLElement).innerText;
+    if (!this.title()) {
-    this.cdRef.detectChanges();
+      this.autoTitle.set((this.elRef.nativeElement as HTMLElement).innerText);
+      this.cdRef.detectChanges();
+    }
   }
 }