@fundamental-ngx/core 0.63.2-rc.7 → 0.63.2

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

@@ -53,10 +53,10 @@ class ProductMenuComponent {
             item.callback(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProductMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ProductMenuComponent, isStandalone: true, selector: "fd-product-menu", inputs: { closeOnEscapeKey: "closeOnEscapeKey", closeOnOutsideClick: "closeOnOutsideClick", triggers: "triggers", placement: "placement", disabled: "disabled", fillControlMode: "fillControlMode", control: "control", items: "items", closePopoverOnSelect: "closePopoverOnSelect" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MenuComponent, descendants: true }], ngImport: i0, template: "@if (items && items.length > 0) {\n    <div class=\"fd-shellbar__product\">\n        <h1 class=\"fd-sr-only\">{{ control }}</h1>\n        <button\n            fd-button\n            fdType=\"transparent\"\n            class=\"fd-shellbar__button fd-shellbar__button--menu\"\n            glyph=\"slim-arrow-down\"\n            glyphPosition=\"after\"\n            fdCozy\n            [disabled]=\"disabled\"\n            [fdMenuTrigger]=\"menu\"\n        >\n            <span class=\"fd-shellbar__title\">{{ control }}</span>\n        </button>\n        <fd-menu\n            #menu\n            [placement]=\"placement\"\n            [triggers]=\"triggers\"\n            [fillControlMode]=\"fillControlMode\"\n            [closeOnEscapeKey]=\"closeOnEscapeKey\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        >\n            @for (item of items; track item) {\n                <li (click)=\"itemClicked(item, $event)\" fd-menu-item>\n                    <a\n                        [attr.href]=\"item.link ? item.link : null\"\n                        [attr.target]=\"item.newTab ? '_blank' : null\"\n                        fd-menu-interactive\n                    >\n                        <span fd-menu-title>{{ item.name }}</span>\n                        @if (item.glyph) {\n                            <fd-icon fd-menu-addon position=\"after\" [glyph]=\"item.glyph\"></fd-icon>\n                        }\n                    </a>\n                </li>\n            }\n        </fd-menu>\n    </div>\n} @else {\n    <div class=\"fd-shellbar__product\">\n        <h1 class=\"fd-shellbar__title fd-product-menu__title\">\n            {{ control }}\n        </h1>\n    </div>\n}\n", styles: [".fd-sr-only{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;border:0;margin:-1px;padding:0;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "closeOnNavigation", "restoreFocusOnClose", "appendTo", "fixedPosition", "scrollStrategy", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ProductMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ProductMenuComponent, isStandalone: true, selector: "fd-product-menu", inputs: { closeOnEscapeKey: "closeOnEscapeKey", closeOnOutsideClick: "closeOnOutsideClick", triggers: "triggers", placement: "placement", disabled: "disabled", fillControlMode: "fillControlMode", control: "control", items: "items", closePopoverOnSelect: "closePopoverOnSelect" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MenuComponent, descendants: true }], ngImport: i0, template: "@if (items && items.length > 0) {\n    <div class=\"fd-shellbar__product\">\n        <h1 class=\"fd-sr-only\">{{ control }}</h1>\n        <button\n            fd-button\n            fdType=\"transparent\"\n            class=\"fd-shellbar__button fd-shellbar__button--menu\"\n            glyph=\"slim-arrow-down\"\n            glyphPosition=\"after\"\n            fdCozy\n            [disabled]=\"disabled\"\n            [fdMenuTrigger]=\"menu\"\n        >\n            <span class=\"fd-shellbar__title\">{{ control }}</span>\n        </button>\n        <fd-menu\n            #menu\n            [placement]=\"placement\"\n            [triggers]=\"triggers\"\n            [fillControlMode]=\"fillControlMode\"\n            [closeOnEscapeKey]=\"closeOnEscapeKey\"\n            [closeOnOutsideClick]=\"closeOnOutsideClick\"\n        >\n            @for (item of items; track item) {\n                <li (click)=\"itemClicked(item, $event)\" fd-menu-item>\n                    <a\n                        [attr.href]=\"item.link ? item.link : null\"\n                        [attr.target]=\"item.newTab ? '_blank' : null\"\n                        fd-menu-interactive\n                    >\n                        <span fd-menu-title>{{ item.name }}</span>\n                        @if (item.glyph) {\n                            <fd-icon fd-menu-addon position=\"after\" [glyph]=\"item.glyph\"></fd-icon>\n                        }\n                    </a>\n                </li>\n            }\n        </fd-menu>\n    </div>\n} @else {\n    <div class=\"fd-shellbar__product\">\n        <h1 class=\"fd-shellbar__title fd-product-menu__title\">\n            {{ control }}\n        </h1>\n    </div>\n}\n", styles: [".fd-sr-only{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;border:0;margin:-1px;padding:0;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "closeOnNavigation", "restoreFocusOnClose", "appendTo", "fixedPosition", "scrollStrategy", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "size", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ProductMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ProductMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-product-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ButtonComponent,
@@ -113,35 +113,25 @@ const FD_SHELLBAR_COMPONENT = new InjectionToken('FdShellbarComponent');
 class ShellbarActionComponent {
     constructor() {
         /** Icon name for the button. */
-        this.glyph = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "glyph" }] : /* istanbul ignore next */ []));
+        this.glyph = input(...(ngDevMode ? [undefined, { debugName: "glyph" }] : []));
         /** Icon font family. */
-        this.glyphFont = input(FD_DEFAULT_ICON_FONT_FAMILY, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "glyphFont" }] : /* istanbul ignore next */ []));
+        this.glyphFont = input(FD_DEFAULT_ICON_FONT_FAMILY, ...(ngDevMode ? [{ debugName: "glyphFont" }] : []));
         /** Function to call when the action is clicked. */
-        this.callback = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "callback" }] : /* istanbul ignore next */ []));
+        this.callback = input(null, ...(ngDevMode ? [{ debugName: "callback" }] : []));
         /** Accessible label for the action. */
-        this.label = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
         /** ARIA label for screen readers. */
-        this.ariaLabel = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
         /** Tooltip text shown on hover. */
-        this.title = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
         /** ARIA label for the notification badge. */
-        this.notificationLabel = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "notificationLabel" }] : /* istanbul ignore next */ []));
+        this.notificationLabel = input(...(ngDevMode ? [undefined, { debugName: "notificationLabel" }] : []));
         /** Number of notifications to display in badge. */
-        this.notificationCount = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "notificationCount" }] : /* istanbul ignore next */ []));
+        this.notificationCount = input(...(ngDevMode ? [undefined, { debugName: "notificationCount" }] : []));
         /** The button type for styling (e.g., 'transparent', 'emphasized'). */
-        this.fdType = input('transparent', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fdType" }] : /* istanbul ignore next */ []));
+        this.fdType = input('transparent', ...(ngDevMode ? [{ debugName: "fdType" }] : []));
         /** Whether the button is in toggled state. */
-        this.toggled = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "toggled" }] : /* istanbul ignore next */ []));
+        this.toggled = input(...(ngDevMode ? [undefined, { debugName: "toggled" }] : []));
         /** @hidden */
         this._elRef = inject(ElementRef);
     }
@@ -152,15 +142,15 @@ class ShellbarActionComponent {
             callbackFn(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ShellbarActionComponent, isStandalone: true, selector: "fd-shellbar-action", inputs: { glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, glyphFont: { classPropertyName: "glyphFont", publicName: "glyphFont", isSignal: true, isRequired: false, transformFunction: null }, callback: { classPropertyName: "callback", publicName: "callback", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, notificationLabel: { classPropertyName: "notificationLabel", publicName: "notificationLabel", isSignal: true, isRequired: false, transformFunction: null }, notificationCount: { classPropertyName: "notificationCount", publicName: "notificationCount", isSignal: true, isRequired: false, transformFunction: null }, fdType: { classPropertyName: "fdType", publicName: "fdType", isSignal: true, isRequired: false, transformFunction: null }, toggled: { classPropertyName: "toggled", publicName: "toggled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ShellbarActionComponent, isStandalone: true, selector: "fd-shellbar-action", inputs: { glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, glyphFont: { classPropertyName: "glyphFont", publicName: "glyphFont", isSignal: true, isRequired: false, transformFunction: null }, callback: { classPropertyName: "callback", publicName: "callback", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, notificationLabel: { classPropertyName: "notificationLabel", publicName: "notificationLabel", isSignal: true, isRequired: false, transformFunction: null }, notificationCount: { classPropertyName: "notificationCount", publicName: "notificationCount", isSignal: true, isRequired: false, transformFunction: null }, fdType: { classPropertyName: "fdType", publicName: "fdType", isSignal: true, isRequired: false, transformFunction: null }, toggled: { classPropertyName: "toggled", publicName: "toggled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: FD_SHELLBAR_ACTION_COMPONENT,
                 useExisting: ShellbarActionComponent
             }
         ], ngImport: i0, template: "<div class=\"fd-shellbar__action fd-shellbar__action--desktop\">\n    <button\n        fd-button\n        [fdType]=\"fdType()\"\n        [class.fd-shellbar__button]=\"fdType() === 'transparent'\"\n        fdCozy\n        [ariaLabel]=\"ariaLabel()\"\n        [title]=\"title() || ariaLabel()\"\n        [glyph]=\"glyph()\"\n        [glyphFont]=\"glyphFont()\"\n        [toggled]=\"toggled()\"\n        (click)=\"_handleClick($event)\"\n    >\n        @if (notificationCount()) {\n            <span class=\"fd-button__badge\" [attr.aria-label]=\"notificationLabel()\">\n                {{ notificationCount() }}\n            </span>\n        }\n    </button>\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-action', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -179,11 +169,9 @@ class ShellbarActionsMobileComponent {
         /** @hidden */
         this.showSearch = new EventEmitter();
         /** The button type for styling (e.g., 'transparent', 'emphasized'). */
-        this.fdType = input(defaultButtonType, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "fdType" }] : /* istanbul ignore next */ []));
+        this.fdType = input(defaultButtonType, ...(ngDevMode ? [{ debugName: "fdType" }] : []));
         /** Whether the button is in toggled state. */
-        this.toggled = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "toggled" }] : /* istanbul ignore next */ []));
+        this.toggled = input(...(ngDevMode ? [undefined, { debugName: "toggled" }] : []));
     }
     /** @hidden */
     actionClicked(item, event) {
@@ -202,10 +190,10 @@ class ShellbarActionsMobileComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarActionsMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ShellbarActionsMobileComponent, isStandalone: true, selector: "fd-shellbar-actions-mobile", inputs: { shellbarActions: { classPropertyName: "shellbarActions", publicName: "shellbarActions", isSignal: false, isRequired: false, transformFunction: null }, searchExists: { classPropertyName: "searchExists", publicName: "searchExists", isSignal: false, isRequired: false, transformFunction: null }, assistiveToolsCallback: { classPropertyName: "assistiveToolsCallback", publicName: "assistiveToolsCallback", isSignal: false, isRequired: false, transformFunction: null }, fdType: { classPropertyName: "fdType", publicName: "fdType", isSignal: true, isRequired: false, transformFunction: null }, toggled: { classPropertyName: "toggled", publicName: "toggled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showSearch: "showSearch" }, ngImport: i0, template: "@if (shellbarActions.length > 0 || searchExists) {\n    <div class=\"fd-shellbar-collapse\">\n        <fd-action-sheet placement=\"bottom-end\" #actionSheet>\n            <fd-action-sheet-control>\n                <button\n                    fd-button\n                    [fdType]=\"fdType()\"\n                    [class.fd-shellbar__button]=\"fdType() === 'standard'\"\n                    [toggled]=\"toggled()\"\n                    glyph=\"overflow\"\n                    [attr.aria-label]=\"('coreShellbar.collapsedItemMenuLabel' | fdTranslate)()\"\n                    [title]=\"('coreShellbar.collapsedItemMenuLabel' | fdTranslate)()\"\n                    fdCozy\n                >\n                    @if (totalNotifications) {\n                        <span class=\"fd-button__badge\">\n                            {{ totalNotifications }}\n                        </span>\n                    }\n                </button>\n            </fd-action-sheet-control>\n            <fd-action-sheet-body>\n                @if (searchExists) {\n                    <li\n                        fd-action-sheet-item\n                        tabindex=\"-1\"\n                        glyph=\"search\"\n                        [label]=\"('coreShellbar.search' | fdTranslate)()\"\n                        (click)=\"showSearch.emit(); actionSheet.close()\"\n                        fdCozy\n                    ></li>\n                }\n                @for (action of shellbarActions; track action) {\n                    <li\n                        fd-action-sheet-item\n                        tabindex=\"-1\"\n                        [fdType]=\"action.fdType()\"\n                        [toggled]=\"action.toggled()\"\n                        [glyph]=\"action.glyph() || ''\"\n                        [label]=\"action.label()\"\n                        (click)=\"actionClicked(action, $event)\"\n                        fdCozy\n                    >\n                        @if (action.notificationCount()) {\n                            <span class=\"fd-button__badge\">{{ action.notificationCount() }}</span>\n                        }\n                    </li>\n                }\n                @if (!!assistiveToolsCallback) {\n                    <li\n                        fd-action-sheet-item\n                        tabindex=\"-1\"\n                        glyph=\"sys-help\"\n                        [label]=\"('coreShellbar.assistiveTools' | fdTranslate)()\"\n                        (click)=\"assistiveToolsCallback($event)\"\n                        fdCozy\n                    ></li>\n                }\n            </fd-action-sheet-body>\n        </fd-action-sheet>\n    </div>\n}\n", dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers", "controlTitle", "controlTitleHeading"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "glyphFont", "negative", "isCloseButton", "disabled", "fdType", "toggled"], outputs: ["keyDown"] }, { kind: "component", type: ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarActionsMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ShellbarActionsMobileComponent, isStandalone: true, selector: "fd-shellbar-actions-mobile", inputs: { shellbarActions: { classPropertyName: "shellbarActions", publicName: "shellbarActions", isSignal: false, isRequired: false, transformFunction: null }, searchExists: { classPropertyName: "searchExists", publicName: "searchExists", isSignal: false, isRequired: false, transformFunction: null }, assistiveToolsCallback: { classPropertyName: "assistiveToolsCallback", publicName: "assistiveToolsCallback", isSignal: false, isRequired: false, transformFunction: null }, fdType: { classPropertyName: "fdType", publicName: "fdType", isSignal: true, isRequired: false, transformFunction: null }, toggled: { classPropertyName: "toggled", publicName: "toggled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { showSearch: "showSearch" }, ngImport: i0, template: "@if (shellbarActions.length > 0 || searchExists) {\n    <div class=\"fd-shellbar-collapse\">\n        <fd-action-sheet placement=\"bottom-end\" #actionSheet>\n            <fd-action-sheet-control>\n                <button\n                    fd-button\n                    [fdType]=\"fdType()\"\n                    [class.fd-shellbar__button]=\"fdType() === 'standard'\"\n                    [toggled]=\"toggled()\"\n                    glyph=\"overflow\"\n                    [attr.aria-label]=\"('coreShellbar.collapsedItemMenuLabel' | fdTranslate)()\"\n                    [title]=\"('coreShellbar.collapsedItemMenuLabel' | fdTranslate)()\"\n                    fdCozy\n                >\n                    @if (totalNotifications) {\n                        <span class=\"fd-button__badge\">\n                            {{ totalNotifications }}\n                        </span>\n                    }\n                </button>\n            </fd-action-sheet-control>\n            <fd-action-sheet-body>\n                @if (searchExists) {\n                    <li\n                        fd-action-sheet-item\n                        tabindex=\"-1\"\n                        glyph=\"search\"\n                        [label]=\"('coreShellbar.search' | fdTranslate)()\"\n                        (click)=\"showSearch.emit(); actionSheet.close()\"\n                        fdCozy\n                    ></li>\n                }\n                @for (action of shellbarActions; track action) {\n                    <li\n                        fd-action-sheet-item\n                        tabindex=\"-1\"\n                        [fdType]=\"action.fdType()\"\n                        [toggled]=\"action.toggled()\"\n                        [glyph]=\"action.glyph() || ''\"\n                        [label]=\"action.label()\"\n                        (click)=\"actionClicked(action, $event)\"\n                        fdCozy\n                    >\n                        @if (action.notificationCount()) {\n                            <span class=\"fd-button__badge\">{{ action.notificationCount() }}</span>\n                        }\n                    </li>\n                }\n                @if (!!assistiveToolsCallback) {\n                    <li\n                        fd-action-sheet-item\n                        tabindex=\"-1\"\n                        glyph=\"sys-help\"\n                        [label]=\"('coreShellbar.assistiveTools' | fdTranslate)()\"\n                        (click)=\"assistiveToolsCallback($event)\"\n                        fdCozy\n                    ></li>\n                }\n            </fd-action-sheet-body>\n        </fd-action-sheet>\n    </div>\n}\n", dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "fd-action-sheet", inputs: ["mobile", "placement", "noArrow", "isOpen", "keyboardSupport", "triggers", "controlTitle", "controlTitleHeading"], outputs: ["focusEscapeList", "isOpenChange"] }, { kind: "component", type: ActionSheetControlComponent, selector: "fd-action-sheet-control", outputs: ["clicked"] }, { kind: "component", type: ActionSheetItemComponent, selector: "[fd-action-sheet-item]", inputs: ["label", "glyph", "glyphFont", "negative", "isCloseButton", "disabled", "fdType", "toggled"], outputs: ["keyDown"] }, { kind: "component", type: ActionSheetBodyComponent, selector: "fd-action-sheet-body", inputs: ["actionSheetBodyId", "mobile", "ariaLabel", "ariaLabelledby"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarActionsMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarActionsMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-actions-mobile', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         ActionSheetComponent,
@@ -242,10 +230,10 @@ class ShellbarUserMenuButtonDirective {
         }
         this._hostButton.setFdType('transparent');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarUserMenuButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ShellbarUserMenuButtonDirective, isStandalone: true, selector: "[fd-button][fdShellbarUserMenuButton]", inputs: { fdType: "fdType" }, host: { properties: { "class.fd-shellbar__button": "true", "class.fd-shellbar__button--user-menu": "true" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarUserMenuButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ShellbarUserMenuButtonDirective, isStandalone: true, selector: "[fd-button][fdShellbarUserMenuButton]", inputs: { fdType: "fdType" }, host: { properties: { "class.fd-shellbar__button": "true", "class.fd-shellbar__button--user-menu": "true" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarUserMenuButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarUserMenuButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fd-button][fdShellbarUserMenuButton]',
@@ -295,10 +283,10 @@ class ShellbarUserMenuComponent {
             item.callback(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ShellbarUserMenuComponent, isStandalone: true, selector: "fd-shellbar-user-menu", inputs: { user: "user", userMenu: "userMenu", fillControlMode: "fillControlMode", placement: "placement", triggers: "triggers", closeOnEscapeKey: "closeOnEscapeKey", closeOnOutsideClick: "closeOnOutsideClick", disabled: "disabled", noArrow: "noArrow" }, outputs: { itemClicked: "itemClicked" }, host: { properties: { "style.order": "1" } }, queries: [{ propertyName: "_contentPassedMenu", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_shellbarUserMenuButton", first: true, predicate: ShellbarUserMenuButtonDirective, descendants: true }], viewQueries: [{ propertyName: "_menu", first: true, predicate: MenuComponent, descendants: true }], ngImport: i0, template: "@if (user || _shellbarUserMenuButton) {\n    <div class=\"fd-shellbar__action fd-shellbar__action--show-always\">\n        <div class=\"fd-user-menu\">\n            @if (!_shellbarUserMenuButton) {\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    fdShellbarUserMenuButton\n                    [disabled]=\"disabled\"\n                    [fdMenuTrigger]=\"menu\"\n                >\n                    @if (!user.image) {\n                        <fd-avatar size=\"xs\" [colorAccent]=\"user.colorAccent\" [circle]=\"true\" [label]=\"user.fullName\">\n                        </fd-avatar>\n                    } @else {\n                        <fd-avatar\n                            [colorAccent]=\"user.colorAccent\"\n                            [circle]=\"true\"\n                            size=\"xs\"\n                            image=\"{{ user.image }}\"\n                        ></fd-avatar>\n                    }\n                </button>\n            } @else {\n                <ng-content select=\"[fdShellbarUserMenuButton]\"></ng-content>\n            }\n            @if (userMenu) {\n                <fd-menu\n                    [triggers]=\"triggers\"\n                    [placement]=\"placement\"\n                    [fillControlMode]=\"fillControlMode\"\n                    [closeOnEscapeKey]=\"closeOnEscapeKey\"\n                    [noArrow]=\"noArrow\"\n                    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n                >\n                    @for (item of userMenu; track item) {\n                        <li fd-menu-item (click)=\"itemClick(item, $event)\">\n                            <div fd-menu-interactive>\n                                <span fd-menu-title>{{ item.text }}</span>\n                            </div>\n                        </li>\n                    }\n                </fd-menu>\n            }\n        </div>\n    </div>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "ngmodule", type: PortalModule }, { kind: "component", type: MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "closeOnNavigation", "restoreFocusOnClose", "appendTo", "fixedPosition", "scrollStrategy", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: ShellbarUserMenuButtonDirective, selector: "[fd-button][fdShellbarUserMenuButton]", inputs: ["fdType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarUserMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ShellbarUserMenuComponent, isStandalone: true, selector: "fd-shellbar-user-menu", inputs: { user: "user", userMenu: "userMenu", fillControlMode: "fillControlMode", placement: "placement", triggers: "triggers", closeOnEscapeKey: "closeOnEscapeKey", closeOnOutsideClick: "closeOnOutsideClick", disabled: "disabled", noArrow: "noArrow" }, outputs: { itemClicked: "itemClicked" }, host: { properties: { "style.order": "1" } }, queries: [{ propertyName: "_contentPassedMenu", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_shellbarUserMenuButton", first: true, predicate: ShellbarUserMenuButtonDirective, descendants: true }], viewQueries: [{ propertyName: "_menu", first: true, predicate: MenuComponent, descendants: true }], ngImport: i0, template: "@if (user || _shellbarUserMenuButton) {\n    <div class=\"fd-shellbar__action fd-shellbar__action--show-always\">\n        <div class=\"fd-user-menu\">\n            @if (!_shellbarUserMenuButton) {\n                <button\n                    fd-button\n                    fdType=\"transparent\"\n                    fdShellbarUserMenuButton\n                    [disabled]=\"disabled\"\n                    [fdMenuTrigger]=\"menu\"\n                >\n                    @if (!user.image) {\n                        <fd-avatar size=\"xs\" [colorAccent]=\"user.colorAccent\" [circle]=\"true\" [label]=\"user.fullName\">\n                        </fd-avatar>\n                    } @else {\n                        <fd-avatar\n                            [colorAccent]=\"user.colorAccent\"\n                            [circle]=\"true\"\n                            size=\"xs\"\n                            image=\"{{ user.image }}\"\n                        ></fd-avatar>\n                    }\n                </button>\n            } @else {\n                <ng-content select=\"[fdShellbarUserMenuButton]\"></ng-content>\n            }\n            @if (userMenu) {\n                <fd-menu\n                    [triggers]=\"triggers\"\n                    [placement]=\"placement\"\n                    [fillControlMode]=\"fillControlMode\"\n                    [closeOnEscapeKey]=\"closeOnEscapeKey\"\n                    [noArrow]=\"noArrow\"\n                    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n                >\n                    @for (item of userMenu; track item) {\n                        <li fd-menu-item (click)=\"itemClick(item, $event)\">\n                            <div fd-menu-interactive>\n                                <span fd-menu-title>{{ item.text }}</span>\n                            </div>\n                        </li>\n                    }\n                </fd-menu>\n            }\n        </div>\n    </div>\n}\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "ngmodule", type: PortalModule }, { kind: "component", type: MenuComponent, selector: "fd-menu", inputs: ["openOnHoverTime", "ariaLabel", "ariaLabelledby", "id", "config", "mobile", "mobileConfig", "placement", "closeOnEscapeKey", "focusAutoCapture", "disabled", "disableScrollbar", "triggers", "fillControlMode", "closeOnOutsideClick", "noArrow", "focusTrapped", "additionalBodyClass", "closeOnNavigation", "restoreFocusOnClose", "appendTo", "fixedPosition", "scrollStrategy", "isOpen"], outputs: ["isOpenChange", "activePath", "beforeOpen"] }, { kind: "component", type: MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: MenuTitleDirective, selector: "[fd-menu-title]", inputs: ["truncate"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: AvatarComponent, selector: "fd-avatar", inputs: ["id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "interactive", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "directive", type: ShellbarUserMenuButtonDirective, selector: "[fd-button][fdShellbarUserMenuButton]", inputs: ["fdType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarUserMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarUserMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-user-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ButtonComponent,
@@ -464,10 +452,10 @@ class ShellbarActionsComponent {
             this._shellbar._searchToggledFromActions();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ShellbarActionsComponent, isStandalone: true, selector: "fd-shellbar-actions", inputs: { user: "user", userMenu: "userMenu", closePopoverOnSelect: "closePopoverOnSelect", assistiveTools: "assistiveTools", assistiveToolsCallback: "assistiveToolsCallback" }, outputs: { searchOpen: "searchOpen" }, host: { properties: { "class.fd-shellbar__group": "true", "class.fd-shellbar__group--actions": "true" } }, queries: [{ propertyName: "userComponent", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "comboboxComponent", first: true, predicate: FD_COMBOBOX_COMPONENT, descendants: true }, { propertyName: "productSwitchComponent", first: true, predicate: FD_PRODUCT_SWITCH_COMPONENT, descendants: true }, { propertyName: "userMenuComponent", first: true, predicate: UserMenuComponent, descendants: true }, { propertyName: "shellbarActions", predicate: FD_SHELLBAR_ACTION_COMPONENT }], viewQueries: [{ propertyName: "userComponentView", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "@if (comboboxComponent) {\n    <div class=\"fd-shellbar__action\">\n        <ng-content select=\"fd-combobox\"></ng-content>\n    </div>\n}\n<!-- If portal outlet placed outside div, it will be added to the end of the root container. So this div actually keeps outlet in desired place. -->\n<div class=\"fd-shellbar__action\" cdkPortalOutlet></div>\n@if (_showMobileActions) {\n    <div class=\"fd-shellbar__action\">\n        <fd-shellbar-actions-mobile\n            [shellbarActions]=\"shellbarActions\"\n            [searchExists]=\"!!_searchPortal\"\n            (showSearch)=\"_toggleSearch()\"\n            [assistiveToolsCallback]=\"assistiveToolsCallback\"\n        ></fd-shellbar-actions-mobile>\n    </div>\n}\n<div class=\"fd-shellbar__action\">\n    <ng-content></ng-content>\n</div>\n@if (_addSearchIcon && !showSearch && !_showMobileActions) {\n    <fd-shellbar-action glyph=\"search\" [callback]=\"_toggleSearch\"></fd-shellbar-action>\n}\n<ng-content select=\"fd-shellbar-action\"></ng-content>\n@if (userComponent || userItem) {\n    @if (!userComponent) {\n        <fd-shellbar-user-menu\n            placement=\"bottom-end\"\n            [user]=\"user\"\n            [userMenu]=\"userMenu\"\n            (itemClicked)=\"_triggerItems()\"\n        ></fd-shellbar-user-menu>\n    } @else {\n        <ng-content select=\"fd-shellbar-user-menu\"></ng-content>\n    }\n}\n@if (userMenuComponent) {\n    <div class=\"fd-shellbar__action\">\n        <ng-content select=\"fd-user-menu\"></ng-content>\n    </div>\n}\n@if (productSwitchComponent) {\n    <div class=\"fd-shellbar__action\">\n        <ng-content select=\"fd-product-switch\"></ng-content>\n    </div>\n}\n@if (assistiveTools && !_showMobileActions) {\n    <fd-shellbar-action\n        glyph=\"sys-help\"\n        label=\"({{ ('coreShellbar.assistiveTools' | fdTranslate)() }})()\"\n        [notificationCount]=\"0\"\n        notificationLabel=\"({{ ('coreShellbar.assistiveTools' | fdTranslate)() }})()\"\n        [callback]=\"assistiveToolsCallback\"\n    >\n    </fd-shellbar-action>\n}\n", dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ShellbarActionsMobileComponent, selector: "fd-shellbar-actions-mobile", inputs: ["shellbarActions", "searchExists", "assistiveToolsCallback", "fdType", "toggled"], outputs: ["showSearch"] }, { kind: "component", type: ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "ariaLabel", "title", "notificationLabel", "notificationCount", "fdType", "toggled"] }, { kind: "component", type: ShellbarUserMenuComponent, selector: "fd-shellbar-user-menu", inputs: ["user", "userMenu", "fillControlMode", "placement", "triggers", "closeOnEscapeKey", "closeOnOutsideClick", "disabled", "noArrow"], outputs: ["itemClicked"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ShellbarActionsComponent, isStandalone: true, selector: "fd-shellbar-actions", inputs: { user: "user", userMenu: "userMenu", closePopoverOnSelect: "closePopoverOnSelect", assistiveTools: "assistiveTools", assistiveToolsCallback: "assistiveToolsCallback" }, outputs: { searchOpen: "searchOpen" }, host: { properties: { "class.fd-shellbar__group": "true", "class.fd-shellbar__group--actions": "true" } }, queries: [{ propertyName: "userComponent", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "comboboxComponent", first: true, predicate: FD_COMBOBOX_COMPONENT, descendants: true }, { propertyName: "productSwitchComponent", first: true, predicate: FD_PRODUCT_SWITCH_COMPONENT, descendants: true }, { propertyName: "userMenuComponent", first: true, predicate: UserMenuComponent, descendants: true }, { propertyName: "shellbarActions", predicate: FD_SHELLBAR_ACTION_COMPONENT }], viewQueries: [{ propertyName: "userComponentView", first: true, predicate: ShellbarUserMenuComponent, descendants: true }, { propertyName: "_portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "@if (comboboxComponent) {\n    <div class=\"fd-shellbar__action\">\n        <ng-content select=\"fd-combobox\"></ng-content>\n    </div>\n}\n<!-- If portal outlet placed outside div, it will be added to the end of the root container. So this div actually keeps outlet in desired place. -->\n<div class=\"fd-shellbar__action\" cdkPortalOutlet></div>\n@if (_showMobileActions) {\n    <div class=\"fd-shellbar__action\">\n        <fd-shellbar-actions-mobile\n            [shellbarActions]=\"shellbarActions\"\n            [searchExists]=\"!!_searchPortal\"\n            (showSearch)=\"_toggleSearch()\"\n            [assistiveToolsCallback]=\"assistiveToolsCallback\"\n        ></fd-shellbar-actions-mobile>\n    </div>\n}\n<div class=\"fd-shellbar__action\">\n    <ng-content></ng-content>\n</div>\n@if (_addSearchIcon && !showSearch && !_showMobileActions) {\n    <fd-shellbar-action glyph=\"search\" [callback]=\"_toggleSearch\"></fd-shellbar-action>\n}\n<ng-content select=\"fd-shellbar-action\"></ng-content>\n@if (userComponent || userItem) {\n    @if (!userComponent) {\n        <fd-shellbar-user-menu\n            placement=\"bottom-end\"\n            [user]=\"user\"\n            [userMenu]=\"userMenu\"\n            (itemClicked)=\"_triggerItems()\"\n        ></fd-shellbar-user-menu>\n    } @else {\n        <ng-content select=\"fd-shellbar-user-menu\"></ng-content>\n    }\n}\n@if (userMenuComponent) {\n    <div class=\"fd-shellbar__action\">\n        <ng-content select=\"fd-user-menu\"></ng-content>\n    </div>\n}\n@if (productSwitchComponent) {\n    <div class=\"fd-shellbar__action\">\n        <ng-content select=\"fd-product-switch\"></ng-content>\n    </div>\n}\n@if (assistiveTools && !_showMobileActions) {\n    <fd-shellbar-action\n        glyph=\"sys-help\"\n        label=\"({{ ('coreShellbar.assistiveTools' | fdTranslate)() }})()\"\n        [notificationCount]=\"0\"\n        notificationLabel=\"({{ ('coreShellbar.assistiveTools' | fdTranslate)() }})()\"\n        [callback]=\"assistiveToolsCallback\"\n    >\n    </fd-shellbar-action>\n}\n", dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ShellbarActionsMobileComponent, selector: "fd-shellbar-actions-mobile", inputs: ["shellbarActions", "searchExists", "assistiveToolsCallback", "fdType", "toggled"], outputs: ["showSearch"] }, { kind: "component", type: ShellbarActionComponent, selector: "fd-shellbar-action", inputs: ["glyph", "glyphFont", "callback", "label", "ariaLabel", "title", "notificationLabel", "notificationCount", "fdType", "toggled"] }, { kind: "component", type: ShellbarUserMenuComponent, selector: "fd-shellbar-user-menu", inputs: ["user", "userMenu", "fillControlMode", "placement", "triggers", "closeOnEscapeKey", "closeOnOutsideClick", "disabled", "noArrow"], outputs: ["itemClicked"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-actions', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.fd-shellbar__group]': 'true',
@@ -542,15 +530,15 @@ class ShellbarBrandingComponent {
             titleEl.style.display = 'flex';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarBrandingComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ShellbarBrandingComponent, isStandalone: true, selector: "fd-shellbar-branding", inputs: { interactiveBranding: "interactiveBranding" }, ngImport: i0, template: ` <div
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarBrandingComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ShellbarBrandingComponent, isStandalone: true, selector: "fd-shellbar-branding", inputs: { interactiveBranding: "interactiveBranding" }, ngImport: i0, template: ` <div
         class="fd-shellbar__branding"
         [class.fd-shellbar__branding--non-interactive]="!interactiveBranding"
     >
         <ng-content></ng-content>
     </div>`, isInline: true, styles: [".fd-shellbar__branding{padding-inline:0}.fd-shellbar__branding .fd-shellbar__title{padding-inline:.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarBrandingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarBrandingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-branding', template: ` <div
         class="fd-shellbar__branding"
@@ -653,10 +641,10 @@ class ShellbarContextAreaComponent {
         const sorted2 = [...arr2].sort();
         return sorted1.every((el, index) => el === sorted2[index]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarContextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ShellbarContextAreaComponent, isStandalone: true, selector: "fd-shellbar-context-area", outputs: { contentItemVisibilityChange: "contentItemVisibilityChange" }, host: { properties: { "class.fd-shellbar__group": "true", "class.fd-shellbar__group--context-area": "true" } }, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, styles: [":host{min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarContextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ShellbarContextAreaComponent, isStandalone: true, selector: "fd-shellbar-context-area", outputs: { contentItemVisibilityChange: "contentItemVisibilityChange" }, host: { properties: { "class.fd-shellbar__group": "true", "class.fd-shellbar__group--context-area": "true" } }, ngImport: i0, template: ` <ng-content></ng-content>`, isInline: true, styles: [":host{min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarContextAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarContextAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-context-area', standalone: true, template: ` <ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.fd-shellbar__group]': 'true',
@@ -669,10 +657,10 @@ class ShellbarHidePriorityDirective {
         /** @hidden */
         this.elRef = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarHidePriorityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ShellbarHidePriorityDirective, isStandalone: true, selector: "[fdShellbarHidePriority]", inputs: { priority: ["fdShellbarHidePriority", "priority"] }, host: { properties: { "style.flex-shrink": "0" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarHidePriorityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ShellbarHidePriorityDirective, isStandalone: true, selector: "[fdShellbarHidePriority]", inputs: { priority: ["fdShellbarHidePriority", "priority"] }, host: { properties: { "style.flex-shrink": "0" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarHidePriorityDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarHidePriorityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdShellbarHidePriority]',
@@ -696,10 +684,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * ```
  */
 class ShellbarLogoComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ShellbarLogoComponent, isStandalone: true, selector: "fd-shellbar-logo", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ShellbarLogoComponent, isStandalone: true, selector: "fd-shellbar-logo", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarLogoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarLogoComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'fd-shellbar-logo',
@@ -714,10 +702,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * The shellbar separator component.
  */
 class ShellbarSeparatorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ShellbarSeparatorComponent, isStandalone: true, selector: "fd-shellbar-separator", host: { classAttribute: "fd-shellbar__separator" }, ngImport: i0, template: ``, isInline: true, styles: [":host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ShellbarSeparatorComponent, isStandalone: true, selector: "fd-shellbar-separator", host: { classAttribute: "fd-shellbar__separator" }, ngImport: i0, template: ``, isInline: true, styles: [":host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarSeparatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarSeparatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-separator', template: ``, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         class: 'fd-shellbar__separator'
@@ -725,10 +713,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }] });
 
 class ShellbarSidenavDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarSidenavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: ShellbarSidenavDirective, isStandalone: true, selector: "[fdShellbarSidenav], [fd-shellbar-side-nav]", host: { classAttribute: "fd-shellbar__button" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarSidenavDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ShellbarSidenavDirective, isStandalone: true, selector: "[fdShellbarSidenav], [fd-shellbar-side-nav]", host: { classAttribute: "fd-shellbar__button" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarSidenavDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarSidenavDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fdShellbarSidenav], [fd-shellbar-side-nav]',
@@ -751,10 +739,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * ```
  */
 class ShellbarSubtitleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarSubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ShellbarSubtitleComponent, isStandalone: true, selector: "fd-shellbar-subtitle", ngImport: i0, template: "<div class=\"fd-shellbar__subtitle\">\n    <ng-content></ng-content>\n</div>\n", styles: ["fd-shellbar-subtitle{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarSubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ShellbarSubtitleComponent, isStandalone: true, selector: "fd-shellbar-subtitle", ngImport: i0, template: "<div class=\"fd-shellbar__subtitle\">\n    <ng-content></ng-content>\n</div>\n", styles: ["fd-shellbar-subtitle{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarSubtitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarSubtitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-subtitle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"fd-shellbar__subtitle\">\n    <ng-content></ng-content>\n</div>\n", styles: ["fd-shellbar-subtitle{display:flex}\n"] }]
         }] });
@@ -769,10 +757,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * ```
  */
 class ShellbarTitleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: ShellbarTitleComponent, isStandalone: true, selector: "fd-shellbar-title", ngImport: i0, template: "<h1 class=\"fd-shellbar__title\">\n    <ng-content></ng-content>\n</h1>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ShellbarTitleComponent, isStandalone: true, selector: "fd-shellbar-title", ngImport: i0, template: "<h1 class=\"fd-shellbar__title\">\n    <ng-content></ng-content>\n</h1>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar-title', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<h1 class=\"fd-shellbar__title\">\n    <ng-content></ng-content>\n</h1>\n" }]
         }] });
@@ -809,11 +797,9 @@ class ShellbarComponent {
         this.backButtonClicked = new EventEmitter();
         /** @hidden */
         this._showMobileSearch = false;
-        this.navigationIcon = computed(() => (this.isRtl() ? 'slim-arrow-right' : 'nav-back'), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "navigationIcon" }] : /* istanbul ignore next */ []));
+        this.navigationIcon = computed(() => (this.isRtl() ? 'slim-arrow-right' : 'nav-back'), ...(ngDevMode ? [{ debugName: "navigationIcon" }] : []));
         /** @hidden */
-        this.isRtl = computed(() => this._rtlService?.rtl() ?? false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+        this.isRtl = computed(() => this._rtlService?.rtl() ?? false, ...(ngDevMode ? [{ debugName: "isRtl" }] : []));
         /** @hidden */
         this._currentSize$ = new BehaviorSubject(this._currentSize);
         /** @hidden */
@@ -1127,15 +1113,15 @@ class ShellbarComponent {
             productSwitch.contentDensity.set(ContentDensityMode.COZY);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ShellbarComponent, isStandalone: true, selector: "fd-shellbar", inputs: { size: "size", breakpoints: "breakpoints", sideNav: "sideNav", groupFlex: "groupFlex", showNavigationButton: "showNavigationButton", navigationButtonTemplate: "navigationButtonTemplate", showBackButton: "showBackButton", navigationButtonLabel: "navigationButtonLabel", backButtonLabel: "backButtonLabel", showSearchFieldOnSizeSmall: "showSearchFieldOnSizeSmall" }, outputs: { navigationButtonClicked: "navigationButtonClicked", backButtonClicked: "backButtonClicked" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ShellbarComponent, isStandalone: true, selector: "fd-shellbar", inputs: { size: "size", breakpoints: "breakpoints", sideNav: "sideNav", groupFlex: "groupFlex", showNavigationButton: "showNavigationButton", navigationButtonTemplate: "navigationButtonTemplate", showBackButton: "showBackButton", navigationButtonLabel: "navigationButtonLabel", backButtonLabel: "backButtonLabel", showSearchFieldOnSizeSmall: "showSearchFieldOnSizeSmall" }, outputs: { navigationButtonClicked: "navigationButtonClicked", backButtonClicked: "backButtonClicked" }, providers: [
             {
                 provide: FD_SHELLBAR_COMPONENT,
                 useExisting: ShellbarComponent
             }
         ], queries: [{ propertyName: "comboboxComponent", first: true, predicate: FD_COMBOBOX_COMPONENT, descendants: true }, { propertyName: "contextArea", first: true, predicate: ShellbarContextAreaComponent, descendants: true }, { propertyName: "branding", first: true, predicate: ShellbarBrandingComponent, descendants: true }, { propertyName: "_actions", first: true, predicate: ShellbarActionsComponent, descendants: true }, { propertyName: "searchComponent", first: true, predicate: FD_SHELLBAR_SEARCH_COMPONENT, descendants: true }, { propertyName: "buttons", predicate: FD_BUTTON_COMPONENT, read: ElementRef }, { propertyName: "productSwitches", predicate: ProductSwitchComponent, descendants: true }], viewQueries: [{ propertyName: "_searchPortalOutlet", first: true, predicate: ["searchPortalOutlet"], descendants: true, read: CdkPortalOutlet }, { propertyName: "_shellbar", first: true, predicate: ["shellbar"], descendants: true }], ngImport: i0, template: "<div\n    class=\"fd-shellbar\"\n    [class]=\"'fd-shellbar--' + _currentSize + _getSideNavClass()\"\n    [class.fd-shellbar--side-nav]=\"showNavigationButton === true\"\n    [class.fd-shellbar--has-context-area]=\"!!contextArea\"\n    #shellbar\n    fdCozy\n>\n    @if (!_hideAllComponents) {\n        <div\n            class=\"fd-shellbar__group fd-shellbar__group--product\"\n            [class.fd-shellbar__group--shrink]=\"groupFlex?.product?.shrink\"\n            [class.fd-shellbar__group--basis-auto]=\"groupFlex?.product?.flexBasisAuto\"\n        >\n            @if (showNavigationButton && !_showMobileSearch) {\n                @if (navigationButtonTemplate) {\n                    <ng-container [ngTemplateOutlet]=\"navigationButtonTemplate\"></ng-container>\n                } @else {\n                    <button\n                        class=\"fd-shellbar__button\"\n                        fd-button\n                        fdType=\"transparent\"\n                        glyph=\"menu2\"\n                        (fdkClicked)=\"_navigationClicked($event)\"\n                        [attr.title]=\"navigationButtonLabel || ('coreShellbar.navigationButtonLabel' | fdTranslate)()\"\n                        [attr.aria-label]=\"\n                            navigationButtonLabel || ('coreShellbar.navigationButtonLabel' | fdTranslate)()\n                        \"\n                        fdCozy\n                    ></button>\n                }\n            }\n            @if (showBackButton && !_showMobileSearch) {\n                <button\n                    class=\"fd-shellbar__button\"\n                    fd-button\n                    fdType=\"transparent\"\n                    [glyph]=\"navigationIcon()\"\n                    (fdkClicked)=\"_backClicked($event)\"\n                    [attr.title]=\"backButtonLabel || ('coreShellbar.backButtonLabel' | fdTranslate)\"\n                    [attr.aria-label]=\"backButtonLabel || ('coreShellbar.backButtonLabel' | fdTranslate)\"\n                    fdCozy\n                ></button>\n            }\n            <ng-content select=\"fd-shellbar-branding\"></ng-content>\n            <ng-content select=\"[fd-shellbar-side-nav]\"></ng-content>\n            <ng-content select=\"fd-shellbar-logo\"></ng-content>\n            @if (!_hideTitleComponents) {\n                <ng-content select=\"fd-shellbar-title\"></ng-content>\n                <ng-content select=\"fd-product-menu\"></ng-content>\n                <ng-content select=\"fd-shellbar-subtitle\"></ng-content>\n                <ng-content select=\"fd-shellbar-separator\"></ng-content>\n            }\n        </div>\n        <ng-content select=\"fd-shellbar-context-area\"></ng-content>\n    }\n    <div hidden>\n        <ng-content></ng-content>\n    </div>\n    @if (searchComponent) {\n        <div\n            class=\"fd-shellbar__group fd-shellbar__group--center fd-shellbar__group--mobile-flex\"\n            [class.fd-shellbar__group--shrink]=\"groupFlex?.search?.shrink\"\n            [class.fd-shellbar__group--basis-auto]=\"groupFlex?.search?.flexBasisAuto\"\n        >\n            <div class=\"fd-shellbar__action fd-shellbar__action--grow\">\n                <ng-container cdkPortalOutlet #searchPortalOutlet></ng-container>\n            </div>\n            @if (_hideAllComponents) {\n                <div class=\"fd-shellbar__action fd-shellbar__action--mobile fd-shellbar__action--shrink\">\n                    <button class=\"fd-button fd-button--transparent\" (click)=\"_closeMobileSearch()\">\n                        {{ ('coreShellbar.cancel' | fdTranslate)() }}\n                    </button>\n                </div>\n            }\n        </div>\n    }\n    @if (!_hideAllComponents) {\n        <ng-content select=\"fd-shellbar-actions\"></ng-content>\n    }\n</div>\n", styles: [".fd-shellbar{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem;-webkit-box-pack:justify;-ms-flex-pack:justify;background:var(--sapShellColor);-webkit-box-shadow:inset 0 -.0625rem 0 0 var(--sapShell_BorderColor);box-shadow:inset 0 -.0625rem 0 0 var(--sapShell_BorderColor);height:3.25rem;justify-content:space-between;padding-block:0;padding-inline:var(--fdShellbar_Inline_Padding,1rem)}.fd-shellbar:after,.fd-shellbar:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar__branding{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdShellBar_Branding_Background,var(--sapButton_Lite_Background));border:var(--sapButton_BorderWidth) solid var(--fdShellBar_Branding_Border_Color,var(--sapButton_Lite_BorderColor));border-radius:.375rem;cursor:var(--fdShellBar_Branding_Cursor,pointer);gap:.25rem;height:2.25rem;padding-block:.125rem;padding-inline:.25rem .5rem}.fd-shellbar__branding:after,.fd-shellbar__branding:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar__branding.is-hover,.fd-shellbar__branding:hover{--fdShellBar_Branding_Background:var(--fdShellbar_Branding_Hover_Background);--fdShellBar_Branding_Border_Color:var(--fdShellbar_Branding_Hover_Border_Color)}.fd-shellbar__branding.is-active,.fd-shellbar__branding:active{--fdShellBar_Branding_Background:var(--fdShellbar_Branding_Active_Background);--fdShellBar_Branding_Border_Color:var(--fdShellbar_Branding_Active_Border_Color)}.fd-shellbar__branding.is-active.is-focus,.fd-shellbar__branding.is-active:focus,.fd-shellbar__branding:active.is-focus,.fd-shellbar__branding:active:focus{outline:none;z-index:5}.fd-shellbar__branding.is-focus,.fd-shellbar__branding:focus{outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--fdShellbar_Button_Outline_Color);outline-offset:-.125rem;z-index:5}.fd-shellbar__branding--non-interactive{--fdShellBar_Branding_Cursor:auto}.fd-shellbar__branding--non-interactive.is-active,.fd-shellbar__branding--non-interactive.is-focus,.fd-shellbar__branding--non-interactive.is-hover,.fd-shellbar__branding--non-interactive:active,.fd-shellbar__branding--non-interactive:focus,.fd-shellbar__branding--non-interactive:hover{--fdShellBar_Branding_Background:var(--sapButton_Lite_Background);--fdShellBar_Branding_Border_Color:var(--sapButton_Lite_BorderColor)}.fd-shellbar__branding--non-interactive.is-focus,.fd-shellbar__branding--non-interactive:focus{outline:none;z-index:5}.fd-shellbar__title{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdShellbar_Title_Color);font-family:var(--sapFontFamily);font-family:var(--sapFontSemiboldDuplexFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap}.fd-shellbar__title:after,.fd-shellbar__title:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar__subtitle{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdShellbar_Subtitle_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-overflow:ellipsis;white-space:nowrap}.fd-shellbar__subtitle:after,.fd-shellbar__subtitle:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar__product{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.fd-shellbar__product:after,.fd-shellbar__product:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar__logo{background-repeat:no-repeat;background-size:contain;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:normal;margin-block:0;margin-inline:0;max-height:2rem;padding-block:0;padding-block:.0625rem;padding-inline:0;padding-inline:.25rem;position:relative;vertical-align:middle}.fd-shellbar__logo:after,.fd-shellbar__logo:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar__logo>*{display:block;height:1.875rem;line-height:0;max-height:1.875rem;max-width:3.75rem;min-height:1.875rem;min-width:3.75rem;width:3.75rem}.fd-shellbar__logo--image-replaced{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDQxMi4zOCAyMDQiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjIwNi4xOSIgeDI9IjIwNi4xOSIgeTI9IjIwNCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzAwYjhmMSIvPjxzdG9wIG9mZnNldD0iLjAyIiBzdG9wLWNvbG9yPSIjMDFiNmYwIi8+PHN0b3Agb2Zmc2V0PSIuMzEiIHN0b3AtY29sb3I9IiMwZDkwZDkiLz48c3RvcCBvZmZzZXQ9Ii41OCIgc3RvcC1jb2xvcj0iIzE3NzVjOCIvPjxzdG9wIG9mZnNldD0iLjgyIiBzdG9wLWNvbG9yPSIjMWM2NWJmIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMWU1ZmJiIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHRpdGxlPlNBUF9ncmFkX1Jfc2Nybl9aZWljaGVuZmzDpGNoZSAxPC90aXRsZT48cGF0aCBkPSJNMCAyMDRoMjA4LjQxTDQxMi4zOCAwSDB6IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7ZmlsbDp1cmwoI2EpIi8+PHBhdGggZD0iTTI0NC43MyAzOC4zNmgtNDAuNnY5Ni41MmwtMzUuNDYtOTYuNTVoLTM1LjE2bC0zMC4yNyA4MC43MkMxMDAgOTguNyA3OSA5MS42NyA2Mi40IDg2LjQgNTEuNDYgODIuODkgMzkuODUgNzcuNzIgNDAgNzJjLjA5LTQuNjggNi4yMy05IDE4LjM4LTguMzggOC4xNy40MyAxNS4zNyAxLjA5IDI5LjcxIDhsMTQuMS0yNC41NUM4OS4wNiA0MC40MiA3MSAzNi4yMSA1Ni4xNyAzNi4xOWgtLjA5Yy0xNy4yOCAwLTMxLjY4IDUuNi00MC42IDE0LjgzQTM0LjIzIDM0LjIzIDAgMCAwIDUuNzcgNzQuN0M1LjU0IDg3LjE1IDEwLjExIDk2IDE5LjcxIDEwM2M4LjEgNS45NCAxOC40NiA5Ljc5IDI3LjYgMTIuNjIgMTEuMjcgMy40OSAyMC40NyA2LjUzIDIwLjM2IDEzQTkuNTcgOS41NyAwIDAgMSA2NSAxMzVjLTIuODEgMi45LTcuMTMgNC0xMy4wOSA0LjEtMTEuNDkuMjQtMjAtMS41Ni0zMy42MS05LjU5TDUuNzcgMTU0LjQyYTkzLjc3IDkzLjc3IDAgMCAwIDQ2IDEyLjIyaDIuMTFjMTQuMjQtLjI1IDI1Ljc0LTQuMzEgMzQuOTItMTEuNzEuNTMtLjQxIDEtLjg0IDEuNDktMS4yOGwtNC4xMiAxMC44NUgxMjNsNi4xOS0xOC44MmE2Ny41IDY3LjUgMCAwIDAgMjEuNjggMy40MyA2OC4zIDY4LjMgMCAwIDAgMjEuMTYtMy4yNWw2IDE4LjY0aDYwLjE0di0zOWgxMy4xMWMzMS43MSAwIDUwLjQ2LTE2LjE1IDUwLjQ2LTQzLjIgMC0zMC4xMS0xOC4yMi00My45NC01Ny4wMS00My45NE0xNTAuOTEgMTIxYTM2LjkgMzYuOSAwIDAgMS0xMy0yLjI4bDEyLjg3LTQwLjU5aC4yMmwxMi42NSA0MC43MWEzOC41IDM4LjUgMCAwIDEtMTIuNzQgMi4xNm05Ni4yLTIzLjMzaC04Ljk0VjY0LjkxaDguOTRjMTEuOTMgMCAyMS40NCA0IDIxLjQ0IDE2LjE0IDAgMTIuNi05LjUxIDE2LjU3LTIxLjQ0IDE2LjU3IiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7ZmlsbDojZmZmIi8+PC9zdmc+);height:1.5rem;width:3rem}.fd-shellbar__separator{background-color:var(--sapToolbar_SeparatorColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:2rem;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;width:.0625rem}.fd-shellbar__separator:after,.fd-shellbar__separator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar__spacer{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-flex:1;-ms-flex:1 auto;flex:1 auto}.fd-shellbar__spacer:after,.fd-shellbar__spacer:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar .fd-popover__control:focus-visible{outline:none}.fd-shellbar .fd-shellbar__button{--fdButtonBackgroundColor:var(--sapButton_Lite_Background);--fdButtonBorderColor:var(--sapButton_Lite_BorderColor);--fdButtonColor:var(--sapShell_TextColor)}.fd-shellbar .fd-shellbar__button>[class*=sap-icon]{color:var(--fdButtonIconColor,var(--sapShell_InteractiveTextColor))}.fd-shellbar .fd-shellbar__button.fd-user-menu__control{padding-inline:0}.fd-shellbar .fd-shellbar__button.is-hover,.fd-shellbar .fd-shellbar__button:hover{--fdButtonBackgroundColor:var(--sapShell_Hover_Background);--fdButtonBorderColor:var(--fdShellbar_Button_Hover_Border_Color);--fdButtonColor:var(--sapShell_TextColor)}.fd-shellbar .fd-shellbar__button.is-hover>[class*=sap-icon],.fd-shellbar .fd-shellbar__button:hover>[class*=sap-icon]{color:var(--fdButtonIconColor,var(--sapShell_InteractiveTextColor))}.fd-shellbar .fd-shellbar__button.is-active,.fd-shellbar .fd-shellbar__button:active{--fdButtonBackgroundColor:var(--sapShell_Active_Background);--fdButtonBorderColor:var(--fdShellbar_Button_Active_Border_Color);--fdButtonColor:var(--sapShell_Active_TextColor)}.fd-shellbar .fd-shellbar__button.is-active>[class*=sap-icon],.fd-shellbar .fd-shellbar__button:active>[class*=sap-icon]{color:var(--fdButtonIconColor,var(--sapShell_Active_TextColor))}.fd-shellbar .fd-shellbar__button.is-toggled{--fdButtonBackgroundColor:var(--sapShell_Selected_Background);--fdButtonBorderColor:var(--fdShellbar_Button_Active_Border_Color);--fdButtonColor:var(--sapShell_Selected_TextColor)}.fd-shellbar .fd-shellbar__button.is-toggled>[class*=sap-icon]{color:var(--fdButtonIconColor,var(--sapShell_Selected_TextColor))}.fd-shellbar .fd-shellbar__button.is-focus,.fd-shellbar .fd-shellbar__button:focus{z-index:5}.fd-shellbar .fd-shellbar__button.is-focus:after,.fd-shellbar .fd-shellbar__button:focus:after{border-color:var(--fdShellbar_Button_Outline_Color)}.fd-shellbar .fd-shellbar__button.fd-shellbar__button--menu{--fdButtonColor:var(--sapShell_TextColor)}.fd-shellbar .fd-shellbar__button:has(.fd-shellbar__avatar--circle){border-radius:20rem;--fdButton_Height:fit-content;--fdButton_Clickable_Height:fit-content;--fdButton_Min_Width:fit-content;--fdButton_Focus_Border_Radius:20rem}.fd-shellbar .fd-shellbar__button--menu .fd-shellbar__title{margin-block:0;margin-inline:0}.fd-shellbar .fd-shellbar__action{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0}.fd-shellbar .fd-shellbar__action:after,.fd-shellbar .fd-shellbar__action:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar .fd-shellbar__action>*{vertical-align:middle}.fd-shellbar .fd-shellbar__action--grow{-webkit-box-flex:1;-ms-flex:1;flex:1}.fd-shellbar .fd-shellbar__action--shrink{-webkit-box-flex:0;-ms-flex:0;flex:0}.fd-shellbar .fd-shellbar__action:has(.fd-product-switch){-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-shellbar .fd-shellbar__search-field{background-color:var(--fdShellbar_SearchField_Background_Color,var(--sapShell_InteractiveBackground));border:none;border-radius:var(--fdShellbar_SearchField_Border_Radius);-webkit-box-shadow:var(--fdShellbar_SearchField_Box_Shadow,var(--fdShellbar_SearchField_Shadow));box-shadow:var(--fdShellbar_SearchField_Box_Shadow,var(--fdShellbar_SearchField_Shadow));max-width:25rem;min-width:25rem}.fd-shellbar .fd-shellbar__search-field:has(.fd-shellbar__search-field-category){max-width:36rem}.fd-shellbar .fd-shellbar__search-field.is-hover,.fd-shellbar .fd-shellbar__search-field:hover{--fdShellbar_SearchField_Box_Shadow:var(--sapField_Hover_Shadow);--fdShellbar_SearchField_Background_Color:var(--fdShellbar_SearchField_Background_Color_Hover)}.fd-shellbar .fd-shellbar__search-field.is-focus,.fd-shellbar .fd-shellbar__search-field:focus{outline:none;z-index:5}.fd-shellbar .fd-shellbar__search-field.is-active,.fd-shellbar .fd-shellbar__search-field.is-focus,.fd-shellbar .fd-shellbar__search-field:active,.fd-shellbar .fd-shellbar__search-field:focus{--fdShellbar_SearchField_Background_Color:var(--fdShellbar_SearchField_Background_Color_Active)}.fd-shellbar .fd-shellbar__search-field:has(input:focus){--fdShellbar_SearchField_Background_Color:var(--fdShellbar_SearchField_Background_Color_Active);background:none;-webkit-box-shadow:var(--fdShellbar_Active_Shadow);box-shadow:var(--fdShellbar_Active_Shadow)}.fd-shellbar .fd-shellbar__search-field:has(button:hover){--fdShellbar_SearchField_Background_Color:var(--sapShell_InteractiveBackground)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input{border-radius:var(--fdShellbar_SearchField_Input_Border_Radius);padding-inline:var(--fdInputGroup_Input_Padding,.875rem .25rem);width:15rem;--fdInputGroup_Input_Color:var(--fdShellbar_SearchField_Input_Text_Color);--fdInputGroup_Input_Border:var(--fdShellbar_SearchField_Input_Border);--fdInputGroup_Input_Background:var(--fdShellbar_SearchField_Input_Background_Regular)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:-moz-placeholder~.fd-shellbar__search-cancel{display:none}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:-ms-input-placeholder~.fd-shellbar__search-cancel{display:none}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:placeholder-shown~.fd-shellbar__search-cancel{display:none}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input::-webkit-input-placeholder{color:var(--fdShellbar_SearchField_Input_Placeholder_TextColor)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input::-moz-placeholder{color:var(--fdShellbar_SearchField_Input_Placeholder_TextColor)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:-ms-input-placeholder{color:var(--fdShellbar_SearchField_Input_Placeholder_TextColor)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input::-ms-input-placeholder{color:var(--fdShellbar_SearchField_Input_Placeholder_TextColor)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input::placeholder{color:var(--fdShellbar_SearchField_Input_Placeholder_TextColor)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:hover{--fdInputGroup_Hover_Input_Background:var(--fdShellbar_SearchField_Input_Background_Hover);--fdInputGroup_Input_Border:var(--fdShellbar_SearchField_Input_Border_Hover);border:var(--fdInputGroup_Input_Border)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-active,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:active{--fdInputGroup_Input_Background:var(--fdShellbar_SearchField_Input_Background_Active);--fdInputGroup_Input_Border:var(--fdShellbar_SearchField_Input_Border_Active);--fdInputGroup_Input_Padding:var(--fdShellbar_SearchField_Input_Padding_Inline)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-focus,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:focus{z-index:5;--fdInputGroup_Input_Background:var(--fdShellbar_SearchField_Input_Background_Focus);--fdInputGroup_Input_Border:var(--fdShellbar_SearchField_Input_Border_Active);--fdInputGroup_Input_Padding:var(--fdShellbar_SearchField_Input_Padding_Inline);outline:var(--fdShellbar_SearchField_Input_Outline);outline-offset:var(--fdShellbar_SearchField_Input_Outline_Offset)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-focus:not(:-moz-placeholder)~.fd-shellbar__search-submit>*,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:focus:not(:-moz-placeholder)~.fd-shellbar__search-submit>*{--fdButtonColor:var(--fdShellbar_SearchField_Submit_Button_Color);--fdButtonIconColor:var(--fdShellbar_SearchField_Submit_Button_Color);--fdButtonBorderColor:var(--fdShellbar_SearchField_Submit_Button_Border_Color);--fdButtonBackgroundColor:var(--fdShellbar_SearchField_Submit_Button_Background_Color)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-focus:not(:-ms-input-placeholder)~.fd-shellbar__search-submit>*,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:focus:not(:-ms-input-placeholder)~.fd-shellbar__search-submit>*{--fdButtonColor:var(--fdShellbar_SearchField_Submit_Button_Color);--fdButtonIconColor:var(--fdShellbar_SearchField_Submit_Button_Color);--fdButtonBorderColor:var(--fdShellbar_SearchField_Submit_Button_Border_Color);--fdButtonBackgroundColor:var(--fdShellbar_SearchField_Submit_Button_Background_Color)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-focus:not(:placeholder-shown)~.fd-shellbar__search-submit>*,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:focus:not(:placeholder-shown)~.fd-shellbar__search-submit>*{--fdButtonColor:var(--fdShellbar_SearchField_Submit_Button_Color);--fdButtonIconColor:var(--fdShellbar_SearchField_Submit_Button_Color);--fdButtonBorderColor:var(--fdShellbar_SearchField_Submit_Button_Border_Color);--fdButtonBackgroundColor:var(--fdShellbar_SearchField_Submit_Button_Background_Color)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-focus:not(:-moz-placeholder)~.fd-shellbar__search-submit>.is-hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-focus:not(:-moz-placeholder)~.fd-shellbar__search-submit>:hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:focus:not(:-moz-placeholder)~.fd-shellbar__search-submit>.is-hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:focus:not(:-moz-placeholder)~.fd-shellbar__search-submit>:hover{--fdButtonColor:var(--sapButton_Emphasized_Hover_TextColor);--fdButtonIconColor:var(--sapButton_Emphasized_Hover_TextColor);--fdButtonBorderColor:var(--fdShellbar_SearchField_Submit_Button_Border_Color_Hover);--fdButtonBackgroundColor:var(--fdShellbar_SearchField_Submit_Button_Background_Color_Hover)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-focus:not(:-ms-input-placeholder)~.fd-shellbar__search-submit>.is-hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-focus:not(:-ms-input-placeholder)~.fd-shellbar__search-submit>:hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:focus:not(:-ms-input-placeholder)~.fd-shellbar__search-submit>.is-hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:focus:not(:-ms-input-placeholder)~.fd-shellbar__search-submit>:hover{--fdButtonColor:var(--sapButton_Emphasized_Hover_TextColor);--fdButtonIconColor:var(--sapButton_Emphasized_Hover_TextColor);--fdButtonBorderColor:var(--fdShellbar_SearchField_Submit_Button_Border_Color_Hover);--fdButtonBackgroundColor:var(--fdShellbar_SearchField_Submit_Button_Background_Color_Hover)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-focus:not(:placeholder-shown)~.fd-shellbar__search-submit>.is-hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input.is-focus:not(:placeholder-shown)~.fd-shellbar__search-submit>:hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:focus:not(:placeholder-shown)~.fd-shellbar__search-submit>.is-hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-input:focus:not(:placeholder-shown)~.fd-shellbar__search-submit>:hover{--fdButtonColor:var(--sapButton_Emphasized_Hover_TextColor);--fdButtonIconColor:var(--sapButton_Emphasized_Hover_TextColor);--fdButtonBorderColor:var(--fdShellbar_SearchField_Submit_Button_Border_Color_Hover);--fdButtonBackgroundColor:var(--fdShellbar_SearchField_Submit_Button_Background_Color_Hover)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-addon{margin-inline:var(--fdShellbar_SearchField_Addon_Margin_Inline);max-width:var(--fdShellbar_SearchField_Button_Width);min-width:var(--fdShellbar_SearchField_Button_Width);width:var(--fdShellbar_SearchField_Button_Width)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-addon .fd-shellbar__button{height:var(--fdShellbar_SearchField_Button_Height);max-height:var(--fdShellbar_SearchField_Button_Height);max-width:var(--fdShellbar_SearchField_Button_Width);min-height:var(--fdShellbar_SearchField_Button_Height);min-width:var(--fdShellbar_SearchField_Button_Width);width:var(--fdShellbar_SearchField_Button_Width);--fdButton_Focus_Border_Radius:var(--fdShellbar_SearchField_Button_Border_Radius);border-radius:var(--fdShellbar_SearchField_Button_Border_Radius)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-addon .fd-shellbar__button.is-focus,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-addon .fd-shellbar__button:focus{z-index:5}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-addon .fd-shellbar__button.is-focus:after,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-addon .fd-shellbar__button:focus:after{inset:var(--fdShellbar_SearchField_Button_Focus_Inset)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category{position:relative;-webkit-margin-end:var(--fdShell_Search_Field_Category_Margin_End);margin-inline-end:var(--fdShell_Search_Field_Category_Margin_End)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category:after{background-color:var(--sapShell_InteractiveBorderColor);content:\"\";display:var(--fdShell_Search_Field_Category_Divider_Display);height:1.5rem;position:absolute;right:-.5rem;width:.0625rem}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category[dir=rtl]:after,[dir=rtl] .fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category:after{left:-.5rem;right:auto}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-select{-webkit-margin-start:.375rem;margin-inline-start:.375rem}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-select .fd-select__control:after{-webkit-box-shadow:none;box-shadow:none}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-select .fd-select__control.is-focus,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-select .fd-select__control:focus{outline:none;z-index:5}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-select .fd-select__text-content{color:var(--sapShell_InteractiveTextColor)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-dropdown{border-radius:var(--fdShell_Search_Dropdown_Button_Radius);color:var(--sapShell_InteractiveTextColor);height:var(--fdShell_Search_Dropdown_Height);max-width:2.125rem;min-width:2.125rem;width:2.125rem}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-dropdown>[class*=sap-icon]{max-width:1rem;min-width:1rem;width:1rem}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-dropdown.is-hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-dropdown:hover{background-color:var(--sapShell_Hover_Background);-webkit-box-shadow:var(--fdShell_Search_Dropdown_Box_Shadow_Hover);box-shadow:var(--fdShell_Search_Dropdown_Box_Shadow_Hover);color:var(--sapShell_InteractiveTextColor)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-dropdown.is-active,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-dropdown:active{color:var(--sapShell_Active_TextColor)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category{background:none;border:var(--fdShell_Search_Category_Border);border-radius:var(--fdShell_Search_Dropdown_Border_Radius);gap:.25rem;height:var(--fdShell_Search_Dropdown_Height);margin-inline:0;max-width:18rem;min-height:var(--fdShell_Search_Dropdown_Height);min-width:auto}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category.is-hover,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category:hover{background-color:var(--fdShell_Search_Dropdown_Hover_Background);border:var(--fdShell_Search_Category_Border);-webkit-box-shadow:var(--sapField_Hover_Shadow);box-shadow:var(--sapField_Hover_Shadow)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category.is-active,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category:active{background-color:var(--fdShell_Search_Dropdown_Active_Background)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category.is-active .fd-shellbar__search-dropdown,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category:active .fd-shellbar__search-dropdown{-webkit-box-shadow:var(--fdShell_Search_Dropdown_Box_Shadow_Hover);box-shadow:var(--fdShell_Search_Dropdown_Box_Shadow_Hover);color:var(--sapShell_Active_TextColor)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category.is-expanded,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category[aria-expanded=true]{background-color:var(--fdShell_Search_Dropdown_Active_Background);-webkit-box-shadow:var(--sapField_Hover_Shadow);box-shadow:var(--sapField_Hover_Shadow)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category.is-expanded .fd-shellbar__search-dropdown,.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category[aria-expanded=true] .fd-shellbar__search-dropdown{background-color:var(--sapShell_Active_Background);-webkit-box-shadow:var(--fdShell_Search_Dropdown_Box_Shadow_Hover);box-shadow:var(--fdShell_Search_Dropdown_Box_Shadow_Hover);color:var(--sapShell_Active_TextColor)}.fd-shellbar .fd-shellbar__search-field .fd-shellbar__search-field-category .fd-shellbar__search-category--collapsed .fd-select__text-content{display:none}.fd-shellbar .fd-shellbar__group{--fdShellbar_Button_Active_Background:var(--sapShell_Active_Background);--fdShellbar_Button_Active_Color:var(--sapShell_Active_TextColor);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem}.fd-shellbar .fd-shellbar__group:after,.fd-shellbar .fd-shellbar__group:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar .fd-shellbar__group--shrink{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.fd-shellbar .fd-shellbar__group--basis-auto{-ms-flex-preferred-size:auto;flex-basis:auto}.fd-shellbar .fd-shellbar__group--product{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.fd-shellbar .fd-shellbar__group--center,.fd-shellbar .fd-shellbar__group--copilot{-webkit-box-ordinal-group:3;-ms-flex-order:2;display:none;order:2;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-block:0;margin-inline:.5rem}.fd-shellbar .fd-shellbar__group--center .fd-shellbar__action,.fd-shellbar .fd-shellbar__group--copilot .fd-shellbar__action{width:100%}@media(width>=1440px){.fd-shellbar .fd-shellbar__group--center,.fd-shellbar .fd-shellbar__group--copilot{display:inline-block}}.fd-shellbar .fd-shellbar__group--context-area{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:3;-ms-flex-order:2;gap:.5rem;order:2}.fd-shellbar .fd-shellbar__group--actions{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-ordinal-group:4;-ms-flex-order:3;gap:.5rem;order:3}.fd-shellbar .fd-shellbar__group--full-width{width:100%}.fd-shellbar .fd-shellbar__toolbar{padding-inline:0}.fd-shellbar--s,.fd-shellbar--sm{--fdSelect_Text_Content_Display:none;--fdSelect_Min_Width:1rem}.fd-shellbar--s .fd-shellbar__subtitle,.fd-shellbar--s .fd-shellbar__title,.fd-shellbar--sm .fd-shellbar__subtitle,.fd-shellbar--sm .fd-shellbar__title{display:none}.fd-shellbar--s .fd-shellbar__group--mobile-flex,.fd-shellbar--sm .fd-shellbar__group--mobile-flex{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-shellbar--s .fd-shellbar__action--mobile,.fd-shellbar--sm .fd-shellbar__action--mobile{display:inline-block}.fd-shellbar--s .fd-shellbar__action--desktop,.fd-shellbar--sm .fd-shellbar__action--desktop{display:none}.fd-shellbar--s .fd-shellbar__action:has(.fd-shellbar__search-field),.fd-shellbar--sm .fd-shellbar__action:has(.fd-shellbar__search-field){width:100%}.fd-shellbar--s .fd-shellbar__action-combobox--mobile,.fd-shellbar--sm .fd-shellbar__action-combobox--mobile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--sapShellColor);height:100%;left:0;margin-block:0;margin-inline:0;padding-block:0;padding-inline:.3rem;position:absolute;width:100%;z-index:7}.fd-shellbar--s .fd-shellbar__button--menu [class*=sap-icon],.fd-shellbar--s .fd-shellbar__button--menu[class*=sap-icon],.fd-shellbar--sm .fd-shellbar__button--menu [class*=sap-icon],.fd-shellbar--sm .fd-shellbar__button--menu[class*=sap-icon]{margin-block:0!important;margin-inline:0!important}.fd-shellbar--s .fd-shellbar__search-field,.fd-shellbar--sm .fd-shellbar__search-field{width:100%}.fd-shellbar--l,.fd-shellbar--lg,.fd-shellbar--m,.fd-shellbar--md{padding-block:0;padding-inline:2rem}.fd-shellbar--l .fd-shellbar__subtitle,.fd-shellbar--l .fd-shellbar__title,.fd-shellbar--lg .fd-shellbar__subtitle,.fd-shellbar--lg .fd-shellbar__title,.fd-shellbar--m .fd-shellbar__subtitle,.fd-shellbar--m .fd-shellbar__title,.fd-shellbar--md .fd-shellbar__subtitle,.fd-shellbar--md .fd-shellbar__title,.fd-shellbar--xl .fd-shellbar__subtitle,.fd-shellbar--xl .fd-shellbar__title{display:inline-block}.fd-shellbar--l .fd-shellbar__action--mobile,.fd-shellbar--lg .fd-shellbar__action--mobile,.fd-shellbar--m .fd-shellbar__action--mobile,.fd-shellbar--md .fd-shellbar__action--mobile,.fd-shellbar--xl .fd-shellbar__action--mobile{display:none}.fd-shellbar--l .fd-shellbar__action--desktop,.fd-shellbar--lg .fd-shellbar__action--desktop,.fd-shellbar--m .fd-shellbar__action--desktop,.fd-shellbar--md .fd-shellbar__action--desktop,.fd-shellbar--xl .fd-shellbar__action--desktop{display:inline-block}.fd-shellbar--xl,.fd-shellbar--xxl{padding-block:0;padding-inline:3rem}.fd-shellbar--side-nav{--fdShellbar_Inline_Padding:.875rem 1rem}.fd-shellbar--side-nav.fd-shellbar--l,.fd-shellbar--side-nav.fd-shellbar--lg,.fd-shellbar--side-nav.fd-shellbar--m,.fd-shellbar--side-nav.fd-shellbar--md,.fd-shellbar--side-nav.fd-shellbar--s,.fd-shellbar--side-nav.fd-shellbar--sm,.fd-shellbar--side-nav.fd-shellbar--xl{padding-inline:.875rem 1rem}@media(width<=599px){.fd-shellbar--responsive-paddings{padding-inline:1rem}}@media(width>=600px)and (width<=1023px){.fd-shellbar--responsive-paddings{padding-inline:2rem}}@media(width>=1024px)and (width<=1439px){.fd-shellbar--responsive-paddings{padding-inline:2rem}}@media(width>=1440px){.fd-shellbar--responsive-paddings{padding-inline:3rem}}@media(width<=599px){.fd-shellbar--responsive-paddings{--fdSelect_Text_Content_Display:none;--fdSelect_Min_Width:1rem}.fd-shellbar--responsive-paddings .fd-shellbar__subtitle,.fd-shellbar--responsive-paddings .fd-shellbar__title{display:none}.fd-shellbar--responsive-paddings .fd-shellbar__group--mobile-flex{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fd-shellbar--responsive-paddings .fd-shellbar__action--mobile{display:inline-block}.fd-shellbar--responsive-paddings .fd-shellbar__action--desktop{display:none}.fd-shellbar--responsive-paddings .fd-shellbar__action:has(.fd-shellbar__search-field){width:100%}.fd-shellbar--responsive-paddings .fd-shellbar__action-combobox--mobile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--sapShellColor);height:100%;left:0;margin-block:0;margin-inline:0;padding-block:0;padding-inline:.3rem;position:absolute;width:100%;z-index:7}.fd-shellbar--responsive-paddings .fd-shellbar__button--menu [class*=sap-icon],.fd-shellbar--responsive-paddings .fd-shellbar__button--menu[class*=sap-icon]{margin-block:0!important;margin-inline:0!important}.fd-shellbar--responsive-paddings .fd-shellbar__search-field{width:100%}}@media(width>=600px)and (width<=1023px){.fd-shellbar--responsive-paddings .fd-shellbar__subtitle,.fd-shellbar--responsive-paddings .fd-shellbar__title{display:inline-block}.fd-shellbar--responsive-paddings .fd-shellbar__action--mobile{display:none}.fd-shellbar--responsive-paddings .fd-shellbar__action--desktop{display:inline-block}}@media(width>=1024px)and (width<=1439px){.fd-shellbar--responsive-paddings .fd-shellbar__subtitle,.fd-shellbar--responsive-paddings .fd-shellbar__title{display:inline-block}.fd-shellbar--responsive-paddings .fd-shellbar__action--mobile{display:none}.fd-shellbar--responsive-paddings .fd-shellbar__action--desktop{display:inline-block}}@media(width>=1440px){.fd-shellbar--responsive-paddings .fd-shellbar__subtitle,.fd-shellbar--responsive-paddings .fd-shellbar__title{display:inline-block}.fd-shellbar--responsive-paddings .fd-shellbar__action--mobile{display:none}.fd-shellbar--responsive-paddings .fd-shellbar__action--desktop{display:inline-block}}.fd-shellbar-overlay{background:var(--sapBlockLayer_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;left:0;line-height:normal;margin-block:0;margin-inline:0;opacity:.3;padding-block:0;padding-inline:0;position:absolute;right:0;top:0;width:100%}.fd-shellbar-overlay:after,.fd-shellbar-overlay:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-shellbar[class*=-compact],.fd-shellbar[class*=-condensed],[class*=-compact] .fd-shellbar:not([class*=-cozy]),[class*=-condensed] .fd-shellbar:not([class*=-cozy]){--fdShell_Search_Dropdown_Height:var(--sapElement_Compact_Height);--fdShellbar_SearchField_Button_Height:var(--sapElement_Compact_Height)}.fd-shellbar--cx-side-nav{box-shadow:var(--sapContent_Shadow0);padding-left:.5rem;z-index:1}[dir=rtl] .fd-shellbar--cx-side-nav,.fd-shellbar--cx-side-nav[dir=rtl]{padding-left:2rem;padding-right:.5rem}.fd-shellbar__action.fd-shellbar__action--desktop:empty{display:none}.fd-shellbar .fd-shellbar__group .fd-shellbar__button.fd-shellbar__button--menu{--fdButtonColor: var(--sapShell_TextColor)}.fd-shellbar{gap:.5rem}.fd-shellbar .fd-shellbar__search-field{min-width:auto}.fd-shellbar.fd-shellbar--has-context-area{justify-content:start}.fd-shellbar.fd-shellbar--has-context-area .fd-shellbar__group--actions{margin-right:0;margin-left:auto}[dir=rtl] .fd-shellbar.fd-shellbar--has-context-area .fd-shellbar__group--actions,.fd-shellbar.fd-shellbar--has-context-area .fd-shellbar__group--actions[dir=rtl]{margin-right:auto;margin-left:0}.fd-shellbar__title{vertical-align:middle}.fd-shellbar--s .fd-shellbar__branding,.fd-shellbar--m .fd-shellbar__branding{gap:0}.fd-shellbar--s .fd-shellbar__separator,.fd-shellbar--m .fd-shellbar__separator{display:none}.fd-shellbar .fd-shellbar__group--context-area{flex:none}.fd-shellbar .fd-shellbar__group--context-area .fd-object-status{white-space:nowrap;overflow:hidden}.fd-shellbar.fd-shellbar--s .fd-shellbar__group--actions{gap:.125rem}.fd-shellbar.fd-shellbar--s .fd-shellbar__search-field{max-width:12.5rem}.fd-shellbar:not(.fd-shellbar--xl) .fd-shellbar__search-field .fd-shellbar__search-field-input{width:auto}.fd-shellbar.fd-shellbar--m fd-shellbar-actions .fd-shellbar__search-field{max-width:15rem}.fd-shellbar.fd-shellbar--m fd-shellbar-actions .fd-shellbar__search-field .fd-shellbar__search-field-input{max-width:6rem}.fd-button.fd-shellbar__button.fd-shellbar__button--user-menu{padding:0!important}.fd-shellbar__separator{height:2rem}.fd-shellbar .fd-shellbar__branding{padding-inline:.25rem .5rem}.fd-shellbar .fd-shellbar__branding .fd-shellbar__logo{height:1.875rem;max-height:1.875rem;width:4rem;margin-block:.0625rem}.fd-shellbar .fd-shellbar__branding .fd-shellbar__title{padding-inline:0}\n/*! Bundled license information:\n\nfundamental-styles/dist/shellbar.css:\n  (*!\n   * Fundamental Library Styles v0.41.8\n   * Copyright (c) 2026 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: ClickedDirective, selector: "[fdkClicked]", outputs: ["fdkClicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-shellbar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1208,8 +1194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Use direct imports of components and directives.
  */
 class ShellbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: ShellbarModule, imports: [ShellbarComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: ShellbarModule, imports: [ShellbarComponent,
             ProductMenuComponent,
             ShellbarSubtitleComponent,
             ShellbarActionsComponent,
@@ -1241,14 +1227,14 @@ class ShellbarModule {
             ShellbarSeparatorComponent,
             ShellbarHidePriorityDirective,
             ContentDensityModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarModule, imports: [ShellbarComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarModule, imports: [ShellbarComponent,
             ProductMenuComponent,
             ShellbarActionsComponent,
             ShellbarActionsMobileComponent,
             ShellbarActionComponent,
             ShellbarUserMenuComponent, ContentDensityModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShellbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ShellbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [