geonetwork-ui 2.11.0-dev.fb3fea50c → 2.11.0-dev.fb48cfeee

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts

@@ -12,13 +12,13 @@ import {
 import { MatTooltipModule } from '@angular/material/tooltip'
 import {
   AssociatedRecord,
-  CatalogRecordKeys,
   Constraint,
   DatasetTemporalExtent,
   GraphicOverview,
   Individual,
   Keyword,
   OnlineResource,
+  RecordFlag,
   RecordKind,
   UpdateFrequency,
 } from '../../../../../../../../libs/common/domain/src/lib/model/record'
@@ -36,9 +36,10 @@ import {
   FormFieldTemporalExtentsComponent,
 } from '.'
 import {
-  FieldModelSpecifier,
   FormFieldComponentName,
   FormFieldConfig,
+  FormFieldModel,
+  FormFieldModelSpecifier,
 } from '../../../models'
 import { FormFieldAssociatedRecordsComponent } from './form-field-associated-records/form-field-associated-records.component'
 import { FormFieldContactsForResourceComponent } from './form-field-contacts-for-resource/form-field-contacts-for-resource.component'
@@ -57,6 +58,7 @@ import { FormFieldConstraintsComponent } from './form-field-constraints/form-fie
 import { TextFieldModule } from '@angular/cdk/text-field'
 import { FormFieldSpatialToggleComponent } from './form-field-spatial-toggle/form-field-spatial-toggle.component'
 import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.component'
+import { FormFieldRecordFlagComponent } from './form-field-record-flags/form-field-record-flag-component'
 
 @Component({
   selector: 'gn-ui-form-field',
@@ -90,6 +92,7 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
     FormFieldTopicsComponent,
     TextFieldModule,
     NgIconComponent,
+    FormFieldRecordFlagComponent,
   ],
   providers: [provideIcons({ matEditOutline, matHelpOutline })],
   hostDirectives: [FieldFocusDirective],
@@ -97,8 +100,8 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
 export class FormFieldComponent {
   @Input() uniqueIdentifier: string
   @Input() recordKind: RecordKind
-  @Input() model: CatalogRecordKeys
-  @Input() modelSpecifier: FieldModelSpecifier
+  @Input() model: FormFieldModel
+  @Input() modelSpecifier: FormFieldModelSpecifier
   @Input() componentName: FormFieldComponentName
 
   @Input() config: FormFieldConfig
@@ -126,6 +129,7 @@ export class FormFieldComponent {
       this.model === 'legalConstraints' ||
       this.model === 'securityConstraints' ||
       this.model === 'otherConstraints' ||
+      this.model === 'flags' ||
       this.componentName === 'form-field-constraints-shortcuts'
     )
   }
@@ -172,6 +176,9 @@ export class FormFieldComponent {
     }>
     return identifiers?.[0]?.code || ''
   }
+  get recordFlag() {
+    return this.modelSpecifier?.replace(/^flags:/, '') as RecordFlag
+  }
 
   handleResourceIdentifierChange(code: string) {
     const identifiers = this.value as Array<{

package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.ts

@@ -11,7 +11,7 @@ import {
   viewChildren,
 } from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
-import { EditorFieldValue } from '../../models'
+import { EditorFieldValue, FormFieldModel } from '../../models'
 import { FieldFocusDirective, FormFieldComponent } from './form-field'
 import { TranslateDirective } from '@ngx-translate/core'
 import {
@@ -24,6 +24,7 @@ import { switchMap } from 'rxjs/operators'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { evaluate, isExpression } from '../../expressions'
 import { NotificationsService } from '../../../../../../../libs/feature/notifications/src'
+import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -41,6 +42,7 @@ import { NotificationsService } from '../../../../../../../libs/feature/notifica
 export class RecordFormComponent implements OnInit, OnDestroy {
   facade = inject(EditorFacade)
   notifications = inject(NotificationsService)
+  platform = inject(PlatformServiceInterface)
   subscription = new Subscription()
 
   recordUniqueIdentifier$ = this.facade.record$.pipe(
@@ -90,8 +92,8 @@ export class RecordFormComponent implements OnInit, OnDestroy {
     this.subscription.unsubscribe()
   }
 
-  handleFieldValueChange(model: CatalogRecordKeys, newValue: EditorFieldValue) {
-    if (!model) {
+  handleFieldValueChange(model: FormFieldModel, newValue: EditorFieldValue) {
+    if (!model || model === 'flags') {
       return
     }
     this.facade.updateRecordField(model, newValue)
@@ -122,6 +124,8 @@ export class RecordFormComponent implements OnInit, OnDestroy {
   }
 
   private recordSignal = toSignal(this.facade.record$, { requireSync: true })
+  private userSignal = toSignal(this.platform.getMe())
+  private isAdminSignal = toSignal(this.platform.isAdministrator())
   private expressionCache = new Map<string, Signal<EditorFieldValue>>()
 
   // only compiles the expression into an evaluator the first time;
@@ -149,7 +153,17 @@ ${errors.map((err) => `> ${err}`).join('\n')}`)
     }
     this.expressionCache.set(
       expression,
-      computed(() => evaluator({ globals: { record: this.recordSignal() } }))
+      computed(() =>
+        evaluator({
+          globals: {
+            record: this.recordSignal(),
+            user: {
+              ...this.userSignal(),
+              isAdmin: this.isAdminSignal(),
+            },
+          },
+        })
+      )
     )
     return this.expressionCache.get(expression)
   }

package/src/libs/feature/editor/src/lib/expressions.ts

@@ -17,10 +17,14 @@ const TOKEN_OPERATOR_LOGICAL = ['==', '!=']
 const TOKEN_STRING_LITERAL = ["'", '"']
 const TOKEN_GROUP_START = '('
 const TOKEN_GROUP_END = ')'
+const TOKEN_OPERATOR_BOOLEAN = ['&&', '||']
+const TOKEN_OPERATOR_NOT = '!'
 
 // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence
 const OPERATORS_BY_PRECEDENCE: string[][] = [
   [TOKEN_OPERATOR_TERNARY_FIRST, TOKEN_OPERATOR_TERNARY_SECOND],
+  TOKEN_OPERATOR_BOOLEAN,
+  [TOKEN_OPERATOR_NOT],
   TOKEN_OPERATOR_LOGICAL,
 ]
 const ALL_OPERATORS = OPERATORS_BY_PRECEDENCE.flat()
@@ -161,6 +165,18 @@ function evaluateInternal(
       continue
     }
 
+    // BOOLEAN LITERAL
+    const isBooleanLiteral =
+      readNext(expression, pos, 4) === 'true' ||
+      readNext(expression, pos, 5) === 'false'
+    if (isBooleanLiteral) {
+      const literal = readNext(expression, pos, 4) === 'true' ? 'true' : 'false'
+      pos += literal.length
+      const booleanLiteral = literal === 'true'
+      currentEvaluator = () => booleanLiteral
+      continue
+    }
+
     // SYMBOL (NAME)
     const isSymbol = /[a-zA-Z]/.test(readNext(expression, pos))
     if (isSymbol) {
@@ -291,6 +307,57 @@ function evaluateInternal(
       continue
     }
 
+    // BOOLEAN OPERATORS
+    const isBooleanOperator = TOKEN_OPERATOR_BOOLEAN.some(
+      (token) => readNext(expression, pos, token.length) === token
+    )
+    if (isBooleanOperator) {
+      const matchingOperator = TOKEN_OPERATOR_BOOLEAN.find(
+        (token) => readNext(expression, pos, token.length) === token
+      )
+      const isAnd = matchingOperator === '&&'
+      pos += matchingOperator.length
+      const leftEvaluator = currentEvaluator
+      const rightExpression = readUntilNextOperator(
+        expression,
+        pos,
+        matchingOperator
+      )
+      pos += rightExpression.length
+      const rightEvaluator = evaluateInternal(
+        rightExpression,
+        currentContext
+      ).evaluator
+
+      currentEvaluator = (context) => {
+        return isAnd
+          ? Boolean(leftEvaluator(context) && rightEvaluator(context))
+          : Boolean(leftEvaluator(context) || rightEvaluator(context))
+      }
+      continue
+    }
+
+    // PREFIX OPERATORS
+    const isNotOperator = readNext(expression, pos) === TOKEN_OPERATOR_NOT
+    if (isNotOperator) {
+      pos++
+      const operandExpression = readUntilNextOperator(
+        expression,
+        pos,
+        TOKEN_OPERATOR_NOT
+      )
+      pos += operandExpression.length
+      const operandEvaluator = evaluateInternal(
+        operandExpression,
+        currentContext
+      ).evaluator
+
+      currentEvaluator = (context) => {
+        return !operandEvaluator(context)
+      }
+      continue
+    }
+
     // TERNARY OPERATOR
     const isTernary = readNext(expression, pos) === TOKEN_OPERATOR_TERNARY_FIRST
     if (isTernary) {

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -37,6 +37,19 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
                 labelKey: marker('editor.record.form.field.title'),
               },
             },
+            {
+              model: 'flags',
+              modelSpecifier: 'flags:IS_REFERENCE_DATASET',
+              formFieldConfig: {
+                labelKey: marker(
+                  'editor.record.form.field.flags.IS_REFERENCE_DATASET'
+                ),
+                hintKey: marker(
+                  'editor.record.form.field.hint.flags.IS_REFERENCE_DATASET'
+                ),
+              },
+              hidden: '${record.kind != "dataset" || !user.isAdmin}',
+            },
             {
               model: 'abstract',
               formFieldConfig: {

package/src/libs/feature/editor/src/lib/models/editor-config.model.ts

@@ -1,4 +1,7 @@
-import { CatalogRecordKeys } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CatalogRecordKeys,
+  RecordFlag,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 
 // Expressions should be enclosed in `${}` to be recognized as such
 // eg. ${dateNow()}
@@ -15,6 +18,8 @@ export interface FormFieldConfig {
   invalidHintKey?: string
 }
 
+export type FormFieldModel = CatalogRecordKeys | 'flags'
+
 // Specifiers let us use specific components
 // This is used for instance to target only certain online resources in a field
 type OnlineLinkResourceSpecifier = `onlineResourceType:link`
@@ -25,11 +30,12 @@ type OnlineSingleLinkResourceSpecifier = `onlineResourceType:singleLink`
 // When set on the `contacts` field, contacts are rendered as editable detail
 // fields (ContactDetailsFormComponent) instead of cards (ContactCardComponent)
 type EditableContactDetailsSpecifier = `contact:editableDetails`
-export type FieldModelSpecifier =
+export type FormFieldModelSpecifier =
   | OnlineLinkResourceSpecifier
   | DatasetDistributionsSpecifier
   | OnlineSingleLinkResourceSpecifier
   | EditableContactDetailsSpecifier
+  | `flags:${RecordFlag}`
 
 export type FormFieldComponentName =
   | 'form-field-constraints-shortcuts'
@@ -37,8 +43,8 @@ export type FormFieldComponentName =
 
 export interface EditorFieldIdentification {
   // name of the target field in the record; will not change the record directly if not defined
-  model?: CatalogRecordKeys
-  modelSpecifier?: FieldModelSpecifier
+  model?: FormFieldModel
+  modelSpecifier?: FormFieldModelSpecifier
 
   // if no model is given, a component can be shown instead
   componentName?: FormFieldComponentName

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

@@ -6,8 +6,6 @@ export * from './lib/feature-map.module'
 export * from './lib/map-state-container/map-state-container.component'
 export * from './lib/constant'
 export * from './lib/utils'
-export * from './lib/style'
 export * from './lib/layers-panel/layers-panel.component'
 export * from './lib/add-layer-from-catalog/add-layer-from-catalog.component'
 export * from './lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
-export * from './lib/geocoding/geocoding.component'

package/src/libs/feature/map/src/lib/feature-map.module.ts

@@ -2,18 +2,11 @@ import { NgModule } from '@angular/core'
 import { StoreModule } from '@ngrx/store'
 import * as fromMap from './+state/map.reducer'
 import { MapFacade } from './+state/map.facade'
-import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
 
 @NgModule({
   imports: [
     StoreModule.forFeature(fromMap.MAP_FEATURE_KEY, fromMap.mapReducer),
   ],
-  providers: [
-    MapFacade,
-    {
-      provide: GEOCODING_PROVIDER,
-      useValue: ['geonames', { maxRows: 5 }] as GeocodingProvider,
-    },
-  ],
+  providers: [MapFacade],
 })
 export class FeatureMapModule {}

package/src/libs/feature/notify-reuse/src/lib/notify-reuse-form/notify-reuse-form.component.ts

@@ -33,7 +33,6 @@ import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain
 import { NOT_KNOWN_CONSTRAINT } from '../../../../../../libs/feature/editor/src'
 import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
 import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
-import { getOptionalEditorConfig } from '../../../../../../libs/util/app-config/src'
 import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { iconoirAppWindow, iconoirPlusCircle } from '@ng-icons/iconoir'
 import { matCloseOutline } from '@ng-icons/material-icons/outline'
@@ -48,6 +47,10 @@ marker('notify.reuse.form.error.title')
 marker('notify.reuse.form.error.body')
 
 export const REUSE_FORM_URL = new InjectionToken<string>('reuseFormUrl')
+// language assigned to the created reuse record; falls back to the current UI language
+export const NEW_RECORD_DEFAULT_LANGUAGE = new InjectionToken<string>(
+  'newRecordDefaultLanguage'
+)
 
 @Component({
   selector: 'gn-ui-notify-reuse-form',
@@ -86,6 +89,9 @@ export class NotifyReuseFormComponent implements OnDestroy {
   private readonly notificationsService = inject(NotificationsService)
   private readonly platformServiceInterface = inject(PlatformServiceInterface)
   reuseFormUrl = inject(REUSE_FORM_URL, { optional: true })
+  private newRecordDefaultLanguage = inject(NEW_RECORD_DEFAULT_LANGUAGE, {
+    optional: true,
+  })
   private locationStrategy = inject(LocationStrategy)
 
   me = toSignal(this.platformServiceInterface.getMe())
@@ -158,8 +164,7 @@ export class NotifyReuseFormComponent implements OnDestroy {
   submit() {
     if (!this.isFormValid()) return
     const defaultLang =
-      getOptionalEditorConfig()?.NEW_RECORD_DEFAULT_LANGUAGE ??
-      this.translate.currentLang
+      this.newRecordDefaultLanguage ?? this.translate.currentLang
     const onlineResource: OnlineLinkResource = {
       type: 'link',
       url: new URL(this.url()),

package/src/libs/feature/record/src/lib/state/mdview.effects.ts

@@ -40,7 +40,9 @@ export class MdViewEffects {
     this.actions$.pipe(
       ofType(MdViewActions.loadFullMetadataSuccess),
       filter(({ full }) => full !== undefined),
-      switchMap(({ full }) => this.recordsRepository.getFeatureCatalog(full)),
+      switchMap(({ full }) =>
+        this.recordsRepository.queryLinkedFeatureCatalog(full)
+      ),
       map((featureCatalog) =>
         MdViewActions.loadFeatureCatalogSuccess({
           datasetCatalog: featureCatalog,

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -162,7 +162,7 @@ export class MdViewFacade {
               link.accessServiceProtocol === 'ogcFeatures'
             ) {
               return from(
-                this.dataService.getItemsFromOgcApi(link.url.href, 1)
+                this.dataService.getItemsFromOgcApi(link.url.href, link.name, 1)
               ).pipe(
                 map((collectionRecords: OgcApiRecord[]) => {
                   return collectionRecords &&

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

@@ -1,4 +1,6 @@
 export * from './lib/feature-search.module'
+export * from './lib/geocoding/geocoding.service'
+export * from './lib/location-search/location-search.component'
 export * from './lib/filter-geometry.token'
 export * from './lib/record-url.token'
 export * from './lib/state/actions'

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.html

@@ -13,7 +13,13 @@
     (bboxChange)="onBboxChange($event)"
     (errorChange)="onSpatialExtentError($event)"
     [attr.data-cy-field]="fieldName"
-  ></gn-ui-spatial-extent-dropdown>
+  >
+    <gn-ui-location-search
+      [placeholder]="'search.filters.spatialExtent.searchLocation' | translate"
+      (bboxSelected)="onLocationSelected($event)"
+      data-cy="locationSearch"
+    ></gn-ui-location-search>
+  </gn-ui-spatial-extent-dropdown>
 } @else {
   <gn-ui-dropdown-multiselect
     class="w-full"

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts

@@ -1,8 +1,10 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  InjectionToken,
   Input,
   OnInit,
+  ViewChild,
   inject,
 } from '@angular/core'
 import {
@@ -26,8 +28,20 @@ import { DateRange } from '../../../../../../libs/api/repository/src'
 import { CommonModule } from '@angular/common'
 import { BoundingBox } from '../../../../../../libs/util/shared/src'
 import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
-import { TranslateService } from '@ngx-translate/core'
-import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  LocationBbox,
+  LocationSearchComponent,
+} from '../location-search/location-search.component'
+
+marker('search.filters.spatialExtent.searchLocation')
+
+// in MB, null means no limit
+export const SPATIAL_EXTENT_MAX_FILE_SIZE = new InjectionToken<number | null>(
+  'spatialExtentMaxFileSize',
+  { factory: () => null }
+)
 
 @Component({
   selector: 'gn-ui-filter-dropdown',
@@ -40,6 +54,8 @@ import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/
     DateRangeDropdownComponent,
     DropdownMultiselectComponent,
     SpatialExtentDropdownComponent,
+    LocationSearchComponent,
+    TranslatePipe,
   ],
 })
 export class FilterDropdownComponent implements OnInit {
@@ -52,8 +68,10 @@ export class FilterDropdownComponent implements OnInit {
   @Input() fieldName: string
   @Input() title: string
 
-  spatialExtentMaxFileSize =
-    getOptionalSearchConfig()?.SPATIAL_EXTENT_MAX_FILE_SIZE
+  @ViewChild(SpatialExtentDropdownComponent)
+  spatialExtentDropdown: SpatialExtentDropdownComponent
+
+  spatialExtentMaxFileSize = inject(SPATIAL_EXTENT_MAX_FILE_SIZE)
 
   fieldType: FieldType
   choices$: Observable<Choice[]>
@@ -96,6 +114,10 @@ export class FilterDropdownComponent implements OnInit {
     this.clearSpatialExtentErrorNotification()
   }
 
+  onLocationSelected({ bbox, label }: LocationBbox) {
+    this.spatialExtentDropdown.setLocationBbox(bbox, label)
+  }
+
   onSpatialExtentError(error: SpatialExtentDropdownError) {
     this.clearSpatialExtentErrorNotification()
     this.spatialExtentErrorNotificationId =

package/src/libs/feature/search/src/lib/geocoding/geocoding.service.ts

@@ -0,0 +1,105 @@
+import { Injectable, InjectionToken, inject } from '@angular/core'
+import {
+  queryGeoadmin,
+  GeoadminOptions,
+  GeocodingResult,
+  queryGeonames,
+  GeonamesOptions,
+  GeoplateformeOptions,
+  queryGeoplateforme,
+} from '@geospatial-sdk/geocoding'
+import { from, Observable, throwError } from 'rxjs'
+import { catchError } from 'rxjs/operators'
+
+type GeoadminGeocodingProvider = ['geoadmin', GeoadminOptions]
+type GeonamesGeocodingProvider = ['geonames', GeonamesOptions]
+type GeoplateformeGeocodingProvider = ['geoplateforme', GeoplateformeOptions]
+export type GeocodingProvider =
+  | GeoadminGeocodingProvider
+  | GeonamesGeocodingProvider
+  | GeoplateformeGeocodingProvider
+
+export const DEFAULT_GEOCODING_PROVIDER = [
+  'geonames',
+  { maxRows: 5 },
+] as GeocodingProvider
+
+export const GEOCODING_PROVIDER = new InjectionToken<GeocodingProvider>(
+  'geocoding-provider',
+  {
+    providedIn: 'root',
+    factory: (): GeocodingProvider => DEFAULT_GEOCODING_PROVIDER,
+  }
+)
+
+// these options are arrays in the providers, but they can be configured
+// with a single value for simplicity
+const GEOCODING_PROVIDER_ARRAY_OPTIONS: {
+  geoadmin: (keyof GeoadminOptions)[]
+  geoplateforme: (keyof GeoplateformeOptions)[]
+} = {
+  geoadmin: ['origins', 'features'],
+  geoplateforme: [
+    'index',
+    'category',
+    'type',
+    'postCode',
+    'cityCode',
+    'depCode',
+  ],
+}
+
+function wrapArrayOptions<T extends object>(options: T, keys: (keyof T)[]): T {
+  const wrapped = { ...options }
+  for (const key of keys) {
+    if (typeof wrapped[key] === 'string') {
+      wrapped[key] = [wrapped[key]] as T[keyof T]
+    }
+  }
+  return wrapped
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GeocodingService {
+  private provider = inject<GeocodingProvider>(GEOCODING_PROVIDER)
+
+  query(text: string): Observable<GeocodingResult[]> {
+    let queryObservable: Observable<GeocodingResult[]>
+    switch (this.provider[0]) {
+      case 'geoadmin':
+        queryObservable = from(
+          queryGeoadmin(
+            text,
+            wrapArrayOptions(
+              this.provider[1] as GeoadminOptions,
+              GEOCODING_PROVIDER_ARRAY_OPTIONS.geoadmin
+            )
+          )
+        )
+        break
+      case 'geonames':
+        queryObservable = from(
+          queryGeonames(text, this.provider[1] as GeonamesOptions)
+        )
+        break
+      case 'geoplateforme':
+        queryObservable = from(
+          queryGeoplateforme(text, {
+            ...wrapArrayOptions(
+              this.provider[1] as GeoplateformeOptions,
+              GEOCODING_PROVIDER_ARRAY_OPTIONS.geoplateforme
+            ),
+            returnTrueGeometry: true,
+          })
+        )
+        break
+      default:
+        return throwError(
+          () => new Error(`Unsupported geocoding provider: ${this.provider[0]}`)
+        )
+    }
+    return queryObservable.pipe(catchError((error) => throwError(error)))
+  }
+}

package/src/libs/feature/search/src/lib/location-search/location-search.component.html

@@ -0,0 +1,18 @@
+<gn-ui-autocomplete
+  [action]="searchAction"
+  [displayWithFn]="displayWithFn"
+  [placeholder]="placeholder"
+  [displayWithTemplate]="defaultItemTpl"
+  [clearOnSelection]="true"
+  (itemSelected)="handleItemSelected($event)"
+>
+</gn-ui-autocomplete>
+
+<ng-template #defaultItemTpl let-result>
+  <div class="py-2">
+    @if (getSecondaryLabel(result)) {
+      <div class="gn-ui-card-detail">{{ getSecondaryLabel(result) }}</div>
+    }
+    <div class="gn-ui-card-title">{{ getDisplayLabel(result) }}</div>
+  </div>
+</ng-template>