geonetwork-ui 2.8.0-dev.398701d7f → 2.8.0-dev.3e963cace

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

@@ -8,26 +8,25 @@
       [matSortDisableClear]="true"
       *ngrxLet="properties$ as properties"
     >
-      <ng-container
-        *ngFor="let attr of _featureAttributes"
-        [matColumnDef]="attr.value"
-      >
-        <th
-          mat-header-cell
-          *matHeaderCellDef
-          mat-sort-header
-          class="text-sm text-black bg-white"
-        >
-          {{ attr.label }}
-        </th>
-        <td
-          mat-cell
-          *matCellDef="let element"
-          class="whitespace-nowrap pr-1 truncate"
-        >
-          {{ element[attr.value] }}
-        </td>
-      </ng-container>
+      @for (attr of _featureAttributes; track attr) {
+        <ng-container [matColumnDef]="attr.value">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            mat-sort-header
+            class="text-sm text-black bg-white"
+          >
+            {{ attr.label }}
+          </th>
+          <td
+            mat-cell
+            *matCellDef="let element"
+            class="whitespace-nowrap pr-1 truncate"
+          >
+            {{ element[attr.value] }}
+          </td>
+        </ng-container>
+      }
 
       <tr mat-header-row *matHeaderRowDef="properties; sticky: true"></tr>
       <tr
@@ -40,19 +39,21 @@
         "
       ></tr>
     </table>
-    <gn-ui-loading-mask
-      *ngIf="loading$ | async"
-      class="sticky inset-0"
-      [message]="'table.loading.data' | translate"
-    ></gn-ui-loading-mask>
-    <gn-ui-popup-alert
-      *ngIf="error"
-      type="warning"
-      icon="matErrorOutlineOutline"
-      class="absolute m-2 inset-0 z-[100]"
-    >
-      <span translate>{{ error }}</span>
-    </gn-ui-popup-alert>
+    @if (loading$ | async) {
+      <gn-ui-loading-mask
+        class="sticky inset-0"
+        [message]="'table.loading.data' | translate"
+      ></gn-ui-loading-mask>
+    }
+    @if (error) {
+      <gn-ui-popup-alert
+        type="warning"
+        icon="matErrorOutlineOutline"
+        class="absolute m-2 inset-0 z-[100]"
+      >
+        <span translate>{{ error }}</span>
+      </gn-ui-popup-alert>
+    }
   </div>
   <div class="flex justify-between items-center overflow-hidden">
     <div class="text-gray-900 px-4 py-2 text-sm">

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

@@ -11,6 +11,7 @@ import {
   OnInit,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { MatSort, MatSortModule } from '@angular/material/sort'
 import { MatTableModule } from '@angular/material/table'
@@ -66,6 +67,10 @@ export interface TableItemModel {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
+  private eltRef = inject(ElementRef)
+  private cdr = inject(ChangeDetectorRef)
+  private translateService = inject(TranslateService)
+
   _featureAttributes = []
   @Input() set featureAttributes(value: { value: string; label: string }[]) {
     this._featureAttributes = value
@@ -90,12 +95,6 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
   loading$ = new BehaviorSubject<boolean>(false)
   error = null
 
-  constructor(
-    private eltRef: ElementRef,
-    private cdr: ChangeDetectorRef,
-    private translateService: TranslateService
-  ) {}
-
   ngOnInit() {
     this.dataSource = new DataTableDataSource()
   }

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

@@ -14,6 +14,7 @@ export * from './lib/markdown-editor/markdown-editor.component'
 export * from './lib/markdown-parser/markdown-parser.component'
 export * from './lib/metadata-catalog/metadata-catalog.component'
 export * from './lib/metadata-contact/metadata-contact.component'
+export * from './lib/metadata-doi/metadata-doi.component'
 export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
@@ -26,3 +27,4 @@ export * from './lib/application-banner/application-banner.component'
 export * from './lib/internal-link-card/internal-link-card.component'
 export * from './lib/service-capabilities/service-capabilities.component'
 export * from './lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component'
+export * from './lib/stac-items-result-grid/stac-items-result-grid.component'

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

@@ -2,17 +2,17 @@
   class="group flex justify-between rounded filter overflow-hidden card-shadow"
   [ngClass]="cardClass"
 >
-  <ng-container *ngIf="size !== 'S'">
+  @if (size !== 'S') {
     <div class="flex-1 min-w-0">
       <ng-container *ngTemplateOutlet="content"></ng-container>
     </div>
     <div class="flex items-center min-w-[32px]">
       <ng-container *ngTemplateOutlet="buttons"></ng-container>
     </div>
-  </ng-container>
-  <ng-container *ngIf="size === 'S'">
+  }
+  @if (size === 'S') {
     <ng-container *ngTemplateOutlet="content"></ng-container>
-  </ng-container>
+  }
 </div>
 
 <ng-template #buttons>
@@ -23,30 +23,31 @@
       [displayText]="false"
       class="border border-gray-300 rounded-lg pt-1 px-2 h-[34px]"
     ></gn-ui-copy-text-button>
-    <button
-      *ngIf="displayApiFormButton"
-      type="button"
-      class="gn-ui-card-icon"
-      [ngClass]="{
-        'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-          displayText,
-      }"
-      [matTooltip]="
-        !currentlyActive
-          ? ('record.metadata.api.form.openForm' | translate)
-          : ('record.metadata.api.form.closeForm' | translate)
-      "
-      matTooltipPosition="above"
-      (click)="openRecordApiFormPanel()"
-    >
-      <ng-icon
-        class="pointer-events-none align-middle card-icon"
-        name="iconoirSettings"
+    @if (displayApiFormButton) {
+      <button
+        type="button"
+        class="gn-ui-card-icon"
         [ngClass]="{
-          'text-secondary opacity-100': currentlyActive,
+          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+            displayText,
         }"
-      ></ng-icon>
-    </button>
+        [matTooltip]="
+          !currentlyActive
+            ? ('record.metadata.api.form.openForm' | translate)
+            : ('record.metadata.api.form.closeForm' | translate)
+        "
+        matTooltipPosition="above"
+        (click)="openRecordApiFormPanel()"
+      >
+        <ng-icon
+          class="pointer-events-none align-middle card-icon"
+          name="iconoirSettings"
+          [ngClass]="{
+            'text-secondary opacity-100': currentlyActive,
+          }"
+        ></ng-icon>
+      </button>
+    }
   </div>
 </ng-template>
 
@@ -61,30 +62,34 @@
   </div>
   <div class="flex flex-row justify-between">
     <div class="flex flex-row gap-2.5 items-center pt-1">
-      <span
-        *ngIf="link.accessServiceProtocol !== 'GPFDL'"
-        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"
-        [ngClass]="{
-          '!bg-primary': currentlyActive,
-        }"
-        translate
-        >record.metadata.api.accessServiceProtocol.{{
-          link.accessServiceProtocol
-        }}</span
-      >
-      <span
-        *ngIf="link.accessServiceProtocol === 'GPFDL'"
-        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"
-        [ngClass]="{
-          '!bg-primary': currentlyActive,
-        }"
-        translate
-      >
-        record.metadata.api.gpfdl</span
-      >
-    </div>
-    <div *ngIf="size === 'S'">
-      <ng-container *ngTemplateOutlet="buttons"></ng-container>
+      @if (link.accessServiceProtocol !== 'GPFDL') {
+        <span
+          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"
+          [ngClass]="{
+            '!bg-primary': currentlyActive,
+          }"
+          translate
+          >record.metadata.api.accessServiceProtocol.{{
+            link.accessServiceProtocol
+          }}</span
+        >
+      }
+      @if (link.accessServiceProtocol === 'GPFDL') {
+        <span
+          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"
+          [ngClass]="{
+            '!bg-primary': currentlyActive,
+          }"
+          translate
+        >
+          record.metadata.api.gpfdl</span
+        >
+      }
     </div>
+    @if (size === 'S') {
+      <div>
+        <ng-container *ngTemplateOutlet="buttons"></ng-container>
+      </div>
+    }
   </div>
 </ng-template>

package/src/libs/ui/elements/src/lib/application-banner/application-banner.component.html

@@ -1,25 +1,27 @@
-<div
-  *ngIf="message && bannerOpen"
-  class="absolute left-0 right-0 text-wrap bg-white mt-4"
->
-  <div
-    class="flex flex-row py-3 px-4 gap-3 justify-start border relative"
-    [ngClass]="classList"
-  >
-    <div [ngClass]="message.length > 200 ? 'pt-2.5' : 'pt-1'">
-      <ng-icon [name]="icon"></ng-icon>
-    </div>
-    <div class="flex flex-col justify-start gap-2.5 flex-grow pr-6">
-      <span *ngIf="title" class="font-bold">{{ title }}</span>
-      <span class="font-medium break-words" [innerHTML]="message"></span>
-    </div>
-    <button
-      *ngIf="closeEnabled"
-      class="absolute top-2 right-2"
-      type="button"
-      (click)="closeMessage()"
+@if (message && bannerOpen) {
+  <div class="absolute left-0 right-0 text-wrap bg-white mt-4">
+    <div
+      class="flex flex-row py-3 px-4 gap-3 justify-start border relative"
+      [ngClass]="classList"
     >
-      <ng-icon name="matCloseOutline"> </ng-icon>
-    </button>
+      <div [ngClass]="message.length > 200 ? 'pt-2.5' : 'pt-1'">
+        <ng-icon [name]="icon"></ng-icon>
+      </div>
+      <div class="flex flex-col justify-start gap-2.5 flex-grow pr-6">
+        @if (title) {
+          <span class="font-bold">{{ title }}</span>
+        }
+        <span class="font-medium break-words" [innerHTML]="message"></span>
+      </div>
+      @if (closeEnabled) {
+        <button
+          class="absolute top-2 right-2"
+          type="button"
+          (click)="closeMessage()"
+        >
+          <ng-icon name="matCloseOutline"> </ng-icon>
+        </button>
+      }
+    </div>
   </div>
-</div>
+}

package/src/libs/ui/elements/src/lib/avatar/avatar.component.html

@@ -1,10 +1,12 @@
-<img
-  *ngIf="avatarUrl"
-  class="rounded-full object-cover"
-  [src]="avatarUrl"
-  (error)="hideImage()"
-/>
-<div
-  *ngIf="!avatarUrl"
-  class="w-full h-full rounded-full bg-gradient-to-tr from-primary to-slate-200"
-></div>
+@if (avatarUrl) {
+  <img
+    class="rounded-full object-cover"
+    [src]="avatarUrl"
+    (error)="hideImage()"
+  />
+}
+@if (!avatarUrl) {
+  <div
+    class="w-full h-full rounded-full bg-gradient-to-tr from-primary to-slate-200"
+  ></div>
+}

package/src/libs/ui/elements/src/lib/avatar/avatar.component.ts

@@ -1,12 +1,11 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-avatar',
   templateUrl: './avatar.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
 })
 export class AvatarComponent {
   @Input() avatarUrl?: string

package/src/libs/ui/elements/src/lib/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import {
   MAT_DIALOG_DATA,
   MatDialogModule,
@@ -23,11 +23,13 @@ export interface ConfirmationDialogData {
   imports: [MatDialogModule, ButtonComponent],
 })
 export class ConfirmationDialogComponent {
+  dialogRef = inject<MatDialogRef<ConfirmationDialogComponent>>(MatDialogRef)
+  data = inject<ConfirmationDialogData>(MAT_DIALOG_DATA)
+
   focusCancel = null
-  constructor(
-    public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: ConfirmationDialogData
-  ) {
+  constructor() {
+    const data = this.data
+
     this.focusCancel = data.focusCancel ? true : null
   }
 

package/src/libs/ui/elements/src/lib/content-ghost/content-ghost.component.html

@@ -1,5 +1,10 @@
-<div
-  *ngIf="!showContent"
-  class="ghost bg-gray-100 rounded-lg relative overflow-hidden {{ ghostClass }}"
-></div>
-<ng-content *ngIf="showContent"></ng-content>
+@if (!showContent) {
+  <div
+    class="ghost bg-gray-100 rounded-lg relative overflow-hidden {{
+      ghostClass
+    }}"
+  ></div>
+}
+@if (showContent) {
+  <ng-content></ng-content>
+}

package/src/libs/ui/elements/src/lib/content-ghost/content-ghost.component.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-content-ghost',
@@ -7,7 +6,7 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./content-ghost.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
 })
 export class ContentGhostComponent {
   @Input() showContent: boolean

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

@@ -19,9 +19,11 @@
         data-cy="download-format"
         >{{ format || ('downloads.format.unknown' | translate) }}</span
       >
-      <span class="text-gray-800 text-xs" *ngIf="isFromApi" translate=""
-        >datahub.search.filter.generatedByAPI</span
-      >
+      @if (isFromApi) {
+        <span class="text-gray-800 text-xs" translate=""
+          >datahub.search.filter.generatedByAPI</span
+        >
+      }
     </div>
   </div>
   <div

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

@@ -1,69 +1,73 @@
-<div
-  class="flex flex-wrap justify-between items-center pb-4"
-  *ngIf="links && links.length > 0"
->
-  <div class="flex flex-row items-center gap-x-4">
-    <div>
-      <h3
-        class="inline-block font-title text-xl text-title font-medium mr-4"
-        translate
-      >
-        record.metadata.download
-      </h3>
-      <span class="px-3">({{ linksCount }})</span>
+@if (links && links.length > 0) {
+  <div class="flex flex-wrap justify-between items-center pb-4">
+    <div class="flex flex-row items-center gap-x-4">
+      <div>
+        <h3
+          class="inline-block font-title text-xl text-title font-medium mr-4"
+          translate
+        >
+          record.metadata.download
+        </h3>
+        <span class="px-3">({{ linksCount }})</span>
+      </div>
+      @if ((isMobile$ | async) === false && _list?.pagesCount > 1) {
+        <gn-ui-previous-next-buttons
+          [listComponent]="_list"
+        ></gn-ui-previous-next-buttons>
+      }
     </div>
-    <gn-ui-previous-next-buttons
-      *ngIf="(isMobile$ | async) === false && _list?.pagesCount > 1"
-      [listComponent]="_list"
-    ></gn-ui-previous-next-buttons>
-  </div>
-
-  <div
-    class="flex flex-wrap justify-start sm:justify-end"
-    data-cy="download-format-filters"
-  >
-    <gn-ui-button
-      class="m-1 format-filter"
-      [extraClass]="
-        '!px-[12px] !py-[8px] !text-[15px]' +
-        (isFilterActive(format) ? ' opacity-100' : ' opacity-60')
-      "
-      (buttonClick)="toggleFilterFormat(format)"
-      [attr.data-format]="format"
-      *ngFor="let format of visibleFormats"
+    <div
+      class="flex flex-wrap justify-start sm:justify-end"
+      data-cy="download-format-filters"
     >
-      {{ getFilterFormatTitle(format) }}
-    </gn-ui-button>
+      @for (format of visibleFormats; track format) {
+        <gn-ui-button
+          class="m-1 format-filter"
+          [extraClass]="
+            '!px-[12px] !py-[8px] !text-[15px]' +
+            (isFilterActive(format) ? ' opacity-100' : ' opacity-60')
+          "
+          (buttonClick)="toggleFilterFormat(format)"
+          [attr.data-format]="format"
+        >
+          {{ getFilterFormatTitle(format) }}
+        </gn-ui-button>
+      }
+    </div>
   </div>
-</div>
+}
 
 <ng-container>
-  <gn-ui-block-list
-    *ngIf="(isMobile$ | async) === false"
-    #blockList
-    (listChanges)="updateList($event)"
-    containerClass="gap-4 pt-5 pb-7"
-  >
-    <gn-ui-download-item
-      #block
-      *ngFor="let link of filteredLinks"
-      [link]="link"
-      [color]="getLinkColor(link)"
-      [format]="getLinkFormat(link)"
-      [isFromApi]="isFromApi(link)"
-      [size]="blockList.subComponentSize"
-    ></gn-ui-download-item>
-  </gn-ui-block-list>
+  @if ((isMobile$ | async) === false) {
+    <gn-ui-block-list
+      #blockList
+      (listChanges)="updateList($event)"
+      containerClass="gap-4 pt-5 pb-7"
+    >
+      @for (link of filteredLinks; track link) {
+        <gn-ui-download-item
+          #block
+          [link]="link"
+          [color]="getLinkColor(link)"
+          [format]="getLinkFormat(link)"
+          [isFromApi]="isFromApi(link)"
+          [size]="blockList.subComponentSize"
+        ></gn-ui-download-item>
+      }
+    </gn-ui-block-list>
+  }
 </ng-container>
 
-<div class="mb-5" *ngFor="let link of filteredLinks">
-  <ng-container *ngIf="(isMobile$ | async) === true">
-    <gn-ui-download-item
-      size="M"
-      [link]="link"
-      [color]="getLinkColor(link)"
-      [format]="getLinkFormat(link)"
-      [isFromApi]="isFromApi(link)"
-    ></gn-ui-download-item>
-  </ng-container>
-</div>
+@for (link of filteredLinks; track link) {
+  <div class="mb-5">
+    @if ((isMobile$ | async) === true) {
+      <gn-ui-download-item
+        size="M"
+        [link]="link"
+        [color]="getLinkColor(link)"
+        [format]="getLinkFormat(link)"
+        [isFromApi]="isFromApi(link)"
+      ></gn-ui-download-item>
+    }
+  </div>
+}

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

@@ -3,6 +3,7 @@ import {
   ChangeDetectorRef,
   Component,
   Input,
+  inject,
 } from '@angular/core'
 import { TranslateDirective, TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
@@ -42,10 +43,8 @@ type FilterFormat = (typeof FILTER_FORMATS)[number]
   ],
 })
 export class DownloadsListComponent {
-  constructor(
-    private translateService: TranslateService,
-    private changeDetector: ChangeDetectorRef
-  ) {}
+  private translateService = inject(TranslateService)
+  private changeDetector = inject(ChangeDetectorRef)
 
   _list: BlockListComponent
   @Input() links: DatasetDownloadDistribution[]