@fundamental-ngx/btp 0.46.0-rc.100

package/fesm2022/fundamental-ngx-btp-tool-header.mjs

@@ -0,0 +1,717 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, Directive, Input, Component, EventEmitter, Output, DestroyRef, ContentChildren, signal, computed, NgZone, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, HostListener } from '@angular/core';
+import { ButtonComponent } from '@fundamental-ngx/core/button';
+import { BasePopoverClass, PopoverBodyComponent, PopoverComponent, PopoverControlComponent, PopoverBodyDirective } from '@fundamental-ngx/core/popover';
+import { FD_PRODUCT_SWITCH_COMPONENT, ProductSwitchComponent, ProductSwitchButtonDirective } from '@fundamental-ngx/core/product-switch';
+import { FdTranslatePipe } from '@fundamental-ngx/i18n';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NgIf, NgTemplateOutlet, NgForOf, AsyncPipe } from '@angular/common';
+import { NavigationMenuComponent, NavigationMenuItemComponent, NavigationMenuPopoverComponent, NavigationMenuPopoverControlDirective } from '@fundamental-ngx/btp/navigation-menu';
+import { SearchFieldComponent } from '@fundamental-ngx/btp/search-field';
+import { FD_PRODUCT_SWITCH_COMPONENT as FD_PRODUCT_SWITCH_COMPONENT$1, FocusableListDirective, FocusableItemDirective } from '@fundamental-ngx/core';
+import * as i1 from '@fundamental-ngx/core/content-density';
+import { contentDensityObserverProviders, ContentDensityDirective, ContentDensityMode } from '@fundamental-ngx/core/content-density';
+import { IconComponent } from '@fundamental-ngx/core/icon';
+import { MenuTriggerDirective, MenuComponent, MenuItemComponent, MenuInteractiveComponent, MenuTitleDirective, MenuAddonDirective, GlyphMenuAddonDirective } from '@fundamental-ngx/core/menu';
+import { OverflowLayoutComponent, OverflowLayoutItemDirective, OverflowItemRefDirective, OverflowExpandDirective } from '@fundamental-ngx/core/overflow-layout';
+import { startWith, map, BehaviorSubject, combineLatest, first, distinctUntilChanged } from 'rxjs';
+import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { RtlService, ResponsiveBreakpoints, ResizeObserverService } from '@fundamental-ngx/cdk/utils';
+
+let itemCounter = 0;
+class ToolHeaderButtonDirective {
+    /**
+     * Whether the button has a badge.
+     * @param hasBadge
+     */
+    set hasBadge(hasBadge) {
+        if (hasBadge) {
+            if (!this._badge) {
+                this._badge = this.renderer.createElement('span');
+                this.renderer.addClass(this._badge, 'fd-button__badge');
+                this.renderer.setAttribute(this._badge, 'id', this._badgeId);
+                this.renderer.appendChild(this.elementRef.nativeElement, this._badge);
+            }
+        }
+        else {
+            if (this._badge) {
+                this.renderer.removeChild(this.elementRef.nativeElement, this._badge);
+                this._badge = undefined;
+            }
+        }
+    }
+    /** @hidden */
+    constructor() {
+        /** @hidden */
+        this.elementRef = inject(ElementRef);
+        /** @hidden */
+        this._badgeId = `fdbToolHeaderButton-badge-${itemCounter++}`;
+        /** @hidden */
+        this.renderer = inject(Renderer2);
+        inject(ButtonComponent, { host: true }).fdType = 'transparent';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ToolHeaderButtonDirective, isStandalone: true, selector: "[fd-button][fdbToolHeaderButton]", inputs: { hasBadge: "hasBadge" }, host: { classAttribute: "fd-button--tool-header" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fd-button][fdbToolHeaderButton]',
+                    host: {
+                        class: 'fd-button--tool-header'
+                    },
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { hasBadge: [{
+                type: Input
+            }] } });
+
+class ToolHeaderProductSwitchComponent extends BasePopoverClass {
+    constructor() {
+        super(...arguments);
+        /** Placement of a popover. */
+        this.placement = 'bottom-end';
+        /** Whether the product switch is disabled. */
+        this.disabled = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderProductSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: ToolHeaderProductSwitchComponent, isStandalone: true, selector: "fdb-tool-header-product-switch", inputs: { placement: "placement", disabled: "disabled" }, providers: [
+            {
+                provide: FD_PRODUCT_SWITCH_COMPONENT,
+                useExisting: ToolHeaderProductSwitchComponent
+            }
+        ], usesInheritance: true, ngImport: i0, template: `
+        <fd-product-switch
+            [placement]="placement"
+            [closeOnEscapeKey]="closeOnEscapeKey"
+            [closeOnOutsideClick]="closeOnOutsideClick"
+            [(isOpen)]="isOpen"
+            (isOpenChange)="isOpenChange.emit($event)"
+            [disabled]="disabled"
+            [triggers]="triggers"
+            [focusTrapped]="false"
+            [focusAutoCapture]="true"
+            [noArrow]="noArrow"
+            [disableScrollbar]="true"
+        >
+            <button
+                *fdProductSwitchButton
+                fd-button
+                fdbToolHeaderButton
+                [attr.aria-label]="'coreProductSwitch.ariaLabel' | fdTranslate"
+                [attr.title]="'coreProductSwitch.ariaLabel' | fdTranslate"
+                glyph="grid"
+                fdType="transparent"
+            ></button>
+            <ng-content></ng-content>
+        </fd-product-switch>
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "directive", type: ToolHeaderButtonDirective, selector: "[fd-button][fdbToolHeaderButton]", inputs: ["hasBadge"] }, { kind: "component", type: ProductSwitchComponent, selector: "fd-product-switch", inputs: ["placement", "disabled"] }, { kind: "directive", type: ProductSwitchButtonDirective, selector: "[fdProductSwitchButton]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderProductSwitchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fdb-tool-header-product-switch',
+                    imports: [
+                        ButtonComponent,
+                        FdTranslatePipe,
+                        PopoverBodyComponent,
+                        PopoverComponent,
+                        PopoverControlComponent,
+                        ToolHeaderButtonDirective,
+                        ProductSwitchComponent,
+                        ProductSwitchButtonDirective
+                    ],
+                    template: `
+        <fd-product-switch
+            [placement]="placement"
+            [closeOnEscapeKey]="closeOnEscapeKey"
+            [closeOnOutsideClick]="closeOnOutsideClick"
+            [(isOpen)]="isOpen"
+            (isOpenChange)="isOpenChange.emit($event)"
+            [disabled]="disabled"
+            [triggers]="triggers"
+            [focusTrapped]="false"
+            [focusAutoCapture]="true"
+            [noArrow]="noArrow"
+            [disableScrollbar]="true"
+        >
+            <button
+                *fdProductSwitchButton
+                fd-button
+                fdbToolHeaderButton
+                [attr.aria-label]="'coreProductSwitch.ariaLabel' | fdTranslate"
+                [attr.title]="'coreProductSwitch.ariaLabel' | fdTranslate"
+                glyph="grid"
+                fdType="transparent"
+            ></button>
+            <ng-content></ng-content>
+        </fd-product-switch>
+    `,
+                    providers: [
+                        {
+                            provide: FD_PRODUCT_SWITCH_COMPONENT,
+                            useExisting: ToolHeaderProductSwitchComponent
+                        }
+                    ],
+                    standalone: true
+                }]
+        }], propDecorators: { placement: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class ToolHeaderActionDirective {
+    /** @hidden */
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        /**
+         * Whether the action should have a separator next to it
+         */
+        this.hasSeparator = false;
+        /**
+         * Event emitted when the action is clicked when in overflow mode.
+         **/
+        this.clicked = new EventEmitter();
+        /**
+         * Function to be called when the action is clicked
+         * when in overflow mode.
+         **/
+        this.clickCallback = () => this.clicked.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderActionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ToolHeaderActionDirective, isStandalone: true, selector: "[fdbToolHeaderAction]", inputs: { glyph: "glyph", label: "label", hasSeparator: "hasSeparator", forceVisibility: "forceVisibility" }, outputs: { clicked: "clicked" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdbToolHeaderAction]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { glyph: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input,
+                args: [{ required: true }]
+            }], hasSeparator: [{
+                type: Input
+            }], forceVisibility: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
+/* eslint-disable @angular-eslint/no-input-rename */
+class ToolHeaderActionsDirective {
+    /**
+     * Actions to be displayed in the header.
+     */
+    set actions(actions) {
+        this._inputActions$.next(actions.reduce((acc, actionOrActionGroup, index) => {
+            if (Array.isArray(actionOrActionGroup)) {
+                acc.push(...actionOrActionGroup);
+                if (index !== actions.length - 1) {
+                    acc[acc.length - 1].hasSeparator = true;
+                }
+            }
+            else {
+                acc.push(actionOrActionGroup);
+            }
+            return acc;
+        }, []));
+    }
+    /** @hidden */
+    set _actionsFromContent(actions) {
+        if (this._contentActionsSubscription) {
+            this._contentActionsSubscription.unsubscribe();
+            this._contentActionsSubscription = undefined;
+        }
+        this._contentActionsSubscription = actions.changes
+            .pipe(startWith(actions), map((ql) => ql.toArray()), takeUntilDestroyed(this._destroyRef))
+            .subscribe((_actions) => {
+            this._contentActions$.next(_actions);
+        });
+    }
+    /** @hidden */
+    constructor() {
+        /** @hidden */
+        this._contentActions$ = new BehaviorSubject([]);
+        /** @hidden */
+        this._inputActions$ = new BehaviorSubject([]);
+        /** @hidden */
+        this._destroyRef = inject(DestroyRef);
+        this._actions = toSignal(combineLatest([this._contentActions$, this._inputActions$]).pipe(map(([contentActions, inputActions]) => [...contentActions, ...inputActions])), { requireSync: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ToolHeaderActionsDirective, isStandalone: true, selector: "fdb-tool-header-actions", inputs: { actions: "actions" }, queries: [{ propertyName: "_actionsFromContent", predicate: ToolHeaderActionDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'fdb-tool-header-actions',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { actions: [{
+                type: Input
+            }], _actionsFromContent: [{
+                type: ContentChildren,
+                args: [ToolHeaderActionDirective]
+            }] } });
+
+class ToolHeaderElementDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ToolHeaderElementDirective, isStandalone: true, selector: "[fdbToolHeaderElement]", host: { classAttribute: "fd-tool-header__element" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderElementDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdbToolHeaderElement]',
+                    host: {
+                        class: 'fd-tool-header__element'
+                    },
+                    standalone: true
+                }]
+        }] });
+
+class ToolHeaderGroupDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.7", type: ToolHeaderGroupDirective, isStandalone: true, selector: "[fdbToolHeaderGroup]", inputs: { center: ["center", "center", coerceBooleanProperty], actions: ["actions", "actions", coerceBooleanProperty] }, host: { properties: { "class.fd-tool-header__group--center": "center", "class.fd-tool-header__group--actions": "actions" }, classAttribute: "fd-tool-header__group" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdbToolHeaderGroup]',
+                    host: {
+                        class: 'fd-tool-header__group',
+                        '[class.fd-tool-header__group--center]': 'center',
+                        '[class.fd-tool-header__group--actions]': 'actions'
+                    },
+                    standalone: true
+                }]
+        }], propDecorators: { center: [{
+                type: Input,
+                args: [{ transform: coerceBooleanProperty }]
+            }], actions: [{
+                type: Input,
+                args: [{ transform: coerceBooleanProperty }]
+            }] } });
+
+class ToolHeaderLogoDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderLogoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ToolHeaderLogoDirective, isStandalone: true, selector: "[fdbToolHeaderLogo]", host: { properties: { "attr.role": "\"button\"", "attr.tabindex": "0" }, classAttribute: "fd-tool-header__logo" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderLogoDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdbToolHeaderLogo]',
+                    host: {
+                        '[attr.role]': '"button"',
+                        '[attr.tabindex]': '0',
+                        class: 'fd-tool-header__logo'
+                    },
+                    standalone: true
+                }]
+        }] });
+
+class ToolHeaderUserDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderUserDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ToolHeaderUserDirective, isStandalone: true, selector: "[fdbToolHeaderUser]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderUserDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdbToolHeaderUser]',
+                    standalone: true
+                }]
+        }] });
+
+class ToolHeaderComponentClass {
+    constructor() {
+        /** Mode signal */
+        this.mode = signal('');
+        /** @hidden */
+        this.orientation = signal('landscape');
+        /** @hidden */
+        this.fdbToolHeaderState = computed(() => {
+            if (this.mode() === 'phone') {
+                return {
+                    backButtonVisible: this.searchFieldExpanded(),
+                    menuButtonVisible: !this.searchFieldExpanded(),
+                    logoVisible: !this.searchFieldExpanded(),
+                    productNameVisible: false,
+                    secondTitleVisible: false,
+                    searchFieldVisible: this.searchFieldExpanded(),
+                    searchFieldToggleActionVisible: !!this.searchField() && !this.searchFieldExpanded(),
+                    providedActionsVisible: !this.searchFieldExpanded(),
+                    userAvatarVisible: !this.searchFieldExpanded(),
+                    productSwitchVisible: !this.searchFieldExpanded(),
+                    voiceInputVisible: this.searchFieldExpanded(),
+                    separatorsBetweenActionsVisible: false
+                };
+            }
+            if (this.mode() === 'tablet') {
+                const isPortrait = this.orientation() === 'portrait';
+                const isLandscape = !isPortrait;
+                const searchFieldVisible = this.searchFieldExpanded() || isLandscape;
+                const searchFieldToggleActionVisible = !searchFieldVisible && !!this.searchField();
+                return {
+                    backButtonVisible: false,
+                    menuButtonVisible: true,
+                    logoVisible: true,
+                    productNameVisible: isPortrait ? !this.searchFieldExpanded() : true,
+                    secondTitleVisible: isLandscape ? false : !this.searchFieldExpanded(),
+                    searchFieldVisible,
+                    searchFieldToggleActionVisible,
+                    providedActionsVisible: true,
+                    userAvatarVisible: true,
+                    productSwitchVisible: true,
+                    voiceInputVisible: false,
+                    separatorsBetweenActionsVisible: this.orientation() === 'landscape'
+                };
+            }
+            return {
+                backButtonVisible: false,
+                menuButtonVisible: true,
+                logoVisible: true,
+                productNameVisible: true,
+                secondTitleVisible: true,
+                searchFieldVisible: true,
+                searchFieldToggleActionVisible: false,
+                providedActionsVisible: true,
+                userAvatarVisible: true,
+                productSwitchVisible: true,
+                voiceInputVisible: false,
+                separatorsBetweenActionsVisible: true
+            };
+        });
+        /** Search field signal */
+        this.searchField = signal(null);
+        /** @hidden */
+        this.searchFieldExpanded = signal(false);
+        /**
+         * RTL signal
+         * @hidden
+         */
+        this._rtl = toSignal(inject(RtlService).rtl);
+    }
+}
+
+/* eslint-disable @angular-eslint/no-input-rename */
+const imports = [
+    ToolHeaderGroupDirective,
+    NgIf,
+    NgTemplateOutlet,
+    OverflowLayoutComponent,
+    NgForOf,
+    OverflowLayoutItemDirective,
+    OverflowItemRefDirective,
+    OverflowExpandDirective,
+    PopoverComponent,
+    PopoverControlComponent,
+    PopoverBodyDirective,
+    MenuTriggerDirective,
+    MenuComponent,
+    MenuItemComponent,
+    MenuInteractiveComponent,
+    MenuTitleDirective,
+    MenuAddonDirective,
+    GlyphMenuAddonDirective,
+    ToolHeaderElementDirective,
+    IconComponent,
+    ButtonComponent,
+    ToolHeaderButtonDirective,
+    ToolHeaderLogoDirective,
+    FdTranslatePipe
+];
+class ToolHeaderComponent extends ToolHeaderComponentClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether to show the voice input action button on
+         * the right side of the tool header, when the mode is mobile
+         * and the search input is expanded
+         */
+        this.showVoiceInputAction = true;
+        /**
+         * Event emitted when the menu button is clicked
+         **/
+        this.menuClick = new EventEmitter();
+        /**
+         * Event emitted when user intends to expand the menu.
+         * Happens when user clicks `right arrow` key on the menu button
+         * if on ltr or `left arrow` key if on rtl.
+         **/
+        this.menuExpand = new EventEmitter();
+        /**
+         * Event emitted when user intends to collapse the menu.
+         * Happens when user clicks `left arrow` key on the menu button
+         * if on ltr or `right arrow` key if on rtl.
+         **/
+        this.menuCollapse = new EventEmitter();
+        /**
+         * Event emitted when the microphone button is clicked
+         **/
+        this.microphoneClick = new EventEmitter();
+        /**
+         * Event emitted when the default logo is clicked
+         */
+        this.logoClick = new EventEmitter();
+        /** @hidden */
+        this._ngZone = inject(NgZone);
+    }
+    /** Mode */
+    set _mode(mode) {
+        if (mode !== this.mode()) {
+            this.mode.set(mode);
+        }
+    }
+    /** @hidden */
+    set _orientation(orientation) {
+        if (orientation !== this.orientation()) {
+            this.orientation.set(orientation);
+        }
+    }
+    /** @hidden */
+    set _searchField(searchField) {
+        this.searchField.set(searchField);
+    }
+    /**
+     * The handler, responsible for closing the search field
+     * on outside click
+     * @hidden
+     **/
+    _onClick(event) {
+        if (this.searchFieldExpanded()) {
+            if (this.mode() === 'tablet' &&
+                this.orientation() === 'portrait' &&
+                this.searchField() &&
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                !event.composedPath().includes(this.searchField().elementRef.nativeElement)) {
+                this.searchFieldExpanded.set(false);
+            }
+        }
+    }
+    /** @hidden */
+    ngOnDestroy() {
+        if (this._searchFieldOutsideClickSubscription) {
+            this._searchFieldOutsideClickSubscription.unsubscribe();
+        }
+    }
+    /**
+     * Expand the search field
+     **/
+    expandSearchField() {
+        this.searchFieldExpanded.set(true);
+        this._ngZone.onStable.pipe(first()).subscribe(() => {
+            this.searchField()?.focus();
+        });
+    }
+    /** @hidden */
+    _handleMenuLeftArrowKey() {
+        if (this._rtl()) {
+            this.menuExpand.emit();
+        }
+        else {
+            this.menuCollapse.emit();
+        }
+    }
+    /** @hidden */
+    _handleMenuRightArrowKey() {
+        if (this._rtl()) {
+            this.menuCollapse.emit();
+        }
+        else {
+            this.menuExpand.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.7", type: ToolHeaderComponent, isStandalone: true, selector: "fdb-tool-header", inputs: { productName: "productName", secondTitle: "secondTitle", _mode: ["mode", "_mode"], _orientation: ["orientation", "_orientation"], showMenuButton: ["showMenuButton", "showMenuButton", coerceBooleanProperty], showVoiceInputAction: ["showVoiceInputAction", "showVoiceInputAction", coerceBooleanProperty] }, outputs: { menuClick: "menuClick", menuExpand: "menuExpand", menuCollapse: "menuCollapse", microphoneClick: "microphoneClick", logoClick: "logoClick" }, host: { listeners: { "document:click": "_onClick($event)" }, properties: { "class.fd-tool-header--menu": "showMenuButton" }, classAttribute: "fd-tool-header" }, providers: [
+            contentDensityObserverProviders(),
+            {
+                provide: ToolHeaderComponentClass,
+                useExisting: ToolHeaderComponent
+            }
+        ], queries: [{ propertyName: "_toolHeaderActionsDirective", first: true, predicate: ToolHeaderActionsDirective, descendants: true }, { propertyName: "_toolHeaderLogoDirective", first: true, predicate: ToolHeaderLogoDirective, descendants: true }, { propertyName: "_searchField", first: true, predicate: SearchFieldComponent, descendants: true }, { propertyName: "_toolHeaderUser", first: true, predicate: ToolHeaderUserDirective, descendants: true }, { propertyName: "_toolHeaderProductSwitch", first: true, predicate: FD_PRODUCT_SWITCH_COMPONENT$1, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div fdbToolHeaderGroup [class.fd-tool-header--menu]=\"showMenuButton\">\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().backButtonVisible\">\n        <button fd-button fdbToolHeaderButton glyph=\"slim-arrow-left\" (click)=\"searchFieldExpanded.set(false)\"></button>\n    </div>\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().menuButtonVisible && showMenuButton\">\n        <button\n            fd-button\n            fdbToolHeaderButton\n            [title]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n            [ariaLabel]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n            glyph=\"menu2\"\n            (keydown.arrowLeft)=\"_handleMenuLeftArrowKey()\"\n            (keydown.arrowRight)=\"_handleMenuRightArrowKey()\"\n            (click)=\"menuClick.emit()\"\n        ></button>\n    </div>\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().logoVisible\">\n        <ng-container *ngIf=\"_toolHeaderLogoDirective; else defaultLogo\">\n            <ng-content select=\"[fdbToolHeaderLogo]\"></ng-content>\n        </ng-container>\n        <ng-template #defaultLogo>\n            <img\n                fdbToolHeaderLogo\n                (click)=\"logoClick.emit()\"\n                src=\"https://unpkg.com/fundamental-styles/dist/images/sap-logo.png\"\n                srcset=\"\n                    https://unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,\n                    https://unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,\n                    https://unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x\n                \"\n                alt=\"SAP logo\"\n                aria-label=\"SAP logo\"\n                title=\"SAP logo\"\n            />\n        </ng-template>\n    </div>\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().productNameVisible\">\n        <h1 class=\"fd-tool-header__product-name\">\n            {{ productName }}\n        </h1>\n    </div>\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().secondTitleVisible && secondTitle\">\n        <div class=\"fd-tool-header__second-title\">\n            {{ secondTitle }}\n        </div>\n    </div>\n</div>\n\n<div fdbToolHeaderGroup center *ngIf=\"fdbToolHeaderState().searchFieldVisible\">\n    <ng-content select=\"fdb-search-field\"></ng-content>\n</div>\n\n<div fdbToolHeaderGroup actions>\n    <fd-overflow-layout fdbToolHeaderElement [style.justify-content]=\"'end'\">\n        <ng-container *ngIf=\"fdbToolHeaderState().searchFieldToggleActionVisible\">\n            <div fdbToolHeaderElement *fdOverflowItemRef=\"let hidden\" [forceVisibility]=\"true\" fdOverflowLayoutItem>\n                <button\n                    fd-button\n                    fdbToolHeaderButton\n                    glyph=\"search\"\n                    (click)=\"$event.stopPropagation(); expandSearchField()\"\n                ></button>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"fdbToolHeaderState().providedActionsVisible\">\n            <ng-container *ngFor=\"let action of _toolHeaderActionsDirective?._actions()\">\n                <div\n                    fdbToolHeaderElement\n                    *fdOverflowItemRef=\"let hidden\"\n                    [forceVisibility]=\"!!action.forceVisibility\"\n                    fdOverflowLayoutItem\n                >\n                    <ng-template\n                        [ngIf]=\"!!action.templateRef\"\n                        [ngIfThen]=\"$any(action.templateRef)\"\n                        [ngIfElse]=\"defaultActionButtonTemplate\"\n                    ></ng-template>\n                    <ng-template #defaultActionButtonTemplate>\n                        <button\n                            fd-button\n                            fdbToolHeaderButton\n                            [glyph]=\"action.glyph\"\n                            (click)=\"action.clickCallback()\"\n                            [ariaLabel]=\"action.label\"\n                        >\n                            <span class=\"fd-button__badge\" *ngIf=\"action.hasBadge\"></span>\n                        </button>\n                    </ng-template>\n                    <div\n                        class=\"fd-tool-header__separator\"\n                        *ngIf=\"action.hasSeparator && fdbToolHeaderState().separatorsBetweenActionsVisible\"\n                    ></div>\n                </div>\n            </ng-container>\n        </ng-container>\n\n        <fdb-navigation-menu-popover *fdOverflowExpand=\"let overflowItems\" fdbToolHeaderElement>\n            <button *fdbNavigationMenuPopoverControl fd-button fdbToolHeaderButton glyph=\"overflow\"></button>\n            <ul *fdPopoverBody fdkFocusableList [wrap]=\"true\" fdb-navigation-menu>\n                <ng-container *ngFor=\"let item of overflowItems\">\n                    <ng-container *ngIf=\"_toolHeaderActionsDirective?._actions() as actions\">\n                        <li\n                            *ngIf=\"\n                                fdbToolHeaderState().searchFieldToggleActionVisible\n                                    ? actions[item.globalIndex - 1]\n                                    : actions[item.globalIndex] as action\n                            \"\n                            fdb-navigation-menu-item\n                            fdkFocusableItem\n                            [glyph]=\"action.glyph\"\n                            (click)=\"action.clickCallback()\"\n                            [label]=\"action.label\"\n                        ></li>\n                    </ng-container>\n                </ng-container>\n            </ul>\n        </fdb-navigation-menu-popover>\n    </fd-overflow-layout>\n    <ng-container *ngIf=\"fdbToolHeaderState().userAvatarVisible && _toolHeaderUser\">\n        <div fdbToolHeaderElement>\n            <div class=\"fd-tool-header__separator\"></div>\n            <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch\">\n        <div fdbToolHeaderElement>\n            <div class=\"fd-tool-header__separator\"></div>\n            <ng-content select=\"fdb-tool-header-product-switch, fd-product-switch\"></ng-content>\n        </div>\n    </ng-container>\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().voiceInputVisible\">\n        <button\n            fd-button\n            fdbToolHeaderButton\n            glyph=\"microphone\"\n            [ariaLabel]=\"'Search with voice'\"\n            (click)=\"microphoneClick.emit()\"\n        ></button>\n    </div>\n</div>\n", styles: ["@import\"../../../../../../node_modules/fundamental-styles/dist/tool-header.css\";.fd-popover__body.fdb-tool-header-actions-overflow-popover-body{--fdPopover_Offset: .3875rem;width:auto;height:auto;padding:.5rem;background:var(--sapGroup_ContentBackground);border:none;border-radius:.5rem;box-shadow:var(--sapMenu_Shadow1)}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu{--fdMenu_Item_Spacing_Left: 0}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link{--fdMenu_Link_Height: 2rem;border-radius:.375rem}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:after{display:none}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:.375rem;inset:.125rem;content:\"\";pointer-events:none;position:absolute}\n"], dependencies: [{ kind: "directive", type: ToolHeaderGroupDirective, selector: "[fdbToolHeaderGroup]", inputs: ["center", "actions"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "navigationTrigger", "showMorePosition", "reverseHiddenItems", "enableKeyboardNavigation", "moreItemsButtonText"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["forceVisibility"], outputs: ["hiddenChange"] }, { kind: "directive", type: OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { kind: "directive", type: OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { kind: "directive", type: PopoverBodyDirective, selector: "[fdPopoverBody]" }, { kind: "directive", type: ToolHeaderElementDirective, selector: "[fdbToolHeaderElement]" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: ToolHeaderButtonDirective, selector: "[fd-button][fdbToolHeaderButton]", inputs: ["hasBadge"] }, { kind: "directive", type: ToolHeaderLogoDirective, selector: "[fdbToolHeaderLogo]" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "component", type: NavigationMenuComponent, selector: "fdb-navigation-menu, ul[fdb-navigation-menu]" }, { kind: "component", type: NavigationMenuItemComponent, selector: "fdb-navigation-menu-item, li[fdb-navigation-menu-item]", inputs: ["glyph", "label"] }, { kind: "directive", type: FocusableListDirective, selector: "[fdkFocusableList]", inputs: ["focusable", "navigationDirection", "contentDirection", "wrap", "listFocusedEventAnnouncer"], outputs: ["itemFocused"], exportAs: ["fdkFocusableList"] }, { kind: "directive", type: FocusableItemDirective, selector: "[fdkFocusableItem]", inputs: ["fdkFocusableItem", "cellFocusedEventAnnouncer"], outputs: ["cellFocused"] }, { kind: "component", type: NavigationMenuPopoverComponent, selector: "fdb-navigation-menu-popover" }, { kind: "directive", type: NavigationMenuPopoverControlDirective, selector: "[fdbNavigationMenuPopoverControl]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fdb-tool-header', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fd-tool-header',
+                        '[class.fd-tool-header--menu]': 'showMenuButton'
+                    }, imports: [
+                        imports,
+                        NavigationMenuComponent,
+                        NavigationMenuItemComponent,
+                        FocusableListDirective,
+                        FocusableItemDirective,
+                        NavigationMenuPopoverComponent,
+                        NavigationMenuPopoverControlDirective,
+                        AsyncPipe
+                    ], providers: [
+                        contentDensityObserverProviders(),
+                        {
+                            provide: ToolHeaderComponentClass,
+                            useExisting: ToolHeaderComponent
+                        }
+                    ], template: "<div fdbToolHeaderGroup [class.fd-tool-header--menu]=\"showMenuButton\">\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().backButtonVisible\">\n        <button fd-button fdbToolHeaderButton glyph=\"slim-arrow-left\" (click)=\"searchFieldExpanded.set(false)\"></button>\n    </div>\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().menuButtonVisible && showMenuButton\">\n        <button\n            fd-button\n            fdbToolHeaderButton\n            [title]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n            [ariaLabel]=\"'btpToolHeader.menuButtonAriaLabel' | fdTranslate\"\n            glyph=\"menu2\"\n            (keydown.arrowLeft)=\"_handleMenuLeftArrowKey()\"\n            (keydown.arrowRight)=\"_handleMenuRightArrowKey()\"\n            (click)=\"menuClick.emit()\"\n        ></button>\n    </div>\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().logoVisible\">\n        <ng-container *ngIf=\"_toolHeaderLogoDirective; else defaultLogo\">\n            <ng-content select=\"[fdbToolHeaderLogo]\"></ng-content>\n        </ng-container>\n        <ng-template #defaultLogo>\n            <img\n                fdbToolHeaderLogo\n                (click)=\"logoClick.emit()\"\n                src=\"https://unpkg.com/fundamental-styles/dist/images/sap-logo.png\"\n                srcset=\"\n                    https://unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x,\n                    https://unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x,\n                    https://unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x\n                \"\n                alt=\"SAP logo\"\n                aria-label=\"SAP logo\"\n                title=\"SAP logo\"\n            />\n        </ng-template>\n    </div>\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().productNameVisible\">\n        <h1 class=\"fd-tool-header__product-name\">\n            {{ productName }}\n        </h1>\n    </div>\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().secondTitleVisible && secondTitle\">\n        <div class=\"fd-tool-header__second-title\">\n            {{ secondTitle }}\n        </div>\n    </div>\n</div>\n\n<div fdbToolHeaderGroup center *ngIf=\"fdbToolHeaderState().searchFieldVisible\">\n    <ng-content select=\"fdb-search-field\"></ng-content>\n</div>\n\n<div fdbToolHeaderGroup actions>\n    <fd-overflow-layout fdbToolHeaderElement [style.justify-content]=\"'end'\">\n        <ng-container *ngIf=\"fdbToolHeaderState().searchFieldToggleActionVisible\">\n            <div fdbToolHeaderElement *fdOverflowItemRef=\"let hidden\" [forceVisibility]=\"true\" fdOverflowLayoutItem>\n                <button\n                    fd-button\n                    fdbToolHeaderButton\n                    glyph=\"search\"\n                    (click)=\"$event.stopPropagation(); expandSearchField()\"\n                ></button>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"fdbToolHeaderState().providedActionsVisible\">\n            <ng-container *ngFor=\"let action of _toolHeaderActionsDirective?._actions()\">\n                <div\n                    fdbToolHeaderElement\n                    *fdOverflowItemRef=\"let hidden\"\n                    [forceVisibility]=\"!!action.forceVisibility\"\n                    fdOverflowLayoutItem\n                >\n                    <ng-template\n                        [ngIf]=\"!!action.templateRef\"\n                        [ngIfThen]=\"$any(action.templateRef)\"\n                        [ngIfElse]=\"defaultActionButtonTemplate\"\n                    ></ng-template>\n                    <ng-template #defaultActionButtonTemplate>\n                        <button\n                            fd-button\n                            fdbToolHeaderButton\n                            [glyph]=\"action.glyph\"\n                            (click)=\"action.clickCallback()\"\n                            [ariaLabel]=\"action.label\"\n                        >\n                            <span class=\"fd-button__badge\" *ngIf=\"action.hasBadge\"></span>\n                        </button>\n                    </ng-template>\n                    <div\n                        class=\"fd-tool-header__separator\"\n                        *ngIf=\"action.hasSeparator && fdbToolHeaderState().separatorsBetweenActionsVisible\"\n                    ></div>\n                </div>\n            </ng-container>\n        </ng-container>\n\n        <fdb-navigation-menu-popover *fdOverflowExpand=\"let overflowItems\" fdbToolHeaderElement>\n            <button *fdbNavigationMenuPopoverControl fd-button fdbToolHeaderButton glyph=\"overflow\"></button>\n            <ul *fdPopoverBody fdkFocusableList [wrap]=\"true\" fdb-navigation-menu>\n                <ng-container *ngFor=\"let item of overflowItems\">\n                    <ng-container *ngIf=\"_toolHeaderActionsDirective?._actions() as actions\">\n                        <li\n                            *ngIf=\"\n                                fdbToolHeaderState().searchFieldToggleActionVisible\n                                    ? actions[item.globalIndex - 1]\n                                    : actions[item.globalIndex] as action\n                            \"\n                            fdb-navigation-menu-item\n                            fdkFocusableItem\n                            [glyph]=\"action.glyph\"\n                            (click)=\"action.clickCallback()\"\n                            [label]=\"action.label\"\n                        ></li>\n                    </ng-container>\n                </ng-container>\n            </ul>\n        </fdb-navigation-menu-popover>\n    </fd-overflow-layout>\n    <ng-container *ngIf=\"fdbToolHeaderState().userAvatarVisible && _toolHeaderUser\">\n        <div fdbToolHeaderElement>\n            <div class=\"fd-tool-header__separator\"></div>\n            <ng-content select=\"[fdbToolHeaderUser]\"></ng-content>\n        </div>\n    </ng-container>\n    <ng-container *ngIf=\"fdbToolHeaderState().productSwitchVisible && _toolHeaderProductSwitch\">\n        <div fdbToolHeaderElement>\n            <div class=\"fd-tool-header__separator\"></div>\n            <ng-content select=\"fdb-tool-header-product-switch, fd-product-switch\"></ng-content>\n        </div>\n    </ng-container>\n    <div fdbToolHeaderElement *ngIf=\"fdbToolHeaderState().voiceInputVisible\">\n        <button\n            fd-button\n            fdbToolHeaderButton\n            glyph=\"microphone\"\n            [ariaLabel]=\"'Search with voice'\"\n            (click)=\"microphoneClick.emit()\"\n        ></button>\n    </div>\n</div>\n", styles: ["@import\"../../../../../../node_modules/fundamental-styles/dist/tool-header.css\";.fd-popover__body.fdb-tool-header-actions-overflow-popover-body{--fdPopover_Offset: .3875rem;width:auto;height:auto;padding:.5rem;background:var(--sapGroup_ContentBackground);border:none;border-radius:.5rem;box-shadow:var(--sapMenu_Shadow1)}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu{--fdMenu_Item_Spacing_Left: 0}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link{--fdMenu_Link_Height: 2rem;border-radius:.375rem}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:after{display:none}.fd-popover__body.fdb-tool-header-actions-overflow-popover-body .fd-menu .fd-menu__link:focus:before{border:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);border-radius:.375rem;inset:.125rem;content:\"\";pointer-events:none;position:absolute}\n"] }]
+        }], propDecorators: { productName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], secondTitle: [{
+                type: Input
+            }], _mode: [{
+                type: Input,
+                args: ['mode']
+            }], _orientation: [{
+                type: Input,
+                args: ['orientation']
+            }], showMenuButton: [{
+                type: Input,
+                args: [{ transform: coerceBooleanProperty }]
+            }], showVoiceInputAction: [{
+                type: Input,
+                args: [{ transform: coerceBooleanProperty }]
+            }], menuClick: [{
+                type: Output
+            }], menuExpand: [{
+                type: Output
+            }], menuCollapse: [{
+                type: Output
+            }], microphoneClick: [{
+                type: Output
+            }], logoClick: [{
+                type: Output
+            }], _toolHeaderActionsDirective: [{
+                type: ContentChild,
+                args: [ToolHeaderActionsDirective]
+            }], _toolHeaderLogoDirective: [{
+                type: ContentChild,
+                args: [ToolHeaderLogoDirective]
+            }], _searchField: [{
+                type: ContentChild,
+                args: [SearchFieldComponent]
+            }], _toolHeaderUser: [{
+                type: ContentChild,
+                args: [ToolHeaderUserDirective]
+            }], _toolHeaderProductSwitch: [{
+                type: ContentChild,
+                args: [FD_PRODUCT_SWITCH_COMPONENT$1]
+            }], _onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+const DEFAULT_CONFIG = {
+    desktop: ResponsiveBreakpoints.L + 1,
+    tabletLandscape: [ResponsiveBreakpoints.M + 1, ResponsiveBreakpoints.L],
+    tabletPortrait: [ResponsiveBreakpoints.S + 1, ResponsiveBreakpoints.M],
+    phone: ResponsiveBreakpoints.S
+};
+class ToolHeaderAutoModeDirective {
+    /**
+     * What sizes should be used to determine mode.
+     * Sizes mean the width of the tool header, not the whole screen.
+     **/
+    set config(config) {
+        this._config.set({ ...DEFAULT_CONFIG, ...config });
+    }
+    /**
+     * @hidden
+     */
+    constructor() {
+        /**
+         * Current mode of the ToolHeaderComponent
+         */
+        this.modeChange = new EventEmitter();
+        /**
+         * Current orientation of the ToolHeaderComponent
+         */
+        this.orientationChange = new EventEmitter();
+        /**
+         * Current content density of the ToolHeaderComponent
+         */
+        this.contentDensityChange = new EventEmitter();
+        /**
+         * Reference to the element on which the directive is applied.
+         */
+        this.elementRef = inject(ElementRef);
+        /**
+         * Current configuration of the directive.
+         */
+        this._config = signal(DEFAULT_CONFIG);
+        /** @hidden */
+        this._contentDensity = inject(ContentDensityDirective);
+        /**
+         * Signal of the Width of the element
+         */
+        this._elementWidth = toSignal(inject(ResizeObserverService)
+            .observe(this.elementRef.nativeElement)
+            .pipe(map((entries) => entries[0].contentRect.width), startWith(this.elementRef.nativeElement.clientWidth)), { requireSync: true });
+        /**
+         * Reference to the ToolHeaderComponent
+         */
+        this._toolHeaderComponent = inject(ToolHeaderComponent, { host: true });
+        /**
+         * Current mode of the ToolHeaderComponent
+         */
+        this._currentMode = computed(() => this._getMode(this._elementWidth(), this._config()));
+        toObservable(this._currentMode)
+            .pipe(distinctUntilChanged((a, b) => a[0] === b[0] && a[1] === b[1]), takeUntilDestroyed())
+            .subscribe((_mode) => {
+            const [mode, orientation = 'landscape'] = _mode;
+            this._toolHeaderComponent._mode = mode;
+            this._toolHeaderComponent._orientation = orientation;
+            const contentDensity = mode ? ContentDensityMode.COMPACT : ContentDensityMode.COZY;
+            this._contentDensity.fdContentDensity = contentDensity;
+            this.modeChange.emit(mode);
+            this.orientationChange.emit(orientation);
+            this.contentDensityChange.emit(contentDensity);
+        });
+    }
+    /**
+     * What mode should be used for the given width and configuration
+     * @param width
+     * @param config
+     * @private
+     */
+    _getMode(width, config) {
+        if (width >= config.desktop) {
+            return ['', 'landscape'];
+        }
+        if (width <= config.phone) {
+            return ['phone', 'landscape'];
+        }
+        return [
+            'tablet',
+            width >= config.tabletLandscape[0] && width <= config.tabletLandscape[1] ? 'landscape' : 'portrait'
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderAutoModeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.7", type: ToolHeaderAutoModeDirective, isStandalone: true, selector: "fdb-tool-header[fdbToolHeaderAutoMode]", inputs: { config: "config" }, outputs: { modeChange: "modeChange", orientationChange: "orientationChange", contentDensityChange: "contentDensityChange" }, exportAs: ["fdbToolHeaderAutoMode"], hostDirectives: [{ directive: i1.ContentDensityDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: ToolHeaderAutoModeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'fdb-tool-header[fdbToolHeaderAutoMode]',
+                    exportAs: 'fdbToolHeaderAutoMode',
+                    hostDirectives: [ContentDensityDirective],
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], modeChange: [{
+                type: Output
+            }], orientationChange: [{
+                type: Output
+            }], contentDensityChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ToolHeaderActionDirective, ToolHeaderActionsDirective, ToolHeaderAutoModeDirective, ToolHeaderButtonDirective, ToolHeaderComponent, ToolHeaderLogoDirective, ToolHeaderProductSwitchComponent, ToolHeaderUserDirective };
+//# sourceMappingURL=fundamental-ngx-btp-tool-header.mjs.map