geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.73bac9979

package/src/libs/ui/layout/src/lib/block-list/block-list.component.ts

@@ -10,6 +10,8 @@ import {
   ViewChild,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
+import { Paginable } from '../paginable.interface'
+import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.component'
 
 @Component({
   selector: 'gn-ui-block-list',
@@ -17,9 +19,9 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./block-list.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, PaginationDotsComponent],
 })
-export class BlockListComponent implements AfterViewInit {
+export class BlockListComponent implements AfterViewInit, Paginable {
   @Input() pageSize = 5
   @Input() containerClass = ''
   @Input() paginationContainerClass = 'w-full bottom-0 top-auto'
@@ -30,20 +32,23 @@ export class BlockListComponent implements AfterViewInit {
 
   protected minHeight = 0
 
-  protected currentPage = 0
+  protected currentPage_ = 0
   protected get pages() {
     return new Array(this.pagesCount).fill(0).map((_, i) => i)
   }
 
   get isFirstPage() {
-    return this.currentPage === 0
+    return this.currentPage_ === 0
   }
   get isLastPage() {
-    return this.currentPage === this.pagesCount - 1
+    return this.currentPage_ === this.pagesCount - 1
   }
   get pagesCount() {
     return this.blocks ? Math.ceil(this.blocks.length / this.pageSize) : 1
   }
+  get currentPage() {
+    return this.currentPage_ + 1 // this is 1-based
+  }
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
@@ -59,25 +64,29 @@ export class BlockListComponent implements AfterViewInit {
   protected refreshBlocksVisibility = () => {
     this.blocks.forEach((block, index) => {
       block.nativeElement.style.display =
-        index >= this.currentPage * this.pageSize &&
-        index < (this.currentPage + 1) * this.pageSize
+        index >= this.currentPage_ * this.pageSize &&
+        index < (this.currentPage_ + 1) * this.pageSize
           ? null
           : 'none'
     })
   }
 
-  public goToPage(index: number) {
-    this.currentPage = Math.max(Math.min(index, this.pagesCount - 1), 0)
+  // pageIndex is 1-based
+  public goToPage(pageIndex: number) {
+    this.currentPage_ = Math.max(
+      Math.min(pageIndex - 1, this.pagesCount - 1),
+      0
+    )
     this.changeDetector.detectChanges()
     this.refreshBlocksVisibility()
   }
 
-  public previousPage() {
+  public goToPrevPage() {
     if (this.isFirstPage) return
     this.goToPage(this.currentPage - 1)
   }
 
-  public nextPage() {
+  public goToNextPage() {
     if (this.isLastPage) return
     this.goToPage(this.currentPage + 1)
   }

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -6,19 +6,3 @@
   position: relative;
   display: block;
 }
-
-.carousel-step-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 6px;
-  position: relative;
-}
-
-.carousel-step-dot:after {
-  content: '';
-  position: absolute;
-  left: -7px;
-  top: -7px;
-  width: 20px;
-  height: 20px;
-}

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

@@ -3,15 +3,7 @@
     <ng-content></ng-content>
   </div>
 </div>
-<div
-  *ngIf="steps.length > 1"
-  class="absolute flex flex-row justify-center gap-[14px] p-1"
-  [ngClass]="stepsContainerClass"
->
-  <button
-    *ngFor="let step of steps; let i = index"
-    class="carousel-step-dot"
-    (click)="scrollToStep(i)"
-    [ngClass]="currentStep === i ? 'bg-primary' : 'bg-gray-400'"
-  ></button>
-</div>
+<gn-ui-pagination-dots
+  [containerClass]="'absolute ' + stepsContainerClass"
+  [listComponent]="this"
+></gn-ui-pagination-dots>

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

@@ -11,6 +11,8 @@ import {
 } from '@angular/core'
 import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel'
 import { CommonModule } from '@angular/common'
+import { Paginable } from '../paginable.interface'
+import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.component'
 
 @Component({
   selector: 'gn-ui-carousel',
@@ -18,9 +20,9 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./carousel.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, PaginationDotsComponent],
 })
-export class CarouselComponent implements AfterViewInit {
+export class CarouselComponent implements AfterViewInit, Paginable {
   @ViewChild('carouselOverflowContainer') carouselOverflowContainer: ElementRef
 
   @Input() containerClass = ''
@@ -38,15 +40,30 @@ export class CarouselComponent implements AfterViewInit {
     this.changeDetector.detectChanges()
   }
 
-  get isFirstStep() {
+  // Paginable API
+  get isFirstPage() {
     return this.currentStep === 0
   }
-  get isLastStep() {
+  get isLastPage() {
     return this.currentStep === this.steps.length - 1
   }
-  get stepsCount() {
+  get currentPage() {
+    return this.currentStep + 1 // this is 1-based
+  }
+  get pagesCount() {
     return this.steps.length
   }
+  public goToPage(stepIndex: number) {
+    this.emblaApi.scrollTo(stepIndex - 1) // this is 0-based
+  }
+  public goToPrevPage() {
+    if (this.isFirstPage) return
+    this.emblaApi.scrollPrev()
+  }
+  public goToNextPage() {
+    if (this.isLastPage) return
+    this.emblaApi.scrollNext()
+  }
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
@@ -63,18 +80,4 @@ export class CarouselComponent implements AfterViewInit {
       .on('reInit', this.refreshSteps)
       .on('select', this.refreshSteps)
   }
-
-  public scrollToStep(stepIndex: number) {
-    this.emblaApi.scrollTo(stepIndex)
-  }
-
-  public slideToPrevious() {
-    if (this.isFirstStep) return
-    this.emblaApi.scrollPrev()
-  }
-
-  public slideToNext() {
-    if (this.isLastStep) return
-    this.emblaApi.scrollNext()
-  }
 }

package/src/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html

@@ -8,10 +8,8 @@
   <div
     class="w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity"
   >
-    <mat-icon class="material-symbols-outlined" *ngIf="collapsed">add</mat-icon>
-    <mat-icon class="material-symbols-outlined" *ngIf="!collapsed"
-      >remove</mat-icon
-    >
+    <ng-icon name="matAdd" *ngIf="collapsed"></ng-icon>
+    <ng-icon name="matRemove" *ngIf="!collapsed"></ng-icon>
   </div>
 </div>
 <div

package/src/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts

@@ -1,16 +1,22 @@
 import {
-  Component,
   ChangeDetectionStrategy,
+  Component,
+  ElementRef,
   Input,
   ViewChild,
-  ElementRef,
 } from '@angular/core'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { CommonModule } from '@angular/common'
+import { matAdd, matRemove } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-expandable-panel',
   templateUrl: './expandable-panel.component.html',
   styleUrls: ['./expandable-panel.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, NgIcon],
+  viewProviders: [provideIcons({ matAdd, matRemove })],
 })
 export class ExpandablePanelComponent {
   @Input() title: string

package/src/libs/ui/layout/src/lib/expandable-panel-button/expandable-panel-button.component.html

@@ -6,12 +6,8 @@
 >
   <ng-container [ngTemplateOutlet]="titleTemplate"></ng-container>
   <div class="ml-3 grow"></div>
-  <mat-icon class="material-symbols-outlined" *ngIf="collapsed"
-    >expand_more</mat-icon
-  >
-  <mat-icon class="material-symbols-outlined" *ngIf="!collapsed"
-    >expand_less</mat-icon
-  >
+  <ng-icon *ngIf="collapsed" name="matExpandMore"></ng-icon>
+  <ng-icon name="matExpandLess" *ngIf="!collapsed"></ng-icon>
 </button>
 <div
   class="content transition-all pointer-events-auto bg-white"

package/src/libs/ui/layout/src/lib/expandable-panel-button/expandable-panel-button.component.ts

@@ -4,12 +4,18 @@ import {
   Input,
   TemplateRef,
 } from '@angular/core'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { CommonModule } from '@angular/common'
+import { matExpandLess, matExpandMore } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-expandable-panel-button',
   templateUrl: './expandable-panel-button.component.html',
   styleUrls: ['./expandable-panel-button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NgIcon],
+  viewProviders: [provideIcons({ matExpandMore, matExpandLess })],
+  standalone: true,
 })
 export class ExpandablePanelButtonComponent {
   @Input() titleTemplate: TemplateRef<any>

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html

@@ -1,6 +1,6 @@
 <div class="h-full flex flex-col" *ngIf="label; else onlyContent">
   <div class="flex-none w-full flex flex-row items-center">
-    <span class="flex-none font-bold">{{ label }}</span>
+    <span class="flex-none font-bold" translate="">{{ label }}</span>
     <div class="flex-1 flex justify-end items-center">
       <ng-content select="[form-field-interaction]"></ng-content>
       <span

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-form-field-wrapper',
@@ -9,7 +9,7 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./form-field-wrapper.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatTooltipModule, CommonModule],
+  imports: [MatTooltipModule, CommonModule, TranslateModule],
 })
 export class FormFieldWrapperComponent {
   @Input() label?: string

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table-column/interactive-table-column.component.ts

@@ -22,6 +22,7 @@ export class InteractiveTableColumnComponent {
   @ContentChild('cell') cell: TemplateRef<unknown>
 
   @Input() grow = false
+  @Input() width: string
   @Input() sortable = false
   @Input() activeSort: 'asc' | 'desc' | null = null
   @Output() sortChange = new EventEmitter<'asc' | 'desc'>()

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.css

@@ -1,11 +1,3 @@
-.sort-button mat-icon {
-  padding: 0;
-  margin: 0;
-  height: 8px;
-  line-height: 8px;
-  font-size: 18px;
-}
-
 .table-header-cell {
   @apply text-gray-700 px-3 py-3 flex items-center truncate bg-white;
 }
@@ -13,3 +5,7 @@
 button.table-header-cell {
   @apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;
 }
+
+ng-icon {
+  @apply w-4 h-4;
+}

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.html

@@ -4,21 +4,21 @@
       <button
         *ngIf="column.sortable"
         type="button"
-        class="table-header-cell"
+        class="table-header-cell gap-1"
         (click)="column.sortable && column.handleSortChange()"
       >
         <ng-container *ngTemplateOutlet="column.header"></ng-container>
         <div class="sort-button flex flex-col" *ngIf="column.sortable">
-          <mat-icon
-            class="material-symbols-outlined text-gray-600"
+          <ng-icon
+            class="text-gray-600 -mb-2"
             [ngClass]="{ 'text-main': column.activeSort === 'asc' }"
-            >expand_less</mat-icon
-          >
-          <mat-icon
-            class="material-symbols-outlined text-gray-600"
+            name="iconoirNavArrowUp"
+          ></ng-icon>
+          <ng-icon
+            class="text-gray-600"
             [ngClass]="{ 'text-main': column.activeSort === 'desc' }"
-            >expand_more</mat-icon
-          >
+            name="iconoirNavArrowDown"
+          ></ng-icon>
         </div>
       </button>
       <div *ngIf="!column.sortable" class="table-header-cell">

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.ts

@@ -9,7 +9,12 @@ import {
 } from '@angular/core'
 import { InteractiveTableColumnComponent } from './interactive-table-column/interactive-table-column.component'
 import { CommonModule } from '@angular/common'
-import { MatIconModule } from '@angular/material/icon'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirNavArrowDown, iconoirNavArrowUp } from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-interactive-table',
@@ -17,7 +22,8 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./interactive-table.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, InteractiveTableColumnComponent, MatIconModule],
+  imports: [CommonModule, InteractiveTableColumnComponent, NgIconComponent],
+  providers: [provideIcons({ iconoirNavArrowDown, iconoirNavArrowUp })],
 })
 export class InteractiveTableComponent {
   @ContentChildren(InteractiveTableColumnComponent)
@@ -30,7 +36,11 @@ export class InteractiveTableComponent {
     return {
       'grid-template-columns': this.columns
         .map((column) =>
-          column.grow ? `minmax(0px,1fr)` : `minmax(0px,max-content)`
+          column.width
+            ? column.width
+            : column.grow
+              ? `minmax(0px,1fr)`
+              : `minmax(0px,max-content)`
         )
         .join(' '),
     }

package/src/libs/ui/layout/src/lib/max-lines/max-lines.component.html

@@ -7,7 +7,7 @@
   <ng-content></ng-content>
   <div
     *ngIf="showToggleButton && !isExpanded"
-    class="absolute inset-x-0 bottom-0 bg-gradient-to-b from-transparent to-white h-3"
+    class="absolute inset-x-0 bottom-0 bg-gradient-to-b from-transparent to-white h-10"
   ></div>
 </div>
 <div

package/src/libs/ui/layout/src/lib/paginable.interface.ts

@@ -0,0 +1,14 @@
+/**
+ * This interface is used for components that want to offer pagination
+ * Note: pages indexes are 1-based!! so `isLastPage` means `currentPage === pagesCount`
+ * and `isFirstPage` means `currentPage === 1`
+ */
+export interface Paginable {
+  isFirstPage: boolean
+  isLastPage: boolean
+  pagesCount: number
+  currentPage: number
+  goToPage(index: number): void
+  goToNextPage(): void
+  goToPrevPage(): void
+}

package/src/libs/ui/{elements → layout}/src/lib/pagination/pagination.component.html

@@ -1,9 +1,9 @@
 <div class="relative">
   <div class="sm:absolute sm:inset-0" *ngIf="!hideButton">
     <gn-ui-button
-      (buttonClick)="nextPage()"
+      (buttonClick)="listComponent.goToNextPage()"
       type="secondary"
-      [disabled]="currentPage === nPages"
+      [disabled]="listComponent.isLastPage"
       extraClass="lg:m-auto !p-[22px]"
     >
       <span class="uppercase font-medium tracking-widest" translate
@@ -20,35 +20,34 @@
       >
       <input
         type="number"
-        [ngModel]="currentPage"
+        [ngModel]="listComponent.currentPage"
         [min]="1"
-        [max]="nPages"
+        [max]="listComponent.pagesCount"
         (ngModelChange)="setPage($event)"
         class="border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center"
       />
       <span class="mr-3 text-sm text-gray-900"
-        ><span translate>pagination.pageOf</span> {{ nPages }}</span
+        ><span translate>pagination.pageOf</span>
+        {{ listComponent.pagesCount }}</span
       >
       <gn-ui-button
-        (buttonClick)="previousPage()"
-        id="navigate_previous"
+        (buttonClick)="listComponent.goToPrevPage()"
         class="mr-2"
-        [disabled]="currentPage === 1"
+        [disabled]="listComponent.isFirstPage"
         [type]="'light'"
         extraClass="!px-[3px]"
         data-cy="prev-page"
       >
-        <mat-icon class="material-symbols-outlined">navigate_before</mat-icon>
+        <ng-icon name="matChevronLeft"></ng-icon>
       </gn-ui-button>
       <gn-ui-button
-        (buttonClick)="nextPage()"
-        id="navigate_next"
-        [disabled]="currentPage === nPages"
+        (buttonClick)="listComponent.goToNextPage()"
+        [disabled]="listComponent.isLastPage"
         [type]="'light'"
         extraClass="!px-[3px]"
         data-cy="next-page"
       >
-        <mat-icon class="material-symbols-outlined">navigate_next</mat-icon>
+        <ng-icon name="matChevronRight"></ng-icon>
       </gn-ui-button>
     </div>
   </div>

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

@@ -0,0 +1,45 @@
+import { Component, Input } from '@angular/core'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { FormsModule } from '@angular/forms'
+import {
+  matChevronLeft,
+  matChevronRight,
+} from '@ng-icons/material-icons/baseline'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { Paginable } from '../paginable.interface'
+
+@Component({
+  selector: 'gn-ui-pagination',
+  templateUrl: './pagination.component.html',
+  styleUrls: ['./pagination.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    NgIcon,
+    FormsModule,
+    TranslateModule,
+  ],
+  viewProviders: [
+    provideIcons({
+      matChevronLeft,
+      matChevronRight,
+    }),
+  ],
+})
+export class PaginationComponent {
+  @Input() listComponent: Paginable
+  @Input() hideButton = false
+
+  private applyPageBounds(page: number): number {
+    // make sure this works with NaN inputs as well by adding `|| 1`
+    return Math.max(1, Math.min(this.listComponent.pagesCount, page || 1))
+  }
+
+  setPage(newPage) {
+    if (!Number.isInteger(newPage)) return
+    this.listComponent.goToPage(this.applyPageBounds(newPage))
+  }
+}

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

@@ -0,0 +1,51 @@
+<div class="relative">
+  <div
+    class="flex flex-row gap-[4px] items-center"
+    style="
+      --gn-ui-button-width: 28px;
+      --gn-ui-button-height: 28px;
+      --gn-ui-button-padding: 0;
+    "
+  >
+    <gn-ui-button
+      type="light"
+      [disabled]="listComponent.isFirstPage"
+      (buttonClick)="listComponent.goToPrevPage()"
+      extraClass="text-gray-950"
+    >
+      <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>
+    <gn-ui-button
+      type="light"
+      [disabled]="listComponent.isLastPage"
+      (buttonClick)="listComponent.goToNextPage()"
+      extraClass="text-gray-950"
+    >
+      <ng-icon name="iconoirNavArrowRight" [strokeWidth]="3"></ng-icon>
+    </gn-ui-button>
+  </div>
+</div>

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

@@ -0,0 +1,50 @@
+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'
+
+@Component({
+  selector: 'gn-ui-pagination-buttons',
+  templateUrl: './pagination-buttons.component.html',
+  styleUrls: ['./pagination-buttons.component.css'],
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, NgIcon],
+  viewProviders: [
+    provideIcons({
+      iconoirNavArrowRight,
+      iconoirNavArrowLeft,
+    }),
+  ],
+})
+export class PaginationButtonsComponent {
+  @Input() listComponent: Paginable
+
+  get visiblePages(): (number | '...')[] {
+    const maxVisiblePages = 5
+    const halfVisible = Math.floor(maxVisiblePages / 2)
+    const startPage = Math.max(this.listComponent.currentPage - halfVisible, 1)
+    const endPage = Math.min(
+      this.listComponent.currentPage + halfVisible,
+      this.listComponent.pagesCount
+    )
+
+    const allPages = new Array(this.listComponent.pagesCount)
+      .fill(0)
+      .map((_, i) => i + 1) // pages are 1-based
+    return allPages.reduce((pages, page) => {
+      if (page === 1 || page === this.listComponent.pagesCount) {
+        // first and last page
+        pages.push(page)
+      } else if (page >= startPage && page <= endPage) {
+        // pages around current one
+        pages.push(page)
+      } else if (pages[pages.length - 1] !== '...') {
+        // dots between pages
+        pages.push('...')
+      }
+      return pages
+    }, [])
+  }
+}

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

@@ -0,0 +1,16 @@
+.pagination-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.pagination-dot:after {
+  content: '';
+  position: absolute;
+  left: -7px;
+  top: -7px;
+  width: 20px;
+  height: 20px;
+}