[ACA-3251] Move InfoDrawer and Toolbar components to aca-shared (#1466)

* moved tool bar

* moved info drawer

* moved appextension service

* moved pagination service

* Fix imports

* * fixed lints

* * fixed space

* added travis configuration

* * comments fixed

* * comments fixed

* * lint fixed

Co-authored-by: dhrn <dharan.g@muraai.com>

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html

@@ -0,0 +1,23 @@
+<div *ngIf="isLoading">
+  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+</div>
+<ng-container *ngIf="!isLoading && !!displayNode">
+  <adf-info-drawer
+    [title]="'APP.INFO_DRAWER.TITLE'"
+    cdkTrapFocus
+    cdkTrapFocusAutoCapture
+  >
+    <adf-info-drawer-tab
+      *ngFor="let tab of tabs"
+      [icon]="tab.icon"
+      [label]="tab.title"
+    >
+      <adf-dynamic-tab
+        [node]="displayNode"
+        [id]="tab.component"
+        [attr.data-automation-id]="tab.component"
+      >
+      </adf-dynamic-tab>
+    </adf-info-drawer-tab>
+  </adf-info-drawer>
+</ng-container>

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.spec.ts

@@ -0,0 +1,169 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 { NO_ERRORS_SCHEMA } from '@angular/core';
+import { InfoDrawerComponent } from './info-drawer.component';
+import { TestBed, ComponentFixture, async } from '@angular/core/testing';
+import { Store } from '@ngrx/store';
+import {
+  SetInfoDrawerStateAction,
+  ToggleInfoDrawerAction
+} from '@alfresco/aca-shared/store';
+import { LibTestingModule } from '../../testing/lib-testing-module';
+import { AppExtensionService } from '../../services/app.extension.service';
+import { ContentApiService } from '../../services/content-api.service';
+import { of } from 'rxjs';
+
+describe('InfoDrawerComponent', () => {
+  let fixture: ComponentFixture<InfoDrawerComponent>;
+  let component: InfoDrawerComponent;
+  let contentApiService: ContentApiService;
+  let tab;
+  let appExtensionService: AppExtensionService;
+  const storeMock = {
+    dispatch: jasmine.createSpy('dispatch')
+  };
+  const extensionServiceMock = {
+    getSidebarTabs: () => {}
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [LibTestingModule],
+      declarations: [InfoDrawerComponent],
+      providers: [
+        ContentApiService,
+        { provide: AppExtensionService, useValue: extensionServiceMock },
+        { provide: Store, useValue: storeMock }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+
+    fixture = TestBed.createComponent(InfoDrawerComponent);
+    component = fixture.componentInstance;
+    appExtensionService = TestBed.get(AppExtensionService);
+    contentApiService = TestBed.get(ContentApiService);
+
+    tab = { title: 'tab1' };
+    spyOn(appExtensionService, 'getSidebarTabs').and.returnValue([tab]);
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it('should get tabs configuration on initialization', () => {
+    fixture.detectChanges();
+
+    expect(component.tabs).toEqual([tab]);
+  });
+
+  it('should set state to false OnDestroy event', () => {
+    fixture.detectChanges();
+    component.ngOnDestroy();
+
+    expect(storeMock.dispatch).toHaveBeenCalledWith(
+      new SetInfoDrawerStateAction(false)
+    );
+  });
+
+  it('should set displayNode when node is library', async(() => {
+    spyOn(contentApiService, 'getNodeInfo');
+    const nodeMock: any = {
+      entry: { id: 'nodeId' },
+      isLibrary: true
+    };
+    component.node = nodeMock;
+
+    fixture.detectChanges();
+    component.ngOnChanges();
+
+    expect(component.displayNode).toBe(nodeMock);
+    expect(contentApiService.getNodeInfo).not.toHaveBeenCalled();
+  }));
+
+  it('should call getNodeInfo() when node is a shared file', async(() => {
+    const response: any = { entry: { id: 'nodeId' } };
+    spyOn(contentApiService, 'getNodeInfo').and.returnValue(of(response));
+    const nodeMock: any = { entry: { nodeId: 'nodeId' }, isLibrary: false };
+    component.node = nodeMock;
+
+    fixture.detectChanges();
+    component.ngOnChanges();
+
+    expect(component.displayNode).toBe(response);
+    expect(contentApiService.getNodeInfo).toHaveBeenCalled();
+  }));
+
+  it('should call getNodeInfo() when node is a favorite file', async(() => {
+    const response: any = { entry: { id: 'nodeId' } };
+    spyOn(contentApiService, 'getNodeInfo').and.returnValue(of(response));
+    const nodeMock: any = {
+      entry: { id: 'nodeId', guid: 'guidId' },
+      isLibrary: false
+    };
+    component.node = nodeMock;
+
+    fixture.detectChanges();
+    component.ngOnChanges();
+
+    expect(component.displayNode).toBe(response);
+    expect(contentApiService.getNodeInfo).toHaveBeenCalled();
+  }));
+
+  it('should call getNodeInfo() when node is a recent file', async(() => {
+    const response: any = { entry: { id: 'nodeId' } };
+    spyOn(contentApiService, 'getNodeInfo').and.returnValue(of(response));
+    const nodeMock: any = {
+      entry: {
+        id: 'nodeId',
+        content: { mimeType: 'image/jpeg' }
+      },
+      isLibrary: false
+    };
+    component.node = nodeMock;
+
+    fixture.detectChanges();
+    component.ngOnChanges();
+
+    expect(component.displayNode).toBe(response);
+    expect(contentApiService.getNodeInfo).toHaveBeenCalled();
+  }));
+
+  it('should dispatch close panel on Esc keyboard event', () => {
+    const event = new KeyboardEvent('keydown', {
+      code: 'Escape',
+      key: 'Escape',
+      keyCode: 27
+    } as KeyboardEventInit);
+
+    fixture.detectChanges();
+
+    fixture.debugElement.nativeElement.dispatchEvent(event);
+
+    expect(storeMock.dispatch).toHaveBeenCalledWith(
+      new ToggleInfoDrawerAction()
+    );
+  });
+});

projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts

@@ -0,0 +1,115 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import {
+  MinimalNodeEntity,
+  MinimalNodeEntryEntity,
+  SiteEntry
+} from '@alfresco/js-api';
+import { SidebarTabRef } from '@alfresco/adf-extensions';
+import { Store } from '@ngrx/store';
+import {
+  SetInfoDrawerStateAction,
+  ToggleInfoDrawerAction
+} from '@alfresco/aca-shared/store';
+import { AppExtensionService } from '../../services/app.extension.service';
+import { ContentApiService } from '../../services/content-api.service';
+
+@Component({
+  selector: 'aca-info-drawer',
+  templateUrl: './info-drawer.component.html'
+})
+export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
+  @Input()
+  nodeId: string;
+  @Input()
+  node: MinimalNodeEntity;
+
+  isLoading = false;
+  displayNode: MinimalNodeEntryEntity | SiteEntry;
+  tabs: Array<SidebarTabRef> = [];
+
+  @HostListener('keydown.escape')
+  onEscapeKeyboardEvent(): void {
+    this.close();
+  }
+
+  constructor(
+    private store: Store<any>,
+    private contentApi: ContentApiService,
+    private extensions: AppExtensionService
+  ) {}
+
+  ngOnInit() {
+    this.tabs = this.extensions.getSidebarTabs();
+  }
+
+  ngOnDestroy() {
+    this.store.dispatch(new SetInfoDrawerStateAction(false));
+  }
+
+  ngOnChanges() {
+    if (this.node) {
+      if (this.node['isLibrary']) {
+        return this.setDisplayNode(this.node);
+      }
+
+      const entry: any = this.node.entry;
+
+      const id = entry.nodeId || entry.id;
+      return this.loadNodeInfo(id);
+    }
+  }
+
+  private close() {
+    this.store.dispatch(new ToggleInfoDrawerAction());
+  }
+
+  private loadNodeInfo(nodeId: string) {
+    if (nodeId) {
+      this.isLoading = true;
+
+      this.contentApi.getNodeInfo(nodeId).subscribe(
+        entity => {
+          this.setDisplayNode(entity);
+          this.isLoading = false;
+        },
+        () => (this.isLoading = false)
+      );
+    }
+  }
+
+  private setDisplayNode(node: any) {
+    this.displayNode = node;
+  }
+}

projects/aca-shared/src/lib/components/info-drawer/shared-info-drawer.module.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InfoDrawerComponent } from './info-drawer.component';
+import { InfoDrawerModule } from '@alfresco/adf-core';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
+import { MatProgressBarModule } from '@angular/material';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    InfoDrawerModule,
+    MatProgressBarModule,
+    ExtensionsModule
+  ],
+  declarations: [InfoDrawerComponent],
+  exports: [InfoDrawerComponent]
+})
+export class SharedInfoDrawerModule {}

projects/aca-shared/src/lib/components/tool-bar/shared-toolbar.module.ts

@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ToolbarMenuItemComponent } from './toolbar-menu-item/toolbar-menu-item.component';
+import { ToolbarMenuComponent } from './toolbar-menu/toolbar-menu.component';
+import { ToolbarActionComponent } from './toolbar-action/toolbar-action.component';
+import { ToolbarButtonComponent } from './toolbar-button/toolbar-button.component';
+import { CoreModule } from '@alfresco/adf-core';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
+
+@NgModule({
+  imports: [CommonModule, CoreModule, ExtensionsModule],
+  declarations: [
+    ToolbarButtonComponent,
+    ToolbarActionComponent,
+    ToolbarMenuItemComponent,
+    ToolbarMenuComponent
+  ],
+  exports: [
+    ToolbarButtonComponent,
+    ToolbarActionComponent,
+    ToolbarMenuItemComponent,
+    ToolbarMenuComponent
+  ]
+})
+export class SharedToolbarModule {}

projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.html

@@ -0,0 +1,28 @@
+<ng-container [ngSwitch]="actionRef.type">
+  <ng-container *ngSwitchCase="'default'">
+    <app-toolbar-button [type]="type" [actionRef]="actionRef" [color]="color">
+    </app-toolbar-button>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'button'">
+    <app-toolbar-button [type]="type" [actionRef]="actionRef" [color]="color">
+    </app-toolbar-button>
+  </ng-container>
+
+  <adf-toolbar-divider
+    *ngSwitchCase="'separator'"
+    [id]="actionRef.id"
+  ></adf-toolbar-divider>
+
+  <ng-container *ngSwitchCase="'menu'">
+    <app-toolbar-menu [actionRef]="actionRef" [color]="color">
+    </app-toolbar-menu>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'custom'">
+    <adf-dynamic-component
+      [data]="actionRef.data"
+      [id]="actionRef.component"
+    ></adf-dynamic-component>
+  </ng-container>
+</ng-container>

projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 { ToolbarActionComponent } from './toolbar-action.component';
+
+describe('ToolbarActionComponent', () => {
+  it('should be defined', () => {
+    expect(ToolbarActionComponent).toBeDefined();
+  });
+});

projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.ts

@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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,
+  ChangeDetectionStrategy,
+  Input,
+  DoCheck,
+  ChangeDetectorRef
+} from '@angular/core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+
+@Component({
+  selector: 'aca-toolbar-action',
+  templateUrl: './toolbar-action.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'aca-toolbar-action' }
+})
+export class ToolbarActionComponent implements DoCheck {
+  @Input()
+  type = 'icon-button';
+
+  @Input()
+  color = '';
+
+  @Input()
+  actionRef: ContentActionRef;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  // todo: review after ADF 2.6
+  // preview component : change detection workaround for children without input
+  ngDoCheck() {
+    if (this.actionRef.id.includes('app.viewer')) {
+      this.cd.markForCheck();
+    }
+  }
+}

projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.html

@@ -0,0 +1,17 @@
+<ng-container [ngSwitch]="type">
+  <ng-container *ngSwitchCase="'icon-button'">
+    <button
+      [id]="actionRef.id"
+      mat-icon-button
+      [color]="color"
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
+      [attr.title]="actionRef.description || actionRef.title | translate"
+      (click)="runAction()"
+    >
+      <adf-icon [value]="actionRef.icon"></adf-icon>
+    </button>
+  </ng-container>
+  <ng-container *ngSwitchCase="'menu-item'">
+    <app-toolbar-menu-item [actionRef]="actionRef"></app-toolbar-menu-item>
+  </ng-container>
+</ng-container>

projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 { ToolbarButtonComponent } from './toolbar-button.component';
+
+describe('ToolbarButtonComponent', () => {
+  it('should be defined', () => {
+    expect(ToolbarButtonComponent).toBeDefined();
+  });
+});

projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.ts

@@ -0,0 +1,65 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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, Input, ViewEncapsulation } from '@angular/core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { AppExtensionService } from '../../../services/app.extension.service';
+
+export enum ToolbarButtonType {
+  ICON_BUTTON = 'icon-button',
+  MENU_ITEM = 'menu-item'
+}
+
+@Component({
+  selector: 'app-toolbar-button',
+  templateUrl: 'toolbar-button.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toolbar-button' }
+})
+export class ToolbarButtonComponent {
+  @Input()
+  type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;
+
+  @Input()
+  color = '';
+
+  @Input()
+  actionRef: ContentActionRef;
+
+  constructor(private extensions: AppExtensionService) {}
+
+  runAction() {
+    if (this.hasClickAction(this.actionRef)) {
+      this.extensions.runActionById(this.actionRef.actions.click);
+    }
+  }
+
+  private hasClickAction(actionRef: ContentActionRef): boolean {
+    if (actionRef && actionRef.actions && actionRef.actions.click) {
+      return true;
+    }
+    return false;
+  }
+}

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.html

@@ -0,0 +1,49 @@
+<ng-container [ngSwitch]="actionRef.type">
+  <ng-container *ngSwitchCase="'menu'">
+    <button
+      mat-menu-item
+      role="menuitem"
+      [disabled]="actionRef.disabled"
+      [matMenuTriggerFor]="childMenu"
+    >
+      <adf-icon [value]="actionRef.icon"></adf-icon>
+      <span>{{ actionRef.title | translate }}</span>
+    </button>
+
+    <mat-menu #childMenu="matMenu" class="app-create-menu__sub-menu">
+      <ng-container
+        *ngFor="let child of actionRef.children; trackBy: trackById"
+      >
+        <app-toolbar-menu-item [actionRef]="child"></app-toolbar-menu-item>
+      </ng-container>
+    </mat-menu>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'separator'">
+    <mat-divider></mat-divider>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'custom'">
+    <adf-dynamic-component [id]="actionRef.component"></adf-dynamic-component>
+  </ng-container>
+
+  <ng-container *ngSwitchDefault>
+    <button
+      [id]="actionRef.id"
+      role="button"
+      mat-menu-item
+      [role]="'button'"
+      color="primary"
+      [disabled]="actionRef.disabled"
+      [attr.title]="
+        (actionRef.disabled
+          ? actionRef['description-disabled']
+          : actionRef.description || actionRef.title) | translate
+      "
+      (click)="runAction()"
+    >
+      <adf-icon [value]="actionRef.icon"></adf-icon>
+      <span>{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
+</ng-container>

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 { ToolbarMenuItemComponent } from './toolbar-menu-item.component';
+
+describe('ToolbarMenuItemComponent', () => {
+  it('should be defined', () => {
+    expect(ToolbarMenuItemComponent).toBeDefined();
+  });
+});

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu-item/toolbar-menu-item.component.ts

@@ -0,0 +1,65 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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, Input, ViewEncapsulation } from '@angular/core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { AppExtensionService } from '../../../services/app.extension.service';
+
+@Component({
+  selector: 'app-toolbar-menu-item',
+  templateUrl: 'toolbar-menu-item.component.html',
+  styles: [
+    `
+      .app-toolbar-menu-item:last-child > .mat-divider-horizontal {
+        display: none;
+      }
+    `
+  ],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toolbar-menu-item' }
+})
+export class ToolbarMenuItemComponent {
+  @Input()
+  actionRef: ContentActionRef;
+
+  constructor(private extensions: AppExtensionService) {}
+
+  runAction() {
+    if (this.hasClickAction(this.actionRef)) {
+      this.extensions.runActionById(this.actionRef.actions.click);
+    }
+  }
+
+  private hasClickAction(actionRef: ContentActionRef): boolean {
+    if (actionRef && actionRef.actions && actionRef.actions.click) {
+      return true;
+    }
+    return false;
+  }
+
+  trackById(_: number, obj: { id: string }) {
+    return obj.id;
+  }
+}

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html

@@ -0,0 +1,26 @@
+<button
+  [id]="actionRef.id"
+  [color]="color"
+  mat-icon-button
+  [attr.aria-label]="actionRef.description || actionRef.title | translate"
+  [attr.title]="actionRef.description || actionRef.title | translate"
+  [matMenuTriggerFor]="menu"
+>
+  <adf-icon [value]="actionRef.icon"></adf-icon>
+</button>
+
+<mat-menu #menu="matMenu" [overlapTrigger]="false">
+  <ng-container *ngFor="let child of actionRef.children; trackBy: trackById">
+    <ng-container [ngSwitch]="child.type">
+      <ng-container *ngSwitchCase="'custom'">
+        <adf-dynamic-component
+          [id]="child.component"
+          [data]="child.data"
+        ></adf-dynamic-component>
+      </ng-container>
+      <ng-container *ngSwitchDefault>
+        <app-toolbar-menu-item [actionRef]="child"></app-toolbar-menu-item>
+      </ng-container>
+    </ng-container>
+  </ng-container>
+</mat-menu>

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.spec.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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 { ToolbarMenuComponent } from './toolbar-menu.component';
+
+describe('ToolbarMenuComponent', () => {
+  it('should be defined', () => {
+    expect(ToolbarMenuComponent).toBeDefined();
+  });
+});

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts

@@ -0,0 +1,53 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 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, Input, ViewEncapsulation } from '@angular/core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+
+@Component({
+  selector: 'app-toolbar-menu',
+  templateUrl: 'toolbar-menu.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toolbar-menu' }
+})
+export class ToolbarMenuComponent {
+  @Input()
+  actionRef: ContentActionRef;
+
+  @Input()
+  color = '';
+
+  get hasChildren(): boolean {
+    return (
+      this.actionRef &&
+      this.actionRef.children &&
+      this.actionRef.children.length > 0
+    );
+  }
+
+  trackById(_: number, obj: { id: string }) {
+    return obj.id;
+  }
+}