geonetwork-ui 2.6.0-dev.10c659821 → 2.6.0-dev.14c46265d

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

@@ -5,15 +5,14 @@ import {
   Input,
   TemplateRef,
 } from '@angular/core'
-import { provideIcons } from '@ng-icons/core'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
 import {
+  iconoirDatabase,
   iconoirAppleWallet,
-  iconoirAppleShortcuts,
   iconoirCode,
-  iconoirCreditCard,
+  iconoirAppWindow,
 } from '@ng-icons/iconoir'
-import { NgIconsModule } from '@ng-icons/core'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 
 marker('record.kind.dataset')
@@ -22,9 +21,9 @@ marker('record.kind.service')
 
 enum KindConfig {
   all = 'iconoirAppleWallet', // (this one is for filter)
-  dataset = 'iconoirAppleShortcuts',
+  dataset = 'iconoirDatabase',
   service = 'iconoirCode',
-  reuse = 'iconoirCreditCard',
+  reuse = 'iconoirAppWindow',
 }
 
 @Component({
@@ -34,19 +33,20 @@ enum KindConfig {
   viewProviders: [
     provideIcons({
       iconoirAppleWallet,
-      iconoirAppleShortcuts,
+      iconoirDatabase,
       iconoirCode,
-      iconoirCreditCard,
+      iconoirAppWindow,
     }),
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [NgIconsModule, CommonModule, TranslateModule],
+  imports: [NgIconComponent, CommonModule, TranslatePipe],
 })
 export class KindBadgeComponent {
-  @Input() styling = 'default'
+  @Input() styling = 'primary'
   @Input() contentTemplate: TemplateRef<unknown>
   @Input() kind: string
+  @Input() extraClass = 'text-[0.85em]'
 
   hasProjectedContent = false
 
@@ -56,15 +56,17 @@ export class KindBadgeComponent {
 
   get badgeClasses(): string {
     const baseClasses =
-      'badge-btn text-white text-xs px-2 font-bold shrink-0 flex items-center h-6 min-h-6'
+      'badge-btn text-xs px-2 font-bold shrink-0 flex items-center gap-2 h-6 min-h-6'
 
     switch (this.styling) {
       case 'outline':
-        return `${baseClasses} bg-transparent border border-white py-1.5`
-      case 'default':
+        return `${baseClasses} bg-transparent border border-current py-1.5`
+      case 'primary':
         return `${baseClasses} bg-primary py-0.5`
+      case 'gray':
+        return `${baseClasses} bg-gray-100 text-gray-900 py-0.5`
       default:
-        return 'flex items-center'
+        return 'flex items-center gap-2'
     }
   }
 }

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

@@ -8,8 +8,7 @@ import {
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
-import { TranslateModule } from '@ngx-translate/core'
-import { ButtonComponent, TextAreaComponent } from '../../../../../../libs/ui/inputs/src'
+import { TextAreaComponent } from '../../../../../../libs/ui/inputs/src'
 import { MatTooltipModule } from '@angular/material/tooltip'
 
 @Component({
@@ -22,10 +21,8 @@ import { MatTooltipModule } from '@angular/material/tooltip'
     CommonModule,
     FormsModule,
     MatTooltipModule,
-    ButtonComponent,
     TextAreaComponent,
     MarkdownParserComponent,
-    TranslateModule,
   ],
 })
 export class MarkdownEditorComponent {

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

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-metadata-catalog',
@@ -7,7 +7,7 @@ import { TranslateModule } from '@ngx-translate/core'
   styleUrls: ['./metadata-catalog.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [TranslateModule],
+  imports: [TranslateDirective],
 })
 export class MetadataCatalogComponent {
   @Input() sourceLabel: string

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

@@ -22,7 +22,7 @@ import {
   matLocationOnOutline,
 } from '@ng-icons/material-icons/outline'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-metadata-contact',
@@ -30,7 +30,7 @@ import { TranslateModule } from '@ngx-translate/core'
   styleUrls: ['./metadata-contact.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ThumbnailComponent, NgIcon, TranslateModule],
+  imports: [CommonModule, ThumbnailComponent, NgIcon, TranslateDirective],
   viewProviders: [
     provideIcons({
       matOpenInNew,

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

@@ -15,7 +15,7 @@ import {
   ExpandablePanelComponent,
   MaxLinesComponent,
 } from '../../../../../../libs/ui/layout/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BadgeComponent,
   CopyTextButtonComponent,
@@ -28,10 +28,7 @@ import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { GnUiLinkifyDirective } from './linkify.directive'
 
 import { CommonModule } from '@angular/common'
-import {
-  MapContainerComponent,
-  SpatialExtentComponent,
-} from '../../../../../../libs/ui/map/src'
+import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
 
 @Component({
   selector: 'gn-ui-metadata-info',
@@ -41,7 +38,8 @@ import {
   standalone: true,
   imports: [
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     MarkdownParserComponent,
     ExpandablePanelComponent,
     BadgeComponent,
@@ -51,7 +49,6 @@ import {
     CopyTextButtonComponent,
     NgIcon,
     GnUiLinkifyDirective,
-    MapContainerComponent,
     SpatialExtentComponent,
   ],
   viewProviders: [

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

@@ -1,26 +1,24 @@
-<div *ngIf="metadataQualityDisplay" class="metadata-quality">
-  <div
-    class="flex items-center"
-    [class]="min - w - 0"
-    [ngClass]="{ 'text-xs leading-[8px] m-h-[120px]': smaller }"
+<div
+  *ngIf="metadataQualityDisplay"
+  class="flex items-center metadata-quality min-w-0"
+  [ngClass]="{ 'text-xs leading-[8px] m-h-[120px]': smaller }"
+>
+  <gn-ui-progress-bar
+    tabindex="0"
+    [value]="qualityScore"
+    [type]="'light'"
+    class="flex-grow"
+  ></gn-ui-progress-bar>
+  <gn-ui-popover
+    [content]="popoverItems"
+    theme="light-border"
+    [class]="smaller ? 'ml-2' : 'ml-2 mt-1'"
   >
-    <gn-ui-progress-bar
-      tabindex="0"
-      [value]="qualityScore"
-      [type]="'light'"
-      class="flex-grow"
-    ></gn-ui-progress-bar>
-    <gn-ui-popover
-      [content]="popoverItems"
-      theme="light-border"
-      [class]="smaller ? 'ml-2' : 'ml-2 mt-1'"
-    >
-      <ng-icon
-        name="matInfoOutline"
-        class="flex-shrink-0 text-gray-600"
-      ></ng-icon>
-    </gn-ui-popover>
-  </div>
+    <ng-icon
+      name="matInfoOutline"
+      class="flex-shrink-0 text-gray-600"
+    ></ng-icon>
+  </gn-ui-popover>
 </div>
 <ng-template #popoverItems>
   <div class="p-2 py-4">

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

@@ -15,10 +15,9 @@ import {
   ProgressBarComponent,
 } from '../../../../../../libs/ui/widgets/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
-import { NgIcon } from '@ng-icons/core'
+import { TranslateDirective } from '@ngx-translate/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { matInfoOutline } from '@ng-icons/material-icons/outline'
-import { provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 
 type QualityChecks = {
   [key: string]: (metadata: Partial<CatalogRecord>) => boolean
@@ -35,7 +34,7 @@ type QualityChecks = {
     PopoverComponent,
     ProgressBarComponent,
     MetadataQualityItemComponent,
-    TranslateModule,
+    TranslateDirective,
     NgIcon,
   ],
   providers: [

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { matCheck, matWarningAmber } from '@ng-icons/material-icons/baseline'
 
 marker('record.metadata.quality.title.success')
@@ -35,7 +35,7 @@ export interface MetadataQualityItem {
   templateUrl: './metadata-quality-item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [NgIcon, TranslateModule],
+  imports: [NgIcon, TranslatePipe],
   viewProviders: [provideIcons({ matCheck, matWarningAmber })],
 })
 export class MetadataQualityItemComponent implements MetadataQualityItem {

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

@@ -13,7 +13,8 @@ import {
   TextInputComponent,
 } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
+import { MatTooltipModule } from '@angular/material/tooltip'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -32,7 +33,8 @@ const DEFAULT_PARAMS = {
     TextInputComponent,
     DropdownSelectorComponent,
     CopyTextButtonComponent,
-    TranslateModule,
+    TranslateDirective,
+    MatTooltipModule,
   ],
 })
 export class RecordApiFormComponent {

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

@@ -1,11 +1,11 @@
 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 { TranslatePipe } from '@ngx-translate/core'
 import {
   DatasetFeatureAttribute,
   DatasetFeatureCatalog,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
 import {
   CellPopinComponent,
@@ -13,7 +13,7 @@ import {
   TruncatedTextComponent,
 } from '../../../../../../../libs/ui/layout/src'
 import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling'
-import { provideIcons, NgIconComponent } from '@ng-icons/core'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
 import { iconoirList } from '@ng-icons/iconoir'
 
 marker('feature.catalog.attribute.type')
@@ -37,7 +37,7 @@ interface ColumnDefinition {
     ButtonComponent,
     CellPopinComponent,
     CommonModule,
-    TranslateModule,
+    TranslatePipe,
     ExpandablePanelComponent,
     TruncatedTextComponent,
     NgIconComponent,

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

@@ -1,6 +1,10 @@
 import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  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'
@@ -38,7 +42,8 @@ marker(`service.metadata.capabilities.attribution`)
   standalone: true,
   imports: [
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     ButtonComponent,
     TextInputComponent,
     NgIcon,

package/src/libs/ui/elements/src/lib/user-feedback-item/user-feedback-item.component.ts

@@ -14,7 +14,7 @@ import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/us
 import { TimeSincePipe } from './time-since.pipe'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent, TextAreaComponent } from '../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { SpinningLoaderComponent } from '../../../../../../libs/ui/widgets/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { matSendOutline } from '@ng-icons/material-icons/outline'
@@ -29,7 +29,7 @@ import { matSendOutline } from '@ng-icons/material-icons/outline'
     CommonModule,
     TimeSincePipe,
     TextAreaComponent,
-    TranslateModule,
+    TranslatePipe,
     ButtonComponent,
     SpinningLoaderComponent,
     NgIcon,

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

@@ -1,10 +1,14 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user/user.model'
+import { AvatarComponent } from '../avatar/avatar.component'
+import { MatTooltipModule } from '@angular/material/tooltip'
 
 @Component({
   selector: 'gn-ui-user-preview',
   templateUrl: './user-preview.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AvatarComponent, MatTooltipModule],
+  standalone: true,
 })
 export class UserPreviewComponent {
   @Input() user: UserModel

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

@@ -21,7 +21,6 @@ export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/switch-toggle/switch-toggle.component'
 export * from './lib/text-area/text-area.component'
 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

@@ -14,7 +14,7 @@
       [placeholder]="placeholder"
       [formControl]="control"
       [matAutocomplete]="auto"
-      (keyup.enter)="handleEnter(searchInput.value)"
+      (keyup.enter)="handleSearch()"
       [ngClass]="{
         'text-primary': searchActive && enterButton,
         'text-gray-900': !searchActive,
@@ -54,7 +54,7 @@
     aria-label="Trigger search"
     *ngIf="allowSubmit"
     data-test="autocomplete-submit-btn"
-    (buttonClick)="handleClickSearch()"
+    (buttonClick)="handleSearch()"
   >
     <ng-icon name="iconoirSearch"></ng-icon>
   </gn-ui-button>

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

@@ -34,7 +34,7 @@ import {
 } from 'rxjs/operators'
 import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
 import { ButtonComponent } from '../button/button.component'
 import {
   NgIconComponent,
@@ -56,7 +56,7 @@ export type AutocompleteItem = unknown
     PopupAlertComponent,
     MatAutocompleteModule,
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
     ReactiveFormsModule,
     ButtonComponent,
     NgIconComponent,
@@ -183,7 +183,7 @@ export class AutocompleteComponent
       switchMap((value) => this.action(value)),
       tap((suggestions) => {
         // forcing the panel to open if there are suggestions
-        if (suggestions.length > 0) {
+        if (suggestions.length > 0 && !this.isSearchActive) {
           this.triggerRef?.openPanel()
         }
       }),
@@ -296,16 +296,13 @@ export class AutocompleteComponent
     this.inputRef.nativeElement.focus()
   }
 
-  handleEnter(any: string) {
+  handleSearch() {
     if (!this.cancelEnter && this.allowSubmit) {
       this.isSearchActive.emit(true)
       this.searchActive = true
-      this.inputSubmitted.emit(any)
+      this.inputSubmitted.emit(this.inputRef.nativeElement.value)
     }
-  }
-
-  handleClickSearch() {
-    this.inputSubmitted.emit(this.inputRef.nativeElement.value)
+    this.triggerRef?.closePanel()
   }
 
   /**

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

@@ -5,12 +5,15 @@ import {
   Input,
   Output,
 } from '@angular/core'
+import { MatCheckboxModule } from '@angular/material/checkbox'
 
 @Component({
   selector: 'gn-ui-checkbox',
   templateUrl: './checkbox.component.html',
   styleUrls: ['./checkbox.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatCheckboxModule],
 })
 export class CheckboxComponent {
   @Input() type: 'primary' | 'secondary' | 'default' = 'default'

package/src/libs/ui/inputs/src/lib/drag-and-drop-file-input/drag-and-drop-file-input.component.html

@@ -1,7 +1,7 @@
 <div class="flex h-full">
   <ngx-dropzone
     class="flex-1"
-    multiple="false"
+    [multiple]="false"
     (change)="selectFile($event)"
     [accept]="accept"
   >

package/src/libs/ui/inputs/src/lib/drag-and-drop-file-input/drag-and-drop-file-input.component.ts

@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { NgxDropzoneModule } from 'ngx-dropzone'
+import { CommonModule } from '@angular/common'
 
 export const placeholder = 'dropFile'
 marker('dropFile')
@@ -8,6 +10,8 @@ marker('dropFile')
   selector: 'gn-ui-drag-and-drop-file-input',
   templateUrl: './drag-and-drop-file-input.component.html',
   styleUrls: ['./drag-and-drop-file-input.component.css'],
+  standalone: true,
+  imports: [NgxDropzoneModule, CommonModule],
 })
 export class DragAndDropFileInputComponent {
   @Input() placeholder = placeholder

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

@@ -13,6 +13,7 @@ import {
   CdkConnectedOverlay,
   CdkOverlayOrigin,
   ConnectedPosition,
+  OverlayModule,
   ScrollStrategyOptions,
 } from '@angular/cdk/overlay'
 import { take } from 'rxjs/operators'
@@ -21,12 +22,38 @@ import {
   createFuzzyFilter,
   propagateToDocumentOnly,
 } from '../../../../../../libs/util/shared/src'
+import { ButtonComponent } from '../button/button.component'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { FormsModule } from '@angular/forms'
+import { TranslatePipe } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-dropdown-multiselect',
   templateUrl: './dropdown-multiselect.component.html',
   styleUrls: ['./dropdown-multiselect.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    NgIcon,
+    OverlayModule,
+    FormsModule,
+    TranslatePipe,
+  ],
+  providers: [
+    provideIcons({
+      matClose,
+      matExpandMore,
+      matExpandLess,
+    }),
+  ],
+  standalone: true,
 })
 export class DropdownMultiselectComponent {
   @Input() title: string

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

@@ -19,7 +19,7 @@ import {
 import { firstValueFrom } from 'rxjs'
 import { DropdownChoice } from './dropdown-selector.model'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { ButtonComponent } from '../button/button.component'
 import {
   NgIconComponent,
@@ -40,7 +40,7 @@ const DEFAULT_ROW_NUMBERS = 6
     CommonModule,
     ButtonComponent,
     OverlayModule,
-    TranslateModule,
+    TranslatePipe,
     NgIconComponent,
   ],
   providers: [

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

@@ -8,9 +8,8 @@ import {
   Output,
 } from '@angular/core'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { ButtonComponent } from '../button/button.component'
 import { FilesDropDirective } from '../files-drop/files-drop.directive'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { UrlInputComponent } from '../url-input/url-input.component'
 import {
@@ -28,12 +27,12 @@ import { iconoirCloudUpload, iconoirFramePlusIn } from '@ng-icons/iconoir'
   standalone: true,
   imports: [
     CommonModule,
-    ButtonComponent,
     FilesDropDirective,
     MatProgressSpinnerModule,
-    TranslateModule,
     UrlInputComponent,
     NgIconComponent,
+    TranslatePipe,
+    TranslateDirective,
   ],
   providers: [
     provideIcons({

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.component.ts

@@ -7,10 +7,13 @@ import {
   TemplateRef,
 } from '@angular/core'
 import { Choice } from './inline-filter.model'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-inline-filter',
   templateUrl: './inline-filter.component.html',
+  standalone: true,
+  imports: [CommonModule],
 })
 export class InlineFilterComponent {
   @Input() choices: Choice[]

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { DatasetFeatureCatalog } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { FormsModule } from '@angular/forms'
@@ -14,7 +14,13 @@ import { iconoirSearch } from '@ng-icons/iconoir'
   templateUrl: './search-feature-catalog.component.html',
   styleUrls: ['./search-feature-catalog.component.css'],
   standalone: true,
-  imports: [CommonModule, NgIcon, TranslateModule, FormsModule],
+  imports: [
+    CommonModule,
+    NgIcon,
+    TranslateDirective,
+    TranslatePipe,
+    FormsModule,
+  ],
   viewProviders: [
     provideIcons({ iconoirSearch }),
     provideNgIconsConfig({

package/src/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css

@@ -15,7 +15,6 @@ button.disabled {
   stroke-linecap: round;
   position: absolute;
   top: 50%;
-  left: 50%;
   width: 2.5em;
   height: 2.5em;
   transform: translate(-50%, -50%);

package/src/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html

@@ -1,4 +1,4 @@
-<div class="inline-block relative align-middle">
+<div class="inline-block relative align-middle cursor-pointer">
   <gn-ui-button
     [type]="'outline'"
     [disabled]="disabled"
@@ -10,6 +10,9 @@
     }"
   >
     <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>
+    <span *ngIf="displayLabel" class="mx-2 text-[16px] content-center" translate
+      >favorite.starToggle.label</span
+    >
   </gn-ui-button>
   <svg
     #starOverlay
@@ -17,6 +20,7 @@
     width="40px"
     height="40px"
     viewBox="-15 -15 30 30"
+    [style]="displayLabel ? 'left: 16px' : 'left: 50%'"
   >
     <g>
       <path d="M 0,13.229167 V 0" />