@fundamental-ngx/core 0.35.3 → 0.35.4-rc.2

package/fesm2015/fundamental-ngx-core-overflow-layout.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { Directive, HostBinding, ContentChild, InjectionToken, Inject, Input, HostListener, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Output, ContentChildren, ViewChildren, ViewChild, SkipSelf, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
+import { Directive, HostBinding, Input, ContentChild, Injectable, Optional, InjectionToken, Inject, HostListener, EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Output, ContentChildren, ViewChildren, ViewChild, SkipSelf, NgModule } from '@angular/core';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@fundamental-ngx/core/popover';
+import * as i3 from '@fundamental-ngx/core/popover';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
-import * as i3 from '@fundamental-ngx/core/button';
+import * as i4 from '@fundamental-ngx/core/button';
 import { ButtonModule } from '@fundamental-ngx/core/button';
-import { FocusKeyManager } from '@angular/cdk/a11y';
 import { TAB, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import * as i1 from '@fundamental-ngx/core/utils';
-import { KeyUtil, resizeObservable } from '@fundamental-ngx/core/utils';
-import { Subscription, Subject, debounceTime, skip, filter, distinctUntilChanged } from 'rxjs';
+import { resizeObservable, KeyUtil } from '@fundamental-ngx/core/utils';
+import { Subscription, Subject, skip, filter, distinctUntilChanged, debounceTime } from 'rxjs';
+import { FocusKeyManager } from '@angular/cdk/a11y';
 
 /**
  * Directive to hide component without actual destroying of the component instance.
@@ -41,7 +41,7 @@ class OverflowItemContainerRefDirective {
             this._viewRef = this._viewContainerRef.detach();
             this._detached = true;
         }
-        else if (!value && this._viewRef && this._detached) {
+        else if (!value && this._viewRef && !this._viewRef.destroyed && this._detached) {
             this._viewRef = this._viewContainerRef.insert(this._viewRef);
             this._detached = false;
         }
@@ -62,10 +62,22 @@ class OverflowLayoutItemContainerDirective {
         this.elementRef = elementRef;
         /** @hidden */
         this._initialClass = 'fd-overflow-layout__item';
+        /**
+         * Whether this item is the first one in the array.
+         */
+        this.last = false;
+        /**
+         * Whether this item is the last one in the array.
+         */
+        this.first = false;
+        /**
+         * Whether this item is softly hidden. Used during free space calculation without flickering of the items.
+         */
+        this.softHidden = true;
     }
 }
 OverflowLayoutItemContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutItemContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-OverflowLayoutItemContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: OverflowLayoutItemContainerDirective, selector: "[fdOverflowLayoutItemContainer]", host: { properties: { "class": "this._initialClass" } }, queries: [{ propertyName: "containerRef", first: true, predicate: OverflowItemContainerRefDirective, descendants: true }], ngImport: i0 });
+OverflowLayoutItemContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: OverflowLayoutItemContainerDirective, selector: "[fdOverflowLayoutItemContainer]", inputs: { last: "last", first: "first", softHidden: "softHidden" }, host: { properties: { "class": "this._initialClass", "class.fd-overflow-layout__item--last": "this.last", "class.fd-overflow-layout__item--first": "this.first", "class.fd-overflow-layout__item--soft-hidden": "this.softHidden" } }, queries: [{ propertyName: "containerRef", first: true, predicate: OverflowItemContainerRefDirective, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutItemContainerDirective, decorators: [{
             type: Directive,
             args: [{
@@ -74,11 +86,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _initialClass: [{
                 type: HostBinding,
                 args: ['class']
+            }], last: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.fd-overflow-layout__item--last']
+            }], first: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.fd-overflow-layout__item--first']
+            }], softHidden: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.fd-overflow-layout__item--soft-hidden']
             }], containerRef: [{
                 type: ContentChild,
                 args: [OverflowItemContainerRefDirective]
             }] } });
 
+class OverflowLayoutListeningResult {
+    constructor() {
+        this.showMore = false;
+        this.items = [];
+        this.hiddenItems = [];
+        this.visibleItems = [];
+    }
+}
+class OverflowLayoutService {
+    /** @hidden */
+    constructor(_elRef, _rtlService) {
+        this._elRef = _elRef;
+        this._rtlService = _rtlService;
+        /**
+         * Overflow Layout calculation result.
+         */
+        this.result = new OverflowLayoutListeningResult();
+        /** @hidden */
+        this._listenToItemResize = true;
+        /** @hidden */
+        this._subscription = new Subscription();
+        /** @hidden */
+        this._allItems = [];
+        /** @hidden */
+        this._hiddenItems = [];
+        /** @hidden */
+        this._overflowItems = [];
+        /** @hidden */
+        this._detectChanges$ = new Subject();
+        /** @hidden */
+        this._result$ = new Subject();
+        /** @hidden */
+        this._dir = 'ltr';
+    }
+    /**
+     * Observable which emits when changes detection is required.
+     */
+    get detectChanges() {
+        return this._detectChanges$.asObservable();
+    }
+    /**
+     * Observable which emits when new calculation result is available.
+     */
+    get onResult() {
+        return this._result$.asObservable();
+    }
+    /** @hidden */
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+    startListening(config) {
+        this.setConfig(config);
+        this.fitVisibleItems();
+        this._setFocusKeyManager();
+        this._listenToChanges();
+        this._subscribeToRtl();
+    }
+    setConfig(config) {
+        this.config = config;
+    }
+    _emitResult() {
+        this._result$.next(this.result);
+    }
+    /** @hidden */
+    _listenToChanges() {
+        this._subscription.add(this.config.items.changes.subscribe(() => {
+            setTimeout(() => {
+                this.fitVisibleItems();
+            });
+        }));
+        this._listenToSizeChanges(this._elRef.nativeElement, this.config.itemsWrapper);
+    }
+    /** @hidden */
+    _listenToSizeChanges(...elements) {
+        elements.forEach((element) => this._subscription.add(resizeObservable(element)
+            .pipe(skip(1), filter(() => this._listenToItemResize), distinctUntilChanged(), debounceTime(30))
+            .subscribe(() => {
+            setTimeout(() => {
+                this.fitVisibleItems();
+            });
+        })));
+    }
+    /** @hidden */
+    fitVisibleItems() {
+        this._listenToItemResize = false;
+        this._allItems = this.config.items.toArray();
+        let allItems = this.config.items.toArray();
+        allItems.forEach((item, index) => {
+            // Softly hide previously completely hidden item in order to correctly calculate it's size.
+            item.softHidden = true;
+            item.hidden = false;
+            item.index = index;
+            item.first = index === 0;
+            item.last = index === allItems.length - 1;
+        });
+        this._detectChanges$.next();
+        allItems = this.config.direction === 'right' ? allItems : allItems.reverse();
+        const visibleContainerItems = this.config.direction === 'right'
+            ? this.config.visibleItems.toArray()
+            : this.config.visibleItems.toArray().reverse();
+        visibleContainerItems.forEach((i) => (i.containerRef.hidden = false));
+        this.result.showMore = false;
+        this._emitResult();
+        const containerWidth = this._elRef.nativeElement.getBoundingClientRect().width;
+        const itemsContainerWidth = this.config.itemsWrapper.getBoundingClientRect().width;
+        if (containerWidth >= itemsContainerWidth &&
+            this.config.visibleItems.length <= this.config.maxVisibleItems &&
+            this._hiddenItems.length === 0) {
+            // Make all items fully visible.
+            allItems.forEach((item) => {
+                item.softHidden = false;
+            });
+            this.result.showMore = false;
+            this.result.hiddenItems = this._hiddenItems;
+            this._emitResult();
+            this._listenToItemResize = true;
+            return;
+        }
+        this.result.showMore = true;
+        this._emitResult();
+        let fittingElmCount = 0;
+        let fittingElmsWidth = 0;
+        let shouldHideItems = false;
+        const showMoreContainerWidth = Math.ceil(this.config.showMoreContainer.getBoundingClientRect().width);
+        let layoutWidth = Math.ceil(this.config.layoutContainerElement.getBoundingClientRect().width);
+        // Try to find all forced visible items
+        const forcedItemsIndexes = this._getForcedItemsIndexes();
+        forcedItemsIndexes.forEach((itemIndex) => {
+            const container = this.config.visibleItems.get(itemIndex);
+            if (!container) {
+                return;
+            }
+            const elementSize = this._getElementWidth(container.elementRef.nativeElement);
+            layoutWidth -= elementSize;
+        });
+        if (layoutWidth < 0 && forcedItemsIndexes.length > 0) {
+            console.warn('There is no enough space to fit all forced visible items into the container. Please adjust their visibility accordingly.');
+        }
+        this._detectChanges$.next();
+        visibleContainerItems.forEach((item, index) => {
+            const itemRef = allItems[index];
+            if (shouldHideItems && !itemRef.overflowItem.forceVisibility) {
+                item.containerRef.hidden = true;
+                item.softHidden = false;
+                itemRef.hidden = true;
+                return;
+            }
+            const elementSize = this._getElementWidth(item.elementRef.nativeElement);
+            const combinedWidth = fittingElmsWidth + elementSize;
+            const condition = (combinedWidth <= layoutWidth ||
+                (item === this.config.visibleItems.last &&
+                    combinedWidth <= layoutWidth + showMoreContainerWidth)) &&
+                fittingElmCount < this.config.maxVisibleItems;
+            if (condition) {
+                fittingElmsWidth += elementSize;
+                fittingElmCount++;
+            }
+            else if (!itemRef.overflowItem.forceVisibility) {
+                shouldHideItems = true;
+                item.softHidden = false;
+                item.containerRef.hidden = true;
+                itemRef.hidden = true;
+            }
+        });
+        // Reverse original order back.
+        allItems = this.config.direction === 'right' ? allItems : allItems.reverse();
+        allItems.forEach((item) => {
+            item.softHidden = false;
+        });
+        let hiddenItems = allItems.filter((i) => i.hidden);
+        hiddenItems = !this.config.reverseHiddenItems ? hiddenItems.reverse() : hiddenItems;
+        const visibleItems = allItems.filter((i) => !i.hidden);
+        visibleItems.forEach((item, index) => {
+            item.index = index;
+            item.first = index === 0;
+            item.last = index === visibleItems.length - 1;
+        });
+        this._hiddenItems = hiddenItems.map((item, index) => {
+            item.first = index === 0;
+            item.last = index === hiddenItems.length - 1;
+            item.index = index;
+            return item;
+        });
+        this.result.showMore = this._hiddenItems.length > 0;
+        this.result.hiddenItems = this._hiddenItems;
+        this._emitResult();
+        this._listenToItemResize = true;
+    }
+    /** @hidden */
+    _setFocusKeyManager() {
+        var _a;
+        if (!this.config.enableKeyboardNavigation) {
+            return;
+        }
+        this._dir = ((_a = this._rtlService) === null || _a === void 0 ? void 0 : _a.rtl.value) ? 'rtl' : 'ltr';
+        this._keyboardEventsManager = new FocusKeyManager(this._overflowItems)
+            .withWrap()
+            .withHorizontalOrientation(this._dir)
+            .skipPredicate((item) => !item.focusable || item.hidden);
+    }
+    /** @hidden Rtl change subscription */
+    _subscribeToRtl() {
+        if (!this._rtlService || !this.config.enableKeyboardNavigation) {
+            return;
+        }
+        this._subscription.add(this._rtlService.rtl.subscribe((isRtl) => {
+            this._dir = isRtl ? 'rtl' : 'ltr';
+            this._keyboardEventsManager = this._keyboardEventsManager.withHorizontalOrientation(this._dir);
+        }));
+    }
+    /** @hidden */
+    _getForcedItemsIndexes() {
+        return this._allItems
+            .map((item, index) => (item.overflowItem.forceVisibility ? index : -1))
+            .filter((i) => i > -1);
+    }
+    /**
+     * @hidden
+     * Returns combined width of the element including margins.
+     * @param element Element to calculate width of.
+     */
+    _getElementWidth(element) {
+        const elementStyle = getComputedStyle(element);
+        const elementWidth = element.getBoundingClientRect().width;
+        const elementSize = elementWidth + parseFloat(elementStyle.marginLeft) + parseFloat(elementStyle.marginRight);
+        return Math.ceil(elementSize);
+    }
+}
+OverflowLayoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutService, deps: [{ token: i0.ElementRef }, { token: i1.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+OverflowLayoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i1.RtlService, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
 const FD_OVERFLOW_CONTAINER = new InjectionToken('FdOverflowContainer');
 
 const FD_OVERFLOW_EXPAND = new InjectionToken('FdOverflowLayoutExpand');
@@ -154,11 +419,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 
 class OverflowLayoutComponent {
     /** @hidden */
-    constructor(_cdr, _zone, _elRef, _rtlService) {
+    constructor(_cdr, _zone, _elRef, _overflowLayoutService, _rtlService) {
         this._cdr = _cdr;
         this._zone = _zone;
         this._elRef = _elRef;
+        this._overflowLayoutService = _overflowLayoutService;
         this._rtlService = _rtlService;
+        /** Direction of the fitting items calculation. */
+        this.showMorePosition = 'right';
+        /** Whether to render hidden items in reverse order. */
+        this.reverseHiddenItems = false;
+        /** Whether to enable keyboard navigation. */
+        this.enableKeyboardNavigation = true;
         /**
          * Event, triggered when amount of visible items has been changed.
          */
@@ -176,16 +448,14 @@ class OverflowLayoutComponent {
         /** @hidden */
         this._initialClass = 'fd-overflow-layout';
         /** @hidden */
-        this._listenToItemResize = true;
-        /** @hidden */
         this._subscription = new Subscription();
         /** @hidden */
         this._fillTrigger$ = new Subject();
         /** @hidden */
-        this._dir = 'ltr';
-        /** @hidden */
         this._maxVisibleItems = Infinity;
-        this._subscription.add(this._fillTrigger$.pipe(debounceTime(30)).subscribe(() => this._fitVisibleItems()));
+        /** @hidden */
+        this._canListenToResize = false;
+        this._subscription.add(this._fillTrigger$.pipe(debounceTime(30)).subscribe(() => this._overflowLayoutService.fitVisibleItems()));
     }
     /**
      * Maximum amount of visible items.
@@ -204,26 +474,16 @@ class OverflowLayoutComponent {
      * Triggers layout recalculation of the items.
      */
     triggerRecalculation() {
+        if (!this._canListenToResize) {
+            return;
+        }
+        this._overflowLayoutService.setConfig(this._getConfig());
         this._fillTrigger$.next();
     }
     /** @hidden */
     ngOnDestroy() {
         this._subscription.unsubscribe();
     }
-    /** @hidden */
-    _keyUpHandler(event) {
-        if (KeyUtil.isKeyCode(event, TAB)) {
-            const index = this._allItems.findIndex((item) => { var _a; return ((_a = item.overflowItem) === null || _a === void 0 ? void 0 : _a.focusable) && item.elementRef.nativeElement === event.target; });
-            if (index !== -1) {
-                this._keyboardEventsManager.setActiveItem(index);
-            }
-        }
-        if (KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW])) {
-            event.preventDefault();
-            // passing the event to key manager so, we get a change fired
-            this._keyboardEventsManager.onKeydown(event);
-        }
-    }
     /**
      * Sets current focused element.
      * @param element Element that needs to be focused.
@@ -231,7 +491,7 @@ class OverflowLayoutComponent {
     setFocusedElement(element) {
         const index = this._overflowItems.toArray().findIndex((item) => item === element);
         if (index !== -1) {
-            this._keyboardEventsManager.setActiveItem(index);
+            this._overflowLayoutService._keyboardEventsManager.setActiveItem(index);
         }
     }
     /**
@@ -254,170 +514,99 @@ class OverflowLayoutComponent {
     }
     /** @hidden */
     ngAfterViewInit() {
-        this._fitVisibleItems();
-        this._setFocusKeyManager();
-        this._listenToChanges();
-        this._subscribeToRtl();
-    }
-    /** @hidden */
-    _listenToChanges() {
+        this._subscription.add(this._overflowLayoutService.detectChanges.subscribe(() => {
+            this._cdr.detectChanges();
+        }));
+        this._subscription.add(this._overflowLayoutService.onResult.subscribe((result) => {
+            this._hiddenItems = result.hiddenItems;
+            this._showMore = result.showMore;
+            this.hiddenItemsCount.emit(result.hiddenItems.length);
+            this.visibleItemsCount.emit(this._allItems.filter((i) => !i.hidden).length);
+            this._cdr.detectChanges();
+        }));
         this._subscription.add(this._items.changes.subscribe(() => {
-            setTimeout(() => {
-                this._fitVisibleItems();
-            });
+            this._allItems = this._items.toArray();
+            this._cdr.detectChanges();
         }));
-        this._listenToSizeChanges(this._elRef.nativeElement, this._itemsWrapper.nativeElement);
+        this._allItems = this._items.toArray();
+        this._cdr.detectChanges();
+        this._overflowLayoutService.startListening(this._getConfig());
+        this._canListenToResize = true;
     }
     /** @hidden */
-    _listenToSizeChanges(...elements) {
-        elements.forEach((element) => this._subscription.add(resizeObservable(element)
-            .pipe(skip(1), filter(() => this._listenToItemResize), distinctUntilChanged(), debounceTime(30))
-            .subscribe(() => {
-            setTimeout(() => {
-                this._fitVisibleItems();
-            });
-        })));
+    _getConfig() {
+        return {
+            visibleItems: this._visibleItems,
+            items: this._items,
+            itemsWrapper: this._itemsWrapper.nativeElement,
+            showMoreContainer: this._showMoreContainer.nativeElement,
+            layoutContainerElement: this._layoutContainer.nativeElement,
+            maxVisibleItems: this.maxVisibleItems,
+            direction: this.showMorePosition,
+            enableKeyboardNavigation: this.enableKeyboardNavigation,
+            reverseHiddenItems: this.reverseHiddenItems
+        };
     }
     /** @hidden */
-    _fitVisibleItems() {
-        this._listenToItemResize = false;
-        this._allItems = this._items.toArray();
-        this._visibleItems.forEach((i) => (i.containerRef.hidden = false));
-        this._allItems.forEach((item, index) => {
-            item.hidden = false;
-            item.index = index;
-        });
-        this._cdr.detectChanges();
-        const containerWidth = this._elRef.nativeElement.getBoundingClientRect().width;
-        const itemsContainerWidth = this._itemsWrapper.nativeElement.getBoundingClientRect().width;
-        if (containerWidth >= itemsContainerWidth &&
-            this._visibleItems.length <= this.maxVisibleItems &&
-            this._hiddenItems.length === 0) {
-            this._showMore = false;
-            this._cdr.detectChanges();
-            this._listenToItemResize = true;
+    _keyUpHandler(event) {
+        if (!this.enableKeyboardNavigation) {
             return;
         }
-        this._showMore = true;
-        let fittingElmCount = 0;
-        let fittingElmsWidth = 0;
-        let shouldHideItems = false;
-        this._cdr.detectChanges();
-        const showMoreContainerWidth = this._showMoreContainer.nativeElement.getBoundingClientRect().width;
-        let layoutWidth = this._layoutContainer.nativeElement.getBoundingClientRect().width;
-        // Try to find all forced visible items
-        const forcedItemsIndexes = this._getForcedItemsIndexes();
-        forcedItemsIndexes.forEach((itemIndex) => {
-            const container = this._visibleItems.get(itemIndex);
-            if (!container) {
-                return;
+        if (KeyUtil.isKeyCode(event, TAB)) {
+            const index = this._allItems.findIndex((item) => { var _a; return ((_a = item.overflowItem) === null || _a === void 0 ? void 0 : _a.focusable) && item.elementRef.nativeElement === event.target; });
+            if (index !== -1) {
+                this._overflowLayoutService._keyboardEventsManager.setActiveItem(index);
             }
-            const elementSize = this._getElementWidth(container.elementRef.nativeElement);
-            layoutWidth -= elementSize;
-        });
-        if (layoutWidth < 0 && forcedItemsIndexes.length > 0) {
-            console.warn('There is no enough space to fit all forced visible items into the container. Please adjust their visibility accordingly.');
         }
-        this._visibleItems.forEach((item, index) => {
-            const itemRef = this._allItems[index];
-            if (shouldHideItems && !itemRef.overflowItem.forceVisibility) {
-                item.containerRef.hidden = true;
-                itemRef.hidden = true;
-                return;
-            }
-            const elementSize = this._getElementWidth(item.elementRef.nativeElement);
-            const combinedWidth = fittingElmsWidth + elementSize;
-            if ((combinedWidth <= layoutWidth ||
-                (item === this._visibleItems.last && combinedWidth <= layoutWidth + showMoreContainerWidth)) &&
-                fittingElmCount < this.maxVisibleItems) {
-                fittingElmsWidth += elementSize;
-                fittingElmCount++;
-            }
-            else if (!itemRef.overflowItem.forceVisibility) {
-                shouldHideItems = true;
-                item.containerRef.hidden = true;
-                itemRef.hidden = true;
-            }
-        });
-        this._hiddenItems = this._allItems.filter((i) => i.hidden);
-        this.visibleItemsCount.emit(this._allItems.filter((i) => !i.hidden).length);
-        this.hiddenItemsCount.emit(this._hiddenItems.length);
-        this._showMore = this._hiddenItems.length > 0;
-        this._cdr.detectChanges();
-        this._listenToItemResize = true;
-    }
-    /** @hidden */
-    _setFocusKeyManager() {
-        var _a;
-        this._dir = ((_a = this._rtlService) === null || _a === void 0 ? void 0 : _a.rtl.value) ? 'rtl' : 'ltr';
-        this._keyboardEventsManager = new FocusKeyManager(this._overflowItems)
-            .withWrap()
-            .withHorizontalOrientation(this._dir)
-            .skipPredicate((item) => !item.focusable || item.hidden);
-    }
-    /** @hidden Rtl change subscription */
-    _subscribeToRtl() {
-        if (!this._rtlService) {
-            return;
+        if (KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW])) {
+            event.preventDefault();
+            // passing the event to key manager so, we get a change fired
+            this._overflowLayoutService._keyboardEventsManager.onKeydown(event);
         }
-        const rtlSub = this._rtlService.rtl.subscribe((isRtl) => {
-            this._dir = isRtl ? 'rtl' : 'ltr';
-            this._keyboardEventsManager = this._keyboardEventsManager.withHorizontalOrientation(isRtl ? 'rtl' : 'ltr');
-        });
-        this._subscription.add(rtlSub);
-    }
-    /** @hidden */
-    _getForcedItemsIndexes() {
-        return this._allItems
-            .map((item, index) => (item.overflowItem.forceVisibility ? index : -1))
-            .filter((i) => i > -1);
-    }
-    /**
-     * @hidden
-     * Returns combined width of the element including margins.
-     * @param element Element to calculate width of.
-     */
-    _getElementWidth(element) {
-        const elementStyle = getComputedStyle(element);
-        const elementWidth = element.getBoundingClientRect().width;
-        const elementSize = elementWidth + parseFloat(elementStyle.marginLeft) + parseFloat(elementStyle.marginRight);
-        return elementSize;
     }
 }
-OverflowLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OverflowLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: { maxVisibleItems: "maxVisibleItems" }, outputs: { visibleItemsCount: "visibleItemsCount", hiddenItemsCount: "hiddenItemsCount" }, host: { listeners: { "keyup": "_keyUpHandler($event)" }, properties: { "class": "this._initialClass" } }, providers: [
+OverflowLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: OverflowLayoutService }, { token: i1.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OverflowLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: { maxVisibleItems: "maxVisibleItems", showMorePosition: "showMorePosition", reverseHiddenItems: "reverseHiddenItems", enableKeyboardNavigation: "enableKeyboardNavigation" }, outputs: { visibleItemsCount: "visibleItemsCount", hiddenItemsCount: "hiddenItemsCount" }, host: { listeners: { "keyup": "_keyUpHandler($event)" }, properties: { "class": "this._initialClass" } }, providers: [
         {
             provide: FD_OVERFLOW_CONTAINER,
             useExisting: OverflowLayoutComponent
-        }
-    ], queries: [{ propertyName: "_moreButton", first: true, predicate: FD_OVERFLOW_EXPAND, descendants: true }, { propertyName: "_items", predicate: FD_OVERFLOW_ITEM_REF }, { propertyName: "_overflowItems", predicate: FD_OVERFLOW_ITEM }], viewQueries: [{ propertyName: "_itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true }, { propertyName: "_layoutContainer", first: true, predicate: ["layoutContainer"], descendants: true }, { propertyName: "_showMoreContainer", first: true, predicate: ["showMoreContainer"], descendants: true }, { propertyName: "_visibleItems", predicate: OverflowLayoutItemContainerDirective, descendants: true }], ngImport: i0, template: "<div class=\"fd-overflow-layout__items-container\" #layoutContainer>\n    <div class=\"fd-overflow-layout__items\" #itemsWrapper>\n        <ng-container *ngFor=\"let item of _allItems; trackBy: _itemsTrackFn\">\n            <div fdOverflowLayoutItemContainer>\n                <ng-container *fdOverflowItemContainerRef>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item.hidden, index: item.index }\"\n                    ></ng-template>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<div class=\"fd-overflow-layout__more\" *ngIf=\"_showMore\" #showMoreContainer>\n    <ng-template #defaultShowMore>\n        <fd-popover\n            (isOpenChange)=\"_onPopoverStateChange($event)\"\n            placement=\"bottom\"\n            [focusTrapped]=\"true\"\n            [focusAutoCapture]=\"true\"\n            [maxWidth]=\"312\"\n        >\n            <fd-popover-control>\n                <button\n                    fd-button\n                    [fdMenu]=\"true\"\n                    i18n=\"@overflowLayout.moreItemsButton|Overflow Layout more button text\"\n                    fdType=\"transparent\"\n                >\n                    {{ _hiddenItems.length }} more\n                </button>\n            </fd-popover-control>\n            <fd-popover-body>\n                <div fdOverflowLayoutPopoverContent [items]=\"_hiddenItems\">\n                    <ng-container *ngFor=\"let item of _hiddenItems\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"item.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item.hidden, index: item.index }\"\n                        ></ng-template>\n                    </ng-container>\n                </div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-template>\n    <ng-template\n        [ngTemplateOutlet]=\"_moreButton?.templateRef || defaultShowMore\"\n        [ngTemplateOutletContext]=\"{ $implicit: _hiddenItems }\"\n    ></ng-template>\n</div>\n", styles: [".fd-overflow-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:100%}.fd-overflow-layout:before,.fd-overflow-layout:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center}.fd-overflow-layout__items:before,.fd-overflow-layout__items:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__more{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center}.fd-overflow-layout__more:before,.fd-overflow-layout__more:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:0;flex:1 auto}.fd-overflow-layout__items-container:before,.fd-overflow-layout__items-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__popover-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:block;white-space:normal}.fd-overflow-layout__popover-container:before,.fd-overflow-layout__popover-container:after{box-sizing:inherit;font-size:inherit}\n"], components: [{ type: i2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { type: i2.PopoverControlComponent, selector: "fd-popover-control" }, { type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { type: i2.PopoverBodyComponent, selector: "fd-popover-body" }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: OverflowLayoutItemContainerDirective, selector: "[fdOverflowLayoutItemContainer]" }, { type: OverflowItemContainerRefDirective, selector: "[fdOverflowItemContainerRef]" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: OverflowLayoutPopoverContentDirective, selector: "[fdOverflowLayoutPopoverContent]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        },
+        OverflowLayoutService
+    ], queries: [{ propertyName: "_moreButton", first: true, predicate: FD_OVERFLOW_EXPAND, descendants: true }, { propertyName: "_items", predicate: FD_OVERFLOW_ITEM_REF, descendants: true }, { propertyName: "_overflowItems", predicate: FD_OVERFLOW_ITEM, descendants: true }], viewQueries: [{ propertyName: "_itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true }, { propertyName: "_layoutContainer", first: true, predicate: ["layoutContainer"], descendants: true }, { propertyName: "_showMoreContainer", first: true, predicate: ["showMoreContainer"], descendants: true }, { propertyName: "_visibleItems", predicate: OverflowLayoutItemContainerDirective, descendants: true }], ngImport: i0, template: "<ng-template [ngIf]=\"showMorePosition === 'left'\">\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n</ng-template>\n\n<div class=\"fd-overflow-layout__items-container\" #layoutContainer>\n    <div class=\"fd-overflow-layout__items\" #itemsWrapper>\n        <ng-container *ngFor=\"let item of _allItems; trackBy: _itemsTrackFn\">\n            <div fdOverflowLayoutItemContainer [first]=\"item.first\" [last]=\"item.last\" [softHidden]=\"item.softHidden\">\n                <ng-container *fdOverflowItemContainerRef>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: item.hidden,\n                            index: item.index,\n                            first: item.first,\n                            last: item.last\n                        }\"\n                    ></ng-template>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"showMorePosition === 'right'\">\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n</ng-template>\n\n<ng-template #showMore>\n    <div class=\"fd-overflow-layout__more\" [style.display]=\"_showMore ? 'block' : 'none'\" #showMoreContainer>\n        <ng-template #defaultShowMore>\n            <fd-popover\n                (isOpenChange)=\"_onPopoverStateChange($event)\"\n                placement=\"bottom\"\n                [focusTrapped]=\"true\"\n                [focusAutoCapture]=\"true\"\n                [maxWidth]=\"312\"\n            >\n                <fd-popover-control>\n                    <button\n                        fd-button\n                        [fdMenu]=\"true\"\n                        i18n=\"@overflowLayout.moreItemsButton|Overflow Layout more button text\"\n                        fdType=\"transparent\"\n                    >\n                        {{ _hiddenItems.length }} more\n                    </button>\n                </fd-popover-control>\n                <fd-popover-body>\n                    <div fdOverflowLayoutPopoverContent [items]=\"_hiddenItems\">\n                        <ng-container *ngFor=\"let item of _hiddenItems\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"item.templateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: item.hidden,\n                                    index: item.index,\n                                    first: item.first,\n                                    last: item.last\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n                    </div>\n                </fd-popover-body>\n            </fd-popover>\n        </ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"_moreButton?.templateRef || defaultShowMore\"\n            [ngTemplateOutletContext]=\"{ $implicit: _hiddenItems }\"\n        ></ng-template>\n    </div>\n</ng-template>\n", styles: [".fd-overflow-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:100%}.fd-overflow-layout:before,.fd-overflow-layout:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center}.fd-overflow-layout__items:before,.fd-overflow-layout__items:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__more{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center}.fd-overflow-layout__more:before,.fd-overflow-layout__more:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:0;flex:1 auto}.fd-overflow-layout__items-container:before,.fd-overflow-layout__items-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__popover-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:block;white-space:normal}.fd-overflow-layout__popover-container:before,.fd-overflow-layout__popover-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__item--soft-hidden{opacity:0!important}\n"], components: [{ type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { type: i3.PopoverBodyComponent, selector: "fd-popover-body" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: OverflowLayoutItemContainerDirective, selector: "[fdOverflowLayoutItemContainer]", inputs: ["last", "first", "softHidden"] }, { type: OverflowItemContainerRefDirective, selector: "[fdOverflowItemContainerRef]" }, { type: OverflowLayoutPopoverContentDirective, selector: "[fdOverflowLayoutPopoverContent]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-overflow-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: FD_OVERFLOW_CONTAINER,
                             useExisting: OverflowLayoutComponent
-                        }
-                    ], template: "<div class=\"fd-overflow-layout__items-container\" #layoutContainer>\n    <div class=\"fd-overflow-layout__items\" #itemsWrapper>\n        <ng-container *ngFor=\"let item of _allItems; trackBy: _itemsTrackFn\">\n            <div fdOverflowLayoutItemContainer>\n                <ng-container *fdOverflowItemContainerRef>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: item.hidden, index: item.index }\"\n                    ></ng-template>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<div class=\"fd-overflow-layout__more\" *ngIf=\"_showMore\" #showMoreContainer>\n    <ng-template #defaultShowMore>\n        <fd-popover\n            (isOpenChange)=\"_onPopoverStateChange($event)\"\n            placement=\"bottom\"\n            [focusTrapped]=\"true\"\n            [focusAutoCapture]=\"true\"\n            [maxWidth]=\"312\"\n        >\n            <fd-popover-control>\n                <button\n                    fd-button\n                    [fdMenu]=\"true\"\n                    i18n=\"@overflowLayout.moreItemsButton|Overflow Layout more button text\"\n                    fdType=\"transparent\"\n                >\n                    {{ _hiddenItems.length }} more\n                </button>\n            </fd-popover-control>\n            <fd-popover-body>\n                <div fdOverflowLayoutPopoverContent [items]=\"_hiddenItems\">\n                    <ng-container *ngFor=\"let item of _hiddenItems\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"item.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item.hidden, index: item.index }\"\n                        ></ng-template>\n                    </ng-container>\n                </div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-template>\n    <ng-template\n        [ngTemplateOutlet]=\"_moreButton?.templateRef || defaultShowMore\"\n        [ngTemplateOutletContext]=\"{ $implicit: _hiddenItems }\"\n    ></ng-template>\n</div>\n", styles: [".fd-overflow-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:100%}.fd-overflow-layout:before,.fd-overflow-layout:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center}.fd-overflow-layout__items:before,.fd-overflow-layout__items:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__more{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center}.fd-overflow-layout__more:before,.fd-overflow-layout__more:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:0;flex:1 auto}.fd-overflow-layout__items-container:before,.fd-overflow-layout__items-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__popover-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:block;white-space:normal}.fd-overflow-layout__popover-container:before,.fd-overflow-layout__popover-container:after{box-sizing:inherit;font-size:inherit}\n"] }]
+                        },
+                        OverflowLayoutService
+                    ], template: "<ng-template [ngIf]=\"showMorePosition === 'left'\">\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n</ng-template>\n\n<div class=\"fd-overflow-layout__items-container\" #layoutContainer>\n    <div class=\"fd-overflow-layout__items\" #itemsWrapper>\n        <ng-container *ngFor=\"let item of _allItems; trackBy: _itemsTrackFn\">\n            <div fdOverflowLayoutItemContainer [first]=\"item.first\" [last]=\"item.last\" [softHidden]=\"item.softHidden\">\n                <ng-container *fdOverflowItemContainerRef>\n                    <ng-template\n                        [ngTemplateOutlet]=\"item.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: item.hidden,\n                            index: item.index,\n                            first: item.first,\n                            last: item.last\n                        }\"\n                    ></ng-template>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"showMorePosition === 'right'\">\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n</ng-template>\n\n<ng-template #showMore>\n    <div class=\"fd-overflow-layout__more\" [style.display]=\"_showMore ? 'block' : 'none'\" #showMoreContainer>\n        <ng-template #defaultShowMore>\n            <fd-popover\n                (isOpenChange)=\"_onPopoverStateChange($event)\"\n                placement=\"bottom\"\n                [focusTrapped]=\"true\"\n                [focusAutoCapture]=\"true\"\n                [maxWidth]=\"312\"\n            >\n                <fd-popover-control>\n                    <button\n                        fd-button\n                        [fdMenu]=\"true\"\n                        i18n=\"@overflowLayout.moreItemsButton|Overflow Layout more button text\"\n                        fdType=\"transparent\"\n                    >\n                        {{ _hiddenItems.length }} more\n                    </button>\n                </fd-popover-control>\n                <fd-popover-body>\n                    <div fdOverflowLayoutPopoverContent [items]=\"_hiddenItems\">\n                        <ng-container *ngFor=\"let item of _hiddenItems\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"item.templateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: item.hidden,\n                                    index: item.index,\n                                    first: item.first,\n                                    last: item.last\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n                    </div>\n                </fd-popover-body>\n            </fd-popover>\n        </ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"_moreButton?.templateRef || defaultShowMore\"\n            [ngTemplateOutletContext]=\"{ $implicit: _hiddenItems }\"\n        ></ng-template>\n    </div>\n</ng-template>\n", styles: [".fd-overflow-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:100%}.fd-overflow-layout:before,.fd-overflow-layout:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center}.fd-overflow-layout__items:before,.fd-overflow-layout__items:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__more{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center}.fd-overflow-layout__more:before,.fd-overflow-layout__more:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:0;flex:1 auto}.fd-overflow-layout__items-container:before,.fd-overflow-layout__items-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__popover-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:block;white-space:normal}.fd-overflow-layout__popover-container:before,.fd-overflow-layout__popover-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__item--soft-hidden{opacity:0!important}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i1.RtlService, decorators: [{
+        return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: OverflowLayoutService }, { type: i1.RtlService, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { maxVisibleItems: [{
                 type: Input
+            }], showMorePosition: [{
+                type: Input
+            }], reverseHiddenItems: [{
+                type: Input
+            }], enableKeyboardNavigation: [{
+                type: Input
             }], visibleItemsCount: [{
                 type: Output
             }], hiddenItemsCount: [{
                 type: Output
             }], _items: [{
                 type: ContentChildren,
-                args: [FD_OVERFLOW_ITEM_REF]
+                args: [FD_OVERFLOW_ITEM_REF, { descendants: true }]
             }], _moreButton: [{
                 type: ContentChild,
                 args: [FD_OVERFLOW_EXPAND]
             }], _overflowItems: [{
                 type: ContentChildren,
-                args: [FD_OVERFLOW_ITEM]
+                args: [FD_OVERFLOW_ITEM, { descendants: true }]
             }], _visibleItems: [{
                 type: ViewChildren,
                 args: [OverflowLayoutItemContainerDirective]
@@ -445,10 +634,19 @@ class OverflowItemRefDirective {
     /** @hidden */
     constructor(templateRef) {
         this.templateRef = templateRef;
-        /**
-         * Whether the item is hidden.
-         */
-        this.hidden = false;
+        this._hidden = false;
+        /** Whether the item is softly hidden. */
+        this.softHidden = true;
+    }
+    /**
+     * Whether the item is hidden.
+     */
+    get hidden() {
+        return this._hidden;
+    }
+    set hidden(value) {
+        this._hidden = value;
+        this.overflowItem.hiddenChange.emit(value);
     }
     /** @hidden */
     static ngTemplateContextGuard(dir, ctx) {
@@ -473,7 +671,7 @@ class OverflowItemRefDirective {
     }
 }
 OverflowItemRefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowItemRefDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-OverflowItemRefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", providers: [
+OverflowItemRefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: { item: ["fdOverflowItemRef", "item"] }, providers: [
         {
             provide: FD_OVERFLOW_ITEM_REF,
             useExisting: OverflowItemRefDirective
@@ -490,7 +688,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { item: [{
+                type: Input,
+                args: ['fdOverflowItemRef']
+            }] } });
 
 /**
  * Structural directive which is responsible for rendering the "More" button and handling further logic.
@@ -506,7 +707,7 @@ class OverflowExpandDirective {
     }
 }
 OverflowExpandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowExpandDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-OverflowExpandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: OverflowExpandDirective, selector: "[fdOverflowExpand]", providers: [
+OverflowExpandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: { fdOverflowExpandItems: "fdOverflowExpandItems" }, providers: [
         {
             provide: FD_OVERFLOW_EXPAND,
             useExisting: OverflowExpandDirective
@@ -523,7 +724,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { fdOverflowExpandItems: [{
+                type: Input
+            }] } });
 
 /**
  * Directive to mark element as part of for Overflow Layout Component items.
@@ -536,6 +739,10 @@ class OverflowLayoutItemDirective {
         this._overflowItemRef = _overflowItemRef;
         /** Whether the item should be focusable. */
         this.focusable = false;
+        /**
+         * Event emitted when `hidden` property has been changed.
+         */
+        this.hiddenChange = new EventEmitter();
         /** @hidden */
         this._forceVisibility = false;
     }
@@ -557,6 +764,9 @@ class OverflowLayoutItemDirective {
         var _a;
         return ((_a = this._overflowItemRef) === null || _a === void 0 ? void 0 : _a.hidden) === true;
     }
+    set hidden(value) {
+        this.hiddenChange.emit(value);
+    }
     /** @hidden */
     get _tabindex() {
         return this.focusable ? 0 : -1;
@@ -586,7 +796,7 @@ class OverflowLayoutItemDirective {
     }
 }
 OverflowLayoutItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutItemDirective, deps: [{ token: OverflowLayoutComponent }, { token: i0.ElementRef }, { token: FD_OVERFLOW_ITEM_REF, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-OverflowLayoutItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: { focusable: "focusable", forceVisibility: "forceVisibility" }, host: { listeners: { "focus": "onFocus()" }, properties: { "attr.tabindex": "this._tabindex" } }, providers: [
+OverflowLayoutItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: { focusable: "focusable", forceVisibility: "forceVisibility" }, outputs: { hiddenChange: "hiddenChange" }, host: { listeners: { "focus": "onFocus()" }, properties: { "attr.tabindex": "this._tabindex" } }, providers: [
         {
             provide: FD_OVERFLOW_ITEM,
             useExisting: OverflowLayoutItemDirective
@@ -616,6 +826,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 type: Input
             }], forceVisibility: [{
                 type: Input
+            }], hiddenChange: [{
+                type: Output
             }], _tabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -668,5 +880,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FD_OVERFLOW_EXPAND, FD_OVERFLOW_ITEM, FD_OVERFLOW_ITEM_REF, OverflowExpandDirective, OverflowItemContainerRefDirective, OverflowItemRefDirective, OverflowLayoutComponent, OverflowLayoutItemDirective, OverflowLayoutModule, OverflowLayoutPopoverContentDirective };
+export { FD_OVERFLOW_CONTAINER, FD_OVERFLOW_EXPAND, FD_OVERFLOW_ITEM, FD_OVERFLOW_ITEM_REF, OverflowExpandDirective, OverflowItemContainerRefDirective, OverflowItemRefDirective, OverflowLayoutComponent, OverflowLayoutItemDirective, OverflowLayoutListeningResult, OverflowLayoutModule, OverflowLayoutPopoverContentDirective, OverflowLayoutService };
 //# sourceMappingURL=fundamental-ngx-core-overflow-layout.mjs.map