geonetwork-ui 2.4.0-dev.e97caaf2 → 2.4.0-dev.f5019723

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html

@@ -1,24 +1,29 @@
-<div
-  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
->
-  <div class="pl-3 flex justify-center">
-    <mat-date-range-input [rangePicker]="picker" class="w-full">
-      <input
-        matStartDate
-        placeholder="Start date"
-        [value]="startDate"
-        (dateInput)="startDateChange.emit($event.value)"
-      />
-      <input
-        matEndDate
-        placeholder="End date"
-        [value]="endDate"
-        (dateInput)="endDateChange.emit($event.value)"
-      />
-    </mat-date-range-input>
-  </div>
-  <mat-datepicker-toggle matSuffix [for]="picker">
-    <mat-icon>calendar_today</mat-icon>
-  </mat-datepicker-toggle>
-</div>
+<span class="w-full inline-block relative">
+  <mat-date-range-input [rangePicker]="picker" class="gn-ui-text-input">
+    <input
+      matStartDate
+      placeholder="Start date"
+      [value]="startDate"
+      (dateInput)="startDateChange.emit($event.value)"
+    />
+    <input
+      matEndDate
+      placeholder="End date"
+      [value]="endDate"
+      (dateInput)="endDateChange.emit($event.value)"
+    />
+  </mat-date-range-input>
+
+  <gn-ui-button
+    type="light"
+    class="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10"
+    (buttonClick)="picker.open()"
+    extraClass="h-full"
+    data-cy="date-picker-button"
+  >
+    <mat-icon class="material-symbols-outlined text-primary"
+      >date_range</mat-icon
+    >
+  </gn-ui-button>
+</span>
 <mat-date-range-picker #picker></mat-date-range-picker>

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.ts

@@ -8,6 +8,7 @@ import {
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../button/button.component'
 
 @Component({
   selector: 'gn-ui-date-range-picker',
@@ -15,7 +16,12 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./date-range-picker.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
+  imports: [
+    MatIconModule,
+    MatNativeDateModule,
+    MatDatepickerModule,
+    ButtonComponent,
+  ],
 })
 export class DateRangePickerComponent {
   @Input() startDate: Date

package/src/libs/ui/inputs/src/lib/file-input/file-input.component.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}

package/src/libs/ui/inputs/src/lib/file-input/file-input.component.html

@@ -4,10 +4,13 @@
     class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100"
     [ngClass]="{
       'border-primary-lighter bg-primary-white': dragFilesOver,
-      'border-gray-300': !dragFilesOver
+      'border-gray-300': !dragFilesOver,
+      'cursor-pointer hover:border-gray-500': !isUploadInProgress
     }"
+    [attr.tabindex]="isUploadInProgress ? null : 0"
     (dragFilesOver)="handleDragFilesOver($event)"
     (dropFiles)="handleDropFiles($event)"
+    (keydown.enter)="fileInput.click()"
   >
     <div
       class="w-14 h-14 rounded-md bg-gray-50 grid"
@@ -26,7 +29,7 @@
     </div>
     <div
       *ngIf="isUploadInProgress"
-      class="w-14 h-14 grid items-center justify-center"
+      class="w-14 h-14 grid items-center justify-center relative"
     >
       <div class="text-gray-100 absolute">
         <mat-progress-spinner
@@ -57,7 +60,7 @@
             ? 'font-bold text-primary cursor-pointer'
             : 'font-medium text-gray-500'
         "
-        (click)="handleSecondaryTextClick()"
+        (click)="handleSecondaryTextClick($event)"
       >
         {{ getSecondaryText() | translate }}
       </p>
@@ -70,6 +73,7 @@
       <span class="border-b border-gray-300 grow"></span>
     </p>
     <input
+      #fileInput
       type="file"
       class="hidden"
       (change)="handleFileInput($event)"

package/src/libs/ui/inputs/src/lib/file-input/file-input.component.ts

@@ -79,9 +79,10 @@ export class FileInputComponent {
     this.urlChange.emit(url)
   }
 
-  handleSecondaryTextClick() {
+  handleSecondaryTextClick(event: Event) {
     if (this.uploadProgress) {
       this.handleCancel()
+      event.preventDefault()
     }
   }
 

package/src/libs/ui/inputs/src/lib/image-input/image-input.component.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}

package/src/libs/ui/inputs/src/lib/image-input/image-input.component.html

@@ -5,15 +5,15 @@
   <div class="w-full h-full flex flex-col gap-2">
     <div class="flex-1 group relative">
       <img
-        class="w-full h-full object-cover border-2 border-gray-300 rounded-lg"
+        class="w-full object-cover border-2 border-gray-300 rounded-lg h-[172px]"
         [alt]="altText"
         loading="lazy"
         [src]="previewUrl"
       />
       <gn-ui-button
-        [extraClass]="
-          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'
-        "
+        type="outline"
+        style="--gn-ui-button-height: 40px; --gn-ui-button-width: 40px"
+        extraClass="absolute right-2 bottom-2 invisible group-hover:visible bg-background"
         (buttonClick)="handleDelete()"
       >
         <mat-icon class="material-symbols-outlined">delete</mat-icon>
@@ -24,21 +24,23 @@
       [placeholder]="'input.image.altTextPlaceholder' | translate"
       [value]="altText ?? ''"
       (valueChange)="handleAltTextChange($event)"
+      extraClass="gn-ui-editor-textarea"
     ></gn-ui-text-input>
-    <div class="flex flex-row gap-2">
-      <gn-ui-button
-        [extraClass]="'bg-gray-200 font-bold'"
-        (buttonClick)="handleDelete()"
-      >
-        <mat-icon class="material-symbols-outlined me-1">delete</mat-icon>
+    <div class="flex flex-row gap-2 mt-2">
+      <gn-ui-button type="gray" (buttonClick)="handleDelete()">
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >delete</mat-icon
+        >
         {{ 'input.image.delete' | translate }}
       </gn-ui-button>
       <gn-ui-button
         *ngIf="!showAltTextInput"
-        [extraClass]="'bg-gray-200 font-bold'"
+        type="gray"
         (buttonClick)="toggleAltTextInput()"
       >
-        <mat-icon class="material-symbols-outlined me-1">add</mat-icon>
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >add</mat-icon
+        >
         {{ 'input.image.displayAltTextInput' | translate }}
       </gn-ui-button>
     </div>
@@ -49,11 +51,17 @@
   <div class="w-full h-full flex flex-col gap-2">
     <label
       gnUiFilesDrop
-      class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4"
+      class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100"
       [ngClass]="{
         'border-primary-lighter bg-primary-white': dragFilesOver,
-        'border-gray-300': !dragFilesOver
+        'border-gray-300': !dragFilesOver,
+        'cursor-pointer hover:border-gray-500':
+          !isUploadInProgress && !uploadError && !showUrlInput
       }"
+      [attr.tabindex]="
+        isUploadInProgress || uploadError || showUrlInput ? null : 0
+      "
+      (keydown.enter)="fileInput.click()"
       (dragFilesOver)="handleDragFilesOver($event)"
       (dropFiles)="handleDropFiles($event)"
     >
@@ -75,7 +83,7 @@
 
       <div
         *ngIf="isUploadInProgress && !uploadError"
-        class="w-14 h-14 grid items-center justify-center"
+        class="w-14 h-14 grid items-center justify-center relative"
       >
         <div class="text-gray-100 absolute">
           <mat-progress-spinner
@@ -112,12 +120,13 @@
               ? 'font-bold text-blue-500 cursor-pointer'
               : 'font-medium text-gray-500'
           "
-          (click)="handleSecondaryTextClick()"
+          (click)="handleSecondaryTextClick($event)"
         >
           {{ getSecondaryText() | translate }}
         </p>
       </div>
       <input
+        #fileInput
         type="file"
         class="hidden"
         (change)="handleFileInput($event)"
@@ -125,12 +134,11 @@
       />
     </label>
 
-    <div *ngIf="!showUrlInput" class="flex-none">
-      <gn-ui-button
-        [extraClass]="'bg-gray-200 font-bold'"
-        (buttonClick)="displayUrlInput()"
-      >
-        <mat-icon class="material-symbols-outlined me-1">link</mat-icon>
+    <div *ngIf="!showUrlInput" class="flex-none mt-2">
+      <gn-ui-button (buttonClick)="displayUrlInput()" type="gray">
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >link</mat-icon
+        >
         {{ 'input.image.displayUrlInput' | translate }}
       </gn-ui-button>
     </div>

package/src/libs/ui/inputs/src/lib/image-input/image-input.component.ts

@@ -144,11 +144,12 @@ export class ImageInputComponent {
     }
   }
 
-  handleSecondaryTextClick() {
+  handleSecondaryTextClick(event: Event) {
     if (this.uploadError) {
       this.handleRetry()
     } else if (this.uploadProgress) {
       this.handleCancel()
+      event.preventDefault()
     }
   }
 

package/src/libs/ui/inputs/src/lib/search-input/search-input.component.ts

@@ -4,12 +4,16 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { Subject, distinctUntilChanged } from 'rxjs'
+import { distinctUntilChanged, Subject } from 'rxjs'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-search-input',
   templateUrl: './search-input.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
 })
 export class SearchInputComponent {
   @Input() value = ''

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css

@@ -11,15 +11,16 @@
 }
 
 .mat-button-toggle-appearance-standard {
-  color: var(--color-main);
+  color: black;
   background-color: var(--color-gray-200);
   border-radius: 4px;
   border-left: none;
+  font-family: var(--font-family-main);
 }
 
 .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-  background-color: var(--color-main);
-  color: var(--color-primary-white);
+  background-color: black;
+  color: var(--color-background);
 }
 
 button.mat-button-toggle-button.mat-focus-indicator.mat-button-toggle-label-content {

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.html

@@ -6,7 +6,6 @@
   <mat-button-toggle
     *ngFor="let option of options"
     [aria-label]="option.label"
-    [value]="option.value"
     [checked]="option.checked"
     (change)="onChange(option)"
     [class]="extraClasses"

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.ts

@@ -10,7 +10,6 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle'
 
 export type SwitchToggleOption = {
   label: string
-  value: string
   checked: boolean
 }
 
@@ -30,7 +29,7 @@ export class SwitchToggleComponent {
 
   onChange(selectedOption: SwitchToggleOption) {
     this.options.find(
-      (option) => option.value === selectedOption.value
+      (option) => option.label === selectedOption.label
     ).checked = true
 
     this.selectedValue.emit(selectedOption)

package/src/libs/ui/inputs/src/lib/text-area/text-area.component.html

@@ -6,7 +6,7 @@
     [ngClass]="extraClass"
     [disabled]="disabled"
     [placeholder]="placeholder"
-    [value]="value"
+    [value]="value ?? ''"
     (change)="handleChange($event)"
     (input)="handleChange($event)"
     [attr.required]="required || null"

package/src/libs/ui/inputs/src/lib/text-area/text-area.component.ts

@@ -20,7 +20,7 @@ export class TextAreaComponent implements AfterViewInit {
   @Input() value = ''
   @Input() disabled = false
   @Input() extraClass = ''
-  @Input() placeholder: string
+  @Input() placeholder = ''
   @Input() required = false
 
   rawChange = new Subject<string>()

package/src/libs/ui/inputs/src/lib/ui-inputs.module.ts

@@ -24,7 +24,6 @@ import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.com
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { CommonModule } from '@angular/common'
 import { CheckboxComponent } from './checkbox/checkbox.component'
-import { SearchInputComponent } from './search-input/search-input.component'
 import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
 import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
@@ -43,7 +42,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
     ViewportIntersectorComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
-    SearchInputComponent,
   ],
   imports: [
     CommonModule,
@@ -85,7 +83,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
     CheckToggleComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
-    SearchInputComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
     ImageInputComponent,

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.html

@@ -30,7 +30,7 @@
     [disabled]="disabled || input.value === ''"
     (buttonClick)="handleChange(input)"
   >
-    <mat-icon class="material-symbols-outlined text-[20px] leading-[26px]">
+    <mat-icon class="material-symbols-outlined text-[20px] leading-[24px]">
       arrow_upward
     </mat-icon>
   </gn-ui-button>

package/src/libs/ui/layout/src/index.ts

@@ -8,4 +8,6 @@ export * from './lib/interactive-table/interactive-table-column/interactive-tabl
 export * from './lib/interactive-table/interactive-table.component'
 export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/block-list/block-list.component'
+export * from './lib/sortable-list/sortable-list.component'
+export * from './lib/modal-dialog/modal-dialog.component'
 export * from './lib/ui-layout.module'

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html

@@ -1,9 +1,10 @@
-<div class="h-full flex flex-col">
+<div class="h-full flex flex-col" *ngIf="label; else onlyContent">
   <div class="flex-none w-full flex flex-row items-center">
     <span class="flex-none font-bold">{{ label }}</span>
     <div class="flex-1 flex justify-end items-center">
       <ng-content select="[form-field-interaction]"></ng-content>
       <span
+        *ngIf="hint"
         class="material-symbols-outlined m-2 gn-ui-icon-small"
         [matTooltip]="hint"
         matTooltipPosition="above"
@@ -12,7 +13,11 @@
       </span>
     </div>
   </div>
-  <div class="flex-1 overflow-y-auto">
-    <ng-content></ng-content>
+  <div class="flex-1 mt-2">
+    <ng-container *ngTemplateOutlet="onlyContent"> </ng-container>
   </div>
 </div>
+
+<ng-template #onlyContent>
+  <ng-content></ng-content>
+</ng-template>

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-form-field-wrapper',
@@ -8,9 +9,9 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   styleUrls: ['./form-field-wrapper.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatTooltipModule],
+  imports: [MatIconModule, MatTooltipModule, CommonModule],
 })
 export class FormFieldWrapperComponent {
-  @Input() label: string
-  @Input() hint: string
+  @Input() label?: string
+  @Input() hint?: string
 }

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.css

@@ -7,7 +7,7 @@
 }
 
 .table-header-cell {
-  @apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;
+  @apply text-gray-700 px-3 py-3 flex items-center truncate bg-white;
 }
 
 button.table-header-cell {

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.html

@@ -1,5 +1,5 @@
 <div class="grid w-full" [ngStyle]="gridStyle">
-  <div class="contents">
+  <div class="contents w-full">
     <ng-container *ngFor="let column of columns">
       <button
         *ngIf="column.sortable"
@@ -44,7 +44,7 @@
     </div>
     <ng-container *ngFor="let column of columns">
       <div
-        class="table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200"
+        class="table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200"
       >
         <ng-container
           *ngTemplateOutlet="column.cell; context: { $implicit: item }"

package/src/libs/ui/layout/src/lib/modal-dialog/modal-dialog.component.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+<div mat-dialog-content>
+  <ng-container
+    *ngTemplateOutlet="data.body; context: { $implicit: data.bodyContext }"
+  ></ng-container>
+</div>
+<div mat-dialog-actions>
+  <gn-ui-button (buttonClick)="onCancel()">{{ data.cancelText }}</gn-ui-button>
+  <gn-ui-button
+    (buttonClick)="onConfirm()"
+    class="ml-2"
+    data-cy="confirm-button"
+    >{{ data.confirmText }}</gn-ui-button
+  >
+</div>

package/src/libs/ui/layout/src/lib/modal-dialog/modal-dialog.component.ts

@@ -0,0 +1,44 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  TemplateRef,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+export interface ModalDialogData {
+  title: string
+  body: TemplateRef<unknown>
+  bodyContext: unknown
+  confirmText: string
+  cancelText: string
+}
+
+@Component({
+  selector: 'gn-ui-modal-dialog',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, ButtonComponent],
+  templateUrl: './modal-dialog.component.html',
+  styleUrls: ['./modal-dialog.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModalDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ModalDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ModalDialogData
+  ) {}
+
+  onConfirm() {
+    this.dialogRef.close(true)
+  }
+
+  onCancel() {
+    this.dialogRef.close(false)
+  }
+}

package/src/libs/ui/layout/src/lib/sortable-list/sortable-list.component.html

@@ -0,0 +1,37 @@
+<div
+  cdkDropList
+  class="sortable-list flex flex-col gap-3 p-2"
+  (cdkDropListDropped)="drop($event)"
+>
+  <ng-container *ngFor="let item of items; index as index; trackBy: trackByFn">
+    <div class="sortable-box bg-white flex items-center" cdkDrag>
+      <span
+        cdkDragHandle
+        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
+      >
+        drag_handle
+      </span>
+      <div class="flex-1">
+        <ng-container
+          *ngTemplateOutlet="
+            elementTemplate;
+            context: { $implicit: item, index }
+          "
+        ></ng-container>
+      </div>
+
+      <gn-ui-button
+        type="light"
+        style="
+          --gn-ui-button-padding: 0px;
+          --gn-ui-button-width: 24px;
+          --gn-ui-button-height: 24px;
+        "
+        class="ml-[8px] mr-[10px]"
+        (buttonClick)="removeItem(index)"
+        data-test="remove-item"
+        ><span class="material-symbols-outlined gn-ui-icon-medium">close</span>
+      </gn-ui-button>
+    </div>
+  </ng-container>
+</div>

package/src/libs/ui/{elements → layout}/src/lib/sortable-list/sortable-list.component.ts

@@ -5,21 +5,17 @@ import {
   CdkDropList,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { NgComponentOutlet, NgFor } from '@angular/common'
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Input,
   Output,
-  Type,
+  TemplateRef,
 } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
-
-export type DynamicElement = {
-  component: Type<unknown>
-  inputs: Record<string, unknown>
-}
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 
 @Component({
   selector: 'gn-ui-sortable-list',
@@ -28,26 +24,27 @@ export type DynamicElement = {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgFor,
-    NgComponentOutlet,
+    CommonModule,
     CdkDropList,
     CdkDrag,
     CdkDragHandle,
     MatIconModule,
+    ButtonComponent,
   ],
 })
 export class SortableListComponent {
-  @Input() elements: Array<DynamicElement>
-  @Output() elementsChange = new EventEmitter<Array<DynamicElement>>()
+  @Input() elementTemplate: TemplateRef<unknown>
+  @Input() items: unknown[]
+  @Output() itemsOrderChange = new EventEmitter<unknown[]>()
 
   drop(event: CdkDragDrop<string[]>) {
-    moveItemInArray(this.elements, event.previousIndex, event.currentIndex)
-    this.elementsChange.emit(this.elements)
+    moveItemInArray(this.items, event.previousIndex, event.currentIndex)
+    this.itemsOrderChange.emit([...this.items])
   }
 
-  removeElement(index: number) {
-    this.elements = this.elements.filter((_, i) => i !== index)
-    this.elementsChange.emit(this.elements)
+  removeItem(index: number) {
+    this.items = this.items.filter((_, i) => i !== index)
+    this.itemsOrderChange.emit(this.items)
   }
 
   trackByFn(index: number) {

package/src/libs/ui/map/src/index.ts

@@ -1,3 +1,4 @@
-export * from './lib/ui-map.module'
-export * from './lib/components/map/map.component'
+export * from './lib/components/map-container/map-container.component'
+export * from './lib/components/map-container/map-settings.token'
 export * from './lib/components/feature-detail/feature-detail.component'
+export * from './lib/map-utils'

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="feature" class="root">
   <div class="property" *ngFor="let propName of properties">
     <div>{{ propName }}</div>
-    <div class="font-bold">{{ feature.get(propName) }}</div>
+    <div class="font-bold">{{ feature.properties[propName] }}</div>
   </div>
 </div>