feat: (Core) introduce Action sheet component (#3596)

* initial commit

* action sheet structure and update

* save

* mobile example

* adding styles to compact mode

* fd-action-item as component

* clearout

* mobile and compact mode fixes

* fixes

* addressing PR comments

* PR comments

* PR comments

* PR comments

* navigate on keydown

* keydown naviagtion and clearout

* fix path

* PR comments

* fix circular dependency

* dynamic mobile mode

* mobile mode rebuild

* add comments

* mobile rebuild

* PR comments

* keyboard nav fix

* PR updates

* add inline item component, remove itmes body proxy

* PR comments

* PR comments

* mobile mode fix

* PR comments, clearout

* build fix

* PR cmts

* fix mobile click, PR comments

* clearout

* remove leftovers

* fixes

* add unsubscribe

* fix(core) fix indexing | Revert popover module changes

* build fix

* clearout

Co-authored-by: Jedrzej <jedrzej.markowski@sap.com>
Co-authored-by: Michal Salamon <msalamon@divante.com>
Co-authored-by: Mike O'Donnell <mikerodonnell89@users.noreply.github.com>

apps/docs/src/app/core/api-files.ts

@@ -14,6 +14,12 @@ export const API_FILES = {
         'ActionBarHeaderDirective',
         'ActionBarMobileDirective'
     ],
+    actionSheet: [
+        'ActionSheetComponent',
+        'ActionSheetControlComponent',
+        'ActionSheetItemComponent',
+        'ActionSheetBodyComponent'
+    ],
     alert: ['AlertComponent', 'AlertConfig', 'AlertService', 'AlertRef'],
     avatar: ['AvatarComponent'],
     bar: ['BarComponent', 'BarElementDirective', 'BarLeftDirective', 'BarMiddleDirective', 'BarRightDirective'],

apps/docs/src/app/core/component-docs/action-sheet/action-sheet-docs.component.html

@@ -0,0 +1,28 @@
+<fd-docs-section-title id="action-sheet-compact" componentName="action-sheet">
+    Compact mode.
+</fd-docs-section-title>
+<component-example>
+    <fd-action-sheet-compact-example></fd-action-sheet-compact-example>
+</component-example>
+<code-example [exampleFiles]="actionSheetCompactExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="action-sheet-cosy" componentName="action-sheet">
+    Cosy mode.
+</fd-docs-section-title>
+<component-example>
+    <fd-action-sheet-cosy-example></fd-action-sheet-cosy-example>
+</component-example>
+<code-example [exampleFiles]="actionSheetCosyExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="action-sheet-mobile" componentName="action-sheet">
+    Mobile view.
+</fd-docs-section-title>
+<component-example>
+    <fd-action-sheet-mobile-example></fd-action-sheet-mobile-example>
+</component-example>
+<code-example [exampleFiles]="actionSheetMobileExample"></code-example>
+

apps/docs/src/app/core/component-docs/action-sheet/action-sheet-docs.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+
+import * as actionSheetCompactSrc from '!raw-loader!./examples/action-sheet-compact/action-sheet-compact-example.component.html';
+import * as actionSheetCompactSrcTs from '!raw-loader!./examples/action-sheet-compact/action-sheet-compact-example.component.ts';
+import * as actionSheetCosySrc from '!raw-loader!./examples/action-sheet-cosy/action-sheet-cosy-example.component.html';
+import * as actionSheetCosySrcTs from '!raw-loader!./examples/action-sheet-cosy/action-sheet-cosy-example.component.ts';
+import * as actionSheetMobileSrc from '!raw-loader!./examples/action-sheet-mobile/action-sheet-mobile-example.component.html';
+import * as actionSheetMobileSrcTs from '!raw-loader!./examples/action-sheet-mobile/action-sheet-mobile-example.component.ts';
+import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
+
+@Component({
+    selector: 'app-action-sheet',
+    templateUrl: './action-sheet-docs.component.html'
+})
+export class ActionSheetDocsComponent {
+    actionSheetCompactExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: actionSheetCompactSrc,
+            fileName: 'action-sheet-compact-example',
+            typescriptFileCode: actionSheetCompactSrcTs,
+            component: 'ActionSheetCompactExampleComponent'
+        }
+    ];
+
+    actionSheetCosyExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: actionSheetCosySrc,
+            fileName: 'action-sheet-cosy-example',
+            typescriptFileCode: actionSheetCosySrcTs,
+            component: 'ActionSheetCosyExampleComponent'
+        }
+    ];
+
+    actionSheetMobileExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: actionSheetMobileSrc,
+            fileName: 'action-sheet-mobile-example',
+            typescriptFileCode: actionSheetMobileSrcTs,
+            component: 'ActionSheetMobileExampleComponent'
+        }
+    ];
+}

apps/docs/src/app/core/component-docs/action-sheet/action-sheet-docs.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ActionSheetModule } from '@fundamental-ngx/core';
+import { ActionSheetHeaderComponent } from './action-sheet-header/action-sheet-header.component';
+import { ActionSheetDocsComponent } from './action-sheet-docs.component';
+import { SharedDocumentationPageModule } from '../../../documentation/shared-documentation-page.module';
+import { examples } from './examples';
+import { ApiComponent } from '../../../documentation/core-helpers/api/api.component';
+import { API_FILES } from '../../api-files';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: ActionSheetHeaderComponent,
+        children: [
+            { path: '', component: ActionSheetDocsComponent },
+            { path: 'api', component: ApiComponent, data: { content: API_FILES.actionSheet } }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes),
+        SharedDocumentationPageModule,
+        ActionSheetModule
+    ],
+    exports: [RouterModule],
+    declarations: [
+        ActionSheetDocsComponent,
+        ActionSheetHeaderComponent,
+        examples
+    ]
+})
+export class ActionSheetDocsModule {}

apps/docs/src/app/core/component-docs/action-sheet/action-sheet-header/action-sheet-header.component.html

@@ -0,0 +1,10 @@
+<header>Action Sheet</header>
+
+<description>
+    <p>An action sheet contains a list of options for user to select from. Actions can be clustered if there is not enough space on the screen.</p>
+</description>
+
+<import module="ActionSheetModule"></import>
+
+<fd-header-tabs></fd-header-tabs>
+<router-outlet></router-outlet>

apps/docs/src/app/core/component-docs/action-sheet/action-sheet-header/action-sheet-header.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-action-sheet-header',
+    templateUrl: './action-sheet-header.component.html',
+    styleUrls: ['./action-sheet-header.component.scss']
+})
+export class ActionSheetHeaderComponent {}

apps/docs/src/app/core/component-docs/action-sheet/examples/action-sheet-compact/action-sheet-compact-example.component.html

@@ -0,0 +1,14 @@
+<fd-action-sheet [compact]="true">
+    <fd-action-sheet-control>
+        <button fd-button [compact]="true" glyph="settings"></button>
+    </fd-action-sheet-control>
+
+    <fd-action-sheet-body>
+        <li fd-action-sheet-item label="Search" glyph="search"></li>
+        <li fd-action-sheet-item label="Download" glyph="download"></li>
+        <li fd-action-sheet-item label="Accept" glyph="accept"></li>
+        <li fd-action-sheet-item label="Reject" glyph="cancel"></li>
+        <li fd-action-sheet-item label="Cancel" [isCloseButton]="true"></li>
+    </fd-action-sheet-body>
+
+</fd-action-sheet>

apps/docs/src/app/core/component-docs/action-sheet/examples/action-sheet-compact/action-sheet-compact-example.component.ts

@@ -0,0 +1,8 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+    selector: 'fd-action-sheet-compact-example',
+    templateUrl: './action-sheet-compact-example.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ActionSheetCompactExampleComponent {}

apps/docs/src/app/core/component-docs/action-sheet/examples/action-sheet-cosy/action-sheet-cosy-example.component.html

@@ -0,0 +1,14 @@
+<fd-action-sheet>
+    <fd-action-sheet-control>
+        <button fd-button glyph="settings"></button>
+    </fd-action-sheet-control>
+
+    <fd-action-sheet-body>
+        <li fd-action-sheet-item label="Search" glyph="search"></li>
+        <li fd-action-sheet-item label="Download" glyph="download"></li>
+        <li fd-action-sheet-item label="Accept" glyph="accept"></li>
+        <li fd-action-sheet-item label="Reject" glyph="cancel"></li>
+        <li fd-action-sheet-item label="Cancel" [isCloseButton]="true"></li>
+    </fd-action-sheet-body>
+</fd-action-sheet>
+

apps/docs/src/app/core/component-docs/action-sheet/examples/action-sheet-cosy/action-sheet-cosy-example.component.ts

@@ -0,0 +1,9 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+    selector: 'fd-action-sheet-cosy-example',
+    templateUrl: './action-sheet-cosy-example.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ActionSheetCosyExampleComponent {
+}

apps/docs/src/app/core/component-docs/action-sheet/examples/action-sheet-mobile/action-sheet-mobile-example.component.html

@@ -0,0 +1,16 @@
+<div style="width: 350px; height: 400px; position: relative">
+    <fd-action-sheet [mobile]="true">
+        <fd-action-sheet-control>
+            <button fd-button glyph="settings"></button>
+        </fd-action-sheet-control>
+
+        <fd-action-sheet-body>
+            <li fd-action-sheet-item label="Search" glyph="search"></li>
+            <li fd-action-sheet-item label="Download" glyph="download"></li>
+            <li fd-action-sheet-item label="Accept" glyph="accept"></li>
+            <li fd-action-sheet-item label="Reject" glyph="cancel"></li>
+            <li fd-action-sheet-item label="Decide later"></li>
+            <li fd-action-sheet-item label="Cancel" [negative]="true" [isCloseButton]="true"></li>
+        </fd-action-sheet-body>
+    </fd-action-sheet>
+</div>

apps/docs/src/app/core/component-docs/action-sheet/examples/action-sheet-mobile/action-sheet-mobile-example.component.ts

@@ -0,0 +1,11 @@
+import {
+    ChangeDetectionStrategy,
+    Component
+} from '@angular/core';
+
+@Component({
+    selector: 'fd-action-sheet-mobile-example',
+    templateUrl: './action-sheet-mobile-example.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ActionSheetMobileExampleComponent {}

apps/docs/src/app/core/component-docs/action-sheet/examples/index.ts

@@ -0,0 +1,13 @@
+import { ActionSheetCompactExampleComponent } from './action-sheet-compact/action-sheet-compact-example.component';
+import { ActionSheetCosyExampleComponent } from './action-sheet-cosy/action-sheet-cosy-example.component';
+import { ActionSheetMobileExampleComponent } from './action-sheet-mobile/action-sheet-mobile-example.component';
+
+export * from './action-sheet-compact/action-sheet-compact-example.component';
+export * from './action-sheet-cosy/action-sheet-cosy-example.component';
+export * from './action-sheet-mobile/action-sheet-mobile-example.component';
+
+export const examples = [
+    ActionSheetCosyExampleComponent,
+    ActionSheetMobileExampleComponent,
+    ActionSheetCompactExampleComponent
+];

apps/docs/src/app/core/core-documentation.routes.ts

@@ -16,6 +16,11 @@ export const ROUTES: Routes = [
                 loadChildren: () =>
                     import('./component-docs/action-bar/action-bar-docs.module').then((m) => m.ActionBarDocsModule)
             },
+            {
+                path: 'action-sheet',
+                loadChildren: () =>
+                    import('./component-docs/action-sheet/action-sheet-docs.module').then((m) => m.ActionSheetDocsModule)
+            },
             {
                 path: 'alert',
                 loadChildren: () => import('./component-docs/alert/alert-docs.module').then((m) => m.AlertDocsModule)

apps/docs/src/app/core/documentation/core-documentation.component.ts

@@ -17,6 +17,7 @@ export class CoreDocumentationComponent extends DocumentationBaseComponent {
 
         this.components = [
             { url: 'core/action-bar', name: 'Action Bar' },
+            { url: 'core/action-sheet', name: 'Action Sheet' },
             { url: 'core/alert', name: 'Alert' },
             { url: 'core/avatar', name: 'Avatar' },
             { url: 'core/bar', name: 'Bar' },

libs/core/src/index.ts

@@ -1,5 +1,6 @@
 export * from './lib/fundamental-ngx-core.module';
 export * from './lib/action-bar/public_api';
+export * from './lib/action-sheet/public_api';
 export * from './lib/alert/public_api';
 export * from './lib/avatar/public_api';
 export * from './lib/badge/public_api';

libs/core/src/lib/action-sheet/action-sheet-body/action-sheet-body.component.html

@@ -0,0 +1,7 @@
+<ul class="fd-action-sheet"
+    [class.fd-action-sheet--compact] = "compact"
+    [class.fd-action-sheet--mobile] = "mobile"
+>
+    <ng-content select="[fd-action-sheet-item]"></ng-content>
+</ul>
+

libs/core/src/lib/action-sheet/action-sheet-body/action-sheet-body.component.ts

@@ -0,0 +1,43 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    HostListener,
+    Input,
+    ViewEncapsulation
+} from '@angular/core';
+
+/**
+ * A component used to enforce a certain layout for the action sheet.
+ * ```html
+ * <fd-action-sheet>
+ *     <fd-action-sheet-control>Control Element</fd-action-sheet-control>
+ *     <fd-action-sheet-body>
+ *          <fd-action-sheet-item>Action Sheet Body</fd-action-sheet-item>
+ *          <fd-action-sheet-item>Action Sheet Body</fd-action-sheet-item>
+ *          <fd-action-sheet-item>Action Sheet Body</fd-action-sheet-item>
+ *     </fd-action-sheet-body>
+ * </fd-action-sheet>
+ * ```
+ */
+@Component({
+    selector: 'fd-action-sheet-body',
+    templateUrl: './action-sheet-body.component.html',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ActionSheetBodyComponent {
+
+    /** Indicate if items should be in compact or compare mode. **/
+    @Input()
+    compact = false;
+
+    /** Display in mobile view. **/
+    @Input()
+    mobile = false;
+
+    /** Handler for mouse events */
+    @HostListener('click', ['$event'])
+    onClick(event: MouseEvent): void {
+        event.stopPropagation();
+    }
+}

libs/core/src/lib/action-sheet/action-sheet-control/action-sheet-control.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

libs/core/src/lib/action-sheet/action-sheet-control/action-sheet-control.component.ts

@@ -0,0 +1,34 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, ViewEncapsulation, HostListener, Output} from '@angular/core';
+
+/**
+ * A component used to enforce a certain layout for the action sheet.
+ * ```html
+ * <fd-action-sheet>
+ *     <fd-action-sheet-control>Control Element</fd-action-sheet-control>
+ *     <fd-action-sheet-body>
+ *          <fd-action-sheet-item>Action Sheet Body</fd-action-sheet-item>
+ *          <fd-action-sheet-item>Action Sheet Body</fd-action-sheet-item>
+ *          <fd-action-sheet-item>Action Sheet Body</fd-action-sheet-item>
+ *     </fd-action-sheet-body>
+ * </fd-action-sheet>
+ * ```
+ */
+@Component({
+    selector: 'fd-action-sheet-control',
+    templateUrl: './action-sheet-control.component.html',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ActionSheetControlComponent {
+
+    /** Emitted event when control button is clicked **/
+    @Output()
+    clicked: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    /** Handler for mouse events */
+    @HostListener('click', ['$event'])
+    onClick(event: MouseEvent): void {
+        this.clicked.emit(true);
+    }
+
+}

libs/core/src/lib/action-sheet/action-sheet-item/action-sheet-item.component.html

@@ -0,0 +1,8 @@
+<button fd-button [class]="negative ? 'fd-button--negative' : 'fd-button--transparent fd-button--text-alignment-left'"
+        role="menuitem"
+        class="fd-button--full-width"
+        [class.fd-button--compact]="compact"
+        [label]="label"
+        [glyph]="glyph"
+>
+</button>