geonetwork-ui 2.9.0-dev.f3376949a → 2.9.0-dev.fc19cbfed

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

@@ -1,12 +1,13 @@
+export * from './lib/+state/editor.actions'
 export * from './lib/+state/editor.facade'
 export * from './lib/+state/editor.models'
-export * from './lib/+state/editor.selectors'
 export * from './lib/+state/editor.reducer'
-export * from './lib/+state/editor.actions'
-export * from './lib/feature-editor.module'
-export * from './lib/services/editor.service'
+export * from './lib/+state/editor.selectors'
 export * from './lib/components/import-record/import-record.component'
-export * from './lib/components/record-form/record-form.component'
-export * from './lib/components/record-form/form-field'
-export * from './lib/components/multilingual-panel/multilingual-panel.component'
 export * from './lib/components/metadata-quality-panel/metadata-quality-panel.component'
+export * from './lib/components/multilingual-panel/multilingual-panel.component'
+export * from './lib/components/record-form/form-field'
+export * from './lib/components/record-form/record-form.component'
+export * from './lib/feature-editor.module'
+export * from './lib/fields.config'
+export * from './lib/services/editor.service'

package/src/libs/feature/editor/src/lib/+state/editor.actions.ts

@@ -4,7 +4,7 @@ import {
   LanguageCode,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SaveRecordError } from './editor.models'
-import { EditorFieldIdentification } from '../models'
+import { EditorConfig, EditorFieldIdentification } from '../models'
 
 export const openRecord = createAction(
   '[Editor] Open record',
@@ -39,6 +39,11 @@ export const draftSaveSuccess = createAction('[Editor] Draft save success')
 
 export const undoRecordDraft = createAction('[Editor] Undo record draft')
 
+export const setEditorConfiguration = createAction(
+  '[Editor] Set editor configuration',
+  props<{ configuration: EditorConfig }>()
+)
+
 export const setCurrentPage = createAction(
   '[Editor] Set current page',
   props<{ page: number }>()

package/src/libs/feature/editor/src/lib/+state/editor.facade.ts

@@ -8,7 +8,7 @@ import {
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { filter } from 'rxjs'
 import { Actions, ofType } from '@ngrx/effects'
-import { EditorFieldIdentification } from '../models'
+import { EditorConfig, EditorFieldIdentification } from '../models'
 
 @Injectable()
 export class EditorFacade {
@@ -69,6 +69,10 @@ export class EditorFacade {
     )
   }
 
+  setConfiguration(configuration: EditorConfig) {
+    this.store.dispatch(EditorActions.setEditorConfiguration({ configuration }))
+  }
+
   setCurrentPage(page: number) {
     this.store.dispatch(EditorActions.setCurrentPage({ page }))
   }

package/src/libs/feature/editor/src/lib/+state/editor.reducer.ts

@@ -81,6 +81,10 @@ const reducer = createReducer(
     ...state,
     changedSinceSave: true,
   })),
+  on(EditorActions.setEditorConfiguration, (state, { configuration }) => ({
+    ...state,
+    editorConfig: configuration,
+  })),
   on(EditorActions.setCurrentPage, (state, { page }) => ({
     ...state,
     currentPage: page,

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

@@ -31,12 +31,12 @@
           cdkAutosizeMinRows="1"
           data-test="recordTitleInput"
           class="grow font-title text-3xl font-normal overflow-hidden text-black/80"
+          [value]="valueAsString"
           (change)="valueChange.emit($event.target.value)"
           [placeholder]="
             'editor.record.form.field.title.placeholder' | translate
           "
-          >{{ valueAsString }}</textarea
-        >
+        ></textarea>
         <div class="flex flex-row justify-between self-start mt-0.5">
           <span
             class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -44,6 +44,7 @@ export class ExternalViewerButtonComponent {
   private openinNewTab = inject(EXTERNAL_VIEWER_OPEN_NEW_TAB)
 
   @Input() link: DatasetOnlineResource
+  @Input() mimeType = ''
   @Input() extraClass = ''
 
   get externalViewer() {
@@ -80,6 +81,7 @@ export class ExternalViewerButtonComponent {
         `${encodeURIComponent(this.link.url.toString())}`
       )
       .replace('${service_type}', `${this.supportedLinkLayerType}`)
+      .replace('${mime_type}', `${encodeURIComponent(this.mimeType)}`)
     window.open(url, this.openinNewTab ? '_blank' : '_self').focus()
   }
 }

package/src/libs/feature/record/src/lib/gpf-api-dl/gpf-api-dl.component.html

@@ -12,7 +12,7 @@
     </h2>
     <button
       (click)="resetUrl()"
-      class="bg-primary-opacity-50 inline-flex items-center justify-center px-4 py-2 text-white rounded hover:bg-primary transition"
+      class="bg-primary/50 inline-flex items-center justify-center px-4 py-2 text-white rounded hover:bg-primary transition"
       [attr.title]="'record.metadata.api.form.resetTooltip' | translate"
       [attr.aria-label]="'record.metadata.api.form.resetTooltip' | translate"
     >
@@ -97,7 +97,7 @@
         'px-4 py-2 text-white rounded transition ' +
         ((page$ | async) <= 1
           ? 'bg-gray-400 cursor-not-allowed  '
-          : 'bg-primary-opacity-50  hover:bg-primary')
+          : 'bg-primary/50  hover:bg-primary')
       "
       [attr.title]="'record.metadata.api.form.previousPageTooltip' | translate"
       [attr.aria-label]="
@@ -117,10 +117,10 @@
     <button
       (click)="moreResult()"
       [class]="
-        'bg-primary-opacity-50 px-4 py-2 text-white rounded transition ' +
+        'bg-primary/50 px-4 py-2 text-white rounded transition ' +
         ((page$ | async) >= (pageMax$ | async)
           ? 'bg-gray-400 cursor-not-allowed  '
-          : 'bg-primary-opacity-50  hover:bg-primary')
+          : 'bg-primary/50  hover:bg-primary')
       "
       [attr.title]="'record.metadata.api.form.nextPageTooltip' | translate"
       [attr.aria-label]="'record.metadata.api.form.nextPageTooltip' | translate"

package/src/libs/feature/record/src/lib/gpf-api-dl/gpf-api-dl.component.ts

@@ -1,15 +1,14 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  inject,
   Input,
   OnInit,
-  inject,
 } from '@angular/core'
 import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { BehaviorSubject, combineLatest, map, mergeMap, Observable } from 'rxjs'
 import { HttpClient } from '@angular/common/http'
 import { Choice, DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
-import axios from 'axios'
 import { CommonModule } from '@angular/common'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { GpfApiDlListItemComponent } from '../gpf-api-dl-list-item/gpf-api-dl-list-item.component'
@@ -209,9 +208,9 @@ export class GpfApiDlComponent implements OnInit {
     let pageCount = 1
 
     while (choicesTest === undefined && pageCount > page) {
-      const response = await axios.get(
+      const response = await fetch(
         this.url.concat(`&limit=200&page=${page}`)
-      )
+      ).then((resp) => resp.json())
 
       choicesTest = response.data.entry.filter(
         (element) => element['id'] == this.apiBaseUrl

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -13,29 +13,21 @@
       ></gn-ui-dropdown-selector>
     }
 
-    @if ((styleLinks$ | async)?.length > 0) {
-      <gn-ui-dropdown-selector
-        class="w-full md:flex-1 md:min-w-0"
-        extraBtnClass="font-sans font-bold"
-        [title]="'map.select.style' | translate"
-        [choices]="styleDropdownChoices$ | async"
-        [selected]="_styleFromConfig"
-        (selectValue)="selectStyleToDisplay($event)"
-      ></gn-ui-dropdown-selector>
-    } @else {
-      <gn-ui-dropdown-selector
-        class="w-full md:flex-1 md:min-w-0 text-gray-400"
-        extraBtnClass="font-sans font-bold text-gray-400"
-        [title]="'map.select.style' | translate"
-        [choices]="styleDropdownChoices$ | async"
-        [disabled]="true"
-      ></gn-ui-dropdown-selector>
-    }
+    <gn-ui-dropdown-selector
+      class="w-full md:flex-1 md:min-w-0"
+      extraBtnClass="font-sans font-bold"
+      [title]="'map.select.style' | translate"
+      [choices]="styleDropdownChoices$ | async"
+      [selected]="selectedStyleId$ | async"
+      [disabled]="(styleDropdownChoices$ | async)?.length <= 1"
+      (selectValue)="selectStyleToDisplay($event)"
+    ></gn-ui-dropdown-selector>
 
     <div class="self-end md:ml-2">
       <gn-ui-external-viewer-button
         extraClass="w-[44px] h-[44px]"
         [link]="selectedLink$ | async"
+        [mimeType]="wmsMimeType$ | async"
       >
       </gn-ui-external-viewer-button>
     </div>

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/core'
 import { MapUtilsService } from '../../../../../../libs/feature/map/src'
 import { getLinkId, getLinkLabel } from '../../../../../../libs/util/shared/src'
+import { WmsEndpoint, LayerStyle } from '@camptocamp/ogc-client'
 import {
   BehaviorSubject,
   combineLatest,
@@ -40,6 +41,7 @@ import {
   createViewFromLayer,
   MapContext,
   MapContextLayer,
+  MapContextLayerWms,
   SourceLoadErrorEvent,
 } from '@geospatial-sdk/core'
 import {
@@ -77,6 +79,7 @@ marker('map.dropdown.placeholder')
 marker('wfs.feature.limit')
 marker('dataset.error.restrictedAccess')
 marker('map.select.style')
+marker('map.style.default')
 
 @Component({
   selector: 'gn-ui-map-view',
@@ -228,7 +231,16 @@ export class MapViewComponent implements AfterViewInit {
           return compatibleLinks[0]
         }
       }
-    })
+    }),
+    shareReplay(1)
+  )
+
+  isWmsStyleMode$ = this.selectedSourceLink$.pipe(
+    map(
+      (src) => src?.type === 'service' && src?.accessServiceProtocol === 'wms'
+    ),
+    distinctUntilChanged(),
+    shareReplay(1)
   )
 
   styleLinks$ = this.selectedSourceLink$.pipe(
@@ -262,6 +274,22 @@ export class MapViewComponent implements AfterViewInit {
           })
         )
       }
+      if (
+        src &&
+        src.type === 'service' &&
+        src.accessServiceProtocol === 'wms'
+      ) {
+        return from(new WmsEndpoint(src.url.toString()).isReady()).pipe(
+          map((endpoint) => {
+            const layer = endpoint.getLayerByName(src.name)
+            return layer?.styles || []
+          }),
+          catchError((error) => {
+            this.handleError(error)
+            return of([])
+          })
+        )
+      }
       return of([])
     }),
     tap((styles) => {
@@ -274,33 +302,83 @@ export class MapViewComponent implements AfterViewInit {
     shareReplay(1)
   )
 
-  styleDropdownChoices$ = this.styleLinks$.pipe(
-    map((links) =>
+  styleDropdownChoices$ = combineLatest([
+    this.styleLinks$,
+    this.isWmsStyleMode$,
+  ]).pipe(
+    map(([links, isWmsStyleMode]) =>
       links.length
         ? links.map((link, index) => ({
-            label: getLinkLabel(link),
+            label: isWmsStyleMode
+              ? (link as LayerStyle).title || (link as LayerStyle).name
+              : getLinkLabel(link as DatasetOnlineResource),
             value: index,
           }))
         : [
             {
-              label: '\u00A0\u00A0\u00A0\u00A0',
+              label: this.translateService.instant('map.style.default'),
               value: 0,
             },
           ]
     )
   )
 
+  selectedWmsStyleName$ = combineLatest([
+    this.styleLinks$,
+    this.isWmsStyleMode$,
+    this.selectedStyleId$.pipe(distinctUntilChanged()),
+  ]).pipe(
+    map(([styles, isWmsStyleMode, styleIdx]) =>
+      isWmsStyleMode && Array.isArray(styles)
+        ? (styles[styleIdx] as LayerStyle)?.name
+        : undefined
+    )
+  )
+
   selectedLink$ = combineLatest([
     this.selectedSourceLink$,
     this.styleLinks$,
     this.selectedStyleId$.pipe(distinctUntilChanged()),
+    this.isWmsStyleMode$,
   ]).pipe(
-    map(([src, styles, styleIdx]) => (styles.length ? styles[styleIdx] : src)),
+    map(([src, styles, styleIdx, isWmsStyleMode]) =>
+      !isWmsStyleMode && styles.length ? styles[styleIdx] : src
+    ),
     shareReplay(1)
   )
 
-  currentLayers$ = combineLatest([this.selectedLink$, this.excludeWfs$]).pipe(
-    switchMap(([link, excludeWfs]) => {
+  wmsMimeType$ = this.selectedSourceLink$.pipe(
+    switchMap((link) => {
+      if (link?.type === 'service' && link?.accessServiceProtocol === 'wms') {
+        return from(
+          new WmsEndpoint(link.url.toString())
+            .isReady()
+            .then((endpoint) => {
+              return endpoint.describeLayer(link.name).then((description) => {
+                if (description) {
+                  return description.owsType === 'wfs'
+                    ? 'image/png'
+                    : 'image/jpeg'
+                }
+                const layer = endpoint.getLayerByName(link.name)
+                return layer?.opaque ? 'image/jpeg' : 'image/png'
+              })
+            })
+            .catch(() => 'image/png')
+        )
+      }
+      return of('')
+    }),
+    shareReplay(1)
+  )
+
+  currentLayers$ = combineLatest([
+    this.selectedLink$,
+    this.excludeWfs$,
+    this.selectedWmsStyleName$,
+    this.wmsMimeType$,
+  ]).pipe(
+    switchMap(([link, excludeWfs, wmsStyleName, wmsMimeType]) => {
       if (!link) {
         return of([])
       }
@@ -315,6 +393,15 @@ export class MapViewComponent implements AfterViewInit {
         return of([])
       }
       return this.getLayerFromLink(link).pipe(
+        map((layer) =>
+          layer.type === 'wms'
+            ? {
+                ...layer,
+                ...(wmsStyleName && { style: wmsStyleName }),
+                ...(wmsMimeType && { format: wmsMimeType }),
+              }
+            : layer
+        ),
         map((layer) => [layer]),
         catchError((e) => {
           this.handleError(e)
@@ -394,7 +481,7 @@ export class MapViewComponent implements AfterViewInit {
         url: link.url.toString(),
         type: 'wms',
         name: link.name,
-      })
+      } as MapContextLayerWms)
     } else if (
       link.type === 'service' &&
       link.accessServiceProtocol === 'tms'

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

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

package/src/libs/feature/router/src/lib/default/router.module.ts

@@ -1,6 +1,5 @@
-import { ModuleWithProviders, NgModule, inject } from '@angular/core'
+import { inject, ModuleWithProviders, NgModule } from '@angular/core'
 import { RouteReuseStrategy } from '@angular/router'
-import { EffectsModule } from '@ngrx/effects'
 import {
   FullRouterStateSerializer,
   routerReducer,
@@ -11,8 +10,9 @@ import { ROUTER_STATE_KEY } from './constants'
 import { RouterService } from './router.service'
 import { SearchRouteReuseStrategy } from './SearchRouteReuseStrategy'
 import { RouterFacade } from './state/router.facade'
-import { RouterEffects } from './state/router.effects'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
+import { RouterEffects } from './state/router.effects'
+import { EffectsModule } from '@ngrx/effects'
 
 @NgModule({
   imports: [

package/src/libs/feature/router/src/lib/default/router.service.ts

@@ -1,10 +1,10 @@
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import {
   ROUTER_ROUTE_DATASET,
   ROUTER_ROUTE_ORGANIZATION,
+  ROUTER_ROUTE_REUSE,
   ROUTER_ROUTE_SEARCH,
   ROUTER_ROUTE_SERVICE,
-  ROUTER_ROUTE_REUSE,
 } from '.'
 import { Router, Routes } from '@angular/router'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'

package/src/libs/feature/router/src/lib/default/services/router-search.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import {
   FieldsService,
   SearchFacade,
@@ -6,6 +6,7 @@ import {
 } from '../../../../../../../libs/feature/search/src'
 import {
   FieldFilters,
+  SortByEnum,
   SortByField,
 } from '../../../../../../../libs/common/domain/src/lib/model/search'
 import { ROUTE_PARAMS, SearchRouteParams } from '../constants'
@@ -31,10 +32,12 @@ export class RouterSearchService implements SearchServiceI {
   }
 
   async setFilters(newFilters: FieldFilters) {
-    const sortBy = await firstValueFrom(this.searchFacade.sortBy$)
+    let sortBy = await firstValueFrom(this.searchFacade.sortBy$)
     const fieldSearchParams = await firstValueFrom(
       this.fieldsService.readFieldValuesFromFilters(newFilters)
     )
+    // apply relevancy sort if a full text criteria is given
+    sortBy = newFilters['any'] ? SortByEnum.RELEVANCY : sortBy
     this.facade.setSearch({
       ...fieldSearchParams,
       [ROUTE_PARAMS.SORT]: sortBy ? sortByToString(sortBy) : undefined,
@@ -46,9 +49,15 @@ export class RouterSearchService implements SearchServiceI {
       this.searchFacade.searchFilters$
     )
     const updatedFilters = { ...currentFilters, ...newFilters }
-    const newParams = await firstValueFrom(
+    let newParams = await firstValueFrom(
       this.fieldsService.readFieldValuesFromFilters(updatedFilters)
     )
+    if (newFilters['any']) {
+      newParams = {
+        ...newParams,
+        [ROUTE_PARAMS.SORT]: sortByToString(SortByEnum.RELEVANCY),
+      }
+    }
     this.facade.updateSearch(newParams as SearchRouteParams)
   }
 

package/src/libs/feature/router/src/lib/default/state/router.effects.ts

@@ -1,5 +1,5 @@
 import { Location } from '@angular/common'
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, Router } from '@angular/router'
 import { MdViewActions } from '../../../../../../../libs/feature/record/src'
 import {
@@ -9,15 +9,18 @@ import {
   SetFilters,
   SetSortBy,
 } from '../../../../../../../libs/feature/search/src'
-import { FieldFilters } from '../../../../../../../libs/common/domain/src/lib/model/search'
+import {
+  FieldFilters,
+  SortByEnum,
+} from '../../../../../../../libs/common/domain/src/lib/model/search'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
 import { navigation } from '@ngrx/router-store/data-persistence'
 import { of, pairwise, startWith } from 'rxjs'
-import { map, mergeMap, tap } from 'rxjs/operators'
+import { map, mergeMap, take, tap } from 'rxjs/operators'
 import * as RouterActions from './router.actions'
 import { RouterFacade } from './router.facade'
 import { ROUTE_PARAMS } from '../constants'
-import { sortByFromString } from '../../../../../../../libs/util/shared/src'
+import { sortByFromString, sortByToString } from '../../../../../../../libs/util/shared/src'
 import { ROUTER_CONFIG, RouterConfigModel } from '../router.config'
 import { RouterService } from '../router.service'
 
@@ -103,6 +106,33 @@ export class RouterEffects {
     )
   )
 
+  /**
+   * This effect is needed because on the page load, the search params from the URL are
+   * directly applied to the underlying search facade; this means that it doesn't go
+   * through the RouterSearchService which makes sure that a relevancy sort is applied
+   * whenever there's a full text search criteria set.
+   */
+  applyInitialRelevancySort$ = createEffect(
+    () =>
+      this.facade.searchParams$.pipe(
+        take(1),
+        tap((filters) => {
+          const relevancySort = sortByToString(SortByEnum.RELEVANCY)
+          if (
+            filters['q'] &&
+            (!Array.isArray(filters['q']) || filters['q'].length > 0) &&
+            !filters[ROUTE_PARAMS.SORT]
+          ) {
+            this.facade.updateSearch({
+              ...filters,
+              [ROUTE_PARAMS.SORT]: relevancySort,
+            })
+          }
+        })
+      ),
+    { dispatch: false }
+  )
+
   /**
    * This effect will load the metadata when a navigation to
    * a metadata record happens

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

@@ -111,6 +111,8 @@ export function reducerSearch(
         },
       }
     }
+    // From router.effects
+    // From home - fuzzy-search - search.service
     case fromActions.SET_FILTERS: {
       return {
         ...state,
@@ -132,6 +134,7 @@ export function reducerSearch(
         },
       }
     }
+    // From results WC
     case fromActions.SET_SEARCH: {
       return {
         ...state,

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -138,9 +138,15 @@ export class FieldsService {
       )
     })
     return forkJoin(filtersByField$).pipe(
-      map((filters) =>
-        filters.reduce((prev, curr) => ({ ...prev, ...curr }), {})
-      )
+      map((filters) => {
+        if (typeof filters === 'string') {
+          return filters
+        }
+        return (filters as FieldFilters[]).reduce(
+          (prev, curr) => ({ ...prev, ...curr }),
+          {}
+        )
+      })
     )
   }
 

package/src/libs/feature/search/src/lib/utils/service/fields.ts

@@ -36,7 +36,7 @@ export abstract class AbstractSearchField {
   abstract getAvailableValues(): Observable<FieldAvailableValue[] | DateRange[]>
   abstract getFiltersForValues(
     values: FieldValue[] | DateRange[]
-  ): Observable<FieldFilters>
+  ): Observable<FieldFilters | string>
   abstract getValuesForFilter(
     filters: FieldFilters
   ): Observable<FieldValue[] | FieldValue | DateRange>
@@ -89,7 +89,7 @@ export class SimpleSearchField implements AbstractSearchField {
   }
   getFiltersForValues(
     values: FieldValue[] | DateRange[]
-  ): Observable<FieldFilters> {
+  ): Observable<FieldFilters | string> {
     // FieldValue[]
     if (this.getType() === 'values') {
       return of({
@@ -538,7 +538,7 @@ export class RecordKindField extends SimpleSearchField {
     ])
   }
 
-  getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
+  getFiltersForValues(values: FieldValue[]): Observable<FieldFilters | string> {
     const filters: FieldFilters = {
       [this.esFieldName]: values.reduce((acc, value) => {
         if (value === '') return { ...acc, [value]: true }
@@ -552,8 +552,8 @@ export class RecordKindField extends SimpleSearchField {
 
     const presentationFormFilter = {}
     if (values.includes('reuse') && !values.includes('dataset')) {
-      presentationFormFilter['mapDigital'] = true
-      presentationFormFilter['mapHardcopy'] = true
+      filters['gn-ui-crossFieldFilter'] =
+        `(resourceType:("dataset" OR "document") AND cl_presentationForm.key:("mapDigital" OR "mapHardcopy")) OR resourceType:("application" OR "interactiveMap" OR "map" OR "map/static" OR "map/interactive" OR "map-interactive" OR "map-static" OR "mapDigital" OR "mapHardcopy" OR "staticMap")`
     } else if (values.includes('dataset') && !values.includes('reuse')) {
       presentationFormFilter['mapDigital'] = false
       presentationFormFilter['mapHardcopy'] = false

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

@@ -64,7 +64,7 @@
     <div class="flex flex-row gap-2.5 items-center pt-1">
       @if (link.accessServiceProtocol !== 'GPFDL') {
         <span
-          class="bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
+          class="bg-primary/50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
           [ngClass]="{
             '!bg-primary': currentlyActive,
           }"
@@ -76,7 +76,7 @@
       }
       @if (link.accessServiceProtocol === 'GPFDL') {
         <span
-          class="bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
+          class="bg-primary/50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
           [ngClass]="{
             '!bg-primary': currentlyActive,
           }"

package/src/libs/ui/elements/src/lib/application-banner/application-banner.component.ts

@@ -45,13 +45,12 @@ export class ApplicationBannerComponent {
         this.icon = 'matWarning'
         break
       case 'light':
-        this.msgClass =
-          'bg-primary-opacity-10 border-primary-lightest text-black'
+        this.msgClass = 'bg-primary/10 border-primary-lightest text-black'
         this.icon = 'matInfoOutline'
         break
       case 'secondary':
       default:
-        this.msgClass = 'bg-primary-opacity-50 border-primary-darker text-black'
+        this.msgClass = 'bg-primary/50 border-primary-darker text-black'
         this.icon = 'matWarningAmberOutline'
         break
     }

package/src/libs/ui/elements/src/lib/image-input/image-input.component.html

@@ -1,6 +1,9 @@
 @if (previewUrl) {
-  <div class="w-80 h-full flex flex-col gap-2">
-    <gn-ui-image-overlay-preview class="h-48" [imageUrl]="previewUrl">
+  <div class="w-[314px] h-full flex flex-col gap-2">
+    <gn-ui-image-overlay-preview
+      class="w-[314px] h-[314px]"
+      [imageUrl]="previewUrl"
+    >
     </gn-ui-image-overlay-preview>
     @if (showAltTextInput) {
       <gn-ui-text-input