WebComponents / fix dropdown-selector not showing

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() {
@@ -68,13 +83,35 @@ export class BaseComponent implements OnChanges, OnInit {
       this.titleFont
     )
     this.facade.init(this.searchId)
+    this.copyFontFacesToDocument()
     this.isInitialized = true
   }
 
   changes() {
     // to override
   }
 
+  private copyFontFacesToDocument() {
+    // get the list of font face definitions in the Shadow DOM
+    const root = this.injector.get(ElementRef).nativeElement as HTMLElement
+    const styles = root.shadowRoot.styleSheets
+    const fontFaces = Array.from(styles).reduce(
+      (prev, curr) => [
+        ...prev,
+        ...Array.from(curr.cssRules)
+          .filter((rule) => rule.cssText.startsWith('@font-face'))
+          .map((rule) => rule.cssText),
+      ],
+      []
+    )
+
+    // all font faces are then copied to the document
+    const style = document.createElement('style')
+    const cssText = fontFaces.join('\n')
+    style.appendChild(document.createTextNode(cssText))
+    document.head.appendChild(style)
+  }
+
   async getRecordLink(
     uuid: string,
     usages: LinkUsage[]

apps/webcomponents/src/app/components/gn-dataset-view-chart/gn-dataset-view-chart.sample.html

@@ -7,10 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
-    />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"
       rel="stylesheet"

apps/webcomponents/src/app/components/gn-dataset-view-table/gn-dataset-view-table.sample.html

@@ -7,10 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
-    />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"
       rel="stylesheet"

apps/webcomponents/src/app/components/gn-facets/gn-facets.sample.html

@@ -7,10 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
-    />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"
       rel="stylesheet"

apps/webcomponents/src/app/components/gn-map-viewer/gn-map-viewer.sample.html

@@ -7,10 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
-    />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"
       rel="stylesheet"

apps/webcomponents/src/app/components/gn-results-list/gn-results-list-multiple.sample.html

@@ -7,10 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
-    />
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;600;700&amp;display=swap"
       rel="stylesheet"

apps/webcomponents/src/app/components/gn-results-list/gn-results-list.sample.html

@@ -7,10 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
-    />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"
       rel="stylesheet"

apps/webcomponents/src/app/components/gn-search-input/gn-search-input-and-results.sample.html

@@ -7,10 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
-    />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"
       rel="stylesheet"

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/components/gn-search-input/gn-search-input.sample.html

@@ -7,10 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
-    />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"
       rel="stylesheet"

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

@@ -13,7 +13,7 @@
   font-family: 'Material Symbols Outlined';
   font-style: normal;
   font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v108/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2)
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v138/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
     format('woff2');
 }
 .material-symbols-outlined {
@@ -32,7 +32,7 @@
   -webkit-font-smoothing: antialiased;
 }
 
-/* Material Theme */
+/* These classes were extracted from the full Material theme to save size */
 .cdk-overlay-pane {
   position: absolute;
   pointer-events: auto;
@@ -42,7 +42,6 @@
   max-width: 100%;
   max-height: 100%;
 }
-
 .cdk-overlay-connected-position-bounding-box {
   position: absolute;
   z-index: 1000;
@@ -51,7 +50,31 @@
   min-width: 1px;
   min-height: 1px;
 }
-.app-overlay-container {
+.cdk-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  pointer-events: auto;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  opacity: 0;
+}
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+.cdk-overlay-transparent-backdrop {
+  transition: visibility 1ms linear, opacity 1ms linear;
+  visibility: hidden;
+  opacity: 1;
+}
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0;
+  visibility: visible;
+}
+
+.gn-ui-overlay-container {
   position: absolute;
   z-index: 1000;
   pointer-events: none;
@@ -60,7 +83,7 @@
   height: 100%;
   width: 100%;
 }
-.app-overlay-container:empty {
+.gn-ui-overlay-container:empty {
   display: none;
 }
 

libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html

@@ -4,6 +4,7 @@
   [action]="autoCompleteAction"
   (itemSelected)="handleItemSelection($event)"
   (inputSubmitted)="handleInputSubmission($event)"
+  (inputCleared)="handleInputCleared()"
   [value]="searchInputValue$ | async"
   [clearOnSelection]="true"
 ></gn-ui-autocomplete>