toolbar module

src/app/app.module.ts

@@ -71,11 +71,9 @@ import { PermissionsManagerComponent } from './components/permission-manager/per
 import { AppRouteReuseStrategy } from './app.routes.strategy';
 import { AppInfoDrawerModule } from './components/info-drawer/info.drawer.module';
 import { DirectivesModule } from './directives/directives.module';
-import { ToggleInfoDrawerComponent } from './components/toolbar/toggle-info-drawer/toggle-info-drawer.component';
-import { DocumentDisplayModeComponent } from './components/toolbar/document-display-mode/document-display-mode.component';
-import { ToggleFavoriteComponent } from './components/toolbar/toggle-favorite/toggle-favorite.component';
 import { ContextMenuModule } from './components/context-menu/context-menu.module';
 import { ExtensionsModule } from '@alfresco/adf-extensions';
+import { AppToolbarModule } from './components/toolbar/toolbar.module';
 
 @NgModule({
     imports: [
@@ -97,7 +95,8 @@ import { ExtensionsModule } from '@alfresco/adf-extensions';
 
         DirectivesModule,
         ContextMenuModule.forRoot(),
-        AppInfoDrawerModule
+        AppInfoDrawerModule,
+        AppToolbarModule
     ],
     declarations: [
         AppComponent,
@@ -123,10 +122,7 @@ import { ExtensionsModule } from '@alfresco/adf-extensions';
         PermissionsManagerComponent,
         SearchResultsComponent,
         SettingsComponent,
-        SharedLinkViewComponent,
+        SharedLinkViewComponent
-        ToggleInfoDrawerComponent,
-        DocumentDisplayModeComponent,
-        ToggleFavoriteComponent
     ],
     providers: [
         { provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy },
@@ -149,10 +145,7 @@ import { ExtensionsModule } from '@alfresco/adf-extensions';
     entryComponents: [
         LibraryDialogComponent,
         NodeVersionsDialogComponent,
-        NodePermissionsDialogComponent,
+        NodePermissionsDialogComponent
-        ToggleInfoDrawerComponent,
-        DocumentDisplayModeComponent,
-        ToggleFavoriteComponent
     ],
     bootstrap: [AppComponent]
 })

src/app/components/toolbar/toolbar-action/toolbar-action.component.ts

@@ -31,8 +31,8 @@ import {
 } from '@angular/core';
 import { AppStore } from '../../../store/states';
 import { Store } from '@ngrx/store';
-import { AppExtensionService } from '../../extension.service';
 import { ContentActionRef } from '@alfresco/adf-extensions';
+import { AppExtensionService } from '../../../extensions/extension.service';
 
 @Component({
     selector: 'aca-toolbar-action',

src/app/components/toolbar/toolbar-button/toolbar-button.component.html

@@ -0,0 +1,28 @@
+<ng-container [ngSwitch]="type">
+    <ng-container *ngSwitchCase="'icon-button'">
+        <button
+            [id]="actionRef.id"
+            mat-icon-button
+            color="primary"
+            [attr.title]="(actionRef.description || actionRef.title) | translate"
+            (click)="runAction()">
+            <mat-icon>{{ actionRef.icon }}</mat-icon>
+        </button>
+    </ng-container>
+    <ng-container *ngSwitchCase="'menu-item'">
+        <button
+            [id]="actionRef.id"
+            mat-menu-item
+            color="primary"
+            [disabled]="actionRef.disabled"
+            [attr.title]="(
+                actionRef.disabled
+                ? actionRef['description-disabled']
+                : actionRef.description || actionRef.title
+            ) | translate"
+            (click)="runAction()">
+            <mat-icon>{{ actionRef.icon }}</mat-icon>
+            <span>{{ actionRef.title | translate }}</span>
+        </button>
+    </ng-container>
+</ng-container>

src/app/components/toolbar/toolbar-button/toolbar-button.component.ts

@@ -25,11 +25,11 @@
 
 import { Component, Input } from '@angular/core';
 import { ContentActionRef } from '@alfresco/adf-extensions';
-import { AppExtensionService } from '../../extension.service';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../../store/states';
 import { appSelection } from '../../../store/selectors/app.selectors';
 import { take } from 'rxjs/operators';
+import { AppExtensionService } from '../../../extensions/extension.service';
 
 export enum ToolbarButtonType {
     ICON_BUTTON = 'icon-button',
@@ -38,36 +38,7 @@ export enum ToolbarButtonType {
 
 @Component({
     selector: 'app-toolbar-button',
-    template: `
+    templateUrl: 'toolbar-button.component.html'
-        <ng-container [ngSwitch]="type">
-            <ng-container *ngSwitchCase="'icon-button'">
-                <button
-                    [id]="actionRef.id"
-                    mat-icon-button
-                    color="primary"
-                    [attr.title]="(actionRef.description || actionRef.title) | translate"
-                    (click)="runAction()">
-                    <mat-icon>{{ actionRef.icon }}</mat-icon>
-                </button>
-            </ng-container>
-            <ng-container *ngSwitchCase="'menu-item'">
-                <button
-                    [id]="actionRef.id"
-                    mat-menu-item
-                    color="primary"
-                    [disabled]="actionRef.disabled"
-                    [attr.title]="(
-                        actionRef.disabled
-                        ? actionRef['description-disabled']
-                        : actionRef.description || actionRef.title
-                    ) | translate"
-                    (click)="runAction()">
-                    <mat-icon>{{ actionRef.icon }}</mat-icon>
-                    <span>{{ actionRef.title | translate }}</span>
-                </button>
-            </ng-container>
-        </ng-container>
-    `
 })
 export class ToolbarButtonComponent {
     @Input() type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;

src/app/components/toolbar/toolbar.module.ts

@@ -0,0 +1,56 @@
+/*!
+ * @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 { NgModule } from '@angular/core';
+import { DocumentDisplayModeComponent } from './document-display-mode/document-display-mode.component';
+import { ToggleFavoriteComponent } from './toggle-favorite/toggle-favorite.component';
+import { ToggleInfoDrawerComponent } from './toggle-info-drawer/toggle-info-drawer.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ToolbarButtonComponent } from './toolbar-button/toolbar-button.component';
+import { ToolbarActionComponent } from './toolbar-action/toolbar-action.component';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
+
+export function components() {
+    return [
+        DocumentDisplayModeComponent,
+        ToggleFavoriteComponent,
+        ToggleInfoDrawerComponent,
+        ToolbarButtonComponent,
+        ToolbarActionComponent
+    ];
+}
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        ExtensionsModule.forChild()
+    ],
+    declarations: components(),
+    exports: components(),
+    entryComponents: components()
+})
+export class AppToolbarModule {}

src/app/extensions/core.extensions.module.ts

@@ -28,13 +28,11 @@ import { CommonModule } from '@angular/common';
 import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { LayoutComponent } from '../components/layout/layout.component';
 import { TrashcanComponent } from '../components/trashcan/trashcan.component';
-import { ToolbarActionComponent } from './components/toolbar/toolbar-action.component';
 import * as app from './evaluators/app.evaluators';
 import * as nav from './evaluators/navigation.evaluators';
 import { AppExtensionService } from './extension.service';
 import { ToggleInfoDrawerComponent } from '../components/toolbar/toggle-info-drawer/toggle-info-drawer.component';
 import { ToggleFavoriteComponent } from '../components/toolbar/toggle-favorite/toggle-favorite.component';
-import { ToolbarButtonComponent } from './components/toolbar/toolbar-button.component';
 import { MetadataTabComponent } from '../components/info-drawer/metadata-tab/metadata-tab.component';
 import { CommentsTabComponent } from '../components/info-drawer/comments-tab/comments-tab.component';
 import { VersionsTabComponent } from '../components/info-drawer/versions-tab/versions-tab.component';
@@ -49,14 +47,6 @@ export function setupExtensions(service: AppExtensionService): Function {
         CommonModule,
         CoreModule.forChild(),
         ExtensionsModule.forChild()
-    ],
-    declarations: [
-        ToolbarActionComponent,
-        ToolbarButtonComponent
-    ],
-    exports: [
-        ToolbarActionComponent,
-        ToolbarButtonComponent
     ]
 })
 export class CoreExtensionsModule {