geonetwork-ui 2.2.0-dev.725d837e → 2.2.0-dev.7a59af6f

package/src/libs/feature/search/src/lib/state/effects.ts

@@ -126,10 +126,11 @@ export class SearchEffects {
           ),
           switchMap(([state, favorites]) => {
             if (!state.params.useSpatialFilter || !this.filterGeometry$) {
-              return of([state, favorites, null])
+              return of([state, favorites, undefined])
             }
             return this.filterGeometry$.pipe(
               tap((geom) => {
+                if (!geom) return
                 try {
                   const trace = validGeoJson(geom, true) as string[]
                   if (trace?.length > 0) {
@@ -145,7 +146,7 @@ export class SearchEffects {
               }),
               map((geom) => [state, favorites, geom]),
               catchError((e) => {
-                return of([state, favorites, null])
+                return of([state, favorites, undefined])
               })
             )
           }),
@@ -153,7 +154,7 @@ export class SearchEffects {
             ([state, favorites, geometry]: [
               SearchStateSearch,
               string[],
-              Geometry | null
+              Geometry | undefined
             ]) => {
               const { currentPage, pageSize, sort } = state.params
               const filters = {

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

@@ -18,5 +18,7 @@ export * from './lib/pagination/pagination.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/search-results-error/search-results-error.component'
 export * from './lib/user-preview/user-preview.component'
+export * from './lib/max-lines/max-lines.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/markdown-parser/markdown-parser.component'
+export * from './lib/image-overlay-preview/image-overlay-preview.component'

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -8,7 +8,10 @@
   >
     record.metadata.download
   </p>
-  <div class="flex flex-wrap justify-start sm:justify-end sm:pb-4">
+  <div
+    class="flex flex-wrap justify-start sm:justify-end sm:pb-4"
+    data-cy="download-format-filters"
+  >
     <gn-ui-button
       class="m-1 format-filter"
       [extraClass]="

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html

@@ -0,0 +1,30 @@
+<gn-ui-content-ghost
+  [showContent]="imageUrl !== undefined"
+  ghostClass="h-48 mb-3"
+>
+  <div
+    *ngIf="imageUrl"
+    [showContent]="imageUrl !== undefined"
+    data-cy="record-thumbnail"
+    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
+  >
+    <gn-ui-thumbnail
+      class="relative h-full w-full"
+      [thumbnailUrl]="imageUrl"
+      fit="cover"
+      (placeholderShown)="isPlaceholderShown.emit($event)"
+    ></gn-ui-thumbnail>
+    <div class="relative">
+      <gn-ui-button
+        class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
+        [type]="'outline'"
+        [extraClass]="'!py-2 !px-0'"
+        (buttonClick)="openLightbox(imageUrl)"
+      >
+        <mat-icon class="material-symbols-outlined font-extralight"
+          >zoom_out_map</mat-icon
+        >
+      </gn-ui-button>
+    </div>
+  </div>
+</gn-ui-content-ghost>

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts

@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import * as basicLightbox from 'basiclightbox'
+
+@Component({
+  selector: 'gn-ui-image-overlay-preview',
+  templateUrl: './image-overlay-preview.component.html',
+  styleUrls: ['./image-overlay-preview.component.css'],
+})
+export class ImageOverlayPreviewComponent {
+  @Input() imageUrl: string
+  @Output() isPlaceholderShown = new EventEmitter<boolean>()
+  openLightbox(src: string) {
+    basicLightbox.create(`<img src="${src}"/>`).show()
+  }
+}

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.css

@@ -1,5 +1,5 @@
 /** Body **/
-:host /deep/ .markdown-body {
+:host ::ng-deep .markdown-body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0px 0px 1.5rem 0px;
@@ -9,68 +9,68 @@
 
 /** Emphasis **/
 
-:host /deep/ .markdown-body strong {
+:host ::ng-deep .markdown-body strong {
   @apply font-bold;
   color: var(--color-secondary-darker);
 }
 
 /** Headings **/
 
-:host /deep/ .markdown-body h1,
-:host /deep/ .markdown-body h2,
-:host /deep/ .markdown-body h3,
-:host /deep/ .markdown-body h4,
-:host /deep/ .markdown-body h5,
-:host /deep/ .markdown-body h6 {
+:host ::ng-deep .markdown-body h1,
+:host ::ng-deep .markdown-body h2,
+:host ::ng-deep .markdown-body h3,
+:host ::ng-deep .markdown-body h4,
+:host ::ng-deep .markdown-body h5,
+:host ::ng-deep .markdown-body h6 {
   margin-top: 24px;
   margin-bottom: 16px;
   line-height: 1.25;
   @apply text-title font-title font-bold;
 }
 
-:host /deep/ .markdown-body h1 {
+:host ::ng-deep .markdown-body h1 {
   margin: 0.67em 0;
   padding-bottom: 0.3em;
   font-size: 2em;
   color: var(--color-primary);
 }
 
-:host /deep/ .markdown-body h2 {
+:host ::ng-deep .markdown-body h2 {
   padding-bottom: 0.3em;
   font-size: 1.5em;
   color: var(--color-secondary);
 }
 
-:host /deep/ .markdown-body h3 {
+:host ::ng-deep .markdown-body h3 {
   font-size: 1.25em;
   color: var(--color-secondary);
 }
 
-:host /deep/ .markdown-body h4 {
+:host ::ng-deep .markdown-body h4 {
   font-size: 1em;
   color: var(--color-secondary);
 }
 
-:host /deep/ .markdown-body h5 {
+:host ::ng-deep .markdown-body h5 {
   font-size: 0.875em;
   color: var(--color-secondary);
 }
 
-:host /deep/ .markdown-body h6 {
+:host ::ng-deep .markdown-body h6 {
   font-size: 0.85em;
   color: var(--color-secondary-lighter);
 }
 
 /** Paragraphs **/
 
-:host /deep/ .markdown-body p {
+:host ::ng-deep .markdown-body p {
   margin-top: 0;
   margin-bottom: 10px;
 }
 
 /** Links **/
 
-:host /deep/ .markdown-body p > a {
+:host ::ng-deep .markdown-body p > a {
   margin-top: 0;
   margin-bottom: 10px;
   color: var(--color-primary) !important;
@@ -78,13 +78,13 @@
   @apply font-bold;
 }
 
-:host /deep/ .markdown-body p > a:hover {
+:host ::ng-deep .markdown-body p > a:hover {
   color: var(--color-primary-darker) !important;
 }
 
 /** Blockquotes **/
 
-:host /deep/ .markdown-body blockquote {
+:host ::ng-deep .markdown-body blockquote {
   margin: 0;
   padding: 0 1em;
   color: var(--color-secondary-lighter);
@@ -93,7 +93,7 @@
 
 /** Code **/
 
-:host /deep/ .markdown-body pre {
+:host ::ng-deep .markdown-body pre {
   margin-top: 0;
   margin-bottom: 0;
   font-size: 12px;
@@ -101,7 +101,7 @@
   word-wrap: normal;
 }
 
-:host /deep/ .markdown-body pre {
+:host ::ng-deep .markdown-body pre {
   padding: 16px;
   overflow: auto;
   font-size: 85%;
@@ -110,7 +110,7 @@
   border-radius: 6px;
 }
 
-:host /deep/ .markdown-body code {
+:host ::ng-deep .markdown-body code {
   padding: 0.2em 0.4em;
   margin: 0;
   font-size: 85%;
@@ -118,7 +118,7 @@
   border-radius: 6px;
 }
 
-:host /deep/ .markdown-body pre code {
+:host ::ng-deep .markdown-body pre code {
   display: inline;
   max-width: auto;
   padding: 0;
@@ -131,7 +131,7 @@
 
 /** Horizontal rules **/
 
-:host /deep/ .markdown-body hr {
+:host ::ng-deep .markdown-body hr {
   box-sizing: content-box;
   overflow: hidden;
   background: transparent;
@@ -143,12 +143,12 @@
   border: 0;
 }
 
-:host /deep/ .markdown-body hr::before {
+:host ::ng-deep .markdown-body hr::before {
   display: table;
   content: '';
 }
 
-:host /deep/ .markdown-body hr::after {
+:host ::ng-deep .markdown-body hr::after {
   display: table;
   clear: both;
   content: '';
@@ -156,55 +156,55 @@
 
 /** Lists **/
 
-:host /deep/ .markdown-body ul,
-:host /deep/ .markdown-body ol {
+:host ::ng-deep .markdown-body ul,
+:host ::ng-deep .markdown-body ol {
   margin-top: 0;
   margin-bottom: 0;
   padding-left: 2em;
   list-style: revert;
 }
 
-:host /deep/ .markdown-body ol ol,
-:host /deep/ .markdown-body ul ol {
+:host ::ng-deep .markdown-body ol ol,
+:host ::ng-deep .markdown-body ul ol {
   list-style-type: lower-roman;
 }
 
-:host /deep/ .markdown-body ul ul ol,
-:host /deep/ .markdown-body ul ol ol,
-:host /deep/ .markdown-body ol ul ol,
-:host /deep/ .markdown-body ol ol ol {
+:host ::ng-deep .markdown-body ul ul ol,
+:host ::ng-deep .markdown-body ul ol ol,
+:host ::ng-deep .markdown-body ol ul ol,
+:host ::ng-deep .markdown-body ol ol ol {
   list-style-type: lower-alpha;
 }
 
-:host /deep/ .markdown-body ol[type='a s'] {
+:host ::ng-deep .markdown-body ol[type='a s'] {
   list-style-type: lower-alpha;
 }
 
-:host /deep/ .markdown-body ol[type='A s'] {
+:host ::ng-deep .markdown-body ol[type='A s'] {
   list-style-type: upper-alpha;
 }
 
-:host /deep/ .markdown-body ol[type='i s'] {
+:host ::ng-deep .markdown-body ol[type='i s'] {
   list-style-type: lower-roman;
 }
 
-:host /deep/ .markdown-body ol[type='I s'] {
+:host ::ng-deep .markdown-body ol[type='I s'] {
   list-style-type: upper-roman;
 }
 
-:host /deep/ .markdown-body ol[type='1'] {
+:host ::ng-deep .markdown-body ol[type='1'] {
   list-style: unset;
   list-style-type: decimal;
 }
 
-:host /deep/ .markdown-body div > ol:not([type]) {
+:host ::ng-deep .markdown-body div > ol:not([type]) {
   list-style: unset;
   list-style-type: decimal;
 }
 
 /** Table **/
 
-:host /deep/ .markdown-body table {
+:host ::ng-deep .markdown-body table {
   border-spacing: 0;
   border-collapse: collapse;
   display: block;
@@ -214,51 +214,51 @@
   padding-bottom: 15px;
 }
 
-:host /deep/ .markdown-body td,
-:host /deep/ .markdown-body th {
+:host ::ng-deep .markdown-body td,
+:host ::ng-deep .markdown-body th {
   padding: 0;
 }
 
-:host /deep/ .markdown-body th {
+:host ::ng-deep .markdown-body th {
   color: var(--color-secondary);
 }
 
-:host /deep/ .markdown-body table th,
-:host /deep/ .markdown-body table td {
+:host ::ng-deep .markdown-body table th,
+:host ::ng-deep .markdown-body table td {
   padding: 6px 13px;
   border: 1px solid var(--color-gray-500);
 }
 
-:host /deep/ .markdown-body table td > :last-child {
+:host ::ng-deep .markdown-body table td > :last-child {
   margin-bottom: 0;
 }
 
-:host /deep/ .markdown-body table tr {
+:host ::ng-deep .markdown-body table tr {
   background-color: #ffffff;
   border-top: 1px solid var(--color-secondary-lighter);
 }
 
-:host /deep/ .markdown-body table tr:nth-child(2n) {
+:host ::ng-deep .markdown-body table tr:nth-child(2n) {
   background-color: var(--color-gray-100);
 }
 
-:host /deep/ .markdown-body table img {
+:host ::ng-deep .markdown-body table img {
   background-color: transparent;
 }
 
 /** Images **/
 
-:host /deep/ .markdown-body img {
+:host ::ng-deep .markdown-body img {
   border-style: none;
   max-width: 100%;
   box-sizing: content-box;
   background-color: transparent;
 }
 
-:host /deep/ .markdown-body img[align='right'] {
+:host ::ng-deep .markdown-body img[align='right'] {
   padding-left: 20px;
 }
 
-:host /deep/ .markdown-body img[align='left'] {
+:host ::ng-deep .markdown-body img[align='left'] {
   padding-right: 20px;
 }

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

@@ -1,4 +1,4 @@
-<div class="py-5 px-5 rounded bg-gray-100 text-black mb-6 sm:mb-12">
+<div class="py-5 px-5 rounded bg-gray-100 text-black mb-6">
   <div class="grid gap-3">
     <div>
       <p class="text-sm font-medium" translate>record.metadata.contact</p>
@@ -20,7 +20,7 @@
           (click)="onOrganizationClick()"
           data-cy="organization-name"
         >
-          {{ shownOrganization.name }}
+          {{ shownOrganization?.name }}
         </div>
       </div>
       <div *ngIf="shownOrganization?.website">

package/src/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html

@@ -6,7 +6,7 @@
   <div class="h-52 bg-gray-100">
     <gn-ui-thumbnail
       class="h-52 w-full object-cover"
-      [thumbnailUrl]="record.overviews?.[0].url.toString()"
+      [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
     ></gn-ui-thumbnail>
   </div>
   <div class="flex flex-col justify-between h-44 px-5 pt-4 pb-6">

package/src/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts

@@ -10,6 +10,8 @@ import {
   Optional,
   SimpleChanges,
   ViewChild,
+  Output,
+  EventEmitter,
 } from '@angular/core'
 
 export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
@@ -36,6 +38,7 @@ export class ThumbnailComponent implements OnInit, OnChanges {
   @Input() fit: FitOptions | FitOptions[] = 'cover'
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
+  @Output() placeholderShown = new EventEmitter<boolean>()
   imgUrl: string
   imgFit: FitOptions
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
@@ -85,6 +88,7 @@ export class ThumbnailComponent implements OnInit, OnChanges {
   private setNewSrcImage(image: ThumbnailImageObject) {
     this.imgFit = image.fit
     this.imgUrl = image.url
+    this.placeholderShown.emit(this.isPlaceholder)
   }
 
   private setPlaceholder(): void {

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -30,6 +30,7 @@ import { PaginationButtonsComponent } from './pagination-buttons/pagination-butt
 import { MaxLinesComponent } from './max-lines/max-lines.component'
 import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
+import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
 
 @NgModule({
   imports: [
@@ -67,6 +68,7 @@ import { MarkdownParserComponent } from './markdown-parser/markdown-parser.compo
     MaxLinesComponent,
     RecordApiFormComponent,
     MarkdownParserComponent,
+    ImageOverlayPreviewComponent,
   ],
   exports: [
     MetadataInfoComponent,
@@ -86,8 +88,10 @@ import { MarkdownParserComponent } from './markdown-parser/markdown-parser.compo
     AvatarComponent,
     UserPreviewComponent,
     PaginationButtonsComponent,
+    MaxLinesComponent,
     RecordApiFormComponent,
     MarkdownParserComponent,
+    ImageOverlayPreviewComponent,
   ],
 })
 export class UiElementsModule {}

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

@@ -19,3 +19,4 @@ export * from './lib/viewport-intersector/viewport-intersector.component'
 export * from './lib/checkbox/checkbox.component'
 export * from './lib/search-input/search-input.component'
 export * from './lib/date-range-picker/date-range-picker.component'
+export * from './lib/editable-label/editable-label.directive'

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -6,7 +6,7 @@
     [placeholder]="placeholder"
     [formControl]="control"
     [matAutocomplete]="auto"
-    (keyup.enter)="handleEnter($event.target.value)"
+    (keyup.enter)="handleEnter(searchInput.value)"
   />
   <button
     type="button"

package/src/libs/ui/inputs/src/lib/button/button.component.css

@@ -1,5 +1,5 @@
 /* makes sure icons will not make the buttons grow vertically */
-:host /deep/ mat-icon.mat-icon {
+:host ::ng-deep mat-icon.mat-icon {
   margin-top: -0.325em;
   margin-bottom: -0.325em;
 }

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

@@ -113,7 +113,7 @@
         type="checkbox"
         #checkBox
         [checked]="isSelected(choice)"
-        (change)="select(choice, $event.target.checked)"
+        (change)="select(choice, checkBox.checked)"
       />
       <span class="ml-[8px] text-[14px] truncate">
         {{ choice.label }}

package/src/libs/ui/inputs/src/lib/editable-label/editable-label.directive.ts

@@ -0,0 +1,48 @@
+import {
+  Directive,
+  ElementRef,
+  Renderer2,
+  AfterViewInit,
+  EventEmitter,
+  Output,
+  Input,
+} from '@angular/core'
+
+@Directive({
+  selector: '[gnUiEditableLabel]',
+  standalone: true,
+})
+export class EditableLabelDirective implements AfterViewInit {
+  @Output() editableLabelChanged = new EventEmitter<string>()
+  @Input() gnUiEditableLabel?: boolean
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngAfterViewInit() {
+    if (this.gnUiEditableLabel !== false) {
+      const appendedInput = this.renderer.createElement('input')
+
+      this.renderer.setStyle(appendedInput, 'background', 'inherit')
+      this.renderer.setStyle(appendedInput, 'color', 'inherit')
+      this.renderer.setStyle(appendedInput, 'font', 'inherit')
+      this.renderer.setStyle(appendedInput, 'border', 'inherit')
+      this.renderer.setStyle(appendedInput, 'width', '100%')
+      this.renderer.setStyle(appendedInput, 'padding', 'inherit')
+      this.renderer.setStyle(appendedInput, 'margin', '0')
+      this.renderer.setStyle(appendedInput, 'height', 'inherit')
+      this.renderer.setStyle(appendedInput, 'line-height', 'inherit')
+      this.renderer.setStyle(appendedInput, 'text-decoration', 'inherit')
+
+      const hostContent = this.el.nativeElement.textContent || ''
+      const formattedContent = hostContent.replace(/\s+/g, ' ').trim()
+      this.renderer.setProperty(appendedInput, 'value', formattedContent)
+      this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '')
+
+      this.renderer.listen(appendedInput, 'input', (event) => {
+        this.editableLabelChanged.emit(event.target.value)
+      })
+
+      this.renderer.appendChild(this.el.nativeElement, appendedInput)
+    }
+  }
+}

package/src/libs/ui/inputs/src/lib/ui-inputs.module.ts

@@ -41,6 +41,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatNativeDateModule } from '@angular/material/core'
+import { EditableLabelDirective } from './editable-label/editable-label.directive'
 
 @NgModule({
   declarations: [
@@ -87,6 +88,7 @@ import { MatNativeDateModule } from '@angular/material/core'
     MatInputModule,
     MatDatepickerModule,
     MatNativeDateModule,
+    EditableLabelDirective,
   ],
   exports: [
     DropdownSelectorComponent,
@@ -106,6 +108,7 @@ import { MatNativeDateModule } from '@angular/material/core'
     CheckboxComponent,
     SearchInputComponent,
     DateRangePickerComponent,
+    EditableLabelDirective,
   ],
 })
 export class UiInputsModule {}

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -1,4 +1,4 @@
-:host .carousel-container /deep/ > * {
+:host .carousel-container ::ng-deep > * {
   flex-shrink: 0;
 }
 :host {

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

@@ -38,7 +38,7 @@
       </div>
       <div
         class="contents hover:text-gray-900 text-gray-800 cursor-pointer"
-        (click)="recordSelect.emit(record)"
+        (click)="recordsSelect.emit([record])"
         *ngFor="let record of records"
       >
         <div class="record-table-col text-16">
@@ -157,7 +157,7 @@
       </div>
       <div
         class="contents hover:text-gray-900 text-gray-800 cursor-pointer"
-        (click)="recordSelect.emit(record)"
+        (click)="recordsSelect.emit([record])"
         *ngFor="let record of records"
       >
         <div class="record-table-col">