geonetwork-ui 2.7.0-dev.fa54bd3a5 → 2.7.0-dev.fb5b118d5

package/src/libs/feature/search/src/lib/state/reducer.ts

@@ -8,6 +8,7 @@ import {
   SortByField,
 } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { DEFAULT_PAGE_SIZE, FIELDS_SUMMARY } from '../constants'
+import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export const SEARCH_FEATURE_KEY = 'searchState'
@@ -55,7 +56,9 @@ export const initSearch = (): SearchStateSearch => {
     },
     params: {
       filters: {},
-      pageSize: DEFAULT_PAGE_SIZE,
+      pageSize: getOptionalSearchConfig()?.LIMIT
+        ? getOptionalSearchConfig().LIMIT
+        : DEFAULT_PAGE_SIZE,
       currentPage: 0,
       favoritesOnly: false,
       useSpatialFilter: true,

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core'
 import { Organization } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { ThumbnailComponent } from '../../../../../../libs/ui/elements/src'
-import { NgIcon, provideIcons } from '@ng-icons/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { tablerFolderOpen } from '@ng-icons/tabler-icons'
 import { TranslateDirective } from '@ngx-translate/core'
 
@@ -21,6 +21,9 @@ import { TranslateDirective } from '@ngx-translate/core'
     provideIcons({
       tablerFolderOpen,
     }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
   standalone: true,
 })

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -14,7 +14,11 @@ import {
 } from '@angular/core'
 import { MatSort, MatSortModule } from '@angular/material/sort'
 import { MatTableModule } from '@angular/material/table'
-import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
 import { DataTableDataSource } from './data-table.data.source'
 import { BaseReader, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import {
@@ -53,6 +57,7 @@ export interface TableItemModel {
     PopupAlertComponent,
     LetDirective,
     TranslatePipe,
+    TranslateDirective,
   ],
   providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }],
   selector: 'gn-ui-data-table',

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

@@ -67,7 +67,10 @@
         [ngClass]="{
           '!bg-primary': currentlyActive,
         }"
-        >{{ link.accessServiceProtocol }}</span
+        translate
+        >record.metadata.api.accessServiceProtocol.{{
+          link.accessServiceProtocol
+        }}</span
       >
       <span
         *ngIf="link.accessServiceProtocol === 'GPFDL'"

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

@@ -13,7 +13,7 @@ import { CommonModule } from '@angular/common'
 import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
-import { NgIcon, provideIcons } from '@ng-icons/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { iconoirSettings } from '@ng-icons/iconoir'
 
 type CardSize = 'L' | 'M' | 'S' | 'XS'
@@ -36,6 +36,9 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
     provideIcons({
       iconoirSettings,
     }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class ApiCardComponent implements OnInit, OnChanges {

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

@@ -8,7 +8,7 @@ import {
 import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { CommonModule } from '@angular/common'
-import { NgIcon, provideIcons } from '@ng-icons/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { iconoirDownload } from '@ng-icons/iconoir'
 
 type CardSize = 'L' | 'M' | 'S' | 'XS'
@@ -24,6 +24,9 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
     provideIcons({
       iconoirDownload,
     }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class DownloadItemComponent {

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -13,8 +13,7 @@
       <span class="px-3">({{ linksCount }})</span>
     </div>
     <gn-ui-previous-next-buttons
-      class="md:block hidden"
-      *ngIf="_list?.pagesCount > 1"
+      *ngIf="(isMobile$ | async) === false && _list?.pagesCount > 1"
       [listComponent]="_list"
     ></gn-ui-previous-next-buttons>
   </div>
@@ -40,7 +39,7 @@
 
 <ng-container>
   <gn-ui-block-list
-    class="md:block hidden"
+    *ngIf="(isMobile$ | async) === false"
     #blockList
     (listChanges)="updateList($event)"
     containerClass="gap-4 pt-5 pb-7"
@@ -57,12 +56,14 @@
   </gn-ui-block-list>
 </ng-container>
 
-<div class="mb-5 md:hidden block" *ngFor="let link of filteredLinks">
-  <gn-ui-download-item
-    size="M"
-    [link]="link"
-    [color]="getLinkColor(link)"
-    [format]="getLinkFormat(link)"
-    [isFromApi]="isFromApi(link)"
-  ></gn-ui-download-item>
+<div class="mb-5" *ngFor="let link of filteredLinks">
+  <ng-container *ngIf="(isMobile$ | async) === true">
+    <gn-ui-download-item
+      size="M"
+      [link]="link"
+      [color]="getLinkColor(link)"
+      [format]="getLinkFormat(link)"
+      [isFromApi]="isFromApi(link)"
+    ></gn-ui-download-item>
+  </ng-container>
 </div>

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -6,7 +6,11 @@ import {
 } from '@angular/core'
 import { TranslateDirective, TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
+import {
+  getBadgeColor,
+  getFileFormat,
+  getIsMobile,
+} from '../../../../../../libs/util/shared/src'
 import { DatasetDownloadDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
@@ -50,6 +54,8 @@ export class DownloadsListComponent {
     return this.filteredLinks?.length || 0
   }
 
+  isMobile$ = getIsMobile()
+
   activeFilterFormats: FilterFormat[] = ['all']
 
   updateList($event: BlockListComponent) {

package/src/libs/ui/elements/src/lib/geo-data-badge/geo-data-badge.component.html

@@ -7,7 +7,10 @@
     class="shrink-0 text-[0.75em]"
     name="matLocationSearchingOutline"
   ></ng-icon>
-  <span class="ml-1 hidden sm:inline-block shrink-0" *ngIf="showLabel" translate
+  <span
+    class="ml-1 inline-block shrink-0"
+    *ngIf="(isMobile$ | async) === false && showLabel"
+    translate
     >record.metadata.isGeographical</span
   >
 </div>

package/src/libs/ui/elements/src/lib/geo-data-badge/geo-data-badge.component.ts

@@ -3,8 +3,12 @@ import { matLocationSearchingOutline } from '@ng-icons/material-icons/outline'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { CommonModule } from '@angular/common'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
-import { NgIcon, provideIcons } from '@ng-icons/core'
-import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/shared/src'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import {
+  getIsMobile,
+  LinkClassifierService,
+  LinkUsage,
+} from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-geo-data-badge',
@@ -17,6 +21,9 @@ import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/sh
     provideIcons({
       matLocationSearchingOutline,
     }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class GeoDataBadgeComponent {
@@ -24,6 +31,8 @@ export class GeoDataBadgeComponent {
   @Input() styling = 'default'
   @Input() record: CatalogRecord
 
+  isMobile$ = getIsMobile()
+
   isGeodata() {
     const links =
       'onlineResources' in this.record ? this.record.onlineResources : []

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

@@ -3,7 +3,7 @@ import * as basicLightbox from 'basiclightbox'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
-import { NgIcon, provideIcons } from '@ng-icons/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
 import { CommonModule } from '@angular/common'
 
@@ -19,7 +19,12 @@ import { CommonModule } from '@angular/common'
     ButtonComponent,
     NgIcon,
   ],
-  viewProviders: [provideIcons({ matZoomOutMap })],
+  viewProviders: [
+    provideIcons({ matZoomOutMap }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
 })
 export class ImageOverlayPreviewComponent {
   @Input() imageUrl: string

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

@@ -68,6 +68,7 @@
               [smaller]="true"
               [metadata]="record"
               [metadataQualityDisplay]="metadataQualityDisplay"
+              [popoverDisplay]="true"
             ></gn-ui-metadata-quality>
           </div>
           <div

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

@@ -21,7 +21,11 @@ import { KindBadgeComponent } from '../kind-badge/kind-badge.component'
 import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
 import { MetadataQualityComponent } from '../metadata-quality/metadata-quality.component'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
-import { removeWhitespace, stripHtml } from '../../../../../../libs/util/shared/src'
+import {
+  removeWhitespace,
+  stripHtml,
+  type ValidatorMapperKeys,
+} from '../../../../../../libs/util/shared/src'
 
 type CardSize = 'L' | 'M' | 'S' | 'XS'
 

package/src/libs/ui/elements/src/lib/kind-badge/kind-badge.component.ts

@@ -5,7 +5,11 @@ import {
   Input,
   TemplateRef,
 } from '@angular/core'
-import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
 import {
   iconoirDatabase,
   iconoirAppleWallet,
@@ -37,6 +41,9 @@ enum KindConfig {
       iconoirCode,
       iconoirAppWindow,
     }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,

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

@@ -10,6 +10,7 @@
     class="flex-grow"
   ></gn-ui-progress-bar>
   <gn-ui-popover
+    *ngIf="popoverDisplay"
     [content]="popoverItems"
     theme="light-border"
     [class]="smaller ? 'ml-2' : 'ml-2 mt-1'"

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

@@ -14,15 +14,16 @@ import {
   PopoverComponent,
   ProgressBarComponent,
 } from '../../../../../../libs/ui/widgets/src'
+import {
+  getQualityValidators,
+  getAllKeysValidator,
+  type ValidatorMapperKeys,
+} from '../../../../../../libs/util/shared/src'
 import { CommonModule } from '@angular/common'
 import { TranslateDirective } from '@ngx-translate/core'
 import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { matInfoOutline } from '@ng-icons/material-icons/outline'
 
-type QualityChecks = {
-  [key: string]: (metadata: Partial<CatalogRecord>) => boolean
-}
-
 @Component({
   selector: 'gn-ui-metadata-quality',
   templateUrl: './metadata-quality.component.html',
@@ -48,77 +49,39 @@ type QualityChecks = {
   ],
 })
 export class MetadataQualityComponent implements OnChanges {
-  @Input() metadata: Partial<CatalogRecord>
+  @Input() metadata: CatalogRecord
   @Input() smaller = false
   @Input() metadataQualityDisplay: boolean
+  @Input() popoverDisplay = true
+  @Input() propsToValidate?: ValidatorMapperKeys[]
+  @Input() forceComputeScore = false // Instead of returning es' quality score
 
   items: MetadataQualityItem[] = []
 
   get qualityScore() {
-    const qualityScore = this.metadata?.extras?.qualityScore
+    const qualityScore = !this.forceComputeScore
+      ? this.metadata?.extras?.qualityScore
+      : this.computedQualityScore
+
     return typeof qualityScore === 'number'
       ? qualityScore
-      : this.calculatedQualityScore
+      : this.computedQualityScore
   }
 
-  get calculatedQualityScore(): number {
+  get computedQualityScore(): number {
     return Math.round(
       (this.items.filter(({ value }) => value).length * 100) / this.items.length
     )
   }
 
-  private add(name: string, value: boolean) {
-    if (this.metadataQualityDisplay?.[name] !== false) {
-      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() {
-    this.items = []
-
-    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))
-        }
-      )
+    if (!this.propsToValidate) {
+      this.propsToValidate = getAllKeysValidator()
     }
+
+    this.items = getQualityValidators(this.metadata, this.propsToValidate).map(
+      ({ name, validator }) => ({ name, value: validator() })
+    )
   }
 
   ngOnChanges(changes: SimpleChanges): void {

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

@@ -6,16 +6,16 @@ import { matCheck, matWarningAmber } from '@ng-icons/material-icons/baseline'
 
 marker('record.metadata.quality.title.success')
 marker('record.metadata.quality.title.failed')
-marker('record.metadata.quality.description.success')
-marker('record.metadata.quality.description.failed')
-marker('record.metadata.quality.topic.success')
-marker('record.metadata.quality.topic.failed')
+marker('record.metadata.quality.abstract.success')
+marker('record.metadata.quality.abstract.failed')
+marker('record.metadata.quality.topics.success')
+marker('record.metadata.quality.topics.failed')
 marker('record.metadata.quality.keywords.success')
 marker('record.metadata.quality.keywords.failed')
 marker('record.metadata.quality.legalConstraints.success')
 marker('record.metadata.quality.legalConstraints.failed')
-marker('record.metadata.quality.contact.success')
-marker('record.metadata.quality.contact.failed')
+marker('record.metadata.quality.contacts.success')
+marker('record.metadata.quality.contacts.failed')
 marker('record.metadata.quality.updateFrequency.success')
 marker('record.metadata.quality.updateFrequency.failed')
 marker('record.metadata.quality.organisation.success')

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

@@ -7,7 +7,11 @@ import {
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
-import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
 import { matCheckCircleOutline } from '@ng-icons/material-icons/baseline'
 import {
   matErrorOutlineOutline,
@@ -28,6 +32,9 @@ import {
       matInfoOutline,
       matCloseOutline,
     }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
   templateUrl: './notification.component.html',
   styleUrls: ['./notification.component.css'],

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

@@ -136,12 +136,6 @@ export class ServiceCapabilitiesComponent implements OnInit {
   }
 
   selectLayer(layer: WfsFeatureTypeFull | WmsLayerFull | WmtsLayer) {
-    if (layer === this.selectedLayer) {
-      this.selectedLayer = null
-      this.layerInformation = []
-      return
-    }
-
     this.selectedLayer = layer
     const filteredInfo = []
     Object.keys(layer).map((key) => {

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.html

@@ -1,5 +1,8 @@
 <div
   class="flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300"
+  *ngIf="
+    (isMobile$ | async) === false || featureCatalog?.featureTypes?.length > 1
+  "
 >
   <div
     class="relative shrink-0"
@@ -17,7 +20,10 @@
       name="iconoirSearch"
     ></ng-icon>
   </div>
-  <div class="text-sm px-1 ml-auto hidden sm:inline">
+  <div
+    *ngIf="(isMobile$ | async) === false"
+    class="text-sm px-1 ml-auto inline"
+  >
     <ng-container *ngIf="featureCatalog?.featureTypes?.length > 1">
       <span
         class="text-sm font-medium text-gray-900"

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

@@ -6,7 +6,7 @@ import { DatasetFeatureCatalog } from '../../../../../../libs/common/domain/src/
 import { FormsModule } from '@angular/forms'
 import { of } from 'rxjs'
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'
-import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { createFuzzyFilter, getIsMobile } from '../../../../../../libs/util/shared/src'
 import { iconoirSearch } from '@ng-icons/iconoir'
 
 @Component({
@@ -39,6 +39,8 @@ export class SearchFeatureCatalogComponent {
     return this._featureCatalog
   }
 
+  isMobile$ = getIsMobile()
+
   @Output() filteredFeatureCatalogChange =
     new EventEmitter<DatasetFeatureCatalog>()
   filteredFeatureCatalog: DatasetFeatureCatalog

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

@@ -10,9 +10,10 @@
     }"
   >
     <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>
-    <span *ngIf="displayLabel" class="mx-2 text-[16px] content-center" translate
-      >favorite.starToggle.label</span
-    >
+    <span *ngIf="displayLabel" class="mx-2 text-[16px] content-center">{{
+      (toggled ? 'favorite.starToggle.remove' : 'favorite.starToggle.add')
+        | translate
+    }}</span>
   </gn-ui-button>
   <svg
     #starOverlay

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

@@ -8,11 +8,11 @@ import {
   ViewChild,
 } from '@angular/core'
 import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
-import { NgIcon, provideIcons } from '@ng-icons/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
 import { matStar, matStarBorder } from '@ng-icons/material-icons/baseline'
 import { ButtonComponent } from '../button/button.component'
-import { TranslateDirective } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-star-toggle',
@@ -20,8 +20,13 @@ import { TranslateDirective } from '@ngx-translate/core'
   styleUrls: ['./star-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, NgIcon, ButtonComponent, TranslateDirective],
-  viewProviders: [provideIcons({ matStar, matStarBorder })],
+  imports: [CommonModule, NgIcon, ButtonComponent, TranslatePipe],
+  viewProviders: [
+    provideIcons({ matStar, matStarBorder }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
 })
 export class StarToggleComponent {
   @Input() toggled!: boolean

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

@@ -1,10 +1,8 @@
-export { FacetsModule as UiFacetsModule } from './lib/facets/facets.module'
 export * from './lib/facets/facets.model'
 export * from './lib/facets/fixtures'
 export * from './lib/facets/facet-block/facet-block.component'
 export * from './lib/facets/facet-list/facet-list.component'
 export * from './lib/facets/facet-item/facet-item.component'
-export * from './lib/ui-search.module'
 export * from './lib/results-list/results-layout.config'
 export * from './lib/results-list/results-list.component'
 export * from './lib/record-preview/record-preview.component'

package/src/libs/ui/search/src/lib/facets/facet-block/facet-block.component.ts

@@ -20,12 +20,24 @@ import {
   ModelBlock,
   ModelItem,
 } from '../facets.model'
+import { FacetItemComponent } from '../facet-item/facet-item.component'
+import { CommonModule } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-facet-block',
   templateUrl: './facet-block.component.html',
   styleUrls: ['./facet-block.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FacetItemComponent,
+    CommonModule,
+    FormsModule,
+    TranslateModule,
+    TranslatePipe,
+  ],
 })
 export class FacetBlockComponent
   implements OnInit, AfterViewInit, OnDestroy, OnChanges
@@ -125,14 +137,3 @@ export class FacetBlockComponent
     }
   }
 }
-
-@Component({ selector: 'gn-ui-facet-block', template: '' })
-export class FacetBlockStubComponent implements Partial<FacetBlockComponent> {
-  @Input() title: string
-  @Input() model: ModelBlock
-  @Input() selectedPaths: string[][]
-
-  @Output() filterChange = new EventEmitter<string>()
-  @Output() itemSelected = new EventEmitter<string[]>()
-  @Output() itemUnselected = new EventEmitter<string[]>()
-}

package/src/libs/ui/search/src/lib/facets/facet-item/facet-item.component.ts

@@ -1,9 +1,14 @@
+import { CommonModule } from '@angular/common'
 import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-facet-item',
   templateUrl: './facet-item.component.html',
   styleUrls: ['./facet-item.component.css'],
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslateModule, TranslatePipe],
 })
 export class FacetItemComponent {
   @Input() label: string
@@ -27,14 +32,3 @@ export class FacetItemComponent {
     this.onInvertedChange(this.inverted)
   }
 }
-
-@Component({ selector: 'gn-ui-facet-item', template: '' })
-export class FacetItemStubComponent implements Partial<FacetItemComponent> {
-  @Input() label: string
-  @Input() count: number
-  @Input() selected: boolean
-  @Input() inverted: boolean
-
-  @Output() selectedChange = new EventEmitter<boolean>()
-  @Output() invertedChange = new EventEmitter<boolean>()
-}