Migrate to ui component

apps/client/src/app/components/accounts-table/accounts-table.module.ts

@@ -5,10 +5,10 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
-import { GfValueModule } from '../value/value.module';
 import { AccountsTableComponent } from './accounts-table.component';
 
 @NgModule({

apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts

@@ -3,12 +3,12 @@ import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfDialogFooterModule } from '../dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module';
 import { GfFearAndGreedIndexModule } from '../fear-and-greed-index/fear-and-greed-index.module';
-import { GfValueModule } from '../value/value.module';
 import { PerformanceChartDialog } from './performance-chart-dialog.component';
 
 @NgModule({

apps/client/src/app/components/portfolio-performance/portfolio-performance.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfValueModule } from '../value/value.module';
 import { PortfolioPerformanceComponent } from './portfolio-performance.component';
 
 @NgModule({

apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { GfValueModule } from '@ghostfolio/ui';
 
-import { GfValueModule } from '../value/value.module';
 import { PortfolioSummaryComponent } from './portfolio-summary.component';
 
 @NgModule({

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts

@@ -3,11 +3,11 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfDialogFooterModule } from '../../dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '../../dialog-header/dialog-header.module';
-import { GfValueModule } from '../../value/value.module';
 import { PositionDetailDialog } from './position-detail-dialog.component';
 
 @NgModule({

apps/client/src/app/components/position/position.module.ts

@@ -3,10 +3,10 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfTrendIndicatorModule } from '../trend-indicator/trend-indicator.module';
-import { GfValueModule } from '../value/value.module';
 import { GfPositionDetailDialogModule } from './position-detail-dialog/position-detail-dialog.module';
 import { PositionComponent } from './position.component';
 

apps/client/src/app/components/positions-table/positions-table.module.ts

@@ -8,12 +8,12 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfNoTransactionsInfoModule } from '../no-transactions-info/no-transactions-info.module';
 import { GfPositionDetailDialogModule } from '../position/position-detail-dialog/position-detail-dialog.module';
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
-import { GfValueModule } from '../value/value.module';
 import { PositionsTableComponent } from './positions-table.component';
 
 @NgModule({

apps/client/src/app/components/transactions-table/transactions-table.module.ts

@@ -10,11 +10,11 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfValueModule } from '@ghostfolio/ui';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfPositionDetailDialogModule } from '../position/position-detail-dialog/position-detail-dialog.module';
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
-import { GfValueModule } from '../value/value.module';
 import { TransactionsTableComponent } from './transactions-table.component';
 
 @NgModule({

apps/client/src/app/components/value/value.component.html

@@ -1,45 +0,0 @@
-<ng-container *ngIf="value || value === 0 || value === null">
-  <div
-    class="d-flex"
-    [ngClass]="position === 'end' ? 'justify-content-end' : ''"
-  >
-    <ng-container *ngIf="isNumber || value === null">
-      <div *ngIf="colorizeSign && value > 0" class="mr-1 text-success">+</div>
-      <div *ngIf="colorizeSign && value < 0" class="mr-1 text-danger">-</div>
-      <div *ngIf="isPercent" [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
-        {{ formattedValue }}%
-      </div>
-      <div *ngIf="!isPercent" [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
-        <ng-container *ngIf="value === null">
-          <span class="text-monospace text-muted">***</span>
-        </ng-container>
-        <ng-container *ngIf="value !== null">
-          {{ formattedValue }}
-        </ng-container>
-      </div>
-      <small *ngIf="currency && size === 'medium'" class="ml-1">
-        {{ currency }}
-      </small>
-      <div *ngIf="currency && size !== 'medium'" class="ml-1">
-        {{ currency }}
-      </div>
-    </ng-container>
-    <ng-container *ngIf="isDate">
-      <div [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
-        {{ formattedDate }}
-      </div>
-    </ng-container>
-  </div>
-  <small *ngIf="label">
-    {{ label }}
-  </small>
-</ng-container>
-
-<ngx-skeleton-loader
-  *ngIf="value === undefined"
-  animation="pulse"
-  [theme]="{
-    height: '1.5rem',
-    width: '5rem'
-  }"
-></ngx-skeleton-loader>

apps/client/src/app/components/value/value.component.scss

@@ -1,5 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  font-variant-numeric: tabular-nums;
-}

apps/client/src/app/components/value/value.component.ts

@@ -1,111 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnChanges,
-  OnInit
-} from '@angular/core';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
-import { format, isDate } from 'date-fns';
-import { isNumber } from 'lodash';
-
-@Component({
-  selector: 'gf-value',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './value.component.html',
-  styleUrls: ['./value.component.scss']
-})
-export class ValueComponent implements OnChanges, OnInit {
-  @Input() colorizeSign: boolean;
-  @Input() currency: string;
-  @Input() isCurrency: boolean;
-  @Input() isInteger: boolean;
-  @Input() isPercent: boolean;
-  @Input() label: string;
-  @Input() locale: string;
-  @Input() position: string;
-  @Input() size: string;
-  @Input() value: number | string;
-
-  public absoluteValue: number;
-  public formattedDate: string;
-  public formattedValue: string;
-  public isDate: boolean;
-  public isNumber: boolean;
-  public useAbsoluteValue = false;
-
-  public constructor() {}
-
-  public ngOnInit() {}
-
-  public ngOnChanges() {
-    if (this.value || this.value === 0) {
-      if (isNumber(this.value)) {
-        this.isDate = false;
-        this.isNumber = true;
-        this.absoluteValue = Math.abs(<number>this.value);
-
-        if (this.colorizeSign) {
-          this.useAbsoluteValue = true;
-          if (this.currency || this.isCurrency) {
-            try {
-              this.formattedValue = this.absoluteValue.toLocaleString(
-                this.locale,
-                {
-                  maximumFractionDigits: 2,
-                  minimumFractionDigits: 2
-                }
-              );
-            } catch {}
-          } else if (this.isPercent) {
-            try {
-              this.formattedValue = (this.absoluteValue * 100).toLocaleString(
-                this.locale,
-                {
-                  maximumFractionDigits: 2,
-                  minimumFractionDigits: 2
-                }
-              );
-            } catch {}
-          }
-        } else if (this.isPercent) {
-          try {
-            this.formattedValue = (this.value * 100).toLocaleString(
-              this.locale,
-              {
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 2
-              }
-            );
-          } catch {}
-        } else if (this.currency || this.isCurrency) {
-          try {
-            this.formattedValue = this.value?.toLocaleString(this.locale, {
-              maximumFractionDigits: 2,
-              minimumFractionDigits: 2
-            });
-          } catch {}
-        } else if (this.isInteger) {
-          try {
-            this.formattedValue = this.value?.toLocaleString(this.locale, {
-              maximumFractionDigits: 0,
-              minimumFractionDigits: 0
-            });
-          } catch {}
-        }
-      } else {
-        try {
-          if (isDate(new Date(this.value))) {
-            this.isDate = true;
-            this.isNumber = false;
-
-            this.formattedDate = format(
-              new Date(<string>this.value),
-              DEFAULT_DATE_FORMAT
-            );
-          }
-        } catch {}
-      }
-    }
-  }
-}

apps/client/src/app/components/value/value.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { ValueComponent } from './value.component';
-
-@NgModule({
-  declarations: [ValueComponent],
-  exports: [ValueComponent],
-  imports: [CommonModule, NgxSkeletonLoaderModule],
-  providers: []
-})
-export class GfValueModule {}

apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts

@@ -9,8 +9,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
-import { GfValueModule } from '@ghostfolio/client/components/value/value.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfValueModule } from '@ghostfolio/ui';
 
 import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-dialog.component';
 

libs/ui/src/index.ts

@@ -1 +1 @@
-export * from './lib/ui.module';
+export * from './lib/value/value.module';

libs/ui/src/lib/ui.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { ValueComponent } from './value/value.component';
-// import { GfValueModule } from './value/value.module';
-
-@NgModule({
-  imports: [CommonModule /*, GfValueModule*/],
-  declarations: [ValueComponent],
-  exports: [ValueComponent]
-})
-export class UiModule {}