@fundamental-ngx/cdk 0.61.2 → 0.62.0-rc.1

package/fesm2022/fundamental-ngx-cdk-utils.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { INJECTOR, ElementRef, isDevMode, InjectionToken, EventEmitter, inject, NgZone, Input, Output, Directive, NgModule, DestroyRef, Injectable, signal, DOCUMENT, Optional, Inject, booleanAttribute, Renderer2, PLATFORM_ID, input, effect, Self, SkipSelf, computed, ChangeDetectorRef, ContentChildren, forwardRef, HostListener, HostBinding, output, linkedSignal, Injector, model, contentChildren, runInInjectionContext, untracked, ContentChild, QueryList, ViewContainerRef, TemplateRef, ViewChild, Component, NgModuleFactory, Pipe } from '@angular/core';
+import { INJECTOR, ElementRef, isDevMode, InjectionToken, EventEmitter, inject, NgZone, DestroyRef, Input, Output, Directive, NgModule, Injectable, signal, DOCUMENT, Optional, Inject, booleanAttribute, output, Renderer2, PLATFORM_ID, input, effect, Self, SkipSelf, computed, ChangeDetectorRef, ContentChildren, forwardRef, HostListener, HostBinding, linkedSignal, Injector, model, contentChildren, runInInjectionContext, untracked, ContentChild, QueryList, TemplateRef, numberAttribute, ViewContainerRef, ViewChild, Component, NgModuleFactory, Pipe } from '@angular/core';
 import { RIGHT_ARROW, DOWN_ARROW, LEFT_ARROW, UP_ARROW, SPACE, ESCAPE, DELETE, ENTER, MAC_ENTER, TAB, HOME, END, ALT, CONTROL, META, SHIFT, BACKSPACE, A, C, V, X, PAGE_UP, PAGE_DOWN, DASH, NUMPAD_MINUS, NUMPAD_ZERO, NUMPAD_ONE, NUMPAD_TWO, NUMPAD_THREE, NUMPAD_FOUR, NUMPAD_FIVE, NUMPAD_SIX, NUMPAD_SEVEN, NUMPAD_EIGHT, NUMPAD_NINE, F2, F7, hasModifierKey } from '@angular/cdk/keycodes';
-import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
-import { Observable, NEVER, fromEvent, switchMap, map as map$1, Subject, BehaviorSubject, merge as merge$1, combineLatest, ReplaySubject, firstValueFrom, startWith as startWith$1, Subscription, isObservable, of, tap as tap$1, filter as filter$1, take as take$1 } from 'rxjs';
-import { map, first, distinctUntilChanged, startWith, takeUntil, filter, tap, switchMap as switchMap$1, finalize, take, debounceTime, pairwise, shareReplay, delay } from 'rxjs/operators';
+import { takeUntilDestroyed, outputToObservable, outputFromObservable } from '@angular/core/rxjs-interop';
+import { Observable, NEVER, fromEvent, Subject, BehaviorSubject, merge as merge$1, map as map$1, combineLatest, ReplaySubject, firstValueFrom, startWith as startWith$1, switchMap as switchMap$1, Subscription, isObservable, of, tap as tap$1, filter as filter$1, take as take$1 } from 'rxjs';
+import { map, distinctUntilChanged, startWith, takeUntil, filter, tap, switchMap, finalize, take, debounceTime, pairwise, shareReplay, delay } from 'rxjs/operators';
 import { coerceElement, coerceBooleanProperty, coerceNumberProperty, coerceArray, coerceCssPixelValue } from '@angular/cdk/coercion';
 import { createFocusTrap } from 'focus-trap';
 import * as i1$1 from '@angular/cdk/a11y';
@@ -657,7 +657,10 @@ class AutoCompleteDirective {
         this._isComposing = false;
         /** @hidden */
         this._elementRef = inject(ElementRef);
+        /** @hidden */
         this._zone = inject(NgZone);
+        /** @hidden */
+        this._destroyRef = inject(DestroyRef);
         /** Matcher function for testing the str for a search term */
         this.matcher = (str, searchTerm) => str.startsWith(searchTerm);
         /**
@@ -666,16 +669,14 @@ class AutoCompleteDirective {
          * By ensuring that we set all properties we can proceed with stable data.
          */
         this._zone.runOutsideAngular(() => {
-            const keyupEvent = fromEvent(this._elementRef.nativeElement, 'keydown');
+            const keyupEvent = fromEvent(this._elementRef.nativeElement, 'keyup');
             const compositionStartEvent = fromEvent(this._elementRef.nativeElement, 'compositionstart');
             const compositionEndEvent = fromEvent(this._elementRef.nativeElement, 'compositionend');
-            keyupEvent
-                .pipe(switchMap((evt) => this._zone.onStable.pipe(first(), map$1(() => evt))), takeUntilDestroyed())
-                .subscribe((evt) => this._handleKeyboardEvent(evt));
-            compositionStartEvent.pipe(takeUntilDestroyed()).subscribe(() => {
+            keyupEvent.pipe(takeUntilDestroyed()).subscribe((evt) => this._handleKeyboardEvent(evt));
+            compositionStartEvent.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
                 this._isComposing = true;
             });
-            compositionEndEvent.pipe(takeUntilDestroyed()).subscribe(() => {
+            compositionEndEvent.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
                 this._isComposing = false;
                 this.inputText = this._elementRef.nativeElement.value;
             });
@@ -1648,7 +1649,7 @@ class BreakpointDirective {
     }
     /** @hidden */
     ngAfterViewInit() {
-        combineLatest([this._sizeObservable$.pipe(switchMap$1((obs$) => obs$)), this.onChanges$.pipe(startWith(void 0))])
+        combineLatest([this._sizeObservable$.pipe(switchMap((obs$) => obs$)), this.onChanges$.pipe(startWith(void 0))])
             .pipe(map(([w]) => [w, getBreakpointName(w)]), map(([width, breakpointName]) => this._shouldShow(width, breakpointName)), tap((shouldShow) => {
             if (shouldShow) {
                 if (!this.templateViewRef) {
@@ -1739,6 +1740,11 @@ class ClickedDirective {
     static { this.eventName = 'fdkClicked'; }
     /** @hidden */
     constructor() {
+        /**
+         * Event emitted when user either clicks with mouse, or
+         * clicks on space or enter keys
+         */
+        this.fdkClicked = output();
         const { nativeElement: element } = inject(ElementRef);
         const renderer = inject(Renderer2);
         const destroyRef = inject(DestroyRef);
@@ -1750,7 +1756,11 @@ class ClickedDirective {
             enter$.complete();
             space$.complete();
         });
-        this.fdkClicked = merge$1(fromEvent(element, 'click'), enter$, space$);
+        // Subscribe to merged events and emit through output
+        const subscription = merge$1(fromEvent(element, 'click'), enter$, space$).subscribe((event) => {
+            this.fdkClicked.emit(event);
+        });
+        destroyRef.onDestroy(() => subscription.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ClickedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ClickedDirective, isStandalone: true, selector: "[fdkClicked]", outputs: { fdkClicked: "fdkClicked" }, ngImport: i0 }); }
@@ -1761,9 +1771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     selector: '[fdkClicked]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [], propDecorators: { fdkClicked: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { fdkClicked: [{ type: i0.Output, args: ["fdkClicked"] }] } });
 
 /**
  * @deprecated
@@ -2479,7 +2487,7 @@ class FocusableItemDirective {
         });
         this._focusableObserver
             .observe(this.elementRef, false)
-            .pipe(takeUntilDestroyed())
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((isFocusable) => {
             if (isFocusable !== this.isFocusable()) {
                 this.setFocusable(isFocusable);
@@ -2512,22 +2520,28 @@ class FocusableItemDirective {
     }
     /** @hidden */
     enableTabbableElements() {
-        if (this._tabbableElements.size === 0) {
+        const size = this._tabbableElements.size;
+        if (size === 0) {
             return;
         }
-        this._tabbableElements.forEach((tabIndex, element) => (element.tabIndex = tabIndex));
+        for (const [element, tabIndex] of this._tabbableElements) {
+            element.tabIndex = tabIndex;
+        }
         this._tabbable = false;
     }
     /** @hidden */
     disableTabbableElements() {
         // Since we cannot select by tabindex attribute (links, inputs, buttons might not have one but still can be focusable),
         // Select all elements from the cell and filter by tabIndex property.
-        Array.from(this.elementRef.nativeElement.querySelectorAll('*'))
-            .filter((elm) => elm.tabIndex >= 0)
-            .forEach((elm) => {
-            this._tabbableElements.set(elm, elm.tabIndex);
-            elm.tabIndex = -1;
-        });
+        const allElements = this.elementRef.nativeElement.querySelectorAll('*');
+        const length = allElements.length;
+        for (let i = 0; i < length; i++) {
+            const elm = allElements[i];
+            if (elm.tabIndex >= 0) {
+                this._tabbableElements.set(elm, elm.tabIndex);
+                elm.tabIndex = -1;
+            }
+        }
     }
     /** @hidden */
     async _onFocusin() {
@@ -2543,10 +2557,11 @@ class FocusableItemDirective {
             }
         }
         const activeEl = this._document.activeElement;
-        if (activeEl === this.elementRef.nativeElement) {
+        const nativeElement = this.elementRef.nativeElement;
+        if (activeEl === nativeElement) {
             this._parentFocusableItemFocused.emit();
         }
-        else if (activeEl && activeEl !== this.elementRef.nativeElement && this._checker.isFocusable(activeEl)) {
+        else if (activeEl && this._checker.isFocusable(activeEl)) {
             this.focusableChildElementFocused.emit();
         }
     }
@@ -2851,11 +2866,11 @@ class FocusableListDirective {
         /** @hidden */
         this._document = inject(DOCUMENT);
         intersectionObservable(this._elementRef.nativeElement, { threshold: 0.25 })
-            .pipe(takeUntilDestroyed())
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((isVisible) => this._isVisible.set(isVisible[0]?.isIntersecting));
         this._focusableObserver
             .observe(this._elementRef, false)
-            .pipe(takeUntilDestroyed())
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe((isFocusable) => {
             if (!isFocusable && isFocusable !== this.focusable) {
                 this.focusable = isFocusable;
@@ -2880,13 +2895,14 @@ class FocusableListDirective {
                 return;
             }
             const items = this._focusableItems();
-            items.forEach((item, index) => {
-                item._position = {
+            const totalCols = items.length;
+            for (let index = 0; index < totalCols; index++) {
+                items[index]._position = {
                     ...gridPosition,
                     colIndex: index,
-                    totalCols: items.length
+                    totalCols
                 };
-            });
+            }
         });
     }
     /** @hidden */
@@ -2976,7 +2992,11 @@ class FocusableListDirective {
     }
     /** @hidden */
     _setItemsTabbable(state) {
-        this._focusableItems().forEach((item) => item.setTabbable(state));
+        const items = this._focusableItems();
+        const length = items.length;
+        for (let i = 0; i < length; i++) {
+            items[i].setTabbable(state);
+        }
     }
     /** @hidden */
     _setGridPosition(position) {
@@ -2996,29 +3016,44 @@ class FocusableListDirective {
         }
         keyManager.skipPredicate((i) => !isItemFocusable(i));
         this._keyManager = keyManager;
-        const focusListenerDestroyers = items.map((item, index) => this._renderer.listen(getItemElement(item), 'focus', () => {
-            const directiveItem = this._focusableItems()[index];
-            if (!directiveItem) {
-                return;
-            }
-            const gridPosition = this._gridPosition();
-            if (gridPosition) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                this._gridItemFocused$.next(directiveItem._position);
-            }
-            const id = getItemElement(item)?.id ?? null;
-            this.itemFocused.emit({ index, total: items.length, id });
-            this._focusableItems().forEach((i) => i.setTabbable(i === directiveItem));
-            this._keyManager?.setActiveItem(index);
-        }));
-        merge$1(...items.map((item) => item.keydown))
+        const itemsLength = items.length;
+        const focusListenerDestroyers = new Array(itemsLength);
+        const keydownObservables = new Array(itemsLength);
+        for (let index = 0; index < itemsLength; index++) {
+            const item = items[index];
+            keydownObservables[index] = item.keydown;
+            focusListenerDestroyers[index] = this._renderer.listen(getItemElement(item), 'focus', () => {
+                const directiveItem = this._focusableItems()[index];
+                if (!directiveItem) {
+                    return;
+                }
+                const gridPosition = this._gridPosition();
+                if (gridPosition) {
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    this._gridItemFocused$.next(directiveItem._position);
+                }
+                const id = getItemElement(item)?.id ?? null;
+                this.itemFocused.emit({ index, total: itemsLength, id });
+                const focusableItems = this._focusableItems();
+                const focusableItemsLength = focusableItems.length;
+                for (let i = 0; i < focusableItemsLength; i++) {
+                    focusableItems[i].setTabbable(focusableItems[i] === directiveItem);
+                }
+                this._keyManager?.setActiveItem(index);
+            });
+        }
+        merge$1(...keydownObservables)
             .pipe(tap((event) => {
             // Already handled
             if (event.defaultPrevented) {
                 return;
             }
             this._keyManager?.onKeydown(event);
-        }), takeUntil(merge$1(this._refreshItems$, destroyObservable(this._destroyRef))), finalize(() => focusListenerDestroyers.forEach((d) => d())))
+        }), takeUntil(merge$1(this._refreshItems$, destroyObservable(this._destroyRef))), finalize(() => {
+            for (let i = 0; i < focusListenerDestroyers.length; i++) {
+                focusListenerDestroyers[i]();
+            }
+        }))
             .subscribe();
     }
     /** @hidden */
@@ -3125,10 +3160,15 @@ class FocusableGridDirective {
         this._focusableLists.changes
             .pipe(startWith$1(this._focusableLists), takeUntilDestroyed(this._destroyRef))
             .subscribe((lists) => {
-            lists.forEach((list, index) => {
-                list._setGridPosition({ rowIndex: index, totalRows: this._focusableLists.length });
-                this._watchListItems(list);
-            });
+            const totalRows = this._focusableLists.length;
+            const listsLength = lists.length;
+            for (let i = 0; i < listsLength; i++) {
+                const list = lists.get(i);
+                if (list) {
+                    list._setGridPosition({ rowIndex: i, totalRows });
+                    this._watchListItems(list);
+                }
+            }
         });
         this._focusableItems.changes
             .pipe(startWith$1(this._focusableItems), takeUntilDestroyed(this._destroyRef))
@@ -3136,21 +3176,40 @@ class FocusableGridDirective {
             this._handleItemSubscriptions(items.toArray());
         });
         this._focusableLists.changes
-            .pipe(startWith$1(this._focusableLists), switchMap((queryList) => merge$1(...queryList.toArray().map((list) => list._gridListFocused$))), takeUntilDestroyed(this._destroyRef))
+            .pipe(startWith$1(this._focusableLists), switchMap$1((queryList) => {
+            const lists = queryList.toArray();
+            return merge$1(...lists.map((list) => list._gridListFocused$));
+        }), takeUntilDestroyed(this._destroyRef))
             .subscribe((focusedEvent) => {
             this.rowFocused.emit(focusedEvent);
-            this._focusableLists.forEach((list) => list.setTabbable(false));
-            this._focusableLists.forEach((list) => list._setItemsTabbable(false));
+            const lists = this._focusableLists.toArray();
+            const listsLength = lists.length;
+            for (let i = 0; i < listsLength; i++) {
+                const list = lists[i];
+                list.setTabbable(false);
+                list._setItemsTabbable(false);
+            }
         });
         this._focusableLists.changes
-            .pipe(startWith$1(this._focusableLists), switchMap((queryList) => merge$1(...queryList.toArray().map((list) => list._gridItemFocused$))), takeUntilDestroyed(this._destroyRef))
+            .pipe(startWith$1(this._focusableLists), switchMap$1((queryList) => {
+            const lists = queryList.toArray();
+            return merge$1(...lists.map((list) => list._gridItemFocused$));
+        }), takeUntilDestroyed(this._destroyRef))
             .subscribe((focusedEvent) => {
             this.itemFocused.emit(focusedEvent);
-            this._focusableLists.forEach((list) => list.setTabbable(false));
-            this._focusableLists.forEach((list) => list._setItemsTabbable(false));
+            const lists = this._focusableLists.toArray();
+            const listsLength = lists.length;
+            for (let i = 0; i < listsLength; i++) {
+                const list = lists[i];
+                list.setTabbable(false);
+                list._setItemsTabbable(false);
+            }
         });
         this._focusableLists.changes
-            .pipe(startWith$1(this._focusableLists), switchMap((queryList) => merge$1(...queryList.toArray().map((list) => list._keydown$))), takeUntilDestroyed(this._destroyRef))
+            .pipe(startWith$1(this._focusableLists), switchMap$1((queryList) => {
+            const lists = queryList.toArray();
+            return merge$1(...lists.map((list) => list._keydown$));
+        }), takeUntilDestroyed(this._destroyRef))
             .subscribe(({ event, list, activeItemIndex }) => this._onKeydown(event, list, activeItemIndex));
     }
     /**
@@ -3174,10 +3233,11 @@ class FocusableGridDirective {
         let nextRowIndex;
         let nextRowItemIndex = activeItemIndex ?? 0;
         let scrollIntoView;
+        const listItemsLength = list._focusableItems().length;
         const isFirstItemLtr = activeItemIndex === 0 && this.contentDirection !== 'rtl';
-        const isLastItemRtl = activeItemIndex === list._focusableItems().length - 1 && this.contentDirection === 'rtl';
+        const isLastItemRtl = activeItemIndex === listItemsLength - 1 && this.contentDirection === 'rtl';
         const isFirstItemRtl = activeItemIndex === 0 && this.contentDirection === 'rtl';
-        const isLastItemLtr = activeItemIndex === list._focusableItems().length - 1 && this.contentDirection !== 'rtl';
+        const isLastItemLtr = activeItemIndex === listItemsLength - 1 && this.contentDirection !== 'rtl';
         switch (event.keyCode) {
             case UP_ARROW:
                 event.preventDefault();
@@ -3236,36 +3296,48 @@ class FocusableGridDirective {
     }
     /** @hidden */
     _handleItemSubscriptions(items) {
-        items.forEach((item) => {
+        const itemsLength = items.length;
+        for (let i = 0; i < itemsLength; i++) {
+            const item = items[i];
             if (!(item instanceof FocusableItemDirective) || this._subscribedItems.has(item)) {
-                return;
+                continue;
             }
             this._subscribedItems.add(item);
             outputToObservable(item.focusableChildElementFocused)
                 .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => {
-                this._focusableLists.forEach((focusableList) => {
-                    focusableList._focusableItems().forEach((focusableItem) => {
+                const lists = this._focusableLists.toArray();
+                const listsLength = lists.length;
+                for (let j = 0; j < listsLength; j++) {
+                    const focusableItems = lists[j]._focusableItems();
+                    const focusableItemsLength = focusableItems.length;
+                    for (let k = 0; k < focusableItemsLength; k++) {
+                        const focusableItem = focusableItems[k];
                         focusableItem.setTabbable(false);
                         focusableItem.enableTabbableElements();
-                    });
-                });
+                    }
+                }
             });
             outputToObservable(item._parentFocusableItemFocused)
                 .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => {
-                this._focusableLists.forEach((focusableList) => {
-                    focusableList._focusableItems().forEach((focusableItem) => {
+                const lists = this._focusableLists.toArray();
+                const listsLength = lists.length;
+                for (let j = 0; j < listsLength; j++) {
+                    const focusableItems = lists[j]._focusableItems();
+                    const focusableItemsLength = focusableItems.length;
+                    for (let k = 0; k < focusableItemsLength; k++) {
+                        const focusableItem = focusableItems[k];
                         if (item !== focusableItem) {
                             focusableItem.disableTabbableElements();
                         }
                         else {
                             focusableItem.enableTabbableElements();
                         }
-                    });
-                });
+                    }
+                }
             });
-        });
+        }
     }
     /** @hidden */
     _watchListItems(list) {
@@ -4438,15 +4510,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         }] });
 
 class ResizeObserverDirective {
-    /** @hidden */
     constructor() {
         /**
          * The reference to the Resize target element.
          **/
         this.elementRef = inject(ElementRef);
-        /** @hidden */
-        this._resizeObserverService = inject(ResizeObserverService);
-        this.resized = this._resizeObserverService.observe(this.elementRef.nativeElement);
+        /**
+         * Observable that emits when the element is resized.
+         * Use this for programmatic subscriptions.
+         **/
+        this.resizeEvents$ = inject(ResizeObserverService).observe(this.elementRef.nativeElement);
+        /**
+         * When the element is resized, emits an array of ResizeObserverEntry objects.
+         **/
+        this.resized = outputFromObservable(this.resizeEvents$);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResizeObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ResizeObserverDirective, isStandalone: true, selector: "[fdkResizeObserver]", outputs: { resized: "resized" }, exportAs: ["fdkResizeObserver"], ngImport: i0 }); }
@@ -4455,12 +4532,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             type: Directive,
             args: [{
                     selector: '[fdkResizeObserver]',
-                    exportAs: 'fdkResizeObserver',
-                    standalone: true
+                    exportAs: 'fdkResizeObserver'
                 }]
-        }], ctorParameters: () => [], propDecorators: { resized: [{
-                type: Output
-            }] } });
+        }], propDecorators: { resized: [{ type: i0.Output, args: ["resized"] }] } });
 
 class ResizeHandleDirective {
     /** @hidden */
@@ -4793,7 +4867,7 @@ class SelectionService {
         const unsubscribe$ = merge$1(destroyObservable(this._destroyRef), this._clear$);
         if (this._items$) {
             this._items$
-                .pipe(map((items) => items.filter((itm) => itm.fdkSelectableItem !== false)), switchMap((items) => {
+                .pipe(map((items) => items.filter((itm) => itm.fdkSelectableItem !== false)), switchMap$1((items) => {
                 const clickedEvents$ = items.map((item) => item.clicked.pipe(map(() => item)));
                 return merge$1(...clickedEvents$);
             }), tap((clickedItem) => this._itemClicked(clickedItem)), takeUntil(unsubscribe$))
@@ -5094,27 +5168,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         }] });
 
 class TemplateDirective {
-    /** @hidden */
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    constructor() {
+        /** Name of the template */
+        this.name = input('', { ...(ngDevMode ? { debugName: "name" } : {}), alias: 'fdkTemplate' });
+        /** @hidden */
+        this.templateRef = inject(TemplateRef);
     }
     /** @hidden */
     getName() {
-        return this.name;
+        return this.name();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TemplateDirective, isStandalone: true, selector: "[fdkTemplate]", inputs: { name: ["fdkTemplate", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: TemplateDirective, isStandalone: true, selector: "[fdkTemplate]", inputs: { name: { classPropertyName: "name", publicName: "fdkTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[fdkTemplate]',
-                    standalone: true
+                    selector: '[fdkTemplate]'
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { name: [{
-                type: Input,
-                args: ['fdkTemplate']
-            }] } });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdkTemplate", required: false }] }] } });
 
 /**
  * @deprecated
@@ -5133,62 +5205,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }] });
 
+const DEFAULT_TRUNCATE_WIDTH = 200;
 class TruncateDirective {
     /**
-     * Width in pixel for truncation of an element , by default
+     * Root native element
      */
-    set fdkTruncateWidth(value) {
-        this._customWidthCount = coerceNumberProperty(value);
+    get rootElement() {
+        return this._elementRef.nativeElement;
     }
     /** @hidden */
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    constructor() {
+        /**
+         * Width in pixel for truncation of an element, by default 200
+         */
+        this.fdkTruncateWidth = input(DEFAULT_TRUNCATE_WIDTH, { ...(ngDevMode ? { debugName: "fdkTruncateWidth" } : {}), transform: numberAttribute });
         /**
          * Truncating state
          */
-        this.fdkTruncateState = false;
+        this.fdkTruncateState = input(false, ...(ngDevMode ? [{ debugName: "fdkTruncateState" }] : []));
         /** @hidden */
-        this._customWidthCount = 200;
+        this._elementRef = inject(ElementRef);
         /** @hidden */
-        this.takeDefaultStyleOnce = true;
-    }
-    /**
-     * Root native element
-     */
-    get rootElement() {
-        return this._elementRef.nativeElement;
+        this._defaultStyleCaptured = false;
+        effect(() => {
+            const state = this.fdkTruncateState();
+            const width = this.fdkTruncateWidth();
+            untracked(() => this._truncate(state, width));
+        });
     }
     /**
      * Method saves default style of target element before first truncate.
      */
     setDefaultStyle() {
-        if (this.takeDefaultStyleOnce) {
+        if (!this._defaultStyleCaptured) {
             this._defaultStyle = this._truncateTarget.style.cssText;
-            this.takeDefaultStyleOnce = false;
+            this._defaultStyleCaptured = true;
         }
     }
     /** @hidden */
     ngAfterViewInit() {
         if (this.rootElement) {
-            this._truncate();
+            this._truncate(this.fdkTruncateState(), this.fdkTruncateWidth());
         }
     }
     /** @hidden */
-    ngOnChanges() {
-        this._truncate();
-    }
-    /** @hidden */
-    _truncate() {
+    _truncate(state, width) {
         this._truncateTarget = this.rootElement;
         if (!this._truncateTarget) {
             return;
         }
         this.setDefaultStyle();
-        this._truncationStyle = `${this._defaultStyle} max-width: ${this._customWidthCount}px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`;
-        this._truncateTarget.style.cssText = this.fdkTruncateState ? this._truncationStyle : this._defaultStyle;
+        const truncationStyle = `${this._defaultStyle} max-width: ${width}px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`;
+        this._truncateTarget.style.cssText = state ? truncationStyle : this._defaultStyle;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TruncateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TruncateDirective, isStandalone: true, selector: "[fdkTruncate]", inputs: { fdkTruncateWidth: "fdkTruncateWidth", fdkTruncateState: "fdkTruncateState" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TruncateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: TruncateDirective, isStandalone: true, selector: "[fdkTruncate]", inputs: { fdkTruncateWidth: { classPropertyName: "fdkTruncateWidth", publicName: "fdkTruncateWidth", isSignal: true, isRequired: false, transformFunction: null }, fdkTruncateState: { classPropertyName: "fdkTruncateState", publicName: "fdkTruncateState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TruncateDirective, decorators: [{
             type: Directive,
@@ -5196,11 +5267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     selector: '[fdkTruncate]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { fdkTruncateWidth: [{
-                type: Input
-            }], fdkTruncateState: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { fdkTruncateWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdkTruncateWidth", required: false }] }], fdkTruncateState: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdkTruncateState", required: false }] }] } });
 class TruncatedTitleDirective {
     /** @hidden */
     constructor(_elRef) {