geonetwork-ui 2.1.0 → 2.2.0-dev.0da04556

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

@@ -14,57 +14,37 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonComponent {
-  @Input() type: 'primary' | 'secondary' | 'default' | 'outline' | 'light' =
-    'default'
-  @Input() disabled = false
-  @Input() extraClass = ''
-  @Output() buttonClick = new EventEmitter<void>()
-
-  get classList() {
-    return `${this.color} ${this.textColor} ${this.borderColor} ${this.extraClass}`
-  }
+  private btnClass: string
 
-  get color() {
-    switch (this.type) {
-      case 'default':
-        return 'bg-gray-700 hover:bg-gray-800 hover:bg-gray-800 active:bg-gray-900'
+  // btn-classes are explicited to allow tailwind recognize them and add it in css.
+  @Input() set type(
+    value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'
+  ) {
+    switch (value) {
       case 'primary':
-        return 'bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest'
+        this.btnClass = 'btn-primary'
+        break
       case 'secondary':
-        return 'bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest'
+        this.btnClass = 'btn-secondary'
+        break
       case 'outline':
-        return 'bg-white'
+        this.btnClass = 'btn-outline'
+        break
       case 'light':
-        return 'bg-white hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100'
+        this.btnClass = 'btn-light'
+        break
+      default:
+        this.btnClass = 'btn-default'
+        break
     }
   }
 
-  get textColor() {
-    switch (this.type) {
-      case 'default':
-      case 'secondary':
-      case 'primary':
-        return 'text-white'
-      case 'outline':
-        return 'text-main hover:text-primary-darker focus:text-primary-darker active:text-primary-black'
-      case 'light':
-        return 'text-main'
-    }
-  }
+  @Input() disabled = false
+  @Input() extraClass = ''
+  @Output() buttonClick = new EventEmitter<void>()
 
-  get borderColor() {
-    switch (this.type) {
-      case 'default':
-        return 'border border-gray-700 focus:ring-4 focus:ring-gray-200'
-      case 'secondary':
-        return 'border border-secondary focus:ring-4 focus:ring-secondary-lightest'
-      case 'primary':
-        return 'border border-primary focus:ring-4 focus:ring-primary-lightest'
-      case 'outline':
-        return 'border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker'
-      case 'light':
-        return 'border border-white focus:ring-4 focus:ring-gray-300'
-    }
+  get classList() {
+    return `${this.btnClass} ${this.extraClass}`
   }
 
   handleClick(event: Event) {

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

@@ -17,7 +17,10 @@ import {
 } from '@angular/cdk/overlay'
 import { take } from 'rxjs/operators'
 import { Choice } from './dropdown-multiselect.model'
-import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
+import {
+  createFuzzyFilter,
+  propagateToDocumentOnly,
+} from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-dropdown-multiselect',
@@ -74,9 +77,9 @@ export class DropdownMultiselectComponent {
   }
 
   get filteredChoicesByText() {
-    return this.choices.filter((choice) =>
-      choice.label.toLowerCase().includes(this.searchInputValue?.toLowerCase())
-    )
+    if (!this.searchInputValue) return this.choices
+    const filter = createFuzzyFilter(this.searchInputValue)
+    return this.choices.filter((choice) => filter(choice.label))
   }
 
   get focusedIndex(): number | -1 {

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

@@ -0,0 +1,47 @@
+import {
+  Directive,
+  ElementRef,
+  Renderer2,
+  AfterViewInit,
+  EventEmitter,
+  Output,
+  Input,
+} from '@angular/core'
+
+@Directive({
+  selector: '[gnUiEditableLabel]',
+})
+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/navigation-button/navigation-button.component.html

@@ -1,6 +1,11 @@
 <button
-  class="group flex items-center justify-center backdrop-blur p-1 bg-primary-opacity-50 text-white rounded"
+  class="group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 text-white rounded content-center"
 >
-  <mat-icon class="material-symbols-outlined align-middle">{{ icon }}</mat-icon>
-  <span class="mx-2 hidden group-hover:inline">{{ label }}</span>
+  <mat-icon class="material-symbols-outlined align-middle w-[18px]">{{
+    icon
+  }}</mat-icon>
+  <span
+    class="mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75"
+    >{{ label.toUpperCase() }}</span
+  >
 </button>

package/src/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css

@@ -11,6 +11,7 @@ mat-icon {
   font-size: 1.5em;
   margin-top: -0.1em;
   font-variation-settings: 'opsz' 40;
+  stroke: var(--color-primary-darker);
 }
 
 .star-filled {

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: [
@@ -68,6 +69,7 @@ import { MatNativeDateModule } from '@angular/material/core'
     CheckboxComponent,
     SearchInputComponent,
     DateRangePickerComponent,
+    EditableLabelDirective,
   ],
   imports: [
     CommonModule,
@@ -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">

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -100,6 +100,7 @@ export function loadAppConfig() {
           'login_url',
           'web_component_embedder_url',
           'languages',
+          'contact_email',
         ],
         warnings,
         errors
@@ -126,6 +127,7 @@ export function loadAppConfig() {
               WEB_COMPONENT_EMBEDDER_URL:
                 parsedGlobalSection.web_component_embedder_url,
               LANGUAGES: parsedGlobalSection.languages,
+              CONTACT_EMAIL: parsedGlobalSection.contact_email,
             } as GlobalConfig)
 
       const parsedLayersSections = parseMultiConfigSection(
@@ -185,6 +187,7 @@ export function loadAppConfig() {
           'fonts_stylesheet_url',
           'thumbnail_placeholder',
           'header_background',
+          'favicon',
         ],
         warnings,
         errors
@@ -204,6 +207,7 @@ export function loadAppConfig() {
               TITLE_FONT: parsedThemeSection.title_font,
               MAIN_FONT: parsedThemeSection.main_font,
               FONTS_STYLESHEET_URL: parsedThemeSection.fonts_stylesheet_url,
+              FAVICON: parsedThemeSection.favicon,
             } as ThemeConfig)
 
       const parsedSearchSection = parseConfigSection(

package/src/libs/util/app-config/src/lib/model.ts

@@ -8,6 +8,7 @@ export interface GlobalConfig {
   LOGIN_URL?: string
   WEB_COMPONENT_EMBEDDER_URL?: string
   LANGUAGES?: string[]
+  CONTACT_EMAIL?: string
 }
 
 export interface LayerConfig {
@@ -37,6 +38,7 @@ export interface ThemeConfig {
   MAIN_FONT?: string
   TITLE_FONT?: string
   FONTS_STYLESHEET_URL?: string
+  FAVICON?: string
 }
 
 export interface SearchPreset {

package/src/libs/util/i18n/src/index.ts

@@ -5,3 +5,4 @@ export * from './lib/lang.service'
 export * from './lib/file.translate.loader'
 export * from './lib/testing/test.translate.module'
 export * from './lib/embedded.translate.loader'
+export * from './lib/translate.loader.utils'

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -43,9 +43,15 @@ export const FORMATS = {
     color: '#328556',
     mimeTypes: ['x-gis/x-shapefile'],
   },
+  gml: {
+    extensions: ['gml'],
+    priority: 5,
+    color: '#c92bce',
+    mimeTypes: ['application/gml+xml', 'text/xml; subtype=gml'],
+  },
   kml: {
     extensions: ['kml', 'kmz'],
-    priority: 5,
+    priority: 6,
     color: '#348009',
     mimeTypes: [
       'application/vnd.google-earth.kml+xml',
@@ -54,34 +60,40 @@ export const FORMATS = {
   },
   gpkg: {
     extensions: ['gpkg', 'geopackage'],
-    priority: 6,
+    priority: 7,
     color: '#ea79ba',
     mimeTypes: ['application/geopackage+sqlite3'],
   },
   zip: {
     extensions: ['zip', 'tar.gz'],
-    priority: 7,
+    priority: 8,
     color: '#f2bb3a',
     mimeTypes: ['application/zip', 'application/x-zip'],
   },
   pdf: {
     extensions: ['pdf'],
-    priority: 8,
+    priority: 9,
     color: '#db544a',
     mimeTypes: ['application/pdf'],
   },
   jpg: {
     extensions: ['jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp'],
-    priority: 8,
+    priority: 9,
     color: '#673ab7',
     mimeTypes: ['image/jpg'],
   },
   svg: {
     extensions: ['svg'],
-    priority: 9,
+    priority: 10,
     color: '#d98294',
     mimeTypes: ['image/svg+xml'],
   },
+  dxf: {
+    extensions: ['dxf'],
+    priority: 11,
+    color: '#de630b',
+    mimeTypes: ['application/x-dxf', 'image/x-dxf'],
+  },
 } as const
 
 export type FileFormat = keyof typeof FORMATS
@@ -102,13 +114,24 @@ export function getLinkPriority(link: DatasetDistribution): number {
   return getFormatPriority(getFileFormat(link))
 }
 
-export function extensionToFormat(extension: string): FileFormat {
-  for (const format in FORMATS) {
-    for (const alias of FORMATS[format].extensions) {
-      if (alias === extension.toLowerCase()) return format as FileFormat
+export function getFileFormatFromServiceOutput(
+  serviceOutput: string
+): FileFormat | null {
+  function formatMatcher(format: typeof FORMATS[FileFormat]): boolean {
+    const output = serviceOutput.toLowerCase()
+    return (
+      format.extensions.some((extension: string) =>
+        output.includes(extension)
+      ) ||
+      format.mimeTypes.some((mimeType: string) => output.includes(mimeType))
+    )
+  }
+  for (const formatName in FORMATS) {
+    if (formatMatcher(FORMATS[formatName])) {
+      return formatName as FileFormat
     }
   }
-  return undefined
+  return null
 }
 
 export function getFileFormat(link: DatasetDistribution): FileFormat {

package/src/libs/util/shared/src/lib/services/theme.service.ts

@@ -140,4 +140,13 @@ export class ThemeService {
     }
     return chroma.hsl(hue % 360, saturation, lightness).css()
   }
+
+  static setFavicon(faviconPath: string): void {
+    const link =
+      document.querySelector("link[rel*='icon']") ||
+      document.createElement('link')
+    link['rel'] = 'icon'
+    link['href'] = faviconPath
+    document.getElementsByTagName('head')[0].appendChild(link)
+  }
 }

package/src/libs/util/shared/src/lib/utils/fuzzy-filter.ts

@@ -0,0 +1,32 @@
+type FuzzyFilter = (input: string) => boolean
+
+function normalize(input: string) {
+  return input
+    .toLowerCase()
+    .normalize('NFD') // explode composite chars (e.g. é) into multiple chars
+    .replace(/[\u0300-\u036f]/g, '') // remove accents
+    .replace(/œ/g, 'oe') // remove accents
+    .replace(/[^a-z0-9\s]/g, ' ') // replace special characters with space
+}
+
+function asNormalizedParts(input: string): string[] {
+  return normalize(input)
+    .split(/\s+/)
+    .map((part) => part.trim())
+    .filter((part) => part.length > 0)
+}
+
+/**
+ * This creates a filter function based on a pattern (typically a user-input
+ * search text).
+ * @param pattern
+ */
+export function createFuzzyFilter(pattern: string): FuzzyFilter {
+  const patternParts = asNormalizedParts(pattern)
+  return (input: string) => {
+    const inputParts = asNormalizedParts(input)
+    return patternParts.every((patternPart) =>
+      inputParts.some((part) => part.includes(patternPart))
+    )
+  }
+}

package/src/libs/util/shared/src/lib/utils/index.ts

@@ -5,3 +5,4 @@ export * from './geojson'
 export * from './sort-by'
 export * from './url'
 export * from './event'
+export * from './fuzzy-filter'

package/tailwind.base.css

@@ -7,8 +7,38 @@
     @apply shadow-xl hover:shadow-xl-hover transition-shadow;
   }
 
+  .btn {
+    @apply flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50;
+  }
+
   .btn-default {
-    @apply bg-blue-600 text-white flex gap-3 items-center px-9 py-3 rounded-[50px] hover:scale-[1.02] transition-transform;
+    @apply btn text-white
+      bg-gray-700 hover:bg-gray-800 active:bg-gray-900
+      border border-gray-700 focus:ring-4 focus:ring-gray-200;
+  }
+
+  .btn-primary {
+    @apply btn text-white
+      bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest
+      border border-primary focus:ring-4 focus:ring-primary-lightest;
+  }
+
+  .btn-secondary {
+    @apply btn text-white
+      bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest
+      border border-secondary focus:ring-4 focus:ring-secondary-lightest;
+  }
+
+  .btn-outline {
+    @apply btn text-main
+      bg-white hover:text-primary-darker focus:text-primary-darker active:text-primary-black
+      border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker;
+  }
+
+  .btn-light {
+    @apply btn text-main
+      bg-white hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100
+      border border-white focus:ring-4 focus:ring-gray-300;
   }
 
   .badge-btn {