geonetwork-ui 2.1.0-initial

package/src/libs/ui/search/src/lib/results-list/results-layout.config.ts

@@ -0,0 +1,48 @@
+import { InjectionToken, Type } from '@angular/core'
+import { RecordPreviewCardComponent } from '../record-preview-card/record-preview-card.component'
+import { RecordPreviewFeedComponent } from '../record-preview-feed/record-preview-feed.component'
+import { RecordPreviewListComponent } from '../record-preview-list/record-preview-list.component'
+import { RecordPreviewRowComponent } from '../record-preview-row/record-preview-row.component'
+import { RecordPreviewTextComponent } from '../record-preview-text/record-preview-text.component'
+import { RecordPreviewTitleComponent } from '../record-preview-title/record-preview-title.component'
+import { RecordPreviewComponent } from '../record-preview/record-preview.component'
+
+const DEFAULT_ITEM_CLS = 'pb-4'
+const DEFAULT_CONTAINER_CLS = 'gap-4 p-4'
+
+export class ResultsLayoutConfigItem {
+  constructor(
+    public component: Type<RecordPreviewComponent>,
+    public itemClass: string = DEFAULT_ITEM_CLS,
+    public itemStyle: string = '',
+    public containerClass: string = DEFAULT_CONTAINER_CLS
+  ) {}
+}
+export type ResultsLayoutConfigModel = Record<string, ResultsLayoutConfigItem>
+
+export const RESULTS_LAYOUT_CONFIG =
+  new InjectionToken<ResultsLayoutConfigModel>('results-layout.config')
+
+export const DEFAULT_RESULTS_LAYOUT_CONFIG: ResultsLayoutConfigModel = {
+  CARD: new ResultsLayoutConfigItem(
+    RecordPreviewCardComponent,
+    '',
+    'height: 24em;',
+    'grid md:grid-cols-2 lg:grid-cols-4 gap-4 p-4'
+  ),
+  ROW: new ResultsLayoutConfigItem(
+    RecordPreviewRowComponent,
+    'pt-4 pb-5 sm:py-7',
+    '',
+    'grid grid-cols-1 divide-y divide-gray-300'
+  ),
+  FEED: new ResultsLayoutConfigItem(
+    RecordPreviewFeedComponent,
+    'p-0',
+    undefined,
+    'gap-0 p-0'
+  ),
+  LIST: new ResultsLayoutConfigItem(RecordPreviewListComponent),
+  TEXT: new ResultsLayoutConfigItem(RecordPreviewTextComponent),
+  TITLE: new ResultsLayoutConfigItem(RecordPreviewTitleComponent),
+}

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

@@ -0,0 +1,32 @@
+<ng-container>
+  <div [ngClass]="layoutConfig.containerClass">
+    <div
+      [ngClass]="layoutConfig.itemClass"
+      [style]="layoutConfig.itemStyle"
+      *ngFor="let record of records"
+    >
+      <gn-ui-results-list-item
+        [record]="record"
+        [layoutConfig]="layoutConfig"
+        [metadataQualityDisplay]="metadataQualityDisplay"
+        (mdSelect)="mdSelect.emit($event)"
+        [favoriteTemplate]="favoriteTemplate"
+        [linkHref]="recordUrlGetter(record)"
+      ></gn-ui-results-list-item>
+    </div>
+  </div>
+</ng-container>
+
+<!--
+<ng-template #block>
+  <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 p-4">
+    <gn-ui-record-preview-card
+      *ngFor="let record of records"
+      [record]="record"
+      (mdSelect)="mdSelect.emit($event)"
+      linkTarget="_blank"
+      style="height: 24em"
+    ></gn-ui-record-preview-card>
+  </div>
+</ng-template>
+-->

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

@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import {
+  DEFAULT_RESULTS_LAYOUT_CONFIG,
+  ResultsLayoutConfigItem,
+} from './results-layout.config'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+import { MetadataQualityDisplay } from '../../../../../../libs/ui/elements/src'
+
+@Component({
+  selector: 'gn-ui-results-list',
+  templateUrl: './results-list.component.html',
+  styleUrls: ['./results-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResultsListComponent {
+  @Input() records: CatalogRecord[]
+  @Input() layoutConfig: ResultsLayoutConfigItem =
+    DEFAULT_RESULTS_LAYOUT_CONFIG['CARD']
+  @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
+  @Input() recordUrlGetter: (record: CatalogRecord) => string
+  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Output() mdSelect = new EventEmitter<CatalogRecord>()
+}

package/src/libs/ui/search/src/lib/results-list-item/results-list-item.component.html

@@ -0,0 +1 @@
+<ng-template #card></ng-template>

package/src/libs/ui/search/src/lib/results-list-item/results-list-item.component.ts

@@ -0,0 +1,65 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ComponentFactoryResolver,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core'
+import { RecordPreviewComponent } from '../record-preview/record-preview.component'
+import { ResultsLayoutConfigItem } from '../results-list/results-layout.config'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
+import { MetadataQualityDisplay } from '../../../../../../libs/ui/elements/src'
+
+@Component({
+  selector: 'gn-ui-results-list-item',
+  templateUrl: './results-list-item.component.html',
+  styleUrls: ['./results-list-item.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResultsListItemComponent implements OnChanges, AfterViewInit {
+  @Input() layoutConfig: ResultsLayoutConfigItem
+  @Input() record: CatalogRecord
+  @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
+  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() linkHref: string
+  @Output() mdSelect = new EventEmitter<CatalogRecord>()
+  initialized = false
+
+  @ViewChild('card', { read: ViewContainerRef }) cardRef: ViewContainerRef
+
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
+
+  ngAfterViewInit(): void {
+    this.initialized = true
+    this.loadComponent()
+  }
+
+  ngOnChanges(): void {
+    if (this.initialized) this.loadComponent()
+  }
+
+  loadComponent() {
+    const resolver =
+      this.componentFactoryResolver.resolveComponentFactory<RecordPreviewComponent>(
+        this.layoutConfig.component
+      )
+    this.cardRef.clear()
+    const componentFactory =
+      this.cardRef.createComponent<RecordPreviewComponent>(resolver)
+    componentFactory.instance.metadataQualityDisplay =
+      this.metadataQualityDisplay
+    componentFactory.instance.record = this.record
+    componentFactory.instance.favoriteTemplate = this.favoriteTemplate
+    componentFactory.instance.mdSelect.subscribe((record) =>
+      this.mdSelect.emit(record)
+    )
+    componentFactory.instance.linkHref = this.linkHref
+    componentFactory.changeDetectorRef.detectChanges()
+  }
+}

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

@@ -0,0 +1,79 @@
+import { NgModule } from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { RouterLink } from '@angular/router'
+import { UtilSharedModule } from '../../../../../libs/util/shared/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { NgxDropzoneModule } from 'ngx-dropzone'
+import { FacetsModule } from './facets/facets.module'
+import { RecordMetricComponent } from './record-metric/record-metric.component'
+import { RecordPreviewCardComponent } from './record-preview-card/record-preview-card.component'
+import { RecordPreviewListComponent } from './record-preview-list/record-preview-list.component'
+import { RecordPreviewRowComponent } from './record-preview-row/record-preview-row.component'
+import { RecordPreviewTextComponent } from './record-preview-text/record-preview-text.component'
+import { RecordPreviewTitleComponent } from './record-preview-title/record-preview-title.component'
+import { ResultsHitsNumberComponent } from './results-hits-number/results-hits-number.component'
+import {
+  DEFAULT_RESULTS_LAYOUT_CONFIG,
+  RESULTS_LAYOUT_CONFIG,
+} from './results-list/results-layout.config'
+import { ResultsListComponent } from './results-list/results-list.component'
+import { RecordPreviewComponent } from './record-preview/record-preview.component'
+import { TagInputModule } from 'ngx-chips'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { ResultsListItemComponent } from './results-list-item/results-list-item.component'
+import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { UiElementsModule } from '../../../../../libs/ui/elements/src'
+import { RecordPreviewFeedComponent } from './record-preview-feed/record-preview-feed.component'
+import { RecordTableComponent } from './record-table/record-table.component'
+import { CommonModule } from '@angular/common'
+import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+
+@NgModule({
+  declarations: [
+    RecordPreviewComponent,
+    RecordPreviewListComponent,
+    RecordPreviewCardComponent,
+    RecordPreviewTextComponent,
+    RecordPreviewTitleComponent,
+    RecordMetricComponent,
+    ResultsListComponent,
+    ResultsHitsNumberComponent,
+    ResultsListItemComponent,
+    RecordPreviewFeedComponent,
+    RecordPreviewRowComponent,
+    RecordTableComponent,
+  ],
+  imports: [
+    CommonModule,
+    TranslateModule.forChild(),
+    NgxDropzoneModule,
+    FacetsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TagInputModule,
+    UtilSharedModule,
+    UiWidgetsModule,
+    UiInputsModule,
+    UiElementsModule,
+    MatIconModule,
+    RouterLink,
+  ],
+  exports: [
+    RecordPreviewListComponent,
+    RecordPreviewCardComponent,
+    RecordPreviewTextComponent,
+    RecordPreviewTitleComponent,
+    RecordMetricComponent,
+    ResultsListComponent,
+    FacetsModule,
+    RecordPreviewComponent,
+    ResultsHitsNumberComponent,
+    RecordPreviewFeedComponent,
+    RecordPreviewRowComponent,
+    RecordTableComponent,
+  ],
+  providers: [
+    { provide: RESULTS_LAYOUT_CONFIG, useValue: DEFAULT_RESULTS_LAYOUT_CONFIG },
+  ],
+})
+export class UiSearchModule {}

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

@@ -0,0 +1,8 @@
+export * from './lib/ui-widgets.module'
+export * from './lib/progress-bar/progress-bar.component'
+export * from './lib/loading-mask/loading-mask.component'
+export * from './lib/badge/badge.component'
+export * from './lib/color-scale/color-scale.component'
+export * from './lib/popup-alert/popup-alert.component'
+export * from './lib/spinning-loader/spinning-loader.component'
+export * from './lib/step-bar/step-bar.component'

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

@@ -0,0 +1,8 @@
+<div
+  class="inline-block bg-black opacity-70 py-1.5 px-3 rounded font-medium text-gray-50 text-sm leading-none"
+  [ngClass]="
+    clickable ? 'hover:bg-gray-800 cursor-pointer transition-colors' : ''
+  "
+>
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-badge',
+  templateUrl: './badge.component.html',
+  styleUrls: ['./badge.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BadgeComponent {
+  @Input() clickable? = false
+}

package/src/libs/ui/widgets/src/lib/color-scale/color-scale.component.html

@@ -0,0 +1,83 @@
+<div class="flex flex-row items-center">
+  <div class="text-xs text-gray-700 font-bold m-2 w-32 text-right">primary</div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-primary-black"
+    title="primary-black"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-primary-darkest"
+    title="primary-darkest"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-primary-darker"
+    title="primary-darker"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-primary border-2 border-primary-darkest"
+    title="primary"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-primary-lighter"
+    title="primary-lighter"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-primary-lightest"
+    title="primary-lightest"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-primary-white"
+    title="primary-white"
+  ></div>
+</div>
+<div class="flex flex-row">
+  <div class="text-xs text-gray-700 font-bold m-2 w-32 text-right">
+    secondary
+  </div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-secondary-black"
+    title="secondary-black"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-secondary-darkest"
+    title="secondary-darkest"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-secondary-darker"
+    title="secondary-darker"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-secondary border-2 border-secondary-darkest"
+    title="secondary"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-secondary-lighter"
+    title="secondary-lighter"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-secondary-lightest"
+    title="secondary-lightest"
+  ></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-secondary-white"
+    title="secondary-white"
+  ></div>
+</div>
+<div class="flex flex-row">
+  <div class="text-xs text-gray-700 font-bold m-2 w-32 text-right">main</div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-main" title="main"></div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-gray-900" title="gray-900"></div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-gray-800" title="gray-800"></div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-gray-700" title="gray-700"></div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-gray-600" title="gray-600"></div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-gray-500" title="gray-500"></div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-gray-400" title="gray-400"></div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-gray-300" title="gray-300"></div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-gray-200" title="gray-200"></div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-gray-100" title="gray-100"></div>
+  <div class="shadow-md rounded w-6 h-6 m-2 bg-gray-50" title="gray-50"></div>
+  <div
+    class="shadow-md rounded w-6 h-6 m-2 bg-background"
+    title="background"
+  ></div>
+  <div class="text-xs text-gray-700 font-bold m-2 w-32">background</div>
+</div>

package/src/libs/ui/widgets/src/lib/color-scale/color-scale.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-color-scale',
+  templateUrl: './color-scale.component.html',
+  styleUrls: ['./color-scale.component.css'],
+})
+export class ColorScaleComponent {}

package/src/libs/ui/widgets/src/lib/loading-mask/loading-mask.component.css

@@ -0,0 +1,20 @@
+/* this overrides the spinner color with a CSS variable to match the theme */
+::ng-deep .mat-spinner circle {
+  stroke: var(--color-gray-700);
+  opacity: 0.5;
+}
+
+.backdrop {
+  background-color: rgba(255, 255, 255, 0.4);
+}
+
+@supports (-webkit-backdrop-filter: blur()) or (backdrop-filter: blur()) {
+  .backdrop {
+    background-color: transparent;
+    backdrop-filter: blur(4px);
+  }
+}
+
+.background {
+  opacity: 0.7;
+}

package/src/libs/ui/widgets/src/lib/loading-mask/loading-mask.component.html

@@ -0,0 +1,5 @@
+<div class="h-full flex flex-col justify-center items-center relative backdrop">
+  <div class="absolute background bg-white inset-0"></div>
+  <mat-spinner [diameter]="28" class="relative"></mat-spinner>
+  <span class="text-sm text-gray-700 mt-3 relative">{{ message }}</span>
+</div>

package/src/libs/ui/widgets/src/lib/loading-mask/loading-mask.component.ts

@@ -0,0 +1,16 @@
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  Input,
+} from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-loading-mask',
+  templateUrl: './loading-mask.component.html',
+  styleUrls: ['./loading-mask.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LoadingMaskComponent {
+  @Input() message: string
+}

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.css

@@ -0,0 +1,33 @@
+:host {
+  pointer-events: none;
+}
+.container {
+  filter: drop-shadow(0px 4px 3px rgba(0, 0, 0, 0.2));
+}
+.message {
+  transition: clip-path 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.message.expanded {
+  clip-path: circle(100%);
+}
+.position-top {
+  clip-path: circle(19px at 20px 20px);
+  align-items: start;
+  top: 0;
+  left: 0;
+}
+.position-bottom {
+  clip-path: circle(19px at 20px calc(100% - 20px));
+  align-items: end;
+  bottom: 0;
+  left: 0;
+}
+
+/* style links inside message */
+.container ::ng-deep a {
+  text-decoration: underline;
+  font-weight: bold;
+}
+.container ::ng-deep a:hover {
+  opacity: 0.85;
+}

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.html

@@ -0,0 +1,23 @@
+<div class="h-full relative container">
+  <div
+    class="pointer-events-auto absolute text-white flex flex-row p-2 rounded message"
+    role="alert"
+    [ngClass]="{
+      'position-bottom': position === 'bottom',
+      'position-top': position === 'top',
+      expanded: this.expanded,
+      'bg-red-500': type === 'danger',
+      'bg-yellow-500': type === 'warning',
+      'bg-blue-500': type === 'info'
+    }"
+    (mouseenter)="expand()"
+    (mouseleave)="expandAndClose()"
+  >
+    <mat-icon class="material-symbols-outlined mr-2 shrink-0 select-none">{{
+      icon
+    }}</mat-icon>
+    <div class="grow" #content [ngClass]="{ invisible: !expanded }">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.ts

@@ -0,0 +1,51 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-popup-alert',
+  templateUrl: './popup-alert.component.html',
+  styleUrls: ['./popup-alert.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PopupAlertComponent implements OnInit {
+  @Input() icon: string
+  @Input() type: 'danger' | 'warning' | 'info' = 'info'
+  @Input() position: 'top' | 'bottom' = 'top'
+  @ViewChild('content') content: ElementRef
+  expanded = false
+  timeout = null
+
+  constructor(private changeDetector: ChangeDetectorRef) {}
+
+  get showDuration() {
+    const chars = this.content.nativeElement.innerHTML.length
+    return Math.max(3000, chars * 20)
+  }
+
+  ngOnInit() {
+    this.expandAndClose()
+  }
+
+  expand() {
+    this.expanded = true
+    this.changeDetector.detectChanges()
+    clearTimeout(this.timeout)
+  }
+
+  expandAndClose() {
+    this.expanded = true
+    this.changeDetector.detectChanges()
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.expanded = false
+      this.changeDetector.detectChanges()
+    }, this.showDuration)
+  }
+}

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.css

@@ -0,0 +1,3 @@
+.font-bold {
+  font-weight: var(--progress-bar-font-weight, 'bold');
+}

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.html

@@ -0,0 +1,12 @@
+<div class="flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg">
+  <div
+    [style.width.%]="progress"
+    class="flex {{
+      color.innerBar
+    }} my-1 mx-1 transition-width duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl"
+  >
+    <div class="flex items-center pl-2 py-1 {{ color.text }} font-bold text-4">
+      {{ progress }}%
+    </div>
+  </div>
+</div>

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input } from '@angular/core'
+
+interface ColorScheme {
+  outerBar: string
+  innerBar: string
+  text: string
+}
+
+@Component({
+  selector: 'gn-ui-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.css'],
+})
+export class ProgressBarComponent {
+  @Input() value = 0
+  @Input() type: 'primary' | 'secondary' | 'default' = 'default'
+
+  get progress() {
+    return this.value > 0 ? (this.value < 100 ? this.value : 100) : 0
+  }
+
+  get color(): ColorScheme {
+    switch (this.type) {
+      case 'default':
+        return {
+          outerBar: 'bg-gray-200',
+          innerBar: 'bg-gray-100',
+          text: 'text-gray-900',
+        }
+      case 'primary':
+        return {
+          outerBar: 'bg-primary',
+          innerBar: 'bg-primary-lighter',
+          text: 'text-white',
+        }
+      case 'secondary':
+        return {
+          outerBar: 'bg-secondary',
+          innerBar: 'bg-secondary-lighter',
+          text: 'text-white',
+        }
+    }
+  }
+}

package/src/libs/ui/widgets/src/lib/spinning-loader/spinning-loader.component.html

@@ -0,0 +1,22 @@
+<span>
+  <svg
+    class="animate-spin h-8 w-8 text-primary"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</span>

package/src/libs/ui/widgets/src/lib/spinning-loader/spinning-loader.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-spinning-loader',
+  templateUrl: './spinning-loader.component.html',
+  styleUrls: ['./spinning-loader.component.css'],
+})
+export class SpinningLoaderComponent {}

package/src/libs/ui/widgets/src/lib/step-bar/step-bar.component.css

@@ -0,0 +1,3 @@
+.icon-check {
+  color: var(--color-primary);
+}