[ACS-9250] Adjust viewer to display properly under parent without overlay mode (#10950)

lib/core/src/lib/datatable/data/object-datarow.model.ts

@@ -20,12 +20,14 @@ import { DataRow } from './data-row.model';
 
 // Simple implementation of the DataRow interface.
 export class ObjectDataRow implements DataRow {
-
     constructor(private obj: any, public isSelected: boolean = false, public isSelectable: boolean = true) {
         if (!obj) {
             throw new Error('Object source not found');
         }
+    }
 
+    getSourceObject(): any {
+        return this.obj;
     }
 
     getValue(key: string): any {

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

@@ -64,3 +64,13 @@
         }
     }
 }
+
+.adf-viewer-inline {
+    .adf-image-viewer {
+        height: 100%;
+
+        .adf-image-container {
+            height: 100%;
+        }
+    }
+}

lib/core/src/lib/viewer/components/unknown-format/unknown-format.component.scss

@@ -7,3 +7,7 @@
     justify-content: center;
     color: var(--adf-theme-foreground-text-color);
 }
+
+.adf-viewer-inline .adf-viewer__unknown-format-view {
+    height: 100%;
+}

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

@@ -86,3 +86,19 @@
         display: contents;
     }
 }
+
+.adf-viewer-inline {
+    .adf-viewer-render {
+        &-main-loader {
+            position: unset;
+        }
+
+        &-layout-content > div {
+            height: 100%;
+        }
+
+        &__loading-screen {
+            height: 100%;
+        }
+    }
+}

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

@@ -78,7 +78,9 @@
                     </mat-menu>
                 </ng-container>
 
-                <adf-toolbar-divider />
+                @if (showToolbarDividers) {
+                    <adf-toolbar-divider />
+                }
 
                 <ng-content select="adf-viewer-toolbar-custom-actions" />
 
@@ -123,8 +125,9 @@
                 </ng-container>
 
                 <ng-container *ngIf="allowGoBack && closeButtonPosition === CloseButtonPosition.Right">
-                    <adf-toolbar-divider />
-
+                    @if (showToolbarDividers) {
+                        <adf-toolbar-divider />
+                    }
                     <button class="adf-viewer-close-button"
                             data-automation-id="adf-toolbar-right-back"
                             [attr.aria-label]="'ADF_VIEWER.ACTIONS.CLOSE' | translate"

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

@@ -53,6 +53,18 @@
         }
     }
 
+    &-inline {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        position: unset;
+
+        .adf-viewer__file-title {
+            position: unset;
+            transform: unset;
+        }
+    }
+
     &__display-name {
         font-size: var(--theme-subheading-2-font-size);
         line-height: 1.5;

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, SimpleChanges } from '@angular/core';
+import { Component, DebugElement, SimpleChanges } from '@angular/core';
 import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
@@ -52,6 +52,7 @@ describe('ViewerComponent', () => {
     let testingUtils: UnitTestingUtils;
 
     const getFileName = (): string => testingUtils.getByCSS('#adf-viewer-display-name').nativeElement.textContent;
+    const getDividers = (): DebugElement[] => testingUtils.getAllByCSS('.adf-toolbar-divider');
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -364,6 +365,32 @@ describe('ViewerComponent', () => {
                 done();
             });
         });
+
+        it('should display two toolbar dividers by default when close button is visible', () => {
+            component.allowGoBack = true;
+            component.showToolbar = true;
+            component.closeButtonPosition = CloseButtonPosition.Right;
+            fixture.detectChanges();
+            const dividers = getDividers();
+            expect(dividers.length).toBe(2);
+        });
+
+        it('should display only one toolbar divider when close button is hidden', () => {
+            component.allowGoBack = false;
+            component.showToolbar = true;
+            fixture.detectChanges();
+            const dividers = getDividers();
+            expect(dividers.length).toBe(1);
+        });
+
+        it('should not display any toolbar dividers when showToolbarDividers param is set to false', () => {
+            component.showToolbarDividers = false;
+            component.showToolbar = true;
+            component.allowGoBack = true;
+            fixture.detectChanges();
+            const dividers = getDividers();
+            expect(dividers.length).toBe(0);
+        });
     });
 
     describe('Base component', () => {

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

@@ -23,6 +23,7 @@ import {
     DestroyRef,
     ElementRef,
     EventEmitter,
+    HostBinding,
     HostListener,
     inject,
     Input,
@@ -95,6 +96,11 @@ const DEFAULT_NON_PREVIEW_CONFIG = {
 export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     private thumbnailService = inject(ThumbnailService);
 
+    @HostBinding('class.adf-viewer-inline')
+    get isInline() {
+        return !this.overlayMode;
+    }
+
     @ContentChild(ViewerToolbarComponent)
     toolbar: ViewerToolbarComponent;
 
@@ -248,6 +254,10 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     @Input()
     customError: string = undefined;
 
+    /** Toggles dividers visibility */
+    @Input()
+    showToolbarDividers = true;
+
     /**
      * Enable dialog box to allow user to download the previewed file, in case the preview is not responding for a set period of time.
      */