AAE-25571 Add title to file name (#11027)

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

@@ -46,11 +46,20 @@
                          [alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
                          [src]="mimeTypeIconUrl"
                          data-automation-id="adf-file-thumbnail">
-                    <div class="adf-viewer__display-name"
-                         id="adf-viewer-display-name"
-                         [title]="fileName">
-                        <span>{{ displayName }}</span>
-                    </div>
+                    @if (displayTitle) {
+                        <div class="adf-viewer__title-display-name-container"
+                             id="adf-viewer-title-display-name"
+                             [title]="displayTitle">
+                            <p class="adf-viewer__title-value">{{ displayTitle }}</p>
+                            <p class="adf-viewer__display-name-value">{{ displayName }}</p>
+                        </div>
+                    } @else {
+                        <div class="adf-viewer__display-name"
+                             id="adf-viewer-display-name"
+                             [title]="fileName">
+                            <span>{{ displayName }}</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

@@ -53,6 +53,7 @@
         }
     }
 
+    &__title-display-name-container,
     &__display-name {
         font-size: var(--theme-subheading-2-font-size);
         line-height: 1.5;
@@ -61,6 +62,17 @@
         white-space: nowrap;
     }
 
+    &__display-name-value,
+    &__title-value {
+        margin-top: 0;
+        margin-bottom: 0;
+        text-align: left;
+    }
+
+    &__display-name-value {
+        font-size: var(--theme-body-1-font-size);
+    }
+
     &-container {
         .adf-viewer-layout-content {
             @extend .adf-full-screen;

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

@@ -51,6 +51,7 @@ describe('ViewerComponent', () => {
     let testingUtils: UnitTestingUtils;
 
     const getFileName = (): string => testingUtils.getByCSS('#adf-viewer-display-name').nativeElement.textContent;
+    const getTitle = (): string => testingUtils.getByCSS('.adf-viewer__title-value')?.nativeElement?.textContent;
     const getDividers = (): DebugElement[] => testingUtils.getAllByCSS('.adf-toolbar-divider');
 
     beforeEach(() => {
@@ -140,25 +141,25 @@ describe('ViewerComponent', () => {
         });
     });
 
-    describe('File Name Display Tests', () => {
-        describe('displayFileName method', () => {
+    describe('Display values Tests', () => {
+        describe('getDisplayTruncatedValue method', () => {
             it('should return full filename when total length is 80 characters or less', () => {
                 const fileShortName = 'shortname.txt';
                 component.fileName = fileShortName;
                 fixture.detectChanges();
 
-                expect(component.getDisplayFileName()).toBe(fileShortName);
+                expect(component.getDisplayTruncatedValue(fileShortName)).toBe(fileShortName);
                 expect(getFileName()).toBe(fileShortName);
             });
 
-            it('should truncate filename when total length exceeds 80 characters', () => {
+            it('should truncate filename when total length exceeds 50 characters', () => {
                 const longName =
                     'verylongfilenamethatexceedsmaximumlengthallowedverylongfilenamethatexceedsmaximumlengthallowed.verylongextensionnamethatistoolongverylongextensionnamethatistoolong';
 
                 component.fileName = longName;
                 fixture.detectChanges();
 
-                const result = component.getDisplayFileName();
+                const result = component.getDisplayTruncatedValue(longName);
 
                 expect(result).toContain('.....');
                 expect(result.length).toBe(50);
@@ -168,7 +169,7 @@ describe('ViewerComponent', () => {
                 component.fileName = '';
                 fixture.detectChanges();
 
-                expect(component.getDisplayFileName()).toBe('');
+                expect(component.getDisplayTruncatedValue('')).toBe('');
                 expect(getFileName()).toBe('');
             });
         });
@@ -198,6 +199,37 @@ describe('ViewerComponent', () => {
         });
     });
 
+    describe('displayTitle', () => {
+        it('should return full title when total length is 50 characters or less', () => {
+            const titleShortName = 'Custom mock title';
+            component.title = titleShortName;
+            fixture.detectChanges();
+
+            expect(component.getDisplayTruncatedValue(titleShortName)).toBe(titleShortName);
+            expect(getTitle()).toBe(titleShortName);
+        });
+
+        it('should truncate title when total length exceeds 50 characters', () => {
+            const longTitle =
+                'verylongTitlethatexceedsmaximumlengthallowedverylongTitlethatexceedsmaximumlengthallowedverylongTitlethatexceedsmaximumlengthallowed';
+
+            component.title = longTitle;
+            fixture.detectChanges();
+
+            const result = component.getDisplayTruncatedValue(longTitle);
+
+            expect(result).toContain('.....');
+            expect(result.length).toBe(50);
+        });
+
+        it('should handle empty title', () => {
+            component.title = undefined;
+            fixture.detectChanges();
+
+            expect(getTitle()).toBeFalsy();
+        });
+    });
+
     describe('Viewer Example Component Rendering', () => {
         it('should use custom toolbar', (done) => {
             const customFixture = TestBed.createComponent(ViewerWithCustomToolbarComponent);

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

@@ -307,19 +307,27 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
     private _fileExtension: string;
 
     public displayName: string;
+    public displayTitle: string;
     public downloadPromptTimer: number;
     public downloadPromptReminderTimer: number;
     public mimeTypeIconUrl: string;
 
     private readonly destroyRef = inject(DestroyRef);
 
+    /** Override Content title. */
+    @Input()
+    set title(title: string) {
+        this.displayTitle = title ? this.getDisplayTruncatedValue(title) : '';
+    }
+
     /** 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}$`), '') || '';
-        this.displayName = this.getDisplayFileName();
+        const value = (this.fileNameWithoutExtension || '') + (this.fileExtension || '');
+        this.displayName = this.getDisplayTruncatedValue(value);
     }
 
     get fileName(): string {
@@ -473,12 +481,11 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
         this.clearDownloadPromptTimeouts();
     }
 
-    getDisplayFileName(): string {
-        const fullName = (this.fileNameWithoutExtension || '') + (this.fileExtension || '');
+    getDisplayTruncatedValue(value: string): string {
         const maxLength = 50;
 
-        if (fullName.length <= maxLength) {
-            return fullName;
+        if (value.length <= maxLength) {
+            return value;
         }
 
         const amountOfTruncateDots = 5;
@@ -486,8 +493,8 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
         const endLength = 8;
         const startLength = availableSpace - endLength;
 
-        const start = fullName.substring(0, startLength);
-        const end = fullName.substring(fullName.length - endLength);
+        const start = value.substring(0, startLength);
+        const end = value.substring(value.length - endLength);
         return start + '.....' + end;
     }