[ACA-1614] DocumentList - context menu actions (#544)

* context menu

* make same structure check

* align naming

* lazy loading support

* update module import implementation

* close context menu on Escape

* focus and navigate context menu items

* update with material cdk 'keycodes' name

* changed module folder name

src/app/context-menu/context-menu.component.ts

@@ -0,0 +1,117 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+    Component, ViewEncapsulation, OnInit, OnDestroy, HostListener,
+    ViewChildren, QueryList, AfterViewInit
+} from '@angular/core';
+import { trigger } from '@angular/animations';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+
+import { ExtensionService } from '../extensions/extension.service';
+import { AppStore, SelectionState } from '../store/states';
+import { appSelection } from '../store/selectors/app.selectors';
+import { Store } from '@ngrx/store';
+import { Subject } from 'rxjs/Rx';
+import { takeUntil } from 'rxjs/operators';
+
+import { ContextMenuOverlayRef } from './context-menu-overlay';
+import { ContentActionRef } from '../extensions/action.extensions';
+import { contextMenuAnimation } from './animations';
+import { ContextMenuItemDirective } from './context-menu-item.directive';
+
+@Component({
+    selector: 'aca-context-menu',
+    templateUrl: './context-menu.component.html',
+    host: { 'role': 'menu' },
+    encapsulation: ViewEncapsulation.None,
+    animations: [
+        trigger('panelAnimation', contextMenuAnimation)
+    ]
+})
+export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit {
+    private onDestroy$: Subject<boolean> = new Subject<boolean>();
+    private selection: SelectionState;
+    private _keyManager: FocusKeyManager<ContextMenuItemDirective>;
+    actions: Array<ContentActionRef> = [];
+
+    @ViewChildren(ContextMenuItemDirective)
+    private contextMenuItems: QueryList<ContextMenuItemDirective>;
+
+    @HostListener('document:keydown.Escape', ['$event'])
+    handleKeydownEscape(event: KeyboardEvent) {
+        if (event) {
+            this.contextMenuOverlayRef.close();
+        }
+    }
+
+    @HostListener('document:keydown', ['$event'])
+    handleKeydownEvent(event: KeyboardEvent) {
+        if (event) {
+            const keyCode = event.keyCode;
+            if (keyCode === UP_ARROW || keyCode === DOWN_ARROW) {
+                this._keyManager.onKeydown(event);
+            }
+        }
+    }
+
+    constructor(
+        private contextMenuOverlayRef: ContextMenuOverlayRef,
+        private extensions: ExtensionService,
+        private store: Store<AppStore>,
+    ) { }
+
+    runAction(actionId: string) {
+        const context = {
+            selection: this.selection
+        };
+
+        this.extensions.runActionById(actionId, context);
+        this.contextMenuOverlayRef.close();
+    }
+
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
+    ngOnInit() {
+        this.store
+            .select(appSelection)
+            .pipe(takeUntil(this.onDestroy$))
+            .subscribe(selection => {
+                if (selection.count) {
+                    this.selection = selection;
+                    this.actions = this.extensions.getAllowedContentContextActions();
+                }
+            });
+    }
+
+    ngAfterViewInit() {
+        this._keyManager = new FocusKeyManager<ContextMenuItemDirective>(this.contextMenuItems);
+        this._keyManager.setFirstItemActive();
+    }
+}