split render from viewer

move alfresco render in content pack

demo-shell/src/app/components/file-view/file-view.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="nodeId || content">
+<ng-container *ngIf="nodeId">
 
     <ng-template let-node="node" #sidebarRightTemplate>
         <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE' | translate">
@@ -126,26 +126,6 @@
         <adf-info-drawer [title]="'Viewer Options'">
 
             <adf-info-drawer-tab label="Settings">
-                <p class="toggle">
-                    <mat-slide-toggle
-                        id="adf-switch-custoname"
-                        [color]="'primary'"
-                        (change)="toggleCustomName()"
-                        [checked]="customName">
-                        Custom Name
-                    </mat-slide-toggle>
-                </p>
-
-                <p class="toggle">
-                    <ng-container *ngIf="customName">
-                        <mat-form-field floatLabel="never">
-                            <input matInput
-                                   placeholder="Custom Name"
-                                   [(ngModel)]="displayName"
-                                   data-automation-id="adf-text-custom-name">
-                        </mat-form-field>
-                    </ng-container>
-                </p>
 
                 <p class="toggle">
                     <mat-slide-toggle
@@ -321,105 +301,98 @@
     </ng-template>
 
     <adf-alfresco-viewer
+        (close)="onViewerVisibilityChanged()"
         [nodeId]="nodeId"
-    ></adf-alfresco-viewer>
+        [versionId]="versionId"
+        [showRightSidebar]="showRightSidebar"
+        [showLeftSidebar]="showLeftSidebar"
+        [allowGoBack]="allowGoBack"
+        [showToolbar]="showToolbar"
+        [allowPrint]="allowPrint"
+        [allowDownload]="allowDownload"
+        [allowRightSidebar]="allowRightSidebar"
+        [allowLeftSidebar]="allowLeftSidebar"
+        [sidebarLeftTemplate]="sidebarLeftTemplate"
+        [sidebarRightTemplate]="sidebarRightTemplate">
 
-<!--    <adf-viewer-->
+        <adf-viewer-toolbar *ngIf="customToolbar" data-automation-id="adf-viewer-custom-toolbar">
-<!--        [blobFile]="content"-->
+            <h1>My custom toolbar</h1>
-<!--        [nodeId]="nodeId"-->
+        </adf-viewer-toolbar>
-<!--        [versionId]="versionId"-->
-<!--        [showRightSidebar]="showRightSidebar"-->
-<!--        [showLeftSidebar]="showLeftSidebar"-->
-<!--        [allowGoBack]="allowGoBack"-->
-<!--        [displayName]="displayName"-->
-<!--        [showToolbar]="showToolbar"-->
-<!--        [allowPrint]="allowPrint"-->
-<!--        [allowDownload]="allowDownload"-->
-<!--        [allowRightSidebar]="allowRightSidebar"-->
-<!--        [allowLeftSidebar]="allowLeftSidebar"-->
-<!--        [urlFile]="urlFile"-->
-<!--        (showViewerChange)="onViewerVisibilityChanged()"-->
-<!--        [sidebarLeftTemplate]="sidebarLeftTemplate"-->
-<!--        [sidebarRightTemplate]="sidebarRightTemplate">-->
 
-<!--        <adf-viewer-toolbar *ngIf="customToolbar" data-automation-id="adf-viewer-custom-toolbar">-->
+        <adf-viewer-toolbar-actions *ngIf="moreActions">
-<!--            <h1>My custom toolbar</h1>-->
+            <button mat-icon-button id="adf-viewer-time">
-<!--        </adf-viewer-toolbar>-->
+                <mat-icon>alarm</mat-icon>
+            </button>
+            <button mat-icon-button id="adf-viewer-upload">
+                <mat-icon>backup</mat-icon>
+            </button>
+            <button mat-icon-button id="adf-viewer-bug">
+                <mat-icon>bug_report</mat-icon>
+            </button>
+        </adf-viewer-toolbar-actions>
 
-<!--        <adf-viewer-toolbar-actions *ngIf="moreActions">-->
+        <adf-viewer-more-actions *ngIf="moreActionsMenu">
-<!--            <button mat-icon-button id="adf-viewer-time">-->
+            <button mat-menu-item id="adf-viewer-more-menu-alarm">
-<!--                <mat-icon>alarm</mat-icon>-->
+                <mat-icon>alarm</mat-icon>
-<!--            </button>-->
+                <span>Alarm</span>
-<!--            <button mat-icon-button id="adf-viewer-upload">-->
+            </button>
-<!--                <mat-icon>backup</mat-icon>-->
+            <button mat-menu-item id="adf-viewer-more-menu-backup">
-<!--            </button>-->
+                <mat-icon>backup</mat-icon>
-<!--            <button mat-icon-button id="adf-viewer-bug">-->
+                <span>Backup</span>
-<!--                <mat-icon>bug_report</mat-icon>-->
+            </button>
-<!--            </button>-->
+            <button mat-menu-item id="adf-viewer-more-menu-bug">
-<!--        </adf-viewer-toolbar-actions>-->
+                <mat-icon>bug_report</mat-icon>
+                <span>Bug report</span>
+            </button>
+        </adf-viewer-more-actions>
 
-<!--        <adf-viewer-more-actions *ngIf="moreActionsMenu">-->
+        <ng-container *ngIf="openWith">
-<!--            <button mat-menu-item id="adf-viewer-more-menu-alarm">-->
+            <adf-viewer-open-with>
-<!--                <mat-icon>alarm</mat-icon>-->
+                <button mat-menu-item>
-<!--                <span>Alarm</span>-->
+                    <mat-icon>dialpad</mat-icon>
-<!--            </button>-->
+                    <span>Option 1</span>
-<!--            <button mat-menu-item id="adf-viewer-more-menu-backup">-->
+                </button>
-<!--                <mat-icon>backup</mat-icon>-->
+                <button mat-menu-item disabled>
-<!--                <span>Backup</span>-->
+                    <mat-icon>voicemail</mat-icon>
-<!--            </button>-->
+                    <span>Option 2</span>
-<!--            <button mat-menu-item id="adf-viewer-more-menu-bug">-->
+                </button>
-<!--                <mat-icon>bug_report</mat-icon>-->
+                <button mat-menu-item>
-<!--                <span>Bug report</span>-->
+                    <mat-icon>notifications_off</mat-icon>
-<!--            </button>-->
+                    <span>Option 3</span>
-<!--        </adf-viewer-more-actions>-->
+                </button>
+            </adf-viewer-open-with>
+        </ng-container>
 
-<!--        <ng-container *ngIf="openWith">-->
+        <!--
-<!--            <adf-viewer-open-with>-->
+        <adf-viewer-extension [supportedExtensions]="['json']">
-<!--                <button mat-menu-item>-->
+            <ng-template let-urlFileContent="urlFileContent" let-extension="extension">
-<!--                    <mat-icon>dialpad</mat-icon>-->
+            <h1>JSON VIEWER</h1>
-<!--                    <span>Option 1</span>-->
+            </ng-template>
-<!--                </button>-->
+        </adf-viewer-extension>
-<!--                <button mat-menu-item disabled>-->
+        -->
-<!--                    <mat-icon>voicemail</mat-icon>-->
-<!--                    <span>Option 2</span>-->
-<!--                </button>-->
-<!--                <button mat-menu-item>-->
-<!--                    <mat-icon>notifications_off</mat-icon>-->
-<!--                    <span>Option 3</span>-->
-<!--                </button>-->
-<!--            </adf-viewer-open-with>-->
-<!--        </ng-container>-->
 
-<!--        &lt;!&ndash;-->
+        <!--
-<!--        <adf-viewer-extension [supportedExtensions]="['json']">-->
+        <adf-viewer-extension [supportedExtensions]="['png']">
-<!--            <ng-template let-urlFileContent="urlFileContent" let-extension="extension">-->
+            <ng-template>
-<!--            <h1>JSON VIEWER</h1>-->
+            <h1>PNG Viewer</h1>
-<!--            </ng-template>-->
+            </ng-template>
-<!--        </adf-viewer-extension>-->
+        </adf-viewer-extension>
-<!--        &ndash;&gt;-->
+        -->
 
-<!--        &lt;!&ndash;-->
+        <!--
-<!--        <adf-viewer-extension [supportedExtensions]="['png']">-->
+        <adf-viewer-extension [supportedExtensions]="['pdf']">
-<!--            <ng-template>-->
+            <ng-template>
-<!--            <h1>PNG Viewer</h1>-->
+            <h1>PDF Viewer</h1>
-<!--            </ng-template>-->
+            </ng-template>
-<!--        </adf-viewer-extension>-->
+        </adf-viewer-extension>
-<!--        &ndash;&gt;-->
+        -->
 
-<!--        &lt;!&ndash;-->
+        <!--
-<!--        <adf-viewer-extension [supportedExtensions]="['pdf']">-->
+        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
-<!--            <ng-template>-->
+            <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
-<!--            <h1>PDF Viewer</h1>-->
+            <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
-<!--            </ng-template>-->
+            </ng-template>
-<!--        </adf-viewer-extension>-->
+        </extension-viewer>
-<!--        &ndash;&gt;-->
+        -->
-
+    </adf-alfresco-viewer>
-<!--        &lt;!&ndash;-->
-<!--        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>-->
-<!--            <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >-->
-<!--            <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>-->
-<!--            </ng-template>-->
-<!--        </extension-viewer>-->
-<!--        &ndash;&gt;-->
-<!--    </adf-viewer>-->
 </ng-container>

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -45,7 +45,6 @@ export class FileViewComponent implements OnInit {
     customPreset: string = null;
     displayDefaultProperties = true;
     showToolbar = true;
-    displayName = null;
     urlFile = null;
     allowGoBack = true;
     openWith = false;
@@ -55,7 +54,6 @@ export class FileViewComponent implements OnInit {
     allowLeftSidebar = true;
     moreActions = true;
     moreActionsMenu = false;
-    customName = false;
     fileUrlSwitch = false;
     showLeftSidebar = null;
     showRightSidebar = false;
@@ -65,7 +63,6 @@ export class FileViewComponent implements OnInit {
     showTabWithIconAndLabel = false;
     desiredAspect: string = null;
     showAspect: string = null;
-    content: Blob;
     name: string;
 
     constructor(private router: Router,
@@ -93,9 +90,6 @@ export class FileViewComponent implements OnInit {
                     },
                     () => this.router.navigate(['/files', id])
                 );
-            } else if (this.preview.content) {
-                this.content = this.preview.content;
-                this.displayName = this.preview.name;
             }
         });
     }
@@ -182,14 +176,6 @@ export class FileViewComponent implements OnInit {
         this.showTabWithIconAndLabel = !this.showTabWithIconAndLabel;
     }
 
-    toggleCustomName() {
-        this.customName = !this.customName;
-
-        if (!this.customName) {
-            this.displayName = null;
-        }
-    }
-
     toggleFileUrl() {
         this.fileUrlSwitch = !this.fileUrlSwitch;
 

demo-shell/src/app/components/file-view/file-view.module.ts

@@ -34,6 +34,7 @@ const routes: Routes = [
         CommonModule,
         RouterModule.forChild(routes),
         CoreModule,
+        ContentModule,
         InfoDrawerModule,
         ContentModule,
         ContentDirectiveModule,

demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.html

@@ -15,8 +15,8 @@
     (preview)="showPreview($event)">
 </adf-document-list>
 
-<!--<adf-viewer-->
+<adf-alfresco-viewer
-<!--    [(showViewer)]="showViewer"-->
+    [showViewer]="showViewer"
-<!--    [overlayMode]="isOverlay"-->
+    [overlayMode]="isOverlay"
-<!--    [nodeId]="nodeId">-->
+    [nodeId]="nodeId">
-<!--</adf-viewer>-->
+</adf-alfresco-viewer>

docs/core/components/viewer.component.md

@@ -1,11 +1,11 @@
 ---
-Title: Viewer component
+Title: Render Viewer component
 Added: v2.0.0
 Status: Active
 Last reviewed: 2019-03-25
 ---
 
-# [Viewer component](lib/core/src/lib/viewer/components/viewer.component.ts "Defined in viewer.component.ts")
+# [Viewer component](lib/core/src/lib/viewer/components/viewer-render.component.ts "Defined in viewer-render.component.ts")
 
 Displays content from an ACS repository.
 

lib/content-services/src/lib/content.module.ts

@@ -46,6 +46,7 @@ import { versionCompatibilityFactory } from './version-compatibility/version-com
 import { VersionCompatibilityService } from './version-compatibility/version-compatibility.service';
 import { ContentPipeModule } from './pipes/content-pipe.module';
 import { NodeCommentsModule } from './node-comments/node-comments.module';
+import { AlfrescoViewerModule } from "./viewer";
 
 @NgModule({
     imports: [
@@ -75,7 +76,8 @@ import { NodeCommentsModule } from './node-comments/node-comments.module';
         ContentTypeModule,
         AspectListModule,
         VersionCompatibilityModule,
-        NodeCommentsModule
+        NodeCommentsModule,
+        AlfrescoViewerModule
     ],
     providers: [
         {
@@ -109,7 +111,8 @@ import { NodeCommentsModule } from './node-comments/node-comments.module';
         AspectListModule,
         ContentTypeModule,
         VersionCompatibilityModule,
-        NodeCommentsModule
+        NodeCommentsModule,
+        AlfrescoViewerModule
     ]
 })
 export class ContentModule {

lib/content-services/src/lib/viewer/alfresco-viewer.module.ts

@@ -0,0 +1,51 @@
+/*!
+ * @license
+ * Copyright 2019 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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { ExtensionsModule } from '@alfresco/adf-extensions';
+
+import { MaterialModule } from '../material.module';
+import { A11yModule } from '@angular/cdk/a11y';
+import { AlfrescoViewerComponent } from "./components/alfresco-viewer.component";
+import { CoreModule } from "@alfresco/adf-core";
+
+@NgModule({
+    imports: [
+        CoreModule,
+        CommonModule,
+        MaterialModule,
+        TranslateModule,
+        FormsModule,
+        ReactiveFormsModule,
+        FlexLayoutModule,
+        A11yModule,
+        ExtensionsModule
+    ],
+    declarations: [
+        AlfrescoViewerComponent,
+    ],
+    exports: [
+        AlfrescoViewerComponent,
+    ]
+})
+export class AlfrescoViewerModule {
+}

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html

@@ -0,0 +1,191 @@
+<div *ngIf="showViewer"
+     class="adf-alfresco-viewer-container"
+     [class.adf-alfresco-viewer-overlay-container]="overlayMode"
+     [class.adf-alfresco-viewer-inline-container]="!overlayMode">
+
+    <div class="adf-alfresco-viewer-content"
+         fxLayout="column"
+         [cdkTrapFocus]="overlayMode"
+         cdkTrapFocusAutoCapture>
+        <ng-content select="adf-alfresco-viewer-toolbar"></ng-content>
+        <ng-container *ngIf="showToolbar && !toolbar">
+            <adf-toolbar id="adf-alfresco-viewer-toolbar" class="adf-alfresco-viewer-toolbar">
+                <adf-toolbar-title>
+
+                    <ng-container *ngIf="allowLeftSidebar">
+                        <button mat-icon-button
+                                [attr.aria-expanded]="showLeftSidebar"
+                                [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
+                                title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
+                                data-automation-id="adf-toolbar-left-sidebar"
+                                [color]="showLeftSidebar ? 'accent' : null"
+                                (click)="toggleLeftSidebar()">
+                            <mat-icon>info_outline</mat-icon>
+                        </button>
+                    </ng-container>
+
+                    <button *ngIf="allowGoBack"
+                            class="adf-alfresco-viewer-close-button"
+                            data-automation-id="adf-toolbar-back"
+                            [attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
+                            mat-icon-button
+                            title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
+                            (click)="onClose()">
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </adf-toolbar-title>
+
+                <div fxFlex="1 1 auto"
+                     class="adf-alfresco-viewer__file-title">
+                    <button *ngIf="allowNavigate && canNavigateBefore"
+                            data-automation-id="adf-toolbar-pref-file"
+                            mat-icon-button
+                            [attr.aria-label]="'ADF_VIEWER.ACTIONS.PREV_FILE' | translate"
+                            title="{{ 'ADF_VIEWER.ACTIONS.PREV_FILE' | translate }}"
+                            (click)="onNavigateBeforeClick($event)">
+                        <mat-icon>navigate_before</mat-icon>
+                    </button>
+                    <img class="adf-alfresco-viewer__mimeicon"
+                         [alt]="mimeType"
+                         [src]="mimeType | adfMimeTypeIcon"
+                         data-automation-id="adf-file-thumbnail">
+                    <span class="adf-alfresco-viewer__display-name"
+                          id="adf-alfresco-viewer-display-name">{{ fileName }}</span>
+                    <button *ngIf="allowNavigate && canNavigateNext"
+                            data-automation-id="adf-toolbar-next-file"
+                            mat-icon-button
+                            [attr.aria-label]="'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate"
+                            title="{{ 'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate }}"
+                            (click)="onNavigateNextClick($event)">
+                        <mat-icon>navigate_next</mat-icon>
+                    </button>
+                </div>
+
+                <ng-content select="adf-alfresco-viewer-toolbar-actions"></ng-content>
+
+                <ng-container *ngIf="mnuOpenWith"
+                              data-automation-id='adf-toolbar-custom-btn'>
+                    <button id="adf-alfresco-viewer-openwith"
+                            mat-button
+                            [matMenuTriggerFor]="mnuOpenWith"
+                            data-automation-id="adf-toolbar-open-with">
+                        <span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span>
+                        <mat-icon>arrow_drop_down</mat-icon>
+                    </button>
+                    <mat-menu #mnuOpenWith="matMenu"
+                              [overlapTrigger]="false">
+                        <ng-content select="adf-alfresco-viewer-open-with"></ng-content>
+                    </mat-menu>
+                </ng-container>
+
+                <adf-toolbar-divider></adf-toolbar-divider>
+
+                <button id="adf-alfresco-viewer-download"
+                        *ngIf="allowDownload"
+                        mat-icon-button
+                        [attr.aria-label]="'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate"
+                        title="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}"
+                        data-automation-id="adf-toolbar-download"
+                        [adfNodeDownload]="nodeEntry"
+                        [version]="versionEntry">
+                    <mat-icon>file_download</mat-icon>
+                </button>
+
+                <button id="adf-alfresco-viewer-print"
+                        *ngIf="allowPrint"
+                        mat-icon-button
+                        [attr.aria-label]="'ADF_VIEWER.ACTIONS.PRINT' | translate"
+                        title="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}"
+                        data-automation-id="adf-toolbar-print"
+                        (click)="onPrintContent($event)">
+                    <mat-icon>print</mat-icon>
+                </button>
+
+                <button id="adf-alfresco-viewer-fullscreen"
+                        *ngIf="viewerType !== 'media'"
+                        mat-icon-button
+                        [attr.aria-label]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate"
+                        title="{{ 'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate }}"
+                        data-automation-id="adf-toolbar-fullscreen"
+                        (click)="enterFullScreen()">
+                    <mat-icon>fullscreen</mat-icon>
+                </button>
+
+                <ng-container *ngIf="allowRightSidebar">
+                    <adf-toolbar-divider></adf-toolbar-divider>
+
+                    <button mat-icon-button
+                            [attr.aria-expanded]="showRightSidebar"
+                            [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
+                            title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
+                            data-automation-id="adf-toolbar-sidebar"
+                            [color]="showRightSidebar ? 'accent' : null"
+                            (click)="toggleRightSidebar()">
+                        <mat-icon>info_outline</mat-icon>
+                    </button>
+
+                </ng-container>
+
+                <ng-container *ngIf="mnuMoreActions">
+                    <button id="adf-alfresco-viewer-moreactions"
+                            mat-icon-button
+                            [matMenuTriggerFor]="mnuMoreActions"
+                            [attr.aria-label]="'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate"
+                            title="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}"
+                            data-automation-id="adf-toolbar-more-actions">
+                        <mat-icon>more_vert</mat-icon>
+                    </button>
+                    <mat-menu #mnuMoreActions="matMenu"
+                              [overlapTrigger]="false">
+                        <ng-content select="adf-alfresco-viewer-more-actions"></ng-content>
+                    </mat-menu>
+                </ng-container>
+
+            </adf-toolbar>
+        </ng-container>
+
+        <div fxLayout="row"
+             fxFlex="1 1 auto">
+
+            <ng-container *ngIf="allowRightSidebar && showRightSidebar">
+                <div class="adf-alfresco-viewer__sidebar"
+                     [ngClass]="'adf-alfresco-viewer__sidebar__right'"
+                     fxFlexOrder="4"
+                     id="adf-right-sidebar">
+                    <ng-container *ngIf="sidebarRightTemplate">
+                        <ng-container *ngTemplateOutlet="sidebarRightTemplate;context:sidebarRightTemplateContext">
+                        </ng-container>
+                    </ng-container>
+                    <ng-content *ngIf="!sidebarRightTemplate"
+                                select="adf-alfresco-viewer-sidebar"></ng-content>
+                </div>
+            </ng-container>
+
+            <ng-container *ngIf="allowLeftSidebar && showLeftSidebar">
+                <div class="adf-alfresco-viewer__sidebar"
+                     [ngClass]="'adf-alfresco-viewer__sidebar__left'"
+                     fxFlexOrder="1"
+                     id="adf-left-sidebar">
+                    <ng-container *ngIf="sidebarLeftTemplate">
+                        <ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext">
+                        </ng-container>
+                    </ng-container>
+                    <ng-content *ngIf="!sidebarLeftTemplate"
+                                select="adf-alfresco-viewer-sidebar"></ng-content>
+                </div>
+            </ng-container>
+
+            <adf-viewer-render
+                fxFlexOrder="1"
+                fxFlex="1 1 auto"
+                (submitFile)="onSubmitFile($event)"
+                [viewerType]="viewerType"
+                [fileName]="fileName"
+                [isLoading]="isLoading"
+                [allowGoBack]="allowGoBack"
+                [urlFile]="urlFileContent"
+            ></adf-viewer-render>
+
+        </div>
+    </div>
+</div>

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.scss

@@ -0,0 +1,82 @@
+/* stylelint-disable scss/at-extend-no-missing-placeholder */
+.adf-full-screen {
+    width: 100%;
+    height: 100%;
+    background-color: var(--theme-card-bg-color);
+}
+
+.adf-alfresco-viewer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    .mat-toolbar {
+        color: var(--theme-text-color);
+
+        .adf-toolbar-title {
+            width: auto;
+        }
+    }
+
+    &-main {
+        width: 0;
+    }
+
+    &__mimeicon {
+        vertical-align: middle;
+        height: 18px;
+        width: 18px;
+    }
+
+    &-toolbar {
+        .mat-toolbar {
+            background-color: var(--theme-card-bg-bold-color);
+        }
+    }
+
+    &__file-title {
+        text-align: center;
+    }
+
+    &__display-name {
+        font-size: var(--theme-subheading-2-font-size);
+        opacity: 0.87;
+        line-height: 1.5;
+        letter-spacing: -0.4px;
+        font-weight: normal;
+        font-style: normal;
+        font-stretch: normal;
+        max-width: 400px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: inline-block;
+        vertical-align: middle;
+        color: var(--theme-text-fg-color);
+    }
+
+    &-inline-container {
+        @extend .adf-full-screen;
+    }
+
+    &-custom-content {
+        width: 100vw;
+    }
+
+    &__sidebar {
+        width: 350px;
+        display: block;
+        padding: 0;
+        background-color: var(--theme-background-color);
+        box-shadow: 0 2px 4px 0 var(--theme-text-fg-shadow-color);
+        overflow: auto;
+
+        &__right {
+            border-left: 1px solid var(--theme-border-color);
+        }
+
+        &__left {
+            border-right: 1px solid var(--theme-border-color);
+        }
+    }
+
+}

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts

@@ -1,12 +1,14 @@
 import {
     ChangeDetectorRef,
-    Component,
+    Component, ContentChild,
     EventEmitter, HostListener,
     Input,
     Output,
-    ViewEncapsulation
+    ViewEncapsulation,
+    ElementRef,
+    TemplateRef
 } from "@angular/core";
-import { ViewUtilService } from "../services/view-util.service";
+import { ViewUtilService } from "../../../../../core/src/lib/viewer/services/view-util.service";
 import {
     ContentApi, Node,
     NodeEntry,
@@ -16,24 +18,36 @@ import {
     VersionEntry,
     VersionsApi
 } from "@alfresco/js-api";
-import { AlfrescoApiService, LogService, UploadService } from "../../services";
+import { AlfrescoApiService, LogService, UploadService } from "../../../../../core/src/lib/services";
 import { MatDialog } from "@angular/material/dialog";
-import { filter, takeUntil } from "rxjs/operators";
+import { filter, skipWhile, takeUntil } from "rxjs/operators";
-import { FileModel } from "../../models";
+import { FileModel } from "../../../../../core/src/lib/models";
-import { Subject } from "rxjs";
+import { fromEvent, Subject } from "rxjs";
 import { RenditionViewerService } from "../services/rendition-viewer.service";
-import { BaseEvent } from '../../events';
+import { ViewerToolbarComponent,ViewerSidebarComponent, ViewerOpenWithComponent,ViewerMoreActionsComponent } from "@alfresco/adf-core";
 
 @Component({
     selector: 'adf-alfresco-viewer',
     templateUrl: './alfresco-viewer.component.html',
     styleUrls: ['./alfresco-viewer.component.scss'],
-    host: {class: 'adf-viewer'},
+    host: {class: 'adf-alfresco-viewer'},
     encapsulation: ViewEncapsulation.None,
     providers: [ViewUtilService]
 })
 export class AlfrescoViewerComponent {
 
+    @ContentChild(ViewerToolbarComponent)
+    toolbar: ViewerToolbarComponent;
+
+    @ContentChild(ViewerSidebarComponent)
+    sidebar: ViewerSidebarComponent;
+
+    @ContentChild(ViewerOpenWithComponent)
+    mnuOpenWith: ViewerOpenWithComponent;
+
+    @ContentChild(ViewerMoreActionsComponent)
+    mnuMoreActions: ViewerMoreActionsComponent;
+
     /** Node Id of the file to load. */
     @Input()
     nodeId: string = null;
@@ -92,6 +106,30 @@ export class AlfrescoViewerComponent {
     @Input()
     allowRightSidebar = false;
 
+    /** Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. */
+    @Input()
+    showRightSidebar = false;
+
+    /** Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. */
+    @Input()
+    showLeftSidebar = false;
+
+    /** Toggles downloading. */
+    @Input()
+    allowDownload = true;
+
+    /** Toggles printing. */
+    @Input()
+    allowPrint = false;
+
+    /** The template for the right sidebar. The template context contains the loaded node data. */
+    @Input()
+    sidebarRightTemplate: TemplateRef<any> = null;
+
+    /** The template for the left sidebar. The template context contains the loaded node data. */
+    @Input()
+    sidebarLeftTemplate: TemplateRef<any> = null;
+
     /** Emitted when the shared link used is not valid. */
     @Output()
     invalidSharedLink = new EventEmitter();
@@ -104,30 +142,28 @@ export class AlfrescoViewerComponent {
     @Output()
     navigateNext = new EventEmitter<MouseEvent | KeyboardEvent>();
 
-    /** Toggles right sidebar visibility. Requires `allowRightSidebar` to be set to `true`. */
+    /** Emitted when the viewer close */
-    @Input()
+    @Output()
-    showRightSidebar = false;
+    close = new EventEmitter<boolean>();
-
-    /** Toggles left sidebar visibility. Requires `allowLeftSidebar` to be set to `true`. */
-    @Input()
-    showLeftSidebar = false;
 
     private onDestroy$ = new Subject<boolean>();
+    private keyDown$ = fromEvent<KeyboardEvent>(document, 'keydown');
 
     private cacheBusterNumber: number;
-    private nodeEntry: NodeEntry;
+    private closeViewer: any;
-     versionEntry: VersionEntry;
-     isLoading: boolean;
 
+    versionEntry: VersionEntry;
+    isLoading: boolean;
     urlFileContent: string;
+    viewerType: any;
+    fileName: string;
+    mimeType: string;
+    nodeEntry: NodeEntry;
+
+    sidebarRightTemplateContext: { node: Node } = {node: null};
+    sidebarLeftTemplateContext: { node: Node } = {node: null};
 
     _sharedLinksApi: SharedlinksApi;
-
-     viewerType: any;
-     fileName: string;
-     fileExtension: any;
-     mimeType: string;
-
     get sharedLinksApi(): SharedlinksApi {
         this._sharedLinksApi = this._sharedLinksApi ?? new SharedlinksApi(this.apiService.getInstance());
         return this._sharedLinksApi;
@@ -155,7 +191,7 @@ export class AlfrescoViewerComponent {
                 private renditionViewerService: RenditionViewerService,
                 private viewUtilService: ViewUtilService,
                 private logService: LogService,
-                // private contentService: ContentService,
+                private el: ElementRef,
                 private uploadService: UploadService,
                 public dialog: MatDialog,
                 private cdr: ChangeDetectorRef) {
@@ -178,6 +214,39 @@ export class AlfrescoViewerComponent {
                     this.getNodeVersionProperty(this.nodeEntry.entry) !== this.getNodeVersionProperty(node))),
             takeUntil(this.onDestroy$)
         ).subscribe((node) => this.onNodeUpdated(node));
+        this.closeOverlayManager();
+    }
+
+    private closeOverlayManager() {
+        this.dialog.afterOpened.pipe(
+            skipWhile(() => !this.overlayMode),
+            takeUntil(this.onDestroy$)
+        ).subscribe(() => this.closeViewer = false);
+
+        this.dialog.afterAllClosed.pipe(
+            skipWhile(() => !this.overlayMode),
+            takeUntil(this.onDestroy$)
+        ).subscribe(() => this.closeViewer = true);
+
+        this.keyDown$.pipe(
+            skipWhile(() => !this.overlayMode),
+            filter((e: KeyboardEvent) => e.keyCode === 27),
+            takeUntil(this.onDestroy$)
+        ).subscribe((event: KeyboardEvent) => {
+            event.preventDefault();
+
+            if (this.closeViewer) {
+                this.onClose();
+            }
+        });
+    }
+
+    /**
+     * close the viewer
+     */
+    onClose() {
+        this.showViewer = false;
+        this.close.emit(this.showViewer);
     }
 
     private onNodeUpdated(node: Node) {
@@ -275,8 +344,8 @@ export class AlfrescoViewerComponent {
         }
         this.isLoading = false;
 
-        // this.sidebarRightTemplateContext.node = nodeData;
+        this.sidebarRightTemplateContext.node = nodeData;
-        // this.sidebarLeftTemplateContext.node = nodeData;
+        this.sidebarLeftTemplateContext.node = nodeData;
     }
 
     private async setUpSharedLinkFile(details: any) {
@@ -294,9 +363,11 @@ export class AlfrescoViewerComponent {
         }
     }
 
-    onPrintContent(event: BaseEvent<any>) {
+    onPrintContent(event: MouseEvent) {
-        if (!event.defaultPrevented) {
+        if (this.allowPrint) {
-            this.viewUtilService.printFileGeneric(this.nodeId, this.mimeType);
+            if (!event.defaultPrevented) {
+                this.viewUtilService.printFileGeneric(this.nodeId, this.mimeType);
+            }
         }
     }
 
@@ -365,24 +436,12 @@ export class AlfrescoViewerComponent {
         }
     }
 
-    toggleSidebar() {
+    toggleRightSidebar() {
         this.showRightSidebar = !this.showRightSidebar;
-        if (this.showRightSidebar && this.nodeId) {
-            this.nodesApi.getNode(this.nodeId, { include: ['allowableOperations'] });
-              //   .then((nodeEntry: NodeEntry) => {
-              // //      this.sidebarRightTemplateContext.node = nodeEntry.entry;
-              //   });
-        }
     }
 
     toggleLeftSidebar() {
         this.showLeftSidebar = !this.showLeftSidebar;
-        if (this.showRightSidebar && this.nodeId) {
-            this.nodesApi.getNode(this.nodeId, { include: ['allowableOperations'] });
-                // .then((nodeEntry: NodeEntry) => {
-                //  //   this.sidebarLeftTemplateContext.node = nodeEntry.entry;
-                // });
-        }
     }
 
     @HostListener('document:keyup', ['$event'])
@@ -404,6 +463,30 @@ export class AlfrescoViewerComponent {
             event.preventDefault();
             this.onNavigateNextClick(event);
         }
+
+        // Ctrl+F
+        if (key === 70 && event.ctrlKey) {
+            event.preventDefault();
+            this.enterFullScreen();
+        }
+    }
+
+    /**
+     * Triggers full screen mode with a main content area displayed.
+     */
+    enterFullScreen(): void {
+        const container = this.el.nativeElement.querySelector('.adf-viewer__fullscreen-container');
+        if (container) {
+            if (container.requestFullscreen) {
+                container.requestFullscreen();
+            } else if (container.webkitRequestFullscreen) {
+                container.webkitRequestFullscreen();
+            } else if (container.mozRequestFullScreen) {
+                container.mozRequestFullScreen();
+            } else if (container.msRequestFullscreen) {
+                container.msRequestFullscreen();
+            }
+        }
     }
 
 }

lib/content-services/src/lib/viewer/index.ts

@@ -0,0 +1,18 @@
+/*!
+ * @license
+ * Copyright 2019 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.
+ */
+
+export * from './public-api';

lib/content-services/src/lib/viewer/public-api.ts

@@ -0,0 +1,21 @@
+/*!
+ * @license
+ * Copyright 2019 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.
+ */
+
+export * from './services/rendition-viewer.service';
+export * from './components/alfresco-viewer.component';
+
+export * from './alfresco-viewer.module';

lib/content-services/src/lib/viewer/services/rendition-viewer.service.ts

@@ -17,10 +17,7 @@
 
 import { Injectable } from '@angular/core';
 import { ContentApi, RenditionEntry, RenditionPaging, RenditionsApi, VersionsApi } from '@alfresco/js-api';
-import { AlfrescoApiService } from '../../services/alfresco-api.service';
+import { AlfrescoApiService , LogService, Track,TranslationService } from '@alfresco/adf-core';
-import { LogService } from '../../services/log.service';
-import { Track } from '../models/viewer.model';
-import { TranslationService } from '../../services/translation.service';
 
 @Injectable({
     providedIn: 'root'
@@ -29,7 +26,7 @@ export class RenditionViewerService {
 
     /**
      * Content groups based on categorization of files that can be viewed in the web browser. This
-     * implementation or grouping is tied to the definition the ng component: ViewerComponent
+     * implementation or grouping is tied to the definition the ng component: ViewerRenderComponent
      */
     static ContentGroup = {
         IMAGE: 'image',
@@ -44,13 +41,13 @@ export class RenditionViewerService {
     static SUBTITLES_RENDITION_NAME = 'webvtt';
 
     /**
-     * Based on ViewerComponent Implementation, this value is used to determine how many times we try
+     * Based on ViewerRenderComponent Implementation, this value is used to determine how many times we try
      * to get the rendition of a file for preview, or printing.
      */
     maxRetries = 5;
 
     /**
-     * Mime-type grouping based on the ViewerComponent.
+     * Mime-type grouping based on the ViewerRenderComponent.
      */
     private mimeTypes = {
         text: ['text/plain', 'text/csv', 'text/xml', 'text/html', 'application/x-javascript'],

lib/content-services/src/public-api.ts

@@ -41,5 +41,6 @@ export * from './lib/interfaces/index';
 export * from './lib/version-compatibility/index';
 export * from './lib/pipes/index';
 export * from './lib/services/index';
+export * from './lib/viewer';
 
 export * from './lib/content.module';

lib/core/src/lib/form/components/widgets/file-viewer/file-viewer.widget.html

@@ -2,6 +2,6 @@
     [class.adf-readonly]="field.readOnly">
     <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
             *ngIf="isRequired()">*</span></label>
-    <adf-viewer [overlayMode]="false" [urlFile]="field.value" [showViewer]="field.value" [allowGoBack]="false"></adf-viewer>
+<!--    <adf-viewer [urlFile]="field.value" [allowGoBack]="false"></adf-viewer>-->
     <error-widget [error]="field.validationSummary"></error-widget>
 </div>

lib/core/src/lib/viewer/components/alfresco-viewer.component.html

@@ -1,149 +0,0 @@
-<ng-container *ngIf="showToolbar">
-    <adf-toolbar id="adf-viewer-toolbar" class="adf-viewer-toolbar">
-        <adf-toolbar-title>
-
-            <ng-container *ngIf="allowLeftSidebar">
-                <button mat-icon-button
-                        [attr.aria-expanded]="showLeftSidebar"
-                        [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
-                        title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
-                        data-automation-id="adf-toolbar-left-sidebar"
-                        [color]="showLeftSidebar ? 'accent' : null"
-                        (click)="toggleLeftSidebar()">
-                    <mat-icon>info_outline</mat-icon>
-                </button>
-            </ng-container>
-
-            <button *ngIf="allowGoBack"
-                    class="adf-viewer-close-button"
-                    data-automation-id="adf-toolbar-back"
-                    [attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"
-                    mat-icon-button
-                    title="{{ 'ADF_VIEWER.ACTIONS.CLOSE' | translate }}"
-                    (click)="onBackButtonClick()">
-                <mat-icon>close</mat-icon>
-            </button>
-        </adf-toolbar-title>
-
-        <div fxFlex="1 1 auto"
-             class="adf-viewer__file-title">
-            <button *ngIf="allowNavigate && canNavigateBefore"
-                    data-automation-id="adf-toolbar-pref-file"
-                    mat-icon-button
-                    [attr.aria-label]="'ADF_VIEWER.ACTIONS.PREV_FILE' | translate"
-                    title="{{ 'ADF_VIEWER.ACTIONS.PREV_FILE' | translate }}"
-                    (click)="onNavigateBeforeClick($event)">
-                <mat-icon>navigate_before</mat-icon>
-            </button>
-            <img class="adf-viewer__mimeicon"
-                 [alt]="mimeType"
-                 [src]="mimeType | adfMimeTypeIcon"
-                 data-automation-id="adf-file-thumbnail">
-            <span class="adf-viewer__display-name"
-                  id="adf-viewer-display-name">{{ fileName }}</span>
-            <button *ngIf="allowNavigate && canNavigateNext"
-                    data-automation-id="adf-toolbar-next-file"
-                    mat-icon-button
-                    [attr.aria-label]="'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate"
-                    title="{{ 'ADF_VIEWER.ACTIONS.NEXT_FILE' | translate }}"
-                    (click)="onNavigateNextClick($event)">
-                <mat-icon>navigate_next</mat-icon>
-            </button>
-        </div>
-
-        <ng-content select="adf-viewer-toolbar-actions"></ng-content>
-
-        <ng-container *ngIf="mnuOpenWith"
-                      data-automation-id='adf-toolbar-custom-btn'>
-            <button id="adf-viewer-openwith"
-                    mat-button
-                    [matMenuTriggerFor]="mnuOpenWith"
-                    data-automation-id="adf-toolbar-open-with">
-                <span>{{ 'ADF_VIEWER.ACTIONS.OPEN_WITH' | translate }}</span>
-                <mat-icon>arrow_drop_down</mat-icon>
-            </button>
-            <mat-menu #mnuOpenWith="matMenu"
-                      [overlapTrigger]="false">
-                <ng-content select="adf-viewer-open-with"></ng-content>
-            </mat-menu>
-        </ng-container>
-
-        <adf-toolbar-divider></adf-toolbar-divider>
-
-        <button id="adf-viewer-download"
-                *ngIf="allowDownload"
-                mat-icon-button
-                [attr.aria-label]="'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate"
-                title="{{ 'ADF_VIEWER.ACTIONS.DOWNLOAD' | translate }}"
-                data-automation-id="adf-toolbar-download"
-                [adfNodeDownload]="nodeEntry"
-                [version]="versionEntry">
-            <mat-icon>file_download</mat-icon>
-        </button>
-
-        <button id="adf-viewer-print"
-                *ngIf="allowPrint"
-                mat-icon-button
-                [attr.aria-label]="'ADF_VIEWER.ACTIONS.PRINT' | translate"
-                title="{{ 'ADF_VIEWER.ACTIONS.PRINT' | translate }}"
-                data-automation-id="adf-toolbar-print"
-                (click)="printContent()">
-            <mat-icon>print</mat-icon>
-        </button>
-
-        <button id="adf-viewer-fullscreen"
-                *ngIf="viewerType !== 'media' && allowFullScreen"
-                mat-icon-button
-                [attr.aria-label]="'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate"
-                title="{{ 'ADF_VIEWER.ACTIONS.FULLSCREEN' | translate }}"
-                data-automation-id="adf-toolbar-fullscreen"
-                (click)="enterFullScreen()">
-            <mat-icon>fullscreen</mat-icon>
-        </button>
-
-        <ng-container *ngIf="allowRightSidebar">
-            <adf-toolbar-divider></adf-toolbar-divider>
-
-            <button mat-icon-button
-                    [attr.aria-expanded]="showRightSidebar"
-                    [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
-                    title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
-                    data-automation-id="adf-toolbar-sidebar"
-                    [color]="showRightSidebar ? 'accent' : null"
-                    (click)="toggleSidebar()">
-                <mat-icon>info_outline</mat-icon>
-            </button>
-
-        </ng-container>
-
-        <ng-container *ngIf="mnuMoreActions">
-            <button id="adf-viewer-moreactions"
-                    mat-icon-button
-                    [matMenuTriggerFor]="mnuMoreActions"
-                    [attr.aria-label]="'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate"
-                    title="{{ 'ADF_VIEWER.ACTIONS.MORE_ACTIONS' | translate }}"
-                    data-automation-id="adf-toolbar-more-actions">
-                <mat-icon>more_vert</mat-icon>
-            </button>
-            <mat-menu #mnuMoreActions="matMenu"
-                      [overlapTrigger]="false">
-                <ng-content select="adf-viewer-more-actions"></ng-content>
-            </mat-menu>
-        </ng-container>
-
-    </adf-toolbar>
-</ng-container>
-
-
-<adf-viewer
-    (submitFile)="onSubmitFile($event)"
-    (print)="onPrintContent($event)"
-    [viewerType]="viewerType"
-    [fileName]="fileName"
-    [isLoading]="isLoading"
-    [allowGoBack]="allowGoBack"
-    [overlayMode]="overlayMode"
-    [urlFile]="urlFileContent"
->
-
-</adf-viewer>

lib/core/src/lib/viewer/components/img-viewer.component.html

@@ -13,7 +13,7 @@
             <mat-icon>zoom_out</mat-icon>
         </button>
 
-        <div class="adf-viewer__toolbar-page-scale" data-automation-id="adf-page-scale">
+        <div class="adf-image-viewer__toolbar-page-scale" data-automation-id="adf-page-scale">
             {{ currentScaleText }}
         </div>
 

lib/core/src/lib/viewer/components/img-viewer.component.scss

@@ -48,5 +48,20 @@
             display: inline-block;
             margin-left: 10px;
         }
+
+    }
+
+    &__toolbar {
+        &-page-scale {
+            cursor: default;
+            width: 79px;
+            height: 24px;
+            font-size: var(--theme-body-1-font-size);
+            border: 1px solid var(--theme-border-color);
+            text-align: center;
+            line-height: 24px;
+            margin-left: 4px;
+            margin-right: 4px;
+        }
     }
 }

lib/core/src/lib/viewer/components/img-viewer.component.ts

@@ -79,7 +79,7 @@ export class ImgViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
 
     initializeScaling() {
-        const scaling = this.appConfigService.get<number>('adf-viewer.image-viewer-scaling', undefined) / 100;
+        const scaling = this.appConfigService.get<number>('adf-viewer-render.image-viewer-scaling', undefined) / 100;
         if (scaling) {
             this.scale = scaling;
         }

lib/core/src/lib/viewer/components/media-player.component.html

@@ -1,4 +1,4 @@
 <video controls [ngClass]="{'adf-audio-file': mimeType && mimeType.startsWith('audio')}">
-    <source [src]="urlFile" [type]="mimeType" (error)="onMediaPlayerError()"/>
+    <source [src]="urlFile" [type]="mimeType" (error)="onMediaPlayerError($event)"/>
     <track *ngFor="let track of tracks" [kind]="track.kind" [label]="track.label" [srclang]="track.srclang" [src]="track.src"/>
 </video>

lib/core/src/lib/viewer/components/media-player.component.ts

@@ -23,7 +23,7 @@ import { Track } from '../models/viewer.model';
     selector: 'adf-media-player',
     templateUrl: './media-player.component.html',
     styleUrls: ['./media-player.component.scss'],
-    host: { class: 'adf-media-player' },
+    host: {class: 'adf-media-player'},
     encapsulation: ViewEncapsulation.None
 })
 export class MediaPlayerComponent implements OnChanges {
@@ -54,7 +54,7 @@ export class MediaPlayerComponent implements OnChanges {
 
     ngOnChanges(changes: SimpleChanges) {
         const blobFile = changes['blobFile'];
-       // const nodeId = changes['nodeId'];
+        // const nodeId = changes['nodeId'];
 
         if (blobFile && blobFile.currentValue) {
             this.urlFile = this.contentService.createTrustedUrl(this.blobFile);
@@ -70,7 +70,7 @@ export class MediaPlayerComponent implements OnChanges {
         }
     }
 
-    onMediaPlayerError() {
+    onMediaPlayerError(event: any) {
-        this.error.emit();
+        this.error.emit(event);
     }
 }

lib/core/src/lib/viewer/components/pdf-viewer-host.component.scss

@@ -593,8 +593,6 @@
         }
     }
 
-
-
     .adf-hidden, [hidden] {
         display: none !important;
     }

lib/core/src/lib/viewer/components/pdf-viewer.component.html

@@ -82,7 +82,7 @@
             <span>{{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}</span>
         </div>
 
-        <div class="adf-viewer__toolbar-page-scale" data-automation-id="adf-page-scale">
+        <div class="adf-pdf-viewer__toolbar-page-scale" data-automation-id="adf-page-scale">
             {{ currentScaleText }}
         </div>
 

lib/core/src/lib/viewer/components/pdf-viewer.component.scss

@@ -1,8 +1,3 @@
-.adf-viewer-content-container {
-    width: 100%;
-    height: 100%;
-}
-
 .adf-pdf-viewer {
     width: 100%;
     height: 100%;
@@ -21,6 +16,54 @@
         background-color: rgba(0, 0, 0, 0.12);
     }
 
+    &__thumbnails {
+        width: 180px;
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        background: #e6e6e6;
+
+        .adf-info-drawer-layout {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            background: #e6e6e6;
+        }
+
+        .adf-info-drawer-layout-header {
+            margin-bottom: 0;
+        }
+
+        .adf-info-drawer-layout-content {
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .adf-info-drawer-content {
+            height: 100%;
+        }
+
+        .adf-info-drawer-layout-content > *:last-child {
+            height: 100%;
+            overflow: hidden;
+        }
+    }
+
+    &__toolbar {
+        &-page-scale {
+            cursor: default;
+            width: 79px;
+            height: 24px;
+            font-size: var(--theme-body-1-font-size);
+            border: 1px solid var(--theme-border-color);
+            text-align: center;
+            line-height: 24px;
+            margin-left: 4px;
+            margin-right: 4px;
+        }
+    }
+
     .adf-thumbnails-template {
         &__container {
             display: flex;

lib/core/src/lib/viewer/components/pdf-viewer.component.ts

@@ -80,9 +80,6 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
     @Output()
     error = new EventEmitter<any>();
 
-    @Output()
-    close = new EventEmitter<any>();
-
     page: number;
     displayPage: number;
     totalPages: number;
@@ -514,8 +511,6 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
             .afterClosed().subscribe((password) => {
             if (password) {
                 callback(password);
-            } else {
-                this.close.emit();
             }
         });
     }

lib/core/src/lib/viewer/components/viewer-render.component.html

@@ -0,0 +1,95 @@
+<div *ngIf="isLoading"
+     class="adf-viewer-main">
+    <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
+        <div class="adf-viewer-render-content-container">
+            <ng-container *ngIf="isLoading">
+                <div class="adf-viewer-render__loading-screen"
+                     fxFlex="1 1 auto">
+                    <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
+                    <div>
+                        <mat-spinner></mat-spinner>
+                    </div>
+                </div>
+            </ng-container>
+
+        </div>
+    </div>
+</div>
+
+<div *ngIf="!isLoading"
+     class="adf-viewer-main">
+    <div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
+        <div class="adf-viewer-render-content-container" [ngSwitch]="viewerType">
+            <ng-container *ngSwitchCase="'external'">
+                <adf-preview-extension
+                    *ngIf="!!externalViewer"
+                    [id]="externalViewer.component"
+                    [url]="urlFile"
+                    [extension]="externalViewer.fileExtension"
+                    [attr.data-automation-id]="externalViewer.component">
+                </adf-preview-extension>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'pdf'">
+                <adf-pdf-viewer [thumbnailsTemplate]="thumbnailsTemplate"
+                                [allowThumbnails]="allowThumbnails"
+                                [blobFile]="blobFile"
+                                [urlFile]="urlFile"
+                                [fileName]="fileName"
+                                [cacheType]="cacheTypeForContent"
+                                (error)="onUnsupportedFile()">
+
+                </adf-pdf-viewer>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'image'">
+                <adf-img-viewer [urlFile]="urlFile"
+                                [fileName]="fileName"
+                                [blobFile]="blobFile"
+                                (error)="onUnsupportedFile()"
+                                (submit)="onSubmitFile($event)"
+                ></adf-img-viewer>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'media'">
+                <adf-media-player id="adf-mdedia-player"
+                                  [urlFile]="urlFile"
+                                  [mimeType]="mimeType"
+                                  [blobFile]="blobFile"
+                                  [fileName]="fileName"
+                                  (error)="onUnsupportedFile()">
+                </adf-media-player>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'text'">
+                <adf-txt-viewer [urlFile]="urlFile"
+                                [blobFile]="blobFile">
+
+                </adf-txt-viewer>
+            </ng-container>
+
+            <ng-container *ngSwitchCase="'custom'">
+                <ng-container *ngFor="let ext of viewerExtensions">
+                    <adf-preview-extension *ngIf="checkExtensions(ext.fileExtension)"
+                                           [id]="ext.component"
+                                           [url]="urlFile"
+                                           [extension]="extension"
+                                           [attr.data-automation-id]="ext.component">
+                    </adf-preview-extension>
+                </ng-container>
+
+                <span class="adf-viewer-render-custom-content"
+                      *ngFor="let extensionTemplate of extensionTemplates">
+                                <ng-template *ngIf="extensionTemplate.isVisible"
+                                             [ngTemplateOutlet]="extensionTemplate.template"
+                                             [ngTemplateOutletContext]="{ urlFile: urlFile, extension:extension }">
+                                </ng-template>
+                            </span>
+            </ng-container>
+
+            <ng-container *ngSwitchDefault>
+                <adf-viewer-unknown-format></adf-viewer-unknown-format>
+            </ng-container>
+        </div>
+    </div>
+</div>

lib/core/src/lib/viewer/components/viewer-render.component.scss

@@ -0,0 +1,72 @@
+/* stylelint-disable scss/at-extend-no-missing-placeholder */
+.adf-full-screen {
+    width: 100%;
+    height: 100%;
+    background-color: var(--theme-card-bg-color);
+}
+
+.adf-viewer-render {
+
+    &-main {
+        width: 0;
+    }
+
+    &-content-container {
+        display: flex;
+        justify-content: center;
+    }
+
+    .adf-viewer-render-layout-content {
+        @extend .adf-full-screen;
+
+        position: relative;
+        overflow-y: hidden;
+        overflow-x: hidden;
+        z-index: 1;
+        background-color: var(--theme-background-color);
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        flex: 1;
+
+        & > div {
+            display: flex;
+            flex-flow: row wrap;
+            margin: 0 auto;
+            align-items: stretch;
+            height: 93vh;
+            width: 100%;
+        }
+    }
+
+    &-overlay-container {
+        .adf-viewer-render-content {
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 1000;
+        }
+    }
+
+    &__loading-screen {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        height: 85vh;
+
+        .mat-spinner {
+            margin: 0 auto;
+        }
+    }
+
+    &-custom-content {
+        width: 100vw;
+    }
+
+    &-unknown-content {
+        align-items: center;
+        display: flex;
+    }
+}

lib/core/src/lib/viewer/components/viewer-render.component.spec.ts

@@ -24,7 +24,7 @@ import { AlfrescoApiService, RenditionsService } from '../../services';
 import { throwError } from 'rxjs';
 import { EventMock } from '../../mock/event.mock';
 import { RenderingQueueServices } from '../services/rendering-queue.services';
-import { ViewerComponent } from './viewer.component';
+import { ViewerRenderComponent } from './viewer-render.component.ts';
 import { setupTestBed } from '../../testing/setup-test-bed';
 import { NodeEntry, VersionEntry } from '@alfresco/js-api';
 import { CoreTestingModule } from '../../testing/core.testing.module';
@@ -142,17 +142,17 @@ class ViewerWithCustomMoreActionsComponent {
 })
 class DoubleViewerComponent {
     @ViewChild('viewer1')
-    viewer1: ViewerComponent;
+    viewer1: ViewerRenderComponent;
 
     @ViewChild('viewer2')
-    viewer2: ViewerComponent;
+    viewer2: ViewerRenderComponent;
 
 }
 
 describe('ViewerComponent', () => {
 
-    let component: ViewerComponent;
+    let component: ViewerRenderComponent;
-    let fixture: ComponentFixture<ViewerComponent>;
+    let fixture: ComponentFixture<ViewerRenderComponent>;
     let alfrescoApiService: AlfrescoApiService;
     let element: HTMLElement;
     let dialog: MatDialog;
@@ -188,7 +188,7 @@ describe('ViewerComponent', () => {
     });
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(ViewerComponent);
+        fixture = TestBed.createComponent(ViewerRenderComponent);
         element = fixture.nativeElement;
         component = fixture.componentInstance;
 
@@ -241,7 +241,7 @@ describe('ViewerComponent', () => {
             };
             spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]);
 
-            fixture = TestBed.createComponent(ViewerComponent);
+            fixture = TestBed.createComponent(ViewerRenderComponent);
             element = fixture.nativeElement;
             component = fixture.componentInstance;
 
@@ -272,7 +272,7 @@ describe('ViewerComponent', () => {
             ];
             spyOn(extensionService, 'getViewerExtensions').and.returnValue(extensions);
 
-            fixture = TestBed.createComponent(ViewerComponent);
+            fixture = TestBed.createComponent(ViewerRenderComponent);
             element = fixture.nativeElement;
             component = fixture.componentInstance;
 
@@ -294,7 +294,7 @@ describe('ViewerComponent', () => {
             };
             spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]);
 
-            fixture = TestBed.createComponent(ViewerComponent);
+            fixture = TestBed.createComponent(ViewerRenderComponent);
             element = fixture.nativeElement;
             component = fixture.componentInstance;
 
@@ -318,7 +318,7 @@ describe('ViewerComponent', () => {
             };
             spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]);
 
-            fixture = TestBed.createComponent(ViewerComponent);
+            fixture = TestBed.createComponent(ViewerRenderComponent);
             element = fixture.nativeElement;
             component = fixture.componentInstance;
 
@@ -1350,7 +1350,7 @@ describe('ViewerComponent', () => {
     describe('Viewer component - Full Screen Mode - Mocking fixture element', () => {
 
         beforeEach(() => {
-            fixture = TestBed.createComponent(ViewerComponent);
+            fixture = TestBed.createComponent(ViewerRenderComponent);
             element = fixture.nativeElement;
             component = fixture.componentInstance;
 

lib/core/src/lib/viewer/components/viewer-render.component.ts

@@ -20,47 +20,33 @@
 //TODO TO UNDERSTAND THE LEFT AND RIGHT SIDEBAR
 //TODO uncomment media load subtitle
 //TODO rename allowGoBack allow close button
-//TODO prevent momentanus unkown format
+//TODO prevent momentous unknown format
 //TODO null propagation
 //TODO viewer widget specialization in process service cloud
+//TODO Test close dialog password scenario
+//TODO Remove unused CSS
+//TODO FIX documentation
+//TODO Fix core viewer widget
 
 import {
-    Component, ContentChild, EventEmitter, HostListener, ElementRef,
+    Component, EventEmitter,
     Input, OnChanges, Output, TemplateRef,
     ViewEncapsulation, OnInit, OnDestroy
 } from '@angular/core';
-import { BaseEvent } from '../../events';
+import { Subject } from 'rxjs';
-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 { fromEvent, Subject } from 'rxjs';
 import { ViewUtilService } from '../services/view-util.service';
 import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
-import { filter, skipWhile, takeUntil } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
 
 @Component({
-    selector: 'adf-viewer',
+    selector: 'adf-viewer-render',
-    templateUrl: './viewer.component.html',
+    templateUrl: './viewer-render.component.html',
-    styleUrls: ['./viewer.component.scss'],
+    styleUrls: ['./viewer-render.component.scss'],
-    host: {class: 'adf-viewer'},
+    host: {class: 'adf-viewer-render'},
     encapsulation: ViewEncapsulation.None,
     providers: [ViewUtilService]
 })
-export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
+export class ViewerRenderComponent implements OnChanges, OnInit, OnDestroy {
-
-    @ContentChild(ViewerToolbarComponent)
-    toolbar: ViewerToolbarComponent;
-
-    @ContentChild(ViewerSidebarComponent)
-    sidebar: ViewerSidebarComponent;
-
-    @ContentChild(ViewerOpenWithComponent)
-    mnuOpenWith: ViewerOpenWithComponent;
-
-    @ContentChild(ViewerMoreActionsComponent)
-    mnuMoreActions: ViewerMoreActionsComponent;
 
     /** If you want to load an external file that does not come from ACS you
      * can use this URL to specify where to load the file from.
@@ -72,24 +58,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     blobFile: Blob;
 
-    /** If `true` then show the Viewer as a full page over the current content.
-     * Otherwise fit inside the parent div.
-     */
-    @Input()
-    overlayMode = false;
-
-    /** Hide or show the viewer */
-    @Input()
-    showViewer = true;
-
-    /** Toggles downloading. */
-    @Input()
-    allowDownload = true;
-
-    /** Toggles printing. */
-    @Input()
-    allowPrint = false;
-
     /** Toggles the 'Full Screen' feature. */
     @Input()
     allowFullScreen = true;
@@ -131,18 +99,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     @Input()
     isLoading = false;
 
-    /** Emitted when user clicks the 'Back' button. */
-    @Output()
-    goBack = new EventEmitter<BaseEvent<any>>();
-
-    /** Emitted when user clicks the 'Print' button. */
-    @Output()
-    print = new EventEmitter<BaseEvent<any>>();
-
-    /** Emitted when the viewer is shown or hidden. */
-    @Output()
-    showViewerChange = new EventEmitter<boolean>();
-
     /** Emitted when the filename extension changes. */
     @Output()
     extensionChange = new EventEmitter<string>();
@@ -152,12 +108,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     submitFile = new EventEmitter<Blob>();
 
     extensionTemplates: { template: TemplateRef<any>; isVisible: boolean }[] = [];
-    urlFileContent: string;
-    otherMenu: any;
     extension: string;
-    // sidebarRightTemplateContext: { node: Node } = { node: null };
-    // sidebarLeftTemplateContext: { node: Node } = { node: null };
-    fileTitle: string;
 
     /**
      * Returns a list of the active Viewer content extensions.
@@ -182,22 +133,16 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         return this._externalViewer;
     }
 
-    // readOnly = true;
-
     cacheTypeForContent = '';
 
     private onDestroy$ = new Subject<boolean>();
-    private shouldCloseViewer = true;
-    private keyDown$ = fromEvent<KeyboardEvent>(document, 'keydown');
 
     constructor(private viewUtilService: ViewUtilService,
                 private extensionService: AppExtensionService,
-                private el: ElementRef,
                 public dialog: MatDialog) {
     }
 
     ngOnInit() {
-        this.closeOverlayManager();
         this.cacheTypeForContent = '';
     }
 
@@ -207,16 +152,14 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     }
 
     ngOnChanges() {
-        if (this.showViewer) {
+        this.isLoading = true;
-            this.isLoading = true;
 
-            if (this.blobFile) {
+        if (this.blobFile) {
-                this.setUpBlobData();
+            this.setUpBlobData();
-                this.isLoading = false;
+            this.isLoading = false;
-            } else if (this.urlFile) {
+        } else if (this.urlFile) {
-                this.setUpUrlFile();
+            this.setUpUrlFile();
-                this.isLoading = false;
+            this.isLoading = false;
-            }
         }
     }
 
@@ -224,91 +167,23 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         this.mimeType = this.blobFile.type;
         this.viewerType = this.viewUtilService.getViewerTypeByMimeType(this.mimeType);
 
-        this.allowDownload = false;
-        // TODO: wrap blob into the data url and allow downloading
-
         this.extensionChange.emit(this.mimeType);
         this.scrollTop();
     }
 
     private setUpUrlFile() {
         this.fileName = this.fileName ? this.fileName : this.viewUtilService.getFilenameFromUrl(this.urlFile);
-        this.extension = this.viewUtilService.getFileExtension(this.fileTitle);
+        this.extension = this.viewUtilService.getFileExtension(this.fileName);
-        this.urlFileContent = this.urlFile;
         this.viewerType = this.viewerType === 'unknown' ? this.viewUtilService.getViewerType(this.extension, this.mimeType) : this.viewerType;
 
         this.extensionChange.emit(this.extension);
         this.scrollTop();
     }
 
-
     scrollTop() {
         window.scrollTo(0, 1);
     }
 
-    onBackButtonClick() {
-        this.close();
-    }
-
-
-    /**
-     * close the viewer
-     */
-    close() {
-        if (this.otherMenu) {
-            this.otherMenu.hidden = false;
-        }
-        this.showViewer = false;
-        this.showViewerChange.emit(this.showViewer);
-    }
-
-
-    /**
-     * Keyboard event listener
-     *
-     * @param  event
-     */
-    @HostListener('document:keyup', ['$event'])
-    handleKeyboardEvent(event: KeyboardEvent) {
-        if (event && event.defaultPrevented) {
-            return;
-        }
-
-        const key = event.keyCode;
-
-        // Ctrl+F
-        if (key === 70 && event.ctrlKey) {
-            event.preventDefault();
-            this.enterFullScreen();
-        }
-    }
-
-    printContent() {
-        if (this.allowPrint) {
-            this.print.next(new BaseEvent());
-        }
-    }
-
-    /**
-     * Triggers full screen mode with a main content area displayed.
-     */
-    enterFullScreen(): void {
-        if (this.allowFullScreen) {
-            const container = this.el.nativeElement.querySelector('.adf-viewer__fullscreen-container');
-            if (container) {
-                if (container.requestFullscreen) {
-                    container.requestFullscreen();
-                } else if (container.webkitRequestFullscreen) {
-                    container.webkitRequestFullscreen();
-                } else if (container.mozRequestFullScreen) {
-                    container.mozRequestFullScreen();
-                } else if (container.msRequestFullscreen) {
-                    container.msRequestFullscreen();
-                }
-            }
-        }
-    }
-
     checkExtensions(extensionAllowed) {
         if (typeof extensionAllowed === 'string') {
             return this.extension.toLowerCase() === extensionAllowed.toLowerCase();
@@ -325,28 +200,4 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         this.viewerType = 'unknown';
     }
 
-    private closeOverlayManager() {
-        this.dialog.afterOpened.pipe(
-            skipWhile(() => !this.overlayMode),
-            takeUntil(this.onDestroy$)
-        ).subscribe(() => this.shouldCloseViewer = false);
-
-        this.dialog.afterAllClosed.pipe(
-            skipWhile(() => !this.overlayMode),
-            takeUntil(this.onDestroy$)
-        ).subscribe(() => this.shouldCloseViewer = true);
-
-        this.keyDown$.pipe(
-            skipWhile(() => !this.overlayMode),
-            filter((e: KeyboardEvent) => e.keyCode === 27),
-            takeUntil(this.onDestroy$)
-        ).subscribe((event: KeyboardEvent) => {
-            event.preventDefault();
-
-            if (this.shouldCloseViewer) {
-                this.close();
-            }
-        });
-    }
-
 }

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

@@ -1,142 +0,0 @@
-<div *ngIf="showViewer"
-     class="adf-viewer-container"
-     [class.adf-viewer-overlay-container]="overlayMode"
-     [class.adf-viewer-inline-container]="!overlayMode">
-
-    <div class="adf-viewer-content"
-         fxLayout="column"
-         [cdkTrapFocus]="overlayMode"
-         cdkTrapFocusAutoCapture>
-        <ng-content select="adf-viewer-toolbar"></ng-content>
-
-        <div fxLayout="row"
-             fxFlex="1 1 auto">
-            <ng-container *ngIf="allowRightSidebar && showRightSidebar">
-                <div class="adf-viewer__sidebar"
-                     [ngClass]="'adf-viewer__sidebar__right'"
-                     fxFlexOrder="4"
-                     id="adf-right-sidebar">
-<!--                    <ng-container *ngIf="sidebarRightTemplate">-->
-<!--                        <ng-container *ngTemplateOutlet="sidebarRightTemplate;context:sidebarRightTemplateContext">-->
-<!--                        </ng-container>-->
-<!--                    </ng-container>-->
-                    <ng-content *ngIf="!sidebarRightTemplate"
-                                select="adf-viewer-sidebar"></ng-content>
-                </div>
-            </ng-container>
-
-            <ng-container *ngIf="allowLeftSidebar && showLeftSidebar">
-                <div class="adf-viewer__sidebar"
-                     [ngClass]="'adf-viewer__sidebar__left'"
-                     fxFlexOrder="1"
-                     id="adf-left-sidebar">
-<!--                    <ng-container *ngIf="sidebarLeftTemplate">-->
-<!--                        <ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext">-->
-<!--                        </ng-container>-->
-<!--                    </ng-container>-->
-                    <ng-content *ngIf="!sidebarLeftTemplate"
-                                select="adf-viewer-sidebar"></ng-content>
-                </div>
-            </ng-container>
-
-            <div *ngIf="isLoading"
-                 class="adf-viewer-main"
-                 fxFlexOrder="1"
-                 fxFlex="1 1 auto">
-                <div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
-                    <div class="adf-viewer-content-container">
-                        <ng-container *ngIf="isLoading">
-                            <div class="adf-viewer__loading-screen"
-                                 fxFlex="1 1 auto">
-                                <h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
-                                <div>
-                                    <mat-spinner></mat-spinner>
-                                </div>
-                            </div>
-                        </ng-container>
-
-                    </div>
-                </div>
-            </div>
-
-            <div *ngIf="!isLoading"
-                 class="adf-viewer-main"
-                 fxFlexOrder="1"
-                 fxFlex="1 1 auto">
-                <div class="adf-viewer-layout-content adf-viewer__fullscreen-container">
-                    <div class="adf-viewer-content-container" [ngSwitch]="viewerType">
-                        <ng-container *ngSwitchCase="'external'">
-<!--                            <adf-preview-extension-->
-<!--                                *ngIf="!!externalViewer"-->
-<!--                                [id]="externalViewer.component"-->
-<!--                                [node]="nodeEntry?.entry"-->
-<!--                                [url]="urlFileContent"-->
-<!--                                [extension]="externalViewer.fileExtension"-->
-<!--                                [attr.data-automation-id]="externalViewer.component">-->
-<!--                            </adf-preview-extension>-->
-                        </ng-container>
-
-                        <ng-container *ngSwitchCase="'pdf'">
-                            <adf-pdf-viewer (close)="onBackButtonClick()"
-                                            [thumbnailsTemplate]="thumbnailsTemplate"
-                                            [allowThumbnails]="allowThumbnails"
-                                            [blobFile]="blobFile"
-                                            [urlFile]="urlFileContent"
-                                            [fileName]="fileName"
-                                            [cacheType]="cacheTypeForContent"
-                                            (error)="onUnsupportedFile()"></adf-pdf-viewer>
-                        </ng-container>
-
-                        <ng-container *ngSwitchCase="'image'">
-                            <adf-img-viewer [urlFile]="urlFileContent"
-                                            [fileName]="fileName"
-                                            [blobFile]="blobFile"
-                                            (error)="onUnsupportedFile()"
-                                            (submit)="onSubmitFile($event)"
-                            ></adf-img-viewer>
-                        </ng-container>
-
-                        <ng-container *ngSwitchCase="'media'">
-                            <adf-media-player id="adf-mdedia-player"
-                                              [urlFile]="urlFileContent"
-                                              [mimeType]="mimeType"
-                                              [blobFile]="blobFile"
-                                              [fileName]="fileName"
-                                              (error)="onUnsupportedFile()"></adf-media-player>
-                        </ng-container>
-
-                        <ng-container *ngSwitchCase="'text'">
-                            <adf-txt-viewer [urlFile]="urlFileContent"
-                                            [blobFile]="blobFile"></adf-txt-viewer>
-                        </ng-container>
-
-                        <ng-container *ngSwitchCase="'custom'">
-                            <ng-container *ngFor="let ext of viewerExtensions">
-<!--                                <adf-preview-extension *ngIf="checkExtensions(ext.fileExtension)"-->
-<!--                                                       [id]="ext.component"-->
-<!--                                                       [node]="nodeEntry.entry"-->
-<!--                                                       [url]="urlFileContent"-->
-<!--                                                       [extension]="extension"-->
-<!--                                                       [attr.data-automation-id]="ext.component">-->
-<!--                                </adf-preview-extension>-->
-                            </ng-container>
-
-                            <span class="adf-viewer-custom-content"
-                                  *ngFor="let extensionTemplate of extensionTemplates">
-                                <ng-template *ngIf="extensionTemplate.isVisible"
-                                             [ngTemplateOutlet]="extensionTemplate.template"
-                                             [ngTemplateOutletContext]="{ urlFileContent: urlFileContent, extension:extension }">
-                                </ng-template>
-                            </span>
-                        </ng-container>
-
-                        <ng-container *ngSwitchDefault>
-                            <adf-viewer-unknown-format></adf-viewer-unknown-format>
-                        </ng-container>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </div>
-</div>

lib/core/src/lib/viewer/components/viewer.component.scss

@@ -1,205 +0,0 @@
-/* stylelint-disable scss/at-extend-no-missing-placeholder */
-.adf-full-screen {
-    width: 100%;
-    height: 100%;
-    background-color: var(--theme-card-bg-color);
-}
-
-.adf-viewer {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-
-    .mat-toolbar {
-        color: var(--theme-text-color);
-
-        .adf-toolbar-title {
-            width: auto;
-        }
-    }
-
-    &-main {
-        width: 0;
-    }
-
-    &__mimeicon {
-        vertical-align: middle;
-        height: 18px;
-        width: 18px;
-    }
-
-    &-toolbar {
-        .mat-toolbar {
-            background-color: var(--theme-card-bg-bold-color);
-        }
-    }
-
-    &__file-title {
-        text-align: center;
-    }
-
-    &__display-name {
-        font-size: var(--theme-subheading-2-font-size);
-        opacity: 0.87;
-        line-height: 1.5;
-        letter-spacing: -0.4px;
-        font-weight: normal;
-        font-style: normal;
-        font-stretch: normal;
-        max-width: 400px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        display: inline-block;
-        vertical-align: middle;
-        color: var(--theme-text-fg-color);
-    }
-
-    &-container {
-        .adf-viewer-layout-content {
-            @extend .adf-full-screen;
-
-            position: relative;
-            overflow-y: hidden;
-            overflow-x: hidden;
-            z-index: 1;
-            background-color: var(--theme-background-color);
-            display: flex;
-            flex-direction: row;
-            /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-            flex-wrap: wrap;
-            flex: 1;
-
-            & > div {
-                display: flex;
-                flex-flow: row wrap;
-                margin: 0 auto;
-                align-items: stretch;
-                height: 100%;
-            }
-        }
-
-        .adf-viewer-layout {
-            @extend .adf-full-screen;
-
-            display: flex;
-            flex-direction: row;
-            overflow-y: auto;
-            overflow-x: hidden;
-            position: relative;
-        }
-
-        .adf-viewer-content {
-            @extend .adf-full-screen;
-
-            flex: 1;
-
-            & > div {
-                height: 0; // Firefox
-            }
-        }
-    }
-
-    &-overlay-container {
-        .adf-viewer-content {
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 1000;
-        }
-    }
-
-    &-inline-container {
-        @extend .adf-full-screen;
-    }
-
-    &-content-container {
-        display: flex;
-        justify-content: center;
-    }
-
-    &-custom-content {
-        width: 100vw;
-    }
-
-    &-unknown-content {
-        align-items: center;
-        display: flex;
-    }
-
-    &__loading-screen {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        height: 85vh;
-
-        .mat-spinner {
-            margin: 0 auto;
-        }
-    }
-
-    &__sidebar {
-        width: 350px;
-        display: block;
-        padding: 0;
-        background-color: var(--theme-background-color);
-        box-shadow: 0 2px 4px 0 var(--theme-text-fg-shadow-color);
-        overflow: auto;
-
-        &__right {
-            border-left: 1px solid var(--theme-border-color);
-        }
-
-        &__left {
-            border-right: 1px solid var(--theme-border-color);
-        }
-    }
-
-    &__thumbnails {
-        width: 180px;
-        display: flex;
-        flex-direction: column;
-        padding: 0;
-        background: #e6e6e6;
-
-        .adf-info-drawer-layout {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            background: #e6e6e6;
-        }
-
-        .adf-info-drawer-layout-header {
-            margin-bottom: 0;
-        }
-
-        .adf-info-drawer-layout-content {
-            padding: 0;
-            height: 100%;
-            overflow: hidden;
-        }
-
-        .adf-info-drawer-content {
-            height: 100%;
-        }
-
-        .adf-info-drawer-layout-content > *:last-child {
-            height: 100%;
-            overflow: hidden;
-        }
-    }
-
-    &__toolbar {
-        &-page-scale {
-            cursor: default;
-            width: 79px;
-            height: 24px;
-            font-size: var(--theme-body-1-font-size);
-            border: 1px solid var(--theme-border-color);
-            text-align: center;
-            line-height: 24px;
-            margin-left: 4px;
-            margin-right: 4px;
-        }
-    }
-}

lib/core/src/lib/viewer/directives/viewer-extension.directive.spec.ts

@@ -19,7 +19,7 @@ import { Location } from '@angular/common';
 import { SpyLocation } from '@angular/common/testing';
 import { ChangeDetectorRef, ElementRef } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { ViewerComponent } from '../components/viewer.component';
+import { ViewerRenderComponent } from '../components/viewer-render.component.ts';
 import { ViewerExtensionDirective } from './viewer-extension.directive';
 import { setupTestBed } from '../../testing/setup-test-bed';
 import { CoreTestingModule } from '../../testing/core.testing.module';
@@ -43,7 +43,7 @@ describe('ExtensionViewerDirective', () => {
             { provide: Location, useClass: SpyLocation },
             ViewerExtensionDirective,
             {provide: ElementRef, useClass: MockElementRef},
-            ViewerComponent,
+            ViewerRenderComponent,
             { provide: ChangeDetectorRef, useValue: { detectChanges: () => {} } }
         ]
     });

lib/core/src/lib/viewer/directives/viewer-extension.directive.ts

@@ -16,7 +16,7 @@
  */
 
 import { AfterContentInit, ContentChild, Directive, Input, TemplateRef, OnDestroy } from '@angular/core';
-import { ViewerComponent } from '../components/viewer.component';
+import { ViewerRenderComponent } from '../components/viewer-render.component';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -41,7 +41,7 @@ export class ViewerExtensionDirective implements AfterContentInit, OnDestroy {
 
     private onDestroy$ = new Subject<boolean>();
 
-    constructor(private viewerComponent: ViewerComponent) {
+    constructor(private viewerComponent: ViewerRenderComponent) {
     }
 
     ngAfterContentInit() {

lib/core/src/lib/viewer/public-api.ts

@@ -16,7 +16,6 @@
  */
 
 export * from './services/view-util.service';
-export * from './components/viewer.component';
 export * from './components/img-viewer.component';
 export * from './components/media-player.component';
 export * from './components/pdf-viewer-password-dialog';
@@ -31,7 +30,7 @@ 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 './components/viewer-render.component';
 
 export * from './directives/viewer-extension.directive';
 

lib/core/src/lib/viewer/services/view-util.service.ts

@@ -17,7 +17,7 @@
 
 import { Injectable } from '@angular/core';
 import { LogService } from '../../services/log.service';
-import { RenditionViewerService } from "./rendition-viewer.service";
+import { RenditionViewerService } from "../../../../../content-services/src/lib/viewer/services/rendition-viewer.service";
 import { AppExtensionService, ViewerExtensionRef } from '@alfresco/adf-extensions';
 
 @Injectable({

lib/core/src/lib/viewer/viewer.module.ts

@@ -38,12 +38,11 @@ import { ViewerMoreActionsComponent } from './components/viewer-more-actions.com
 import { ViewerOpenWithComponent } from './components/viewer-open-with.component';
 import { ViewerSidebarComponent } from './components/viewer-sidebar.component';
 import { ViewerToolbarComponent } from './components/viewer-toolbar.component';
-import { ViewerComponent } from './components/viewer.component';
+import { ViewerRenderComponent } from './components/viewer-render.component';
 import { ViewerExtensionDirective } from './directives/viewer-extension.directive';
 import { ViewerToolbarActionsComponent } from './components/viewer-toolbar-actions.component';
 import { DirectiveModule } from '../directives/directive.module';
 import { A11yModule } from '@angular/cdk/a11y';
-import { AlfrescoViewerComponent } from "./components/alfresco-viewer.component";
 
 @NgModule({
     imports: [
@@ -61,8 +60,7 @@ import { AlfrescoViewerComponent } from "./components/alfresco-viewer.component"
     ],
     declarations: [
         PdfPasswordDialogComponent,
-        ViewerComponent,
+        ViewerRenderComponent,
-        AlfrescoViewerComponent,
         ImgViewerComponent,
         TxtViewerComponent,
         MediaPlayerComponent,
@@ -78,8 +76,7 @@ import { AlfrescoViewerComponent } from "./components/alfresco-viewer.component"
         ViewerToolbarActionsComponent
     ],
     exports: [
-        ViewerComponent,
+        ViewerRenderComponent,
-        AlfrescoViewerComponent,
         ImgViewerComponent,
         TxtViewerComponent,
         MediaPlayerComponent,

lib/extensions/src/lib/components/viewer/preview-extension.component.ts

@@ -27,7 +27,6 @@ import {
     OnChanges
 } from '@angular/core';
 import { ExtensionService } from '../../services/extension.service';
-import { Node } from '@alfresco/js-api';
 
 @Component({
     selector: 'adf-preview-extension',
@@ -51,10 +50,6 @@ export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy {
     @Input()
     extension: string;
 
-    /** Node containing the content to display. */
-    @Input()
-    node: Node;
-
     private componentRef: ComponentRef<any>;
 
     constructor(
@@ -95,7 +90,6 @@ export class PreviewExtensionComponent implements OnInit, OnChanges, OnDestroy {
         if (this.componentRef && this.componentRef.instance) {
             const instance = this.componentRef.instance;
 
-            instance.node = this.node;
             instance.url = this.url;
             instance.extension = this.extension;
         }