@fundamental-ngx/cdk 0.43.18 → 0.43.20

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

@@ -1,16 +1,16 @@
 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, NgZone, Renderer2, Self, SkipSelf, PLATFORM_ID, QueryList, ViewContainerRef, Component, Injector, NgModuleFactory, Pipe, TemplateRef, ViewChild } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, isDevMode, inject, ElementRef, INJECTOR, Directive, EventEmitter, Input, Output, NgModule, ContentChildren, forwardRef, HostBinding, HostListener, 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 { BehaviorSubject, Subject, ReplaySubject, Observable, fromEvent, NEVER, merge, switchMap, first, map as map$1, takeUntil as takeUntil$1, Subscription, startWith as startWith$1, combineLatest, firstValueFrom, filter as filter$1, isObservable, of, take as take$1 } from 'rxjs';
 import * as i2 from '@angular/platform-browser';
 import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
 import * as i1 from '@angular/router';
 import { takeUntil, filter, distinctUntilChanged, startWith, map, tap, take, debounceTime, mapTo, pairwise, finalize, shareReplay, switchMap as switchMap$1, delay } from 'rxjs/operators';
 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 { createFocusTrap } from 'focus-trap';
 import * as i1$1 from '@angular/cdk/a11y';
 import { FocusKeyManager, LiveAnnouncer } from '@angular/cdk/a11y';
-import { createFocusTrap } from 'focus-trap';
+import { coerceElement, coerceBooleanProperty, coerceNumberProperty, coerceArray, coerceCssPixelValue } from '@angular/cdk/coercion';
 import * as i1$2 from '@angular/cdk/observers';
 import * as i1$3 from '@angular/cdk/overlay';
 import { ViewportRuler, OverlayConfig, OverlayContainer } from '@angular/cdk/overlay';
@@ -313,638 +313,172 @@ class DeprecatedSelector {
     }
 }
 
-/* eslint-disable @typescript-eslint/member-ordering */
-class DeprecatedAutoCompleteDirective extends DeprecatedSelector {
+/** Determines whether provided value is valid content density */
+function isValidContentDensity(size) {
+    return size === 'cozy' || size === 'compact' || size === 'condensed';
 }
-DeprecatedAutoCompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedAutoCompleteDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DeprecatedAutoCompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DeprecatedAutoCompleteDirective, isStandalone: true, selector: "[fdAutoComplete], [fd-auto-complete]", providers: [
-        {
-            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
-            useValue: getDeprecatedModel('[fdkAutoComplete]', '[fdAutoComplete], [fd-auto-complete]')
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedAutoCompleteDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[fdAutoComplete], [fd-auto-complete]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
-                            useValue: getDeprecatedModel('[fdkAutoComplete]', '[fdAutoComplete], [fd-auto-complete]')
-                        }
-                    ]
-                }]
-        }] });
-class AutoCompleteDirective {
-    /** @hidden */
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-        /** Whether the auto complete directive should be enabled */
-        this.enable = true;
-        /** Matcher function for testing the str for a search term */
-        this.matcher = (str, searchTerm) => str.startsWith(searchTerm);
-        /** Display function. Accepts an object of the same type as the
-         * items passed to dropdownValues as argument, and outputs a string.
-         * An arrow function can be used to access the *this* keyword in the calling component.
-         * See search input examples for details. */
-        this.displayFn = this._defaultDisplay;
-        /** Event thrown, when the auto ahead text is accepted */
-        this.onComplete = new EventEmitter();
-        /** @hidden */
-        this._completeKeys = [ENTER];
-        /** @hidden */
-        this._fillKeys = [LEFT_ARROW, RIGHT_ARROW];
-        /** @hidden */
-        this._stopKeys = [BACKSPACE, DELETE, ESCAPE];
-    }
+/**
+ * Determines if "compact" styles should be applied based on provided content density
+ */
+function isCompactDensity(size) {
+    return isValidContentDensity(size) && size !== 'cozy';
+}
+
+const DEFAULT_CONTENT_DENSITY = 'cozy';
+/**
+ * Service taking care of ContentDensity
+ */
+class ContentDensityService {
     /** @hidden */
-    handleKeyboardEvent(event) {
-        if (this.enable) {
-            if (KeyUtil.isKeyCode(event, this._stopKeys)) {
-                this._elementRef.nativeElement.value = this.inputText;
-            }
-            else if (KeyUtil.isKeyCode(event, this._completeKeys)) {
-                this._sendCompleteEvent(true);
-                this._moveIndicatorToLastCharacter();
-            }
-            else if (KeyUtil.isKeyCode(event, this._fillKeys)) {
-                this._sendCompleteEvent(false);
-            }
-            else if (!this._isControlKey(event) && this.inputText) {
-                /** Prevention from triggering typeahead, when having crtl/cmd + keys */
-                if (!this._triggerTypeAhead()) {
-                    return;
-                }
-                this.oldValue = this.inputText;
-                const item = this.options.find((option) => this.matcher(this.displayFn(option).toLocaleLowerCase(), this.inputText.toLocaleLowerCase()));
-                if (item) {
-                    this._typeahead(this.displayFn(item));
-                }
-            }
+    constructor() {
+        /** Content Density BehaviourSubject */
+        this.contentDensity = new BehaviorSubject(DEFAULT_CONTENT_DENSITY);
+        if (isDevMode()) {
+            console.warn(`[Deprecated] ContentDensityService is deprecated and will be removed in the next major version.
+                 Please use ContentDensityControllerService instead, or use the ContentDensityModule forRoot method.`);
         }
-        this.lastKeyUpEvent = event;
     }
     /** @hidden */
-    _typeahead(displayedValue) {
-        this._elementRef.nativeElement.value = displayedValue;
-        const selectionStartIndex = this.inputText.length;
-        this._elementRef.nativeElement.setSelectionRange(selectionStartIndex, displayedValue.length);
+    get _contentDensityListener() {
+        return this.contentDensity.pipe(distinctUntilChanged(), startWith(this.contentDensity.getValue()));
     }
     /** @hidden */
-    _isControlKey(event) {
-        return KeyUtil.isKeyCode(event, CONTROL) || event.ctrlKey;
+    get _isCompactDensity() {
+        return this._contentDensityListener.pipe(map((density) => isCompactDensity(density)));
     }
+}
+ContentDensityService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContentDensityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContentDensityService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContentDensityService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContentDensityService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class DestroyedService extends ReplaySubject {
     /** @hidden */
-    _defaultDisplay(value) {
-        return value;
+    constructor() {
+        super(1);
     }
     /** @hidden */
-    _triggerTypeAhead() {
-        if (this.lastKeyUpEvent &&
-            KeyUtil.isKeyCode(this.lastKeyUpEvent, CONTROL) &&
-            this.inputText === this.oldValue) {
-            return false;
+    ngOnDestroy() {
+        this.next();
+        this.complete();
+    }
+}
+DestroyedService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DestroyedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DestroyedService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DestroyedService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DestroyedService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+/** Generate a UUID v4 */
+function uuidv4() {
+    const modifier = 16;
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        // eslint-disable-next-line no-bitwise
+        const r = (Math.random() * modifier) | 0, 
+        // eslint-disable-next-line no-bitwise
+        v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(modifier);
+    });
+}
+
+class FocusTrapService {
+    constructor() {
+        /** @hidden */
+        this._focusTrapInstances = new Map();
+    }
+    /**
+     * Creates focus trap instance for defined element
+     * @param element Container for which to create focus trap
+     * @param userOptions Focus-trap specific configuration
+     * @returns {string} Unique ID of focus trap instance
+     */
+    createFocusTrap(element, userOptions) {
+        const uid = uuidv4();
+        const trap = createFocusTrap(element, userOptions);
+        this._focusTrapInstances.set(uid, trap);
+        this.activateFocusTrap(uid);
+        return uid;
+    }
+    /**
+     * Activates focus trap for defined ID
+     * @param id Unique ID of focus trap instance
+     */
+    activateFocusTrap(id) {
+        if (!this._focusTrapExists(id)) {
+            return;
         }
-        else {
-            return true;
+        const trap = this.getFocusTrapInstance(id);
+        trap?.activate();
+    }
+    /**
+     * Deactivates focus trap for defined ID
+     * @param id Unique ID of focus trap instance
+     */
+    deactivateFocusTrap(id) {
+        if (!this._focusTrapExists(id)) {
+            return;
+        }
+        const trap = this.getFocusTrapInstance(id);
+        trap?.deactivate();
+        this._focusTrapInstances.delete(id);
+    }
+    /**
+     * Pauses current focus trap.
+     */
+    pauseCurrentFocusTrap() {
+        if (this._focusTrapInstances.size === 0) {
+            return;
+        }
+        const trapItem = this._getLastTrapedItem();
+        trapItem?.pause();
+    }
+    /**
+     * Unpauses current focus trap.
+     */
+    unpauseCurrentFocusTrap() {
+        if (this._focusTrapInstances.size === 0) {
+            return;
         }
+        const trapItem = this._getLastTrapedItem();
+        trapItem?.unpause();
+    }
+    /**
+     * Get focus trap instance by ID.
+     * @param id ID of the instance.
+     * @returns Focus trap instance if exists.
+     */
+    getFocusTrapInstance(id) {
+        return this._focusTrapInstances.get(id);
     }
     /** @hidden */
-    _sendCompleteEvent(forceClose) {
-        this.onComplete.emit({
-            term: this._elementRef.nativeElement.value,
-            forceClose
-        });
+    _getLastTrapedItem() {
+        const lastItem = Array.from(this._focusTrapInstances).pop();
+        return lastItem ? lastItem[1] : undefined;
     }
     /** @hidden */
-    _moveIndicatorToLastCharacter() {
-        const inputTextLength = this.inputText?.length ?? 0;
-        this._elementRef.nativeElement.setSelectionRange(inputTextLength, inputTextLength);
+    _focusTrapExists(id) {
+        return this._focusTrapInstances.has(id);
     }
 }
-AutoCompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-AutoCompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: AutoCompleteDirective, isStandalone: true, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: { options: "options", inputText: "inputText", enable: "enable", matcher: "matcher", displayFn: "displayFn" }, outputs: { onComplete: "onComplete" }, host: { listeners: { "keyup": "handleKeyboardEvent($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteDirective, decorators: [{
-            type: Directive,
+FocusTrapService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusTrapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FocusTrapService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusTrapService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusTrapService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: '[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]',
-                    standalone: true
+                    providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
-                type: Input
-            }], inputText: [{
-                type: Input
-            }], enable: [{
-                type: Input
-            }], matcher: [{
-                type: Input
-            }], displayFn: [{
-                type: Input
-            }], onComplete: [{
-                type: Output
-            }], handleKeyboardEvent: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }] } });
+        }] });
 
-class AutoCompleteModule {
-}
-AutoCompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AutoCompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteModule, imports: [AutoCompleteDirective, DeprecatedAutoCompleteDirective], exports: [AutoCompleteDirective, DeprecatedAutoCompleteDirective] });
-AutoCompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [AutoCompleteDirective, DeprecatedAutoCompleteDirective],
-                    exports: [AutoCompleteDirective, DeprecatedAutoCompleteDirective],
-                    declarations: []
-                }]
-        }] });
-
-const FOCUSABLE_ITEM = new InjectionToken('Focusable Option');
-
-class DeprecatedFocusKeyManagerListDirective extends DeprecatedSelector {
-}
-DeprecatedFocusKeyManagerListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedFocusKeyManagerListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DeprecatedFocusKeyManagerListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DeprecatedFocusKeyManagerListDirective, isStandalone: true, selector: "[fd-focus-key-manager-list], [fdFocusKeyManagerList]", providers: [
-        {
-            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
-            useValue: getDeprecatedModel('[fdkFocusKeyManagerList]', '[fd-focus-key-manager-list], [fdFocusKeyManagerList]')
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedFocusKeyManagerListDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[fd-focus-key-manager-list], [fdFocusKeyManagerList]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
-                            useValue: getDeprecatedModel('[fdkFocusKeyManagerList]', '[fd-focus-key-manager-list], [fdFocusKeyManagerList]')
-                        }
-                    ]
-                }]
-        }] });
-/** Directive to apply Angular Material FocusKeyManager to lists.
- * To be used with FocusKeyManagerItemDirective
- */
-class FocusKeyManagerListDirective {
-    /** @hidden */
-    get focusKeyManager() {
-        return this._focusKeyManager;
-    }
-    /** @hidden */
-    constructor(_rtlService, _cdr) {
-        this._rtlService = _rtlService;
-        this._cdr = _cdr;
-        /** @hidden */
-        this._onDestroy$ = new Subject();
-    }
-    /** @hidden */
-    ngOnChanges(changes) {
-        if (!this._focusKeyManager) {
-            return;
-        }
-        if ('orientation' in changes) {
-            this._applyOrientation();
-        }
-        if ('skiPredicate' in changes) {
-            this._focusKeyManager.skipPredicate(this.skipPredicate);
-        }
-    }
-    /** @hidden */
-    ngAfterContentInit() {
-        this._focusKeyManager = new FocusKeyManager(this._items).skipPredicate(this.skipPredicate);
-        this._applyOrientation();
-        this._cdr.detectChanges();
-        this._rtlService?.rtl
-            .pipe(filter(() => this.orientation === 'horizontal'), takeUntil(this._onDestroy$))
-            .subscribe(() => this._applyOrientation());
-    }
-    /** @hidden */
-    ngOnDestroy() {
-        this._onDestroy$.next();
-        this._onDestroy$.complete();
-        this._focusKeyManager.destroy();
-    }
-    /** Focus certain list's item */
-    focusItem(item) {
-        if (typeof item === 'number') {
-            this._focusKeyManager.setActiveItem(item);
-        }
-        else {
-            this._focusKeyManager.setActiveItem(item);
-        }
-    }
-    /** @hidden */
-    _applyOrientation() {
-        switch (this.orientation) {
-            case 'horizontal':
-                this._focusKeyManager.withHorizontalOrientation(this._rtlService?.rtl.value ? 'rtl' : 'ltr');
-                break;
-            case 'vertical':
-                this._focusKeyManager.withVerticalOrientation(true);
-                break;
-        }
-    }
-}
-FocusKeyManagerListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerListDirective, deps: [{ token: RtlService, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-FocusKeyManagerListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: FocusKeyManagerListDirective, isStandalone: true, selector: "[fdkFocusKeyManagerList], [fd-focus-key-manager-list], [fdFocusKeyManagerList]", inputs: { orientation: "orientation", skipPredicate: "skipPredicate" }, queries: [{ propertyName: "_items", predicate: FOCUSABLE_ITEM }], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerListDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `[fdkFocusKeyManagerList], [fd-focus-key-manager-list], [fdFocusKeyManagerList]`,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: RtlService, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { orientation: [{
-                type: Input
-            }], skipPredicate: [{
-                type: Input
-            }], _items: [{
-                type: ContentChildren,
-                args: [FOCUSABLE_ITEM]
-            }] } });
-
-class DeprecatedFocusKeyManagerItemDirective extends DeprecatedSelector {
-}
-DeprecatedFocusKeyManagerItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedFocusKeyManagerItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DeprecatedFocusKeyManagerItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DeprecatedFocusKeyManagerItemDirective, isStandalone: true, selector: "[fd-focus-key-manager-item], [fdFocusKeyManagerItem]", providers: [
-        {
-            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
-            useValue: getDeprecatedModel('[fdkFocusKeyManagerItem]', '[fd-focus-key-manager-item], [fdFocusKeyManagerItem]')
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedFocusKeyManagerItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[fd-focus-key-manager-item], [fdFocusKeyManagerItem]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
-                            useValue: getDeprecatedModel('[fdkFocusKeyManagerItem]', '[fd-focus-key-manager-item], [fdFocusKeyManagerItem]')
-                        }
-                    ]
-                }]
-        }] });
-/** Directive to apply Angular Material FocusKeyManager to lists.
- * To be used with FocusKeyManagerItemDirective
- */
-class FocusKeyManagerItemDirective {
-    /** Whether item should be initially focused */
-    set initialFocus(value) {
-        this._initialFocus = coerceBooleanProperty(value);
-    }
-    /** @hidden */
-    get _tabindex() {
-        if (this._initialFocus) {
-            return 0;
-        }
-        return this.nativeElement?.tabIndex ?? -1;
-    }
-    /** Native element of the item */
-    get nativeElement() {
-        return this._elRef?.nativeElement;
-    }
-    /** @hidden */
-    get _focusKeyManager() {
-        return this._list.focusKeyManager;
-    }
-    /** @hidden */
-    constructor(_list, _elRef) {
-        this._list = _list;
-        this._elRef = _elRef;
-        /** @hidden */
-        this._initialFocus = false;
-    }
-    /** @hidden */
-    _onFocus() {
-        // For cases where initially selected item doesn't have 0 index
-        this._focusKeyManager?.updateActiveItem(this);
-    }
-    /** @hidden */
-    _onKeydown(event) {
-        this._focusKeyManager?.onKeydown(event);
-    }
-    /** Focus current item native element */
-    focus() {
-        this._elRef?.nativeElement.focus();
-    }
-}
-FocusKeyManagerItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerItemDirective, deps: [{ token: FocusKeyManagerListDirective }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-FocusKeyManagerItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: FocusKeyManagerItemDirective, isStandalone: true, selector: "[fdkFocusKeyManagerItem], [fd-focus-key-manager-item], [fdFocusKeyManagerItem]", inputs: { initialFocus: "initialFocus", _tabindex: "_tabindex" }, host: { listeners: { "focus": "_onFocus()", "keydown": "_onKeydown($event)" }, properties: { "attr.tabindex": "this._tabindex" } }, providers: [{ provide: FOCUSABLE_ITEM, useExisting: forwardRef(() => FocusKeyManagerItemDirective) }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fdkFocusKeyManagerItem], [fd-focus-key-manager-item], [fdFocusKeyManagerItem]',
-                    standalone: true,
-                    providers: [{ provide: FOCUSABLE_ITEM, useExisting: forwardRef(() => FocusKeyManagerItemDirective) }]
-                }]
-        }], ctorParameters: function () { return [{ type: FocusKeyManagerListDirective }, { type: i0.ElementRef }]; }, propDecorators: { initialFocus: [{
-                type: Input
-            }], _tabindex: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], _onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], _onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-class FocusKeyManagerHelpersModule {
-}
-FocusKeyManagerHelpersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerHelpersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FocusKeyManagerHelpersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerHelpersModule, imports: [FocusKeyManagerItemDirective,
-        FocusKeyManagerListDirective,
-        DeprecatedFocusKeyManagerItemDirective,
-        DeprecatedFocusKeyManagerListDirective], exports: [FocusKeyManagerItemDirective,
-        FocusKeyManagerListDirective,
-        DeprecatedFocusKeyManagerItemDirective,
-        DeprecatedFocusKeyManagerListDirective] });
-FocusKeyManagerHelpersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerHelpersModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerHelpersModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        FocusKeyManagerItemDirective,
-                        FocusKeyManagerListDirective,
-                        DeprecatedFocusKeyManagerItemDirective,
-                        DeprecatedFocusKeyManagerListDirective
-                    ],
-                    exports: [
-                        FocusKeyManagerItemDirective,
-                        FocusKeyManagerListDirective,
-                        DeprecatedFocusKeyManagerItemDirective,
-                        DeprecatedFocusKeyManagerListDirective
-                    ]
-                }]
-        }] });
-
-const IgnoreClickOnSelectionDirectiveToken = new InjectionToken('Ignore click on selection directive');
-
-class DeprecatedIgnoreClickOnSelectionDirective extends DeprecatedSelector {
-}
-DeprecatedIgnoreClickOnSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedIgnoreClickOnSelectionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DeprecatedIgnoreClickOnSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DeprecatedIgnoreClickOnSelectionDirective, isStandalone: true, selector: "[fdIgnoreClickOnSelection]", providers: [
-        {
-            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
-            useValue: getDeprecatedModel('[fdkIgnoreClickOnSelection]', '[fdIgnoreClickOnSelection]')
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedIgnoreClickOnSelectionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[fdIgnoreClickOnSelection]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
-                            useValue: getDeprecatedModel('[fdkIgnoreClickOnSelection]', '[fdIgnoreClickOnSelection]')
-                        }
-                    ]
-                }]
-        }] });
-/**
- * Directive will stop propagation and prevent default of click, if selected area is coming from
- * directive's host element. This gives ability to not cancel all clicks on element, just the ones
- * which include selection
- */
-class IgnoreClickOnSelectionDirective {
-    /** @hidden */
-    constructor(document, _elementRef) {
-        this.document = document;
-        this._elementRef = _elementRef;
-    }
-    /** Host click listener. Checks for selection existence and if finds one, checks anchor */
-    clicked($event) {
-        const selection = this.document.getSelection();
-        if (selection?.toString()) {
-            if (selection.anchorNode &&
-                (this._elementRef.nativeElement.isSameNode(selection.anchorNode) ||
-                    this._elementRef.nativeElement.isSameNode(selection.anchorNode.parentElement))) {
-                $event.stopPropagation();
-                $event.preventDefault();
-            }
-        }
-    }
-}
-IgnoreClickOnSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-IgnoreClickOnSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: IgnoreClickOnSelectionDirective, isStandalone: true, selector: "[fdkIgnoreClickOnSelection], [fdIgnoreClickOnSelection]", host: { listeners: { "click": "clicked($event)" } }, providers: [
-        {
-            provide: IgnoreClickOnSelectionDirectiveToken,
-            useExisting: IgnoreClickOnSelectionDirective
-        }
-    ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fdkIgnoreClickOnSelection], [fdIgnoreClickOnSelection]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: IgnoreClickOnSelectionDirectiveToken,
-                            useExisting: IgnoreClickOnSelectionDirective
-                        }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { clicked: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class IgnoreClickOnSelectionModule {
-}
-IgnoreClickOnSelectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-IgnoreClickOnSelectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionModule, imports: [IgnoreClickOnSelectionDirective, DeprecatedIgnoreClickOnSelectionDirective], exports: [IgnoreClickOnSelectionDirective, DeprecatedIgnoreClickOnSelectionDirective] });
-IgnoreClickOnSelectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [IgnoreClickOnSelectionDirective, DeprecatedIgnoreClickOnSelectionDirective],
-                    exports: [IgnoreClickOnSelectionDirective, DeprecatedIgnoreClickOnSelectionDirective]
-                }]
-        }] });
-
-/** Determines whether provided value is valid content density */
-function isValidContentDensity(size) {
-    return size === 'cozy' || size === 'compact' || size === 'condensed';
-}
-/**
- * Determines if "compact" styles should be applied based on provided content density
- */
-function isCompactDensity(size) {
-    return isValidContentDensity(size) && size !== 'cozy';
-}
-
-const DEFAULT_CONTENT_DENSITY = 'cozy';
-/**
- * Service taking care of ContentDensity
- */
-class ContentDensityService {
-    /** @hidden */
-    constructor() {
-        /** Content Density BehaviourSubject */
-        this.contentDensity = new BehaviorSubject(DEFAULT_CONTENT_DENSITY);
-        if (isDevMode()) {
-            console.warn(`[Deprecated] ContentDensityService is deprecated and will be removed in the next major version.
-                 Please use ContentDensityControllerService instead, or use the ContentDensityModule forRoot method.`);
-        }
-    }
-    /** @hidden */
-    get _contentDensityListener() {
-        return this.contentDensity.pipe(distinctUntilChanged(), startWith(this.contentDensity.getValue()));
-    }
-    /** @hidden */
-    get _isCompactDensity() {
-        return this._contentDensityListener.pipe(map((density) => isCompactDensity(density)));
-    }
-}
-ContentDensityService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContentDensityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ContentDensityService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContentDensityService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ContentDensityService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-class DestroyedService extends ReplaySubject {
-    /** @hidden */
-    constructor() {
-        super(1);
-    }
-    /** @hidden */
-    ngOnDestroy() {
-        this.next();
-        this.complete();
-    }
-}
-DestroyedService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DestroyedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DestroyedService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DestroyedService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DestroyedService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-/** Generate a UUID v4 */
-function uuidv4() {
-    const modifier = 16;
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        // eslint-disable-next-line no-bitwise
-        const r = (Math.random() * modifier) | 0, 
-        // eslint-disable-next-line no-bitwise
-        v = c === 'x' ? r : (r & 0x3) | 0x8;
-        return v.toString(modifier);
-    });
-}
-
-class FocusTrapService {
-    constructor() {
-        /** @hidden */
-        this._focusTrapInstances = new Map();
-    }
-    /**
-     * Creates focus trap instance for defined element
-     * @param element Container for which to create focus trap
-     * @param userOptions Focus-trap specific configuration
-     * @returns {string} Unique ID of focus trap instance
-     */
-    createFocusTrap(element, userOptions) {
-        const uid = uuidv4();
-        const trap = createFocusTrap(element, userOptions);
-        this._focusTrapInstances.set(uid, trap);
-        this.activateFocusTrap(uid);
-        return uid;
-    }
-    /**
-     * Activates focus trap for defined ID
-     * @param id Unique ID of focus trap instance
-     */
-    activateFocusTrap(id) {
-        if (!this._focusTrapExists(id)) {
-            return;
-        }
-        const trap = this.getFocusTrapInstance(id);
-        trap?.activate();
-    }
-    /**
-     * Deactivates focus trap for defined ID
-     * @param id Unique ID of focus trap instance
-     */
-    deactivateFocusTrap(id) {
-        if (!this._focusTrapExists(id)) {
-            return;
-        }
-        const trap = this.getFocusTrapInstance(id);
-        trap?.deactivate();
-        this._focusTrapInstances.delete(id);
-    }
-    /**
-     * Pauses current focus trap.
-     */
-    pauseCurrentFocusTrap() {
-        if (this._focusTrapInstances.size === 0) {
-            return;
-        }
-        const trapItem = this._getLastTrapedItem();
-        trapItem?.pause();
-    }
-    /**
-     * Unpauses current focus trap.
-     */
-    unpauseCurrentFocusTrap() {
-        if (this._focusTrapInstances.size === 0) {
-            return;
-        }
-        const trapItem = this._getLastTrapedItem();
-        trapItem?.unpause();
-    }
-    /**
-     * Get focus trap instance by ID.
-     * @param id ID of the instance.
-     * @returns Focus trap instance if exists.
-     */
-    getFocusTrapInstance(id) {
-        return this._focusTrapInstances.get(id);
-    }
-    /** @hidden */
-    _getLastTrapedItem() {
-        const lastItem = Array.from(this._focusTrapInstances).pop();
-        return lastItem ? lastItem[1] : undefined;
-    }
-    /** @hidden */
-    _focusTrapExists(id) {
-        return this._focusTrapInstances.has(id);
-    }
-}
-FocusTrapService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusTrapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FocusTrapService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusTrapService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusTrapService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-const pxToNum = (pixels) => Number(pixels.replace('px', '')) || 0;
-const toNativeElement = (element) => element instanceof ElementRef ? element.nativeElement : element;
-/** Return elements capacity (width subtract by element padding)
- * @param element - HTMLelement or element reference
- * */
-function getElementCapacity(element) {
-    const _element = toNativeElement(element);
-    const computedStyle = window.getComputedStyle(_element);
-    return pxToNum(computedStyle.width) - pxToNum(computedStyle.paddingLeft) - pxToNum(computedStyle.paddingRight);
+const pxToNum = (pixels) => Number(pixels.replace('px', '')) || 0;
+const toNativeElement = (element) => element instanceof ElementRef ? element.nativeElement : element;
+/** Return elements capacity (width subtract by element padding)
+ * @param element - HTMLelement or element reference
+ * */
+function getElementCapacity(element) {
+    const _element = toNativeElement(element);
+    const computedStyle = window.getComputedStyle(_element);
+    return pxToNum(computedStyle.width) - pxToNum(computedStyle.paddingLeft) - pxToNum(computedStyle.paddingRight);
 }
 /** Return elements width
  * @param element - HTMLelement or element reference
@@ -1105,340 +639,822 @@ function consumerProviderFactory(ConsumerClass, providedConfiguration) {
     };
 }
 
-/** Get document font size in pixels. */
-function getDocumentFontSize() {
-    return document?.documentElement ? parseFloat(getComputedStyle(document.documentElement).fontSize) : 16;
+/** Get document font size in pixels. */
+function getDocumentFontSize() {
+    return document?.documentElement ? parseFloat(getComputedStyle(document.documentElement).fontSize) : 16;
+}
+
+/**
+ * Function checks whether the passed number is odd.
+ * @param number number to check.
+ * @returns Boolean whether the number is odd.
+ */
+function isOdd(number) {
+    return number % 2 === 1;
+}
+
+class KeyboardSupportService {
+    constructor() {
+        /** Subject that is thrown, when focus escapes the list */
+        this.focusEscapeList = new Subject();
+        /** An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)  */
+        this._onDestroy$ = new Subject();
+        /** An RxJS Subject that will kill the data stream upon queryList changes (for unsubscribing)  */
+        this._onRefresh$ = new Subject();
+        /** @hidden
+         * allow tab key navigation. default is true.
+         */
+        this._tabKeyNavigation = true;
+    }
+    /** @hidden */
+    get keyManager() {
+        return this._keyManager;
+    }
+    /** @hidden */
+    setKeyboardService(queryList, wrap, tabKeyNavigation = true) {
+        this._itemList = queryList;
+        this._tabKeyNavigation = tabKeyNavigation;
+        this._keyManager = new FocusKeyManager(queryList).withWrap(wrap).withHomeAndEnd();
+        queryList.changes
+            .pipe(takeUntil(this._onDestroy$), startWith(0))
+            .subscribe(() => this._refreshEscapeLogic(queryList));
+    }
+    /** @hidden */
+    onKeyDown(event) {
+        this._keyManager.onKeydown(event);
+        if (KeyUtil.isKeyCode(event, TAB)) {
+            if (KeyUtil.isKeyCode(event, TAB) && this._tabKeyNavigation) {
+                event.preventDefault();
+                hasModifierKey(event, 'shiftKey')
+                    ? this.keyManager.setPreviousItemActive()
+                    : this.keyManager.setNextItemActive();
+            }
+        }
+    }
+    /** Destroys KeyboardSupportService dependencies */
+    onDestroy() {
+        this._onDestroy$.next();
+        this._onDestroy$.complete();
+        this._keyManager.destroy();
+    }
+    /** @hidden */
+    _refreshEscapeLogic(queryList) {
+        const createEscapeListener = (listItem, onKeyCode, escapeDirection) => {
+            listItem.keyDown
+                .pipe(takeUntil(unsubscribe$), filter((event) => KeyUtil.isKeyCode(event, onKeyCode)), tap((event) => event.preventDefault()))
+                .subscribe(() => this.focusEscapeList.next(escapeDirection));
+        };
+        /** Finish all of the streams, form before */
+        this._onRefresh$.next();
+        const unsubscribe$ = merge(this._onRefresh$, this._onDestroy$);
+        if (queryList.length) {
+            createEscapeListener(queryList.last, DOWN_ARROW, 'down');
+            createEscapeListener(queryList.first, UP_ARROW, 'up');
+        }
+    }
+}
+KeyboardSupportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KeyboardSupportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KeyboardSupportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KeyboardSupportService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KeyboardSupportService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MockStorage {
+    // eslint-disable-next-line
+    key(index) { }
+    clear() { }
+    // eslint-disable-next-line
+    getItem(key) { }
+    // eslint-disable-next-line
+    removeItem(key) { }
+    // eslint-disable-next-line
+    setItem(key, value) { }
+}
+class LocalStorageService {
+    /** @hidden */
+    constructor() {
+        typeof localStorage !== 'undefined' ? (this._storage = localStorage) : (this._storage = new MockStorage());
+    }
+    /** Get item from local storage. */
+    get(key) {
+        const value = this._storage.getItem(key);
+        if (value) {
+            return JSON.parse(value);
+        }
+        return null;
+    }
+    /** Set item in local storage. */
+    set(key, value) {
+        this._storage.setItem(key, JSON.stringify(value));
+    }
+}
+LocalStorageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LocalStorageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalStorageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return []; } });
+
+class ResizeObserverFactory {
+    /** Factory to create ResizeObserver if it's present in browser.  */
+    create(callback) {
+        return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);
+    }
+}
+ResizeObserverFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ResizeObserverFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class ResizeObserverService {
+    /** @hidden */
+    constructor(_resizeObserverFactory) {
+        this._resizeObserverFactory = _resizeObserverFactory;
+        /** @hidden */
+        this._observedElements = new Map();
+    }
+    /** @hidden */
+    ngOnDestroy() {
+        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
+    }
+    /** Observe the given element and emit whenever its size changes. */
+    observe(elementOrRef) {
+        const element = coerceElement(elementOrRef);
+        return new Observable((observer) => {
+            const stream = this._observeElement(element);
+            const subscription = stream?.subscribe(observer);
+            return () => {
+                subscription?.unsubscribe();
+                this._unobserveElement(element);
+            };
+        });
+    }
+    /**
+     * Observes the given element by using the existing MutationObserver if available, or creating a
+     * new one if not.
+     */
+    _observeElement(element) {
+        let observedElement = this._observedElements.get(element);
+        if (!observedElement) {
+            const stream = new Subject();
+            const observer = this._resizeObserverFactory.create((mutations) => stream.next(mutations));
+            if (observer) {
+                observer.observe(element);
+            }
+            observedElement = { observer, stream, count: 0 };
+            this._observedElements.set(element, observedElement);
+        }
+        observedElement.count++;
+        return observedElement?.stream;
+    }
+    /**
+     * Un-observes the given element and cleans up the underlying MutationObserver if nobody else is
+     * observing this element.
+     */
+    _unobserveElement(element) {
+        const observedElement = this._observedElements.get(element);
+        if (!observedElement) {
+            return;
+        }
+        if (--observedElement.count) {
+            return;
+        }
+        this._cleanupObserver(element);
+    }
+    /** Clean up the underlying MutationObserver for the specified element. */
+    _cleanupObserver(element) {
+        const observedElement = this._observedElements.get(element);
+        if (!observedElement) {
+            return;
+        }
+        const { observer, stream } = observedElement;
+        if (observer) {
+            observer.disconnect();
+        }
+        stream.complete();
+        this._observedElements.delete(element);
+    }
+}
+ResizeObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverService, deps: [{ token: ResizeObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable });
+ResizeObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: ResizeObserverFactory }]; } });
+
+class TabbableElementService {
+    /** @hidden */
+    constructor(_checker, _document) {
+        this._checker = _checker;
+        this._document = _document;
+    }
+    /** Get the first tabbable element from a DOM subtree (inclusive). */
+    getTabbableElement(root, focusLastElement = false, skipSelf = false) {
+        if (!skipSelf && this._checker.isFocusable(root) && this._checker.isTabbable(root)) {
+            return root;
+        }
+        // Iterate in DOM order. Note that IE doesn't have `children` for SVG, so we fall
+        // back to `childNodes` which includes text nodes, comments etc.
+        const rootChildren = root.children || root.childNodes;
+        const children = focusLastElement ? Array.from(rootChildren).reverse() : rootChildren;
+        for (let i = 0; i < children.length; i++) {
+            const tabbableChild = children[i].nodeType === this._document?.ELEMENT_NODE
+                ? this.getTabbableElement(children[i], focusLastElement)
+                : null;
+            if (tabbableChild) {
+                return tabbableChild;
+            }
+        }
+        return null;
+    }
+}
+TabbableElementService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabbableElementService, deps: [{ token: i1$1.InteractivityChecker }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+TabbableElementService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabbableElementService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabbableElementService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1$1.InteractivityChecker }, { type: Document, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+/**
+ * Retrieves native element from ElementRef.
+ */
+function getNativeElement(element) {
+    let coercible = element;
+    if (hasElementRef(element)) {
+        coercible = element.elementRef;
+    }
+    return coerceElement(coercible);
 }
-
 /**
- * Function checks whether the passed number is odd.
- * @param number number to check.
- * @returns Boolean whether the number is odd.
+ * Checks whether object has element reference in it.
  */
-function isOdd(number) {
-    return number % 2 === 1;
+function hasElementRef(something) {
+    return something && something['elementRef'] instanceof ElementRef;
 }
 
-class KeyboardSupportService {
-    constructor() {
-        /** Subject that is thrown, when focus escapes the list */
-        this.focusEscapeList = new Subject();
-        /** An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)  */
-        this._onDestroy$ = new Subject();
-        /** An RxJS Subject that will kill the data stream upon queryList changes (for unsubscribing)  */
-        this._onRefresh$ = new Subject();
-        /** @hidden
-         * allow tab key navigation. default is true.
-         */
-        this._tabKeyNavigation = true;
-    }
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+class AttributeObserver {
     /** @hidden */
-    get keyManager() {
-        return this._keyManager;
+    constructor(_mutationObserverFactory) {
+        this._mutationObserverFactory = _mutationObserverFactory;
+        /** @Hidden */
+        this._observedElements = new Map();
     }
     /** @hidden */
-    setKeyboardService(queryList, wrap, tabKeyNavigation = true) {
-        this._itemList = queryList;
-        this._tabKeyNavigation = tabKeyNavigation;
-        this._keyManager = new FocusKeyManager(queryList).withWrap(wrap).withHomeAndEnd();
-        queryList.changes
-            .pipe(takeUntil(this._onDestroy$), startWith(0))
-            .subscribe(() => this._refreshEscapeLogic(queryList));
+    ngOnDestroy() {
+        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
+    }
+    /** @Hidden */
+    observe(elementOrRef) {
+        const element = getNativeElement(elementOrRef);
+        return new Observable((observer) => {
+            const stream = this._observeElement(element);
+            const subscription = stream.subscribe(observer);
+            return () => {
+                subscription.unsubscribe();
+                this._unobserveElement(element);
+            };
+        });
+    }
+    /** @Hidden */
+    unobserve(element) {
+        this._unobserveElement(getNativeElement(element));
     }
     /** @hidden */
-    onKeyDown(event) {
-        this._keyManager.onKeydown(event);
-        if (KeyUtil.isKeyCode(event, TAB)) {
-            if (KeyUtil.isKeyCode(event, TAB) && this._tabKeyNavigation) {
-                event.preventDefault();
-                hasModifierKey(event, 'shiftKey')
-                    ? this.keyManager.setPreviousItemActive()
-                    : this.keyManager.setNextItemActive();
+    _observeElement(element) {
+        if (!this._observedElements.has(element)) {
+            const stream = new Subject();
+            const observer = this._mutationObserverFactory.create((mutations) => stream.next(mutations));
+            if (observer) {
+                observer.observe(element, {
+                    attributes: true
+                });
             }
+            this._observedElements.set(element, { observer, stream, count: 1 });
+        }
+        else {
+            this._observedElements.get(element).count++;
         }
+        return this._observedElements.get(element).stream;
     }
-    /** Destroys KeyboardSupportService dependencies */
-    onDestroy() {
-        this._onDestroy$.next();
-        this._onDestroy$.complete();
-        this._keyManager.destroy();
+    /** @Hidden */
+    _unobserveElement(element) {
+        if (this._observedElements.has(element)) {
+            this._observedElements.get(element).count--;
+            if (!this._observedElements.get(element).count) {
+                this._cleanupObserver(element);
+            }
+        }
     }
     /** @hidden */
-    _refreshEscapeLogic(queryList) {
-        const createEscapeListener = (listItem, onKeyCode, escapeDirection) => {
-            listItem.keyDown
-                .pipe(takeUntil(unsubscribe$), filter((event) => KeyUtil.isKeyCode(event, onKeyCode)), tap((event) => event.preventDefault()))
-                .subscribe(() => this.focusEscapeList.next(escapeDirection));
-        };
-        /** Finish all of the streams, form before */
-        this._onRefresh$.next();
-        const unsubscribe$ = merge(this._onRefresh$, this._onDestroy$);
-        if (queryList.length) {
-            createEscapeListener(queryList.last, DOWN_ARROW, 'down');
-            createEscapeListener(queryList.first, UP_ARROW, 'up');
+    _cleanupObserver(element) {
+        if (this._observedElements.has(element)) {
+            const { observer, stream } = this._observedElements.get(element);
+            if (observer) {
+                observer.disconnect();
+            }
+            stream.complete();
+            this._observedElements.delete(element);
         }
     }
 }
-KeyboardSupportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KeyboardSupportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KeyboardSupportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KeyboardSupportService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: KeyboardSupportService, decorators: [{
+AttributeObserver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AttributeObserver, deps: [{ token: i1$2.MutationObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable });
+AttributeObserver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AttributeObserver, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AttributeObserver, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.MutationObserverFactory }]; } });
 
-class MockStorage {
-    // eslint-disable-next-line
-    key(index) { }
-    clear() { }
-    // eslint-disable-next-line
-    getItem(key) { }
-    // eslint-disable-next-line
-    removeItem(key) { }
-    // eslint-disable-next-line
-    setItem(key, value) { }
+/* eslint-disable @typescript-eslint/member-ordering */
+class DeprecatedAutoCompleteDirective extends DeprecatedSelector {
 }
-class LocalStorageService {
+DeprecatedAutoCompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedAutoCompleteDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DeprecatedAutoCompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DeprecatedAutoCompleteDirective, isStandalone: true, selector: "[fdAutoComplete], [fd-auto-complete]", providers: [
+        DestroyedService,
+        {
+            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
+            useValue: getDeprecatedModel('[fdkAutoComplete]', '[fdAutoComplete], [fd-auto-complete]')
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedAutoCompleteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[fdAutoComplete], [fd-auto-complete]',
+                    standalone: true,
+                    providers: [
+                        DestroyedService,
+                        {
+                            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
+                            useValue: getDeprecatedModel('[fdkAutoComplete]', '[fdAutoComplete], [fd-auto-complete]')
+                        }
+                    ]
+                }]
+        }] });
+class AutoCompleteDirective {
     /** @hidden */
-    constructor() {
-        typeof localStorage !== 'undefined' ? (this._storage = localStorage) : (this._storage = new MockStorage());
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    constructor(_elementRef, _zone, _destroy$) {
+        this._elementRef = _elementRef;
+        this._zone = _zone;
+        this._destroy$ = _destroy$;
+        /** Whether the auto complete directive should be enabled */
+        this.enable = true;
+        /** Matcher function for testing the str for a search term */
+        this.matcher = (str, searchTerm) => str.startsWith(searchTerm);
+        /** Display function. Accepts an object of the same type as the
+         * items passed to dropdownValues as argument, and outputs a string.
+         * An arrow function can be used to access the *this* keyword in the calling component.
+         * See search input examples for details. */
+        this.displayFn = this._defaultDisplay;
+        /** Event thrown, when the auto ahead text is accepted */
+        this.onComplete = new EventEmitter();
+        /** @hidden */
+        this._completeKeys = [ENTER];
+        /** @hidden */
+        this._fillKeys = [LEFT_ARROW, RIGHT_ARROW];
+        /** @hidden */
+        this._stopKeys = [BACKSPACE, DELETE, ESCAPE];
+        /**
+         * Fixes #10710
+         * WIth chinese characters inputText property update was triggered after the keyup event trigger.
+         * By ensuring that we set all properties we can proceed with stable data.
+         */
+        this._zone.runOutsideAngular(() => {
+            const keyupEvent = fromEvent(this._elementRef.nativeElement, 'keyup');
+            keyupEvent
+                .pipe(switchMap((evt) => this._zone.onStable.pipe(first(), map$1(() => evt))), takeUntil$1(this._destroy$))
+                .subscribe((evt) => {
+                this._handleKeyboardEvent(evt);
+                console.log(this.inputText);
+            });
+        });
     }
-    /** Get item from local storage. */
-    get(key) {
-        const value = this._storage.getItem(key);
-        if (value) {
-            return JSON.parse(value);
+    /** @hidden */
+    _handleKeyboardEvent(event) {
+        if (this.enable) {
+            if (KeyUtil.isKeyCode(event, this._stopKeys)) {
+                this._elementRef.nativeElement.value = this.inputText;
+            }
+            else if (KeyUtil.isKeyCode(event, this._completeKeys)) {
+                this._sendCompleteEvent(true);
+                this._moveIndicatorToLastCharacter();
+            }
+            else if (KeyUtil.isKeyCode(event, this._fillKeys)) {
+                this._sendCompleteEvent(false);
+            }
+            else if (!this._isControlKey(event) && this.inputText) {
+                /** Prevention from triggering typeahead, when having crtl/cmd + keys */
+                if (!this._triggerTypeAhead()) {
+                    return;
+                }
+                this.oldValue = this.inputText;
+                const item = this.options.find((option) => this.matcher(this.displayFn(option).toLocaleLowerCase(), this.inputText.toLocaleLowerCase()));
+                if (item) {
+                    this._typeahead(this.displayFn(item));
+                }
+            }
+        }
+        this.lastKeyUpEvent = event;
+    }
+    /** @hidden */
+    _typeahead(displayedValue) {
+        this._elementRef.nativeElement.value = displayedValue;
+        const selectionStartIndex = this.inputText.length;
+        this._elementRef.nativeElement.setSelectionRange(selectionStartIndex, displayedValue.length);
+    }
+    /** @hidden */
+    _isControlKey(event) {
+        return KeyUtil.isKeyCode(event, CONTROL) || event.ctrlKey;
+    }
+    /** @hidden */
+    _defaultDisplay(value) {
+        return value;
+    }
+    /** @hidden */
+    _triggerTypeAhead() {
+        if (this.lastKeyUpEvent &&
+            KeyUtil.isKeyCode(this.lastKeyUpEvent, CONTROL) &&
+            this.inputText === this.oldValue) {
+            return false;
+        }
+        else {
+            return true;
         }
-        return null;
     }
-    /** Set item in local storage. */
-    set(key, value) {
-        this._storage.setItem(key, JSON.stringify(value));
+    /** @hidden */
+    _sendCompleteEvent(forceClose) {
+        this.onComplete.emit({
+            term: this._elementRef.nativeElement.value,
+            forceClose
+        });
+    }
+    /** @hidden */
+    _moveIndicatorToLastCharacter() {
+        const inputTextLength = this.inputText?.length ?? 0;
+        this._elementRef.nativeElement.setSelectionRange(inputTextLength, inputTextLength);
     }
 }
-LocalStorageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-LocalStorageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LocalStorageService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return []; } });
+AutoCompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: DestroyedService }], target: i0.ɵɵFactoryTarget.Directive });
+AutoCompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: AutoCompleteDirective, isStandalone: true, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: { options: "options", inputText: "inputText", enable: "enable", matcher: "matcher", displayFn: "displayFn" }, outputs: { onComplete: "onComplete" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: DestroyedService }]; }, propDecorators: { options: [{
+                type: Input
+            }], inputText: [{
+                type: Input
+            }], enable: [{
+                type: Input
+            }], matcher: [{
+                type: Input
+            }], displayFn: [{
+                type: Input
+            }], onComplete: [{
+                type: Output
+            }] } });
 
-class ResizeObserverFactory {
-    /** Factory to create ResizeObserver if it's present in browser.  */
-    create(callback) {
-        return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);
-    }
+class AutoCompleteModule {
 }
-ResizeObserverFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ResizeObserverFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+AutoCompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AutoCompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteModule, imports: [AutoCompleteDirective, DeprecatedAutoCompleteDirective], exports: [AutoCompleteDirective, DeprecatedAutoCompleteDirective] });
+AutoCompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AutoCompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AutoCompleteDirective, DeprecatedAutoCompleteDirective],
+                    exports: [AutoCompleteDirective, DeprecatedAutoCompleteDirective],
+                    declarations: []
+                }]
         }] });
-class ResizeObserverService {
+
+const FOCUSABLE_ITEM = new InjectionToken('Focusable Option');
+
+class DeprecatedFocusKeyManagerListDirective extends DeprecatedSelector {
+}
+DeprecatedFocusKeyManagerListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedFocusKeyManagerListDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DeprecatedFocusKeyManagerListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DeprecatedFocusKeyManagerListDirective, isStandalone: true, selector: "[fd-focus-key-manager-list], [fdFocusKeyManagerList]", providers: [
+        {
+            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
+            useValue: getDeprecatedModel('[fdkFocusKeyManagerList]', '[fd-focus-key-manager-list], [fdFocusKeyManagerList]')
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedFocusKeyManagerListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[fd-focus-key-manager-list], [fdFocusKeyManagerList]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
+                            useValue: getDeprecatedModel('[fdkFocusKeyManagerList]', '[fd-focus-key-manager-list], [fdFocusKeyManagerList]')
+                        }
+                    ]
+                }]
+        }] });
+/** Directive to apply Angular Material FocusKeyManager to lists.
+ * To be used with FocusKeyManagerItemDirective
+ */
+class FocusKeyManagerListDirective {
     /** @hidden */
-    constructor(_resizeObserverFactory) {
-        this._resizeObserverFactory = _resizeObserverFactory;
-        /** @hidden */
-        this._observedElements = new Map();
+    get focusKeyManager() {
+        return this._focusKeyManager;
     }
     /** @hidden */
-    ngOnDestroy() {
-        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
-    }
-    /** Observe the given element and emit whenever its size changes. */
-    observe(elementOrRef) {
-        const element = coerceElement(elementOrRef);
-        return new Observable((observer) => {
-            const stream = this._observeElement(element);
-            const subscription = stream?.subscribe(observer);
-            return () => {
-                subscription?.unsubscribe();
-                this._unobserveElement(element);
-            };
-        });
-    }
-    /**
-     * Observes the given element by using the existing MutationObserver if available, or creating a
-     * new one if not.
-     */
-    _observeElement(element) {
-        let observedElement = this._observedElements.get(element);
-        if (!observedElement) {
-            const stream = new Subject();
-            const observer = this._resizeObserverFactory.create((mutations) => stream.next(mutations));
-            if (observer) {
-                observer.observe(element);
-            }
-            observedElement = { observer, stream, count: 0 };
-            this._observedElements.set(element, observedElement);
-        }
-        observedElement.count++;
-        return observedElement?.stream;
+    constructor(_rtlService, _cdr) {
+        this._rtlService = _rtlService;
+        this._cdr = _cdr;
+        /** @hidden */
+        this._onDestroy$ = new Subject();
     }
-    /**
-     * Un-observes the given element and cleans up the underlying MutationObserver if nobody else is
-     * observing this element.
-     */
-    _unobserveElement(element) {
-        const observedElement = this._observedElements.get(element);
-        if (!observedElement) {
-            return;
-        }
-        if (--observedElement.count) {
+    /** @hidden */
+    ngOnChanges(changes) {
+        if (!this._focusKeyManager) {
             return;
         }
-        this._cleanupObserver(element);
-    }
-    /** Clean up the underlying MutationObserver for the specified element. */
-    _cleanupObserver(element) {
-        const observedElement = this._observedElements.get(element);
-        if (!observedElement) {
-            return;
+        if ('orientation' in changes) {
+            this._applyOrientation();
         }
-        const { observer, stream } = observedElement;
-        if (observer) {
-            observer.disconnect();
+        if ('skiPredicate' in changes) {
+            this._focusKeyManager.skipPredicate(this.skipPredicate);
         }
-        stream.complete();
-        this._observedElements.delete(element);
     }
-}
-ResizeObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverService, deps: [{ token: ResizeObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable });
-ResizeObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizeObserverService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: ResizeObserverFactory }]; } });
-
-class TabbableElementService {
     /** @hidden */
-    constructor(_checker, _document) {
-        this._checker = _checker;
-        this._document = _document;
+    ngAfterContentInit() {
+        this._focusKeyManager = new FocusKeyManager(this._items).skipPredicate(this.skipPredicate);
+        this._applyOrientation();
+        this._cdr.detectChanges();
+        this._rtlService?.rtl
+            .pipe(filter(() => this.orientation === 'horizontal'), takeUntil(this._onDestroy$))
+            .subscribe(() => this._applyOrientation());
     }
-    /** Get the first tabbable element from a DOM subtree (inclusive). */
-    getTabbableElement(root, focusLastElement = false, skipSelf = false) {
-        if (!skipSelf && this._checker.isFocusable(root) && this._checker.isTabbable(root)) {
-            return root;
+    /** @hidden */
+    ngOnDestroy() {
+        this._onDestroy$.next();
+        this._onDestroy$.complete();
+        this._focusKeyManager.destroy();
+    }
+    /** Focus certain list's item */
+    focusItem(item) {
+        if (typeof item === 'number') {
+            this._focusKeyManager.setActiveItem(item);
         }
-        // Iterate in DOM order. Note that IE doesn't have `children` for SVG, so we fall
-        // back to `childNodes` which includes text nodes, comments etc.
-        const rootChildren = root.children || root.childNodes;
-        const children = focusLastElement ? Array.from(rootChildren).reverse() : rootChildren;
-        for (let i = 0; i < children.length; i++) {
-            const tabbableChild = children[i].nodeType === this._document?.ELEMENT_NODE
-                ? this.getTabbableElement(children[i], focusLastElement)
-                : null;
-            if (tabbableChild) {
-                return tabbableChild;
-            }
+        else {
+            this._focusKeyManager.setActiveItem(item);
+        }
+    }
+    /** @hidden */
+    _applyOrientation() {
+        switch (this.orientation) {
+            case 'horizontal':
+                this._focusKeyManager.withHorizontalOrientation(this._rtlService?.rtl.value ? 'rtl' : 'ltr');
+                break;
+            case 'vertical':
+                this._focusKeyManager.withVerticalOrientation(true);
+                break;
         }
-        return null;
     }
 }
-TabbableElementService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabbableElementService, deps: [{ token: i1$1.InteractivityChecker }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-TabbableElementService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabbableElementService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabbableElementService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$1.InteractivityChecker }, { type: Document, decorators: [{
+FocusKeyManagerListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerListDirective, deps: [{ token: RtlService, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+FocusKeyManagerListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: FocusKeyManagerListDirective, isStandalone: true, selector: "[fdkFocusKeyManagerList], [fd-focus-key-manager-list], [fdFocusKeyManagerList]", inputs: { orientation: "orientation", skipPredicate: "skipPredicate" }, queries: [{ propertyName: "_items", predicate: FOCUSABLE_ITEM }], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[fdkFocusKeyManagerList], [fd-focus-key-manager-list], [fdFocusKeyManagerList]`,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: RtlService, decorators: [{
                     type: Optional
-                }, {
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; } });
-
-/**
- * Retrieves native element from ElementRef.
- */
-function getNativeElement(element) {
-    let coercible = element;
-    if (hasElementRef(element)) {
-        coercible = element.elementRef;
-    }
-    return coerceElement(coercible);
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { orientation: [{
+                type: Input
+            }], skipPredicate: [{
+                type: Input
+            }], _items: [{
+                type: ContentChildren,
+                args: [FOCUSABLE_ITEM]
+            }] } });
+
+class DeprecatedFocusKeyManagerItemDirective extends DeprecatedSelector {
 }
-/**
- * Checks whether object has element reference in it.
+DeprecatedFocusKeyManagerItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedFocusKeyManagerItemDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DeprecatedFocusKeyManagerItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DeprecatedFocusKeyManagerItemDirective, isStandalone: true, selector: "[fd-focus-key-manager-item], [fdFocusKeyManagerItem]", providers: [
+        {
+            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
+            useValue: getDeprecatedModel('[fdkFocusKeyManagerItem]', '[fd-focus-key-manager-item], [fdFocusKeyManagerItem]')
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedFocusKeyManagerItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[fd-focus-key-manager-item], [fdFocusKeyManagerItem]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
+                            useValue: getDeprecatedModel('[fdkFocusKeyManagerItem]', '[fd-focus-key-manager-item], [fdFocusKeyManagerItem]')
+                        }
+                    ]
+                }]
+        }] });
+/** Directive to apply Angular Material FocusKeyManager to lists.
+ * To be used with FocusKeyManagerItemDirective
  */
-function hasElementRef(something) {
-    return something && something['elementRef'] instanceof ElementRef;
-}
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-class AttributeObserver {
+class FocusKeyManagerItemDirective {
+    /** Whether item should be initially focused */
+    set initialFocus(value) {
+        this._initialFocus = coerceBooleanProperty(value);
+    }
     /** @hidden */
-    constructor(_mutationObserverFactory) {
-        this._mutationObserverFactory = _mutationObserverFactory;
-        /** @Hidden */
-        this._observedElements = new Map();
+    get _tabindex() {
+        if (this._initialFocus) {
+            return 0;
+        }
+        return this.nativeElement?.tabIndex ?? -1;
+    }
+    /** Native element of the item */
+    get nativeElement() {
+        return this._elRef?.nativeElement;
     }
     /** @hidden */
-    ngOnDestroy() {
-        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
+    get _focusKeyManager() {
+        return this._list.focusKeyManager;
     }
-    /** @Hidden */
-    observe(elementOrRef) {
-        const element = getNativeElement(elementOrRef);
-        return new Observable((observer) => {
-            const stream = this._observeElement(element);
-            const subscription = stream.subscribe(observer);
-            return () => {
-                subscription.unsubscribe();
-                this._unobserveElement(element);
-            };
-        });
+    /** @hidden */
+    constructor(_list, _elRef) {
+        this._list = _list;
+        this._elRef = _elRef;
+        /** @hidden */
+        this._initialFocus = false;
     }
-    /** @Hidden */
-    unobserve(element) {
-        this._unobserveElement(getNativeElement(element));
+    /** @hidden */
+    _onFocus() {
+        // For cases where initially selected item doesn't have 0 index
+        this._focusKeyManager?.updateActiveItem(this);
     }
     /** @hidden */
-    _observeElement(element) {
-        if (!this._observedElements.has(element)) {
-            const stream = new Subject();
-            const observer = this._mutationObserverFactory.create((mutations) => stream.next(mutations));
-            if (observer) {
-                observer.observe(element, {
-                    attributes: true
-                });
-            }
-            this._observedElements.set(element, { observer, stream, count: 1 });
-        }
-        else {
-            this._observedElements.get(element).count++;
-        }
-        return this._observedElements.get(element).stream;
+    _onKeydown(event) {
+        this._focusKeyManager?.onKeydown(event);
     }
-    /** @Hidden */
-    _unobserveElement(element) {
-        if (this._observedElements.has(element)) {
-            this._observedElements.get(element).count--;
-            if (!this._observedElements.get(element).count) {
-                this._cleanupObserver(element);
-            }
-        }
+    /** Focus current item native element */
+    focus() {
+        this._elRef?.nativeElement.focus();
     }
+}
+FocusKeyManagerItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerItemDirective, deps: [{ token: FocusKeyManagerListDirective }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+FocusKeyManagerItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: FocusKeyManagerItemDirective, isStandalone: true, selector: "[fdkFocusKeyManagerItem], [fd-focus-key-manager-item], [fdFocusKeyManagerItem]", inputs: { initialFocus: "initialFocus", _tabindex: "_tabindex" }, host: { listeners: { "focus": "_onFocus()", "keydown": "_onKeydown($event)" }, properties: { "attr.tabindex": "this._tabindex" } }, providers: [{ provide: FOCUSABLE_ITEM, useExisting: forwardRef(() => FocusKeyManagerItemDirective) }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdkFocusKeyManagerItem], [fd-focus-key-manager-item], [fdFocusKeyManagerItem]',
+                    standalone: true,
+                    providers: [{ provide: FOCUSABLE_ITEM, useExisting: forwardRef(() => FocusKeyManagerItemDirective) }]
+                }]
+        }], ctorParameters: function () { return [{ type: FocusKeyManagerListDirective }, { type: i0.ElementRef }]; }, propDecorators: { initialFocus: [{
+                type: Input
+            }], _tabindex: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], _onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], _onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class FocusKeyManagerHelpersModule {
+}
+FocusKeyManagerHelpersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerHelpersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FocusKeyManagerHelpersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerHelpersModule, imports: [FocusKeyManagerItemDirective,
+        FocusKeyManagerListDirective,
+        DeprecatedFocusKeyManagerItemDirective,
+        DeprecatedFocusKeyManagerListDirective], exports: [FocusKeyManagerItemDirective,
+        FocusKeyManagerListDirective,
+        DeprecatedFocusKeyManagerItemDirective,
+        DeprecatedFocusKeyManagerListDirective] });
+FocusKeyManagerHelpersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerHelpersModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FocusKeyManagerHelpersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FocusKeyManagerItemDirective,
+                        FocusKeyManagerListDirective,
+                        DeprecatedFocusKeyManagerItemDirective,
+                        DeprecatedFocusKeyManagerListDirective
+                    ],
+                    exports: [
+                        FocusKeyManagerItemDirective,
+                        FocusKeyManagerListDirective,
+                        DeprecatedFocusKeyManagerItemDirective,
+                        DeprecatedFocusKeyManagerListDirective
+                    ]
+                }]
+        }] });
+
+const IgnoreClickOnSelectionDirectiveToken = new InjectionToken('Ignore click on selection directive');
+
+class DeprecatedIgnoreClickOnSelectionDirective extends DeprecatedSelector {
+}
+DeprecatedIgnoreClickOnSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedIgnoreClickOnSelectionDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+DeprecatedIgnoreClickOnSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: DeprecatedIgnoreClickOnSelectionDirective, isStandalone: true, selector: "[fdIgnoreClickOnSelection]", providers: [
+        {
+            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
+            useValue: getDeprecatedModel('[fdkIgnoreClickOnSelection]', '[fdIgnoreClickOnSelection]')
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DeprecatedIgnoreClickOnSelectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[fdIgnoreClickOnSelection]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: FD_DEPRECATED_DIRECTIVE_SELECTOR,
+                            useValue: getDeprecatedModel('[fdkIgnoreClickOnSelection]', '[fdIgnoreClickOnSelection]')
+                        }
+                    ]
+                }]
+        }] });
+/**
+ * Directive will stop propagation and prevent default of click, if selected area is coming from
+ * directive's host element. This gives ability to not cancel all clicks on element, just the ones
+ * which include selection
+ */
+class IgnoreClickOnSelectionDirective {
     /** @hidden */
-    _cleanupObserver(element) {
-        if (this._observedElements.has(element)) {
-            const { observer, stream } = this._observedElements.get(element);
-            if (observer) {
-                observer.disconnect();
+    constructor(document, _elementRef) {
+        this.document = document;
+        this._elementRef = _elementRef;
+    }
+    /** Host click listener. Checks for selection existence and if finds one, checks anchor */
+    clicked($event) {
+        const selection = this.document.getSelection();
+        if (selection?.toString()) {
+            if (selection.anchorNode &&
+                (this._elementRef.nativeElement.isSameNode(selection.anchorNode) ||
+                    this._elementRef.nativeElement.isSameNode(selection.anchorNode.parentElement))) {
+                $event.stopPropagation();
+                $event.preventDefault();
             }
-            stream.complete();
-            this._observedElements.delete(element);
         }
     }
 }
-AttributeObserver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AttributeObserver, deps: [{ token: i1$2.MutationObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable });
-AttributeObserver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AttributeObserver, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AttributeObserver, decorators: [{
-            type: Injectable,
+IgnoreClickOnSelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+IgnoreClickOnSelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: IgnoreClickOnSelectionDirective, isStandalone: true, selector: "[fdkIgnoreClickOnSelection], [fdIgnoreClickOnSelection]", host: { listeners: { "click": "clicked($event)" } }, providers: [
+        {
+            provide: IgnoreClickOnSelectionDirectiveToken,
+            useExisting: IgnoreClickOnSelectionDirective
+        }
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root'
+                    selector: '[fdkIgnoreClickOnSelection], [fdIgnoreClickOnSelection]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: IgnoreClickOnSelectionDirectiveToken,
+                            useExisting: IgnoreClickOnSelectionDirective
+                        }
+                    ]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.MutationObserverFactory }]; } });
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { clicked: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class IgnoreClickOnSelectionModule {
+}
+IgnoreClickOnSelectionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+IgnoreClickOnSelectionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionModule, imports: [IgnoreClickOnSelectionDirective, DeprecatedIgnoreClickOnSelectionDirective], exports: [IgnoreClickOnSelectionDirective, DeprecatedIgnoreClickOnSelectionDirective] });
+IgnoreClickOnSelectionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IgnoreClickOnSelectionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [IgnoreClickOnSelectionDirective, DeprecatedIgnoreClickOnSelectionDirective],
+                    exports: [IgnoreClickOnSelectionDirective, DeprecatedIgnoreClickOnSelectionDirective]
+                }]
+        }] });
 
 class DeprecatedInitialFocusDirective extends DeprecatedSelector {
     constructor() {