fix: search shellbar position (#853)

* proper shellbar icon placement

* fix prod build

* remove copilot, expanded shellbar search input results needs work

* fix shellbar search popover container width/left

docs/app/documentation/component-docs/shellbar/examples/shellbar-collapsible-example.component.html

@@ -10,19 +10,16 @@
     <fd-shellbar-subtitle>
         Subtitle
     </fd-shellbar-subtitle>
-    <fd-copilot></fd-copilot>
     <fd-shellbar-actions [user]="user"
                          [userMenu]="userMenu"
                          [productSwitcher]="productSwitcher">
-        <button fd-button
-                [fdType]="'standard'">Custom Button</button>
-
         <fd-shellbar-action *ngFor="let action of actions"
                             [glyph]="action.glyph"
                             [callback]="action.callback"
                             [label]="action.label"
                             [notificationCount]="action.notificationCount"
                             [notificationLabel]="action.notificationLabel">
         </fd-shellbar-action>
+        <fd-search-input [inShellbar]="true" [dropdownValues]="searchTerms"></fd-search-input>
     </fd-shellbar-actions>
-</fd-shellbar>
+</fd-shellbar>

docs/app/documentation/component-docs/shellbar/examples/shellbar-collapsible-example.component.ts

@@ -26,19 +26,17 @@ export class ShellbarCollapsibleExampleComponent {
     ];
 
     actions = [
-        {glyph: 'bell', callback: this.actionNotificationCallback, label: 'Notifications',
-            notificationCount: 12, notificationLabel: 'Unread Notifications'},
         {glyph: 'pool', callback: this.actionPoolCallback, label: 'Pool',
-            notificationCount: 3, notificationLabel: 'Pool Count'}
+            notificationCount: 3, notificationLabel: 'Pool Count'},
+        {glyph: 'bell', callback: this.actionNotificationCallback, label: 'Notifications',
+            notificationCount: 12, notificationLabel: 'Unread Notifications'}
     ];
 
-    searchTerm = '';
-
     searchTerms = [
-        {text: 'Apple', callback: () => {alert('Apple Clicked')}},
-        {text: 'Banana', callback: () => {alert('Banana Clicked')}},
-        {text: 'Kiwi', callback: () => {alert('Kiwi Clicked')}},
-        {text: 'Strawberry', callback: () => {alert('Strawberry Clicked')}}
+        'Apple',
+        'Banana',
+        'Kiwi',
+        'Strawberry'
     ];
 
     productSwitcher = [
@@ -68,10 +66,6 @@ export class ShellbarCollapsibleExampleComponent {
             callback: ($event) => {this.productSwitcherCallback($event, 'Cloud Portal')}}
     ];
 
-    exampleSearchFunction = () => {
-        alert('Search Function Called with search term: ' + this.searchTerm);
-    }
-
     settingsCallback($event) {
         console.log($event);
         alert('Settings Clicked');

docs/app/documentation/component-docs/shellbar/shellbar-docs-header/shellbar-docs-header.component.html

@@ -1,6 +1,6 @@
 <header>Shellbar</header>
 <description>
-    The shellbar offers consistent, responsive navigation across all products and applications. Includes support for branding, product navigation, search, notifications, user settings, and CoPilot. This is a composite component comprised of mandatory and optional elements.
+    The shellbar offers consistent, responsive navigation across all products and applications. Includes support for branding, product navigation, search, notifications, and user settings. This is a composite component comprised of mandatory and optional elements.
 
     Before getting started, here are some things to know.
 </description>

docs/app/documentation/component-docs/shellbar/shellbar-docs.component.html

@@ -10,7 +10,7 @@ <h2>Basic Shellbar</h2>
 
 <separator></separator>
 
-<h2>Links with collapsible menu, CoPilot and Product Switcher</h2>
+<h2>Links with collapsible menu and product switcher.</h2>
 <description>
     When a product has multiple links, the product links should collapse into an overflow menu on mobile screens. All actions, except for the user menu, should be collapsed. See the placement of the <code>&lt;fd-shellbar-collapse></code> container below.
 </description>

library/src/lib/search-input/search-input.component.ts

@@ -140,7 +140,7 @@ export class SearchInputComponent implements ControlValueAccessor, OnInit, OnCha
 
     /** @hidden */
     onInputKeyupHandler() {
-        if (this.inputText.length) {
+        if (this.inputText && this.inputText.length) {
             this.isOpen = true;
         }
     }

library/src/lib/shellbar/shellbar-action/shellbar-action.component.html

@@ -1,10 +1,7 @@
 <div class="fd-shellbar__action fd-shellbar__action--collapsible">
-    <button *ngIf="!searchInputComponent" class="fd-button--shell" (click)="callback ? callback($event) : ''"
+    <button class="fd-button--shell" (click)="callback ? callback($event) : ''"
             [ngClass]="(glyph ? ('sap-icon--' + glyph) : '')"
             [attr.aria-label]="label">
         <span *ngIf="notificationCount" class="fd-counter fd-counter--notification" [attr.aria-label]="notificationLabel">{{notificationCount}}</span>
     </button>
-    <div *ngIf="searchInputComponent" class="fd-search-input fd-search-input--closed">
-        <ng-content select="fd-search-input"></ng-content>
-    </div>
 </div>

library/src/lib/shellbar/shellbar-action/shellbar-action.component.ts

@@ -1,5 +1,4 @@
 import { Component, ContentChild, Input, ViewEncapsulation } from '@angular/core';
-import { SearchInputComponent } from '../../search-input/search-input.component';
 
 /**
  * The component that represents a shellbar action.
@@ -40,8 +39,4 @@ export class ShellbarActionComponent {
     @Input()
     notificationCount: number;
 
-    /** @hidden */
-    @ContentChild(SearchInputComponent)
-    searchInputComponent: SearchInputComponent;
-
 }

library/src/lib/shellbar/shellbar-actions/shellbar-actions.component.html

@@ -1,4 +1,9 @@
 <div class="fd-shellbar__actions">
+    <div *ngIf="searchInputComponent" class="fd-shellbar__action fd-shellbar__action--collapsible">
+        <div class="fd-search-input fd-search-input--closed">
+            <ng-content select="fd-search-input"></ng-content>
+        </div>
+    </div>
     <div *ngIf="actionsCollapsed && shellbarActions.length"
          class="fd-shellbar__action fd-shellbar__action--collapse">
         <div class="fd-shellbar-collapse">

library/src/lib/shellbar/shellbar-actions/shellbar-actions.component.scss

@@ -0,0 +1,4 @@
+.fd-search-input--closed .fd-popover__body {
+    width: 300px !important;
+    left: -264px !important;
+}

library/src/lib/shellbar/shellbar-actions/shellbar-actions.component.ts

@@ -1,5 +1,16 @@
-import { Component, ContentChildren, HostListener, Input, OnInit, AfterContentChecked, QueryList, ViewEncapsulation } from '@angular/core';
+import {
+    Component,
+    ContentChildren,
+    HostListener,
+    Input,
+    OnInit,
+    AfterContentChecked,
+    QueryList,
+    ViewEncapsulation,
+    ContentChild
+} from '@angular/core';
 import { ShellbarActionComponent } from '../shellbar-action/shellbar-action.component';
+import { SearchInputComponent } from '../../search-input/search-input.component';
 
 /**
  * The component that represents shellbar actions.
@@ -24,6 +35,7 @@ import { ShellbarActionComponent } from '../shellbar-action/shellbar-action.comp
 @Component({
     selector: 'fd-shellbar-actions',
     templateUrl: './shellbar-actions.component.html',
+    styleUrls: ['./shellbar-actions.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class ShellbarActionsComponent implements OnInit, AfterContentChecked {
@@ -53,6 +65,10 @@ export class ShellbarActionsComponent implements OnInit, AfterContentChecked {
     @ContentChildren(ShellbarActionComponent)
     shellbarActions: QueryList<ShellbarActionComponent>;
 
+    /** @hidden */
+    @ContentChild(SearchInputComponent)
+    searchInputComponent: SearchInputComponent;
+
     /** @hidden */
     totalNotifications: number;
 

library/src/lib/shellbar/shellbar.component.html

@@ -7,9 +7,6 @@
         </div>
         <ng-content select="fd-shellbar-subtitle"></ng-content>
     </div>
-    <div class="fd-shellbar__group fd-shellbar__group--middle">
-        <ng-content select="fd-copilot"></ng-content>
-    </div>
     <div class="fd-shellbar__group fd-shellbar__group--end">
         <ng-content select="fd-shellbar-actions"></ng-content>
     </div>

library/src/lib/shellbar/shellbar.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 /**
  * The shellbar offers consistent, responsive navigation across all products and applications.
- * Includes support for branding, product navigation, search, notifications, user settings, and CoPilot.
+ * Includes support for branding, product navigation, search, notifications, and user settings.
  * Shellbar is a composite component comprised of mandatory and optional elements.
  */
 @Component({

library/src/lib/shellbar/shellbar.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { ShellbarComponent } from './shellbar.component';
 import { ProductMenuComponent } from './product-menu/product-menu.component';
 import { ShellbarSubtitleComponent } from './shellbar-subtitle/shellbar-subtitle.component';
-import { CopilotComponent } from './copilot/copilot.component';
 import { ShellbarActionsComponent } from './shellbar-actions/shellbar-actions.component';
 import { ShellbarActionComponent } from './shellbar-action/shellbar-action.component';
 import { ShellbarLogoComponent } from './shellbar-logo/shellbar-logo.component';
@@ -17,7 +16,6 @@ import { MenuModule } from '../menu/menu.module';
         ShellbarComponent,
         ProductMenuComponent,
         ShellbarSubtitleComponent,
-        CopilotComponent,
         ShellbarActionsComponent,
         ShellbarActionComponent,
         ShellbarLogoComponent,
@@ -28,7 +26,6 @@ import { MenuModule } from '../menu/menu.module';
         ShellbarComponent,
         ProductMenuComponent,
         ShellbarSubtitleComponent,
-        CopilotComponent,
         ShellbarActionsComponent,
         ShellbarActionComponent,
         ShellbarLogoComponent,