geonetwork-ui 2.6.0-dev.b306f1194 → 2.6.0-dev.c49d02679

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.html

@@ -0,0 +1,107 @@
+<div
+  cdkScrollable
+  class="h-[562px] relative overflow-y-auto overflow-hidden"
+  data-cy="feat-catalog-scrollable"
+>
+  <div #scrollContainer class="flex flex-col gap-2 py-5 px-5">
+    <div
+      *ngFor="let featureType of filteredFeatureCatalog?.featureTypes"
+      class="rounded shadow bg-white"
+    >
+      <gn-ui-expandable-panel
+        #expanel
+        [collapsed]="filteredFeatureCatalog?.featureTypes?.length !== 1"
+        iconColor="black"
+      >
+        <ng-template #titleTemplate>
+          <div class="px-2">
+            <div class="text-lg font-bold">{{ featureType.name }}</div>
+            <div class="text-sm" *ngIf="featureType.definition">
+              {{ featureType.definition }}
+            </div>
+          </div>
+        </ng-template>
+        <div
+          *ngIf="expanel && !expanel.collapsed"
+          class="grid gap-0"
+          [style.grid-template-columns]="
+            getGridTemplateColumns(featureType.attributes)
+          "
+          data-cy="feature-type-content"
+        >
+          <div
+            class="py-1 px-2 text-sm font-bold text-left border-t break-all"
+            [class.border-l]="i > 0"
+            [class.border-gray-300]="i > 0"
+            [ngClass]="col.class || ''"
+            *ngFor="
+              let col of getColumnsDefinition(featureType.attributes);
+              trackBy: trackByColumn;
+              let i = index
+            "
+            data-test="column-label"
+          >
+            {{ 'feature.catalog.attribute.' + col.key | translate }}
+          </div>
+          <ng-container *ngIf="expanel && !expanel.collapsed">
+            <ng-container *ngFor="let row of featureType.attributes">
+              <div
+                class="bg-white text-sm font-normal text-left border-t"
+                [class.border-l]="i > 0"
+                [class.border-gray-300]="i > 0"
+                *ngFor="
+                  let col of getColumnsDefinition(featureType.attributes);
+                  trackBy: trackByColumn;
+                  let i = index
+                "
+                data-test="cell-content"
+              >
+                <ng-container
+                  *ngIf="col.key === 'values'; then tplValues; else defaultTpl"
+                ></ng-container>
+
+                <ng-template #defaultTpl>
+                  <gn-ui-truncated-text
+                    [scrollContainer]="scrollContainer"
+                    [cdkScrollContainer]="scrollable"
+                    [text]="row[col.key]"
+                  ></gn-ui-truncated-text>
+                </ng-template>
+
+                <ng-template #tplValues>
+                  <gn-ui-cell-popin
+                    #popinRef
+                    [scrollContainer]="scrollContainer"
+                    [cdkScrollContainer]="scrollable"
+                    *ngIf="row.values?.length > 0"
+                  >
+                    <div cellContent data-cy="values-cell-popin-trigger">
+                      <gn-ui-button
+                        type="light"
+                        extraClass="bg-transparent border-none"
+                        (buttonClick)="popinRef.openOverlay()"
+                      >
+                        <ng-icon name="iconoirList" size="24"></ng-icon>
+                      </gn-ui-button>
+                    </div>
+                    <div
+                      popinContent
+                      class="max-h-60 overflow-y-auto min-w-64 py-4 px-6"
+                      style="scrollbar-width: thin"
+                    >
+                      <ul class="list-disc list-inside mr-4">
+                        <li *ngFor="let v of row.values">
+                          {{ v.label || v.code }}
+                        </li>
+                      </ul>
+                    </div>
+                  </gn-ui-cell-popin>
+                </ng-template>
+              </div>
+            </ng-container>
+          </ng-container>
+        </div>
+      </gn-ui-expandable-panel>
+    </div>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.ts

@@ -0,0 +1,83 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  DatasetFeatureAttribute,
+  DatasetFeatureCatalog,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  CellPopinComponent,
+  ExpandablePanelComponent,
+  TruncatedTextComponent,
+} from '../../../../../../../libs/ui/layout/src'
+import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling'
+import { provideIcons, NgIconComponent } from '@ng-icons/core'
+import { iconoirList } from '@ng-icons/iconoir'
+
+marker('feature.catalog.attribute.type')
+marker('feature.catalog.attribute.name')
+marker('feature.catalog.attribute.code')
+marker('feature.catalog.attribute.definition')
+marker('feature.catalog.attribute.values')
+
+interface ColumnDefinition {
+  key: string
+  width: string
+  class?: string
+}
+
+@Component({
+  selector: 'gn-ui-feature-catalog-list',
+  templateUrl: './feature-catalog-list.component.html',
+  styleUrls: [],
+  standalone: true,
+  imports: [
+    ButtonComponent,
+    CellPopinComponent,
+    CommonModule,
+    TranslateModule,
+    ExpandablePanelComponent,
+    TruncatedTextComponent,
+    NgIconComponent,
+    ScrollingModule,
+  ],
+  providers: [provideIcons({ iconoirList })],
+})
+export class FeatureCatalogListComponent {
+  @Input() filteredFeatureCatalog!: DatasetFeatureCatalog
+
+  @ViewChild('scrollContainer') scrollContainer!: ElementRef
+  @ViewChild(CdkScrollable, { static: true }) scrollable!: CdkScrollable
+  @ViewChild('expanel', { read: ExpandablePanelComponent, static: true })
+  panelComponent: ExpandablePanelComponent
+
+  readonly COLUMNS_DEFAULT: ColumnDefinition[] = [
+    { key: 'type', width: '17%' },
+    { key: 'name', width: '32%' },
+    { key: 'code', width: '17%' },
+    { key: 'definition', width: 'minmax(0px, 1fr)' },
+  ]
+
+  readonly COLUMN_VALUES: ColumnDefinition = {
+    key: 'values',
+    width: '73px',
+    class: 'text-center',
+  }
+
+  getColumnsDefinition(attrs: DatasetFeatureAttribute[]): ColumnDefinition[] {
+    const hasValues = attrs.some((a) => a.values?.length > 0)
+    return [...this.COLUMNS_DEFAULT, ...(hasValues ? [this.COLUMN_VALUES] : [])]
+  }
+
+  getGridTemplateColumns(attributes: DatasetFeatureAttribute[]) {
+    return this.getColumnsDefinition(attributes)
+      .map((col) => col.width)
+      .join(' ')
+  }
+
+  trackByColumn(_i: number, col: { key: string }) {
+    return col.key
+  }
+}

package/src/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html

@@ -1,30 +1,9 @@
-<a
-  [class]="classList"
-  [routerLink]="['/dataset', record.uniqueIdentifier]"
-  target="_blank"
+<gn-ui-internal-link-card
+  [linkHref]="linkHref"
+  [linkTarget]="'_blank'"
+  [record]="record"
+  [favoriteTemplate]="favoriteTemplate"
+  [metadataQualityDisplay]="metadataQualityDisplay"
+  [size]="size"
 >
-  <div class="h-52 bg-gray-100">
-    <gn-ui-thumbnail
-      class="h-52 w-full object-cover"
-      [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
-    ></gn-ui-thumbnail>
-  </div>
-  <div class="flex flex-col justify-between h-44 px-5 pt-4 pb-6">
-    <h4
-      class="max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden"
-    >
-      {{ record.title }}
-    </h4>
-    <div>
-      <button
-        [matTooltip]="'tooltip.url.open' | translate"
-        matTooltipPosition="above"
-      >
-        <ng-icon
-          class="align-middle text-secondary"
-          name="matOpenInNew"
-        ></ng-icon>
-      </button>
-    </div>
-  </div>
-</a>
+</gn-ui-internal-link-card>

package/src/libs/ui/elements/src/lib/related-record-card/related-record-card.component.ts

@@ -1,11 +1,19 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
+import { InternalLinkCardComponent } from '../internal-link-card/internal-link-card.component'
 import { RouterLink } from '@angular/router'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { TranslateModule } from '@ngx-translate/core'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
+import { TemplateRef } from '@angular/core'
 
 @Component({
   selector: 'gn-ui-related-record-card',
@@ -13,6 +21,7 @@ import { matOpenInNew } from '@ng-icons/material-icons/baseline'
   styleUrls: ['./related-record-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    InternalLinkCardComponent,
     ThumbnailComponent,
     RouterLink,
     MatTooltipModule,
@@ -25,8 +34,12 @@ import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 export class RelatedRecordCardComponent {
   private readonly baseClasses: string
 
+  @Input() linkHref: string = null
   @Input() record: CatalogRecord
   @Input() extraClass = ''
+  @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
+  @Input() metadataQualityDisplay: boolean
+  @Input() size: string
 
   constructor() {
     this.baseClasses = [

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.html

@@ -0,0 +1,110 @@
+<div style="height: 652px" id="preview" *ngIf="apiLinks.length > 0">
+  <div class="bg-primary-opacity-10 overflow-visible" style="height: 420px">
+    <div class="container-lg px-4 lg:mx-auto">
+      <div>
+        <div class="gn-ui-section-title mb-6" translate>
+          service.metadata.capabilities
+        </div>
+        <div
+          *ngIf="loading"
+          class="flex justify-center w-full h-[200px] items-center"
+        >
+          <gn-ui-spinning-loader></gn-ui-spinning-loader>
+        </div>
+        <div *ngIf="!loading">
+          <div class="flex flex-row gap-5">
+            <div class="h-14 md:w-2/5 w-full mb-4 flex flex-row relative">
+              <gn-ui-text-input
+                class="w-full"
+                [(value)]="searchQuery"
+                [extraClass]="getExtraInputClass()"
+                [placeholder]="'service.metadata.search' | translate"
+                (input)="onSearchChange($event)"
+                (keydown.enter)="onSearchEnter($event)"
+              >
+              </gn-ui-text-input>
+              <div
+                class="absolute right-14 h-14 w-14 flex items-center justify-center"
+              >
+                <button
+                  #inputBtn
+                  *ngIf="searchQuery"
+                  [aria-label]="'service.metadata.search.clear' | translate"
+                  (click)="clearSearch()"
+                  class="h-12 w-12 border-0 flex items-center justify-center"
+                >
+                  <ng-icon name="matClose"></ng-icon>
+                </button>
+              </div>
+              <div class="border-l absolute border-gray-200 right-0 h-14 w-14">
+                <gn-ui-button
+                  #inputBtn
+                  type="outline"
+                  extraClass="h-12 w-12 border-0 absolute right-1 top-1 bg-white"
+                  (buttonClick)="searchLayers()"
+                >
+                  <ng-icon name="iconoirSearch"></ng-icon>
+                </gn-ui-button>
+              </div>
+            </div>
+            <gn-ui-popover
+              [content]="popoverItems"
+              theme="light"
+              class="w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center"
+            >
+              <ng-icon name="matInfoOutline" class="w-6 h-6 pt-0.5"></ng-icon>
+            </gn-ui-popover>
+          </div>
+          <div
+            style="height: 500px"
+            class="bg-white shadow-xl rounded p-0 flex md:flex-row flex-col"
+          >
+            <div
+              class="flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3"
+              data-test="layer-list"
+            >
+              <gn-ui-button
+                *ngFor="let layerItem of filteredLayers"
+                type="outline"
+                [extraClass]="getExtraClass(layerItem)"
+                (buttonClick)="selectLayer(layerItem)"
+              >
+                {{ layerItem.title || layerItem.name }}
+              </gn-ui-button>
+              <span *ngIf="filteredLayers.length === 0" class="text-gray-800">
+                {{ 'service.metadata.filter.noLayers' | translate }}
+              </span>
+            </div>
+            <div
+              data-test="layer-information"
+              class="flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto"
+            >
+              <div
+                *ngFor="let item of layerInformation"
+                class="flex flex-row gap-4 border-b border-gray-200"
+              >
+                <span class="font-semibold w-24">{{ item.displayName }}</span>
+                <div *ngIf="isList(item.value)">
+                  <div
+                    *ngFor="let subItem of item.value"
+                    class="flex flex-row break-words max-w-72"
+                  >
+                    {{ subItem }}
+                  </div>
+                </div>
+                <div class="break-words max-w-72" *ngIf="!isList(item.value)">
+                  {{ item.value }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
+    <div translate>service.metadata.filter</div>
+  </div>
+</ng-template>

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.ts

@@ -0,0 +1,191 @@
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { getLayers } from '../../../../../../libs/util/shared/src'
+import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { iconoirSearch } from '@ng-icons/iconoir'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { matInfoOutline } from '@ng-icons/material-icons/outline'
+import {
+  PopoverComponent,
+  SpinningLoaderComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import {
+  WfsFeatureTypeFull,
+  WmsLayerFull,
+  WmtsLayer,
+} from '@camptocamp/ogc-client'
+import { matClose } from '@ng-icons/material-icons/baseline'
+
+marker(`service.metadata.search`)
+marker(`service.metadata.capabilities.title`)
+marker(`service.metadata.capabilities.abstract`)
+marker(`service.metadata.capabilities.name`)
+marker(`service.metadata.capabilities.defaultCrs`)
+marker(`service.metadata.capabilities.availableCrs`)
+marker(`service.metadata.capabilities.otherCrs`)
+marker(`service.metadata.capabilities.objectCount`)
+marker(`service.metadata.capabilities.geometryName`)
+marker(`service.metadata.capabilities.geometryType`)
+marker(`service.metadata.capabilities.keywords`)
+marker(`service.metadata.capabilities.outputFormats`)
+marker(`service.metadata.capabilities.resourceLinks`)
+marker(`service.metadata.capabilities.attribution`)
+
+@Component({
+  selector: 'gn-ui-service-capabilities',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    ButtonComponent,
+    TextInputComponent,
+    NgIcon,
+    PopoverComponent,
+    SpinningLoaderComponent,
+  ],
+  viewProviders: [
+    provideIcons({
+      iconoirSearch,
+      matInfoOutline,
+      matClose,
+    }),
+  ],
+  templateUrl: './service-capabilities.component.html',
+  styleUrl: './service-capabilities.component.css',
+})
+export class ServiceCapabilitiesComponent implements OnInit {
+  @Input() apiLinks = []
+  availableLayers = []
+  filteredLayers = []
+  selectedLayer = null
+  layerInformation = []
+  searchQuery = ''
+  loading = false
+  searchActive
+
+  capabilitiesKeys = [
+    'title',
+    'abstract',
+    'name',
+    'defaultCrs',
+    'availableCrs',
+    'otherCrs',
+    'objectCount',
+    'geometryName',
+    'geometryType',
+    'keywords',
+    'outputFormats',
+    'resourceLinks',
+    'attribution',
+  ]
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit() {
+    this.loadLayers()
+  }
+
+  onSearchChange(event: Event) {
+    const input = event.target as HTMLInputElement
+    this.searchQuery = input.value
+    if (!input.value) {
+      this.searchActive = false
+      this.filteredLayers = this.availableLayers
+    }
+  }
+
+  onSearchEnter(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.searchActive = true
+      this.searchLayers()
+    }
+  }
+
+  clearSearch() {
+    this.searchActive = false
+    this.searchQuery = ''
+    this.filteredLayers = this.availableLayers
+  }
+
+  async loadLayers() {
+    if (
+      this.apiLinks.length > 0 &&
+      this.apiLinks[0].accessServiceProtocol !== 'ogcFeatures'
+    ) {
+      this.loading = true
+      this.availableLayers = await getLayers(
+        this.apiLinks[0].url.href,
+        this.apiLinks[0].accessServiceProtocol
+      )
+      this.loading = false
+      this.cdr.detectChanges()
+      this.filteredLayers = this.availableLayers
+    } else {
+      this.availableLayers = []
+    }
+  }
+
+  selectLayer(layer: WfsFeatureTypeFull | WmsLayerFull | WmtsLayer) {
+    if (layer === this.selectedLayer) {
+      this.selectedLayer = null
+      this.layerInformation = []
+      return
+    }
+
+    this.selectedLayer = layer
+    const filteredInfo = []
+    Object.keys(layer).map((key) => {
+      if (this.capabilitiesKeys.includes(key)) {
+        const displayName = this.translateService.instant(
+          `service.metadata.capabilities.${key}`
+        )
+        if (key in layer && layer[key]?.length) {
+          filteredInfo.push({ displayName, value: layer[key] })
+        }
+      }
+    })
+
+    this.layerInformation = filteredInfo
+  }
+
+  isList(value: string | string[]) {
+    return Array.isArray(value)
+  }
+
+  getExtraInputClass() {
+    if (this.searchActive) {
+      return 'h-14 border rounded-lg border-primary text-primary focus:border-primary hover:border-primary'
+    }
+    return 'h-14 border rounded-lg'
+  }
+
+  searchLayers() {
+    this.searchActive = true
+    this.filteredLayers = this.availableLayers.filter((layer) => {
+      const query = this.searchQuery.toLowerCase()
+      if (layer.title) {
+        return (
+          layer.title.toLowerCase().includes(query) ||
+          layer.abstract?.toLowerCase().includes(query)
+        )
+      } else {
+        return layer.name.toLowerCase().includes(query)
+      }
+    })
+    if (!this.filteredLayers.includes(this.selectedLayer)) {
+      this.selectedLayer = null
+      this.layerInformation = []
+    }
+  }
+
+  getExtraClass(layerItem) {
+    return layerItem === this.selectedLayer
+      ? `h-8 rounded-lg bg-primary-darker text-white hover:text-primary-darker hover:bg-white`
+      : `h-8 rounded-lg`
+  }
+}

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

@@ -15,13 +15,16 @@ import { provideNgIconsConfig } from '@ng-icons/core'
 import { TranslateModule } from '@ngx-translate/core'
 import { AvatarComponent } from './avatar/avatar.component'
 import { ImageInputComponent } from './image-input/image-input.component'
+import { GeoDataBadgeComponent } from './geo-data-badge/geo-data-badge.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
+import { KindBadgeComponent } from './kind-badge/kind-badge.component'
 import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
 import { ApplicationBannerComponent } from './application-banner/application-banner.component'
 import { InternalLinkCardComponent } from './internal-link-card/internal-link-card.component'
-
+import { ServiceCapabilitiesComponent } from './service-capabilities/service-capabilities.component'
+import { ScrollingModule } from '@angular/cdk/scrolling'
 @NgModule({
   imports: [
     CommonModule,
@@ -44,6 +47,10 @@ import { InternalLinkCardComponent } from './internal-link-card/internal-link-ca
     ImageInputComponent,
     ApplicationBannerComponent,
     InternalLinkCardComponent,
+    ServiceCapabilitiesComponent,
+    KindBadgeComponent,
+    GeoDataBadgeComponent,
+    ScrollingModule,
   ],
   providers: [
     provideNgIconsConfig({
@@ -59,6 +66,9 @@ import { InternalLinkCardComponent } from './internal-link-card/internal-link-ca
     ImageInputComponent,
     ApplicationBannerComponent,
     InternalLinkCardComponent,
+    ServiceCapabilitiesComponent,
+    KindBadgeComponent,
+    GeoDataBadgeComponent,
   ],
 })
 export class UiElementsModule {}

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

@@ -15,7 +15,7 @@ export * from './lib/dropdown-selector/dropdown-selector.model'
 export * from './lib/editable-label/editable-label.directive'
 export * from './lib/file-input/file-input.component'
 export * from './lib/files-drop/files-drop.directive'
-export * from './lib/navigation-button/navigation-button.component'
+export * from './lib/inline-filter/inline-filter.component'
 export * from './lib/search-input/search-input.component'
 export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/switch-toggle/switch-toggle.component'
@@ -24,3 +24,4 @@ export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
 export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
+export * from './lib/search-feature-catalog/search-feature-catalog.component'

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

@@ -79,7 +79,7 @@
   <mat-option
     *ngFor="let suggestion of suggestions$ | async"
     [value]="suggestion"
-    class="p-2 suggestion"
+    class="p-2 suggestion text-start"
   >
     {{ displayWithFnInternal(suggestion) }}
   </mat-option>

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

@@ -56,14 +56,14 @@ export class ButtonComponent {
 
   @Input() disabled = false
   @Input() extraClass = ''
-  @Output() buttonClick = new EventEmitter<void>()
+  @Output() buttonClick = new EventEmitter<Event>()
 
   get classList() {
     return `${this.btnClass} ${this.extraClass}`
   }
 
   handleClick(event: MouseEvent) {
-    this.buttonClick.emit()
+    this.buttonClick.emit(event)
     event.preventDefault()
     ;(event.currentTarget as HTMLElement).blur()
     propagateToDocumentOnly(event)

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html

@@ -59,7 +59,7 @@
     #overlayContainer
   >
     <div
-      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
+      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
     >
       <button
         type="button"

package/src/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html

@@ -19,7 +19,7 @@
     (keydown)="handleTriggerKeydown($event)"
     [disabled]="disabled"
   >
-    <div class="grow font-medium truncate py-1 mr-2 text-left">
+    <div class="grow truncate py-1 mr-2 text-left">
       {{ getChoiceLabel() | translate }}
     </div>
     <ng-icon