@fundamental-ngx/cdk 0.61.2-rc.8 → 0.61.2

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

@@ -1,7 +1,7 @@
 import * as i0 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, numberAttribute, ViewContainerRef, TemplateRef, ViewChild, Component, NgModuleFactory, Pipe } 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 { 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, outputFromObservable } from '@angular/core/rxjs-interop';
+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 { coerceElement, coerceBooleanProperty, coerceNumberProperty, coerceArray, coerceCssPixelValue } from '@angular/cdk/coercion';
@@ -657,10 +657,7 @@ 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);
         /**
@@ -673,12 +670,12 @@ class AutoCompleteDirective {
             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(this._destroyRef))
+                .pipe(switchMap((evt) => this._zone.onStable.pipe(first(), map$1(() => evt))), takeUntilDestroyed())
                 .subscribe((evt) => this._handleKeyboardEvent(evt));
-            compositionStartEvent.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            compositionStartEvent.pipe(takeUntilDestroyed()).subscribe(() => {
                 this._isComposing = true;
             });
-            compositionEndEvent.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            compositionEndEvent.pipe(takeUntilDestroyed()).subscribe(() => {
                 this._isComposing = false;
                 this.inputText = this._elementRef.nativeElement.value;
             });
@@ -1742,11 +1739,6 @@ 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);
@@ -1758,11 +1750,7 @@ class ClickedDirective {
             enter$.complete();
             space$.complete();
         });
-        // 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());
+        this.fdkClicked = merge$1(fromEvent(element, 'click'), enter$, space$);
     }
     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 }); }
@@ -1773,7 +1761,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     selector: '[fdkClicked]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [], propDecorators: { fdkClicked: [{ type: i0.Output, args: ["fdkClicked"] }] } });
+        }], ctorParameters: () => [], propDecorators: { fdkClicked: [{
+                type: Output
+            }] } });
 
 /**
  * @deprecated
@@ -2489,7 +2479,7 @@ class FocusableItemDirective {
         });
         this._focusableObserver
             .observe(this.elementRef, false)
-            .pipe(takeUntilDestroyed(this._destroyRef))
+            .pipe(takeUntilDestroyed())
             .subscribe((isFocusable) => {
             if (isFocusable !== this.isFocusable()) {
                 this.setFocusable(isFocusable);
@@ -2522,28 +2512,22 @@ class FocusableItemDirective {
     }
     /** @hidden */
     enableTabbableElements() {
-        const size = this._tabbableElements.size;
-        if (size === 0) {
+        if (this._tabbableElements.size === 0) {
             return;
         }
-        for (const [element, tabIndex] of this._tabbableElements) {
-            element.tabIndex = tabIndex;
-        }
+        this._tabbableElements.forEach((tabIndex, element) => (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.
-        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;
-            }
-        }
+        Array.from(this.elementRef.nativeElement.querySelectorAll('*'))
+            .filter((elm) => elm.tabIndex >= 0)
+            .forEach((elm) => {
+            this._tabbableElements.set(elm, elm.tabIndex);
+            elm.tabIndex = -1;
+        });
     }
     /** @hidden */
     async _onFocusin() {
@@ -2559,11 +2543,10 @@ class FocusableItemDirective {
             }
         }
         const activeEl = this._document.activeElement;
-        const nativeElement = this.elementRef.nativeElement;
-        if (activeEl === nativeElement) {
+        if (activeEl === this.elementRef.nativeElement) {
             this._parentFocusableItemFocused.emit();
         }
-        else if (activeEl && this._checker.isFocusable(activeEl)) {
+        else if (activeEl && activeEl !== this.elementRef.nativeElement && this._checker.isFocusable(activeEl)) {
             this.focusableChildElementFocused.emit();
         }
     }
@@ -2868,11 +2851,11 @@ class FocusableListDirective {
         /** @hidden */
         this._document = inject(DOCUMENT);
         intersectionObservable(this._elementRef.nativeElement, { threshold: 0.25 })
-            .pipe(takeUntilDestroyed(this._destroyRef))
+            .pipe(takeUntilDestroyed())
             .subscribe((isVisible) => this._isVisible.set(isVisible[0]?.isIntersecting));
         this._focusableObserver
             .observe(this._elementRef, false)
-            .pipe(takeUntilDestroyed(this._destroyRef))
+            .pipe(takeUntilDestroyed())
             .subscribe((isFocusable) => {
             if (!isFocusable && isFocusable !== this.focusable) {
                 this.focusable = isFocusable;
@@ -2897,14 +2880,13 @@ class FocusableListDirective {
                 return;
             }
             const items = this._focusableItems();
-            const totalCols = items.length;
-            for (let index = 0; index < totalCols; index++) {
-                items[index]._position = {
+            items.forEach((item, index) => {
+                item._position = {
                     ...gridPosition,
                     colIndex: index,
-                    totalCols
+                    totalCols: items.length
                 };
-            }
+            });
         });
     }
     /** @hidden */
@@ -2994,11 +2976,7 @@ class FocusableListDirective {
     }
     /** @hidden */
     _setItemsTabbable(state) {
-        const items = this._focusableItems();
-        const length = items.length;
-        for (let i = 0; i < length; i++) {
-            items[i].setTabbable(state);
-        }
+        this._focusableItems().forEach((item) => item.setTabbable(state));
     }
     /** @hidden */
     _setGridPosition(position) {
@@ -3018,44 +2996,29 @@ class FocusableListDirective {
         }
         keyManager.skipPredicate((i) => !isItemFocusable(i));
         this._keyManager = keyManager;
-        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)
+        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))
             .pipe(tap((event) => {
             // Already handled
             if (event.defaultPrevented) {
                 return;
             }
             this._keyManager?.onKeydown(event);
-        }), takeUntil(merge$1(this._refreshItems$, destroyObservable(this._destroyRef))), finalize(() => {
-            for (let i = 0; i < focusListenerDestroyers.length; i++) {
-                focusListenerDestroyers[i]();
-            }
-        }))
+        }), takeUntil(merge$1(this._refreshItems$, destroyObservable(this._destroyRef))), finalize(() => focusListenerDestroyers.forEach((d) => d())))
             .subscribe();
     }
     /** @hidden */
@@ -3162,15 +3125,10 @@ class FocusableGridDirective {
         this._focusableLists.changes
             .pipe(startWith$1(this._focusableLists), takeUntilDestroyed(this._destroyRef))
             .subscribe((lists) => {
-            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);
-                }
-            }
+            lists.forEach((list, index) => {
+                list._setGridPosition({ rowIndex: index, totalRows: this._focusableLists.length });
+                this._watchListItems(list);
+            });
         });
         this._focusableItems.changes
             .pipe(startWith$1(this._focusableItems), takeUntilDestroyed(this._destroyRef))
@@ -3178,40 +3136,21 @@ class FocusableGridDirective {
             this._handleItemSubscriptions(items.toArray());
         });
         this._focusableLists.changes
-            .pipe(startWith$1(this._focusableLists), switchMap((queryList) => {
-            const lists = queryList.toArray();
-            return merge$1(...lists.map((list) => list._gridListFocused$));
-        }), takeUntilDestroyed(this._destroyRef))
+            .pipe(startWith$1(this._focusableLists), switchMap((queryList) => merge$1(...queryList.toArray().map((list) => list._gridListFocused$))), takeUntilDestroyed(this._destroyRef))
             .subscribe((focusedEvent) => {
             this.rowFocused.emit(focusedEvent);
-            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.forEach((list) => list.setTabbable(false));
+            this._focusableLists.forEach((list) => list._setItemsTabbable(false));
         });
         this._focusableLists.changes
-            .pipe(startWith$1(this._focusableLists), switchMap((queryList) => {
-            const lists = queryList.toArray();
-            return merge$1(...lists.map((list) => list._gridItemFocused$));
-        }), takeUntilDestroyed(this._destroyRef))
+            .pipe(startWith$1(this._focusableLists), switchMap((queryList) => merge$1(...queryList.toArray().map((list) => list._gridItemFocused$))), takeUntilDestroyed(this._destroyRef))
             .subscribe((focusedEvent) => {
             this.itemFocused.emit(focusedEvent);
-            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.forEach((list) => list.setTabbable(false));
+            this._focusableLists.forEach((list) => list._setItemsTabbable(false));
         });
         this._focusableLists.changes
-            .pipe(startWith$1(this._focusableLists), switchMap((queryList) => {
-            const lists = queryList.toArray();
-            return merge$1(...lists.map((list) => list._keydown$));
-        }), takeUntilDestroyed(this._destroyRef))
+            .pipe(startWith$1(this._focusableLists), switchMap((queryList) => merge$1(...queryList.toArray().map((list) => list._keydown$))), takeUntilDestroyed(this._destroyRef))
             .subscribe(({ event, list, activeItemIndex }) => this._onKeydown(event, list, activeItemIndex));
     }
     /**
@@ -3235,11 +3174,10 @@ 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 === listItemsLength - 1 && this.contentDirection === 'rtl';
+        const isLastItemRtl = activeItemIndex === list._focusableItems().length - 1 && this.contentDirection === 'rtl';
         const isFirstItemRtl = activeItemIndex === 0 && this.contentDirection === 'rtl';
-        const isLastItemLtr = activeItemIndex === listItemsLength - 1 && this.contentDirection !== 'rtl';
+        const isLastItemLtr = activeItemIndex === list._focusableItems().length - 1 && this.contentDirection !== 'rtl';
         switch (event.keyCode) {
             case UP_ARROW:
                 event.preventDefault();
@@ -3298,48 +3236,36 @@ class FocusableGridDirective {
     }
     /** @hidden */
     _handleItemSubscriptions(items) {
-        const itemsLength = items.length;
-        for (let i = 0; i < itemsLength; i++) {
-            const item = items[i];
+        items.forEach((item) => {
             if (!(item instanceof FocusableItemDirective) || this._subscribedItems.has(item)) {
-                continue;
+                return;
             }
             this._subscribedItems.add(item);
             outputToObservable(item.focusableChildElementFocused)
                 .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => {
-                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];
+                this._focusableLists.forEach((focusableList) => {
+                    focusableList._focusableItems().forEach((focusableItem) => {
                         focusableItem.setTabbable(false);
                         focusableItem.enableTabbableElements();
-                    }
-                }
+                    });
+                });
             });
             outputToObservable(item._parentFocusableItemFocused)
                 .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => {
-                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];
+                this._focusableLists.forEach((focusableList) => {
+                    focusableList._focusableItems().forEach((focusableItem) => {
                         if (item !== focusableItem) {
                             focusableItem.disableTabbableElements();
                         }
                         else {
                             focusableItem.enableTabbableElements();
                         }
-                    }
-                }
+                    });
+                });
             });
-        }
+        });
     }
     /** @hidden */
     _watchListItems(list) {
@@ -4512,20 +4438,15 @@ 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);
-        /**
-         * 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$);
+        /** @hidden */
+        this._resizeObserverService = inject(ResizeObserverService);
+        this.resized = this._resizeObserverService.observe(this.elementRef.nativeElement);
     }
     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 }); }
@@ -4534,9 +4455,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             type: Directive,
             args: [{
                     selector: '[fdkResizeObserver]',
-                    exportAs: 'fdkResizeObserver'
+                    exportAs: 'fdkResizeObserver',
+                    standalone: true
                 }]
-        }], propDecorators: { resized: [{ type: i0.Output, args: ["resized"] }] } });
+        }], ctorParameters: () => [], propDecorators: { resized: [{
+                type: Output
+            }] } });
 
 class ResizeHandleDirective {
     /** @hidden */
@@ -5209,61 +5133,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }] });
 
-const DEFAULT_TRUNCATE_WIDTH = 200;
 class TruncateDirective {
     /**
-     * Root native element
+     * Width in pixel for truncation of an element , by default
      */
-    get rootElement() {
-        return this._elementRef.nativeElement;
+    set fdkTruncateWidth(value) {
+        this._customWidthCount = coerceNumberProperty(value);
     }
     /** @hidden */
-    constructor() {
-        /**
-         * Width in pixel for truncation of an element, by default 200
-         */
-        this.fdkTruncateWidth = input(DEFAULT_TRUNCATE_WIDTH, { ...(ngDevMode ? { debugName: "fdkTruncateWidth" } : {}), transform: numberAttribute });
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
         /**
          * Truncating state
          */
-        this.fdkTruncateState = input(false, ...(ngDevMode ? [{ debugName: "fdkTruncateState" }] : []));
+        this.fdkTruncateState = false;
         /** @hidden */
-        this._elementRef = inject(ElementRef);
+        this._customWidthCount = 200;
         /** @hidden */
-        this._defaultStyleCaptured = false;
-        effect(() => {
-            const state = this.fdkTruncateState();
-            const width = this.fdkTruncateWidth();
-            untracked(() => this._truncate(state, width));
-        });
+        this.takeDefaultStyleOnce = true;
+    }
+    /**
+     * Root native element
+     */
+    get rootElement() {
+        return this._elementRef.nativeElement;
     }
     /**
      * Method saves default style of target element before first truncate.
      */
     setDefaultStyle() {
-        if (!this._defaultStyleCaptured) {
+        if (this.takeDefaultStyleOnce) {
             this._defaultStyle = this._truncateTarget.style.cssText;
-            this._defaultStyleCaptured = true;
+            this.takeDefaultStyleOnce = false;
         }
     }
     /** @hidden */
     ngAfterViewInit() {
         if (this.rootElement) {
-            this._truncate(this.fdkTruncateState(), this.fdkTruncateWidth());
+            this._truncate();
         }
     }
     /** @hidden */
-    _truncate(state, width) {
+    ngOnChanges() {
+        this._truncate();
+    }
+    /** @hidden */
+    _truncate() {
         this._truncateTarget = this.rootElement;
         if (!this._truncateTarget) {
             return;
         }
         this.setDefaultStyle();
-        const truncationStyle = `${this._defaultStyle} max-width: ${width}px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`;
-        this._truncateTarget.style.cssText = state ? truncationStyle : this._defaultStyle;
+        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;
     }
-    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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TruncateDirective, decorators: [{
             type: Directive,
@@ -5271,7 +5196,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     selector: '[fdkTruncate]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [], propDecorators: { fdkTruncateWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdkTruncateWidth", required: false }] }], fdkTruncateState: [{ type: i0.Input, args: [{ isSignal: true, alias: "fdkTruncateState", required: false }] }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { fdkTruncateWidth: [{
+                type: Input
+            }], fdkTruncateState: [{
+                type: Input
+            }] } });
 class TruncatedTitleDirective {
     /** @hidden */
     constructor(_elRef) {