@fundamental-ngx/core 0.40.4-rc.6 → 0.40.5

package/fesm2015/fundamental-ngx-core-toolbar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, HostBinding, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, SkipSelf, Inject, ViewChild, ContentChildren, forwardRef, ContentChild, isDevMode, NgModule } from '@angular/core';
+import { Directive, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, SkipSelf, Inject, Input, ViewChild, ContentChildren, forwardRef, ContentChild, HostBinding, isDevMode, NgModule } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@fundamental-ngx/core/button';
@@ -9,108 +9,56 @@ import { PopoverModule } from '@fundamental-ngx/core/popover';
 import { __decorate, __metadata } from 'tslib';
 import { DYNAMIC_PAGE_HEADER_TOKEN } from '@fundamental-ngx/core/shared';
 import * as i2 from '@fundamental-ngx/cdk/utils';
-import { OVERFLOW_PRIORITY_SCORE, DestroyedService, applyCssClass, DynamicPortalComponent } from '@fundamental-ngx/cdk/utils';
-import { BehaviorSubject, combineLatest, map, startWith, takeUntil } from 'rxjs';
+import { OVERFLOW_PRIORITY_SCORE, DestroyedService, applyCssClass } from '@fundamental-ngx/cdk/utils';
+import { of, Subscription, fromEvent, BehaviorSubject } from 'rxjs';
+import { filter, debounceTime, distinctUntilChanged, takeUntil, delay } from 'rxjs/operators';
 import { TitleToken } from '@fundamental-ngx/core/title';
 import * as i1 from '@fundamental-ngx/core/content-density';
 import { contentDensityObserverProviders, ContentDensityMode, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
 
-class ToolbarItem {
-}
-
-class ToolbarSpacerDirective {
-    constructor() {
-        /** Determines the width of spacer when fixed property is set to true
-         * Allowed values: absolute and relative metrics
-         * Default value: 0px
-         */
-        this.width = '0px';
-        /** Property allows user to pass additional class
-         */
-        this.class = '';
-        /** Determines if spacer should take only size taken from width property
-         * Default value: false
-         * Default behaviour: spacer takes remaining space automatically
-         */
-        this.fixed = false;
-    }
+class ToolbarItemDirective {
     /** @hidden */
-    get css() {
-        return `fd-toolbar__spacer ${this.fixed ? 'fd-toolbar__spacer--fixed' : ''} ${this.class}`;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
     }
 }
-ToolbarSpacerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ToolbarSpacerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: { width: "width", class: "class", fixed: "fixed" }, host: { properties: { "style.width": "this.width", "attr.class": "this.css" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarSpacerDirective, decorators: [{
+ToolbarItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ToolbarItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: ToolbarItemDirective, selector: "[fd-toolbar-item]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarItemDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'fd-toolbar-spacer'
-                }]
-        }], propDecorators: { width: [{
-                type: HostBinding,
-                args: ['style.width']
-            }, {
-                type: Input
-            }], class: [{
-                type: Input
-            }], fixed: [{
-                type: Input
-            }], css: [{
-                type: HostBinding,
-                args: ['attr.class']
-            }] } });
-
-class ToolbarSeparatorComponent {
-}
-ToolbarSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolbarSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator", host: { classAttribute: "fd-toolbar__separator" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fd-toolbar-separator',
-                    template: '',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'fd-toolbar__separator'
-                    }
+                    selector: '[fd-toolbar-item]'
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
 const ELEMENT_MARGIN = 8;
 const OVERFLOW_SPACE = 50 + 2 * ELEMENT_MARGIN;
 const MAX_CONTENT_SIZE = 99999999;
 class ToolbarComponent {
-    /** Determines if overflow button should be visible
-     * Default value: false
-     */
-    set shouldOverflow(val) {
-        this._shouldOverflow = val;
-        this.shouldOverflow$.next(val);
-    }
-    get shouldOverflow() {
-        return this._shouldOverflow;
-    }
     /** @hidden */
-    set titleComponent(title) {
-        this._titleComponent$.next(title);
+    get _toolbarWidth() {
+        return this.toolbar.nativeElement.clientWidth - OVERFLOW_SPACE;
     }
-    get titleComponent() {
-        return this._titleComponent$.value;
+    /** @hidden */
+    get _overflowBody() {
+        return this.overflowBody && this.overflowBody.nativeElement;
     }
     /** @hidden */
-    get _toolbarWidth() {
-        return this.toolbar.nativeElement.clientWidth - OVERFLOW_SPACE;
+    get _toolbar() {
+        return this.toolbar.nativeElement;
     }
     /** @hidden */
-    constructor(_cd, _contentDensityObserver, _destroy$, resizeObserverService, ngZone, _dynamicPageHeader) {
+    constructor(_cd, _renderer, _contentDensityObserver, _destroy$, _dynamicPageHeader) {
         this._cd = _cd;
+        this._renderer = _renderer;
         this._contentDensityObserver = _contentDensityObserver;
         this._destroy$ = _destroy$;
-        this.resizeObserverService = resizeObserverService;
-        this.ngZone = ngZone;
         this._dynamicPageHeader = _dynamicPageHeader;
+        /** Determines if overflow button should be visible
+         * Default value: false
+         */
+        this.shouldOverflow = false;
         /** Determines the type of toolbar
          * Available options: 'solid' | 'transparent' | 'auto' | 'info'
          * Default value: 'solid'
@@ -131,75 +79,36 @@ class ToolbarComponent {
         /** Tabindex of the toolbar element, to be used when fdType="info" */
         this.tabindex = -1;
         /** @hidden */
-        this.overflownItems = [];
+        this.titleComponent = null;
         /** @hidden */
-        this._titleComponent$ = new BehaviorSubject(null);
+        this.overflowVisibility = of(false);
         /** @hidden */
-        this._refreshOverflow$ = new BehaviorSubject(undefined);
+        this._subscriptions = new Subscription();
         /** @hidden */
-        this._shouldOverflow = false;
+        this._overflowElements = [];
         /** @hidden */
-        this._initialised = false;
+        this._normalElements = [];
+        /** @hidden */
+        this._disappearElements = [];
         /** @hidden */
-        this.shouldOverflow$ = new BehaviorSubject(false);
+        this._initialised = false;
         _contentDensityObserver.subscribe();
     }
     /** @hidden */
+    ngOnInit() {
+        fromEvent(window, 'resize')
+            .pipe(filter(() => this.shouldOverflow), debounceTime(50), distinctUntilChanged(), takeUntil(this._destroy$))
+            .subscribe(() => this._onResize());
+    }
+    /** @hidden */
     ngAfterViewInit() {
-        this.overflowItems$ = combineLatest([
-            this.resizeObserverService.observe(this.toolbar.nativeElement).pipe(map(() => this._toolbarWidth)),
-            this.toolbarItems.changes.pipe(startWith(this.toolbarItems), map((toolbarItems) => toolbarItems.toArray())),
-            this._titleComponent$.pipe(map((titleComponent) => {
-                var _a;
-                if (!titleComponent) {
-                    return (_a = this.titleElement) === null || _a === void 0 ? void 0 : _a.nativeElement;
-                }
-                return titleComponent.elementRef.nativeElement;
-            })),
-            this.shouldOverflow$,
-            this._refreshOverflow$
-        ]).pipe(map(([toolbarWidth, toolbarItems, titleElement, shouldOverflow]) => {
-            if (shouldOverflow) {
-                const _sortedByPriorityAndGroupItems = this._getSortedByPriorityAndGroupItems(toolbarItems);
-                const overflowItems = [];
-                _sortedByPriorityAndGroupItems.reduce((_contentWidth, toolbarItem) => {
-                    const itemWidth = toolbarItem.width;
-                    const itemPriority = toolbarItem.priority;
-                    const shouldItemBeRemovedByWidth = itemWidth + _contentWidth > toolbarWidth;
-                    const shouldAlwaysBeInOverflow = itemPriority === "always" /* OverflowPriorityEnum.ALWAYS */ || this.forceOverflow;
-                    const shouldNeverBeInOverflow = itemPriority === "never" /* OverflowPriorityEnum.NEVER */;
-                    if ((shouldItemBeRemovedByWidth && !shouldNeverBeInOverflow) || shouldAlwaysBeInOverflow) {
-                        overflowItems.push(toolbarItem);
-                        return shouldAlwaysBeInOverflow ? _contentWidth : MAX_CONTENT_SIZE;
-                    }
-                    else {
-                        return _contentWidth + itemWidth;
-                    }
-                }, (titleElement === null || titleElement === void 0 ? void 0 : titleElement.clientWidth) || 0);
-                // Hide orphans
-                for (const toolbarItem of overflowItems) {
-                    const groupedCollection = this._getGroupedCollection(toolbarItems);
-                    const groupedCollectionPriorities = this._getGroupedCollectionPriority(groupedCollection);
-                    const group = toolbarItem.group;
-                    const itemPriority = toolbarItem.priority;
-                    if (group !== 0 && itemPriority !== "disappear" /* OverflowPriorityEnum.DISAPPEAR */) {
-                        const itemsFromCurrentGroup = this._getElementsFromCurrentGroup(group, groupedCollection, groupedCollectionPriorities) || [];
-                        itemsFromCurrentGroup.forEach((i) => {
-                            if (overflowItems.indexOf(i) === -1) {
-                                overflowItems.push(i);
-                            }
-                        });
-                    }
-                }
-                return overflowItems.sort((a, b) => this._sortPriorities(a.priority, b.priority));
-            }
-            return [];
-        }), takeUntil(this._destroy$));
-        this.overflowItems$.subscribe((items) => {
-            this.overflownItems = items;
-            this._cd.detectChanges();
-        });
+        if (this.shouldOverflow) {
+            of(true)
+                .pipe(delay(5), takeUntil(this._destroy$))
+                .subscribe(() => this._collapseItems());
+        }
         this._initialised = true;
+        this._listenForItemChanges();
         this.buildComponentCssClass();
     }
     /** @hidden */
@@ -214,6 +123,10 @@ class ToolbarComponent {
             this.buildComponentCssClass();
         }
     }
+    /** @hidden */
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
     /** Change detection reference */
     detectChanges() {
         this._cd.detectChanges();
@@ -235,81 +148,117 @@ class ToolbarComponent {
     }
     /** Method triggering collapsible toolbar  */
     updateCollapsibleItems() {
-        this._refreshOverflow$.next();
+        if (this._initialised) {
+            this._onResize();
+        }
     }
-    /** @hidden Get group number with the lowest priority.
-     *  Uses for detecting a group of elements which would be hidden from the toolbar.
-     *  */
-    _getLowestPriorityFromGroup(itemGroup, groupedCollectionPriority) {
-        const priority = groupedCollectionPriority;
-        if (!priority || !OVERFLOW_PRIORITY_SCORE.get(priority[itemGroup])) {
-            return itemGroup;
+    /** @hidden */
+    _onResize() {
+        this._reset();
+        if (this.shouldOverflow) {
+            this._collapseItems();
         }
-        const groups = Object.keys(priority);
-        return groups.reduce((lowestGroup, currentGroup) => {
-            const lowestGroupPriority = priority[lowestGroup];
-            const currentGroupPriority = priority[currentGroup];
-            if (OVERFLOW_PRIORITY_SCORE.get(currentGroupPriority) < OVERFLOW_PRIORITY_SCORE.get(lowestGroupPriority)) {
-                return +currentGroup;
+        this._cd.detectChanges();
+    }
+    // shouldOverflow items
+    /** @hidden */
+    _collapseItems() {
+        this._groupedCollection = this._getGroupedCollection();
+        this._groupedCollectionPriority = this._getGroupedCollectionPriority();
+        const _sortedByPriorityAndGroupItems = this._getSortedByPriorityAndGroupItems();
+        _sortedByPriorityAndGroupItems.reduce((_contentWidth, toolbarItem) => {
+            const itemWidth = this._getElementWidthWithMargin(toolbarItem);
+            const itemGroup = this._getElementGroup(toolbarItem);
+            const itemPriority = this._getElementPriority(toolbarItem);
+            const shouldItemBeRemovedByWidth = this._shouldToolbarItemBeRemovedByWidth(itemWidth, _contentWidth);
+            const shouldAlwaysBeInOverflow = itemPriority === "always" /* OverflowPriorityEnum.ALWAYS */ || this.forceOverflow;
+            const shouldNeverBeInOverflow = itemPriority === "never" /* OverflowPriorityEnum.NEVER */;
+            if ((shouldItemBeRemovedByWidth && !shouldNeverBeInOverflow) || shouldAlwaysBeInOverflow) {
+                if (itemGroup) {
+                    this._hideElementsFromCurrentGroup(itemGroup);
+                }
+                else {
+                    this._hideElementWithoutGroup(toolbarItem, itemPriority);
+                }
+                return shouldAlwaysBeInOverflow ? _contentWidth : MAX_CONTENT_SIZE;
             }
-            return lowestGroup;
-        }, itemGroup);
+            else {
+                this._normalElements.push(toolbarItem);
+                return _contentWidth + itemWidth;
+            }
+        }, 0);
+        this._collapseLastSpacerElement(this._overflowElements, this._normalElements);
+        this._addToolbarItemToOverflow(this._overflowElements);
+        this._disappearElements.forEach(this._removeToolbarItemFromDOM.bind(this));
+        this._normalElements = [...this._getOrderedItemsFollowingQuery(this._normalElements)];
+        this._overflowElements = [...this._getOrderedItemsFollowingQuery(this._overflowElements)];
+        this.toolbarItems.forEach((item) => this._changeItemVisibilityState(item.elementRef.nativeElement, true));
+        this._changeOverflowVisibleState(this._overflowElements.length > 0);
+        this._cd.markForCheck();
+    }
+    /** @hidden */
+    _shouldToolbarItemBeRemovedByWidth(itemWidth, contentWidth) {
+        return contentWidth + itemWidth > this._toolbarWidth;
+    }
+    /** @hidden */
+    _getElementWidthWithMargin(toolbarItem) {
+        return (toolbarItem.elementRef.nativeElement && toolbarItem.elementRef.nativeElement.offsetWidth + ELEMENT_MARGIN);
     }
     /** @hidden */
-    _getElementsFromCurrentGroup(itemGroup, groupedCollection, groupedCollectionPriority) {
-        const lowestPriorityFromGroup = this._getLowestPriorityFromGroup(itemGroup, groupedCollectionPriority);
-        if (!groupedCollection || !groupedCollectionPriority) {
-            return [];
+    _listenForItemChanges() {
+        this.toolbarItems.changes.pipe(filter(() => this.shouldOverflow)).subscribe(() => this._onResize());
+    }
+    /** @hidden */
+    _getElementPriority(toolbarItem) {
+        const priority = toolbarItem.elementRef.nativeElement && toolbarItem.elementRef.nativeElement.attributes.fdOverflowPriority;
+        return (priority && priority.value) || "high" /* OverflowPriorityEnum.HIGH */;
+    }
+    /** @hidden */
+    _getElementGroup(toolbarItem) {
+        const itemGroup = toolbarItem.elementRef.nativeElement && toolbarItem.elementRef.nativeElement.attributes.fdOverflowGroup;
+        return (itemGroup && itemGroup.value) || 0;
+    }
+    /** @hidden */
+    _hideElementsFromCurrentGroup(itemGroup) {
+        const lowestPriorityFromGroup = this._getLowestPriorityFromGroup(itemGroup);
+        if (!this._groupedCollection || !this._groupedCollectionPriority) {
+            return;
         }
-        let itemsToRemove = groupedCollection[lowestPriorityFromGroup];
-        delete groupedCollection[lowestPriorityFromGroup];
-        delete groupedCollectionPriority[lowestPriorityFromGroup];
+        let itemsToRemove = this._groupedCollection[lowestPriorityFromGroup];
+        delete this._groupedCollection[lowestPriorityFromGroup];
+        delete this._groupedCollectionPriority[lowestPriorityFromGroup];
         if (lowestPriorityFromGroup !== itemGroup) {
-            itemsToRemove = [...itemsToRemove, ...groupedCollection[itemGroup]];
-            delete groupedCollection[itemGroup];
-            delete groupedCollectionPriority[itemGroup];
+            itemsToRemove = [...itemsToRemove, ...this._groupedCollection[itemGroup]];
+            delete this._groupedCollection[itemGroup];
+            delete this._groupedCollectionPriority[itemGroup];
         }
-        return itemsToRemove;
-    }
-    /** @hidden Get the object with grouped arrays of elements. */
-    _getGroupedCollection(toolbarItems) {
-        return toolbarItems.reduce((acc, item) => {
-            const itemPrio = item.priority;
-            const itemGroup = item.group;
-            if (itemPrio === "never" /* OverflowPriorityEnum.NEVER */ ||
-                itemPrio === "always" /* OverflowPriorityEnum.ALWAYS */ ||
-                itemGroup === 0) {
-                return acc;
+        itemsToRemove === null || itemsToRemove === void 0 ? void 0 : itemsToRemove.forEach((item) => {
+            this._removeItemFromArray(this._normalElements, item);
+            const isDisappear = this._getElementPriority(item) === "disappear" /* OverflowPriorityEnum.DISAPPEAR */;
+            if (isDisappear) {
+                this._disappearElements.push(item);
             }
-            if (!acc[itemGroup]) {
-                acc[itemGroup] = [];
+            if (this._overflowElements.indexOf(item) === -1 && !isDisappear) {
+                this._overflowElements.push(item);
             }
-            acc[itemGroup].push(item);
-            return acc;
-        }, {});
-    }
-    /** @hidden Get the object with the highest priority for each group of elements. */
-    _getGroupedCollectionPriority(groupedCollection) {
-        const groups = Object.keys(groupedCollection);
-        return groups.reduce((acc, itemGroup) => {
-            const sortedPriorities = groupedCollection[itemGroup]
-                .map((i) => i.priority)
-                .filter((prio) => prio !== "always" /* OverflowPriorityEnum.ALWAYS */ && prio !== "never" /* OverflowPriorityEnum.NEVER */)
-                .sort(this._sortPriorities);
-            acc[itemGroup] = sortedPriorities[0];
-            return acc;
-        }, {});
+        });
     }
-    /** @hidden Sort priorities of elements/groups. */
-    _sortPriorities(a, b) {
-        return OVERFLOW_PRIORITY_SCORE.get(b) - OVERFLOW_PRIORITY_SCORE.get(a);
+    /** @hidden */
+    _hideElementWithoutGroup(toolbarItem, itemPriority) {
+        const isDisappear = itemPriority === "disappear" /* OverflowPriorityEnum.DISAPPEAR */;
+        if (isDisappear) {
+            this._disappearElements.push(toolbarItem);
+        }
+        else {
+            this._overflowElements.push(toolbarItem);
+        }
     }
     /** @hidden Sort by group and priority and initial position */
-    _getSortedByPriorityAndGroupItems(toolbarItems) {
-        const notSorted = toolbarItems.map((element, index) => ({ element, index }));
+    _getSortedByPriorityAndGroupItems() {
+        const notSorted = this.toolbarItems.toArray().map((element, index) => ({ element, index }));
         const groups = notSorted.reduce((gr, item) => {
-            let groupId = item.element.group;
-            const itemPrio = item.element.priority;
+            let groupId = this._getElementGroup(item.element);
+            const itemPrio = this._getElementPriority(item.element);
             if (itemPrio === "never" /* OverflowPriorityEnum.NEVER */ || itemPrio === "always" /* OverflowPriorityEnum.ALWAYS */) {
                 groupId = 0;
             }
@@ -329,7 +278,7 @@ class ToolbarComponent {
             let maxPriority = 0;
             for (const item of groups[g]) {
                 minIndex = Math.min(minIndex, item.index);
-                maxPriority = Math.max(maxPriority, (_a = OVERFLOW_PRIORITY_SCORE.get(item.element.priority)) !== null && _a !== void 0 ? _a : -Infinity);
+                maxPriority = Math.max(maxPriority, (_a = OVERFLOW_PRIORITY_SCORE.get(this._getElementPriority(item.element))) !== null && _a !== void 0 ? _a : -Infinity);
             }
             return { group: groups[g].map(({ element }) => element), minIndex, maxPriority };
         })
@@ -337,36 +286,158 @@ class ToolbarComponent {
             ? []
             : groups[0].map((item) => ({
                 group: [item.element],
-                maxPriority: OVERFLOW_PRIORITY_SCORE.get(item.element.priority),
+                maxPriority: OVERFLOW_PRIORITY_SCORE.get(this._getElementPriority(item.element)),
                 minIndex: item.index
             })))
             .sort((a, b) => b.maxPriority - a.maxPriority || a.minIndex - b.minIndex)
             .reduce((arr, i) => arr.concat(i.group), []);
     }
+    /** @hidden Get the object with grouped arrays of elements. */
+    _getGroupedCollection() {
+        const collection = (this.toolbarItems &&
+            this.toolbarItems.reduce((acc, item) => {
+                const itemPrio = this._getElementPriority(item);
+                if (itemPrio === "never" /* OverflowPriorityEnum.NEVER */ || itemPrio === "always" /* OverflowPriorityEnum.ALWAYS */) {
+                    return acc;
+                }
+                const itemGroup = this._getElementGroup(item);
+                acc[itemGroup] && acc[itemGroup].length ? acc[itemGroup].push(item) : (acc[itemGroup] = [item]);
+                return acc;
+            }, {})) ||
+            {};
+        delete collection[0];
+        return collection;
+    }
+    /** @hidden Get the object with the highest priority for each group of elements. */
+    _getGroupedCollectionPriority() {
+        if (!this._groupedCollection) {
+            return {};
+        }
+        const groups = Object.keys(this._groupedCollection);
+        return groups.reduce((acc, itemGroup) => {
+            const sortedPriorities = this._groupedCollection[itemGroup].map(this._getElementPriority)
+                .filter((prio) => prio !== "always" /* OverflowPriorityEnum.ALWAYS */ && prio !== "never" /* OverflowPriorityEnum.NEVER */)
+                .sort(this._sortPriorities.bind(this));
+            acc[itemGroup] = sortedPriorities[0];
+            return acc;
+        }, {});
+    }
+    /** @hidden Get group number with the lowest priority.
+     *  Uses for detecting a group of elements which would be hidden from the toolbar.
+     *  */
+    _getLowestPriorityFromGroup(itemGroup) {
+        const priority = this._groupedCollectionPriority;
+        if (!priority || !OVERFLOW_PRIORITY_SCORE.get(priority[itemGroup])) {
+            return itemGroup;
+        }
+        const groups = Object.keys(priority);
+        return groups.reduce((lowestGroup, currentGroup) => {
+            const lowestGroupPriority = priority[lowestGroup];
+            const currentGroupPriority = priority[currentGroup];
+            if (OVERFLOW_PRIORITY_SCORE.get(currentGroupPriority) < OVERFLOW_PRIORITY_SCORE.get(lowestGroupPriority)) {
+                return +currentGroup;
+            }
+            return lowestGroup;
+        }, itemGroup);
+    }
+    /** @hidden */
+    _removeItemFromArray(toolbarItems, toolbarItem) {
+        const itemIndex = toolbarItems.indexOf(toolbarItem);
+        return itemIndex >= 0 ? toolbarItems.splice(itemIndex, 1)[0] : null;
+    }
+    /** @hidden */
+    _removeToolbarItemFromDOM(toolbarItem) {
+        if (toolbarItem.elementRef.nativeElement && toolbarItem.elementRef.nativeElement.parentNode) {
+            // IE11 workaround element.remove() is not supported
+            this._renderer.removeChild(this.elementRef().nativeElement, toolbarItem.elementRef.nativeElement);
+        }
+    }
+    /** @hidden */
+    _addToolbarItemToOverflow(toolbarItems) {
+        toolbarItems.forEach((x) => {
+            if (this._overflowBody) {
+                this._overflowBody.appendChild(x.elementRef.nativeElement);
+            }
+        });
+    }
+    /** @hidden */
+    _reset() {
+        this._normalElements.forEach(this._removeToolbarItemFromDOM.bind(this));
+        this._overflowElements.forEach(this._removeToolbarItemFromDOM.bind(this));
+        if (this.overflowSpacer) {
+            this.toolbarItems.map((x) => {
+                this._renderer.insertBefore(this._toolbar, x.elementRef.nativeElement, this.overflowSpacer.nativeElement);
+            });
+        }
+        this._overflowElements = [];
+        this._normalElements = [];
+        this._disappearElements = [];
+        this._groupedCollection = null;
+        this._groupedCollectionPriority = null;
+        this._changeOverflowVisibleState(false);
+    }
+    /** @hidden */
+    _changeOverflowVisibleState(visible) {
+        this.overflowVisibility = of(visible).pipe(debounceTime(1));
+    }
+    /** @hidden */
+    _changeItemVisibilityState(element, visible) {
+        const fadeIn = 'fd-toolbar-fade-in';
+        const fadeOut = 'fd-toolbar-fade-out';
+        if (visible) {
+            element.classList.add(fadeIn);
+            element.classList.remove(fadeOut);
+            return;
+        }
+        element.classList.add(fadeOut);
+        element.classList.remove(fadeIn);
+    }
+    /** @hidden Sort priorities of elements/groups. */
+    _sortPriorities(a, b) {
+        return OVERFLOW_PRIORITY_SCORE.get(b) - OVERFLOW_PRIORITY_SCORE.get(a);
+    }
+    /** @hidden */
+    _collapseLastSpacerElement(overflowElements, normalElements) {
+        if (!normalElements || normalElements.length < 1) {
+            return;
+        }
+        const isSpacer = (element) => element.elementRef.nativeElement.classList.contains('fd-toolbar__spacer');
+        let lastItem = normalElements[normalElements.length - 1];
+        while (isSpacer(lastItem) && normalElements.length > 0) {
+            overflowElements.push(normalElements.pop());
+            lastItem = normalElements[normalElements.length - 1];
+        }
+    }
+    /** @hidden */
+    _getOrderedItemsFollowingQuery(toolbarItems) {
+        const queryArray = this.toolbarItems.toArray();
+        const sortMethod = (a, b) => queryArray.findIndex((_item) => _item === a) > queryArray.findIndex((_item) => _item === b) ? 1 : -1;
+        return toolbarItems.sort(sortMethod);
+    }
 }
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }, { token: i2.DestroyedService }, { token: i2.ResizeObserverService }, { token: i0.NgZone }, { token: DYNAMIC_PAGE_HEADER_TOKEN, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ToolbarComponent, selector: "fd-toolbar", inputs: { titleId: "titleId", class: "class", shouldOverflow: "shouldOverflow", fdType: "fdType", hasTitle: "hasTitle", title: "title", active: "active", clearBorder: "clearBorder", forceOverflow: "forceOverflow", tabindex: "tabindex" }, providers: [
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.ContentDensityObserver }, { token: i2.DestroyedService }, { token: DYNAMIC_PAGE_HEADER_TOKEN, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: ToolbarComponent, selector: "fd-toolbar", inputs: { class: "class", shouldOverflow: "shouldOverflow", fdType: "fdType", hasTitle: "hasTitle", title: "title", active: "active", clearBorder: "clearBorder", forceOverflow: "forceOverflow", tabindex: "tabindex" }, providers: [
         contentDensityObserverProviders({
             defaultContentDensity: ContentDensityMode.COMPACT
         }),
         DestroyedService
-    ], queries: [{ propertyName: "titleComponent", first: true, predicate: TitleToken, descendants: true }, { propertyName: "toolbarItems", predicate: i0.forwardRef(function () { return ToolbarItem; }) }], viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true }], ngImport: i0, template: "<div #toolbar [tabindex]=\"tabindex\" [class.fd-toolbar--cozy]=\"_contentDensityObserver.isCozy$ | async\">\n    <h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\" [id]=\"titleId\" #titleElement>{{ title }}</h4>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"overflownItems.length > 0\">\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n        <fd-toolbar-separator></fd-toolbar-separator>\n        <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n            <fd-popover-control>\n                <button\n                    fd-button\n                    title=\"More\"\n                    aria-label=\"More\"\n                    aria-haspopup=\"true\"\n                    fdType=\"transparent\"\n                    glyph=\"overflow\"\n                ></button>\n            </fd-popover-control>\n\n            <fd-popover-body>\n                <div class=\"fd-toolbar__overflow\">\n                    <ng-container *ngFor=\"let overflowedItem of overflownItems\">\n                        <fdk-dynamic-portal\n                            [domElement]=\"overflowedItem.element\"\n                            [style.display]=\"overflowedItem.priority === 'disappear' ? 'none' : 'flex'\"\n                            [style.flex-direction]=\"overflowedItem.priority === 'disappear' ? undefined : 'column'\"\n                        >\n                        </fdk-dynamic-portal>\n                    </ng-container>\n                </div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-container>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:.5rem}.fd-toolbar>*~[dir=rtl]:not(.fd-toolbar__spacer),[dir=rtl] .fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:0;margin-right:.5rem}.fd-toolbar{-webkit-box-sizing:border-box;align-items:center;border:0;border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 .5rem}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>.fd-toolbar__spacer+:not(.fd-toolbar__spacer){margin-left:0;margin-right:0}.fd-toolbar--title{background-color:var(--sapGroup_TitleBackground)!important;height:2.75rem;padding:0 .5rem 0 1rem}.fd-toolbar--clear{border-bottom:none}.fd-toolbar--auto{background-color:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{background-color:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{background-color:var(--sapToolbar_Background)}.fd-toolbar--fade-in{-webkit-transition:visibility 0s linear 0s,opacity 1s;opacity:1;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{-webkit-transition:visibility 0s linear 1s,opacity 1ms;opacity:0;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar--info{background-color:var(--sapInfobar_NonInteractive_Background);color:var(--sapList_TextColor);outline:none;padding-left:.5rem;padding-right:1rem;position:relative}.fd-toolbar--info.fd-toolbar--active{background-color:var(--sapInfobar_Background);color:var(--sapInfobar_TextColor)}.fd-toolbar--info.fd-toolbar--active.is-hover,.fd-toolbar--info.fd-toolbar--active:hover{background-color:var(--sapInfobar_Hover_Background)}.fd-toolbar--info.fd-toolbar--active.is-active,.fd-toolbar--info.fd-toolbar--active:active{background-color:var(--sapInfobar_Active_Background)}.fd-toolbar--info[dir=rtl],[dir=rtl] .fd-toolbar--info{padding-left:1rem;padding-right:.5rem}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.0625rem;pointer-events:none;position:absolute}.fd-toolbar--info.is-focus,.fd-toolbar--info:focus{z-index:5}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapInfobar_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar__spacer{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 auto;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;-ms-flex:none;display:inline-block;flex:none}.fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.5rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:.0625rem}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:20rem;overflow:auto;padding:.1875rem .375rem}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-button{justify-content:flex-start;margin:.1875rem 0;text-align:left;width:auto}.fd-toolbar__overflow .fd-toolbar__overflow-button[dir=rtl],[dir=rtl] .fd-toolbar__overflow .fd-toolbar__overflow-button{text-align:right}.fd-toolbar__overflow .fd-toolbar__overflow-button--menu{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;display:flex;justify-content:center;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.0625rem;line-height:var(--sapContent_LineHeight);margin:.1875rem;padding:0;width:auto}.fd-toolbar__overflow .fd-toolbar__separator:after,.fd-toolbar__overflow .fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label,.fd-toolbar__overflow .fd-toolbar__overflow-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-toolbar__overflow .fd-toolbar__overflow-form-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-form-label:before,.fd-toolbar__overflow .fd-toolbar__overflow-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-label:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label--text,.fd-toolbar__overflow .fd-toolbar__overflow-label--text{margin-top:.4375rem}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--cozy{height:2.75rem;min-height:2.75rem}.fd-toolbar--cozy.fd-toolbar--info{height:2rem;min-height:2rem}.fd-toolbar--cozy .fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem}.fd-toolbar--cozy .fd-toolbar__overflow:after,.fd-toolbar--cozy .fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i2.DynamicPortalComponent, selector: "fdk-dynamic-portal", inputs: ["domElement", "component", "template"] }, { kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "titleComponent", first: true, predicate: TitleToken, descendants: true }, { propertyName: "toolbarItems", predicate: i0.forwardRef(function () { return ToolbarItemDirective; }) }], viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "overflowBody", first: true, predicate: ["overflowBody"], descendants: true }, { propertyName: "overflowSpacer", first: true, predicate: ["overflowSpacer"], descendants: true }], ngImport: i0, template: "<div #toolbar [tabindex]=\"tabindex\" [class.fd-toolbar--cozy]=\"_contentDensityObserver.isCozy$ | async\">\n    <h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\">{{ title }}</h4>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"shouldOverflow\">\n        <span #overflowSpacer class=\"fd-toolbar__spacer\"></span>\n\n        <span class=\"fd-toolbar__separator\" *ngIf=\"overflowVisibility | async\"></span>\n\n        <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n            <fd-popover-control>\n                <button\n                    *ngIf=\"overflowVisibility | async\"\n                    fd-button\n                    title=\"More\"\n                    aria-label=\"More\"\n                    aria-haspopup=\"true\"\n                    fdType=\"transparent\"\n                    glyph=\"overflow\"\n                ></button>\n            </fd-popover-control>\n\n            <fd-popover-body>\n                <div class=\"fd-toolbar__overflow\" #overflowBody></div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-container>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:.5rem}.fd-toolbar>*~[dir=rtl]:not(.fd-toolbar__spacer),[dir=rtl] .fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:0;margin-right:.5rem}.fd-toolbar{-webkit-box-sizing:border-box;align-items:center;border:0;border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 .5rem}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>.fd-toolbar__spacer+:not(.fd-toolbar__spacer){margin-left:0;margin-right:0}.fd-toolbar--title{background-color:var(--sapGroup_TitleBackground)!important;height:2.75rem;padding:0 .5rem 0 1rem}.fd-toolbar--clear{border-bottom:none}.fd-toolbar--auto{background-color:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{background-color:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{background-color:var(--sapToolbar_Background)}.fd-toolbar--fade-in{-webkit-transition:visibility 0s linear 0s,opacity 1s;opacity:1;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{-webkit-transition:visibility 0s linear 1s,opacity 1ms;opacity:0;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar--info{background-color:var(--sapInfobar_NonInteractive_Background);color:var(--sapList_TextColor);outline:none;padding-left:.5rem;padding-right:1rem;position:relative}.fd-toolbar--info.fd-toolbar--active{background-color:var(--sapInfobar_Background);color:var(--sapInfobar_TextColor)}.fd-toolbar--info.fd-toolbar--active.is-hover,.fd-toolbar--info.fd-toolbar--active:hover{background-color:var(--sapInfobar_Hover_Background)}.fd-toolbar--info.fd-toolbar--active.is-active,.fd-toolbar--info.fd-toolbar--active:active{background-color:var(--sapInfobar_Active_Background)}.fd-toolbar--info[dir=rtl],[dir=rtl] .fd-toolbar--info{padding-left:1rem;padding-right:.5rem}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.0625rem;pointer-events:none;position:absolute}.fd-toolbar--info.is-focus,.fd-toolbar--info:focus{z-index:5}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapInfobar_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar__spacer{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 auto;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;-ms-flex:none;display:inline-block;flex:none}.fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.5rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:.0625rem}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:20rem;overflow:auto;padding:.1875rem .375rem}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-button{justify-content:flex-start;margin:.1875rem 0;text-align:left;width:auto}.fd-toolbar__overflow .fd-toolbar__overflow-button[dir=rtl],[dir=rtl] .fd-toolbar__overflow .fd-toolbar__overflow-button{text-align:right}.fd-toolbar__overflow .fd-toolbar__overflow-button--menu{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;display:flex;justify-content:center;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.0625rem;line-height:var(--sapContent_LineHeight);margin:.1875rem;padding:0;width:auto}.fd-toolbar__overflow .fd-toolbar__separator:after,.fd-toolbar__overflow .fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label,.fd-toolbar__overflow .fd-toolbar__overflow-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-toolbar__overflow .fd-toolbar__overflow-form-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-form-label:before,.fd-toolbar__overflow .fd-toolbar__overflow-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-label:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label--text,.fd-toolbar__overflow .fd-toolbar__overflow-label--text{margin-top:.4375rem}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--cozy{height:2.75rem;min-height:2.75rem}.fd-toolbar--cozy.fd-toolbar--info{height:2rem;min-height:2rem}.fd-toolbar--cozy .fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem}.fd-toolbar--cozy .fd-toolbar__overflow:after,.fd-toolbar--cozy .fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>*{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", Array)
 ], ToolbarComponent.prototype, "buildComponentCssClass", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-toolbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         contentDensityObserverProviders({
                             defaultContentDensity: ContentDensityMode.COMPACT
                         }),
                         DestroyedService
-                    ], template: "<div #toolbar [tabindex]=\"tabindex\" [class.fd-toolbar--cozy]=\"_contentDensityObserver.isCozy$ | async\">\n    <h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\" [id]=\"titleId\" #titleElement>{{ title }}</h4>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"overflownItems.length > 0\">\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n        <fd-toolbar-separator></fd-toolbar-separator>\n        <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n            <fd-popover-control>\n                <button\n                    fd-button\n                    title=\"More\"\n                    aria-label=\"More\"\n                    aria-haspopup=\"true\"\n                    fdType=\"transparent\"\n                    glyph=\"overflow\"\n                ></button>\n            </fd-popover-control>\n\n            <fd-popover-body>\n                <div class=\"fd-toolbar__overflow\">\n                    <ng-container *ngFor=\"let overflowedItem of overflownItems\">\n                        <fdk-dynamic-portal\n                            [domElement]=\"overflowedItem.element\"\n                            [style.display]=\"overflowedItem.priority === 'disappear' ? 'none' : 'flex'\"\n                            [style.flex-direction]=\"overflowedItem.priority === 'disappear' ? undefined : 'column'\"\n                        >\n                        </fdk-dynamic-portal>\n                    </ng-container>\n                </div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-container>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:.5rem}.fd-toolbar>*~[dir=rtl]:not(.fd-toolbar__spacer),[dir=rtl] .fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:0;margin-right:.5rem}.fd-toolbar{-webkit-box-sizing:border-box;align-items:center;border:0;border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 .5rem}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>.fd-toolbar__spacer+:not(.fd-toolbar__spacer){margin-left:0;margin-right:0}.fd-toolbar--title{background-color:var(--sapGroup_TitleBackground)!important;height:2.75rem;padding:0 .5rem 0 1rem}.fd-toolbar--clear{border-bottom:none}.fd-toolbar--auto{background-color:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{background-color:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{background-color:var(--sapToolbar_Background)}.fd-toolbar--fade-in{-webkit-transition:visibility 0s linear 0s,opacity 1s;opacity:1;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{-webkit-transition:visibility 0s linear 1s,opacity 1ms;opacity:0;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar--info{background-color:var(--sapInfobar_NonInteractive_Background);color:var(--sapList_TextColor);outline:none;padding-left:.5rem;padding-right:1rem;position:relative}.fd-toolbar--info.fd-toolbar--active{background-color:var(--sapInfobar_Background);color:var(--sapInfobar_TextColor)}.fd-toolbar--info.fd-toolbar--active.is-hover,.fd-toolbar--info.fd-toolbar--active:hover{background-color:var(--sapInfobar_Hover_Background)}.fd-toolbar--info.fd-toolbar--active.is-active,.fd-toolbar--info.fd-toolbar--active:active{background-color:var(--sapInfobar_Active_Background)}.fd-toolbar--info[dir=rtl],[dir=rtl] .fd-toolbar--info{padding-left:1rem;padding-right:.5rem}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.0625rem;pointer-events:none;position:absolute}.fd-toolbar--info.is-focus,.fd-toolbar--info:focus{z-index:5}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapInfobar_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar__spacer{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 auto;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;-ms-flex:none;display:inline-block;flex:none}.fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.5rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:.0625rem}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:20rem;overflow:auto;padding:.1875rem .375rem}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-button{justify-content:flex-start;margin:.1875rem 0;text-align:left;width:auto}.fd-toolbar__overflow .fd-toolbar__overflow-button[dir=rtl],[dir=rtl] .fd-toolbar__overflow .fd-toolbar__overflow-button{text-align:right}.fd-toolbar__overflow .fd-toolbar__overflow-button--menu{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;display:flex;justify-content:center;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.0625rem;line-height:var(--sapContent_LineHeight);margin:.1875rem;padding:0;width:auto}.fd-toolbar__overflow .fd-toolbar__separator:after,.fd-toolbar__overflow .fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label,.fd-toolbar__overflow .fd-toolbar__overflow-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-toolbar__overflow .fd-toolbar__overflow-form-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-form-label:before,.fd-toolbar__overflow .fd-toolbar__overflow-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-label:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label--text,.fd-toolbar__overflow .fd-toolbar__overflow-label--text{margin-top:.4375rem}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--cozy{height:2.75rem;min-height:2.75rem}.fd-toolbar--cozy.fd-toolbar--info{height:2rem;min-height:2rem}.fd-toolbar--cozy .fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem}.fd-toolbar--cozy .fd-toolbar__overflow:after,.fd-toolbar--cozy .fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n"] }]
+                    ], template: "<div #toolbar [tabindex]=\"tabindex\" [class.fd-toolbar--cozy]=\"_contentDensityObserver.isCozy$ | async\">\n    <h4 *ngIf=\"title\" class=\"fd-title fd-title--h4 fd-toolbar__title\">{{ title }}</h4>\n\n    <ng-content></ng-content>\n\n    <ng-container *ngIf=\"shouldOverflow\">\n        <span #overflowSpacer class=\"fd-toolbar__spacer\"></span>\n\n        <span class=\"fd-toolbar__separator\" *ngIf=\"overflowVisibility | async\"></span>\n\n        <fd-popover placement=\"bottom-end\" [noArrow]=\"true\" class=\"fd-popover\">\n            <fd-popover-control>\n                <button\n                    *ngIf=\"overflowVisibility | async\"\n                    fd-button\n                    title=\"More\"\n                    aria-label=\"More\"\n                    aria-haspopup=\"true\"\n                    fdType=\"transparent\"\n                    glyph=\"overflow\"\n                ></button>\n            </fd-popover-control>\n\n            <fd-popover-body>\n                <div class=\"fd-toolbar__overflow\" #overflowBody></div>\n            </fd-popover-body>\n        </fd-popover>\n    </ng-container>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:.5rem}.fd-toolbar>*~[dir=rtl]:not(.fd-toolbar__spacer),[dir=rtl] .fd-toolbar>*~:not(.fd-toolbar__spacer){margin-left:0;margin-right:.5rem}.fd-toolbar{-webkit-box-sizing:border-box;align-items:center;border:0;border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0 .5rem}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>.fd-toolbar__spacer+:not(.fd-toolbar__spacer){margin-left:0;margin-right:0}.fd-toolbar--title{background-color:var(--sapGroup_TitleBackground)!important;height:2.75rem;padding:0 .5rem 0 1rem}.fd-toolbar--clear{border-bottom:none}.fd-toolbar--auto{background-color:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{background-color:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{background-color:var(--sapToolbar_Background)}.fd-toolbar--fade-in{-webkit-transition:visibility 0s linear 0s,opacity 1s;opacity:1;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{-webkit-transition:visibility 0s linear 1s,opacity 1ms;opacity:0;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar--info{background-color:var(--sapInfobar_NonInteractive_Background);color:var(--sapList_TextColor);outline:none;padding-left:.5rem;padding-right:1rem;position:relative}.fd-toolbar--info.fd-toolbar--active{background-color:var(--sapInfobar_Background);color:var(--sapInfobar_TextColor)}.fd-toolbar--info.fd-toolbar--active.is-hover,.fd-toolbar--info.fd-toolbar--active:hover{background-color:var(--sapInfobar_Hover_Background)}.fd-toolbar--info.fd-toolbar--active.is-active,.fd-toolbar--info.fd-toolbar--active:active{background-color:var(--sapInfobar_Active_Background)}.fd-toolbar--info[dir=rtl],[dir=rtl] .fd-toolbar--info{padding-left:1rem;padding-right:.5rem}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--sapContent_FocusColor);border-style:var(--sapContent_FocusStyle);border-width:var(--sapContent_FocusWidth);content:\"\";inset:.0625rem;pointer-events:none;position:absolute}.fd-toolbar--info.is-focus,.fd-toolbar--info:focus{z-index:5}.fd-toolbar--info.is-focus:after,.fd-toolbar--info:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapInfobar_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar__spacer{-webkit-box-sizing:border-box;-webkit-box-flex:1;-ms-flex:1 auto;border:0;box-sizing:border-box;color:var(--sapTextColor);flex:1 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;-ms-flex:none;display:inline-block;flex:none}.fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:1.5rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0;width:.0625rem}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:50vh;max-width:20rem;overflow:auto;padding:.1875rem .375rem}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-button{justify-content:flex-start;margin:.1875rem 0;text-align:left;width:auto}.fd-toolbar__overflow .fd-toolbar__overflow-button[dir=rtl],[dir=rtl] .fd-toolbar__overflow .fd-toolbar__overflow-button{text-align:right}.fd-toolbar__overflow .fd-toolbar__overflow-button--menu{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;display:flex;justify-content:center;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__separator{-webkit-box-sizing:border-box;background-color:var(--sapToolbar_SeparatorColor);border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.0625rem;line-height:var(--sapContent_LineHeight);margin:.1875rem;padding:0;width:auto}.fd-toolbar__overflow .fd-toolbar__separator:after,.fd-toolbar__overflow .fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label,.fd-toolbar__overflow .fd-toolbar__overflow-label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap}.fd-toolbar__overflow .fd-toolbar__overflow-form-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-form-label:before,.fd-toolbar__overflow .fd-toolbar__overflow-label:after,.fd-toolbar__overflow .fd-toolbar__overflow-label:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow .fd-toolbar__overflow-form-label--text,.fd-toolbar__overflow .fd-toolbar__overflow-label--text{margin-top:.4375rem}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.fd-toolbar--cozy{height:2.75rem;min-height:2.75rem}.fd-toolbar--cozy.fd-toolbar--info{height:2rem;min-height:2rem}.fd-toolbar--cozy .fd-toolbar__overflow{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem}.fd-toolbar--cozy .fd-toolbar__overflow:after,.fd-toolbar--cozy .fd-toolbar__overflow:before{box-sizing:inherit;font-size:inherit}.fd-toolbar>*{flex-shrink:0}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }, { type: i2.DestroyedService }, { type: i2.ResizeObserverService }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1.ContentDensityObserver }, { type: i2.DestroyedService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: SkipSelf
@@ -374,9 +445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                         type: Inject,
                         args: [DYNAMIC_PAGE_HEADER_TOKEN]
                     }] }];
-    }, propDecorators: { titleId: [{
-                type: Input
-            }], class: [{
+    }, propDecorators: { class: [{
                 type: Input
             }], shouldOverflow: [{
                 type: Input
@@ -397,72 +466,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
             }], toolbar: [{
                 type: ViewChild,
                 args: ['toolbar']
-            }], titleElement: [{
+            }], overflowBody: [{
+                type: ViewChild,
+                args: ['overflowBody']
+            }], overflowSpacer: [{
                 type: ViewChild,
-                args: ['titleElement']
+                args: ['overflowSpacer']
             }], toolbarItems: [{
                 type: ContentChildren,
-                args: [forwardRef(() => ToolbarItem)]
+                args: [forwardRef(() => ToolbarItemDirective)]
             }], titleComponent: [{
                 type: ContentChild,
                 args: [TitleToken]
             }], buildComponentCssClass: [] } });
 
-class ToolbarItemDirective {
-    /** @hidden */
-    get group() {
-        return this.fdOverflowGroup;
-    }
-    /** @hidden */
-    get priority() {
-        return this.fdOverflowPriority;
-    }
-    /** @hidden */
-    get element() {
-        return this.elementRef.nativeElement;
-    }
-    /** @hidden */
-    get isSpacer() {
-        return this.element.classList.contains('fd-toolbar__spacer');
-    }
-    /** @hidden */
-    get width() {
-        if (!this.element.clientWidth) {
-            return this.lastWidth;
-        }
-        this.lastWidth = this.element.clientWidth + 8; // ELEMENT_MARGIN
-        return this.lastWidth;
+class ToolbarSeparatorComponent {
+}
+ToolbarSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolbarSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator", host: { classAttribute: "fd-toolbar__separator" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fd-toolbar-separator',
+                    template: '',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'fd-toolbar__separator'
+                    }
+                }]
+        }] });
+
+class ToolbarSpacerComponent {
+    constructor() {
+        /** Determines the width of spacer when fixed property is set to true
+         * Allowed values: absolute and relative metrics
+         * Default value: 0px
+         */
+        this.width = '0px';
+        /** Property allows user to pass additional class
+         */
+        this.class = '';
+        /** Determines if spacer should take only size taken from width property
+         * Default value: false
+         * Default behaviour: spacer takes remaining space automatically
+         */
+        this.fixed = false;
     }
     /** @hidden */
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        /** @hidden */
-        this.lastWidth = 0;
-        /** The priority of the item. */
-        this.fdOverflowPriority = "high" /* OverflowPriorityEnum.HIGH */;
-        /** The group number of the item. */
-        this.fdOverflowGroup = 0;
+    get css() {
+        return `fd-toolbar__spacer ${this.fixed ? 'fd-toolbar__spacer--fixed' : ''} ${this.class}`;
     }
 }
-ToolbarItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ToolbarItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: { fdOverflowPriority: "fdOverflowPriority", fdOverflowGroup: "fdOverflowGroup" }, providers: [{ provide: ToolbarItem, useExisting: forwardRef(() => ToolbarItemDirective) }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarItemDirective, decorators: [{
-            type: Directive,
+ToolbarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolbarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: ToolbarSpacerComponent, selector: "fd-toolbar-spacer", inputs: { width: "width", class: "class", fixed: "fixed" }, host: { properties: { "style.width": "this.width", "attr.class": "this.css" } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarSpacerComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]',
-                    providers: [{ provide: ToolbarItem, useExisting: forwardRef(() => ToolbarItemDirective) }]
+                    selector: 'fd-toolbar-spacer',
+                    template: ``,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fdOverflowPriority: [{
+        }], propDecorators: { width: [{
+                type: HostBinding,
+                args: ['style.width']
+            }, {
+                type: Input
+            }], class: [{
                 type: Input
-            }], fdOverflowGroup: [{
+            }], fixed: [{
                 type: Input
+            }], css: [{
+                type: HostBinding,
+                args: ['attr.class']
             }] } });
 
 class ToolbarLabelDirective extends ToolbarItemDirective {
 }
-ToolbarLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ToolbarLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ToolbarLabelDirective, selector: "[fd-toolbar-label]", host: { classAttribute: "fd-label fd-toolbar__overflow-label" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarLabelDirective, decorators: [{
+ToolbarLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ToolbarLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: ToolbarLabelDirective, selector: "[fd-toolbar-label]", host: { classAttribute: "fd-label fd-toolbar__overflow-label" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -475,9 +559,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 
 class ToolbarOverflowButtonDirective extends ToolbarItemDirective {
 }
-ToolbarOverflowButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarOverflowButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ToolbarOverflowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ToolbarOverflowButtonDirective, selector: "[fdToolbarOverflowButton], [fd-toolbar-overflow-button]", host: { classAttribute: "fd-toolbar__overflow-button" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarOverflowButtonDirective, decorators: [{
+ToolbarOverflowButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarOverflowButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ToolbarOverflowButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: ToolbarOverflowButtonDirective, selector: "[fdToolbarOverflowButton], [fd-toolbar-overflow-button]", host: { classAttribute: "fd-toolbar__overflow-button" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarOverflowButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdToolbarOverflowButton], [fd-toolbar-overflow-button]',
@@ -489,9 +573,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 
 class ToolbarOverflowButtonMenuDirective extends ToolbarItemDirective {
 }
-ToolbarOverflowButtonMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarOverflowButtonMenuDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ToolbarOverflowButtonMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ToolbarOverflowButtonMenuDirective, selector: "[fdToolbarOverflowButtonMenu], [fd-toolbar-overflow-button-menu]", host: { classAttribute: "fd-toolbar__overflow-button--menu" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarOverflowButtonMenuDirective, decorators: [{
+ToolbarOverflowButtonMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarOverflowButtonMenuDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ToolbarOverflowButtonMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: ToolbarOverflowButtonMenuDirective, selector: "[fdToolbarOverflowButtonMenu], [fd-toolbar-overflow-button-menu]", host: { classAttribute: "fd-toolbar__overflow-button--menu" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarOverflowButtonMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdToolbarOverflowButtonMenu], [fd-toolbar-overflow-button-menu]',
@@ -503,9 +587,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 
 class ToolbarFormLabelDirective extends ToolbarItemDirective {
 }
-ToolbarFormLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarFormLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ToolbarFormLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ToolbarFormLabelDirective, selector: "[fd-toolbar-form-label]", host: { classAttribute: "fd-form-label fd-toolbar__overflow-form-label fd-toolbar__overflow-form-label--text" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarFormLabelDirective, decorators: [{
+ToolbarFormLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarFormLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ToolbarFormLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: ToolbarFormLabelDirective, selector: "[fd-toolbar-form-label]", host: { classAttribute: "fd-form-label fd-toolbar__overflow-form-label fd-toolbar__overflow-form-label--text" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarFormLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -516,6 +600,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
                 }]
         }] });
 
+/** Individual child elements can be "prioritized" for the overflow behavior using the `fdOverflowPriority` attribute directive.
+ * The values for prioritization are as follows:
+ * `always` - This element will always be positioned in the overflow menu.
+ * `never` - This element will never be added to the overflow. It will always be visible in the toolbar.
+ * `low` - The element has low priority and will be consider first for moving to overflow menu.
+ * `high` (default) - This element has high priority and will be considered last for moving to overflow menu.
+ * `disappear` - This element is not important and will be removed from the toolbar, and will not be added to the overflow menu.
+ * */
+class ToolbarOverflowPriorityDirective extends ToolbarItemDirective {
+    constructor() {
+        super(...arguments);
+        /** The priority of the item. */
+        this.fdOverflowPriority = 'high';
+    }
+}
+ToolbarOverflowPriorityDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarOverflowPriorityDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ToolbarOverflowPriorityDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: ToolbarOverflowPriorityDirective, selector: "[fdOverflowPriority]", inputs: { fdOverflowPriority: "fdOverflowPriority" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarOverflowPriorityDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdOverflowPriority]'
+                }]
+        }], propDecorators: { fdOverflowPriority: [{
+                type: Input
+            }] } });
+
+/** Child elements can be grouped so that they can "overflow" together.
+ * Setting the attribute directive `fdOverflowGroup` to the same number will allow child elements to be grouped.
+ * Child elements which are grouped, will enter (or leave) the overflow menu together.
+ * Child elements grouped in this manner cannot have the `fdOverflowPriority` values of `always` or `never`.
+ * When the value of the property is 0, the element does not belong to any group.
+ * */
+class ToolbarOverflowGroupDirective extends ToolbarItemDirective {
+    constructor() {
+        super(...arguments);
+        /** The group number of the item. */
+        this.fdOverflowGroup = 0;
+    }
+}
+ToolbarOverflowGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarOverflowGroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+ToolbarOverflowGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: ToolbarOverflowGroupDirective, selector: "[fdOverflowGroup]", inputs: { fdOverflowGroup: "fdOverflowGroup" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarOverflowGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdOverflowGroup]'
+                }]
+        }], propDecorators: { fdOverflowGroup: [{
+                type: Input
+            }] } });
+
 class DeprecatedToolbarSizeDirective extends BehaviorSubject {
     /** Size of the toolbar. */
     set size(value) {
@@ -551,14 +685,14 @@ class DeprecatedToolbarSizeDirective extends BehaviorSubject {
         this.complete();
     }
 }
-DeprecatedToolbarSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DeprecatedToolbarSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DeprecatedToolbarSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: DeprecatedToolbarSizeDirective, selector: "fd-toolbar[size]", inputs: { size: "size" }, providers: [
+DeprecatedToolbarSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DeprecatedToolbarSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DeprecatedToolbarSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.1", type: DeprecatedToolbarSizeDirective, selector: "fd-toolbar[size]", inputs: { size: "size" }, providers: [
         {
             provide: CONTENT_DENSITY_DIRECTIVE,
             useExisting: forwardRef(() => DeprecatedToolbarSizeDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: DeprecatedToolbarSizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: DeprecatedToolbarSizeDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -577,40 +711,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 const components = [
     ToolbarComponent,
     ToolbarItemDirective,
-    ToolbarSpacerDirective,
+    ToolbarSpacerComponent,
     ToolbarSeparatorComponent,
     ToolbarFormLabelDirective,
     ToolbarLabelDirective,
     ToolbarOverflowButtonDirective,
     ToolbarOverflowButtonMenuDirective,
+    ToolbarOverflowPriorityDirective,
+    ToolbarOverflowGroupDirective,
     DeprecatedToolbarSizeDirective
 ];
 class ToolbarModule {
 }
-ToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: ToolbarModule, declarations: [ToolbarComponent,
+ToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.1", ngImport: i0, type: ToolbarModule, declarations: [ToolbarComponent,
         ToolbarItemDirective,
-        ToolbarSpacerDirective,
+        ToolbarSpacerComponent,
         ToolbarSeparatorComponent,
         ToolbarFormLabelDirective,
         ToolbarLabelDirective,
         ToolbarOverflowButtonDirective,
         ToolbarOverflowButtonMenuDirective,
-        DeprecatedToolbarSizeDirective], imports: [CommonModule, ButtonModule, PopoverModule, ContentDensityModule, DynamicPortalComponent], exports: [ToolbarComponent,
+        ToolbarOverflowPriorityDirective,
+        ToolbarOverflowGroupDirective,
+        DeprecatedToolbarSizeDirective], imports: [CommonModule, ButtonModule, PopoverModule, ContentDensityModule], exports: [ToolbarComponent,
         ToolbarItemDirective,
-        ToolbarSpacerDirective,
+        ToolbarSpacerComponent,
         ToolbarSeparatorComponent,
         ToolbarFormLabelDirective,
         ToolbarLabelDirective,
         ToolbarOverflowButtonDirective,
         ToolbarOverflowButtonMenuDirective,
+        ToolbarOverflowPriorityDirective,
+        ToolbarOverflowGroupDirective,
         DeprecatedToolbarSizeDirective, ContentDensityModule] });
-ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarModule, imports: [CommonModule, ButtonModule, PopoverModule, ContentDensityModule, DynamicPortalComponent, ContentDensityModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ToolbarModule, decorators: [{
+ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarModule, imports: [CommonModule, ButtonModule, PopoverModule, ContentDensityModule, ContentDensityModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: ToolbarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...components],
-                    imports: [CommonModule, ButtonModule, PopoverModule, ContentDensityModule, DynamicPortalComponent],
+                    imports: [CommonModule, ButtonModule, PopoverModule, ContentDensityModule],
                     exports: [...components, ContentDensityModule]
                 }]
         }] });
@@ -619,5 +759,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DeprecatedToolbarSizeDirective, ToolbarComponent, ToolbarFormLabelDirective, ToolbarItem, ToolbarItemDirective, ToolbarLabelDirective, ToolbarModule, ToolbarOverflowButtonDirective, ToolbarOverflowButtonMenuDirective, ToolbarSeparatorComponent, ToolbarSpacerDirective };
+export { DeprecatedToolbarSizeDirective, ToolbarComponent, ToolbarFormLabelDirective, ToolbarItemDirective, ToolbarLabelDirective, ToolbarModule, ToolbarOverflowButtonDirective, ToolbarOverflowButtonMenuDirective, ToolbarOverflowGroupDirective, ToolbarOverflowPriorityDirective, ToolbarSeparatorComponent, ToolbarSpacerComponent };
 //# sourceMappingURL=fundamental-ngx-core-toolbar.mjs.map