[ADF-2352] project toolbar buttons for the Viewer (#2989)

* project toolbar buttons for the Viewer

* test fixes

lib/core/viewer/components/viewer-toolbar-actions.component.ts

@@ -0,0 +1,28 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-viewer-toolbar-actions',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'adf-viewer-toolbar-actions' },
+    template: `<ng-content></ng-content>`
+})
+export class ViewerToolbarActionsComponent {
+}

lib/core/viewer/components/viewer.component.html

@@ -40,6 +40,8 @@
                     </button>
                 </div>
 
+                <ng-content select="adf-viewer-toolbar-actions"></ng-content>
+
                 <ng-container *ngIf="mnuOpenWith">
                     <button
                         mat-button

lib/core/viewer/components/viewer.component.spec.ts

@@ -38,6 +38,7 @@ import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
 import { ViewerOpenWithComponent } from './viewer-open-with.component';
 import { ViewerSidebarComponent } from './viewer-sidebar.component';
 import { ViewerToolbarComponent } from './viewer-toolbar.component';
+import { ViewerToolbarActionsComponent } from './viewer-toolbar-actions.component';
 import { ViewerComponent } from './viewer.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import 'rxjs/add/observable/throw';
@@ -54,6 +55,20 @@ import 'rxjs/add/observable/throw';
 })
 class ViewerWithCustomToolbarComponent {}
 
+@Component({
+    selector: 'adf-viewer-container-toolbar-actions',
+    template: `
+        <adf-viewer>
+            <adf-viewer-toolbar-actions>
+                <button mat-icon-button id="custom-button">
+                    <mat-icon>alarm</mat-icon>
+                </button>
+            </adf-viewer-toolbar-actions>
+        </adf-viewer>
+    `
+})
+class ViewerWithCustomToolbarActionsComponent {}
+
 @Component({
     selector: 'adf-viewer-container-sidebar',
     template: `
@@ -141,10 +156,12 @@ describe('ViewerComponent', () => {
                 ViewerToolbarComponent,
                 ViewerOpenWithComponent,
                 ViewerMoreActionsComponent,
+                ViewerToolbarActionsComponent,
                 ViewerWithCustomToolbarComponent,
                 ViewerWithCustomSidebarComponent,
                 ViewerWithCustomOpenWithComponent,
-                ViewerWithCustomMoreActionsComponent
+                ViewerWithCustomMoreActionsComponent,
+                ViewerWithCustomToolbarActionsComponent
             ],
             providers: [
                 {provide: RenditionsService, useValue: {
@@ -203,6 +220,14 @@ describe('ViewerComponent', () => {
             expect(customElement.querySelector('.custom-toolbar-element')).toBeDefined();
         });
 
+        it('should use custom toolbar actions', () => {
+            let customFixture = TestBed.createComponent(ViewerWithCustomToolbarActionsComponent);
+            let customElement: HTMLElement = customFixture.nativeElement;
+
+            customFixture.detectChanges();
+            expect(customElement.querySelector('#custom-button')).toBeDefined();
+        });
+
         it('should use custom info drawer', () => {
             let customFixture = TestBed.createComponent(ViewerWithCustomSidebarComponent);
             let customElement: HTMLElement = customFixture.nativeElement;

lib/core/viewer/public-api.ts

@@ -27,6 +27,7 @@ export * from './components/viewer-more-actions.component';
 export * from './components/viewer-open-with.component';
 export * from './components/viewer-sidebar.component';
 export * from './components/viewer-toolbar.component';
+export * from './components/viewer-toolbar-actions.component';
 export * from './components/viewer.component';
 
 export * from './directives/viewer-extension.directive';

lib/core/viewer/viewer.module.ts

@@ -18,6 +18,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { MaterialModule } from '../material.module';
 import { ToolbarModule } from '../toolbar/toolbar.module';
@@ -35,7 +36,7 @@ import { ViewerSidebarComponent } from './components/viewer-sidebar.component';
 import { ViewerToolbarComponent } from './components/viewer-toolbar.component';
 import { ViewerComponent } from './components/viewer.component';
 import { ViewerExtensionDirective } from './directives/viewer-extension.directive';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { ViewerToolbarActionsComponent } from './components/viewer-toolbar-actions.component';
 
 @NgModule({
     imports: [
@@ -59,7 +60,8 @@ import { FlexLayoutModule } from '@angular/flex-layout';
         ViewerToolbarComponent,
         ViewerSidebarComponent,
         ViewerOpenWithComponent,
-        ViewerMoreActionsComponent
+        ViewerMoreActionsComponent,
+        ViewerToolbarActionsComponent
     ],
     exports: [
         ViewerComponent,
@@ -74,7 +76,8 @@ import { FlexLayoutModule } from '@angular/flex-layout';
         ViewerToolbarComponent,
         ViewerSidebarComponent,
         ViewerOpenWithComponent,
-        ViewerMoreActionsComponent
+        ViewerMoreActionsComponent,
+        ViewerToolbarActionsComponent
     ]
 })
 export class ViewerModule {