geonetwork-ui 2.10.0-dev.fb2893f44 → 2.10.0

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/external-link-card/external-link-card.component.html

@@ -54,8 +54,9 @@
         class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
         [style.background-color]="getLinkColor(link)"
         data-cy="download-format"
+        translate
       >
-        {{ getLinkFormat(link) || ('downloads.format.unknown' | translate) }}
+        downloads.format.{{ getLinkFormat(link) || 'unknown' }}
       </span>
     </div>
   </div>

package/src/libs/ui/elements/src/lib/external-link-card/external-link-card.component.ts

@@ -9,7 +9,7 @@ import {
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 import { iconoirDatabase } from '@ng-icons/iconoir'
 import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
-import { TranslatePipe } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 
 type CardSize = 'L' | 'M' | 'S' | 'XS'
 @Component({
@@ -18,7 +18,7 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
   styleUrls: ['./external-link-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, NgIconComponent, TranslatePipe],
+  imports: [CommonModule, NgIconComponent, TranslateDirective, TranslatePipe],
   providers: [
     provideIcons({
       matOpenInNew,

package/src/libs/ui/elements/src/lib/keyword-badge/keyword-badge.component.html

@@ -0,0 +1,14 @@
+<gn-ui-badge
+  [clickable]="!editable"
+  [removable]="editable"
+  (badgeClicked)="keywordClick.emit(keyword)"
+  (badgeRemoveClicked)="keywordRemove.emit(keyword)"
+  ><ng-container>{{ keyword.label }}</ng-container>
+  @if (editable && isPlaceWithoutExtent) {
+    <ng-icon
+      [title]="'editor.record.form.keywords.place.withoutExtent' | translate"
+      class="!text-[1.4em] ml-1"
+      name="matWarningAmberOutline"
+    ></ng-icon>
+  }
+</gn-ui-badge>

package/src/libs/ui/elements/src/lib/keyword-badge/keyword-badge.component.ts

@@ -0,0 +1,85 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { Keyword } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { BadgeComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
+import tippy from 'tippy.js'
+
+marker('domain.record.keywordType.theme')
+marker('domain.record.keywordType.place')
+marker('domain.record.keywordType.temporal')
+marker('domain.record.keywordType.other')
+
+@Component({
+  selector: 'gn-ui-keyword-badge',
+  templateUrl: './keyword-badge.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [BadgeComponent, NgIconComponent, TranslatePipe],
+  providers: [
+    provideIcons({
+      matWarningAmberOutline,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+})
+export class KeywordBadgeComponent implements AfterViewInit {
+  private translateService = inject(TranslateService)
+
+  @Input() keyword: Keyword
+  @Input() editable = false // if false, keyword is only clickable
+  @Output() keywordClick = new EventEmitter<Keyword>()
+  @Output() keywordRemove = new EventEmitter<Keyword>()
+  @ViewChild(BadgeComponent, { read: ElementRef }) badgeComponent: ElementRef
+
+  get segments(): string[] {
+    if (this.keyword.hierarchyPath?.length) {
+      return this.keyword.hierarchyPath
+    }
+    if (this.keyword.thesaurus?.name) {
+      return [this.keyword.thesaurus.name, this.keyword.label]
+    }
+    return [
+      this.translateService.instant(
+        `domain.record.keywordType.${this.keyword.type}`
+      ),
+      this.keyword.label,
+    ]
+  }
+
+  get isPlaceWithoutExtent(): boolean {
+    return this.keyword.type === 'place' && !this.keyword.bbox
+  }
+
+  ngAfterViewInit() {
+    const content = this.segments
+      .map(
+        (segment, i, arr) =>
+          `<span ${i === arr.length - 1 ? 'class="font-bold"' : ''}>${segment}</span>`
+      )
+      .join(' &gt; ')
+    tippy(this.badgeComponent.nativeElement, {
+      appendTo: () => document.body,
+      content,
+      allowHTML: true,
+    })
+  }
+}

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

@@ -16,3 +16,8 @@
   --gn-ui-badge-background-color: var(--color-primary-white);
   --gn-ui-badge-text-color: var(--color-primary-darkest);
 }
+
+.metadata-info-keywords {
+  --gn-ui-badge-padding: 0.25rem 0.5rem;
+  text-transform: lowercase;
+}

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

@@ -28,13 +28,10 @@
       <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
-            >
+            <gn-ui-keyword-badge
+              [keyword]="keyword"
+              (keywordClick)="onKeywordClick($event)"
+            ></gn-ui-keyword-badge>
           }
         </div>
       </gn-ui-max-lines>

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

@@ -22,10 +22,10 @@ import {
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BadgeComponent,
-  ButtonComponent,
   CopyTextButtonComponent,
 } from '../../../../../../libs/ui/inputs/src'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
+import { KeywordBadgeComponent } from '../keyword-badge/keyword-badge.component'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 import { matMailOutline } from '@ng-icons/material-icons/outline'
@@ -46,7 +46,6 @@ import { ContactPillComponent } from '../contact-pill/contact-pill.component'
     TranslatePipe,
     MarkdownParserComponent,
     ExpandablePanelComponent,
-    ButtonComponent,
     BadgeComponent,
     ContentGhostComponent,
     MaxLinesComponent,
@@ -56,6 +55,7 @@ import { ContactPillComponent } from '../contact-pill/contact-pill.component'
     GnUiHumanizeDateDirective,
     SpatialExtentComponent,
     ContactPillComponent,
+    KeywordBadgeComponent,
   ],
   viewProviders: [
     provideIcons({

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/badge/badge.component.html

@@ -1,27 +1,34 @@
-<div
-  class="gn-ui-badge flex items-center gap-1.5"
-  [ngClass]="
-    clickable
-      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'
-      : ''
-  "
->
+<ng-template #badgeContent>
   <span><ng-content></ng-content></span>
-  @if (removable) {
-    <gn-ui-button
-      type="light"
-      (buttonClick)="removeBadge()"
-      extraClass="text-xs border-0 px-0 py-0"
-      style="
-        --gn-ui-button-padding: 0;
-        --gn-ui-button-font-size: 0.8em;
-        --gn-ui-button-width: 1.4em;
-        --gn-ui-button-height: 1.4em;
-        --gn-ui-button-rounded: 1.4em;
-        --gn-ui-button-background: var(--gn-ui-badge-background-color, white);
-      "
-    >
-      <ng-icon name="matClose"></ng-icon>
-    </gn-ui-button>
-  }
-</div>
+</ng-template>
+
+@if (clickable) {
+  <button
+    type="button"
+    class="gn-ui-badge-clickable"
+    (click)="handleClick($event)"
+  >
+    <ng-container [ngTemplateOutlet]="badgeContent"></ng-container>
+  </button>
+} @else {
+  <span class="gn-ui-badge gap-1.5">
+    <ng-container [ngTemplateOutlet]="badgeContent"></ng-container>
+    @if (removable) {
+      <gn-ui-button
+        type="light"
+        (buttonClick)="removeBadge()"
+        extraClass="text-xs border-0 px-0 py-0"
+        style="
+          --gn-ui-button-padding: 0;
+          --gn-ui-button-font-size: 0.8em;
+          --gn-ui-button-width: 1.4em;
+          --gn-ui-button-height: 1.4em;
+          --gn-ui-button-rounded: 1.4em;
+          --gn-ui-button-background: var(--gn-ui-badge-background-color, white);
+        "
+      >
+        <ng-icon name="matClose"></ng-icon>
+      </gn-ui-button>
+    }
+  </span>
+}

package/src/libs/ui/inputs/src/lib/badge/badge.component.ts

@@ -13,6 +13,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { matClose } from '@ng-icons/material-icons/baseline'
+import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-badge',
@@ -34,8 +35,16 @@ export class BadgeComponent {
   @Input() clickable? = false
   @Input() removable? = false
   @Output() badgeRemoveClicked = new EventEmitter<void>()
+  @Output() badgeClicked = new EventEmitter<void>()
 
   removeBadge() {
     this.badgeRemoveClicked.emit()
   }
+
+  handleClick(event: MouseEvent) {
+    this.badgeClicked.emit()
+    event.preventDefault()
+    ;(event.currentTarget as HTMLElement).blur()
+    propagateToDocumentOnly(event)
+  }
 }

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/inputs/src/lib/text-input/text-input.component.css

@@ -1,3 +0,0 @@
-.invalid {
-  border-color: var(--color-secondary);
-}

package/src/libs/ui/inputs/src/lib/text-input/text-input.component.html

@@ -1,13 +1,17 @@
 <input
   #input
   class="gn-ui-text-input"
-  [ngClass]="extraClass"
-  type="text"
-  [value]="value"
+  [class]="extraClass()"
+  [ngClass]="{
+    'border-red-400 focus:border-red-800 hover:border-red-800 text-red-800':
+      !isValid(),
+  }"
+  [type]="type()"
+  [(ngModel)]="inputModel"
   (change)="handleChange($event)"
   (input)="handleChange($event)"
-  [placeholder]="placeholder"
-  [attr.aria-label]="placeholder"
-  [attr.required]="required || null"
-  [disabled]="disabled"
+  [placeholder]="placeholder()"
+  [attr.aria-label]="placeholder()"
+  [attr.required]="required() || null"
+  [disabled]="disabled()"
 />

package/src/libs/ui/inputs/src/lib/text-input/text-input.component.ts

@@ -1,45 +1,71 @@
 import {
-  AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
-  Input,
-  Output,
-  ViewChild,
+  computed,
+  ElementRef,
+  input,
+  output,
+  signal,
+  viewChild,
 } from '@angular/core'
-import { distinctUntilChanged } from 'rxjs/operators'
-import { Subject } from 'rxjs'
-import { CommonModule } from '@angular/common'
+import { NgClass } from '@angular/common'
+import { FormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-text-input',
   templateUrl: './text-input.component.html',
   styleUrls: ['./text-input.component.css'],
   standalone: true,
-  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgClass, FormsModule],
 })
-export class TextInputComponent implements AfterViewInit {
-  @Input() value = ''
-  @Input() extraClass = ''
-  @Input() placeholder: string
-  @Input() required = false
-  @Input() disabled: boolean
-  rawChange = new Subject<string>()
-  @Output() valueChange = this.rawChange.pipe(distinctUntilChanged())
-  @ViewChild('input') input
+export class TextInputComponent {
+  value = input<string, string>('', {
+    transform: (v: string) => {
+      this.inputModel.set(v)
+      // make sure the native element value is up to date
+      // TODO: use form() signal when migrated to angular 22 for cleaner implementation
+      if (this.inputRef()) {
+        this.inputRef().nativeElement.value = v
+      }
+      return v
+    },
+  })
+  extraClass = input('')
+  placeholder = input<string>()
+  required = input(false)
+  disabled = input<boolean>()
+  type = input('text', {
+    transform: (type: string) => {
+      // make sure the native element type is up to date
+      // TODO: use form() signal when migrated to angular 22 for cleaner implementation
+      if (this.inputRef()) {
+        this.inputRef().nativeElement.type = type
+      }
+      return type
+    },
+  })
 
-  ngAfterViewInit() {
-    this.checkRequired(this.input.nativeElement.value)
-  }
+  valueChange = output<string>()
 
-  checkRequired(value) {
-    this.input.nativeElement.classList.toggle(
-      'invalid',
-      this.required && value === ''
-    )
-  }
+  inputModel = signal('')
+  inputRef = viewChild<ElementRef<HTMLInputElement>>('input')
+
+  isValid = computed<boolean>(() => {
+    const isValid = this.inputRef().nativeElement.checkValidity()
+    const isEmpty = this.inputModel().trim() === ''
+    const isRequired = this.required()
+    return isValid && !(isEmpty && isRequired)
+  })
+
+  private lastEmittedValue: string | undefined = undefined
 
-  handleChange($event) {
-    const value = $event.target.value
-    this.checkRequired(value)
-    this.rawChange.next(value)
+  handleChange($event: Event) {
+    const input = $event.target as HTMLInputElement
+    const value = input.value
+    if (value === this.lastEmittedValue) return
+    this.inputModel.set(value)
+    this.lastEmittedValue = value
+    this.valueChange.emit(value)
   }
 }

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">