AAE-25571 Add title to above filename (#11048)

docs/core/components/viewer.component.md

@@ -61,7 +61,7 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 ### Properties
 
 | Name                        | Type | Default value | Description                                                                                                                             |
-| ---- | ---- | ------------- | ----------- |
+|-----------------------------| ---- | ------------- |-----------------------------------------------------------------------------------------------------------------------------------------|
 | allowFullScreen             | `boolean` | true | Toggles the 'Full Screen' feature.                                                                                                      |
 | allowGoBack                 | `boolean` | true | Allows `back` navigation.                                                                                                               |
 | closeButtonPosition         | `CloseButtonPosition` | `left` | Set close button position right/left.                                                                                                   |
@@ -73,6 +73,7 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
 | canNavigateBefore           | `boolean` | true | Toggles the "before" ("<") button. Requires `allowNavigate` to be enabled.                                                           |
 | canNavigateNext             | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled.                                                                  |
 | fileName                    | `string` |  | Override Content filename.                                                                                                              |
+| title                       | `string` |  | Override Content title.                                                                                                                 |
 | mimeType                    | `string` |  | Overload mimeType                                                                                                                       |
 | overlayMode                 | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div.                            |
 | readOnly                    | `boolean` | true | Enable when where is possible the editing functionalities                                                                               |

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">
+                    @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

@@ -50,6 +50,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(() => {
@@ -139,25 +140,25 @@ describe('ViewerComponent', () => {
         });
     });
 
-    describe('File Name Display Tests', () => {
+    describe('Display values Tests', () => {
-        describe('displayFileName method', () => {
+        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);
@@ -167,7 +168,7 @@ describe('ViewerComponent', () => {
                 component.fileName = '';
                 fixture.detectChanges();
 
-                expect(component.getDisplayFileName()).toBe('');
+                expect(component.getDisplayTruncatedValue('')).toBe('');
                 expect(getFileName()).toBe('');
             });
         });
@@ -197,6 +198,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

@@ -308,19 +308,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 {
@@ -474,12 +482,11 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
         this.clearDownloadPromptTimeouts();
     }
 
-    getDisplayFileName(): string {
+    getDisplayTruncatedValue(value: string): string {
-        const fullName = (this.fileNameWithoutExtension || '') + (this.fileExtension || '');
         const maxLength = 50;
 
-        if (fullName.length <= maxLength) {
+        if (value.length <= maxLength) {
-            return fullName;
+            return value;
         }
 
         const amountOfTruncateDots = 5;
@@ -487,8 +494,8 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
         const endLength = 8;
         const startLength = availableSpace - endLength;
 
-        const start = fullName.substring(0, startLength);
+        const start = value.substring(0, startLength);
-        const end = fullName.substring(fullName.length - endLength);
+        const end = value.substring(value.length - endLength);
         return start + '.....' + end;
     }