Merge pull request #4 from tiampersian/dayjs

replace momentjs with dayjs
tiampersian · Nov 18, 2023 · 7009f4c · 7009f4c
2 parents 953a3d8 + 608bec5
commit 7009f4c
Show file tree

Hide file tree

Showing 36 changed files with 813 additions and 759 deletions.
diff --git a/angular.json b/angular.json
@@ -33,7 +33,8 @@
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
-              "jalali-moment"
+              "jalali-moment",
+              "dayjs"
             ]
           },
           "configurations": {
@@ -81,7 +82,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "tiampersian:build"
+            "browserTarget": "tiampersian:build",
+            "disableHostCheck": true
           },
           "configurations": {
             "production": {

diff --git a/package.json b/package.json
@@ -14,60 +14,60 @@
     "build:ci": "ng build @tiampersian/kendo-jalali-date-inputs",
     "test:ci": "ng test tiampersian --browsers=ChromeHeadless --watch=false",
     "build:app:ci": "ng build",
+    "start:state": "webpack-bundle-analyzer dist/kendo-jalali-date-inputs/stats.json",
     "publish": "npm publish dist/tiampersian/kendo-jalali-date-inputs  --access public"
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "16.1.4",
-    "@angular/common": "16.1.4",
-    "@angular/compiler": "16.1.4",
-    "@angular/core": "16.1.4",
-    "@angular/forms": "16.1.4",
-    "@angular/localize": "16.1.4",
-    "@angular/platform-browser": "16.1.4",
-    "@angular/platform-browser-dynamic": "16.1.4",
-    "@angular/router": "16.1.4",
-    "@progress/kendo-angular-buttons": "13.1.0",
-    "@progress/kendo-angular-common": "13.1.0",
-    "@progress/kendo-angular-dateinputs": "13.1.0",
-    "@progress/kendo-angular-dialog": "13.1.0",
-    "@progress/kendo-angular-icons": "13.1.0",
-    "@progress/kendo-angular-inputs": "13.1.0",
-    "@progress/kendo-angular-intl": "13.1.0",
-    "@progress/kendo-angular-l10n": "13.1.0",
-    "@progress/kendo-angular-navigation": "13.1.0",
-    "@progress/kendo-angular-popup": "13.1.0",
+    "@angular/animations": "16.2.2",
+    "@angular/common": "16.2.2",
+    "@angular/compiler": "16.2.2",
+    "@angular/core": "16.2.2",
+    "@angular/forms": "16.2.2",
+    "@angular/localize": "16.2.2",
+    "@angular/platform-browser": "16.2.2",
+    "@angular/platform-browser-dynamic": "16.2.2",
+    "@angular/router": "16.2.2",
+    "@progress/kendo-angular-buttons": "13.3.0",
+    "@progress/kendo-angular-common": "13.3.0",
+    "@progress/kendo-angular-dateinputs": "13.3.0",
+    "@progress/kendo-angular-dialog": "13.3.0",
+    "@progress/kendo-angular-icons": "13.3.0",
+    "@progress/kendo-angular-inputs": "13.3.0",
+    "@progress/kendo-angular-intl": "13.3.0",
+    "@progress/kendo-angular-l10n": "13.3.0",
+    "@progress/kendo-angular-navigation": "13.3.0",
+    "@progress/kendo-angular-popup": "13.3.0",
     "@progress/kendo-drawing": "1.17.5",
     "@progress/kendo-licensing": "1.3.0",
     "@progress/kendo-svg-icons": "1.6.0",
     "@progress/kendo-theme-default": "6.5.0",
-    "dayjs-jalali": "^0.0.2",
-    "jalali-moment": "3.3.11",
-    "moment-timezone": "0.5.43",
+    "dayjs": "1.11.10",
+    "jalaliday": "2.3.0",
     "rxjs": "7.8.1",
     "tslib": "2.6.0",
     "zone.js": "0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.1.4",
-    "@angular/cli": "16.1.4",
-    "@angular/compiler-cli": "16.1.4",
+    "@angular-devkit/build-angular": "16.2.0",
+    "@angular/cli": "16.2.0",
+    "@angular/compiler-cli": "16.2.2",
     "@types/jasmine": "4.3.5",
     "@types/node": "18.15.3",
-    "codelyzer": "^6.0.2",
+    "codelyzer": "6.0.2",
     "jasmine-core": "5.0.1",
     "jasmine-spec-reporter": "7.0.0",
     "karma": "6.4.2",
     "karma-chrome-launcher": "3.2.0",
-    "karma-coverage": "^2.2.1",
+    "karma-coverage": "2.2.1",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
-    "ng-packagr": "^16.1.0",
-    "protractor": "^7.0.0",
+    "ng-packagr": "16.2.1",
+    "protractor": "7.0.0",
     "ts-node": "10.9.1",
     "typescript": "5.1.6"
   },
   "optionalDependencies": {
     "puppeteer": "14.3.0"
   }
-}
+}
diff --git a/projects/tiampersian/kendo-jalali-date-inputs/package.json b/projects/tiampersian/kendo-jalali-date-inputs/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@tiampersian/kendo-jalali-date-inputs",
-  "version": "0.1.343",
+  "version": "0.1.334",
   "license": "MIT",
   "description": "angular jalali ( persian ) date time picker base on kendo-angular-dateinputs ",
   "homepage": "https://github.com/tiampersian/kendo-jalali-date-inputs",
   "bugs": "https://github.com/tiampersian/kendo-jalali-date-inputs/issues",
   "peerDependencies": {
-    "@progress/kendo-licensing": "1.3.0",
+    "@progress/kendo-licensing": "*",
     "@angular/common": "8 - 16",
     "@angular/localize": "8 - 16",
     "@angular/core": "8 - 16"
@@ -44,12 +44,13 @@
     "url": "https://github.com/tiampersian/kendo-jalali-date-inputs"
   },
   "dependencies": {
-    "@progress/kendo-angular-common": "13.1.0",
-    "@progress/kendo-angular-dateinputs": "13.1.0",
-    "@progress/kendo-angular-intl": "13.1.0",
-    "@progress/kendo-angular-l10n": "13.1.0",
-    "@progress/kendo-angular-popup": "13.1.0",
-    "jalali-moment": "3.3.11",
+    "@progress/kendo-angular-common": "13.3.0",
+    "@progress/kendo-angular-dateinputs": "13.3.0",
+    "@progress/kendo-angular-intl": "13.3.0",
+    "@progress/kendo-angular-l10n": "13.3.0",
+    "@progress/kendo-angular-popup": "13.3.0",
+    "dayjs": "1.11.10",
+    "jalaliday":"2.3.0",
     "tslib": "^2.4.0"
   },
   "scripts": {

diff --git a/projects/tiampersian/kendo-jalali-date-inputs/src/lib/components/calendar.component.ts b/projects/tiampersian/kendo-jalali-date-inputs/src/lib/components/calendar.component.ts
@@ -1,5 +1,5 @@
 import { debounceTime } from 'rxjs/operators';
-import { JalaliCldrIntlService } from './../services/locale.service';
+import { JalaliCldrIntlService } from '../services/jalali-cldr-intl.service';
 import { TemplateRef } from '@angular/core';
 import { CalendarComponent, MultiViewCalendarComponent } from '@progress/kendo-angular-dateinputs';
 import { IntlService } from '@progress/kendo-angular-intl';
@@ -63,7 +63,7 @@ const oldNgOnInit = CalendarComponent.prototype.ngOnInit;
 CalendarComponent.prototype.ngOnInit = function (): void {
   const me: CalendarComponent = this;
   oldNgOnInit.call(this);
-  const intl: JalaliCldrIntlService = this.bus.service(this.activeViewEnum).intlService;
+  const intl: JalaliCldrIntlService = this.bus.service(this.activeViewEnum).intl;
   intl.$calendarType.pipe(debounceTime(10)).subscribe(x => {
     this.onResize();
   });

diff --git a/projects/tiampersian/kendo-jalali-date-inputs/src/lib/components/date-input.component.ts b/projects/tiampersian/kendo-jalali-date-inputs/src/lib/components/date-input.component.ts
@@ -1,8 +1,8 @@
 import { DateInputComponent } from '@progress/kendo-angular-dateinputs';
-import moment, { Moment } from 'jalali-moment';
-import { JalaliCldrIntlService } from '../services/locale.service';
-import { reverseString } from '../services/moment-numbers';
-import { isPresent } from '../services/utils';
+import dayjs from 'dayjs';
+import { Dayjs } from 'dayjs';
+import { JalaliCldrIntlService } from '../services/jalali-cldr-intl.service';
+import { isPresent } from '../services/kendo-util-overrides';
 
 
 const existInputs = {
@@ -66,7 +66,7 @@ DateInputComponent.prototype['handleInput'] = function () {
   let prevValue = this.currentValue;
   if (intl.isJalali) {
     // TODO Check me
-    prevValue = this.value ? getValue.call(this, this.value).format(dateFormatString.call(this, this.value, this.format, 'fa').format.toMomentDateTimeFormat()).toEnNumber() : this.currentValue;
+    prevValue = this.value ? this.intl.getDayJsValue(this.value).format(dateFormatString.call(this, this.value, this.format, 'fa').format.toMomentDateTimeFormat()).toEnNumber() : this.currentValue;
     // prevValue = this.value ? getValue.call(this, this.value).format(this.format.toMomentDateTimeFormat()).toEnNumber() : this.currentValue;
   }
 
@@ -121,7 +121,8 @@ function dateFormatString(date, format): { format: string, symbol: string } {
   const partMap = [];
   const partSymbols = [];
   for (let i = 0; i < dateFormatParts.length; i++) {
-    let partLength = getValue.call(this, date)?.format(dateFormatParts[i].pattern?.toMomentDateTimeFormat()).length || 0;
+    let partLength = this.intl.getDayJsValue(date)?.format(dateFormatParts[i].pattern?.toMomentDateTimeFormat()).length || 0;
+    // let partLength = dayjs(date)?.format(dateFormatParts[i].pattern?.toMomentDateTimeFormat()).length || 0;
     while (partLength > 0) {
       parts.push(this.kendoDate.symbols[dateFormatParts[i].pattern[0]] || dateFormatParts[i].pattern[0] || "_");
       partSymbols.push(this.kendoDate.symbols[dateFormatParts[i].pattern[0]] || "_");
@@ -151,7 +152,7 @@ function prepareDiffInJalaliMode(intl: JalaliCldrIntlService, diff: any[]) {
   if (!this.inputValue) {
     return;
   }
-  const dt = getValue.call(this, this.kendoDate.value, 'fa');
+  const dt = this.intl.getDayJsValue(this.kendoDate.value, 'fa');
   if (!dt) {
     return;
   }
@@ -225,7 +226,7 @@ function prepareDiffInJalaliMode(intl: JalaliCldrIntlService, diff: any[]) {
     }
   });
 }
-const MIN_JALALI_DATE = moment.from('0000-01-01', 'fa', 'YYYY/MM/DD');
+const MIN_JALALI_DATE = dayjs('0000-01-01', 'YYYY/MM/DD', 'fa');
 
 function prepareYearValue(diff: any[], dt) {
   diff[2] = false
@@ -258,7 +259,7 @@ function prepareYearValue(diff: any[], dt) {
 }
 
 export function getDateFormatString(format: string, localeId: string, value?: Date): string {
-  const dt = getValue.call(this, (value || this.kendoDate.value), localeId)?.toDate();
+  const dt = this.intl.getDayJsValue(value || this.kendoDate.value, localeId)?.toDate();
   return dateFormatString.call(this, dt, format, localeId) || '';
 };
 
@@ -335,21 +336,14 @@ function setInputValue(localeId: string) {
     format = format.replace(/m/gi, '0');
   }
 
-  const result = getValue.call(this, value, localeId);
+  const result = this.intl.getDayJsValue(value, localeId);
   if (this.intl.isLocaleIran) {
     this.renderer.setProperty(this.inputElement, 'value', result.format(format.toMomentDateTimeFormat()));
     return;
   }
   this.renderer.setProperty(this.inputElement, 'value', result.format(format.toMomentDateTimeFormat()));
 }
 
-function getValue(value: Date | string, localeId?: string): Moment {
-  if (!value) { return null; }
-
-  let formatter = (localeId || this.intl.localeIdByDatePickerType) == 'fa' ? 'doAsJalali' : 'doAsGregorian';
-  return moment(value).locale(this.intl.localeId)[formatter]();
-}
-
 
 function resetExistingInputs() {
   existInputs.m = false;

diff --git a/...ents/kendo-jalali-header-title-template/kendo-jalali-header-title-template.component.scss b/...ents/kendo-jalali-header-title-template/kendo-jalali-header-title-template.component.scss
@@ -1,6 +1,20 @@
 ::ng-deep {
   .k-calendar {
     direction: ltr;
+
+    kendo-virtualization.k-flex.k-content.k-scrollable {
+      --kendo-scrollbar-width: -15px;
+    }
+
+    kendo-calendar-navigation kendo-virtualization.k-flex.k-content.k-scrollable {
+      --kendo-scrollbar-width: 0px;
+
+      &>ul {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    }
   }
 
   .k-calendar-title {

diff --git a/...onents/kendo-jalali-header-title-template/kendo-jalali-header-title-template.component.ts b/...onents/kendo-jalali-header-title-template/kendo-jalali-header-title-template.component.ts
@@ -1,13 +1,14 @@
 import { AfterViewInit, Component, Inject, TemplateRef, ViewChild, ChangeDetectorRef } from '@angular/core';
 import '@angular/localize';
 import { IntlService } from '@progress/kendo-angular-intl';
-import { DatePickerType, JalaliCldrIntlService } from '../../services/locale.service';
+import { JalaliCldrIntlService } from '../../services/jalali-cldr-intl.service';
+import { DatePickerType } from '../../models/date-picker-type';
 
 @Component({
   template: `
   <ng-template #template kendoCalendarHeaderTitleTemplate let-title>
     <span class="header-title k-button k-button k-rounded-lg k-button-sm k-button-link-base k-button-link">{{title}}</span>
-    <button class="header-calendar-type k-button k-rounded-lg k-button-sm k-button-link-base k-button-link" (click)="toggleCalendarType($event)">
+    <button i18n-title="@@changeCalendarType" title="Change Calendar Type" class="header-calendar-type k-button k-rounded-lg k-button-sm k-button-link-base k-button-link" (click)="toggleCalendarType($event)">
       {{calendarTypes[calendarType]}}
       <i class="k-icon k-i-arrows-swap {{calendarType!=='jalali'&&'k-flip-h'}}" ></i>
     </button>
@@ -20,7 +21,7 @@ export class KendoJalaliHeaderTitleTemplateComponent implements AfterViewInit {
   @ViewChild('template', { read: TemplateRef }) templateRef = TemplateRef;
   calendarType: DatePickerType;
   calendarTypes = {
-    [DatePickerType.gregorian]: $localize`:@@jalali:Jalali`,
+    [DatePickerType.gregory]: $localize`:@@jalali:Jalali`,
     [DatePickerType.jalali]: $localize`:@@gregorian:Gregorian`,
   };
 

diff --git a/projects/tiampersian/kendo-jalali-date-inputs/src/lib/components/navigation.directive.ts b/projects/tiampersian/kendo-jalali-date-inputs/src/lib/components/navigation.directive.ts
@@ -2,7 +2,7 @@ import { ChangeDetectorRef, Directive, Inject, Self, SkipSelf } from '@angular/c
 import { NavigationComponent } from '@progress/kendo-angular-dateinputs';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { Providers } from '../providers';
-import { JalaliCldrIntlService } from '../services/locale.service';
+import { JalaliCldrIntlService } from '../services/jalali-cldr-intl.service';
 import { debounceTime } from 'rxjs/operators';
 
 // tslint:disable-next-line:no-string-literal
@@ -19,14 +19,14 @@ NavigationComponent.prototype['intlChange'] = function(): void {
 })
 export class KendoDatePickerDirective {
   constructor(
-    @Inject(IntlService) @Self() intlService: JalaliCldrIntlService,
+    @Inject(IntlService) @Self() intl: JalaliCldrIntlService,
     @Inject(IntlService) @SkipSelf() hostIntlService: JalaliCldrIntlService,
     @Inject('HeaderTitleTemplate') headerTitleTemplate,
     private cdr: ChangeDetectorRef
   ) {
     hostIntlService.changes.pipe(debounceTime(30)).subscribe(x => {
-      intlService.changeLocaleId(hostIntlService.localeId);
-      intlService.changeType(hostIntlService.datePickerType);
+      intl.changeLocaleId(hostIntlService.localeId);
+      intl.changeType(hostIntlService.datePickerType);
       this.cdr.detectChanges();
     });
   }

diff --git a/projects/tiampersian/kendo-jalali-date-inputs/src/lib/kendo-jalali-date-inputs.module.ts b/projects/tiampersian/kendo-jalali-date-inputs/src/lib/kendo-jalali-date-inputs.module.ts
@@ -2,12 +2,23 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 import '@angular/localize/init';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import { IntlModule, setData } from '@progress/kendo-angular-intl';
+import dayjs from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
+import localeData from 'dayjs/plugin/localeData';
+import jalaliday from 'jalaliday';
 import { KendoJalaliHeaderTitleTemplateComponent } from './components/kendo-jalali-header-title-template/kendo-jalali-header-title-template.component';
 import { KendoDatePickerDirective } from './components/navigation.directive';
 import { IConfig } from './models/config.model';
-import { NumberPipe } from './pipes/number.pipe';
 import { Providers } from './providers';
-import { MomentNumberService } from './services/moment-numbers';
+import { DateTimeNumberService } from './services/date-time-number.service';
+import './utils/string-prototypes';
+
+dayjs.extend(jalaliday);
+dayjs.extend(isBetween);
+dayjs.extend(localeData);
+if (typeof window !== 'undefined') {
+  window['dayjs'] = dayjs;
+}
 
 setData({
   name: "fa",
@@ -491,22 +502,19 @@ setData({
   declarations: [
     KendoJalaliHeaderTitleTemplateComponent,
     KendoDatePickerDirective,
-    NumberPipe
   ],
   imports: [
     IntlModule,
     DateInputsModule
   ],
   providers: [
     ...Providers,
-    MomentNumberService,
-    NumberPipe,
+    DateTimeNumberService,
     { provide: 'CONFIGS', useValue: {} }
   ],
   exports: [
     DateInputsModule,
     KendoDatePickerDirective,
-    NumberPipe,
   ]
 })
 export class KendoJalaliDateInputsModule {

diff --git a/projects/tiampersian/kendo-jalali-date-inputs/src/lib/models/date-picker-type.ts b/projects/tiampersian/kendo-jalali-date-inputs/src/lib/models/date-picker-type.ts
@@ -0,0 +1,4 @@
+export enum DatePickerType {
+  jalali = 'jalali',
+  gregory = 'gregory'
+}