geonetwork-ui 2.8.0-dev.e9cfb9381 → 2.8.0-dev.fc43efb22

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-topics/form-field-topics.component.ts

@@ -1,29 +1,22 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
-import { CommonModule } from '@angular/common'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+
 import {
-  AutocompleteComponent,
   BadgeComponent,
   DropdownMultiselectComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
-import { NgIconComponent } from '@ng-icons/core'
-import { INSPIRE_TOPICS } from '../../../../fields.config'
 import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import { INSPIRE_TOPICS } from '../../../../fields.config'
 
 @Component({
   selector: 'gn-ui-form-field-topics',
   standalone: true,
-  imports: [
-    CommonModule,
-    AutocompleteComponent,
-    NgIconComponent,
-    BadgeComponent,
-    TranslatePipe,
-    DropdownMultiselectComponent,
-  ],
+  imports: [BadgeComponent, TranslatePipe, DropdownMultiselectComponent],
   templateUrl: './form-field-topics.component.html',
   styleUrl: './form-field-topics.component.css',
 })
 export class FormFieldTopicsComponent {
+  private translateService = inject(TranslateService)
+
   topics = []
   @Input() set value(topics: string[]) {
     this.topics = topics
@@ -36,8 +29,6 @@ export class FormFieldTopicsComponent {
     }
   })
 
-  constructor(private translateService: TranslateService) {}
-
   handleItemSelection(selectedItems: string[]) {
     this.topics = selectedItems
     this.valueChange.emit(this.topics)

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-update-frequency/form-field-update-frequency.component.ts

@@ -5,6 +5,7 @@ import {
   Input,
   OnInit,
   Output,
+  inject,
 } from '@angular/core'
 import {
   UpdateFrequency,
@@ -33,6 +34,8 @@ const initialListValues = updateFrequencyCodeValues.filter(
   imports: [CheckToggleComponent, DropdownSelectorComponent, TranslatePipe],
 })
 export class FormFieldUpdateFrequencyComponent implements OnInit {
+  private translateService = inject(TranslateService)
+
   @Input() value: UpdateFrequency
   @Output() valueChange: EventEmitter<UpdateFrequency> = new EventEmitter()
 
@@ -42,8 +45,6 @@ export class FormFieldUpdateFrequencyComponent implements OnInit {
     return this.value && this.value !== 'notPlanned' && this.value !== 'unknown'
   }
 
-  constructor(private translateService: TranslateService) {}
-
   async ngOnInit() {
     this.choices = await this.getInitialChoices()
     if (!this.planned) {

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html

@@ -69,11 +69,11 @@
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-overviews>
     </ng-container>
-    <ng-container *ngSwitchCase="'resourceIdentifier'">
+    <ng-container *ngSwitchCase="'resourceIdentifiers'">
       <gn-ui-form-field-simple
         [type]="'text'"
-        [value]="valueAsString"
-        (valueChange)="valueChange.emit($event)"
+        [value]="valueAsResourceIdentifierCode"
+        (valueChange)="handleResourceIdentifierChange($event)"
       ></gn-ui-form-field-simple>
     </ng-container>
     <ng-container *ngSwitchCase="'resourceCreated'">

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts

@@ -142,4 +142,34 @@ export class FormFieldComponent {
   get valueAsOnlineResources() {
     return this.value as Array<OnlineResource>
   }
+  get valueAsResourceIdentifierCode() {
+    const identifiers = this.value as Array<{
+      code: string
+      codeSpace?: string
+      url?: string
+    }>
+    return identifiers?.[0]?.code || ''
+  }
+
+  handleResourceIdentifierChange(code: string) {
+    const identifiers = this.value as Array<{
+      code: string
+      codeSpace?: string
+      url?: string
+    }>
+
+    if (!code) {
+      this.valueChange.emit(identifiers?.slice(1) || [])
+      return
+    }
+
+    if (identifiers?.[0]) {
+      this.valueChange.emit([
+        { ...identifiers[0], code },
+        ...identifiers.slice(1),
+      ])
+    } else {
+      this.valueChange.emit([{ code }])
+    }
+  }
 }

package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.html

@@ -1,36 +1,28 @@
 <div class="flex flex-col gap-6">
-  <ng-container
-    *ngFor="
-      let section of facade.currentSections$ | async;
-      trackBy: sectionTracker
-    "
-  >
-    <ng-container *ngIf="!section.hidden">
+  @for (
+    section of facade.currentSections$ | async;
+    track sectionTracker($index, section)
+  ) {
+    @if (!section.hidden) {
       <div class="flex flex-col gap-6 border p-8 rounded-[8px] shadow">
         <div class="flex flex-col gap-2">
-          <div
-            *ngIf="section.labelKey"
-            class="text-2xl font-title text-black"
-            translate
-          >
-            {{ section.labelKey }}
-          </div>
-          <div
-            *ngIf="section.descriptionKey"
-            class="text-gray-800 text-sm"
-            translate
-          >
-            {{ section.descriptionKey }}
-          </div>
+          @if (section.labelKey) {
+            <div class="text-2xl font-title text-black" translate>
+              {{ section.labelKey }}
+            </div>
+          }
+          @if (section.descriptionKey) {
+            <div class="text-gray-800 text-sm" translate>
+              {{ section.descriptionKey }}
+            </div>
+          }
         </div>
         <div class="grid auto-rows-auto grid-cols-2 gap-[32px]">
-          <ng-container
-            *ngFor="
-              let field of section.fieldsWithValues;
-              trackBy: fieldTracker
-            "
-          >
-            <ng-container *ngIf="!field.config.hidden">
+          @for (
+            field of section.fieldsWithValues;
+            track fieldTracker($index, field)
+          ) {
+            @if (!field.config.hidden) {
               <gn-ui-form-field
                 [ngClass]="
                   field.config.gridColumnSpan === 1
@@ -47,10 +39,10 @@
                   handleFieldValueChange(field.config.model!, $event)
                 "
               ></gn-ui-form-field>
-            </ng-container>
-          </ng-container>
+            }
+          }
         </div>
       </div>
-    </ng-container>
-  </ng-container>
+    }
+  }
 </div>

package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
 import { EditorFieldValue } from '../../models'
 import { FormFieldComponent } from './form-field'
@@ -20,12 +20,12 @@ import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/l
   imports: [CommonModule, FormFieldComponent, TranslateDirective],
 })
 export class RecordFormComponent {
+  facade = inject(EditorFacade)
+
   recordUniqueIdentifier$ = this.facade.record$.pipe(
     map((record) => record.uniqueIdentifier)
   )
 
-  constructor(public facade: EditorFacade) {}
-
   handleFieldValueChange(model: CatalogRecordKeys, newValue: EditorFieldValue) {
     if (!model) {
       return

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -81,7 +81,7 @@ export const RECORD_RESOURCE_CREATED_FIELD: EditorField = {
 }
 
 export const RESOURCE_IDENTIFIER_FIELD: EditorField = {
-  model: 'resourceIdentifier',
+  model: 'resourceIdentifiers',
   formFieldConfig: {
     labelKey: marker('editor.record.form.field.resourceIdentifier'),
   },

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { forkJoin, Observable, of, switchMap } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
@@ -10,7 +10,7 @@ import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain
   providedIn: 'root',
 })
 export class EditorService {
-  constructor(private recordsRepository: RecordsRepositoryInterface) {}
+  private recordsRepository = inject(RecordsRepositoryInterface)
 
   // returns the record as it was when saved, alongside its source
   saveRecord(

package/src/libs/feature/map/src/lib/+state/map.facade.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { select, Store } from '@ngrx/store'
 import * as MapSelectors from './map.selectors'
 import * as MapActions from './map.actions'
@@ -7,11 +7,11 @@ import { Feature } from 'geojson'
 
 @Injectable()
 export class MapFacade {
+  private readonly store = inject(Store)
+
   context$ = this.store.pipe(select(MapSelectors.getMapContext))
   selectedFeatures$ = this.store.pipe(select(MapSelectors.getSelectedFeatures))
 
-  constructor(private readonly store: Store) {}
-
   applyContext(context: MapContext) {
     this.store.dispatch(MapActions.setContext({ context }))
   }

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-from-catalog.component.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  inject,
+} from '@angular/core'
 import {
   FeatureSearchModule,
   FIELDS_BRIEF,
@@ -12,7 +17,6 @@ import {
   ResultsLayoutConfigItem,
 } from '../../../../../../libs/ui/search/src'
 import { AddLayerRecordPreviewComponent } from './add-layer-record-preview/add-layer-record-preview.component'
-import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-add-layer-from-catalog',
@@ -36,14 +40,13 @@ import { CommonModule } from '@angular/common'
     },
   ],
   imports: [
-    CommonModule,
     FeatureSearchModule,
     FuzzySearchComponent,
     ResultsListContainerComponent,
   ],
 })
 export class AddLayerFromCatalogComponent implements OnInit {
-  constructor(private searchFacade: SearchFacade) {}
+  private searchFacade = inject(SearchFacade)
 
   ngOnInit() {
     this.searchFacade.init('map-add-layer')

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html

@@ -8,7 +8,7 @@
     <h1 class="text-sm font-medium truncate">
       {{ record.title }}
     </h1>
-    <ng-container *ngFor="let link of mapLinks">
+    @for (link of mapLinks; track link) {
       <gn-ui-button
         [type]="'outline'"
         (buttonClick)="handleLinkClick(link)"
@@ -18,6 +18,6 @@
           {{ getLinkLabel(link) }}
         </div>
       </gn-ui-button>
-    </ng-container>
+    }
   </div>
 </div>

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+} from '@angular/core'
 import { RecordPreviewComponent } from '../../../../../../../libs/ui/search/src'
 import {
   getLinkLabel,
@@ -14,7 +19,6 @@ import {
 import { MapContextLayer } from '@geospatial-sdk/core'
 import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
 import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
-import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-add-layer-record-preview',
@@ -22,21 +26,25 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./add-layer-record-preview.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [ThumbnailComponent, ButtonComponent, CommonModule],
+  imports: [ThumbnailComponent, ButtonComponent],
 })
 export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
+  protected elementRef: ElementRef
+  private linkClassifier = inject(LinkClassifierService)
+  private mapFacade = inject(MapFacade)
+
   get mapLinks(): DatasetOnlineResource[] {
     return (this.record as DatasetRecord).onlineResources.filter((link) =>
       this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
     ) as DatasetOnlineResource[]
   }
 
-  constructor(
-    protected elementRef: ElementRef,
-    private linkClassifier: LinkClassifierService,
-    private mapFacade: MapFacade
-  ) {
+  constructor() {
+    const elementRef = inject(ElementRef)
+
     super(elementRef)
+
+    this.elementRef = elementRef
   }
 
   async handleLinkClick(link: DatasetOnlineResource) {

package/src/libs/feature/map/src/lib/add-layer-from-file/add-layer-from-file.component.html

@@ -12,10 +12,14 @@
   <p class="text-sm text-gray-600" translate>map.help.addFromFile</p>
 </div>
 
-<div *ngIf="errorMessage" class="text-red-500 mt-2">
-  {{ errorMessage }}
-</div>
+@if (errorMessage) {
+  <div class="text-red-500 mt-2">
+    {{ errorMessage }}
+  </div>
+}
 
-<div *ngIf="successMessage" class="text-green-500 mt-2">
-  {{ successMessage }}
-</div>
+@if (successMessage) {
+  <div class="text-green-500 mt-2">
+    {{ successMessage }}
+  </div>
+}

package/src/libs/feature/map/src/lib/add-layer-from-file/add-layer-from-file.component.ts

@@ -1,10 +1,9 @@
-import { ChangeDetectorRef, Component } from '@angular/core'
+import { ChangeDetectorRef, Component, inject } from '@angular/core'
 import { MapFacade } from '../+state/map.facade'
 import { MapContextLayerGeojson } from '@geospatial-sdk/core'
 import { firstValueFrom } from 'rxjs'
 import { DragAndDropFileInputComponent } from '../../../../../../libs/ui/inputs/src'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
-import { CommonModule } from '@angular/common'
 
 const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
 
@@ -13,25 +12,18 @@ const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
   templateUrl: './add-layer-from-file.component.html',
   styleUrls: ['./add-layer-from-file.component.css'],
   standalone: true,
-  imports: [
-    TranslateDirective,
-    TranslatePipe,
-    CommonModule,
-    DragAndDropFileInputComponent,
-  ],
+  imports: [TranslateDirective, TranslatePipe, DragAndDropFileInputComponent],
 })
 export class AddLayerFromFileComponent {
+  private mapFacade = inject(MapFacade)
+  private changeDetectorRef = inject(ChangeDetectorRef)
+
   errorMessage: string | null = null
   successMessage: string | null = null
   loading = false
   readonly acceptedMimeType = ['.geojson']
   readonly maxFileSize = 5000000
 
-  constructor(
-    private mapFacade: MapFacade,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {}
-
   async handleFileChange(file: File) {
     if (!file) {
       this.displayMessage(INVALID_FILE_FORMAT_ERROR_MESSAGE, 'error')

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html

@@ -7,44 +7,47 @@
   ></gn-ui-text-input>
 </div>
 
-<div *ngIf="errorMessage" class="text-red-500 mt-2">
-  {{ errorMessage }}
-</div>
+@if (errorMessage) {
+  <div class="text-red-500 mt-2">
+    {{ errorMessage }}
+  </div>
+}
 
-<div *ngIf="loading">
-  <p class="loading-message" translate>map.loading.service</p>
-</div>
+@if (loading) {
+  <div>
+    <p class="loading-message" translate>map.loading.service</p>
+  </div>
+}
 
-<ng-container *ngFor="let layer of layers">
-  <div
-    *ngIf="shouldDisplayLayer(layer)"
-    class="flex items-center justify-between my-2 layer-item-tree"
-  >
-    <div class="flex flex-col items-start w-full">
-      <p
-        class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap"
-        [title]="layer.name"
-      >
-        {{ layer.name }}
-      </p>
-      <div class="flex justify-between items-center w-full">
-        <gn-ui-dropdown-selector
-          [title]="'Add Layer As' | translate"
-          [choices]="getLayerChoices(layer)"
-          (selectValue)="onLayerTypeSelect(layer.name, $event)"
-          [selected]="selectedLayerTypes[layer.name]"
-          extraBtnClass="w-6 h-5 !text-sm !px-2 !py-1"
-        ></gn-ui-dropdown-selector>
-        <gn-ui-button
-          class="layer-add-btn"
-          type="primary"
-          (buttonClick)="addLayer(layer.name, selectedLayerTypes[layer.name])"
-          extraClass="text-sm !px-2 !py-1"
-          translate
+@for (layer of layers; track layer) {
+  @if (shouldDisplayLayer(layer)) {
+    <div class="flex items-center justify-between my-2 layer-item-tree">
+      <div class="flex flex-col items-start w-full">
+        <p
+          class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap"
+          [title]="layer.name"
         >
-          <span translate>map.layer.add</span>
-        </gn-ui-button>
+          {{ layer.name }}
+        </p>
+        <div class="flex justify-between items-center w-full">
+          <gn-ui-dropdown-selector
+            [title]="'Add Layer As' | translate"
+            [choices]="getLayerChoices(layer)"
+            (selectValue)="onLayerTypeSelect(layer.name, $event)"
+            [selected]="selectedLayerTypes[layer.name]"
+            extraBtnClass="w-6 h-5 !text-sm !px-2 !py-1"
+          ></gn-ui-dropdown-selector>
+          <gn-ui-button
+            class="layer-add-btn"
+            type="primary"
+            (buttonClick)="addLayer(layer.name, selectedLayerTypes[layer.name])"
+            extraClass="text-sm !px-2 !py-1"
+            translate
+          >
+            <span translate>map.layer.add</span>
+          </gn-ui-button>
+        </div>
       </div>
     </div>
-  </div>
-</ng-container>
+  }
+}

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts

@@ -5,6 +5,7 @@ import {
   Input,
   OnInit,
   Output,
+  inject,
 } from '@angular/core'
 import { OgcApiEndpoint } from '@camptocamp/ogc-client'
 import { debounceTime, Subject } from 'rxjs'
@@ -15,7 +16,7 @@ import {
   DropdownSelectorComponent,
   TextInputComponent,
 } from '../../../../../../libs/ui/inputs/src'
-import { CommonModule } from '@angular/common'
+
 import { MapContextLayer, MapContextLayerOgcApi } from '@geospatial-sdk/core'
 
 @Component({
@@ -24,7 +25,6 @@ import { MapContextLayer, MapContextLayerOgcApi } from '@geospatial-sdk/core'
   styleUrls: ['./add-layer-from-ogc-api.component.css'],
   standalone: true,
   imports: [
-    CommonModule,
     TextInputComponent,
     DropdownSelectorComponent,
     TranslatePipe,
@@ -32,6 +32,8 @@ import { MapContextLayer, MapContextLayerOgcApi } from '@geospatial-sdk/core'
   ],
 })
 export class AddLayerFromOgcApiComponent implements OnInit {
+  private changeDetectorRef = inject(ChangeDetectorRef)
+
   @Input() ogcUrl: string
   @Output() layerAdded = new EventEmitter<MapContextLayer>()
 
@@ -41,8 +43,6 @@ export class AddLayerFromOgcApiComponent implements OnInit {
   errorMessage: string | null = null
   selectedLayerTypes: { [key: string]: DropdownChoice['value'] } = {}
 
-  constructor(private changeDetectorRef: ChangeDetectorRef) {}
-
   ngOnInit() {
     this.urlChange.pipe(debounceTime(700)).subscribe(() => {
       this.loadLayers()

package/src/libs/feature/map/src/lib/add-layer-from-wfs/add-layer-from-wfs.component.html

@@ -8,30 +8,37 @@
   </gn-ui-text-input>
 </div>
 
-<div *ngIf="errorMessage" class="text-red-500 mt-2">
-  {{ errorMessage }}
-</div>
+@if (errorMessage) {
+  <div class="text-red-500 mt-2">
+    {{ errorMessage }}
+  </div>
+}
 
-<div *ngIf="loading">
-  <p class="loading-message" translate>map.loading.service</p>
-</div>
+@if (loading) {
+  <div>
+    <p class="loading-message" translate>map.loading.service</p>
+  </div>
+}
 
-<div *ngIf="!loading && layers.length > 0">
-  <h2 class="font-bold" translate>map.layers.available</h2>
-  <ng-container *ngFor="let layer of layers">
-    <div class="flex items-center justify-between my-2 layer-item-tree">
-      <p class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap">
-        {{ layer.title }}
-      </p>
-      <gn-ui-button
-        *ngIf="layer.name"
-        class="layer-add-btn"
-        type="primary"
-        (buttonClick)="addLayer(layer)"
-        extraClass="text-sm !px-2 !py-1"
-        translate
-        ><span translate> map.layer.add </span></gn-ui-button
-      >
-    </div>
-  </ng-container>
-</div>
+@if (!loading && layers.length > 0) {
+  <div>
+    <h2 class="font-bold" translate>map.layers.available</h2>
+    @for (layer of layers; track layer) {
+      <div class="flex items-center justify-between my-2 layer-item-tree">
+        <p class="max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap">
+          {{ layer.title }}
+        </p>
+        @if (layer.name) {
+          <gn-ui-button
+            class="layer-add-btn"
+            type="primary"
+            (buttonClick)="addLayer(layer)"
+            extraClass="text-sm !px-2 !py-1"
+            translate
+            ><span translate> map.layer.add </span></gn-ui-button
+          >
+        }
+      </div>
+    }
+  </div>
+}

package/src/libs/feature/map/src/lib/add-layer-from-wfs/add-layer-from-wfs.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core'
+import { ChangeDetectorRef, Component, OnInit, inject } from '@angular/core'
 import { WfsEndpoint, WfsFeatureTypeBrief } from '@camptocamp/ogc-client'
 import { firstValueFrom, Subject } from 'rxjs'
 import { MapFacade } from '../+state/map.facade'
@@ -6,7 +6,6 @@ import { debounceTime } from 'rxjs/operators'
 import { MapContextLayer } from '@geospatial-sdk/core'
 import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
-import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-add-layer-from-wfs',
@@ -18,10 +17,12 @@ import { CommonModule } from '@angular/common'
     ButtonComponent,
     TranslateDirective,
     TranslatePipe,
-    CommonModule,
   ],
 })
 export class AddLayerFromWfsComponent implements OnInit {
+  private mapFacade = inject(MapFacade)
+  private changeDetectorRef = inject(ChangeDetectorRef)
+
   wfsUrl = ''
   loading = false
   layers: WfsFeatureTypeBrief[] = []
@@ -29,11 +30,6 @@ export class AddLayerFromWfsComponent implements OnInit {
   urlChange = new Subject<string>()
   errorMessage: string | null = null
 
-  constructor(
-    private mapFacade: MapFacade,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {}
-
   ngOnInit() {
     this.urlChange.pipe(debounceTime(700)).subscribe(() => this.loadLayers())
   }