Bugfixes (#345)

* issue341: ! fix error cannot read property 'replace' of null on 24 Hrs format

* issue342: ! fix issue with displaying time `24:xx` instead of `00:xx` with default locale

* * update version and CHANGELOG.md

* * update luxon version

* * remove NumberingSystem import

* * change builder version

Author: Agranom

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file
 
+## 5.5.3 (2020-05-28)
+
+### Fixes
+
+* fix(ngx-material-timepicker): fix error cannot read property 'replace' of null on 24 Hrs format,
+fixes [(#341)](https://github.com/Agranom/ngx-material-timepicker/issues/341)
+* fix(ngx-material-timepicker): fix issue with displaying time `24:xx` instead of `00:xx` with default locale,
+fixes [(#342)](https://github.com/Agranom/ngx-material-timepicker/issues/342)
+
 ## 5.5.2 (2020-05-11)
 
 ### Fixes

package-lock.json

@@ -1,7 +1,7 @@
 {
     "name": "ngx-material-timepicker",
     "description": "Handy material design timepicker for angular",
-    "version": "5.5.2",
+    "version": "5.5.3",
     "license": "MIT",
     "author": "Vitalii Boiko <boyko330@gmail.com>",
     "keywords": [
@@ -42,8 +42,8 @@
     "types": ".src/app/material-timepicker/index.d.ts",
     "private": false,
     "dependencies": {
-        "@types/luxon": "^1.11.1",
-        "luxon": "^1.22.0"
+        "@types/luxon": "1.11.1",
+        "luxon": "1.24.0"
     },
     "devDependencies": {
         "@angular-devkit/build-angular": "^0.800.3",
@@ -77,7 +77,7 @@
         "karma-jasmine": "~1.1.0",
         "karma-jasmine-html-reporter": "^0.2.2",
         "ng-packagr": "^5.2.0",
-        "node-sass": "^4.13.1",
+        "node-sass": "^4.14.1",
         "npm-run-all": "^4.1.3",
         "protractor": "^5.4.2",
         "rxjs": "^6.5.2",

package.json

@@ -278,7 +278,7 @@ <h3 class="ngx-material-timepicker-examples__title">Examples</h3>
     </main>
     <footer class="footer">
         <div class="container">
-            <p class="footer__version">Current version 5.5.2</p>
+            <p class="footer__version">Current version 5.5.3</p>
         </div>
     </footer>
 </div>

src/app/app.component.html

@@ -186,7 +186,7 @@ export class TimepickerDirective implements ControlValueAccessor, OnDestroy, OnC
                 this.value = time;
                 this.onChange(this.value);
                 this.onTouched();
-                this.defaultTime = this.value;
+                this.defaultTime = this._value;
             }));
         } else {
             throw new Error('NgxMaterialTimepickerComponent is not defined.' +

src/app/material-timepicker/directives/ngx-timepicker.directive.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable, Pipe, PipeTransform } from '@angular/core';
 import { TIME_LOCALE } from '../tokens/time-locale.token';
 import { TimeUnit } from '../models/time-unit.enum';
-import { DateTime, NumberingSystem } from 'luxon';
+import { DateTime } from 'luxon';
 
 type TimeMeasure = 'hour' | 'minute';
 
@@ -11,10 +11,10 @@ type TimeMeasure = 'hour' | 'minute';
 @Injectable()
 export class TimeParserPipe implements PipeTransform {
 
-    private readonly numberingSystem: NumberingSystem;
+    private readonly numberingSystem: string;
 
     constructor(@Inject(TIME_LOCALE) private locale: string) {
-        this.numberingSystem = DateTime.local().setLocale(this.locale).resolvedLocaleOpts().numberingSystem as NumberingSystem;
+        this.numberingSystem = DateTime.local().setLocale(this.locale).resolvedLocaleOpts().numberingSystem;
     }
 
     transform(time: string | number, timeUnit = TimeUnit.HOUR): number | string {

src/app/material-timepicker/pipes/time-parser.pipe.ts

@@ -1,15 +1,15 @@
-import {DateTime, DateTimeFormatOptions, LocaleOptions, NumberingSystem} from 'luxon';
+import { DateTime, LocaleOptions } from 'luxon';
 
-import {TimeFormat} from '../models/time-format.enum';
-import {TimePeriod} from '../models/time-period.enum';
-import {isBetween, isSameOrAfter, isSameOrBefore} from '../utils/timepicker.utils';
-import {TimeOptions} from '../models/time-options.interface';
+import { TimeFormat } from '../models/time-format.enum';
+import { TimePeriod } from '../models/time-period.enum';
+import { isBetween, isSameOrAfter, isSameOrBefore } from '../utils/timepicker.utils';
+import { TimeOptions } from '../models/time-options.interface';
 
 // @dynamic
 export class TimeAdapter {
     static DEFAULT_FORMAT = 12;
     static DEFAULT_LOCALE = 'en-US';
-    static DEFAULT_NUMBERING_SYSTEM: NumberingSystem = 'latn';
+    static DEFAULT_NUMBERING_SYSTEM = 'latn';
 
     static parseTime(time: string, opts: TimeOptions): DateTime {
         const {numberingSystem, locale} = TimeAdapter.getLocaleOptionsByTime(time, opts);
@@ -42,7 +42,8 @@ export class TimeAdapter {
 
     static toLocaleTimeString(time: string, opts: TimeOptions = {}): string {
         const {format = TimeAdapter.DEFAULT_FORMAT, locale = TimeAdapter.DEFAULT_LOCALE} = opts;
-        const timeFormat: DateTimeFormatOptions = {...DateTime.TIME_SIMPLE, hour12: format !== 24};
+        const hourCycle = format === 24 ? 'h23' : 'h12';
+        const timeFormat = {...DateTime.TIME_SIMPLE, hourCycle};
         const timeMask = (format === 24) ? TimeFormat.TWENTY_FOUR_SHORT : TimeFormat.TWELVE_SHORT;
 
         return DateTime.fromFormat(time, timeMask).setLocale(locale).toLocaleString(timeFormat);
@@ -105,7 +106,7 @@ export class TimeAdapter {
 
     private static getLocaleOptionsByTime(time: string, opts: TimeOptions): LocaleOptions {
         const {numberingSystem, locale} = DateTime.local().setLocale(opts.locale).resolvedLocaleOpts();
-        const localeConfig: LocaleOptions = {numberingSystem: numberingSystem as NumberingSystem, locale};
+        const localeConfig: LocaleOptions = {numberingSystem: numberingSystem, locale};
         const defaultConfig: LocaleOptions = {numberingSystem: TimeAdapter.DEFAULT_NUMBERING_SYSTEM, locale: TimeAdapter.DEFAULT_LOCALE};
 
         return isNaN(parseInt(time, 10)) ? localeConfig : defaultConfig;