add range component

fix date range service bug

projects/tiampersian/kendo-jalali-date-inputs/src/lib/HeaderTitleTemplateFactory.ts

@@ -1,12 +1,14 @@
-import { Injector, ComponentFactoryResolver } from '@angular/core';
+import { Injector, createComponent } from '@angular/core';
 import { KendoJalaliHeaderTitleTemplateComponent } from './components/kendo-jalali-header-title-template/kendo-jalali-header-title-template.component';
 
 
 
 export function HeaderTitleTemplateFactory(
-  injector: Injector, resolver: ComponentFactoryResolver
+  injector: Injector
 ): any {
-  const temp = resolver.resolveComponentFactory(KendoJalaliHeaderTitleTemplateComponent as any).create(injector);
-  temp.changeDetectorRef.detectChanges();
-  return (temp.instance as KendoJalaliHeaderTitleTemplateComponent);
+  const componentRef = createComponent(KendoJalaliHeaderTitleTemplateComponent, {
+    elementInjector: injector, 
+  } as any);
+  componentRef.changeDetectorRef.detectChanges();
+  return (componentRef.instance as KendoJalaliHeaderTitleTemplateComponent);
 }

projects/tiampersian/kendo-jalali-date-inputs/src/lib/components/calendar.component.ts

@@ -2,13 +2,13 @@ import { debounceTime } from 'rxjs/operators';
 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';
 import { services } from '../providers';
+import { IntlService } from '@progress/kendo-angular-intl';
 
 let headerTitleTemplate: TemplateRef<any>;
 Object.defineProperty(CalendarComponent.prototype, 'headerTitleTemplate', {
   get(): TemplateRef<any> {
-    return headerTitleTemplate || this.injector.get(IntlService).defaultTitleTemplate;
+    return headerTitleTemplate || JalaliCldrIntlService.staticDefaultTitleTemplate;
   },
 
   set(template: TemplateRef<any>): void {
@@ -20,7 +20,7 @@ Object.defineProperty(CalendarComponent.prototype, 'headerTitleTemplate', {
 
 Object.defineProperty(MultiViewCalendarComponent.prototype, 'headerTitleTemplate', {
   get(): TemplateRef<any> {
-    return headerTitleTemplate || this.bus.injector.get(IntlService).defaultTitleTemplate;
+    return headerTitleTemplate || JalaliCldrIntlService.staticDefaultTitleTemplate;
   },
 
   set(template: TemplateRef<any>): void {
@@ -29,6 +29,7 @@ Object.defineProperty(MultiViewCalendarComponent.prototype, 'headerTitleTemplate
   enumerable: true,
   configurable: true
 });
+
 let bus;
 Object.defineProperty(MultiViewCalendarComponent.prototype, 'bus', {
   get(): any {
@@ -44,6 +45,7 @@ Object.defineProperty(MultiViewCalendarComponent.prototype, 'bus', {
   enumerable: true,
   configurable: true
 });
+
 Object.defineProperty(CalendarComponent.prototype, 'bus', {
   get(): any {
     return bus;
@@ -65,6 +67,17 @@ CalendarComponent.prototype.ngOnInit = function (): void {
   oldNgOnInit.call(this);
   const intl: JalaliCldrIntlService = this.bus.service(this.activeViewEnum).intl;
   intl.$calendarType.pipe(debounceTime(10)).subscribe(x => {
-    this.onResize();
+    me.onResize();
+    this.cdr.detectChanges();
+  });
+};
+const oldNgOnInit1 = MultiViewCalendarComponent.prototype.ngOnInit;
+MultiViewCalendarComponent.prototype.ngOnInit = function (): void {
+  const me: MultiViewCalendarComponent = this;
+  oldNgOnInit1.call(this);
+  const intl: JalaliCldrIntlService = this.bus.service(this.activeViewEnum).intl;
+  intl.$calendarType.pipe(debounceTime(100)).subscribe(x => {
+    me.navigateView(6);
+    this.cdr.detectChanges();
   });
 };

projects/tiampersian/kendo-jalali-date-inputs/src/lib/components/kendo-jalali-header-title-template/kendo-jalali-header-title-template.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Inject, TemplateRef, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { AfterViewInit, Component, Inject, TemplateRef, ViewChild, ChangeDetectorRef, SkipSelf, Host } from '@angular/core';
 import '@angular/localize';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { JalaliCldrIntlService } from '../../services/jalali-cldr-intl.service';
@@ -26,7 +26,7 @@ export class KendoJalaliHeaderTitleTemplateComponent implements AfterViewInit {
   };
 
   constructor(
-    @Inject(IntlService) private localeService: JalaliCldrIntlService,
+     private localeService: JalaliCldrIntlService,
   ) {
     this.calendarType = this.localeService.datePickerType;
   }
@@ -36,6 +36,7 @@ export class KendoJalaliHeaderTitleTemplateComponent implements AfterViewInit {
   }
 
   toggleCalendarType(event: Event): void {
+    console.log('toggleCalendarType', event)
     this.localeService.toggleType();
     this.calendarType = this.localeService.datePickerType;
     event.stopImmediatePropagation();

projects/tiampersian/kendo-jalali-date-inputs/src/lib/components/navigation.directive.ts

@@ -21,7 +21,6 @@ export class KendoDatePickerDirective {
   constructor(
     @Inject(IntlService) @Self() intl: JalaliCldrIntlService,
     @Inject(IntlService) @SkipSelf() hostIntlService: JalaliCldrIntlService,
-    @Inject('HeaderTitleTemplate') headerTitleTemplate,
     private cdr: ChangeDetectorRef
   ) {
     hostIntlService.changes.pipe(debounceTime(30)).subscribe(x => {

projects/tiampersian/kendo-jalali-date-inputs/src/lib/kendo-jalali-date-inputs.module.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { Inject, Injector, ModuleWithProviders, NgModule } from '@angular/core';
 import '@angular/localize/init';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import { IntlModule, setData } from '@progress/kendo-angular-intl';
@@ -519,6 +519,8 @@ setData({
 })
 export class KendoJalaliDateInputsModule {
   constructor(
+    injector: Injector,
+    @Inject('HeaderTitleTemplate') headerTitleTemplate,
   ) {
   }
 
@@ -530,6 +532,15 @@ export class KendoJalaliDateInputsModule {
       ]
     };
   }
+
+  static forChild(configs?: IConfig): ModuleWithProviders<KendoJalaliDateInputsModule> {
+    return {
+      ngModule: KendoJalaliDateInputsModule,
+      providers: [
+        { provide: 'CONFIGS', useValue: { ...configs } }
+      ]
+    };
+  }
 }
 
 

projects/tiampersian/kendo-jalali-date-inputs/src/lib/providers.ts

@@ -1,21 +1,23 @@
-import { ComponentFactoryResolver, Injector } from '@angular/core';
+import { Injector } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { HeaderTitleTemplateFactory } from './HeaderTitleTemplateFactory';
 import { JalaliCenturyViewService } from './services/jalali-century-view.service';
-import { JalaliDecadeViewService } from './services/jalali-decade-view.service';
 import { JalaliCldrIntlService } from './services/jalali-cldr-intl.service';
+import { JalaliDecadeViewService } from './services/jalali-decade-view.service';
 import { JalaliMonthViewService } from './services/jalali-month-view.service';
 import { JalaliWeekNamesService } from './services/jalali-week-names.service';
 import { JalaliYearViewService } from './services/jalali-year-view.service';
 
 export const Providers = [
+  // DateRangeService,
   JalaliCenturyViewService,
   JalaliDecadeViewService,
   JalaliYearViewService,
   JalaliMonthViewService,
   JalaliWeekNamesService,
-  { provide: IntlService, useClass: JalaliCldrIntlService },
-  { provide: 'HeaderTitleTemplate', useFactory: HeaderTitleTemplateFactory, deps: [Injector, ComponentFactoryResolver] },
+  JalaliCldrIntlService,
+  { provide: IntlService, useExisting: JalaliCldrIntlService },
+  { provide: 'HeaderTitleTemplate', useFactory: HeaderTitleTemplateFactory, deps: [Injector] },
 ];
 var CalendarViewEnum;
 (function (CalendarViewEnum) {

projects/tiampersian/kendo-jalali-date-inputs/src/lib/services/jalali-cldr-intl.service.ts

@@ -17,7 +17,7 @@ export class JalaliCldrIntlService extends CldrIntlService {
   get calendarType(): any {
     return this.localeIdByDatePickerType === 'fa' ? 'jalali' : 'gregory';
   }
-  defaultTitleTemplate: any;
+  static staticDefaultTitleTemplate: any;
   $calendarType = new Subject();
   isFirst = true;
 
@@ -34,11 +34,12 @@ export class JalaliCldrIntlService extends CldrIntlService {
   }
 
   setTitleTemplate(template): void {
-    this.defaultTitleTemplate = template;
+    JalaliCldrIntlService.staticDefaultTitleTemplate = template;
   }
-  changeType(value?: DatePickerType): void {
 
+  changeType(value?: DatePickerType): void {
     this.datePickerType = this.getType(value);
+
     if (this.datePickerType === DatePickerType.jalali) {
       this.isJalali = true;
       this.isGregorian = false;
@@ -96,7 +97,7 @@ export class JalaliCldrIntlService extends CldrIntlService {
       try {
         return super.formatNumber(value, format, localeId).toPerNumber();
       } catch (error) {
-        
+
       }
     }
     return super.formatNumber(value, format, localeId);

projects/tiampersian/kendo-jalali-date-inputs/src/lib/services/jalali-month-view.service.ts

@@ -89,7 +89,6 @@ export class JalaliMonthViewService extends MonthViewService {
     const isSelectedDateInRange = dayjs(selectedDate).isBetween(min, max);
     const date = dayOfWeek(firstMonthDate, this.intl.firstDay(), backward);
     const cells = range(0, CELLS_LENGTH);
-    console.log('console', this.intl.firstDay())
     const today = getToday();
     return range(0, ROWS_LENGTH).map(rowOffset => {
       const baseDate = addDays(date, rowOffset * CELLS_LENGTH);

src/app/app.component.html

@@ -427,7 +427,8 @@ <h2>Basic Usage</h2>
          style="min-height: 450px;display: flex;">
       <div class="col-xs-12 col-md-6 example-col">
         <p>DateInput</p>
-        <kendo-dateinput [(value)]="value" [format]="'yyyy/MMM/dd'"></kendo-dateinput>
+        <kendo-dateinput [(value)]="value"
+                         [format]="'yyyy/MMM/dd'"></kendo-dateinput>
         <p>(use <code>←</code> and <code>→</code> to navigate, <code>↑</code> and <code>↓</code> to update)</p>
 
         <p>DatePicker</p>
@@ -441,15 +442,26 @@ <h2>Basic Usage</h2>
       </div>
       <div class="col-xs-12 col-md-6 example-col">
         <p>DateTimePicker</p>
-        <kendo-datetimepicker [(value)]="value"  [format]="'yyyy/MMM/dd hh:mm'">
+        <kendo-datetimepicker [(value)]="value"
+                              [format]="'yyyy/MMM/dd hh:mm'">
         </kendo-datetimepicker>
         <p>(use Alt+↓ to open the popup, Alt+<code>←</code> and Alt+<code>→</code> to switch between the tabs when open)
         </p>
         <br>
         <br>
         <p>Calendar</p>
-        <kendo-calendar 
-                        [(value)]="value"></kendo-calendar>
+        <kendo-calendar [(value)]="value"></kendo-calendar>
+      </div>
+    </div>
+    <div class="row example-wrapper">
+      <div class="col-12 example-col">
+        <p>Range</p>
+        <kendo-daterange>
+          <kendo-dateinput kendoDateRangeStartInput
+                                [(value)]="range.start" />
+          <kendo-dateinput kendoDateRangeEndInput
+                                [(value)]="range.end" />
+        </kendo-daterange>
       </div>
     </div>
     <div class="row example-wrapper">
@@ -484,4 +496,4 @@ <h2>Basic Usage</h2>
 <!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 <!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

src/app/app.component.ts

@@ -19,6 +19,10 @@ export class AppComponent {
   calendarTypes = Object.values(DatePickerType);
   calendarType = '';
   currentLocaleId = '';
+  range = {
+    start: null,
+    end: null
+  }
   constructor(
     @Inject(IntlService) private localeService: JalaliCldrIntlService,
     private cdr: ChangeDetectorRef