geonetwork-ui 2.1.0-initial

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

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+
+export interface MetadataQualityItem {
+  name: string
+  value: boolean
+}
+
+@Component({
+  selector: 'gn-ui-metadata-quality-item',
+  templateUrl: './metadata-quality-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetadataQualityItemComponent implements MetadataQualityItem {
+  @Input() name: string
+  @Input() value: boolean
+
+  get icon() {
+    return this.value ? 'check' : 'warning_amber'
+  }
+
+  get labelKey() {
+    return `record.metadata.quality.${this.name}.${
+      this.value ? 'success' : 'failed'
+    }`
+  }
+}

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

@@ -0,0 +1,55 @@
+<div class="relative">
+  <div class="sm:absolute sm:inset-0" *ngIf="!hideButton">
+    <gn-ui-button
+      (buttonClick)="nextPage()"
+      type="secondary"
+      [disabled]="currentPage === nPages"
+      extraClass="lg:m-auto !p-[22px]"
+    >
+      <span class="uppercase font-medium tracking-widest" translate
+        >pagination.nextPage</span
+      >
+    </gn-ui-button>
+  </div>
+  <div
+    class="relative pointer-events-none flex flex-row justify-start sm:justify-end"
+  >
+    <div class="pointer-events-auto flex flex-row items-center py-[13px]">
+      <span class="mr-3 capitalize text-sm text-gray-900" translate
+        >pagination.page</span
+      >
+      <input
+        type="number"
+        [ngModel]="currentPage"
+        [min]="1"
+        [max]="nPages"
+        (ngModelChange)="setPage($event)"
+        class="border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center"
+      />
+      <span class="mr-3 text-sm text-gray-900"
+        ><span translate>pagination.pageOf</span> {{ nPages }}</span
+      >
+      <gn-ui-button
+        (buttonClick)="previousPage()"
+        id="navigate_previous"
+        class="mr-2"
+        [disabled]="currentPage === 1"
+        [type]="'light'"
+        extraClass="!px-[3px]"
+        data-cy="prev-page"
+      >
+        <mat-icon class="material-symbols-outlined">navigate_before</mat-icon>
+      </gn-ui-button>
+      <gn-ui-button
+        (buttonClick)="nextPage()"
+        id="navigate_next"
+        [disabled]="currentPage === nPages"
+        [type]="'light'"
+        extraClass="!px-[3px]"
+        data-cy="next-page"
+      >
+        <mat-icon class="material-symbols-outlined">navigate_next</mat-icon>
+      </gn-ui-button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,50 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-pagination',
+  templateUrl: './pagination.component.html',
+  styleUrls: ['./pagination.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PaginationComponent implements OnChanges {
+  @Input() currentPage = 1
+  @Input() nPages = 1
+  @Input() hideButton = false
+  @Output() newCurrentPageEvent = new EventEmitter<number>()
+
+  private applyPageBounds() {
+    // make sure this works with NaN inputs as well by adding `|| 1`
+    this.nPages = Math.max(1, this.nPages || 1)
+    this.currentPage = Math.max(1, Math.min(this.nPages, this.currentPage || 1))
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // make sure the inputs are valid
+    if ('currentPage' in changes || 'nPages' in changes) {
+      this.applyPageBounds()
+    }
+  }
+
+  setPage(newPage) {
+    if (!Number.isInteger(newPage)) return
+    this.currentPage = newPage
+    this.applyPageBounds()
+    this.newCurrentPageEvent.emit(this.currentPage)
+  }
+
+  nextPage() {
+    this.setPage(this.currentPage + 1)
+  }
+
+  previousPage() {
+    this.setPage(this.currentPage - 1)
+  }
+}

package/src/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html

@@ -0,0 +1,33 @@
+<div class="relative">
+  <div class="flex flex-row gap-[5px] items-center">
+    <gn-ui-button
+      type="light"
+      [disabled]="currentPage === 1"
+      (buttonClick)="previousPage()"
+      extraClass="!px-[3px]"
+    >
+      <mat-icon class="material-symbols-outlined">chevron_left</mat-icon>
+    </gn-ui-button>
+    <ng-container *ngFor="let page of visiblePages">
+      <ng-container *ngIf="page === '...'">
+        <span class="mx-[5px]">{{ page }}</span>
+      </ng-container>
+      <ng-container *ngIf="page !== '...'">
+        <gn-ui-button
+          [type]="page === currentPage ? 'primary' : 'light'"
+          [disabled]="page === currentPage"
+          (buttonClick)="changePage(page)"
+          >{{ page }}</gn-ui-button
+        >
+      </ng-container>
+    </ng-container>
+    <gn-ui-button
+      type="light"
+      [disabled]="currentPage === totalPages"
+      (buttonClick)="nextPage()"
+      extraClass="!px-[3px]"
+    >
+      <mat-icon class="material-symbols-outlined">chevron_right</mat-icon>
+    </gn-ui-button>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.ts

@@ -0,0 +1,68 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+} from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-pagination-buttons',
+  templateUrl: './pagination-buttons.component.html',
+  styleUrls: ['./pagination-buttons.component.css'],
+})
+export class PaginationButtonsComponent implements OnChanges {
+  @Input() currentPage: number
+  @Input() totalPages: number
+  visiblePages: (number | '...')[] = []
+  @Output() newCurrentPageEvent = new EventEmitter<number>()
+
+  ngOnChanges(): void {
+    this.calculateVisiblePages()
+  }
+
+  calculateVisiblePages(): void {
+    const maxVisiblePages = 5
+    const halfVisible = Math.floor(maxVisiblePages / 2)
+    const startPage = Math.max(this.currentPage - halfVisible, 1)
+    const endPage = Math.min(this.currentPage + halfVisible, this.totalPages)
+
+    const visiblePages: (number | '...')[] = []
+    if (startPage > 1) {
+      visiblePages.push(1)
+      if (startPage > 2) {
+        visiblePages.push('...')
+      }
+    }
+    for (let page = startPage; page <= endPage; page++) {
+      visiblePages.push(page)
+    }
+    if (endPage < this.totalPages) {
+      if (endPage < this.totalPages - 1) {
+        visiblePages.push('...')
+      }
+      visiblePages.push(this.totalPages)
+    }
+
+    this.visiblePages = visiblePages
+  }
+
+  changePage(page) {
+    this.setPage(page)
+  }
+
+  nextPage() {
+    this.setPage(this.currentPage + 1)
+  }
+
+  previousPage() {
+    this.setPage(this.currentPage - 1)
+  }
+
+  setPage(newPage) {
+    if (!Number.isInteger(newPage)) return
+    this.currentPage = newPage
+    this.calculateVisiblePages()
+    this.newCurrentPageEvent.emit(this.currentPage)
+  }
+}

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

@@ -0,0 +1,30 @@
+<a
+  class="w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]"
+  [routerLink]="['/dataset', record.uniqueIdentifier]"
+  target="_blank"
+>
+  <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
+        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
+        >
+      </button>
+    </div>
+  </div>
+</a>

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

@@ -0,0 +1,12 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+
+@Component({
+  selector: 'gn-ui-related-record-card',
+  templateUrl: './related-record-card.component.html',
+  styleUrls: ['./related-record-card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RelatedRecordCardComponent {
+  @Input() record: CatalogRecord
+}

package/src/libs/ui/elements/src/lib/search-results-error/search-results-error.component.css

@@ -0,0 +1,30 @@
+mat-icon {
+  width: auto;
+  height: auto;
+}
+mat-icon.face {
+  font-size: 3em;
+}
+mat-icon.question-mark1 {
+  position: absolute;
+  bottom: 1.1em;
+  left: calc(50% + 0.7em);
+  font-size: 1.7em;
+}
+mat-icon.question-mark2 {
+  position: absolute;
+  bottom: 1.6em;
+  left: calc(50% + 1.6em);
+  font-size: 1.4em;
+}
+
+.computer {
+  font-size: 3em;
+}
+
+.computer-question-mark {
+  position: absolute;
+  top: 0.6em;
+  left: calc(50% - 0.5em);
+  font-size: 1.2em;
+}

package/src/libs/ui/elements/src/lib/search-results-error/search-results-error.component.html

@@ -0,0 +1,35 @@
+<div
+  class="p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg"
+>
+  <div *ngIf="type === types.COULD_NOT_REACH_API">
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined face">face</mat-icon>
+      <mat-icon class="material-symbols-outlined question-mark1"
+        >question_mark</mat-icon
+      >
+      <mat-icon class="material-symbols-outlined question-mark2"
+        >question_mark</mat-icon
+      >
+    </div>
+    <div translate>search.error.couldNotReachApi</div>
+  </div>
+  <div *ngIf="type === types.RECEIVED_ERROR">
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined face">mood_bad</mat-icon>
+    </div>
+    <div translate>search.error.receivedError</div>
+    <div *ngIf="error">{{ error }}</div>
+  </div>
+  <div *ngIf="type === types.RECORD_NOT_FOUND">
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
+      <mat-icon class="material-symbols-outlined computer-question-mark"
+        >question_mark</mat-icon
+      >
+    </div>
+    <div translate [translateParams]="{ id: recordId }">
+      search.error.recordNotFound
+    </div>
+    <div *ngIf="error">{{ error }}</div>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/search-results-error/search-results-error.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+
+export enum ErrorType {
+  COULD_NOT_REACH_API,
+  RECEIVED_ERROR,
+  RECORD_NOT_FOUND,
+}
+
+@Component({
+  selector: 'gn-ui-search-results-error',
+  templateUrl: './search-results-error.component.html',
+  styleUrls: ['./search-results-error.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchResultsErrorComponent {
+  @Input() type!: ErrorType
+  @Input() error?: string
+  @Input() recordId?: string
+  types = ErrorType
+}

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

@@ -0,0 +1,18 @@
+<div
+  #containerElement
+  class="h-full w-full relative shrink-0 overflow-hidden flex items-center"
+  [ngClass]="isPlaceholder ? 'bg-gray-100' : 'bg-white'"
+  [attr.data-cy-is-placeholder]="isPlaceholder.toString()"
+>
+  <img
+    #imageElement
+    class="relative w-full object-center"
+    [ngClass]="imgFit === 'contain' ? 'h-4/5' : 'h-full'"
+    [ngStyle]="{ objectFit: imgFit }"
+    alt="thumbnail"
+    loading="lazy"
+    (load)="setObjectFit()"
+    [src]="imgUrl | safe: 'url'"
+    (error)="useFallback()"
+  />
+</div>

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

@@ -0,0 +1,113 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Inject,
+  InjectionToken,
+  Input,
+  OnChanges,
+  OnInit,
+  Optional,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core'
+
+export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
+  'thumbnail-placeholder'
+)
+
+type ThumbnailImageObject = {
+  url: string
+  fit?: 'cover' | 'contain' | 'scale-down'
+}
+
+const DEFAULT_PLACEHOLDER =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH5gkNDCUFYjA1nwAAA1pJREFUeNrtnW2TmjAURh8CLlTdrmun///3tZ22+zLuYlehH7jsMGogwRiiec4MM44K6D3x3hAwAIQQQgghhJDYSM5cPwNQAMgBpACUg22GTg2gArAD8A9AKY+9CsgALAF8YRsGALwDeAWw9yGgALCKoKWP+WU8iwxjUsudLBj83sZciIiPSwhoWz7pJ5dUZFQXlEXOZ/DNeTBt3JnhBpc9aacGsOn0BuoIUk3b+5trGnEC4B7Ak4sUlInRU+wB/JbgVxG18KrTBc01EmYmcTFJQUVPy/9zTh/4BthLDOqeenB2DdBtZBN58LsSNpcUoEtTJWM/GIvMhQDde9j6h2OhXAjo6/2Q/lgkLgSQC0IBFEABZEKyiaQv5AAv7fSlS+lPVxRwOXTnEtoTPAs04yfRHGMoz8F/HOiaJfKeggLc78dmOHsVS33y9SUXsDuLlsg6FOAw/fhYhwI0pJ7WoQASpoC9p3UoQEPpaR0K0LCB3fB1e6KfAhxRweAKgQ5PsQxJ+CzCJYC/A7+EWt4TzVCE77GgEsBPHA/G7QBswcE4b+noVRZ2QxkCCqAAQgEUQCiAAggFUAChAAogFEABhAJcfT9FAdOxQuB/ML9lAfdo/qWYy2MK8EiO5mrrliUCvdIudAEzWWzQzWuxwjRnAK9WwAzAWhZTCe3l7cryNQrQBL/txZhKGGrlwc36ogIPfvdzfhuQsDDM80EVZXUFwe+mEJ2EOwBfLfYTTFFWVxL8Qwl3nedSye1jjhEyCjAPflfCWiScU1iDKMrqyoJ/KOFxRDf1sCg/xCxgTPC7EnIHn6GYsiirKw2+ayYryorBn7YoKwb/qCgntywg1OBPdqSsGPyTRXnp07gvPgD8AAl6KIICCAVQAAlLwOg5MSNi9NyqJgKqAHpQoZNZxs5KgG7SDN7AZzgWOxcCtprn5/wVfLb+uWXsrASUPXlvHbmETGKQjBVgMitVJTuaaQS2t/GoEMeE3onEor2jlK4RvwN4G1u9T4n6zp6PMTWAXzCYdCq12OCOhdeYZzT3mIErAW1Fr+HmNOAt82KSesYIAJoRzR2aIVumo+Ms8WwT/HOOZlM0Y+Zzxv2zp/gCTzfzPOyGtdfgp7LEcDvbvSxbWXg/HUIIIYQQQogx/wHLoX7NoCMFPwAAAABJRU5ErkJggg=='
+
+type FitOptions = 'cover' | 'contain' | 'scale-down'
+
+@Component({
+  selector: 'gn-ui-thumbnail',
+  templateUrl: './thumbnail.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ThumbnailComponent implements OnInit, OnChanges {
+  @Input() thumbnailUrl: string | string[]
+  @Input() fit: FitOptions | FitOptions[] = 'cover'
+  @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
+  @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
+  imgUrl: string
+  imgFit: FitOptions
+  placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
+  get isPlaceholder() {
+    return this.imgUrl === this.placeholderUrl
+  }
+  private images: ThumbnailImageObject[] = []
+
+  constructor(
+    @Optional()
+    @Inject(THUMBNAIL_PLACEHOLDER)
+    private optionalPlaceholderUrl: string
+  ) {}
+
+  ngOnInit() {
+    this.updateImageList()
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!('thumbnailUrl' in changes) && !('fit' in changes)) {
+      return
+    }
+    this.updateImageList()
+  }
+
+  private updateImageList() {
+    if (!this.thumbnailUrl) {
+      this.setPlaceholder()
+      return
+    }
+    const urls = Array.isArray(this.thumbnailUrl)
+      ? this.thumbnailUrl
+      : [this.thumbnailUrl]
+    this.images = urls
+      .map((url, index) => ({
+        url,
+        fit: (Array.isArray(this.fit) ? this.fit[index] : this.fit) || 'cover',
+      }))
+      .filter((img) => !!img.url)
+    if (!this.images.length) {
+      this.setPlaceholder()
+      return
+    }
+    this.setNewSrcImage(this.images[0])
+  }
+
+  private setNewSrcImage(image: ThumbnailImageObject) {
+    this.imgFit = image.fit
+    this.imgUrl = image.url
+  }
+
+  private setPlaceholder(): void {
+    this.setNewSrcImage({ url: this.placeholderUrl, fit: 'scale-down' })
+  }
+
+  useFallback() {
+    if (this.images.length > 1) {
+      this.images.shift()
+      this.setNewSrcImage(this.images[0])
+    } else {
+      this.setPlaceholder()
+    }
+  }
+
+  setObjectFit() {
+    const cw = this.containerElement?.nativeElement?.clientWidth
+    const ch = this.containerElement?.nativeElement?.clientHeight
+    if (
+      this.imgElement.nativeElement.naturalWidth < cw &&
+      this.imgElement.nativeElement.naturalHeight < ch
+    ) {
+      this.imgFit = 'scale-down'
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+import { NgModule } from '@angular/core'
+import { CommonModule, NgOptimizedImage } from '@angular/common'
+import { RouterModule } from '@angular/router'
+import { MatIconModule } from '@angular/material/icon'
+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 { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { LinkCardComponent } from './link-card/link-card.component'
+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 { SearchResultsErrorComponent } from './search-results-error/search-results-error.component'
+import { PaginationComponent } from './pagination/pagination.component'
+import { ThumbnailComponent } from './thumbnail/thumbnail.component'
+import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import { FormsModule } from '@angular/forms'
+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'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatTooltipModule,
+    UiWidgetsModule,
+    UiLayoutModule,
+    TranslateModule.forChild(),
+    UtilSharedModule,
+    RouterModule,
+    UiInputsModule,
+    FormsModule,
+    NgOptimizedImage,
+  ],
+  declarations: [
+    MetadataInfoComponent,
+    ContentGhostComponent,
+    DownloadItemComponent,
+    DownloadsListComponent,
+    ApiCardComponent,
+    LinkCardComponent,
+    RelatedRecordCardComponent,
+    MetadataContactComponent,
+    MetadataCatalogComponent,
+    MetadataQualityComponent,
+    MetadataQualityItemComponent,
+    SearchResultsErrorComponent,
+    PaginationComponent,
+    ThumbnailComponent,
+    AvatarComponent,
+    UserPreviewComponent,
+    GnUiLinkifyDirective,
+    PaginationButtonsComponent,
+  ],
+  exports: [
+    MetadataInfoComponent,
+    ContentGhostComponent,
+    DownloadItemComponent,
+    DownloadsListComponent,
+    ApiCardComponent,
+    LinkCardComponent,
+    RelatedRecordCardComponent,
+    MetadataContactComponent,
+    MetadataCatalogComponent,
+    MetadataQualityComponent,
+    MetadataQualityItemComponent,
+    SearchResultsErrorComponent,
+    PaginationComponent,
+    ThumbnailComponent,
+    AvatarComponent,
+    UserPreviewComponent,
+    PaginationButtonsComponent,
+  ],
+})
+export class UiElementsModule {}

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

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

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

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { UserModel } from '../../../../../../libs/common/domain/src/lib/user.model'
+
+@Component({
+  selector: 'gn-ui-user-preview',
+  templateUrl: './user-preview.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserPreviewComponent {
+  @Input() user: UserModel
+  @Input() avatarPlaceholder?: string
+
+  get userFullName() {
+    return (this.user.name + ' ' + this.user.surname).trim()
+  }
+}

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

@@ -0,0 +1,18 @@
+export * from './lib/dropdown-selector/dropdown-selector.component'
+export * from './lib/dropdown-selector/dropdown-selector.model'
+export * from './lib/dropdown-multiselect/dropdown-multiselect.component'
+export * from './lib/dropdown-multiselect/dropdown-multiselect.model'
+export * from './lib/text-input/text-input.component'
+export * from './lib/chips-input/chips-input.component'
+export * from './lib/text-area/text-area.component'
+export * from './lib/autocomplete/autocomplete.component'
+export * from './lib/star-toggle/star-toggle.component'
+export * from './lib/button/button.component'
+export * from './lib/viewport-intersector/viewport-intersector.component'
+export * from './lib/check-toggle/check-toggle.component'
+export * from './lib/ui-inputs.module'
+export * from './lib/form-field'
+export * from './lib/copy-text-button/copy-text-button.component'
+export * from './lib/drag-and-drop-file-input/drag-and-drop-file-input.component'
+export * from './lib/navigation-button/navigation-button.component'
+export * from './lib/viewport-intersector/viewport-intersector.component'

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

@@ -0,0 +1,31 @@
+:host {
+  --input-height: 3.5em;
+}
+.clear-btn {
+  width: var(--input-height);
+  right: var(--input-height);
+  height: 100%;
+}
+.search-btn {
+  width: var(--input-height);
+  height: 100%;
+  border-left-width: 0.1em;
+}
+mat-icon {
+  width: 100%;
+  height: 100%;
+  padding: 0.65em;
+  font-size: 1.5em;
+}
+input {
+  height: var(--input-height);
+  padding: 1.05em;
+  padding-right: calc(2 * var(--input-height));
+}
+input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
+.mat-mdc-option.suggestion.mat-mdc-option-active {
+  background-color: var(--color-primary-lightest);
+}