geonetwork-ui 2.4.0-dev.6c8dcba0 → 2.4.0-dev.8f04e899

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

@@ -13,25 +13,29 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core'
-import { UntypedFormControl } from '@angular/forms'
+import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
 import {
   MatAutocomplete,
+  MatAutocompleteModule,
   MatAutocompleteSelectedEvent,
   MatAutocompleteTrigger,
 } from '@angular/material/autocomplete'
-import { merge, Observable, of, ReplaySubject, Subscription } from 'rxjs'
+import { first, merge, Observable, of, ReplaySubject, Subscription } from 'rxjs'
 import {
   catchError,
   debounceTime,
   distinctUntilChanged,
   filter,
   finalize,
-  first,
   map,
   switchMap,
   take,
   tap,
 } from 'rxjs/operators'
+import { MatIconModule } from '@angular/material/icon'
+import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 export type AutocompleteItem = unknown
 
@@ -40,6 +44,15 @@ export type AutocompleteItem = unknown
   templateUrl: './autocomplete.component.html',
   styleUrls: ['./autocomplete.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatIconModule,
+    PopupAlertComponent,
+    MatAutocompleteModule,
+    CommonModule,
+    TranslateModule,
+    ReactiveFormsModule,
+  ],
 })
 export class AutocompleteComponent
   implements OnInit, AfterViewInit, OnDestroy, OnChanges
@@ -49,6 +62,8 @@ export class AutocompleteComponent
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
   @Input() autoFocus = false
+  @Input() minCharacterCount? = 3
+  @Input() allowSubmit = true
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
@@ -57,22 +72,28 @@ export class AutocompleteComponent
   @ViewChild('searchInput') inputRef: ElementRef<HTMLInputElement>
 
   searching: boolean
-  suggestions$: Observable<AutocompleteItem[]>
   control = new UntypedFormControl()
-  subscription = new Subscription()
   cancelEnter = true
   selectionSubject = new ReplaySubject<MatAutocompleteSelectedEvent>(1)
   lastInputValue$ = new ReplaySubject<string>(1)
   error: string | null = null
+  suggestions$: Observable<AutocompleteItem[]>
+  subscription = new Subscription()
 
-  @Input() displayWithFn: (AutocompleteItem) => string = (item) => item
+  @Input() displayWithFn: (item: AutocompleteItem) => string = (item) =>
+    item.toString()
+
+  displayWithFnInternal = (item?: AutocompleteItem) => {
+    if (item === null || item === undefined) return null
+    return this.displayWithFn(item)
+  }
 
   constructor(private cdRef: ChangeDetectorRef) {}
   ngOnChanges(changes: SimpleChanges): void {
     const { value } = changes
     if (value) {
-      const previousTextValue = this.displayWithFn(value.previousValue)
-      const currentTextValue = this.displayWithFn(value.currentValue)
+      const previousTextValue = this.displayWithFnInternal(value.previousValue)
+      const currentTextValue = this.displayWithFnInternal(value.currentValue)
       if (previousTextValue !== currentTextValue) {
         this.updateInputValue(value.currentValue)
       }
@@ -80,20 +101,33 @@ export class AutocompleteComponent
   }
 
   ngOnInit(): void {
-    this.suggestions$ = merge(
+    const newValue$ = merge(
+      of(''),
+      this.inputCleared.pipe(map(() => '')),
       this.control.valueChanges.pipe(
         filter((value) => typeof value === 'string'),
-        filter((value: string) => value.length > 2),
-        debounceTime(400),
         distinctUntilChanged(),
-        tap(() => (this.searching = true))
-      ),
-      this.control.valueChanges.pipe(
-        filter((value) => typeof value === 'object' && value.title),
-        map((item) => item.title)
+        debounceTime(400)
       )
+    )
+
+    const externalValueChange$ = this.control.valueChanges.pipe(
+      filter((value) => typeof value === 'object' && value.title),
+      map((item) => item.title)
+    )
+
+    // this observable emits arrays of suggestions loaded using the given action
+    const suggestionsFromAction = merge(
+      newValue$.pipe(
+        filter((value: string) => value.length >= this.minCharacterCount)
+      ),
+      externalValueChange$
     ).pipe(
-      switchMap((value) => (value ? this.action(value) : of([]))),
+      tap(() => {
+        this.searching = true
+        this.error = null
+      }),
+      switchMap((value) => this.action(value)),
       catchError((error: Error) => {
         this.error = error.message
         return of([])
@@ -101,11 +135,32 @@ export class AutocompleteComponent
       finalize(() => (this.searching = false))
     )
 
-    this.subscription = this.control.valueChanges.subscribe((any) => {
-      if (any !== '') {
-        this.cancelEnter = false
-      }
-    })
+    this.suggestions$ = merge(
+      suggestionsFromAction,
+      // if a new value is under the min char count, clear suggestions
+      newValue$.pipe(
+        filter((value: string) => value.length < this.minCharacterCount),
+        map(() => [])
+      )
+    )
+
+    // close the panel whenever suggestions are cleared
+    this.subscription.add(
+      this.suggestions$
+        .pipe(filter((suggestions) => suggestions.length === 0))
+        .subscribe(() => {
+          this.triggerRef?.closePanel()
+        })
+    )
+
+    this.subscription.add(
+      this.control.valueChanges.subscribe((any) => {
+        if (any !== '') {
+          this.cancelEnter = false
+        }
+      })
+    )
+
     this.control.valueChanges
       .pipe(filter((value) => typeof value === 'string'))
       .subscribe(this.lastInputValue$)
@@ -120,7 +175,7 @@ export class AutocompleteComponent
   }
 
   ngOnDestroy(): void {
-    this.subscription.unsubscribe()
+    this.subscription?.unsubscribe()
   }
 
   updateInputValue(value: AutocompleteItem) {
@@ -139,19 +194,16 @@ export class AutocompleteComponent
       .pipe(take(1))
       .subscribe((selection) => selection && selection.option.deselect())
     this.inputRef.nativeElement.focus()
-    this.triggerRef.closePanel()
   }
 
   handleEnter(any: string) {
-    if (!this.cancelEnter) {
+    if (!this.cancelEnter && this.allowSubmit) {
       this.inputSubmitted.emit(any)
-      this.triggerRef.closePanel()
     }
   }
 
   handleClickSearch() {
     this.inputSubmitted.emit(this.inputRef.nativeElement.value)
-    this.triggerRef.closePanel()
   }
 
   handleSelection(event: MatAutocompleteSelectedEvent) {

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

@@ -0,0 +1,18 @@
+<div
+  class="gn-ui-badge flex items-center gap-1.5"
+  [ngClass]="
+    clickable
+      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'
+      : ''
+  "
+>
+  <span><ng-content></ng-content></span>
+  <gn-ui-button
+    class="material-symbols-outlined cursor-pointer text-xs"
+    *ngIf="removable"
+    (buttonClick)="removeBadge()"
+    extraClass="p-1 bg-transparent border-0 border-transparent "
+  >
+    close
+  </gn-ui-button>
+</div>

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

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { ButtonComponent } from '../button/button.component'
+
+@Component({
+  selector: 'gn-ui-badge',
+  templateUrl: './badge.component.html',
+  styleUrls: ['./badge.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+})
+export class BadgeComponent {
+  @Input() clickable? = false
+  @Input() removable? = false
+  @Output() badgeRemoveClicked = new EventEmitter<void>()
+
+  removeBadge() {
+    this.badgeRemoveClicked.emit()
+  }
+}

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

@@ -4,8 +4,8 @@ import { UtilSharedModule } from '../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { TagInputModule } from 'ngx-chips'
 import { NgxDropzoneModule } from 'ngx-dropzone'
-import { AutocompleteComponent } from './autocomplete/autocomplete.component'
 import { ButtonComponent } from './button/button.component'
+import { BadgeComponent } from './badge/badge.component'
 import { ChipsInputComponent } from './chips-input/chips-input.component'
 import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
 import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
@@ -36,7 +36,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
 
 @NgModule({
   declarations: [
-    AutocompleteComponent,
     TextInputComponent,
     DragAndDropFileInputComponent,
     ChipsInputComponent,
@@ -73,10 +72,10 @@ import { ImageInputComponent } from './image-input/image-input.component'
     DropdownSelectorComponent,
     DateRangePickerComponent,
     CheckToggleComponent,
+    BadgeComponent,
   ],
   exports: [
     DropdownSelectorComponent,
-    AutocompleteComponent,
     ButtonComponent,
     TextInputComponent,
     DragAndDropFileInputComponent,
@@ -93,6 +92,7 @@ import { ImageInputComponent } from './image-input/image-input.component'
     DateRangePickerComponent,
     EditableLabelDirective,
     ImageInputComponent,
+    BadgeComponent,
   ],
 })
 export class UiInputsModule {}

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

@@ -1,7 +1,6 @@
 export * from './lib/ui-widgets.module'
 export * from './lib/progress-bar/progress-bar.component'
 export * from './lib/loading-mask/loading-mask.component'
-export * from './lib/badge/badge.component'
 export * from './lib/color-scale/color-scale.component'
 export * from './lib/popup-alert/popup-alert.component'
 export * from './lib/spinning-loader/spinning-loader.component'

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.ts

@@ -7,12 +7,16 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-popup-alert',
   templateUrl: './popup-alert.component.html',
   styleUrls: ['./popup-alert.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
 })
 export class PopupAlertComponent implements OnInit {
   @Input() icon: string

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

@@ -9,7 +9,6 @@ import { TagInputModule } from 'ngx-chips'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { LoadingMaskComponent } from './loading-mask/loading-mask.component'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { PopupAlertComponent } from './popup-alert/popup-alert.component'
 import { MatIconModule } from '@angular/material/icon'
 import { SpinningLoaderComponent } from './spinning-loader/spinning-loader.component'
 import { CommonModule } from '@angular/common'
@@ -20,7 +19,6 @@ import { CommonModule } from '@angular/common'
     ProgressBarComponent,
     StepBarComponent,
     LoadingMaskComponent,
-    PopupAlertComponent,
     SpinningLoaderComponent,
   ],
   imports: [
@@ -38,7 +36,6 @@ import { CommonModule } from '@angular/common'
     ProgressBarComponent,
     StepBarComponent,
     LoadingMaskComponent,
-    PopupAlertComponent,
     SpinningLoaderComponent,
   ],
 })

package/esm2022/libs/ui/widgets/src/lib/badge/badge.component.mjs

@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-export class BadgeComponent {
-    constructor() {
-        this.clickable = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, isStandalone: true, selector: "gn-ui-badge", inputs: { clickable: "clickable" }, ngImport: i0, template: "<div\n  class=\"gn-ui-badge\"\n  [ngClass]=\"\n    clickable\n      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'\n      : ''\n  \"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div\n  class=\"gn-ui-badge\"\n  [ngClass]=\"\n    clickable\n      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'\n      : ''\n  \"\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { clickable: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy91aS93aWRnZXRzL3NyYy9saWIvYmFkZ2UvYmFkZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy91aS93aWRnZXRzL3NyYy9saWIvYmFkZ2UvYmFkZ2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUE7QUFDekUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFBOzs7QUFVOUMsTUFBTSxPQUFPLGNBQWM7SUFSM0I7UUFTVyxjQUFTLEdBQUcsS0FBSyxDQUFBO0tBQzNCOytHQUZZLGNBQWM7bUdBQWQsY0FBYywyR0NYM0Isb01BVUEseURERFksWUFBWTs7NEZBRVgsY0FBYztrQkFSMUIsU0FBUzsrQkFDRSxhQUFhLG1CQUdOLHVCQUF1QixDQUFDLE1BQU0sY0FDbkMsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDOzhCQUdkLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2duLXVpLWJhZGdlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JhZGdlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYmFkZ2UuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIEJhZGdlQ29tcG9uZW50IHtcbiAgQElucHV0KCkgY2xpY2thYmxlID0gZmFsc2Vcbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJnbi11aS1iYWRnZVwiXG4gIFtuZ0NsYXNzXT1cIlxuICAgIGNsaWNrYWJsZVxuICAgICAgPyAnaG92ZXI6YmctcHJpbWFyeSBjdXJzb3ItcG9pbnRlciB0cmFuc2l0aW9uLWNvbG9ycyBkdXJhdGlvbi0xMDAnXG4gICAgICA6ICcnXG4gIFwiXG4+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PlxuIl19

package/libs/ui/widgets/src/lib/badge/badge.component.d.ts

@@ -1,7 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class BadgeComponent {
-    clickable: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "gn-ui-badge", never, { "clickable": { "alias": "clickable"; "required": false; }; }, {}, never, ["*"], true, never>;
-}
-//# sourceMappingURL=badge.component.d.ts.map

package/libs/ui/widgets/src/lib/badge/badge.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/ui/widgets/src/lib/badge/badge.component.ts"],"names":[],"mappings":";AAGA,qBAQa,cAAc;IAChB,SAAS,UAAQ;yCADf,cAAc;2CAAd,cAAc;CAE1B"}

package/src/libs/ui/widgets/src/lib/badge/badge.component.html

@@ -1,10 +0,0 @@
-<div
-  class="gn-ui-badge"
-  [ngClass]="
-    clickable
-      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'
-      : ''
-  "
->
-  <ng-content></ng-content>
-</div>

package/src/libs/ui/widgets/src/lib/badge/badge.component.ts

@@ -1,14 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-@Component({
-  selector: 'gn-ui-badge',
-  templateUrl: './badge.component.html',
-  styleUrls: ['./badge.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [CommonModule],
-})
-export class BadgeComponent {
-  @Input() clickable = false
-}