geonetwork-ui 2.1.0-initial

package/src/libs/ui/inputs/src/lib/viewport-intersector/viewport-intersector.component.ts

@@ -0,0 +1,58 @@
+import {
+  Component,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewContainerRef,
+} from '@angular/core'
+import { filter, map } from 'rxjs/operators'
+import { Observable } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-viewport-intersector',
+  templateUrl: './viewport-intersector.component.html',
+  styleUrls: ['./viewport-intersector.component.css'],
+})
+export class ViewportIntersectorComponent implements OnInit, OnDestroy {
+  @Output() isInViewport = new EventEmitter<boolean>()
+  @Output() entersViewport: Observable<void> = this.isInViewport.pipe(
+    filter((inViewport) => inViewport),
+    map(() => undefined)
+  )
+  @Output() exitsViewport: Observable<void> = this.isInViewport.pipe(
+    filter((inViewport) => !inViewport),
+    map(() => undefined)
+  )
+  observer?: IntersectionObserver
+
+  constructor(private vcRef: ViewContainerRef) {}
+
+  ngOnInit() {
+    const elToObserve = this.vcRef.element.nativeElement
+    this.observeInputElement(elToObserve)
+  }
+
+  ngOnDestroy() {
+    const elToObserve = this.vcRef.element.nativeElement
+    this.unObserveInputElement(elToObserve)
+  }
+
+  observeInputElement(elToObserve: HTMLElement) {
+    if (!this.observer) {
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            this.isInViewport.emit(entry.isIntersecting)
+          })
+        },
+        { root: null, threshold: 0 }
+      )
+    }
+    this.observer.observe(elToObserve)
+  }
+
+  unObserveInputElement(elToObserve: HTMLElement) {
+    this.observer?.unobserve(elToObserve)
+  }
+}

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

@@ -0,0 +1,6 @@
+export * from './lib/ui-layout.module'
+export * from './lib/anchor-link/anchor-link.directive'
+export * from './lib/carousel/carousel.component'
+export * from './lib/expandable-panel/expandable-panel.component'
+export * from './lib/sticky-header/sticky-header.component'
+export * from './lib/expandable-panel-button/expandable-panel-button.component'

package/src/libs/ui/layout/src/lib/anchor-link/anchor-link.directive.ts

@@ -0,0 +1,59 @@
+import {
+  ChangeDetectorRef,
+  Directive,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core'
+
+@Directive({
+  selector: '[gnUiAnchorLink]',
+})
+export class AnchorLinkDirective implements OnInit, OnDestroy {
+  @Input('gnUiAnchorLink') targetId: string
+  @Input('gnUiAnchorLinkDisabledClass') disabledClass: string
+  @Input('gnUiAnchorLinkEnabledClass') enabledClass: string
+
+  @HostBinding('class')
+  get elementClass(): string {
+    return this.disabled ? this.disabledClass : this.enabledClass
+  }
+
+  disabled = false
+  observer = new MutationObserver(() => {
+    this.refreshDisabledState()
+  })
+
+  constructor(private changeDetector: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    })
+    this.refreshDisabledState()
+  }
+
+  ngOnDestroy() {
+    this.observer.disconnect()
+  }
+
+  refreshDisabledState() {
+    const targetNotPresent = !document.getElementById(this.targetId)
+    if (targetNotPresent !== this.disabled) {
+      this.disabled = targetNotPresent
+      this.changeDetector.detectChanges()
+    }
+  }
+
+  @HostListener('click') scrollToTarget() {
+    const target = document.getElementById(this.targetId)
+    if (!target) return
+    target.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    })
+  }
+}

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

@@ -0,0 +1,20 @@
+:host .carousel-container /deep/ > * {
+  flex-shrink: 0;
+}
+:host {
+  position: relative;
+}
+.carousel-step-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  position: relative;
+}
+.carousel-step-dot:after {
+  content: '';
+  position: absolute;
+  left: -4px;
+  top: -4px;
+  width: 14px;
+  height: 14px;
+}

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

@@ -0,0 +1,16 @@
+<div #carouselOverflowContainer class="overflow-hidden h-full w-full">
+  <div class="carousel-container flex flex-row" [ngClass]="containerClass">
+    <ng-content></ng-content>
+  </div>
+</div>
+<div
+  class="absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1"
+  [ngClass]="stepsContainerClass"
+>
+  <button
+    *ngFor="let step of steps; let i = index"
+    class="carousel-step-dot"
+    (click)="scrollToStep(i)"
+    [ngClass]="selectedStep === i ? 'bg-secondary' : 'bg-gray-400'"
+  ></button>
+</div>

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

@@ -0,0 +1,50 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+} from '@angular/core'
+import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel'
+
+@Component({
+  selector: 'gn-ui-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CarouselComponent implements AfterViewInit {
+  @Input() containerClass = ''
+  @Input() stepsContainerClass = ''
+  @ViewChild('carouselOverflowContainer')
+  carouselOverflowContainer: ElementRef
+  steps: number[] = []
+  selectedStep = -1
+  emblaApi: EmblaCarouselType
+
+  constructor(private changeDetector: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.emblaApi = EmblaCarousel(
+      this.carouselOverflowContainer.nativeElement,
+      {
+        duration: 15,
+      }
+    )
+    const refreshSteps = () => {
+      this.steps = this.emblaApi.scrollSnapList()
+      this.selectedStep = this.emblaApi.selectedScrollSnap()
+      this.changeDetector.detectChanges()
+    }
+    this.emblaApi
+      .on('init', refreshSteps)
+      .on('reInit', refreshSteps)
+      .on('select', refreshSteps)
+  }
+
+  scrollToStep(stepIndex: number) {
+    this.emblaApi.scrollTo(stepIndex)
+  }
+}

package/src/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html

@@ -0,0 +1,24 @@
+<div
+  class="group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5"
+  (click)="toggle()"
+>
+  <div class="grow font-medium text-black text-sm">
+    {{ title }}
+  </div>
+  <div
+    class="w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity"
+  >
+    <mat-icon class="material-symbols-outlined" *ngIf="collapsed">add</mat-icon>
+    <mat-icon class="material-symbols-outlined" *ngIf="!collapsed"
+      >remove</mat-icon
+    >
+  </div>
+</div>
+<div
+  class="content overflow-hidden transition-[max-height] duration-300"
+  [ngClass]="collapsed ? 'ease-out' : 'ease-in'"
+  [style.maxHeight]="maxHeight"
+  #contentDiv
+>
+  <ng-content></ng-content>
+</div>

package/src/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts

@@ -0,0 +1,31 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  ViewChild,
+  ElementRef,
+} from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-expandable-panel',
+  templateUrl: './expandable-panel.component.html',
+  styleUrls: ['./expandable-panel.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExpandablePanelComponent {
+  @Input() title: string
+  @Input() collapsed = true
+  @ViewChild('contentDiv') contentDiv: ElementRef
+  maxHeight = this.setMaxHeight()
+
+  toggle(): void {
+    this.collapsed = !this.collapsed
+    this.maxHeight = this.setMaxHeight()
+  }
+
+  setMaxHeight() {
+    return `${
+      this.collapsed ? '0' : this.contentDiv.nativeElement.scrollHeight
+    }px`
+  }
+}

package/src/libs/ui/layout/src/lib/expandable-panel-button/expandable-panel-button.component.css

@@ -0,0 +1,12 @@
+:host {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  pointer-events: none;
+}

package/src/libs/ui/layout/src/lib/expandable-panel-button/expandable-panel-button.component.html

@@ -0,0 +1,22 @@
+<button
+  type="button"
+  class="px-4 bg-primary hover:bg-primary-darker text-white flex flex-row w-full items-center font-bold text-lg pointer-events-auto"
+  [style.height]="'55px'"
+  (click)="toggle()"
+>
+  <ng-container [ngTemplateOutlet]="titleTemplate"></ng-container>
+  <div class="ml-3 grow"></div>
+  <mat-icon class="material-symbols-outlined" *ngIf="collapsed"
+    >expand_more</mat-icon
+  >
+  <mat-icon class="material-symbols-outlined" *ngIf="!collapsed"
+    >expand_less</mat-icon
+  >
+</button>
+<div
+  class="content transition-all pointer-events-auto bg-white"
+  [style.height]="collapsed ? '0px' : 'calc(100% - 55px)'"
+  [ngClass]="collapsed ? 'overflow-hidden' : 'overflow-auto'"
+>
+  <ng-content></ng-content>
+</div>

package/src/libs/ui/layout/src/lib/expandable-panel-button/expandable-panel-button.component.ts

@@ -0,0 +1,21 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  TemplateRef,
+} from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-expandable-panel-button',
+  templateUrl: './expandable-panel-button.component.html',
+  styleUrls: ['./expandable-panel-button.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExpandablePanelButtonComponent {
+  @Input() titleTemplate: TemplateRef<any>
+  @Input() collapsed = true
+
+  toggle(): void {
+    this.collapsed = !this.collapsed
+  }
+}

package/src/libs/ui/layout/src/lib/sticky-header/sticky-header.component.html

@@ -0,0 +1,16 @@
+<div
+  #outerContainer
+  class="sticky pointer-events-none z-50 top-0"
+  [style.height]="fullHeightPx + 'px'"
+>
+  <div
+    #innerContainer
+    class="relative pointer-events-auto"
+    [style.height]="fullHeightPx + 'px'"
+  >
+    <ng-container
+      [ngTemplateOutlet]="template"
+      [ngTemplateOutletContext]="{ $implicit: expandRatio }"
+    ></ng-container>
+  </div>
+</div>

package/src/libs/ui/layout/src/lib/sticky-header/sticky-header.component.ts

@@ -0,0 +1,109 @@
+import {
+  AfterViewChecked,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ElementRef,
+  Host,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core'
+import { animationFrameScheduler, fromEvent, Subscription } from 'rxjs'
+import { throttleTime } from 'rxjs/operators'
+
+/**
+ * This component will make a block that will stay sticky on the top of the page,
+ * but will also shrink down to a minimum height when scrolling.
+ * The ratio between minimum and nominal height is stored in the shrinkRatio
+ * property, and can be used to change e.g. the opacity or size of child elements.
+ * This component renders at z-index: 50 by default.
+ * The first parent element with an overflow of `scroll` or `overflow` is considered
+ * for scroll events.
+ */
+
+@Component({
+  selector: 'gn-ui-sticky-header',
+  templateUrl: './sticky-header.component.html',
+  styleUrls: ['./sticky-header.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StickyHeaderComponent
+  implements AfterViewInit, OnDestroy, OnInit, AfterViewChecked
+{
+  @Input() minHeightPx: number
+  @Input() fullHeightPx: number
+  @ContentChild(TemplateRef) template: TemplateRef<{ $implicit: number }>
+  @ViewChild('outerContainer') outerContainer: ElementRef
+  @ViewChild('innerContainer') innerContainer: ElementRef
+  placeholderEl: HTMLElement
+  expandRatio: number // 1 means height is full, 0 means height is minimum
+  scrollSub: Subscription
+  parentScroll: number
+
+  constructor(
+    private changeDetector: ChangeDetectorRef,
+    @Host() private hostEl: ElementRef,
+    private zone: NgZone
+  ) {}
+
+  ngAfterViewInit() {
+    this.scrollSub = fromEvent(window, 'scroll', {
+      passive: true,
+    })
+      .pipe(
+        throttleTime(0, animationFrameScheduler, {
+          leading: true,
+          trailing: true,
+        })
+      )
+      .subscribe(this.updateSize.bind(this))
+  }
+
+  ngOnInit() {
+    this.placeholderEl = document.createElement('div')
+    this.placeholderEl.style.position = 'absolute'
+    this.placeholderEl.classList.add('sticky-header-placeholder')
+    this.hostEl.nativeElement.insertAdjacentElement(
+      'beforebegin',
+      this.placeholderEl
+    )
+  }
+
+  ngAfterViewChecked() {
+    this.updateSize()
+  }
+
+  ngOnDestroy() {
+    this.scrollSub.unsubscribe()
+    this.placeholderEl.remove()
+  }
+
+  updateSize() {
+    this.zone.runOutsideAngular(() => {
+      if (window.scrollY === this.parentScroll) return
+      this.parentScroll = window.scrollY
+
+      const offsetTop = Math.max(
+        0,
+        this.parentScroll - this.placeholderEl.offsetTop
+      )
+      const newHeightPx = Math.max(
+        this.minHeightPx,
+        this.fullHeightPx - offsetTop
+      )
+      this.innerContainer.nativeElement.style.transform = `translate(0, ${
+        newHeightPx - this.fullHeightPx
+      }px)`
+      this.expandRatio =
+        (newHeightPx - this.minHeightPx) /
+        (this.fullHeightPx - this.minHeightPx)
+      this.changeDetector.detectChanges()
+    })
+  }
+}

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

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { ExpandablePanelComponent } from './expandable-panel/expandable-panel.component'
+import { StickyHeaderComponent } from './sticky-header/sticky-header.component'
+import { AnchorLinkDirective } from './anchor-link/anchor-link.directive'
+import { ExpandablePanelButtonComponent } from './expandable-panel-button/expandable-panel-button.component'
+import { MatIconModule } from '@angular/material/icon'
+import { CarouselComponent } from './carousel/carousel.component'
+
+@NgModule({
+  imports: [CommonModule, MatIconModule, TranslateModule.forChild()],
+  declarations: [
+    ExpandablePanelComponent,
+    StickyHeaderComponent,
+    AnchorLinkDirective,
+    ExpandablePanelButtonComponent,
+    CarouselComponent,
+  ],
+  exports: [
+    ExpandablePanelComponent,
+    StickyHeaderComponent,
+    AnchorLinkDirective,
+    ExpandablePanelButtonComponent,
+    CarouselComponent,
+  ],
+})
+export class UiLayoutModule {}

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

@@ -0,0 +1,3 @@
+export * from './lib/ui-map.module'
+export * from './lib/components/map/map.component'
+export * from './lib/components/feature-detail/feature-detail.component'

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.css

@@ -0,0 +1,6 @@
+.property {
+  border-bottom: 1px solid #f2f2f2;
+  padding-bottom: 0.625rem;
+  margin-bottom: 0.625rem;
+  font-size: 0.75rem;
+}

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.html

@@ -0,0 +1,6 @@
+<div *ngIf="feature" class="root">
+  <div class="property" *ngFor="let propName of properties">
+    <div>{{ propName }}</div>
+    <div class="font-bold">{{ feature.get(propName) }}</div>
+  </div>
+</div>

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.ts

@@ -0,0 +1,21 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import Feature from 'ol/Feature'
+import { Geometry } from 'ol/geom'
+
+const geometryKeys = ['geometry', 'the_geom']
+
+@Component({
+  selector: 'gn-ui-feature-detail',
+  templateUrl: './feature-detail.component.html',
+  styleUrls: ['./feature-detail.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FeatureDetailComponent {
+  @Input() feature: Feature<Geometry>
+
+  get properties() {
+    return Object.keys(this.feature.getProperties()).filter(
+      (prop) => !geometryKeys.includes(prop)
+    )
+  }
+}

package/src/libs/ui/map/src/lib/components/map/map.component.html

@@ -0,0 +1,15 @@
+<div class="h-full w-full" #map></div>
+<div
+  class="absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none"
+  [ngClass]="
+    (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'
+  "
+>
+  <div
+    class="absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60"
+  ></div>
+  <mat-icon class="material-symbols-outlined !w-16 !h-16 text-[64px] mb-4"
+    >swipe</mat-icon
+  >
+  <p translate>map.navigation.message</p>
+</div>

package/src/libs/ui/map/src/lib/components/map/map.component.ts

@@ -0,0 +1,57 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
+import Map from 'ol/Map'
+import { fromEvent, merge, Observable, of, timer } from 'rxjs'
+import { delay, map, startWith, switchMap } from 'rxjs/operators'
+
+@Component({
+  selector: 'gn-ui-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MapComponent implements OnInit, AfterViewInit {
+  @Input() map: Map
+  @ViewChild('map') container: ElementRef
+  resizeObserver = new ResizeObserver(() => {
+    this.map.updateSize()
+    this.resizeObserver.unobserve(this.container.nativeElement)
+  })
+  mapMuted$: Observable<boolean>
+  cancelMapmuted$: Observable<boolean>
+  displayMessage$: Observable<boolean>
+
+  constructor(private _element: ElementRef) {}
+
+  ngOnInit() {
+    // this will show the message when a 'mapmuted' event is received and hide it a few seconds later
+    // 'movestart' and 'singleclick' will cancel displaying the message in particular for two finger interactions on mobile
+    this.displayMessage$ = merge(
+      fromEvent(this.map, 'mapmuted').pipe(map(() => true)),
+      fromEvent(this.map, 'movestart').pipe(map(() => false)),
+      fromEvent(this.map, 'singleclick').pipe(map(() => false))
+    ).pipe(
+      switchMap((muted) =>
+        muted
+          ? timer(2000).pipe(
+              map(() => false),
+              startWith(true),
+              delay(400)
+            )
+          : of(false)
+      )
+    )
+  }
+
+  ngAfterViewInit() {
+    this.map.setTarget(this.container.nativeElement)
+    this.resizeObserver.observe(this.container.nativeElement)
+  }
+}

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

@@ -0,0 +1,19 @@
+import { HttpClientModule } from '@angular/common/http'
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MapComponent } from './components/map/map.component'
+import { FeatureDetailComponent } from './components/feature-detail/feature-detail.component'
+import { TranslateModule } from '@ngx-translate/core'
+import { MatIconModule } from '@angular/material/icon'
+
+@NgModule({
+  declarations: [MapComponent, FeatureDetailComponent],
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    MatIconModule,
+    TranslateModule.forRoot(),
+  ],
+  exports: [MapComponent, FeatureDetailComponent],
+})
+export class UiMapModule {}

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

@@ -0,0 +1,20 @@
+export { FacetsModule as UiFacetsModule } from './lib/facets/facets.module'
+export * from './lib/facets/facets.model'
+export * from './lib/facets/fixtures'
+export * from './lib/facets/facet-block/facet-block.component'
+export * from './lib/facets/facet-list/facet-list.component'
+export * from './lib/facets/facet-item/facet-item.component'
+export * from './lib/ui-search.module'
+export * from './lib/results-list/results-layout.config'
+export * from './lib/results-list/results-list.component'
+export * from './lib/record-preview/record-preview.component'
+export * from './lib/record-preview-feed/record-preview-feed.component'
+export * from './lib/record-preview-row/record-preview-row.component'
+export * from './lib/record-preview-card/record-preview-card.component'
+export * from './lib/record-preview-list/record-preview-list.component'
+export * from './lib/record-preview-text/record-preview-text.component'
+export * from './lib/record-preview-title/record-preview-title.component'
+export * from './lib/record-table/record-table.component'
+export * from './lib/record-metric/record-metric.component'
+export * from './lib/results-list-item/results-list-item.component'
+export * from './lib/results-hits-number/results-hits-number.component'