geonetwork-ui 2.6.0-dev.c5432f39f → 2.6.0-dev.cfd9cd166

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

@@ -15,7 +15,7 @@ import {
   ExpandablePanelComponent,
   MaxLinesComponent,
 } from '../../../../../../libs/ui/layout/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BadgeComponent,
   CopyTextButtonComponent,
@@ -28,10 +28,7 @@ import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { GnUiLinkifyDirective } from './linkify.directive'
 
 import { CommonModule } from '@angular/common'
-import {
-  MapContainerComponent,
-  SpatialExtentComponent,
-} from '../../../../../../libs/ui/map/src'
+import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
 
 @Component({
   selector: 'gn-ui-metadata-info',
@@ -41,7 +38,8 @@ import {
   standalone: true,
   imports: [
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     MarkdownParserComponent,
     ExpandablePanelComponent,
     BadgeComponent,
@@ -51,7 +49,6 @@ import {
     CopyTextButtonComponent,
     NgIcon,
     GnUiLinkifyDirective,
-    MapContainerComponent,
     SpatialExtentComponent,
   ],
   viewProviders: [

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

@@ -15,10 +15,13 @@ import {
   ProgressBarComponent,
 } from '../../../../../../libs/ui/widgets/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
-import { NgIcon } from '@ng-icons/core'
+import { TranslateDirective } from '@ngx-translate/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { matInfoOutline } from '@ng-icons/material-icons/outline'
-import { provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+
+type QualityChecks = {
+  [key: string]: (metadata: Partial<CatalogRecord>) => boolean
+}
 
 @Component({
   selector: 'gn-ui-metadata-quality',
@@ -31,7 +34,7 @@ import { provideIcons, provideNgIconsConfig } from '@ng-icons/core'
     PopoverComponent,
     ProgressBarComponent,
     MetadataQualityItemComponent,
-    TranslateModule,
+    TranslateDirective,
     NgIcon,
   ],
   providers: [
@@ -69,18 +72,53 @@ export class MetadataQualityComponent implements OnChanges {
       this.items.push({ name, value })
     }
   }
+  hasGetCapabilities(url: string): boolean {
+    return url.toLowerCase().includes('capabilities')
+  }
+
+  private readonly COMMON_CHECKS: QualityChecks = {
+    title: (metadata) => !!metadata?.title,
+    description: (metadata) => !!metadata?.abstract,
+    keywords: (metadata) => (metadata?.keywords?.length ?? 0) > 0,
+    legalConstraints: (metadata) =>
+      (metadata?.legalConstraints?.length ?? 0) > 0,
+    contact: (metadata) => !!metadata?.contacts?.[0]?.email,
+  }
+
+  private readonly SPECIFIC_CHECKS: Record<string, QualityChecks> = {
+    dataset: {
+      updateFrequency: (metadata) => !!metadata?.updateFrequency,
+      topic: (metadata) => (metadata?.topics?.length ?? 0) > 0,
+      organisation: (metadata) => !!metadata?.contacts?.[0]?.organization?.name,
+    },
+    service: {
+      capabilities: (metadata) =>
+        (metadata?.onlineResources ?? []).some((resource) =>
+          this.hasGetCapabilities(resource?.url?.href ?? '')
+        ),
+    },
+    reuse: {
+      topic: (metadata) => (metadata?.topics?.length ?? 0) > 0,
+      organisation: (metadata) => !!metadata?.contacts?.[0]?.organization?.name,
+      source: (metadata) => !!metadata?.extras?.sourcesIdentifiers,
+    },
+  }
 
   initialize() {
-    const contact = this.metadata?.contacts?.[0]
     this.items = []
-    this.add('title', !!this.metadata?.title)
-    this.add('description', !!this.metadata?.abstract)
-    this.add('topic', this.metadata?.topics?.length > 0)
-    this.add('keywords', this.metadata?.keywords?.length > 0)
-    this.add('legalConstraints', this.metadata?.legalConstraints?.length > 0)
-    this.add('organisation', !!contact?.organization)
-    this.add('contact', !!contact?.email)
-    this.add('updateFrequency', !!this.metadata?.updateFrequency)
+
+    Object.entries(this.COMMON_CHECKS).forEach(([name, check]) => {
+      this.add(name, check(this.metadata))
+    })
+
+    const datasetType = this.metadata?.kind
+    if (datasetType && this.SPECIFIC_CHECKS[datasetType]) {
+      Object.entries(this.SPECIFIC_CHECKS[datasetType]).forEach(
+        ([name, check]) => {
+          this.add(name, check(this.metadata))
+        }
+      )
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {

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

@@ -1,7 +1,7 @@
 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 { TranslatePipe } from '@ngx-translate/core'
 import { matCheck, matWarningAmber } from '@ng-icons/material-icons/baseline'
 
 marker('record.metadata.quality.title.success')
@@ -20,6 +20,10 @@ marker('record.metadata.quality.updateFrequency.success')
 marker('record.metadata.quality.updateFrequency.failed')
 marker('record.metadata.quality.organisation.success')
 marker('record.metadata.quality.organisation.failed')
+marker('record.metadata.quality.capabilities.success')
+marker('record.metadata.quality.capabilities.failed')
+marker('record.metadata.quality.source.success')
+marker('record.metadata.quality.source.failed')
 
 export interface MetadataQualityItem {
   name: string
@@ -31,7 +35,7 @@ export interface MetadataQualityItem {
   templateUrl: './metadata-quality-item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [NgIcon, TranslateModule],
+  imports: [NgIcon, TranslatePipe],
   viewProviders: [provideIcons({ matCheck, matWarningAmber })],
 })
 export class MetadataQualityItemComponent implements MetadataQualityItem {

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

@@ -13,7 +13,8 @@ import {
   TextInputComponent,
 } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
+import { MatTooltipModule } from '@angular/material/tooltip'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -32,7 +33,8 @@ const DEFAULT_PARAMS = {
     TextInputComponent,
     DropdownSelectorComponent,
     CopyTextButtonComponent,
-    TranslateModule,
+    TranslateDirective,
+    MatTooltipModule,
   ],
 })
 export class RecordApiFormComponent {

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.html

@@ -1,48 +1,107 @@
-<div class="flex flex-col gap-2 py-5 px-5 h-[562px] overflow-y-auto">
-  <div
-    *ngFor="let featureType of filteredFeatureCatalog?.featureTypes"
-    class="rounded shadow bg-white"
-  >
-    <gn-ui-expandable-panel
-      [collapsed]="filteredFeatureCatalog?.featureTypes?.length !== 1"
-      iconColor="black"
+<div
+  cdkScrollable
+  class="h-[562px] relative overflow-y-auto overflow-hidden"
+  data-cy="feat-catalog-scrollable"
+>
+  <div #scrollContainer class="flex flex-col gap-2 py-5 px-5">
+    <div
+      *ngFor="let featureType of filteredFeatureCatalog?.featureTypes"
+      class="rounded shadow bg-white"
     >
-      <ng-template #titleTemplate>
-        <div class="px-2">
-          <div class="text-lg font-bold">{{ featureType.name }}</div>
-          <div class="text-sm" *ngIf="featureType.definition">
-            {{ featureType.definition }}
-          </div>
-        </div>
-      </ng-template>
-      <div
-        class="grid gap-0"
-        [style.grid-template-columns]="gridTemplateColumns"
-        data-cy="feature-type-content"
+      <gn-ui-expandable-panel
+        #expanel
+        [collapsed]="filteredFeatureCatalog?.featureTypes?.length !== 1"
+        iconColor="black"
       >
+        <ng-template #titleTemplate>
+          <div class="px-2">
+            <div class="text-lg font-bold">{{ featureType.name }}</div>
+            <div class="text-sm" *ngIf="featureType.definition">
+              {{ featureType.definition }}
+            </div>
+          </div>
+        </ng-template>
         <div
-          class="py-1 px-2 text-sm font-bold text-left border-t"
-          [class.border-l]="i > 0"
-          [class.border-gray-300]="i > 0"
-          *ngFor="let col of columns; let i = index"
-          data-test="column-label"
+          *ngIf="expanel && !expanel.collapsed"
+          class="grid gap-0"
+          [style.grid-template-columns]="
+            getGridTemplateColumns(featureType.attributes)
+          "
+          data-cy="feature-type-content"
         >
-          {{ col.label | translate }}
-        </div>
-        <ng-container *ngFor="let row of featureType.attributes">
           <div
-            class="bg-white text-sm font-normal text-left border-t"
+            class="py-1 px-2 text-sm font-bold text-left border-t break-all"
             [class.border-l]="i > 0"
             [class.border-gray-300]="i > 0"
-            *ngFor="let col of columns; let i = index"
+            [ngClass]="col.class || ''"
+            *ngFor="
+              let col of getColumnsDefinition(featureType.attributes);
+              trackBy: trackByColumn;
+              let i = index
+            "
+            data-test="column-label"
           >
-            <gn-ui-truncated-text
-              extraClass="py-3 px-2"
-              [text]="row[col.key]"
-            ></gn-ui-truncated-text>
+            {{ 'feature.catalog.attribute.' + col.key | translate }}
           </div>
-        </ng-container>
-      </div>
-    </gn-ui-expandable-panel>
+          <ng-container *ngIf="expanel && !expanel.collapsed">
+            <ng-container *ngFor="let row of featureType.attributes">
+              <div
+                class="bg-white text-sm font-normal text-left border-t"
+                [class.border-l]="i > 0"
+                [class.border-gray-300]="i > 0"
+                *ngFor="
+                  let col of getColumnsDefinition(featureType.attributes);
+                  trackBy: trackByColumn;
+                  let i = index
+                "
+                data-test="cell-content"
+              >
+                <ng-container
+                  *ngIf="col.key === 'values'; then tplValues; else defaultTpl"
+                ></ng-container>
+
+                <ng-template #defaultTpl>
+                  <gn-ui-truncated-text
+                    [scrollContainer]="scrollContainer"
+                    [cdkScrollContainer]="scrollable"
+                    [text]="row[col.key]"
+                  ></gn-ui-truncated-text>
+                </ng-template>
+
+                <ng-template #tplValues>
+                  <gn-ui-cell-popin
+                    #popinRef
+                    [scrollContainer]="scrollContainer"
+                    [cdkScrollContainer]="scrollable"
+                    *ngIf="row.values?.length > 0"
+                  >
+                    <div cellContent data-cy="values-cell-popin-trigger">
+                      <gn-ui-button
+                        type="light"
+                        extraClass="bg-transparent border-none"
+                        (buttonClick)="popinRef.openOverlay()"
+                      >
+                        <ng-icon name="iconoirList" size="24"></ng-icon>
+                      </gn-ui-button>
+                    </div>
+                    <div
+                      popinContent
+                      class="max-h-60 overflow-y-auto min-w-64 py-4 px-6"
+                      style="scrollbar-width: thin"
+                    >
+                      <ul class="list-disc list-inside mr-4">
+                        <li *ngFor="let v of row.values">
+                          {{ v.label || v.code }}
+                        </li>
+                      </ul>
+                    </div>
+                  </gn-ui-cell-popin>
+                </ng-template>
+              </div>
+            </ng-container>
+          </ng-container>
+        </div>
+      </gn-ui-expandable-panel>
+    </div>
   </div>
 </div>

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.ts

@@ -1,52 +1,83 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, ElementRef, Input, ViewChild } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
-import { DatasetFeatureCatalog } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { TranslatePipe } from '@ngx-translate/core'
 import {
+  DatasetFeatureAttribute,
+  DatasetFeatureCatalog,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  CellPopinComponent,
   ExpandablePanelComponent,
   TruncatedTextComponent,
 } from '../../../../../../../libs/ui/layout/src'
+import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { iconoirList } from '@ng-icons/iconoir'
+
+marker('feature.catalog.attribute.type')
+marker('feature.catalog.attribute.name')
+marker('feature.catalog.attribute.code')
+marker('feature.catalog.attribute.definition')
+marker('feature.catalog.attribute.values')
+
+interface ColumnDefinition {
+  key: string
+  width: string
+  class?: string
+}
 
 @Component({
   selector: 'gn-ui-feature-catalog-list',
   templateUrl: './feature-catalog-list.component.html',
+  styleUrls: [],
   standalone: true,
   imports: [
+    ButtonComponent,
+    CellPopinComponent,
     CommonModule,
-    TranslateModule,
+    TranslatePipe,
     ExpandablePanelComponent,
     TruncatedTextComponent,
+    NgIconComponent,
+    ScrollingModule,
   ],
+  providers: [provideIcons({ iconoirList })],
 })
-export class FeatureCatalogListComponent implements OnInit {
-  @Input() filteredFeatureCatalog: DatasetFeatureCatalog
-
-  columns = [
-    {
-      key: 'type',
-      label: 'feature.catalog.attribute.type',
-      width: '19%',
-    },
-    {
-      key: 'name',
-      label: 'feature.catalog.attribute.name',
-      width: '32%',
-    },
-    {
-      key: 'code',
-      label: 'feature.catalog.attribute.code',
-      width: '24%',
-    },
-    {
-      key: 'title',
-      label: 'feature.catalog.attribute.description',
-      width: '25%',
-    },
+export class FeatureCatalogListComponent {
+  @Input() filteredFeatureCatalog!: DatasetFeatureCatalog
+
+  @ViewChild('scrollContainer') scrollContainer!: ElementRef
+  @ViewChild(CdkScrollable, { static: true }) scrollable!: CdkScrollable
+  @ViewChild('expanel', { read: ExpandablePanelComponent, static: true })
+  panelComponent: ExpandablePanelComponent
+
+  readonly COLUMNS_DEFAULT: ColumnDefinition[] = [
+    { key: 'type', width: '17%' },
+    { key: 'name', width: '32%' },
+    { key: 'code', width: '17%' },
+    { key: 'definition', width: 'minmax(0px, 1fr)' },
   ]
 
-  gridTemplateColumns = ''
+  readonly COLUMN_VALUES: ColumnDefinition = {
+    key: 'values',
+    width: '73px',
+    class: 'text-center',
+  }
+
+  getColumnsDefinition(attrs: DatasetFeatureAttribute[]): ColumnDefinition[] {
+    const hasValues = attrs.some((a) => a.values?.length > 0)
+    return [...this.COLUMNS_DEFAULT, ...(hasValues ? [this.COLUMN_VALUES] : [])]
+  }
+
+  getGridTemplateColumns(attributes: DatasetFeatureAttribute[]) {
+    return this.getColumnsDefinition(attributes)
+      .map((col) => col.width)
+      .join(' ')
+  }
 
-  ngOnInit(): void {
-    this.gridTemplateColumns = this.columns.map((col) => col.width).join(' ')
+  trackByColumn(_i: number, col: { key: string }) {
+    return col.key
   }
 }

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.ts

@@ -1,6 +1,10 @@
 import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
 import { getLayers } from '../../../../../../libs/util/shared/src'
 import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
@@ -38,7 +42,8 @@ marker(`service.metadata.capabilities.attribution`)
   standalone: true,
   imports: [
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     ButtonComponent,
     TextInputComponent,
     NgIcon,

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

@@ -14,7 +14,7 @@ import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/us
 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 { TranslatePipe } 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'
@@ -29,7 +29,7 @@ import { matSendOutline } from '@ng-icons/material-icons/outline'
     CommonModule,
     TimeSincePipe,
     TextAreaComponent,
-    TranslateModule,
+    TranslatePipe,
     ButtonComponent,
     SpinningLoaderComponent,
     NgIcon,

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

@@ -1,10 +1,14 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user/user.model'
+import { AvatarComponent } from '../avatar/avatar.component'
+import { MatTooltipModule } from '@angular/material/tooltip'
 
 @Component({
   selector: 'gn-ui-user-preview',
   templateUrl: './user-preview.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AvatarComponent, MatTooltipModule],
+  standalone: true,
 })
 export class UserPreviewComponent {
   @Input() user: UserModel

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

@@ -21,7 +21,6 @@ export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/switch-toggle/switch-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/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
 export * from './lib/search-feature-catalog/search-feature-catalog.component'

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

@@ -34,7 +34,7 @@ import {
 } from 'rxjs/operators'
 import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
 import { ButtonComponent } from '../button/button.component'
 import {
   NgIconComponent,
@@ -56,7 +56,7 @@ export type AutocompleteItem = unknown
     PopupAlertComponent,
     MatAutocompleteModule,
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
     ReactiveFormsModule,
     ButtonComponent,
     NgIconComponent,

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

@@ -5,12 +5,15 @@ import {
   Input,
   Output,
 } from '@angular/core'
+import { MatCheckboxModule } from '@angular/material/checkbox'
 
 @Component({
   selector: 'gn-ui-checkbox',
   templateUrl: './checkbox.component.html',
   styleUrls: ['./checkbox.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatCheckboxModule],
 })
 export class CheckboxComponent {
   @Input() type: 'primary' | 'secondary' | 'default' = 'default'

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

@@ -1,7 +1,7 @@
 <div class="flex h-full">
   <ngx-dropzone
     class="flex-1"
-    multiple="false"
+    [multiple]="false"
     (change)="selectFile($event)"
     [accept]="accept"
   >

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

@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { NgxDropzoneModule } from 'ngx-dropzone'
+import { CommonModule } from '@angular/common'
 
 export const placeholder = 'dropFile'
 marker('dropFile')
@@ -8,6 +10,8 @@ marker('dropFile')
   selector: 'gn-ui-drag-and-drop-file-input',
   templateUrl: './drag-and-drop-file-input.component.html',
   styleUrls: ['./drag-and-drop-file-input.component.css'],
+  standalone: true,
+  imports: [NgxDropzoneModule, CommonModule],
 })
 export class DragAndDropFileInputComponent {
   @Input() placeholder = placeholder

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

@@ -13,6 +13,7 @@ import {
   CdkConnectedOverlay,
   CdkOverlayOrigin,
   ConnectedPosition,
+  OverlayModule,
   ScrollStrategyOptions,
 } from '@angular/cdk/overlay'
 import { take } from 'rxjs/operators'
@@ -21,12 +22,38 @@ import {
   createFuzzyFilter,
   propagateToDocumentOnly,
 } from '../../../../../../libs/util/shared/src'
+import { ButtonComponent } from '../button/button.component'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { FormsModule } from '@angular/forms'
+import { TranslatePipe } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-dropdown-multiselect',
   templateUrl: './dropdown-multiselect.component.html',
   styleUrls: ['./dropdown-multiselect.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    NgIcon,
+    OverlayModule,
+    FormsModule,
+    TranslatePipe,
+  ],
+  providers: [
+    provideIcons({
+      matClose,
+      matExpandMore,
+      matExpandLess,
+    }),
+  ],
+  standalone: true,
 })
 export class DropdownMultiselectComponent {
   @Input() title: string

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

@@ -19,7 +19,7 @@ import {
 import { firstValueFrom } from 'rxjs'
 import { DropdownChoice } from './dropdown-selector.model'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { ButtonComponent } from '../button/button.component'
 import {
   NgIconComponent,
@@ -40,7 +40,7 @@ const DEFAULT_ROW_NUMBERS = 6
     CommonModule,
     ButtonComponent,
     OverlayModule,
-    TranslateModule,
+    TranslatePipe,
     NgIconComponent,
   ],
   providers: [

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

@@ -8,9 +8,8 @@ import {
   Output,
 } from '@angular/core'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { ButtonComponent } from '../button/button.component'
 import { FilesDropDirective } from '../files-drop/files-drop.directive'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { UrlInputComponent } from '../url-input/url-input.component'
 import {
@@ -28,12 +27,12 @@ import { iconoirCloudUpload, iconoirFramePlusIn } from '@ng-icons/iconoir'
   standalone: true,
   imports: [
     CommonModule,
-    ButtonComponent,
     FilesDropDirective,
     MatProgressSpinnerModule,
-    TranslateModule,
     UrlInputComponent,
     NgIconComponent,
+    TranslatePipe,
+    TranslateDirective,
   ],
   providers: [
     provideIcons({