geonetwork-ui 2.6.0-dev.3a78a5eaa → 2.6.0-dev.3e7617888

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

@@ -0,0 +1,183 @@
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule, 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'
+import { iconoirSearch } from '@ng-icons/iconoir'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { matInfoOutline } from '@ng-icons/material-icons/outline'
+import {
+  PopoverComponent,
+  SpinningLoaderComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import {
+  WfsFeatureTypeFull,
+  WmsLayerFull,
+  WmtsLayer,
+} from '@camptocamp/ogc-client'
+
+marker(`service.metadata.search`)
+marker(`service.metadata.capabilities.title`)
+marker(`service.metadata.capabilities.abstract`)
+marker(`service.metadata.capabilities.name`)
+marker(`service.metadata.capabilities.defaultCrs`)
+marker(`service.metadata.capabilities.availableCrs`)
+marker(`service.metadata.capabilities.otherCrs`)
+marker(`service.metadata.capabilities.objectCount`)
+marker(`service.metadata.capabilities.geometryName`)
+marker(`service.metadata.capabilities.geometryType`)
+marker(`service.metadata.capabilities.keywords`)
+marker(`service.metadata.capabilities.outputFormats`)
+marker(`service.metadata.capabilities.resourceLinks`)
+marker(`service.metadata.capabilities.attribution`)
+
+@Component({
+  selector: 'gn-ui-service-capabilities',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    ButtonComponent,
+    TextInputComponent,
+    NgIcon,
+    PopoverComponent,
+    SpinningLoaderComponent,
+  ],
+  viewProviders: [
+    provideIcons({
+      iconoirSearch,
+      matInfoOutline,
+    }),
+  ],
+  templateUrl: './service-capabilities.component.html',
+  styleUrl: './service-capabilities.component.css',
+})
+export class ServiceCapabilitiesComponent implements OnInit {
+  @Input() apiLinks = []
+  availableLayers = []
+  filteredLayers = []
+  selectedLayer = null
+  layerInformation = []
+  searchQuery = ''
+  loading = false
+  searchActive
+
+  capabilitiesKeys = [
+    'title',
+    'abstract',
+    'name',
+    'defaultCrs',
+    'availableCrs',
+    'otherCrs',
+    'objectCount',
+    'geometryName',
+    'geometryType',
+    'keywords',
+    'outputFormats',
+    'resourceLinks',
+    'attribution',
+  ]
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit() {
+    this.loadLayers()
+  }
+
+  onSearchChange(event: Event) {
+    const input = event.target as HTMLInputElement
+    this.searchQuery = input.value
+    if (!input.value) {
+      this.searchActive = false
+      this.filteredLayers = this.availableLayers
+    }
+  }
+
+  onSearchEnter(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.searchActive = true
+      this.searchLayers()
+    }
+  }
+
+  async loadLayers() {
+    if (
+      this.apiLinks.length > 0 &&
+      this.apiLinks[0].accessServiceProtocol !== 'ogcFeatures'
+    ) {
+      this.loading = true
+      this.availableLayers = await getLayers(
+        this.apiLinks[0].url.href,
+        this.apiLinks[0].accessServiceProtocol
+      )
+      this.loading = false
+      this.cdr.detectChanges()
+      this.filteredLayers = this.availableLayers
+    } else {
+      this.availableLayers = []
+    }
+  }
+
+  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) => {
+      if (this.capabilitiesKeys.includes(key)) {
+        const displayName = this.translateService.instant(
+          `service.metadata.capabilities.${key}`
+        )
+        if (key in layer && layer[key]?.length) {
+          filteredInfo.push({ displayName, value: layer[key] })
+        }
+      }
+    })
+
+    this.layerInformation = filteredInfo
+  }
+
+  isList(value: string | string[]) {
+    return Array.isArray(value)
+  }
+
+  getExtraInputClass() {
+    if (this.searchActive) {
+      return 'h-14 border rounded-lg border-primary text-primary focus:border-primary hover:border-primary'
+    }
+    return 'h-14 border rounded-lg'
+  }
+
+  searchLayers() {
+    this.searchActive = true
+    this.filteredLayers = this.availableLayers.filter((layer) => {
+      const query = this.searchQuery.toLowerCase()
+      if (layer.title) {
+        return (
+          layer.title.toLowerCase().includes(query) ||
+          layer.abstract?.toLowerCase().includes(query)
+        )
+      } else {
+        return layer.name.toLowerCase().includes(query)
+      }
+    })
+    if (!this.filteredLayers.includes(this.selectedLayer)) {
+      this.selectedLayer = null
+      this.layerInformation = []
+    }
+  }
+
+  getExtraClass(layerItem) {
+    return layerItem.title === this.selectedLayer?.title
+      ? `h-8 rounded-lg bg-primary-darker text-white hover:text-primary-darker hover:bg-white`
+      : `h-8 rounded-lg`
+  }
+}

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

@@ -16,10 +16,13 @@ import { TranslateModule } from '@ngx-translate/core'
 import { AvatarComponent } from './avatar/avatar.component'
 import { ImageInputComponent } from './image-input/image-input.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
+import { KindBadgeComponent } from './kind-badge/kind-badge.component'
 import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
 import { ApplicationBannerComponent } from './application-banner/application-banner.component'
+import { InternalLinkCardComponent } from './internal-link-card/internal-link-card.component'
+import { ServiceCapabilitiesComponent } from './service-capabilities/service-capabilities.component'
 
 @NgModule({
   imports: [
@@ -42,6 +45,9 @@ import { ApplicationBannerComponent } from './application-banner/application-ban
     TextInputComponent,
     ImageInputComponent,
     ApplicationBannerComponent,
+    InternalLinkCardComponent,
+    ServiceCapabilitiesComponent,
+    KindBadgeComponent,
   ],
   providers: [
     provideNgIconsConfig({
@@ -56,6 +62,9 @@ import { ApplicationBannerComponent } from './application-banner/application-ban
     MarkdownParserComponent,
     ImageInputComponent,
     ApplicationBannerComponent,
+    InternalLinkCardComponent,
+    ServiceCapabilitiesComponent,
+    KindBadgeComponent,
   ],
 })
 export class UiElementsModule {}

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

@@ -15,7 +15,7 @@ export * from './lib/dropdown-selector/dropdown-selector.model'
 export * from './lib/editable-label/editable-label.directive'
 export * from './lib/file-input/file-input.component'
 export * from './lib/files-drop/files-drop.directive'
-export * from './lib/navigation-button/navigation-button.component'
+export * from './lib/inline-filter/inline-filter.component'
 export * from './lib/search-input/search-input.component'
 export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/switch-toggle/switch-toggle.component'

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

@@ -59,7 +59,7 @@
     #overlayContainer
   >
     <div
-      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
+      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
     >
       <button
         type="button"

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.component.html

@@ -0,0 +1,23 @@
+<ul class="flex flex-wrap list-none gap-2">
+  <li *ngFor="let choice of choices">
+    <label
+      class=""
+      [ngClass]="{
+        selected: isSelected(choice),
+      }"
+    >
+      <input
+        class="hidden"
+        type="checkbox"
+        #checkBox
+        [checked]="isSelected(choice)"
+        (change)="select(choice, checkBox.checked)"
+        [attr.data-cy]="'inlineFilter-' + choice.value"
+      />
+      <ng-container
+        *ngTemplateOutlet="itemTemplate; context: { $implicit: choice }"
+      >
+      </ng-container>
+    </label>
+  </li>
+</ul>

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.component.ts

@@ -0,0 +1,44 @@
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import { Choice } from './inline-filter.model'
+
+@Component({
+  selector: 'gn-ui-inline-filter',
+  templateUrl: './inline-filter.component.html',
+})
+export class InlineFilterComponent {
+  @Input() choices: Choice[]
+  @Input() selected: unknown[] = []
+
+  @Output() selectValues = new EventEmitter<unknown[]>()
+
+  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>
+
+  isSelected(choice: Choice) {
+    return (
+      this.selected.indexOf(choice.value) > -1 ||
+      (this.selected.length === 0 && choice.value === 'all')
+    )
+  }
+
+  select(choice: Choice, selected: boolean) {
+    if (choice.value === 'all' && selected) {
+      this.selected = [choice.value]
+    } else {
+      this.selected = selected
+        ? [...this.selected.filter((v) => v !== choice.value), choice.value]
+        : this.selected.filter((v) => v !== choice.value)
+
+      // If any value selected, unselect all
+      this.selected = this.selected.filter((v) => v !== 'all')
+    }
+
+    this.selectValues.emit(this.selected)
+  }
+}

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.model.ts

@@ -0,0 +1,5 @@
+export interface Choice {
+  value: unknown
+  label: string
+  icon?: string
+}

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

@@ -1,17 +1,17 @@
 <div class="inline-block relative align-middle" style="line-height: 0.7em">
-  <button
-    type="button"
+  <gn-ui-button
+    [type]="'outline'"
     class="-m-[8px] p-[8px]"
-    (click)="toggle($event)"
+    (buttonClick)="toggle($event)"
     [ngClass]="{
       enabled: toggled,
-      'disabled opacity-45': !toggled,
+      disabled: !toggled,
       'transition hover:scale-125 will-change-transform': !disabled,
       'cursor-default': disabled,
     }"
   >
     <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>
-  </button>
+  </gn-ui-button>
   <svg
     #starOverlay
     class="star-toggle-overlay"

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

@@ -11,6 +11,7 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
 import { matStar, matStarBorder } from '@ng-icons/material-icons/baseline'
+import { ButtonComponent } from '../button/button.component'
 
 @Component({
   selector: 'gn-ui-star-toggle',
@@ -18,7 +19,7 @@ import { matStar, matStarBorder } from '@ng-icons/material-icons/baseline'
   styleUrls: ['./star-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, NgIcon],
+  imports: [CommonModule, NgIcon, ButtonComponent],
   viewProviders: [provideIcons({ matStar, matStarBorder })],
 })
 export class StarToggleComponent {

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

@@ -33,6 +33,7 @@ import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-a
 import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
 import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
 import { EditableLabelDirective } from './editable-label/editable-label.directive'
+import { InlineFilterComponent } from './inline-filter/inline-filter.component'
 import { TextAreaComponent } from './text-area/text-area.component'
 import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
 
@@ -42,6 +43,7 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
     CheckboxComponent,
+    InlineFilterComponent,
   ],
   imports: [
     CommonModule,
@@ -90,6 +92,7 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
     CheckboxComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
+    InlineFilterComponent,
     BadgeComponent,
   ],
 })

package/src/libs/ui/layout/src/lib/anchor-link/anchor-link.directive.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewChecked,
   ChangeDetectorRef,
   Directive,
   HostBinding,
@@ -11,20 +12,34 @@ import {
 @Directive({
   selector: '[gnUiAnchorLink]',
 })
-export class AnchorLinkDirective implements OnInit, OnDestroy {
+export class AnchorLinkDirective
+  implements OnInit, AfterViewChecked, OnDestroy
+{
   @Input('gnUiAnchorLink') targetId: string
   @Input('gnUiAnchorLinkDisabledClass') disabledClass: string
   @Input('gnUiAnchorLinkEnabledClass') enabledClass: string
+  @Input('gnUiAnchorLinkInViewClass') inViewClass: string
+  @Input('gnUiAnchorLinkOutOfViewClass') outOfViewClass: string
 
   @HostBinding('class')
   get elementClass(): string {
-    return this.disabled ? this.disabledClass : this.enabledClass
+    if (this.disabled) {
+      return this.disabledClass
+    }
+    if (this.inView) {
+      return `${this.inViewClass} ${this.enabledClass}`
+    } else {
+      return `${this.outOfViewClass} ${this.enabledClass}`
+    }
   }
 
   disabled = false
   observer = new MutationObserver(() => {
     this.refreshDisabledState()
   })
+  inView = false
+  intersectionObserver: IntersectionObserver
+  initialized = false
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
@@ -36,8 +51,37 @@ export class AnchorLinkDirective implements OnInit, OnDestroy {
     this.refreshDisabledState()
   }
 
+  ngAfterViewChecked() {
+    if (!this.initialized && !this.disabled) {
+      const target = document.getElementById(this.targetId)
+      if (target) {
+        this.initializeIntersectionObserver(target)
+        this.initialized = true
+      }
+    }
+  }
+
+  initializeIntersectionObserver(target: HTMLElement) {
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          this.inView = entry.isIntersecting
+          this.changeDetector.detectChanges()
+        })
+      },
+      {
+        root: null,
+        rootMargin: '-30% 0% -60% 0%',
+      }
+    )
+    this.intersectionObserver.observe(target)
+  }
+
   ngOnDestroy() {
     this.observer.disconnect()
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect()
+    }
   }
 
   refreshDisabledState() {

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -1,7 +1,3 @@
-:host .carousel-container ::ng-deep > * {
-  flex-shrink: 0;
-}
-
 :host {
   position: relative;
   display: block;

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.html

@@ -31,11 +31,7 @@
     *ngFor="let item of items"
     (click)="handleRowClick(item)"
     data-cy="table-row"
-    [title]="
-      !item.extras?.edit && !isDraftPage
-        ? ('editor.record.lock.reason' | translate)
-        : ''
-    "
+    [title]="getItemTitle(item) | translate"
   >
     <div
       class="relative h-0"
@@ -52,9 +48,9 @@
         class="table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate border-b border-gray-200"
         [ngClass]="{
           'text-purple-light cursor-default':
-            !item.extras?.edit && !isDraftPage,
+            (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',
           'group-hover:text-main group-hover:bg-gray-50':
-            item.extras?.edit || isDraftPage,
+            (item.extras?.edit || isDraftPage) && item.kind === 'dataset',
         }"
       >
         <ng-container

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.ts

@@ -12,7 +12,11 @@ import { CommonModule } from '@angular/common'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
 import { iconoirNavArrowDown, iconoirNavArrowUp } from '@ng-icons/iconoir'
 import { TranslateModule } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
+marker('editor.record.lock.reason')
+marker('editor.record.lock.format')
 @Component({
   selector: 'gn-ui-interactive-table',
   templateUrl: './interactive-table.component.html',
@@ -44,6 +48,15 @@ export class InteractiveTableComponent {
     }
   }
 
+  getItemTitle(item: CatalogRecord) {
+    if (!item.extras?.edit && !this.isDraftPage && item.kind === 'dataset') {
+      return 'editor.record.lock.reason'
+    } else if (item.kind !== 'dataset') {
+      return 'editor.record.lock.format'
+    }
+    return ''
+  }
+
   handleRowClick(item: unknown) {
     this.itemClick.emit(item)
   }

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

@@ -3,3 +3,4 @@ export * from './lib/components/map-container/map-settings.token'
 export * from './lib/components/feature-detail/feature-detail.component'
 export * from './lib/components/map-legend/map-legend.component'
 export * from './lib/map-utils'
+export * from './lib/components/spatial-extent/spatial-extent.component'

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.ts

@@ -28,6 +28,8 @@ import {
   MapContextLayer,
   MapContextLayerXyz,
   MapContextView,
+  SourceLoadErrorEvent,
+  SourceLoadErrorType,
 } from '@geospatial-sdk/core'
 import {
   applyContextDiffToMap,
@@ -119,6 +121,18 @@ export class MapContainerComponent implements AfterViewInit, OnChanges {
     }
     return this._mapClick
   }
+  _sourceLoadError: EventEmitter<SourceLoadErrorEvent>
+  @Output() get sourceLoadError() {
+    if (!this._sourceLoadError) {
+      this.openlayersMap.then((olMap) => {
+        listen(olMap, SourceLoadErrorType, (error: SourceLoadErrorEvent) =>
+          this._sourceLoadError.emit(error)
+        )
+      })
+      this._sourceLoadError = new EventEmitter<SourceLoadErrorEvent>()
+    }
+    return this._sourceLoadError
+  }
 
   @ViewChild('map') container: ElementRef
   displayMessage$: Observable<boolean>

package/src/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts

@@ -33,6 +33,9 @@ export class MapLegendComponent implements OnChanges {
         if (this.legendHTML) {
           this.legendStatusChange.emit(true)
         }
+      } else {
+        this.legendHTML = false
+        this.legendStatusChange.emit(false)
       }
     }
   }

package/src/libs/ui/map/src/lib/components/spatial-extent/spatial-extent.component.html

@@ -0,0 +1,4 @@
+<gn-ui-map-container
+  class="h-full w-full"
+  [context]="mapContext$ | async"
+></gn-ui-map-container>

package/src/libs/{feature/editor/src/lib/components/record-form/form-field/form-field-map-container/form-field-map-container.component.ts → ui/map/src/lib/components/spatial-extent/spatial-extent.component.ts}

@@ -1,27 +1,26 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { Geometry } from 'geojson'
 import GeoJSON, { GeoJSONFeatureCollection } from 'ol/format/GeoJSON'
-import { DatasetSpatialExtent } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { Polygon } from 'ol/geom'
 import {
   createViewFromLayer,
   MapContext,
   MapContextLayer,
 } from '@geospatial-sdk/core'
-import { MapContainerComponent } from '../../../../../../../../../libs/ui/map/src'
+import { MapContainerComponent } from '../map-container/map-container.component'
 import { BehaviorSubject, Observable } from 'rxjs'
 import { switchMap } from 'rxjs/operators'
+import { DatasetSpatialExtent } from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
-  selector: 'gn-ui-form-field-map-container',
+  selector: 'gn-ui-spatial-extent',
   standalone: true,
   imports: [CommonModule, MapContainerComponent],
-  templateUrl: './form-field-map-container.component.html',
-  styleUrls: ['./form-field-map-container.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './spatial-extent.component.html',
+  styleUrl: './spatial-extent.component.css',
 })
-export class FormFieldMapContainerComponent {
+export class SpatialExtentComponent {
   @Input() set spatialExtents(value: DatasetSpatialExtent[]) {
     this.spatialExtents$.next(value)
   }

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

@@ -16,5 +16,6 @@ export * from './lib/record-preview-text/record-preview-text.component'
 export * from './lib/record-preview-title/record-preview-title.component'
 export * from './lib/record-metric/record-metric.component'
 export * from './lib/results-list-item/results-list-item.component'
+export * from './lib/results-hits-search-kind/results-hits-search-kind.component'
 export * from './lib/results-hits-number/results-hits-number.component'
 export * from './lib/results-table/results-table.component'

package/src/libs/ui/search/src/lib/results-hits-number/results-hits-number.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="!loading" class="w-full">
-  <span translate [translateParams]="{ hits: hits }"
+  <span data-cy="resultsHitsFound" translate [translateParams]="{ hits: hits }"
     >results.records.hits.found</span
   >
   <p

package/src/libs/ui/search/src/lib/results-hits-search-kind/results-hits-search-kind.component.html

@@ -0,0 +1,24 @@
+<gn-ui-inline-filter
+  [choices]="availableChoices"
+  [selected]="selected"
+  (selectValues)="onSelectedValues($event)"
+>
+  <ng-template let-choice>
+    <gn-ui-kind-badge
+      [kind]="choice.value"
+      [contentTemplate]="customTemplate"
+      class="gn-ui-btn-outline rounded-md py-2 px-2 border-gray-400 cursor-pointer focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors bg-transparent hover:text-primary-darker focus:text-primary-darker active:text-primary-black"
+      [ngClass]="{
+        '!bg-primary-lightest hover:bg-primary-lightest':
+          isSelectedChoice(choice.value) || isAllChoice(choice.value),
+      }"
+    >
+      <ng-template #customTemplate>
+        {{ 'search.filters.recordKind.' + choice.value | translate
+        }}<span class="ml-1" *ngIf="isSelectedChoice(choice.value)"
+          >({{ choice.count }})</span
+        >
+      </ng-template>
+    </gn-ui-kind-badge>
+  </ng-template>
+</gn-ui-inline-filter>