npm - geonetwork-ui - Versions diffs - 2.6.0-dev.502fa026d → 2.6.0-dev.ed41ee824 - Mend

geonetwork-ui 2.6.0-dev.502fa026d → 2.6.0-dev.ed41ee824

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/fesm2022/geonetwork-ui.mjs CHANGED Viewed

@@ -26,8 +26,8 @@ import { createAction, props, createReducer, on, createFeatureSelector, createSe
 import EmblaCarousel from 'embla-carousel';
 import * as i2$2 from '@ng-icons/core';
 import { provideIcons, NgIcon, NgIconComponent, provideNgIconsConfig, NgIconsModule } from '@ng-icons/core';
-import { iconoirNavArrowRight, iconoirNavArrowLeft, iconoirNavArrowDown, iconoirNavArrowUp, iconoirSearch, iconoirLongArrowDownLeft, iconoirCalendar, iconoirLink, iconoirArrowUp, iconoirCloudUpload, iconoirFramePlusIn, iconoirMediaImage, iconoirMediaImageXmark, iconoirBin, iconoirPlus, iconoirUser, iconoirLock, iconoirImport, iconoirLightBulbOn, iconoirArrowLeft, iconoirAttachment, iconoirRefresh } from '@ng-icons/iconoir';
-import { matExpandMore, matExpandLess, matAdd, matRemove, matClose, matContentCopy, matSearch, matStar, matStarBorder, matChevronLeft, matChevronRight, matArrowForward, matArrowBack, matCheck, matWarningAmber, matMoreHoriz, matFace, matQuestionMark, matMoodBad, matZoomOutMap, matOpenInNew, matMailOutline, matPersonOutline, matCheckCircleOutline, matWarning, matMoreVert, matCorporateFare } from '@ng-icons/material-icons/baseline';
+import { iconoirNavArrowRight, iconoirNavArrowLeft, iconoirNavArrowDown, iconoirNavArrowUp, iconoirSearch, iconoirLongArrowDownLeft, iconoirCalendar, iconoirLink, iconoirArrowUp, iconoirCloudUpload, iconoirFramePlusIn, iconoirSettings, iconoirDownload, iconoirMediaImage, iconoirMediaImageXmark, iconoirBin, iconoirPlus, iconoirUser, iconoirLock, iconoirImport, iconoirLightBulbOn, iconoirArrowLeft, iconoirAttachment, iconoirRefresh } from '@ng-icons/iconoir';
+import { matExpandMore, matExpandLess, matAdd, matRemove, matClose, matContentCopy, matSearch, matStar, matStarBorder, matChevronLeft, matChevronRight, matArrowForward, matArrowBack, matCheck, matWarningAmber, matFace, matQuestionMark, matMoodBad, matZoomOutMap, matOpenInNew, matMailOutline, matPersonOutline, matCheckCircleOutline, matWarning, matMoreVert, matCorporateFare } from '@ng-icons/material-icons/baseline';
 import * as i1$4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
@@ -41,7 +41,7 @@ import { TagInputModule } from 'ngx-chips';
 import * as i1$5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import tippy from 'tippy.js';
-import { matErrorOutlineOutline, matInfoOutline, matCloudDownloadOutline, matComputerOutline, matCallOutline, matLocationOnOutline, matMailOutline as matMailOutline$1, matWarningAmberOutline, matCloseOutline, matSendOutline, matMapOutline, matHomeWorkOutline, matSwipeOutline, matLayersOutline, matAddCircleOutlineOutline } from '@ng-icons/material-icons/outline';
+import { matErrorOutlineOutline, matInfoOutline, matComputerOutline, matCallOutline, matLocationOnOutline, matMailOutline as matMailOutline$1, matWarningAmberOutline, matCloseOutline, matSendOutline, matMapOutline, matCloudDownloadOutline, matHomeWorkOutline, matSwipeOutline, matLayersOutline, matAddCircleOutlineOutline } from '@ng-icons/material-icons/outline';
 import * as i2 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import * as i1$7 from '@angular/material/checkbox';
@@ -19213,7 +19213,7 @@ var en = {
 	"datahub.search.back": "Back",
 	"datahub.search.filter.all": "All",
 	"datahub.search.filter.generatedByAPI": "Generated by an API",
-	"datahub.search.filter.generatedByWfs": "",
+	"datahub.search.filter.generatedByWfs": "Generated by a WFS",
 	"datahub.search.filter.others": "Others",
 	"dataset.error.forbidden": "Access to this resource is restricted",
 	"dataset.error.http": "The data could not be loaded because of an HTTP error: \"{ info }\"",
@@ -24765,7 +24765,7 @@ const FORMATS = {
     csv: {
         extensions: ['csv'],
         priority: 1,
-        color: '#a6d6c0',
+        color: '#F6A924',
         mimeTypes: ['text/csv', 'application/csv'],
     },
     excel: {
@@ -24777,7 +24777,7 @@ const FORMATS = {
             'openxmlformats-officedocument',
         ],
         priority: 2,
-        color: '#acc5e4',
+        color: '#FFDE10',
         mimeTypes: [
             'application/vnd.ms-excel',
             'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
@@ -24786,31 +24786,31 @@ const FORMATS = {
     geojson: {
         extensions: ['geojson'],
         priority: 3,
-        color: '#b3cde8',
+        color: '#293C6F',
         mimeTypes: ['application/geo+json', 'application/vnd.geo+json'],
     },
     json: {
         extensions: ['json'],
         priority: 3,
-        color: '#b3cde8',
+        color: '#84D0F0',
         mimeTypes: ['application/json'],
     },
     shp: {
         extensions: ['shp', 'shape', 'zipped-shapefile'],
         priority: 4,
-        color: '#b2d8ba',
+        color: '#009036',
         mimeTypes: ['x-gis/x-shapefile'],
     },
     gml: {
         extensions: ['gml'],
         priority: 5,
-        color: '#e3b3e5',
+        color: '#E75113',
         mimeTypes: ['application/gml+xml', 'text/xml; subtype=gml'],
     },
     kml: {
         extensions: ['kml', 'kmz'],
         priority: 6,
-        color: '#c1e6a0',
+        color: '#F4B5D0',
         mimeTypes: [
             'application/vnd.google-earth.kml+xml',
             'application/vnd.google-earth.kmz',
@@ -24819,55 +24819,55 @@ const FORMATS = {
     gpkg: {
         extensions: ['gpkg', 'geopackage'],
         priority: 7,
-        color: '#f7cce6',
+        color: '#7D5D9F',
         mimeTypes: ['application/geopackage+sqlite3'],
     },
     zip: {
         extensions: ['zip', 'tar.gz'],
         priority: 8,
-        color: '#ffe7a3',
+        color: '#B0CB52',
         mimeTypes: ['application/zip', 'application/x-zip'],
     },
     pdf: {
         extensions: ['pdf'],
         priority: 9,
-        color: '#f5b2a3',
+        color: '#49579E',
         mimeTypes: ['application/pdf'],
     },
     jpg: {
         extensions: ['jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp'],
         priority: 9,
-        color: '#d1c1e9',
+        color: '#C4A98F',
         mimeTypes: ['image/jpg'],
     },
     svg: {
         extensions: ['svg'],
         priority: 10,
-        color: '#f3c1c9',
+        color: '#EB6D82',
         mimeTypes: ['image/svg+xml'],
     },
     dxf: {
         extensions: ['dxf'],
         priority: 11,
-        color: '#f6ceac',
+        color: '#DCCD00',
         mimeTypes: ['application/x-dxf', 'image/x-dxf'],
     },
     html: {
         extensions: ['html', 'htm'],
         priority: 12,
-        color: '#FFF2CC',
+        color: '#C0C9B6',
         mimeTypes: ['text/html'],
     },
     fgb: {
         extensions: ['fgb', 'flatgeobuf'],
         priority: 13,
-        color: '#ffe7a3',
+        color: '#A8111C',
         mimeTypes: ['application/flatgeobuf'],
     },
     jsonfg: {
         extensions: ['jsonfg', 'jsonfgc'],
         priority: 14,
-        color: '#ffe7a3',
+        color: '#009EE0',
         mimeTypes: [
             'application/vnd.ogc.fg+json',
             'application/vnd.ogc.fg+json;compatibility=geojson',
@@ -24938,9 +24938,11 @@ function mimeTypeToFormat(mimeType) {
     return null;
 }
 function checkFileFormat(link, format) {
-    return (('name' in link && new RegExp(`[./]${format}`, 'i').test(link.name)) ||
+    return (('name' in link &&
+        new RegExp(`[./]${format}`, 'i').test(link.name.toLowerCase())) ||
         ('url' in link &&
-            new RegExp(`[./]${format}`, 'i').test(link.url.toString())));
+            new RegExp(`[./]${format}`, 'i').test(link.url.toString())) ||
+        ('name' in link && link.name.toLowerCase().includes(format)));
 }
 function getBadgeColor(linkFormat) {
     for (const format in FORMATS) {
@@ -25493,11 +25495,11 @@ class CarouselComponent {
             .on('select', this.refreshSteps);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CarouselComponent, isStandalone: true, selector: "gn-ui-carousel", inputs: { containerClass: "containerClass", stepsContainerClass: "stepsContainerClass" }, outputs: { currentStepChange: "currentStepChange" }, viewQueries: [{ propertyName: "carouselOverflowContainer", first: true, predicate: ["carouselOverflowContainer"], descendants: true }], ngImport: i0, template: "<div #carouselOverflowContainer class=\"w-full\">\n  <div class=\"carousel-container flex\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<gn-ui-pagination-dots\n  [containerClass]=\"'absolute ' + stepsContainerClass\"\n  [listComponent]=\"this\"\n></gn-ui-pagination-dots>\n", styles: [":host .carousel-container ::ng-deep>*{flex-shrink:0}:host{position:relative;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginationDotsComponent, selector: "gn-ui-pagination-dots", inputs: ["listComponent", "containerClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CarouselComponent, isStandalone: true, selector: "gn-ui-carousel", inputs: { containerClass: "containerClass", stepsContainerClass: "stepsContainerClass" }, outputs: { currentStepChange: "currentStepChange" }, viewQueries: [{ propertyName: "carouselOverflowContainer", first: true, predicate: ["carouselOverflowContainer"], descendants: true }], ngImport: i0, template: "<div #carouselOverflowContainer class=\"w-full\">\n  <div class=\"carousel-container flex\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<gn-ui-pagination-dots\n  [containerClass]=\"'absolute ' + stepsContainerClass\"\n  [listComponent]=\"this\"\n></gn-ui-pagination-dots>\n", styles: [":host{position:relative;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginationDotsComponent, selector: "gn-ui-pagination-dots", inputs: ["listComponent", "containerClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-carousel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, PaginationDotsComponent], template: "<div #carouselOverflowContainer class=\"w-full\">\n  <div class=\"carousel-container flex\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<gn-ui-pagination-dots\n  [containerClass]=\"'absolute ' + stepsContainerClass\"\n  [listComponent]=\"this\"\n></gn-ui-pagination-dots>\n", styles: [":host .carousel-container ::ng-deep>*{flex-shrink:0}:host{position:relative;display:block}\n"] }]
+            args: [{ selector: 'gn-ui-carousel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, PaginationDotsComponent], template: "<div #carouselOverflowContainer class=\"w-full\">\n  <div class=\"carousel-container flex\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<gn-ui-pagination-dots\n  [containerClass]=\"'absolute ' + stepsContainerClass\"\n  [listComponent]=\"this\"\n></gn-ui-pagination-dots>\n", styles: [":host{position:relative;display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { carouselOverflowContainer: [{
                 type: ViewChild,
                 args: ['carouselOverflowContainer']
@@ -28653,9 +28655,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class ApiCardComponent {
     constructor() {
+        this.sizeClassMap = {
+            L: 'gn-ui-card-l py-2 px-5 flex-row',
+            M: 'gn-ui-card-m py-2 px-5 flex-row',
+            S: 'gn-ui-card-s p-4 flex-col',
+            XS: 'gn-ui-card-xs py-2 px-5 flex-row',
+        };
+        this.cardClass = '';
         this.currentlyActive = false;
         this.openRecordApiForm = new EventEmitter();
     }
+    set size(value) {
+        this._size = value;
+        this.cardClass = this.sizeClassMap[value];
+    }
+    get size() {
+        return this._size;
+    }
+    get generatedText() {
+        return this.link.accessServiceProtocol === 'wfs'
+            ? 'datahub.search.filter.generatedByWfs'
+            : 'datahub.search.filter.generatedByAPI';
+    }
     ngOnInit() {
         this.displayApiFormButton =
             this.link.accessServiceProtocol === 'ogcFeatures' ||
@@ -28673,9 +28694,9 @@ class ApiCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ApiCardComponent, isStandalone: true, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        *ngIf=\"link.accessServiceProtocol !== 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <span\n        *ngIf=\"link.accessServiceProtocol === 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        translate\n      >\n        record.metadata.api.gpfdl</span\n      >\n      <div class=\"flex flex-row gap-2 items-center\">\n        <gn-ui-copy-text-button\n          [text]=\"link.url\"\n          [tooltipText]=\"'tooltip.url.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <button\n          *ngIf=\"displayApiFormButton\"\n          type=\"button\"\n          [ngClass]=\"{\n            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n              displayText,\n          }\"\n          [matTooltip]=\"\n            !currentlyActive\n              ? ('record.metadata.api.form.openForm' | translate)\n              : ('record.metadata.api.form.closeForm' | translate)\n          \"\n          matTooltipPosition=\"above\"\n          (click)=\"openRecordApiFormPanel()\"\n        >\n          <ng-icon\n            class=\"pointer-events-none align-middle card-icon\"\n            name=\"matMoreHoriz\"\n            [ngClass]=\"{\n              'text-secondary opacity-100': currentlyActive,\n            }\"\n          ></ng-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ApiCardComponent, isStandalone: true, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink", size: "size" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex justify-between rounded filter overflow-hidden\"\n  [ngClass]=\"cardClass\"\n>\n  <ng-container *ngIf=\"size !== 'S'\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div class=\"flex items-center\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"size === 'S'\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #buttons>\n  <div class=\"flex flex-row gap-2\">\n    <gn-ui-copy-text-button\n      [text]=\"link.url\"\n      [tooltipText]=\"'tooltip.url.copy' | translate\"\n      [displayText]=\"false\"\n      class=\"border border-gray-300 rounded-lg pt-1 px-2 h-[34px]\"\n    ></gn-ui-copy-text-button>\n    <button\n      *ngIf=\"displayApiFormButton\"\n      type=\"button\"\n      class=\"gn-ui-card-icon\"\n      [ngClass]=\"{\n        'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n          displayText,\n      }\"\n      [matTooltip]=\"\n        !currentlyActive\n          ? ('record.metadata.api.form.openForm' | translate)\n          : ('record.metadata.api.form.closeForm' | translate)\n      \"\n      matTooltipPosition=\"above\"\n      (click)=\"openRecordApiFormPanel()\"\n    >\n      <ng-icon\n        class=\"pointer-events-none align-middle card-icon\"\n        name=\"iconoirSettings\"\n        [ngClass]=\"{\n          'text-secondary opacity-100': currentlyActive,\n        }\"\n      ></ng-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #content>\n  <div>\n    <div class=\"gn-ui-card-title\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      {{ link.name }}\n    </div>\n  </div>\n  <div class=\"flex flex-row justify-between\">\n    <div class=\"flex flex-row gap-2.5 items-center pt-1\">\n      <span\n        *ngIf=\"link.accessServiceProtocol !== 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <span\n        *ngIf=\"link.accessServiceProtocol === 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        translate\n      >\n        record.metadata.api.gpfdl</span\n      >\n    </div>\n    <div *ngIf=\"size === 'S'\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
             provideIcons({
-                matMoreHoriz,
+                iconoirSettings,
             }),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -28689,13 +28710,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NgIcon,
                     ], viewProviders: [
                         provideIcons({
-                            matMoreHoriz,
+                            iconoirSettings,
                         }),
-                    ], template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        *ngIf=\"link.accessServiceProtocol !== 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <span\n        *ngIf=\"link.accessServiceProtocol === 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        translate\n      >\n        record.metadata.api.gpfdl</span\n      >\n      <div class=\"flex flex-row gap-2 items-center\">\n        <gn-ui-copy-text-button\n          [text]=\"link.url\"\n          [tooltipText]=\"'tooltip.url.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <button\n          *ngIf=\"displayApiFormButton\"\n          type=\"button\"\n          [ngClass]=\"{\n            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n              displayText,\n          }\"\n          [matTooltip]=\"\n            !currentlyActive\n              ? ('record.metadata.api.form.openForm' | translate)\n              : ('record.metadata.api.form.closeForm' | translate)\n          \"\n          matTooltipPosition=\"above\"\n          (click)=\"openRecordApiFormPanel()\"\n        >\n          <ng-icon\n            class=\"pointer-events-none align-middle card-icon\"\n            name=\"matMoreHoriz\"\n            [ngClass]=\"{\n              'text-secondary opacity-100': currentlyActive,\n            }\"\n          ></ng-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"group flex justify-between rounded filter overflow-hidden\"\n  [ngClass]=\"cardClass\"\n>\n  <ng-container *ngIf=\"size !== 'S'\">\n    <div>\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div class=\"flex items-center\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"size === 'S'\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #buttons>\n  <div class=\"flex flex-row gap-2\">\n    <gn-ui-copy-text-button\n      [text]=\"link.url\"\n      [tooltipText]=\"'tooltip.url.copy' | translate\"\n      [displayText]=\"false\"\n      class=\"border border-gray-300 rounded-lg pt-1 px-2 h-[34px]\"\n    ></gn-ui-copy-text-button>\n    <button\n      *ngIf=\"displayApiFormButton\"\n      type=\"button\"\n      class=\"gn-ui-card-icon\"\n      [ngClass]=\"{\n        'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n          displayText,\n      }\"\n      [matTooltip]=\"\n        !currentlyActive\n          ? ('record.metadata.api.form.openForm' | translate)\n          : ('record.metadata.api.form.closeForm' | translate)\n      \"\n      matTooltipPosition=\"above\"\n      (click)=\"openRecordApiFormPanel()\"\n    >\n      <ng-icon\n        class=\"pointer-events-none align-middle card-icon\"\n        name=\"iconoirSettings\"\n        [ngClass]=\"{\n          'text-secondary opacity-100': currentlyActive,\n        }\"\n      ></ng-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #content>\n  <div>\n    <div class=\"gn-ui-card-title\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      {{ link.name }}\n    </div>\n  </div>\n  <div class=\"flex flex-row justify-between\">\n    <div class=\"flex flex-row gap-2.5 items-center pt-1\">\n      <span\n        *ngIf=\"link.accessServiceProtocol !== 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <span\n        *ngIf=\"link.accessServiceProtocol === 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        translate\n      >\n        record.metadata.api.gpfdl</span\n      >\n    </div>\n    <div *ngIf=\"size === 'S'\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { link: [{
                 type: Input
             }], currentLink: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], openRecordApiForm: [{
                 type: Output
             }] } });
@@ -28756,15 +28779,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class DownloadItemComponent {
     constructor() {
+        this.sizeClassMap = {
+            L: 'gn-ui-card-l py-2 px-5',
+            M: 'gn-ui-card-m py-2 px-5',
+            S: 'gn-ui-card-s p-4',
+            XS: 'gn-ui-card-xs py-2 px-5',
+        };
+        this.cardClass = '';
         this.exportUrl = new EventEmitter();
     }
+    set size(value) {
+        this._size = value;
+        this.cardClass = this.sizeClassMap[value];
+    }
+    get size() {
+        return this._size;
+    }
     openUrl() {
         this.exportUrl.emit(this.link.url.toString());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DownloadItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DownloadItemComponent, isStandalone: true, selector: "gn-ui-download-item", inputs: { link: "link", color: "color", format: "format", isFromApi: "isFromApi" }, outputs: { exportUrl: "exportUrl" }, ngImport: i0, template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex justify-between card-shadow px-6 py-5 cursor-pointer\"\n  rel=\"noopener\"\n>\n  <div class=\"grow-1 w-full overflow-hidden\">\n    <div\n      class=\"text-21 text-black truncate font-title w-11/12\"\n      [title]=\"link.description || link.name\"\n    >\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"pt-1\">\n      <span\n        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\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span\n        class=\"pl-2 inline-flex items-center text-gray-800 text-sm\"\n        *ngIf=\"isFromApi\"\n        translate=\"\"\n        >datahub.search.filter.generatedByAPI</span\n      >\n    </div>\n  </div>\n  <div class=\"shrink-1 w-14 flex flex-col justify-center items-center\">\n    <ng-icon\n      class=\"!w-8 !h-8 card-icon text-3xl\"\n      name=\"matCloudDownloadOutline\"\n    >\n    </ng-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DownloadItemComponent, isStandalone: true, selector: "gn-ui-download-item", inputs: { link: "link", color: "color", format: "format", isFromApi: "isFromApi", size: "size" }, outputs: { exportUrl: "exportUrl" }, ngImport: i0, template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden\"\n  rel=\"noopener\"\n  [ngClass]=\"cardClass\"\n>\n  <div class=\"flex flex-col justify-between\">\n    <div class=\"gn-ui-card-title\" [title]=\"link.description || link.name\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      {{ link.name }}\n    </div>\n    <div class=\"flex flex-row gap-2 items-center pt-1\">\n      <span\n        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\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span class=\"text-gray-800 text-xs\" *ngIf=\"isFromApi\" translate=\"\"\n        >datahub.search.filter.generatedByAPI</span\n      >\n    </div>\n  </div>\n  <div class=\"flex\" [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\">\n    <div class=\"gn-ui-card-icon\">\n      <ng-icon\n        class=\"inline-block card-icon align-middle\"\n        name=\"iconoirDownload\"\n      >\n      </ng-icon>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
             provideIcons({
-                matCloudDownloadOutline,
+                iconoirDownload,
             }),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -28772,9 +28809,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Component,
             args: [{ selector: 'gn-ui-download-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, TranslateModule, NgIcon], standalone: true, viewProviders: [
                         provideIcons({
-                            matCloudDownloadOutline,
+                            iconoirDownload,
                         }),
-                    ], template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex justify-between card-shadow px-6 py-5 cursor-pointer\"\n  rel=\"noopener\"\n>\n  <div class=\"grow-1 w-full overflow-hidden\">\n    <div\n      class=\"text-21 text-black truncate font-title w-11/12\"\n      [title]=\"link.description || link.name\"\n    >\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"pt-1\">\n      <span\n        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\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span\n        class=\"pl-2 inline-flex items-center text-gray-800 text-sm\"\n        *ngIf=\"isFromApi\"\n        translate=\"\"\n        >datahub.search.filter.generatedByAPI</span\n      >\n    </div>\n  </div>\n  <div class=\"shrink-1 w-14 flex flex-col justify-center items-center\">\n    <ng-icon\n      class=\"!w-8 !h-8 card-icon text-3xl\"\n      name=\"matCloudDownloadOutline\"\n    >\n    </ng-icon>\n  </div>\n</a>\n" }]
+                    ], template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden\"\n  rel=\"noopener\"\n  [ngClass]=\"cardClass\"\n>\n  <div class=\"flex flex-col justify-between\">\n    <div class=\"gn-ui-card-title\" [title]=\"link.description || link.name\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      {{ link.name }}\n    </div>\n    <div class=\"flex flex-row gap-2 items-center pt-1\">\n      <span\n        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\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span class=\"text-gray-800 text-xs\" *ngIf=\"isFromApi\" translate=\"\"\n        >datahub.search.filter.generatedByAPI</span\n      >\n    </div>\n  </div>\n  <div class=\"flex\" [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\">\n    <div class=\"gn-ui-card-icon\">\n      <ng-icon\n        class=\"inline-block card-icon align-middle\"\n        name=\"iconoirDownload\"\n      >\n      </ng-icon>\n    </div>\n  </div>\n</a>\n" }]
         }], propDecorators: { link: [{
                 type: Input
             }], color: [{
@@ -28783,6 +28820,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], isFromApi: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], exportUrl: [{
                 type: Output
             }] } });
@@ -28873,7 +28912,7 @@ class DownloadsListComponent {
                 link.accessServiceProtocol === 'ogcFeatures'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DownloadsListComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DownloadsListComponent, isStandalone: true, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromApi]=\"isFromApi(link)\"\n  ></gn-ui-download-item>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromApi"], outputs: ["exportUrl"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DownloadsListComponent, isStandalone: true, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    size=\"L\"\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromApi]=\"isFromApi(link)\"\n  ></gn-ui-download-item>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromApi", "size"], outputs: ["exportUrl"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DownloadsListComponent, decorators: [{
             type: Component,
@@ -28882,7 +28921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ButtonComponent,
                         DownloadItemComponent,
                         TranslateModule,
-                    ], template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromApi]=\"isFromApi(link)\"\n  ></gn-ui-download-item>\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    size=\"L\"\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromApi]=\"isFromApi(link)\"\n  ></gn-ui-download-item>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { links: [{
                 type: Input
             }] } });
@@ -29166,7 +29205,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class LinkCardComponent {
     constructor() {
-        this.compact = false;
+        this.sizeClassMap = {
+            L: 'gn-ui-card-l py-2 px-5',
+            M: 'gn-ui-card-m py-2 px-5',
+            S: 'gn-ui-card-s p-4',
+            XS: 'gn-ui-card-xs py-2 px-5',
+        };
+        this.cardClass = '';
+    }
+    set size(value) {
+        this._size = value;
+        this.cardClass = this.sizeClassMap[value];
+    }
+    get size() {
+        return this._size;
     }
     get title() {
         if (this.link.name && this.link.description) {
@@ -29174,25 +29226,31 @@ class LinkCardComponent {
         }
         return this.link.name || this.link.description || '';
     }
+    getLinkFormat(link) {
+        return getFileFormat(link);
+    }
+    getLinkColor(link) {
+        return getBadgeColor(getFileFormat(link));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkCardComponent, isStandalone: true, selector: "gn-ui-link-card", inputs: { link: "link", compact: "compact" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkCardComponent, isStandalone: true, selector: "gn-ui-link-card", inputs: { link: "link", size: "size" }, providers: [
             provideIcons({
                 matOpenInNew,
             }),
             provideNgIconsConfig({ size: '1.5em' }),
-        ], ngImport: i0, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden\"\n  [ngClass]=\"{ 'h-40': !compact }\"\n  [title]=\"title\"\n>\n  <ng-container *ngIf=\"!compact; else compactTpl\">\n    <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n      <p\n        class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n      >\n        {{ link.name }}\n      </p>\n      <p class=\"font-medium text-sm break-words\">\n        {{ link.description }}\n      </p>\n      <p\n        *ngIf=\"!link.name && !link.description\"\n        class=\"font-medium text-sm break-words truncate\"\n      >\n        {{ link.url }}\n      </p>\n    </div>\n    <div>\n      <ng-icon class=\"card-icon\" name=\"matOpenInNew\"></ng-icon>\n    </div>\n  </ng-container>\n  <ng-template #compactTpl>\n    <div class=\"flex items-center justify-between gap-4\">\n      <p\n        class=\"overflow-hidden font-title font-medium text-21 text-black text-ellipsis whitespace-nowrap\"\n      >\n        {{ link.name || link.description }}\n      </p>\n      <ng-icon class=\"card-icon flex-shrink-0\" name=\"matOpenInNew\"></ng-icon>\n    </div>\n  </ng-template>\n</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden\"\n  [ngClass]=\"cardClass\"\n  [title]=\"title\"\n>\n  <div class=\"flex flex-col justify-between\">\n    <div class=\"gn-ui-card-title\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      {{ link.name }}\n    </div>\n    <p *ngIf=\"!link.name && !link.description\" class=\"gn-ui-card-title\">\n      {{ link.url }}\n    </p>\n    <div class=\"pt-1\">\n      <span\n        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\"\n        [style.background-color]=\"getLinkColor(link)\"\n        data-cy=\"download-format\"\n        >{{\n          getLinkFormat(link) || ('downloads.format.unknown' | translate)\n        }}</span\n      >\n    </div>\n  </div>\n  <div class=\"flex\" [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\">\n    <div class=\"gn-ui-card-icon\">\n      <ng-icon\n        class=\"inline-block card-icon align-middle\"\n        name=\"matOpenInNew\"\n      ></ng-icon>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-link-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIconComponent], providers: [
+            args: [{ selector: 'gn-ui-link-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIconComponent, TranslateModule], providers: [
                         provideIcons({
                             matOpenInNew,
                         }),
                         provideNgIconsConfig({ size: '1.5em' }),
-                    ], template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden\"\n  [ngClass]=\"{ 'h-40': !compact }\"\n  [title]=\"title\"\n>\n  <ng-container *ngIf=\"!compact; else compactTpl\">\n    <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n      <p\n        class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n      >\n        {{ link.name }}\n      </p>\n      <p class=\"font-medium text-sm break-words\">\n        {{ link.description }}\n      </p>\n      <p\n        *ngIf=\"!link.name && !link.description\"\n        class=\"font-medium text-sm break-words truncate\"\n      >\n        {{ link.url }}\n      </p>\n    </div>\n    <div>\n      <ng-icon class=\"card-icon\" name=\"matOpenInNew\"></ng-icon>\n    </div>\n  </ng-container>\n  <ng-template #compactTpl>\n    <div class=\"flex items-center justify-between gap-4\">\n      <p\n        class=\"overflow-hidden font-title font-medium text-21 text-black text-ellipsis whitespace-nowrap\"\n      >\n        {{ link.name || link.description }}\n      </p>\n      <ng-icon class=\"card-icon flex-shrink-0\" name=\"matOpenInNew\"></ng-icon>\n    </div>\n  </ng-template>\n</a>\n" }]
+                    ], template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden\"\n  [ngClass]=\"cardClass\"\n  [title]=\"title\"\n>\n  <div class=\"flex flex-col justify-between\">\n    <div class=\"gn-ui-card-title\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      {{ link.name }}\n    </div>\n    <p *ngIf=\"!link.name && !link.description\" class=\"gn-ui-card-title\">\n      {{ link.url }}\n    </p>\n    <div class=\"pt-1\">\n      <span\n        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\"\n        [style.background-color]=\"getLinkColor(link)\"\n        data-cy=\"download-format\"\n        >{{\n          getLinkFormat(link) || ('downloads.format.unknown' | translate)\n        }}</span\n      >\n    </div>\n  </div>\n  <div class=\"flex\" [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\">\n    <div class=\"gn-ui-card-icon\">\n      <ng-icon\n        class=\"inline-block card-icon align-middle\"\n        name=\"matOpenInNew\"\n      ></ng-icon>\n    </div>\n  </div>\n</a>\n" }]
         }], propDecorators: { link: [{
                 type: Input
-            }], compact: [{
+            }], size: [{
                 type: Input
             }] } });