@fundamental-ngx/cdk 0.42.0-rc.2 → 0.42.0-rc.21

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, isDevMode, inject, Directive, EventEmitter, Input, Output, HostListener, NgModule, ContentChildren, forwardRef, HostBinding, ElementRef, INJECTOR, ContentChild, Self, SkipSelf, PLATFORM_ID, QueryList, ViewContainerRef, Component, Injector, NgModuleFactory, Pipe, TemplateRef, ViewChild, NgZone } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, isDevMode, inject, Directive, EventEmitter, Input, Output, HostListener, NgModule, ContentChildren, forwardRef, HostBinding, ElementRef, INJECTOR, ContentChild, NgZone, Renderer2, Self, SkipSelf, PLATFORM_ID, QueryList, ViewContainerRef, Component, Injector, NgModuleFactory, Pipe, TemplateRef, ViewChild } from '@angular/core';
 import { DOCUMENT, CommonModule, AsyncPipe } from '@angular/common';
 import { BehaviorSubject, Subject, ReplaySubject, Observable, fromEvent, NEVER, merge, Subscription, takeUntil as takeUntil$1, startWith as startWith$1, switchMap, combineLatest, firstValueFrom, filter as filter$1, isObservable, of, map as map$1, take as take$1 } from 'rxjs';
 import * as i2 from '@angular/platform-browser';
@@ -9,7 +9,7 @@ import { takeUntil, filter, distinctUntilChanged, startWith, map, tap, take, deb
 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, hasModifierKey } from '@angular/cdk/keycodes';
 import { coerceBooleanProperty, coerceElement, coerceNumberProperty, coerceArray, coerceCssPixelValue } from '@angular/cdk/coercion';
 import * as i1$1 from '@angular/cdk/a11y';
-import { FocusKeyManager } from '@angular/cdk/a11y';
+import { FocusKeyManager, LiveAnnouncer } from '@angular/cdk/a11y';
 import { createFocusTrap } from 'focus-trap';
 import * as i1$2 from '@angular/cdk/observers';
 import * as i1$3 from '@angular/cdk/overlay';
@@ -1348,16 +1348,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
  */
 function getNativeElement(element) {
     let coercible = element;
-    if (isHasElementRef(element)) {
-        coercible = element.elementRef();
+    if (hasElementRef(element)) {
+        coercible = element.elementRef;
     }
     return coerceElement(coercible);
 }
 /**
  * Checks whether object has element reference in it.
  */
-function isHasElementRef(something) {
-    return something && typeof something['elementRef'] === 'function';
+function hasElementRef(something) {
+    return something && something['elementRef'] instanceof ElementRef;
 }
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
@@ -2941,12 +2941,7 @@ class FocusableItemDirective {
         return this._tabbable ? 0 : -1;
     }
     /** @hidden */
-    constructor(_elementRef, _focusableObserver, _destroy$, _tabbableElementService, _liveAnnouncer) {
-        this._elementRef = _elementRef;
-        this._focusableObserver = _focusableObserver;
-        this._destroy$ = _destroy$;
-        this._tabbableElementService = _tabbableElementService;
-        this._liveAnnouncer = _liveAnnouncer;
+    constructor() {
         /** Function, which returns a string to be announced by screen-reader whenever an item which is in grid receives focus. */
         this.cellFocusedEventAnnouncer = this._defaultItemFocusedEventAnnouncer;
         /** Event emitted when the cell receives focus, not being emitted when focus moves between item's children. */
@@ -2959,18 +2954,45 @@ class FocusableItemDirective {
         this._tabbableElements = new Map();
         /** @hidden */
         this._tabbable = true;
+        /** Element reference. */
+        this.elementRef = inject(ElementRef);
+        /** @hidden */
+        this._focusableObserver = inject(FocusableObserver);
+        /** @hidden */
+        this._destroy$ = inject(DestroyedService);
+        /** @hidden */
+        this._tabbableElementService = inject(TabbableElementService);
+        /** @hidden */
+        this._liveAnnouncer = inject(LiveAnnouncer);
+        /** @hidden */
+        this._zone = inject(NgZone);
+        /** @hidden */
+        this._document = inject(DOCUMENT);
         this._focusableObserver
-            .observe(this._elementRef, false)
+            .observe(this.elementRef, false)
             .pipe(takeUntil$1(this._destroy$))
             .subscribe((isFocusable) => {
             if (!isFocusable && isFocusable !== this.fdkFocusableItem) {
                 this.fdkFocusableItem = isFocusable;
             }
         });
-    }
-    /** Element reference. */
-    elementRef() {
-        return this._elementRef;
+        this._zone.runOutsideAngular(() => {
+            fromEvent(this.elementRef.nativeElement, 'focusin')
+                .pipe(takeUntil$1(this._destroy$))
+                .subscribe(async () => {
+                await this._onFocusin();
+            });
+            fromEvent(this.elementRef.nativeElement, 'focusout')
+                .pipe(takeUntil$1(this._destroy$))
+                .subscribe(() => {
+                this._onFocusout();
+            });
+            fromEvent(this.elementRef.nativeElement, 'keydown')
+                .pipe(takeUntil$1(this._destroy$))
+                .subscribe((event) => {
+                this._onKeydown(event);
+            });
+        });
     }
     /** Set tabbable state */
     setTabbable(state) {
@@ -3013,18 +3035,18 @@ class FocusableItemDirective {
         if (!this.fdkFocusableItem) {
             return;
         }
-        const isFocused = document.activeElement === this._elementRef.nativeElement;
+        const isFocused = this._document.activeElement === this.elementRef.nativeElement;
         const shouldFocusChild = KeyUtil.isKeyCode(event, [ENTER, MAC_ENTER, F2]) && !event.shiftKey && isFocused;
         const shouldFocusCell = ((KeyUtil.isKeyCode(event, F2) && event.shiftKey) || KeyUtil.isKeyCode(event, ESCAPE)) && !isFocused;
         if (shouldFocusChild) {
             event.stopPropagation();
-            const tabbableElement = this._tabbableElementService.getTabbableElement(this.elementRef().nativeElement, false, true);
+            const tabbableElement = this._tabbableElementService.getTabbableElement(this.elementRef.nativeElement, false, true);
             tabbableElement?.focus();
             return;
         }
         else if (shouldFocusCell) {
             event.stopPropagation();
-            this._elementRef.nativeElement.focus();
+            this.elementRef.nativeElement.focus();
             return;
         }
         if (isFocused) {
@@ -3043,7 +3065,7 @@ class FocusableItemDirective {
     _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('*'))
+        Array.from(this.elementRef.nativeElement.querySelectorAll('*'))
             .filter((elm) => elm.tabIndex >= 0)
             .forEach((elm) => {
             this._tabbableElements.set(elm, elm.tabIndex);
@@ -3055,8 +3077,8 @@ class FocusableItemDirective {
         return `Column ${position.colIndex + 1} of ${position.totalCols}, row: ${position.rowIndex + 1} of ${position.totalRows}`;
     }
 }
-FocusableItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FocusableItemDirective, deps: [{ token: i0.ElementRef }, { token: FocusableObserver }, { token: DestroyedService }, { token: TabbableElementService }, { token: i1$1.LiveAnnouncer }], target: i0.ɵɵFactoryTarget.Directive });
-FocusableItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: FocusableItemDirective, isStandalone: true, selector: "[fdkFocusableItem]", inputs: { fdkFocusableItem: "fdkFocusableItem", cellFocusedEventAnnouncer: "cellFocusedEventAnnouncer" }, outputs: { cellFocused: "cellFocused" }, host: { listeners: { "focusin": "_onFocusin()", "focusout": "_onFocusout()", "keydown": "_onKeydown($event)" }, properties: { "attr.tabindex": "this._tabindex" } }, providers: [
+FocusableItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FocusableItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FocusableItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: FocusableItemDirective, isStandalone: true, selector: "[fdkFocusableItem]", inputs: { fdkFocusableItem: "fdkFocusableItem", cellFocusedEventAnnouncer: "cellFocusedEventAnnouncer" }, outputs: { cellFocused: "cellFocused" }, host: { properties: { "attr.tabindex": "this._tabindex" } }, providers: [
         {
             provide: FDK_FOCUSABLE_ITEM_DIRECTIVE,
             useExisting: FocusableItemDirective
@@ -3076,7 +3098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         DestroyedService
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FocusableObserver }, { type: DestroyedService }, { type: TabbableElementService }, { type: i1$1.LiveAnnouncer }]; }, propDecorators: { fdkFocusableItem: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { fdkFocusableItem: [{
                 type: Input
             }], cellFocusedEventAnnouncer: [{
                 type: Input
@@ -3085,15 +3107,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
             }], _tabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
-            }], _onFocusin: [{
-                type: HostListener,
-                args: ['focusin']
-            }], _onFocusout: [{
-                type: HostListener,
-                args: ['focusout']
-            }], _onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
 class FocusableItemModule {
@@ -3365,16 +3378,15 @@ class FocusableListDirective {
         return this._focusable;
     }
     /** @hidden */
+    get _focusableItems() {
+        return this._items ? this._items : this._projectedFocusableItems;
+    }
+    /** @hidden */
     get _tabindex() {
         return this._tabbable ? 0 : -1;
     }
     /** @hidden */
-    constructor(_renderer, _destroy$, _elementRef, _liveAnnouncer, _focusableObserver) {
-        this._renderer = _renderer;
-        this._destroy$ = _destroy$;
-        this._elementRef = _elementRef;
-        this._liveAnnouncer = _liveAnnouncer;
-        this._focusableObserver = _focusableObserver;
+    constructor() {
         /** @hidden */
         this._focusable = false;
         /** Direction of navigation. Should be set to 'grid' when list is a part of grid. */
@@ -3400,6 +3412,20 @@ class FocusableListDirective {
         /** @hidden */
         this._refreshItems$ = new Subject();
         /** @hidden */
+        this._refresh$ = new Subject();
+        /** @hidden */
+        this._renderer = inject(Renderer2);
+        /** @hidden */
+        this._destroy$ = inject(DestroyedService);
+        /** @hidden */
+        this._elementRef = inject(ElementRef);
+        /** @hidden */
+        this._liveAnnouncer = inject(LiveAnnouncer);
+        /** @hidden */
+        this._focusableObserver = inject(FocusableObserver);
+        /** @hidden */
+        this._document = inject(DOCUMENT);
+        /** @hidden */
         this._isVisible = false;
         intersectionObservable(this._elementRef.nativeElement, { threshold: 0.25 })
             .pipe(takeUntil(this._destroy$))
@@ -3427,13 +3453,24 @@ class FocusableListDirective {
     }
     /** @hidden */
     ngAfterViewInit() {
+        this._listenOnItems();
+    }
+    /** Set items programmatically. */
+    setItems(items) {
+        this._items = items;
+        this._listenOnItems();
+    }
+    /** @hidden */
+    _listenOnItems() {
+        const refresh$ = merge(this._refresh$, this._destroy$);
+        this._refresh$.next();
         this._focusableItems.changes
-            .pipe(startWith(this._focusableItems), map((queryList) => queryList.toArray()), tap((items) => {
+            .pipe(startWith(null), map(() => this._focusableItems.toArray()), tap((items) => {
             const focusableItems = items.map((item, index) => ({
                 index,
                 focusable: () => item.fdkFocusableItem,
-                elementRef: () => item.elementRef(),
-                focus: () => item.elementRef().nativeElement.focus(),
+                elementRef: item.elementRef,
+                focus: () => item.elementRef.nativeElement.focus(),
                 keydown: item._keydown$
             }));
             const direction = this.navigationDirection === 'grid' ? 'horizontal' : this.navigationDirection;
@@ -3442,7 +3479,7 @@ class FocusableListDirective {
                 contentDirection: this.contentDirection,
                 wrap: this.wrap
             });
-        }), takeUntil(this._destroy$))
+        }), takeUntil(refresh$))
             .subscribe();
     }
     /** @hidden */
@@ -3455,7 +3492,7 @@ class FocusableListDirective {
         if (event.defaultPrevented) {
             return;
         }
-        const isFocused = document.activeElement === this._elementRef.nativeElement;
+        const isFocused = this._document.activeElement === this._elementRef.nativeElement;
         const shouldFocusChild = KeyUtil.isKeyCode(event, [ENTER, MAC_ENTER, F2]) && !event.shiftKey && isFocused;
         const shouldFocusList = ((KeyUtil.isKeyCode(event, F2) && event.shiftKey) || KeyUtil.isKeyCode(event, ESCAPE)) && !isFocused;
         if (shouldFocusChild) {
@@ -3481,7 +3518,7 @@ class FocusableListDirective {
             return false;
         });
         if (availableIndex != null) {
-            scrollIntoView(this._focusableItems.get(availableIndex)?.elementRef().nativeElement, scrollPosition);
+            scrollIntoView(this._focusableItems.get(availableIndex)?.elementRef.nativeElement, scrollPosition);
             this._keyManager?.setActiveItem(availableIndex);
         }
     }
@@ -3575,14 +3612,14 @@ class FocusableListDirective {
         return `Row: ${position.rowIndex + 1} of ${position.totalRows}, use F2 button to dive in and focus list's item`;
     }
 }
-FocusableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FocusableListDirective, deps: [{ token: i0.Renderer2 }, { token: DestroyedService }, { token: i0.ElementRef }, { token: i1$1.LiveAnnouncer }, { token: FocusableObserver }], target: i0.ɵɵFactoryTarget.Directive });
+FocusableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FocusableListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 FocusableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: FocusableListDirective, isStandalone: true, selector: "[fdkFocusableList]", inputs: { focusable: "focusable", navigationDirection: "navigationDirection", contentDirection: "contentDirection", wrap: "wrap", listFocusedEventAnnouncer: "listFocusedEventAnnouncer" }, outputs: { itemFocused: "itemFocused" }, host: { listeners: { "keydown": "_onKeydown($event)", "focus": "_onFocus()" }, properties: { "attr.tabindex": "this._tabindex" } }, providers: [
         {
             provide: FDK_FOCUSABLE_LIST_DIRECTIVE,
             useExisting: FocusableListDirective
         },
         DestroyedService
-    ], queries: [{ propertyName: "_focusableItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], exportAs: ["fdkFocusableList"], usesOnChanges: true, ngImport: i0 });
+    ], queries: [{ propertyName: "_projectedFocusableItems", predicate: FDK_FOCUSABLE_ITEM_DIRECTIVE, descendants: true }], exportAs: ["fdkFocusableList"], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FocusableListDirective, decorators: [{
             type: Directive,
             args: [{
@@ -3597,7 +3634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         DestroyedService
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: DestroyedService }, { type: i0.ElementRef }, { type: i1$1.LiveAnnouncer }, { type: FocusableObserver }]; }, propDecorators: { focusable: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { focusable: [{
                 type: Input
             }], navigationDirection: [{
                 type: Input
@@ -3609,7 +3646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 type: Input
             }], itemFocused: [{
                 type: Output
-            }], _focusableItems: [{
+            }], _projectedFocusableItems: [{
                 type: ContentChildren,
                 args: [FDK_FOCUSABLE_ITEM_DIRECTIVE, { descendants: true }]
             }], _tabindex: [{
@@ -4777,12 +4814,12 @@ class SelectableItemDirective {
             (!this.readonly$ || !this.readonly$?.fdkReadonly));
     }
     /** @hidden */
-    constructor(provider, disabled$, readonly$, selectionService, _elementRef, _cd, _clicked) {
+    constructor(provider, disabled$, readonly$, selectionService, elementRef, _cd, _clicked) {
         this.provider = provider;
         this.disabled$ = disabled$;
         this.readonly$ = readonly$;
         this.selectionService = selectionService;
-        this._elementRef = _elementRef;
+        this.elementRef = elementRef;
         this._cd = _cd;
         /** Event emitted when selection state being changed for selectable item. */
         this.selected = new EventEmitter();
@@ -4807,7 +4844,7 @@ class SelectableItemDirective {
         }
         else {
             this._selected = isSelected;
-            const htmlElement = this._elementRef.nativeElement;
+            const htmlElement = this.elementRef.nativeElement;
             const { classList } = htmlElement;
             if (isSelected) {
                 classList.add('is-selected');
@@ -4820,10 +4857,6 @@ class SelectableItemDirective {
         this.selected.emit(isSelected);
     }
     /** @hidden */
-    elementRef() {
-        return this._elementRef;
-    }
-    /** @hidden */
     _listenToDisablingEvents() {
         const disablingEvents$ = [];
         if (this.disabled$) {
@@ -5196,6 +5229,8 @@ class DndListDirective {
         this.itemsChange = new EventEmitter();
         /** Event that is thrown when the item is dropped */
         this.itemDropped = new EventEmitter();
+        /** Event that is thrown when predicate function returned false. */
+        this.dropCancelled = new EventEmitter();
         /** @hidden */
         this._closestItemIndex = null;
         /** @hidden */
@@ -5335,6 +5370,7 @@ class DndListDirective {
             this._closestItemIndex = null;
             this._closestItemPosition = null;
             if (!result) {
+                this.dropCancelled.emit();
                 return;
             }
             if (draggedItemIndex !== replacedItemIndex) {
@@ -5470,7 +5506,7 @@ class DndListDirective {
     }
 }
 DndListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DndListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DndListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: DndListDirective, selector: "[fdkDndList], [fd-dnd-list]", inputs: { gridMode: "gridMode", dropMode: "dropMode", threshold: "threshold", replaceMode: "replaceMode", items: "items", draggable: "draggable", dropPredicate: "dropPredicate", dragoverPredicate: "dragoverPredicate" }, outputs: { dropPredicateCalculating: "dropPredicateCalculating", itemsChange: "itemsChange", itemDropped: "itemDropped" }, host: { properties: { "class": "this._initialClass" } }, providers: [{ provide: DND_LIST, useExisting: forwardRef(() => DndListDirective) }], queries: [{ propertyName: "dndItems", predicate: DND_ITEM }], ngImport: i0 });
+DndListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: DndListDirective, selector: "[fdkDndList], [fd-dnd-list]", inputs: { gridMode: "gridMode", dropMode: "dropMode", threshold: "threshold", replaceMode: "replaceMode", items: "items", draggable: "draggable", dropPredicate: "dropPredicate", dragoverPredicate: "dragoverPredicate" }, outputs: { dropPredicateCalculating: "dropPredicateCalculating", itemsChange: "itemsChange", itemDropped: "itemDropped", dropCancelled: "dropCancelled" }, host: { properties: { "class": "this._initialClass" } }, providers: [{ provide: DND_LIST, useExisting: forwardRef(() => DndListDirective) }], queries: [{ propertyName: "dndItems", predicate: DND_ITEM }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DndListDirective, decorators: [{
             type: Directive,
             args: [{
@@ -5499,6 +5535,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 type: Output
             }], itemDropped: [{
                 type: Output
+            }], dropCancelled: [{
+                type: Output
             }], dndItems: [{
                 type: ContentChildren,
                 args: [DND_ITEM]
@@ -6121,25 +6159,26 @@ function applyCssClass(target, propertyKey, descriptor) {
     const originalMethod = descriptor.value;
     descriptor.value = function () {
         const self = this;
-        if (!self.elementRef) {
+        if (!('elementRef' in self)) {
             throw ELEMENT_REF_EXCEPTION;
         }
         const classListToApply = sanitize(originalMethod.apply(this));
-        const elementRef = self.elementRef.apply(this);
+        const elementRef = self.elementRef;
         const nativeElement = elementRef?.nativeElement;
-        if (nativeElement) {
-            if (!nativeElement._classMap) {
-                nativeElement._classMap = {};
-            }
-            if (!self._uuidv4) {
-                self._uuidv4 = uuidv4();
-            }
-            const currentClassList = Array.from(nativeElement.classList);
-            const previousClassListToApply = nativeElement._classMap[self._uuidv4] || [];
-            const newClassList = createComponentClassList(currentClassList, previousClassListToApply, classListToApply);
-            nativeElement.className = newClassList.join(' ');
-            nativeElement._classMap[self._uuidv4] = classListToApply;
+        if (!nativeElement) {
+            return classListToApply;
         }
+        if (!nativeElement._classMap) {
+            nativeElement._classMap = {};
+        }
+        if (!self._uuidv4) {
+            self._uuidv4 = uuidv4();
+        }
+        const currentClassList = Array.from(nativeElement.classList);
+        const previousClassListToApply = nativeElement._classMap[self._uuidv4] || [];
+        const newClassList = createComponentClassList(currentClassList, previousClassListToApply, classListToApply);
+        nativeElement.className = newClassList.join(' ');
+        nativeElement._classMap[self._uuidv4] = classListToApply;
         return classListToApply;
     };
 }
@@ -6183,12 +6222,10 @@ function applyCssStyle(target, propertyKey, descriptor) {
             throw ELEMENT_REF_EXCEPTION;
         }
         const _styles = originalMethod.apply(this);
-        if (self.elementRef()) {
-            const htmlElement = self.elementRef().nativeElement;
-            Object.keys(_styles).forEach((key) => {
-                htmlElement.style[key] = _styles[key];
-            });
-        }
+        const htmlElement = self.elementRef.nativeElement;
+        Object.keys(_styles).forEach((key) => {
+            htmlElement.style[key] = _styles[key];
+        });
         return _styles;
     };
 }
@@ -6239,8 +6276,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 
 class DynamicComponentContainer {
     /** @hidden */
-    constructor(_elementRef, _injector, _cdr) {
-        this._elementRef = _elementRef;
+    constructor(elementRef, _injector, _cdr) {
+        this.elementRef = elementRef;
         this._injector = _injector;
         this._cdr = _cdr;
         /** @hidden */
@@ -7470,5 +7507,5 @@ class BaseToastDurationDismissibleConfig extends BaseToastConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ANY_LANGUAGE_LETTERS_GROUP_REGEX, ANY_LANGUAGE_LETTERS_REGEX, AbstractFdNgxClass, AsyncOrSyncPipe, AttributeObserver, AutoCompleteDirective, AutoCompleteModule, BaseAnimatedToastConfig, BaseDismissibleToastService, BaseToastActionDismissibleRef, BaseToastConfig, BaseToastContainerComponent, BaseToastDurationDismissibleConfig, BaseToastDurationDismissibleContainerComponent, BaseToastDurationDismissibleRef, BaseToastOverlayContainer, BaseToastPosition, BaseToastRef, BaseToastService, BreakpointDirective, BreakpointModule, ClickedBehaviorModule, ClickedDirective, ContentDensityService, DECIMAL_NUMBER_UNICODE_GROUP_REGEX, DECIMAL_NUMBER_UNICODE_RANGE, DECIMAL_NUMBER_UNICODE_REGEX, DEFAULT_CONTENT_DENSITY, DND_ITEM, DND_LIST, DefaultReadonlyViewModifier, DeprecatedAutoCompleteDirective, DeprecatedClickedDirective, DeprecatedDisabledBehaviorDirective, DeprecatedFocusKeyManagerItemDirective, DeprecatedFocusKeyManagerListDirective, DeprecatedFocusableItemDirective, DeprecatedFocusableListDirective, DeprecatedIgnoreClickOnSelectionDirective, DeprecatedInitialFocusDirective, DeprecatedLineClampDirective, DeprecatedLineClampTargetDirective, DeprecatedOnlyDigitsDirective, DeprecatedOverflowListDirective, DeprecatedOverflowListItemDirective, DeprecatedReadonlyBehaviorDirective, DeprecatedRepeatDirective, DeprecatedResizeDirective, DeprecatedResizeHandleDirective, DeprecatedTemplateSelectorDirective, DeprecatedTruncateSelectorDirective, DestroyedService, DisabledBehaviorDirective, DisabledBehaviorModule, DisabledObserver, DisplayFnPipe, DndItemDirective, DndKeyboardGroupDirective, DndKeyboardItemDirective, DndListDirective, DragAndDropModule, DynamicComponentContainer, DynamicComponentInjector, DynamicComponentService, DynamicPortalComponent, ELEMENT_REF_EXCEPTION, FDK_DISABLED_DIRECTIVE, FDK_FOCUSABLE_GRID_DIRECTIVE, FDK_FOCUSABLE_ITEM_DIRECTIVE, FDK_FOCUSABLE_LIST_DIRECTIVE, FDK_READONLY_DIRECTIVE, FDK_SELECTABLE_ITEM_PROVIDER, FOCUSABLE_ITEM, FdkClickedProvider, FdkDisabledProvider, FdkReadonlyProvider, FilterStringsPipe, FocusKeyManagerHelpersModule, FocusKeyManagerItemDirective, FocusKeyManagerListDirective, FocusTrapService, FocusableGridDirective, FocusableGridModule, FocusableItemDirective, FocusableItemModule, FocusableListDirective, FocusableListModule, FocusableObserver, FunctionStrategy, INVALID_DATE_ERROR, IgnoreClickOnSelectionDirective, IgnoreClickOnSelectionDirectiveToken, IgnoreClickOnSelectionModule, InitialFocusDirective, InitialFocusModule, IsCompactDensityPipe, KeyUtil, KeyboardSupportService, LETTERS_UNICODE_RANGE, LIST_ITEM_COMPONENT, LineClampDirective, LineClampModule, LineClampTargetDirective, LocalStorageService, MOBILE_CONFIG_ERROR, MakeAsyncPipe, ModuleDeprecations, OVERFLOW_PRIORITY_SCORE, ObservableStrategy, OnlyDigitsDirective, OnlyDigitsModule, OverflowListDirective, OverflowListItemDirective, OverflowListModule, PipeModule, PromiseStrategy, RTL_LANGUAGE, RangeSelector, ReadonlyBehaviorDirective, ReadonlyBehaviorModule, ReadonlyObserver, RepeatDirective, RepeatModule, ResizeDirective, ResizeHandleDirective, ResizeModule, ResizeObserverFactory, ResizeObserverService, RtlService, SafePipe, SearchHighlightPipe, SelectComponentRootToken, SelectableItemDirective, SelectableItemToken, SelectableListDirective, SelectableListModule, SelectionService, THEME_SWITCHER_ROUTER_MISSING_ERROR, TabbableElementService, TemplateDirective, TemplateModule, ThemesService, ToastBottomCenterPosition, ToastBottomLeftPosition, ToastBottomRightPosition, ToastTopCenterPosition, ToastTopLeftPosition, ToastTopRightPosition, TruncateDirective, TruncateModule, TruncatePipe, TwoDigitsPipe, UtilsModule, ValueByPathPipe, ValueStrategy, ViewportSizeObservable, alternateSetter, applyCssClass, applyCssStyle, baseToastAnimations, coerceArraySafe, coerceBoolean, coerceCssPixel, consumerProviderFactory, getDocumentFontSize, getElementCapacity, getElementWidth, getNativeElement, getRandomColorAccent, intersectionObservable, isBlank, isBoolean, isCompactDensity, isFunction, isHasElementRef, isJsObject, isNumber, isObject, isOdd, isPresent, isPromise, isString, isStringMap, isSubscribable, isType, isValidContentDensity, moduleDeprecationsFactory, moduleDeprecationsProvider, parserFileSize, pxToNum, resizeObservable, scrollIntoView, scrollTop, selectStrategy, setDisabledState, setReadonlyState, toNativeElement, toastConnectedBottomLeftPosition, toastConnectedBottomPosition, toastConnectedBottomRightPosition, toastConnectedTopLeftPosition, toastConnectedTopPosition, toastConnectedTopRightPosition, uuidv4 };
+export { ANY_LANGUAGE_LETTERS_GROUP_REGEX, ANY_LANGUAGE_LETTERS_REGEX, AbstractFdNgxClass, AsyncOrSyncPipe, AttributeObserver, AutoCompleteDirective, AutoCompleteModule, BaseAnimatedToastConfig, BaseDismissibleToastService, BaseToastActionDismissibleRef, BaseToastConfig, BaseToastContainerComponent, BaseToastDurationDismissibleConfig, BaseToastDurationDismissibleContainerComponent, BaseToastDurationDismissibleRef, BaseToastOverlayContainer, BaseToastPosition, BaseToastRef, BaseToastService, BreakpointDirective, BreakpointModule, ClickedBehaviorModule, ClickedDirective, ContentDensityService, DECIMAL_NUMBER_UNICODE_GROUP_REGEX, DECIMAL_NUMBER_UNICODE_RANGE, DECIMAL_NUMBER_UNICODE_REGEX, DEFAULT_CONTENT_DENSITY, DND_ITEM, DND_LIST, DefaultReadonlyViewModifier, DeprecatedAutoCompleteDirective, DeprecatedClickedDirective, DeprecatedDisabledBehaviorDirective, DeprecatedFocusKeyManagerItemDirective, DeprecatedFocusKeyManagerListDirective, DeprecatedFocusableItemDirective, DeprecatedFocusableListDirective, DeprecatedIgnoreClickOnSelectionDirective, DeprecatedInitialFocusDirective, DeprecatedLineClampDirective, DeprecatedLineClampTargetDirective, DeprecatedOnlyDigitsDirective, DeprecatedOverflowListDirective, DeprecatedOverflowListItemDirective, DeprecatedReadonlyBehaviorDirective, DeprecatedRepeatDirective, DeprecatedResizeDirective, DeprecatedResizeHandleDirective, DeprecatedTemplateSelectorDirective, DeprecatedTruncateSelectorDirective, DestroyedService, DisabledBehaviorDirective, DisabledBehaviorModule, DisabledObserver, DisplayFnPipe, DndItemDirective, DndKeyboardGroupDirective, DndKeyboardItemDirective, DndListDirective, DragAndDropModule, DynamicComponentContainer, DynamicComponentInjector, DynamicComponentService, DynamicPortalComponent, ELEMENT_REF_EXCEPTION, FDK_DISABLED_DIRECTIVE, FDK_FOCUSABLE_GRID_DIRECTIVE, FDK_FOCUSABLE_ITEM_DIRECTIVE, FDK_FOCUSABLE_LIST_DIRECTIVE, FDK_READONLY_DIRECTIVE, FDK_SELECTABLE_ITEM_PROVIDER, FOCUSABLE_ITEM, FdkClickedProvider, FdkDisabledProvider, FdkReadonlyProvider, FilterStringsPipe, FocusKeyManagerHelpersModule, FocusKeyManagerItemDirective, FocusKeyManagerListDirective, FocusTrapService, FocusableGridDirective, FocusableGridModule, FocusableItemDirective, FocusableItemModule, FocusableListDirective, FocusableListModule, FocusableObserver, FunctionStrategy, INVALID_DATE_ERROR, IgnoreClickOnSelectionDirective, IgnoreClickOnSelectionDirectiveToken, IgnoreClickOnSelectionModule, InitialFocusDirective, InitialFocusModule, IsCompactDensityPipe, KeyUtil, KeyboardSupportService, LETTERS_UNICODE_RANGE, LIST_ITEM_COMPONENT, LineClampDirective, LineClampModule, LineClampTargetDirective, LocalStorageService, MOBILE_CONFIG_ERROR, MakeAsyncPipe, ModuleDeprecations, OVERFLOW_PRIORITY_SCORE, ObservableStrategy, OnlyDigitsDirective, OnlyDigitsModule, OverflowListDirective, OverflowListItemDirective, OverflowListModule, PipeModule, PromiseStrategy, RTL_LANGUAGE, RangeSelector, ReadonlyBehaviorDirective, ReadonlyBehaviorModule, ReadonlyObserver, RepeatDirective, RepeatModule, ResizeDirective, ResizeHandleDirective, ResizeModule, ResizeObserverFactory, ResizeObserverService, RtlService, SafePipe, SearchHighlightPipe, SelectComponentRootToken, SelectableItemDirective, SelectableItemToken, SelectableListDirective, SelectableListModule, SelectionService, THEME_SWITCHER_ROUTER_MISSING_ERROR, TabbableElementService, TemplateDirective, TemplateModule, ThemesService, ToastBottomCenterPosition, ToastBottomLeftPosition, ToastBottomRightPosition, ToastTopCenterPosition, ToastTopLeftPosition, ToastTopRightPosition, TruncateDirective, TruncateModule, TruncatePipe, TwoDigitsPipe, UtilsModule, ValueByPathPipe, ValueStrategy, ViewportSizeObservable, alternateSetter, applyCssClass, applyCssStyle, baseToastAnimations, coerceArraySafe, coerceBoolean, coerceCssPixel, consumerProviderFactory, getDocumentFontSize, getElementCapacity, getElementWidth, getNativeElement, getRandomColorAccent, hasElementRef, intersectionObservable, isBlank, isBoolean, isCompactDensity, isFunction, isJsObject, isNumber, isObject, isOdd, isPresent, isPromise, isString, isStringMap, isSubscribable, isType, isValidContentDensity, moduleDeprecationsFactory, moduleDeprecationsProvider, parserFileSize, pxToNum, resizeObservable, scrollIntoView, scrollTop, selectStrategy, setDisabledState, setReadonlyState, toNativeElement, toastConnectedBottomLeftPosition, toastConnectedBottomPosition, toastConnectedBottomRightPosition, toastConnectedTopLeftPosition, toastConnectedTopPosition, toastConnectedTopRightPosition, uuidv4 };
 //# sourceMappingURL=fundamental-ngx-cdk-utils.mjs.map