geonetwork-ui 2.4.0-dev.573bccd7 → 2.4.0-dev.656babc7

package/src/libs/api/metadata-converter/src/lib/iso19139/utils/keyword.mapper.ts

@@ -1,4 +1,4 @@
-import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
 
 export function getKeywordTypeFromKeywordTypeCode(
   typeCode: string

package/src/libs/api/metadata-converter/src/lib/iso19139/write-parts.ts

@@ -6,7 +6,6 @@ import {
   DatasetServiceDistribution,
   Individual,
   Keyword,
-  KeywordThesaurus,
   RecordStatus,
   Role,
   ServiceEndpoint,
@@ -46,6 +45,7 @@ import {
 } from '../xml-utils'
 import { readKind } from './read-parts'
 import { namePartsToFull } from './utils/individual-name'
+import { ThesaurusModel } from '../../../../../../libs/common/domain/src/lib/model/thesaurus'
 
 export function writeCharacterString(
   text: string
@@ -367,7 +367,7 @@ export function removeKeywords() {
 }
 
 // returns a <gmd:thesaurusName> element
-export function createThesaurus(thesaurus: KeywordThesaurus) {
+export function createThesaurus(thesaurus: ThesaurusModel) {
   return pipe(
     createElement('gmd:thesaurusName'),
     createChild('gmd:CI_Citation'),

package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.mapper.ts

@@ -8,11 +8,16 @@ import { Injectable } from '@angular/core'
 import { AvatarServiceInterface } from '../auth'
 import { map } from 'rxjs/operators'
 import { Observable, of } from 'rxjs'
-import { ThesaurusModel } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus/thesaurus.model'
 import {
+  Keyword,
   UserFeedback,
   UserFeedbackViewModel,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  KeywordApiResponse,
+  ThesaurusApiResponse,
+} from '../../../../../../../libs/api/metadata-converter/src'
+import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
 
 @Injectable()
 export class Gn4PlatformMapper {
@@ -52,8 +57,12 @@ export class Gn4PlatformMapper {
     return { ...apiUser, id: id.toString() } as UserModel
   }
 
-  thesaurusFromApi(thesaurus: any[], lang3?: string): ThesaurusModel {
-    return thesaurus.map((keyword) => {
+  keywordsFromApi(
+    keywords: KeywordApiResponse[],
+    thesaurus: ThesaurusApiResponse[],
+    lang3?: string
+  ): Keyword[] {
+    return keywords.map((keyword): Keyword => {
       let key = keyword.uri
       // sometines GN can prefix an URI with an "all thesaurus" URI; only keep the last one
       if (key.indexOf('@@@') > -1) {
@@ -65,10 +74,22 @@ export class Gn4PlatformMapper {
         lang3 && lang3 in keyword.definitions
           ? keyword.definitions[lang3]
           : keyword.definition
+
+      const matchedThesaurus = thesaurus.find(
+        (thes) => keyword.thesaurusKey === thes.key
+      )
+
       return {
         key,
         label,
         description,
+        type: matchedThesaurus?.dname as KeywordType,
+        thesaurus: {
+          id: matchedThesaurus?.key,
+          name: matchedThesaurus?.title,
+          url: new URL(matchedThesaurus?.url),
+          type: matchedThesaurus?.dname as KeywordType,
+        },
       }
     })
   }

package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.service.ts

@@ -1,10 +1,11 @@
 import { Injectable } from '@angular/core'
-import { Observable, of, switchMap } from 'rxjs'
+import { Observable, combineLatest, of, switchMap } from 'rxjs'
 import { catchError, map, shareReplay, tap } from 'rxjs/operators'
 import {
   MeApiService,
   RegistriesApiService,
   SiteApiService,
+  ThesaurusInfoApiModel,
   ToolsApiService,
   UserfeedbackApiService,
   UsersApiService,
@@ -12,13 +13,18 @@ import {
 import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { UserModel } from '../../../../../../../libs/common/domain/src/lib/model/user/user.model'
 import {
+  Keyword,
   Organization,
   UserFeedback,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { Gn4PlatformMapper } from './gn4-platform.mapper'
 import { ltr } from 'semver'
-import { ThesaurusModel } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus/thesaurus.model'
 import { LangService } from '../../../../../../../libs/util/i18n/src'
+import { HttpClient } from '@angular/common/http'
+import {
+  KeywordApiResponse,
+  ThesaurusApiResponse,
+} from '../../../../../../../libs/api/metadata-converter/src'
 
 const minApiVersion = '4.2.2'
 
@@ -60,7 +66,7 @@ export class Gn4PlatformService implements PlatformServiceInterface {
    * A map of already loaded thesauri (groups of keywords); the key is a URI
    * @private
    */
-  private thesauri: Record<string, Observable<ThesaurusModel>> = {}
+  private keywordsByThesauri: Record<string, Observable<Keyword[]>> = {}
 
   constructor(
     private siteApiService: SiteApiService,
@@ -70,7 +76,8 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     private toolsApiService: ToolsApiService,
     private registriesApiService: RegistriesApiService,
     private langService: LangService,
-    private userfeedbackApiService: UserfeedbackApiService
+    private userfeedbackApiService: UserfeedbackApiService,
+    private httpClient: HttpClient
   ) {
     this.me$ = this.meApi.getMe().pipe(
       switchMap((apiUser) => this.mapper.userFromMeApi(apiUser)),
@@ -121,7 +128,7 @@ export class Gn4PlatformService implements PlatformServiceInterface {
       // the thesaurus URI is inferred by removing a part of the keyword URI
       // this is not exact science but it's OK, we'll still end up loading a bunch of keywords at once anyway
       const thesaurusUri = key.replace(/\/([^/]+)$/, '/')
-      return this.getThesaurusByUri(thesaurusUri).pipe(
+      return this.getKeywordsByUri(thesaurusUri).pipe(
         map((thesaurus) => {
           for (const item of thesaurus) {
             if (item.key === key) return item.label
@@ -133,12 +140,49 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     return this.keyTranslations$.pipe(map((translations) => translations[key]))
   }
 
-  getThesaurusByUri(uri: string): Observable<ThesaurusModel> {
-    if (this.thesauri[uri]) {
-      return this.thesauri[uri]
+  private allThesaurus$ = this.httpClient
+    .get(
+      `${this.registriesApiService.configuration.basePath}/thesaurus?_content_type=json`
+    )
+    .pipe(
+      map((thesaurus) => {
+        // FIXME: find a better way to exclude place keywords
+        // thesaurus[0].filter((thes) => thes.dname !== 'place')
+        return thesaurus[0] as ThesaurusApiResponse[]
+      }),
+      shareReplay(1)
+    )
+
+  searchKeywords(query: string): Observable<Keyword[]> {
+    const keywords$: Observable<KeywordApiResponse[]> =
+      this.registriesApiService.searchKeywords(
+        query,
+        this.langService.iso3,
+        10,
+        0,
+        null,
+        null,
+        null,
+        `*${query}*`
+      ) as Observable<KeywordApiResponse[]>
+
+    return combineLatest([keywords$, this.allThesaurus$]).pipe(
+      map(([keywords, thesaurus]) => {
+        return this.mapper.keywordsFromApi(
+          keywords,
+          thesaurus,
+          this.langService.iso3
+        )
+      })
+    )
+  }
+
+  getKeywordsByUri(uri: string): Observable<Keyword[]> {
+    if (this.keywordsByThesauri[uri]) {
+      return this.keywordsByThesauri[uri]
     }
-    this.thesauri[uri] = this.registriesApiService
-      .searchKeywords(
+    const keywords$: Observable<KeywordApiResponse[]> =
+      this.registriesApiService.searchKeywords(
         null,
         this.langService.iso3,
         1000,
@@ -147,18 +191,23 @@ export class Gn4PlatformService implements PlatformServiceInterface {
         null,
         null,
         `${uri}*`
-      )
-      .pipe(
-        map((thesaurus) =>
-          this.mapper.thesaurusFromApi(
-            thesaurus as any[],
-            this.langService.iso3
-          )
-        ),
-        shareReplay(1)
-      )
+      ) as Observable<KeywordApiResponse[]>
+
+    this.keywordsByThesauri[uri] = combineLatest([
+      keywords$,
+      this.allThesaurus$,
+    ]).pipe(
+      map(([keywords, thesaurus]) => {
+        return this.mapper.keywordsFromApi(
+          keywords,
+          thesaurus,
+          this.langService.iso3
+        )
+      }),
+      shareReplay(1)
+    )
 
-    return this.thesauri[uri]
+    return this.keywordsByThesauri[uri]
   }
 
   getUserFeedbacks(uuid: string): Observable<UserFeedback[]> {

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -2,6 +2,7 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import type { Individual } from './contact.model'
 import type { Organization } from './organization.model'
 import type { Geometry } from 'geojson'
+import { KeywordType, ThesaurusModel } from '../thesaurus'
 
 type Uuid = string
 
@@ -60,18 +61,12 @@ export type SpatialRepresentationType =
   | 'table'
   | 'point'
 
-export type KeywordType = 'place' | 'temporal' | 'theme' | 'other'
-
-export type KeywordThesaurus = {
-  id: string
-  name?: string
-  url?: URL
-}
-
 export interface Keyword {
+  key?: string
   label: string
+  description?: string
   type: KeywordType
-  thesaurus?: KeywordThesaurus
+  thesaurus?: ThesaurusModel
 }
 // languages should be expressed using two-letters ISO 639-1 codes
 export type LanguageCode = string

package/src/libs/common/domain/src/lib/model/thesaurus/thesaurus.model.ts

@@ -1,7 +1,14 @@
-export interface ThesaurusItemModel {
-  key: string
-  label: string
-  description?: string
-}
+export type KeywordType = 'place' | 'temporal' | 'theme' | 'other'
 
-export type ThesaurusModel = ThesaurusItemModel[]
+export interface ThesaurusModel {
+  id: string
+  name?: string
+  url?: URL
+  thesaurusKey?: string
+  definition?: string
+  definitions?: object
+  uri?: string
+  value?: string
+  values?: object
+  type?: KeywordType
+}

package/src/libs/common/domain/src/lib/platform.service.interface.ts

@@ -1,8 +1,7 @@
 import type { Observable } from 'rxjs'
 import type { UserModel } from './model/user/user.model'
 import type { Organization } from './model/record/organization.model'
-import type { ThesaurusModel } from './model/thesaurus/'
-import { UserFeedback } from './model/record'
+import { Keyword, UserFeedback } from './model/record'
 
 export abstract class PlatformServiceInterface {
   abstract getType(): string
@@ -16,7 +15,8 @@ export abstract class PlatformServiceInterface {
   ): Observable<UserModel[]>
   abstract getOrganizations(): Observable<Organization[]>
   abstract translateKey(key: string): Observable<string>
-  abstract getThesaurusByUri(uri: string): Observable<ThesaurusModel>
+  abstract searchKeywords(query: string): Observable<Keyword[]>
+  abstract getKeywordsByUri(uri: string): Observable<Keyword[]>
   abstract getUserFeedbacks(recordUuid: string): Observable<UserFeedback[]>
   abstract postUserFeedbacks(recordUuid: UserFeedback): Observable<void>
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.html

@@ -0,0 +1,20 @@
+<div class="flex flex-col gap-3">
+  <gn-ui-autocomplete
+    [placeholder]="'Search for keywords in all thesaurus'"
+    [displayWithFn]="displayWithFn"
+    [action]="autoCompleteAction"
+    (itemSelected)="handleItemSelection($event)"
+    (inputSubmitted)="handleInputSubmission($event)"
+    (inputCleared)="handleInputCleared()"
+    [value]="searchInputValue$ | async"
+    [clearOnSelection]="true"
+  ></gn-ui-autocomplete>
+  <div class="flex gap-2 flex-wrap">
+    <gn-ui-badge
+      *ngFor="let keyword of control.value; let index = index"
+      [removable]="true"
+      (badgeRemoveClicked)="removeKeyword(index)"
+      >{{ keyword.label }}</gn-ui-badge
+    >
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts

@@ -0,0 +1,119 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core'
+import { FormControl } from '@angular/forms'
+import {
+  KeywordType,
+  ThesaurusModel,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/thesaurus'
+import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import {
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '../../../../../../../../../libs/ui/inputs/src'
+import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
+import { Observable, map } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-form-field-keywords',
+  templateUrl: './form-field-keywords.component.html',
+  styleUrls: ['./form-field-keywords.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DropdownSelectorComponent,
+    UiInputsModule,
+    CommonModule,
+    UiWidgetsModule,
+  ],
+})
+export class FormFieldKeywordsComponent implements OnInit {
+  @Input() control: FormControl<any>
+  @Output() itemSelected = new EventEmitter<string>()
+  @Output() inputSubmitted = new EventEmitter<string>()
+  searchInputValue$: Observable<void | { title: string }>
+  allThesaurus$: Observable<any[]>
+
+  displayWithFn = (item) => {
+    if (item) {
+      return `${item?.title} (${item?.value?.name})`
+    }
+    return null
+  }
+
+  autoCompleteAction = (query: string) => {
+    const keywords$ = this.platformService.searchKeywords(query).pipe(
+      map((thesaurus) =>
+        thesaurus.map((thes) => {
+          return { title: thes.label, value: thes.thesaurus }
+        })
+      )
+    )
+
+    return keywords$
+  }
+
+  constructor(private platformService: PlatformServiceInterface) {}
+
+  ngOnInit(): void {
+    this.searchInputValue$ = this.autoCompleteAction('')[0]
+  }
+
+  // type: { title: string; value: ThesaurusModel }
+  handleItemSelection(item) {
+    this.addKeyword({
+      label: item.title,
+      thesaurus: item.value,
+      type: item.value.type,
+    })
+  }
+
+  handleInputSubmission(any: string) {
+    // Should there be an input submission?
+
+    if (this.inputSubmitted.observers.length > 0) {
+      this.inputSubmitted.emit(any)
+    } else {
+      // this.searchService.updateFilters({ any })
+    }
+  }
+
+  async handleInputCleared() {
+    this.autoCompleteAction('')
+  }
+
+  addKeyword(item: {
+    label: string
+    thesaurus: ThesaurusModel
+    type: KeywordType
+  }) {
+    const addedKeywords = [...this.control.value, item]
+
+    // remove duplicates from keyword
+    const filteredKeywords = addedKeywords.filter((value, index, self) => {
+      return (
+        index ===
+        self.findIndex(
+          (t) =>
+            t?.label === value?.label &&
+            t?.thesaurus?.id === value?.thesaurus?.id &&
+            t?.type === value?.type
+        )
+      )
+    })
+
+    this.control.setValue(filteredKeywords)
+  }
+
+  removeKeyword(index: number) {
+    const removeKeywords = this.control.value.filter((_, i) => i !== index)
+
+    this.control.setValue(removeKeywords)
+  }
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html

@@ -90,6 +90,11 @@
   <ng-container *ngIf="isSpatialExtentField">
     <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
   </ng-container>
+  <ng-container *ngIf="isKeywords">
+    <gn-ui-form-field-keywords
+      [control]="formControl"
+    ></gn-ui-form-field-keywords>
+  </ng-container>
   <div
     *ngIf="isFieldInvalid && config.invalidHintKey"
     class="mt-2 text-pink-500 text-sm field-invalid-hint"

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts

@@ -27,6 +27,7 @@ import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
 import { FormFieldConfig } from './form-field.model'
 import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency/form-field-update-frequency.component'
+import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
 
 @Component({
   selector: 'gn-ui-form-field',
@@ -51,6 +52,7 @@ import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency
     FormFieldSpatialExtentComponent,
     FormFieldFileComponent,
     FormFieldArrayComponent,
+    FormFieldKeywordsComponent,
     TranslateModule,
   ],
 })
@@ -137,6 +139,9 @@ export class FormFieldComponent {
   get isTemporalExtents() {
     return this.model === 'temporalExtents'
   }
+  get isKeywords() {
+    return this.model === 'keywords'
+  }
 
   get withoutWrapper() {
     return this.model === 'title' || this.model === 'abstract'

package/src/libs/feature/editor/src/lib/components/record-form/form-field/index.ts

@@ -1,7 +1,7 @@
+export * from './form-field-keywords/form-field-keywords.component'
 export * from './form-field-license/form-field-license.component'
 export * from './form-field-resource-updated/form-field-resource-updated.component'
 export * from './form-field-temporal-extents/form-field-temporal-extents.component'
-
 export * from './form-field-simple/form-field-simple.component'
 export * from './form-field-file/form-field-file.component'
 export * from './form-field-rich/form-field-rich.component'

package/src/libs/feature/editor/src/lib/feature-editor.module.ts

@@ -15,6 +15,7 @@ import * as fromEditor from './+state/editor.reducer'
 import { WizardFieldComponent } from './components/wizard-field/wizard-field.component'
 import { WizardSummarizeComponent } from './components/wizard-summarize/wizard-summarize.component'
 import { WizardComponent } from './components/wizard/wizard.component'
+import { Gn4PlatformService } from '../../../../../libs/api/repository/src'
 
 @NgModule({
   declarations: [
@@ -39,7 +40,7 @@ import { WizardComponent } from './components/wizard/wizard.component'
     EffectsModule.forFeature([EditorEffects]),
   ],
   exports: [WizardComponent, WizardSummarizeComponent],
-  providers: [EditorFacade],
+  providers: [EditorFacade, Gn4PlatformService],
 })
 export class FeatureEditorModule {}
 export * from './models/index'

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -61,4 +61,11 @@ export const DEFAULT_FIELDS: EditorFieldsConfig = [
       type: 'list',
     },
   },
+  {
+    model: 'keywords',
+    formFieldConfig: {
+      labelKey: marker('editor.record.form.keywords'),
+      type: 'list',
+    },
+  },
 ]

package/src/libs/feature/search/src/lib/results-table/results-table.component.ts

@@ -6,7 +6,7 @@ import {
   getFileFormat,
   getFormatPriority,
 } from '../../../../../../libs/util/shared/src'
-import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { BadgeComponent, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
 import {
   InteractiveTableColumnComponent,
   InteractiveTableComponent,
@@ -20,7 +20,6 @@ import { CommonModule } from '@angular/common'
 import { map, take } from 'rxjs/operators'
 import { FieldSort } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { SearchService } from '../utils/service/search.service'
-import { BadgeComponent } from '../../../../../../libs/ui/widgets/src'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Component({

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

@@ -9,7 +9,7 @@ import { ContentGhostComponent } from './content-ghost/content-ghost.component'
 import { DownloadItemComponent } from './download-item/download-item.component'
 import { DownloadsListComponent } from './downloads-list/downloads-list.component'
 import { ApiCardComponent } from './api-card/api-card.component'
-import { BadgeComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
@@ -20,7 +20,7 @@ import { MetadataQualityItemComponent } from './metadata-quality-item/metadata-q
 import { ErrorComponent } from './error/error.component'
 import { PaginationComponent } from './pagination/pagination.component'
 import { ThumbnailComponent } from './thumbnail/thumbnail.component'
-import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import { BadgeComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { FormsModule } from '@angular/forms'
 import { AvatarComponent } from './avatar/avatar.component'
 import { UserPreviewComponent } from './user-preview/user-preview.component'

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

@@ -1,4 +1,5 @@
 export * from './lib/autocomplete/autocomplete.component'
+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'

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

@@ -6,6 +6,7 @@ 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'
@@ -73,6 +74,7 @@ import { ImageInputComponent } from './image-input/image-input.component'
     DropdownSelectorComponent,
     DateRangePickerComponent,
     CheckToggleComponent,
+    BadgeComponent,
   ],
   exports: [
     DropdownSelectorComponent,
@@ -93,6 +95,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'