geonetwork-ui 2.3.0-dev.c3722986 → 2.3.0-dev.c4b41b40

package/src/libs/ui/elements/src/lib/link-card/link-card.component.ts

@@ -1,12 +1,24 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
 import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-link-card',
   templateUrl: './link-card.component.html',
   styleUrls: ['./link-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
 })
 export class LinkCardComponent {
   @Input() link: DatasetDistribution
+  @Input() compact = false
+
+  get title() {
+    if (this.link.name && this.link.description) {
+      return `${this.link.name} | ${this.link.description}`
+    }
+    return this.link.name || this.link.description || ''
+  }
 }

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.css

@@ -1,5 +0,0 @@
-.icon-small {
-  font-size: 16px;
-  height: 16px;
-  width: 16px;
-}

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html

@@ -1,25 +1,4 @@
 <div class="h-full flex flex-col">
-  <div class="flex-none w-full flex flex-row items-center">
-    <p class="flex-none font-bold">{{ label }}</p>
-    <div class="flex-1 flex justify-end items-center">
-      <gn-ui-button
-        [extraClass]="getButtonExtraClass()"
-        (buttonClick)="togglePreview()"
-      >
-        <span class="material-symbols-outlined mr-1 icon-small">{{
-          preview ? 'visibility' : 'visibility_off'
-        }}</span>
-        {{ preview ? 'WYSIWYG' : 'Markdown' }}
-      </gn-ui-button>
-      <span
-        class="material-symbols-outlined m-2 icon-small"
-        [matTooltip]="tooltip"
-        matTooltipPosition="above"
-      >
-        help
-      </span>
-    </div>
-  </div>
   <p class="flex-none mb-2 font-medium text-sm text-gray-900">
     {{ helperText }}
   </p>

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts

@@ -31,26 +31,13 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   ],
 })
 export class MarkdownEditorComponent {
-  @Input() label: string
-  @Input() tooltip?: string
+  @Input() preview = false
   @Input() helperText?: string
   @Input() placeholder: string
   @Input() textContent: string
   @Output() textContentChanged: EventEmitter<string> =
     new EventEmitter<string>()
 
-  preview = false
-
-  getButtonExtraClass() {
-    return `${
-      this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'
-    } rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`
-  }
-
-  togglePreview() {
-    this.preview = !this.preview
-  }
-
   textContentChangedHandler(textContent: string) {
     this.textContent = textContent
     this.textContentChanged.emit(this.textContent)

package/src/libs/ui/elements/src/lib/notification/notification.component.html

@@ -0,0 +1,52 @@
+<div
+  class="p-[16px] flex flex-row gap-[16px] items-start border border-gray-200 shadow-md rounded bg-background"
+>
+  <div
+    role="alert"
+    class="rounded-full text-white p-[6px] w-[32px] h-[32px] flex shrink-0"
+    [ngClass]="{
+      'bg-red-500': type === 'error',
+      'bg-yellow-500': type === 'warning',
+      'bg-green-500': type === 'success',
+      'bg-blue-500': type === 'info'
+    }"
+    [ngSwitch]="type"
+  >
+    <mat-icon class="material-symbols-outlined !w-[18px] !h-[18px] text-[20px]">
+      <ng-container *ngSwitchCase="'success'">check_circle</ng-container>
+      <ng-container *ngSwitchCase="'info'">info</ng-container>
+      <ng-container *ngSwitchCase="'warning'">warning</ng-container>
+      <ng-container *ngSwitchCase="'error'">error</ng-container>
+    </mat-icon>
+  </div>
+  <div
+    class="flex flex-col items-start gap-[4px] pt-[3px] grow shrink overflow-hidden"
+  >
+    <div class="font-bold text-[16px] text-gray-900">
+      {{ title }}
+    </div>
+    <div class="text-[14px] text-gray-800">
+      {{ text }}
+    </div>
+    <a
+      href
+      *ngIf="closeMessage"
+      class="text-[14px] gn-ui-link"
+      (click)="handleClose($event)"
+    >
+      {{ closeMessage }}
+    </a>
+  </div>
+  <gn-ui-button
+    type="light"
+    class="shrink-0"
+    (buttonClick)="handleClose()"
+    [style.--gn-ui-button-padding]="0"
+    [style.--gn-ui-button-width]="'21px'"
+    [style.--gn-ui-button-height]="'21px'"
+  >
+    <mat-icon class="material-symbols-outlined text-[22px] !w-[21px] !h-[21px]"
+      >close</mat-icon
+    >
+  </gn-ui-button>
+</div>

package/src/libs/ui/elements/src/lib/notification/notification.component.ts

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-notification',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, ButtonComponent],
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationComponent {
+  @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info'
+  @Input() title: string
+  @Input() text: string
+  @Input() closeMessage?: string
+  @Output() notificationClose = new EventEmitter<void>()
+
+  handleClose(event?: Event) {
+    event?.preventDefault()
+    this.notificationClose.emit()
+  }
+}

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html

@@ -13,7 +13,7 @@
         </p>
       </button>
     </div>
-    <div class="flex flex-row flex-wrap justify-between flex-grow gap-5">
+    <div class="flex flex-row flex-wrap justify-between grow gap-5">
       <div class="flex flex-col gap-3">
         <p class="text-[14px]" translate>record.metadata.api.form.limit</p>
         <div class="flex flex-row items-center gap-2">
@@ -55,7 +55,7 @@
           extraBtnClass="secondary min-w-full !w-40 !text-black"
           [showTitle]="false"
           class="text-black"
-          [choices]="formatsList"
+          [choices]="outputFormats"
           (selectValue)="setFormat($event)"
           [selected]="format$ | async"
         ></gn-ui-dropdown-selector>

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { OgcApiEndpoint } from '@camptocamp/ogc-client'
 import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { mimeTypeToFormat } from '../../../../../../libs/util/shared/src'
 import { BehaviorSubject, combineLatest, map } from 'rxjs'
 
 const DEFAULT_PARAMS = {
@@ -16,16 +18,15 @@ const DEFAULT_PARAMS = {
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {
     this.apiBaseUrl = value ? value.url.href : undefined
+    this.outputFormats = [{ value: 'json', label: 'JSON' }]
+    this.parseOutputFormats()
     this.resetUrl()
   }
   offset$ = new BehaviorSubject('')
   limit$ = new BehaviorSubject('')
   format$ = new BehaviorSubject('')
   apiBaseUrl: string
-  formatsList = [
-    { label: 'JSON', value: 'json' },
-    { label: 'CSV', value: 'csv' },
-  ]
+  outputFormats = [{ value: 'json', label: 'JSON' }]
   apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(
     map(([offset, limit, format]) => {
       let outputUrl
@@ -70,4 +71,39 @@ export class RecordApiFormComponent {
     this.limit$.next(DEFAULT_PARAMS.LIMIT)
     this.format$.next(DEFAULT_PARAMS.FORMAT)
   }
+
+  parseOutputFormats() {
+    const apiUrl =
+      this.apiBaseUrl.slice(-1) === '?'
+        ? this.apiBaseUrl.slice(0, -1)
+        : this.apiBaseUrl
+
+    this.getOutputFormats(apiUrl).then((outputFormats) => {
+      const formatsList = outputFormats.itemFormats.map((format) => {
+        const normalizedFormat = mimeTypeToFormat(format)
+        if (normalizedFormat) {
+          return {
+            label: normalizedFormat?.toUpperCase(),
+            value: normalizedFormat,
+          }
+        }
+        return null
+      })
+      this.outputFormats = this.outputFormats.concat(
+        formatsList.filter(Boolean)
+      )
+      this.outputFormats = this.outputFormats
+        .filter(
+          (format, index, self) =>
+            index === self.findIndex((t) => t.value === format.value)
+        )
+        .sort((a, b) => a.label.localeCompare(b.label))
+    })
+  }
+
+  async getOutputFormats(url) {
+    const endpoint = await new OgcApiEndpoint(url)
+    const firstCollection = (await endpoint.featureCollections)[0]
+    return endpoint.getCollectionInfo(firstCollection)
+  }
 }

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

@@ -31,6 +31,8 @@ import { MaxLinesComponent } from './max-lines/max-lines.component'
 import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
 import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
+import { UserFeedbackItemComponent } from './user-feedback-item/user-feedback-item.component'
+import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
 
 @NgModule({
   imports: [
@@ -47,6 +49,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     NgOptimizedImage,
     MarkdownParserComponent,
     ThumbnailComponent,
+    TimeSincePipe,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -54,7 +57,6 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,
@@ -68,6 +70,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     PaginationButtonsComponent,
     MaxLinesComponent,
     RecordApiFormComponent,
+    UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
   ],
   exports: [
@@ -76,7 +79,6 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,
@@ -91,6 +93,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     MaxLinesComponent,
     RecordApiFormComponent,
     MarkdownParserComponent,
+    UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
   ],
 })

package/src/libs/ui/elements/src/lib/user-feedback-item/time-since.pipe.ts

@@ -0,0 +1,54 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
+import { formatDistance } from 'date-fns'
+import { de, enUS, es, fr, it, nl, pt, sk } from 'date-fns/locale'
+
+@Pipe({
+  name: 'timeSince',
+  standalone: true,
+})
+export class TimeSincePipe implements PipeTransform {
+  constructor(private translate: TranslateService) {}
+
+  transform(value: Date): string {
+    if (isNaN(value.getTime())) {
+      throw new Error('Invalid Date')
+    }
+
+    const maintenant = new Date()
+    let locale: Locale
+
+    switch (this.translate.currentLang) {
+      case 'fr':
+        locale = fr
+        break
+      case 'de':
+        locale = de
+        break
+      case 'es':
+        locale = es
+        break
+      case 'it':
+        locale = it
+        break
+      case 'nl':
+        locale = nl
+        break
+      case 'pt':
+        locale = pt
+        break
+      case 'sk':
+        locale = sk
+        break
+      case 'en':
+      default:
+        locale = enUS
+        break
+    }
+
+    return formatDistance(value, maintenant, {
+      addSuffix: true,
+      locale: locale,
+    })
+  }
+}

package/src/libs/ui/elements/src/lib/user-feedback-item/user-feedback-item.component.html

@@ -0,0 +1,75 @@
+<div
+  *ngIf="userFeedbackParent.published"
+  class="flex flex-col bg-white rounded w-full"
+  [ngClass]="[isAnAnswer ? 'ps-4 ' : 'p-4']"
+>
+  <div class="flex flex-row">
+    <div class="avatar">
+      <img
+        class="rounded-full"
+        [src]="userFeedbackParent.avatarUrl"
+        alt="avatar"
+      />
+    </div>
+    <div class="p-4 flex flex-col">
+      <span>{{ userFeedbackParent.authorName }}</span>
+      <span> {{ userFeedbackParent.date | timeSince }}</span>
+    </div>
+  </div>
+  <div data-cy="commentText" class="mt-4 whitespace-pre-line">
+    {{ userFeedbackParent.comment }}
+  </div>
+  <div
+    class="w-full"
+    *ngFor="let userFeedBacksAnswer of userFeedBacksAnswers; let last = last"
+  >
+    <hr class="-mx-4 my-6" />
+    <gn-ui-user-feedback-item
+      [userFeedbackParent]="userFeedBacksAnswer"
+      [isLastComment]="last"
+    ></gn-ui-user-feedback-item>
+  </div>
+
+  <div *ngIf="isActiveUserEditor" class="mt-2 flex flex-col">
+    <hr class="-mx-4 my-4" />
+    <div
+      id="new-comment-buttons"
+      class="flex flex-row gap-2 items-center justify-end"
+    >
+      <gn-ui-text-area
+        [disabled]="isAddUserFeedbackLoading"
+        [(value)]="newAnswer"
+        (valueChange)="onNewAnswerValueChange()"
+        (keyup.control.enter)="publishNewAnswer()"
+        [placeholder]="
+          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate
+        "
+        class="grow"
+        extraClass="bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9"
+      ></gn-ui-text-area>
+      <div *ngIf="!isAnswerEmpty" class="flex flex-row justify-end">
+        <gn-ui-button
+          [disabled]="isAddUserFeedbackLoading"
+          [type]="'outline'"
+          (buttonClick)="publishNewAnswer()"
+          [title]="
+            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate
+          "
+          extraClass="!p-[0.5em] text-primary-darker border-primary-darker h-9"
+        >
+          <mat-icon
+            class="material-symbols-outlined"
+            *ngIf="!isAddUserFeedbackLoading"
+          >
+            send
+          </mat-icon>
+          <ng-container *ngIf="isAddUserFeedbackLoading">
+            <div class="flex justify-center w-full">
+              <gn-ui-spinning-loader></gn-ui-spinning-loader>
+            </div>
+          </ng-container>
+        </gn-ui-button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/user-feedback-item/user-feedback-item.component.ts

@@ -0,0 +1,63 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core'
+import {
+  UserFeedback,
+  UserFeedbackViewModel,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user'
+
+@Component({
+  selector: 'gn-ui-user-feedback-item',
+  templateUrl: './user-feedback-item.component.html',
+  styleUrls: ['./user-feedback-item.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserFeedbackItemComponent implements OnInit {
+  @Input() userFeedbackParent: UserFeedbackViewModel
+  @Input() userFeedBacksAnswers: UserFeedbackViewModel[]
+  @Input() isActiveUserEditor: boolean
+  @Input() activeUser: UserModel
+  @Input() isLastComment: boolean
+  @Input() isAddUserFeedbackLoading: boolean
+
+  @Output() newUserFeedbackAnswer = new EventEmitter<UserFeedback>()
+
+  isAnAnswer = false
+  newAnswer = ''
+  isAnswerEmpty = true
+
+  ngOnInit(): void {
+    this.isAnAnswer = !!this.userFeedbackParent.parentUuid
+  }
+
+  onNewAnswerValueChange() {
+    this.isAnswerEmpty = this.newAnswer.length === 0
+  }
+
+  publishNewAnswer() {
+    if (this.newAnswer.trim() === '') return
+
+    const newAnswer: UserFeedback = {
+      ...this.userFeedbackParent,
+      uuid: undefined,
+      published: true,
+      comment: this.newAnswer,
+      parentUuid: this.userFeedbackParent.uuid,
+      authorUserId: this.activeUser?.id,
+      authorEmail: this.activeUser?.email,
+      date: new Date(),
+      authorName: `${this.activeUser?.name} ${this.activeUser?.surname}`,
+    }
+
+    this.newUserFeedbackAnswer.emit(newAnswer)
+
+    this.newAnswer = ''
+    this.onNewAnswerValueChange()
+  }
+}

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

@@ -1,22 +1,22 @@
-export * from './lib/dropdown-selector/dropdown-selector.component'
-export * from './lib/dropdown-selector/dropdown-selector.model'
-export * from './lib/dropdown-multiselect/dropdown-multiselect.component'
-export * from './lib/dropdown-multiselect/dropdown-multiselect.model'
-export * from './lib/text-input/text-input.component'
-export * from './lib/chips-input/chips-input.component'
-export * from './lib/text-area/text-area.component'
 export * from './lib/autocomplete/autocomplete.component'
-export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/button/button.component'
-export * from './lib/viewport-intersector/viewport-intersector.component'
 export * from './lib/check-toggle/check-toggle.component'
-export * from './lib/ui-inputs.module'
-export * from './lib/form-field'
+export * from './lib/checkbox/checkbox.component'
+export * from './lib/chips-input/chips-input.component'
 export * from './lib/copy-text-button/copy-text-button.component'
+export * from './lib/date-picker/date-picker.component'
+export * from './lib/date-range-picker/date-range-picker.component'
 export * from './lib/drag-and-drop-file-input/drag-and-drop-file-input.component'
+export * from './lib/dropdown-multiselect/dropdown-multiselect.component'
+export * from './lib/dropdown-multiselect/dropdown-multiselect.model'
+export * from './lib/dropdown-selector/dropdown-selector.component'
+export * from './lib/dropdown-selector/dropdown-selector.model'
+export * from './lib/editable-label/editable-label.directive'
 export * from './lib/navigation-button/navigation-button.component'
-export * from './lib/viewport-intersector/viewport-intersector.component'
-export * from './lib/checkbox/checkbox.component'
 export * from './lib/search-input/search-input.component'
-export * from './lib/date-range-picker/date-range-picker.component'
-export * from './lib/editable-label/editable-label.directive'
+export * from './lib/star-toggle/star-toggle.component'
+export * from './lib/text-area/text-area.component'
+export * from './lib/text-input/text-input.component'
+export * from './lib/ui-inputs.module'
+export * from './lib/viewport-intersector/viewport-intersector.component'
+export * from './lib/previous-next-buttons/previous-next-buttons.component'

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

@@ -0,0 +1,3 @@
+mat-datepicker-toggle {
+  @apply text-primary;
+}

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

@@ -0,0 +1,11 @@
+<div
+  class="flex items-center justify-between pl-3 rounded-lg border border-gray-300 bg-white"
+>
+  <input
+    [matDatepicker]="picker"
+    [value]="date"
+    (dateChange)="dateChange.emit($event.value)"
+  />
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+</div>
+<mat-datepicker #picker></mat-datepicker>

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

@@ -0,0 +1,16 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { MatNativeDateModule } from '@angular/material/core'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatIconModule } from '@angular/material/icon'
+
+@Component({
+  selector: 'gn-ui-date-picker',
+  templateUrl: './date-picker.component.html',
+  styleUrls: ['./date-picker.component.css'],
+  standalone: true,
+  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
+})
+export class DatePickerComponent {
+  @Input() date: Date
+  @Output() dateChange = new EventEmitter<Date>()
+}

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

@@ -1,10 +1,17 @@
 import { Component } from '@angular/core'
-import { MatDatepickerInputEvent } from '@angular/material/datepicker'
+import { MatNativeDateModule } from '@angular/material/core'
+import {
+  MatDatepickerInputEvent,
+  MatDatepickerModule,
+} from '@angular/material/datepicker'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-date-range-picker',
   templateUrl: './date-range-picker.component.html',
   styleUrls: ['./date-range-picker.component.css'],
+  standalone: true,
+  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
 })
 export class DateRangePickerComponent {
   startDate: Date

package/src/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts

@@ -2,6 +2,7 @@ import {
   CdkConnectedOverlay,
   CdkOverlayOrigin,
   ConnectedPosition,
+  OverlayModule,
 } from '@angular/cdk/overlay'
 import {
   ChangeDetectionStrategy,
@@ -17,6 +18,10 @@ import {
 } from '@angular/core'
 import { firstValueFrom } from 'rxjs'
 import { DropdownChoice } from './dropdown-selector.model'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../button/button.component'
 
 const DEFAULT_ROW_NUMBERS = 6
 
@@ -25,6 +30,14 @@ const DEFAULT_ROW_NUMBERS = 6
   templateUrl: './dropdown-selector.component.html',
   styleUrls: ['./dropdown-selector.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    OverlayModule,
+    MatIconModule,
+    TranslateModule,
+  ],
 })
 export class DropdownSelectorComponent implements OnInit {
   @Input() title: string

package/src/libs/ui/inputs/src/lib/previous-next-buttons/previous-next-buttons.component.css

@@ -0,0 +1,6 @@
+:host {
+  --gn-ui-button-rounded: 100%;
+  --gn-ui-button-width: 8px;
+  --gn-ui-button-height: 8px;
+  --gn-ui-button-padding: 12px;
+}

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

@@ -0,0 +1,26 @@
+<div class="flex flex-row gap-x-4 items-center">
+  <gn-ui-button
+    data-test="previousButton"
+    [type]="isFirst ? 'default' : 'outline'"
+    [disabled]="isFirst"
+    (buttonClick)="previousButtonClicked()"
+  >
+    <mat-icon
+      class="material-symbols-outlined text-[14px] text-center pt-[5px]"
+    >
+      arrow_back
+    </mat-icon>
+  </gn-ui-button>
+  <gn-ui-button
+    data-test="nextButton"
+    [type]="isLast ? 'default' : 'outline'"
+    [disabled]="isLast"
+    (buttonClick)="nextButtonClicked()"
+  >
+    <mat-icon
+      class="material-symbols-outlined text-[14px] text-center pt-[5px]"
+    >
+      arrow_forward
+    </mat-icon>
+  </gn-ui-button>
+</div>