geonetwork-ui 2.3.0 → 2.4.0-dev.656babc7

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

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+import { DateRangePickerComponent } from '../../../../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-form-field-temporal-extents-range',
+  templateUrl: './form-field-temporal-extents-range.component.html',
+  styleUrls: ['./form-field-temporal-extents-range.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [DateRangePickerComponent, TranslateModule],
+})
+export class FormFieldTemporalExtentsRangeComponent {
+  @Input() control!: FormControl
+}

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

@@ -0,0 +1,6 @@
+<gn-ui-sortable-list
+  [elements]="elements"
+  (elementsChange)="onElementsChange($event)"
+  [addOptions]="addOptions$ | async"
+  (add)="onAdd($event)"
+></gn-ui-sortable-list>

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

@@ -0,0 +1,130 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  Type,
+} from '@angular/core'
+import { FormArray, FormControl } from '@angular/forms'
+import { SortableListComponent } from '../../../../../../../../../libs/ui/elements/src'
+import { Subscription, combineLatest, map } from 'rxjs'
+import { FormFieldTemporalExtentsDateComponent } from './form-field-temporal-extents-date/form-field-temporal-extents-date.component'
+import { FormFieldTemporalExtentsRangeComponent } from './form-field-temporal-extents-range/form-field-temporal-extents-range.component'
+import { TranslateService } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-form-field-temporal-extents',
+  templateUrl: './form-field-temporal-extents.component.html',
+  styleUrls: ['./form-field-temporal-extents.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, SortableListComponent],
+})
+export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
+  @Input() control!: FormControl
+
+  subscription: Subscription
+
+  array: FormArray = new FormArray([])
+  elements: Array<{
+    component: Type<any>
+    inputs: Record<string, any>
+  }>
+
+  addOptions$ = combineLatest([
+    this.translateService
+      .get('editor.record.form.temporalExtents.addDate')
+      .pipe(map((buttonLabel) => ({ buttonLabel, eventName: 'date' }))),
+    this.translateService
+      .get('editor.record.form.temporalExtents.addRange')
+      .pipe(map((buttonLabel) => ({ buttonLabel, eventName: 'range' }))),
+  ])
+
+  constructor(private translateService: TranslateService) {}
+
+  ngOnInit() {
+    this.resetValueFromInput(this.control.value)
+
+    this.subscription = new Subscription()
+
+    this.subscription.add(
+      this.control.valueChanges.subscribe((value) => {
+        this.resetValueFromInput(value)
+      })
+    )
+
+    this.subscription.add(
+      this.array.valueChanges.subscribe((value) => {
+        this.control.setValue(value)
+      })
+    )
+  }
+
+  onElementsChange(elements: any) {
+    this.array.clear({ emitEvent: false })
+    elements.forEach((e: any, i: number) =>
+      this.array.push(e.inputs.control, {
+        emitEvent: i === elements.length - 1,
+      })
+    )
+  }
+
+  onAdd(eventName: string) {
+    switch (eventName) {
+      case 'date': {
+        const dateControl = new FormControl({ start: new Date() })
+        this.array.push(dateControl)
+        break
+      }
+      case 'range': {
+        const rangeControl = new FormControl({
+          start: new Date(),
+          end: new Date(),
+        })
+        this.array.push(rangeControl)
+        break
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+
+  private resetValueFromInput(value) {
+    this.array.clear({ emitEvent: false })
+    this.elements = []
+    value.forEach((v: any) => {
+      if ('start' in v && 'end' in v) {
+        const rangeControl = new FormControl({
+          start: v.start,
+          end: v.end,
+        })
+        this.array.push(rangeControl, { emitEvent: false })
+        this.elements = [
+          ...this.elements,
+          {
+            component: FormFieldTemporalExtentsRangeComponent,
+            inputs: {
+              control: rangeControl,
+            },
+          },
+        ]
+      } else {
+        const dateControl = new FormControl({ start: v.start })
+        this.array.push(dateControl, { emitEvent: false })
+        this.elements = [
+          ...this.elements,
+          {
+            component: FormFieldTemporalExtentsDateComponent,
+            inputs: {
+              control: dateControl,
+            },
+          },
+        ]
+      }
+    })
+  }
+}

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

@@ -61,6 +61,11 @@
       [control]="formControl"
     ></gn-ui-form-field-update-frequency>
   </ng-container>
+  <ng-container *ngIf="isTemporalExtents">
+    <gn-ui-form-field-temporal-extents
+      [control]="formControl"
+    ></gn-ui-form-field-temporal-extents>
+  </ng-container>
   <ng-container *ngIf="isSimpleField">
     <gn-ui-form-field-simple
       [type]="simpleType"
@@ -85,8 +90,10 @@
   <ng-container *ngIf="isSpatialExtentField">
     <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
   </ng-container>
-  <ng-container *ngIf="isTemporalExtentField">
-    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>
+  <ng-container *ngIf="isKeywords">
+    <gn-ui-form-field-keywords
+      [control]="formControl"
+    ></gn-ui-form-field-keywords>
   </ng-container>
   <div
     *ngIf="isFieldInvalid && config.invalidHintKey"

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

@@ -14,17 +14,20 @@ import { EditableLabelDirective } from '../../../../../../../../libs/ui/inputs/s
 import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { Observable } from 'rxjs'
+import {
+  FormFieldLicenseComponent,
+  FormFieldResourceUpdatedComponent,
+  FormFieldTemporalExtentsComponent,
+} from '.'
 import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
 import { FormFieldFileComponent } from './form-field-file/form-field-file.component'
-import { FormFieldLicenseComponent } from './form-field-license/form-field-license.component'
 import { FormFieldObjectComponent } from './form-field-object/form-field-object.component'
-import { FormFieldResourceUpdatedComponent } from './form-field-resource-updated/form-field-resource-updated.component'
 import { FormFieldRichComponent } from './form-field-rich/form-field-rich.component'
 import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.component'
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
-import { FormFieldTemporalExtentComponent } from './form-field-temporal-extent/form-field-temporal-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',
@@ -42,13 +45,14 @@ import { FormFieldUpdateFrequencyComponent } from './form-field-update-frequency
     FormFieldLicenseComponent,
     FormFieldResourceUpdatedComponent,
     FormFieldUpdateFrequencyComponent,
+    FormFieldTemporalExtentsComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
     FormFieldObjectComponent,
     FormFieldSpatialExtentComponent,
-    FormFieldTemporalExtentComponent,
     FormFieldFileComponent,
     FormFieldArrayComponent,
+    FormFieldKeywordsComponent,
     TranslateModule,
   ],
 })
@@ -100,9 +104,6 @@ export class FormFieldComponent {
   get isSpatialExtentField() {
     return this.config.type === 'spatial_extent'
   }
-  get isTemporalExtentField() {
-    return this.config.type === 'temporal_extent'
-  }
   get isArrayField() {
     return this.config.type === 'array'
   }
@@ -135,6 +136,12 @@ export class FormFieldComponent {
   get isUpdateFrequency() {
     return this.model === 'updateFrequency'
   }
+  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,9 +1,12 @@
+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'
 export * from './form-field-object/form-field-object.component'
 export * from './form-field-array/form-field-array.component'
 export * from './form-field-spatial-extent/form-field-spatial-extent.component'
-export * from './form-field-temporal-extent/form-field-temporal-extent.component'
 export * from './form-field.component'
 export * from './form-field.model'

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

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

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,50 +1,22 @@
-import { Inject, Injectable, Optional } from '@angular/core'
-import {
-  findConverterForDocument,
-  Iso19139Converter,
-} from '../../../../../../libs/api/metadata-converter/src'
-import { Configuration } from '../../../../../../libs/data-access/gn4/src'
-import { from, Observable } from 'rxjs'
-import { map, switchMap } from 'rxjs/operators'
-import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import { map } from 'rxjs/operators'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { EditorFieldsConfig } from '../models/fields.model'
 import { evaluate } from '../expressions'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Injectable({
   providedIn: 'root',
 })
 export class EditorService {
-  private apiUrl = `${this.apiConfiguration?.basePath || '/geonetwork/srv/api'}`
+  constructor(private recordsRepository: RecordsRepositoryInterface) {}
 
-  constructor(
-    private http: HttpClient,
-    @Optional()
-    @Inject(Configuration)
-    private apiConfiguration: Configuration
-  ) {}
-
-  // TODO: use the catalog repository instead
-  loadRecordByUuid(uuid: string): Observable<CatalogRecord> {
-    return this.http
-      .get(`${this.apiUrl}/records/${uuid}/formatters/xml`, {
-        responseType: 'text',
-        headers: {
-          Accept: 'application/xml',
-        },
-      })
-      .pipe(
-        switchMap((response) =>
-          findConverterForDocument(response).readRecord(response.toString())
-        )
-      )
-  }
-
-  // returns the record as it was when saved
+  // returns the record as it was when saved, alongside its source
   saveRecord(
     record: CatalogRecord,
     fieldsConfig: EditorFieldsConfig
-  ): Observable<CatalogRecord> {
+  ): Observable<[CatalogRecord, string]> {
     const savedRecord = { ...record }
 
     // run onSave processes
@@ -57,23 +29,16 @@ export class EditorService {
         })
       }
     }
+    return this.recordsRepository
+      .saveRecord(savedRecord)
+      .pipe(map((recordSource) => [savedRecord, recordSource]))
+  }
 
-    // TODO: use the catalog repository instead
-    // TODO: use converter based on the format of the record before change
-    return from(new Iso19139Converter().writeRecord(savedRecord)).pipe(
-      switchMap((recordXml) =>
-        this.http.put(
-          `${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`,
-          recordXml,
-          {
-            headers: {
-              'Content-Type': 'application/xml',
-            },
-            withCredentials: true,
-          }
-        )
-      ),
-      map(() => savedRecord)
-    )
+  // emits and completes once saving is done
+  // note: onSave processes are not run for drafts
+  saveRecordAsDraft(record: CatalogRecord): Observable<void> {
+    return this.recordsRepository
+      .saveRecordAsDraft(record)
+      .pipe(map(() => undefined))
   }
 }

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

@@ -20,9 +20,7 @@ export class MdViewEffects {
   loadFullMetadata$ = createEffect(() =>
     this.actions$.pipe(
       ofType(MdViewActions.loadFullMetadata),
-      switchMap(({ uuid }) =>
-        this.recordsRepository.getByUniqueIdentifier(uuid)
-      ),
+      switchMap(({ uuid }) => this.recordsRepository.getRecord(uuid)),
       map((record) => {
         if (record === null) {
           return MdViewActions.loadFullMetadataFailure({ notFound: true })

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

@@ -34,7 +34,18 @@
       <span translate>record.metadata.title</span>
     </ng-template>
     <ng-template #cell let-item>
-      {{ item.title }}
+      <div class="flex flex-row items-center gap-2 max-w-full">
+        <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
+        <gn-ui-badge
+          *ngIf="hasDraft(item)"
+          [style.--gn-ui-badge-padding]="'0.4em 0.6em'"
+          [style.--gn-ui-badge-text-color]="'#3d2006'"
+          [style.--gn-ui-badge-background-color]="'#ffbc7b'"
+          [style.--gn-ui-badge-rounded]="'4px'"
+        >
+          <span translate>dashboard.records.hasDraft</span>
+        </gn-ui-badge>
+      </div>
     </ng-template>
   </gn-ui-interactive-table-column>
 

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,6 +20,7 @@ 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 { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
 @Component({
   selector: 'gn-ui-results-table',
@@ -33,6 +34,7 @@ import { SearchService } from '../utils/service/search.service'
     InteractiveTableColumnComponent,
     MatIconModule,
     TranslateModule,
+    BadgeComponent,
   ],
 })
 export class ResultsTableComponent {
@@ -44,7 +46,8 @@ export class ResultsTableComponent {
   constructor(
     private searchFacade: SearchFacade,
     private searchService: SearchService,
-    private selectionService: SelectionService
+    private selectionService: SelectionService,
+    private recordsRepository: RecordsRepositoryInterface
   ) {}
 
   dateToString(date: Date): string {
@@ -161,4 +164,8 @@ export class ResultsTableComponent {
       })
     )
   }
+
+  hasDraft(record: CatalogRecord): boolean {
+    return this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
+  }
 }

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

@@ -3,6 +3,7 @@ export * from './lib/avatar/avatar.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
+export * from './lib/error/error.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
@@ -13,12 +14,12 @@ export * from './lib/metadata-contact/metadata-contact.component'
 export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
+export * from './lib/notification/notification.component'
 export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
-export * from './lib/error/error.component'
+export * from './lib/sortable-list/sortable-list.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'
-export * from './lib/notification/notification.component'

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.css

@@ -0,0 +1,18 @@
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.sortable-list.cdk-drop-list-dragging .sortable-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.html

@@ -0,0 +1,36 @@
+<div class="flex gap-2 mb-2">
+  <gn-ui-button
+    *ngFor="let addOption of addOptions"
+    (buttonClick)="add.emit(addOption.eventName)"
+  >
+    <span class="material-symbols-outlined gn-ui-icon-small"> add </span>
+    &nbsp;{{ addOption.buttonLabel }}</gn-ui-button
+  >
+</div>
+<div
+  cdkDropList
+  class="sortable-list flex flex-col gap-3 p-2"
+  (cdkDropListDropped)="drop($event)"
+>
+  <ng-container *ngFor="let element of elements; index as index">
+    <div class="sortable-box bg-white flex items-center" cdkDrag>
+      <span
+        cdkDragHandle
+        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
+      >
+        drag_handle
+      </span>
+      <div class="flex-1">
+        <ng-container
+          *ngComponentOutlet="element.component; inputs: element.inputs"
+        ></ng-container>
+      </div>
+      <span
+        (click)="removeElement(index)"
+        class="material-symbols-outlined mx-[10px] cursor-pointer gn-ui-icon-medium flex-none"
+      >
+        close
+      </span>
+    </div>
+  </ng-container>
+</div>

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.ts

@@ -0,0 +1,56 @@
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragHandle,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
+import { NgComponentOutlet, NgFor } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  Type,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+type DynamicElement = {
+  component: Type<any>
+  inputs: Record<string, any>
+}
+
+@Component({
+  selector: 'gn-ui-sortable-list',
+  templateUrl: 'sortable-list.component.html',
+  styleUrls: ['sortable-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    NgFor,
+    NgComponentOutlet,
+    CdkDropList,
+    CdkDrag,
+    CdkDragHandle,
+    MatIconModule,
+    ButtonComponent,
+  ],
+})
+export class SortableListComponent {
+  @Input() elements: Array<DynamicElement>
+  @Input() addOptions: Array<{ buttonLabel: string; eventName: string }>
+  @Output() elementsChange = new EventEmitter<Array<DynamicElement>>()
+  @Output() add = new EventEmitter<string>()
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.elements, event.previousIndex, event.currentIndex)
+    this.elementsChange.emit(this.elements)
+  }
+
+  removeElement(index: number) {
+    this.elements = this.elements.filter((_, i) => i !== index)
+    this.elementsChange.emit(this.elements)
+  }
+}

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

@@ -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'
@@ -49,6 +49,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     MarkdownParserComponent,
     ThumbnailComponent,
     TimeSincePipe,
+    BadgeComponent,
   ],
   declarations: [
     MetadataInfoComponent,

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>