geonetwork-ui 2.6.0-dev.9df114cd4 → 2.6.0-dev.b1563a5e0

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

@@ -33,6 +33,7 @@ import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-a
 import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
 import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
 import { EditableLabelDirective } from './editable-label/editable-label.directive'
+import { InlineFilterComponent } from './inline-filter/inline-filter.component'
 import { TextAreaComponent } from './text-area/text-area.component'
 import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
 
@@ -42,6 +43,7 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
     CheckboxComponent,
+    InlineFilterComponent,
   ],
   imports: [
     CommonModule,
@@ -75,9 +77,6 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
       matExpandMore,
       matExpandLess,
     }),
-    provideNgIconsConfig({
-      size: '0.9em',
-    }),
   ],
   exports: [
     DropdownSelectorComponent,
@@ -90,6 +89,7 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
     CheckboxComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
+    InlineFilterComponent,
     BadgeComponent,
   ],
 })

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

@@ -16,3 +16,4 @@ export * from './lib/pagination-dots/pagination-dots.component'
 export * from './lib/previous-next-buttons/previous-next-buttons.component'
 export * from './lib/paginable.interface'
 export * from './lib/ui-layout.module'
+export * from './lib/truncated-text/truncated-text.component'

package/src/libs/ui/layout/src/lib/block-list/block-list.component.css

@@ -5,3 +5,25 @@
 :host {
   position: relative;
 }
+
+@media screen and (min-width: 769px) {
+  .size-L {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-M {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-S {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-XS {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+}

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

@@ -1,7 +1,7 @@
 <div
-  class="block-list-container flex flex-col"
+  class="grid gap-4 w-full md:grid-cols-2"
   #blockContainer
-  [ngClass]="containerClass"
+  [ngClass]="[containerClass, 'size-' + subComponentSize]"
   [ngStyle]="{ minHeight: minHeight + 'px' }"
 >
   <ng-content></ng-content>

package/src/libs/ui/layout/src/lib/block-list/block-list.component.ts

@@ -5,7 +5,9 @@ import {
   Component,
   ContentChildren,
   ElementRef,
+  EventEmitter,
   Input,
+  Output,
   QueryList,
   ViewChild,
 } from '@angular/core'
@@ -13,6 +15,7 @@ import { CommonModule } from '@angular/common'
 import { Paginable } from '../paginable.interface'
 import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.component'
 
+type ComponentSize = 'L' | 'M' | 'S' | 'XS'
 @Component({
   selector: 'gn-ui-block-list',
   templateUrl: './block-list.component.html',
@@ -22,15 +25,16 @@ import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.comp
   imports: [CommonModule, PaginationDotsComponent],
 })
 export class BlockListComponent implements AfterViewInit, Paginable {
-  @Input() pageSize = 5
+  pageSize = 4
   @Input() containerClass = ''
   @Input() paginationContainerClass = 'w-full bottom-0 top-auto'
   @ContentChildren('block', { read: ElementRef }) blocks: QueryList<
     ElementRef<HTMLElement>
   >
   @ViewChild('blockContainer') blockContainer: ElementRef<HTMLElement>
-
   protected minHeight = 0
+  @Output() listChanges = new EventEmitter<BlockListComponent>()
+  subComponentSize: ComponentSize = 'M'
 
   protected currentPage_ = 0
   protected get pages() {
@@ -47,18 +51,26 @@ export class BlockListComponent implements AfterViewInit, Paginable {
     return this.blocks ? Math.ceil(this.blocks.length / this.pageSize) : 1
   }
   get currentPage() {
-    return this.currentPage_ + 1 // this is 1-based
+    return this.currentPage_ + 1
   }
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
   ngAfterViewInit() {
-    this.blocks.changes.subscribe(this.refreshBlocksVisibility)
+    this.blocks.changes.subscribe(() => {
+      this.updateSizes()
+      this.refreshBlocksVisibility()
+      this.goToPage(1)
+      this.changeDetector.detectChanges()
+      this.listChanges.emit(this)
+    })
+    this.updateSizes()
     this.refreshBlocksVisibility()
 
     // we store the first height as the min-height of the list container
     this.minHeight = this.blockContainer.nativeElement.clientHeight
     this.changeDetector.detectChanges()
+    this.listChanges.emit(this)
   }
 
   protected refreshBlocksVisibility = () => {
@@ -71,7 +83,33 @@ export class BlockListComponent implements AfterViewInit, Paginable {
     })
   }
 
-  // pageIndex is 1-based
+  protected updateSizes() {
+    this.subComponentSize = this.computeSubComponentSize()
+    this.pageSize = this.computePageSize()
+  }
+
+  protected computeSubComponentSize(): ComponentSize {
+    if (!this.blocks) return 'M'
+    const subComponentsCount = this.blocks.length
+    if (subComponentsCount <= 3) return 'L'
+    if (subComponentsCount <= 12) return 'M'
+    if (subComponentsCount <= 18) return 'S'
+    return 'XS'
+  }
+
+  protected computePageSize(): number {
+    switch (this.subComponentSize) {
+      case 'L':
+        return 3
+      case 'S':
+        return 6
+      case 'XS':
+        return 8
+      default:
+        return 4
+    }
+  }
+
   public goToPage(pageIndex: number) {
     this.currentPage_ = Math.max(
       Math.min(pageIndex - 1, this.pagesCount - 1),

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -1,4 +1,3 @@
 :host {
   position: relative;
-  display: block;
 }

package/src/libs/ui/layout/src/lib/carousel/carousel.component.html

@@ -1,4 +1,4 @@
-<div #carouselOverflowContainer class="w-full">
+<div #carouselOverflowContainer class="w-full block">
   <div class="carousel-container flex" [ngClass]="containerClass">
     <ng-content></ng-content>
   </div>

package/src/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html

@@ -1,22 +1,38 @@
 <div
-  class="group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5"
+  class="group flex items-center justify-between title border-b border-gray-100 cursor-pointer"
   (click)="toggle()"
+  data-cy="expandable-panel-header"
 >
-  <div class="grow font-medium text-black text-sm">
-    {{ title }}
+  <div class="grow py-2.5">
+    <ng-container *ngIf="titleTemplate; else simpleTitle">
+      <div data-cy="expandable-panel-custom-title">
+        <ng-container *ngTemplateOutlet="titleTemplate"></ng-container>
+      </div>
+    </ng-container>
+    <ng-template #simpleTitle>
+      <div
+        class="font-medium text-black text-sm"
+        data-cy="expandable-panel-title"
+      >
+        {{ title }}
+      </div>
+    </ng-template>
   </div>
   <div
-    class="w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity"
+    class="w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity flex items-center shrink-0"
   >
-    <ng-icon name="matAdd" *ngIf="collapsed"></ng-icon>
-    <ng-icon name="matRemove" *ngIf="!collapsed"></ng-icon>
+    <ng-icon
+      [name]="collapsed ? 'matAdd' : 'matRemove'"
+      [style.color]="iconColor"
+    ></ng-icon>
   </div>
 </div>
 <div
-  class="content overflow-hidden transition-[max-height] duration-300"
+  class="content overflow-hidden transition-all duration-300"
   [ngClass]="collapsed ? 'ease-out' : 'ease-in'"
-  [style.maxHeight]="maxHeight"
   #contentDiv
+  *ngIf="!collapsed"
+  data-cy="expandable-panel-content"
 >
   <ng-content></ng-content>
 </div>

package/src/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts

@@ -1,9 +1,14 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ContentChild,
   ElementRef,
   Input,
+  TemplateRef,
   ViewChild,
+  OnDestroy,
+  ChangeDetectorRef,
+  AfterViewInit,
 } from '@angular/core'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
@@ -18,20 +23,41 @@ import { matAdd, matRemove } from '@ng-icons/material-icons/baseline'
   imports: [CommonModule, NgIcon],
   viewProviders: [provideIcons({ matAdd, matRemove })],
 })
-export class ExpandablePanelComponent {
-  @Input() title: string
-  @Input() collapsed = true
-  @ViewChild('contentDiv') contentDiv: ElementRef
-  maxHeight = this.setMaxHeight()
+export class ExpandablePanelComponent implements AfterViewInit, OnDestroy {
+  @Input() title?: string
+  @Input() iconColor? = ''
+  @ContentChild('titleTemplate') titleTemplate?: TemplateRef<HTMLElement>
+  @ViewChild('contentDiv') contentDiv?: ElementRef
+
+  private _collapsed = true
+  private contentObserver?: ResizeObserver
+
+  constructor(private readonly changeDetector: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    if (this.contentDiv) {
+      this.contentObserver = new ResizeObserver(() => {
+        this.changeDetector.detectChanges()
+      })
+      this.contentObserver.observe(this.contentDiv.nativeElement)
+    }
+  }
+
+  @Input() set collapsed(value: boolean) {
+    this._collapsed = value
+  }
+
+  get collapsed(): boolean {
+    return this._collapsed
+  }
 
   toggle(): void {
     this.collapsed = !this.collapsed
-    this.maxHeight = this.setMaxHeight()
   }
 
-  setMaxHeight() {
-    return `${
-      this.collapsed ? '0' : this.contentDiv.nativeElement.scrollHeight
-    }px`
+  ngOnDestroy() {
+    if (this.contentObserver) {
+      this.contentObserver.disconnect()
+    }
   }
 }

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

@@ -31,11 +31,7 @@
     *ngFor="let item of items"
     (click)="handleRowClick(item)"
     data-cy="table-row"
-    [title]="
-      !item.extras?.edit && !isDraftPage
-        ? ('editor.record.lock.reason' | translate)
-        : ''
-    "
+    [title]="getItemTitle(item) | translate"
   >
     <div
       class="relative h-0"
@@ -52,9 +48,9 @@
         class="table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate border-b border-gray-200"
         [ngClass]="{
           'text-purple-light cursor-default':
-            !item.extras?.edit && !isDraftPage,
+            (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',
           'group-hover:text-main group-hover:bg-gray-50':
-            item.extras?.edit || isDraftPage,
+            (item.extras?.edit || isDraftPage) && item.kind === 'dataset',
         }"
       >
         <ng-container

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

@@ -12,7 +12,11 @@ import { CommonModule } from '@angular/common'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
 import { iconoirNavArrowDown, iconoirNavArrowUp } from '@ng-icons/iconoir'
 import { TranslateModule } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
+marker('editor.record.lock.reason')
+marker('editor.record.lock.format')
 @Component({
   selector: 'gn-ui-interactive-table',
   templateUrl: './interactive-table.component.html',
@@ -44,6 +48,15 @@ export class InteractiveTableComponent {
     }
   }
 
+  getItemTitle(item: CatalogRecord) {
+    if (!item.extras?.edit && !this.isDraftPage && item.kind === 'dataset') {
+      return 'editor.record.lock.reason'
+    } else if (item.kind !== 'dataset') {
+      return 'editor.record.lock.format'
+    }
+    return ''
+  }
+
   handleRowClick(item: unknown) {
     this.itemClick.emit(item)
   }

package/src/libs/ui/layout/src/lib/max-lines/max-lines.component.html

@@ -13,7 +13,7 @@
 <div
   *ngIf="showToggleButton"
   (click)="toggleDisplay()"
-  class="text-secondary cursor-pointer pt-2.5"
+  class="text-primary cursor-pointer pt-2.5"
   data-cy="readMoreButton"
 >
   {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.html

@@ -1,18 +1,30 @@
-<div class="flex flex-row gap-x-4 items-center">
+<div class="flex flex-row gap-x-1 items-center">
   <gn-ui-button
     data-test="previousButton"
-    type="outline"
+    type="light"
+    [extraClass]="
+      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      (!listComponent.isFirstPage
+        ? 'border border-gray-300'
+        : 'border border-gray-100')
+    "
     [disabled]="listComponent.isFirstPage"
     (buttonClick)="listComponent.goToPrevPage()"
   >
-    <ng-icon name="matArrowBack"></ng-icon>
+    <ng-icon name="matArrowBackIos"></ng-icon>
   </gn-ui-button>
   <gn-ui-button
     data-test="nextButton"
-    type="outline"
+    type="light"
+    [extraClass]="
+      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      (!listComponent.isLastPage
+        ? 'border border-gray-300'
+        : 'border border-gray-100')
+    "
     [disabled]="listComponent.isLastPage"
     (buttonClick)="listComponent.goToNextPage()"
   >
-    <ng-icon name="matArrowForward"></ng-icon>
+    <ng-icon name="matArrowForwardIos"></ng-icon>
   </gn-ui-button>
 </div>

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.ts

@@ -5,8 +5,8 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import {
-  matArrowBack,
-  matArrowForward,
+  matArrowBackIos,
+  matArrowForwardIos,
 } from '@ng-icons/material-icons/baseline'
 import { Paginable } from '../paginable.interface'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
@@ -18,7 +18,7 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
   standalone: true,
   imports: [ButtonComponent, NgIconComponent],
   providers: [
-    provideIcons({ matArrowForward, matArrowBack }),
+    provideIcons({ matArrowBackIos, matArrowForwardIos }),
     provideNgIconsConfig({
       size: '0.875em',
     }),

package/src/libs/ui/layout/src/lib/truncated-text/truncated-text.component.html

@@ -0,0 +1,44 @@
+<div
+  class="flex items-center justify-between w-full gap-2"
+  cdkOverlayOrigin
+  [class]="extraClass"
+  #trigger="cdkOverlayOrigin"
+>
+  <span #textElement class="truncate">
+    {{ text }}
+  </span>
+  <gn-ui-button
+    *ngIf="isTextTruncated"
+    type="outline"
+    extraClass="w-10 h-8 border rounded-lg"
+    (buttonClick)="toggleOverlay()"
+  >
+    <ng-icon name="iconoirExpand" size="24"> </ng-icon>
+  </gn-ui-button>
+
+  <ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayOpen]="isOpen"
+    [cdkConnectedOverlayPositions]="[overlayPosition]"
+    cdkConnectedOverlayPush
+    [cdkConnectedOverlayWidth]="'auto'"
+    [cdkConnectedOverlayFlexibleDimensions]="true"
+    [cdkConnectedOverlayGrowAfterOpen]="true"
+    (detach)="close()"
+  >
+    <div class="bg-white shadow-lg border border-gray-300 flex">
+      <div class="sm:w-64 xs:w-32">
+        <p class="m-2">{{ text }}</p>
+      </div>
+      <gn-ui-button
+        class="m-2 flex-shrink-0"
+        type="light"
+        (buttonClick)="close()"
+        extraClass="w-10 h-8 px-1 bg-white"
+      >
+        <ng-icon name="iconoirReduce" size="24"> </ng-icon>
+      </gn-ui-button>
+    </div>
+  </ng-template>
+</div>

package/src/libs/ui/layout/src/lib/truncated-text/truncated-text.component.ts

@@ -0,0 +1,130 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  ViewChild,
+  NgZone,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { provideIcons, NgIconComponent } from '@ng-icons/core'
+import { iconoirExpand, iconoirReduce } from '@ng-icons/iconoir'
+import { TranslateModule } from '@ngx-translate/core'
+import { MatButtonModule } from '@angular/material/button'
+import {
+  OverlayModule,
+  ViewportRuler,
+  ConnectedPosition,
+} from '@angular/cdk/overlay'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { Subscription } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-truncated-text',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    MatButtonModule,
+    OverlayModule,
+    ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [provideIcons({ iconoirExpand, iconoirReduce })],
+  templateUrl: './truncated-text.component.html',
+  styles: [],
+})
+export class TruncatedTextComponent implements AfterViewInit, OnDestroy {
+  @Input() text = ''
+  @Input() extraClass = ''
+
+  @ViewChild('textElement') textElement: ElementRef<HTMLElement>
+  isTextTruncated = false
+  isOpen = false
+  overlayPosition: ConnectedPosition = {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+  }
+  private readonly resizeObserver: ResizeObserver
+  private readonly mutationObserver: MutationObserver
+  private readonly viewportSubscription: Subscription
+
+  constructor(
+    private readonly cd: ChangeDetectorRef,
+    private readonly ngZone: NgZone,
+    private readonly viewportRuler: ViewportRuler
+  ) {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.ngZone.run(() => this.checkTextTruncation())
+    })
+
+    this.mutationObserver = new MutationObserver(() => {
+      this.ngZone.run(() => {
+        this.checkTextTruncation()
+        this.close()
+      })
+    })
+
+    this.viewportSubscription = this.viewportRuler.change().subscribe(() => {
+      if (this.isOpen) {
+        this.updateOverlayPosition()
+      }
+    })
+  }
+
+  ngAfterViewInit() {
+    const element = this.textElement.nativeElement
+    this.resizeObserver?.observe(element)
+    this.mutationObserver?.observe(element.parentElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    })
+    this.checkTextTruncation()
+  }
+
+  ngOnDestroy() {
+    this.resizeObserver?.disconnect()
+    this.mutationObserver?.disconnect()
+    this.viewportSubscription?.unsubscribe()
+    this.close()
+  }
+
+  toggleOverlay() {
+    this.isOpen = !this.isOpen
+    if (this.isOpen) {
+      this.updateOverlayPosition()
+    }
+  }
+
+  private updateOverlayPosition() {
+    const element = this.textElement.nativeElement
+    const rect = element.getBoundingClientRect()
+    const viewportWidth = this.viewportRuler.getViewportSize().width
+    const isMobile = viewportWidth < 640
+    const overlayWidth = isMobile ? 190 : 320
+    const isNearLeftEdge = rect.left < overlayWidth
+
+    this.overlayPosition = {
+      originX: isNearLeftEdge ? 'start' : 'end',
+      originY: 'top',
+      overlayX: isNearLeftEdge ? 'start' : 'end',
+      overlayY: 'top',
+    }
+  }
+
+  close() {
+    this.isOpen = false
+  }
+
+  private checkTextTruncation() {
+    const element = this.textElement.nativeElement
+
+    this.isTextTruncated = element.scrollWidth > element.clientWidth
+    this.cd.detectChanges()
+  }
+}

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

@@ -7,11 +7,7 @@ import { NgIconComponent, provideNgIconsConfig } from '@ng-icons/core'
 
 @NgModule({
   imports: [CommonModule, TranslateModule.forChild(), NgIconComponent],
-  providers: [
-    provideNgIconsConfig({
-      size: '0.9em',
-    }),
-  ],
+  providers: [],
   declarations: [StickyHeaderComponent, AnchorLinkDirective],
   exports: [StickyHeaderComponent, AnchorLinkDirective],
 })

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

@@ -3,3 +3,4 @@ export * from './lib/components/map-container/map-settings.token'
 export * from './lib/components/feature-detail/feature-detail.component'
 export * from './lib/components/map-legend/map-legend.component'
 export * from './lib/map-utils'
+export * from './lib/components/spatial-extent/spatial-extent.component'

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.properties[propName] }}</div>
+  <div class="property" *ngFor="let prop of properties | keyvalue">
+    <div>{{ prop.key }}</div>
+    <div class="font-bold">{{ prop.value }}</div>
   </div>
 </div>

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

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import type { Feature } from 'geojson'
+import { DatasetFeatureCatalog } from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 const geometryKeys = ['geometry', 'the_geom']
 
@@ -14,11 +15,34 @@ const geometryKeys = ['geometry', 'the_geom']
 })
 export class FeatureDetailComponent {
   @Input() feature: Feature
+  _featureAttributes = []
+  @Input() set featureCatalog(value: DatasetFeatureCatalog) {
+    if (value) this._featureAttributes = value.featureTypes[0].attributes
+  }
 
   get properties() {
     if (!this.feature) return []
-    return Object.keys(this.feature.properties).filter(
-      (prop) => !geometryKeys.includes(prop)
-    )
+    return this.setProperties()
+  }
+
+  setProperties() {
+    const properties = Object.keys(this.feature.properties)
+      .filter((p) => !geometryKeys.includes(p))
+      .reduce((acc, p) => {
+        let key = p
+        if (this._featureAttributes.length) {
+          const matchingAttribute = this._featureAttributes.find(
+            (attr) => attr.name === p
+          )
+
+          if (matchingAttribute && matchingAttribute.code) {
+            key = matchingAttribute.code
+          }
+        }
+        acc[key] = this.feature.properties[p]
+        return acc
+      }, {})
+
+    return properties
   }
 }