geonetwork-ui 2.4.0-dev.d000fb89 → 2.4.0-dev.d3529f01

package/src/libs/ui/inputs/src/lib/button/button.component.ts

@@ -18,7 +18,14 @@ export class ButtonComponent {
   private btnClass = 'gn-ui-btn-default'
 
   @Input() set type(
-    value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'
+    value:
+      | 'primary'
+      | 'secondary'
+      | 'default'
+      | 'outline'
+      | 'light'
+      | 'gray'
+      | 'black'
   ) {
     // btn-classes are written in full to be picked up by tailwind
     switch (value) {
@@ -34,6 +41,13 @@ export class ButtonComponent {
       case 'light':
         this.btnClass = 'gn-ui-btn-light'
         break
+      case 'gray':
+        this.btnClass = 'gn-ui-btn-gray'
+        break
+      case 'black':
+        this.btnClass = 'gn-ui-btn-black'
+        break
+      case 'default':
       default:
         this.btnClass = 'gn-ui-btn-default'
         break

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.css

@@ -1,3 +1,8 @@
-mat-datepicker-toggle {
-  @apply text-primary;
+: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.6em) - 6px);
+  --text-padding: calc(var(--side-padding) + 40px);
 }

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.html

@@ -1,12 +1,20 @@
-<div
-  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
->
+<span class="w-full inline-block relative">
   <input
-    class="pl-3"
+    class="gn-ui-text-input pr-[var(--text-padding)]"
     [matDatepicker]="picker"
     [value]="date"
     (dateChange)="dateChange.emit($event.value)"
   />
-  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-</div>
+  <gn-ui-button
+    type="light"
+    class="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10"
+    (buttonClick)="picker.open()"
+    data-cy="date-picker-button"
+    extraClass="h-full"
+  >
+    <mat-icon class="material-symbols-outlined text-primary"
+      >calendar_today</mat-icon
+    >
+  </gn-ui-button>
+</span>
 <mat-datepicker #picker></mat-datepicker>

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts

@@ -8,6 +8,7 @@ import {
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../button/button.component'
 
 @Component({
   selector: 'gn-ui-date-picker',
@@ -15,7 +16,12 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./date-picker.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
+  imports: [
+    MatIconModule,
+    MatNativeDateModule,
+    MatDatepickerModule,
+    ButtonComponent,
+  ],
 })
 export class DatePickerComponent {
   @Input() date: Date

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.css

@@ -1,3 +1,8 @@
-mat-datepicker-toggle {
-  @apply text-primary;
+: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.6em) - 6px);
+  --text-padding: calc(var(--side-padding) + 40px);
 }

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html

@@ -1,24 +1,29 @@
-<div
-  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
->
-  <div class="pl-3 flex justify-center">
-    <mat-date-range-input [rangePicker]="picker" class="w-full">
-      <input
-        matStartDate
-        placeholder="Start date"
-        [value]="startDate"
-        (dateInput)="startDateChange.emit($event.value)"
-      />
-      <input
-        matEndDate
-        placeholder="End date"
-        [value]="endDate"
-        (dateInput)="endDateChange.emit($event.value)"
-      />
-    </mat-date-range-input>
-  </div>
-  <mat-datepicker-toggle matSuffix [for]="picker">
-    <mat-icon>calendar_today</mat-icon>
-  </mat-datepicker-toggle>
-</div>
+<span class="w-full inline-block relative">
+  <mat-date-range-input [rangePicker]="picker" class="gn-ui-text-input">
+    <input
+      matStartDate
+      placeholder="Start date"
+      [value]="startDate"
+      (dateInput)="startDateChange.emit($event.value)"
+    />
+    <input
+      matEndDate
+      placeholder="End date"
+      [value]="endDate"
+      (dateInput)="endDateChange.emit($event.value)"
+    />
+  </mat-date-range-input>
+
+  <gn-ui-button
+    type="light"
+    class="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10"
+    (buttonClick)="picker.open()"
+    extraClass="h-full"
+    data-cy="date-picker-button"
+  >
+    <mat-icon class="material-symbols-outlined text-primary"
+      >date_range</mat-icon
+    >
+  </gn-ui-button>
+</span>
 <mat-date-range-picker #picker></mat-date-range-picker>

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.ts

@@ -8,6 +8,7 @@ import {
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../button/button.component'
 
 @Component({
   selector: 'gn-ui-date-range-picker',
@@ -15,7 +16,12 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./date-range-picker.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
+  imports: [
+    MatIconModule,
+    MatNativeDateModule,
+    MatDatepickerModule,
+    ButtonComponent,
+  ],
 })
 export class DateRangePickerComponent {
   @Input() startDate: Date

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

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}

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

@@ -4,10 +4,13 @@
     class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100"
     [ngClass]="{
       'border-primary-lighter bg-primary-white': dragFilesOver,
-      'border-gray-300': !dragFilesOver
+      'border-gray-300': !dragFilesOver,
+      'cursor-pointer hover:border-gray-500': !isUploadInProgress
     }"
+    [attr.tabindex]="isUploadInProgress ? null : 0"
     (dragFilesOver)="handleDragFilesOver($event)"
     (dropFiles)="handleDropFiles($event)"
+    (keydown.enter)="fileInput.click()"
   >
     <div
       class="w-14 h-14 rounded-md bg-gray-50 grid"
@@ -26,7 +29,7 @@
     </div>
     <div
       *ngIf="isUploadInProgress"
-      class="w-14 h-14 grid items-center justify-center"
+      class="w-14 h-14 grid items-center justify-center relative"
     >
       <div class="text-gray-100 absolute">
         <mat-progress-spinner
@@ -57,7 +60,7 @@
             ? 'font-bold text-primary cursor-pointer'
             : 'font-medium text-gray-500'
         "
-        (click)="handleSecondaryTextClick()"
+        (click)="handleSecondaryTextClick($event)"
       >
         {{ getSecondaryText() | translate }}
       </p>
@@ -70,6 +73,7 @@
       <span class="border-b border-gray-300 grow"></span>
     </p>
     <input
+      #fileInput
       type="file"
       class="hidden"
       (change)="handleFileInput($event)"

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

@@ -79,9 +79,10 @@ export class FileInputComponent {
     this.urlChange.emit(url)
   }
 
-  handleSecondaryTextClick() {
+  handleSecondaryTextClick(event: Event) {
     if (this.uploadProgress) {
       this.handleCancel()
+      event.preventDefault()
     }
   }
 

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

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}

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

@@ -5,15 +5,15 @@
   <div class="w-full h-full flex flex-col gap-2">
     <div class="flex-1 group relative">
       <img
-        class="w-full h-full object-cover border-2 border-gray-300 rounded-lg"
+        class="w-full object-cover border-2 border-gray-300 rounded-lg h-[172px]"
         [alt]="altText"
         loading="lazy"
         [src]="previewUrl"
       />
       <gn-ui-button
-        [extraClass]="
-          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'
-        "
+        type="outline"
+        style="--gn-ui-button-height: 40px; --gn-ui-button-width: 40px"
+        extraClass="absolute right-2 bottom-2 invisible group-hover:visible bg-background"
         (buttonClick)="handleDelete()"
       >
         <mat-icon class="material-symbols-outlined">delete</mat-icon>
@@ -24,21 +24,23 @@
       [placeholder]="'input.image.altTextPlaceholder' | translate"
       [value]="altText ?? ''"
       (valueChange)="handleAltTextChange($event)"
+      extraClass="gn-ui-editor-textarea"
     ></gn-ui-text-input>
-    <div class="flex flex-row gap-2">
-      <gn-ui-button
-        [extraClass]="'bg-gray-200 font-bold'"
-        (buttonClick)="handleDelete()"
-      >
-        <mat-icon class="material-symbols-outlined me-1">delete</mat-icon>
+    <div class="flex flex-row gap-2 mt-2">
+      <gn-ui-button type="gray" (buttonClick)="handleDelete()">
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >delete</mat-icon
+        >
         {{ 'input.image.delete' | translate }}
       </gn-ui-button>
       <gn-ui-button
         *ngIf="!showAltTextInput"
-        [extraClass]="'bg-gray-200 font-bold'"
+        type="gray"
         (buttonClick)="toggleAltTextInput()"
       >
-        <mat-icon class="material-symbols-outlined me-1">add</mat-icon>
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >add</mat-icon
+        >
         {{ 'input.image.displayAltTextInput' | translate }}
       </gn-ui-button>
     </div>
@@ -49,11 +51,17 @@
   <div class="w-full h-full flex flex-col gap-2">
     <label
       gnUiFilesDrop
-      class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4"
+      class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100"
       [ngClass]="{
         'border-primary-lighter bg-primary-white': dragFilesOver,
-        'border-gray-300': !dragFilesOver
+        'border-gray-300': !dragFilesOver,
+        'cursor-pointer hover:border-gray-500':
+          !isUploadInProgress && !uploadError && !showUrlInput
       }"
+      [attr.tabindex]="
+        isUploadInProgress || uploadError || showUrlInput ? null : 0
+      "
+      (keydown.enter)="fileInput.click()"
       (dragFilesOver)="handleDragFilesOver($event)"
       (dropFiles)="handleDropFiles($event)"
     >
@@ -75,7 +83,7 @@
 
       <div
         *ngIf="isUploadInProgress && !uploadError"
-        class="w-14 h-14 grid items-center justify-center"
+        class="w-14 h-14 grid items-center justify-center relative"
       >
         <div class="text-gray-100 absolute">
           <mat-progress-spinner
@@ -112,12 +120,13 @@
               ? 'font-bold text-blue-500 cursor-pointer'
               : 'font-medium text-gray-500'
           "
-          (click)="handleSecondaryTextClick()"
+          (click)="handleSecondaryTextClick($event)"
         >
           {{ getSecondaryText() | translate }}
         </p>
       </div>
       <input
+        #fileInput
         type="file"
         class="hidden"
         (change)="handleFileInput($event)"
@@ -125,12 +134,11 @@
       />
     </label>
 
-    <div *ngIf="!showUrlInput" class="flex-none">
-      <gn-ui-button
-        [extraClass]="'bg-gray-200 font-bold'"
-        (buttonClick)="displayUrlInput()"
-      >
-        <mat-icon class="material-symbols-outlined me-1">link</mat-icon>
+    <div *ngIf="!showUrlInput" class="flex-none mt-2">
+      <gn-ui-button (buttonClick)="displayUrlInput()" type="gray">
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >link</mat-icon
+        >
         {{ 'input.image.displayUrlInput' | translate }}
       </gn-ui-button>
     </div>

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

@@ -144,11 +144,12 @@ export class ImageInputComponent {
     }
   }
 
-  handleSecondaryTextClick() {
+  handleSecondaryTextClick(event: Event) {
     if (this.uploadError) {
       this.handleRetry()
     } else if (this.uploadProgress) {
       this.handleCancel()
+      event.preventDefault()
     }
   }
 

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

@@ -4,12 +4,16 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { Subject, distinctUntilChanged } from 'rxjs'
+import { distinctUntilChanged, Subject } from 'rxjs'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-search-input',
   templateUrl: './search-input.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
 })
 export class SearchInputComponent {
   @Input() value = ''

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css

@@ -11,15 +11,16 @@
 }
 
 .mat-button-toggle-appearance-standard {
-  color: var(--color-main);
+  color: black;
   background-color: var(--color-gray-200);
   border-radius: 4px;
   border-left: none;
+  font-family: var(--font-family-main);
 }
 
 .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-  background-color: var(--color-main);
-  color: var(--color-primary-white);
+  background-color: black;
+  color: var(--color-background);
 }
 
 button.mat-button-toggle-button.mat-focus-indicator.mat-button-toggle-label-content {

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.html

@@ -6,7 +6,6 @@
   <mat-button-toggle
     *ngFor="let option of options"
     [aria-label]="option.label"
-    [value]="option.value"
     [checked]="option.checked"
     (change)="onChange(option)"
     [class]="extraClasses"

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.ts

@@ -10,7 +10,6 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle'
 
 export type SwitchToggleOption = {
   label: string
-  value: string
   checked: boolean
 }
 
@@ -30,7 +29,7 @@ export class SwitchToggleComponent {
 
   onChange(selectedOption: SwitchToggleOption) {
     this.options.find(
-      (option) => option.value === selectedOption.value
+      (option) => option.label === selectedOption.label
     ).checked = true
 
     this.selectedValue.emit(selectedOption)

package/src/libs/ui/inputs/src/lib/text-area/text-area.component.html

@@ -6,7 +6,7 @@
     [ngClass]="extraClass"
     [disabled]="disabled"
     [placeholder]="placeholder"
-    [value]="value"
+    [value]="value ?? ''"
     (change)="handleChange($event)"
     (input)="handleChange($event)"
     [attr.required]="required || null"

package/src/libs/ui/inputs/src/lib/text-area/text-area.component.ts

@@ -20,7 +20,7 @@ export class TextAreaComponent implements AfterViewInit {
   @Input() value = ''
   @Input() disabled = false
   @Input() extraClass = ''
-  @Input() placeholder: string
+  @Input() placeholder = ''
   @Input() required = false
 
   rawChange = new Subject<string>()

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

@@ -24,7 +24,6 @@ import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.com
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { CommonModule } from '@angular/common'
 import { CheckboxComponent } from './checkbox/checkbox.component'
-import { SearchInputComponent } from './search-input/search-input.component'
 import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
 import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
@@ -43,7 +42,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
     ViewportIntersectorComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
-    SearchInputComponent,
   ],
   imports: [
     CommonModule,
@@ -85,7 +83,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
     CheckToggleComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
-    SearchInputComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
     ImageInputComponent,

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

@@ -30,7 +30,7 @@
     [disabled]="disabled || input.value === ''"
     (buttonClick)="handleChange(input)"
   >
-    <mat-icon class="material-symbols-outlined text-[20px] leading-[26px]">
+    <mat-icon class="material-symbols-outlined text-[20px] leading-[24px]">
       arrow_upward
     </mat-icon>
   </gn-ui-button>

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

@@ -8,4 +8,6 @@ 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/ui-layout.module'

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>
     <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 overflow-y-auto">
-    <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'
 
 @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: [MatIconModule, MatTooltipModule, CommonModule],
 })
 export class FormFieldWrapperComponent {
-  @Input() label: string
-  @Input() hint: string
+  @Input() label?: string
+  @Input() hint?: string
 }

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/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>