geonetwork-ui 2.6.0-dev.186d57931 → 2.6.0-dev.25158f859

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

@@ -25,7 +25,7 @@
     [showContent]="fieldReady('keywords')"
   >
     <div *ngIf="metadata.keywords?.length">
-      <div class="sm:pb-4 flex flex-wrap gap-2">
+      <div class="metadata-info-keywords sm:pb-4 flex flex-wrap gap-2">
         <gn-ui-badge
           class="inline-block lowercase"
           (click)="onKeywordClick(keyword)"
@@ -46,6 +46,7 @@
     metadata.otherConstraints
   "
   [title]="'record.metadata.usage' | translate"
+  data-test="usage-panel"
 >
   <div class="flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900">
     <ng-container *ngFor="let license of licenses">
@@ -79,9 +80,12 @@
     </ng-container>
     <ng-container *ngIf="otherConstraints.length">
       <div gnUiLinkify *ngFor="let constraint of otherConstraints">
-        <h5 translate class="font-medium text-black text-sm mb-[2px] mt-[16px]">
+        <span
+          translate
+          class="font-medium text-black text-sm mb-[2px] mt-[16px]"
+        >
           record.metadata.otherConstraints
-        </h5>
+        </span>
         <div class="mb-6">
           <gn-ui-markdown-parser [textContent]="constraint">
           </gn-ui-markdown-parser>
@@ -102,6 +106,7 @@
     (metadata.kind === 'dataset' && metadata.status)
   "
   [title]="'record.metadata.details' | translate"
+  data-test="details-panel"
 >
   <div *ngIf="metadata.lineage" class="text-gray-900 flex flex-col mt-4 gap-2">
     <p class="whitespace-pre-line break-words text-gray-900" gnUiLinkify>
@@ -228,6 +233,7 @@
 <gn-ui-expandable-panel
   *ngIf="metadata.kind !== 'dataset' && metadata.spatialExtents"
   [title]="'service.metadata.spatialExtent' | translate"
+  data-test="spatial-extent-panel"
 >
   <gn-ui-spatial-extent
     class="flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6"
@@ -237,6 +243,7 @@
 <gn-ui-expandable-panel
   *ngIf="metadata.landingPage"
   [title]="'service.metadata.other' | translate"
+  data-test="other-panel"
 >
   <div class="flex flex-col gap-4 mr-4 py-5 rounded text-gray-700">
     <div *ngIf="metadata.recordUpdated">
@@ -276,6 +283,7 @@
       <p class="text-sm mb-1" translate>record.metadata.topics</p>
       <div class="sm:pb-4 sm:pr-16">
         <gn-ui-badge
+          [clickable]="false"
           class="inline-block mr-2 mb-2 lowercase"
           *ngFor="let topic of metadata.topics"
           >{{ topic }}</gn-ui-badge

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

@@ -1,9 +1,8 @@
 <div *ngIf="metadataQualityDisplay" class="metadata-quality">
   <div
     class="flex items-center"
-    [class]="
-      smaller ? 'leading-[8px] min-w-[120px] m-h-[120px]' : 'min-w-[200px]'
-    "
+    [class]="min - w - 0"
+    [ngClass]="{ 'text-xs leading-[8px] m-h-[120px]': smaller }"
   >
     <gn-ui-progress-bar
       tabindex="0"

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

@@ -0,0 +1,48 @@
+<div class="flex flex-col gap-2 py-5 px-5 h-[562px] overflow-y-auto">
+  <div
+    *ngFor="let featureType of filteredFeatureCatalog?.featureTypes"
+    class="rounded shadow bg-white"
+  >
+    <gn-ui-expandable-panel
+      [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
+        class="grid gap-0"
+        [style.grid-template-columns]="gridTemplateColumns"
+        data-cy="feature-type-content"
+      >
+        <div
+          class="py-1 px-2 text-sm font-bold text-left border-t"
+          [class.border-l]="i > 0"
+          [class.border-gray-300]="i > 0"
+          *ngFor="let col of columns; let i = index"
+          data-test="column-label"
+        >
+          {{ col.label | translate }}
+        </div>
+        <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 columns; let i = index"
+          >
+            <gn-ui-truncated-text
+              extraClass="py-3 px-2"
+              [text]="row[col.key]"
+            ></gn-ui-truncated-text>
+          </div>
+        </ng-container>
+      </div>
+    </gn-ui-expandable-panel>
+  </div>
+</div>

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

@@ -0,0 +1,52 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { DatasetFeatureCatalog } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  ExpandablePanelComponent,
+  TruncatedTextComponent,
+} from '../../../../../../../libs/ui/layout/src'
+
+@Component({
+  selector: 'gn-ui-feature-catalog-list',
+  templateUrl: './feature-catalog-list.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    ExpandablePanelComponent,
+    TruncatedTextComponent,
+  ],
+})
+export class FeatureCatalogListComponent implements OnInit {
+  @Input() filteredFeatureCatalog: DatasetFeatureCatalog
+
+  columns = [
+    {
+      key: 'type',
+      label: 'feature.catalog.attribute.type',
+      width: '19%',
+    },
+    {
+      key: 'name',
+      label: 'feature.catalog.attribute.name',
+      width: '32%',
+    },
+    {
+      key: 'code',
+      label: 'feature.catalog.attribute.code',
+      width: '24%',
+    },
+    {
+      key: 'title',
+      label: 'feature.catalog.attribute.description',
+      width: '25%',
+    },
+  ]
+
+  gridTemplateColumns = ''
+
+  ngOnInit(): void {
+    this.gridTemplateColumns = this.columns.map((col) => col.width).join(' ')
+  }
+}

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

@@ -1,5 +1,5 @@
 <div style="height: 652px" id="preview" *ngIf="apiLinks.length > 0">
-  <div class="bg-primary-opacity-10 overflow-visible" style="height: 512px">
+  <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>
@@ -16,17 +16,31 @@
             <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"
+                  extraClass="h-12 w-12 border-0 absolute right-1 top-1 bg-white"
                   (buttonClick)="searchLayers()"
                 >
                   <ng-icon name="iconoirSearch"></ng-icon>

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

@@ -16,6 +16,7 @@ import {
   WmsLayerFull,
   WmtsLayer,
 } from '@camptocamp/ogc-client'
+import { matClose } from '@ng-icons/material-icons/baseline'
 
 marker(`service.metadata.search`)
 marker(`service.metadata.capabilities.title`)
@@ -48,6 +49,7 @@ marker(`service.metadata.capabilities.attribution`)
     provideIcons({
       iconoirSearch,
       matInfoOutline,
+      matClose,
     }),
   ],
   templateUrl: './service-capabilities.component.html',
@@ -104,6 +106,12 @@ export class ServiceCapabilitiesComponent implements OnInit {
     }
   }
 
+  clearSearch() {
+    this.searchActive = false
+    this.searchQuery = ''
+    this.filteredLayers = this.availableLayers
+  }
+
   async loadLayers() {
     if (
       this.apiLinks.length > 0 &&
@@ -176,7 +184,7 @@ export class ServiceCapabilitiesComponent implements OnInit {
   }
 
   getExtraClass(layerItem) {
-    return layerItem.title === this.selectedLayer?.title
+    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,14 +15,15 @@ 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'
-
 @NgModule({
   imports: [
     CommonModule,
@@ -46,6 +47,8 @@ import { ServiceCapabilitiesComponent } from './service-capabilities/service-cap
     ApplicationBannerComponent,
     InternalLinkCardComponent,
     ServiceCapabilitiesComponent,
+    KindBadgeComponent,
+    GeoDataBadgeComponent,
   ],
   providers: [
     provideNgIconsConfig({
@@ -62,6 +65,8 @@ import { ServiceCapabilitiesComponent } from './service-capabilities/service-cap
     ApplicationBannerComponent,
     InternalLinkCardComponent,
     ServiceCapabilitiesComponent,
+    KindBadgeComponent,
+    GeoDataBadgeComponent,
   ],
 })
 export class UiElementsModule {}

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

@@ -15,6 +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/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'
@@ -23,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/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

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

@@ -0,0 +1,23 @@
+<ul class="flex flex-wrap list-none gap-2">
+  <li *ngFor="let choice of choices">
+    <label
+      class=""
+      [ngClass]="{
+        selected: isSelected(choice),
+      }"
+    >
+      <input
+        class="hidden"
+        type="checkbox"
+        #checkBox
+        [checked]="isSelected(choice)"
+        (change)="select(choice, checkBox.checked)"
+        [attr.data-cy]="'inlineFilter-' + choice.value"
+      />
+      <ng-container
+        *ngTemplateOutlet="itemTemplate; context: { $implicit: choice }"
+      >
+      </ng-container>
+    </label>
+  </li>
+</ul>

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

@@ -0,0 +1,44 @@
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import { Choice } from './inline-filter.model'
+
+@Component({
+  selector: 'gn-ui-inline-filter',
+  templateUrl: './inline-filter.component.html',
+})
+export class InlineFilterComponent {
+  @Input() choices: Choice[]
+  @Input() selected: unknown[] = []
+
+  @Output() selectValues = new EventEmitter<unknown[]>()
+
+  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>
+
+  isSelected(choice: Choice) {
+    return (
+      this.selected.indexOf(choice.value) > -1 ||
+      (this.selected.length === 0 && choice.value === 'all')
+    )
+  }
+
+  select(choice: Choice, selected: boolean) {
+    if (choice.value === 'all' && selected) {
+      this.selected = [choice.value]
+    } else {
+      this.selected = selected
+        ? [...this.selected.filter((v) => v !== choice.value), choice.value]
+        : this.selected.filter((v) => v !== choice.value)
+
+      // If any value selected, unselect all
+      this.selected = this.selected.filter((v) => v !== 'all')
+    }
+
+    this.selectValues.emit(this.selected)
+  }
+}

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

@@ -0,0 +1,5 @@
+export interface Choice {
+  value: unknown
+  label: string
+  icon?: string
+}

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

@@ -0,0 +1,43 @@
+<div
+  class="flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300"
+>
+  <div
+    class="relative shrink-0"
+    *ngIf="featureCatalog?.featureTypes?.length > 1"
+  >
+    <input
+      type="text"
+      [placeholder]="'search.filter.into.feature.catalog' | translate"
+      class="w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md"
+      [(ngModel)]="searchTerm"
+      (ngModelChange)="filterAction(searchTerm)"
+    />
+    <ng-icon
+      class="absolute right-2.5 top-1 w-6 h-6 text-black"
+      name="iconoirSearch"
+    ></ng-icon>
+  </div>
+  <div class="text-sm px-1 ml-auto hidden sm:inline">
+    <ng-container *ngIf="featureCatalog?.featureTypes?.length > 1">
+      <span
+        class="text-sm font-medium text-gray-900"
+        data-cy="total-objects-label"
+        translate
+        >record.feature.catalog.number.total.object</span
+      ><span
+        class="text-sm font-bold px-1 text-gray-900"
+        data-cy="total-objects"
+        >{{ totalObjects }}</span
+      >
+      <span class="px-1.5">|</span>
+    </ng-container>
+    <span
+      class="text-sm font-medium px-1 text-gray-900"
+      data-cy="total-attributes-label"
+      translate
+      >record.feature.catalog.number.total.attribute</span
+    ><span class="text-sm font-bold text-gray-900" data-cy="total-attributes">{{
+      totalAttributes
+    }}</span>
+  </div>
+</div>

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

@@ -0,0 +1,77 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } 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'
+import { of } from 'rxjs'
+import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'
+import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { iconoirSearch } from '@ng-icons/iconoir'
+
+@Component({
+  selector: 'gn-ui-search-feature-catalog',
+  templateUrl: './search-feature-catalog.component.html',
+  styleUrls: ['./search-feature-catalog.component.css'],
+  standalone: true,
+  imports: [CommonModule, NgIcon, TranslateModule, FormsModule],
+  viewProviders: [
+    provideIcons({ iconoirSearch }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
+  ],
+})
+export class SearchFeatureCatalogComponent {
+  private _featureCatalog: DatasetFeatureCatalog
+  searchTerm: any
+  @Input() set featureCatalog(value: DatasetFeatureCatalog) {
+    this._featureCatalog = value
+    this.filteredFeatureCatalog = value
+  }
+  get featureCatalog(): DatasetFeatureCatalog {
+    return this._featureCatalog
+  }
+
+  @Output() filteredFeatureCatalogChange =
+    new EventEmitter<DatasetFeatureCatalog>()
+  filteredFeatureCatalog: DatasetFeatureCatalog
+
+  filterAction = (searchTerm: string): void => {
+    of(searchTerm)
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        tap(() => {
+          const filtered = (this.featureCatalog?.featureTypes || []).filter(
+            (featureType) => {
+              const fuzzyFilter = createFuzzyFilter(searchTerm)
+              return (
+                fuzzyFilter(featureType.name) ||
+                (featureType.definition && fuzzyFilter(featureType.definition))
+              )
+            }
+          )
+          this.filteredFeatureCatalog = {
+            ...this.featureCatalog,
+            featureTypes: filtered,
+          }
+          this.filteredFeatureCatalogChange.emit(this.filteredFeatureCatalog)
+        })
+      )
+      .subscribe()
+  }
+
+  get totalObjects(): number {
+    return this.filteredFeatureCatalog?.featureTypes?.length || 0
+  }
+
+  get totalAttributes(): number {
+    return (
+      this.filteredFeatureCatalog?.featureTypes?.reduce(
+        (total, featureType) => total + (featureType.attributes?.length || 0),
+        0
+      ) || 0
+    )
+  }
+}

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

@@ -1,13 +1,12 @@
-<div class="inline-block relative align-middle" style="line-height: 0.7em">
+<div class="inline-block relative align-middle">
   <gn-ui-button
     [type]="'outline'"
-    class="-m-[8px] p-[8px]"
+    [disabled]="disabled"
     (buttonClick)="toggle($event)"
     [ngClass]="{
       enabled: toggled,
-      disabled: !toggled,
+      disabled: !toggled || disabled,
       'transition hover:scale-125 will-change-transform': !disabled,
-      'cursor-default': disabled,
     }"
   >
     <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>