From 5b5ec2d83f4077ea15c5f6a8bb5a953fbd982a2d Mon Sep 17 00:00:00 2001
From: Filip Leitner <leitnerfilip@gmail.com>
Date: Wed, 6 Nov 2024 20:21:59 +0100
Subject: [PATCH] feat(query): Dynamic info panel

Configure content via QUERY_INFO_PANEL injection token
---
 .../hslayers/components/query/public-api.ts    |  1 +
 .../components/query/query.component.html      |  2 +-
 .../components/query/query.component.ts        | 18 +++++++++---------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/projects/hslayers/components/query/public-api.ts b/projects/hslayers/components/query/public-api.ts
index 9c0d584773..3e36964c4d 100644
--- a/projects/hslayers/components/query/public-api.ts
+++ b/projects/hslayers/components/query/public-api.ts
@@ -6,3 +6,4 @@ export * from './feature/feature.component';
 export * from './query-wms.service';
 export * from './query-wmts.service';
 export * from './query.component';
+export * from './query.tokens';
diff --git a/projects/hslayers/components/query/query.component.html b/projects/hslayers/components/query/query.component.html
index e4b3f0c0dd..3c35daf468 100644
--- a/projects/hslayers/components/query/query.component.html
+++ b/projects/hslayers/components/query/query.component.html
@@ -12,7 +12,7 @@
   </div>
   }
   @if (hsLayoutService.mainpanel === 'query') {
-  <ng-container *ngComponentOutlet="infoPanelComponent">
+  <ng-container *ngComponentOutlet="infoPanelComponent; injector: injector">
   </ng-container>
   }
   @if (hsQueryBaseService?.coordinates !== undefined && hsQueryBaseService?.coordinates.length > 0) {
diff --git a/projects/hslayers/components/query/query.component.ts b/projects/hslayers/components/query/query.component.ts
index 7b31da1806..0523a32cf1 100644
--- a/projects/hslayers/components/query/query.component.ts
+++ b/projects/hslayers/components/query/query.component.ts
@@ -1,13 +1,13 @@
 //TODO: Check if this import is still needed. Breaks production though
 //import 'ol-popup/src/ol-popup.css';
-import {Component, Inject, OnInit, Type} from '@angular/core';
+import {Component, Injector, OnInit, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 import Popup from 'ol-popup';
 import {Subject} from 'rxjs';
 import {debounceTime, takeUntil} from 'rxjs/operators';
 
-import {AsyncPipe, NgClass} from '@angular/common';
+import {AsyncPipe, NgClass, NgComponentOutlet} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {HsDrawService} from 'hslayers-ng/services/draw';
 import {HsLogService} from 'hslayers-ng/services/log';
@@ -33,12 +33,7 @@ import {TranslateCustomPipe} from 'hslayers-ng/services/language';
     AsyncPipe,
     NgClass,
     FormsModule,
-  ],
-  providers: [
-    {
-      provide: QUERY_INFO_PANEL,
-      useValue: HsQueryDefaultInfoPanelBodyComponent, // Default value
-    },
+    NgComponentOutlet,
   ],
 })
 export class HsQueryComponent extends HsPanelBaseComponent implements OnInit {
@@ -48,6 +43,12 @@ export class HsQueryComponent extends HsPanelBaseComponent implements OnInit {
   //To deactivate queries (unsubscribe subscribers) per app
   queryDeactivator = new Subject<void>();
 
+  // Inject QUERY_INFO_PANEL if available, otherwise fallback to HsQueryDefaultInfoPanelBodyComponent
+  infoPanelComponent =
+    inject(QUERY_INFO_PANEL, {optional: true}) ||
+    HsQueryDefaultInfoPanelBodyComponent;
+  injector = inject(Injector);
+
   constructor(
     public hsQueryBaseService: HsQueryBaseService,
     private hsMapService: HsMapService,
@@ -55,7 +56,6 @@ export class HsQueryComponent extends HsPanelBaseComponent implements OnInit {
     private hsQueryVectorService: HsQueryVectorService,
     private hsDrawService: HsDrawService,
     private hsQueryWmsService: HsQueryWmsService,
-    @Inject(QUERY_INFO_PANEL) public infoPanelComponent: Type<any>,
   ) {
     super();
   }