geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.73bac9979

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.html

@@ -1,22 +1,16 @@
-<div
-  *ngIf="metadataQualityDisplay"
-  class="mb-6 metadata-quality"
-  (mouseenter)="showMenu()"
-  (mouseleave)="hideMenu()"
->
-  <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
-    <gn-ui-progress-bar
-      (focus)="showMenu()"
-      (blur)="hideMenu()"
-      tabindex="0"
-      [value]="qualityScore"
-      type="primary"
-    ></gn-ui-progress-bar>
-  </div>
-  <div
-    class="absolute z-10 bg-white border border-black border-opacity-35 rounded-lg shadow-lg p-5 whitespace-nowrap"
-    [class]="isMenuShown ? 'block' : 'hidden'"
-  >
+<div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
+  <gn-ui-popover [content]="popoverItems" theme="light-border">
+    <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
+      <gn-ui-progress-bar
+        tabindex="0"
+        [value]="qualityScore"
+        type="primary"
+      ></gn-ui-progress-bar>
+    </div>
+  </gn-ui-popover>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
     <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
     <gn-ui-metadata-quality-item
       *ngFor="let e of items"
@@ -24,4 +18,4 @@
       [value]="e.value"
     ></gn-ui-metadata-quality-item>
   </div>
-</div>
+</ng-template>

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts

@@ -5,14 +5,31 @@ import {
   OnChanges,
   SimpleChanges,
 } from '@angular/core'
-import { MetadataQualityItem } from '../metadata-quality-item/metadata-quality-item.component'
+import {
+  MetadataQualityItem,
+  MetadataQualityItemComponent,
+} from '../metadata-quality-item/metadata-quality-item.component'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  PopoverComponent,
+  ProgressBarComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-metadata-quality',
   templateUrl: './metadata-quality.component.html',
   styleUrls: ['./metadata-quality.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    PopoverComponent,
+    ProgressBarComponent,
+    MetadataQualityItemComponent,
+    TranslateModule,
+  ],
 })
 export class MetadataQualityComponent implements OnChanges {
   @Input() metadata: Partial<CatalogRecord>
@@ -21,8 +38,6 @@ export class MetadataQualityComponent implements OnChanges {
 
   items: MetadataQualityItem[] = []
 
-  isMenuShown = false
-
   get qualityScore() {
     const qualityScore = this.metadata?.extras?.qualityScore
     return typeof qualityScore === 'number'
@@ -36,14 +51,6 @@ export class MetadataQualityComponent implements OnChanges {
     )
   }
 
-  showMenu() {
-    this.isMenuShown = true
-  }
-
-  hideMenu() {
-    this.isMenuShown = false
-  }
-
   private add(name: string, value: boolean) {
     if (this.metadataQualityDisplay?.[name] !== false) {
       this.items.push({ name, value })

package/src/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.html

@@ -1,4 +1,4 @@
 <div class="ml-4 flex flex-row">
-  <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
+  <ng-icon [name]="icon" class="min-w-fit"></ng-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>

package/src/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.ts

@@ -1,5 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { TranslateModule } from '@ngx-translate/core'
+import { matCheck, matWarningAmber } from '@ng-icons/material-icons/baseline'
 
 marker('record.metadata.quality.title.success')
 marker('record.metadata.quality.title.failed')
@@ -27,13 +30,16 @@ export interface MetadataQualityItem {
   selector: 'gn-ui-metadata-quality-item',
   templateUrl: './metadata-quality-item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgIcon, TranslateModule],
+  viewProviders: [provideIcons({ matCheck, matWarningAmber })],
 })
 export class MetadataQualityItemComponent implements MetadataQualityItem {
   @Input() name: string
   @Input() value: boolean
 
   get icon() {
-    return this.value ? 'check' : 'warning'
+    return this.value ? 'matCheck' : 'matWarningAmber'
   }
 
   get labelKey() {

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

@@ -8,16 +8,13 @@
       'bg-red-500': type === 'error',
       'bg-yellow-500': type === 'warning',
       'bg-green-500': type === 'success',
-      'bg-blue-500': type === 'info'
+      '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>
+    <ng-icon
+      class="!w-[20px] !h-[16px] text-[24px]"
+      [name]="getIconName(type)"
+    ></ng-icon>
   </div>
   <div
     class="flex flex-col items-start gap-[4px] pt-[3px] grow shrink overflow-hidden"
@@ -25,9 +22,7 @@
     <div class="font-bold text-[16px] text-gray-900">
       {{ title }}
     </div>
-    <div class="text-[14px] text-gray-800">
-      {{ text }}
-    </div>
+    <div class="text-[14px] text-gray-800 whitespace-pre-wrap">{{ text }}</div>
     <a
       href
       *ngIf="closeMessage"
@@ -45,8 +40,9 @@
     [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
-    >
+    <ng-icon
+      class="text-[22px] !w-[21px] !h-[21px]"
+      name="matCloseOutline"
+    ></ng-icon>
   </gn-ui-button>
 </div>

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

@@ -6,13 +6,29 @@ import {
   Output,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { MatIconModule } from '@angular/material/icon'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matCheckCircleOutline } from '@ng-icons/material-icons/baseline'
+import {
+  matErrorOutlineOutline,
+  matWarningAmberOutline,
+  matInfoOutline,
+  matCloseOutline,
+} from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-notification',
   standalone: true,
-  imports: [CommonModule, MatIconModule, ButtonComponent],
+  imports: [CommonModule, ButtonComponent, NgIconComponent],
+  providers: [
+    provideIcons({
+      matCheckCircleOutline,
+      matErrorOutlineOutline,
+      matWarningAmberOutline,
+      matInfoOutline,
+      matCloseOutline,
+    }),
+  ],
   templateUrl: './notification.component.html',
   styleUrls: ['./notification.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -28,4 +44,19 @@ export class NotificationComponent {
     event?.preventDefault()
     this.notificationClose.emit()
   }
+
+  getIconName(type: string): string {
+    switch (type) {
+      case 'success':
+        return 'matCheckCircleOutline'
+      case 'info':
+        return 'matInfoOutline'
+      case 'warning':
+        return 'matWarningAmberOutline'
+      case 'error':
+        return 'matErrorOutlineOutline'
+      default:
+        return ''
+    }
+  }
 }

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

@@ -13,10 +13,10 @@ host ::ng-deep gn-ui-copy-text-button button:hover {
   background-color: var(--color-secondary) !important;
 }
 
-:host ::ng-deep gn-ui-copy-text-button button mat-icon {
+:host ::ng-deep gn-ui-copy-text-button button ng-icon {
   color: white !important;
   opacity: 1 !important;
 }
-:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon {
+:host ::ng-deep gn-ui-copy-text-button button:hover ng-icon {
   color: lightgrey !important;
 }

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

@@ -21,7 +21,7 @@
             class="mr-2 w-20"
             (valueChange)="setLimit($event)"
             [value]="displayLimit$ | async"
-            hint=""
+            placeholder=""
           >
           </gn-ui-text-input>
           <div class="flex items-center">
@@ -47,7 +47,7 @@
             [value]="offset$ | async"
             [disabled]="!supportOffset"
             (valueChange)="supportOffset ? setOffset($event) : null"
-            hint=""
+            placeholder=""
           >
           </gn-ui-text-input>
           <div

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

@@ -1,21 +1,24 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { OgcApiEndpoint, WfsEndpoint } from '@camptocamp/ogc-client'
+import { MimeType, OgcApiEndpoint, WfsEndpoint } from '@camptocamp/ogc-client'
 import {
   DatasetServiceDistribution,
   ServiceProtocol,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { mimeTypeToFormat } from '../../../../../../libs/util/shared/src'
 import { BehaviorSubject, combineLatest, filter, map, switchMap } from 'rxjs'
+import {
+  CopyTextButtonComponent,
+  DropdownChoice,
+  DropdownSelectorComponent,
+  TextInputComponent,
+} from '../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
   LIMIT: '-1',
-  FORMAT: 'json',
-}
-
-interface OutputFormats {
-  itemFormats?: any[]
-  outputFormats?: any[]
+  FORMAT: 'application/json',
 }
 
 @Component({
@@ -23,10 +26,18 @@ interface OutputFormats {
   templateUrl: './record-api-form.component.html',
   styleUrls: ['./record-api-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    TextInputComponent,
+    DropdownSelectorComponent,
+    CopyTextButtonComponent,
+    TranslateModule,
+  ],
 })
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {
-    this.outputFormats = [{ value: 'json', label: 'JSON' }]
+    this.outputFormats = [{ value: 'application/json', label: 'JSON' }]
     this.accessServiceProtocol = value ? value.accessServiceProtocol : undefined
     this.apiFeatureType = value ? value.name : undefined
     if (value) {
@@ -46,9 +57,10 @@ export class RecordApiFormComponent {
   apiFeatureType: string
   supportOffset = true
   accessServiceProtocol: ServiceProtocol | undefined
-  outputFormats = [{ value: 'json', label: 'JSON' }]
+  outputFormats: DropdownChoice[] = [
+    { value: 'application/json', label: 'JSON' },
+  ]
   endpoint: WfsEndpoint | OgcApiEndpoint | undefined
-  firstCollection: string | undefined
 
   apiQueryUrl$ = combineLatest([
     this.offset$,
@@ -89,17 +101,12 @@ export class RecordApiFormComponent {
 
   async parseOutputFormats() {
     if (!this.endpoint) return
-    const apiUrl = this.apiBaseUrl.endsWith('?')
-      ? this.apiBaseUrl.slice(0, -1)
-      : this.apiBaseUrl
-    const outputFormats = await this.getOutputFormats(apiUrl)
-
-    const formatsList = outputFormats.itemFormats
-      ? this.mapFormats(outputFormats.itemFormats)
-      : this.mapFormats(outputFormats.outputFormats || [])
+    const outputFormats = (await this.getOutputFormats()).map(
+      this.mimeTypeToFormatName
+    )
 
     this.outputFormats = this.outputFormats
-      .concat(formatsList.filter(Boolean))
+      .concat(outputFormats.filter(Boolean))
       .filter(
         (format, index, self) =>
           index === self.findIndex((t) => t.value === format.value)
@@ -107,24 +114,21 @@ export class RecordApiFormComponent {
       .sort((a, b) => a.label.localeCompare(b.label))
   }
 
-  mapFormats(formats: any[]) {
-    return formats.map((format) => {
-      const normalizedFormat = mimeTypeToFormat(format)
-      return normalizedFormat
-        ? { label: normalizedFormat.toUpperCase(), value: normalizedFormat }
-        : null
-    })
+  mimeTypeToFormatName(mimeType: MimeType): DropdownChoice | null {
+    const formatName = mimeTypeToFormat(mimeType)
+    return formatName
+      ? { label: formatName.toUpperCase(), value: mimeType }
+      : null
   }
 
-  async getOutputFormats(url: string): Promise<OutputFormats> {
-    if (!this.endpoint) return {}
+  async getOutputFormats(): Promise<MimeType[]> {
+    if (!this.endpoint) return []
     if (this.endpoint instanceof WfsEndpoint) {
       this.supportOffset = this.endpoint.supportsStartIndex()
-      return this.endpoint.getServiceInfo() as OutputFormats
+      return this.endpoint.getServiceInfo().outputFormats
     } else {
-      return (await this.endpoint.getCollectionInfo(
-        this.firstCollection
-      )) as OutputFormats
+      return (await this.endpoint.getCollectionInfo(this.apiFeatureType))
+        .itemFormats
     }
   }
 
@@ -135,7 +139,11 @@ export class RecordApiFormComponent {
       await (this.endpoint as WfsEndpoint).isReady()
     } else {
       this.endpoint = new OgcApiEndpoint(this.apiBaseUrl)
-      this.firstCollection = (await this.endpoint.allCollections)[0].name
+      const collections = await this.endpoint.allCollections
+      // if there's only one collection, use this instead of the name given in the link.
+      if (collections.length === 1) {
+        this.apiFeatureType = collections[0].name
+      }
     }
     this.endpoint$.next(this.endpoint)
   }
@@ -151,16 +159,17 @@ export class RecordApiFormComponent {
       outputFormat: format,
       startIndex: offset ? Number(offset) : undefined,
       maxFeatures: limit !== '-1' ? Number(limit) : undefined,
-      limit: limit !== '-1' ? Number(limit) : limit === '-1' ? -1 : undefined,
+      limit: limit !== '-1' ? Number(limit) : -1,
       offset: offset !== '' ? Number(offset) : undefined,
     }
 
     if (this.endpoint instanceof WfsEndpoint) {
+      delete options.limit
       options.maxFeatures = limit !== '-1' ? Number(limit) : undefined
       return this.endpoint.getFeatureUrl(this.apiFeatureType, options)
     } else {
       return await this.endpoint.getCollectionItemsUrl(
-        this.firstCollection,
+        this.apiFeatureType,
         options
       )
     }

package/src/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html

@@ -17,13 +17,13 @@
     </h4>
     <div>
       <button
-        mat-raised-button
         [matTooltip]="'tooltip.url.open' | translate"
         matTooltipPosition="above"
       >
-        <mat-icon class="material-symbols-outlined align-middle text-secondary"
-          >open_in_new</mat-icon
-        >
+        <ng-icon
+          class="align-middle text-secondary"
+          name="matOpenInNew"
+        ></ng-icon>
       </button>
     </div>
   </div>

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

@@ -1,11 +1,26 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
+import { RouterLink } from '@angular/router'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { TranslateModule } from '@ngx-translate/core'
+import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-related-record-card',
   templateUrl: './related-record-card.component.html',
   styleUrls: ['./related-record-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ThumbnailComponent,
+    RouterLink,
+    MatTooltipModule,
+    NgIcon,
+    TranslateModule,
+  ],
+  standalone: true,
+  viewProviders: [provideIcons({ matOpenInNew })],
 })
 export class RelatedRecordCardComponent {
   private readonly baseClasses: string

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

@@ -1,41 +1,27 @@
 import { NgModule } from '@angular/core'
 import { CommonModule, NgOptimizedImage } from '@angular/common'
 import { RouterModule } from '@angular/router'
-import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { UtilSharedModule } from '../../../../../libs/util/shared/src'
-import { MetadataInfoComponent } from './metadata-info/metadata-info.component'
-import { ContentGhostComponent } from './content-ghost/content-ghost.component'
-import { DownloadItemComponent } from './download-item/download-item.component'
-import { DownloadsListComponent } from './downloads-list/downloads-list.component'
-import { ApiCardComponent } from './api-card/api-card.component'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
+import { PopoverComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
-import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
-import { MetadataContactComponent } from './metadata-contact/metadata-contact.component'
-import { MetadataCatalogComponent } from './metadata-catalog/metadata-catalog.component'
-import { MetadataQualityComponent } from './metadata-quality/metadata-quality.component'
-import { MetadataQualityItemComponent } from './metadata-quality-item/metadata-quality-item.component'
-import { ErrorComponent } from './error/error.component'
-import { PaginationComponent } from './pagination/pagination.component'
 import { ThumbnailComponent } from './thumbnail/thumbnail.component'
-import { BadgeComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import {
+  BadgeComponent,
+  TextInputComponent,
+  UiInputsModule,
+} from '../../../../../libs/ui/inputs/src'
 import { FormsModule } from '@angular/forms'
 import { AvatarComponent } from './avatar/avatar.component'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
-import { GnUiLinkifyDirective } from './metadata-info/linkify.directive'
-import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.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'
+import { provideNgIconsConfig } from '@ng-icons/core'
 
 @NgModule({
   imports: [
     CommonModule,
-    MatIconModule,
     MatTooltipModule,
     UiWidgetsModule,
     UiLayoutModule,
@@ -45,53 +31,25 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     UiInputsModule,
     FormsModule,
     NgOptimizedImage,
+    PopoverComponent,
     MarkdownParserComponent,
     ThumbnailComponent,
     TimeSincePipe,
     BadgeComponent,
+    MaxLinesComponent,
+    TextInputComponent,
   ],
-  declarations: [
-    MetadataInfoComponent,
-    ContentGhostComponent,
-    DownloadItemComponent,
-    DownloadsListComponent,
-    ApiCardComponent,
-    RelatedRecordCardComponent,
-    MetadataContactComponent,
-    MetadataCatalogComponent,
-    MetadataQualityComponent,
-    MetadataQualityItemComponent,
-    ErrorComponent,
-    PaginationComponent,
-    AvatarComponent,
-    UserPreviewComponent,
-    GnUiLinkifyDirective,
-    PaginationButtonsComponent,
-    RecordApiFormComponent,
-    UserFeedbackItemComponent,
-    ImageOverlayPreviewComponent,
+  providers: [
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
+  declarations: [AvatarComponent, UserPreviewComponent],
   exports: [
-    MetadataInfoComponent,
-    ContentGhostComponent,
-    DownloadItemComponent,
-    DownloadsListComponent,
-    ApiCardComponent,
-    RelatedRecordCardComponent,
-    MetadataContactComponent,
-    MetadataCatalogComponent,
-    MetadataQualityComponent,
-    MetadataQualityItemComponent,
-    ErrorComponent,
-    PaginationComponent,
     ThumbnailComponent,
     AvatarComponent,
     UserPreviewComponent,
-    PaginationButtonsComponent,
-    RecordApiFormComponent,
     MarkdownParserComponent,
-    UserFeedbackItemComponent,
-    ImageOverlayPreviewComponent,
   ],
 })
 export class UiElementsModule {}

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

@@ -1,7 +1,7 @@
 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'
+import { formatDistance } from 'date-fns/formatDistance'
+import { de, enUS, es, fr, it, Locale, nl, pt, sk } from 'date-fns/locale'
 
 @Pipe({
   name: 'timeSince',

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

@@ -57,12 +57,8 @@
           "
           extraClass="!p-[0.5em] text-primary-darker border-primary-darker h-9"
         >
-          <mat-icon
-            class="material-symbols-outlined"
-            *ngIf="!isAddUserFeedbackLoading"
-          >
-            send
-          </mat-icon>
+          <ng-icon *ngIf="!isAddUserFeedbackLoading" name="matSendOutline">
+          </ng-icon>
           <ng-container *ngIf="isAddUserFeedbackLoading">
             <div class="flex justify-center w-full">
               <gn-ui-spinning-loader></gn-ui-spinning-loader>

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

@@ -11,12 +11,34 @@ import {
   UserFeedbackViewModel,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user'
+import { TimeSincePipe } from './time-since.pipe'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent, TextAreaComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { SpinningLoaderComponent } from '../../../../../../libs/ui/widgets/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matSendOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-user-feedback-item',
   templateUrl: './user-feedback-item.component.html',
   styleUrls: ['./user-feedback-item.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    TimeSincePipe,
+    TextAreaComponent,
+    TranslateModule,
+    ButtonComponent,
+    SpinningLoaderComponent,
+    NgIcon,
+  ],
+  viewProviders: [
+    provideIcons({
+      matSendOutline,
+    }),
+  ],
 })
 export class UserFeedbackItemComponent implements OnInit {
   @Input() userFeedbackParent: UserFeedbackViewModel

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

@@ -1,8 +1,5 @@
 <figure class="text-center">
-  <div
-    class="w-12 h-12 border border-primary rounded-full capitalize"
-    [matTooltip]="userFullName"
-  >
+  <div class="w-10 h-10 rounded-full capitalize" [matTooltip]="userFullName">
     <gn-ui-avatar
       [avatarUrl]="user.profileIcon"
       [avatarPlaceholder]="avatarPlaceholder"