geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.7a0dc5e3f

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

@@ -1,15 +1,11 @@
-.sort-button mat-icon {
-  padding: 0;
-  margin: 0;
-  height: 8px;
-  line-height: 8px;
-  font-size: 18px;
-}
-
 .table-header-cell {
-  @apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;
+  @apply text-gray-700 px-3 py-3 flex items-center truncate bg-white;
 }
 
 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

@@ -1,24 +1,24 @@
 <div class="grid w-full" [ngStyle]="gridStyle">
-  <div class="contents">
+  <div class="contents w-full">
     <ng-container *ngFor="let column of columns">
       <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">
@@ -30,6 +30,7 @@
     class="contents text-gray-900 cursor-pointer group"
     *ngFor="let item of items"
     (click)="handleRowClick(item)"
+    data-cy="table-row"
   >
     <div
       class="relative h-0"
@@ -43,7 +44,7 @@
     </div>
     <ng-container *ngFor="let column of columns">
       <div
-        class="table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200"
+        class="table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200"
       >
         <ng-container
           *ngTemplateOutlet="column.cell; context: { $implicit: item }"

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,13 +7,14 @@
   <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
   *ngIf="showToggleButton"
   (click)="toggleDisplay()"
   class="text-secondary cursor-pointer pt-2.5"
+  data-cy="readMoreButton"
 >
   {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
 </div>

package/src/libs/ui/layout/src/lib/modal-dialog/modal-dialog.component.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+<div mat-dialog-content>
+  <ng-container
+    *ngTemplateOutlet="data.body; context: { $implicit: data.bodyContext }"
+  ></ng-container>
+</div>
+<div mat-dialog-actions>
+  <gn-ui-button (buttonClick)="onCancel()">{{ data.cancelText }}</gn-ui-button>
+  <gn-ui-button
+    (buttonClick)="onConfirm()"
+    class="ml-2"
+    data-cy="confirm-button"
+    >{{ data.confirmText }}</gn-ui-button
+  >
+</div>

package/src/libs/ui/layout/src/lib/modal-dialog/modal-dialog.component.ts

@@ -0,0 +1,44 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  TemplateRef,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+export interface ModalDialogData {
+  title: string
+  body: TemplateRef<unknown>
+  bodyContext: unknown
+  confirmText: string
+  cancelText: string
+}
+
+@Component({
+  selector: 'gn-ui-modal-dialog',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, ButtonComponent],
+  templateUrl: './modal-dialog.component.html',
+  styleUrls: ['./modal-dialog.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModalDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ModalDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ModalDialogData
+  ) {}
+
+  onConfirm() {
+    this.dialogRef.close(true)
+  }
+
+  onCancel() {
+    this.dialogRef.close(false)
+  }
+}

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;
+}

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

@@ -0,0 +1,15 @@
+<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>

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

@@ -0,0 +1,31 @@
+import { Component, Input } from '@angular/core'
+import { 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-dots',
+  templateUrl: './pagination-dots.component.html',
+  styleUrls: ['./pagination-dots.component.css'],
+  standalone: true,
+  imports: [CommonModule],
+  viewProviders: [
+    provideIcons({
+      iconoirNavArrowRight,
+      iconoirNavArrowLeft,
+    }),
+  ],
+})
+export class PaginationDotsComponent {
+  @Input() listComponent: Paginable
+  @Input() containerClass = ''
+
+  // 1-based
+  get steps() {
+    return Array.from(
+      { length: this.listComponent.pagesCount },
+      (_, i) => i + 1
+    )
+  }
+}

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

@@ -0,0 +1,18 @@
+<div class="flex flex-row gap-x-4 items-center">
+  <gn-ui-button
+    data-test="previousButton"
+    type="outline"
+    [disabled]="listComponent.isFirstPage"
+    (buttonClick)="listComponent.goToPrevPage()"
+  >
+    <ng-icon name="matArrowBack"></ng-icon>
+  </gn-ui-button>
+  <gn-ui-button
+    data-test="nextButton"
+    type="outline"
+    [disabled]="listComponent.isLastPage"
+    (buttonClick)="listComponent.goToNextPage()"
+  >
+    <ng-icon name="matArrowForward"></ng-icon>
+  </gn-ui-button>
+</div>

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

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  matArrowBack,
+  matArrowForward,
+} from '@ng-icons/material-icons/baseline'
+import { Paginable } from '../paginable.interface'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-previous-next-buttons',
+  templateUrl: './previous-next-buttons.component.html',
+  styleUrls: ['./previous-next-buttons.component.css'],
+  standalone: true,
+  imports: [ButtonComponent, NgIconComponent],
+  providers: [
+    provideIcons({ matArrowForward, matArrowBack }),
+    provideNgIconsConfig({
+      size: '0.875em',
+    }),
+  ],
+})
+export class PreviousNextButtonsComponent {
+  @Input() listComponent: Paginable
+}

package/src/libs/ui/{elements → layout}/src/lib/sortable-list/sortable-list.component.css

@@ -1,8 +1,10 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {

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

@@ -0,0 +1,37 @@
+<div
+  cdkDropList
+  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">
+    <div class="sortable-box bg-white flex items-center" cdkDrag>
+      <span
+        cdkDragHandle
+        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
+      >
+        drag_handle
+      </span>
+      <div class="flex-1">
+        <ng-container
+          *ngTemplateOutlet="
+            elementTemplate;
+            context: { $implicit: item, index }
+          "
+        ></ng-container>
+      </div>
+
+      <gn-ui-button
+        type="light"
+        style="
+          --gn-ui-button-padding: 0px;
+          --gn-ui-button-width: 24px;
+          --gn-ui-button-height: 24px;
+        "
+        class="ml-[8px] mr-[10px]"
+        (buttonClick)="removeItem(index)"
+        data-test="remove-item"
+        ><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/sortable-list/sortable-list.component.ts

@@ -0,0 +1,45 @@
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragHandle,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-sortable-list',
+  templateUrl: 'sortable-list.component.html',
+  styleUrls: ['sortable-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, CdkDropList, CdkDrag, CdkDragHandle, ButtonComponent],
+})
+export class SortableListComponent {
+  @Input() elementTemplate: TemplateRef<unknown>
+  @Input() items: unknown[]
+  @Output() itemsOrderChange = new EventEmitter<unknown[]>()
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.items, event.previousIndex, event.currentIndex)
+    this.itemsOrderChange.emit([...this.items])
+  }
+
+  removeItem(index: number) {
+    this.items = this.items.filter((_, i) => i !== index)
+    this.itemsOrderChange.emit(this.items)
+  }
+
+  trackByFn(index: number) {
+    return index
+  }
+}

package/src/libs/ui/layout/src/lib/ui-layout.module.ts

@@ -1,25 +1,18 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { TranslateModule } from '@ngx-translate/core'
-import { ExpandablePanelComponent } from './expandable-panel/expandable-panel.component'
 import { StickyHeaderComponent } from './sticky-header/sticky-header.component'
 import { AnchorLinkDirective } from './anchor-link/anchor-link.directive'
-import { ExpandablePanelButtonComponent } from './expandable-panel-button/expandable-panel-button.component'
-import { MatIconModule } from '@angular/material/icon'
+import { NgIconComponent, provideNgIconsConfig } from '@ng-icons/core'
 
 @NgModule({
-  imports: [CommonModule, MatIconModule, TranslateModule.forChild()],
-  declarations: [
-    ExpandablePanelComponent,
-    StickyHeaderComponent,
-    AnchorLinkDirective,
-    ExpandablePanelButtonComponent,
-  ],
-  exports: [
-    ExpandablePanelComponent,
-    StickyHeaderComponent,
-    AnchorLinkDirective,
-    ExpandablePanelButtonComponent,
+  imports: [CommonModule, TranslateModule.forChild(), NgIconComponent],
+  providers: [
+    provideNgIconsConfig({
+      size: '0.9em',
+    }),
   ],
+  declarations: [StickyHeaderComponent, AnchorLinkDirective],
+  exports: [StickyHeaderComponent, AnchorLinkDirective],
 })
 export class UiLayoutModule {}