geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.4e8752d34

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

@@ -29,20 +29,20 @@
           target="_blank"
           class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
           >{{ shownOrganization.website }}
-          <mat-icon
-            class="material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
-            >open_in_new</mat-icon
-          >
+          <ng-icon
+            class="!w-[12px] !h-[12px] opacity-75 shrink-0"
+            name="matOpenInNew"
+          ></ng-icon>
         </a>
       </div>
     </div>
     <div class="grid gap-5 py-3 overflow-hidden">
       <div *ngIf="contacts[0]?.phone">
         <div class="flex">
-          <mat-icon
-            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-            >call_outline</mat-icon
-          >
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+            name="matCallOutline"
+          ></ng-icon>
           <div class="flex flex-col ml-2">
             <p class="text-sm">{{ contacts[0].phone }}</p>
           </div>
@@ -50,11 +50,10 @@
       </div>
       <div *ngIf="contacts[0]?.email">
         <div class="flex">
-          <mat-icon
-            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-          >
-            mail_outline</mat-icon
-          >
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+            name="matMailOutline"
+          ></ng-icon>
           <a
             *ngIf="contacts.length"
             [href]="'mailto:' + contacts[0].email"
@@ -67,10 +66,10 @@
       </div>
       <div *ngIf="contacts[0]?.firstName || contacts[0]?.lastName">
         <div class="flex">
-          <mat-icon
-            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-            >person_outline</mat-icon
-          >
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+            name="matPersonOutline"
+          ></ng-icon>
           <div class="flex flex-col ml-2">
             <p class="text-sm">
               {{ contacts[0]?.firstName || '' }}
@@ -81,11 +80,10 @@
       </div>
       <div *ngIf="contacts[0]?.address">
         <div class="flex">
-          <mat-icon
-            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-          >
-            location_on</mat-icon
-          >
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+            name="matLocationOnOutline"
+          ></ng-icon>
           <div class="flex flex-col ml-2">
             <p *ngFor="let addressPart of address" class="text-sm">
               {{ addressPart }}

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

@@ -10,12 +10,36 @@ import {
   Individual,
   Organization,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import {
+  matMailOutline,
+  matOpenInNew,
+  matPersonOutline,
+} from '@ng-icons/material-icons/baseline'
+import {
+  matCallOutline,
+  matLocationOnOutline,
+} from '@ng-icons/material-icons/outline'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-metadata-contact',
   templateUrl: './metadata-contact.component.html',
   styleUrls: ['./metadata-contact.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ThumbnailComponent, NgIcon, TranslateModule],
+  viewProviders: [
+    provideIcons({
+      matOpenInNew,
+      matCallOutline,
+      matMailOutline,
+      matPersonOutline,
+      matLocationOnOutline,
+    }),
+  ],
 })
 export class MetadataContactComponent {
   @Input() metadata: Partial<CatalogRecord>

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

@@ -1,11 +1,15 @@
 /* eslint-disable @angular-eslint/directive-selector */
-import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core'
+import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core'
 
 @Directive({
   selector: '[gnUiLinkify]',
+  standalone: true,
 })
 export class GnUiLinkifyDirective implements OnInit {
-  constructor(private el: ElementRef, private renderer: Renderer2) {}
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2
+  ) {}
 
   ngOnInit() {
     setTimeout(() => {
@@ -75,6 +79,6 @@ export class GnUiLinkifyDirective implements OnInit {
   }
 
   private createLink(displayValue: string, url: string): string {
-    return `<a href="${url}" target="_blank" class="text-primary cursor-pointer hover:underline">${displayValue} <mat-icon class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75">open_in_new</mat-icon></a>`
+    return `<a href="${url}" target="_blank" class="text-primary cursor-pointer hover:underline">${displayValue} <ng-icon class="!w-[12px] !h-[14px] !text-[14px] opacity-75" name="matOpenInNew"></ng-icon></a>`
   }
 }

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

@@ -8,6 +8,6 @@
   @apply border-b border-gray-300;
 }
 
-:host ::ng-deep gn-ui-copy-text-button button mat-icon {
+:host ::ng-deep gn-ui-copy-text-button button ng-icon {
   transform: scale(0.8);
 }

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

@@ -1,16 +1,30 @@
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
-  <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
+  <gn-ui-content-ghost
+    ghostClass="h-[178px]"
+    [showContent]="fieldReady('abstract')"
+  >
     <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
-      <div>
+      <div class="mb-6">
         <gn-ui-markdown-parser
           [textContent]="metadata.abstract"
         ></gn-ui-markdown-parser>
       </div>
     </gn-ui-max-lines>
+  </gn-ui-content-ghost>
+
+  <p
+    class="mt-6 mb-3 font-medium text-primary text-sm"
+    translate
+    *ngIf="!fieldReady('keywords') || metadata.keywords?.length"
+  >
+    record.metadata.keywords
+  </p>
+
+  <gn-ui-content-ghost
+    ghostClass="h-[31px] w-3/4"
+    [showContent]="fieldReady('keywords')"
+  >
     <div *ngIf="metadata.keywords?.length">
-      <p class="mt-6 mb-3 font-medium text-primary text-sm" translate>
-        record.metadata.keywords
-      </p>
       <div class="sm:pb-4 flex flex-wrap gap-2">
         <gn-ui-badge
           class="inline-block lowercase"
@@ -24,7 +38,15 @@
   </gn-ui-content-ghost>
 </div>
 
-<gn-ui-expandable-panel [title]="'record.metadata.usage' | translate">
+<gn-ui-expandable-panel
+  *ngIf="
+    metadata.licenses ||
+    metadata.legalConstraints ||
+    metadata.securityConstraints ||
+    metadata.otherConstraints
+  "
+  [title]="'record.metadata.usage' | translate"
+>
   <div class="flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900">
     <ng-container *ngFor="let license of licenses">
       <div *ngIf="license.url; else noUrl" class="text-primary">
@@ -34,10 +56,10 @@
           class="cursor-pointer hover:underline transition-all"
         >
           {{ license.text }}
-          <mat-icon
-            class="material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
-            >open_in_new</mat-icon
-          >
+          <ng-icon
+            class="!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
+            name="matOpenInNew"
+          ></ng-icon>
         </a>
       </div>
       <ng-template #noUrl>
@@ -47,19 +69,23 @@
       </ng-template>
     </ng-container>
     <ng-container *ngIf="legalConstraints.length">
-      <gn-ui-markdown-parser
-        *ngFor="let constraint of legalConstraints"
-        [textContent]="constraint"
-      >
-      </gn-ui-markdown-parser>
+      <div class="mb-6">
+        <gn-ui-markdown-parser
+          *ngFor="let constraint of legalConstraints"
+          [textContent]="constraint"
+        >
+        </gn-ui-markdown-parser>
+      </div>
     </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]">
           record.metadata.otherConstraints
         </h5>
-        <gn-ui-markdown-parser [textContent]="constraint">
-        </gn-ui-markdown-parser>
+        <div class="mb-6">
+          <gn-ui-markdown-parser [textContent]="constraint">
+          </gn-ui-markdown-parser>
+        </div>
       </div>
     </ng-container>
 
@@ -71,7 +97,7 @@
 <gn-ui-expandable-panel
   *ngIf="
     metadata.lineage ||
-    metadata.recordUpdated ||
+    metadata.resourceUpdated ||
     metadata.updateFrequency ||
     metadata.status
   "
@@ -107,19 +133,18 @@
           target="_blank"
           class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
           >{{ resourceContact.organization.website }}
-          <mat-icon
-            class="material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
-            >open_in_new</mat-icon
-          >
+          <ng-icon
+            class="!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
+            name="matOpenInNew"
+          ></ng-icon>
         </a>
       </div>
       <div class="mt-4" *ngIf="resourceContact.email">
         <div class="flex">
-          <mat-icon
-            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-          >
-            mail_outline</mat-icon
-          >
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+            name="matMailOutline"
+          ></ng-icon>
           <a
             *ngIf="resourceContact.email"
             [href]="'mailto:' + resourceContact.email"
@@ -135,16 +160,16 @@
   <div
     class="py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700"
   >
-    <div *ngIf="metadata.recordCreated">
+    <div *ngIf="metadata.resourceCreated">
       <p class="text-sm" translate>record.metadata.creation</p>
       <p class="text-primary font-medium mt-1">
-        {{ metadata.recordCreated.toLocaleDateString() }}
+        {{ metadata.resourceCreated.toLocaleDateString() }}
       </p>
     </div>
-    <div *ngIf="metadata.recordPublished">
+    <div *ngIf="metadata.resourcePublished">
       <p class="text-sm" translate>record.metadata.publication</p>
       <p class="text-primary font-medium mt-1">
-        {{ metadata.recordPublished.toLocaleDateString() }}
+        {{ metadata.resourcePublished.toLocaleDateString() }}
       </p>
     </div>
     <div *ngIf="updateFrequency">
@@ -157,13 +182,13 @@
         {{ updateFrequency }}
       </p>
     </div>
-    <div *ngIf="metadata.languages">
+    <div *ngIf="metadata.otherLanguages?.length">
       <p class="text-sm mb-1" translate>record.metadata.languages</p>
       <div class="flex flex-row gap-1 flex-wrap">
         <p
           class="text-primary font-medium"
           translate
-          *ngFor="let language of metadata.languages"
+          *ngFor="let language of metadata.otherLanguages"
         >
           language.{{ language }}
         </p>
@@ -177,7 +202,7 @@
           translate
           [translateParams]="{
             start: temporalExtent.start,
-            end: temporalExtent.end
+            end: temporalExtent.end,
           }"
         >
           record.metadata.temporalExtent.fromDateToDate

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

@@ -10,12 +10,49 @@ import {
   Keyword,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { getTemporalRangeUnion } from '../../../../../../libs/util/shared/src'
+import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
+import {
+  ExpandablePanelComponent,
+  MaxLinesComponent,
+} from '../../../../../../libs/ui/layout/src'
+import { TranslateModule } from '@ngx-translate/core'
+import {
+  BadgeComponent,
+  CopyTextButtonComponent,
+} from '../../../../../../libs/ui/inputs/src'
+import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { CommonModule } from '@angular/common'
+import { matOpenInNew } from '@ng-icons/material-icons/baseline'
+import { matMailOutline } from '@ng-icons/material-icons/outline'
+import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
+import { GnUiLinkifyDirective } from './linkify.directive'
 
 @Component({
   selector: 'gn-ui-metadata-info',
   templateUrl: './metadata-info.component.html',
   styleUrls: ['./metadata-info.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    MarkdownParserComponent,
+    ExpandablePanelComponent,
+    BadgeComponent,
+    ContentGhostComponent,
+    ThumbnailComponent,
+    MaxLinesComponent,
+    CopyTextButtonComponent,
+    NgIcon,
+    GnUiLinkifyDirective,
+  ],
+  viewProviders: [
+    provideIcons({
+      matOpenInNew,
+      matMailOutline,
+    }),
+  ],
 })
 export class MetadataInfoComponent {
   @Input() metadata: Partial<DatasetRecord>
@@ -37,8 +74,13 @@ export class MetadataInfoComponent {
   get legalConstraints() {
     let array = []
     if (this.metadata.legalConstraints?.length) {
+      const licensesTexts = this.metadata.licenses.map(
+        (license) => license.text
+      )
       array = array.concat(
-        this.metadata.legalConstraints.filter((c) => c.text).map((c) => c.text)
+        this.metadata.legalConstraints
+          .filter((c) => c.text && !licensesTexts.includes(c.text))
+          .map((c) => c.text)
       )
     }
     return array

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

@@ -1,22 +1,16 @@
-<div
-  *ngIf="metadataQualityDisplay"
-  class="mb-6 metadata-quality"
-  (mouseenter)="showMenu()"
-  (mouseleave)="hideMenu()"
->
-  <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
-    <gn-ui-progress-bar
-      (focus)="showMenu()"
-      (blur)="hideMenu()"
-      tabindex="0"
-      [value]="qualityScore"
-      type="primary"
-    ></gn-ui-progress-bar>
-  </div>
-  <div
-    class="absolute z-10 bg-white border border-black border-opacity-35 rounded-lg shadow-lg p-5 whitespace-nowrap"
-    [class]="isMenuShown ? 'block' : 'hidden'"
-  >
+<div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
+  <gn-ui-popover [content]="popoverItems" theme="light-border">
+    <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
+      <gn-ui-progress-bar
+        tabindex="0"
+        [value]="qualityScore"
+        type="primary"
+      ></gn-ui-progress-bar>
+    </div>
+  </gn-ui-popover>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
     <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
     <gn-ui-metadata-quality-item
       *ngFor="let e of items"
@@ -24,4 +18,4 @@
       [value]="e.value"
     ></gn-ui-metadata-quality-item>
   </div>
-</div>
+</ng-template>

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

@@ -5,14 +5,31 @@ import {
   OnChanges,
   SimpleChanges,
 } from '@angular/core'
-import { MetadataQualityItem } from '../metadata-quality-item/metadata-quality-item.component'
+import {
+  MetadataQualityItem,
+  MetadataQualityItemComponent,
+} from '../metadata-quality-item/metadata-quality-item.component'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  PopoverComponent,
+  ProgressBarComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-metadata-quality',
   templateUrl: './metadata-quality.component.html',
   styleUrls: ['./metadata-quality.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    PopoverComponent,
+    ProgressBarComponent,
+    MetadataQualityItemComponent,
+    TranslateModule,
+  ],
 })
 export class MetadataQualityComponent implements OnChanges {
   @Input() metadata: Partial<CatalogRecord>
@@ -21,8 +38,6 @@ export class MetadataQualityComponent implements OnChanges {
 
   items: MetadataQualityItem[] = []
 
-  isMenuShown = false
-
   get qualityScore() {
     const qualityScore = this.metadata?.extras?.qualityScore
     return typeof qualityScore === 'number'
@@ -36,14 +51,6 @@ export class MetadataQualityComponent implements OnChanges {
     )
   }
 
-  showMenu() {
-    this.isMenuShown = true
-  }
-
-  hideMenu() {
-    this.isMenuShown = false
-  }
-
   private add(name: string, value: boolean) {
     if (this.metadataQualityDisplay?.[name] !== false) {
       this.items.push({ name, value })

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

@@ -1,4 +1,4 @@
 <div class="ml-4 flex flex-row">
-  <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
+  <ng-icon [name]="icon" class="min-w-fit"></ng-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>

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

@@ -1,5 +1,8 @@
 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 { matCheck, matWarningAmber } from '@ng-icons/material-icons/baseline'
 
 marker('record.metadata.quality.title.success')
 marker('record.metadata.quality.title.failed')
@@ -27,13 +30,16 @@ export interface MetadataQualityItem {
   selector: 'gn-ui-metadata-quality-item',
   templateUrl: './metadata-quality-item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgIcon, TranslateModule],
+  viewProviders: [provideIcons({ matCheck, matWarningAmber })],
 })
 export class MetadataQualityItemComponent implements MetadataQualityItem {
   @Input() name: string
   @Input() value: boolean
 
   get icon() {
-    return this.value ? 'check' : 'warning'
+    return this.value ? 'matCheck' : 'matWarningAmber'
   }
 
   get labelKey() {

package/src/libs/ui/elements/src/lib/notification/notification.component.html

@@ -8,16 +8,13 @@
       'bg-red-500': type === 'error',
       'bg-yellow-500': type === 'warning',
       'bg-green-500': type === 'success',
-      'bg-blue-500': type === 'info'
+      'bg-blue-500': type === 'info',
     }"
-    [ngSwitch]="type"
   >
-    <mat-icon class="material-symbols-outlined !w-[18px] !h-[18px] text-[20px]">
-      <ng-container *ngSwitchCase="'success'">check_circle</ng-container>
-      <ng-container *ngSwitchCase="'info'">info</ng-container>
-      <ng-container *ngSwitchCase="'warning'">warning</ng-container>
-      <ng-container *ngSwitchCase="'error'">error</ng-container>
-    </mat-icon>
+    <ng-icon
+      class="!w-[20px] !h-[16px] text-[24px]"
+      [name]="getIconName(type)"
+    ></ng-icon>
   </div>
   <div
     class="flex flex-col items-start gap-[4px] pt-[3px] grow shrink overflow-hidden"
@@ -25,9 +22,7 @@
     <div class="font-bold text-[16px] text-gray-900">
       {{ title }}
     </div>
-    <div class="text-[14px] text-gray-800">
-      {{ text }}
-    </div>
+    <div class="text-[14px] text-gray-800 whitespace-pre-wrap">{{ text }}</div>
     <a
       href
       *ngIf="closeMessage"
@@ -45,8 +40,9 @@
     [style.--gn-ui-button-width]="'21px'"
     [style.--gn-ui-button-height]="'21px'"
   >
-    <mat-icon class="material-symbols-outlined text-[22px] !w-[21px] !h-[21px]"
-      >close</mat-icon
-    >
+    <ng-icon
+      class="text-[22px] !w-[21px] !h-[21px]"
+      name="matCloseOutline"
+    ></ng-icon>
   </gn-ui-button>
 </div>

package/src/libs/ui/elements/src/lib/notification/notification.component.ts

@@ -6,13 +6,29 @@ import {
   Output,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { MatIconModule } from '@angular/material/icon'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matCheckCircleOutline } from '@ng-icons/material-icons/baseline'
+import {
+  matErrorOutlineOutline,
+  matWarningAmberOutline,
+  matInfoOutline,
+  matCloseOutline,
+} from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-notification',
   standalone: true,
-  imports: [CommonModule, MatIconModule, ButtonComponent],
+  imports: [CommonModule, ButtonComponent, NgIconComponent],
+  providers: [
+    provideIcons({
+      matCheckCircleOutline,
+      matErrorOutlineOutline,
+      matWarningAmberOutline,
+      matInfoOutline,
+      matCloseOutline,
+    }),
+  ],
   templateUrl: './notification.component.html',
   styleUrls: ['./notification.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -28,4 +44,19 @@ export class NotificationComponent {
     event?.preventDefault()
     this.notificationClose.emit()
   }
+
+  getIconName(type: string): string {
+    switch (type) {
+      case 'success':
+        return 'matCheckCircleOutline'
+      case 'info':
+        return 'matInfoOutline'
+      case 'warning':
+        return 'matWarningAmberOutline'
+      case 'error':
+        return 'matErrorOutlineOutline'
+      default:
+        return ''
+    }
+  }
 }

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

@@ -13,10 +13,10 @@ host ::ng-deep gn-ui-copy-text-button button:hover {
   background-color: var(--color-secondary) !important;
 }
 
-:host ::ng-deep gn-ui-copy-text-button button mat-icon {
+:host ::ng-deep gn-ui-copy-text-button button ng-icon {
   color: white !important;
   opacity: 1 !important;
 }
-:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon {
+:host ::ng-deep gn-ui-copy-text-button button:hover ng-icon {
   color: lightgrey !important;
 }

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

@@ -21,7 +21,7 @@
             class="mr-2 w-20"
             (valueChange)="setLimit($event)"
             [value]="displayLimit$ | async"
-            hint=""
+            placeholder=""
           >
           </gn-ui-text-input>
           <div class="flex items-center">
@@ -47,7 +47,7 @@
             [value]="offset$ | async"
             [disabled]="!supportOffset"
             (valueChange)="supportOffset ? setOffset($event) : null"
-            hint=""
+            placeholder=""
           >
           </gn-ui-text-input>
           <div