0.2.0-alpha - extract parser to @annotation/ng-parse, allow configura…

…ble parser methods see NgDatepickerConf

README.md

@@ -11,8 +11,10 @@
 ## Install
 
 ```sh
+yarn add @annotation/ng-parser ## peer dependency
 yarn add @annotation/ng-datepicker
 ## OR ##
+npm install @annotation/ng-parser --save  ## peer dependency
 npm install @annotation/ng-datepicker --save
 ```
 

ng-a-date-picker/package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser": "~11.0.1",
     "@angular/platform-browser-dynamic": "~11.0.1",
     "@angular/router": "~11.0.1",
+    "@annotation/ng-parse": "^1.0.0",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

ng-a-date-picker/projects/ng-datepicker/ng-package.json

@@ -5,6 +5,5 @@
     "entryFile": "src/public-api.ts"
   },
   "whitelistedNonPeerDependencies": [
-
   ]
 }

ng-a-date-picker/projects/ng-datepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotation/ng-datepicker",
-  "version": "0.1.20-alpha",
+  "version": "0.2.0-alpha",
   "description": "Angular datepicker - work in progress",
   "scripts": {
     "release": "dotenv release-it"
@@ -10,7 +10,8 @@
     "@angular/core": "^11.0.5",
     "@angular/forms": "^11.0.5",
     "@angular/localize": "^11.0.5",
-    "rxjs": "^6.6.3"
+    "rxjs": "^6.6.3",
+    "@annotation/ng-parse": "^1.0.0"
   },
   "repository": {
     "type": "git",

ng-a-date-picker/projects/ng-datepicker/src/lib/components/popup/popup.component.ts

@@ -1,17 +1,11 @@
-import {Component, ElementRef, Input, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
-import {
-  formatDate,
-  FormStyle,
-  getLocaleDayNames,
-  getLocaleFirstDayOfWeek,
-  TranslationWidth,
-  WeekDay
-} from '@angular/common';
-import {NgModel} from '@angular/forms';
-import {NgDateDirectiveApi} from '../../directives/ng-date/ng-date.directive.api';
-import {NgDateConfigUtil} from '../../conf/ng-date.config.util';
-import {BasicDateFormat, HtmlValueConfig} from '../../model/ng-date-public.model';
-import {DateType, getDateFormatParser} from '../../parsers/parse-date';
+import { Component, ElementRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { formatDate, FormStyle, getLocaleDayNames, getLocaleFirstDayOfWeek, TranslationWidth, WeekDay } from '@angular/common';
+import { NgModel } from '@angular/forms';
+import { BasicDateFormat, DateType } from '@annotation/ng-parse';
+import { NgDateDirectiveApi } from '../../directives/ng-date/ng-date.directive.api';
+import { NgDateConfigUtil } from '../../conf/ng-date.config.util';
+import { HtmlValueConfig } from '../../model/ng-date-public.model';
+import { ParseService } from '../../services/parse.service';
 
 @Component({
   selector: 'ng-date-popup',
@@ -59,7 +53,7 @@ export class PopupComponent implements OnInit, OnDestroy {
     return this._val;
   }
 
-  constructor(private _elementRef: ElementRef<HTMLElement>) {
+  constructor(private _elementRef: ElementRef<HTMLElement>, private parse: ParseService) {
     const myDate = new Date();
     const timePortion = (myDate.getTime() - myDate.getTimezoneOffset() * 60 * 1000) % (3600 * 1000 * 24);
     this._today = new Date(+myDate - timePortion);
@@ -111,7 +105,7 @@ export class PopupComponent implements OnInit, OnDestroy {
   };
 
   private configureCalendarContent(conf: HtmlValueConfig) {
-    const {types} = getDateFormatParser(this.locale, conf.displayFormat as BasicDateFormat);
+    const { types } = this.parse.getDateFormatParser(this.locale, conf.displayFormat as BasicDateFormat);
 
     if (!this.config) {
       // TODO - mfilo - 27.01.2021 - typings!!!
@@ -342,19 +336,19 @@ const utils = {
       const day = prevMonthStart + i;
       const date = new Date(prevYearNumber, prevMonthNumber, day);
       const dayOfWeek = utils.getDayOfWeek(date, firstDayOfWeek);
-      days.push({day, currentMonth: false, date, dayOfWeek});
+      days.push({ day, currentMonth: false, date, dayOfWeek });
     }
 
     for (let j = 1; j <= currMonthDays; j++) {
       const date = new Date(year, month, j);
       const dayOfWeek = utils.getDayOfWeek(date, firstDayOfWeek);
-      days.push({day: j, currentMonth: true, date, dayOfWeek});
+      days.push({ day: j, currentMonth: true, date, dayOfWeek });
     }
 
     for (let k = 1; k <= lastDayOfMonth; k++) {
       const date = new Date(nexyYearNumber, nextMonthNumber, k);
       const dayOfWeek = utils.getDayOfWeek(date, firstDayOfWeek);
-      days.push({day: k, currentMonth: false, date, dayOfWeek});
+      days.push({ day: k, currentMonth: false, date, dayOfWeek });
     }
 
     return days;

ng-a-date-picker/projects/ng-datepicker/src/lib/conf/has-ng-date-conf.ts

@@ -1,10 +1,6 @@
+import { BasicDateFormat } from '@annotation/ng-parse';
 import { NgDatepickerConf } from './ng-datepicker.conf';
-import {
-  ApiNgDateModelValueConverter,
-  BasicDateFormat,
-  NgDateConfig,
-  StandardModelValueConverters,
-} from '../model/ng-date-public.model';
+import { ApiNgDateModelValueConverter, NgDateConfig, StandardModelValueConverters } from '../model/ng-date-public.model';
 
 export interface HasNgDateConf {
   ngDateConfig?: BasicDateFormat | NgDateConfig;

ng-a-date-picker/projects/ng-datepicker/src/lib/conf/ng-date.config.util.ts

@@ -1,3 +1,4 @@
+import { BasicDateFormat } from '@annotation/ng-parse';
 import { DefaultFormattedModelValueConverter } from '../converters/DefaultFormattedModelValueConverter';
 import { DefaultDateModelValueConverter } from '../converters/DefaultDateModelValueConverter';
 import { DefaultNumberModelValueConverter } from '../converters/DefaultNumberModelValueConverter';
@@ -6,7 +7,6 @@ import { NgDatepickerConf } from './ng-datepicker.conf';
 import { HasNgDateConf } from './has-ng-date-conf';
 import {
   ApiNgDateModelValueConverter,
-  BasicDateFormat,
   HtmlValueConfig,
   NgDateConfig,
   StandardModelValueConverters,

ng-a-date-picker/projects/ng-datepicker/src/lib/conf/ng-datepicker.conf.ts

@@ -1,10 +1,19 @@
 // https://www.usefuldev.com/post/Angular:%20Creating%20configurable%20libraries%20with%20angular%20cli
 
-import { BasicDateFormat, NgDateConfig } from '../model/ng-date-public.model';
+import { BasicDateFormat, DateParser } from '@annotation/ng-parse';
+import { NgDateConfig } from '../model/ng-date-public.model';
 
 type DateFormatConfig = { [key in BasicDateFormat]?: NgDateConfig };
+type DateParserConfig = {
+  parseDate: (value: string, format: BasicDateFormat | string, locale: string, oldValue?: Date) => Date;
+  getDateFormatParser: (locale: string, format: BasicDateFormat | string) => DateParser;
+  toDate: (value: string | number | Date) => Date;
+};
 
 export interface NgDatepickerConf extends DateFormatConfig {
+  // custom date parsing
+  parser?: DateParserConfig;
+
   // common default config
   all?: NgDateConfig;
 

ng-a-date-picker/projects/ng-datepicker/src/lib/converters/DefaultDateModelValueConverter.ts

@@ -1,11 +1,26 @@
-import { toDate } from '../parsers/format-date';
 import { ApiNgDateModelValueConverter } from '../model/ng-date-public.model';
+import { ParseService } from '../services/parse.service';
+import { ServiceLocator } from '../services/service-locator';
 
 export class DefaultDateModelValueConverter implements ApiNgDateModelValueConverter<Date> {
   static readonly INSTANCE = new DefaultDateModelValueConverter();
 
+  private parse: ParseService;
+  constructor() {
+    const isReady = ServiceLocator.onReady.getValue();
+    if (!isReady) {
+      ServiceLocator.onReady.subscribe((value) => {
+        if (value) {
+          this.parse = ServiceLocator.injector.get(ParseService);
+        }
+      });
+    } else {
+      this.parse = ServiceLocator.injector.get(ParseService);
+    }
+  }
+
   fromModel(value: string | number | Date): Date {
-    return toDate(value);
+    return this.parse.toDate(value);
   }
 
   toModel(value: Date): Date {

ng-a-date-picker/projects/ng-datepicker/src/lib/converters/DefaultFormattedModelValueConverter.ts

@@ -1,8 +1,8 @@
 import { formatDate } from '@angular/common';
-import { parseDate } from '../parsers/parse-date';
-import { toDate } from '../parsers/format-date';
 import { NgDateConfigUtil } from '../conf/ng-date.config.util';
 import { ApiNgDateModelValueConverter, ApiNgDateModelValueConverterConf } from '../model/ng-date-public.model';
+import { ParseService } from '../services/parse.service';
+import { ServiceLocator } from '../services/service-locator';
 
 const localeIso = 'en-US';
 
@@ -33,7 +33,19 @@ export class DefaultFormattedModelValueConverter implements ApiNgDateModelValueC
     localeIso
   );
 
-  constructor(private dateFormat: string, private locale?: string, private timezone?: string) {}
+  private parse: ParseService;
+  constructor(private dateFormat: string, private locale?: string, private timezone?: string) {
+    const isReady = ServiceLocator.onReady.getValue();
+    if (!isReady) {
+      ServiceLocator.onReady.subscribe((value) => {
+        if (value) {
+          this.parse = ServiceLocator.injector.get(ParseService);
+        }
+      });
+    } else {
+      this.parse = ServiceLocator.injector.get(ParseService);
+    }
+  }
 
   fromModel(value: any, oldValue: Date, opts: ApiNgDateModelValueConverterConf): Date {
     if (NgDateConfigUtil.isStringConstant(value)) {
@@ -42,9 +54,9 @@ export class DefaultFormattedModelValueConverter implements ApiNgDateModelValueC
       if (!locale && opts) locale = opts.locale; // tuto je defaultne definovane 'en-US' a teda ignoruje locale z conf
       if (!locale) locale = localeIso;
 
-      return parseDate(value, this.dateFormat, locale);
+      return this.parse.parseDate(value, this.dateFormat, locale);
     }
-    return toDate(value);
+    return this.parse.toDate(value);
   }
 
   toModel(value: Date, oldModel: string, opts: ApiNgDateModelValueConverterConf): string {

ng-a-date-picker/projects/ng-datepicker/src/lib/converters/DefaultIsoStringModelValueConverter.ts

@@ -1,12 +1,27 @@
-import { toDate } from '../parsers/format-date';
 import { ApiNgDateModelValueConverter } from '../model/ng-date-public.model';
+import { ParseService } from '../services/parse.service';
+import { ServiceLocator } from '../services/service-locator';
 
 export class DefaultIsoStringModelValueConverter implements ApiNgDateModelValueConverter<string> {
   static readonly INSTANCE = new DefaultIsoStringModelValueConverter();
 
+  private parse: ParseService;
+  constructor() {
+    const isReady = ServiceLocator.onReady.getValue();
+    if (!isReady) {
+      ServiceLocator.onReady.subscribe((value) => {
+        if (value) {
+          this.parse = ServiceLocator.injector.get(ParseService);
+        }
+      });
+    } else {
+      this.parse = ServiceLocator.injector.get(ParseService);
+    }
+  }
+
   fromModel(value: string): Date {
     if (!value || !value?.trim()?.length) return null;
-    return toDate(value);
+    return this.parse.toDate(value);
   }
 
   toModel(value: Date): string {

ng-a-date-picker/projects/ng-datepicker/src/lib/converters/DefaultNumberModelValueConverter.ts

@@ -1,11 +1,26 @@
 import { ApiNgDateModelValueConverter } from '../model/ng-date-public.model';
-import { toDate } from '../parsers/format-date';
+import { ParseService } from '../services/parse.service';
+import { ServiceLocator } from '../services/service-locator';
 
 export class DefaultNumberModelValueConverter implements ApiNgDateModelValueConverter<number> {
   static readonly INSTANCE = new DefaultNumberModelValueConverter();
 
+  private parse: ParseService;
+  constructor() {
+    const isReady = ServiceLocator.onReady.getValue();
+    if (!isReady) {
+      ServiceLocator.onReady.subscribe((value) => {
+        if (value) {
+          this.parse = ServiceLocator.injector.get(ParseService);
+        }
+      });
+    } else {
+      this.parse = ServiceLocator.injector.get(ParseService);
+    }
+  }
+
   fromModel(value: string | number | Date): Date {
-    return toDate(value);
+    return this.parse.toDate(value);
   }
 
   toModel(value: Date): number {

ng-a-date-picker/projects/ng-datepicker/src/lib/directives/ng-date/ng-date.directive.ts

@@ -16,19 +16,15 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import { COMPOSITION_BUFFER_MODE, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { parseDate } from '../../parsers/parse-date';
+import { BasicDateFormat } from '@annotation/ng-parse';
 import { NG_DATEPICKER_CONF } from '../../conf/ng-datepicker.conf.token';
 import { NgDatepickerConf } from '../../conf/ng-datepicker.conf';
-import {
-  ApiNgDateModelValueConverter,
-  BasicDateFormat,
-  NgDateConfig,
-  StandardModelValueConverters,
-} from '../../model/ng-date-public.model';
+import { ApiNgDateModelValueConverter, NgDateConfig, StandardModelValueConverters } from '../../model/ng-date-public.model';
 import { PopupComponent } from '../../components/popup/popup.component';
 import { NgDateConfigUtil } from '../../conf/ng-date.config.util';
 import { HasNgDateConf } from '../../conf/has-ng-date-conf';
 import { NgDateDirectiveApi, NgDateValue } from './ng-date.directive.api';
+import { ParseService } from '../../services/parse.service';
 
 /**
  * We must check whether the agent is Android because composition events
@@ -127,6 +123,7 @@ export class NgDateDirective implements ControlValueAccessor, HasNgDateConf, NgD
     private elementRef: ElementRef,
     private _viewContainerRef: ViewContainerRef,
     private _componentFactoryResolver: ComponentFactoryResolver,
+    private parse: ParseService,
     @Optional() @Inject(NG_DATEPICKER_CONF) public ngDatepickerConf: NgDatepickerConf,
     @Inject(LOCALE_ID) public locale: string,
     @Optional() @Inject(COMPOSITION_BUFFER_MODE) private _compositionMode: boolean
@@ -300,7 +297,7 @@ export class NgDateDirective implements ControlValueAccessor, HasNgDateConf, NgD
   // 3) convert(htmlValue, dtValue/old) => dtValue/new
   private convertHtmlValueToDtValue(htmlValue: string, dtValue: Date): Date | null {
     const htmlValueConfig = NgDateConfigUtil.resolveHtmlValueConfig(this);
-    return parseDate(htmlValue, htmlValueConfig.displayFormat, htmlValueConfig.locale, dtValue);
+    return this.parse.parseDate(htmlValue, htmlValueConfig.displayFormat, htmlValueConfig.locale, dtValue);
   }
 
   // 4) convert(dtValue, ngValue/old) => ngValue/new

ng-a-date-picker/projects/ng-datepicker/src/lib/directives/validators/max-date.directive.ts

@@ -1,12 +1,8 @@
 import { Directive, forwardRef, Inject, Input, LOCALE_ID, Optional } from '@angular/core';
 import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
+import { BasicDateFormat } from '@annotation/ng-parse';
 import { NgDateValidators } from './validate.conf';
-import {
-  ApiNgDateModelValueConverter,
-  BasicDateFormat,
-  NgDateConfig,
-  StandardModelValueConverters,
-} from '../../model/ng-date-public.model';
+import { ApiNgDateModelValueConverter, NgDateConfig, StandardModelValueConverters } from '../../model/ng-date-public.model';
 import { NG_DATEPICKER_CONF } from '../../conf/ng-datepicker.conf.token';
 import { NgDatepickerConf } from '../../conf/ng-datepicker.conf';
 import { HasNgDateConf } from '../../conf/has-ng-date-conf';

ng-a-date-picker/projects/ng-datepicker/src/lib/directives/validators/min-date.directive.ts

@@ -1,15 +1,11 @@
 import { Directive, forwardRef, Inject, Input, LOCALE_ID, Optional } from '@angular/core';
 import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
+import { BasicDateFormat } from '@annotation/ng-parse';
 import { NG_DATEPICKER_CONF } from '../../conf/ng-datepicker.conf.token';
 import { NgDatepickerConf } from '../../conf/ng-datepicker.conf';
 import { NgDateValidators } from './validate.conf';
 import { HasNgDateConf } from '../../conf/has-ng-date-conf';
-import {
-  ApiNgDateModelValueConverter,
-  BasicDateFormat,
-  NgDateConfig,
-  StandardModelValueConverters,
-} from '../../model/ng-date-public.model';
+import { ApiNgDateModelValueConverter, NgDateConfig, StandardModelValueConverters } from '../../model/ng-date-public.model';
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector