resolves rtl feedback.

Signed-off-by: Diana Barsan <[email protected]>

Author: dianabarsan

Diff for: webapp/src/css/rtl.less

@@ -157,6 +157,11 @@
 
   }
 
+  .target .target-progress .goal label {
+    margin-left: auto;
+    margin-right: -40%;
+  }
+
   .progress-bar {
     float: right;
   }
@@ -170,6 +175,11 @@
     margin-right: 0;
   }
 
+  [type=tel] {
+    direction: ltr!important;
+    unicode-bidi: embed;
+  }
+
 
   @media (max-width: 767px) {
     mm-sidebar-menu .mat-sidenav-container .nav-item mat-icon {

Diff for: webapp/src/ts/components/analytics-targets-progress/analytics-targets-progress.component.html

@@ -7,7 +7,10 @@
     </div>
   </div>
 
-  <div class="goal" *ngIf="target?.goal > 0" [ngStyle]="{ 'padding-left': (target?.goal || 0) + '%' }">
+  <div class="goal"
+       *ngIf="target?.goal > 0"
+       [ngStyle]="{ 'padding-left': ((direction === 'ltr' && target?.goal) || 0) + '%', 'padding-right': ((direction === 'rtl' && target?.goal) || 0) + '%' }"
+  >
     <label [ngClass]="{ 'pin-left': !aggregate && target?.goal < 10, 'pin-right': aggregate || target?.goal > 85 }">
       <span>{{'analytics.target.monthly_goal' | translate}}</span>
       {{ target.goal | localizeNumber }}<span *ngIf="target?.type === 'percent'">%</span>

Diff for: webapp/src/ts/components/analytics-targets-progress/analytics-targets-progress.component.ts

@@ -8,6 +8,7 @@ export class AnalyticsTargetsProgressComponent {
   @Input() target;
   @Input() value;
   @Input() aggregate;
+  @Input() direction;
 
   constructor() { }
 }

Diff for: webapp/src/ts/modules/analytics/analytics-target-aggregates-detail.component.ts

@@ -22,6 +22,7 @@ export class AnalyticsTargetAggregatesDetailComponent implements OnInit, OnDestr
   selected: any = null;
   error: any = null;
   reportingPeriod;
+  direction;
   private aggregates = null;
   private viewInited = new Subject();
 
@@ -53,11 +54,13 @@ export class AnalyticsTargetAggregatesDetailComponent implements OnInit, OnDestr
     const subscriptionStore = combineLatest(
       this.store.select(Selectors.getTargetAggregates),
       this.store.select(Selectors.getSelectedTargetAggregate),
-      this.store.select(Selectors.getTargetAggregatesError)
-    ).subscribe(([aggregates, selected, error]) => {
+      this.store.select(Selectors.getTargetAggregatesError),
+      this.store.select(Selectors.getDirection),
+    ).subscribe(([aggregates, selected, error, direction]) => {
       this.aggregates = aggregates;
       this.selected = selected;
       this.error = error;
+      this.direction = direction;
       if (this.selected) {
         this.reportingPeriod = this.getReportingPeriodText(this.selected);
       }

Diff for: webapp/src/ts/modules/analytics/analytics-targets.component.html

@@ -20,7 +20,7 @@
       <div class="body">
         <mm-analytics-targets-progress
           *ngIf="target.type === 'percent'"
-          [target]="target" [value]="target.value"
+          [target]="target" [value]="target.value" [direction]="direction"
           [aggregate]="false">
         </mm-analytics-targets-progress>
         <div class="count" *ngIf="target.type !== 'percent'">

Diff for: webapp/src/ts/modules/analytics/analytics-targets.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
 
 import { RulesEngineService } from '@mm-services/rules-engine.service';
 import { PerformanceService } from '@mm-services/performance.service';
+import { Selectors } from '@mm-selectors/index';
 
 @Component({
   templateUrl: './analytics-targets.component.html'
@@ -12,12 +14,17 @@ export class AnalyticsTargetsComponent implements OnInit {
   targetsDisabled = false;
   errorStack;
   trackPerformance;
+  direction;
 
   constructor(
     private rulesEngineService: RulesEngineService,
-    private performanceService: PerformanceService
+    private performanceService: PerformanceService,
+    private store: Store,
   ) {
     this.trackPerformance = this.performanceService.track();
+    this.store.select(Selectors.getDirection).subscribe(direction => {
+      this.direction = direction;
+    });
   }
 
   ngOnInit(): void {

Diff for: webapp/src/ts/modules/reports/reports-more-menu.component.html

@@ -35,7 +35,7 @@
 </section>
 
 <ng-template #verifyReportWrapper>
-  <section class="verify-report-options-wrapper">
+  <section class="verify-report-options-wrapper" [dir]="direction">
     <mm-panel-header headerTitle="reports.verify" (onClose)="closeVerifyReportComponents()"></mm-panel-header>
     <div class="verify-report-options-body">
       <button mat-flat-button class="invalid-option" [class.active-option]="selectedReportDoc?.verified === false" (click)="isReportCorrect(false)">