geonetwork-ui 2.9.0-dev.981068ab5 → 2.9.0-dev.af124b7cd

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

@@ -14,7 +14,7 @@
     </div>
   }
   <div class="grow pt-1" [ngClass]="shouldShowThumbnail ? 'sm:w-0' : ''">
-    <div class="flex flex-col gap-2 h-full">
+    <div class="flex flex-col gap-2" [class.h-full]="size !== 'M'">
       <h4
         class="record-card__title"
         data-cy="recordTitle"
@@ -32,63 +32,70 @@
           [title]="abstract"
         ></gn-ui-markdown-parser>
       </div>
-      <div class="record-card__footer">
-        @if (record.ownerOrganization?.name) {
-          <div
-            data-cy="recordOrg"
-            class="grow flex flex-row gap-1 items-center text-primary-lighter"
-            [ngClass]="displayContactIconOnly ? 'justify-center' : ''"
+      @if (size !== 'M') {
+        <ng-container [ngTemplateOutlet]="footerTpl"></ng-container>
+      }
+    </div>
+  </div>
+  @if (size === 'M') {
+    <ng-container [ngTemplateOutlet]="footerTpl"></ng-container>
+  }
+</a>
+
+<ng-template #footerTpl>
+  <div class="record-card__footer">
+    @if (record.ownerOrganization?.name) {
+      <div
+        data-cy="recordOrg"
+        class="grow flex flex-row gap-1 items-center text-primary-lighter"
+        [ngClass]="displayContactIconOnly ? 'justify-center' : ''"
+      >
+        <ng-icon
+          name="iconoirBank"
+          class="text-primary -translate-y-[0.5px] shrink-0"
+          [title]="record.ownerOrganization.name"
+        ></ng-icon>
+        @if (!displayContactIconOnly) {
+          <span
+            data-cy="recordOrgName"
+            class="line-clamp-1"
+            [title]="record.ownerOrganization.name"
+            >{{ record.ownerOrganization.name }}</span
           >
-            <ng-icon
-              name="iconoirBank"
-              class="text-primary -translate-y-[0.5px] shrink-0"
-              [title]="record.ownerOrganization.name"
-            ></ng-icon>
-            @if (!displayContactIconOnly) {
-              <span
-                data-cy="recordOrgName"
-                class="line-clamp-1"
-                [title]="record.ownerOrganization.name"
-                >{{ record.ownerOrganization.name }}</span
-              >
-            }
-          </div>
         }
-        <div class="record-card__footer__other">
-          <div
-            class="xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0"
-          >
-            <gn-ui-kind-badge
-              [extraClass]="'text-[1.2em]'"
-              [styling]="'gray'"
-              [kind]="record?.kind"
-              [contentTemplate]="customTemplate"
-              class="pt-1"
-            >
-              <ng-template #customTemplate></ng-template
-            ></gn-ui-kind-badge>
-            @if (metadataQualityDisplay) {
-              <gn-ui-metadata-quality
-                class="flex items-center min-w-[113px]"
-                [smaller]="true"
-                [metadata]="record"
-                [metadataQualityDisplay]="metadataQualityDisplay"
-                [popoverDisplay]="true"
-              ></gn-ui-metadata-quality>
-            }
-          </div>
-          <div
-            class="flex justify-center"
-            data-cy="recordFav"
-            [ngClass]="displayContactIconOnly ? 'px-1' : 'px-4'"
-          >
-            <ng-container
-              [ngTemplateOutlet]="favoriteTemplate"
-              [ngTemplateOutletContext]="{ $implicit: record }"
-            ></ng-container>
-          </div>
-        </div>
+      </div>
+    }
+    <div class="record-card__footer__other">
+      <div class="xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0">
+        <gn-ui-kind-badge
+          [extraClass]="'text-[1.2em]'"
+          [styling]="'gray'"
+          [kind]="record?.kind"
+          [contentTemplate]="customTemplate"
+          class="pt-1"
+        >
+          <ng-template #customTemplate></ng-template
+        ></gn-ui-kind-badge>
+        @if (metadataQualityDisplay) {
+          <gn-ui-metadata-quality
+            class="flex items-center min-w-[113px]"
+            [smaller]="true"
+            [metadata]="record"
+            [metadataQualityDisplay]="metadataQualityDisplay"
+            [popoverDisplay]="true"
+          ></gn-ui-metadata-quality>
+        }
+      </div>
+      <div
+        class="flex justify-center"
+        data-cy="recordFav"
+        [ngClass]="displayContactIconOnly ? 'px-1' : 'px-4'"
+      >
+        <ng-container
+          [ngTemplateOutlet]="favoriteTemplate"
+          [ngTemplateOutletContext]="{ $implicit: record }"
+        ></ng-container>
       </div>
     </div>
   </div>
-</a>
+</ng-template>

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

@@ -6,7 +6,7 @@
   }
 
   &.size-M {
-    @apply max-w-[940px] md:h-[231px] gap-4;
+    @apply max-w-[940px] gap-4 flex-wrap;
   }
 
   &.size-S {
@@ -28,11 +28,11 @@
   @apply border rounded-lg overflow-hidden shrink-0;
 
   .size-L & {
-    @apply w-full w-[190px] h-[184px];
+    @apply w-[184px] h-[184px];
   }
 
   .size-M & {
-    @apply w-full w-[138px] h-[207px];
+    @apply w-[138px] h-[138px];
   }
 }
 
@@ -44,7 +44,7 @@
   }
 
   .size-M & {
-    @apply line-clamp-2 ml-2;
+    @apply line-clamp-2;
   }
 
   .size-S & {
@@ -64,7 +64,7 @@
   }
 
   .size-M & {
-    @apply line-clamp-3 ml-2;
+    @apply line-clamp-3;
   }
 
   .size-S & {

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

@@ -85,7 +85,7 @@
               class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
               name="matPersonOutline"
             ></ng-icon>
-            <div class="flex flex-col ml-2">
+            <div class="flex flex-col ml-2" data-cy="contact-full-name">
               <p class="text-sm">
                 {{ contacts[0]?.firstName || '' }}
                 {{ contacts[0]?.lastName || '' }}

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

@@ -52,9 +52,9 @@ export class MetadataContactComponent {
 
   get contacts() {
     return (
-      (this.metadata.kind === 'dataset'
-        ? this.metadata.contactsForResource
-        : this.metadata.contacts) || []
+      (this.metadata.kind === 'service'
+        ? this.metadata.contacts
+        : this.metadata.contactsForResource) || []
     )
   }
 

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

@@ -6,7 +6,7 @@
       </div>
       <button
         (click)="resetUrl()"
-        class="bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors"
+        class="bg-primary/50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors"
       >
         <p class="text-[13px] uppercase" translate>
           record.metadata.api.form.reset

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

@@ -1,6 +1,6 @@
 @if (apiLinks.length > 0) {
   <div style="height: 652px" id="preview">
-    <div class="bg-primary-opacity-10 overflow-visible" style="height: 420px">
+    <div class="bg-primary/10 overflow-visible" style="height: 420px">
       <div class="container-lg px-4 lg:mx-auto">
         <div>
           <div class="gn-ui-section-title mb-6" translate>

package/src/libs/ui/map/src/lib/map-utils.ts

@@ -50,7 +50,7 @@ export function dragPanCondition(
 
 export function mouseWheelZoomCondition(
   this: MouseWheelZoom,
-  event: MapBrowserEvent<UIEvent>
+  event: MapBrowserEvent<WheelEvent>
 ) {
   if (!platformModifierKeyOnly(event) && event.type === 'wheel') {
     this.getMap().dispatchEvent('mapmuted')

package/src/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html

@@ -30,7 +30,7 @@
           ></gn-ui-thumbnail>
         }
       </div>
-      <div class="flex flex-col overflow-hidden items-start">
+      <div class="flex flex-col overflow-hidden items-start grow">
         @if (hasOrganization) {
           <span
             class="font-bold transition duration-200 text-primary truncate max-w-full"
@@ -51,32 +51,35 @@
           >
         </p>
       </div>
-    </div>
-    <div class="pt-5 pb-5 px-10 relative">
-      <div class="absolute top-[0.85em] right-[0.85em]">
+      <div class="ml-3 shrink-0">
         <ng-container
           [ngTemplateOutlet]="favoriteTemplate"
           [ngTemplateOutletContext]="{ $implicit: record }"
         ></ng-container>
       </div>
-      <h1
-        class="font-title text-black text-[21px] font-medium mb-3 pr-8"
-        data-cy="recordTitle"
-      >
-        {{ record.title }}
-      </h1>
+    </div>
+    <div class="pt-5 pb-5 px-10 relative">
+      <div class="flex flex-col sm:flex-row gap-4 mb-3">
+        @if (record.overviews?.[0]) {
+          <gn-ui-thumbnail
+            class="block shrink-0 w-[120px] h-[120px] border border-gray-100 rounded-lg overflow-hidden"
+            [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
+            [fit]="'cover'"
+          ></gn-ui-thumbnail>
+        }
+        <h1
+          class="font-title text-black text-[21px] font-medium"
+          data-cy="recordTitle"
+        >
+          {{ record.title }}
+        </h1>
+      </div>
       <p class="line-clamp-3">
         <gn-ui-markdown-parser
           [textContent]="abstract"
           [whitoutStyles]="true"
         />
       </p>
-      @if (record.overviews?.[0]) {
-        <gn-ui-thumbnail
-          class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
-          [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
-        ></gn-ui-thumbnail>
-      }
       @if (isDownloadable || isViewable) {
         <div class="flex flex-row mt-3">
           @if (isDownloadable) {

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -70,8 +70,11 @@ export function getCustomTranslations(langCode: string): CustomTranslations {
 
 let appConfigLoaded = false
 
-export function loadAppConfig() {
-  return fetch('assets/configuration/default.toml')
+export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
+  console.log(
+    `[geonetwork-ui] Loading application configuration from ${configUrl}`
+  )
+  return fetch(configUrl)
     .then((resp) => {
       if (!resp.ok) throw new Error('Configuration file could not be loaded')
       return resp.text()
@@ -229,6 +232,7 @@ export function loadAppConfig() {
           'record_kind_quick_filter',
           'filter_geometry_data',
           'filter_geometry_url',
+          'do_not_use_default_search_preset',
           'search_preset',
           'advanced_filters',
           'limit',
@@ -252,6 +256,8 @@ export function loadAppConfig() {
                 parsedSearchSection.record_kind_quick_filter,
               FILTER_GEOMETRY_DATA: parsedSearchSection.filter_geometry_data,
               FILTER_GEOMETRY_URL: parsedSearchSection.filter_geometry_url,
+              DO_NOT_USE_DEFAULT_SEARCH_PRESET:
+                !!parsedSearchSection.do_not_use_default_search_preset,
               SEARCH_PRESET: parsedSearchParams.map((param) => ({
                 sort: param.sort,
                 name: param.name,

package/src/libs/util/app-config/src/lib/fixtures.ts

@@ -40,6 +40,7 @@ fonts_stylesheet_url = "https://fonts.googleapis.com/css2?family=Open+Sans"
 [search]
 record_kind_quick_filter = false
 filter_geometry_url = 'https://my.domain.org/geom.json'
+do_not_use_default_search_preset = false
 advanced_filters = ['publicationYear', 'documentStandard', 'inspireKeyword', 'topic', 'license']
 
 [[search_preset]]

package/src/libs/util/app-config/src/lib/model.ts

@@ -58,6 +58,7 @@ export interface SearchConfig {
   RECORD_KIND_QUICK_FILTER?: boolean
   FILTER_GEOMETRY_URL?: string
   FILTER_GEOMETRY_DATA?: string
+  DO_NOT_USE_DEFAULT_SEARCH_PRESET?: boolean
   SEARCH_PRESET?: SearchPreset[]
   ADVANCED_FILTERS?: []
   LIMIT?: number

package/src/libs/util/shared/src/lib/gn-ui-version.ts

@@ -2,7 +2,8 @@ import packageJson from '../../../../../package.json'
 
 export const GEONETWORK_UI_VERSION = packageJson.version
 
-export const GEONETWORK_UI_TAG_NAME =
-  GEONETWORK_UI_VERSION.split('-')[1] === 'dev'
-    ? 'main'
-    : `v${packageJson.version}`
+export const GEONETWORK_UI_TAG_NAME = GEONETWORK_UI_VERSION.split(
+  '-'
+)[1]?.startsWith('dev')
+  ? 'main'
+  : `v${packageJson.version}`

package/src/libs/util/shared/src/lib/services/theme.service.ts

@@ -10,26 +10,6 @@ export class ThemeService {
     return document.documentElement.style.getPropertyValue(`--color-${name}`)
   }
 
-  static generateBgOpacityClasses(
-    colorName,
-    colorValue,
-    opacities = [0, 10, 25, 50, 75]
-  ) {
-    const color = chroma(colorValue)
-    const styleElement = document.createElement('style')
-    styleElement.innerHTML = opacities.reduce((cssRules, opacity) => {
-      cssRules += `.bg-${colorName}-opacity-${opacity}{background-color:${color
-        .alpha(opacity / 100)
-        .css()};}`
-
-      cssRules += `.hover-bg-${colorName}-opacity-${opacity}:hover {background-color:${color
-        .alpha(opacity / 100)
-        .css()};}`
-      return cssRules
-    }, '')
-    document.getElementsByTagName('head')[0].appendChild(styleElement)
-  }
-
   static applyCssVariables(
     primaryColor: string,
     secondaryColor: string,
@@ -39,13 +19,19 @@ export class ThemeService {
     titleFont?: string,
     fontsStylesheetUrl?: string
   ) {
-    const applyColor = (name: string, color) => {
+    const applyColor = (name: string, color, includeRawValues?: boolean) => {
       document.documentElement.style.setProperty(`--color-${name}`, color.css())
+      if (includeRawValues) {
+        document.documentElement.style.setProperty(
+          `--color-raw-${name}`,
+          color.css().replace(/^rgba?\((.*)\)/, '$1')
+        )
+      }
     }
 
     const black = chroma('black')
     const white = chroma('white')
-    applyColor('primary', chroma(primaryColor))
+    applyColor('primary', chroma(primaryColor), true)
     applyColor(
       'primary-lighter',
       chroma.scale([primaryColor, white]).mode('lab')(0.3)
@@ -70,7 +56,7 @@ export class ThemeService {
       'primary-black',
       chroma.scale([primaryColor, black]).mode('lab')(0.85)
     )
-    applyColor('secondary', chroma(secondaryColor))
+    applyColor('secondary', chroma(secondaryColor), true)
     applyColor(
       'secondary-lighter',
       chroma.scale([secondaryColor, white]).mode('lab')(0.3)

package/tailwind.base.config.js

@@ -1,3 +1,4 @@
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   theme: {
     extend: {
@@ -8,14 +9,14 @@ module.exports = {
         'primary-white': 'var(--color-primary-white)',
         'primary-lightest': 'var(--color-primary-lightest)',
         'primary-lighter': 'var(--color-primary-lighter)',
-        primary: 'var(--color-primary)',
+        primary: 'rgb(var(--color-raw-primary) / <alpha-value>)', // supports opacity
         'primary-darker': 'var(--color-primary-darker)',
         'primary-darkest': 'var(--color-primary-darkest)',
         'primary-black': 'var(--color-primary-black)',
         'secondary-white': 'var(--color-secondary-white)',
         'secondary-lightest': 'var(--color-secondary-lightest)',
         'secondary-lighter': 'var(--color-secondary-lighter)',
-        secondary: 'var(--color-secondary)',
+        secondary: 'rgb(var(--color-raw-secondary) / <alpha-value>)', // supports opacity
         'secondary-darker': 'var(--color-secondary-darker)',
         'secondary-darkest': 'var(--color-secondary-darkest)',
         'secondary-black': 'var(--color-secondary-black)',

package/translations/de.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "Die URL des OGC API-Dienstes eingeben",
   "map.select.layer": "Datenquelle",
   "map.select.style": "Style",
+  "map.style.default": "Standard",
   "map.wfs.urlInput.hint": "Die WFS URL eingeben",
   "map.wms.urlInput.hint": "Die WMS URL eingeben",
   "multiselect.filter.placeholder": "Suche",
@@ -604,6 +605,7 @@
   "search.filters.producerOrg": "Herausgeber",
   "search.filters.publicationYear": "Veröffentlichungsjahr",
   "search.filters.publisherOrg": "Vertreiber",
+  "search.filters.recordKind": "",
   "search.filters.recordKind.all": "Alle",
   "search.filters.recordKind.dataset": "Datensätze",
   "search.filters.recordKind.reuse": "Wiederverwendungen",
@@ -642,7 +644,6 @@
   "service.metadata.spatialExtent": "Räumliche Ausdehnung",
   "share.tab.permalink": "Teilen",
   "share.tab.webComponent": "Integrieren",
-  "stac.filter.reset": "Filter zurücksetzen",
   "stac.filter.enable": "",
   "stac.filter.reset": "",
   "stac.results.noResults": "Ihre Suchfilter lieferten keine Ergebnisse",

package/translations/en.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "Enter OGC API service URL",
   "map.select.layer": "Data source",
   "map.select.style": "Style",
+  "map.style.default": "Default",
   "map.wfs.urlInput.hint": "Enter WFS service URL",
   "map.wms.urlInput.hint": "Enter WMS service URL",
   "multiselect.filter.placeholder": "Search",

package/translations/es.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "",
   "map.select.layer": "",
   "map.select.style": "",
+  "map.style.default": "Por defecto",
   "map.wfs.urlInput.hint": "",
   "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "",

package/translations/fr.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "Entrez l'URL du service OGC API",
   "map.select.layer": "Source de données",
   "map.select.style": "Style",
+  "map.style.default": "Par défaut",
   "map.wfs.urlInput.hint": "Entrez l'URL du service WFS",
   "map.wms.urlInput.hint": "Entrez l'URL du service WMS",
   "multiselect.filter.placeholder": "Rechercher",

package/translations/it.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "Inserisci URL del servizio OGC API",
   "map.select.layer": "Sorgente dati",
   "map.select.style": "Style",
+  "map.style.default": "Predefinito",
   "map.wfs.urlInput.hint": "Inserisci URL del servizio WFS",
   "map.wms.urlInput.hint": "Inserisci URL del servizio WMS",
   "multiselect.filter.placeholder": "Cerca",

package/translations/nl.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "",
   "map.select.layer": "",
   "map.select.style": "",
+  "map.style.default": "Standaard",
   "map.wfs.urlInput.hint": "",
   "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "",

package/translations/pt.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "",
   "map.select.layer": "",
   "map.select.style": "",
+  "map.style.default": "Padrão",
   "map.wfs.urlInput.hint": "",
   "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "",

package/translations/sk.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "",
   "map.select.layer": "Zdroj dát",
   "map.select.style": "",
+  "map.style.default": "Predvolené",
   "map.wfs.urlInput.hint": "Zadajte URL adresu služby WFS",
   "map.wms.urlInput.hint": "Zadajte URL adresu služby WMS",
   "multiselect.filter.placeholder": "Hľadať",