geonetwork-ui 2.6.0-dev.d216c4dea → 2.6.0-dev.d8333ac5d

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -36,6 +36,7 @@ export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken<boolean>(
 })
 export class ExternalViewerButtonComponent {
   @Input() link: DatasetOnlineResource
+  @Input() extraClass = ''
 
   get externalViewer() {
     return !!this.urlTemplate && !!this.supportedLinkLayerType

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

@@ -1,18 +1,24 @@
-<div class="w-full h-full flex flex-col p-1">
-  <div class="w-full flex justify-end">
-    <gn-ui-dropdown-selector
-      [ngClass]="{ hidden: !displaySource }"
-      class="truncate p-1 -mx-1 mb-1"
-      extraBtnClass="!text-primary font-sans font-medium"
-      [title]="'map.select.layer' | translate"
-      [choices]="dropdownChoices$ | async"
-      (selectValue)="selectLinkToDisplay($event)"
-    ></gn-ui-dropdown-selector>
-    <gn-ui-external-viewer-button
-      class="shrink-0 py-1 place-self-end"
-      [link]="selectedLink$ | async"
-    >
-    </gn-ui-external-viewer-button>
+<div class="w-full h-full flex flex-col gap-[13px]">
+  <div
+    class="flex py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
+  >
+    <div class="grow min-w-0">
+      <gn-ui-dropdown-selector
+        [ngClass]="{ hidden: !displaySource }"
+        class="w-full"
+        extraBtnClass="font-sans font-bold"
+        [title]="'map.select.layer' | translate"
+        [choices]="dropdownChoices$ | async"
+        (selectValue)="selectLinkToDisplay($event)"
+      ></gn-ui-dropdown-selector>
+    </div>
+    <div class="self-end">
+      <gn-ui-external-viewer-button
+        extraClass="w-[44px] h-[44px]"
+        [link]="selectedLink$ | async"
+      >
+      </gn-ui-external-viewer-button>
+    </div>
   </div>
   <ng-container *ngIf="hidePreview; else mapView">
     <gn-ui-popup-alert
@@ -49,7 +55,10 @@
         >
           <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
         </gn-ui-button>
-        <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
+        <gn-ui-feature-detail
+          [featureCatalog]="mdViewFacade.featureCatalog$ | async"
+          [feature]="selection"
+        ></gn-ui-feature-detail>
       </div>
 
       <div

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

@@ -39,8 +39,8 @@ import {
 import {
   FeatureDetailComponent,
   MapContainerComponent,
-  prioritizePageScroll,
   MapLegendComponent,
+  prioritizePageScroll,
 } from '../../../../../../libs/ui/map/src'
 import { Feature } from 'geojson'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
@@ -109,9 +109,20 @@ export class MapViewComponent implements AfterViewInit {
     this.mdViewFacade.mapApiLinks$,
     this.mdViewFacade.geoDataLinksWithGeometry$,
   ]).pipe(
-    map(([mapApiLinks, geoDataLinksWithGeometry]) => {
-      return [...mapApiLinks, ...geoDataLinksWithGeometry]
-    })
+    switchMap(async ([mapApiLinks, geoDataLinksWithGeometry]) => {
+      // looking for TMS links to process
+      let processedMapApiLinks = await Promise.all(
+        mapApiLinks.map((link) => {
+          if (link.type === 'service' && link.accessServiceProtocol === 'tms') {
+            return this.dataService.getGeodataLinksFromTms(link)
+          }
+          return link
+        })
+      )
+      processedMapApiLinks = processedMapApiLinks.flat()
+      return [...processedMapApiLinks, ...geoDataLinksWithGeometry]
+    }),
+    shareReplay(1)
   )
 
   dropdownChoices$ = this.compatibleMapLinks$.pipe(
@@ -239,6 +250,26 @@ export class MapViewComponent implements AfterViewInit {
         type: 'wms',
         name: link.name,
       })
+    } else if (
+      link.type === 'service' &&
+      link.accessServiceProtocol === 'tms'
+    ) {
+      // FIXME: here we're assuming that the TMS serves vector tiles only; should be checked with ogc-client first
+      return of({
+        url: link.url.toString().replace(/\/?$/, '/{z}/{x}/{y}.pbf'),
+        type: 'xyz',
+        tileFormat: 'application/vnd.mapbox-vector-tile',
+        name: link.name,
+      })
+    } else if (
+      link.type === 'service' &&
+      link.accessServiceProtocol === 'maplibre-style'
+    ) {
+      return of({
+        type: 'maplibre-style',
+        name: link.name,
+        styleUrl: link.url.toString(),
+      })
     } else if (
       link.type === 'service' &&
       link.accessServiceProtocol === 'wmts'

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

@@ -6,6 +6,7 @@ import {
   filter,
   map,
   mergeMap,
+  shareReplay,
   switchMap,
   toArray,
 } from 'rxjs/operators'
@@ -15,13 +16,11 @@ import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/sh
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   CatalogRecord,
-  DatasetServiceDistribution,
-  ServiceEndpoint,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
 import { OgcApiRecord } from '@camptocamp/ogc-client'
-import { from, of } from 'rxjs'
+import { from, of, Observable } from 'rxjs'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
 
 @Injectable()
@@ -80,21 +79,17 @@ export class MdViewFacade {
   chartConfig$ = this.store.pipe(select(MdViewSelectors.getChartConfig))
 
   allLinks$ = this.metadata$.pipe(
-    map((record) => ('onlineResources' in record ? record.onlineResources : []))
+    map((record) =>
+      'onlineResources' in record ? record.onlineResources : []
+    ),
+    shareReplay(1)
   )
 
   apiLinks$ = this.allLinks$.pipe(
     map((links) =>
-      links
-        .filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
-        // Put links to IGN Géoplateforme first
-        .sort((dd1, dd2) => {
-          return (dd2 as DatasetServiceDistribution | ServiceEndpoint)
-            .accessServiceProtocol === 'GPFDL'
-            ? 1
-            : undefined // do not change the sorting otherwise
-        })
-    )
+      links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
+    ),
+    shareReplay(1)
   )
 
   mapApiLinks$ = this.allLinks$.pipe(
@@ -102,7 +97,8 @@ export class MdViewFacade {
       links.filter((link) =>
         this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
       )
-    )
+    ),
+    shareReplay(1)
   )
 
   downloadLinks$ = this.allLinks$.pipe(
@@ -216,4 +212,11 @@ export class MdViewFacade {
   loadUserFeedbacks(datasetUuid: string) {
     this.store.dispatch(MdViewActions.loadUserFeedbacks({ datasetUuid }))
   }
+
+  /**
+   * loadFeatureCatalog
+   */
+  loadFeatureCatalog(metadata: CatalogRecord) {
+    this.store.dispatch(MdViewActions.loadFeatureCatalog({ metadata }))
+  }
 }

package/src/libs/feature/search/src/index.ts

@@ -17,7 +17,7 @@ export * from './lib/facets/facets.module'
 export * from './lib/facets/facets-container/facets-container.component'
 export * from './lib/records-metrics/records-metrics.component'
 export * from './lib/favorites/favorite-star/favorite-star.component'
-export * from './lib/results-hits-number/results-hits.container.component'
+export * from './lib/results-hits/results-hits.container.component'
 export * from './lib/results-layout/results-layout.component'
 export * from './lib/sort-by/sort-by.component'
 export * from './lib/state/container/search-state.container.directive'

package/src/libs/feature/search/src/lib/feature-search.module.ts

@@ -4,6 +4,7 @@ import { UiSearchModule } from '../../../../../libs/ui/search/src'
 import { EffectsModule } from '@ngrx/effects'
 import { StoreModule } from '@ngrx/store'
 import { TranslateModule } from '@ngx-translate/core'
+import { NgIconsModule } from '@ng-icons/core'
 import { FacetsModule } from './facets/facets.module'
 import { FuzzySearchComponent } from './fuzzy-search/fuzzy-search.component'
 import { RecordsMetricsComponent } from './records-metrics/records-metrics.component'
@@ -12,7 +13,7 @@ import { ResultsListContainerComponent } from './results-list/results-list.conta
 import { SortByComponent } from './sort-by/sort-by.component'
 import { SearchEffects } from './state/effects'
 import { initialState, reducer, SEARCH_FEATURE_KEY } from './state/reducer'
-import { ResultsHitsContainerComponent } from './results-hits-number/results-hits.container.component'
+import { ResultsHitsContainerComponent } from './results-hits/results-hits.container.component'
 import { SearchStateContainerDirective } from './state/container/search-state.container.directive'
 import {
   AutocompleteComponent,
@@ -20,7 +21,11 @@ import {
   UiInputsModule,
 } from '../../../../../libs/ui/inputs/src'
 import { NgModule } from '@angular/core'
-import { ErrorComponent, UiElementsModule } from '../../../../../libs/ui/elements/src'
+import {
+  ErrorComponent,
+  KindBadgeComponent,
+  UiElementsModule,
+} from '../../../../../libs/ui/elements/src'
 import { FilterDropdownComponent } from './filter-dropdown/filter-dropdown.component'
 import {
   SpinningLoaderComponent,
@@ -58,6 +63,8 @@ import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.c
     ErrorComponent,
     FavoriteStarComponent,
     DateRangeDropdownComponent,
+    NgIconsModule,
+    KindBadgeComponent,
   ],
   exports: [
     SortByComponent,

package/src/libs/feature/search/src/lib/results-hits/results-hits.container.component.html

@@ -0,0 +1,16 @@
+<div
+  class="flex flex-col gap-3 sm:flex-row justify-between"
+  [ngClass]="{
+    'sm:items-center': (searchFacade.resultsHits$ | async) !== 0,
+  }"
+>
+  <gn-ui-results-hits-number
+    [loading]="searchFacade.isLoading$ | async"
+    [hits]="searchFacade.resultsHits$ | async"
+  ></gn-ui-results-hits-number>
+  <gn-ui-results-hits-search-kind
+    (selectionChanged)="onSelectionChanged($event)"
+    [choices]="filterChoices$ | async"
+    [selected]="selected$ | async"
+  ></gn-ui-results-hits-search-kind>
+</div>

package/src/libs/feature/search/src/lib/results-hits/results-hits.container.component.ts

@@ -0,0 +1,59 @@
+import {
+  catchError,
+  filter,
+  map,
+  Observable,
+  of,
+  startWith,
+  switchMap,
+} from 'rxjs'
+import { Component, OnInit } from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { SearchFacade } from '../state/search.facade'
+import { FieldAvailableValue, FieldValue } from '../utils/service/fields'
+import { SearchService } from '../utils/service/search.service'
+import { FieldsService } from '../utils/service/fields.service'
+
+marker('search.filters.recordKind.all')
+marker('search.filters.recordKind.dataset')
+marker('search.filters.recordKind.service')
+marker('search.filters.recordKind.reuse')
+
+@Component({
+  selector: 'gn-ui-results-hits',
+  templateUrl: './results-hits.container.component.html',
+  styleUrls: ['./results-hits.container.component.css'],
+})
+export class ResultsHitsContainerComponent implements OnInit {
+  fieldName = 'recordKind'
+  filterChoices$: Observable<FieldAvailableValue[]>
+  selected$: Observable<FieldValue[]>
+
+  constructor(
+    protected searchFacade: SearchFacade,
+    private searchService: SearchService,
+    private fieldsService: FieldsService
+  ) {}
+
+  ngOnInit() {
+    this.selected$ = this.searchFacade.searchFilters$.pipe(
+      switchMap((filters) =>
+        this.fieldsService.readFieldValuesFromFilters(filters)
+      ),
+      map((fieldValues) => fieldValues[this.fieldName]),
+      filter((selected) => !!selected),
+      startWith([]),
+      catchError(() => of([]))
+    ) as Observable<FieldValue[]>
+
+    this.filterChoices$ = <Observable<FieldAvailableValue[]>>(
+      this.fieldsService.getAvailableValues(this.fieldName)
+    )
+  }
+
+  onSelectionChanged(values: string[]) {
+    this.fieldsService
+      .buildFiltersFromFieldValues({ [this.fieldName]: values })
+      .subscribe((filters) => this.searchService.updateFilters(filters))
+  }
+}

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -10,8 +10,10 @@ import {
   MultilingualSearchField,
   OrganizationSearchField,
   OwnerSearchField,
+  ResourceTypeLegacyField,
   SimpleSearchField,
   TranslatedSearchField,
+  RecordKindField,
   UserSearchField,
 } from './fields'
 import { forkJoin, Observable, of } from 'rxjs'
@@ -47,11 +49,8 @@ export class FieldsService {
   protected fields = {
     organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
-    resourceType: new TranslatedSearchField(
-      'resourceType',
-      this.injector,
-      'asc'
-    ),
+    resourceType: new ResourceTypeLegacyField(this.injector), // Deprecated, use `recordKind` instead
+    recordKind: new RecordKindField(this.injector),
     representationType: new TranslatedSearchField(
       'cl_spatialRepresentationType.key',
       this.injector,

package/src/libs/feature/search/src/lib/utils/service/fields.ts

@@ -22,6 +22,7 @@ import {
 } from '../../../../../../../libs/api/repository/src'
 import { LangService } from '../../../../../../../libs/util/i18n/src'
 import { formatUserInfo } from '../../../../../../../libs/util/shared/src'
+import { PossibleResourceTypes } from '../../../../../../../libs/api/metadata-converter/src'
 
 export type FieldType = 'values' | 'dateRange'
 
@@ -29,6 +30,7 @@ export type FieldValue = string | number
 export interface FieldAvailableValue {
   value: FieldValue
   label: string
+  count?: number
 }
 
 export abstract class AbstractSearchField {
@@ -80,6 +82,7 @@ export class SimpleSearchField implements AbstractSearchField {
         const bucketPromises = buckets.map(async (bucket) => ({
           label: `${await this.getBucketLabel(bucket)} (${bucket.count})`,
           value: bucket.term.toString(),
+          count: bucket.count,
         }))
         return Promise.all(bucketPromises)
       })
@@ -480,3 +483,99 @@ export class AvailableServicesField extends SimpleSearchField {
     return of(values)
   }
 }
+
+/**
+ * This class is meant to be used with the legacy filter on `resourceType` (now deprecated, the use of `recordKind` field is recommended).
+ * Since creating filters on the same ES field is not possible, in order to make the resource type filter still working,
+ * we create an ES on the fly: `resourceTypeLegacy` that references the `resourceType` under the hood.
+ * @deprecated Use `recordKind` field instead.
+ */
+export class ResourceTypeLegacyField extends TranslatedSearchField {
+  constructor(injector: Injector) {
+    super('resourceTypeLegacy', injector, 'asc')
+
+    // Ask ES to create a field on the fly: 'resourceTypeLegacy' that is in fact, 'resourceType'
+    this.esService.registerRuntimeField(
+      'resourceTypeLegacy',
+      `for (resourceType in doc.resourceType) { emit(resourceType) }`
+    )
+  }
+}
+
+export class RecordKindField extends SimpleSearchField {
+  TYPE_MAPPING = {
+    dataset: ['dataset', 'series', 'featureCatalog'],
+    service: ['service'],
+    reuse: Object.entries(PossibleResourceTypes)
+      .filter(([_, v]) => v === 'reuse')
+      .map(([k]) => k), // = ['application', 'map', 'staticMap', 'interactiveMap', ...]
+  }
+
+  constructor(injector: Injector) {
+    super('resourceType', injector, 'asc')
+  }
+
+  getAvailableValues(): Observable<FieldAvailableValue[]> {
+    return this.repository.aggregate(this.getAggregations()).pipe(
+      map(
+        (response) =>
+          (response[this.esFieldName] as AggregationBuckets).buckets || []
+      ),
+      map((buckets: TermBucket[]) => {
+        const counts = buckets.reduce(
+          (acc, { term, count }) => {
+            const value = term.toString()
+            const key = this.TYPE_MAPPING.reuse.includes(value)
+              ? 'reuse'
+              : this.TYPE_MAPPING.dataset.includes(value)
+                ? 'dataset'
+                : value
+
+            acc[key] = (acc[key] || 0) + count
+            return acc
+          },
+          {} as Record<string, number>
+        )
+
+        return Object.keys(this.TYPE_MAPPING).map((type) => ({
+          label: type,
+          value: type,
+          count: counts[type] ?? 0,
+        }))
+      })
+    )
+  }
+
+  getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
+    const filters = {
+      [this.esFieldName]: values.reduce((acc, value) => {
+        if (value === '') return { ...acc, [value]: true }
+
+        const keysToAdd = this.TYPE_MAPPING[value] || [value]
+        keysToAdd.forEach((key: string) => (acc[key] = true))
+
+        return acc
+      }, {}),
+    }
+
+    return of(filters)
+  }
+
+  getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
+    const filter = filters[this.esFieldName]
+    if (!filter) return of([])
+
+    const activeValues = Object.keys(filter).filter((v) => filter[v])
+    const activeTypes = Object.keys(this.TYPE_MAPPING).filter((type) =>
+      this.TYPE_MAPPING[type].every((t: string) => activeValues.includes(t))
+    )
+
+    // Allow unknown values eg. 'type=somethingnotexist' (for UI to select none)
+    const allTypes = [].concat(...Object.values(this.TYPE_MAPPING))
+    const unknownValues = activeValues.filter(
+      (value) => !allTypes.includes(value)
+    )
+
+    return of([...activeTypes, ...unknownValues])
+  }
+}

package/src/libs/ui/dataviz/src/lib/chart/chart.component.ts

@@ -57,6 +57,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
     this.dataRaw = value
   }
   @Input() labelProperty: string
+  @Input() prettyLabel: string
   @Input() valueProperty: string
   @Input() secondaryValueProperty: string
   @Input() type: InputChartType = 'bar'
@@ -95,7 +96,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
       labels: this.getDataProxy(this.labelProperty) as string[],
       datasets: [
         {
-          label: this.valueProperty,
+          label: this.prettyLabel,
           data,
         },
       ],

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.html

@@ -8,21 +8,24 @@
       [matSortDisableClear]="true"
       *ngrxLet="properties$ as properties"
     >
-      <ng-container *ngFor="let prop of properties" [matColumnDef]="prop">
+      <ng-container
+        *ngFor="let attr of _featureAttributes"
+        [matColumnDef]="attr.value"
+      >
         <th
           mat-header-cell
           *matHeaderCellDef
           mat-sort-header
           class="text-sm text-black bg-white"
         >
-          {{ prop }}
+          {{ attr.label }}
         </th>
         <td
           mat-cell
           *matCellDef="let element"
           class="whitespace-nowrap pr-1 truncate"
         >
-          {{ element[prop] }}
+          {{ element[attr.value] }}
         </td>
       </ng-container>
 

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -61,13 +61,14 @@ export interface TableItemModel {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
+  _featureAttributes = []
+  @Input() set featureAttributes(value: { value: string; label: string }[]) {
+    this._featureAttributes = value
+    this.properties$.next(value.map((attr) => attr.value))
+  }
   @Input() set dataset(value: BaseReader) {
-    this.properties$.next(null)
     this.dataset_ = value
     this.dataset_.load()
-    this.dataset_.properties.then((properties) =>
-      this.properties$.next(properties.map((p) => p.name))
-    )
     this.dataset_.info.then((info) => (this.count = info.itemsCount))
   }
   @Input() activeId: TableItemId

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

@@ -7,6 +7,7 @@ export * from './lib/downloads-list/downloads-list.component'
 export * from './lib/error/error.component'
 export * from './lib/image-input/image-input.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
+export * from './lib/kind-badge/kind-badge.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
 export * from './lib/markdown-parser/markdown-parser.component'
@@ -25,3 +26,4 @@ export * from './lib/user-preview/user-preview.component'
 export * from './lib/application-banner/application-banner.component'
 export * from './lib/internal-link-card/internal-link-card.component'
 export * from './lib/service-capabilities/service-capabilities.component'
+export * from './lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component'

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

@@ -1,12 +1,12 @@
 <div
-  class="group flex justify-between rounded filter overflow-hidden"
+  class="group flex justify-between rounded filter overflow-hidden card-shadow"
   [ngClass]="cardClass"
 >
   <ng-container *ngIf="size !== 'S'">
-    <div>
+    <div class="flex-1 min-w-0">
       <ng-container *ngTemplateOutlet="content"></ng-container>
     </div>
-    <div class="flex items-center">
+    <div class="flex items-center min-w-[32px]">
       <ng-container *ngTemplateOutlet="buttons"></ng-container>
     </div>
   </ng-container>
@@ -51,7 +51,7 @@
 </ng-template>
 
 <ng-template #content>
-  <div>
+  <div class="flex-1 min-w-0">
     <div class="gn-ui-card-title">
       {{ link.description || link.name }}
     </div>

package/src/libs/ui/elements/src/lib/download-item/download-item.component.html

@@ -1,20 +1,20 @@
 <a
   href="{{ link.url }}"
   target="_blank"
-  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden"
+  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden w-full"
   rel="noopener"
   [ngClass]="cardClass"
 >
-  <div class="flex flex-col justify-between">
+  <div class="flex flex-col flex-1 justify-between min-w-0">
     <div class="gn-ui-card-title" [title]="link.description || link.name">
       {{ link.description || link.name }}
     </div>
     <div class="gn-ui-card-detail">
       {{ link.name }}
     </div>
-    <div class="flex flex-row gap-2 items-center pt-1">
+    <div class="flex flex-row gap-2 items-center pt-1 min-w-0">
       <span
-        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
+        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100 whitespace-nowrap"
         [style.background-color]="color"
         data-cy="download-format"
         >{{ format || ('downloads.format.unknown' | translate) }}</span
@@ -24,7 +24,10 @@
       >
     </div>
   </div>
-  <div class="flex" [ngClass]="size === 'S' ? 'items-end' : 'items-center'">
+  <div
+    class="flex min-w-[32px] flex-shrink-0"
+    [ngClass]="size === 'S' ? 'items-end' : 'items-center'"
+  >
     <div class="gn-ui-card-icon">
       <ng-icon
         class="inline-block card-icon align-middle"

package/src/libs/ui/elements/src/lib/download-item/download-item.component.ts

@@ -27,7 +27,7 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
   ],
 })
 export class DownloadItemComponent {
-  private _size: 'L' | 'M' | 'S' | 'XS'
+  private _size: CardSize
   @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
@@ -43,7 +43,7 @@ export class DownloadItemComponent {
     this._size = value
     this.cardClass = this.sizeClassMap[value]
   }
-  get size(): 'L' | 'M' | 'S' | 'XS' {
+  get size(): CardSize {
     return this._size
   }
   cardClass = ''