@fundamental-ngx/core 0.45.1 → 0.46.0-rc.1

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

@@ -1,24 +1,41 @@
 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 * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from '@fundamental-ngx/core/button';
-import { ButtonModule } from '@fundamental-ngx/core/button';
-import * as i5 from '@fundamental-ngx/core/popover';
-import { PopoverModule } from '@fundamental-ngx/core/popover';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, HostBinding, Input, inject, ElementRef, Optional, SkipSelf, Inject, ViewChild, ContentChildren, forwardRef, ContentChild, isDevMode, NgModule } from '@angular/core';
 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, applyCssClass, DynamicPortalComponent } from '@fundamental-ngx/cdk/utils';
+import { OVERFLOW_PRIORITY_SCORE, DynamicPortalComponent, applyCssClass } from '@fundamental-ngx/cdk/utils';
 import { BehaviorSubject, combineLatest, map, startWith } from 'rxjs';
 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';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i4 from '@fundamental-ngx/core/button';
+import { ButtonModule } from '@fundamental-ngx/core/button';
+import * as i3 from '@fundamental-ngx/core/popover';
+import { PopoverModule } from '@fundamental-ngx/core/popover';
+import { NgIf, NgFor } from '@angular/common';
 
 class ToolbarItem {
 }
 
+class ToolbarSeparatorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fd-toolbar-separator',
+                    template: '',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'fd-toolbar__separator'
+                    },
+                    standalone: true
+                }]
+        }] });
+
 class ToolbarSpacerDirective {
     constructor() {
         /** Determines the width of spacer when fixed property is set to true
@@ -40,13 +57,14 @@ class ToolbarSpacerDirective {
         return `fd-toolbar__spacer ${this.fixed ? 'fd-toolbar__spacer--fixed' : ''} ${this.class}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarSpacerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'fd-toolbar-spacer'
+                    selector: 'fd-toolbar-spacer',
+                    standalone: true
                 }]
         }], propDecorators: { width: [{
                 type: HostBinding,
@@ -62,23 +80,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 args: ['attr.class']
             }] } });
 
-class ToolbarSeparatorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", 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: "16.1.0", ngImport: i0, type: ToolbarSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fd-toolbar-separator',
-                    template: '',
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'fd-toolbar__separator'
-                    }
-                }]
-        }] });
-
 const ELEMENT_MARGIN = 8;
 const OVERFLOW_SPACE = 50 + 2 * ELEMENT_MARGIN;
 const MAX_CONTENT_SIZE = 99999999;
@@ -102,7 +103,7 @@ class ToolbarComponent {
     }
     /** @hidden */
     get _toolbarWidth() {
-        return this.toolbar.nativeElement.clientWidth - OVERFLOW_SPACE;
+        return this.elementRef.nativeElement.clientWidth - OVERFLOW_SPACE;
     }
     /** @hidden */
     constructor(_cd, _contentDensityObserver, _destroyRef, resizeObserverService, _dynamicPageHeader) {
@@ -130,6 +131,10 @@ class ToolbarComponent {
         this.tabindex = -1;
         /** @hidden */
         this.overflownItems = [];
+        /** HTML Element Reference. */
+        this.elementRef = inject(ElementRef);
+        /** @hidden */
+        this._role = 'toolbar';
         /** @hidden */
         this._titleComponent$ = new BehaviorSubject(null);
         /** @hidden */
@@ -154,7 +159,7 @@ class ToolbarComponent {
     /** @hidden */
     ngAfterViewInit() {
         this.overflowItems$ = combineLatest([
-            this.resizeObserverService.observe(this.toolbar.nativeElement).pipe(map(() => this._toolbarWidth)),
+            this.resizeObserverService.observe(this.elementRef.nativeElement).pipe(map(() => this._toolbarWidth)),
             this.toolbarItems.changes.pipe(startWith(this.toolbarItems), map((toolbarItems) => toolbarItems.toArray())),
             this._titleComponent$.pipe(map((titleComponent) => {
                 if (!titleComponent) {
@@ -222,10 +227,6 @@ class ToolbarComponent {
     detectChanges() {
         this._cd.detectChanges();
     }
-    /** @hidden */
-    get elementRef() {
-        return this.toolbar;
-    }
     /** Method triggering collapsible toolbar  */
     updateCollapsibleItems() {
         this._refreshOverflow$.next();
@@ -336,11 +337,11 @@ class ToolbarComponent {
             .reduce((arr, i) => arr.concat(i.group), []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", 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: "14.0.0", version: "16.1.0", type: ToolbarComponent, selector: "fd-toolbar", inputs: { titleId: "titleId", class: "class", shouldOverflow: "shouldOverflow", fdType: "fdType", title: "title", active: "active", clearBorder: "clearBorder", forceOverflow: "forceOverflow", tabindex: "tabindex" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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", 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
             })
-        ], 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 ToolbarItem; }) }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true }], ngImport: i0, template: "<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", styles: ["/*!\n * Fundamental Library Styles v0.30.2-rc.6\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{--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:.0625rem solid var(--sapGroup_TitleBorderColor);-webkit-box-sizing:border-box;align-items:center;background-color:var(--fdToolbar_Background);border:0;border-bottom:var(--fdToolbar_Border);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.5rem;height:var(--fdToolbar_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding-left:var(--fdToolbar_Padding_Left);padding-right:var(--fdToolbar_Padding_Right)}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar[dir=rtl],[dir=rtl] .fd-toolbar{padding-left:var(--fdToolbar_Padding_Right);padding-right:var(--fdToolbar_Padding_Left)}.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:var(--fdToolbar_Separator_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdToolbar_Separator_Margin);padding:0;width:var(--fdToolbar_Separator_Width)}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;--fdToolbar_Separator_Width:auto;--fdToolbar_Separator_Height:.0625rem;--fdToolbar_Separator_Margin:.1875rem 0;--fdToolbar_Overflow_Padding:.25rem .5rem;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:var(--fdToolbar_Overflow_Max_Width);overflow:auto;padding:0;padding:var(--fdToolbar_Overflow_Padding)}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{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:.1875rem .375rem}.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__overflow-form-label{margin:.625rem 0 .125rem}.fd-toolbar__overflow .fd-toolbar__overflow-label{margin:.375rem 0}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.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--clear{--fdToolbar_Border:none}.fd-toolbar--title{--fdToolbar_Height:2.75rem;--fdToolbar_Padding_Left:1rem;--fdToolbar_Background:var(--sapGroup_TitleBackground)}.fd-toolbar--info{--fdToolbar_Height:2rem;--fdToolbar_Background:var(--sapInfobar_NonInteractive_Background);color:var(--fdToolbar_Info_Color);position:relative}.fd-toolbar--info [class*=sap-icon]{color:var(--sapList_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar--active{--fdToolbar_Background:var(--sapInfobar_Background);--fdToolbar_Info_Color:var(--sapInfobar_TextColor);outline:none;position:relative}.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{-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[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>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DynamicPortalComponent, selector: "fdk-dynamic-portal", inputs: ["domElement", "component", "template", "auto"], outputs: ["attached"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     applyCssClass,
@@ -354,7 +355,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         contentDensityObserverProviders({
                             defaultContentDensity: ContentDensityMode.COMPACT
                         })
-                    ], 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"] }]
+                    ], standalone: true, imports: [
+                        NgIf,
+                        ToolbarSpacerDirective,
+                        ToolbarSeparatorComponent,
+                        PopoverModule,
+                        ButtonModule,
+                        NgFor,
+                        DynamicPortalComponent
+                    ], template: "<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", styles: ["/*!\n * Fundamental Library Styles v0.30.2-rc.6\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{--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:.0625rem solid var(--sapGroup_TitleBorderColor);-webkit-box-sizing:border-box;align-items:center;background-color:var(--fdToolbar_Background);border:0;border-bottom:var(--fdToolbar_Border);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.5rem;height:var(--fdToolbar_Height);line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding-left:var(--fdToolbar_Padding_Left);padding-right:var(--fdToolbar_Padding_Right)}.fd-toolbar:after,.fd-toolbar:before{box-sizing:inherit;font-size:inherit}.fd-toolbar[dir=rtl],[dir=rtl] .fd-toolbar{padding-left:var(--fdToolbar_Padding_Right);padding-right:var(--fdToolbar_Padding_Left)}.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:var(--fdToolbar_Separator_Height);line-height:var(--sapContent_LineHeight);margin:0;margin:var(--fdToolbar_Separator_Margin);padding:0;width:var(--fdToolbar_Separator_Width)}.fd-toolbar__separator:after,.fd-toolbar__separator:before{box-sizing:inherit;font-size:inherit}.fd-toolbar__overflow{-webkit-box-sizing:border-box;--fdToolbar_Separator_Width:auto;--fdToolbar_Separator_Height:.0625rem;--fdToolbar_Separator_Margin:.1875rem 0;--fdToolbar_Overflow_Padding:.25rem .5rem;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:var(--fdToolbar_Overflow_Max_Width);overflow:auto;padding:0;padding:var(--fdToolbar_Overflow_Padding)}.fd-toolbar__overflow:after,.fd-toolbar__overflow:before{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:.1875rem .375rem}.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__overflow-form-label{margin:.625rem 0 .125rem}.fd-toolbar__overflow .fd-toolbar__overflow-label{margin:.375rem 0}.fd-toolbar__title{color:var(--sapGroup_TitleTextColor);font-size:var(--sapGroup_Title_FontSize)}.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--clear{--fdToolbar_Border:none}.fd-toolbar--title{--fdToolbar_Height:2.75rem;--fdToolbar_Padding_Left:1rem;--fdToolbar_Background:var(--sapGroup_TitleBackground)}.fd-toolbar--info{--fdToolbar_Height:2rem;--fdToolbar_Background:var(--sapInfobar_NonInteractive_Background);color:var(--fdToolbar_Info_Color);position:relative}.fd-toolbar--info [class*=sap-icon]{color:var(--sapList_TextColor);font-size:1rem;height:1rem;line-height:1rem}.fd-toolbar--active{--fdToolbar_Background:var(--sapInfobar_Background);--fdToolbar_Info_Color:var(--sapInfobar_TextColor);outline:none;position:relative}.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{-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[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>*{flex-shrink:0}fdk-dynamic-portal:not(:last-of-type) [fd-toolbar-item]{margin-bottom:.25rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }, { type: i0.DestroyRef }, { type: i2.ResizeObserverService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -380,9 +389,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 type: Input
             }], tabindex: [{
                 type: Input
-            }], toolbar: [{
-                type: ViewChild,
-                args: ['toolbar']
+            }], ariaLabel: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaLabelledBy: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
             }], titleElement: [{
                 type: ViewChild,
                 args: ['titleElement']
@@ -392,6 +408,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             }], titleComponent: [{
                 type: ContentChild,
                 args: [TitleToken]
+            }], _role: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], buildComponentCssClass: [] } });
 
 class ToolbarItemDirective {
@@ -430,13 +449,14 @@ class ToolbarItemDirective {
         this.fdOverflowGroup = 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: { fdOverflowPriority: "fdOverflowPriority", fdOverflowGroup: "fdOverflowGroup" }, providers: [{ provide: ToolbarItem, useExisting: forwardRef(() => ToolbarItemDirective) }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]',
-                    providers: [{ provide: ToolbarItem, useExisting: forwardRef(() => ToolbarItemDirective) }]
+                    providers: [{ provide: ToolbarItem, useExisting: forwardRef(() => ToolbarItemDirective) }],
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fdOverflowPriority: [{
                 type: Input
@@ -446,7 +466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 
 class ToolbarLabelDirective extends ToolbarItemDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: ToolbarLabelDirective, selector: "[fd-toolbar-label]", host: { classAttribute: "fd-label fd-toolbar__overflow-label" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", 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: "16.1.0", ngImport: i0, type: ToolbarLabelDirective, decorators: [{
             type: Directive,
@@ -455,13 +475,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     selector: '[fd-toolbar-label]',
                     host: {
                         class: 'fd-label fd-toolbar__overflow-label'
-                    }
+                    },
+                    standalone: true
                 }]
         }] });
 
 class ToolbarOverflowButtonDirective extends ToolbarItemDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarOverflowButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: ToolbarOverflowButtonDirective, selector: "[fdToolbarOverflowButton], [fd-toolbar-overflow-button]", host: { classAttribute: "fd-toolbar__overflow-button" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", 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: "16.1.0", ngImport: i0, type: ToolbarOverflowButtonDirective, decorators: [{
             type: Directive,
@@ -469,13 +490,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     selector: '[fdToolbarOverflowButton], [fd-toolbar-overflow-button]',
                     host: {
                         class: 'fd-toolbar__overflow-button'
-                    }
+                    },
+                    standalone: true
                 }]
         }] });
 
 class ToolbarOverflowButtonMenuDirective extends ToolbarItemDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarOverflowButtonMenuDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: ToolbarOverflowButtonMenuDirective, selector: "[fdToolbarOverflowButtonMenu], [fd-toolbar-overflow-button-menu]", host: { classAttribute: "fd-toolbar__overflow-button--menu" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", 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: "16.1.0", ngImport: i0, type: ToolbarOverflowButtonMenuDirective, decorators: [{
             type: Directive,
@@ -483,13 +505,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     selector: '[fdToolbarOverflowButtonMenu], [fd-toolbar-overflow-button-menu]',
                     host: {
                         class: 'fd-toolbar__overflow-button--menu'
-                    }
+                    },
+                    standalone: true
                 }]
         }] });
 
 class ToolbarFormLabelDirective extends ToolbarItemDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarFormLabelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarFormLabelDirective, decorators: [{
             type: Directive,
@@ -498,7 +521,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     selector: '[fd-toolbar-form-label]',
                     host: {
                         class: 'fd-form-label fd-toolbar__overflow-form-label fd-toolbar__overflow-form-label--text'
-                    }
+                    },
+                    standalone: true
                 }]
         }] });
 
@@ -537,7 +561,7 @@ class DeprecatedToolbarSizeDirective extends BehaviorSubject {
         this.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DeprecatedToolbarSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: DeprecatedToolbarSizeDirective, selector: "fd-toolbar[size]", inputs: { size: "size" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: DeprecatedToolbarSizeDirective, isStandalone: true, selector: "fd-toolbar[size]", inputs: { size: "size" }, providers: [
             {
                 provide: CONTENT_DENSITY_DIRECTIVE,
                 useExisting: forwardRef(() => DeprecatedToolbarSizeDirective)
@@ -554,7 +578,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                             provide: CONTENT_DENSITY_DIRECTIVE,
                             useExisting: forwardRef(() => DeprecatedToolbarSizeDirective)
                         }
-                    ]
+                    ],
+                    standalone: true
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { size: [{
                 type: Input
@@ -573,7 +598,7 @@ const components = [
 ];
 class ToolbarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: ToolbarModule, declarations: [ToolbarComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.0", ngImport: i0, type: ToolbarModule, imports: [ContentDensityModule, ToolbarComponent,
             ToolbarItemDirective,
             ToolbarSpacerDirective,
             ToolbarSeparatorComponent,
@@ -581,7 +606,7 @@ class ToolbarModule {
             ToolbarLabelDirective,
             ToolbarOverflowButtonDirective,
             ToolbarOverflowButtonMenuDirective,
-            DeprecatedToolbarSizeDirective], imports: [CommonModule, ButtonModule, PopoverModule, ContentDensityModule, DynamicPortalComponent], exports: [ToolbarComponent,
+            DeprecatedToolbarSizeDirective], exports: [ToolbarComponent,
             ToolbarItemDirective,
             ToolbarSpacerDirective,
             ToolbarSeparatorComponent,
@@ -590,13 +615,12 @@ class ToolbarModule {
             ToolbarOverflowButtonDirective,
             ToolbarOverflowButtonMenuDirective,
             DeprecatedToolbarSizeDirective, ContentDensityModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarModule, imports: [CommonModule, ButtonModule, PopoverModule, ContentDensityModule, DynamicPortalComponent, ContentDensityModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarModule, imports: [ContentDensityModule, ToolbarComponent, ContentDensityModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ToolbarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [...components],
-                    imports: [CommonModule, ButtonModule, PopoverModule, ContentDensityModule, DynamicPortalComponent],
+                    imports: [ContentDensityModule, ...components],
                     exports: [...components, ContentDensityModule]
                 }]
         }] });