geonetwork-ui 2.10.0-dev.cf0577fae → 2.10.0-dev.d37bc8ad9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/fesm2022/geonetwork-ui.mjs +435 -5787
  2. package/fesm2022/geonetwork-ui.mjs.map +1 -1
  3. package/index.d.ts +108 -67
  4. package/index.d.ts.map +1 -1
  5. package/material-styles.css +483 -0
  6. package/package.json +25 -35
  7. package/src/libs/api/metadata-converter/src/lib/gn4/atomic-operations.ts +48 -7
  8. package/src/libs/api/metadata-converter/src/lib/gn4/gn4.field.mapper.ts +5 -4
  9. package/src/libs/api/metadata-converter/src/lib/gn4/metadata-url.service.ts +2 -2
  10. package/src/libs/api/metadata-converter/src/lib/gn4/types/metadata.model.ts +1 -0
  11. package/src/libs/api/repository/src/lib/gn4/auth/auth.service.ts +4 -4
  12. package/src/libs/api/repository/src/lib/gn4/elasticsearch/elasticsearch.service.ts +2 -2
  13. package/src/libs/api/repository/src/lib/gn4/gn4-repository.ts +44 -30
  14. package/src/libs/api/repository/src/lib/gn4/organizations/organizations-from-groups.service.ts +1 -1
  15. package/src/libs/api/repository/src/lib/gn4/organizations/organizations-from-metadata.service.ts +1 -1
  16. package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.service.ts +48 -2
  17. package/src/libs/common/domain/src/lib/model/record/metadata.model.ts +2 -5
  18. package/src/libs/common/domain/src/lib/model/thesaurus/thesaurus.model.ts +2 -1
  19. package/src/libs/common/domain/src/lib/model/user/group.model.ts +8 -0
  20. package/src/libs/common/domain/src/lib/model/user/index.ts +1 -0
  21. package/src/libs/common/domain/src/lib/platform.service.interface.ts +2 -0
  22. package/src/libs/feature/catalog/src/lib/sources/sources.service.ts +5 -2
  23. package/src/libs/feature/editor/src/lib/components/constraint-card/constraint-card.component.ts +0 -2
  24. package/src/libs/feature/editor/src/lib/components/record-form/form-field/field-focus.directive.ts +4 -1
  25. package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-constraints-shortcuts/form-field-constraints-shortcuts.component.ts +6 -7
  26. package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-topics/form-field-topics.component.ts +2 -2
  27. package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.css +0 -34
  28. package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.css +35 -0
  29. package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.html +5 -1
  30. package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.ts +35 -19
  31. package/src/libs/feature/editor/src/lib/fields.config.ts +60 -47
  32. package/src/libs/feature/map/src/lib/utils/map-utils.service.ts +33 -0
  33. package/src/libs/feature/record/src/lib/map-view/map-view.component.ts +9 -1
  34. package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts +2 -2
  35. package/src/libs/ui/dataviz/src/index.ts +0 -1
  36. package/src/libs/ui/elements/src/lib/contact-details/contact-details.component.html +1 -1
  37. package/src/libs/ui/elements/src/lib/contact-pill/contact-pill.component.html +7 -3
  38. package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.css +13 -0
  39. package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html +13 -3
  40. package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts +43 -6
  41. package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.ts +2 -2
  42. package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html +18 -8
  43. package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts +29 -1
  44. package/src/libs/ui/inputs/src/lib/button/button.component.ts +4 -0
  45. package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts +2 -2
  46. package/src/libs/ui/map/src/lib/components/spatial-extent/spatial-extent.component.ts +4 -54
  47. package/src/libs/ui/map/src/lib/map-utils.ts +48 -0
  48. package/src/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts +1 -1
  49. package/src/libs/ui/widgets/src/lib/popover/popover.component.ts +7 -1
  50. package/src/libs/util/app-config/src/lib/app-config.ts +21 -9
  51. package/src/libs/util/data-fetcher/src/lib/readers/base-file.ts +1 -2
  52. package/src/libs/util/data-fetcher/src/lib/readers/wfs.ts +6 -3
  53. package/src/libs/util/i18n/src/index.ts +0 -1
  54. package/src/libs/util/i18n/src/lib/i18n.constants.ts +17 -11
  55. package/src/libs/util/i18n/src/lib/i18n.interceptor.ts +2 -2
  56. package/src/libs/util/i18n/src/lib/i18n.providers.ts +14 -17
  57. package/src/libs/util/i18n/src/lib/test.translate.loader.ts +48 -0
  58. package/src/libs/util/shared/src/lib/links/link-utils.ts +1 -1
  59. package/src/libs/util/shared/src/lib/services/date.service.ts +3 -3
  60. package/src/libs/util/shared/src/lib/utils/geojson.ts +58 -1
  61. package/style.css +0 -1
  62. package/tailwind.base.css +8 -0
  63. package/translations/de.json +23 -19
  64. package/translations/en.json +23 -19
  65. package/translations/es.json +23 -19
  66. package/translations/fr.json +23 -19
  67. package/translations/it.json +23 -19
  68. package/translations/nl.json +23 -19
  69. package/translations/pt.json +23 -19
  70. package/translations/sk.json +23 -19
@@ -4,10 +4,12 @@ import {
4
4
  EditorField,
5
5
  EditorSection,
6
6
  } from './models/editor-config.model'
7
- import {
8
- INSPIRE_topic,
9
- Keyword,
10
- } from '../../../../../libs/common/domain/src/lib/model/record'
7
+ import { Keyword } from '../../../../../libs/common/domain/src/lib/model/record'
8
+
9
+ export interface ISOTopic {
10
+ value: string
11
+ label: string
12
+ }
11
13
 
12
14
  /**
13
15
  * This file contains the configuration of the fields that will be displayed in the editor.
@@ -359,75 +361,86 @@ export const SPATIAL_SCOPES: Keyword[] = [
359
361
  ]
360
362
 
361
363
  /************************************************************
362
- *************** INSPIRE TOPICS **************
364
+ *************** ISO TOPICS **************
363
365
  ************************************************************
364
366
  */
365
367
 
366
- export const INSPIRE_TOPICS: INSPIRE_topic[] = [
367
- { value: 'biota', label: 'editor.record.form.topics.inspire.biota' },
368
+ // label keys mirror the ISO MD_TopicCategoryCode value for consistency
369
+ // TODO: correctly handle code lists; for instance, this code list is specific to ISO 19139
370
+ export const ISO_TOPICS: ISOTopic[] = [
371
+ { value: 'biota', label: marker('editor.record.form.topics.iso.biota') },
368
372
  {
369
373
  value: 'boundaries',
370
- label: 'editor.record.form.topics.inspire.boundaries',
374
+ label: marker('editor.record.form.topics.iso.boundaries'),
371
375
  },
372
376
  {
373
377
  value: 'climatologyMeteorologyAtmosphere',
374
- label: 'editor.record.form.topics.inspire.climatology',
378
+ label: marker(
379
+ 'editor.record.form.topics.iso.climatologyMeteorologyAtmosphere'
380
+ ),
381
+ },
382
+ {
383
+ value: 'economy',
384
+ label: marker('editor.record.form.topics.iso.economy'),
385
+ },
386
+ {
387
+ value: 'elevation',
388
+ label: marker('editor.record.form.topics.iso.elevation'),
375
389
  },
376
- { value: 'economy', label: 'editor.record.form.topics.inspire.economy' },
377
- { value: 'elevation', label: 'editor.record.form.topics.inspire.elevation' },
378
390
  {
379
391
  value: 'environment',
380
- label: 'editor.record.form.topics.inspire.environnement',
392
+ label: marker('editor.record.form.topics.iso.environment'),
393
+ },
394
+ {
395
+ value: 'farming',
396
+ label: marker('editor.record.form.topics.iso.farming'),
397
+ },
398
+ {
399
+ value: 'geoscientificInformation',
400
+ label: marker('editor.record.form.topics.iso.geoscientificInformation'),
381
401
  },
382
- { value: 'farming', label: 'editor.record.form.topics.inspire.farming' },
383
402
  {
384
- value: 'geoscientific information',
385
- label: 'editor.record.form.topics.inspire.geoscientific',
403
+ value: 'health',
404
+ label: marker('editor.record.form.topics.iso.health'),
386
405
  },
387
- { value: 'health', label: 'editor.record.form.topics.inspire.health' },
388
406
  {
389
407
  value: 'imageryBaseMapsEarthCover',
390
- label: 'editor.record.form.topics.inspire.imagery',
408
+ label: marker('editor.record.form.topics.iso.imageryBaseMapsEarthCover'),
409
+ },
410
+ {
411
+ value: 'inlandWaters',
412
+ label: marker('editor.record.form.topics.iso.inlandWaters'),
391
413
  },
392
- { value: 'inlandWaters', label: 'editor.record.form.topics.inspire.waters' },
393
414
  {
394
415
  value: 'intelligenceMilitary',
395
- label: 'editor.record.form.topics.inspire.intelligence',
416
+ label: marker('editor.record.form.topics.iso.intelligenceMilitary'),
417
+ },
418
+ {
419
+ value: 'location',
420
+ label: marker('editor.record.form.topics.iso.location'),
421
+ },
422
+ {
423
+ value: 'oceans',
424
+ label: marker('editor.record.form.topics.iso.oceans'),
396
425
  },
397
- { value: 'Location', label: 'editor.record.form.topics.inspire.location' },
398
- { value: 'Oceans', label: 'editor.record.form.topics.inspire.oceans' },
399
426
  {
400
427
  value: 'planningCadastre',
401
- label: 'editor.record.form.topics.inspire.planning',
428
+ label: marker('editor.record.form.topics.iso.planningCadastre'),
402
429
  },
403
- { value: 'Society', label: 'editor.record.form.topics.inspire.society' },
404
- { value: 'Structure', label: 'editor.record.form.topics.inspire.structure' },
405
430
  {
406
- value: 'Transportation',
407
- label: 'editor.record.form.topics.inspire.transportation',
431
+ value: 'society',
432
+ label: marker('editor.record.form.topics.iso.society'),
433
+ },
434
+ {
435
+ value: 'structure',
436
+ label: marker('editor.record.form.topics.iso.structure'),
437
+ },
438
+ {
439
+ value: 'transportation',
440
+ label: marker('editor.record.form.topics.iso.transportation'),
408
441
  },
409
442
  {
410
443
  value: 'utilitiesCommunication',
411
- label: 'editor.record.form.topics.inspire.utilities',
444
+ label: marker('editor.record.form.topics.iso.utilitiesCommunication'),
412
445
  },
413
446
  ]
414
-
415
- marker('editor.record.form.topics.inspire.biota')
416
- marker('editor.record.form.topics.inspire.boundaries')
417
- marker('editor.record.form.topics.inspire.climatology')
418
- marker('editor.record.form.topics.inspire.economy')
419
- marker('editor.record.form.topics.inspire.elevation')
420
- marker('editor.record.form.topics.inspire.environnement')
421
- marker('editor.record.form.topics.inspire.farming')
422
- marker('editor.record.form.topics.inspire.geoscientific')
423
- marker('editor.record.form.topics.inspire.health')
424
- marker('editor.record.form.topics.inspire.imagery')
425
- marker('editor.record.form.topics.inspire.intelligence')
426
- marker('editor.record.form.topics.inspire.location')
427
- marker('editor.record.form.topics.inspire.oceans')
428
- marker('editor.record.form.topics.inspire.planning')
429
- marker('editor.record.form.topics.inspire.society')
430
- marker('editor.record.form.topics.inspire.structure')
431
- marker('editor.record.form.topics.inspire.transportation')
432
- marker('editor.record.form.topics.inspire.utilities')
433
- marker('editor.record.form.topics.inspire.waters')
@@ -2,6 +2,23 @@ import { Injectable } from '@angular/core'
2
2
  import { extend } from 'ol/extent.js'
3
3
  import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
4
4
  import { BoundingBox, getGeometryBoundingBox } from '../../../../../../libs/util/shared/src'
5
+ import { MapContextLayer } from '@geospatial-sdk/core'
6
+ import {
7
+ createSpatialExtentLayer,
8
+ SpatialExtentLayerStyle,
9
+ } from '../../../../../../libs/ui/map/src'
10
+
11
+ /**
12
+ * Style of the extent overlay drawn on top of the previewed data: a dashed
13
+ * black outline over a very light fill, so the extent stays readable without
14
+ * hiding the data underneath.
15
+ */
16
+ const RECORD_EXTENT_OVERLAY_STYLE: SpatialExtentLayerStyle = {
17
+ 'stroke-color': 'rgba(0, 0, 0, 0.6)',
18
+ 'stroke-width': 2,
19
+ 'stroke-line-dash': [8, 6],
20
+ 'fill-color': 'rgba(0, 0, 0, 0.03)',
21
+ }
5
22
 
6
23
  @Injectable({
7
24
  providedIn: 'root',
@@ -26,4 +43,20 @@ export class MapUtilsService {
26
43
  [Infinity, Infinity, -Infinity, -Infinity]
27
44
  )
28
45
  }
46
+
47
+ /**
48
+ * Builds a non-interactive overlay layer drawing the spatial extent(s)
49
+ * declared in the record's metadata (bounding boxes and/or geometries).
50
+ * Returns null when the record has no usable spatial extent.
51
+ *
52
+ * This is purely for display and is independent from the map's initial view,
53
+ * which is derived separately (see {@link getRecordExtent}).
54
+ */
55
+ getRecordExtentLayer(record: Partial<CatalogRecord>): MapContextLayer | null {
56
+ return createSpatialExtentLayer(record.spatialExtents ?? [], {
57
+ label: 'Spatial extent',
58
+ clickable: false,
59
+ style: RECORD_EXTENT_OVERLAY_STYLE,
60
+ })
61
+ }
29
62
  }
@@ -431,11 +431,19 @@ export class MapViewComponent implements AfterViewInit {
431
431
  }),
432
432
  withLatestFrom(this.mdViewFacade.metadata$),
433
433
  map(([context, metadata]) => {
434
- if (context.view) return context
434
+ // overlay the record's declared spatial extent on top of the data layers
435
+ const extentLayer = this.mapUtils.getRecordExtentLayer(metadata)
436
+ const layers = extentLayer
437
+ ? [...context.layers, extentLayer]
438
+ : context.layers
439
+ // the view (initial zoom) is derived from the data layer or, as a
440
+ // fallback, from the record extent — independently from the overlay above
441
+ if (context.view) return { ...context, layers }
435
442
  const extent = this.mapUtils.getRecordExtent(metadata)
436
443
  const view = extent ? { extent } : null
437
444
  return {
438
445
  ...context,
446
+ layers,
439
447
  view,
440
448
  }
441
449
  }),
@@ -1,4 +1,4 @@
1
- import { Component, InjectionToken, inject } from '@angular/core'
1
+ import { Component, inject, InjectionToken } from '@angular/core'
2
2
  import { LANGUAGE_STORAGE_KEY } from '../../../../../../libs/util/i18n/src'
3
3
  import { TranslateService } from '@ngx-translate/core'
4
4
  import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
@@ -26,7 +26,7 @@ export class LanguageSwitcherComponent {
26
26
  )
27
27
 
28
28
  get currentLang() {
29
- return this.translate.currentLang
29
+ return this.translate.getCurrentLang()
30
30
  }
31
31
 
32
32
  changeLanguage(value: unknown) {
@@ -1,4 +1,3 @@
1
1
  export * from './lib/chart/chart.component'
2
2
  export * from './lib/data-table/data-table.component'
3
- export * from './lib/data-table/data-table.fixtures'
4
3
  export * from './lib/figure/figure.component'
@@ -1,5 +1,5 @@
1
1
  <div
2
- class="bg-gray-50 rounded border border-gray-200 shadow-md p-4 flex flex-col gap-3 w-full"
2
+ class="bg-gray-50 text-black rounded border border-gray-200 shadow-md p-4 flex flex-col gap-3 w-full"
3
3
  data-test="contact-details"
4
4
  >
5
5
  @if (displayName) {
@@ -1,5 +1,5 @@
1
1
  <gn-ui-button
2
- [type]="overlayOpen ? 'primary' : 'primary-light'"
2
+ [type]="overlayOpen ? 'gray-light' : 'primary-light'"
3
3
  extraClass="group w-full min-h-12 gap-3 justify-between py-2 pl-5 pr-4 rounded"
4
4
  data-test="contact-pill"
5
5
  (buttonClick)="toggleOverlay()"
@@ -7,12 +7,16 @@
7
7
  #overlayOrigin="cdkOverlayOrigin"
8
8
  >
9
9
  <span
10
- class="font-title font-medium text-base leading-tight truncate group-hover:text-white"
10
+ class="font-title font-medium text-base leading-tight truncate"
11
+ [class]="!overlayOpen ? 'text-primary-black group-hover:text-white' : ''"
11
12
  [title]="displayName"
12
13
  >{{ displayName }}</span
13
14
  >
14
15
  <div
15
- class="gn-ui-card-icon items-center justify-center w-10 h-8 group-hover:border-white group-hover:text-white"
16
+ class="gn-ui-card-icon items-center justify-center w-10 h-8"
17
+ [class]="
18
+ !overlayOpen ? 'group-hover:border-white group-hover:text-white' : ''
19
+ "
16
20
  >
17
21
  @if (overlayOpen) {
18
22
  <ng-icon class="!w-6 !h-6 !text-[24px]" name="matClose"></ng-icon>
@@ -0,0 +1,13 @@
1
+ /** the animation values are made to be identical to the cdk overlay values */
2
+ .lightbox-image {
3
+ animation: show 400ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
4
+ opacity: 0;
5
+ transform: scale(0.9);
6
+ }
7
+
8
+ @keyframes show {
9
+ 100% {
10
+ opacity: 1;
11
+ transform: none;
12
+ }
13
+ }
@@ -1,5 +1,5 @@
1
1
  <gn-ui-content-ghost
2
- [showContent]="imageUrl !== undefined"
2
+ [showContent]="imageUrl() !== undefined"
3
3
  ghostClass="h-full w-full"
4
4
  >
5
5
  @if (imageUrl) {
@@ -9,7 +9,7 @@
9
9
  >
10
10
  <gn-ui-thumbnail
11
11
  class="relative h-full w-full"
12
- [thumbnailUrl]="imageUrl"
12
+ [thumbnailUrl]="imageUrl()"
13
13
  fit="cover"
14
14
  (placeholderShown)="isPlaceholderShown.emit($event)"
15
15
  ></gn-ui-thumbnail>
@@ -18,7 +18,7 @@
18
18
  class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
19
19
  [type]="'outline'"
20
20
  [extraClass]="'!py-2 !px-0'"
21
- (buttonClick)="openLightbox(imageUrl)"
21
+ (buttonClick)="openLightbox()"
22
22
  >
23
23
  <ng-icon name="matZoomOutMap"></ng-icon>
24
24
  </gn-ui-button>
@@ -26,3 +26,13 @@
26
26
  </div>
27
27
  }
28
28
  </gn-ui-content-ghost>
29
+
30
+ <ng-template #imageTemplate>
31
+ <img
32
+ data-test="lightbox-image"
33
+ class="lightbox-image bg-white max-h-[90vh] max-w-[90vw]"
34
+ [src]="imageUrl()"
35
+ alt="Preview image"
36
+ (click)="closeLightbox()"
37
+ />
38
+ </ng-template>
@@ -1,10 +1,19 @@
1
- import { Component, EventEmitter, Input, Output } from '@angular/core'
2
- import * as basicLightbox from 'basiclightbox'
1
+ import {
2
+ Component,
3
+ inject,
4
+ input,
5
+ output,
6
+ TemplateRef,
7
+ viewChild,
8
+ ViewContainerRef,
9
+ } from '@angular/core'
3
10
  import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
4
11
  import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
5
12
  import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
6
13
  import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
7
14
  import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
15
+ import { Overlay, OverlayRef } from '@angular/cdk/overlay'
16
+ import { TemplatePortal } from '@angular/cdk/portal'
8
17
 
9
18
  @Component({
10
19
  selector: 'gn-ui-image-overlay-preview',
@@ -20,9 +29,37 @@ import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
20
29
  ],
21
30
  })
22
31
  export class ImageOverlayPreviewComponent {
23
- @Input() imageUrl: string
24
- @Output() isPlaceholderShown = new EventEmitter<boolean>()
25
- openLightbox(src: string) {
26
- basicLightbox.create(`<img src="${src}"/>`).show()
32
+ imageUrl = input<string>()
33
+ isPlaceholderShown = output<boolean>({})
34
+
35
+ private imageTemplate = viewChild<TemplateRef<HTMLElement>>('imageTemplate')
36
+ private overlay = inject(Overlay)
37
+ private viewContainerRef = inject(ViewContainerRef)
38
+ private overlayRef: OverlayRef
39
+
40
+ openLightbox() {
41
+ const positionStrategy = this.overlay
42
+ .position()
43
+ .global()
44
+ .centerHorizontally()
45
+ .centerVertically()
46
+ const scrollStrategy = this.overlay.scrollStrategies.block()
47
+
48
+ this.overlayRef = this.overlay.create({
49
+ hasBackdrop: true,
50
+ backdropClass: 'bg-black/80',
51
+ positionStrategy,
52
+ scrollStrategy,
53
+ })
54
+ this.overlayRef.backdropClick().subscribe(() => this.overlayRef.dispose())
55
+ const portal = new TemplatePortal(
56
+ this.imageTemplate(),
57
+ this.viewContainerRef
58
+ )
59
+ this.overlayRef.attach(portal)
60
+ }
61
+
62
+ closeLightbox() {
63
+ this.overlayRef?.dispose()
27
64
  }
28
65
  }
@@ -1,5 +1,5 @@
1
1
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
2
- import { marked } from 'marked'
2
+ import { parse } from 'marked'
3
3
 
4
4
  @Component({
5
5
  selector: 'gn-ui-markdown-parser',
@@ -14,6 +14,6 @@ export class MarkdownParserComponent {
14
14
  @Input() whitoutStyles?: boolean
15
15
 
16
16
  get parsedMarkdown() {
17
- return marked.parse(this.textContent ?? '')
17
+ return parse(this.textContent ?? '')
18
18
  }
19
19
  }
@@ -28,13 +28,23 @@
28
28
  <gn-ui-max-lines [maxLines]="7">
29
29
  <div class="metadata-info-keywords sm:pb-4 flex flex-wrap gap-2">
30
30
  @for (keyword of metadata.keywords; track keyword) {
31
- <gn-ui-button
32
- type="primary-light"
33
- class="inline-block opacity-70"
34
- extraClass="lowercase text-sm py-1 px-2"
35
- (buttonClick)="onKeywordClick(keyword)"
36
- >{{ keyword.label }}</gn-ui-button
37
- >
31
+ <ng-template #keywordTooltip>
32
+ @for (segment of keywordTooltipSegments(keyword); track $index) {
33
+ <span [class.font-bold]="$last">{{ segment }}</span>
34
+ @if (!$last) {
35
+ <span> &gt; </span>
36
+ }
37
+ }
38
+ </ng-template>
39
+ <gn-ui-popover [content]="keywordTooltip" theme="dark">
40
+ <gn-ui-button
41
+ type="primary-light"
42
+ class="inline-block opacity-70"
43
+ extraClass="lowercase text-sm py-1 px-2"
44
+ (buttonClick)="onKeywordClick(keyword)"
45
+ >{{ keyword.label }}</gn-ui-button
46
+ >
47
+ </gn-ui-popover>
38
48
  }
39
49
  </div>
40
50
  </gn-ui-max-lines>
@@ -113,7 +123,7 @@
113
123
  >
114
124
  <div class="flex flex-col gap-1 pt-3 pb-4">
115
125
  @for (group of contactGroups; track group.role) {
116
- <div class="flex flex-col gap-1 rounded bg-gray-50 py-4 px-2">
126
+ <div class="flex flex-col gap-1 rounded py-4 px-2">
117
127
  <p class="text-xs font-normal text-black">
118
128
  {{ group.roleLabel | translate }}
119
129
  </p>
@@ -19,12 +19,18 @@ import {
19
19
  ExpandablePanelComponent,
20
20
  MaxLinesComponent,
21
21
  } from '../../../../../../libs/ui/layout/src'
22
- import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
22
+ import {
23
+ TranslateDirective,
24
+ TranslatePipe,
25
+ TranslateService,
26
+ } from '@ngx-translate/core'
27
+ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
23
28
  import {
24
29
  BadgeComponent,
25
30
  ButtonComponent,
26
31
  CopyTextButtonComponent,
27
32
  } from '../../../../../../libs/ui/inputs/src'
33
+ import { PopoverComponent } from '../../../../../../libs/ui/widgets/src'
28
34
  import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
29
35
  import { NgIcon, provideIcons } from '@ng-icons/core'
30
36
  import { matOpenInNew } from '@ng-icons/material-icons/baseline'
@@ -35,6 +41,11 @@ import { GnUiHumanizeDateDirective } from '../../../../../../libs/util/shared/sr
35
41
  import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
36
42
  import { ContactPillComponent } from '../contact-pill/contact-pill.component'
37
43
 
44
+ marker('domain.record.keywordType.theme')
45
+ marker('domain.record.keywordType.place')
46
+ marker('domain.record.keywordType.temporal')
47
+ marker('domain.record.keywordType.other')
48
+
38
49
  @Component({
39
50
  selector: 'gn-ui-metadata-info',
40
51
  templateUrl: './metadata-info.component.html',
@@ -56,6 +67,7 @@ import { ContactPillComponent } from '../contact-pill/contact-pill.component'
56
67
  GnUiHumanizeDateDirective,
57
68
  SpatialExtentComponent,
58
69
  ContactPillComponent,
70
+ PopoverComponent,
59
71
  ],
60
72
  viewProviders: [
61
73
  provideIcons({
@@ -66,6 +78,7 @@ import { ContactPillComponent } from '../contact-pill/contact-pill.component'
66
78
  })
67
79
  export class MetadataInfoComponent {
68
80
  private dateService = inject(DateService)
81
+ private translateService = inject(TranslateService)
69
82
 
70
83
  @Input() metadata: Partial<CatalogRecord>
71
84
  @Input() incomplete: boolean
@@ -167,4 +180,19 @@ export class MetadataInfoComponent {
167
180
  onKeywordClick(keyword: Keyword) {
168
181
  this.keyword.emit(keyword)
169
182
  }
183
+
184
+ keywordTooltipSegments(keyword: Keyword): string[] {
185
+ if (keyword.hierarchyPath?.length) {
186
+ return keyword.hierarchyPath
187
+ }
188
+ if (keyword.thesaurus?.name) {
189
+ return [keyword.thesaurus.name, keyword.label]
190
+ }
191
+ return [
192
+ this.translateService.instant(
193
+ `domain.record.keywordType.${keyword.type}`
194
+ ),
195
+ keyword.label,
196
+ ]
197
+ }
170
198
  }
@@ -25,6 +25,7 @@ export class ButtonComponent {
25
25
  | 'outline'
26
26
  | 'light'
27
27
  | 'gray'
28
+ | 'gray-light'
28
29
  | 'black'
29
30
  | 'primary-light'
30
31
  ) {
@@ -45,6 +46,9 @@ export class ButtonComponent {
45
46
  case 'gray':
46
47
  this.btnClass = 'gn-ui-btn-gray'
47
48
  break
49
+ case 'gray-light':
50
+ this.btnClass = 'gn-ui-btn-gray-light'
51
+ break
48
52
  case 'black':
49
53
  this.btnClass = 'gn-ui-btn-black'
50
54
  break
@@ -2,9 +2,9 @@ import {
2
2
  ChangeDetectionStrategy,
3
3
  Component,
4
4
  EventEmitter,
5
+ inject,
5
6
  Input,
6
7
  Output,
7
- inject,
8
8
  } from '@angular/core'
9
9
  import {
10
10
  DateAdapter,
@@ -52,6 +52,6 @@ export class DatePickerComponent {
52
52
  @Output() dateChange = new EventEmitter<Date>()
53
53
 
54
54
  constructor() {
55
- this.dateAdapter.setLocale(this.translate.currentLang)
55
+ this.dateAdapter.setLocale(this.translate.getCurrentLang())
56
56
  }
57
57
  }
@@ -1,18 +1,11 @@
1
1
  import { ChangeDetectorRef, Component, inject, Input } from '@angular/core'
2
2
  import { CommonModule } from '@angular/common'
3
- import { Geometry } from 'geojson'
4
- import { GeoJSONFeatureCollection } from 'ol/format/GeoJSON.js'
5
- import GeoJSON from 'ol/format/GeoJSON.js'
6
- import { Polygon } from 'ol/geom.js'
7
- import {
8
- createViewFromLayer,
9
- MapContext,
10
- MapContextLayer,
11
- } from '@geospatial-sdk/core'
3
+ import { createViewFromLayer, MapContext } from '@geospatial-sdk/core'
12
4
  import { MapContainerComponent } from '../map-container/map-container.component'
13
5
  import { BehaviorSubject, from, Observable, of } from 'rxjs'
14
6
  import { map, switchMap, tap } from 'rxjs/operators'
15
7
  import { DatasetSpatialExtent } from '../../../../../../../libs/common/domain/src/lib/model/record'
8
+ import { createSpatialExtentLayer } from '../../map-utils'
16
9
 
17
10
  @Component({
18
11
  selector: 'gn-ui-spatial-extent',
@@ -30,39 +23,10 @@ export class SpatialExtentComponent {
30
23
  spatialExtents$ = new BehaviorSubject<DatasetSpatialExtent[]>([])
31
24
  mapContext$: Observable<MapContext> = this.spatialExtents$.pipe(
32
25
  switchMap((extents) => {
33
- if (extents.length === 0) {
26
+ const layer = createSpatialExtentLayer(extents)
27
+ if (!layer) {
34
28
  return of(null)
35
29
  }
36
- const featureCollection: GeoJSONFeatureCollection = {
37
- type: 'FeatureCollection',
38
- features: [],
39
- }
40
- extents.forEach((extent) => {
41
- if (extent.geometry) {
42
- featureCollection.features.push({
43
- type: 'Feature',
44
- properties: {},
45
- geometry: extent.geometry,
46
- })
47
- } else if (extent.bbox?.length >= 0) {
48
- featureCollection.features.push({
49
- type: 'Feature',
50
- properties: {},
51
- geometry: this.bboxCoordsToGeometry(extent.bbox),
52
- })
53
- }
54
- })
55
-
56
- const layer: MapContextLayer = {
57
- type: 'geojson',
58
- data: featureCollection,
59
- label: 'Spatial extents',
60
- style: {
61
- 'stroke-color': 'black',
62
- 'stroke-width': 2,
63
- 'fill-color': 'rgba(153, 153, 153, 0.3)',
64
- },
65
- }
66
30
  return from(createViewFromLayer(layer)).pipe(
67
31
  map((view) => ({ view, layers: [layer] }) as MapContext),
68
32
  tap(() => this._cdr.markForCheck())
@@ -71,18 +35,4 @@ export class SpatialExtentComponent {
71
35
  )
72
36
 
73
37
  error = ''
74
-
75
- bboxCoordsToGeometry(bbox: [number, number, number, number]): Geometry {
76
- const geometry = new Polygon([
77
- [
78
- [bbox[0], bbox[1]],
79
- [bbox[0], bbox[3]],
80
- [bbox[2], bbox[3]],
81
- [bbox[2], bbox[1]],
82
- [bbox[0], bbox[1]],
83
- ],
84
- ])
85
-
86
- return new GeoJSON().writeGeometryObject(geometry)
87
- }
88
38
  }