-
-
-
-
-
record.metadata.quality.details
-
-
+
+
+ record.metadata.quality.details
+
+
diff --git a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.spec.ts b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.spec.ts
index 0624689541..154c05e852 100644
--- a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.spec.ts
+++ b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.spec.ts
@@ -9,7 +9,10 @@ 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 +40,7 @@ describe('MetadataQualityComponent', () => {
MetadataQualityComponent,
MetadataQualityItemComponent,
ProgressBarComponent,
+ PopoverComponent,
],
imports: [
UtilSharedModule,
@@ -61,28 +65,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('bob@org.net')
})
@@ -94,6 +76,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)
)
diff --git a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.stories.ts b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.stories.ts
index cf67b7a402..8caca4af5e 100644
--- a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.stories.ts
+++ b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.stories.ts
@@ -9,6 +9,7 @@ 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 {
@@ -16,7 +17,11 @@ export default {
component: MetadataQualityComponent,
decorators: [
moduleMetadata({
- declarations: [ProgressBarComponent, MetadataQualityItemComponent],
+ declarations: [
+ ProgressBarComponent,
+ PopoverComponent,
+ MetadataQualityItemComponent,
+ ],
imports: [
CommonModule,
MatIconModule,
diff --git a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts b/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts
index e6d86036e1..6f604eb608 100644
--- a/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts
+++ b/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 })
diff --git a/libs/ui/widgets/src/index.ts b/libs/ui/widgets/src/index.ts
index 26b0aef91e..3100b6e6e8 100644
--- a/libs/ui/widgets/src/index.ts
+++ b/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'
diff --git a/libs/ui/widgets/src/lib/popover/popover.component.css b/libs/ui/widgets/src/lib/popover/popover.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/ui/widgets/src/lib/popover/popover.component.html b/libs/ui/widgets/src/lib/popover/popover.component.html
new file mode 100644
index 0000000000..08a008c9e8
--- /dev/null
+++ b/libs/ui/widgets/src/lib/popover/popover.component.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/libs/ui/widgets/src/lib/popover/popover.component.spec.ts b/libs/ui/widgets/src/lib/popover/popover.component.spec.ts
new file mode 100644
index 0000000000..96bce57218
--- /dev/null
+++ b/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
+
+ 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)
+ })
+})
diff --git a/libs/ui/widgets/src/lib/popover/popover.component.stories.ts b/libs/ui/widgets/src/lib/popover/popover.component.stories.ts
new file mode 100644
index 0000000000..f58285920a
--- /dev/null
+++ b/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 = (args: PopoverComponent) => ({
+ component: PopoverComponent,
+ props: args,
+ template: `Hover me to see tooltip`,
+})
+
+export const Default = Template.bind({})
+Default.args = {
+ content: 'Default tooltip content',
+ theme: '',
+}
+
+export const TemplateContent: Story = (
+ args: PopoverComponent
+) => ({
+ component: PopoverComponent,
+ template: `
+
+
+
Tooltip Header
+
Detailed information about the tooltip.
+