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

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

@@ -1,46 +1,48 @@
+import { OverlayModule } from '@angular/cdk/overlay'
+import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MatAutocompleteModule } from '@angular/material/autocomplete'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatNativeDateModule } from '@angular/material/core'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { UtilSharedModule } from '../../../../../libs/util/shared/src'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
 import { TranslateModule } from '@ngx-translate/core'
 import { TagInputModule } from 'ngx-chips'
 import { NgxDropzoneModule } from 'ngx-dropzone'
-import { ButtonComponent } from './button/button.component'
 import { BadgeComponent } from './badge/badge.component'
+import { ButtonComponent } from './button/button.component'
+import { CheckToggleComponent } from './check-toggle/check-toggle.component'
+import { CheckboxComponent } from './checkbox/checkbox.component'
 import { ChipsInputComponent } from './chips-input/chips-input.component'
+import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
 import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
+import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
 import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
+import { EditableLabelDirective } from './editable-label/editable-label.directive'
 import { TextAreaComponent } from './text-area/text-area.component'
-import { MatAutocompleteModule } from '@angular/material/autocomplete'
-import { MatIconModule } from '@angular/material/icon'
-import { NavigationButtonComponent } from './navigation-button/navigation-button.component'
-import { StarToggleComponent } from './star-toggle/star-toggle.component'
-import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { OverlayModule } from '@angular/cdk/overlay'
-import { MatCheckboxModule } from '@angular/material/checkbox'
 import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
-import { CheckToggleComponent } from './check-toggle/check-toggle.component'
-import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.component'
-import { MatTooltipModule } from '@angular/material/tooltip'
-import { CommonModule } from '@angular/common'
-import { CheckboxComponent } from './checkbox/checkbox.component'
-import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
-import { MatFormFieldModule } from '@angular/material/form-field'
-import { MatInputModule } from '@angular/material/input'
-import { MatDatepickerModule } from '@angular/material/datepicker'
-import { MatNativeDateModule } from '@angular/material/core'
-import { EditableLabelDirective } from './editable-label/editable-label.directive'
-import { ImageInputComponent } from './image-input/image-input.component'
 
 @NgModule({
   declarations: [
     DragAndDropFileInputComponent,
     ChipsInputComponent,
-    NavigationButtonComponent,
-    StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
-    CopyTextButtonComponent,
     CheckboxComponent,
   ],
   imports: [
@@ -52,7 +54,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
     TagInputModule,
     UtilSharedModule,
     MatAutocompleteModule,
-    MatIconModule,
     UiWidgetsModule,
     OverlayModule,
     MatCheckboxModule,
@@ -64,11 +65,21 @@ import { ImageInputComponent } from './image-input/image-input.component'
     EditableLabelDirective,
     TextAreaComponent,
     ButtonComponent,
-    ImageInputComponent,
     DropdownSelectorComponent,
     DateRangePickerComponent,
     CheckToggleComponent,
     BadgeComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      matClose,
+      matExpandMore,
+      matExpandLess,
+    }),
+    provideNgIconsConfig({
+      size: '0.9em',
+    }),
   ],
   exports: [
     DropdownSelectorComponent,
@@ -76,16 +87,12 @@ import { ImageInputComponent } from './image-input/image-input.component'
     DragAndDropFileInputComponent,
     TextAreaComponent,
     ChipsInputComponent,
-    NavigationButtonComponent,
-    StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
     CheckToggleComponent,
-    CopyTextButtonComponent,
     CheckboxComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
-    ImageInputComponent,
     BadgeComponent,
   ],
 })

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.css

@@ -3,7 +3,7 @@
   --gn-ui-button-width: 32px;
   --gn-ui-button-padding: 0;
 
-  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6em) - 6px);
+  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6rem) - 6px);
   --2x-side-padding: calc(var(--side-padding) * 2);
   --text-padding: calc(var(--side-padding) + 40px);
 }

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.html

@@ -4,38 +4,29 @@
     class="gn-ui-text-input px-[var(--text-padding)]"
     [ngClass]="extraClass"
     type="url"
-    [value]="value"
-    (input)="handleInput()"
-    (keydown.enter)="handleChange(input)"
+    [value]="inputValue"
+    (input)="handleInput($event)"
+    (keydown.enter)="handleUpload(input)"
     [placeholder]="placeholder"
     [attr.aria-label]="placeholder"
     [disabled]="disabled"
   />
   <div
     class="absolute inset-y-[var(--side-padding)] left-[var(--2x-side-padding)] grid justify-center items-center pointer-events-none"
-    [ngClass]='{
-      "text-primary": !disabled,
-      "text-primary-lightest": disabled,
-    }'
+    [ngClass]="{
+      'text-primary': !disabled,
+      'text-primary-lightest': disabled,
+    }"
   >
-    <mat-icon
-      class="material-symbols-outlined h-[24px] !w-[26px] text-[28px] leading-[24px]"
-    >
-      link
-    </mat-icon>
+    <ng-icon name="iconoirLink"></ng-icon>
   </div>
   <gn-ui-button
+    *ngIf="showUploadButton"
     extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
     type="primary"
-    [disabled]="
-      disabled ||
-      input.value === '' ||
-      (urlCanParse && !URLcanParse(input.value))
-    "
-    (buttonClick)="handleChange(input)"
+    [disabled]="disabled || input.value === '' || !isValidUrl(input.value)"
+    (buttonClick)="handleUpload(input)"
   >
-    <mat-icon class="material-symbols-outlined text-[20px] leading-[24px]">
-      arrow_upward
-    </mat-icon>
+    <ng-icon name="iconoirArrowUp"> </ng-icon>
   </gn-ui-button>
 </span>

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

@@ -1,51 +1,80 @@
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
-  OnChanges,
   Output,
-  SimpleChanges,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../button/button.component'
-import { MatIconModule } from '@angular/material/icon'
-import { filter } from 'rxjs/operators'
-import { Subject } from 'rxjs'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirArrowUp, iconoirLink } from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-url-input',
   templateUrl: './url-input.component.html',
   styleUrls: ['./url-input.component.css'],
   standalone: true,
-  imports: [CommonModule, ButtonComponent, MatIconModule],
+  imports: [CommonModule, ButtonComponent, NgIconComponent],
+  providers: [
+    provideIcons({ iconoirLink, iconoirArrowUp }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class UrlInputComponent implements OnChanges {
-  @Input() value = ''
+export class UrlInputComponent {
+  @Input() set value(v: string) {
+    // we're making sure to only update the input if the URL representation of it has changed; otherwise we keep it identical
+    // to avoid glitches when starting to write a URL and having some characters added/replaced automatically
+    if (!v || !this.isValidUrl(v)) return
+    if (
+      this.isValidUrl(this.inputValue) &&
+      new URL(v).toString() === new URL(this.inputValue).toString()
+    )
+      return
+    this.inputValue = v
+    this.cd.markForCheck()
+  }
   @Input() extraClass = ''
   @Input() placeholder = 'https://'
   @Input() disabled: boolean
-  @Input() urlCanParse?: boolean
-  rawChange = new Subject<string>()
-  @Output() valueChange = this.rawChange.pipe(filter((v) => !!v))
+  @Input() showUploadButton = true
+
+  /**
+   * This will emit null if the field is emptied
+   */
+  @Output() valueChange = new EventEmitter<string | null>()
+  @Output() uploadClick = new EventEmitter<string>()
+
+  inputValue = ''
 
   constructor(private cd: ChangeDetectorRef) {}
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.value) {
-      console.log('changes.value', changes.value)
+  handleInput(event: Event) {
+    const value = (event.target as HTMLInputElement).value
+    this.inputValue = value
+    if (!value || !this.isValidUrl(value)) {
+      this.valueChange.next(null)
+      return
     }
-  }
-
-  handleInput() {
     this.cd.markForCheck()
+    this.valueChange.next(value)
   }
 
-  handleChange(element: HTMLInputElement) {
+  handleUpload(element: HTMLInputElement) {
     const value = element.value
-    this.rawChange.next(value)
+    if (!value || !this.isValidUrl(value)) return
+    this.uploadClick.next(value)
   }
 
-  URLcanParse(url: string): boolean {
+  isValidUrl(url: string): boolean {
     try {
       new URL(url)
       return true

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

@@ -10,4 +10,9 @@ export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/block-list/block-list.component'
 export * from './lib/sortable-list/sortable-list.component'
 export * from './lib/modal-dialog/modal-dialog.component'
+export * from './lib/pagination/pagination.component'
+export * from './lib/pagination-buttons/pagination-buttons.component'
+export * from './lib/pagination-dots/pagination-dots.component'
+export * from './lib/previous-next-buttons/previous-next-buttons.component'
+export * from './lib/paginable.interface'
 export * from './lib/ui-layout.module'

package/src/libs/ui/layout/src/lib/block-list/block-list.component.css

@@ -5,19 +5,3 @@
 :host {
   position: relative;
 }
-
-.list-page-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 6px;
-  position: relative;
-}
-
-.list-page-dot:after {
-  content: '';
-  position: absolute;
-  left: -7px;
-  top: -7px;
-  width: 20px;
-  height: 20px;
-}

package/src/libs/ui/layout/src/lib/block-list/block-list.component.html

@@ -6,15 +6,7 @@
 >
   <ng-content></ng-content>
 </div>
-<div
-  *ngIf="pagesCount > 1"
-  class="absolute flex flex-row justify-center gap-[14px] p-1"
-  [ngClass]="paginationContainerClass"
->
-  <button
-    *ngFor="let page of pages"
-    class="list-page-dot"
-    (click)="goToPage(page)"
-    [ngClass]="currentPage === page ? 'bg-primary' : 'bg-gray-400'"
-  ></button>
-</div>
+<gn-ui-pagination-dots
+  [containerClass]="'absolute ' + paginationContainerClass"
+  [listComponent]="this"
+></gn-ui-pagination-dots>

package/src/libs/ui/layout/src/lib/block-list/block-list.component.ts

@@ -10,6 +10,8 @@ import {
   ViewChild,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
+import { Paginable } from '../paginable.interface'
+import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.component'
 
 @Component({
   selector: 'gn-ui-block-list',
@@ -17,9 +19,9 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./block-list.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, PaginationDotsComponent],
 })
-export class BlockListComponent implements AfterViewInit {
+export class BlockListComponent implements AfterViewInit, Paginable {
   @Input() pageSize = 5
   @Input() containerClass = ''
   @Input() paginationContainerClass = 'w-full bottom-0 top-auto'
@@ -30,20 +32,23 @@ export class BlockListComponent implements AfterViewInit {
 
   protected minHeight = 0
 
-  protected currentPage = 0
+  protected currentPage_ = 0
   protected get pages() {
     return new Array(this.pagesCount).fill(0).map((_, i) => i)
   }
 
   get isFirstPage() {
-    return this.currentPage === 0
+    return this.currentPage_ === 0
   }
   get isLastPage() {
-    return this.currentPage === this.pagesCount - 1
+    return this.currentPage_ === this.pagesCount - 1
   }
   get pagesCount() {
     return this.blocks ? Math.ceil(this.blocks.length / this.pageSize) : 1
   }
+  get currentPage() {
+    return this.currentPage_ + 1 // this is 1-based
+  }
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
@@ -59,25 +64,29 @@ export class BlockListComponent implements AfterViewInit {
   protected refreshBlocksVisibility = () => {
     this.blocks.forEach((block, index) => {
       block.nativeElement.style.display =
-        index >= this.currentPage * this.pageSize &&
-        index < (this.currentPage + 1) * this.pageSize
+        index >= this.currentPage_ * this.pageSize &&
+        index < (this.currentPage_ + 1) * this.pageSize
           ? null
           : 'none'
     })
   }
 
-  public goToPage(index: number) {
-    this.currentPage = Math.max(Math.min(index, this.pagesCount - 1), 0)
+  // pageIndex is 1-based
+  public goToPage(pageIndex: number) {
+    this.currentPage_ = Math.max(
+      Math.min(pageIndex - 1, this.pagesCount - 1),
+      0
+    )
     this.changeDetector.detectChanges()
     this.refreshBlocksVisibility()
   }
 
-  public previousPage() {
+  public goToPrevPage() {
     if (this.isFirstPage) return
     this.goToPage(this.currentPage - 1)
   }
 
-  public nextPage() {
+  public goToNextPage() {
     if (this.isLastPage) return
     this.goToPage(this.currentPage + 1)
   }

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -6,19 +6,3 @@
   position: relative;
   display: block;
 }
-
-.carousel-step-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 6px;
-  position: relative;
-}
-
-.carousel-step-dot:after {
-  content: '';
-  position: absolute;
-  left: -7px;
-  top: -7px;
-  width: 20px;
-  height: 20px;
-}

package/src/libs/ui/layout/src/lib/carousel/carousel.component.html

@@ -3,15 +3,7 @@
     <ng-content></ng-content>
   </div>
 </div>
-<div
-  *ngIf="steps.length > 1"
-  class="absolute flex flex-row justify-center gap-[14px] p-1"
-  [ngClass]="stepsContainerClass"
->
-  <button
-    *ngFor="let step of steps; let i = index"
-    class="carousel-step-dot"
-    (click)="scrollToStep(i)"
-    [ngClass]="currentStep === i ? 'bg-primary' : 'bg-gray-400'"
-  ></button>
-</div>
+<gn-ui-pagination-dots
+  [containerClass]="'absolute ' + stepsContainerClass"
+  [listComponent]="this"
+></gn-ui-pagination-dots>

package/src/libs/ui/layout/src/lib/carousel/carousel.component.ts

@@ -11,6 +11,8 @@ import {
 } from '@angular/core'
 import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel'
 import { CommonModule } from '@angular/common'
+import { Paginable } from '../paginable.interface'
+import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.component'
 
 @Component({
   selector: 'gn-ui-carousel',
@@ -18,9 +20,9 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./carousel.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, PaginationDotsComponent],
 })
-export class CarouselComponent implements AfterViewInit {
+export class CarouselComponent implements AfterViewInit, Paginable {
   @ViewChild('carouselOverflowContainer') carouselOverflowContainer: ElementRef
 
   @Input() containerClass = ''
@@ -38,15 +40,30 @@ export class CarouselComponent implements AfterViewInit {
     this.changeDetector.detectChanges()
   }
 
-  get isFirstStep() {
+  // Paginable API
+  get isFirstPage() {
     return this.currentStep === 0
   }
-  get isLastStep() {
+  get isLastPage() {
     return this.currentStep === this.steps.length - 1
   }
-  get stepsCount() {
+  get currentPage() {
+    return this.currentStep + 1 // this is 1-based
+  }
+  get pagesCount() {
     return this.steps.length
   }
+  public goToPage(stepIndex: number) {
+    this.emblaApi.scrollTo(stepIndex - 1) // this is 0-based
+  }
+  public goToPrevPage() {
+    if (this.isFirstPage) return
+    this.emblaApi.scrollPrev()
+  }
+  public goToNextPage() {
+    if (this.isLastPage) return
+    this.emblaApi.scrollNext()
+  }
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
@@ -63,18 +80,4 @@ export class CarouselComponent implements AfterViewInit {
       .on('reInit', this.refreshSteps)
       .on('select', this.refreshSteps)
   }
-
-  public scrollToStep(stepIndex: number) {
-    this.emblaApi.scrollTo(stepIndex)
-  }
-
-  public slideToPrevious() {
-    if (this.isFirstStep) return
-    this.emblaApi.scrollPrev()
-  }
-
-  public slideToNext() {
-    if (this.isLastStep) return
-    this.emblaApi.scrollNext()
-  }
 }

package/src/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html

@@ -8,10 +8,8 @@
   <div
     class="w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity"
   >
-    <mat-icon class="material-symbols-outlined" *ngIf="collapsed">add</mat-icon>
-    <mat-icon class="material-symbols-outlined" *ngIf="!collapsed"
-      >remove</mat-icon
-    >
+    <ng-icon name="matAdd" *ngIf="collapsed"></ng-icon>
+    <ng-icon name="matRemove" *ngIf="!collapsed"></ng-icon>
   </div>
 </div>
 <div

package/src/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts

@@ -1,16 +1,22 @@
 import {
-  Component,
   ChangeDetectionStrategy,
+  Component,
+  ElementRef,
   Input,
   ViewChild,
-  ElementRef,
 } from '@angular/core'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { CommonModule } from '@angular/common'
+import { matAdd, matRemove } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-expandable-panel',
   templateUrl: './expandable-panel.component.html',
   styleUrls: ['./expandable-panel.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, NgIcon],
+  viewProviders: [provideIcons({ matAdd, matRemove })],
 })
 export class ExpandablePanelComponent {
   @Input() title: string

package/src/libs/ui/layout/src/lib/expandable-panel-button/expandable-panel-button.component.html

@@ -6,12 +6,8 @@
 >
   <ng-container [ngTemplateOutlet]="titleTemplate"></ng-container>
   <div class="ml-3 grow"></div>
-  <mat-icon class="material-symbols-outlined" *ngIf="collapsed"
-    >expand_more</mat-icon
-  >
-  <mat-icon class="material-symbols-outlined" *ngIf="!collapsed"
-    >expand_less</mat-icon
-  >
+  <ng-icon *ngIf="collapsed" name="matExpandMore"></ng-icon>
+  <ng-icon name="matExpandLess" *ngIf="!collapsed"></ng-icon>
 </button>
 <div
   class="content transition-all pointer-events-auto bg-white"

package/src/libs/ui/layout/src/lib/expandable-panel-button/expandable-panel-button.component.ts

@@ -4,12 +4,18 @@ import {
   Input,
   TemplateRef,
 } from '@angular/core'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { CommonModule } from '@angular/common'
+import { matExpandLess, matExpandMore } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-expandable-panel-button',
   templateUrl: './expandable-panel-button.component.html',
   styleUrls: ['./expandable-panel-button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NgIcon],
+  viewProviders: [provideIcons({ matExpandMore, matExpandLess })],
+  standalone: true,
 })
 export class ExpandablePanelButtonComponent {
   @Input() titleTemplate: TemplateRef<any>

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html

@@ -1,6 +1,6 @@
 <div class="h-full flex flex-col" *ngIf="label; else onlyContent">
   <div class="flex-none w-full flex flex-row items-center">
-    <span class="flex-none font-bold">{{ label }}</span>
+    <span class="flex-none font-bold" translate="">{{ label }}</span>
     <div class="flex-1 flex justify-end items-center">
       <ng-content select="[form-field-interaction]"></ng-content>
       <span

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-form-field-wrapper',
@@ -9,7 +9,7 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./form-field-wrapper.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatTooltipModule, CommonModule],
+  imports: [MatTooltipModule, CommonModule, TranslateModule],
 })
 export class FormFieldWrapperComponent {
   @Input() label?: string

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table-column/interactive-table-column.component.ts

@@ -22,6 +22,7 @@ export class InteractiveTableColumnComponent {
   @ContentChild('cell') cell: TemplateRef<unknown>
 
   @Input() grow = false
+  @Input() width: string
   @Input() sortable = false
   @Input() activeSort: 'asc' | 'desc' | null = null
   @Output() sortChange = new EventEmitter<'asc' | 'desc'>()

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.css

@@ -1,11 +1,3 @@
-.sort-button mat-icon {
-  padding: 0;
-  margin: 0;
-  height: 8px;
-  line-height: 8px;
-  font-size: 18px;
-}
-
 .table-header-cell {
   @apply text-gray-700 px-3 py-3 flex items-center truncate bg-white;
 }
@@ -13,3 +5,7 @@
 button.table-header-cell {
   @apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;
 }
+
+ng-icon {
+  @apply w-4 h-4;
+}