@fundamental-ngx/core 0.58.2-rc.0 → 0.58.2

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { isDevMode, forwardRef, Input, Directive, InjectionToken, inject, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, Component, HostBinding, contentChildren, signal, ContentChild, ViewChild, Optional, SkipSelf, Inject, NgModule } from '@angular/core';
+import { isDevMode, forwardRef, Input, Directive, InjectionToken, inject, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, Component, HostBinding, signal, contentChildren, ContentChild, ContentChildren, ViewChild, Optional, SkipSelf, Inject, NgModule } from '@angular/core';
 import * as i1 from '@fundamental-ngx/core/content-density';
 import { ContentDensityMode, CONTENT_DENSITY_DIRECTIVE, contentDensityObserverProviders, ContentDensityModule } from '@fundamental-ngx/core/content-density';
-import { BehaviorSubject, combineLatest, map } from 'rxjs';
+import { BehaviorSubject, combineLatest, map, startWith } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import { DYNAMIC_PAGE_HEADER_TOKEN } from '@fundamental-ngx/core/shared';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@fundamental-ngx/cdk/utils';
 import { OVERFLOW_PRIORITY_SCORE, DynamicPortalComponent, applyCssClass } from '@fundamental-ngx/cdk/utils';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
@@ -50,15 +50,15 @@ class DeprecatedToolbarSizeDirective extends BehaviorSubject {
     ngOnDestroy() {
         this.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DeprecatedToolbarSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: DeprecatedToolbarSizeDirective, isStandalone: true, selector: "fd-toolbar[size]", inputs: { size: "size" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DeprecatedToolbarSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: DeprecatedToolbarSizeDirective, isStandalone: true, 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: "21.1.0", ngImport: i0, type: DeprecatedToolbarSizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: DeprecatedToolbarSizeDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -112,10 +112,10 @@ class ToolbarItemDirective {
         this.lastWidth = this.element.clientWidth + 8; // ELEMENT_MARGIN
         return this.lastWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ToolbarItemDirective, isStandalone: true, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: { fdOverflowPriority: "fdOverflowPriority", fdOverflowGroup: "fdOverflowGroup" }, providers: [{ provide: ToolbarItem, useExisting: forwardRef(() => ToolbarItemDirective) }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: ToolbarItemDirective, isStandalone: true, 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: "21.1.0", ngImport: i0, type: ToolbarItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]',
@@ -129,10 +129,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             }] } });
 
 class ToolbarFormLabelDirective extends ToolbarItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarFormLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ToolbarFormLabelDirective, isStandalone: true, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarFormLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: ToolbarFormLabelDirective, isStandalone: true, 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: "21.1.0", ngImport: i0, type: ToolbarFormLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarFormLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -145,10 +145,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         }] });
 
 class ToolbarLabelDirective extends ToolbarItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ToolbarLabelDirective, isStandalone: true, selector: "[fd-toolbar-label]", host: { classAttribute: "fd-label fd-toolbar__overflow-label" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: ToolbarLabelDirective, isStandalone: true, selector: "[fd-toolbar-label]", host: { classAttribute: "fd-label fd-toolbar__overflow-label" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -161,10 +161,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         }] });
 
 class ToolbarOverflowButtonMenuDirective extends ToolbarItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarOverflowButtonMenuDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ToolbarOverflowButtonMenuDirective, isStandalone: true, selector: "[fdToolbarOverflowButtonMenu], [fd-toolbar-overflow-button-menu]", host: { classAttribute: "fd-toolbar__overflow-button--menu" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarOverflowButtonMenuDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: ToolbarOverflowButtonMenuDirective, isStandalone: true, 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: "21.1.0", ngImport: i0, type: ToolbarOverflowButtonMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarOverflowButtonMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdToolbarOverflowButtonMenu], [fd-toolbar-overflow-button-menu]',
@@ -176,10 +176,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         }] });
 
 class ToolbarOverflowButtonDirective extends ToolbarItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarOverflowButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ToolbarOverflowButtonDirective, isStandalone: true, selector: "[fdToolbarOverflowButton], [fd-toolbar-overflow-button]", host: { classAttribute: "fd-toolbar__overflow-button" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarOverflowButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: ToolbarOverflowButtonDirective, isStandalone: true, selector: "[fdToolbarOverflowButton], [fd-toolbar-overflow-button]", host: { classAttribute: "fd-toolbar__overflow-button" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarOverflowButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarOverflowButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdToolbarOverflowButton], [fd-toolbar-overflow-button]',
@@ -191,10 +191,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
         }] });
 
 class ToolbarSeparatorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ToolbarSeparatorComponent, isStandalone: true, selector: "fd-toolbar-separator", host: { classAttribute: "fd-toolbar__separator" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: ToolbarSeparatorComponent, isStandalone: true, 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: "21.1.0", ngImport: i0, type: ToolbarSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'fd-toolbar-separator',
@@ -228,10 +228,10 @@ class ToolbarSpacerDirective {
     get css() {
         return `fd-toolbar__spacer ${this.fixed ? 'fd-toolbar__spacer--fixed' : ''} ${this.class}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ToolbarSpacerDirective, isStandalone: true, selector: "fd-toolbar-spacer", inputs: { width: "width", class: "class", fixed: "fixed" }, host: { properties: { "style.width": "this.width", "attr.class": "this.css" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: ToolbarSpacerDirective, isStandalone: true, 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: "21.1.0", ngImport: i0, type: ToolbarSpacerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarSpacerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -293,12 +293,11 @@ class ToolbarComponent {
             (_overflow_btn_size + 4 * ELEMENT_MARGIN + 1 + this.separatorDirectives().length));
     }
     /** @hidden */
-    constructor(_cd, _contentDensityObserver, _destroyRef, resizeObserverService, _injector, _dynamicPageHeader) {
+    constructor(_cd, _contentDensityObserver, _destroyRef, resizeObserverService, _dynamicPageHeader) {
         this._cd = _cd;
         this._contentDensityObserver = _contentDensityObserver;
         this._destroyRef = _destroyRef;
         this.resizeObserverService = resizeObserverService;
-        this._injector = _injector;
         this._dynamicPageHeader = _dynamicPageHeader;
         /**
          * The ID of the toolbar title
@@ -324,8 +323,6 @@ class ToolbarComponent {
         /** @hidden */
         this._role = 'toolbar';
         /** @hidden */
-        this.toolbarItems = contentChildren(ToolbarItem, { ...(ngDevMode ? { debugName: "toolbarItems" } : {}), descendants: true });
-        /** @hidden */
         this.overflownItems = [];
         /** @hidden */
         this.spacerUsed = signal(false, ...(ngDevMode ? [{ debugName: "spacerUsed" }] : []));
@@ -363,12 +360,12 @@ class ToolbarComponent {
         this._updateSpacerUsed();
         this.overflowItems$ = combineLatest([
             this.resizeObserverService.observe(this.elementRef.nativeElement).pipe(map(() => this._toolbarWidth)),
-            toObservable(this.toolbarItems, { injector: this._injector }).pipe(map((toolbarItems) => [...toolbarItems])),
+            this.toolbarItems.changes.pipe(startWith(this.toolbarItems), map((toolbarItems) => toolbarItems.toArray())),
             this._titleComponent$.pipe(map((titleComponent) => {
                 if (!titleComponent) {
                     return this.titleElement?.nativeElement;
                 }
-                return titleComponent.elementRef?.nativeElement;
+                return titleComponent.elementRef.nativeElement;
             })),
             this.shouldOverflow$,
             this._refreshOverflow$
@@ -539,14 +536,14 @@ class ToolbarComponent {
             ? []
             : groups[0].map((item) => ({
                 group: [item.element],
-                maxPriority: OVERFLOW_PRIORITY_SCORE.get(item.element.priority) ?? -Infinity,
+                maxPriority: OVERFLOW_PRIORITY_SCORE.get(item.element.priority),
                 minIndex: item.index
             })))
             .sort((a, b) => b.maxPriority - a.maxPriority || a.minIndex - b.minIndex)
             .reduce((arr, i) => arr.concat(i.group), []);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }, { token: i0.DestroyRef }, { token: i2.ResizeObserverService }, { token: i0.Injector }, { token: DYNAMIC_PAGE_HEADER_TOKEN, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ToolbarComponent, isStandalone: true, selector: "fd-toolbar", inputs: { titleId: "titleId", class: "class", shouldOverflow: "shouldOverflow", fdType: "fdType", title: "title", active: "active", clearBorder: "clearBorder", forceOverflow: "forceOverflow", tabindex: "tabindex", headingLevel: "headingLevel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.role": "this._role" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }, { token: i0.DestroyRef }, { token: i2.ResizeObserverService }, { token: DYNAMIC_PAGE_HEADER_TOKEN, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: ToolbarComponent, isStandalone: true, selector: "fd-toolbar", inputs: { titleId: "titleId", class: "class", shouldOverflow: "shouldOverflow", fdType: "fdType", title: "title", active: "active", clearBorder: "clearBorder", forceOverflow: "forceOverflow", tabindex: "tabindex", headingLevel: "headingLevel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy" }, host: { properties: { "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.role": "this._role" } }, providers: [
             contentDensityObserverProviders({
                 defaultContentDensity: ContentDensityMode.COMPACT
             }),
@@ -554,7 +551,7 @@ class ToolbarComponent {
                 provide: FD_TOOLBAR,
                 useExisting: ToolbarComponent
             }
-        ], queries: [{ propertyName: "toolbarItems", predicate: ToolbarItem, descendants: true, isSignal: true }, { propertyName: "spacerDirectives", predicate: ToolbarSpacerDirective, isSignal: true }, { propertyName: "separatorDirectives", predicate: ToolbarSeparatorComponent, isSignal: true }, { propertyName: "titleComponent", first: true, predicate: TitleToken, descendants: true }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (title) {\n    <span\n        fd-title\n        role=\"heading\"\n        [headerSize]=\"4\"\n        [attr.aria-level]=\"_headingLevel\"\n        class=\"fd-toolbar__title\"\n        [id]=\"titleId\"\n        #titleElement\n    >\n        {{ title }}\n    </span>\n}\n<ng-content></ng-content>\n@if (overflownItems.length > 0) {\n    @if (!spacerUsed()) {\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n    }\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        <fd-popover-body>\n            <div class=\"fd-toolbar__overflow\">\n                @for (overflowedItem of overflownItems; track overflowedItem) {\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                }\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n}\n", styles: [".fd-toolbar{--fdToolbar_Height:2.75rem;--fdToolbar_Separator_Margin:0;--fdToolbar_Padding_Left:.5rem;--fdToolbar_Padding_Right:.5rem;--fdToolbar_Separator_Height:2rem;--fdToolbar_Overflow_Max_Width:100%;--fdToolbar_Separator_Width:.0625rem;--fdToolbar_Info_Color:var(--sapList_TextColor);--fdToolbar_Background:var(--sapToolbar_Background);--fdToolbar_Border_Bottom:.0625rem solid var(--sapGroup_TitleBorderColor);--fdToolbar_Border_Top:.0625rem solid var(--sapPageFooter_BorderColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdToolbar_Background);border-bottom:var(--fdToolbar_Border_Bottom);height:var(--fdToolbar_Height);padding-inline:var(--fdToolbar_Padding_Left) var(--fdToolbar_Padding_Right)}.fd-toolbar:after,.fd-toolbar:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-flex:1;-ms-flex:1 auto;flex:1 auto}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;display:inline-block;-ms-flex:none;flex:none}.fd-toolbar__separator{background-color:var(--sapToolbar_SeparatorColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToolbar_Separator_Height);line-height:normal;margin-block:0;margin-block:var(--fdToolbar_Separator_Margin);margin-inline:0;padding-block:0;padding-inline:0;width:var(--fdToolbar_Separator_Width)}.fd-toolbar__separator:after,.fd-toolbar__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;--fdToolbar_Separator_Width:auto;--fdToolbar_Separator_Height:.0625rem;--fdToolbar_Separator_Margin:.1875rem;--fdToolbar_Overflow_Padding_Block:.25rem;--fdToolbar_Overflow_Padding_Inline:.5rem;max-height:50vh;max-width:var(--fdToolbar_Overflow_Max_Width);overflow:auto;padding-block:var(--fdToolbar_Overflow_Padding_Block);padding-inline:var(--fdToolbar_Overflow_Padding_Inline)}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow[class*=-compact],.fd-toolbar__overflow[class*=-condensed],[class*=-compact] .fd-toolbar__overflow:not([class*=-cozy]),[class*=-condensed] .fd-toolbar__overflow:not([class*=-cozy]){--fdToolbar_Overflow_Padding_Block:.1875rem;--fdToolbar_Overflow_Padding_Inline:.375rem}.fd-toolbar__overflow .fd-toolbar__overflow-button{margin-block:.1875rem;margin-inline:0;text-align:left;width:auto;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__overflow-form-label{margin-block:.625rem .125rem;margin-inline:0}.fd-toolbar__overflow .fd-toolbar__overflow-label{margin-block:.375rem;margin-inline:0}.fd-toolbar .fd-toolbar__title{--fdTitle_Font_Size:var(--sapGroup_Title_FontSize);--fdTitle_Color:var(--sapGroup_TitleTextColor)}.fd-toolbar--auto{--fdToolbar_Background:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{--fdToolbar_Background:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{--fdToolbar_Background:var(--fdToolbar_Transparent_Background)}.fd-toolbar--ai,.fd-toolbar--clear{--fdToolbar_Border_Bottom:none}.fd-toolbar--ai{--fdToolbar_Background:var(--fdToolbar_Transparent_Background);--fdToolbar_Padding_Left:.5rem;--fdToolbar_Padding_Right:.25rem}.fd-toolbar--ai.is-active{--fdToolbar_Background:var(--fdToolbar_Solid_Background);border-top:var(--fdToolbar_Border_Top)}.fd-toolbar--title{--fdToolbar_Height:2.75rem;--fdToolbar_Padding_Left:1rem;--fdToolbar_Background:var(--sapGroup_TitleBackground)}.fd-toolbar.fd-toolbar--title-bar{padding-block:.375rem;--fdToolbar_Height:auto;--fdToolbar_Padding_Left:.75rem;--fdToolbar_Padding_Right:.75rem}.fd-toolbar--info{color:var(--fdToolbar_Info_Color);position:relative;--fdToolbar_Height:2rem;--fdToolbar_Background:var(--sapInfobar_NonInteractive_Background)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapList_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar--active{outline:none;position:relative;--fdToolbar_Background:var(--sapInfobar_Background);--fdToolbar_Info_Color:var(--sapInfobar_TextColor)}.fd-toolbar--active.is-focus:after,.fd-toolbar--active: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--active.is-hover,.fd-toolbar--active:hover{--fdToolbar_Background:var(--sapInfobar_Hover_Background)}.fd-toolbar--active.is-active,.fd-toolbar--active:active{--fdToolbar_Background:var(--sapInfobar_Active_Background)}.fd-toolbar--active.is-focus,.fd-toolbar--active:focus{z-index:5}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--fade-in{opacity:1;-webkit-transition:visibility 0s linear 0s,opacity 1s;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{opacity:0;-webkit-transition:visibility 0s linear 1s,opacity 1ms;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar[class*=-compact],.fd-toolbar[class*=-condensed],[class*=-compact] .fd-toolbar:not([class*=-cozy]),[class*=-condensed] .fd-toolbar:not([class*=-cozy]){--fdToolbar_Height:2rem;--fdToolbar_Separator_Height:1.5rem;--fdToolbar_Overflow_Max_Width:20rem}.fd-toolbar[class*=-compact].fd-toolbar--title,.fd-toolbar[class*=-condensed].fd-toolbar--title,[class*=-compact] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title,[class*=-condensed] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title{--fdToolbar_Height:2.75rem}.fd-toolbar[class*=-compact].fd-toolbar--title-bar,.fd-toolbar[class*=-condensed].fd-toolbar--title-bar,[class*=-compact] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title-bar,[class*=-condensed] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title-bar{--fdToolbar_Height:auto}.fd-toolbar>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/toolbar.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"], dependencies: [{ kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: DynamicPortalComponent, selector: "fdk-dynamic-portal", inputs: ["domElement", "component", "template", "auto"], outputs: ["attached"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "spacerDirectives", predicate: ToolbarSpacerDirective, isSignal: true }, { propertyName: "separatorDirectives", predicate: ToolbarSeparatorComponent, isSignal: true }, { propertyName: "titleComponent", first: true, predicate: TitleToken, descendants: true }, { propertyName: "toolbarItems", predicate: i0.forwardRef(() => ToolbarItem) }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (title) {\n    <span\n        fd-title\n        role=\"heading\"\n        [headerSize]=\"4\"\n        [attr.aria-level]=\"_headingLevel\"\n        class=\"fd-toolbar__title\"\n        [id]=\"titleId\"\n        #titleElement\n    >\n        {{ title }}\n    </span>\n}\n<ng-content></ng-content>\n@if (overflownItems.length > 0) {\n    @if (!spacerUsed()) {\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n    }\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        <fd-popover-body>\n            <div class=\"fd-toolbar__overflow\">\n                @for (overflowedItem of overflownItems; track overflowedItem) {\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                }\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n}\n", styles: [".fd-toolbar{--fdToolbar_Height:2.75rem;--fdToolbar_Separator_Margin:0;--fdToolbar_Padding_Left:.5rem;--fdToolbar_Padding_Right:.5rem;--fdToolbar_Separator_Height:2rem;--fdToolbar_Overflow_Max_Width:100%;--fdToolbar_Separator_Width:.0625rem;--fdToolbar_Info_Color:var(--sapList_TextColor);--fdToolbar_Background:var(--sapToolbar_Background);--fdToolbar_Border_Bottom:.0625rem solid var(--sapGroup_TitleBorderColor);--fdToolbar_Border_Top:.0625rem solid var(--sapPageFooter_BorderColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdToolbar_Background);border-bottom:var(--fdToolbar_Border_Bottom);height:var(--fdToolbar_Height);padding-inline:var(--fdToolbar_Padding_Left) var(--fdToolbar_Padding_Right)}.fd-toolbar:after,.fd-toolbar:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-flex:1;-ms-flex:1 auto;flex:1 auto}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;display:inline-block;-ms-flex:none;flex:none}.fd-toolbar__separator{background-color:var(--sapToolbar_SeparatorColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToolbar_Separator_Height);line-height:normal;margin-block:0;margin-block:var(--fdToolbar_Separator_Margin);margin-inline:0;padding-block:0;padding-inline:0;width:var(--fdToolbar_Separator_Width)}.fd-toolbar__separator:after,.fd-toolbar__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;--fdToolbar_Separator_Width:auto;--fdToolbar_Separator_Height:.0625rem;--fdToolbar_Separator_Margin:.1875rem;--fdToolbar_Overflow_Padding_Block:.25rem;--fdToolbar_Overflow_Padding_Inline:.5rem;max-height:50vh;max-width:var(--fdToolbar_Overflow_Max_Width);overflow:auto;padding-block:var(--fdToolbar_Overflow_Padding_Block);padding-inline:var(--fdToolbar_Overflow_Padding_Inline)}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow[class*=-compact],.fd-toolbar__overflow[class*=-condensed],[class*=-compact] .fd-toolbar__overflow:not([class*=-cozy]),[class*=-condensed] .fd-toolbar__overflow:not([class*=-cozy]){--fdToolbar_Overflow_Padding_Block:.1875rem;--fdToolbar_Overflow_Padding_Inline:.375rem}.fd-toolbar__overflow .fd-toolbar__overflow-button{margin-block:.1875rem;margin-inline:0;text-align:left;width:auto;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__overflow-form-label{margin-block:.625rem .125rem;margin-inline:0}.fd-toolbar__overflow .fd-toolbar__overflow-label{margin-block:.375rem;margin-inline:0}.fd-toolbar .fd-toolbar__title{--fdTitle_Font_Size:var(--sapGroup_Title_FontSize);--fdTitle_Color:var(--sapGroup_TitleTextColor)}.fd-toolbar--auto{--fdToolbar_Background:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{--fdToolbar_Background:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{--fdToolbar_Background:var(--fdToolbar_Transparent_Background)}.fd-toolbar--ai,.fd-toolbar--clear{--fdToolbar_Border_Bottom:none}.fd-toolbar--ai{--fdToolbar_Background:var(--fdToolbar_Transparent_Background);--fdToolbar_Padding_Left:.5rem;--fdToolbar_Padding_Right:.25rem}.fd-toolbar--ai.is-active{--fdToolbar_Background:var(--fdToolbar_Solid_Background);border-top:var(--fdToolbar_Border_Top)}.fd-toolbar--title{--fdToolbar_Height:2.75rem;--fdToolbar_Padding_Left:1rem;--fdToolbar_Background:var(--sapGroup_TitleBackground)}.fd-toolbar.fd-toolbar--title-bar{padding-block:.375rem;--fdToolbar_Height:auto;--fdToolbar_Padding_Left:.75rem;--fdToolbar_Padding_Right:.75rem}.fd-toolbar--info{color:var(--fdToolbar_Info_Color);position:relative;--fdToolbar_Height:2rem;--fdToolbar_Background:var(--sapInfobar_NonInteractive_Background)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapList_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar--active{outline:none;position:relative;--fdToolbar_Background:var(--sapInfobar_Background);--fdToolbar_Info_Color:var(--sapInfobar_TextColor)}.fd-toolbar--active.is-focus:after,.fd-toolbar--active: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--active.is-hover,.fd-toolbar--active:hover{--fdToolbar_Background:var(--sapInfobar_Hover_Background)}.fd-toolbar--active.is-active,.fd-toolbar--active:active{--fdToolbar_Background:var(--sapInfobar_Active_Background)}.fd-toolbar--active.is-focus,.fd-toolbar--active:focus{z-index:5}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--fade-in{opacity:1;-webkit-transition:visibility 0s linear 0s,opacity 1s;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{opacity:0;-webkit-transition:visibility 0s linear 1s,opacity 1ms;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar[class*=-compact],.fd-toolbar[class*=-condensed],[class*=-compact] .fd-toolbar:not([class*=-cozy]),[class*=-condensed] .fd-toolbar:not([class*=-cozy]){--fdToolbar_Height:2rem;--fdToolbar_Separator_Height:1.5rem;--fdToolbar_Overflow_Max_Width:20rem}.fd-toolbar[class*=-compact].fd-toolbar--title,.fd-toolbar[class*=-condensed].fd-toolbar--title,[class*=-compact] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title,[class*=-condensed] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title{--fdToolbar_Height:2.75rem}.fd-toolbar[class*=-compact].fd-toolbar--title-bar,.fd-toolbar[class*=-condensed].fd-toolbar--title-bar,[class*=-compact] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title-bar,[class*=-condensed] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title-bar{--fdToolbar_Height:auto}.fd-toolbar>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/toolbar.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"], dependencies: [{ kind: "directive", type: ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: ToolbarSeparatorComponent, selector: "fd-toolbar-separator" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"] }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class", "id"], exportAs: ["fd-button"] }, { kind: "component", type: DynamicPortalComponent, selector: "fdk-dynamic-portal", inputs: ["domElement", "component", "template", "auto"], outputs: ["attached"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     applyCssClass,
@@ -562,7 +559,7 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", Array)
 ], ToolbarComponent.prototype, "buildComponentCssClass", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-toolbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         contentDensityObserverProviders({
@@ -580,7 +577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         DynamicPortalComponent,
                         TitleComponent
                     ], template: "@if (title) {\n    <span\n        fd-title\n        role=\"heading\"\n        [headerSize]=\"4\"\n        [attr.aria-level]=\"_headingLevel\"\n        class=\"fd-toolbar__title\"\n        [id]=\"titleId\"\n        #titleElement\n    >\n        {{ title }}\n    </span>\n}\n<ng-content></ng-content>\n@if (overflownItems.length > 0) {\n    @if (!spacerUsed()) {\n        <fd-toolbar-spacer></fd-toolbar-spacer>\n    }\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        <fd-popover-body>\n            <div class=\"fd-toolbar__overflow\">\n                @for (overflowedItem of overflownItems; track overflowedItem) {\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                }\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n}\n", styles: [".fd-toolbar{--fdToolbar_Height:2.75rem;--fdToolbar_Separator_Margin:0;--fdToolbar_Padding_Left:.5rem;--fdToolbar_Padding_Right:.5rem;--fdToolbar_Separator_Height:2rem;--fdToolbar_Overflow_Max_Width:100%;--fdToolbar_Separator_Width:.0625rem;--fdToolbar_Info_Color:var(--sapList_TextColor);--fdToolbar_Background:var(--sapToolbar_Background);--fdToolbar_Border_Bottom:.0625rem solid var(--sapGroup_TitleBorderColor);--fdToolbar_Border_Top:.0625rem solid var(--sapPageFooter_BorderColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fdToolbar_Background);border-bottom:var(--fdToolbar_Border_Bottom);height:var(--fdToolbar_Height);padding-inline:var(--fdToolbar_Padding_Left) var(--fdToolbar_Padding_Right)}.fd-toolbar:after,.fd-toolbar:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-flex:1;-ms-flex:1 auto;flex:1 auto}.fd-toolbar__spacer:after,.fd-toolbar__spacer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__spacer--fixed{-webkit-box-flex:0;display:inline-block;-ms-flex:none;flex:none}.fd-toolbar__separator{background-color:var(--sapToolbar_SeparatorColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdToolbar_Separator_Height);line-height:normal;margin-block:0;margin-block:var(--fdToolbar_Separator_Margin);margin-inline:0;padding-block:0;padding-inline:0;width:var(--fdToolbar_Separator_Width)}.fd-toolbar__separator:after,.fd-toolbar__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;--fdToolbar_Separator_Width:auto;--fdToolbar_Separator_Height:.0625rem;--fdToolbar_Separator_Margin:.1875rem;--fdToolbar_Overflow_Padding_Block:.25rem;--fdToolbar_Overflow_Padding_Inline:.5rem;max-height:50vh;max-width:var(--fdToolbar_Overflow_Max_Width);overflow:auto;padding-block:var(--fdToolbar_Overflow_Padding_Block);padding-inline:var(--fdToolbar_Overflow_Padding_Inline)}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow[class*=-compact],.fd-toolbar__overflow[class*=-condensed],[class*=-compact] .fd-toolbar__overflow:not([class*=-cozy]),[class*=-condensed] .fd-toolbar__overflow:not([class*=-cozy]){--fdToolbar_Overflow_Padding_Block:.1875rem;--fdToolbar_Overflow_Padding_Inline:.375rem}.fd-toolbar__overflow .fd-toolbar__overflow-button{margin-block:.1875rem;margin-inline:0;text-align:left;width:auto;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;max-width:100%}.fd-toolbar__overflow .fd-toolbar__overflow-form-label{margin-block:.625rem .125rem;margin-inline:0}.fd-toolbar__overflow .fd-toolbar__overflow-label{margin-block:.375rem;margin-inline:0}.fd-toolbar .fd-toolbar__title{--fdTitle_Font_Size:var(--sapGroup_Title_FontSize);--fdTitle_Color:var(--sapGroup_TitleTextColor)}.fd-toolbar--auto{--fdToolbar_Background:var(--fdToolbar_Auto_Background)}.fd-toolbar--solid{--fdToolbar_Background:var(--fdToolbar_Solid_Background)}.fd-toolbar--transparent{--fdToolbar_Background:var(--fdToolbar_Transparent_Background)}.fd-toolbar--ai,.fd-toolbar--clear{--fdToolbar_Border_Bottom:none}.fd-toolbar--ai{--fdToolbar_Background:var(--fdToolbar_Transparent_Background);--fdToolbar_Padding_Left:.5rem;--fdToolbar_Padding_Right:.25rem}.fd-toolbar--ai.is-active{--fdToolbar_Background:var(--fdToolbar_Solid_Background);border-top:var(--fdToolbar_Border_Top)}.fd-toolbar--title{--fdToolbar_Height:2.75rem;--fdToolbar_Padding_Left:1rem;--fdToolbar_Background:var(--sapGroup_TitleBackground)}.fd-toolbar.fd-toolbar--title-bar{padding-block:.375rem;--fdToolbar_Height:auto;--fdToolbar_Padding_Left:.75rem;--fdToolbar_Padding_Right:.75rem}.fd-toolbar--info{color:var(--fdToolbar_Info_Color);position:relative;--fdToolbar_Height:2rem;--fdToolbar_Background:var(--sapInfobar_NonInteractive_Background)}.fd-toolbar--info [class*=sap-icon]{color:var(--sapList_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar--active{outline:none;position:relative;--fdToolbar_Background:var(--sapInfobar_Background);--fdToolbar_Info_Color:var(--sapInfobar_TextColor)}.fd-toolbar--active.is-focus:after,.fd-toolbar--active: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--active.is-hover,.fd-toolbar--active:hover{--fdToolbar_Background:var(--sapInfobar_Hover_Background)}.fd-toolbar--active.is-active,.fd-toolbar--active:active{--fdToolbar_Background:var(--sapInfobar_Active_Background)}.fd-toolbar--active.is-focus,.fd-toolbar--active:focus{z-index:5}.fd-toolbar--active.is-focus:after,.fd-toolbar--active:focus:after{border-color:var(--fdToolbar_Info_Outline_Color)}.fd-toolbar--fade-in{opacity:1;-webkit-transition:visibility 0s linear 0s,opacity 1s;transition:visibility 0s linear 0s,opacity 1s;visibility:visible}.fd-toolbar--fade-out{opacity:0;-webkit-transition:visibility 0s linear 1s,opacity 1ms;transition:visibility 0s linear 1s,opacity 1ms;visibility:hidden}.fd-toolbar[class*=-compact],.fd-toolbar[class*=-condensed],[class*=-compact] .fd-toolbar:not([class*=-cozy]),[class*=-condensed] .fd-toolbar:not([class*=-cozy]){--fdToolbar_Height:2rem;--fdToolbar_Separator_Height:1.5rem;--fdToolbar_Overflow_Max_Width:20rem}.fd-toolbar[class*=-compact].fd-toolbar--title,.fd-toolbar[class*=-condensed].fd-toolbar--title,[class*=-compact] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title,[class*=-condensed] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title{--fdToolbar_Height:2.75rem}.fd-toolbar[class*=-compact].fd-toolbar--title-bar,.fd-toolbar[class*=-condensed].fd-toolbar--title-bar,[class*=-compact] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title-bar,[class*=-condensed] .fd-toolbar:not([class*=-cozy]).fd-toolbar--title-bar{--fdToolbar_Height:auto}.fd-toolbar>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n/*! Bundled license information:\n\nfundamental-styles/dist/toolbar.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }, { type: i0.DestroyRef }, { type: i2.ResizeObserverService }, { type: i0.Injector }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }, { type: i0.DestroyRef }, { type: i2.ResizeObserverService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
@@ -620,13 +617,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             }], titleElement: [{
                 type: ViewChild,
                 args: ['titleElement', { read: ElementRef }]
+            }], toolbarItems: [{
+                type: ContentChildren,
+                args: [forwardRef(() => ToolbarItem)]
+            }], titleComponent: [{
+                type: ContentChild,
+                args: [TitleToken]
             }], _role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], toolbarItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToolbarItem), { ...{ descendants: true }, isSignal: true }] }], titleComponent: [{
-                type: ContentChild,
-                args: [TitleToken]
-            }], spacerDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToolbarSpacerDirective), { isSignal: true }] }], separatorDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToolbarSeparatorComponent), { isSignal: true }] }], buildComponentCssClass: [] } });
+            }], buildComponentCssClass: [] } });
 
 const components = [
     ToolbarComponent,
@@ -644,8 +644,8 @@ const components = [
  * Use direct imports of components and directives.
  */
 class ToolbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: ToolbarModule, imports: [ContentDensityModule, ToolbarComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: ToolbarModule, imports: [ContentDensityModule, ToolbarComponent,
             ToolbarItemDirective,
             ToolbarSpacerDirective,
             ToolbarSeparatorComponent,
@@ -662,9 +662,9 @@ class ToolbarModule {
             ToolbarOverflowButtonDirective,
             ToolbarOverflowButtonMenuDirective,
             DeprecatedToolbarSizeDirective, ContentDensityModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarModule, imports: [ContentDensityModule, ToolbarComponent, ContentDensityModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarModule, imports: [ContentDensityModule, ToolbarComponent, ContentDensityModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ToolbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ContentDensityModule, ...components],