geonetwork-ui 2.6.0-dev.f073bbb4e → 2.7.0-dev.30c4f9cfa

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

@@ -5,12 +5,15 @@ import {
   Input,
   Output,
 } from '@angular/core'
+import { MatCheckboxModule } from '@angular/material/checkbox'
 
 @Component({
   selector: 'gn-ui-checkbox',
   templateUrl: './checkbox.component.html',
   styleUrls: ['./checkbox.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatCheckboxModule],
 })
 export class CheckboxComponent {
   @Input() type: 'primary' | 'secondary' | 'default' = 'default'

package/src/libs/ui/inputs/src/lib/drag-and-drop-file-input/drag-and-drop-file-input.component.html

@@ -1,7 +1,7 @@
 <div class="flex h-full">
   <ngx-dropzone
     class="flex-1"
-    multiple="false"
+    [multiple]="false"
     (change)="selectFile($event)"
     [accept]="accept"
   >

package/src/libs/ui/inputs/src/lib/drag-and-drop-file-input/drag-and-drop-file-input.component.ts

@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { NgxDropzoneModule } from 'ngx-dropzone'
+import { CommonModule } from '@angular/common'
 
 export const placeholder = 'dropFile'
 marker('dropFile')
@@ -8,6 +10,8 @@ marker('dropFile')
   selector: 'gn-ui-drag-and-drop-file-input',
   templateUrl: './drag-and-drop-file-input.component.html',
   styleUrls: ['./drag-and-drop-file-input.component.css'],
+  standalone: true,
+  imports: [NgxDropzoneModule, CommonModule],
 })
 export class DragAndDropFileInputComponent {
   @Input() placeholder = placeholder

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

@@ -59,7 +59,7 @@
     #overlayContainer
   >
     <div
-      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
+      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
     >
       <button
         type="button"

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

@@ -13,6 +13,7 @@ import {
   CdkConnectedOverlay,
   CdkOverlayOrigin,
   ConnectedPosition,
+  OverlayModule,
   ScrollStrategyOptions,
 } from '@angular/cdk/overlay'
 import { take } from 'rxjs/operators'
@@ -21,12 +22,38 @@ import {
   createFuzzyFilter,
   propagateToDocumentOnly,
 } from '../../../../../../libs/util/shared/src'
+import { ButtonComponent } from '../button/button.component'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { FormsModule } from '@angular/forms'
+import { TranslatePipe } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-dropdown-multiselect',
   templateUrl: './dropdown-multiselect.component.html',
   styleUrls: ['./dropdown-multiselect.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    NgIcon,
+    OverlayModule,
+    FormsModule,
+    TranslatePipe,
+  ],
+  providers: [
+    provideIcons({
+      matClose,
+      matExpandMore,
+      matExpandLess,
+    }),
+  ],
+  standalone: true,
 })
 export class DropdownMultiselectComponent {
   @Input() title: string

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

@@ -19,7 +19,7 @@
     (keydown)="handleTriggerKeydown($event)"
     [disabled]="disabled"
   >
-    <div class="grow font-medium truncate py-1 mr-2 text-left">
+    <div class="grow truncate py-1 mr-2 text-left">
       {{ getChoiceLabel() | translate }}
     </div>
     <ng-icon

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

@@ -19,7 +19,7 @@ import {
 import { firstValueFrom } from 'rxjs'
 import { DropdownChoice } from './dropdown-selector.model'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { ButtonComponent } from '../button/button.component'
 import {
   NgIconComponent,
@@ -40,7 +40,7 @@ const DEFAULT_ROW_NUMBERS = 6
     CommonModule,
     ButtonComponent,
     OverlayModule,
-    TranslateModule,
+    TranslatePipe,
     NgIconComponent,
   ],
   providers: [

package/src/libs/ui/inputs/src/lib/file-input/file-input.component.ts

@@ -8,9 +8,8 @@ import {
   Output,
 } from '@angular/core'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { ButtonComponent } from '../button/button.component'
 import { FilesDropDirective } from '../files-drop/files-drop.directive'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { UrlInputComponent } from '../url-input/url-input.component'
 import {
@@ -28,12 +27,12 @@ import { iconoirCloudUpload, iconoirFramePlusIn } from '@ng-icons/iconoir'
   standalone: true,
   imports: [
     CommonModule,
-    ButtonComponent,
     FilesDropDirective,
     MatProgressSpinnerModule,
-    TranslateModule,
     UrlInputComponent,
     NgIconComponent,
+    TranslatePipe,
+    TranslateDirective,
   ],
   providers: [
     provideIcons({

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.component.html

@@ -0,0 +1,23 @@
+<ul class="flex flex-wrap list-none gap-2">
+  <li *ngFor="let choice of choices">
+    <label
+      class=""
+      [ngClass]="{
+        selected: isSelected(choice),
+      }"
+    >
+      <input
+        class="hidden"
+        type="checkbox"
+        #checkBox
+        [checked]="isSelected(choice)"
+        (change)="select(choice, checkBox.checked)"
+        [attr.data-cy]="'inlineFilter-' + choice.value"
+      />
+      <ng-container
+        *ngTemplateOutlet="itemTemplate; context: { $implicit: choice }"
+      >
+      </ng-container>
+    </label>
+  </li>
+</ul>

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.component.ts

@@ -0,0 +1,47 @@
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import { Choice } from './inline-filter.model'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-inline-filter',
+  templateUrl: './inline-filter.component.html',
+  standalone: true,
+  imports: [CommonModule],
+})
+export class InlineFilterComponent {
+  @Input() choices: Choice[]
+  @Input() selected: unknown[] = []
+
+  @Output() selectValues = new EventEmitter<unknown[]>()
+
+  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>
+
+  isSelected(choice: Choice) {
+    return (
+      this.selected.indexOf(choice.value) > -1 ||
+      (this.selected.length === 0 && choice.value === 'all')
+    )
+  }
+
+  select(choice: Choice, selected: boolean) {
+    if (choice.value === 'all' && selected) {
+      this.selected = [choice.value]
+    } else {
+      this.selected = selected
+        ? [...this.selected.filter((v) => v !== choice.value), choice.value]
+        : this.selected.filter((v) => v !== choice.value)
+
+      // If any value selected, unselect all
+      this.selected = this.selected.filter((v) => v !== 'all')
+    }
+
+    this.selectValues.emit(this.selected)
+  }
+}

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.model.ts

@@ -0,0 +1,5 @@
+export interface Choice {
+  value: unknown
+  label: string
+  icon?: string
+}

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.html

@@ -0,0 +1,43 @@
+<div
+  class="flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300"
+>
+  <div
+    class="relative shrink-0"
+    *ngIf="featureCatalog?.featureTypes?.length > 1"
+  >
+    <input
+      type="text"
+      [placeholder]="'search.filter.into.feature.catalog' | translate"
+      class="w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md"
+      [(ngModel)]="searchTerm"
+      (ngModelChange)="filterAction(searchTerm)"
+    />
+    <ng-icon
+      class="absolute right-2.5 top-1 w-6 h-6 text-black"
+      name="iconoirSearch"
+    ></ng-icon>
+  </div>
+  <div class="text-sm px-1 ml-auto hidden sm:inline">
+    <ng-container *ngIf="featureCatalog?.featureTypes?.length > 1">
+      <span
+        class="text-sm font-medium text-gray-900"
+        data-cy="total-objects-label"
+        translate
+        >record.feature.catalog.number.total.object</span
+      ><span
+        class="text-sm font-bold px-1 text-gray-900"
+        data-cy="total-objects"
+        >{{ totalObjects }}</span
+      >
+      <span class="px-1.5">|</span>
+    </ng-container>
+    <span
+      class="text-sm font-medium px-1 text-gray-900"
+      data-cy="total-attributes-label"
+      translate
+      >record.feature.catalog.number.total.attribute</span
+    ><span class="text-sm font-bold text-gray-900" data-cy="total-attributes">{{
+      totalAttributes
+    }}</span>
+  </div>
+</div>

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.ts

@@ -0,0 +1,83 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import { DatasetFeatureCatalog } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { FormsModule } from '@angular/forms'
+import { of } from 'rxjs'
+import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'
+import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { iconoirSearch } from '@ng-icons/iconoir'
+
+@Component({
+  selector: 'gn-ui-search-feature-catalog',
+  templateUrl: './search-feature-catalog.component.html',
+  styleUrls: ['./search-feature-catalog.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgIcon,
+    TranslateDirective,
+    TranslatePipe,
+    FormsModule,
+  ],
+  viewProviders: [
+    provideIcons({ iconoirSearch }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
+  ],
+})
+export class SearchFeatureCatalogComponent {
+  private _featureCatalog: DatasetFeatureCatalog
+  searchTerm: any
+  @Input() set featureCatalog(value: DatasetFeatureCatalog) {
+    this._featureCatalog = value
+    this.filteredFeatureCatalog = value
+  }
+  get featureCatalog(): DatasetFeatureCatalog {
+    return this._featureCatalog
+  }
+
+  @Output() filteredFeatureCatalogChange =
+    new EventEmitter<DatasetFeatureCatalog>()
+  filteredFeatureCatalog: DatasetFeatureCatalog
+
+  filterAction = (searchTerm: string): void => {
+    of(searchTerm)
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        tap(() => {
+          const filtered = (this.featureCatalog?.featureTypes || []).filter(
+            (featureType) => {
+              const fuzzyFilter = createFuzzyFilter(searchTerm)
+              return (
+                fuzzyFilter(featureType.name) ||
+                (featureType.definition && fuzzyFilter(featureType.definition))
+              )
+            }
+          )
+          this.filteredFeatureCatalog = {
+            ...this.featureCatalog,
+            featureTypes: filtered,
+          }
+          this.filteredFeatureCatalogChange.emit(this.filteredFeatureCatalog)
+        })
+      )
+      .subscribe()
+  }
+
+  get totalObjects(): number {
+    return this.filteredFeatureCatalog?.featureTypes?.length || 0
+  }
+
+  get totalAttributes(): number {
+    return (
+      this.filteredFeatureCatalog?.featureTypes?.reduce(
+        (total, featureType) => total + (featureType.attributes?.length || 0),
+        0
+      ) || 0
+    )
+  }
+}

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

@@ -15,7 +15,6 @@ button.disabled {
   stroke-linecap: round;
   position: absolute;
   top: 50%;
-  left: 50%;
   width: 2.5em;
   height: 2.5em;
   transform: translate(-50%, -50%);

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

@@ -1,23 +1,26 @@
-<div class="inline-block relative align-middle" style="line-height: 0.7em">
-  <button
-    type="button"
-    class="-m-[8px] p-[8px]"
-    (click)="toggle($event)"
+<div class="inline-block relative align-middle cursor-pointer">
+  <gn-ui-button
+    [type]="'outline'"
+    [disabled]="disabled"
+    (buttonClick)="toggle($event)"
     [ngClass]="{
       enabled: toggled,
-      'disabled opacity-45': !toggled,
+      disabled: !toggled || disabled,
       'transition hover:scale-125 will-change-transform': !disabled,
-      'cursor-default': disabled,
     }"
   >
     <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>
-  </button>
+    <span *ngIf="displayLabel" class="mx-2 text-[16px] content-center" translate
+      >favorite.starToggle.label</span
+    >
+  </gn-ui-button>
   <svg
     #starOverlay
     class="star-toggle-overlay"
     width="40px"
     height="40px"
     viewBox="-15 -15 30 30"
+    [style]="displayLabel ? 'left: 16px' : 'left: 50%'"
   >
     <g>
       <path d="M 0,13.229167 V 0" />

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

@@ -11,6 +11,8 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
 import { matStar, matStarBorder } from '@ng-icons/material-icons/baseline'
+import { ButtonComponent } from '../button/button.component'
+import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-star-toggle',
@@ -18,12 +20,13 @@ import { matStar, matStarBorder } from '@ng-icons/material-icons/baseline'
   styleUrls: ['./star-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, NgIcon],
+  imports: [CommonModule, NgIcon, ButtonComponent, TranslateDirective],
   viewProviders: [provideIcons({ matStar, matStarBorder })],
 })
 export class StarToggleComponent {
   @Input() toggled!: boolean
   @Input() disabled = false
+  @Input() displayLabel = false
   @Output() newValue = new EventEmitter<boolean>()
   @ViewChild('starOverlay') overlay: ElementRef
 

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.ts

@@ -7,7 +7,7 @@ import {
   Output,
 } from '@angular/core'
 import { MatButtonToggleModule } from '@angular/material/button-toggle'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 
 export type SwitchToggleOption = {
   label: string
@@ -21,7 +21,7 @@ export type SwitchToggleOption = {
   styleUrls: ['./switch-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatButtonToggleModule, CommonModule, TranslateModule],
+  imports: [MatButtonToggleModule, CommonModule, TranslatePipe],
 })
 export class SwitchToggleComponent {
   @Input() options: SwitchToggleOption[]

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

@@ -13,6 +13,7 @@ import { Observable } from 'rxjs'
   selector: 'gn-ui-viewport-intersector',
   templateUrl: './viewport-intersector.component.html',
   styleUrls: ['./viewport-intersector.component.css'],
+  standalone: true,
 })
 export class ViewportIntersectorComponent implements OnInit, OnDestroy {
   @Output() isInViewport = new EventEmitter<boolean>()

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

@@ -1,5 +1,6 @@
 export * from './lib/anchor-link/anchor-link.directive'
 export * from './lib/carousel/carousel.component'
+export * from './lib/cell-popin/cell-popin.component'
 export * from './lib/expandable-panel-button/expandable-panel-button.component'
 export * from './lib/expandable-panel/expandable-panel.component'
 export * from './lib/form-field-wrapper/form-field-wrapper.component'
@@ -15,4 +16,4 @@ export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination-dots/pagination-dots.component'
 export * from './lib/previous-next-buttons/previous-next-buttons.component'
 export * from './lib/paginable.interface'
-export * from './lib/ui-layout.module'
+export * from './lib/truncated-text/truncated-text.component'

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

@@ -1,4 +1,5 @@
 import {
+  AfterViewChecked,
   ChangeDetectorRef,
   Directive,
   HostBinding,
@@ -10,21 +11,36 @@ import {
 
 @Directive({
   selector: '[gnUiAnchorLink]',
+  standalone: true,
 })
-export class AnchorLinkDirective implements OnInit, OnDestroy {
+export class AnchorLinkDirective
+  implements OnInit, AfterViewChecked, OnDestroy
+{
   @Input('gnUiAnchorLink') targetId: string
   @Input('gnUiAnchorLinkDisabledClass') disabledClass: string
   @Input('gnUiAnchorLinkEnabledClass') enabledClass: string
+  @Input('gnUiAnchorLinkInViewClass') inViewClass: string
+  @Input('gnUiAnchorLinkOutOfViewClass') outOfViewClass: string
 
   @HostBinding('class')
   get elementClass(): string {
-    return this.disabled ? this.disabledClass : this.enabledClass
+    if (this.disabled) {
+      return this.disabledClass
+    }
+    if (this.inView) {
+      return `${this.inViewClass} ${this.enabledClass}`
+    } else {
+      return `${this.outOfViewClass} ${this.enabledClass}`
+    }
   }
 
   disabled = false
   observer = new MutationObserver(() => {
     this.refreshDisabledState()
   })
+  inView = false
+  intersectionObserver: IntersectionObserver
+  initialized = false
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
@@ -36,8 +52,37 @@ export class AnchorLinkDirective implements OnInit, OnDestroy {
     this.refreshDisabledState()
   }
 
+  ngAfterViewChecked() {
+    if (!this.initialized && !this.disabled) {
+      const target = document.getElementById(this.targetId)
+      if (target) {
+        this.initializeIntersectionObserver(target)
+        this.initialized = true
+      }
+    }
+  }
+
+  initializeIntersectionObserver(target: HTMLElement) {
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          this.inView = entry.isIntersecting
+          this.changeDetector.detectChanges()
+        })
+      },
+      {
+        root: null,
+        rootMargin: '-30% 0% -60% 0%',
+      }
+    )
+    this.intersectionObserver.observe(target)
+  }
+
   ngOnDestroy() {
     this.observer.disconnect()
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect()
+    }
   }
 
   refreshDisabledState() {

package/src/libs/ui/layout/src/lib/block-list/block-list.component.css

@@ -5,3 +5,25 @@
 :host {
   position: relative;
 }
+
+@media screen and (min-width: 769px) {
+  .size-L {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-M {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-S {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-XS {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+}

package/src/libs/ui/layout/src/lib/block-list/block-list.component.html

@@ -1,8 +1,7 @@
 <div
-  class="block-list-container flex flex-col"
+  class="grid gap-4 w-full xs:grid-cols-2"
   #blockContainer
-  [ngClass]="containerClass"
-  [ngStyle]="{ minHeight: minHeight + 'px' }"
+  [ngClass]="[containerClass, 'size-' + subComponentSize]"
 >
   <ng-content></ng-content>
 </div>