geonetwork-ui 2.10.0-dev.b6696be21 → 2.10.0-dev.bfea85a63

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

@@ -431,11 +431,19 @@ export class MapViewComponent implements AfterViewInit {
     }),
     withLatestFrom(this.mdViewFacade.metadata$),
     map(([context, metadata]) => {
-      if (context.view) return context
+      // overlay the record's declared spatial extent on top of the data layers
+      const extentLayer = this.mapUtils.getRecordExtentLayer(metadata)
+      const layers = extentLayer
+        ? [...context.layers, extentLayer]
+        : context.layers
+      // the view (initial zoom) is derived from the data layer or, as a
+      // fallback, from the record extent — independently from the overlay above
+      if (context.view) return { ...context, layers }
       const extent = this.mapUtils.getRecordExtent(metadata)
       const view = extent ? { extent } : null
       return {
         ...context,
+        layers,
         view,
       }
     }),

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

@@ -1,10 +1,10 @@
 import {
   Component,
   EventEmitter,
+  inject,
   Input,
   OnDestroy,
   Output,
-  inject,
 } from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SearchFacade } from '../state/search.facade'
@@ -67,6 +67,7 @@ export class ResultsTableContainerComponent implements OnDestroy {
 
   async handleDeleteRecord(item: unknown) {
     const uniqueIdentifier = (item as CatalogRecord).uniqueIdentifier
+    const recordKind = (item as CatalogRecord).kind
     this.subscription.add(
       this.recordsRepository.deleteRecord(uniqueIdentifier).subscribe({
         next: () => {
@@ -76,10 +77,12 @@ export class ResultsTableContainerComponent implements OnDestroy {
             {
               type: 'success',
               title: this.translateService.instant(
-                'editor.record.deleteSuccess.title'
+                'editor.record.deleteSuccess.title',
+                { recordKind }
               ),
               text: `${this.translateService.instant(
-                'editor.record.deleteSuccess.body'
+                'editor.record.deleteSuccess.body',
+                { recordKind }
               )}`,
             },
             2500
@@ -90,10 +93,12 @@ export class ResultsTableContainerComponent implements OnDestroy {
             {
               type: 'error',
               title: this.translateService.instant(
-                'editor.record.deleteError.title'
+                'editor.record.deleteError.title',
+                { recordKind }
               ),
               text: `${this.translateService.instant(
-                'editor.record.deleteError.body'
+                'editor.record.deleteError.body',
+                { recordKind }
               )} ${error}`,
               closeMessage: this.translateService.instant(
                 'editor.record.deleteError.closeMessage'

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts

@@ -1,4 +1,4 @@
-import { Component, InjectionToken, inject } from '@angular/core'
+import { Component, inject, InjectionToken } from '@angular/core'
 import { LANGUAGE_STORAGE_KEY } from '../../../../../../libs/util/i18n/src'
 import { TranslateService } from '@ngx-translate/core'
 import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
@@ -26,7 +26,7 @@ export class LanguageSwitcherComponent {
   )
 
   get currentLang() {
-    return this.translate.currentLang
+    return this.translate.getCurrentLang()
   }
 
   changeLanguage(value: unknown) {

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

@@ -1,4 +1,3 @@
 export * from './lib/chart/chart.component'
 export * from './lib/data-table/data-table.component'
-export * from './lib/data-table/data-table.fixtures'
 export * from './lib/figure/figure.component'

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

@@ -11,6 +11,7 @@ export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/kind-badge/kind-badge.component'
 export * from './lib/external-link-card/external-link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
+export * from './lib/keyword-badge/keyword-badge.component'
 export * from './lib/markdown-parser/markdown-parser.component'
 export * from './lib/metadata-catalog/metadata-catalog.component'
 export * from './lib/metadata-contact/metadata-contact.component'

package/src/libs/ui/elements/src/lib/contact-details/contact-details.component.html

@@ -1,12 +1,12 @@
 <div
-  class="bg-gray-50 text-black rounded border border-gray-200 shadow-md p-4 flex flex-col gap-3 w-full"
+  class="bg-gray-50 text-black rounded border border-gray-200 shadow-md p-4 flex flex-col gap-2 w-full"
   data-test="contact-details"
 >
   @if (displayName) {
-    <div class="flex items-center gap-3">
+    <div class="flex items-center gap-2.5">
       @if (organization?.logoUrl?.href) {
         <div
-          class="flex items-center justify-center rounded-md bg-white w-14 h-14 shrink-0 overflow-hidden"
+          class="flex items-center justify-center rounded-lg bg-white w-14 h-14 shrink-0 overflow-hidden"
         >
           <gn-ui-thumbnail
             class="relative h-full w-full"
@@ -23,74 +23,66 @@
     </div>
   }
 
-  <!-- Email + phone: always shown; icon dimmed when field is absent -->
-  <div class="grid grid-cols-2 gap-1 rounded-md overflow-hidden">
-    <div class="bg-gray-100 flex items-center gap-2 px-3 py-2">
-      <ng-icon
-        class="!w-5 !h-5 !text-[20px] shrink-0"
-        [class.opacity-30]="!contact.email"
-        [class.opacity-75]="!!contact.email"
-        name="matMailOutline"
-      ></ng-icon>
+  @if (contact.email || contact.phone) {
+    <div
+      class="grid gap-1 items-start"
+      [class.grid-cols-2]="contact.email && contact.phone"
+    >
       @if (contact.email) {
-        <a
-          [href]="'mailto:' + contact.email"
-          class="text-sm break-all hover:underline"
-          data-test="contact-details-email"
-          >{{ contact.email }}</a
-        >
+        <div class="bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2">
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] shrink-0 opacity-30"
+            name="matMailOutline"
+          ></ng-icon>
+          <a
+            [href]="'mailto:' + contact.email"
+            class="text-sm break-all hover:underline"
+            data-test="contact-details-email"
+            >{{ contact.email }}</a
+          >
+        </div>
       }
-    </div>
-    <div class="bg-gray-100 flex items-center gap-2 px-3 py-2">
-      <ng-icon
-        class="!w-5 !h-5 !text-[20px] shrink-0"
-        [class.opacity-30]="!contact.phone"
-        [class.opacity-75]="!!contact.phone"
-        name="matCallOutline"
-      ></ng-icon>
       @if (contact.phone) {
-        <span class="text-sm" data-test="contact-details-phone">{{
-          contact.phone
-        }}</span>
+        <div class="bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2">
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] shrink-0 opacity-30"
+            name="matCallOutline"
+          ></ng-icon>
+          <span class="text-sm" data-test="contact-details-phone">{{
+            contact.phone
+          }}</span>
+        </div>
       }
     </div>
-  </div>
+  }
 
-  <!-- Address: always shown; icon dimmed when absent -->
-  <div class="bg-gray-100 rounded-md flex items-start gap-2 px-3 py-2">
-    <ng-icon
-      class="!w-5 !h-5 !text-[20px] shrink-0 mt-0.5"
-      [class.opacity-30]="!addressLines.length"
-      [class.opacity-75]="!!addressLines.length"
-      name="matLocationOnOutline"
-    ></ng-icon>
-    @if (addressLines.length) {
+  @if (addressLines.length) {
+    <div class="bg-gray-100 rounded-lg flex items-start gap-2 px-3 py-2">
+      <ng-icon
+        class="!w-5 !h-5 !text-[20px] shrink-0 mt-0.5 opacity-30"
+        name="matLocationOnOutline"
+      ></ng-icon>
       <div class="flex flex-col" data-test="contact-details-address">
         @for (line of addressLines; track line) {
           <p class="text-sm m-0">{{ line }}</p>
         }
       </div>
-    }
-  </div>
+    </div>
+  }
 
-  <!-- Website: only shown when org exists; icon dimmed when absent -->
-  @if (organization) {
-    <div class="bg-gray-100 rounded-md flex items-center gap-2 px-3 py-2">
+  @if (organization?.website) {
+    <div class="bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2">
       <ng-icon
-        class="!w-5 !h-5 !text-[20px] shrink-0"
-        [class.opacity-30]="!organization.website"
-        [class.opacity-75]="!!organization.website"
+        class="!w-5 !h-5 !text-[20px] shrink-0 opacity-30"
         name="matOpenInNew"
       ></ng-icon>
-      @if (organization.website) {
-        <a
-          [href]="organization.website.href"
-          target="_blank"
-          class="text-sm break-all hover:underline"
-          data-test="contact-details-website"
-          >{{ organization.website.href }}</a
-        >
-      }
+      <a
+        [href]="organization.website.href"
+        target="_blank"
+        class="text-sm break-all hover:underline"
+        data-test="contact-details-website"
+        >{{ organization.website.href }}</a
+      >
     </div>
   }
 </div>

package/src/libs/ui/elements/src/lib/external-link-card/external-link-card.component.html

@@ -54,8 +54,9 @@
         class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
         [style.background-color]="getLinkColor(link)"
         data-cy="download-format"
+        translate
       >
-        {{ getLinkFormat(link) || ('downloads.format.unknown' | translate) }}
+        downloads.format.{{ getLinkFormat(link) || 'unknown' }}
       </span>
     </div>
   </div>

package/src/libs/ui/elements/src/lib/external-link-card/external-link-card.component.ts

@@ -9,7 +9,7 @@ import {
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 import { iconoirDatabase } from '@ng-icons/iconoir'
 import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
-import { TranslatePipe } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 
 type CardSize = 'L' | 'M' | 'S' | 'XS'
 @Component({
@@ -18,7 +18,7 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
   styleUrls: ['./external-link-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, NgIconComponent, TranslatePipe],
+  imports: [CommonModule, NgIconComponent, TranslateDirective, TranslatePipe],
   providers: [
     provideIcons({
       matOpenInNew,

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.css

@@ -0,0 +1,13 @@
+/** the animation values are made to be identical to the cdk overlay values */
+.lightbox-image {
+  animation: show 400ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+@keyframes show {
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}

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

@@ -1,5 +1,5 @@
 <gn-ui-content-ghost
-  [showContent]="imageUrl !== undefined"
+  [showContent]="imageUrl() !== undefined"
   ghostClass="h-full w-full"
 >
   @if (imageUrl) {
@@ -9,7 +9,7 @@
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
-        [thumbnailUrl]="imageUrl"
+        [thumbnailUrl]="imageUrl()"
         fit="cover"
         (placeholderShown)="isPlaceholderShown.emit($event)"
       ></gn-ui-thumbnail>
@@ -18,7 +18,7 @@
           class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
           [type]="'outline'"
           [extraClass]="'!py-2 !px-0'"
-          (buttonClick)="openLightbox(imageUrl)"
+          (buttonClick)="openLightbox()"
         >
           <ng-icon name="matZoomOutMap"></ng-icon>
         </gn-ui-button>
@@ -26,3 +26,13 @@
     </div>
   }
 </gn-ui-content-ghost>
+
+<ng-template #imageTemplate>
+  <img
+    data-test="lightbox-image"
+    class="lightbox-image bg-white max-h-[90vh] max-w-[90vw]"
+    [src]="imageUrl()"
+    alt="Preview image"
+    (click)="closeLightbox()"
+  />
+</ng-template>

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

@@ -1,10 +1,19 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
-import * as basicLightbox from 'basiclightbox'
+import {
+  Component,
+  inject,
+  input,
+  output,
+  TemplateRef,
+  viewChild,
+  ViewContainerRef,
+} from '@angular/core'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
+import { Overlay, OverlayRef } from '@angular/cdk/overlay'
+import { TemplatePortal } from '@angular/cdk/portal'
 
 @Component({
   selector: 'gn-ui-image-overlay-preview',
@@ -20,9 +29,37 @@ import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
   ],
 })
 export class ImageOverlayPreviewComponent {
-  @Input() imageUrl: string
-  @Output() isPlaceholderShown = new EventEmitter<boolean>()
-  openLightbox(src: string) {
-    basicLightbox.create(`<img src="${src}"/>`).show()
+  imageUrl = input<string>()
+  isPlaceholderShown = output<boolean>({})
+
+  private imageTemplate = viewChild<TemplateRef<HTMLElement>>('imageTemplate')
+  private overlay = inject(Overlay)
+  private viewContainerRef = inject(ViewContainerRef)
+  private overlayRef: OverlayRef
+
+  openLightbox() {
+    const positionStrategy = this.overlay
+      .position()
+      .global()
+      .centerHorizontally()
+      .centerVertically()
+    const scrollStrategy = this.overlay.scrollStrategies.block()
+
+    this.overlayRef = this.overlay.create({
+      hasBackdrop: true,
+      backdropClass: 'bg-black/80',
+      positionStrategy,
+      scrollStrategy,
+    })
+    this.overlayRef.backdropClick().subscribe(() => this.overlayRef.dispose())
+    const portal = new TemplatePortal(
+      this.imageTemplate(),
+      this.viewContainerRef
+    )
+    this.overlayRef.attach(portal)
+  }
+
+  closeLightbox() {
+    this.overlayRef?.dispose()
   }
 }

package/src/libs/ui/elements/src/lib/keyword-badge/keyword-badge.component.html

@@ -0,0 +1,14 @@
+<gn-ui-badge
+  [clickable]="!editable"
+  [removable]="editable"
+  (badgeClicked)="keywordClick.emit(keyword)"
+  (badgeRemoveClicked)="keywordRemove.emit(keyword)"
+  ><ng-container>{{ keyword.label }}</ng-container>
+  @if (editable && isPlaceWithoutExtent) {
+    <ng-icon
+      [title]="'editor.record.form.keywords.place.withoutExtent' | translate"
+      class="!text-[1.4em] ml-1"
+      name="matWarningAmberOutline"
+    ></ng-icon>
+  }
+</gn-ui-badge>

package/src/libs/ui/elements/src/lib/keyword-badge/keyword-badge.component.ts

@@ -0,0 +1,85 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { Keyword } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { BadgeComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
+import tippy from 'tippy.js'
+
+marker('domain.record.keywordType.theme')
+marker('domain.record.keywordType.place')
+marker('domain.record.keywordType.temporal')
+marker('domain.record.keywordType.other')
+
+@Component({
+  selector: 'gn-ui-keyword-badge',
+  templateUrl: './keyword-badge.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [BadgeComponent, NgIconComponent, TranslatePipe],
+  providers: [
+    provideIcons({
+      matWarningAmberOutline,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+})
+export class KeywordBadgeComponent implements AfterViewInit {
+  private translateService = inject(TranslateService)
+
+  @Input() keyword: Keyword
+  @Input() editable = false // if false, keyword is only clickable
+  @Output() keywordClick = new EventEmitter<Keyword>()
+  @Output() keywordRemove = new EventEmitter<Keyword>()
+  @ViewChild(BadgeComponent, { read: ElementRef }) badgeComponent: ElementRef
+
+  get segments(): string[] {
+    if (this.keyword.hierarchyPath?.length) {
+      return this.keyword.hierarchyPath
+    }
+    if (this.keyword.thesaurus?.name) {
+      return [this.keyword.thesaurus.name, this.keyword.label]
+    }
+    return [
+      this.translateService.instant(
+        `domain.record.keywordType.${this.keyword.type}`
+      ),
+      this.keyword.label,
+    ]
+  }
+
+  get isPlaceWithoutExtent(): boolean {
+    return this.keyword.type === 'place' && !this.keyword.bbox
+  }
+
+  ngAfterViewInit() {
+    const content = this.segments
+      .map(
+        (segment, i, arr) =>
+          `<span ${i === arr.length - 1 ? 'class="font-bold"' : ''}>${segment}</span>`
+      )
+      .join(' &gt; ')
+    tippy(this.badgeComponent.nativeElement, {
+      appendTo: () => document.body,
+      content,
+      allowHTML: true,
+    })
+  }
+}

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { marked } from 'marked'
+import { parse } from 'marked'
 
 @Component({
   selector: 'gn-ui-markdown-parser',
@@ -14,6 +14,6 @@ export class MarkdownParserComponent {
   @Input() whitoutStyles?: boolean
 
   get parsedMarkdown() {
-    return marked.parse(this.textContent ?? '')
+    return parse(this.textContent ?? '')
   }
 }

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.css

@@ -16,3 +16,8 @@
   --gn-ui-badge-background-color: var(--color-primary-white);
   --gn-ui-badge-text-color: var(--color-primary-darkest);
 }
+
+.metadata-info-keywords {
+  --gn-ui-badge-padding: 0.25rem 0.5rem;
+  text-transform: lowercase;
+}

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -28,13 +28,10 @@
       <gn-ui-max-lines [maxLines]="7">
         <div class="metadata-info-keywords sm:pb-4 flex flex-wrap gap-2">
           @for (keyword of metadata.keywords; track keyword) {
-            <gn-ui-button
-              type="primary-light"
-              class="inline-block opacity-70"
-              extraClass="lowercase text-sm py-1 px-2"
-              (buttonClick)="onKeywordClick(keyword)"
-              >{{ keyword.label }}</gn-ui-button
-            >
+            <gn-ui-keyword-badge
+              [keyword]="keyword"
+              (keywordClick)="onKeywordClick($event)"
+            ></gn-ui-keyword-badge>
           }
         </div>
       </gn-ui-max-lines>

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -22,10 +22,10 @@ import {
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BadgeComponent,
-  ButtonComponent,
   CopyTextButtonComponent,
 } from '../../../../../../libs/ui/inputs/src'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
+import { KeywordBadgeComponent } from '../keyword-badge/keyword-badge.component'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 import { matMailOutline } from '@ng-icons/material-icons/outline'
@@ -46,7 +46,6 @@ import { ContactPillComponent } from '../contact-pill/contact-pill.component'
     TranslatePipe,
     MarkdownParserComponent,
     ExpandablePanelComponent,
-    ButtonComponent,
     BadgeComponent,
     ContentGhostComponent,
     MaxLinesComponent,
@@ -56,6 +55,7 @@ import { ContactPillComponent } from '../contact-pill/contact-pill.component'
     GnUiHumanizeDateDirective,
     SpatialExtentComponent,
     ContactPillComponent,
+    KeywordBadgeComponent,
   ],
   viewProviders: [
     provideIcons({

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html

@@ -52,12 +52,11 @@
           </gn-ui-text-input>
           @if (!supportOffset) {
             <div class="flex items-center gap-2 text-orange-500 z-10 ml-3">
-              <span
-                class="material-symbols-outlined"
+              <ng-icon
+                name="matWarningOutline"
+                size="24"
                 matTooltip="Not supported on this service"
-              >
-                warning
-              </span>
+              ></ng-icon>
             </div>
           }
         </div>

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -15,6 +15,8 @@ import {
 import { CommonModule } from '@angular/common'
 import { TranslateDirective } from '@ngx-translate/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matWarningOutline } from '@ng-icons/material-icons/outline'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -35,7 +37,9 @@ const DEFAULT_PARAMS = {
     CopyTextButtonComponent,
     TranslateDirective,
     MatTooltipModule,
+    NgIconComponent,
   ],
+  providers: [provideIcons({ matWarningOutline })],
 })
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {

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

@@ -1,27 +1,34 @@
-<div
-  class="gn-ui-badge flex items-center gap-1.5"
-  [ngClass]="
-    clickable
-      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'
-      : ''
-  "
->
+<ng-template #badgeContent>
   <span><ng-content></ng-content></span>
-  @if (removable) {
-    <gn-ui-button
-      type="light"
-      (buttonClick)="removeBadge()"
-      extraClass="text-xs border-0 px-0 py-0"
-      style="
-        --gn-ui-button-padding: 0;
-        --gn-ui-button-font-size: 0.8em;
-        --gn-ui-button-width: 1.4em;
-        --gn-ui-button-height: 1.4em;
-        --gn-ui-button-rounded: 1.4em;
-        --gn-ui-button-background: var(--gn-ui-badge-background-color, white);
-      "
-    >
-      <ng-icon name="matClose"></ng-icon>
-    </gn-ui-button>
-  }
-</div>
+</ng-template>
+
+@if (clickable) {
+  <button
+    type="button"
+    class="gn-ui-badge-clickable"
+    (click)="handleClick($event)"
+  >
+    <ng-container [ngTemplateOutlet]="badgeContent"></ng-container>
+  </button>
+} @else {
+  <span class="gn-ui-badge gap-1.5">
+    <ng-container [ngTemplateOutlet]="badgeContent"></ng-container>
+    @if (removable) {
+      <gn-ui-button
+        type="light"
+        (buttonClick)="removeBadge()"
+        extraClass="text-xs border-0 px-0 py-0"
+        style="
+          --gn-ui-button-padding: 0;
+          --gn-ui-button-font-size: 0.8em;
+          --gn-ui-button-width: 1.4em;
+          --gn-ui-button-height: 1.4em;
+          --gn-ui-button-rounded: 1.4em;
+          --gn-ui-button-background: var(--gn-ui-badge-background-color, white);
+        "
+      >
+        <ng-icon name="matClose"></ng-icon>
+      </gn-ui-button>
+    }
+  </span>
+}