geonetwork-ui 2.5.0-dev.50bf7a85a → 2.5.0-dev.59720aa72

package/src/libs/feature/record/src/lib/data-view/data-view.component.ts

@@ -5,8 +5,8 @@ import {
   Output,
 } from '@angular/core'
 import { getLinkLabel, getLinkPriority } from '../../../../../../libs/util/shared/src'
-import { BehaviorSubject, combineLatest } from 'rxjs'
-import { map, tap } from 'rxjs/operators'
+import { BehaviorSubject, combineLatest, of } from 'rxjs'
+import { catchError, finalize, map, switchMap, tap } from 'rxjs/operators'
 import { MdViewFacade } from '../state'
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
@@ -17,6 +17,7 @@ import {
 } from '../../../../../../libs/feature/dataviz/src'
 import { CommonModule } from '@angular/common'
 import { TranslateModule } from '@ngx-translate/core'
+import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
 
 @Component({
   selector: 'gn-ui-data-view',
@@ -30,12 +31,21 @@ import { TranslateModule } from '@ngx-translate/core'
     TableViewComponent,
     TranslateModule,
     ChartViewComponent,
+    PopupAlertComponent,
   ],
 })
 export class DataViewComponent {
   @Input() mode: 'table' | 'chart'
   @Input() displaySource = true
+  @Input() set exceedsLimit(value: boolean) {
+    this.excludeWfs$.next(value)
+  }
   @Output() chartConfig$ = new BehaviorSubject<DatavizConfigurationModel>(null)
+  cacheActive$ = this.mdViewFacade.isHighUpdateFrequency$.pipe(
+    map((highF) => !highF)
+  )
+  hidePreview = false
+  excludeWfs$ = new BehaviorSubject(false)
   compatibleDataLinks$ = combineLatest([
     this.mdViewFacade.dataLinks$,
     this.mdViewFacade.geoDataLinks$,
@@ -49,7 +59,7 @@ export class DataViewComponent {
   dropdownChoices$ = this.compatibleDataLinks$.pipe(
     tap((links) => {
       if (links.indexOf(this.selectedLink$.value) === -1) {
-        this.selectedLink$.next(links[0])
+        this.selectLink(JSON.stringify(links[0]))
       }
     }),
     map((links) =>
@@ -70,6 +80,18 @@ export class DataViewComponent {
   selectLink(linkAsString: string) {
     const link: DatasetOnlineResource = JSON.parse(linkAsString)
     link.url = new URL(link.url)
-    this.selectedLink$.next(link)
+    this.excludeWfs$
+      .pipe(
+        tap((excludeWfs) => {
+          this.hidePreview =
+            link['accessServiceProtocol'] === 'wfs' &&
+            excludeWfs &&
+            this.mode === 'chart'
+              ? true
+              : false
+          this.selectedLink$.next(link)
+        })
+      )
+      .subscribe()
   }
 }

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -14,80 +14,91 @@
     >
     </gn-ui-external-viewer-button>
   </div>
-  <div
-    class="relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden"
-  >
-    <gn-ui-map-container
-      #mapContainer
-      [context]="mapContext$ | async"
-      (featuresClick)="onMapFeatureSelect($event)"
-    ></gn-ui-map-container>
-    <div
-      class="top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
-      [class.hidden]="!selection"
+  <ng-container *ngIf="hidePreview; else mapView">
+    <gn-ui-popup-alert
+      type="warning"
+      icon="matErrorOutlineOutline"
+      class="block h-12 p-1"
     >
-      <gn-ui-button
-        type="light"
-        (buttonClick)="resetSelection()"
-        style="
-          --gn-ui-button-padding: 0px;
-          --gn-ui-button-width: 24px;
-          --gn-ui-button-height: 24px;
-        "
-        extraClass="absolute right-[0.5em] ml-[8px] mr-[10px]"
-      >
-        <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
-      </gn-ui-button>
-      <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
-    </div>
-
+      <span translate>record.feature.limit</span>
+    </gn-ui-popup-alert>
+  </ng-container>
+  <ng-template #mapView>
     <div
-      class="top-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
-      [ngClass]="{ 'right-[1em]': !selection, 'right-[16em]': selection }"
-      [hidden]="!showLegend || !legendExists"
+      class="relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden"
     >
-      <div class="flex justify-between items-center mb-2">
-        <div class="text-primary font-bold">Legend</div>
+      <gn-ui-map-container
+        #mapContainer
+        [context]="mapContext$ | async"
+        (featuresClick)="onMapFeatureSelect($event)"
+      ></gn-ui-map-container>
+      <div
+        class="top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
+        [class.hidden]="!selection"
+      >
         <gn-ui-button
           type="light"
-          (buttonClick)="toggleLegend()"
+          (buttonClick)="resetSelection()"
           style="
             --gn-ui-button-padding: 0px;
             --gn-ui-button-width: 24px;
             --gn-ui-button-height: 24px;
           "
-          extraClass="ml-[8px] mr-[10px]"
+          extraClass="absolute right-[0.5em] ml-[8px] mr-[10px]"
         >
           <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
         </gn-ui-button>
+        <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
       </div>
-      <gn-ui-map-legend
-        [context]="mapContext$ | async"
-        (legendStatusChange)="onLegendStatusChange($event)"
-      ></gn-ui-map-legend>
-    </div>
 
-    <gn-ui-button
-      *ngIf="!showLegend && legendExists && !selection"
-      type="outline"
-      (buttonClick)="toggleLegend()"
-      extraClass="absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white"
-    >
-      Legend
-    </gn-ui-button>
+      <div
+        class="top-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
+        [ngClass]="{ 'right-[1em]': !selection, 'right-[16em]': selection }"
+        [hidden]="!showLegend || !legendExists"
+      >
+        <div class="flex justify-between items-center mb-2">
+          <div class="text-primary font-bold">Legend</div>
+          <gn-ui-button
+            type="light"
+            (buttonClick)="toggleLegend()"
+            style="
+              --gn-ui-button-padding: 0px;
+              --gn-ui-button-width: 24px;
+              --gn-ui-button-height: 24px;
+            "
+            extraClass="ml-[8px] mr-[10px]"
+          >
+            <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
+          </gn-ui-button>
+        </div>
+        <gn-ui-map-legend
+          [context]="mapContext$ | async"
+          (legendStatusChange)="onLegendStatusChange($event)"
+        ></gn-ui-map-legend>
+      </div>
 
-    <gn-ui-loading-mask
-      *ngIf="loading"
-      class="absolute inset-0"
-      [message]="'map.loading.data' | translate"
-    ></gn-ui-loading-mask>
-    <gn-ui-popup-alert
-      *ngIf="error"
-      type="warning"
-      icon="matErrorOutlineOutline"
-      class="absolute m-2 inset-0"
-    >
-      <span translate>{{ error }}</span>
-    </gn-ui-popup-alert>
-  </div>
+      <gn-ui-button
+        *ngIf="!showLegend && legendExists && !selection"
+        type="outline"
+        (buttonClick)="toggleLegend()"
+        extraClass="absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white"
+      >
+        Legend
+      </gn-ui-button>
+
+      <gn-ui-loading-mask
+        *ngIf="loading"
+        class="absolute inset-0"
+        [message]="'map.loading.data' | translate"
+      ></gn-ui-loading-mask>
+      <gn-ui-popup-alert
+        *ngIf="error"
+        type="warning"
+        icon="matErrorOutlineOutline"
+        class="absolute m-2 inset-0"
+      >
+        <span translate>{{ error }}</span>
+      </gn-ui-popup-alert>
+    </div>
+  </ng-template>
 </div>

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -82,13 +82,14 @@ marker('wfs.feature.limit')
   viewProviders: [provideIcons({ matClose })],
 })
 export class MapViewComponent implements AfterViewInit {
-  @Input() set excludeWfs(value: boolean) {
+  @Input() set exceedsLimit(value: boolean) {
     this.excludeWfs$.next(value)
   }
   @Input() displaySource = true
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   excludeWfs$ = new BehaviorSubject(false)
+  hidePreview = false
   selection: Feature
   showLegend = true
   legendExists = false
@@ -139,9 +140,10 @@ export class MapViewComponent implements AfterViewInit {
         return of([])
       }
       if (excludeWfs && link.accessServiceProtocol === 'wfs') {
-        this.error = 'wfs.feature.limit'
+        this.hidePreview = true
         return of([])
       }
+      this.hidePreview = false
       this.loading = true
       this.error = null
       return this.getLayerFromLink(link).pipe(
@@ -239,7 +241,8 @@ export class MapViewComponent implements AfterViewInit {
           link.accessServiceProtocol === 'ogcFeatures')) ||
       link.type === 'download'
     ) {
-      return this.dataService.readAsGeoJson(link).pipe(
+      const cacheActive = true // TODO implement whether should be true or false
+      return this.dataService.readAsGeoJson(link, cacheActive).pipe(
         map((data) => ({
           type: 'geojson',
           data,

package/src/libs/feature/record/src/lib/state/mdview.actions.ts

@@ -2,6 +2,7 @@ import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/
 import { createAction, props } from '@ngrx/store'
 import {
   CatalogRecord,
+  DatasetFeatureCatalog,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
@@ -28,6 +29,21 @@ export const loadFullMetadataFailure = createAction(
   props<{ otherError?: string; notFound?: boolean }>()
 )
 
+export const loadFeatureCatalog = createAction(
+  "[Metadata view] Load metadata's feature catalog",
+  props<{ metadata: CatalogRecord }>()
+)
+
+export const loadFeatureCatalogSuccess = createAction(
+  '[Metadata view] Load metadata feature catalog success',
+  props<{ datasetCatalog: DatasetFeatureCatalog | null }>()
+)
+
+export const loadFeatureCatalogFailure = createAction(
+  '[Metadata view] Load metadata feature catalog failure',
+  props<{ error?: string }>()
+)
+
 export const closeMetadata = createAction('[Metadata view] close')
 
 /*

package/src/libs/feature/record/src/lib/state/mdview.effects.ts

@@ -1,11 +1,10 @@
 import { Injectable } from '@angular/core'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
 import { exhaustMap, mergeMap, of } from 'rxjs'
-import { catchError, map, switchMap } from 'rxjs/operators'
+import { catchError, filter, map, switchMap, take } from 'rxjs/operators'
 import * as MdViewActions from './mdview.actions'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
-
 @Injectable()
 export class MdViewEffects {
   constructor(
@@ -33,6 +32,26 @@ export class MdViewEffects {
     )
   )
 
+  loadFeatureCatalog$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(MdViewActions.loadFullMetadataSuccess),
+      filter(({ full }) => full !== undefined),
+      switchMap(({ full }) => this.recordsRepository.getFeatureCatalog(full)),
+      map((featureCatalog) =>
+        MdViewActions.loadFeatureCatalogSuccess({
+          datasetCatalog: featureCatalog,
+        })
+      ),
+      catchError((error) =>
+        of(
+          MdViewActions.loadFeatureCatalogFailure({
+            error: error.message,
+          })
+        )
+      )
+    )
+  )
+
   /*
     Related effects
   */

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -52,11 +52,26 @@ export class MdViewFacade {
     filter((md) => !!md)
   )
 
+  featureCatalog$ = this.store.pipe(select(MdViewSelectors.getFeatureCatalog))
+
   isIncomplete$ = this.store.pipe(
     select(MdViewSelectors.getMetadataIsIncomplete),
     filter((incomplete) => incomplete !== null)
   )
 
+  isHighUpdateFrequency$ = this.metadata$.pipe(
+    map((record) => {
+      if (record.updateFrequency instanceof Object) {
+        return (
+          record.updateFrequency.per === 'day' &&
+          record.updateFrequency.updatedTimes > 1
+        )
+      }
+
+      return record.updateFrequency === 'continual'
+    })
+  )
+
   error$ = this.store.pipe(select(MdViewSelectors.getMetadataError))
 
   related$ = this.store.pipe(select(MdViewSelectors.getRelated))

package/src/libs/feature/record/src/lib/state/mdview.reducer.ts

@@ -3,6 +3,7 @@ import * as MetadataViewActions from './mdview.actions'
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   CatalogRecord,
+  DatasetFeatureCatalog,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
@@ -17,6 +18,9 @@ export interface MetadataViewState {
   allUserFeedbacksLoading: boolean
   addUserFeedbackLoading: boolean
   chartConfig?: DatavizConfigurationModel
+  featureCatalog?: DatasetFeatureCatalog
+  featureCatalogLoading: boolean
+  featureCatalogError: string | null
 }
 
 export const initialMetadataViewState: MetadataViewState = {
@@ -24,6 +28,8 @@ export const initialMetadataViewState: MetadataViewState = {
   loadingFull: false,
   allUserFeedbacksLoading: false,
   addUserFeedbackLoading: false,
+  featureCatalogLoading: false,
+  featureCatalogError: null,
 }
 
 const metadataViewReducer = createReducer(
@@ -105,7 +111,30 @@ const metadataViewReducer = createReducer(
       addUserFeedbackLoading: false,
       allUserFeedbacksLoading: false,
     })
-  )
+  ),
+
+  /**
+   * FeatureCatalog reducers
+   */
+
+  on(MetadataViewActions.loadFeatureCatalog, (state) => ({
+    ...state,
+    featureCatalogError: null,
+    featureCatalogLoading: true,
+  })),
+  on(
+    MetadataViewActions.loadFeatureCatalogSuccess,
+    (state, { datasetCatalog }) => ({
+      ...state,
+      featureCatalog: datasetCatalog,
+      featureCatalogLoading: false,
+    })
+  ),
+  on(MetadataViewActions.loadFeatureCatalogFailure, (state, { error }) => ({
+    ...state,
+    featureCatalogError: error,
+    featureCatalogLoading: false,
+  }))
 )
 
 export function reducer(

package/src/libs/feature/record/src/lib/state/mdview.selectors.ts

@@ -64,3 +64,15 @@ export const getAddUserFeedbacksLoading = createSelector(
   getMdViewState,
   (state: MetadataViewState) => state.addUserFeedbackLoading
 )
+
+/*
+  Feature Catalog Selectors
+*/
+export const getFeatureCatalog = createSelector(
+  getMdViewState,
+  (state: MetadataViewState) => state.featureCatalog
+)
+export const getFeatureCatalogIsLoading = createSelector(
+  getMdViewState,
+  (state: MetadataViewState) => state.featureCatalogLoading
+)

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html

@@ -9,4 +9,5 @@
   [preventCompleteOnSelection]="true"
   [autoFocus]="autoFocus"
   [allowSubmit]="true"
+  [forceTrackPosition]="forceTrackPosition"
 ></gn-ui-autocomplete>

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts

@@ -28,6 +28,7 @@ import { SearchFilters } from '../../../../../../libs/api/metadata-converter/src
 export class FuzzySearchComponent implements OnInit {
   @ViewChild(AutocompleteComponent) autocomplete: AutocompleteComponent
   @Input() autoFocus = false
+  @Input() forceTrackPosition = false
   @Output() itemSelected = new EventEmitter<CatalogRecord>()
   @Output() inputSubmitted = new EventEmitter<string>()
   searchInputValue$: Observable<{ title: string }>

package/src/libs/ui/elements/src/lib/application-banner/application-banner.component.html

@@ -1,12 +1,12 @@
 <div
   *ngIf="message && bannerOpen"
-  class="absolute top-0 text-wrap bg-white mt-4 max-h-24"
+  class="absolute left-0 right-0 text-wrap bg-white mt-4 max-h-24"
 >
   <div
     class="flex flex-row py-2.5 px-5 gap-5 justify-start border max-h-20"
     [ngClass]="classList"
   >
-    <div [ngClass]="{ 'pt-5': message.length > 200 }">
+    <div [ngClass]="message.length > 200 ? 'pt-5' : 'pt-1'">
       <ng-icon [name]="icon"></ng-icon>
     </div>
     <div class="flex flex-col justify-start gap-2.5">

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

@@ -14,7 +14,11 @@
       [disabled]="true"
     ></gn-ui-text-input>
     <div class="flex flex-row gap-2 mt-2">
-      <gn-ui-button type="gray" (buttonClick)="handleDelete()">
+      <gn-ui-button
+        type="gray"
+        (buttonClick)="handleDelete()"
+        data-cy="delete-image"
+      >
         <ng-icon class="me-1 text-primary" name="iconoirBin"></ng-icon>
         {{ 'input.image.delete' | translate }}
       </gn-ui-button>
@@ -39,12 +43,10 @@
         'border-primary-lighter bg-primary-white': dragFilesOver,
         'border-gray-300': !dragFilesOver,
         'cursor-pointer hover:border-gray-500':
-          !isUploadInProgress && !uploadError && !showUrlInput && !disabled,
+          !isUploadInProgress && !uploadError && !disabled,
         'cursor-not-allowed': disabled,
       }"
-      [attr.tabindex]="
-        isUploadInProgress || uploadError || showUrlInput || disabled ? null : 0
-      "
+      [attr.tabindex]="isUploadInProgress || uploadError || disabled ? null : 0"
       (keydown.enter)="fileInput.click()"
       (dragFilesOver)="handleDragFilesOver($event)"
       (dropFiles)="handleDropFiles($event)"
@@ -114,9 +116,7 @@
         type="file"
         class="hidden"
         (change)="handleFileInput($event)"
-        [disabled]="
-          showUrlInput || isUploadInProgress || uploadError || disabled
-        "
+        [disabled]="isUploadInProgress || uploadError || disabled"
       />
     </label>
 

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

@@ -123,11 +123,10 @@ export class ImageInputComponent {
   }
 
   handleDropFiles(files: File[]) {
-    if (!this.showUrlInput) {
-      const validFiles = this.filterTypeImage(files)
-      if (validFiles.length > 0) {
-        this.resizeAndEmit(validFiles[0])
-      }
+    const validFiles = this.filterTypeImage(files)
+    if (validFiles.length > 0) {
+      this.showUrlInput = false
+      this.resizeAndEmit(validFiles[0])
     }
   }
 
@@ -147,7 +146,6 @@ export class ImageInputComponent {
   async downloadUrl(url: string) {
     this.downloadError = false
     const name = url.split('/').pop()
-
     try {
       const response = await firstValueFrom(
         this.http.head(url, { observe: 'response' })

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { marked } from 'marked'
 
 @Component({
@@ -13,6 +13,6 @@ export class MarkdownParserComponent {
   @Input() whitoutStyles?: boolean
 
   get parsedMarkdown() {
-    return marked.parse(this.textContent)
+    return marked.parse(this.textContent ?? '')
   }
 }

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

@@ -3,7 +3,6 @@ export * from './lib/badge/badge.component'
 export * from './lib/button/button.component'
 export * from './lib/check-toggle/check-toggle.component'
 export * from './lib/checkbox/checkbox.component'
-export * from './lib/chips-input/chips-input.component'
 export * from './lib/copy-text-button/copy-text-button.component'
 export * from './lib/date-picker/date-picker.component'
 export * from './lib/date-range-dropdown/date-range-dropdown.component'

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

@@ -83,6 +83,7 @@ export class AutocompleteComponent
   @Input() minCharacterCount? = 3
   // this will show a submit button next to the input; if false, a search icon will appear on the left
   @Input() allowSubmit = false
+  @Input() forceTrackPosition = false
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
@@ -98,6 +99,8 @@ export class AutocompleteComponent
   error: string | null = null
   suggestions$: Observable<AutocompleteItem[]>
   subscription = new Subscription()
+  private lastPosition: DOMRect | null = null
+  private intervalIdPosition: number | undefined
 
   @Input() displayWithFn: (item: AutocompleteItem) => string = (item) =>
     item.toString()
@@ -197,10 +200,49 @@ export class AutocompleteComponent
       this.inputRef.nativeElement.focus()
       this.cdRef.detectChanges()
     }
+
+    this.startTrackingPosition()
+  }
+
+  /**
+   * !!! This function is used only for web component mode,
+   * the autocomplete dropdown may not update its position
+   * if the page or container is disabling wind scroll.
+   */
+  private trackPosition = () => {
+    const dropdownOpened = this.triggerRef && this.triggerRef.panelOpen
+    const rect = this.inputRef.nativeElement.getBoundingClientRect()
+
+    if (
+      dropdownOpened &&
+      (!this.lastPosition ||
+        rect.top !== this.lastPosition.top ||
+        rect.left !== this.lastPosition.left)
+    ) {
+      this.triggerRef.updatePosition()
+    }
+
+    this.lastPosition = rect
+    requestAnimationFrame(this.trackPosition)
+  }
+
+  /**
+   * !!! This function is used only for web component mode,
+   * the autocomplete dropdown may not update its position
+   * if the page or container is disabling wind scroll.
+   */
+  startTrackingPosition() {
+    if (this.forceTrackPosition) {
+      requestAnimationFrame(this.trackPosition)
+    }
   }
 
   ngOnDestroy(): void {
     this.subscription?.unsubscribe()
+
+    if (this.intervalIdPosition) {
+      clearInterval(this.intervalIdPosition)
+    }
   }
 
   updateInputValue(value: AutocompleteItem) {

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

@@ -28,7 +28,6 @@ import { BadgeComponent } from './badge/badge.component'
 import { ButtonComponent } from './button/button.component'
 import { CheckToggleComponent } from './check-toggle/check-toggle.component'
 import { CheckboxComponent } from './checkbox/checkbox.component'
-import { ChipsInputComponent } from './chips-input/chips-input.component'
 import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
 import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
 import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
@@ -40,7 +39,6 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
 @NgModule({
   declarations: [
     DragAndDropFileInputComponent,
-    ChipsInputComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
     CheckboxComponent,
@@ -86,7 +84,6 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
     ButtonComponent,
     DragAndDropFileInputComponent,
     TextAreaComponent,
-    ChipsInputComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
     CheckToggleComponent,

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

@@ -31,7 +31,7 @@ import { iconoirArrowUp, iconoirLink } from '@ng-icons/iconoir'
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class UrlInputComponent implements OnChanges {
+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
@@ -59,12 +59,6 @@ export class UrlInputComponent implements OnChanges {
 
   constructor(private cd: ChangeDetectorRef) {}
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['value']) {
-      this.inputValue = changes['value'].currentValue
-    }
-  }
-
   handleInput(event: Event) {
     const value = (event.target as HTMLInputElement).value
     this.inputValue = value