geonetwork-ui 2.10.0-dev.bf2e85a24 → 2.10.0-dev.bfea85a63

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts

@@ -7,40 +7,20 @@ import {
   inject,
 } from '@angular/core'
 import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import { AutocompleteComponent, BadgeComponent } from '../../../../../../../libs/ui/inputs/src'
+import { AutocompleteComponent } from '../../../../../../../libs/ui/inputs/src'
+import { KeywordBadgeComponent } from '../../../../../../../libs/ui/elements/src'
 import { map } from 'rxjs'
 import { Keyword } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
-import { TranslatePipe } from '@ngx-translate/core'
-import {
-  NgIconComponent,
-  provideIcons,
-  provideNgIconsConfig,
-} from '@ng-icons/core'
-import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
 
 type AutocompleteItem = { title: string; value: Keyword }
 
 @Component({
   selector: 'gn-ui-generic-keywords',
   templateUrl: './generic-keywords.component.html',
-  styleUrls: ['./generic-keywords.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    AutocompleteComponent,
-    NgIconComponent,
-    BadgeComponent,
-    TranslatePipe,
-  ],
-  providers: [
-    provideIcons({
-      matWarningAmberOutline,
-    }),
-    provideNgIconsConfig({
-      size: '1.5em',
-    }),
-  ],
+  imports: [AutocompleteComponent, KeywordBadgeComponent],
 })
 export class GenericKeywordsComponent {
   private platformService = inject(PlatformServiceInterface)
@@ -87,9 +67,4 @@ export class GenericKeywordsComponent {
     this.changedKeywords.emit(this.keywords)
     this.deletedKeyword.emit(keyword)
   }
-
-  isPlaceWithoutExtent(keyword: Keyword): boolean {
-    if (keyword.type !== 'place') return false
-    return !keyword.bbox
-  }
 }

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

@@ -138,6 +138,7 @@ export class FormFieldConstraintsShortcutsComponent implements OnDestroy {
             this.editorFacade.setFieldVisibility({ model }, visible)
           })
       }
+      hideEmptyConstraints(this.legalConstraints$, 'legalConstraints')
       hideEmptyConstraints(this.securityConstraints$, 'securityConstraints')
       hideEmptyConstraints(this.otherConstraints$, 'otherConstraints')
     })

package/src/libs/ui/elements/src/index.ts

@@ -11,6 +11,7 @@ export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/kind-badge/kind-badge.component'
 export * from './lib/external-link-card/external-link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
+export * from './lib/keyword-badge/keyword-badge.component'
 export * from './lib/markdown-parser/markdown-parser.component'
 export * from './lib/metadata-catalog/metadata-catalog.component'
 export * from './lib/metadata-contact/metadata-contact.component'

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,23 +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) {
-            <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>
+            <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

@@ -19,19 +19,13 @@ import {
   ExpandablePanelComponent,
   MaxLinesComponent,
 } from '../../../../../../libs/ui/layout/src'
-import {
-  TranslateDirective,
-  TranslatePipe,
-  TranslateService,
-} from '@ngx-translate/core'
-import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 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 { 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'
@@ -41,11 +35,6 @@ 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',
@@ -57,7 +46,6 @@ marker('domain.record.keywordType.other')
     TranslatePipe,
     MarkdownParserComponent,
     ExpandablePanelComponent,
-    ButtonComponent,
     BadgeComponent,
     ContentGhostComponent,
     MaxLinesComponent,
@@ -67,7 +55,7 @@ marker('domain.record.keywordType.other')
     GnUiHumanizeDateDirective,
     SpatialExtentComponent,
     ContactPillComponent,
-    PopoverComponent,
+    KeywordBadgeComponent,
   ],
   viewProviders: [
     provideIcons({
@@ -78,7 +66,6 @@ marker('domain.record.keywordType.other')
 })
 export class MetadataInfoComponent {
   private dateService = inject(DateService)
-  private translateService = inject(TranslateService)
 
   @Input() metadata: Partial<CatalogRecord>
   @Input() incomplete: boolean
@@ -180,19 +167,4 @@ 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/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/tailwind.base.css

@@ -1,5 +1,3 @@
-@import './material-styles.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -186,9 +184,18 @@
     --text-color: var(--gn-ui-badge-text-color, var(--color-gray-50));
     --background-color: var(--gn-ui-badge-background-color, black);
     --opacity: var(--gn-ui-badge-opacity, 0.7);
+    text-transform: inherit;
     @apply opacity-[--opacity] p-[--padding] rounded-[--rounded]
       font-[--font-weight] text-[length:--text-size] text-[color:--text-color] bg-[color:--background-color] flex justify-center items-center content-center;
   }
+  .gn-ui-badge-clickable {
+    @apply gn-ui-badge hover:bg-primary focus:bg-primary active:bg-primary-darker
+    hover:text-white active:text-white focus:text-white
+    transition-all duration-100
+    outline-none
+    relative
+    focus:z-10 active:z-10 hover:z-10;
+  }
   /* makes sure icons will not make the badges grow vertically; also make size proportional */
   .gn-ui-badge ng-icon {
     margin-top: -0.325em;