geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.73bac9979

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

@@ -3,14 +3,14 @@
     class="absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none"
     *ngIf="!allowSubmit"
   >
-    <mat-icon class="material-symbols-outlined text-primary"> search </mat-icon>
+    <ng-icon name="iconoirSearch" class="text-primary search"></ng-icon>
   </div>
   <input
     #searchInput
     type="text"
     class="gn-ui-text-input"
     [ngClass]="{
-      'px-[--icon-width]': !allowSubmit
+      'px-[--icon-width]': !allowSubmit,
     }"
     [placeholder]="placeholder"
     [formControl]="control"
@@ -29,7 +29,7 @@
     aria-label="Clear"
     (buttonClick)="clear()"
   >
-    <mat-icon class="material-symbols-outlined">close</mat-icon>
+    <ng-icon name="matClose"></ng-icon>
   </gn-ui-button>
   <gn-ui-button
     type="light"
@@ -39,13 +39,13 @@
     data-test="autocomplete-submit-btn"
     (buttonClick)="handleClickSearch()"
   >
-    <mat-icon class="material-symbols-outlined">search</mat-icon>
+    <ng-icon name="iconoirSearch"></ng-icon>
   </gn-ui-button>
 
   <gn-ui-popup-alert
     *ngIf="error"
     class="absolute mt-2 w-full top-[100%] left-0"
-    icon="error_outline"
+    icon="matErrorOutlineOutline"
     position="top"
     type="warning"
   >

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

@@ -32,11 +32,17 @@ import {
   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'
 import { ButtonComponent } from '../button/button.component'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirSearch } from '@ng-icons/iconoir'
+import { matClose } from '@ng-icons/material-icons/baseline'
 
 export type AutocompleteItem = unknown
 
@@ -47,13 +53,22 @@ export type AutocompleteItem = unknown
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    MatIconModule,
     PopupAlertComponent,
     MatAutocompleteModule,
     CommonModule,
     TranslateModule,
     ReactiveFormsModule,
     ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSearch,
+      matClose,
+    }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
   ],
 })
 export class AutocompleteComponent
@@ -228,6 +243,7 @@ export class AutocompleteComponent
     }
     if (this.clearOnSelection) {
       this.inputRef.nativeElement.value = ''
+      this.control.setValue('')
     }
   }
 }

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

@@ -18,9 +18,9 @@
       --gn-ui-button-width: 1.4em;
       --gn-ui-button-height: 1.4em;
       --gn-ui-button-rounded: 1.4em;
-      --gn-ui-button-background: white;
+      --gn-ui-button-background: var(--gn-ui-badge-background-color, white);
     "
   >
-    <mat-icon class="material-symbols-outlined leading-[1.1]">close</mat-icon>
+    <ng-icon name="matClose"></ng-icon>
   </gn-ui-button>
 </div>

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

@@ -7,7 +7,12 @@ import {
   Output,
 } from '@angular/core'
 import { ButtonComponent } from '../button/button.component'
-import { MatIconModule } from '@angular/material/icon'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matClose } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-badge',
@@ -15,7 +20,15 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./badge.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ButtonComponent, MatIconModule],
+  imports: [CommonModule, ButtonComponent, NgIconComponent],
+  providers: [
+    provideIcons({
+      matClose,
+    }),
+    provideNgIconsConfig({
+      size: '1.2em',
+    }),
+  ],
 })
 export class BadgeComponent {
   @Input() clickable? = false

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

@@ -1,4 +1,7 @@
-<label class="inline-flex relative items-start cursor-pointer" [title]="title">
+<label
+  class="inline-flex relative items-start cursor-pointer"
+  [title]="title || label"
+>
   <span class="shrink-0">
     <input
       type="checkbox"

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

@@ -20,9 +20,9 @@ export class CheckToggleComponent {
   @Input() label: string
   @Input() value: boolean
   @Input() color: 'primary' | 'secondary' = 'primary'
-  @Output() toggled = new EventEmitter()
+  @Output() toggled = new EventEmitter<boolean>()
 
-  toggle(event: Event) {
-    this.toggled.emit(event)
+  toggle(value: boolean) {
+    this.toggled.emit(value)
   }
 }

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

@@ -54,7 +54,10 @@ export class ChipsInputComponent implements OnInit, OnDestroy {
     }
   }
 
-  constructor(private http: HttpClient, private translate: TranslateService) {
+  constructor(
+    private http: HttpClient,
+    private translate: TranslateService
+  ) {
     this.rawChange = new Subject<Items[]>()
     this.itemsChange = this.rawChange.pipe(distinctUntilChanged())
     this.subscription = new Subscription()

package/src/libs/ui/inputs/src/lib/copy-text-button/copy-text-button.component.html

@@ -18,15 +18,14 @@
     (click)="copyText($event)"
     [ngClass]="{
       'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-        displayText
+        displayText,
     }"
-    mat-raised-button
     [matTooltip]="tooltipText"
     matTooltipPosition="above"
   >
-    <mat-icon
-      class="material-symbols-outlined pointer-events-none align-middle card-icon"
-      >content_copy</mat-icon
-    >
+    <ng-icon
+      name="matContentCopy"
+      class="pointer-events-none align-middle card-icon"
+    ></ng-icon>
   </button>
 </div>

package/src/libs/ui/inputs/src/lib/copy-text-button/copy-text-button.component.ts

@@ -1,10 +1,17 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matContentCopy } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-copy-text-button',
   templateUrl: './copy-text-button.component.html',
   styleUrls: ['./copy-text-button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatTooltipModule, NgIcon],
+  viewProviders: [provideIcons({ matContentCopy })],
 })
 export class CopyTextButtonComponent {
   @Input() text: string

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.html

@@ -12,9 +12,7 @@
     data-cy="date-picker-button"
     extraClass="h-full"
   >
-    <mat-icon class="material-symbols-outlined text-primary"
-      >calendar_today</mat-icon
-    >
+    <ng-icon name="iconoirCalendar" class="text-primary"></ng-icon>
   </gn-ui-button>
 </span>
 <mat-datepicker #picker></mat-datepicker>

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts

@@ -7,8 +7,13 @@ import {
 } from '@angular/core'
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
-import { MatIconModule } from '@angular/material/icon'
 import { ButtonComponent } from '../button/button.component'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirCalendar } from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-date-picker',
@@ -17,10 +22,16 @@ import { ButtonComponent } from '../button/button.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    MatIconModule,
     MatNativeDateModule,
     MatDatepickerModule,
     ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({ iconoirCalendar }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
   ],
 })
 export class DatePickerComponent {

package/src/libs/ui/inputs/src/lib/date-range-dropdown/date-range-dropdown.component.css

@@ -0,0 +1,5 @@
+:host {
+  .mat-date-range-input-container {
+    display: none;
+  }
+}

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

@@ -0,0 +1,30 @@
+<gn-ui-button
+  type="outline"
+  extraClass="bg-background w-full !p-[8px] !pl-[16px]"
+  (buttonClick)="picker.open()"
+>
+  <div class="grow flex items-center mr-2 gap-2 overflow-hidden">
+    <div class="text-left font-medium truncate py-1">
+      {{ title }}
+    </div>
+  </div>
+  <ng-icon
+    [name]="isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'"
+    class="shrink-0 opacity-40"
+  >
+  </ng-icon>
+</gn-ui-button>
+<!--date range input is just present for output events and hidden from the DOM-->
+<mat-date-range-input [rangePicker]="picker">
+  <input
+    matStartDate
+    [value]="startDate"
+    (dateInput)="startDateChange.emit($event.value)"
+  />
+  <input
+    matEndDate
+    [value]="endDate"
+    (dateInput)="endDateChange.emit($event.value)"
+  />
+</mat-date-range-input>
+<mat-date-range-picker #picker></mat-date-range-picker>

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

@@ -0,0 +1,63 @@
+import {
+  AfterViewChecked,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MatNativeDateModule } from '@angular/material/core'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { ButtonComponent } from '../button/button.component'
+import { OverlayContainer } from '@angular/cdk/overlay'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matExpandLess, matExpandMore } from '@ng-icons/material-icons/baseline'
+
+@Component({
+  selector: 'gn-ui-date-range-dropdown',
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgIconComponent,
+    MatNativeDateModule,
+    MatDatepickerModule,
+    ButtonComponent,
+  ],
+  providers: [
+    provideIcons({
+      matExpandMore,
+      matExpandLess,
+    }),
+  ],
+  templateUrl: './date-range-dropdown.component.html',
+  styleUrls: ['./date-range-dropdown.component.css'],
+})
+export class DateRangeDropdownComponent implements AfterViewChecked {
+  @Input() title: string
+  @Input() startDate: Date
+  @Input() endDate: Date
+  @Output() startDateChange = new EventEmitter<Date>()
+  @Output() endDateChange = new EventEmitter<Date>()
+
+  @ViewChild('picker') picker: ElementRef
+  isPickerDisplayed = false
+
+  constructor(
+    private overlayContainer: OverlayContainer,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngAfterViewChecked() {
+    this.checkPickerOverlay()
+  }
+
+  checkPickerOverlay() {
+    const overlayContainerElement = this.overlayContainer.getContainerElement()
+    this.isPickerDisplayed =
+      overlayContainerElement.querySelector('.mat-datepicker-content') !== null
+    this.cdr.detectChanges()
+  }
+}

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.html

@@ -21,9 +21,7 @@
     extraClass="h-full"
     data-cy="date-picker-button"
   >
-    <mat-icon class="material-symbols-outlined text-primary"
-      >date_range</mat-icon
-    >
+    <ng-icon name="iconoirCalendar" class="text-primary"></ng-icon>
   </gn-ui-button>
 </span>
 <mat-date-range-picker #picker></mat-date-range-picker>

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.ts

@@ -7,8 +7,13 @@ import {
 } from '@angular/core'
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
-import { MatIconModule } from '@angular/material/icon'
 import { ButtonComponent } from '../button/button.component'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirCalendar } from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-date-range-picker',
@@ -17,10 +22,16 @@ import { ButtonComponent } from '../button/button.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    MatIconModule,
     MatNativeDateModule,
     MatDatepickerModule,
     ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({ iconoirCalendar }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
   ],
 })
 export class DateRangePickerComponent {

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

@@ -14,24 +14,24 @@
     </div>
     <div
       *ngIf="hasSelectedChoices"
-      class="shrink-0 rounded-full text-primary bg-primary-opacity-25 text-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count"
+      class="gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count"
     >
       {{ selected.length }}
     </div>
   </div>
   <button class="h-6 w-6" data-cy="clearSelection">
-    <mat-icon
-      class="material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+    <ng-icon
+      class="shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
       *ngIf="hasSelectedChoices && !overlayOpen"
       (click)="clearSelection($event)"
-    >
-      close
-    </mat-icon>
+      name="matClose"
+    ></ng-icon>
   </button>
-  <mat-icon class="material-symbols-outlined shrink-0 opacity-40">
-    <ng-container *ngIf="overlayOpen">expand_less</ng-container>
-    <ng-container *ngIf="!overlayOpen">expand_more</ng-container>
-  </mat-icon>
+  <ng-icon
+    [name]="overlayOpen ? 'matExpandLess' : 'matExpandMore'"
+    class="shrink-0 opacity-40"
+  >
+  </ng-icon>
 </gn-ui-button>
 
 <ng-template
@@ -74,11 +74,10 @@
         <div
           class="flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0"
         >
-          <mat-icon
-            class="material-symbols-outlined !h-[12px] !w-[12px] text-[12px]"
-          >
-            close</mat-icon
-          >
+          <ng-icon
+            name="matClose"
+            class="!h-[12px] !w-[11px] text-[12px]"
+          ></ng-icon>
         </div>
       </button>
 
@@ -94,11 +93,8 @@
           class="absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2"
           (click)="clearSearchInputValue($event)"
         >
-          <mat-icon
-            class="material-symbols-outlined !h-[10px] !w-[12px] text-[12px]"
-          >
-            close
-          </mat-icon>
+          <ng-icon class="!h-[10px] !w-[12px] text-[12px]" name="matClose">
+          </ng-icon>
         </button>
       </div>
     </div>

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

@@ -9,9 +9,8 @@
   <gn-ui-button
     type="outline"
     class="grow min-w-0"
-    extraClass="bg-background !p-[8px] !pl-[16px] flex flex-row w-full {{
-      extraBtnClass
-    }}"
+    [style.--gn-ui-button-padding]="'8px 8px 8px 16px'"
+    extraClass="bg-background flex flex-row w-full {{ extraBtnClass }}"
     [title]="title"
     [attr.aria-owns]="id"
     (buttonClick)="openOverlay()"
@@ -23,10 +22,11 @@
     <div class="grow font-medium truncate py-1 mr-2 text-left">
       {{ getChoiceLabel() | translate }}
     </div>
-    <mat-icon class="material-symbols-outlined shrink-0 opacity-40">
-      <ng-container *ngIf="overlayOpen">expand_less</ng-container>
-      <ng-container *ngIf="!overlayOpen">expand_more</ng-container>
-    </mat-icon>
+    <ng-icon
+      [name]="overlayOpen ? 'matExpandLess' : 'matExpandMore'"
+      class="shrink-0 opacity-40"
+    >
+    </ng-icon>
   </gn-ui-button>
 </div>
 

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

@@ -20,8 +20,13 @@ import { firstValueFrom } from 'rxjs'
 import { DropdownChoice } from './dropdown-selector.model'
 import { CommonModule } from '@angular/common'
 import { TranslateModule } from '@ngx-translate/core'
-import { MatIconModule } from '@angular/material/icon'
 import { ButtonComponent } from '../button/button.component'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matExpandLess, matExpandMore } from '@ng-icons/material-icons/baseline'
 
 const DEFAULT_ROW_NUMBERS = 6
 
@@ -35,8 +40,17 @@ const DEFAULT_ROW_NUMBERS = 6
     CommonModule,
     ButtonComponent,
     OverlayModule,
-    MatIconModule,
     TranslateModule,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      matExpandLess,
+      matExpandMore,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class DropdownSelectorComponent implements OnInit {

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

@@ -19,7 +19,10 @@ export class EditableLabelDirective implements OnChanges, AfterViewInit {
 
   appendedInput: HTMLInputElement
 
-  constructor(private el: ElementRef, private renderer: Renderer2) {}
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2
+  ) {}
 
   ngOnChanges() {
     if (this.appendedInput) {

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

@@ -5,9 +5,10 @@
     [ngClass]="{
       'border-primary-lighter bg-primary-white': dragFilesOver,
       'border-gray-300': !dragFilesOver,
-      'cursor-pointer hover:border-gray-500': !isUploadInProgress
+      'cursor-pointer hover:border-gray-500': !isUploadInProgress && !disabled,
+      'cursor-not-allowed': disabled,
     }"
-    [attr.tabindex]="isUploadInProgress ? null : 0"
+    [attr.tabindex]="isUploadInProgress || disabled ? null : 0"
     (dragFilesOver)="handleDragFilesOver($event)"
     (dropFiles)="handleDropFiles($event)"
     (keydown.enter)="fileInput.click()"
@@ -17,23 +18,23 @@
       type="file"
       class="hidden"
       (change)="handleFileInput($event)"
-      [disabled]="isUploadInProgress"
+      [disabled]="isUploadInProgress || disabled"
     />
 
     <div
       class="w-14 h-14 rounded-md bg-gray-50 grid"
       *ngIf="!isUploadInProgress"
     >
-      <mat-icon
+      <ng-icon
         *ngIf="!dragFilesOver"
-        class="material-symbols-outlined place-self-center text-primary"
-        >cloud_upload</mat-icon
-      >
-      <mat-icon
+        class="place-self-center text-primary"
+        name="iconoirCloudUpload"
+      ></ng-icon>
+      <ng-icon
         *ngIf="dragFilesOver"
-        class="material-symbols-outlined place-self-center text-primary"
-        >add_box</mat-icon
-      >
+        class="place-self-center text-primary"
+        name="iconoirFramePlusIn"
+      ></ng-icon>
     </div>
     <div
       *ngIf="isUploadInProgress"
@@ -82,8 +83,8 @@
     </p>
     <gn-ui-url-input
       class="w-full"
-      [disabled]="isUploadInProgress"
-      (valueChange)="handleUrlChange($event)"
+      [disabled]="isUploadInProgress || disabled"
+      (uploadClick)="handleUrlChange($event)"
     ></gn-ui-url-input>
   </label>
 </div>

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

@@ -7,13 +7,18 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
 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 { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { UrlInputComponent } from '../url-input/url-input.component'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirCloudUpload, iconoirFramePlusIn } from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-file-input',
@@ -24,16 +29,26 @@ import { UrlInputComponent } from '../url-input/url-input.component'
   imports: [
     CommonModule,
     ButtonComponent,
-    MatIconModule,
     FilesDropDirective,
     MatProgressSpinnerModule,
     TranslateModule,
     UrlInputComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirCloudUpload,
+      iconoirFramePlusIn,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class FileInputComponent {
   @Input() maxSizeMB: number
   @Input() uploadProgress?: number
+  @Input() disabled? = false
   @Output() fileChange: EventEmitter<File> = new EventEmitter()
   @Output() urlChange: EventEmitter<string> = new EventEmitter()
   @Output() uploadCancel: EventEmitter<void> = new EventEmitter()
@@ -75,7 +90,8 @@ export class FileInputComponent {
     this.handleDropFiles(Array.from((event.target as HTMLInputElement).files))
   }
 
-  handleUrlChange(url: string) {
+  handleUrlChange(url: string | null) {
+    if (!url) return
     this.urlChange.emit(url)
   }