geonetwork-ui 2.3.0-dev.61774f7d → 2.3.0-dev.89188551

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

@@ -3,13 +3,12 @@ import * as i1 from "./expandable-panel/expandable-panel.component";
 import * as i2 from "./sticky-header/sticky-header.component";
 import * as i3 from "./anchor-link/anchor-link.directive";
 import * as i4 from "./expandable-panel-button/expandable-panel-button.component";
-import * as i5 from "./carousel/carousel.component";
-import * as i6 from "@angular/common";
-import * as i7 from "@angular/material/icon";
-import * as i8 from "@ngx-translate/core";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "@ngx-translate/core";
 export declare class UiLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiLayoutModule, [typeof i1.ExpandablePanelComponent, typeof i2.StickyHeaderComponent, typeof i3.AnchorLinkDirective, typeof i4.ExpandablePanelButtonComponent, typeof i5.CarouselComponent], [typeof i6.CommonModule, typeof i7.MatIconModule, typeof i8.TranslateModule], [typeof i1.ExpandablePanelComponent, typeof i2.StickyHeaderComponent, typeof i3.AnchorLinkDirective, typeof i4.ExpandablePanelButtonComponent, typeof i5.CarouselComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiLayoutModule, [typeof i1.ExpandablePanelComponent, typeof i2.StickyHeaderComponent, typeof i3.AnchorLinkDirective, typeof i4.ExpandablePanelButtonComponent], [typeof i5.CommonModule, typeof i6.MatIconModule, typeof i7.TranslateModule], [typeof i1.ExpandablePanelComponent, typeof i2.StickyHeaderComponent, typeof i3.AnchorLinkDirective, typeof i4.ExpandablePanelButtonComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UiLayoutModule>;
 }
 //# sourceMappingURL=ui-layout.module.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ui-layout.module.d.ts","sourceRoot":"","sources":["../../../../../src/libs/ui/layout/src/lib/ui-layout.module.ts"],"names":[],"mappings":";;;;;;;;;AAUA,qBAiBa,cAAc;yCAAd,cAAc;0CAAd,cAAc;0CAAd,cAAc;CAAG"}
+{"version":3,"file":"ui-layout.module.d.ts","sourceRoot":"","sources":["../../../../../src/libs/ui/layout/src/lib/ui-layout.module.ts"],"names":[],"mappings":";;;;;;;;AAUA,qBAea,cAAc;yCAAd,cAAc;0CAAd,cAAc;0CAAd,cAAc;CAAG"}

package/libs/util/shared/src/lib/links/link-utils.d.ts

@@ -78,6 +78,24 @@ export declare const FORMATS: {
         readonly color: "#de630b";
         readonly mimeTypes: readonly ["application/x-dxf", "image/x-dxf"];
     };
+    readonly html: {
+        readonly extensions: readonly ["html", "htm"];
+        readonly priority: 12;
+        readonly color: "#f2bb3a";
+        readonly mimeTypes: readonly ["text/html"];
+    };
+    readonly fgb: {
+        readonly extensions: readonly ["fgb", "flatgeobuf"];
+        readonly priority: 13;
+        readonly color: "#f2bb3a";
+        readonly mimeTypes: readonly ["application/flatgeobuf"];
+    };
+    readonly jsonfg: {
+        readonly extensions: readonly ["jsonfg", "jsonfgc"];
+        readonly priority: 14;
+        readonly color: "#f2bb3a";
+        readonly mimeTypes: readonly ["application/vnd.ogc.fg+json", "application/vnd.ogc.fg+json;compatibility=geojson"];
+    };
 };
 export type FileFormat = keyof typeof FORMATS;
 export declare function getFormatPriority(linkFormat: FileFormat): number;

package/libs/util/shared/src/lib/links/link-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-utils.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/links/link-utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2DAA2D,CAAA;AAI/F,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA;AAE7C,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAUhE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAEjE;AAED,wBAAgB,8BAA8B,CAC5C,aAAa,EAAE,MAAM,GACpB,UAAU,GAAG,IAAI,CAgBnB;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,mBAAmB,GAAG,UAAU,CAcnE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,mBAAmB,EACzB,KAAK,EAAE,MAAM,GACZ,OAAO,CAQT;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAO7D;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,mBAAmB,EACzB,MAAM,EAAE,UAAU,GACjB,OAAO,CAMT;AAED,wBAAgB,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAQ5D;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CA0B9D;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAEtE"}
+{"version":3,"file":"link-utils.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/links/link-utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2DAA2D,CAAA;AAI/F,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA;AAE7C,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAUhE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAEjE;AAED,wBAAgB,8BAA8B,CAC5C,aAAa,EAAE,MAAM,GACpB,UAAU,GAAG,IAAI,CAgBnB;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,mBAAmB,GAAG,UAAU,CAcnE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,mBAAmB,EACzB,KAAK,EAAE,MAAM,GACZ,OAAO,CAQT;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAO7D;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,mBAAmB,EACzB,MAAM,EAAE,UAAU,GACjB,OAAO,CAMT;AAED,wBAAgB,aAAa,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAQ5D;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CA0B9D;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,CAEtE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonetwork-ui",
-  "version": "2.3.0-dev.61774f7d",
+  "version": "2.3.0-dev.89188551",
   "engines": {
     "node": ">=14.17.0"
   },

package/src/libs/common/fixtures/src/lib/link.fixtures.ts

@@ -110,6 +110,14 @@ export const LINK_FIXTURES: Record<string, DatasetDistribution> = deepFreeze({
     url: new URL('https://my.ogc.server/wfs'),
     accessServiceProtocol: 'wfs',
   },
+  geodataWfsDownload: {
+    name: 'mylayer',
+    type: 'download',
+    url: new URL(
+      'https://my.ogc.server/wfs?GetFeature&FeatureType=surval_parametre_ligne&format=csv'
+    ),
+    accessServiceProtocol: 'wfs',
+  },
   geodataWms2: {
     name: 'myotherlayer',
     type: 'service',

package/src/libs/common/fixtures/src/lib/records.fixtures.ts

@@ -49,8 +49,8 @@ export const DATASET_RECORDS: DatasetRecord[] = deepFreeze([
     status: 'ongoing',
     recordCreated: new Date('2022-02-01T15:12:00'),
     recordUpdated: new Date('2022-02-01T15:12:00'),
-    datasetCreated: new Date('2022-09-01T14:18:19'),
-    datasetUpdated: new Date('2022-12-04T15:12:00'),
+    resourceCreated: new Date('2022-09-01T14:18:19'),
+    resourceUpdated: new Date('2022-12-04T15:12:00'),
     title: 'A very interesting dataset (un jeu de données très intéressant)',
     abstract: `# Introduction
 This dataset has been established for testing purposes.

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -1,6 +1,11 @@
 import { Injectable } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { WfsEndpoint, WfsVersion } from '@camptocamp/ogc-client'
+import {
+  OgcApiCollectionInfo,
+  OgcApiEndpoint,
+  WfsEndpoint,
+  WfsVersion,
+} from '@camptocamp/ogc-client'
 import {
   BaseReader,
   FetchError,
@@ -27,6 +32,7 @@ marker('wfs.unreachable.http')
 marker('wfs.unreachable.unknown')
 marker('wfs.featuretype.notfound')
 marker('wfs.geojsongml.notsupported')
+marker('ogc.unreachable.unknown')
 marker('dataset.error.network')
 marker('dataset.error.http')
 marker('dataset.error.parse')
@@ -148,6 +154,35 @@ export class DataService {
     )
   }
 
+  async getDownloadLinksFromOgcApiFeatures(
+    ogcApiLink: DatasetServiceDistribution
+  ): Promise<DatasetDistribution[]> {
+    const collectionInfo = await this.getDownloadUrlsFromOgcApi(
+      ogcApiLink.url.href
+    )
+    return Object.keys(collectionInfo.bulkDownloadLinks).map((downloadLink) => {
+      return {
+        ...ogcApiLink,
+        type: 'download',
+        url: new URL(collectionInfo.bulkDownloadLinks[downloadLink]),
+        mimeType: getMimeTypeForFormat(
+          getFileFormatFromServiceOutput(downloadLink)
+        ),
+      }
+    })
+  }
+
+  async getDownloadUrlsFromOgcApi(url: string): Promise<OgcApiCollectionInfo> {
+    const endpoint = new OgcApiEndpoint(this.proxy.getProxiedUrl(url))
+    return await endpoint.featureCollections
+      .then((collections) => {
+        return endpoint.getCollectionInfo(collections[0])
+      })
+      .catch((error) => {
+        throw new Error(`ogc.unreachable.unknown`)
+      })
+  }
+
   getDownloadLinksFromEsriRest(
     esriRestLink: DatasetServiceDistribution
   ): DatasetDistribution[] {
@@ -205,6 +240,21 @@ export class DataService {
         'geojson'
       )
       return from(openDataset(url, 'geojson')).pipe()
+    } else if (
+      link.type === 'service' &&
+      link.accessServiceProtocol === 'ogcFeatures'
+    ) {
+      return from(this.getDownloadUrlsFromOgcApi(link.url.href)).pipe(
+        switchMap((collectionInfo) => {
+          const geojsonUrl = collectionInfo.jsonDownloadLink
+          return openDataset(geojsonUrl, 'geojson')
+        }),
+        tap((url) => {
+          if (url === null) {
+            throw new Error('wfs.geojsongml.notsupported')
+          }
+        })
+      )
     }
     return throwError(() => 'protocol not supported')
   }

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

@@ -0,0 +1,8 @@
+<gn-ui-dropdown-selector
+  [title]="label"
+  [showTitle]="false"
+  [choices]="choices"
+  [selected]="selected"
+  (selectValue)="onSelectValue($event)"
+>
+</gn-ui-dropdown-selector>

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

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { DropdownSelectorComponent } from '../../../../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-form-field-license',
+  templateUrl: './form-field-license.component.html',
+  styleUrls: ['./form-field-license.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DropdownSelectorComponent],
+})
+export class FormFieldLicenseComponent {
+  @Input() control!: FormControl
+  @Input() label: string
+
+  get selected() {
+    return this.control.value[0]?.text
+  }
+
+  onSelectValue(value: unknown) {
+    this.control.setValue([{ text: value }])
+  }
+
+  choices = [
+    {
+      value: 'cc-by',
+      label: marker('editor.record.form.license.cc-by'),
+    },
+    {
+      value: 'cc-by-sa',
+      label: marker('editor.record.form.license.cc-by-sa'),
+    },
+    {
+      value: 'cc-zero',
+      label: marker('editor.record.form.license.cc-zero'),
+    },
+    {
+      value: 'etalab',
+      label: marker('editor.record.form.license.etalab'),
+    },
+    {
+      value: 'etalab-v2',
+      label: marker('editor.record.form.license.etalab-v2'),
+    },
+    {
+      value: 'odbl',
+      label: marker('editor.record.form.license.odbl'),
+    },
+    {
+      value: 'odc-by',
+      label: marker('editor.record.form.license.odc-by'),
+    },
+    {
+      value: 'pddl',
+      label: marker('editor.record.form.license.pddl'),
+    },
+    {
+      value: 'unknown',
+      label: marker('editor.record.form.license.unknown'),
+    },
+  ]
+}

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

@@ -0,0 +1,4 @@
+<gn-ui-date-picker
+  [date]="control.value"
+  (dateChange)="control.setValue($event)"
+></gn-ui-date-picker>

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

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { DatePickerComponent } from '../../../../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-form-field-resource-updated',
+  templateUrl: './form-field-resource-updated.component.html',
+  styleUrls: ['./form-field-resource-updated.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DatePickerComponent],
+})
+export class FormFieldResourceUpdatedComponent {
+  @Input() control!: FormControl
+}

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

@@ -1,29 +1,18 @@
 <div class="flex flex-col h-full">
-  <div class="mb-2 flex flex-row">
-    <label class="grow">
-      <span class="font-medium field-label">{{
-        config.labelKey | translate
-      }}</span>
-      <span *ngIf="config.hintKey" class="text-gray-900 text-sm">
-        - {{ config.hintKey | translate }}
-      </span>
-    </label>
-    <mat-icon
-      *ngIf="isFieldOk"
-      class="material-symbols-outlined text-[#c6d950] icon-ok"
-      >check_circle</mat-icon
-    >
-    <mat-icon
-      *ngIf="isFieldLocked"
-      class="material-symbols-outlined text-blue-400 icon-locked"
-      >lock</mat-icon
-    >
-    <mat-icon
-      *ngIf="isFieldInvalid"
-      class="material-symbols-outlined text-pink-500 icon-invalid"
-      >cancel</mat-icon
+  <ng-container *ngIf="withoutWrapper; else withGenericWrapper">
+    <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
+  </ng-container>
+  <ng-template #withGenericWrapper>
+    <gn-ui-form-field-wrapper
+      [label]="config.labelKey | translate"
+      [hint]="config.hintKey | translate"
     >
-  </div>
+      <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
+    </gn-ui-form-field-wrapper>
+  </ng-template>
+</div>
+
+<ng-template #fieldContent>
   <ng-container *ngIf="isTitle">
     <div class="flex justify-between items-center gap-3">
       <h2
@@ -48,6 +37,25 @@
       </span>
     </div>
   </ng-container>
+  <ng-container *ngIf="isAbstract">
+    <gn-ui-form-field-rich
+      class="h-[8rem]"
+      [control]="formControl"
+      [label]="config.labelKey | translate"
+      [hint]="config.hintKey | translate"
+    ></gn-ui-form-field-rich>
+  </ng-container>
+  <ng-container *ngIf="isLicenses">
+    <gn-ui-form-field-license
+      [control]="formControl"
+      [label]="config.labelKey | translate"
+    ></gn-ui-form-field-license>
+  </ng-container>
+  <ng-container *ngIf="isResourceUpdated">
+    <gn-ui-form-field-resource-updated
+      [control]="formControl"
+    ></gn-ui-form-field-resource-updated>
+  </ng-container>
   <ng-container *ngIf="isSimpleField">
     <gn-ui-form-field-simple
       [type]="simpleType"
@@ -63,14 +71,6 @@
       [invalid]="isFieldInvalid"
     ></gn-ui-form-field-file>
   </ng-container>
-  <ng-container *ngIf="isAbstract">
-    <gn-ui-form-field-rich
-      class="h-[8rem]"
-      [control]="formControl"
-      [label]="config.labelKey | translate"
-      [hint]="config.hintKey | translate"
-    ></gn-ui-form-field-rich>
-  </ng-container>
   <ng-container *ngIf="isArrayField">
     <gn-ui-form-field-array></gn-ui-form-field-array>
   </ng-container>
@@ -89,4 +89,4 @@
   >
     {{ config.invalidHintKey | translate }}
   </div>
-</div>
+</ng-template>

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

@@ -11,11 +11,14 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { EditableLabelDirective } from '../../../../../../../../libs/ui/inputs/src'
+import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { Observable } from 'rxjs'
 import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
 import { FormFieldFileComponent } from './form-field-file/form-field-file.component'
+import { FormFieldLicenseComponent } from './form-field-license/form-field-license.component'
 import { FormFieldObjectComponent } from './form-field-object/form-field-object.component'
+import { FormFieldResourceUpdatedComponent } from './form-field-resource-updated/form-field-resource-updated.component'
 import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
 import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
@@ -34,6 +37,9 @@ import { FormFieldConfig } from './form-field.model'
     EditableLabelDirective,
     MatIconModule,
     MatTooltipModule,
+    FormFieldWrapperComponent,
+    FormFieldLicenseComponent,
+    FormFieldResourceUpdatedComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
     FormFieldObjectComponent,
@@ -118,4 +124,14 @@ export class FormFieldComponent {
   get isAbstract() {
     return this.model === 'abstract'
   }
+  get isLicenses() {
+    return this.model === 'licenses'
+  }
+  get isResourceUpdated() {
+    return this.model === 'resourceUpdated'
+  }
+
+  get withoutWrapper() {
+    return this.model === 'title' || this.model === 'abstract'
+  }
 }

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

@@ -1,3 +1,4 @@
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { EditorFieldsConfig } from './models/fields.model'
 
 export const DEFAULT_FIELDS: EditorFieldsConfig = [
@@ -32,4 +33,18 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [
     },
     onSaveProcess: '${dateNow()}',
   },
+  {
+    model: 'licenses',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.license'),
+      type: 'list',
+    },
+  },
+  {
+    model: 'resourceUpdated',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.resourceUpdated'),
+      type: 'date',
+    },
+  },
 ]

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -196,7 +196,8 @@ export class MapViewComponent implements OnInit, OnDestroy {
     } else if (
       (link.type === 'service' &&
         (link.accessServiceProtocol === 'wfs' ||
-          link.accessServiceProtocol === 'esriRest')) ||
+          link.accessServiceProtocol === 'esriRest' ||
+          link.accessServiceProtocol === 'ogcFeatures')) ||
       link.type === 'download'
     ) {
       return this.dataService.readAsGeoJson(link).pipe(

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -8,7 +8,6 @@ import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/
 import {
   CatalogRecord,
   UserFeedback,
-  UserFeedbackViewModel,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
 

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -95,6 +95,6 @@ export class DownloadsListComponent {
   }
 
   isFromWfs(link: DatasetDistribution) {
-    return link.type === 'service' && link.accessServiceProtocol === 'wfs'
+    return link.type === 'download' && link.accessServiceProtocol === 'wfs'
   }
 }

package/src/libs/ui/elements/src/lib/link-card/link-card.component.html

@@ -1,25 +1,43 @@
 <a
   [href]="link.url"
   target="_blank"
-  class="flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80"
+  class="flex flex-col justify-between group grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden"
+  [ngClass]="{ 'h-40': !compact }"
+  [title]="title"
 >
-  <div class="max-h-24 overflow-hidden text-ellipsis">
-    <p
-      class="font-title font-medium text-21 text-black break-words mb-1 line-clamp-2"
-    >
-      {{ link.name }}
-    </p>
-    <p class="font-medium text-sm break-words">
-      {{ link.description }}
-    </p>
-    <p
-      *ngIf="!link.name && !link.description"
-      class="font-medium text-sm break-words truncate"
-    >
-      {{ link.url }}
-    </p>
-  </div>
-  <div>
-    <mat-icon class="material-symbols-outlined card-icon">open_in_new</mat-icon>
-  </div>
+  <ng-container *ngIf="!compact; else compactTpl">
+    <div class="max-h-24 overflow-hidden text-ellipsis">
+      <p
+        class="font-title font-medium text-21 text-black break-words mb-1 line-clamp-2"
+      >
+        {{ link.name }}
+      </p>
+      <p class="font-medium text-sm break-words">
+        {{ link.description }}
+      </p>
+      <p
+        *ngIf="!link.name && !link.description"
+        class="font-medium text-sm break-words truncate"
+      >
+        {{ link.url }}
+      </p>
+    </div>
+    <div>
+      <mat-icon class="material-symbols-outlined card-icon"
+        >open_in_new</mat-icon
+      >
+    </div>
+  </ng-container>
+  <ng-template #compactTpl>
+    <div class="flex items-center justify-between gap-4">
+      <p
+        class="overflow-hidden font-title font-medium text-21 text-black text-ellipsis whitespace-nowrap"
+      >
+        {{ link.name || link.description }}
+      </p>
+      <mat-icon class="material-symbols-outlined card-icon flex-shrink-0"
+        >open_in_new</mat-icon
+      >
+    </div>
+  </ng-template>
 </a>

package/src/libs/ui/elements/src/lib/link-card/link-card.component.ts

@@ -1,12 +1,24 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
 import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-link-card',
   templateUrl: './link-card.component.html',
   styleUrls: ['./link-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
 })
 export class LinkCardComponent {
   @Input() link: DatasetDistribution
+  @Input() compact = false
+
+  get title() {
+    if (this.link.name && this.link.description) {
+      return `${this.link.name} | ${this.link.description}`
+    }
+    return this.link.name || this.link.description || ''
+  }
 }

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html

@@ -55,7 +55,7 @@
           extraBtnClass="secondary min-w-full !w-40 !text-black"
           [showTitle]="false"
           class="text-black"
-          [choices]="formatsList"
+          [choices]="outputFormats"
           (selectValue)="setFormat($event)"
           [selected]="format$ | async"
         ></gn-ui-dropdown-selector>

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { OgcApiEndpoint } from '@camptocamp/ogc-client'
 import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { mimeTypeToFormat } from '../../../../../../libs/util/shared/src'
 import { BehaviorSubject, combineLatest, map } from 'rxjs'
 
 const DEFAULT_PARAMS = {
@@ -15,17 +17,18 @@ const DEFAULT_PARAMS = {
 })
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {
-    this.apiBaseUrl = value ? value.url.href : undefined
+    this.outputFormats = [{ value: 'json', label: 'JSON' }]
+    if (value) {
+      this.apiBaseUrl = value.url.href
+      this.parseOutputFormats()
+    }
     this.resetUrl()
   }
   offset$ = new BehaviorSubject('')
   limit$ = new BehaviorSubject('')
   format$ = new BehaviorSubject('')
   apiBaseUrl: string
-  formatsList = [
-    { label: 'JSON', value: 'json' },
-    { label: 'CSV', value: 'csv' },
-  ]
+  outputFormats = [{ value: 'json', label: 'JSON' }]
   apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(
     map(([offset, limit, format]) => {
       let outputUrl
@@ -70,4 +73,39 @@ export class RecordApiFormComponent {
     this.limit$.next(DEFAULT_PARAMS.LIMIT)
     this.format$.next(DEFAULT_PARAMS.FORMAT)
   }
+
+  parseOutputFormats() {
+    const apiUrl =
+      this.apiBaseUrl.slice(-1) === '?'
+        ? this.apiBaseUrl.slice(0, -1)
+        : this.apiBaseUrl
+
+    this.getOutputFormats(apiUrl).then((outputFormats) => {
+      const formatsList = outputFormats.itemFormats.map((format) => {
+        const normalizedFormat = mimeTypeToFormat(format)
+        if (normalizedFormat) {
+          return {
+            label: normalizedFormat?.toUpperCase(),
+            value: normalizedFormat,
+          }
+        }
+        return null
+      })
+      this.outputFormats = this.outputFormats.concat(
+        formatsList.filter(Boolean)
+      )
+      this.outputFormats = this.outputFormats
+        .filter(
+          (format, index, self) =>
+            index === self.findIndex((t) => t.value === format.value)
+        )
+        .sort((a, b) => a.label.localeCompare(b.label))
+    })
+  }
+
+  async getOutputFormats(url) {
+    const endpoint = await new OgcApiEndpoint(url)
+    const firstCollection = (await endpoint.featureCollections)[0]
+    return endpoint.getCollectionInfo(firstCollection)
+  }
 }

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

@@ -57,7 +57,6 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,
@@ -80,7 +79,6 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,