chore: make feature-record components standalone

libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts

@@ -10,6 +10,9 @@ import { Configuration } from '@geonetwork-ui/data-access/gn4'
 import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { MdViewFacade } from '../state'
 import { GN_UI_VERSION } from '../gn-ui-version.token'
+import { CopyTextButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken<string>(
   'webComponentEmbedderUrl'
@@ -20,6 +23,8 @@ export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken<string>(
   templateUrl: './data-view-permalink.component.html',
   styleUrls: ['./data-view-permalink.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, CopyTextButtonComponent, TranslateModule],
 })
 export class DataViewPermalinkComponent {
   viewType$ = new BehaviorSubject<string>('map')

libs/feature/record/src/lib/data-view-share/data-view-share.component.ts

@@ -5,13 +5,28 @@ import {
   Input,
   Optional,
 } from '@angular/core'
-import { WEB_COMPONENT_EMBEDDER_URL } from '../data-view-permalink/data-view-permalink.component'
+import {
+  DataViewPermalinkComponent,
+  WEB_COMPONENT_EMBEDDER_URL,
+} from '../data-view-permalink/data-view-permalink.component'
+import { MatTabsModule } from '@angular/material/tabs'
+import { CommonModule } from '@angular/common'
+import { DataViewWebComponentComponent } from '../data-view-web-component/data-view-web-component.component'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-data-view-share',
   templateUrl: './data-view-share.component.html',
   styleUrls: ['./data-view-share.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    MatTabsModule,
+    DataViewPermalinkComponent,
+    DataViewWebComponentComponent,
+    TranslateModule,
+  ],
+  standalone: true,
 })
 export class DataViewShareComponent {
   private _viewType: string

libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts

@@ -8,12 +8,17 @@ import { Configuration } from '@geonetwork-ui/data-access/gn4'
 import { MdViewFacade } from '../state'
 import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { GN_UI_VERSION } from '../gn-ui-version.token'
+import { CopyTextButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-data-view-web-component',
   templateUrl: './data-view-web-component.component.html',
   styleUrls: ['./data-view-web-component.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, CopyTextButtonComponent, TranslateModule],
 })
 export class DataViewWebComponentComponent {
   viewType$ = new BehaviorSubject<string>('map')

libs/feature/record/src/lib/data-view/data-view.component.ts

@@ -10,12 +10,27 @@ import { map, tap } from 'rxjs/operators'
 import { MdViewFacade } from '../state'
 import { DatavizConfigurationModel } from '@geonetwork-ui/common/domain/model/dataviz/dataviz-configuration.model'
 import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record'
+import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
+import {
+  ChartViewComponent,
+  TableViewComponent,
+} from '@geonetwork-ui/feature/dataviz'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-data-view',
   templateUrl: './data-view.component.html',
   styleUrls: ['./data-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    DropdownSelectorComponent,
+    TableViewComponent,
+    TranslateModule,
+    ChartViewComponent,
+  ],
 })
 export class DataViewComponent {
   @Input() mode: 'table' | 'chart'

libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.spec.ts

@@ -1,30 +1,25 @@
-import { Component, EventEmitter, Output } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import {
   EXTERNAL_VIEWER_OPEN_NEW_TAB,
   EXTERNAL_VIEWER_URL_TEMPLATE,
   ExternalViewerButtonComponent,
 } from './external-viewer-button.component'
+import { MockBuilder } from 'ng-mocks'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { importProvidersFrom } from '@angular/core'
 import { TranslateModule } from '@ngx-translate/core'
 
-@Component({
-  selector: 'gn-ui-button',
-  template: '<div></div>',
-})
-export class MockButtonComponent {
-  @Output() buttonClick = new EventEmitter()
-}
-
 describe('ExternalViewerButtonComponent', () => {
   let component: ExternalViewerButtonComponent
   let fixture: ComponentFixture<ExternalViewerButtonComponent>
 
+  beforeEach(() => MockBuilder(ExternalViewerButtonComponent))
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ExternalViewerButtonComponent, MockButtonComponent],
-      imports: [TranslateModule.forRoot()],
       providers: [
+        importProvidersFrom(TranslateModule.forRoot()),
         {
           provide: EXTERNAL_VIEWER_URL_TEMPLATE,
           useValue:
@@ -56,7 +51,7 @@ describe('ExternalViewerButtonComponent', () => {
     })
   })
   describe('with mapConfig and valid external links', () => {
-    let buttonComponent: MockButtonComponent
+    let buttonComponent: ButtonComponent
     let componentSpy
     let windowSpy
     const openMock = jest.fn().mockReturnThis()
@@ -79,7 +74,7 @@ describe('ExternalViewerButtonComponent', () => {
       describe('click button', () => {
         beforeEach(() => {
           buttonComponent = fixture.debugElement.query(
-            By.directive(MockButtonComponent)
+            By.directive(ButtonComponent)
           ).componentInstance
           componentSpy = jest.spyOn(component, 'openInExternalViewer')
           windowSpy = jest
@@ -127,7 +122,7 @@ describe('ExternalViewerButtonComponent', () => {
       describe('click button', () => {
         beforeEach(() => {
           buttonComponent = fixture.debugElement.query(
-            By.directive(MockButtonComponent)
+            By.directive(ButtonComponent)
           ).componentInstance
           componentSpy = jest.spyOn(component, 'openInExternalViewer')
           windowSpy = jest
@@ -172,7 +167,7 @@ describe('ExternalViewerButtonComponent', () => {
       describe('click button', () => {
         beforeEach(() => {
           buttonComponent = fixture.debugElement.query(
-            By.directive(MockButtonComponent)
+            By.directive(ButtonComponent)
           ).componentInstance
           componentSpy = jest.spyOn(component, 'openInExternalViewer')
           windowSpy = jest

libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -8,8 +8,12 @@ import {
 } from '@angular/core'
 import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { getFileFormat } from '@geonetwork-ui/util/shared'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { CommonModule } from '@angular/common'
+import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 
 marker('externalviewer.dataset.unnamed')
 
@@ -26,6 +30,9 @@ export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken<boolean>(
   templateUrl: './external-viewer-button.component.html',
   styleUrls: ['./external-viewer-button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, NgIcon, TranslateModule],
+  viewProviders: [provideIcons({ matOpenInNew })],
 })
 export class ExternalViewerButtonComponent {
   @Input() link: DatasetOnlineResource

libs/feature/record/src/lib/feature-record.module.ts

@@ -1,48 +1,25 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import {
-  FeatureDetailComponent,
-  MapContainerComponent,
-} from '@geonetwork-ui/ui/map'
 import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
 import { UiLayoutModule } from '@geonetwork-ui/ui/layout'
-import {
-  FeatureMapModule,
-  MapStateContainerComponent,
-} from '@geonetwork-ui/feature/map'
+import { FeatureMapModule } from '@geonetwork-ui/feature/map'
 import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { MdViewFacade } from './state'
 import { MdViewEffects } from './state/mdview.effects'
-import { MapViewComponent } from './map-view/map-view.component'
-import { DataViewComponent } from './data-view/data-view.component'
 import {
   METADATA_VIEW_FEATURE_STATE_KEY,
   reducer,
 } from './state/mdview.reducer'
 import { MatTabsModule } from '@angular/material/tabs'
-import { PopupAlertComponent, UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
+import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 import { TranslateModule } from '@ngx-translate/core'
-import { ExternalViewerButtonComponent } from './external-viewer-button/external-viewer-button.component'
 import { FeatureCatalogModule } from '@geonetwork-ui/feature/catalog'
 import { TableComponent } from '@geonetwork-ui/ui/dataviz'
-import { FeatureDatavizModule } from '@geonetwork-ui/feature/dataviz'
-import { DataViewPermalinkComponent } from './data-view-permalink/data-view-permalink.component'
-import { DataViewWebComponentComponent } from './data-view-web-component/data-view-web-component.component'
-import { DataViewShareComponent } from './data-view-share/data-view-share.component'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
-import { matClose, matOpenInNew } from '@ng-icons/material-icons/baseline'
 
 @NgModule({
-  declarations: [
-    MapViewComponent,
-    DataViewComponent,
-    ExternalViewerButtonComponent,
-    DataViewPermalinkComponent,
-    DataViewWebComponentComponent,
-    DataViewShareComponent,
-  ],
   imports: [
     CommonModule,
     StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer),
@@ -56,30 +33,13 @@ import { matClose, matOpenInNew } from '@ng-icons/material-icons/baseline'
     UiWidgetsModule,
     TranslateModule,
     TableComponent,
-    FeatureDatavizModule,
-    PopupAlertComponent,
-    FeatureDetailComponent,
-    MapStateContainerComponent,
-    MapContainerComponent,
-    // FIXME: these imports are required by non-standalone components and should be removed once all components have been made standalone
-    NgIconsModule.withIcons({
-      matClose,
-      matOpenInNew,
-    }),
+    NgIconsModule,
   ],
   providers: [
     MdViewFacade,
     provideNgIconsConfig({
       size: '1.5em',
     }),
   ],
-  exports: [
-    MapViewComponent,
-    DataViewComponent,
-    DataViewPermalinkComponent,
-    DataViewWebComponentComponent,
-    DataViewShareComponent,
-    ExternalViewerButtonComponent,
-  ],
 })
 export class FeatureRecordModule {}