geonetwork-ui 2.8.0-dev.50da356b9 → 2.8.0-dev.545b19356

package/src/libs/ui/layout/src/lib/pagination/pagination.component.html

@@ -1,16 +1,18 @@
 <div class="relative">
-  <div class="sm:absolute sm:inset-0" *ngIf="!hideButton">
-    <gn-ui-button
-      (buttonClick)="listComponent.goToNextPage()"
-      type="secondary"
-      [disabled]="listComponent.isLastPage"
-      extraClass="lg:m-auto !p-[22px]"
-    >
-      <span class="uppercase font-medium tracking-widest" translate
-        >pagination.nextPage</span
+  @if (!hideButton) {
+    <div class="sm:absolute sm:inset-0">
+      <gn-ui-button
+        (buttonClick)="listComponent.goToNextPage()"
+        type="secondary"
+        [disabled]="listComponent.isLastPage"
+        extraClass="lg:m-auto !p-[22px]"
       >
-    </gn-ui-button>
-  </div>
+        <span class="uppercase font-medium tracking-widest" translate
+          >pagination.nextPage</span
+        >
+      </gn-ui-button>
+    </div>
+  }
   <div
     class="relative pointer-events-none flex flex-row justify-start sm:justify-end"
   >

package/src/libs/ui/layout/src/lib/pagination/pagination.component.ts

@@ -6,7 +6,7 @@ import {
   matChevronLeft,
   matChevronRight,
 } from '@ng-icons/material-icons/baseline'
-import { CommonModule } from '@angular/common'
+
 import { TranslateDirective } from '@ngx-translate/core'
 import { Paginable } from '../paginable.interface'
 
@@ -15,13 +15,7 @@ import { Paginable } from '../paginable.interface'
   templateUrl: './pagination.component.html',
   styleUrls: ['./pagination.component.css'],
   standalone: true,
-  imports: [
-    CommonModule,
-    ButtonComponent,
-    NgIcon,
-    FormsModule,
-    TranslateDirective,
-  ],
+  imports: [ButtonComponent, NgIcon, FormsModule, TranslateDirective],
   viewProviders: [
     provideIcons({
       matChevronLeft,

package/src/libs/ui/layout/src/lib/pagination-buttons/pagination-buttons.component.html

@@ -15,30 +15,32 @@
     >
       <ng-icon name="iconoirNavArrowLeft" [strokeWidth]="3"></ng-icon>
     </gn-ui-button>
-    <ng-container *ngFor="let page of visiblePages" [ngSwitch]="page">
-      <ng-container *ngSwitchCase="listComponent.currentPage">
-        <div
-          class="gn-ui-btn-black bg-gray-950 border-gray-950 pointer-events-none select-none"
-          [attr.data-test]="'page-' + page"
-        >
-          {{ page }}
-        </div>
-      </ng-container>
-      <ng-container *ngSwitchCase="'...'">
-        <span class="mx-[5px] text-gray-950" [attr.data-test]="'page-' + page"
-          >...</span
-        >
-      </ng-container>
-      <ng-container *ngSwitchDefault>
-        <gn-ui-button
-          type="light"
-          extraClass="text-gray-950"
-          (buttonClick)="listComponent.goToPage(page)"
-          [attr.data-test]="'page-' + page"
-          >{{ page }}</gn-ui-button
-        >
-      </ng-container>
-    </ng-container>
+    @for (page of visiblePages; track page) {
+      @switch (page) {
+        @case (listComponent.currentPage) {
+          <div
+            class="gn-ui-btn-black bg-gray-950 border-gray-950 pointer-events-none select-none"
+            [attr.data-test]="'page-' + page"
+          >
+            {{ page }}
+          </div>
+        }
+        @case ('...') {
+          <span class="mx-[5px] text-gray-950" [attr.data-test]="'page-' + page"
+            >...</span
+          >
+        }
+        @default {
+          <gn-ui-button
+            type="light"
+            extraClass="text-gray-950"
+            (buttonClick)="listComponent.goToPage(page)"
+            [attr.data-test]="'page-' + page"
+            >{{ page }}</gn-ui-button
+          >
+        }
+      }
+    }
     <gn-ui-button
       type="light"
       [disabled]="listComponent.isLastPage"

package/src/libs/ui/layout/src/lib/pagination-buttons/pagination-buttons.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { CommonModule } from '@angular/common'
+
 import { iconoirNavArrowLeft, iconoirNavArrowRight } from '@ng-icons/iconoir'
 import { Paginable } from '../paginable.interface'
 
@@ -10,7 +10,7 @@ import { Paginable } from '../paginable.interface'
   templateUrl: './pagination-buttons.component.html',
   styleUrls: ['./pagination-buttons.component.css'],
   standalone: true,
-  imports: [CommonModule, ButtonComponent, NgIcon],
+  imports: [ButtonComponent, NgIcon],
   viewProviders: [
     provideIcons({
       iconoirNavArrowRight,

package/src/libs/ui/layout/src/lib/pagination-dots/pagination-dots.component.html

@@ -1,15 +1,17 @@
-<div
-  *ngIf="listComponent.pagesCount > 1"
-  class="overflow-hidden flex flex-row justify-center gap-[14px] p-1"
-  [ngClass]="containerClass"
->
-  <button
-    type="button"
-    *ngFor="let step of steps"
-    class="pagination-dot"
-    (click)="listComponent.goToPage(step)"
-    [ngClass]="
-      listComponent.currentPage === step ? 'bg-primary' : 'bg-gray-400'
-    "
-  ></button>
-</div>
+@if (listComponent.pagesCount > 1) {
+  <div
+    class="overflow-hidden flex flex-row justify-center gap-[14px] p-1"
+    [ngClass]="containerClass"
+  >
+    @for (step of steps; track step) {
+      <button
+        type="button"
+        class="pagination-dot"
+        (click)="listComponent.goToPage(step)"
+        [ngClass]="
+          listComponent.currentPage === step ? 'bg-primary' : 'bg-gray-400'
+        "
+      ></button>
+    }
+  </div>
+}

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.html

@@ -3,28 +3,34 @@
     data-test="previousButton"
     type="light"
     [extraClass]="
-      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +
       (!listComponent.isFirstPage
-        ? 'border border-gray-300'
-        : 'border border-gray-100')
+        ? 'border border-gray-300 text-main'
+        : 'border border-gray-100 text-gray-300')
     "
     [disabled]="listComponent.isFirstPage"
     (buttonClick)="listComponent.goToPrevPage()"
   >
     <ng-icon name="matArrowBackIos"></ng-icon>
+    @if (displayLabels) {
+      <span class="ml-2" translate>pagination.previousPage</span>
+    }
   </gn-ui-button>
   <gn-ui-button
     data-test="nextButton"
     type="light"
     [extraClass]="
-      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +
       (!listComponent.isLastPage
-        ? 'border border-gray-300'
-        : 'border border-gray-100')
+        ? 'border border-gray-300 text-main'
+        : 'border border-gray-100 text-gray-300')
     "
     [disabled]="listComponent.isLastPage"
     (buttonClick)="listComponent.goToNextPage()"
   >
+    @if (displayLabels) {
+      <span class="mr-2" translate>pagination.nextPage</span>
+    }
     <ng-icon name="matArrowForwardIos"></ng-icon>
   </gn-ui-button>
 </div>

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.ts

@@ -11,12 +11,14 @@ import {
 import { Paginable } from '../paginable.interface'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 
+import { TranslateDirective } from '@ngx-translate/core'
+
 @Component({
   selector: 'gn-ui-previous-next-buttons',
   templateUrl: './previous-next-buttons.component.html',
   styleUrls: ['./previous-next-buttons.component.css'],
   standalone: true,
-  imports: [ButtonComponent, NgIconComponent],
+  imports: [ButtonComponent, NgIconComponent, TranslateDirective],
   providers: [
     provideIcons({ matArrowBackIos, matArrowForwardIos }),
     provideNgIconsConfig({
@@ -26,4 +28,5 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 })
 export class PreviousNextButtonsComponent {
   @Input() listComponent: Paginable
+  @Input() displayLabels = false
 }

package/src/libs/ui/layout/src/lib/sortable-list/sortable-list.component.html

@@ -3,7 +3,7 @@
   class="sortable-list flex flex-col gap-3 p-2"
   (cdkDropListDropped)="drop($event)"
 >
-  <ng-container *ngFor="let item of items; index as index; trackBy: trackByFn">
+  @for (item of items; track trackByFn(index); let index = $index) {
     <div class="sortable-box bg-white flex items-center" cdkDrag>
       <span
         cdkDragHandle
@@ -19,7 +19,6 @@
           "
         ></ng-container>
       </div>
-
       <gn-ui-button
         type="light"
         style="
@@ -33,5 +32,5 @@
         ><span class="material-symbols-outlined gn-ui-icon-medium">close</span>
       </gn-ui-button>
     </div>
-  </ng-container>
+  }
 </div>

package/src/libs/ui/layout/src/lib/sticky-header/sticky-header.component.ts

@@ -6,13 +6,13 @@ import {
   Component,
   ContentChild,
   ElementRef,
-  Host,
   Input,
   NgZone,
   OnDestroy,
   OnInit,
   TemplateRef,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { animationFrameScheduler, fromEvent, Subscription } from 'rxjs'
 import { throttleTime } from 'rxjs/operators'
@@ -39,6 +39,10 @@ import { CommonModule } from '@angular/common'
 export class StickyHeaderComponent
   implements AfterViewInit, OnDestroy, OnInit, AfterViewChecked
 {
+  private changeDetector = inject(ChangeDetectorRef)
+  private hostEl = inject(ElementRef, { host: true })
+  private zone = inject(NgZone)
+
   @Input() minHeightPx: number
   @Input() fullHeightPx: number
   @ContentChild(TemplateRef) template: TemplateRef<{ $implicit: number }>
@@ -49,12 +53,6 @@ export class StickyHeaderComponent
   scrollSub: Subscription
   parentScroll: number
 
-  constructor(
-    private changeDetector: ChangeDetectorRef,
-    @Host() private hostEl: ElementRef,
-    private zone: NgZone
-  ) {}
-
   ngAfterViewInit() {
     this.scrollSub = fromEvent(window, 'scroll', {
       passive: true,

package/src/libs/ui/layout/src/lib/truncated-text/truncated-text.component.html

@@ -12,14 +12,15 @@
     <span #textElement class="truncate py-3 px-2">
       {{ text }}
     </span>
-    <gn-ui-button
-      *ngIf="isTextTruncated"
-      type="outline"
-      extraClass="w-10 h-8 border rounded-lg mr-2"
-      (buttonClick)="popinRef.openOverlay()"
-    >
-      <ng-icon name="iconoirExpand" size="24"> </ng-icon>
-    </gn-ui-button>
+    @if (isTextTruncated) {
+      <gn-ui-button
+        type="outline"
+        extraClass="w-10 h-8 border rounded-lg mr-2"
+        (buttonClick)="popinRef.openOverlay()"
+      >
+        <ng-icon name="iconoirExpand" size="24"> </ng-icon>
+      </gn-ui-button>
+    }
   </div>
   <div popinContent class="sm:w-64 xs:w-32 py-4 pl-6 pr-9">
     <p>{{ text }}</p>

package/src/libs/ui/layout/src/lib/truncated-text/truncated-text.component.ts

@@ -7,8 +7,9 @@ import {
   NgZone,
   OnDestroy,
   ViewChild,
+  inject,
 } from '@angular/core'
-import { CommonModule } from '@angular/common'
+
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
 import { iconoirExpand } from '@ng-icons/iconoir'
 import { MatButtonModule } from '@angular/material/button'
@@ -20,7 +21,6 @@ import { CellPopinComponent } from '../cell-popin/cell-popin.component'
   selector: 'gn-ui-truncated-text',
   standalone: true,
   imports: [
-    CommonModule,
     MatButtonModule,
     OverlayModule,
     ButtonComponent,
@@ -32,6 +32,9 @@ import { CellPopinComponent } from '../cell-popin/cell-popin.component'
   styles: [],
 })
 export class TruncatedTextComponent implements AfterViewInit, OnDestroy {
+  private readonly cd = inject(ChangeDetectorRef)
+  private readonly ngZone = inject(NgZone)
+
   @Input() text = ''
   @Input() extraClass = ''
   @Input() scrollContainer!: ElementRef
@@ -44,10 +47,7 @@ export class TruncatedTextComponent implements AfterViewInit, OnDestroy {
   private readonly resizeObserver: ResizeObserver
   private readonly mutationObserver: MutationObserver
 
-  constructor(
-    private readonly cd: ChangeDetectorRef,
-    private readonly ngZone: NgZone
-  ) {
+  constructor() {
     this.resizeObserver = new ResizeObserver(() => {
       this.ngZone.run(() => this.checkTextTruncation())
     })

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.html

@@ -1,6 +1,10 @@
-<div *ngIf="feature" class="root">
-  <div class="property" *ngFor="let prop of properties | keyvalue">
-    <div>{{ prop.key }}</div>
-    <div class="font-bold">{{ prop.value }}</div>
+@if (feature) {
+  <div class="root">
+    @for (prop of properties | keyvalue; track prop) {
+      <div class="property">
+        <div>{{ prop.key }}</div>
+        <div class="font-bold">{{ prop.value }}</div>
+      </div>
+    }
   </div>
-</div>
+}

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.html

@@ -1,16 +1,18 @@
-<div class="h-full w-full" #map></div>
-<div
-  class="absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none"
-  [ngClass]="
-    (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'
-  "
->
+<div class="relative h-full w-full" #map>
+  <ng-content></ng-content>
   <div
-    class="absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60"
-  ></div>
-  <ng-icon
-    class="!w-16 !h-16 text-[64px] mb-4"
-    name="matSwipeOutline"
-  ></ng-icon>
-  <p translate>map.navigation.message</p>
+    class="absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none"
+    [ngClass]="
+      (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'
+    "
+  >
+    <div
+      class="absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60"
+    ></div>
+    <ng-icon
+      class="!w-16 !h-16 text-[64px] mb-4"
+      name="matSwipeOutline"
+    ></ng-icon>
+    <p translate>map.navigation.message</p>
+  </div>
 </div>