event subscriptions

2026-03-15 15:39:45 +01:00
parent 29c6828dd1
commit 2620538a2c
26 changed files with 1028 additions and 214 deletions
@@ -0,0 +1,53 @@
+import {
+    AfterViewInit,
+    Directive,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    signal,
+    WritableSignal,
+} from '@angular/core';
+import { MatTooltip } from '@angular/material/tooltip';
+
+@Directive({
+    selector: '[ellipsis]',
+    hostDirectives: [MatTooltip],
+})
+export class Ellipsis implements AfterViewInit {
+    // private readonly templateRef = inject(TemplateRef<any>);
+    // private readonly viewContainer = inject(ViewContainerRef);
+    private readonly elementRef = inject<ElementRef<HTMLElement>>(
+        ElementRef<HTMLElement>,
+    );
+    private readonly tooltip = inject(MatTooltip);
+    private readonly originalText: WritableSignal<string>;
+    public readonly ellipsis = input.required<number>();
+
+    public constructor() {
+        this.originalText = signal(this.elementRef.nativeElement.innerHTML);
+        effect(() => {
+            const length = this.ellipsis();
+            const originalText = this.originalText();
+            this.tooltip.message = originalText;
+            if (length < 0) {
+                console.warn('Ellipsis Pipe with negative length', length);
+                this.elementRef.nativeElement.innerHTML = '';
+                return;
+            }
+            if (length < 4) {
+                this.elementRef.nativeElement.innerHTML = '.'.repeat(length);
+                return;
+            }
+            if (originalText.length > length) {
+                this.elementRef.nativeElement.innerHTML = `${originalText.substring(0, length - 3)}...`;
+                return;
+            }
+        });
+    }
+
+    public ngAfterViewInit(): void {
+        const originalText = this.elementRef.nativeElement.innerText;
+        this.originalText.set(originalText);
+    }
+}