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

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

@@ -15,8 +15,9 @@
         style="--gn-ui-button-height: 40px; --gn-ui-button-width: 40px"
         extraClass="absolute right-2 bottom-2 invisible group-hover:visible bg-background"
         (buttonClick)="handleDelete()"
+        [disabled]="disabled"
       >
-        <mat-icon class="material-symbols-outlined">delete</mat-icon>
+        <ng-icon name="iconoirBin"></ng-icon>
       </gn-ui-button>
     </div>
     <gn-ui-text-input
@@ -25,12 +26,11 @@
       [value]="altText ?? ''"
       (valueChange)="handleAltTextChange($event)"
       extraClass="gn-ui-editor-textarea"
+      [disabled]="disabled"
     ></gn-ui-text-input>
     <div class="flex flex-row gap-2 mt-2">
       <gn-ui-button type="gray" (buttonClick)="handleDelete()">
-        <mat-icon class="material-symbols-outlined me-1 text-primary"
-          >delete</mat-icon
-        >
+        <ng-icon class="me-1 text-primary" name="iconoirBin"></ng-icon>
         {{ 'input.image.delete' | translate }}
       </gn-ui-button>
       <gn-ui-button
@@ -38,9 +38,7 @@
         type="gray"
         (buttonClick)="toggleAltTextInput()"
       >
-        <mat-icon class="material-symbols-outlined me-1 text-primary"
-          >add</mat-icon
-        >
+        <ng-icon name="iconoirPlus" class="me-1 text-primary"></ng-icon>
         {{ 'input.image.displayAltTextInput' | translate }}
       </gn-ui-button>
     </div>
@@ -56,10 +54,11 @@
         'border-primary-lighter bg-primary-white': dragFilesOver,
         'border-gray-300': !dragFilesOver,
         'cursor-pointer hover:border-gray-500':
-          !isUploadInProgress && !uploadError && !showUrlInput
+          !isUploadInProgress && !uploadError && !showUrlInput && !disabled,
+        'cursor-not-allowed': disabled,
       }"
       [attr.tabindex]="
-        isUploadInProgress || uploadError || showUrlInput ? null : 0
+        isUploadInProgress || uploadError || showUrlInput || disabled ? null : 0
       "
       (keydown.enter)="fileInput.click()"
       (dragFilesOver)="handleDragFilesOver($event)"
@@ -69,16 +68,16 @@
         class="w-14 h-14 rounded-md bg-gray-50 grid"
         *ngIf="!isUploadInProgress && !uploadError"
       >
-        <mat-icon
+        <ng-icon
           *ngIf="!dragFilesOver"
-          class="material-symbols-outlined place-self-center text-primary"
-          >image</mat-icon
-        >
-        <mat-icon
+          class="place-self-center text-primary"
+          name="iconoirMediaImage"
+        ></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
@@ -105,10 +104,10 @@
       </div>
 
       <div class="w-14 h-14 rounded-md bg-gray-50 grid" *ngIf="uploadError">
-        <mat-icon
-          class="material-symbols-outlined place-self-center text-rose-500"
-          >broken_image</mat-icon
-        >
+        <ng-icon
+          name="iconoirMediaImageXmark"
+          class="place-self-center text-rose-500"
+        ></ng-icon>
       </div>
 
       <div class="flex flex-col items-center gap-1">
@@ -130,15 +129,20 @@
         type="file"
         class="hidden"
         (change)="handleFileInput($event)"
-        [disabled]="showUrlInput || isUploadInProgress || uploadError"
+        [disabled]="
+          showUrlInput || isUploadInProgress || uploadError || disabled
+        "
       />
     </label>
 
     <div *ngIf="!showUrlInput" class="flex-none mt-2">
-      <gn-ui-button (buttonClick)="displayUrlInput()" type="gray">
-        <mat-icon class="material-symbols-outlined me-1 text-primary"
-          >link</mat-icon
-        >
+      <gn-ui-button
+        (buttonClick)="displayUrlInput()"
+        type="gray"
+        [disabled]="disabled"
+        [extraClass]="disabled && 'cursor-not-allowed'"
+      >
+        <ng-icon class="me-1 text-primary" name="iconoirLink"></ng-icon>
         {{ 'input.image.displayUrlInput' | translate }}
       </gn-ui-button>
     </div>
@@ -146,8 +150,8 @@
     <gn-ui-url-input
       *ngIf="showUrlInput"
       class="mt-3.5"
-      (valueChange)="downloadUrl($event)"
-      [disabled]="isUploadInProgress"
+      (uploadClick)="downloadUrl($event)"
+      [disabled]="isUploadInProgress || disabled"
     >
     </gn-ui-url-input>
   </div>

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

@@ -8,7 +8,6 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
 import { downgradeImage, megabytesToBytes } from '../../../../../../libs/util/shared/src'
 import { firstValueFrom } from 'rxjs'
@@ -18,6 +17,19 @@ import { TranslateModule } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { UrlInputComponent } from '../url-input/url-input.component'
 import { TextInputComponent } from '../text-input/text-input.component'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  iconoirFramePlusIn,
+  iconoirMediaImage,
+  iconoirMediaImageXmark,
+  iconoirBin,
+  iconoirPlus,
+  iconoirLink,
+} from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -28,12 +40,25 @@ import { TextInputComponent } from '../text-input/text-input.component'
   imports: [
     CommonModule,
     ButtonComponent,
-    MatIconModule,
     FilesDropDirective,
     MatProgressSpinnerModule,
     TranslateModule,
     UrlInputComponent,
     TextInputComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirMediaImage,
+      iconoirFramePlusIn,
+      iconoirMediaImageXmark,
+      iconoirBin,
+      iconoirPlus,
+      iconoirLink,
+    }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
   ],
 })
 export class ImageInputComponent {
@@ -42,6 +67,7 @@ export class ImageInputComponent {
   @Input() altText?: string
   @Input() uploadProgress?: number
   @Input() uploadError?: boolean
+  @Input() disabled?: boolean = false
   @Output() fileChange: EventEmitter<File> = new EventEmitter()
   @Output() urlChange: EventEmitter<string> = new EventEmitter()
   @Output() uploadCancel: EventEmitter<void> = new EventEmitter()
@@ -60,7 +86,10 @@ export class ImageInputComponent {
     return this.uploadProgress !== undefined
   }
 
-  constructor(private http: HttpClient, private cd: ChangeDetectorRef) {}
+  constructor(
+    private http: HttpClient,
+    private cd: ChangeDetectorRef
+  ) {}
 
   getPrimaryText() {
     if (this.uploadError) {

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

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

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

@@ -1,10 +1,13 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { NgIcon } from '@ng-icons/core'
 
 @Component({
   selector: 'gn-ui-navigation-button',
   templateUrl: './navigation-button.component.html',
   styleUrls: ['./navigation-button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIcon],
+  standalone: true,
 })
 export class NavigationButtonComponent {
   @Input() label: string

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

@@ -11,7 +11,7 @@
   <div
     class="absolute inset-y-0 left-0 pl-2.5 flex items-center peer-hover:text-primary peer-focus:text-primary"
   >
-    <mat-icon class="material-symbols-outlined">search</mat-icon>
+    <ng-icon name="matSearch"></ng-icon>
   </div>
   <button
     *ngIf="rawChange | async"
@@ -20,6 +20,6 @@
     aria-label="Clear"
     (click)="clear()"
   >
-    <mat-icon class="material-symbols-outlined align-middle">close</mat-icon>
+    <ng-icon name="matClose" class="align-middle"></ng-icon>
   </button>
 </div>

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

@@ -5,15 +5,26 @@ import {
   Output,
 } from '@angular/core'
 import { distinctUntilChanged, Subject } from 'rxjs'
-import { MatIconModule } from '@angular/material/icon'
 import { CommonModule } from '@angular/common'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matClose, matSearch } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-search-input',
   templateUrl: './search-input.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, NgIconComponent],
+  providers: [
+    provideIcons({ matSearch, matClose }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
 })
 export class SearchInputComponent {
   @Input() value = ''

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

@@ -5,15 +5,6 @@ button.disabled {
   color: var(--star-toggle-disabled-color, var(--color-primary));
 }
 
-mat-icon {
-  width: 1em;
-  height: 1em;
-  font-size: 1.5em;
-  margin-top: -0.1em;
-  font-variation-settings: 'opsz' 40;
-  stroke: var(--color-primary-darker);
-}
-
 .star-filled {
   font-variation-settings: 'FILL' 1;
 }

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

@@ -7,14 +7,10 @@
       enabled: toggled,
       'disabled opacity-45': !toggled,
       'transition hover:scale-125 will-change-transform': !disabled,
-      'cursor-default': disabled
+      'cursor-default': disabled,
     }"
   >
-    <mat-icon
-      class="material-symbols-outlined"
-      [ngClass]="{ 'star-filled': toggled }"
-      >star</mat-icon
-    >
+    <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>
   </button>
   <svg
     #starOverlay

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

@@ -8,12 +8,18 @@ import {
   ViewChild,
 } from '@angular/core'
 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'
 
 @Component({
   selector: 'gn-ui-star-toggle',
   templateUrl: './star-toggle.component.html',
   styleUrls: ['./star-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, NgIcon],
+  viewProviders: [provideIcons({ matStar, matStarBorder })],
 })
 export class StarToggleComponent {
   @Input() toggled!: boolean

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

@@ -2,6 +2,7 @@
   #group="matButtonToggleGroup"
   multiple="false"
   class="flex w-full"
+  [disabled]="disabled"
 >
   <mat-button-toggle
     *ngFor="let option of options"

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

@@ -27,6 +27,7 @@ export class SwitchToggleComponent {
   @Input() options: SwitchToggleOption[]
   @Input() ariaLabel? = ''
   @Input() extraClasses? = ''
+  @Input() disabled? = false
   @Output() selectedValue = new EventEmitter<SwitchToggleOption>()
 
   onChange(selectedOption: SwitchToggleOption) {

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

@@ -11,16 +11,12 @@ import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-a
 import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
 import { TextAreaComponent } from './text-area/text-area.component'
 import { MatAutocompleteModule } from '@angular/material/autocomplete'
-import { MatIconModule } from '@angular/material/icon'
-import { NavigationButtonComponent } from './navigation-button/navigation-button.component'
-import { StarToggleComponent } from './star-toggle/star-toggle.component'
 import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { OverlayModule } from '@angular/cdk/overlay'
 import { MatCheckboxModule } from '@angular/material/checkbox'
 import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
 import { CheckToggleComponent } from './check-toggle/check-toggle.component'
-import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.component'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { CommonModule } from '@angular/common'
 import { CheckboxComponent } from './checkbox/checkbox.component'
@@ -31,16 +27,23 @@ import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatNativeDateModule } from '@angular/material/core'
 import { EditableLabelDirective } from './editable-label/editable-label.directive'
 import { ImageInputComponent } from './image-input/image-input.component'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
 
 @NgModule({
   declarations: [
     DragAndDropFileInputComponent,
     ChipsInputComponent,
-    NavigationButtonComponent,
-    StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
-    CopyTextButtonComponent,
     CheckboxComponent,
   ],
   imports: [
@@ -52,7 +55,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
     TagInputModule,
     UtilSharedModule,
     MatAutocompleteModule,
-    MatIconModule,
     UiWidgetsModule,
     OverlayModule,
     MatCheckboxModule,
@@ -69,6 +71,17 @@ import { ImageInputComponent } from './image-input/image-input.component'
     DateRangePickerComponent,
     CheckToggleComponent,
     BadgeComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      matClose,
+      matExpandMore,
+      matExpandLess,
+    }),
+    provideNgIconsConfig({
+      size: '0.9em',
+    }),
   ],
   exports: [
     DropdownSelectorComponent,
@@ -76,12 +89,9 @@ import { ImageInputComponent } from './image-input/image-input.component'
     DragAndDropFileInputComponent,
     TextAreaComponent,
     ChipsInputComponent,
-    NavigationButtonComponent,
-    StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
     CheckToggleComponent,
-    CopyTextButtonComponent,
     CheckboxComponent,
     DateRangePickerComponent,
     EditableLabelDirective,

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.css

@@ -3,7 +3,7 @@
   --gn-ui-button-width: 32px;
   --gn-ui-button-padding: 0;
 
-  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6em) - 6px);
+  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6rem) - 6px);
   --2x-side-padding: calc(var(--side-padding) * 2);
   --text-padding: calc(var(--side-padding) + 40px);
 }

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

@@ -4,38 +4,29 @@
     class="gn-ui-text-input px-[var(--text-padding)]"
     [ngClass]="extraClass"
     type="url"
-    [value]="value"
-    (input)="handleInput()"
-    (keydown.enter)="handleChange(input)"
+    [value]="inputValue"
+    (input)="handleInput($event)"
+    (keydown.enter)="handleUpload(input)"
     [placeholder]="placeholder"
     [attr.aria-label]="placeholder"
     [disabled]="disabled"
   />
   <div
     class="absolute inset-y-[var(--side-padding)] left-[var(--2x-side-padding)] grid justify-center items-center pointer-events-none"
-    [ngClass]='{
-      "text-primary": !disabled,
-      "text-primary-lightest": disabled,
-    }'
+    [ngClass]="{
+      'text-primary': !disabled,
+      'text-primary-lightest': disabled,
+    }"
   >
-    <mat-icon
-      class="material-symbols-outlined h-[24px] !w-[26px] text-[28px] leading-[24px]"
-    >
-      link
-    </mat-icon>
+    <ng-icon name="iconoirLink"></ng-icon>
   </div>
   <gn-ui-button
+    *ngIf="showUploadButton"
     extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
     type="primary"
-    [disabled]="
-      disabled ||
-      input.value === '' ||
-      (urlCanParse && !URLcanParse(input.value))
-    "
-    (buttonClick)="handleChange(input)"
+    [disabled]="disabled || input.value === '' || !isValidUrl(input.value)"
+    (buttonClick)="handleUpload(input)"
   >
-    <mat-icon class="material-symbols-outlined text-[20px] leading-[24px]">
-      arrow_upward
-    </mat-icon>
+    <ng-icon name="iconoirArrowUp"> </ng-icon>
   </gn-ui-button>
 </span>

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

@@ -1,51 +1,80 @@
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
-  OnChanges,
   Output,
-  SimpleChanges,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../button/button.component'
-import { MatIconModule } from '@angular/material/icon'
-import { filter } from 'rxjs/operators'
-import { Subject } from 'rxjs'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirArrowUp, iconoirLink } from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-url-input',
   templateUrl: './url-input.component.html',
   styleUrls: ['./url-input.component.css'],
   standalone: true,
-  imports: [CommonModule, ButtonComponent, MatIconModule],
+  imports: [CommonModule, ButtonComponent, NgIconComponent],
+  providers: [
+    provideIcons({ iconoirLink, iconoirArrowUp }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class UrlInputComponent implements OnChanges {
-  @Input() value = ''
+export class UrlInputComponent {
+  @Input() set value(v: string) {
+    // we're making sure to only update the input if the URL representation of it has changed; otherwise we keep it identical
+    // to avoid glitches when starting to write a URL and having some characters added/replaced automatically
+    if (!v || !this.isValidUrl(v)) return
+    if (
+      this.isValidUrl(this.inputValue) &&
+      new URL(v).toString() === new URL(this.inputValue).toString()
+    )
+      return
+    this.inputValue = v
+    this.cd.markForCheck()
+  }
   @Input() extraClass = ''
   @Input() placeholder = 'https://'
   @Input() disabled: boolean
-  @Input() urlCanParse?: boolean
-  rawChange = new Subject<string>()
-  @Output() valueChange = this.rawChange.pipe(filter((v) => !!v))
+  @Input() showUploadButton = true
+
+  /**
+   * This will emit null if the field is emptied
+   */
+  @Output() valueChange = new EventEmitter<string | null>()
+  @Output() uploadClick = new EventEmitter<string>()
+
+  inputValue = ''
 
   constructor(private cd: ChangeDetectorRef) {}
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.value) {
-      console.log('changes.value', changes.value)
+  handleInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value
+    this.inputValue = value
+    if (!value || !this.isValidUrl(value)) {
+      this.valueChange.next(null)
+      return
     }
-  }
-
-  handleInput() {
     this.cd.markForCheck()
+    this.valueChange.next(value)
   }
 
-  handleChange(element: HTMLInputElement) {
+  handleUpload(element: HTMLInputElement) {
     const value = element.value
-    this.rawChange.next(value)
+    if (!value || !this.isValidUrl(value)) return
+    this.uploadClick.next(value)
   }
 
-  URLcanParse(url: string): boolean {
+  isValidUrl(url: string): boolean {
     try {
       new URL(url)
       return true

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

@@ -10,4 +10,9 @@ export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/block-list/block-list.component'
 export * from './lib/sortable-list/sortable-list.component'
 export * from './lib/modal-dialog/modal-dialog.component'
+export * from './lib/pagination/pagination.component'
+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'

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

@@ -5,19 +5,3 @@
 :host {
   position: relative;
 }
-
-.list-page-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 6px;
-  position: relative;
-}
-
-.list-page-dot:after {
-  content: '';
-  position: absolute;
-  left: -7px;
-  top: -7px;
-  width: 20px;
-  height: 20px;
-}

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

@@ -6,15 +6,7 @@
 >
   <ng-content></ng-content>
 </div>
-<div
-  *ngIf="pagesCount > 1"
-  class="absolute flex flex-row justify-center gap-[14px] p-1"
-  [ngClass]="paginationContainerClass"
->
-  <button
-    *ngFor="let page of pages"
-    class="list-page-dot"
-    (click)="goToPage(page)"
-    [ngClass]="currentPage === page ? 'bg-primary' : 'bg-gray-400'"
-  ></button>
-</div>
+<gn-ui-pagination-dots
+  [containerClass]="'absolute ' + paginationContainerClass"
+  [listComponent]="this"
+></gn-ui-pagination-dots>