[ACS-5190] document name text alignement and long name trim issue (#10715)

* [ACS-5190] Fixed trimming issue

* [ACS-5190] Unit tests

* [ACS-5190] Prevent issues when filename is not defined

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

@@ -46,8 +46,12 @@
                          [alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
                          [src]="mimeTypeIconUrl"
                          data-automation-id="adf-file-thumbnail">
-                    <span class="adf-viewer__display-name"
+                    <div class="adf-viewer__display-name"
-                          id="adf-viewer-display-name">{{ fileName }}</span>
+                         id="adf-viewer-display-name"
+                         [title]="fileName">
+                        <span class="adf-viewer__display-name-without-extension">{{ fileNameWithoutExtension }}</span>
+                        <span class="adf-viewer__display-name-extension">{{ fileExtension }}</span>
+                    </div>
                     <button *ngIf="allowNavigate && canNavigateNext"
                             data-automation-id="adf-toolbar-next-file"
                             mat-icon-button

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

@@ -61,12 +61,17 @@
         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(--adf-theme-foreground-text-color);
+
+        &-without-extension {
+            display: inline-block;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            max-width: 400px;
+            white-space: nowrap;
+            vertical-align: bottom;
+        }
     }
 
     &-container {

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

@@ -51,6 +51,8 @@ describe('ViewerComponent', () => {
     let thumbnailService: ThumbnailService;
     let testingUtils: UnitTestingUtils;
 
+    const getFileName = (): string => testingUtils.getByCSS('#adf-viewer-display-name').nativeElement.textContent;
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [
@@ -122,6 +124,10 @@ describe('ViewerComponent', () => {
     });
 
     describe('File Name Test', () => {
+        const getFileNameWithoutExtension = (): string =>
+            testingUtils.getByCSS('.adf-viewer__display-name-without-extension').nativeElement.textContent;
+        const getExtension = (): string => testingUtils.getByCSS('.adf-viewer__display-name-extension').nativeElement.textContent;
+
         it('should fileName be set by urlFile input if the fileName is not provided as Input', () => {
             component.fileName = '';
             spyOn(viewUtilService, 'getFilenameFromUrl').and.returnValue('fakeFileName.jpeg');
@@ -130,7 +136,9 @@ describe('ViewerComponent', () => {
             component.ngOnChanges(mockSimpleChanges);
             fixture.detectChanges();
 
-            expect(testingUtils.getByCSS('#adf-viewer-display-name').nativeElement.textContent).toEqual('fakeFileName.jpeg');
+            expect(getFileName()).toEqual('fakeFileName.jpeg');
+            expect(getFileNameWithoutExtension()).toBe('fakeFileName.');
+            expect(getExtension()).toBe('jpeg');
         });
 
         it('should set fileName providing fileName input', () => {
@@ -142,7 +150,9 @@ describe('ViewerComponent', () => {
             fixture.detectChanges();
             fixture.detectChanges();
 
-            expect(testingUtils.getByCSS('#adf-viewer-display-name').nativeElement.textContent).toEqual('testFileName.jpg');
+            expect(getFileName()).toEqual('testFileName.jpg');
+            expect(getFileNameWithoutExtension()).toBe('testFileName.');
+            expect(getExtension()).toBe('jpg');
         });
     });
 
@@ -403,7 +413,7 @@ describe('ViewerComponent', () => {
                     component.ngOnChanges(mockSimpleChanges);
                     fixture.detectChanges();
                     await fixture.whenStable();
-                    expect(testingUtils.getByCSS('#adf-viewer-display-name').nativeElement.textContent).toEqual('fake-test-file.pdf');
+                    expect(getFileName()).toEqual('fake-test-file.pdf');
                 });
 
                 it('should Close button be present if overlay mode', async () => {

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

@@ -125,10 +125,6 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     @Input()
     blobFile: Blob;
 
-    /** Override Content filename. */
-    @Input()
-    fileName: string;
-
     /** Hide or show the viewer */
     @Input()
     showViewer = true;
@@ -292,13 +288,37 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
 
     private closeViewer = true;
     private keyDown$ = fromEvent<KeyboardEvent>(document, 'keydown');
-    private isDialogVisible: boolean = false;
+    private isDialogVisible = false;
+    private _fileName: string;
+    private _fileNameWithoutExtension: string;
+    private _fileExtension: string;
+
     public downloadPromptTimer: number;
     public downloadPromptReminderTimer: number;
     public mimeTypeIconUrl: string;
 
     private readonly destroyRef = inject(DestroyRef);
 
+    /** Override Content filename. */
+    @Input()
+    set fileName(fileName: string) {
+        this._fileName = fileName;
+        this._fileExtension = this.viewUtilsService.getFileExtension(this.fileName);
+        this._fileNameWithoutExtension = this.fileName?.replace(new RegExp(`${this.fileExtension}$`), '') || '';
+    }
+
+    get fileName(): string {
+        return this._fileName;
+    }
+
+    get fileExtension(): string {
+        return this._fileExtension;
+    }
+
+    get fileNameWithoutExtension(): string {
+        return this._fileNameWithoutExtension;
+    }
+
     constructor(
         private el: ElementRef,
         public dialog: MatDialog,