geonetwork-ui 2.8.0-dev.e46888fcc → 2.8.0-dev.fc22fb9a8

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.ts

@@ -7,6 +7,7 @@ import {
   OnChanges,
   Output,
   SimpleChanges,
+  inject,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../button/button.component'
@@ -32,6 +33,8 @@ import { iconoirArrowUp, iconoirLink } from '@ng-icons/iconoir'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UrlInputComponent implements OnChanges {
+  private cd = inject(ChangeDetectorRef)
+
   @Input() set value(v: string) {
     // we're making sure to only update the input if the URL representation of it has changed; otherwise we keep it identical
     // to avoid glitches when starting to write a URL and having some characters added/replaced automatically
@@ -58,8 +61,6 @@ export class UrlInputComponent implements OnChanges {
 
   inputValue = ''
 
-  constructor(private cd: ChangeDetectorRef) {}
-
   ngOnChanges(changes: SimpleChanges) {
     if (changes['resetUrlOnChange']) {
       this.inputValue = ''

package/src/libs/ui/inputs/src/lib/viewport-intersector/viewport-intersector.component.ts

@@ -5,6 +5,7 @@ import {
   OnInit,
   Output,
   ViewContainerRef,
+  inject,
 } from '@angular/core'
 import { filter, map } from 'rxjs/operators'
 import { Observable } from 'rxjs'
@@ -16,6 +17,8 @@ import { Observable } from 'rxjs'
   standalone: true,
 })
 export class ViewportIntersectorComponent implements OnInit, OnDestroy {
+  private vcRef = inject(ViewContainerRef)
+
   @Output() isInViewport = new EventEmitter<boolean>()
   @Output() entersViewport: Observable<void> = this.isInViewport.pipe(
     filter((inViewport) => inViewport),
@@ -27,8 +30,6 @@ export class ViewportIntersectorComponent implements OnInit, OnDestroy {
   )
   observer?: IntersectionObserver
 
-  constructor(private vcRef: ViewContainerRef) {}
-
   ngOnInit() {
     const elToObserve = this.vcRef.element.nativeElement
     this.observeInputElement(elToObserve)

package/src/libs/ui/layout/src/lib/anchor-link/anchor-link.directive.ts

@@ -7,6 +7,7 @@ import {
   Input,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core'
 
 @Directive({
@@ -16,6 +17,8 @@ import {
 export class AnchorLinkDirective
   implements OnInit, AfterViewChecked, OnDestroy
 {
+  private changeDetector = inject(ChangeDetectorRef)
+
   @Input('gnUiAnchorLink') targetId: string
   @Input('gnUiAnchorLinkDisabledClass') disabledClass: string
   @Input('gnUiAnchorLinkEnabledClass') enabledClass: string
@@ -42,8 +45,6 @@ export class AnchorLinkDirective
   intersectionObserver: IntersectionObserver
   initialized = false
 
-  constructor(private changeDetector: ChangeDetectorRef) {}
-
   ngOnInit() {
     this.observer.observe(document.body, {
       childList: true,

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

@@ -11,6 +11,7 @@ import {
   Output,
   QueryList,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { Paginable } from '../paginable.interface'
@@ -26,6 +27,8 @@ type ComponentSize = 'L' | 'M' | 'S' | 'XS'
   imports: [CommonModule, PaginationDotsComponent],
 })
 export class BlockListComponent implements AfterViewInit, Paginable {
+  private changeDetector = inject(ChangeDetectorRef)
+
   pageSize = 4
   @Input() containerClass = ''
   @Input() paginationContainerClass = 'w-full bottom-0 top-auto'
@@ -54,8 +57,6 @@ export class BlockListComponent implements AfterViewInit, Paginable {
     return this.currentPage_ + 1
   }
 
-  constructor(private changeDetector: ChangeDetectorRef) {}
-
   @HostListener('window:resize')
   onResize() {
     this.updateSizes()

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

@@ -8,6 +8,7 @@ import {
   Input,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel'
 import { CommonModule } from '@angular/common'
@@ -23,6 +24,8 @@ import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.comp
   imports: [CommonModule, PaginationDotsComponent],
 })
 export class CarouselComponent implements AfterViewInit, Paginable {
+  private changeDetector = inject(ChangeDetectorRef)
+
   @ViewChild('carouselOverflowContainer') carouselOverflowContainer: ElementRef
 
   @Input() containerClass = ''
@@ -65,8 +68,6 @@ export class CarouselComponent implements AfterViewInit, Paginable {
     this.emblaApi.scrollNext()
   }
 
-  constructor(private changeDetector: ChangeDetectorRef) {}
-
   ngAfterViewInit() {
     this.emblaApi = EmblaCarousel(
       this.carouselOverflowContainer.nativeElement,

package/src/libs/ui/layout/src/lib/cell-popin/cell-popin.component.html

@@ -7,34 +7,36 @@
   data-cy="cell-popin"
 >
   <ng-content select="[cellContent]"></ng-content>
-  <ng-template
-    *ngIf="activePopin"
-    cdkConnectedOverlay
-    [cdkConnectedOverlayPush]="false"
-    [cdkConnectedOverlayOrigin]="trigger"
-    [cdkConnectedOverlayOpen]="isOpen"
-    [cdkConnectedOverlayPositions]="overlayPositions"
-    [cdkConnectedOverlayWidth]="'auto'"
-    [cdkConnectedOverlayFlexibleDimensions]="true"
-    [cdkConnectedOverlayGrowAfterOpen]="true"
-    (detach)="closeOverlay()"
-  >
-    <div
-      *ngIf="activePopin && isVisible"
-      class="bg-white shadow-lg border border-gray-300 relative"
-      data-cy="cell-popin-content"
+  @if (activePopin) {
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayPush]="false"
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="isOpen"
+      [cdkConnectedOverlayPositions]="overlayPositions"
+      [cdkConnectedOverlayWidth]="'auto'"
+      [cdkConnectedOverlayFlexibleDimensions]="true"
+      [cdkConnectedOverlayGrowAfterOpen]="true"
+      (detach)="closeOverlay()"
     >
-      <ng-content select="[popinContent]"></ng-content>
-      <gn-ui-button
-        data-cy="cell-popin-close"
-        [style.--gn-ui-button-background]="'bg-transparent'"
-        class="absolute top-2 right-2"
-        type="light"
-        (buttonClick)="closeOverlay()"
-        extraClass="w-10 h-8 px-1"
-      >
-        <ng-icon name="iconoirReduce" size="24"></ng-icon>
-      </gn-ui-button>
-    </div>
-  </ng-template>
+      @if (activePopin && isVisible) {
+        <div
+          class="bg-white shadow-lg border border-gray-300 relative"
+          data-cy="cell-popin-content"
+        >
+          <ng-content select="[popinContent]"></ng-content>
+          <gn-ui-button
+            data-cy="cell-popin-close"
+            [style.--gn-ui-button-background]="'bg-transparent'"
+            class="absolute top-2 right-2"
+            type="light"
+            (buttonClick)="closeOverlay()"
+            extraClass="w-10 h-8 px-1"
+          >
+            <ng-icon name="iconoirReduce" size="24"></ng-icon>
+          </gn-ui-button>
+        </div>
+      }
+    </ng-template>
+  }
 </div>

package/src/libs/ui/layout/src/lib/cell-popin/cell-popin.component.ts

@@ -8,8 +8,9 @@ import {
   ViewChild,
   Injector,
   ChangeDetectorRef,
+  inject,
 } from '@angular/core'
-import { CommonModule } from '@angular/common'
+
 import { provideIcons, NgIconComponent } from '@ng-icons/core'
 import { iconoirReduce } from '@ng-icons/iconoir'
 import { MatButtonModule } from '@angular/material/button'
@@ -25,18 +26,15 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 @Component({
   selector: 'gn-ui-cell-popin',
   standalone: true,
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    OverlayModule,
-    ButtonComponent,
-    NgIconComponent,
-  ],
+  imports: [MatButtonModule, OverlayModule, ButtonComponent, NgIconComponent],
   providers: [provideIcons({ iconoirReduce })],
   templateUrl: './cell-popin.component.html',
   styleUrls: [],
 })
 export class CellPopinComponent implements AfterViewInit, OnDestroy {
+  private scrollDispatcher = inject(ScrollDispatcher)
+  private cdr = inject(ChangeDetectorRef)
+
   @Input() extraClass = ''
   @Input() cdkScrollContainer!: CdkScrollable
   @Input() scrollContainer!: ElementRef
@@ -74,11 +72,6 @@ export class CellPopinComponent implements AfterViewInit, OnDestroy {
     return this._activePopin
   }
 
-  constructor(
-    private scrollDispatcher: ScrollDispatcher,
-    private cdr: ChangeDetectorRef
-  ) {}
-
   ngAfterViewInit() {
     if (!this.activePopin) {
       return

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

@@ -4,19 +4,18 @@
   data-cy="expandable-panel-header"
 >
   <div class="grow py-2.5">
-    <ng-container *ngIf="titleTemplate; else simpleTitle">
+    @if (titleTemplate) {
       <div data-cy="expandable-panel-custom-title">
         <ng-container *ngTemplateOutlet="titleTemplate"></ng-container>
       </div>
-    </ng-container>
-    <ng-template #simpleTitle>
+    } @else {
       <div
         class="font-medium text-black text-sm"
         data-cy="expandable-panel-title"
       >
         {{ title }}
       </div>
-    </ng-template>
+    }
   </div>
   <div
     class="w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity flex items-center shrink-0"
@@ -27,12 +26,13 @@
     ></ng-icon>
   </div>
 </div>
-<div
-  class="content overflow-hidden transition-all duration-300"
-  [ngClass]="collapsed ? 'ease-out' : 'ease-in'"
-  #contentDiv
-  *ngIf="!collapsed"
-  data-cy="expandable-panel-content"
->
-  <ng-content></ng-content>
-</div>
+@if (!collapsed) {
+  <div
+    class="content overflow-hidden transition-all duration-300"
+    [ngClass]="collapsed ? 'ease-out' : 'ease-in'"
+    #contentDiv
+    data-cy="expandable-panel-content"
+  >
+    <ng-content></ng-content>
+  </div>
+}

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

@@ -9,6 +9,7 @@ import {
   OnDestroy,
   ChangeDetectorRef,
   AfterViewInit,
+  inject,
 } from '@angular/core'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
@@ -24,6 +25,8 @@ import { matAdd, matRemove } from '@ng-icons/material-icons/baseline'
   viewProviders: [provideIcons({ matAdd, matRemove })],
 })
 export class ExpandablePanelComponent implements AfterViewInit, OnDestroy {
+  private readonly changeDetector = inject(ChangeDetectorRef)
+
   @Input() title?: string
   @Input() iconColor? = ''
   @ContentChild('titleTemplate') titleTemplate?: TemplateRef<HTMLElement>
@@ -32,8 +35,6 @@ export class ExpandablePanelComponent implements AfterViewInit, OnDestroy {
   private _collapsed = true
   private contentObserver?: ResizeObserver
 
-  constructor(private readonly changeDetector: ChangeDetectorRef) {}
-
   ngAfterViewInit() {
     if (this.contentDiv) {
       this.contentObserver = new ResizeObserver(() => {

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

@@ -6,8 +6,12 @@
 >
   <ng-container [ngTemplateOutlet]="titleTemplate"></ng-container>
   <div class="ml-3 grow"></div>
-  <ng-icon *ngIf="collapsed" name="matExpandMore"></ng-icon>
-  <ng-icon name="matExpandLess" *ngIf="!collapsed"></ng-icon>
+  @if (collapsed) {
+    <ng-icon name="matExpandMore"></ng-icon>
+  }
+  @if (!collapsed) {
+    <ng-icon name="matExpandLess"></ng-icon>
+  }
 </button>
 <div
   class="content transition-all pointer-events-auto bg-white"

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

@@ -7,12 +7,11 @@ import {
   Output,
   TemplateRef,
 } from '@angular/core'
-import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-interactive-table-column',
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
   templateUrl: './interactive-table-column.component.html',
   styleUrls: ['./interactive-table-column.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -1,63 +1,69 @@
 <div class="grid w-full" [ngStyle]="gridStyle">
   <div class="contents w-full">
-    <ng-container *ngFor="let column of columns">
-      <button
-        *ngIf="column.sortable"
-        type="button"
-        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">
-          <ng-icon
-            class="text-gray-600 -mb-2"
-            [ngClass]="{ 'text-main': column.activeSort === 'asc' }"
-            name="iconoirNavArrowUp"
-          ></ng-icon>
-          <ng-icon
-            class="text-gray-600"
-            [ngClass]="{ 'text-main': column.activeSort === 'desc' }"
-            name="iconoirNavArrowDown"
-          ></ng-icon>
+    @for (column of columns; track column) {
+      @if (column.sortable) {
+        <button
+          type="button"
+          class="table-header-cell gap-1"
+          (click)="column.sortable && column.handleSortChange()"
+        >
+          <ng-container *ngTemplateOutlet="column.header"></ng-container>
+          @if (column.sortable) {
+            <div class="sort-button flex flex-col">
+              <ng-icon
+                class="text-gray-600 -mb-2"
+                [ngClass]="{ 'text-main': column.activeSort === 'asc' }"
+                name="iconoirNavArrowUp"
+              ></ng-icon>
+              <ng-icon
+                class="text-gray-600"
+                [ngClass]="{ 'text-main': column.activeSort === 'desc' }"
+                name="iconoirNavArrowDown"
+              ></ng-icon>
+            </div>
+          }
+        </button>
+      }
+      @if (!column.sortable) {
+        <div class="table-header-cell">
+          <ng-container *ngTemplateOutlet="column.header"></ng-container>
         </div>
-      </button>
-      <div *ngIf="!column.sortable" class="table-header-cell">
-        <ng-container *ngTemplateOutlet="column.header"></ng-container>
-      </div>
-    </ng-container>
+      }
+    }
   </div>
-  <div
-    class="contents text-gray-900 cursor-pointer group"
-    *ngFor="let item of items"
-    (click)="handleRowClick(item)"
-    data-cy="table-row"
-    [attr.data-cy-title]="item.title"
-    [title]="getItemTitle(item) | translate"
-  >
+  @for (item of items; track item) {
     <div
-      class="relative h-0"
-      [ngStyle]="{ 'grid-column': 'span ' + this.columns.length }"
+      class="contents text-gray-900 cursor-pointer group"
+      (click)="handleRowClick(item)"
+      data-cy="table-row"
+      [attr.data-cy-title]="item.title"
+      [title]="getItemTitle(item) | translate"
     >
-      <!-- this element is only used in keyboard navigation -->
-      <button
-        type="button"
-        class="absolute inset-x-0 h-[50px] bg-transparent pointer-events-none"
-      ></button>
-    </div>
-    <ng-container *ngFor="let column of columns">
       <div
-        class="table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate border-b border-gray-200"
-        [ngClass]="{
-          'text-purple-light cursor-default':
-            (canEditItem(item) | async) === false,
-          'group-hover:text-main group-hover:bg-gray-50':
-            canEditItem(item) | async,
-        }"
+        class="relative h-0"
+        [ngStyle]="{ 'grid-column': 'span ' + this.columns.length }"
       >
-        <ng-container
-          *ngTemplateOutlet="column.cell; context: { $implicit: item }"
-        ></ng-container>
+        <!-- this element is only used in keyboard navigation -->
+        <button
+          type="button"
+          class="absolute inset-x-0 h-[50px] bg-transparent pointer-events-none"
+        ></button>
       </div>
-    </ng-container>
-  </div>
+      @for (column of columns; track column) {
+        <div
+          class="table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate border-b border-gray-200"
+          [ngClass]="{
+            'text-purple-light cursor-default':
+              (canEditItem(item) | async) === false,
+            'group-hover:text-main group-hover:bg-gray-50':
+              canEditItem(item) | async,
+          }"
+        >
+          <ng-container
+            *ngTemplateOutlet="column.cell; context: { $implicit: item }"
+          ></ng-container>
+        </div>
+      }
+    </div>
+  }
 </div>

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

@@ -5,16 +5,18 @@
   [style.maxHeight]="maxHeight"
 >
   <ng-content></ng-content>
-  <div
-    *ngIf="showToggleButton && !isExpanded"
-    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-primary cursor-pointer pt-2.5"
-  data-cy="readMoreButton"
->
-  {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
+  @if (showToggleButton && !isExpanded) {
+    <div
+      class="absolute inset-x-0 bottom-0 bg-gradient-to-b from-transparent to-white h-10"
+    ></div>
+  }
 </div>
+@if (showToggleButton) {
+  <div
+    (click)="toggleDisplay()"
+    class="text-primary cursor-pointer pt-2.5"
+    data-cy="readMoreButton"
+  >
+    {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
+  </div>
+}

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

@@ -7,6 +7,7 @@ import {
   Input,
   OnDestroy,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { TranslatePipe } from '@ngx-translate/core'
@@ -20,6 +21,8 @@ import { TranslatePipe } from '@ngx-translate/core'
   imports: [CommonModule, TranslatePipe],
 })
 export class MaxLinesComponent implements AfterViewInit, OnDestroy {
+  private cdr = inject(ChangeDetectorRef)
+
   @Input() maxLines = 6
 
   isExpanded = false
@@ -29,8 +32,6 @@ export class MaxLinesComponent implements AfterViewInit, OnDestroy {
 
   @ViewChild('container') container!: ElementRef
 
-  constructor(private cdr: ChangeDetectorRef) {}
-
   ngAfterViewInit() {
     this.calculateMaxHeight()
 

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

@@ -1,8 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  Inject,
   TemplateRef,
+  inject,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import {
@@ -29,10 +29,8 @@ export interface ModalDialogData {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModalDialogComponent {
-  constructor(
-    public dialogRef: MatDialogRef<ModalDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: ModalDialogData
-  ) {}
+  dialogRef = inject<MatDialogRef<ModalDialogComponent>>(MatDialogRef)
+  data = inject<ModalDialogData>(MAT_DIALOG_DATA)
 
   onConfirm() {
     this.dialogRef.close(true)

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,