geonetwork-ui 2.10.0-dev.37a1e4c4d → 2.10.0-dev.394310529

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

@@ -1,12 +1,12 @@
 <div
-  class="bg-gray-50 text-black rounded border border-gray-200 shadow-md p-4 flex flex-col gap-3 w-full"
+  class="bg-gray-50 text-black rounded border border-gray-200 shadow-md p-4 flex flex-col gap-2 w-full"
   data-test="contact-details"
 >
   @if (displayName) {
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-2.5">
       @if (organization?.logoUrl?.href) {
         <div
-          class="flex items-center justify-center rounded-md bg-white w-14 h-14 shrink-0 overflow-hidden"
+          class="flex items-center justify-center rounded-lg bg-white w-14 h-14 shrink-0 overflow-hidden"
         >
           <gn-ui-thumbnail
             class="relative h-full w-full"
@@ -23,74 +23,66 @@
     </div>
   }
 
-  <!-- Email + phone: always shown; icon dimmed when field is absent -->
-  <div class="grid grid-cols-2 gap-1 rounded-md overflow-hidden">
-    <div class="bg-gray-100 flex items-center gap-2 px-3 py-2">
-      <ng-icon
-        class="!w-5 !h-5 !text-[20px] shrink-0"
-        [class.opacity-30]="!contact.email"
-        [class.opacity-75]="!!contact.email"
-        name="matMailOutline"
-      ></ng-icon>
+  @if (contact.email || contact.phone) {
+    <div
+      class="grid gap-1 items-start"
+      [class.grid-cols-2]="contact.email && contact.phone"
+    >
       @if (contact.email) {
-        <a
-          [href]="'mailto:' + contact.email"
-          class="text-sm break-all hover:underline"
-          data-test="contact-details-email"
-          >{{ contact.email }}</a
-        >
+        <div class="bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2">
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] shrink-0 opacity-30"
+            name="matMailOutline"
+          ></ng-icon>
+          <a
+            [href]="'mailto:' + contact.email"
+            class="text-sm break-all hover:underline"
+            data-test="contact-details-email"
+            >{{ contact.email }}</a
+          >
+        </div>
       }
-    </div>
-    <div class="bg-gray-100 flex items-center gap-2 px-3 py-2">
-      <ng-icon
-        class="!w-5 !h-5 !text-[20px] shrink-0"
-        [class.opacity-30]="!contact.phone"
-        [class.opacity-75]="!!contact.phone"
-        name="matCallOutline"
-      ></ng-icon>
       @if (contact.phone) {
-        <span class="text-sm" data-test="contact-details-phone">{{
-          contact.phone
-        }}</span>
+        <div class="bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2">
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] shrink-0 opacity-30"
+            name="matCallOutline"
+          ></ng-icon>
+          <span class="text-sm" data-test="contact-details-phone">{{
+            contact.phone
+          }}</span>
+        </div>
       }
     </div>
-  </div>
+  }
 
-  <!-- Address: always shown; icon dimmed when absent -->
-  <div class="bg-gray-100 rounded-md flex items-start gap-2 px-3 py-2">
-    <ng-icon
-      class="!w-5 !h-5 !text-[20px] shrink-0 mt-0.5"
-      [class.opacity-30]="!addressLines.length"
-      [class.opacity-75]="!!addressLines.length"
-      name="matLocationOnOutline"
-    ></ng-icon>
-    @if (addressLines.length) {
+  @if (addressLines.length) {
+    <div class="bg-gray-100 rounded-lg flex items-start gap-2 px-3 py-2">
+      <ng-icon
+        class="!w-5 !h-5 !text-[20px] shrink-0 mt-0.5 opacity-30"
+        name="matLocationOnOutline"
+      ></ng-icon>
       <div class="flex flex-col" data-test="contact-details-address">
         @for (line of addressLines; track line) {
           <p class="text-sm m-0">{{ line }}</p>
         }
       </div>
-    }
-  </div>
+    </div>
+  }
 
-  <!-- Website: only shown when org exists; icon dimmed when absent -->
-  @if (organization) {
-    <div class="bg-gray-100 rounded-md flex items-center gap-2 px-3 py-2">
+  @if (organization?.website) {
+    <div class="bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2">
       <ng-icon
-        class="!w-5 !h-5 !text-[20px] shrink-0"
-        [class.opacity-30]="!organization.website"
-        [class.opacity-75]="!!organization.website"
+        class="!w-5 !h-5 !text-[20px] shrink-0 opacity-30"
         name="matOpenInNew"
       ></ng-icon>
-      @if (organization.website) {
-        <a
-          [href]="organization.website.href"
-          target="_blank"
-          class="text-sm break-all hover:underline"
-          data-test="contact-details-website"
-          >{{ organization.website.href }}</a
-        >
-      }
+      <a
+        [href]="organization.website.href"
+        target="_blank"
+        class="text-sm break-all hover:underline"
+        data-test="contact-details-website"
+        >{{ organization.website.href }}</a
+      >
     </div>
   }
 </div>

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

@@ -28,13 +28,23 @@
       <gn-ui-max-lines [maxLines]="7">
         <div class="metadata-info-keywords sm:pb-4 flex flex-wrap gap-2">
           @for (keyword of metadata.keywords; track keyword) {
-            <gn-ui-button
-              type="primary-light"
-              class="inline-block opacity-70"
-              extraClass="lowercase text-sm py-1 px-2"
-              (buttonClick)="onKeywordClick(keyword)"
-              >{{ keyword.label }}</gn-ui-button
-            >
+            <ng-template #keywordTooltip>
+              @for (segment of keywordTooltipSegments(keyword); track $index) {
+                <span [class.font-bold]="$last">{{ segment }}</span>
+                @if (!$last) {
+                  <span> &gt; </span>
+                }
+              }
+            </ng-template>
+            <gn-ui-popover [content]="keywordTooltip" theme="dark">
+              <gn-ui-button
+                type="primary-light"
+                class="inline-block opacity-70"
+                extraClass="lowercase text-sm py-1 px-2"
+                (buttonClick)="onKeywordClick(keyword)"
+                >{{ keyword.label }}</gn-ui-button
+              >
+            </gn-ui-popover>
           }
         </div>
       </gn-ui-max-lines>

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

@@ -19,12 +19,18 @@ import {
   ExpandablePanelComponent,
   MaxLinesComponent,
 } from '../../../../../../libs/ui/layout/src'
-import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
   BadgeComponent,
   ButtonComponent,
   CopyTextButtonComponent,
 } from '../../../../../../libs/ui/inputs/src'
+import { PopoverComponent } from '../../../../../../libs/ui/widgets/src'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
@@ -35,6 +41,11 @@ import { GnUiHumanizeDateDirective } from '../../../../../../libs/util/shared/sr
 import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
 import { ContactPillComponent } from '../contact-pill/contact-pill.component'
 
+marker('domain.record.keywordType.theme')
+marker('domain.record.keywordType.place')
+marker('domain.record.keywordType.temporal')
+marker('domain.record.keywordType.other')
+
 @Component({
   selector: 'gn-ui-metadata-info',
   templateUrl: './metadata-info.component.html',
@@ -56,6 +67,7 @@ import { ContactPillComponent } from '../contact-pill/contact-pill.component'
     GnUiHumanizeDateDirective,
     SpatialExtentComponent,
     ContactPillComponent,
+    PopoverComponent,
   ],
   viewProviders: [
     provideIcons({
@@ -66,6 +78,7 @@ import { ContactPillComponent } from '../contact-pill/contact-pill.component'
 })
 export class MetadataInfoComponent {
   private dateService = inject(DateService)
+  private translateService = inject(TranslateService)
 
   @Input() metadata: Partial<CatalogRecord>
   @Input() incomplete: boolean
@@ -167,4 +180,19 @@ export class MetadataInfoComponent {
   onKeywordClick(keyword: Keyword) {
     this.keyword.emit(keyword)
   }
+
+  keywordTooltipSegments(keyword: Keyword): string[] {
+    if (keyword.hierarchyPath?.length) {
+      return keyword.hierarchyPath
+    }
+    if (keyword.thesaurus?.name) {
+      return [keyword.thesaurus.name, keyword.label]
+    }
+    return [
+      this.translateService.instant(
+        `domain.record.keywordType.${keyword.type}`
+      ),
+      keyword.label,
+    ]
+  }
 }

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

@@ -52,12 +52,11 @@
           </gn-ui-text-input>
           @if (!supportOffset) {
             <div class="flex items-center gap-2 text-orange-500 z-10 ml-3">
-              <span
-                class="material-symbols-outlined"
+              <ng-icon
+                name="matWarningOutline"
+                size="24"
                 matTooltip="Not supported on this service"
-              >
-                warning
-              </span>
+              ></ng-icon>
             </div>
           }
         </div>

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

@@ -15,6 +15,8 @@ import {
 import { CommonModule } from '@angular/common'
 import { TranslateDirective } from '@ngx-translate/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matWarningOutline } from '@ng-icons/material-icons/outline'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -35,7 +37,9 @@ const DEFAULT_PARAMS = {
     CopyTextButtonComponent,
     TranslateDirective,
     MatTooltipModule,
+    NgIconComponent,
   ],
+  providers: [provideIcons({ matWarningOutline })],
 })
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {

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

@@ -51,7 +51,7 @@
   <div
     class="bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container"
     [style.max-height]="overlayMaxHeight"
-    [style.width]="overlayWidth"
+    [style.min-width]="overlayMinWidth"
     role="listbox"
     tabindex="-1"
     [attr.id]="id"

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

@@ -3,12 +3,12 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  inject,
   Input,
   Output,
   QueryList,
   ViewChild,
   ViewChildren,
-  inject,
 } from '@angular/core'
 import {
   CdkConnectedOverlay,
@@ -85,7 +85,7 @@ export class DropdownMultiselectComponent {
   ]
   scrollStrategy = this.scrollStrategies.reposition()
   overlayOpen = false
-  overlayWidth = 'auto'
+  overlayMinWidth = 'none'
   overlayMaxHeight = 'none'
   id = `dropdown-multiselect-${Math.floor(Math.random() * 10000)}`
 
@@ -120,7 +120,7 @@ export class DropdownMultiselectComponent {
   }
 
   openOverlay() {
-    this.overlayWidth =
+    this.overlayMinWidth =
       this.overlayOrigin.elementRef.nativeElement.getBoundingClientRect()
         .width + 'px'
     this.overlayMaxHeight = this.maxRows

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html

@@ -3,14 +3,14 @@
     <span class="flex-none font-bold" translate="">{{ label }}</span>
     <div class="flex-1 flex justify-end items-center">
       <ng-content select="[form-field-interaction]"></ng-content>
-      <span
+      <ng-icon
         *ngIf="hint"
-        class="material-symbols-outlined m-2 gn-ui-icon-small"
+        name="matHelpOutline"
+        size="16"
+        class="m-2"
         [matTooltip]="hint"
         matTooltipPosition="above"
-      >
-        help
-      </span>
+      ></ng-icon>
     </div>
   </div>
   <div class="flex-1 mt-2">

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts

@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { CommonModule } from '@angular/common'
 import { TranslateDirective } from '@ngx-translate/core'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matHelpOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-form-field-wrapper',
@@ -9,7 +11,13 @@ import { TranslateDirective } from '@ngx-translate/core'
   styleUrls: ['./form-field-wrapper.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatTooltipModule, CommonModule, TranslateDirective],
+  imports: [
+    MatTooltipModule,
+    CommonModule,
+    TranslateDirective,
+    NgIconComponent,
+  ],
+  providers: [provideIcons({ matHelpOutline })],
 })
 export class FormFieldWrapperComponent {
   @Input() label?: string

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

@@ -37,7 +37,7 @@
       (click)="handleRowClick(item)"
       data-cy="table-row"
       [attr.data-cy-title]="item.title"
-      [title]="getItemTitle(item) | translate"
+      [title]="getItemTitle(item) | translate: { recordKind: item['kind'] }"
     >
       <div
         class="relative h-0"

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

@@ -16,9 +16,6 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { Observable, of } from 'rxjs'
 
-marker('editor.record.lock.resourceType')
-marker('editor.record.lock.harvested')
-marker('editor.record.lock.owner')
 @Component({
   selector: 'gn-ui-interactive-table',
   templateUrl: './interactive-table.component.html',
@@ -53,12 +50,10 @@ export class InteractiveTableComponent {
 
   getItemTitle(item: CatalogRecord) {
     if (!this.isDraftPage) {
-      if (item.kind !== 'dataset') {
-        return 'editor.record.lock.resourceType'
-      } else if (item.extras?.isHarvested) {
-        return 'editor.record.lock.harvested'
+      if (item.extras?.isHarvested) {
+        return marker('editor.record.lock.harvested')
       } else if (!item.extras?.edit) {
-        return 'editor.record.lock.owner'
+        return marker('editor.record.lock.owner')
       }
     }
     return ''

package/src/libs/ui/layout/src/lib/sortable-list/sortable-list.component.html

@@ -5,12 +5,12 @@
 >
   @for (item of items; track trackByFn(index); let index = $index) {
     <div class="sortable-box bg-white flex items-center" cdkDrag>
-      <span
+      <ng-icon
         cdkDragHandle
-        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
-      >
-        drag_handle
-      </span>
+        name="matDragHandleOutline"
+        size="20"
+        class="mx-[10px] cursor-grab flex-none"
+      ></ng-icon>
       <div class="flex-1">
         <ng-container
           *ngTemplateOutlet="
@@ -29,8 +29,8 @@
         class="ml-[8px] mr-[10px]"
         (buttonClick)="removeItem(index)"
         data-test="remove-item"
-        ><span class="material-symbols-outlined gn-ui-icon-medium">close</span>
-      </gn-ui-button>
+        ><ng-icon name="matCloseOutline" size="20"></ng-icon
+      ></gn-ui-button>
     </div>
   }
 </div>

package/src/libs/ui/layout/src/lib/sortable-list/sortable-list.component.ts

@@ -15,6 +15,11 @@ import {
   TemplateRef,
 } from '@angular/core'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  matCloseOutline,
+  matDragHandleOutline,
+} from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-sortable-list',
@@ -22,7 +27,15 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
   styleUrls: ['sortable-list.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, CdkDropList, CdkDrag, CdkDragHandle, ButtonComponent],
+  imports: [
+    CommonModule,
+    CdkDropList,
+    CdkDrag,
+    CdkDragHandle,
+    ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [provideIcons({ matDragHandleOutline, matCloseOutline })],
 })
 export class SortableListComponent {
   @Input() elementTemplate: TemplateRef<unknown>

package/src/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.html

@@ -52,10 +52,10 @@
       class="w-72 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl"
     >
       <span class="text-lg font-bold text-center">{{
-        'editor.record.delete.confirmation.title' | translate
+        'editor.record.delete.confirmation.title' | translate: { recordKind }
       }}</span>
       <span class="text-center">{{
-        'editor.record.delete.confirmation.message' | translate
+        'editor.record.delete.confirmation.message' | translate: { recordKind }
       }}</span>
       <div class="flex flex-row gap-8 justify-center">
         <gn-ui-button
@@ -65,14 +65,16 @@
           data-cy="confirm-button"
           [style.--gn-ui-button-width]="'100px'"
           >{{
-            'editor.record.delete.confirmation.confirmText' | translate
+            'editor.record.delete.confirmation.confirmText'
+              | translate: { recordKind }
           }}</gn-ui-button
         >
         <gn-ui-button
           [style.--gn-ui-button-width]="'100px'"
           (buttonClick)="closeActionMenu.emit()"
           >{{
-            'editor.record.delete.confirmation.cancelText' | translate
+            'editor.record.delete.confirmation.cancelText'
+              | translate: { recordKind }
           }}</gn-ui-button
         >
       </div>
@@ -84,10 +86,10 @@
       class="w-80 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl"
     >
       <span class="text-lg font-bold text-center">{{
-        'editor.record.undo.confirmation.title' | translate
+        'editor.record.undo.confirmation.title' | translate: { recordKind }
       }}</span>
       <span class="text-center">{{
-        'editor.record.undo.confirmation.message' | translate
+        'editor.record.undo.confirmation.message' | translate: { recordKind }
       }}</span>
       <div class="flex flex-row gap-8 justify-center">
         <gn-ui-button
@@ -97,14 +99,16 @@
           data-cy="confirm-button"
           [style.--gn-ui-button-width]="'120px'"
           >{{
-            'editor.record.undo.confirmation.confirmText' | translate
+            'editor.record.undo.confirmation.confirmText'
+              | translate: { recordKind }
           }}</gn-ui-button
         >
         <gn-ui-button
           [style.--gn-ui-button-width]="'120px'"
           (buttonClick)="closeActionMenu.emit()"
           >{{
-            'editor.record.undo.confirmation.cancelText' | translate
+            'editor.record.undo.confirmation.cancelText'
+              | translate: { recordKind }
           }}</gn-ui-button
         >
       </div>

package/src/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.ts

@@ -2,15 +2,16 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
   ViewChild,
-  inject,
 } from '@angular/core'
 import { MatDialog, MatDialogModule } from '@angular/material/dialog'
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
 import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import { RecordKind } from '../../../../../../../libs/common/domain/src/lib/model'
 
 type ActionMenuPage = 'mainMenu' | 'deleteMenu' | 'rollbackMenu'
 
@@ -35,6 +36,7 @@ export class ActionMenuComponent {
   @Input() isDuplicating: boolean
   @Input() canDelete = true
   @Input() page: 'draft' | 'main' | 'record'
+  @Input() recordKind: RecordKind
   @Output() duplicate = new EventEmitter<void>()
   @Output() delete = new EventEmitter<void>()
   @Output() closeActionMenu = new EventEmitter<void>()

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

@@ -172,6 +172,7 @@
           (delete)="handleDelete(item)"
           (closeActionMenu)="closeActionMenu()"
           (rollback)="handleRollback(item)"
+          [recordKind]="item.kind"
         >
         </gn-ui-action-menu>
       </ng-template>

package/src/libs/ui/widgets/src/lib/popover/popover.component.ts

@@ -28,7 +28,13 @@ export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   @ViewChild('popoverContent', { static: false }) popoverContent: ElementRef
   @Input() content: string | TemplateRef<any>
-  @Input() theme: 'light' | 'light-border' | 'translucent' | 'material' | ''
+  @Input() theme:
+    | 'light'
+    | 'light-border'
+    | 'translucent'
+    | 'material'
+    | 'dark'
+    | ''
 
   private tippyInstance: Instance
   private view: EmbeddedViewRef<any>