[MNT-25123] Fixed incorrectly displayed some annotations (#11662)

lib/core/src/lib/viewer/components/mock/pdfjs-lib.mock.ts

@@ -15,18 +15,7 @@
  * limitations under the License.
  */
 
-export default {
+export const annotations = [
-    GlobalWorkerOptions: {},
-    getDocument: jasmine.createSpy('getDocument').and.callFake(() => ({
-        loadingTask: () => ({
-            destroy: () => Promise.resolve()
-        }),
-        promise: new Promise((resolve) => {
-            resolve({
-                numPages: 6,
-                getPage: () =>
-                    Promise.resolve({
-                        getAnnotations: () => [
     {
         subtype: 'Text',
         name: 'NoIcon',
@@ -40,7 +29,19 @@ export default {
         modificationDate: "D:20260202104106Z00'00",
         popupRef: 'R1'
     }
-                        ]
+];
+export default {
+    GlobalWorkerOptions: {},
+    getDocument: jasmine.createSpy('getDocument').and.callFake(() => ({
+        loadingTask: () => ({
+            destroy: () => Promise.resolve()
+        }),
+        promise: new Promise((resolve) => {
+            resolve({
+                numPages: 6,
+                getPage: () =>
+                    Promise.resolve({
+                        getAnnotations: () => annotations
                     })
             });
         })

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

@@ -189,7 +189,7 @@
             outline-color: var(--adf-pdf-viewer-annotation-tooltip-color);
             background-color: color-mix(in srgb, var(--adf-pdf-viewer-annotation-tooltip-color) 30%, var(--theme-primary-color-default-contrast));
             margin-left: 40px;
-            width: fit-content;
+            width: max-content;
             max-width: 300px;
             opacity: 0;
             pointer-events: none;
@@ -202,6 +202,9 @@
         .textAnnotation {
             &:hover,
             &:focus-within {
+                /* stylelint-disable-next-line declaration-no-important */
+                z-index: 9999 !important; // important is required because pdfjs-dist adds style attribute to that tag
+
                 .adf-pdf-viewer-annotation-tooltip.popup {
                     opacity: 1;
                     pointer-events: auto;

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

@@ -27,7 +27,7 @@ import { UnitTestingUtils, provideCoreAuthTesting } from '../../../testing';
 import { RenderingQueueServices } from '../../services/rendering-queue.services';
 import { PdfThumbListComponent } from '../pdf-viewer-thumbnails/pdf-viewer-thumbnails.component';
 import { PDFJS_MODULE, PDFJS_VIEWER_MODULE, PdfViewerComponent } from './pdf-viewer.component';
-import pdfjsLibraryMock from '../mock/pdfjs-lib.mock';
+import pdfjsLibraryMock, { annotations } from '../mock/pdfjs-lib.mock';
 import { TranslateService } from '@ngx-translate/core';
 
 declare const pdfjsLib: any;
@@ -637,6 +637,12 @@ describe('Test PdfViewer - User interaction', () => {
 
         const getAnnotationPopupElement = (): HTMLElement => annotationElement.querySelector('.adf-pdf-viewer-annotation-tooltip');
 
+        const getAnnotationTitle = (): string => annotationElement.querySelector('.title').textContent;
+
+        const getAnnotationDate = (): string => annotationElement.querySelector('.popupDate')?.textContent;
+
+        const getAnnotationContent = (): string => annotationElement.querySelector('.popupContent').textContent;
+
         beforeEach(() => {
             documentContainer = document.createElement('div');
             annotationImageElement = document.createElement('img');
@@ -659,13 +665,18 @@ describe('Test PdfViewer - User interaction', () => {
 
         it('should have corrected content in annotation popup', fakeAsync(() => {
             dispatchAnnotationLayerRenderedEvent();
-            expect(annotationElement.querySelector('.title').textContent).toBe('Annotation title');
+            expect(getAnnotationTitle()).toBe('Annotation title');
-            // Date format can vary by locale, so we just check it contains the expected date components
+            expect(getAnnotationDate()).toBe('2/2/2026, 10:41:06 AM');
-            const dateText = annotationElement.querySelector('.popupDate').textContent;
+            expect(getAnnotationContent()).toBe('Annotation contents');
-            expect(dateText).toContain('2026');
+            expect(getAnnotationPopupElement()).toBeDefined();
-            expect(dateText).toContain('02');
+        }));
-            expect(dateText).toContain('10:41:06');
+
-            expect(annotationElement.querySelector('.popupContent').textContent).toBe('Annotation contents');
+        it('should have corrected content in annotation popup if there is no modification date', fakeAsync(() => {
+            annotations[0].modificationDate = null;
+            dispatchAnnotationLayerRenderedEvent();
+            expect(getAnnotationTitle()).toBe('Annotation title');
+            expect(getAnnotationDate()).toBeUndefined();
+            expect(getAnnotationContent()).toBe('Annotation contents');
             expect(getAnnotationPopupElement()).toBeDefined();
         }));
 

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

@@ -697,13 +697,18 @@ export class PdfViewerComponent implements OnChanges, OnDestroy {
     private createAnnotationPopupHeader(annotation: any): HTMLSpanElement {
         const headerElement = document.createElement('span');
         const titleElement = document.createElement('span');
-        const dateElement = document.createElement('time');
+        let dateElement: HTMLTimeElement;
         titleElement.innerText = annotation.titleObj.str;
         titleElement.classList.add('title');
+        headerElement.classList.add('header');
+        if (annotation.modificationDate) {
+            dateElement = document.createElement('time');
             dateElement.innerText = PDFDateString.toDateObject(annotation.modificationDate).toLocaleString();
             dateElement.classList.add('popupDate');
-        headerElement.classList.add('header');
             headerElement.append(titleElement, dateElement);
+        } else {
+            headerElement.append(titleElement);
+        }
         return headerElement;
     }