Add support for translated labels

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -21,18 +21,10 @@
 
     <div class="row">
       <div class="col-6 mb-3">
-        <gf-value
+        <gf-value size="medium" [value]="accountType">Account Type</gf-value>
-          label="Account Type"
-          size="medium"
-          [value]="accountType"
-        ></gf-value>
       </div>
       <div class="col-6 mb-3">
-        <gf-value
+        <gf-value size="medium" [value]="platformName">Platform</gf-value>
-          label="Platform"
-          size="medium"
-          [value]="platformName"
-        ></gf-value>
       </div>
     </div>
 

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html

@@ -35,112 +35,125 @@
     <div class="row">
       <div class="col-6 mb-3">
         <gf-value
-          label="Change"
+          i18n
           size="medium"
           [colorizeSign]="true"
           [currency]="data.baseCurrency"
           [locale]="data.locale"
           [value]="netPerformance"
-        ></gf-value>
+          >Change</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Performance"
+          i18n
           size="medium"
           [colorizeSign]="true"
           [isPercent]="true"
           [locale]="data.locale"
           [value]="netPerformancePercent"
-        ></gf-value>
+          >Performance</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Average Unit Price"
+          i18n
           size="medium"
           [currency]="SymbolProfile?.currency"
           [locale]="data.locale"
           [value]="averagePrice"
-        ></gf-value>
+          >Average Unit Price</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Market Price"
+          i18n
           size="medium"
           [currency]="SymbolProfile?.currency"
           [locale]="data.locale"
           [value]="marketPrice"
-        ></gf-value>
+          >Market Price</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Minimum Price"
+          i18n
           size="medium"
           [currency]="SymbolProfile?.currency"
           [locale]="data.locale"
           [ngClass]="{ 'text-danger': minPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
           [value]="minPrice"
-        ></gf-value>
+          >Minimum Price</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Maximum Price"
+          i18n
           size="medium"
           [currency]="SymbolProfile?.currency"
           [locale]="data.locale"
           [ngClass]="{ 'text-success': maxPrice?.toFixed(2) === marketPrice?.toFixed(2) && maxPrice?.toFixed(2) !== minPrice?.toFixed(2) }"
           [value]="maxPrice"
-        ></gf-value>
+          >Maximum Price</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Quantity"
+          i18n
           size="medium"
           [locale]="data.locale"
           [precision]="quantityPrecision"
           [value]="quantity"
-        ></gf-value>
+          >Quantity</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Investment"
+          i18n
           size="medium"
           [currency]="data.baseCurrency"
           [locale]="data.locale"
           [value]="investment"
-        ></gf-value>
+          >Investment</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="First Buy Date"
+          i18n
           size="medium"
           [isDate]="true"
           [locale]="data.locale"
           [value]="firstBuyDate"
-        ></gf-value>
+          >First Buy Date</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
+          i18n
           size="medium"
-          [label]="transactionCount === 1 ? 'Transaction' : 'Transactions'"
           [locale]="data.locale"
           [value]="transactionCount"
-        ></gf-value>
+          >{transactionCount === 1, plural, =1 {Transaction} other
+          {Transactions}}</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Asset Class"
+          i18n
           size="medium"
           [hidden]="!SymbolProfile?.assetClass"
           [value]="SymbolProfile?.assetClass"
-        ></gf-value>
+          >Asset Class</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Asset Sub Class"
+          i18n
           size="medium"
           [hidden]="!SymbolProfile?.assetSubClass"
           [value]="SymbolProfile?.assetSubClass"
-        ></gf-value>
+          >Asset Sub Class</gf-value
+        >
       </div>
       <ng-container
         *ngIf="SymbolProfile?.countries?.length > 0 || SymbolProfile?.sectors?.length > 0"
@@ -150,22 +163,24 @@
         >
           <div *ngIf="SymbolProfile?.sectors?.length === 1" class="col-6 mb-3">
             <gf-value
-              label="Sector"
+              i18n
               size="medium"
               [locale]="data.locale"
               [value]="SymbolProfile.sectors[0].name"
-            ></gf-value>
+              >Sector</gf-value
+            >
           </div>
           <div
             *ngIf="SymbolProfile?.countries?.length === 1"
             class="col-6 mb-3"
           >
             <gf-value
-              label="Country"
+              i18n
               size="medium"
               [locale]="data.locale"
               [value]="SymbolProfile.countries[0].name"
-            ></gf-value>
+              >Country</gf-value
+            >
           </div>
         </ng-container>
         <ng-template #charts>

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -233,27 +233,30 @@
           <div class="row">
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value
-                label="Developed Markets"
+                i18n
                 size="large"
                 [isPercent]="true"
                 [value]="markets?.developedMarkets?.value"
-              ></gf-value>
+                >Developed Markets</gf-value
+              >
             </div>
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value
-                label="Emerging Markets"
+                i18n
                 size="large"
                 [isPercent]="true"
                 [value]="markets?.emergingMarkets?.value"
-              ></gf-value>
+                >Emerging Markets</gf-value
+              >
             </div>
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value
-                label="Other Markets"
+                i18n
                 size="large"
                 [isPercent]="true"
                 [value]="markets?.otherMarkets?.value"
-              ></gf-value>
+                >Other Markets</gf-value
+              >
             </div>
           </div>
         </mat-card-content>

apps/client/src/app/pages/public/public-page.html

@@ -82,27 +82,30 @@
           <div class="row">
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value
-                label="Developed Markets"
+                i18n
                 size="large"
                 [isPercent]="true"
                 [value]="markets?.developedMarkets?.value"
-              ></gf-value>
+                >Developed Markets</gf-value
+              >
             </div>
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value
-                label="Emerging Markets"
+                i18n
                 size="large"
                 [isPercent]="true"
                 [value]="markets?.emergingMarkets?.value"
-              ></gf-value>
+                >Emerging Markets</gf-value
+              >
             </div>
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value
-                label="Other Markets"
+                i18n
                 size="large"
                 [isPercent]="true"
                 [value]="markets?.otherMarkets?.value"
-              ></gf-value>
+                >Other Markets</gf-value
+              >
             </div>
           </div>
         </mat-card-content>

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

@@ -43,13 +43,13 @@
       </div>
     </ng-container>
   </div>
-  <ng-container *ngIf="label">
+  <ng-container>
     <div *ngIf="size === 'large'">
-      <span class="h6">{{ label }}</span>
+      <span class="h6"><ng-content></ng-content></span>
       <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
     </div>
     <small *ngIf="size !== 'large'">
-      {{ label }}
+      <ng-content></ng-content>
     </small>
   </ng-container>
 </ng-container>

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

@@ -31,7 +31,6 @@ Currency.args = {
 
 export const Label = Template.bind({});
 Label.args = {
-  label: 'Label',
   locale: 'en-US',
   value: 7.25
 };

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

@@ -20,7 +20,6 @@ export class ValueComponent implements OnChanges {
   @Input() isCurrency = false;
   @Input() isDate = false;
   @Input() isPercent = false;
-  @Input() label = '';
   @Input() locale = getLocale();
   @Input() position = '';
   @Input() precision: number | undefined;