fix(deps): fix merge conflicts

libs/core/shellbar/shellbar-actions-mobile/shellbar-actions-mobile.component.html

@@ -1,14 +1,45 @@
 @if (shellbarActions.length > 0 || searchExists) {
-    <fd-overflow-layout [maxVisibleItems]="3">
-        <fd-menu>
-            @for (action of shellbarActions; track action; let i = $index) {
-                <li *fdOverflowItemRef="let hidden" fdOverflowLayoutItem fd-menu-item>
-                    <a fd-menu-interactive href="#">
-                        <fd-menu-addon position="before" [glyph]="action.glyph"></fd-menu-addon>
-                        <span fd-menu-title>{{ action.label }}</span>
-                    </a>
-                </li>
-            }
-        </fd-menu>
-    </fd-overflow-layout>
+    <div class="fd-shellbar-collapse">
+        <fd-action-sheet placement="bottom-end" #actionSheet>
+            <fd-action-sheet-control>
+                <button
+                    fd-button
+                    fdType="transparent"
+                    glyph="overflow"
+                    class="fd-shellbar__button"
+                    [attr.aria-label]="'coreShellbar.collapsedItemMenuLabel' | fdTranslate"
+                >
+                    @if (totalNotifications) {
+                        <span class="fd-button__badge">
+                            {{ totalNotifications }}
+                        </span>
+                    }
+                </button>
+            </fd-action-sheet-control>
+            <fd-action-sheet-body>
+                @if (searchExists) {
+                    <li
+                        fd-action-sheet-item
+                        tabindex="-1"
+                        glyph="search"
+                        [label]="'coreShellbar.search' | fdTranslate"
+                        (click)="showSearch.emit(); actionSheet.close()"
+                    ></li>
+                }
+                @for (action of shellbarActions; track action) {
+                    <li
+                        fd-action-sheet-item
+                        tabindex="-1"
+                        [glyph]="action.glyph"
+                        [label]="action.label"
+                        (click)="actionClicked(action, $event)"
+                    >
+                        @if (action.notificationCount) {
+                            <span class="fd-button__badge">{{ action.notificationCount }}</span>
+                        }
+                    </li>
+                }
+            </fd-action-sheet-body>
+        </fd-action-sheet>
+    </div>
 }

libs/core/shellbar/shellbar-actions-mobile/shellbar-actions-mobile.component.ts

@@ -10,8 +10,6 @@ import {
 } from '@angular/core';
 import { ActionSheetModule } from '@fundamental-ngx/core/action-sheet';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
-import { MenuModule } from '@fundamental-ngx/core/menu';
-import { OverflowLayoutModule } from '@fundamental-ngx/core/overflow-layout';
 import { FdTranslatePipe } from '@fundamental-ngx/i18n';
 import { ShellbarActionComponent } from '../shellbar-action/shellbar-action.component';
 
@@ -21,7 +19,7 @@ import { ShellbarActionComponent } from '../shellbar-action/shellbar-action.comp
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [ActionSheetModule, ButtonComponent, FdTranslatePipe, OverflowLayoutModule, MenuModule]
+    imports: [ActionSheetModule, ButtonComponent, FdTranslatePipe]
 })
 export class ShellbarActionsMobileComponent implements AfterContentChecked {
     /** @hidden */

libs/core/shellbar/shellbar-actions/shellbar-actions.component.html

@@ -5,20 +5,20 @@
 }
 <!-- 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. -->
 <div class="fd-shellbar__action" cdkPortalOutlet></div>
-<div class="fd-shellbar__action">
+<div class="fd-shellbar__action fd-shellbar__action--mobile">
     <fd-shellbar-actions-mobile
         [shellbarActions]="shellbarActions"
         [searchExists]="!!_searchPortal"
         (showSearch)="_toggleSearch()"
     ></fd-shellbar-actions-mobile>
 </div>
-<!--<div class="fd-shellbar__action fd-shellbar__action&#45;&#45;desktop">-->
-<!--    <ng-content></ng-content>-->
-<!--</div>-->
+<div class="fd-shellbar__action fd-shellbar__action--desktop">
+    <ng-content></ng-content>
+</div>
 @if (_addSearchIcon && !showSearch) {
     <fd-shellbar-action glyph="search" [callback]="_toggleSearch"></fd-shellbar-action>
 }
-<!--<ng-content select="fd-shellbar-action"></ng-content>-->
+<ng-content select="fd-shellbar-action"></ng-content>
 @if (userComponent || userItem) {
     @if (!userComponent) {
         <fd-shellbar-user-menu

libs/core/shellbar/shellbar-actions/shellbar-actions.component.ts

@@ -176,7 +176,6 @@ export class ShellbarActionsComponent implements OnDestroy {
         this._searchPortal = portal;
         this._addSearchIcon = true;
         this.currentSize = size;
-        this.showSearch = size === 'xl';
         this._searchComponent = searchComponent;
         this._toggleSearchPortal(this.showSearch);
         this._cd.detectChanges();

libs/core/toolbar/toolbar.component.html

@@ -8,7 +8,7 @@
     @if (!spacerUsed()) {
         <fd-toolbar-spacer></fd-toolbar-spacer>
     }
-    <!--    <fd-toolbar-separator></fd-toolbar-separator>-->
+    <fd-toolbar-separator></fd-toolbar-separator>
     <fd-popover placement="bottom-end" [noArrow]="true" class="fd-popover">
         <fd-popover-control>
             <button fd-button title="More" aria-label="More" aria-haspopup="true" fdType="transparent" glyph="overflow">

libs/docs/core/shellbar/shellbar-docs.component.html

@@ -1,3 +1,98 @@
+<fd-docs-section-title id="how-it-works" componentName="shellbar"> How it works </fd-docs-section-title>
+<description>
+    <ul>
+        <li>The shellbar should be placed inside the shell layout container.</li>
+        <li>The shellbar is fluid and responsive by default with proper margins and padding built in.</li>
+        <li>The shellbar actions are duplicated into the overflow menu on mobile screens.</li>
+        <li>
+            Product menu data gets passed as inputs to the <code>&lt;fd-product-menu></code> component. The user, user
+            menu and product switcher are passed as inputs to the <code>&lt;fd-shellbar-actions></code> component. Data
+            for each action gets passed as inputs to the <code>&lt;fd-shellbar-action></code> component. The response to
+            clicks on any of these items is handled via callback functions for each object. See the 'collapsible'
+            example to gain an understanding of how this works.
+        </li>
+    </ul>
+</description>
+
+<separator></separator>
+
+<fd-docs-section-title id="basic" componentName="shellbar"> Basic </fd-docs-section-title>
+<description>
+    This example shows the minimum shellbar for a single application product with only user settings. If no user
+    thumbnail is available then display initials.
+</description>
+<component-example>
+    <fd-shellbar-basic-example></fd-shellbar-basic-example>
+</component-example>
+<code-example [exampleFiles]="shellbarBasicExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="overflow-menu" componentName="shellbar">
+    Links with collapsible menu and product switcher.
+</fd-docs-section-title>
+<description>
+    <p>The shellbar can have 4 different sizes <code>'s' | 'm' | 'l' | 'xl'</code>.</p>
+    <p>
+        When a product has multiple links, the product links should collapse into an overflow menu on mobile screens
+        (<code>s</code> size).
+    </p>
+    <p>All actions, except for the user menu, should be collapsed.</p>
+    <p>
+        <code>ProductSwitchComponent</code> and <code>ProductMenuComponent</code> have properties straight from popover
+        component, so some customisation can be added, by passing inputs ex. <code>[position]="'bottom-end'"</code>.
+    </p>
+</description>
+<component-example>
+    <fd-shellbar-collapsible-example></fd-shellbar-collapsible-example>
+</component-example>
+<code-example [exampleFiles]="shellbarCollapsible"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="responsive" componentName="shellbar"> Responsive Shellbar </fd-docs-section-title>
+<description>
+    If no <code>size</code> Input property provided, Shellbar will automatically determine which size to apply based on
+    the current width of it.
+</description>
+<component-example>
+    <fd-shellbar-responsive-example></fd-shellbar-responsive-example>
+</component-example>
+<code-example [exampleFiles]="shellbarResponsive"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="side-growing-group" componentName="shellbar">
+    Shellbar with Growing groups
+</fd-docs-section-title>
+<description>
+    <p>
+        The shellbar is optimized to be used with central group for the search. This creates a necessity of centering
+        the groups by giving them equal width.
+    </p>
+    <p>
+        If the design suggests that each group can have own width, developers can pass <code>[groupFlex]</code> input
+        property defining for each group whether it can shrink, allowing other groups to grow.
+    </p>
+</description>
+<component-example>
+    <fd-shellbar-growing-group-example></fd-shellbar-growing-group-example>
+</component-example>
+<code-example [exampleFiles]="shellbarGrowingGroupExampleFiles"></code-example>
+<separator></separator>
+
+<fd-docs-section-title id="custom-user-menu" componentName="shellbar">
+    Shellbar with custom user menu
+</fd-docs-section-title>
+<description>
+    <p>Shellbar has ability to render custom user menu. This can be achieved by passing custom template</p>
+</description>
+<component-example>
+    <fd-shellbar-custom-user-menu-example></fd-shellbar-custom-user-menu-example>
+</component-example>
+<code-example [exampleFiles]="shellbarCustomUserMenuExample"></code-example>
+<separator></separator>
+
 <fd-docs-section-title id="options" componentName="shellbar">
     Shellbar with branding and context area
 </fd-docs-section-title>