Format code

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

@@ -1,15 +1,12 @@
-import { NgModule } from '@angular/core';
 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*/],
+  imports: [CommonModule /*, GfValueModule*/],
-  declarations: [
+  declarations: [ValueComponent],
-    ValueComponent
+  exports: [ValueComponent]
-  ],
-  exports: [
-    ValueComponent
-  ]
 })
 export class UiModule {}

libs/ui/src/lib/value/value.component.html

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

libs/ui/src/lib/value/value.component.spec.ts

@@ -8,9 +8,8 @@ describe('ValueComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ValueComponent ]
+      declarations: [ValueComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   });
 
   beforeEach(() => {

libs/ui/src/lib/value/value.component.stories.ts

@@ -1,5 +1,6 @@
-import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
 import { ValueComponent } from './value.component';
 
 export default {
@@ -7,26 +8,26 @@ export default {
   component: ValueComponent,
   decorators: [
     moduleMetadata({
-      imports: [NgxSkeletonLoaderModule],
+      imports: [NgxSkeletonLoaderModule]
     })
-  ],
+  ]
 } as Meta<ValueComponent>;
 
 const Template: Story<ValueComponent> = (args: ValueComponent) => ({
-  props: args,
+  props: args
 });
 
 export const Loading = Template.bind({});
 Loading.args = {
   value: undefined
-}
+};
 
 export const Integer = Template.bind({});
 Integer.args = {
   isInteger: true,
   locale: 'en',
   value: 7
-}
+};
 
 export const Currency = Template.bind({});
 Currency.args = {
@@ -35,4 +36,4 @@ Currency.args = {
   label: 'Label',
   locale: 'en',
   value: 7
-}
+};

libs/ui/src/lib/value/value.component.ts

@@ -2,7 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   Input,
-  OnChanges,
+  OnChanges
 } from '@angular/core';
 import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
 import { format, isDate } from 'date-fns';