feat(wc): implement a general cdk overlay for all web components

This will work with any webcomponent by creating an overlay at the root of each
webcomponent

Changed the name of the custom OverlayContainer for clarity

apps/webcomponents/src/app/components/base.component.ts

@@ -1,4 +1,11 @@
-import { Component, Injector, Input, OnChanges, OnInit } from '@angular/core'
+import {
+  Component,
+  ElementRef,
+  Injector,
+  Input,
+  OnChanges,
+  OnInit,
+} from '@angular/core'
 import {
   LinkClassifierService,
   LinkUsage,
@@ -10,6 +17,8 @@ import { TranslateService } from '@ngx-translate/core'
 import { firstValueFrom } from 'rxjs'
 import { DatasetDistribution } from '@geonetwork-ui/common/domain/record'
 import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/records-repository.interface'
+import { OverlayContainer } from '@angular/cdk/overlay'
+import { WebcomponentOverlayContainer } from '../webcomponent-overlay-container'
 
 export const apiConfiguration = new Configuration()
 
@@ -40,6 +49,12 @@ export class BaseComponent implements OnChanges, OnInit {
     this.searchService = injector.get(SearchApiService)
     this.recordsRepository = injector.get(RecordsRepositoryInterface)
     this.linkClassifier = injector.get(LinkClassifierService)
+
+    const elementRef = injector.get(ElementRef)
+    const overlayContainer = injector.get(
+      OverlayContainer
+    ) as WebcomponentOverlayContainer
+    overlayContainer.setRoot(elementRef.nativeElement.shadowRoot)
   }
 
   ngOnInit() {

apps/webcomponents/src/app/components/gn-search-input/gn-search-input.component.html

@@ -1,3 +1 @@
-<div id="angular-app-root">
-  <gn-ui-fuzzy-search #searchInput class="text-[18px]"></gn-ui-fuzzy-search>
-</div>
+<gn-ui-fuzzy-search #searchInput class="text-[18px]"></gn-ui-fuzzy-search>

apps/webcomponents/src/app/webcomponent-overlay-container.ts

@@ -0,0 +1,32 @@
+import { OverlayContainer } from '@angular/cdk/overlay'
+import { Platform } from '@angular/cdk/platform'
+import { DOCUMENT } from '@angular/common'
+import { Inject, Injectable } from '@angular/core'
+
+@Injectable()
+export class WebcomponentOverlayContainer extends OverlayContainer {
+  private componentRoot: HTMLElement
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    platform: Platform
+  ) {
+    super(document, platform)
+  }
+
+  setRoot(componentRoot: HTMLElement) {
+    this.componentRoot = componentRoot
+  }
+
+  protected _createContainer(): void {
+    const container: HTMLDivElement = this.document.createElement('div')
+    container.classList.add('gn-ui-overlay-container')
+    if (!this.componentRoot) {
+      throw new Error(
+        'Angular CDK OverlayContainer was used without proper initialization.'
+      )
+    }
+    this.componentRoot.appendChild(container)
+    this._containerElement = container
+  }
+}

apps/webcomponents/src/app/webcomponents.module.ts

@@ -1,6 +1,5 @@
 import { OverlayContainer } from '@angular/cdk/overlay'
-import { Platform } from '@angular/cdk/platform'
-import { CommonModule, DOCUMENT } from '@angular/common'
+import { CommonModule } from '@angular/common'
 import { CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule } from '@angular/core'
 import { createCustomElement } from '@angular/elements'
 import { MatIconModule } from '@angular/material/icon'
@@ -12,6 +11,7 @@ import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
 import { UiSearchModule } from '@geonetwork-ui/ui/search'
 import {
+  EmbeddedTranslateLoader,
   TRANSLATE_DEFAULT_CONFIG,
   UtilI18nModule,
 } from '@geonetwork-ui/util/i18n'
@@ -20,7 +20,7 @@ import { StoreModule } from '@ngrx/store'
 import { StoreDevtoolsModule } from '@ngrx/store-devtools'
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
 import { AppComponent } from './app.component'
-import { AppOverlayContainer } from './AppOverlayContainer'
+import { WebcomponentOverlayContainer } from './webcomponent-overlay-container'
 import { apiConfiguration, BaseComponent } from './components/base.component'
 import { GnAggregatedRecordsComponent } from './components/gn-aggregated-records/gn-aggregated-records.component'
 import { GnFacetsComponent } from './components/gn-facets/gn-facets.component'
@@ -31,7 +31,6 @@ import { GnMapViewerComponent } from './components/gn-map-viewer/gn-map-viewer.c
 import { FeatureMapModule } from '@geonetwork-ui/feature/map'
 import { GnDatasetViewChartComponent } from './components/gn-dataset-view-chart/gn-dataset-view-chart.component'
 import { FeatureDatavizModule } from '@geonetwork-ui/feature/dataviz'
-import { EmbeddedTranslateLoader } from '@geonetwork-ui/util/i18n'
 import { FeatureAuthModule } from '@geonetwork-ui/feature/auth'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 
@@ -90,12 +89,7 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
     },
     {
       provide: OverlayContainer,
-      useFactory: (document: Document, platform: Platform) => {
-        const container = new AppOverlayContainer(document, platform)
-        container.setSelector('gn-search-input')
-        return container
-      },
-      deps: [DOCUMENT, Platform],
+      useClass: WebcomponentOverlayContainer,
     },
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

apps/webcomponents/src/styles.css

@@ -51,7 +51,7 @@
   min-width: 1px;
   min-height: 1px;
 }
-.app-overlay-container {
+.gn-ui-overlay-container {
   position: absolute;
   z-index: 1000;
   pointer-events: none;
@@ -60,7 +60,7 @@
   height: 100%;
   width: 100%;
 }
-.app-overlay-container:empty {
+.gn-ui-overlay-container:empty {
   display: none;
 }