geonetwork-ui 2.3.0-dev.3d65a13b → 2.3.0-dev.3efe236f

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -18,20 +19,21 @@ export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
   'thumbnail-placeholder'
 )
 
+type FitOptions = 'cover' | 'contain' | 'scale-down'
 type ThumbnailImageObject = {
   url: string
-  fit?: 'cover' | 'contain' | 'scale-down'
+  fit?: FitOptions
 }
 
 const DEFAULT_PLACEHOLDER =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH5gkNDCUFYjA1nwAAA1pJREFUeNrtnW2TmjAURh8CLlTdrmun///3tZ22+zLuYlehH7jsMGogwRiiec4MM44K6D3x3hAwAIQQQgghhJDYSM5cPwNQAMgBpACUg22GTg2gArAD8A9AKY+9CsgALAF8YRsGALwDeAWw9yGgALCKoKWP+WU8iwxjUsudLBj83sZciIiPSwhoWz7pJ5dUZFQXlEXOZ/DNeTBt3JnhBpc9aacGsOn0BuoIUk3b+5trGnEC4B7Ak4sUlInRU+wB/JbgVxG18KrTBc01EmYmcTFJQUVPy/9zTh/4BthLDOqeenB2DdBtZBN58LsSNpcUoEtTJWM/GIvMhQDde9j6h2OhXAjo6/2Q/lgkLgSQC0IBFEABZEKyiaQv5AAv7fSlS+lPVxRwOXTnEtoTPAs04yfRHGMoz8F/HOiaJfKeggLc78dmOHsVS33y9SUXsDuLlsg6FOAw/fhYhwI0pJ7WoQASpoC9p3UoQEPpaR0K0LCB3fB1e6KfAhxRweAKgQ5PsQxJ+CzCJYC/A7+EWt4TzVCE77GgEsBPHA/G7QBswcE4b+noVRZ2QxkCCqAAQgEUQCiAAggFUAChAAogFEABhAJcfT9FAdOxQuB/ML9lAfdo/qWYy2MK8EiO5mrrliUCvdIudAEzWWzQzWuxwjRnAK9WwAzAWhZTCe3l7cryNQrQBL/txZhKGGrlwc36ogIPfvdzfhuQsDDM80EVZXUFwe+mEJ2EOwBfLfYTTFFWVxL8Qwl3nedSye1jjhEyCjAPflfCWiScU1iDKMrqyoJ/KOFxRDf1sCg/xCxgTPC7EnIHn6GYsiirKw2+ayYryorBn7YoKwb/qCgntywg1OBPdqSsGPyTRXnp07gvPgD8AAl6KIICCAVQAAlLwOg5MSNi9NyqJgKqAHpQoZNZxs5KgG7SDN7AZzgWOxcCtprn5/wVfLb+uWXsrASUPXlvHbmETGKQjBVgMitVJTuaaQS2t/GoEMeE3onEor2jlK4RvwN4G1u9T4n6zp6PMTWAXzCYdCq12OCOhdeYZzT3mIErAW1Fr+HmNOAt82KSesYIAJoRzR2aIVumo+Ms8WwT/HOOZlM0Y+Zzxv2zp/gCTzfzPOyGtdfgp7LEcDvbvSxbWXg/HUIIIYQQQogx/wHLoX7NoCMFPwAAAABJRU5ErkJggg=='
 
-type FitOptions = 'cover' | 'contain' | 'scale-down'
-
 @Component({
   selector: 'gn-ui-thumbnail',
   templateUrl: './thumbnail.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class ThumbnailComponent implements OnInit, OnChanges {
   @Input() thumbnailUrl: string | string[]

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: [
@@ -46,6 +48,8 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     FormsModule,
     NgOptimizedImage,
     MarkdownParserComponent,
+    ThumbnailComponent,
+    TimeSincePipe,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -61,13 +65,13 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     MetadataQualityItemComponent,
     SearchResultsErrorComponent,
     PaginationComponent,
-    ThumbnailComponent,
     AvatarComponent,
     UserPreviewComponent,
     GnUiLinkifyDirective,
     PaginationButtonsComponent,
     MaxLinesComponent,
     RecordApiFormComponent,
+    UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
   ],
   exports: [
@@ -91,6 +95,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

@@ -11,7 +11,6 @@ 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/copy-text-button/copy-text-button.component'
 export * from './lib/drag-and-drop-file-input/drag-and-drop-file-input.component'
 export * from './lib/navigation-button/navigation-button.component'

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

@@ -15,7 +15,7 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
   standalone: true,
 })
 export class ButtonComponent {
-  private btnClass: string
+  private btnClass = 'gn-ui-btn-default'
 
   @Input() set type(
     value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'

package/src/libs/ui/inputs/src/lib/files-drop/files-drop.directive.ts

@@ -0,0 +1,45 @@
+import { Directive, HostListener, Output, EventEmitter } from '@angular/core'
+
+@Directive({
+  selector: '[gnUiFilesDrop]',
+  standalone: true,
+})
+export class FilesDropDirective {
+  @Output() dragFilesOver: EventEmitter<boolean> = new EventEmitter()
+  @Output() dropFiles: EventEmitter<File[]> = new EventEmitter()
+
+  dragEnterCounter = 0
+
+  @HostListener('dragenter', ['$event'])
+  _onDragEnter(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter++
+    this.dragFilesOver.emit(true)
+  }
+
+  @HostListener('dragover', ['$event'])
+  _onDragOver(event: DragEvent) {
+    event.preventDefault()
+  }
+
+  @HostListener('dragleave', ['$event'])
+  _onDragLeave(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter = Math.max(0, this.dragEnterCounter - 1)
+    if (this.dragEnterCounter === 0) {
+      this.dragFilesOver.emit(false)
+    }
+  }
+
+  @HostListener('drop', ['$event'])
+  _onDrop(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter = 0
+    this.dragFilesOver.emit(false)
+
+    const files = Array.from(event.dataTransfer.files)
+    if (files.length > 0) {
+      this.dropFiles.emit(files)
+    }
+  }
+}

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

@@ -0,0 +1,146 @@
+<ng-container *ngIf="previewUrl; then withImage; else withoutImage">
+</ng-container>
+
+<ng-template #withImage>
+  <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"
+        [alt]="altText"
+        loading="lazy"
+        [src]="previewUrl"
+      />
+      <gn-ui-button
+        [extraClass]="
+          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'
+        "
+        (buttonClick)="handleDelete()"
+      >
+        <mat-icon class="material-symbols-outlined">delete</mat-icon>
+      </gn-ui-button>
+    </div>
+    <input
+      *ngIf="showAltTextInput"
+      type="text"
+      class="py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium"
+      [placeholder]="'input.image.altTextPlaceholder' | translate"
+      [value]="altText"
+      (change)="handleAltTextChange($event)"
+    />
+    <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>
+        {{ 'input.image.delete' | translate }}
+      </gn-ui-button>
+      <gn-ui-button
+        *ngIf="!showAltTextInput"
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="toggleAltTextInput()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">add</mat-icon>
+        {{ 'input.image.displayAltTextInput' | translate }}
+      </gn-ui-button>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #withoutImage>
+  <div class="w-full h-full flex flex-col gap-2">
+    <label
+      gnUiFilesDrop
+      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4"
+      (dragFilesOver)="handleDragFilesOver($event)"
+      (dropFiles)="handleDropFiles($event)"
+    >
+      <div class="w-14 h-14 rounded-md bg-gray-200 grid">
+        <mat-icon
+          *ngIf="!dragFilesOver && !uploadProgress && !uploadError"
+          class="material-symbols-outlined place-self-center text-blue-500"
+          >image</mat-icon
+        >
+        <mat-icon
+          *ngIf="dragFilesOver && !uploadProgress && !uploadError"
+          class="material-symbols-outlined place-self-center text-blue-500"
+          >add_box</mat-icon
+        >
+        <div *ngIf="uploadProgress">
+          <mat-progress-spinner
+            class="place-self-center"
+            [diameter]="56"
+            [mode]="'determinate'"
+            [value]="uploadProgress"
+          ></mat-progress-spinner>
+          <span
+            class="text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]"
+          >
+            {{ uploadProgress }}%
+          </span>
+        </div>
+        <mat-icon
+          *ngIf="uploadError"
+          class="material-symbols-outlined place-self-center text-rose-500"
+          >broken_image</mat-icon
+        >
+      </div>
+      <div class="flex flex-col items-center gap-1">
+        <p class="font-medium">{{ getPrimaryText() | translate }}</p>
+        <p
+          class="text-sm"
+          [class]="
+            uploadProgress || uploadError
+              ? 'font-bold text-blue-500 cursor-pointer'
+              : 'font-medium text-gray-500'
+          "
+          (click)="handleSecondaryTextClick()"
+        >
+          {{ getSecondaryText() | translate }}
+        </p>
+      </div>
+      <input
+        type="file"
+        class="hidden"
+        (change)="handleFileInput($event)"
+        [disabled]="showUrlInput || uploadProgress || uploadError"
+      />
+    </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>
+        {{ 'input.image.displayUrlInput' | translate }}
+      </gn-ui-button>
+    </div>
+    <div *ngIf="showUrlInput" class="flex-none flex flex-col gap-2">
+      <div class="h-2"></div>
+      <div class="flex gap-2 items-center">
+        <div class="flex-1 flex rounded-lg">
+          <span
+            class="material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300"
+            >link</span
+          >
+          <input
+            type="text"
+            class="py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium"
+            placeholder="https://exemple.com/image.jpg"
+            (change)="handleUrlChange($event)"
+          />
+          <gn-ui-button
+            class="px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white"
+            [extraClass]="
+              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'
+            "
+            [disabled]="!urlInputValue || downloadError"
+            (buttonClick)="downloadUrl()"
+          >
+            <mat-icon class="material-symbols-outlined">arrow_upward</mat-icon>
+          </gn-ui-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,193 @@
+import { CommonModule } from '@angular/common'
+import { HttpClient } from '@angular/common/http'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { downgradeImage, megabytesToBytes } from '../../../../../../libs/util/shared/src'
+import { firstValueFrom } from 'rxjs'
+import { ButtonComponent } from '../button/button.component'
+import { FilesDropDirective } from '../files-drop/files-drop.directive'
+import { TranslateModule } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+@Component({
+  selector: 'gn-ui-image-input',
+  templateUrl: './image-input.component.html',
+  styleUrls: ['./image-input.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    MatIconModule,
+    FilesDropDirective,
+    MatProgressSpinnerModule,
+    TranslateModule,
+  ],
+})
+export class ImageInputComponent {
+  @Input() maxSizeMB: number
+  @Input() previewUrl?: string
+  @Input() altText?: string
+  @Input() uploadProgress?: number
+  @Input() uploadError?: boolean
+  @Output() fileChange: EventEmitter<File> = new EventEmitter()
+  @Output() urlChange: EventEmitter<string> = new EventEmitter()
+  @Output() uploadCancel: EventEmitter<void> = new EventEmitter()
+  @Output() delete: EventEmitter<void> = new EventEmitter()
+  @Output() altTextChange: EventEmitter<string> = new EventEmitter()
+
+  dragFilesOver = false
+  showUrlInput = false
+  downloadError = false
+  showAltTextInput = false
+
+  urlInputValue?: string
+  lastUploadType?: 'file' | 'url'
+  lastUploadContent?: string | File
+
+  constructor(private http: HttpClient, private cd: ChangeDetectorRef) {}
+
+  getPrimaryText() {
+    if (this.uploadError) {
+      return marker('input.image.uploadErrorLabel')
+    }
+    if (this.uploadProgress) {
+      return marker('input.image.uploadProgressLabel')
+    }
+    return marker('input.image.selectFileLabel')
+  }
+
+  getSecondaryText() {
+    if (this.uploadError) {
+      return marker('input.image.uploadErrorRetry')
+    }
+    if (this.uploadProgress) {
+      return marker('input.image.uploadProgressCancel')
+    }
+    return marker('input.image.dropFileLabel')
+  }
+
+  handleDragFilesOver(dragFilesOver: boolean) {
+    if (!this.showUrlInput) {
+      this.dragFilesOver = dragFilesOver
+      this.cd.markForCheck()
+    }
+  }
+
+  handleDropFiles(files: File[]) {
+    if (!this.showUrlInput) {
+      const validFiles = this.filterTypeImage(files)
+      if (validFiles.length > 0) {
+        this.resizeAndEmit(validFiles[0])
+      }
+    }
+  }
+
+  handleFileInput(event: Event) {
+    const inputFiles = Array.from((event.target as HTMLInputElement).files)
+    const validFiles = this.filterTypeImage(inputFiles)
+    if (validFiles.length > 0) {
+      this.resizeAndEmit(validFiles[0])
+    }
+  }
+
+  displayUrlInput() {
+    this.uploadCancel.emit()
+    this.showUrlInput = true
+  }
+
+  handleUrlChange(event: Event) {
+    this.downloadError = false
+    this.urlInputValue = (event.target as HTMLInputElement).value
+  }
+
+  async downloadUrl() {
+    const name = this.urlInputValue.split('/').pop()
+
+    try {
+      const response = await firstValueFrom(
+        this.http.head(this.urlInputValue, { observe: 'response' })
+      )
+      if (
+        response.headers.get('content-type')?.startsWith('image/') &&
+        parseInt(response.headers.get('content-length')) <
+          megabytesToBytes(this.maxSizeMB)
+      ) {
+        this.http.get(this.urlInputValue, { responseType: 'blob' }).subscribe({
+          next: (blob) => {
+            this.cd.markForCheck()
+            const file = new File([blob], name)
+            this.fileChange.emit(file)
+          },
+          error: () => {
+            this.downloadError = true
+            this.cd.markForCheck()
+            this.urlChange.emit(this.urlInputValue)
+          },
+        })
+      }
+    } catch {
+      this.downloadError = true
+      this.cd.markForCheck()
+      return
+    }
+  }
+
+  handleSecondaryTextClick() {
+    if (this.uploadError) {
+      this.handleRetry()
+    } else if (this.uploadProgress) {
+      this.handleCancel()
+    }
+  }
+
+  handleCancel() {
+    this.uploadCancel.emit()
+  }
+
+  handleRetry() {
+    switch (this.lastUploadType) {
+      case 'file':
+        this.fileChange.emit(this.lastUploadContent as File)
+        break
+      case 'url':
+        this.urlChange.emit(this.lastUploadContent as string)
+        break
+    }
+  }
+
+  handleDelete() {
+    this.delete.emit()
+  }
+
+  toggleAltTextInput() {
+    this.showAltTextInput = !this.showAltTextInput
+  }
+
+  handleAltTextChange(event: Event) {
+    const input = event.target as HTMLInputElement
+    this.altTextChange.emit(input.value)
+  }
+
+  private filterTypeImage(files: File[]) {
+    return files.filter((file) => {
+      return file.type.startsWith('image/')
+    })
+  }
+
+  private resizeAndEmit(imageToResize: File) {
+    const maxSizeBytes = megabytesToBytes(this.maxSizeMB)
+    downgradeImage(imageToResize, maxSizeBytes).then((resizedImage) => {
+      const fileToEmit = new File([resizedImage], imageToResize.name)
+      this.fileChange.emit(fileToEmit)
+    })
+  }
+}

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

@@ -2,11 +2,12 @@
   <textarea
     #input
     name="textArea"
+    [disabled]="disabled"
     [placeholder]="placeholder"
     [value]="value"
     (change)="handleChange($event)"
     (input)="handleChange($event)"
-    class="w-full pt-2 pl-2 resize-none border border-gray-800 rounded italic leading-tight focus:outline-none focus:bg-background focus:border-primary"
+    [class]="classList"
     [attr.required]="required || null"
   ></textarea>
 </div>