fix MEL use tippy

apps/demo/project.json

@@ -25,6 +25,11 @@
           }
         ],
         "styles": [
+          "node_modules/tippy.js/dist/tippy.css",
+          "node_modules/tippy.js/themes/light.css",
+          "node_modules/tippy.js/themes/light-border.css",
+          "node_modules/tippy.js/themes/material.css",
+          "node_modules/tippy.js/themes/translucent.css",
           "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
           "apps/demo/src/styles.css",
           "tailwind.base.css"

libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.html

@@ -1,4 +1,4 @@
 <div class="ml-4 flex flex-row">
-  <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
+  <mat-icon class="material-symbols-outlined min-w-fit">{{ icon }}</mat-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>

libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.html

@@ -1,27 +1,19 @@
-<div
-  *ngIf="metadataQualityDisplay"
-  class="mb-6 metadata-quality"
-  (mouseenter)="showMenu()"
-  (mouseleave)="hideMenu()"
->
-  <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
-    <gn-ui-progress-bar
-      (focus)="showMenu()"
-      (blur)="hideMenu()"
-      tabindex="0"
-      [value]="qualityScore"
-      type="primary"
-    ></gn-ui-progress-bar>
-  </div>
-  <div
-    class="absolute z-10 bg-white border border-black border-opacity-35 rounded-lg shadow-lg p-5 whitespace-nowrap"
-    [class]="isMenuShown ? 'block' : 'hidden'"
-  >
-    <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
-    <gn-ui-metadata-quality-item
-      *ngFor="let e of items"
-      [name]="e.name"
-      [value]="e.value"
-    ></gn-ui-metadata-quality-item>
-  </div>
+<div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
+  <gn-ui-popover [content]="popoverItems" theme="light-border">
+    <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
+      <gn-ui-progress-bar
+        tabindex="0"
+        [value]="qualityScore"
+        type="primary"
+      ></gn-ui-progress-bar>
+    </div>
+  </gn-ui-popover>
 </div>
+<ng-template #popoverItems>
+  <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
+  <gn-ui-metadata-quality-item
+    *ngFor="let e of items"
+    [name]="e.name"
+    [value]="e.value"
+  ></gn-ui-metadata-quality-item>
+</ng-template>

libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.spec.ts

@@ -9,7 +9,7 @@ import {
 } from '@geonetwork-ui/util/i18n'
 import { TranslateModule } from '@ngx-translate/core'
 import { MetadataQualityItemComponent } from '../metadata-quality-item/metadata-quality-item.component'
-import { ProgressBarComponent } from '@geonetwork-ui/ui/widgets'
+import { PopoverComponent, ProgressBarComponent } from '@geonetwork-ui/ui/widgets'
 import { UtilSharedModule } from '@geonetwork-ui/util/shared'
 import { By } from '@angular/platform-browser'
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
@@ -37,6 +37,7 @@ describe('MetadataQualityComponent', () => {
         MetadataQualityComponent,
         MetadataQualityItemComponent,
         ProgressBarComponent,
+        PopoverComponent,
       ],
       imports: [
         UtilSharedModule,
@@ -61,28 +62,6 @@ describe('MetadataQualityComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  it('focus should show menu / blur should hide', () => {
-    const progressBar = fixture.debugElement.query(By.css('gn-ui-progress-bar'))
-    progressBar.nativeElement.focus()
-    expect(component.isMenuShown).toBe(true)
-    progressBar.nativeElement.blur()
-    expect(component.isMenuShown).toBe(false)
-  })
-
-  it('mouseenter should show menu / mouseleave should hide', () => {
-    const metadataQuality = fixture.debugElement.query(
-      By.css('.metadata-quality')
-    )
-
-    const mouseEnterEvent = new Event('mouseenter')
-    metadataQuality.nativeElement.dispatchEvent(mouseEnterEvent)
-    expect(component.isMenuShown).toBe(true)
-
-    const mouseLeaveEvent = new Event('mouseleave')
-    metadataQuality.nativeElement.dispatchEvent(mouseLeaveEvent)
-    expect(component.isMenuShown).toBe(false)
-  })
-
   it('content', () => {
     expect(component.metadata?.contacts[0]?.email).toBe('[email protected]')
   })
@@ -94,6 +73,11 @@ describe('MetadataQualityComponent', () => {
   })
 
   it('should display sub-components with correct inputs', () => {
+    const popoverElement = fixture.debugElement.query(
+      By.directive(PopoverComponent)
+    );
+    popoverElement.triggerEventHandler('mouseenter', null);
+    fixture.detectChanges();
     const metadataItems = fixture.debugElement.queryAll(
       By.directive(MetadataQualityItemComponent)
     )

libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.stories.ts

@@ -9,14 +9,19 @@ import {
 import { TranslateModule } from '@ngx-translate/core'
 import { MetadataQualityItemComponent } from '../metadata-quality-item/metadata-quality-item.component'
 import { ProgressBarComponent } from '@geonetwork-ui/ui/widgets'
+import { PopoverComponent } from '@geonetwork-ui/ui/widgets'
 import { MatIconModule } from '@angular/material/icon'
 
 export default {
   title: 'Elements/MetadataQualityComponent',
   component: MetadataQualityComponent,
   decorators: [
     moduleMetadata({
-      declarations: [ProgressBarComponent, MetadataQualityItemComponent],
+      declarations: [
+        ProgressBarComponent,
+        PopoverComponent,
+        MetadataQualityItemComponent,
+      ],
       imports: [
         CommonModule,
         MatIconModule,

libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts

@@ -21,8 +21,6 @@ export class MetadataQualityComponent implements OnChanges {
 
   items: MetadataQualityItem[] = []
 
-  isMenuShown = false
-
   get qualityScore() {
     const qualityScore = this.metadata?.extras?.qualityScore
     return typeof qualityScore === 'number'
@@ -36,14 +34,6 @@ export class MetadataQualityComponent implements OnChanges {
     )
   }
 
-  showMenu() {
-    this.isMenuShown = true
-  }
-
-  hideMenu() {
-    this.isMenuShown = false
-  }
-
   private add(name: string, value: boolean) {
     if (this.metadataQualityDisplay?.[name] !== false) {
       this.items.push({ name, value })

libs/ui/widgets/src/index.ts

@@ -1,5 +1,6 @@
 export * from './lib/ui-widgets.module'
 export * from './lib/progress-bar/progress-bar.component'
+export * from './lib/popover/popover.component'
 export * from './lib/loading-mask/loading-mask.component'
 export * from './lib/color-scale/color-scale.component'
 export * from './lib/popup-alert/popup-alert.component'

libs/ui/widgets/src/lib/popover/popover.component.html

@@ -0,0 +1,3 @@
+<span #popoverContent>
+  <ng-content></ng-content>
+</span>

libs/ui/widgets/src/lib/popover/popover.component.spec.ts

@@ -0,0 +1,44 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { PopoverComponent } from './popover.component'
+import { ElementRef } from '@angular/core'
+
+describe('PopoverComponent', () => {
+  let component: PopoverComponent
+  let fixture: ComponentFixture<PopoverComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PopoverComponent],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopoverComponent)
+    component = fixture.componentInstance
+    component.content = 'Test tooltip content'
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should initialize tippy instance on view init', () => {
+    const elementRef = new ElementRef(document.createElement('div'))
+    component.popoverContent = elementRef
+    component.ngAfterViewInit()
+    expect(component['tippyInstance']).toBeDefined()
+  })
+
+  it('should destroy tippy instance on destroy', () => {
+    const elementRef = new ElementRef(document.createElement('div'))
+    component.popoverContent = elementRef
+    component.ngAfterViewInit()
+    let destroyCalled = false
+    component['tippyInstance'].destroy = () => {
+      destroyCalled = true
+    }
+    component.ngOnDestroy()
+    expect(destroyCalled).toBe(true)
+  })
+})

libs/ui/widgets/src/lib/popover/popover.component.stories.ts

@@ -0,0 +1,49 @@
+import { Meta, Story } from '@storybook/angular'
+import { PopoverComponent } from './popover.component'
+import { moduleMetadata } from '@storybook/angular'
+
+export default {
+  title: 'Widgets/Popover',
+  component: PopoverComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [PopoverComponent],
+    }),
+  ],
+  argTypes: {
+    content: { control: 'text' },
+    theme: {
+      control: 'select',
+      options: ['', 'light', 'light-border', 'translucent', 'material'],
+    },
+  },
+} as Meta
+
+const Template: Story<PopoverComponent> = (args: PopoverComponent) => ({
+  component: PopoverComponent,
+  props: args,
+  template: `<gn-ui-popover [content]="content" [theme]="theme">Hover me to see tooltip</gn-ui-popover>`,
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  content: 'Default tooltip content',
+  theme: '',
+}
+
+export const TemplateContent: Story<PopoverComponent> = (
+  args: PopoverComponent
+) => ({
+  component: PopoverComponent,
+  template: `
+    <ng-template #popoverTemplate>
+      <div>
+        <strong>Tooltip Header</strong>
+        <p>Detailed information about the tooltip.</p>
+      </div>
+    </ng-template>
+    <gn-ui-popover [content]="popoverTemplate" [theme]="theme">
+      Hover me to see tooltip
+    </gn-ui-popover>
+  `,
+})

libs/ui/widgets/src/lib/popover/popover.component.ts

@@ -0,0 +1,82 @@
+import {
+  Component,
+  AfterViewInit,
+  ElementRef,
+  Input,
+  ViewChild,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  TemplateRef,
+  Renderer2,
+  ViewContainerRef,
+  EmbeddedViewRef,
+} from '@angular/core'
+import tippy, { Instance } from 'tippy.js'
+
+@Component({
+  selector: 'gn-ui-popover',
+  templateUrl: './popover.component.html',
+  styleUrls: ['./popover.component.css'],
+})
+export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @ViewChild('popoverContent', { static: false }) popoverContent: ElementRef
+  @Input() content: string | TemplateRef<any>
+  @Input() theme: 'light' | 'light-border' | 'translucent' | 'material' | ''
+
+  private tippyInstance: Instance
+  private view: EmbeddedViewRef<any>
+
+  constructor(
+    private viewContainerRef: ViewContainerRef,
+    private renderer: Renderer2
+  ) {}
+
+  private getContent(): string | HTMLElement {
+    if (this.content instanceof TemplateRef) {
+      if (this.view) {
+        this.view.destroy()
+      }
+      this.view = this.viewContainerRef.createEmbeddedView(this.content)
+      this.view.detectChanges()
+      const wrapper = this.renderer.createElement('div') // Create a wrapper div
+      this.view.rootNodes.forEach((node) => {
+        this.renderer.appendChild(wrapper, node) // Append each root node to the wrapper
+      })
+      return wrapper
+    }
+    return this.content
+  }
+
+  ngAfterViewInit(): void {
+    this.tippyInstance = tippy(this.popoverContent.nativeElement as Element, {
+      content: this.getContent(),
+      allowHTML: true,
+      theme: this.theme,
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['theme']) {
+      this.theme = changes['theme'].currentValue
+      if (this.tippyInstance) {
+        this.tippyInstance.setProps({ theme: this.theme })
+      }
+    }
+    if (changes['content']) {
+      this.content = changes['content'].currentValue
+      if (this.tippyInstance) {
+        this.tippyInstance.setContent(this.getContent())
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.tippyInstance) {
+      this.tippyInstance.destroy()
+    }
+    if (this.view) {
+      this.view.destroy()
+    }
+  }
+}

libs/ui/widgets/src/lib/ui-widgets.module.ts

@@ -12,11 +12,13 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
 import { MatIconModule } from '@angular/material/icon'
 import { SpinningLoaderComponent } from './spinning-loader/spinning-loader.component'
 import { CommonModule } from '@angular/common'
+import { PopoverComponent } from './popover/popover.component'
 
 @NgModule({
   declarations: [
     ColorScaleComponent,
     ProgressBarComponent,
+    PopoverComponent,
     StepBarComponent,
     LoadingMaskComponent,
     SpinningLoaderComponent,