feat(core): shellbar improvements (SAP#9287)

BREKING CHANGE:
- From now on it's preferable to use platform search field for the shellbar instead of combobox;
- Search field is now located under actions only if the size of the shellbar is either m or l, otherwhise it will be directly projected in shellbar component;
- Shellbar inner markup was slightly changed;
- Shellbar now automatically can detect best size based on the width of it. It will apply appropriate value if `size` input property wasn't provided;

libs/core/src/lib/button/button.component.ts

@@ -19,6 +19,8 @@ import {
     ContentDensityMode
 } from '@fundamental-ngx/core/content-density';
 
+import { FD_BUTTON_COMPONENT } from './tokens';
+
 /**
  * Button directive, used to enhance standard HTML buttons.
  *
@@ -47,7 +49,11 @@ import {
             modifiers: {
                 [ContentDensityMode.COMPACT]: 'fd-button--compact'
             }
-        })
+        }),
+        {
+            provide: FD_BUTTON_COMPONENT,
+            useExisting: ButtonComponent
+        }
     ]
 })
 export class ButtonComponent extends BaseButton implements OnChanges, CssClassBuilder, OnInit, OnDestroy {

libs/core/src/lib/button/public_api.ts

@@ -2,3 +2,4 @@ export * from './button.module';
 export * from './base-button';
 export * from './button.component';
 export * from './deprecated-button-content-density.directive';
+export * from './tokens';

libs/core/src/lib/button/tokens.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const FD_BUTTON_COMPONENT = new InjectionToken('FdButtonComponent');

libs/core/src/lib/combobox/combobox-mobile/combobox-mobile.component.spec.ts

@@ -24,6 +24,7 @@ describe('ComboboxMobileComponent', () => {
     let comboboxInputComponent: ComboboxInterface = {
         inputText: 'someInputText',
         mobile: false,
+        inShellbar: false,
         mobileConfig: {
             title: 'title',
             approveButtonText: 'approve',

libs/core/src/lib/combobox/combobox.component.ts

@@ -59,6 +59,7 @@ import { GroupFunction } from './list-group.pipe';
 import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
 import { Overlay, RepositionScrollStrategy } from '@angular/cdk/overlay';
 import { FormStates } from '@fundamental-ngx/cdk/forms';
+import { FD_COMBOBOX_COMPONENT } from './tokens';
 
 let comboboxUniqueId = 0;
 
@@ -86,7 +87,11 @@ let comboboxUniqueId = 0;
         },
         registerFormItemControl(ComboboxComponent),
         MenuKeyboardService,
-        contentDensityObserverProviders()
+        contentDensityObserverProviders(),
+        {
+            provide: FD_COMBOBOX_COMPONENT,
+            useExisting: ComboboxComponent
+        }
     ],
     host: {
         '[class.fd-combobox-custom-class]': 'true',

libs/core/src/lib/combobox/combobox.interface.ts

@@ -10,6 +10,7 @@ export const COMBOBOX_COMPONENT = new InjectionToken<string[]>('ComboboxInterfac
 export interface ComboboxInterface extends MobileMode {
     inputText: string;
     openChange: EventEmitter<boolean>;
+    inShellbar: boolean;
 
     getValue(): any;
     dialogApprove(): void;

libs/core/src/lib/combobox/public_api.ts

@@ -6,3 +6,4 @@ export * from './combobox-mobile/combobox-mobile.module';
 export * from './combobox.interface';
 export * from './list-group.pipe';
 export * from './deprecated-combobox-content-density.directive';
+export * from './tokens';

libs/core/src/lib/combobox/tokens.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { ComboboxInterface } from './combobox.interface';
+
+export const FD_COMBOBOX_COMPONENT = new InjectionToken<ComboboxInterface>('FdComboboxComponent');

libs/core/src/lib/product-switch/product-switch/product-switch.component.ts

@@ -2,11 +2,18 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { Placement } from '@fundamental-ngx/core/shared';
 import { BasePopoverClass } from '@fundamental-ngx/core/popover';
+import { FD_PRODUCT_SWITCH_COMPONENT } from '../tokens';
 
 @Component({
     selector: 'fd-product-switch',
     templateUrl: './product-switch.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: FD_PRODUCT_SWITCH_COMPONENT,
+            useExisting: ProductSwitchComponent
+        }
+    ]
 })
 export class ProductSwitchComponent extends BasePopoverClass {
     /** Placement of a popover. */

libs/core/src/lib/product-switch/public_api.ts

@@ -2,3 +2,4 @@ export * from './product-switch.module';
 export * from './product-switch/product-switch.component';
 export * from './product-switch-body/product-switch.item';
 export * from './product-switch-body/product-switch-body.component';
+export * from './tokens';

libs/core/src/lib/product-switch/tokens.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const FD_PRODUCT_SWITCH_COMPONENT = new InjectionToken('FdProductSwitchComponent');

libs/core/src/lib/select/select.component.html

@@ -31,7 +31,7 @@
         class="fd-select__control"
         role="list"
         #selectControl
-        [class]="state ? 'is-' + state : ''"
+        [class]="_selectControlClass"
         [class.is-active]="_isOpen"
         [class.is-expanded]="_isOpen"
         [class.is-disabled]="disabled"
@@ -67,7 +67,7 @@
         <button
             fd-button
             tabindex="-1"
-            class="fd-button--transparent fd-select__button"
+            class="fd-button--transparent fd-select__button {{ selectDropdownButtonClass }}"
             *ngIf="!readonly"
             [disabled]="disabled"
             [glyph]="glyph"

libs/core/src/lib/select/select.component.ts

@@ -87,7 +87,7 @@ export const SELECT_ITEM_HEIGHT_EM = 4;
         contentDensityObserverProviders()
     ]
 })
-export class SelectComponent
+export class SelectComponent<T = any>
     implements
         ControlValueAccessor,
         SelectInterface,
@@ -206,13 +206,21 @@ export class SelectComponent
     @Input()
     inline = true;
 
+    /** Additional classname for the select control element. */
+    @Input()
+    selectControlClass: Nullable<string>;
+
+    /** Additional classname for the select dropdown button element. */
+    @Input()
+    selectDropdownButtonClass: Nullable<string>;
+
     /** Event emitted when the popover open state changes. */
     @Output()
     readonly isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>();
 
     /** Event emitted when the selected value of the select changes. */
     @Output()
-    readonly valueChange = new EventEmitter<any>();
+    readonly valueChange = new EventEmitter<T>();
 
     /** @hidden */
     @ContentChildren(OptionComponent, { descendants: true })
@@ -273,6 +281,13 @@ export class SelectComponent
      */
     readonly _destroy = new Subject<void>();
 
+    /** @hidden */
+    get _selectControlClass(): string {
+        return [this.state ? `is-${this.state}` : '', this.selectControlClass]
+            .filter((className) => !!className)
+            .join(' ');
+    }
+
     /**
      * @hidden
      * Combined stream of all of the child options' change events.

libs/core/src/lib/shared/interfaces/search-component.interface.ts

@@ -0,0 +1,23 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+
+export interface SearchComponent {
+    placeholder: string;
+    disableRefresh: boolean;
+    disableSearch: boolean;
+    categoryMode: 'menu' | 'select';
+    forceSearchButton: boolean;
+    searchSubmit: EventEmitter<{ text: string; category: string | null }>;
+    elementRef: ElementRef<HTMLElement>;
+    focus(): void;
+    appearance?: {
+        searchClass: string;
+        searchFieldClass: string;
+        searchCategoryClass: string;
+        searchSubmitClass: string;
+        buttonClass: string;
+        addonClass: string;
+        categoryButtonClass: string;
+        categoryDropdownButtonClass: string;
+        removeGroupButtonClass: boolean;
+    };
+}

libs/core/src/lib/shared/public_api.ts

@@ -4,5 +4,6 @@
 
 export * from './interfaces/popover-position';
 export * from './interfaces/special-day-rule';
+export * from './interfaces/search-component.interface';
 export * from './tokens/dynamic-page-header.token';
 export * from './services/value-state-message.service';

libs/core/src/lib/shellbar/public_api.ts

@@ -13,3 +13,4 @@ export * from './shellbar-title/shellbar-title.component';
 export * from './user-menu/shellbar-user-menu.component';
 export * from './shellbar-actions-mobile/shellbar-actions-mobile.component';
 export * from './deprecated-shellbar-compact.directive';
+export * from './tokens';

libs/core/src/lib/shellbar/shellbar-action/shellbar-action.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import { FD_SHELLBAR_ACTION_COMPONENT } from '../tokens';
 
 /**
  * The component that represents a shellbar action.
@@ -16,7 +17,13 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
     selector: 'fd-shellbar-action',
     templateUrl: './shellbar-action.component.html',
     encapsulation: ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: FD_SHELLBAR_ACTION_COMPONENT,
+            useExisting: ShellbarActionComponent
+        }
+    ]
 })
 export class ShellbarActionComponent {
     /** The glyph (icon) name */

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

@@ -1,12 +1,12 @@
 <div class="fd-shellbar-collapse">
-    <fd-action-sheet placement="bottom-end">
+    <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]="collapsedItemMenuLabel"
+                [attr.aria-label]="collapsedItemMenuLabel || ('coreShellbar.collapsedItemMenuLabel' | fdTranslate)"
             >
                 <span *ngIf="totalNotifications" class="fd-button__badge">
                     {{ totalNotifications }}
@@ -15,6 +15,14 @@
         </fd-action-sheet-control>
 
         <fd-action-sheet-body>
+            <li
+                fd-action-sheet-item
+                *ngIf="searchExists"
+                tabindex="-1"
+                [glyph]="'search'"
+                [label]="'coreShellbar.search' | fdTranslate"
+                (click)="showSearch.emit(); actionSheet.close()"
+            ></li>
             <li
                 fd-action-sheet-item
                 *ngFor="let action of shellbarActions"

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

@@ -2,7 +2,9 @@ import {
     AfterContentChecked,
     ChangeDetectionStrategy,
     Component,
+    EventEmitter,
     Input,
+    Output,
     QueryList,
     ViewEncapsulation
 } from '@angular/core';
@@ -23,9 +25,19 @@ export class ShellbarActionsMobileComponent implements AfterContentChecked {
     @Input()
     collapsedItemMenuLabel: string;
 
+    /**
+     * Whether the search is present in the shellbar.
+     */
+    @Input()
+    searchExists = false;
+
     /** @hidden */
     totalNotifications: number;
 
+    /** @hidden */
+    @Output()
+    showSearch = new EventEmitter<void>();
+
     /** @hidden */
     actionClicked(item: ShellbarActionComponent, event: MouseEvent): void {
         if (item.callback) {

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

@@ -2,17 +2,28 @@
     <ng-content select="fd-combobox"></ng-content>
 </div>
 
+<!-- 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 fd-shellbar__action--mobile">
     <fd-shellbar-actions-mobile
         [shellbarActions]="shellbarActions"
         [collapsedItemMenuLabel]="collapsedItemMenuLabel"
+        [searchExists]="!!_searchPortal"
+        (showSearch)="_toggleSearch()"
     ></fd-shellbar-actions-mobile>
 </div>
 
 <div class="fd-shellbar__action fd-shellbar__action--desktop">
     <ng-content></ng-content>
 </div>
 
+<fd-shellbar-action
+    *ngIf="_addSearchIcon && !showSearch"
+    glyph="search"
+    [callback]="_toggleSearch"
+></fd-shellbar-action>
+
 <ng-content select="fd-shellbar-action"></ng-content>
 
 <ng-container *ngIf="userItem">
@@ -21,7 +32,7 @@
             placement="bottom-end"
             [user]="user"
             [userMenu]="userMenu"
-            (itemClicked)="triggerItems()"
+            (itemClicked)="_triggerItems()"
         ></fd-shellbar-user-menu>
     </ng-container>