@fundamental-ngx/cdk 0.61.2-rc.4 → 0.61.2-rc.6

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

@@ -1,5 +1,5 @@
 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, 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, numberAttribute, 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 } 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';
@@ -2522,22 +2522,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() {
@@ -2553,10 +2559,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();
         }
     }
@@ -2890,13 +2897,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 */
@@ -2986,7 +2994,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) {
@@ -3006,29 +3018,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 */
@@ -3135,10 +3162,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))
@@ -3146,21 +3178,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((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((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((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));
     }
     /**
@@ -3184,10 +3235,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();
@@ -3246,36 +3298,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) {
@@ -5143,62 +5207,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,
@@ -5206,11 +5269,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) {