geonetwork-ui 2.8.3-dev.035c07269 → 2.8.3-dev.282d2eee3

package/fesm2022/geonetwork-ui.mjs

@@ -25519,7 +25519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 var name = "geonetwork-ui";
-var version = "2.8.3-dev.035c07269";
+var version = "2.8.3-dev.282d2eee3";
 var engines = {
 	node: ">=20"
 };
@@ -33773,7 +33773,7 @@ class ImageInputComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], ngImport: i0, template: "@if (previewUrl) {\n  <div class=\"w-80 h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview class=\"h-48\" [imageUrl]=\"previewUrl\">\n    </gn-ui-image-overlay-preview>\n    @if (showAltTextInput) {\n      <gn-ui-text-input\n        [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n        [value]=\"altText ?? ''\"\n        (valueChange)=\"handleAltTextChange($event)\"\n        extraClass=\"gn-ui-editor-textarea\"\n      ></gn-ui-text-input>\n    }\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"handleDelete()\"\n        data-cy=\"delete-image\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      @if (!showAltTextInput) {\n        <gn-ui-button type=\"gray\" (buttonClick)=\"toggleAltTextInput()\">\n          <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n          {{ 'input.image.displayAltTextInput' | translate }}\n        </gn-ui-button>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500': !getIsActionBlocked(),\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"getIsActionBlocked() ? null : 0\"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      @if (!isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          @if (!dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirMediaImage\"\n            ></ng-icon>\n          }\n          @if (dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirFramePlusIn\"\n            ></ng-icon>\n          }\n        </div>\n      }\n      @if (isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 grid items-center justify-center relative\">\n          <div class=\"text-gray-100 absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"100\"\n            ></mat-progress-spinner>\n          </div>\n          <div class=\"text-primary absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"uploadProgress\"\n            ></mat-progress-spinner>\n          </div>\n          <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n        </div>\n      }\n      @if (imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          <ng-icon\n            name=\"iconoirMediaImageXmark\"\n            class=\"place-self-center text-rose-500\"\n            data-cy=\"imgErrorIcon\"\n          ></ng-icon>\n        </div>\n      }\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\" data-cy=\"imgInputMsgPrimary\">\n          {{ getPrimaryText() | translate }}\n        </p>\n        <p\n          class=\"text-sm\"\n          data-cy=\"imgInputMsgSecondary\"\n          [class]=\"\n            isUploadInProgress\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        accept=\"image/*\"\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      />\n    </label>\n    @if (!showUrlInput) {\n      <div class=\"flex-none mt-2\">\n        <gn-ui-button\n          data-cy=\"imgUrlBtn\"\n          (buttonClick)=\"displayUrlInput()\"\n          type=\"gray\"\n          [disabled]=\"disabled\"\n          [extraClass]=\"disabled && 'cursor-not-allowed'\"\n        >\n          <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n          {{ 'input.image.displayUrlInput' | translate }}\n        </gn-ui-button>\n      </div>\n    }\n    @if (showUrlInput) {\n      <gn-ui-url-input\n        class=\"mt-3.5\"\n        data-cy=\"imgUrlInput\"\n        (uploadClick)=\"downloadUrl($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      >\n      </gn-ui-url-input>\n    }\n  </div>\n}\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: ["imageUrl"], outputs: ["isPlaceholderShown"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (previewUrl) {\n  <div class=\"w-[314px] h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview\n      class=\"w-[314px] h-[314px]\"\n      [imageUrl]=\"previewUrl\"\n    >\n    </gn-ui-image-overlay-preview>\n    @if (showAltTextInput) {\n      <gn-ui-text-input\n        [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n        [value]=\"altText ?? ''\"\n        (valueChange)=\"handleAltTextChange($event)\"\n        extraClass=\"gn-ui-editor-textarea\"\n      ></gn-ui-text-input>\n    }\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"handleDelete()\"\n        data-cy=\"delete-image\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      @if (!showAltTextInput) {\n        <gn-ui-button type=\"gray\" (buttonClick)=\"toggleAltTextInput()\">\n          <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n          {{ 'input.image.displayAltTextInput' | translate }}\n        </gn-ui-button>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500': !getIsActionBlocked(),\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"getIsActionBlocked() ? null : 0\"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      @if (!isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          @if (!dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirMediaImage\"\n            ></ng-icon>\n          }\n          @if (dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirFramePlusIn\"\n            ></ng-icon>\n          }\n        </div>\n      }\n      @if (isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 grid items-center justify-center relative\">\n          <div class=\"text-gray-100 absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"100\"\n            ></mat-progress-spinner>\n          </div>\n          <div class=\"text-primary absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"uploadProgress\"\n            ></mat-progress-spinner>\n          </div>\n          <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n        </div>\n      }\n      @if (imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          <ng-icon\n            name=\"iconoirMediaImageXmark\"\n            class=\"place-self-center text-rose-500\"\n            data-cy=\"imgErrorIcon\"\n          ></ng-icon>\n        </div>\n      }\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\" data-cy=\"imgInputMsgPrimary\">\n          {{ getPrimaryText() | translate }}\n        </p>\n        <p\n          class=\"text-sm\"\n          data-cy=\"imgInputMsgSecondary\"\n          [class]=\"\n            isUploadInProgress\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        accept=\"image/*\"\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      />\n    </label>\n    @if (!showUrlInput) {\n      <div class=\"flex-none mt-2\">\n        <gn-ui-button\n          data-cy=\"imgUrlBtn\"\n          (buttonClick)=\"displayUrlInput()\"\n          type=\"gray\"\n          [disabled]=\"disabled\"\n          [extraClass]=\"disabled && 'cursor-not-allowed'\"\n        >\n          <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n          {{ 'input.image.displayUrlInput' | translate }}\n        </gn-ui-button>\n      </div>\n    }\n    @if (showUrlInput) {\n      <gn-ui-url-input\n        class=\"mt-3.5\"\n        data-cy=\"imgUrlInput\"\n        (uploadClick)=\"downloadUrl($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      >\n      </gn-ui-url-input>\n    }\n  </div>\n}\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: ["imageUrl"], outputs: ["isPlaceholderShown"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ImageInputComponent, decorators: [{
             type: Component,
@@ -33799,7 +33799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         provideNgIconsConfig({
                             size: '1.5rem',
                         }),
-                    ], template: "@if (previewUrl) {\n  <div class=\"w-80 h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview class=\"h-48\" [imageUrl]=\"previewUrl\">\n    </gn-ui-image-overlay-preview>\n    @if (showAltTextInput) {\n      <gn-ui-text-input\n        [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n        [value]=\"altText ?? ''\"\n        (valueChange)=\"handleAltTextChange($event)\"\n        extraClass=\"gn-ui-editor-textarea\"\n      ></gn-ui-text-input>\n    }\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"handleDelete()\"\n        data-cy=\"delete-image\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      @if (!showAltTextInput) {\n        <gn-ui-button type=\"gray\" (buttonClick)=\"toggleAltTextInput()\">\n          <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n          {{ 'input.image.displayAltTextInput' | translate }}\n        </gn-ui-button>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500': !getIsActionBlocked(),\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"getIsActionBlocked() ? null : 0\"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      @if (!isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          @if (!dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirMediaImage\"\n            ></ng-icon>\n          }\n          @if (dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirFramePlusIn\"\n            ></ng-icon>\n          }\n        </div>\n      }\n      @if (isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 grid items-center justify-center relative\">\n          <div class=\"text-gray-100 absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"100\"\n            ></mat-progress-spinner>\n          </div>\n          <div class=\"text-primary absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"uploadProgress\"\n            ></mat-progress-spinner>\n          </div>\n          <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n        </div>\n      }\n      @if (imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          <ng-icon\n            name=\"iconoirMediaImageXmark\"\n            class=\"place-self-center text-rose-500\"\n            data-cy=\"imgErrorIcon\"\n          ></ng-icon>\n        </div>\n      }\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\" data-cy=\"imgInputMsgPrimary\">\n          {{ getPrimaryText() | translate }}\n        </p>\n        <p\n          class=\"text-sm\"\n          data-cy=\"imgInputMsgSecondary\"\n          [class]=\"\n            isUploadInProgress\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        accept=\"image/*\"\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      />\n    </label>\n    @if (!showUrlInput) {\n      <div class=\"flex-none mt-2\">\n        <gn-ui-button\n          data-cy=\"imgUrlBtn\"\n          (buttonClick)=\"displayUrlInput()\"\n          type=\"gray\"\n          [disabled]=\"disabled\"\n          [extraClass]=\"disabled && 'cursor-not-allowed'\"\n        >\n          <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n          {{ 'input.image.displayUrlInput' | translate }}\n        </gn-ui-button>\n      </div>\n    }\n    @if (showUrlInput) {\n      <gn-ui-url-input\n        class=\"mt-3.5\"\n        data-cy=\"imgUrlInput\"\n        (uploadClick)=\"downloadUrl($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      >\n      </gn-ui-url-input>\n    }\n  </div>\n}\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"] }]
+                    ], template: "@if (previewUrl) {\n  <div class=\"w-[314px] h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview\n      class=\"w-[314px] h-[314px]\"\n      [imageUrl]=\"previewUrl\"\n    >\n    </gn-ui-image-overlay-preview>\n    @if (showAltTextInput) {\n      <gn-ui-text-input\n        [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n        [value]=\"altText ?? ''\"\n        (valueChange)=\"handleAltTextChange($event)\"\n        extraClass=\"gn-ui-editor-textarea\"\n      ></gn-ui-text-input>\n    }\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"handleDelete()\"\n        data-cy=\"delete-image\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      @if (!showAltTextInput) {\n        <gn-ui-button type=\"gray\" (buttonClick)=\"toggleAltTextInput()\">\n          <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n          {{ 'input.image.displayAltTextInput' | translate }}\n        </gn-ui-button>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500': !getIsActionBlocked(),\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"getIsActionBlocked() ? null : 0\"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      @if (!isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          @if (!dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirMediaImage\"\n            ></ng-icon>\n          }\n          @if (dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirFramePlusIn\"\n            ></ng-icon>\n          }\n        </div>\n      }\n      @if (isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 grid items-center justify-center relative\">\n          <div class=\"text-gray-100 absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"100\"\n            ></mat-progress-spinner>\n          </div>\n          <div class=\"text-primary absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"uploadProgress\"\n            ></mat-progress-spinner>\n          </div>\n          <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n        </div>\n      }\n      @if (imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          <ng-icon\n            name=\"iconoirMediaImageXmark\"\n            class=\"place-self-center text-rose-500\"\n            data-cy=\"imgErrorIcon\"\n          ></ng-icon>\n        </div>\n      }\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\" data-cy=\"imgInputMsgPrimary\">\n          {{ getPrimaryText() | translate }}\n        </p>\n        <p\n          class=\"text-sm\"\n          data-cy=\"imgInputMsgSecondary\"\n          [class]=\"\n            isUploadInProgress\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        accept=\"image/*\"\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      />\n    </label>\n    @if (!showUrlInput) {\n      <div class=\"flex-none mt-2\">\n        <gn-ui-button\n          data-cy=\"imgUrlBtn\"\n          (buttonClick)=\"displayUrlInput()\"\n          type=\"gray\"\n          [disabled]=\"disabled\"\n          [extraClass]=\"disabled && 'cursor-not-allowed'\"\n        >\n          <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n          {{ 'input.image.displayUrlInput' | translate }}\n        </gn-ui-button>\n      </div>\n    }\n    @if (showUrlInput) {\n      <gn-ui-url-input\n        class=\"mt-3.5\"\n        data-cy=\"imgUrlInput\"\n        (uploadClick)=\"downloadUrl($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      >\n      </gn-ui-url-input>\n    }\n  </div>\n}\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"] }]
         }], propDecorators: { previewUrl: [{
                 type: Input
             }], altText: [{
@@ -34761,7 +34761,7 @@ class InternalLinkCardComponent {
             provideNgIconsConfig({
                 size: '1.2em',
             }),
-        ], ngImport: i0, template: "<a\n  [attr.href]=\"linkHref\"\n  [target]=\"linkTarget\"\n  class=\"record-card\"\n  [ngClass]=\"cardClass\"\n>\n  @if (shouldShowThumbnail) {\n    <div class=\"record-card__thumbnail\">\n      <gn-ui-thumbnail\n        class=\"w-full h-full object-cover\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n        [fit]=\"'cover'\"\n      ></gn-ui-thumbnail>\n    </div>\n  }\n  <div class=\"grow pt-1\" [ngClass]=\"shouldShowThumbnail ? 'sm:w-0' : ''\">\n    <div class=\"flex flex-col gap-2 h-full\">\n      <h4\n        class=\"record-card__title\"\n        data-cy=\"recordTitle\"\n        [title]=\"record.title\"\n      >\n        {{ record.title }}\n      </h4>\n      <!-- force max width here as long a-href urls within the markdown parser can cause layout issues -->\n      <div class=\"grow max-w-[248px] sm:max-w-full\">\n        <gn-ui-markdown-parser\n          data-cy=\"recordAbstract\"\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n          class=\"record-card__abstract\"\n          [title]=\"abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n      <div class=\"record-card__footer\">\n        @if (record.ownerOrganization?.name) {\n          <div\n            data-cy=\"recordOrg\"\n            class=\"grow flex flex-row gap-1 items-center text-primary-lighter\"\n            [ngClass]=\"displayContactIconOnly ? 'justify-center' : ''\"\n          >\n            <ng-icon\n              name=\"iconoirBank\"\n              class=\"text-primary -translate-y-[0.5px] shrink-0\"\n              [title]=\"record.ownerOrganization.name\"\n            ></ng-icon>\n            @if (!displayContactIconOnly) {\n              <span\n                data-cy=\"recordOrgName\"\n                class=\"line-clamp-1\"\n                [title]=\"record.ownerOrganization.name\"\n                >{{ record.ownerOrganization.name }}</span\n              >\n            }\n          </div>\n        }\n        <div class=\"record-card__footer__other\">\n          <div\n            class=\"xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0\"\n          >\n            <gn-ui-kind-badge\n              [extraClass]=\"'text-[1.2em]'\"\n              [styling]=\"'gray'\"\n              [kind]=\"record?.kind\"\n              [contentTemplate]=\"customTemplate\"\n              class=\"pt-1\"\n            >\n              <ng-template #customTemplate></ng-template\n            ></gn-ui-kind-badge>\n            @if (metadataQualityDisplay) {\n              <gn-ui-metadata-quality\n                class=\"flex items-center min-w-[113px]\"\n                [smaller]=\"true\"\n                [metadata]=\"record\"\n                [metadataQualityDisplay]=\"metadataQualityDisplay\"\n                [popoverDisplay]=\"true\"\n              ></gn-ui-metadata-quality>\n            }\n          </div>\n          <div\n            class=\"flex justify-center\"\n            data-cy=\"recordFav\"\n            [ngClass]=\"displayContactIconOnly ? 'px-1' : 'px-4'\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"favoriteTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: record }\"\n            ></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</a>\n", styles: [".record-card{@apply rounded-md bg-white hover:cursor-pointer hover:bg-slate-50 overflow-hidden items-stretch flex flex-row md:gap-0 justify-between py-3 pl-3 pr-5;}.record-card.size-L{@apply w-full md:h-[208px] gap-5;}.record-card.size-M{@apply max-w-[940px] md:h-[231px] gap-4;}.record-card.size-S{@apply max-w-[572px] md:h-[315px] gap-4;}.record-card.size-XS{@apply max-w-[280px] md:h-[315px] gap-4;}.record-card:hover .record-card__title{@apply text-primary;}.record-card__thumbnail{@apply border rounded-lg overflow-hidden shrink-0;}.size-L .record-card__thumbnail{@apply w-full w-[190px] h-[184px];}.size-M .record-card__thumbnail{@apply w-full w-[138px] h-[207px];}.record-card__title{@apply text-xl font-medium text-title leading-6;}.size-L .record-card__title{@apply line-clamp-2;}.size-M .record-card__title{@apply line-clamp-2 ml-2;}.size-S .record-card__title,.size-XS .record-card__title{@apply line-clamp-3 ml-2;}.record-card__abstract{@apply text-gray-900 overflow-hidden;}.size-L .record-card__abstract{@apply line-clamp-3;}.size-M .record-card__abstract{@apply line-clamp-3 ml-2;}.size-S .record-card__abstract,.size-XS .record-card__abstract{@apply line-clamp-4 ml-2;}.record-card__footer{@apply flex sm:flex-row flex-col flex-nowrap gap-3 justify-end items-center w-full border-t pt-1 overflow-hidden;}@media (max-width: 450px){.size-S .record-card__footer{@apply flex-col items-stretch;}}.size-XS .record-card__footer{@apply flex-col items-stretch gap-2;}.record-card__footer__other{@apply flex flex-col xs:flex-row flex-nowrap gap-3 xs:border-l first:border-l-0;}.record-card__footer__other>div{@apply py-1;}@media (max-width: 450px){.size-S .record-card__footer__other,.size-S .record-card__footer__other>div{@apply border-0 px-0 py-0;}}.size-XS .record-card__footer__other,.size-XS .record-card__footer__other>div{@apply border-0;}.size-XS .record-card__footer__other>div{@apply px-0 py-0;}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay", "popoverDisplay", "propsToValidate", "forceComputeScore"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KindBadgeComponent, selector: "gn-ui-kind-badge", inputs: ["styling", "contentTemplate", "kind", "extraClass"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }] }); }
+        ], ngImport: i0, template: "<a\n  [attr.href]=\"linkHref\"\n  [target]=\"linkTarget\"\n  class=\"record-card\"\n  [ngClass]=\"cardClass\"\n>\n  @if (shouldShowThumbnail) {\n    <div class=\"record-card__thumbnail\">\n      <gn-ui-thumbnail\n        class=\"w-full h-full object-cover\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n        [fit]=\"'cover'\"\n      ></gn-ui-thumbnail>\n    </div>\n  }\n  <div class=\"grow pt-1\" [ngClass]=\"shouldShowThumbnail ? 'sm:w-0' : ''\">\n    <div class=\"flex flex-col gap-2\" [class.h-full]=\"size !== 'M'\">\n      <h4\n        class=\"record-card__title\"\n        data-cy=\"recordTitle\"\n        [title]=\"record.title\"\n      >\n        {{ record.title }}\n      </h4>\n      <!-- force max width here as long a-href urls within the markdown parser can cause layout issues -->\n      <div class=\"grow max-w-[248px] sm:max-w-full\">\n        <gn-ui-markdown-parser\n          data-cy=\"recordAbstract\"\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n          class=\"record-card__abstract\"\n          [title]=\"abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n      @if (size !== 'M') {\n        <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n      }\n    </div>\n  </div>\n  @if (size === 'M') {\n    <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n  }\n</a>\n\n<ng-template #footerTpl>\n  <div class=\"record-card__footer\">\n    @if (record.ownerOrganization?.name) {\n      <div\n        data-cy=\"recordOrg\"\n        class=\"grow flex flex-row gap-1 items-center text-primary-lighter\"\n        [ngClass]=\"displayContactIconOnly ? 'justify-center' : ''\"\n      >\n        <ng-icon\n          name=\"iconoirBank\"\n          class=\"text-primary -translate-y-[0.5px] shrink-0\"\n          [title]=\"record.ownerOrganization.name\"\n        ></ng-icon>\n        @if (!displayContactIconOnly) {\n          <span\n            data-cy=\"recordOrgName\"\n            class=\"line-clamp-1\"\n            [title]=\"record.ownerOrganization.name\"\n            >{{ record.ownerOrganization.name }}</span\n          >\n        }\n      </div>\n    }\n    <div class=\"record-card__footer__other\">\n      <div class=\"xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0\">\n        <gn-ui-kind-badge\n          [extraClass]=\"'text-[1.2em]'\"\n          [styling]=\"'gray'\"\n          [kind]=\"record?.kind\"\n          [contentTemplate]=\"customTemplate\"\n          class=\"pt-1\"\n        >\n          <ng-template #customTemplate></ng-template\n        ></gn-ui-kind-badge>\n        @if (metadataQualityDisplay) {\n          <gn-ui-metadata-quality\n            class=\"flex items-center min-w-[113px]\"\n            [smaller]=\"true\"\n            [metadata]=\"record\"\n            [metadataQualityDisplay]=\"metadataQualityDisplay\"\n            [popoverDisplay]=\"true\"\n          ></gn-ui-metadata-quality>\n        }\n      </div>\n      <div\n        class=\"flex justify-center\"\n        data-cy=\"recordFav\"\n        [ngClass]=\"displayContactIconOnly ? 'px-1' : 'px-4'\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".record-card{@apply rounded-md bg-white hover:cursor-pointer hover:bg-slate-50 overflow-hidden items-stretch flex flex-row md:gap-0 justify-between py-3 pl-3 pr-5;}.record-card.size-L{@apply w-full md:h-[208px] gap-5;}.record-card.size-M{@apply max-w-[940px] gap-4 flex-wrap;}.record-card.size-S{@apply max-w-[572px] md:h-[315px] gap-4;}.record-card.size-XS{@apply max-w-[280px] md:h-[315px] gap-4;}.record-card:hover .record-card__title{@apply text-primary;}.record-card__thumbnail{@apply border rounded-lg overflow-hidden shrink-0;}.size-L .record-card__thumbnail{@apply w-[184px] h-[184px];}.size-M .record-card__thumbnail{@apply w-[138px] h-[138px];}.record-card__title{@apply text-xl font-medium text-title leading-6;}.size-L .record-card__title,.size-M .record-card__title{@apply line-clamp-2;}.size-S .record-card__title,.size-XS .record-card__title{@apply line-clamp-3 ml-2;}.record-card__abstract{@apply text-gray-900 overflow-hidden;}.size-L .record-card__abstract,.size-M .record-card__abstract{@apply line-clamp-3;}.size-S .record-card__abstract,.size-XS .record-card__abstract{@apply line-clamp-4 ml-2;}.record-card__footer{@apply flex sm:flex-row flex-col flex-nowrap gap-3 justify-end items-center w-full border-t pt-1 overflow-hidden;}@media (max-width: 450px){.size-S .record-card__footer{@apply flex-col items-stretch;}}.size-XS .record-card__footer{@apply flex-col items-stretch gap-2;}.record-card__footer__other{@apply flex flex-col xs:flex-row flex-nowrap gap-3 xs:border-l first:border-l-0;}.record-card__footer__other>div{@apply py-1;}@media (max-width: 450px){.size-S .record-card__footer__other,.size-S .record-card__footer__other>div{@apply border-0 px-0 py-0;}}.size-XS .record-card__footer__other,.size-XS .record-card__footer__other>div{@apply border-0;}.size-XS .record-card__footer__other>div{@apply px-0 py-0;}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay", "popoverDisplay", "propsToValidate", "forceComputeScore"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KindBadgeComponent, selector: "gn-ui-kind-badge", inputs: ["styling", "contentTemplate", "kind", "extraClass"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InternalLinkCardComponent, decorators: [{
             type: Component,
@@ -34781,7 +34781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         provideNgIconsConfig({
                             size: '1.2em',
                         }),
-                    ], template: "<a\n  [attr.href]=\"linkHref\"\n  [target]=\"linkTarget\"\n  class=\"record-card\"\n  [ngClass]=\"cardClass\"\n>\n  @if (shouldShowThumbnail) {\n    <div class=\"record-card__thumbnail\">\n      <gn-ui-thumbnail\n        class=\"w-full h-full object-cover\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n        [fit]=\"'cover'\"\n      ></gn-ui-thumbnail>\n    </div>\n  }\n  <div class=\"grow pt-1\" [ngClass]=\"shouldShowThumbnail ? 'sm:w-0' : ''\">\n    <div class=\"flex flex-col gap-2 h-full\">\n      <h4\n        class=\"record-card__title\"\n        data-cy=\"recordTitle\"\n        [title]=\"record.title\"\n      >\n        {{ record.title }}\n      </h4>\n      <!-- force max width here as long a-href urls within the markdown parser can cause layout issues -->\n      <div class=\"grow max-w-[248px] sm:max-w-full\">\n        <gn-ui-markdown-parser\n          data-cy=\"recordAbstract\"\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n          class=\"record-card__abstract\"\n          [title]=\"abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n      <div class=\"record-card__footer\">\n        @if (record.ownerOrganization?.name) {\n          <div\n            data-cy=\"recordOrg\"\n            class=\"grow flex flex-row gap-1 items-center text-primary-lighter\"\n            [ngClass]=\"displayContactIconOnly ? 'justify-center' : ''\"\n          >\n            <ng-icon\n              name=\"iconoirBank\"\n              class=\"text-primary -translate-y-[0.5px] shrink-0\"\n              [title]=\"record.ownerOrganization.name\"\n            ></ng-icon>\n            @if (!displayContactIconOnly) {\n              <span\n                data-cy=\"recordOrgName\"\n                class=\"line-clamp-1\"\n                [title]=\"record.ownerOrganization.name\"\n                >{{ record.ownerOrganization.name }}</span\n              >\n            }\n          </div>\n        }\n        <div class=\"record-card__footer__other\">\n          <div\n            class=\"xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0\"\n          >\n            <gn-ui-kind-badge\n              [extraClass]=\"'text-[1.2em]'\"\n              [styling]=\"'gray'\"\n              [kind]=\"record?.kind\"\n              [contentTemplate]=\"customTemplate\"\n              class=\"pt-1\"\n            >\n              <ng-template #customTemplate></ng-template\n            ></gn-ui-kind-badge>\n            @if (metadataQualityDisplay) {\n              <gn-ui-metadata-quality\n                class=\"flex items-center min-w-[113px]\"\n                [smaller]=\"true\"\n                [metadata]=\"record\"\n                [metadataQualityDisplay]=\"metadataQualityDisplay\"\n                [popoverDisplay]=\"true\"\n              ></gn-ui-metadata-quality>\n            }\n          </div>\n          <div\n            class=\"flex justify-center\"\n            data-cy=\"recordFav\"\n            [ngClass]=\"displayContactIconOnly ? 'px-1' : 'px-4'\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"favoriteTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: record }\"\n            ></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</a>\n", styles: [".record-card{@apply rounded-md bg-white hover:cursor-pointer hover:bg-slate-50 overflow-hidden items-stretch flex flex-row md:gap-0 justify-between py-3 pl-3 pr-5;}.record-card.size-L{@apply w-full md:h-[208px] gap-5;}.record-card.size-M{@apply max-w-[940px] md:h-[231px] gap-4;}.record-card.size-S{@apply max-w-[572px] md:h-[315px] gap-4;}.record-card.size-XS{@apply max-w-[280px] md:h-[315px] gap-4;}.record-card:hover .record-card__title{@apply text-primary;}.record-card__thumbnail{@apply border rounded-lg overflow-hidden shrink-0;}.size-L .record-card__thumbnail{@apply w-full w-[190px] h-[184px];}.size-M .record-card__thumbnail{@apply w-full w-[138px] h-[207px];}.record-card__title{@apply text-xl font-medium text-title leading-6;}.size-L .record-card__title{@apply line-clamp-2;}.size-M .record-card__title{@apply line-clamp-2 ml-2;}.size-S .record-card__title,.size-XS .record-card__title{@apply line-clamp-3 ml-2;}.record-card__abstract{@apply text-gray-900 overflow-hidden;}.size-L .record-card__abstract{@apply line-clamp-3;}.size-M .record-card__abstract{@apply line-clamp-3 ml-2;}.size-S .record-card__abstract,.size-XS .record-card__abstract{@apply line-clamp-4 ml-2;}.record-card__footer{@apply flex sm:flex-row flex-col flex-nowrap gap-3 justify-end items-center w-full border-t pt-1 overflow-hidden;}@media (max-width: 450px){.size-S .record-card__footer{@apply flex-col items-stretch;}}.size-XS .record-card__footer{@apply flex-col items-stretch gap-2;}.record-card__footer__other{@apply flex flex-col xs:flex-row flex-nowrap gap-3 xs:border-l first:border-l-0;}.record-card__footer__other>div{@apply py-1;}@media (max-width: 450px){.size-S .record-card__footer__other,.size-S .record-card__footer__other>div{@apply border-0 px-0 py-0;}}.size-XS .record-card__footer__other,.size-XS .record-card__footer__other>div{@apply border-0;}.size-XS .record-card__footer__other>div{@apply px-0 py-0;}\n"] }]
+                    ], template: "<a\n  [attr.href]=\"linkHref\"\n  [target]=\"linkTarget\"\n  class=\"record-card\"\n  [ngClass]=\"cardClass\"\n>\n  @if (shouldShowThumbnail) {\n    <div class=\"record-card__thumbnail\">\n      <gn-ui-thumbnail\n        class=\"w-full h-full object-cover\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n        [fit]=\"'cover'\"\n      ></gn-ui-thumbnail>\n    </div>\n  }\n  <div class=\"grow pt-1\" [ngClass]=\"shouldShowThumbnail ? 'sm:w-0' : ''\">\n    <div class=\"flex flex-col gap-2\" [class.h-full]=\"size !== 'M'\">\n      <h4\n        class=\"record-card__title\"\n        data-cy=\"recordTitle\"\n        [title]=\"record.title\"\n      >\n        {{ record.title }}\n      </h4>\n      <!-- force max width here as long a-href urls within the markdown parser can cause layout issues -->\n      <div class=\"grow max-w-[248px] sm:max-w-full\">\n        <gn-ui-markdown-parser\n          data-cy=\"recordAbstract\"\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n          class=\"record-card__abstract\"\n          [title]=\"abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n      @if (size !== 'M') {\n        <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n      }\n    </div>\n  </div>\n  @if (size === 'M') {\n    <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n  }\n</a>\n\n<ng-template #footerTpl>\n  <div class=\"record-card__footer\">\n    @if (record.ownerOrganization?.name) {\n      <div\n        data-cy=\"recordOrg\"\n        class=\"grow flex flex-row gap-1 items-center text-primary-lighter\"\n        [ngClass]=\"displayContactIconOnly ? 'justify-center' : ''\"\n      >\n        <ng-icon\n          name=\"iconoirBank\"\n          class=\"text-primary -translate-y-[0.5px] shrink-0\"\n          [title]=\"record.ownerOrganization.name\"\n        ></ng-icon>\n        @if (!displayContactIconOnly) {\n          <span\n            data-cy=\"recordOrgName\"\n            class=\"line-clamp-1\"\n            [title]=\"record.ownerOrganization.name\"\n            >{{ record.ownerOrganization.name }}</span\n          >\n        }\n      </div>\n    }\n    <div class=\"record-card__footer__other\">\n      <div class=\"xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0\">\n        <gn-ui-kind-badge\n          [extraClass]=\"'text-[1.2em]'\"\n          [styling]=\"'gray'\"\n          [kind]=\"record?.kind\"\n          [contentTemplate]=\"customTemplate\"\n          class=\"pt-1\"\n        >\n          <ng-template #customTemplate></ng-template\n        ></gn-ui-kind-badge>\n        @if (metadataQualityDisplay) {\n          <gn-ui-metadata-quality\n            class=\"flex items-center min-w-[113px]\"\n            [smaller]=\"true\"\n            [metadata]=\"record\"\n            [metadataQualityDisplay]=\"metadataQualityDisplay\"\n            [popoverDisplay]=\"true\"\n          ></gn-ui-metadata-quality>\n        }\n      </div>\n      <div\n        class=\"flex justify-center\"\n        data-cy=\"recordFav\"\n        [ngClass]=\"displayContactIconOnly ? 'px-1' : 'px-4'\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".record-card{@apply rounded-md bg-white hover:cursor-pointer hover:bg-slate-50 overflow-hidden items-stretch flex flex-row md:gap-0 justify-between py-3 pl-3 pr-5;}.record-card.size-L{@apply w-full md:h-[208px] gap-5;}.record-card.size-M{@apply max-w-[940px] gap-4 flex-wrap;}.record-card.size-S{@apply max-w-[572px] md:h-[315px] gap-4;}.record-card.size-XS{@apply max-w-[280px] md:h-[315px] gap-4;}.record-card:hover .record-card__title{@apply text-primary;}.record-card__thumbnail{@apply border rounded-lg overflow-hidden shrink-0;}.size-L .record-card__thumbnail{@apply w-[184px] h-[184px];}.size-M .record-card__thumbnail{@apply w-[138px] h-[138px];}.record-card__title{@apply text-xl font-medium text-title leading-6;}.size-L .record-card__title,.size-M .record-card__title{@apply line-clamp-2;}.size-S .record-card__title,.size-XS .record-card__title{@apply line-clamp-3 ml-2;}.record-card__abstract{@apply text-gray-900 overflow-hidden;}.size-L .record-card__abstract,.size-M .record-card__abstract{@apply line-clamp-3;}.size-S .record-card__abstract,.size-XS .record-card__abstract{@apply line-clamp-4 ml-2;}.record-card__footer{@apply flex sm:flex-row flex-col flex-nowrap gap-3 justify-end items-center w-full border-t pt-1 overflow-hidden;}@media (max-width: 450px){.size-S .record-card__footer{@apply flex-col items-stretch;}}.size-XS .record-card__footer{@apply flex-col items-stretch gap-2;}.record-card__footer__other{@apply flex flex-col xs:flex-row flex-nowrap gap-3 xs:border-l first:border-l-0;}.record-card__footer__other>div{@apply py-1;}@media (max-width: 450px){.size-S .record-card__footer__other,.size-S .record-card__footer__other>div{@apply border-0 px-0 py-0;}}.size-XS .record-card__footer__other,.size-XS .record-card__footer__other>div{@apply border-0;}.size-XS .record-card__footer__other>div{@apply px-0 py-0;}\n"] }]
         }], propDecorators: { record: [{
                 type: Input
             }], linkTarget: [{
@@ -35332,7 +35332,7 @@ class RecordPreviewFeedComponent extends RecordPreviewComponent {
         return this.timeFormat.format(this.record.recordCreated, Date.now());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RecordPreviewFeedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RecordPreviewFeedComponent, isStandalone: true, selector: "gn-ui-record-preview-feed", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"mx-[18px] pl-[18px] pb-[18px] border-solid border-l-2 border-gray-100\"\n>\n  <a\n    class=\"record-container block rounded-lg bg-white border border-white card-shadow\"\n    [attr.href]=\"linkHref\"\n    [target]=\"linkTarget\"\n  >\n    <div\n      class=\"record-header py-4 px-4 border-b border-gray-300 flex flex-row items-center relative transition duration-200\"\n    >\n      <div\n        class=\"absolute w-3 h-3 bg-secondary rounded-full\"\n        style=\"right: calc(100% + 14px)\"\n      ></div>\n      <div\n        class=\"record-header-image border border-gray-300 bg-white rounded-full w-16 h-16 object-contain mr-4 overflow-hidden transition duration-200 shrink-0\"\n      >\n        @if (!hasLogo) {\n          <ng-icon\n            class=\"text-gray-200\"\n            name=\"{{ hasOnlyPerson ? 'matFace' : 'matHomeWorkOutline' }}\"\n            style=\"width: 42px; height: 42px; font-size: 42px; margin: 10px\"\n          ></ng-icon>\n        }\n        @if (hasLogo) {\n          <gn-ui-thumbnail\n            [thumbnailUrl]=\"record.ownerOrganization?.logoUrl?.toString()\"\n            [fit]=\"'contain'\"\n          ></gn-ui-thumbnail>\n        }\n      </div>\n      <div class=\"flex flex-col overflow-hidden items-start\">\n        @if (hasOrganization) {\n          <span\n            class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n          >\n            {{ record.ownerOrganization.name }}\n          </span>\n        }\n        @if (hasOnlyPerson) {\n          <span\n            class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n          >\n            {{ contact.firstName }} {{ contact.lastName }}\n          </span>\n        }\n        <p class=\"\">\n          <span translate [translateParams]=\"{ time }\"\n            >record.was.created.time</span\n          >\n        </p>\n      </div>\n    </div>\n    <div class=\"pt-5 pb-5 px-10 relative\">\n      <div class=\"absolute top-[0.85em] right-[0.85em]\">\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n      <h1\n        class=\"font-title text-black text-[21px] font-medium mb-3 pr-8\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </h1>\n      <p class=\"line-clamp-3\">\n        <gn-ui-markdown-parser\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n        />\n      </p>\n      @if (record.overviews?.[0]) {\n        <gn-ui-thumbnail\n          class=\"block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden\"\n          [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n        ></gn-ui-thumbnail>\n      }\n      @if (isDownloadable || isViewable) {\n        <div class=\"flex flex-row mt-3\">\n          @if (isDownloadable) {\n            <ng-icon\n              class=\"text-primary opacity-45 mr-3\"\n              name=\"matCloudDownloadOutline\"\n            >\n            </ng-icon>\n          }\n          @if (isViewable) {\n            <ng-icon class=\"text-primary opacity-45 mr-3\" name=\"matMapOutline\">\n            </ng-icon>\n          }\n        </div>\n      }\n    </div>\n  </a>\n</div>\n", styles: [".record-container:hover .record-header,.record-container:hover .record-header-image{border-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RecordPreviewFeedComponent, isStandalone: true, selector: "gn-ui-record-preview-feed", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"mx-[18px] pl-[18px] pb-[18px] border-solid border-l-2 border-gray-100\"\n>\n  <a\n    class=\"record-container block rounded-lg bg-white border border-white card-shadow\"\n    [attr.href]=\"linkHref\"\n    [target]=\"linkTarget\"\n  >\n    <div\n      class=\"record-header py-4 px-4 border-b border-gray-300 flex flex-row items-center relative transition duration-200\"\n    >\n      <div\n        class=\"absolute w-3 h-3 bg-secondary rounded-full\"\n        style=\"right: calc(100% + 14px)\"\n      ></div>\n      <div\n        class=\"record-header-image border border-gray-300 bg-white rounded-full w-16 h-16 object-contain mr-4 overflow-hidden transition duration-200 shrink-0\"\n      >\n        @if (!hasLogo) {\n          <ng-icon\n            class=\"text-gray-200\"\n            name=\"{{ hasOnlyPerson ? 'matFace' : 'matHomeWorkOutline' }}\"\n            style=\"width: 42px; height: 42px; font-size: 42px; margin: 10px\"\n          ></ng-icon>\n        }\n        @if (hasLogo) {\n          <gn-ui-thumbnail\n            [thumbnailUrl]=\"record.ownerOrganization?.logoUrl?.toString()\"\n            [fit]=\"'contain'\"\n          ></gn-ui-thumbnail>\n        }\n      </div>\n      <div class=\"flex flex-col overflow-hidden items-start grow\">\n        @if (hasOrganization) {\n          <span\n            class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n          >\n            {{ record.ownerOrganization.name }}\n          </span>\n        }\n        @if (hasOnlyPerson) {\n          <span\n            class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n          >\n            {{ contact.firstName }} {{ contact.lastName }}\n          </span>\n        }\n        <p class=\"\">\n          <span translate [translateParams]=\"{ time }\"\n            >record.was.created.time</span\n          >\n        </p>\n      </div>\n      <div class=\"ml-3 shrink-0\">\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n    </div>\n    <div class=\"pt-5 pb-5 px-10 relative\">\n      <div class=\"flex flex-col sm:flex-row gap-4 mb-3\">\n        @if (record.overviews?.[0]) {\n          <gn-ui-thumbnail\n            class=\"block shrink-0 w-[120px] h-[120px] border border-gray-100 rounded-lg overflow-hidden\"\n            [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n            [fit]=\"'cover'\"\n          ></gn-ui-thumbnail>\n        }\n        <h1\n          class=\"font-title text-black text-[21px] font-medium\"\n          data-cy=\"recordTitle\"\n        >\n          {{ record.title }}\n        </h1>\n      </div>\n      <p class=\"line-clamp-3\">\n        <gn-ui-markdown-parser\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n        />\n      </p>\n      @if (isDownloadable || isViewable) {\n        <div class=\"flex flex-row mt-3\">\n          @if (isDownloadable) {\n            <ng-icon\n              class=\"text-primary opacity-45 mr-3\"\n              name=\"matCloudDownloadOutline\"\n            >\n            </ng-icon>\n          }\n          @if (isViewable) {\n            <ng-icon class=\"text-primary opacity-45 mr-3\" name=\"matMapOutline\">\n            </ng-icon>\n          }\n        </div>\n      }\n    </div>\n  </a>\n</div>\n", styles: [".record-container:hover .record-header,.record-container:hover .record-header-image{border-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], viewProviders: [
             provideIcons({
                 matMapOutline,
                 matCloudDownloadOutline,
@@ -35362,7 +35362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         provideNgIconsConfig({
                             size: '1.5em',
                         }),
-                    ], template: "<div\n  class=\"mx-[18px] pl-[18px] pb-[18px] border-solid border-l-2 border-gray-100\"\n>\n  <a\n    class=\"record-container block rounded-lg bg-white border border-white card-shadow\"\n    [attr.href]=\"linkHref\"\n    [target]=\"linkTarget\"\n  >\n    <div\n      class=\"record-header py-4 px-4 border-b border-gray-300 flex flex-row items-center relative transition duration-200\"\n    >\n      <div\n        class=\"absolute w-3 h-3 bg-secondary rounded-full\"\n        style=\"right: calc(100% + 14px)\"\n      ></div>\n      <div\n        class=\"record-header-image border border-gray-300 bg-white rounded-full w-16 h-16 object-contain mr-4 overflow-hidden transition duration-200 shrink-0\"\n      >\n        @if (!hasLogo) {\n          <ng-icon\n            class=\"text-gray-200\"\n            name=\"{{ hasOnlyPerson ? 'matFace' : 'matHomeWorkOutline' }}\"\n            style=\"width: 42px; height: 42px; font-size: 42px; margin: 10px\"\n          ></ng-icon>\n        }\n        @if (hasLogo) {\n          <gn-ui-thumbnail\n            [thumbnailUrl]=\"record.ownerOrganization?.logoUrl?.toString()\"\n            [fit]=\"'contain'\"\n          ></gn-ui-thumbnail>\n        }\n      </div>\n      <div class=\"flex flex-col overflow-hidden items-start\">\n        @if (hasOrganization) {\n          <span\n            class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n          >\n            {{ record.ownerOrganization.name }}\n          </span>\n        }\n        @if (hasOnlyPerson) {\n          <span\n            class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n          >\n            {{ contact.firstName }} {{ contact.lastName }}\n          </span>\n        }\n        <p class=\"\">\n          <span translate [translateParams]=\"{ time }\"\n            >record.was.created.time</span\n          >\n        </p>\n      </div>\n    </div>\n    <div class=\"pt-5 pb-5 px-10 relative\">\n      <div class=\"absolute top-[0.85em] right-[0.85em]\">\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n      <h1\n        class=\"font-title text-black text-[21px] font-medium mb-3 pr-8\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </h1>\n      <p class=\"line-clamp-3\">\n        <gn-ui-markdown-parser\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n        />\n      </p>\n      @if (record.overviews?.[0]) {\n        <gn-ui-thumbnail\n          class=\"block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden\"\n          [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n        ></gn-ui-thumbnail>\n      }\n      @if (isDownloadable || isViewable) {\n        <div class=\"flex flex-row mt-3\">\n          @if (isDownloadable) {\n            <ng-icon\n              class=\"text-primary opacity-45 mr-3\"\n              name=\"matCloudDownloadOutline\"\n            >\n            </ng-icon>\n          }\n          @if (isViewable) {\n            <ng-icon class=\"text-primary opacity-45 mr-3\" name=\"matMapOutline\">\n            </ng-icon>\n          }\n        </div>\n      }\n    </div>\n  </a>\n</div>\n", styles: [".record-container:hover .record-header,.record-container:hover .record-header-image{border-color:var(--color-primary-lightest)}\n"] }]
+                    ], template: "<div\n  class=\"mx-[18px] pl-[18px] pb-[18px] border-solid border-l-2 border-gray-100\"\n>\n  <a\n    class=\"record-container block rounded-lg bg-white border border-white card-shadow\"\n    [attr.href]=\"linkHref\"\n    [target]=\"linkTarget\"\n  >\n    <div\n      class=\"record-header py-4 px-4 border-b border-gray-300 flex flex-row items-center relative transition duration-200\"\n    >\n      <div\n        class=\"absolute w-3 h-3 bg-secondary rounded-full\"\n        style=\"right: calc(100% + 14px)\"\n      ></div>\n      <div\n        class=\"record-header-image border border-gray-300 bg-white rounded-full w-16 h-16 object-contain mr-4 overflow-hidden transition duration-200 shrink-0\"\n      >\n        @if (!hasLogo) {\n          <ng-icon\n            class=\"text-gray-200\"\n            name=\"{{ hasOnlyPerson ? 'matFace' : 'matHomeWorkOutline' }}\"\n            style=\"width: 42px; height: 42px; font-size: 42px; margin: 10px\"\n          ></ng-icon>\n        }\n        @if (hasLogo) {\n          <gn-ui-thumbnail\n            [thumbnailUrl]=\"record.ownerOrganization?.logoUrl?.toString()\"\n            [fit]=\"'contain'\"\n          ></gn-ui-thumbnail>\n        }\n      </div>\n      <div class=\"flex flex-col overflow-hidden items-start grow\">\n        @if (hasOrganization) {\n          <span\n            class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n          >\n            {{ record.ownerOrganization.name }}\n          </span>\n        }\n        @if (hasOnlyPerson) {\n          <span\n            class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n          >\n            {{ contact.firstName }} {{ contact.lastName }}\n          </span>\n        }\n        <p class=\"\">\n          <span translate [translateParams]=\"{ time }\"\n            >record.was.created.time</span\n          >\n        </p>\n      </div>\n      <div class=\"ml-3 shrink-0\">\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n    </div>\n    <div class=\"pt-5 pb-5 px-10 relative\">\n      <div class=\"flex flex-col sm:flex-row gap-4 mb-3\">\n        @if (record.overviews?.[0]) {\n          <gn-ui-thumbnail\n            class=\"block shrink-0 w-[120px] h-[120px] border border-gray-100 rounded-lg overflow-hidden\"\n            [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n            [fit]=\"'cover'\"\n          ></gn-ui-thumbnail>\n        }\n        <h1\n          class=\"font-title text-black text-[21px] font-medium\"\n          data-cy=\"recordTitle\"\n        >\n          {{ record.title }}\n        </h1>\n      </div>\n      <p class=\"line-clamp-3\">\n        <gn-ui-markdown-parser\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n        />\n      </p>\n      @if (isDownloadable || isViewable) {\n        <div class=\"flex flex-row mt-3\">\n          @if (isDownloadable) {\n            <ng-icon\n              class=\"text-primary opacity-45 mr-3\"\n              name=\"matCloudDownloadOutline\"\n            >\n            </ng-icon>\n          }\n          @if (isViewable) {\n            <ng-icon class=\"text-primary opacity-45 mr-3\" name=\"matMapOutline\">\n            </ng-icon>\n          }\n        </div>\n      }\n    </div>\n  </a>\n</div>\n", styles: [".record-container:hover .record-header,.record-container:hover .record-header-image{border-color:var(--color-primary-lightest)}\n"] }]
         }], ctorParameters: () => [] });
 
 class RecordPreviewListComponent extends RecordPreviewComponent {