geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.4e8752d34

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

@@ -0,0 +1,9 @@
+:host {
+  --gn-ui-button-rounded: 8px;
+  --gn-ui-button-width: 32px;
+  --gn-ui-button-padding: 0;
+
+  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6rem) - 6px);
+  --2x-side-padding: calc(var(--side-padding) * 2);
+  --text-padding: calc(var(--side-padding) + 40px);
+}

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

@@ -0,0 +1,32 @@
+<span class="w-full inline-block relative">
+  <input
+    #input
+    class="gn-ui-text-input px-[var(--text-padding)]"
+    [ngClass]="extraClass"
+    type="url"
+    [value]="inputValue"
+    (input)="handleInput($event)"
+    (keydown.enter)="handleUpload(input)"
+    [placeholder]="placeholder"
+    [attr.aria-label]="placeholder"
+    [disabled]="disabled"
+  />
+  <div
+    class="absolute inset-y-[var(--side-padding)] left-[var(--2x-side-padding)] grid justify-center items-center pointer-events-none"
+    [ngClass]="{
+      'text-primary': !disabled,
+      'text-primary-lightest': disabled,
+    }"
+  >
+    <ng-icon name="iconoirLink"></ng-icon>
+  </div>
+  <gn-ui-button
+    *ngIf="showUploadButton"
+    extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
+    type="primary"
+    [disabled]="disabled || input.value === '' || !isValidUrl(input.value)"
+    (buttonClick)="handleUpload(input)"
+  >
+    <ng-icon name="iconoirArrowUp"> </ng-icon>
+  </gn-ui-button>
+</span>

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

@@ -0,0 +1,85 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '../button/button.component'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirArrowUp, iconoirLink } from '@ng-icons/iconoir'
+
+@Component({
+  selector: 'gn-ui-url-input',
+  templateUrl: './url-input.component.html',
+  styleUrls: ['./url-input.component.css'],
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, NgIconComponent],
+  providers: [
+    provideIcons({ iconoirLink, iconoirArrowUp }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UrlInputComponent {
+  @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
+    if (!v || !this.isValidUrl(v)) return
+    if (
+      this.isValidUrl(this.inputValue) &&
+      new URL(v).toString() === new URL(this.inputValue).toString()
+    )
+      return
+    this.inputValue = v
+    this.cd.markForCheck()
+  }
+  @Input() extraClass = ''
+  @Input() placeholder = 'https://'
+  @Input() disabled: boolean
+  @Input() showUploadButton = true
+
+  /**
+   * This will emit null if the field is emptied
+   */
+  @Output() valueChange = new EventEmitter<string | null>()
+  @Output() uploadClick = new EventEmitter<string>()
+
+  inputValue = ''
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  handleInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value
+    this.inputValue = value
+    if (!value || !this.isValidUrl(value)) {
+      this.valueChange.next(null)
+      return
+    }
+    this.cd.markForCheck()
+    this.valueChange.next(value)
+  }
+
+  handleUpload(element: HTMLInputElement) {
+    const value = element.value
+    if (!value || !this.isValidUrl(value)) return
+    this.uploadClick.next(value)
+  }
+
+  isValidUrl(url: string): boolean {
+    try {
+      new URL(url)
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+}

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

@@ -8,4 +8,11 @@ export * from './lib/interactive-table/interactive-table-column/interactive-tabl
 export * from './lib/interactive-table/interactive-table.component'
 export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/block-list/block-list.component'
+export * from './lib/sortable-list/sortable-list.component'
+export * from './lib/modal-dialog/modal-dialog.component'
+export * from './lib/pagination/pagination.component'
+export * from './lib/pagination-buttons/pagination-buttons.component'
+export * from './lib/pagination-dots/pagination-dots.component'
+export * from './lib/previous-next-buttons/previous-next-buttons.component'
+export * from './lib/paginable.interface'
 export * from './lib/ui-layout.module'

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

@@ -5,19 +5,3 @@
 :host {
   position: relative;
 }
-
-.list-page-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 6px;
-  position: relative;
-}
-
-.list-page-dot:after {
-  content: '';
-  position: absolute;
-  left: -7px;
-  top: -7px;
-  width: 20px;
-  height: 20px;
-}

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

@@ -6,15 +6,7 @@
 >
   <ng-content></ng-content>
 </div>
-<div
-  *ngIf="pagesCount > 1"
-  class="absolute flex flex-row justify-center gap-[14px] p-1"
-  [ngClass]="paginationContainerClass"
->
-  <button
-    *ngFor="let page of pages"
-    class="list-page-dot"
-    (click)="goToPage(page)"
-    [ngClass]="currentPage === page ? 'bg-primary' : 'bg-gray-400'"
-  ></button>
-</div>
+<gn-ui-pagination-dots
+  [containerClass]="'absolute ' + paginationContainerClass"
+  [listComponent]="this"
+></gn-ui-pagination-dots>

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,9 +1,10 @@
-<div class="h-full flex flex-col">
+<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
+        *ngIf="hint"
         class="material-symbols-outlined m-2 gn-ui-icon-small"
         [matTooltip]="hint"
         matTooltipPosition="above"
@@ -12,7 +13,11 @@
       </span>
     </div>
   </div>
-  <div class="flex-1">
-    <ng-content></ng-content>
+  <div class="flex-1 mt-2">
+    <ng-container *ngTemplateOutlet="onlyContent"> </ng-container>
   </div>
 </div>
+
+<ng-template #onlyContent>
+  <ng-content></ng-content>
+</ng-template>

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

@@ -1,6 +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',
@@ -8,9 +9,9 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   styleUrls: ['./form-field-wrapper.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatTooltipModule],
+  imports: [MatTooltipModule, CommonModule, TranslateModule],
 })
 export class FormFieldWrapperComponent {
-  @Input() label: string
-  @Input() hint: string
+  @Input() label?: string
+  @Input() hint?: 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,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>