@fundamental-ngx/core 0.35.1 → 0.35.2-rc.2

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

@@ -0,0 +1,660 @@
+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 { CommonModule } from '@angular/common';
+import * as i2 from '@fundamental-ngx/core/popover';
+import { PopoverModule } from '@fundamental-ngx/core/popover';
+import * as i3 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';
+
+/**
+ * Directive to hide component without actual destroying of the component instance.
+ */
+class OverflowItemContainerRefDirective {
+    /** @hidden */
+    constructor(_templateRef, _viewContainerRef, _elmRef) {
+        this._templateRef = _templateRef;
+        this._viewContainerRef = _viewContainerRef;
+        this._elmRef = _elmRef;
+        /** @hidden */
+        this._detached = false;
+        /** @hidden */
+        this._hidden = false;
+        // Create embedded view right away and manipulate its visibility later.
+        this._viewContainerRef.createEmbeddedView(this._templateRef);
+    }
+    /**
+     * Shows or hides element without destroying the view itself.
+     * @param value
+     */
+    set hidden(value) {
+        if (this._hidden === value) {
+            return;
+        }
+        this._hidden = value;
+        if (value && !this._detached) {
+            this._viewRef = this._viewContainerRef.detach();
+            this._detached = true;
+        }
+        else if (!value && this._viewRef && this._detached) {
+            this._viewRef = this._viewContainerRef.insert(this._viewRef);
+            this._detached = false;
+        }
+    }
+}
+OverflowItemContainerRefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowItemContainerRefDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+OverflowItemContainerRefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: OverflowItemContainerRefDirective, selector: "[fdOverflowItemContainerRef]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowItemContainerRefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdOverflowItemContainerRef]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }]; } });
+
+class OverflowLayoutItemContainerDirective {
+    /** @hidden */
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        /** @hidden */
+        this._initialClass = 'fd-overflow-layout__item';
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutItemContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdOverflowLayoutItemContainer]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { _initialClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], containerRef: [{
+                type: ContentChild,
+                args: [OverflowItemContainerRefDirective]
+            }] } });
+
+const FD_OVERFLOW_CONTAINER = new InjectionToken('FdOverflowContainer');
+
+const FD_OVERFLOW_EXPAND = new InjectionToken('FdOverflowLayoutExpand');
+
+const FD_OVERFLOW_ITEM_REF = new InjectionToken('OverflowLayoutItemRef');
+
+const FD_OVERFLOW_ITEM = new InjectionToken('FdOverflowItem');
+
+/**
+ * Directive to wrap Overlay Layout "More" popover content.
+ * Used to apply keyboard navigation through the items.
+ */
+class OverflowLayoutPopoverContentDirective {
+    /** @hidden */
+    constructor(_overflowContainer) {
+        this._overflowContainer = _overflowContainer;
+        /** @hidden */
+        this._initialClass = 'fd-overflow-layout__popover-container';
+        this._overflowContainer?.registerPopoverContent(this);
+    }
+    /**
+     * Array of hidden items.
+     */
+    set items(value) {
+        this._items = value;
+        this._keyboardEventsManager = new FocusKeyManager(this._items.filter((item) => item.overflowItem.focusable).map((item) => item.overflowItem))
+            .withWrap()
+            .withHorizontalOrientation('ltr');
+    }
+    /** @hidden */
+    keyUpHandler(event) {
+        if (KeyUtil.isKeyCode(event, TAB)) {
+            const index = this._items.findIndex((item) => 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);
+        }
+    }
+    /**
+     * Focuses on the first tabbable element inside directive's element.
+     */
+    focusFirstTabbableElement() {
+        this._keyboardEventsManager.setActiveItem(0);
+    }
+}
+OverflowLayoutPopoverContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutPopoverContentDirective, deps: [{ token: FD_OVERFLOW_CONTAINER }], target: i0.ɵɵFactoryTarget.Directive });
+OverflowLayoutPopoverContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: OverflowLayoutPopoverContentDirective, selector: "[fdOverflowLayoutPopoverContent]", inputs: { items: "items" }, host: { listeners: { "keyup": "keyUpHandler($event)" }, properties: { "class": "this._initialClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutPopoverContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdOverflowLayoutPopoverContent]'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FD_OVERFLOW_CONTAINER]
+                }] }]; }, propDecorators: { items: [{
+                type: Input
+            }], _initialClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], keyUpHandler: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
+class OverflowLayoutComponent {
+    /** @hidden */
+    constructor(_cdr, _zone, _elRef, _rtlService) {
+        this._cdr = _cdr;
+        this._zone = _zone;
+        this._elRef = _elRef;
+        this._rtlService = _rtlService;
+        /**
+         * Event, triggered when amount of visible items has been changed.
+         */
+        this.visibleItemsCount = new EventEmitter();
+        /**
+         * Event, triggered when amount of hidden items has been changed.
+         */
+        this.hiddenItemsCount = new EventEmitter();
+        /** @hidden */
+        this._allItems = [];
+        /** @hidden */
+        this._hiddenItems = [];
+        /** @hidden */
+        this._showMore = false;
+        /** @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()));
+    }
+    /**
+     * Maximum amount of visible items.
+     */
+    set maxVisibleItems(value) {
+        if (value === this._maxVisibleItems) {
+            return;
+        }
+        this._maxVisibleItems = value;
+        this.triggerRecalculation();
+    }
+    get maxVisibleItems() {
+        return this._maxVisibleItems;
+    }
+    /**
+     * Triggers layout recalculation of the items.
+     */
+    triggerRecalculation() {
+        this._fillTrigger$.next();
+    }
+    /** @hidden */
+    ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
+    /** @hidden */
+    _keyUpHandler(event) {
+        if (KeyUtil.isKeyCode(event, TAB)) {
+            const index = this._allItems.findIndex((item) => item.overflowItem?.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.
+     */
+    setFocusedElement(element) {
+        const index = this._overflowItems.toArray().findIndex((item) => item === element);
+        if (index !== -1) {
+            this._keyboardEventsManager.setActiveItem(index);
+        }
+    }
+    /**
+     * Registers popover content directive for main component.
+     * @param content {OverflowPopoverContent} directive
+     */
+    registerPopoverContent(content) {
+        this._overflowPopoverContent = content;
+    }
+    /** @hidden */
+    _itemsTrackFn(_, item) {
+        return item.templateRef;
+    }
+    /** @hidden */
+    _onPopoverStateChange(opened) {
+        if (opened) {
+            this._overflowPopoverContent?.focusFirstTabbableElement();
+        }
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        this._fitVisibleItems();
+        this._setFocusKeyManager();
+        this._listenToChanges();
+        this._subscribeToRtl();
+    }
+    /** @hidden */
+    _listenToChanges() {
+        this._subscription.add(this._items.changes.subscribe(() => {
+            setTimeout(() => {
+                this._fitVisibleItems();
+            });
+        }));
+        this._listenToSizeChanges(this._elRef.nativeElement, this._itemsWrapper.nativeElement);
+    }
+    /** @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._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;
+            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;
+            }
+            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() {
+        this._dir = this._rtlService?.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;
+        }
+        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: [
+        {
+            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 });
+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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i1.RtlService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { maxVisibleItems: [{
+                type: Input
+            }], visibleItemsCount: [{
+                type: Output
+            }], hiddenItemsCount: [{
+                type: Output
+            }], _items: [{
+                type: ContentChildren,
+                args: [FD_OVERFLOW_ITEM_REF]
+            }], _moreButton: [{
+                type: ContentChild,
+                args: [FD_OVERFLOW_EXPAND]
+            }], _overflowItems: [{
+                type: ContentChildren,
+                args: [FD_OVERFLOW_ITEM]
+            }], _visibleItems: [{
+                type: ViewChildren,
+                args: [OverflowLayoutItemContainerDirective]
+            }], _itemsWrapper: [{
+                type: ViewChild,
+                args: ['itemsWrapper']
+            }], _layoutContainer: [{
+                type: ViewChild,
+                args: ['layoutContainer']
+            }], _showMoreContainer: [{
+                type: ViewChild,
+                args: ['showMoreContainer']
+            }], _initialClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], _keyUpHandler: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
+/**
+ * Structural directive which is used to pass the context of the item to the template engine.
+ */
+class OverflowItemRefDirective {
+    /** @hidden */
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        /**
+         * Whether the item is hidden.
+         */
+        this.hidden = false;
+    }
+    /** @hidden */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    /**
+     * Sets the element reference of the `fdOverflowLayoutItem` directive.`
+     * @param elmRef
+     */
+    setElementRef(elmRef) {
+        if (this.elementRef) {
+            return;
+        }
+        this.elementRef = elmRef;
+    }
+    /**
+     * Sets the `fdOverflowLayoutItem` directive.
+     * @param item
+     */
+    setOverflowItem(item) {
+        this.overflowItem = item;
+    }
+}
+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: [
+        {
+            provide: FD_OVERFLOW_ITEM_REF,
+            useExisting: OverflowItemRefDirective
+        }
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowItemRefDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdOverflowItemRef]',
+                    providers: [
+                        {
+                            provide: FD_OVERFLOW_ITEM_REF,
+                            useExisting: OverflowItemRefDirective
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Structural directive which is responsible for rendering the "More" button and handling further logic.
+ */
+class OverflowExpandDirective {
+    /** @hidden */
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    /** @hidden */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+}
+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: [
+        {
+            provide: FD_OVERFLOW_EXPAND,
+            useExisting: OverflowExpandDirective
+        }
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowExpandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdOverflowExpand]',
+                    providers: [
+                        {
+                            provide: FD_OVERFLOW_EXPAND,
+                            useExisting: OverflowExpandDirective
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Directive to mark element as part of for Overflow Layout Component items.
+ */
+class OverflowLayoutItemDirective {
+    /** @hidden */
+    constructor(_overflowContainer, elmRef, _overflowItemRef) {
+        this._overflowContainer = _overflowContainer;
+        this.elmRef = elmRef;
+        this._overflowItemRef = _overflowItemRef;
+        /** Whether the item should be focusable. */
+        this.focusable = false;
+        /** @hidden */
+        this._forceVisibility = false;
+    }
+    /** Whether to force the visibility of the item. */
+    set forceVisibility(value) {
+        if (value === this._forceVisibility) {
+            return;
+        }
+        this._forceVisibility = value;
+        this._overflowContainer.triggerRecalculation();
+    }
+    get forceVisibility() {
+        return this._forceVisibility;
+    }
+    /**
+     * Whether the item is hidden.
+     */
+    get hidden() {
+        return this._overflowItemRef?.hidden === true;
+    }
+    /** @hidden */
+    get _tabindex() {
+        return this.focusable ? 0 : -1;
+    }
+    /** @hidden */
+    onFocus() {
+        this._overflowContainer.setFocusedElement(this);
+    }
+    /** @hidden */
+    ngOnInit() {
+        this._overflowItemRef?.setElementRef(this.elmRef);
+        this._overflowItemRef?.setOverflowItem(this);
+    }
+    /**
+     * Focuses connected to the DOM element.
+     */
+    focus() {
+        // Since we use detach() method of ViewContainerRef to remove elements from the visible list,
+        // we need to check that element is connected to the DOM.
+        this.elmRef.nativeElement.isConnected
+            ? this.elmRef.nativeElement.focus()
+            : this._overflowItemRef?.elementRef.nativeElement.isConnected
+                ? this._overflowItemRef?.elementRef.nativeElement.focus()
+                : this._overflowItemRef?.overflowItem.elmRef.nativeElement.focus();
+    }
+}
+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: [
+        {
+            provide: FD_OVERFLOW_ITEM,
+            useExisting: OverflowLayoutItemDirective
+        }
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdOverflowLayoutItem]',
+                    providers: [
+                        {
+                            provide: FD_OVERFLOW_ITEM,
+                            useExisting: OverflowLayoutItemDirective
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: OverflowLayoutComponent }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }, {
+                    type: Inject,
+                    args: [FD_OVERFLOW_ITEM_REF]
+                }] }]; }, propDecorators: { focusable: [{
+                type: Input
+            }], forceVisibility: [{
+                type: Input
+            }], _tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }] } });
+
+class OverflowLayoutModule {
+}
+OverflowLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OverflowLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutModule, declarations: [OverflowLayoutComponent,
+        OverflowItemRefDirective,
+        OverflowExpandDirective,
+        OverflowLayoutItemDirective,
+        OverflowItemContainerRefDirective,
+        OverflowLayoutPopoverContentDirective,
+        OverflowLayoutItemContainerDirective], imports: [CommonModule, PopoverModule, ButtonModule], exports: [OverflowLayoutComponent,
+        OverflowItemRefDirective,
+        OverflowExpandDirective,
+        OverflowLayoutItemDirective,
+        OverflowItemContainerRefDirective,
+        OverflowLayoutPopoverContentDirective] });
+OverflowLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutModule, imports: [[CommonModule, PopoverModule, ButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: OverflowLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PopoverModule, ButtonModule],
+                    exports: [
+                        OverflowLayoutComponent,
+                        OverflowItemRefDirective,
+                        OverflowExpandDirective,
+                        OverflowLayoutItemDirective,
+                        OverflowItemContainerRefDirective,
+                        OverflowLayoutPopoverContentDirective
+                    ],
+                    declarations: [
+                        OverflowLayoutComponent,
+                        OverflowItemRefDirective,
+                        OverflowExpandDirective,
+                        OverflowLayoutItemDirective,
+                        OverflowItemContainerRefDirective,
+                        OverflowLayoutPopoverContentDirective,
+                        OverflowLayoutItemContainerDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FD_OVERFLOW_EXPAND, FD_OVERFLOW_ITEM, FD_OVERFLOW_ITEM_REF, OverflowExpandDirective, OverflowItemContainerRefDirective, OverflowItemRefDirective, OverflowLayoutComponent, OverflowLayoutItemDirective, OverflowLayoutModule, OverflowLayoutPopoverContentDirective };
+//# sourceMappingURL=fundamental-ngx-core-overflow-layout.mjs.map