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

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

@@ -1,21 +1,24 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { OgcApiEndpoint, WfsEndpoint } from '@camptocamp/ogc-client'
+import { MimeType, OgcApiEndpoint, WfsEndpoint } from '@camptocamp/ogc-client'
 import {
   DatasetServiceDistribution,
   ServiceProtocol,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { mimeTypeToFormat } from '../../../../../../libs/util/shared/src'
 import { BehaviorSubject, combineLatest, filter, map, switchMap } from 'rxjs'
+import {
+  CopyTextButtonComponent,
+  DropdownChoice,
+  DropdownSelectorComponent,
+  TextInputComponent,
+} from '../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
   LIMIT: '-1',
-  FORMAT: 'json',
-}
-
-interface OutputFormats {
-  itemFormats?: any[]
-  outputFormats?: any[]
+  FORMAT: 'application/json',
 }
 
 @Component({
@@ -23,10 +26,18 @@ interface OutputFormats {
   templateUrl: './record-api-form.component.html',
   styleUrls: ['./record-api-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    TextInputComponent,
+    DropdownSelectorComponent,
+    CopyTextButtonComponent,
+    TranslateModule,
+  ],
 })
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {
-    this.outputFormats = [{ value: 'json', label: 'JSON' }]
+    this.outputFormats = [{ value: 'application/json', label: 'JSON' }]
     this.accessServiceProtocol = value ? value.accessServiceProtocol : undefined
     this.apiFeatureType = value ? value.name : undefined
     if (value) {
@@ -46,9 +57,10 @@ export class RecordApiFormComponent {
   apiFeatureType: string
   supportOffset = true
   accessServiceProtocol: ServiceProtocol | undefined
-  outputFormats = [{ value: 'json', label: 'JSON' }]
+  outputFormats: DropdownChoice[] = [
+    { value: 'application/json', label: 'JSON' },
+  ]
   endpoint: WfsEndpoint | OgcApiEndpoint | undefined
-  firstCollection: string | undefined
 
   apiQueryUrl$ = combineLatest([
     this.offset$,
@@ -89,17 +101,12 @@ export class RecordApiFormComponent {
 
   async parseOutputFormats() {
     if (!this.endpoint) return
-    const apiUrl = this.apiBaseUrl.endsWith('?')
-      ? this.apiBaseUrl.slice(0, -1)
-      : this.apiBaseUrl
-    const outputFormats = await this.getOutputFormats(apiUrl)
-
-    const formatsList = outputFormats.itemFormats
-      ? this.mapFormats(outputFormats.itemFormats)
-      : this.mapFormats(outputFormats.outputFormats || [])
+    const outputFormats = (await this.getOutputFormats()).map(
+      this.mimeTypeToFormatName
+    )
 
     this.outputFormats = this.outputFormats
-      .concat(formatsList.filter(Boolean))
+      .concat(outputFormats.filter(Boolean))
       .filter(
         (format, index, self) =>
           index === self.findIndex((t) => t.value === format.value)
@@ -107,24 +114,21 @@ export class RecordApiFormComponent {
       .sort((a, b) => a.label.localeCompare(b.label))
   }
 
-  mapFormats(formats: any[]) {
-    return formats.map((format) => {
-      const normalizedFormat = mimeTypeToFormat(format)
-      return normalizedFormat
-        ? { label: normalizedFormat.toUpperCase(), value: normalizedFormat }
-        : null
-    })
+  mimeTypeToFormatName(mimeType: MimeType): DropdownChoice | null {
+    const formatName = mimeTypeToFormat(mimeType)
+    return formatName
+      ? { label: formatName.toUpperCase(), value: mimeType }
+      : null
   }
 
-  async getOutputFormats(url: string): Promise<OutputFormats> {
-    if (!this.endpoint) return {}
+  async getOutputFormats(): Promise<MimeType[]> {
+    if (!this.endpoint) return []
     if (this.endpoint instanceof WfsEndpoint) {
       this.supportOffset = this.endpoint.supportsStartIndex()
-      return this.endpoint.getServiceInfo() as OutputFormats
+      return this.endpoint.getServiceInfo().outputFormats
     } else {
-      return (await this.endpoint.getCollectionInfo(
-        this.firstCollection
-      )) as OutputFormats
+      return (await this.endpoint.getCollectionInfo(this.apiFeatureType))
+        .itemFormats
     }
   }
 
@@ -135,7 +139,11 @@ export class RecordApiFormComponent {
       await (this.endpoint as WfsEndpoint).isReady()
     } else {
       this.endpoint = new OgcApiEndpoint(this.apiBaseUrl)
-      this.firstCollection = (await this.endpoint.allCollections)[0].name
+      const collections = await this.endpoint.allCollections
+      // if there's only one collection, use this instead of the name given in the link.
+      if (collections.length === 1) {
+        this.apiFeatureType = collections[0].name
+      }
     }
     this.endpoint$.next(this.endpoint)
   }
@@ -151,16 +159,17 @@ export class RecordApiFormComponent {
       outputFormat: format,
       startIndex: offset ? Number(offset) : undefined,
       maxFeatures: limit !== '-1' ? Number(limit) : undefined,
-      limit: limit !== '-1' ? Number(limit) : limit === '-1' ? -1 : undefined,
+      limit: limit !== '-1' ? Number(limit) : -1,
       offset: offset !== '' ? Number(offset) : undefined,
     }
 
     if (this.endpoint instanceof WfsEndpoint) {
+      delete options.limit
       options.maxFeatures = limit !== '-1' ? Number(limit) : undefined
       return this.endpoint.getFeatureUrl(this.apiFeatureType, options)
     } else {
       return await this.endpoint.getCollectionItemsUrl(
-        this.firstCollection,
+        this.apiFeatureType,
         options
       )
     }

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

@@ -17,13 +17,13 @@
     </h4>
     <div>
       <button
-        mat-raised-button
         [matTooltip]="'tooltip.url.open' | translate"
         matTooltipPosition="above"
       >
-        <mat-icon class="material-symbols-outlined align-middle text-secondary"
-          >open_in_new</mat-icon
-        >
+        <ng-icon
+          class="align-middle text-secondary"
+          name="matOpenInNew"
+        ></ng-icon>
       </button>
     </div>
   </div>

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

@@ -1,11 +1,26 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ThumbnailComponent } from '../thumbnail/thumbnail.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'
 
 @Component({
   selector: 'gn-ui-related-record-card',
   templateUrl: './related-record-card.component.html',
   styleUrls: ['./related-record-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ThumbnailComponent,
+    RouterLink,
+    MatTooltipModule,
+    NgIcon,
+    TranslateModule,
+  ],
+  standalone: true,
+  viewProviders: [provideIcons({ matOpenInNew })],
 })
 export class RelatedRecordCardComponent {
   private readonly baseClasses: string

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

@@ -1,45 +1,28 @@
-import { NgModule } from '@angular/core'
 import { CommonModule, NgOptimizedImage } from '@angular/common'
-import { RouterModule } from '@angular/router'
-import { MatIconModule } from '@angular/material/icon'
+import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 import { MatTooltipModule } from '@angular/material/tooltip'
-import { UtilSharedModule } from '../../../../../libs/util/shared/src'
-import { MetadataInfoComponent } from './metadata-info/metadata-info.component'
-import { ContentGhostComponent } from './content-ghost/content-ghost.component'
-import { DownloadItemComponent } from './download-item/download-item.component'
-import { DownloadsListComponent } from './downloads-list/downloads-list.component'
-import { ApiCardComponent } from './api-card/api-card.component'
-import { PopoverComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
-import { TranslateModule } from '@ngx-translate/core'
-import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
-import { MetadataContactComponent } from './metadata-contact/metadata-contact.component'
-import { MetadataCatalogComponent } from './metadata-catalog/metadata-catalog.component'
-import { MetadataQualityComponent } from './metadata-quality/metadata-quality.component'
-import { MetadataQualityItemComponent } from './metadata-quality-item/metadata-quality-item.component'
-import { ErrorComponent } from './error/error.component'
-import { PaginationComponent } from './pagination/pagination.component'
-import { ThumbnailComponent } from './thumbnail/thumbnail.component'
+import { RouterModule } from '@angular/router'
 import {
   BadgeComponent,
   TextInputComponent,
   UiInputsModule,
 } from '../../../../../libs/ui/inputs/src'
-import { FormsModule } from '@angular/forms'
+import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
+import { PopoverComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { UtilSharedModule } from '../../../../../libs/util/shared/src'
+import { provideNgIconsConfig } from '@ng-icons/core'
+import { TranslateModule } from '@ngx-translate/core'
 import { AvatarComponent } from './avatar/avatar.component'
-import { UserPreviewComponent } from './user-preview/user-preview.component'
-import { GnUiLinkifyDirective } from './metadata-info/linkify.directive'
-import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'
-import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
+import { ImageInputComponent } from './image-input/image-input.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
-import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
-import { UserFeedbackItemComponent } from './user-feedback-item/user-feedback-item.component'
+import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
+import { UserPreviewComponent } from './user-preview/user-preview.component'
 
 @NgModule({
   imports: [
     CommonModule,
-    MatIconModule,
     MatTooltipModule,
     UiWidgetsModule,
     UiLayoutModule,
@@ -56,49 +39,20 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     BadgeComponent,
     MaxLinesComponent,
     TextInputComponent,
+    ImageInputComponent,
   ],
-  declarations: [
-    MetadataInfoComponent,
-    ContentGhostComponent,
-    DownloadItemComponent,
-    DownloadsListComponent,
-    ApiCardComponent,
-    RelatedRecordCardComponent,
-    MetadataContactComponent,
-    MetadataCatalogComponent,
-    MetadataQualityComponent,
-    MetadataQualityItemComponent,
-    ErrorComponent,
-    PaginationComponent,
-    AvatarComponent,
-    UserPreviewComponent,
-    GnUiLinkifyDirective,
-    PaginationButtonsComponent,
-    RecordApiFormComponent,
-    UserFeedbackItemComponent,
-    ImageOverlayPreviewComponent,
+  providers: [
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
+  declarations: [AvatarComponent, UserPreviewComponent],
   exports: [
-    MetadataInfoComponent,
-    ContentGhostComponent,
-    DownloadItemComponent,
-    DownloadsListComponent,
-    ApiCardComponent,
-    RelatedRecordCardComponent,
-    MetadataContactComponent,
-    MetadataCatalogComponent,
-    MetadataQualityComponent,
-    MetadataQualityItemComponent,
-    ErrorComponent,
-    PaginationComponent,
     ThumbnailComponent,
     AvatarComponent,
     UserPreviewComponent,
-    PaginationButtonsComponent,
-    RecordApiFormComponent,
     MarkdownParserComponent,
-    UserFeedbackItemComponent,
-    ImageOverlayPreviewComponent,
+    ImageInputComponent,
   ],
 })
 export class UiElementsModule {}

package/src/libs/ui/elements/src/lib/user-feedback-item/time-since.pipe.ts

@@ -1,7 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
-import { formatDistance } from 'date-fns'
-import { de, enUS, es, fr, it, nl, pt, sk } from 'date-fns/locale'
+import { formatDistance } from 'date-fns/formatDistance'
+import { de, enUS, es, fr, it, Locale, nl, pt, sk } from 'date-fns/locale'
 
 @Pipe({
   name: 'timeSince',

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

@@ -57,12 +57,8 @@
           "
           extraClass="!p-[0.5em] text-primary-darker border-primary-darker h-9"
         >
-          <mat-icon
-            class="material-symbols-outlined"
-            *ngIf="!isAddUserFeedbackLoading"
-          >
-            send
-          </mat-icon>
+          <ng-icon *ngIf="!isAddUserFeedbackLoading" name="matSendOutline">
+          </ng-icon>
           <ng-container *ngIf="isAddUserFeedbackLoading">
             <div class="flex justify-center w-full">
               <gn-ui-spinning-loader></gn-ui-spinning-loader>

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

@@ -11,12 +11,34 @@ import {
   UserFeedbackViewModel,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user'
+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 { SpinningLoaderComponent } from '../../../../../../libs/ui/widgets/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matSendOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-user-feedback-item',
   templateUrl: './user-feedback-item.component.html',
   styleUrls: ['./user-feedback-item.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    TimeSincePipe,
+    TextAreaComponent,
+    TranslateModule,
+    ButtonComponent,
+    SpinningLoaderComponent,
+    NgIcon,
+  ],
+  viewProviders: [
+    provideIcons({
+      matSendOutline,
+    }),
+  ],
 })
 export class UserFeedbackItemComponent implements OnInit {
   @Input() userFeedbackParent: UserFeedbackViewModel

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

@@ -1,8 +1,5 @@
 <figure class="text-center">
-  <div
-    class="w-10 h-10 border border-primary rounded-full capitalize"
-    [matTooltip]="userFullName"
-  >
+  <div class="w-10 h-10 rounded-full capitalize" [matTooltip]="userFullName">
     <gn-ui-avatar
       [avatarUrl]="user.profileIcon"
       [avatarPlaceholder]="avatarPlaceholder"

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

@@ -6,6 +6,7 @@ export * from './lib/checkbox/checkbox.component'
 export * from './lib/chips-input/chips-input.component'
 export * from './lib/copy-text-button/copy-text-button.component'
 export * from './lib/date-picker/date-picker.component'
+export * from './lib/date-range-dropdown/date-range-dropdown.component'
 export * from './lib/date-range-picker/date-range-picker.component'
 export * from './lib/drag-and-drop-file-input/drag-and-drop-file-input.component'
 export * from './lib/dropdown-multiselect/dropdown-multiselect.component'
@@ -13,16 +14,14 @@ export * from './lib/dropdown-multiselect/dropdown-multiselect.model'
 export * from './lib/dropdown-selector/dropdown-selector.component'
 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/search-input/search-input.component'
 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/previous-next-buttons/previous-next-buttons.component'
-export * from './lib/switch-toggle/switch-toggle.component'
-export * from './lib/file-input/file-input.component'
-export * from './lib/image-input/image-input.component'
-export * from './lib/url-input/url-input.component'

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

@@ -16,16 +16,9 @@ gn-ui-button {
   --gn-ui-button-padding: 0;
   font-size: 1em;
 }
-mat-icon {
-  width: 100%;
-  height: 100%;
-  font-size: calc(
-    0.9em + 11px
-  ); /* this formula gives a good icon size across different font size values */
-  line-height: 0.8em;
-  display: grid;
-  align-items: center;
-  justify-content: center;
+ng-icon.search {
+  margin-top: 0.6rem;
+  margin-left: 0.6rem;
 }
 gn-ui-button:last-of-type {
   --gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, 0.25em)

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

@@ -3,14 +3,14 @@
     class="absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none"
     *ngIf="!allowSubmit"
   >
-    <mat-icon class="material-symbols-outlined text-primary"> search </mat-icon>
+    <ng-icon name="iconoirSearch" class="text-primary search"></ng-icon>
   </div>
   <input
     #searchInput
     type="text"
     class="gn-ui-text-input"
     [ngClass]="{
-      'px-[--icon-width]': !allowSubmit
+      'px-[--icon-width]': !allowSubmit,
     }"
     [placeholder]="placeholder"
     [formControl]="control"
@@ -29,7 +29,7 @@
     aria-label="Clear"
     (buttonClick)="clear()"
   >
-    <mat-icon class="material-symbols-outlined">close</mat-icon>
+    <ng-icon name="matClose"></ng-icon>
   </gn-ui-button>
   <gn-ui-button
     type="light"
@@ -39,13 +39,13 @@
     data-test="autocomplete-submit-btn"
     (buttonClick)="handleClickSearch()"
   >
-    <mat-icon class="material-symbols-outlined">search</mat-icon>
+    <ng-icon name="iconoirSearch"></ng-icon>
   </gn-ui-button>
 
   <gn-ui-popup-alert
     *ngIf="error"
     class="absolute mt-2 w-full top-[100%] left-0"
-    icon="error_outline"
+    icon="matErrorOutlineOutline"
     position="top"
     type="warning"
   >

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

@@ -32,11 +32,17 @@ import {
   take,
   tap,
 } from 'rxjs/operators'
-import { MatIconModule } from '@angular/material/icon'
 import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
 import { CommonModule } from '@angular/common'
 import { TranslateModule } from '@ngx-translate/core'
 import { ButtonComponent } from '../button/button.component'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirSearch } from '@ng-icons/iconoir'
+import { matClose } from '@ng-icons/material-icons/baseline'
 
 export type AutocompleteItem = unknown
 
@@ -47,13 +53,22 @@ export type AutocompleteItem = unknown
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    MatIconModule,
     PopupAlertComponent,
     MatAutocompleteModule,
     CommonModule,
     TranslateModule,
     ReactiveFormsModule,
     ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSearch,
+      matClose,
+    }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
   ],
 })
 export class AutocompleteComponent
@@ -228,6 +243,7 @@ export class AutocompleteComponent
     }
     if (this.clearOnSelection) {
       this.inputRef.nativeElement.value = ''
+      this.control.setValue('')
     }
   }
 }

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

@@ -18,9 +18,9 @@
       --gn-ui-button-width: 1.4em;
       --gn-ui-button-height: 1.4em;
       --gn-ui-button-rounded: 1.4em;
-      --gn-ui-button-background: white;
+      --gn-ui-button-background: var(--gn-ui-badge-background-color, white);
     "
   >
-    <mat-icon class="material-symbols-outlined leading-[1.1]">close</mat-icon>
+    <ng-icon name="matClose"></ng-icon>
   </gn-ui-button>
 </div>

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

@@ -7,7 +7,12 @@ import {
   Output,
 } from '@angular/core'
 import { ButtonComponent } from '../button/button.component'
-import { MatIconModule } from '@angular/material/icon'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matClose } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-badge',
@@ -15,7 +20,15 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./badge.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ButtonComponent, MatIconModule],
+  imports: [CommonModule, ButtonComponent, NgIconComponent],
+  providers: [
+    provideIcons({
+      matClose,
+    }),
+    provideNgIconsConfig({
+      size: '1.2em',
+    }),
+  ],
 })
 export class BadgeComponent {
   @Input() clickable? = false

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

@@ -1,4 +1,7 @@
-<label class="inline-flex relative items-start cursor-pointer" [title]="title">
+<label
+  class="inline-flex relative items-start cursor-pointer"
+  [title]="title || label"
+>
   <span class="shrink-0">
     <input
       type="checkbox"

package/src/libs/ui/inputs/src/lib/check-toggle/check-toggle.component.ts

@@ -20,9 +20,9 @@ export class CheckToggleComponent {
   @Input() label: string
   @Input() value: boolean
   @Input() color: 'primary' | 'secondary' = 'primary'
-  @Output() toggled = new EventEmitter()
+  @Output() toggled = new EventEmitter<boolean>()
 
-  toggle(event: Event) {
-    this.toggled.emit(event)
+  toggle(value: boolean) {
+    this.toggled.emit(value)
   }
 }

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

@@ -54,7 +54,10 @@ export class ChipsInputComponent implements OnInit, OnDestroy {
     }
   }
 
-  constructor(private http: HttpClient, private translate: TranslateService) {
+  constructor(
+    private http: HttpClient,
+    private translate: TranslateService
+  ) {
     this.rawChange = new Subject<Items[]>()
     this.itemsChange = this.rawChange.pipe(distinctUntilChanged())
     this.subscription = new Subscription()

package/src/libs/ui/inputs/src/lib/copy-text-button/copy-text-button.component.html

@@ -18,15 +18,14 @@
     (click)="copyText($event)"
     [ngClass]="{
       'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-        displayText
+        displayText,
     }"
-    mat-raised-button
     [matTooltip]="tooltipText"
     matTooltipPosition="above"
   >
-    <mat-icon
-      class="material-symbols-outlined pointer-events-none align-middle card-icon"
-      >content_copy</mat-icon
-    >
+    <ng-icon
+      name="matContentCopy"
+      class="pointer-events-none align-middle card-icon"
+    ></ng-icon>
   </button>
 </div>

package/src/libs/ui/inputs/src/lib/copy-text-button/copy-text-button.component.ts

@@ -1,10 +1,17 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matContentCopy } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-copy-text-button',
   templateUrl: './copy-text-button.component.html',
   styleUrls: ['./copy-text-button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatTooltipModule, NgIcon],
+  viewProviders: [provideIcons({ matContentCopy })],
 })
 export class CopyTextButtonComponent {
   @Input() text: string