[WIP] feat(core,platform): shell search updates

libs/core/bar/bar.component.ts

@@ -38,7 +38,9 @@ export type BarDesignType = 'header' | 'subheader' | 'header-with-subheader' | '
         })
     ],
     host: {
-        '[attr.role]': 'role()'
+        '[attr.role]': 'role()',
+        '[class.fd-bar--initial-suggestion-title]': 'initialSuggestionTitle()',
+        '[class.fd-bar--initial-suggestion-subline]': 'initialSuggestionSubline()'
     },
     standalone: true
 })
@@ -72,6 +74,12 @@ export class BarComponent implements OnChanges, OnInit, CssClassBuilder, OnDestr
      */
     role = input('toolbar');
 
+    /** Whether this bar is to be used for the search results initial suggestion title. */
+    initialSuggestionTitle = input(false);
+
+    /** Whether this bar is to be used for the search results initial suggestion subline. */
+    initialSuggestionSubline = input(false);
+
     /** @hidden */
     private _subscriptions = new Subscription();
 

libs/core/bar/directives/bar-left.directive.ts

@@ -1,4 +1,4 @@
-import { Directive } from '@angular/core';
+import { Directive, input } from '@angular/core';
 
 /**
  * The left side area of the Bar component.
@@ -7,8 +7,12 @@ import { Directive } from '@angular/core';
     // eslint-disable-next-line @angular-eslint/directive-selector
     selector: '[fd-bar-left]',
     host: {
-        class: 'fd-bar__left'
+        class: 'fd-bar__left',
+        '[class.fd-bar__left--stack-contents-vertically]': 'stackContentsVertically()'
     },
     standalone: true
 })
-export class BarLeftDirective {}
+export class BarLeftDirective {
+    /** Whether to stack the contents of this portion of the bar vertically. */
+    stackContentsVertically = input(false);
+}

libs/core/bar/directives/bar-middle.directive.ts

@@ -1,4 +1,4 @@
-import { Directive } from '@angular/core';
+import { Directive, input } from '@angular/core';
 
 /**
  * The middle section of the Bar component.
@@ -7,8 +7,12 @@ import { Directive } from '@angular/core';
     // eslint-disable-next-line @angular-eslint/directive-selector
     selector: '[fd-bar-middle]',
     host: {
-        class: 'fd-bar__middle'
+        class: 'fd-bar__middle',
+        '[class.fd-bar__middle--stack-contents-vertically]': 'stackContentsVertically()'
     },
     standalone: true
 })
-export class BarMiddleDirective {}
+export class BarMiddleDirective {
+    /** Whether to stack the contents of this portion of the bar vertically. */
+    stackContentsVertically = input(false);
+}

libs/core/bar/directives/bar-right.directive.ts

@@ -1,4 +1,4 @@
-import { Directive } from '@angular/core';
+import { Directive, input } from '@angular/core';
 
 /**
  * The right side area of the Bar component.
@@ -7,8 +7,12 @@ import { Directive } from '@angular/core';
     // eslint-disable-next-line @angular-eslint/directive-selector
     selector: '[fd-bar-right]',
     host: {
-        class: 'fd-bar__right'
+        class: 'fd-bar__right',
+        '[class.fd-bar__right--stack-contents-vertically]': 'stackContentsVertically()'
     },
     standalone: true
 })
-export class BarRightDirective {}
+export class BarRightDirective {
+    /** Whether to stack the contents of this portion of the bar vertically. */
+    stackContentsVertically = input(false);
+}

libs/core/list/directives/list-info-label.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, HostBinding } from '@angular/core';
+
+@Directive({
+    selector: '[fd-list-info-label], [fdListInfoLabel]',
+    standalone: true
+})
+export class ListInfoLabelDirective {
+    /** @hidden */
+    @HostBinding('class.fd-list__info-label')
+    fdListInfoLabel = true;
+}

libs/core/list/directives/list-title.directive.ts

@@ -5,7 +5,8 @@ import { booleanAttribute, Directive, ElementRef, input, OnInit } from '@angular
     standalone: true,
     host: {
         class: 'fd-list__title',
-        '[class.fd-list__title--truncate]': 'truncate()'
+        '[class.fd-list__title--truncate]': 'truncate()',
+        '[class.fd-list__title--scope]': 'scope()'
     }
 })
 export class ListTitleDirective implements OnInit {
@@ -18,6 +19,9 @@ export class ListTitleDirective implements OnInit {
     /** Whether the text should truncate with ellipsis. */
     truncate = input(false, { transform: booleanAttribute });
 
+    /** Whether this title is used for scope in the shell search results. */
+    scope = input(false);
+
     /** @hidden */
     constructor(public elRef: ElementRef) {}
 

libs/core/list/list-item/list-item.component.ts

@@ -47,7 +47,8 @@ let listItemUniqueId = 0;
     host: {
         class: 'fd-list__item',
         '[attr.tabindex]': '_normalizedTabIndex$()',
-        '[attr.id]': 'id'
+        '[attr.id]': 'id',
+        '[class.fd-list__item--suggestion]': 'suggestion()'
     },
     providers: [
         {
@@ -181,6 +182,9 @@ export class ListItemComponent<T = any> extends ListFocusItem<T> implements Afte
     /** Template ref for Settings list item */
     settingsListTpl = input<TemplateRef<any>>();
 
+    /** @hidden Whether this is a suggestion type list item. */
+    suggestion = input(false);
+
     /** @hidden */
     private _role = 'listitem'; // default for li elements
 

libs/core/list/list.component.ts

@@ -48,7 +48,8 @@ import { FD_LIST_COMPONENT, FD_LIST_UNREAD_INDICATOR } from './tokens';
     host: {
         class: 'fd-list',
         '[class.fd-settings__list]': 'settingsList() || settingsListFooter()',
-        '[class.fd-settings__list--footer]': 'settingsListFooter()'
+        '[class.fd-settings__list--footer]': 'settingsListFooter()',
+        '[class.fd-list--search-results]': 'searchResultsList()'
     },
     styleUrls: ['./list.component.scss', '../../cdk/utils/drag-and-drop/drag-and-drop.scss'],
     encapsulation: ViewEncapsulation.None,
@@ -160,6 +161,9 @@ export class ListComponent implements ListComponentInterface, ListUnreadIndicato
     /** Whether the list is used inside Settings Dialog Footer */
     settingsListFooter = input(false, { transform: booleanAttribute });
 
+    /** @hidden Whether the list is the shell search results list. */
+    searchResultsList = input(false);
+
     /**
      * @hidden
      * Default role for lists
@@ -272,7 +276,7 @@ export class ListComponent implements ListComponentInterface, ListUnreadIndicato
     /** @hidden */
     private _recheckLinks(): void {
         const items = this.items.filter((item) => item.link);
-        this.hasNavigation = items.length > 0;
+        this.hasNavigation = items.length > 0 || this.searchResultsList();
         if (this.selection) {
             this._defaultRole = 'listbox';
         }

libs/core/list/list.module.ts

@@ -7,6 +7,7 @@ import { ListThumbnailDirective } from './directives/byline/list-thumbnail.direc
 import { ListFooterDirective } from './directives/list-footer.directive';
 import { ListGroupHeaderDirective } from './directives/list-group-header.directive';
 import { ListIconDirective } from './directives/list-icon.directive';
+import { ListInfoLabelDirective } from './directives/list-info-label.directive';
 import { ListLinkDirective } from './directives/list-link.directive';
 import { ListNavigationItemArrowDirective } from './directives/list-navigation-item-arrow.directive';
 import { ListNavigationItemTextDirective } from './directives/list-navigation-item-text.directive';
@@ -35,6 +36,7 @@ const components = [
     ListContentDirective,
     ListThumbnailDirective,
     ListTitleTextDirective,
+    ListInfoLabelDirective,
     ListNavigationItemComponent,
     ListNavigationItemArrowDirective,
     ListNavigationItemTextDirective,

libs/core/popover/popover-body/popover-body.component.scss

@@ -78,15 +78,21 @@ fd-popover-body {
             border-radius: inherit;
         }
 
-        .fd-list {
+        .fd-popover__body-header:not(:has(~ .fd-list)) {
             border-radius: $fd-popover-border-radius;
 
-            &__item {
+            .fd-list__item {
                 &:first-child,
                 &:first-of-type {
                     @include set-list-border-radius(top);
                 }
+            }
+        }
+
+        .fd-list:not(:has(~ .fd-popover__body-footer)) {
+            border-radius: $fd-popover-border-radius;
 
+            .fd-list__item {
                 &:last-child,
                 &:last-of-type {
                     @include set-list-border-radius(bottom);

libs/core/shellbar/shellbar.component.ts

@@ -453,7 +453,7 @@ export class ShellbarComponent implements AfterContentInit, AfterViewInit, OnDes
             this.branding.showTitle();
         }
         if (this._actions) {
-            this._actions._handleOverflow(false);
+            this._actions._handleOverflow(this._currentSize === 's');
         }
     }
 

libs/core/text/text.component.html

@@ -1,4 +1,9 @@
-<p class="fd-text" [class.fd-text--pre-wrap]="whitespaces" [style.hyphens]="hyphenation">
+<p
+    class="fd-text"
+    [class.fd-text--subline]="subline"
+    [class.fd-text--pre-wrap]="whitespaces"
+    [style.hyphens]="hyphenation"
+>
     <span
         fdkLineClamp
         class="fd-text__lineclamp"

libs/core/text/text.component.ts

@@ -59,6 +59,10 @@ export class TextComponent {
     @Input()
     isCollapsed = true;
 
+    /** @hidden */
+    @Input()
+    subline = false;
+
     /**
      * Event, notifying about collapse state changes
      */

libs/core/title/title.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, input, Input, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { Nullable } from '@fundamental-ngx/cdk/utils';
 
@@ -16,7 +16,8 @@ export abstract class TitleToken {
     template: '<ng-content></ng-content>',
     host: {
         class: 'fd-title',
-        '[class.fd-title--wrap]': 'wrap'
+        '[class.fd-title--wrap]': 'wrap',
+        '[class.fd-title--two-line-clamp]': 'twoLineClamp()'
     },
     styleUrl: './title.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,6 +45,9 @@ export class TitleComponent extends TitleToken implements OnInit {
     /** The size of the header */
     _headerSize: Nullable<HeaderSizes> = null;
 
+    /** Whether this title should clamp at two lines of text. */
+    twoLineClamp = input(false);
+
     /** @hidden */
     private _appliedHeaderSize: number;
 

libs/docs/core/list/examples/list-examples.component.ts

@@ -1,6 +1,14 @@
 import { NgClass } from '@angular/common';
 import { Component } from '@angular/core';
+import { AvatarComponent } from '@fundamental-ngx/core/avatar';
+import { BarComponent, BarElementDirective, BarLeftDirective, BarMiddleDirective } from '@fundamental-ngx/core/bar';
+import { ButtonComponent } from '@fundamental-ngx/core/button';
+import { IconComponent } from '@fundamental-ngx/core/icon';
+import { InfoLabelComponent } from '@fundamental-ngx/core/info-label';
 import { ListModule, ListSecondaryDirective } from '@fundamental-ngx/core/list';
+import { PopoverModule } from '@fundamental-ngx/core/popover';
+import { TextComponent } from '@fundamental-ngx/core/text';
+import { TitleComponent } from '@fundamental-ngx/core/title';
 
 @Component({
     selector: 'fd-list-example',
@@ -29,3 +37,23 @@ export class ListIconExampleComponent {}
     imports: [ListModule]
 })
 export class ListComplexExampleComponent {}
+
+@Component({
+    selector: 'fd-list-search-results-example',
+    templateUrl: './list-search-results-example.component.html',
+    imports: [
+        ListModule,
+        ButtonComponent,
+        PopoverModule,
+        BarComponent,
+        BarLeftDirective,
+        BarMiddleDirective,
+        BarElementDirective,
+        TitleComponent,
+        TextComponent,
+        IconComponent,
+        InfoLabelComponent,
+        AvatarComponent
+    ]
+})
+export class ListSearchResultsExampleComponent {}