show all numbers as a Persian digit

package.json

@@ -39,24 +39,25 @@
     "farsi"
   ],
   "dependencies": {
-    "jalali-moment": "^3.1.0"
+    "jalali-moment": "^3.1.1",
+    "persian-digit-tools": "^1.0.0"
   },
   "devDependencies": {
-    "@angular/cli": "^1.6.1",
-    "@angular/common": "^5.1.1",
-    "@angular/compiler": "^5.1.1",
-    "@angular/compiler-cli": "^5.1.1",
-    "@angular/core": "^5.1.1",
-    "@angular/forms": "^5.1.1",
-    "@angular/platform-browser": "^5.1.1",
-    "@angular/platform-browser-dynamic": "^5.1.1",
-    "@angular/router": "^5.1.1",
+    "@angular/cli": "^1.7.3",
+    "@angular/common": "^5.2.9",
+    "@angular/compiler": "^5.2.9",
+    "@angular/compiler-cli": "^5.2.9",
+    "@angular/core": "^5.2.9",
+    "@angular/forms": "^5.2.9",
+    "@angular/platform-browser": "^5.2.9",
+    "@angular/platform-browser-dynamic": "^5.2.9",
+    "@angular/router": "^5.2.9",
     "@types/google.analytics": "0.0.33",
     "@types/jasmine": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.38.tgz",
     "@types/node": "https://registry.npmjs.org/@types/node/-/node-6.0.94.tgz",
     "classlist.js": "^1.1.20150312",
-    "codelyzer": "^4.0.2",
-    "core-js": "^2.4.1",
+    "codelyzer": "^4.2.1",
+    "core-js": "^2.5.4",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
@@ -67,16 +68,16 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "less": "^2.7.2",
     "ncp": "^2.0.0",
-    "ng-packagr": "^1.6.0",
+    "ng-packagr": "^1.7.0",
     "protractor": "^5.2.0",
     "rimraf": "^2.6.1",
-    "rxjs": "^5.1.0",
-    "ts-node": "^4.0.2",
+    "rxjs": "^5.5.8",
+    "ts-node": "^4.1.0",
     "tslint": "~5.8.0",
     "typescript": "~2.4.2",
     "uglify-js": "^2.8.12",
     "web-animations-js": "^2.2.5",
-    "zone.js": "^0.8.4"
+    "zone.js": "^0.8.21"
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
@@ -86,7 +87,8 @@
     "lib": {
       "entryFile": "src/app/index.ts",
       "externals": {
-        "jalali-moment": "jalali-moment"
+        "jalali-moment": "jalali-moment",
+        "persian-digit-tools": "persian-digit-tools"
       }
     },
     "dest": "bin"

src/app/date-picker/date-picker.component.ts

@@ -52,6 +52,7 @@ import {DateValidator} from '../common/types/validator.type';
 import {MonthCalendarComponent} from '../month-calendar/month-calendar.component';
 import {DayTimeCalendarComponent} from '../day-time-calendar/day-time-calendar.component';
 import {INavEvent} from '../common/models/navigation-event.model';
+import { DigitConvertor } from 'persian-digit-tools';
 
 @Component({
   selector: 'dp-date-picker',
@@ -134,9 +135,11 @@ export class DatePickerComponent implements OnChanges,
 
   set selected(selected: Moment[]) {
     this._selected = selected;
-    this.inputElementValue = (<string[]>this.utilsService
+    this.inputElementValue = DigitConvertor.toPersian(
+      (<string[]>this.utilsService
       .convertFromMomentArray(this.componentConfig.format, selected, ECalendarValue.StringArr, this.componentConfig.locale))
-      .join(' | ');
+      .join(' | ')
+    );
     const val = this.processOnChangeCallback(selected);
     this.onChangeCallback(val, false);
     this.onChange.emit(val);
@@ -421,6 +424,9 @@ export class DatePickerComponent implements OnChanges,
   }
 
   onViewDateChange(value: CalendarValue) {
+    if (value !== null && value.toString().length !== 0) {
+      value = DigitConvertor.toEnglish(value);
+    }
     let strVal = value ? this.utilsService.convertToString(value, this.componentConfig.format, this.componentConfig.locale) : '';
     if (this.dayPickerService.isValidInputDateValue(strVal, this.componentConfig)) {
       if (strVal) {

src/app/day-calendar/day-calendar.component.less

@@ -88,10 +88,10 @@
         border: none;
         outline: none;
         padding: 0;
+        border-radius: 50% !important;
 
         &:hover {
           background: @c-light-gray;
-          border-radius: 50%;
         }
       }
 

src/app/day-calendar/day-calendar.component.spec.ts

@@ -34,7 +34,7 @@ describe('Component: DayCalendarComponent', () => {
   it('should check getMonthBtnText default value', () => {
     expect(component.getDayBtnText({
       date: moment('05-04-2017', 'DD-MM-YYYY')
-    } as IDay)).toEqual('5');
+    } as IDay)).toEqual('۵');
   });
 
   describe('should have the right CSS classes for', () => {

src/app/day-calendar/day-calendar.component.ts

@@ -35,6 +35,7 @@ import {IMonthCalendarConfig} from '../month-calendar/month-calendar-config';
 import {IMonth} from '../month-calendar/month.model';
 import {DateValidator} from '../common/types/validator.type';
 import {INavEvent} from '../common/models/navigation-event.model';
+import {DigitConvertor} from 'persian-digit-tools';
 const moment = momentNs;
 
 @Component({
@@ -108,7 +109,7 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
     this._currentDateView = current.clone();
     this.weeks = this.dayCalendarService
       .generateMonthArray(this.componentConfig, this._currentDateView, this.selected);
-    this.navLabel = this.dayCalendarService.getHeaderLabel(this.componentConfig, this._currentDateView);
+    this.navLabel = DigitConvertor.toPersian(this.dayCalendarService.getHeaderLabel(this.componentConfig, this._currentDateView));
     this.showLeftNav = this.dayCalendarService.shouldShowLeft(this.componentConfig.min, this.currentDateView);
     this.showRightNav = this.dayCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
   }
@@ -240,7 +241,7 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
   }
 
   getDayBtnText(day: IDay): string {
-    return this.dayCalendarService.getDayBtnText(this.componentConfig, day.date);
+    return DigitConvertor.toPersian(this.dayCalendarService.getDayBtnText(this.componentConfig, day.date));
   }
 
   getDayBtnCssClass(day: IDay): {[klass: string]: boolean} {

src/app/month-calendar/month-calendar.component.less

@@ -50,7 +50,7 @@
       font-size: 0.7rem;
 
       &:hover {
-        border-radius: 50%;background: @c-light-gray;
+        background: @c-light-gray;
       }
     }
 

src/app/month-calendar/month-calendar.component.ts

@@ -32,6 +32,7 @@ import {UtilsService} from '../common/services/utils/utils.service';
 import {DateValidator} from '../common/types/validator.type';
 import {SingleCalendarValue} from '../common/types/single-calendar-value';
 import {INavEvent} from '../common/models/navigation-event.model';
+import { DigitConvertor } from 'persian-digit-tools';
 const moment = momentNs;
 
 @Component({
@@ -102,7 +103,7 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
     this._currentDateView = current.clone();
     this.yearMonths = this.monthCalendarService
       .generateYear(this.componentConfig, this._currentDateView, this.selected);
-    this.navLabel = this.monthCalendarService.getHeaderLabel(this.componentConfig, this.currentDateView);
+    this.navLabel = DigitConvertor.toPersian(this.monthCalendarService.getHeaderLabel(this.componentConfig, this.currentDateView));
     this.showLeftNav = this.monthCalendarService.shouldShowLeft(this.componentConfig.min, this._currentDateView);
     this.showRightNav = this.monthCalendarService.shouldShowRight(this.componentConfig.max, this.currentDateView);
     this.showSecondaryLeftNav = this.componentConfig.showMultipleYearsNavigation && this.showLeftNav;

src/app/time-select/time-select.component.less

@@ -6,6 +6,7 @@
     display: inline-block;
 
     .dp-time-select-controls {
+      direction: ltr !important;
       margin: 0;
       padding: 0;
       text-align: center;

src/app/time-select/time-select.component.spec.ts

@@ -32,9 +32,9 @@ describe('Component: TimeSelectComponent', () => {
 
   it('should calculate time parts', () => {
     component.selected = moment('5:33:44', 'H:mm:ss');
-    expect(component.hours).toEqual('05');
-    expect(component.minutes).toEqual('33');
-    expect(component.seconds).toEqual('44');
+    expect(component.hours).toEqual('۰۵');
+    expect(component.minutes).toEqual('۳۳');
+    expect(component.seconds).toEqual('۴۴');
     expect(component.meridiem).toEqual('AM');
   });
 });

src/app/time-select/time-select.component.ts

@@ -30,6 +30,7 @@ import {CalendarValue} from '../common/types/calendar-value';
 import {UtilsService} from '../common/services/utils/utils.service';
 import {IDate} from '../common/models/date.model';
 import {DateValidator} from '../common/types/validator.type';
+import { DigitConvertor } from 'persian-digit-tools';
 const moment = momentNs;
 
 @Component({
@@ -214,9 +215,9 @@ export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAcces
   }
 
   calculateTimeParts(time: Moment) {
-    this.hours = this.timeSelectService.getHours(this.componentConfig, time);
-    this.minutes = this.timeSelectService.getMinutes(this.componentConfig, time);
-    this.seconds = this.timeSelectService.getSeconds(this.componentConfig, time);
+    this.hours = DigitConvertor.toPersian(this.timeSelectService.getHours(this.componentConfig, time));
+    this.minutes = DigitConvertor.toPersian(this.timeSelectService.getMinutes(this.componentConfig, time));
+    this.seconds = DigitConvertor.toPersian(this.timeSelectService.getSeconds(this.componentConfig, time));
     this.meridiem = this.timeSelectService.getMeridiem(this.componentConfig, time);
   }
 }