@skyux/datetime 5.6.0 → 5.7.0

package/fesm2015/skyux-datetime.js

@@ -22,8 +22,6 @@ import { SkyThemeModule } from '@skyux/theme';
 
 // This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
 class SkyDateFormatUtility {
-    /* istanbul ignore next */
-    constructor() { }
     static format(locale, value, pattern) {
         let date;
         if (isBlank(value) || value !== value) {
@@ -124,7 +122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
  * The contents of this file were automatically generated by
- * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-datetime' schematic.
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-datetime' schematic.
  * To update this file, simply rerun the command.
  */
 const RESOURCES = {
@@ -2266,14 +2264,15 @@ class SkyFuzzyDatepickerInputDirective {
          */
         this.skyDatepickerNoValidate = false;
         this.dateFormatter = new SkyDateFormatter();
-        this.isFirstChange = true;
         this.ngUnsubscribe = new Subject();
         this._futureDisabled = false;
         this._disabled = false;
         this._yearRequired = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_) => { };
-        /*istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onValidatorChange = () => { };
         this.localeProvider
             .getLocaleInfo()
@@ -2363,7 +2362,9 @@ class SkyFuzzyDatepickerInputDirective {
      * through the `ngModel` attribute specified on the `input` element.
      * @required
      */
-    set skyFuzzyDatepickerInput(value) { }
+    set skyFuzzyDatepickerInput(value) {
+        // TODO: Remove this property in a future version of SKY UX.
+    }
     /**
      * Specifies the starting day of the week in the calendar, where `0` sets the starting day
      * to Sunday. Place this attribute on the `input` element to override the default
@@ -2393,50 +2394,7 @@ class SkyFuzzyDatepickerInputDirective {
         return this._value;
     }
     set value(value) {
-        let fuzzyDate;
-        let fuzzyMoment;
-        let dateValue;
-        let formattedDate;
-        if (value instanceof Date) {
-            dateValue = value;
-            formattedDate = this.dateFormatter.format(value, this.dateFormat);
-            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromSelectedDate(value, this.dateFormat);
-        }
-        else if (typeof value === 'string') {
-            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
-            formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
-            if (!formattedDate) {
-                formattedDate = value;
-            }
-            fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
-            if (fuzzyMoment) {
-                dateValue = fuzzyMoment.toDate();
-            }
-        }
-        else {
-            fuzzyDate = value;
-            formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
-            fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
-            if (fuzzyMoment) {
-                dateValue = fuzzyMoment.toDate();
-            }
-        }
-        const areFuzzyDatesEqual = this.fuzzyDatesEqual(this._value, fuzzyDate);
-        const isNewValue = fuzzyDate !== this._value || !areFuzzyDatesEqual;
-        this._value = fuzzyDate || value;
-        if (isNewValue) {
-            this.onChange(this._value);
-            // Do not mark the field as "dirty"
-            // if the field has been initialized with a value.
-            if (this.isFirstChange && this.control) {
-                this.control.markAsPristine();
-            }
-            if (this.isFirstChange && this._value) {
-                this.isFirstChange = false;
-            }
-            this.datepickerComponent.selectedDate = dateValue;
-        }
-        this.setInputElementValue(formattedDate || '');
+        this.updateValue(value);
     }
     ngOnInit() {
         if (this.yearRequired) {
@@ -2465,7 +2423,6 @@ class SkyFuzzyDatepickerInputDirective {
         this.datepickerComponent.dateChange
             .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
             .subscribe((value) => {
-            this.isFirstChange = false;
             this.value = value;
             this.onTouched();
         });
@@ -2504,7 +2461,7 @@ class SkyFuzzyDatepickerInputDirective {
         this.control.markAsDirty();
     }
     writeValue(value) {
-        this.value = value;
+        this.updateValue(value, false);
     }
     validate(control) {
         if (!this.control) {
@@ -2600,7 +2557,6 @@ class SkyFuzzyDatepickerInputDirective {
         this.onValueChange(this.elementRef.nativeElement.value);
     }
     onValueChange(newValue) {
-        this.isFirstChange = false;
         this.value = newValue;
     }
     setInputElementValue(value) {
@@ -2635,6 +2591,58 @@ class SkyFuzzyDatepickerInputDirective {
             ((!dateA.month && !dateB.month) || dateA.month === dateB.month) &&
             ((!dateA.year && !dateB.year) || dateA.year === dateB.year));
     }
+    /**
+     * Update the value of the form control and input element
+     * @param emitEvent Denotes if we emit an event to the consumer's form control. We do not want to do this if the value is being updated via a `setValue` call or a `patchValue` call as this is already handled by Angular.
+     * In these cases we do not want to fire `onChange` as it will cause extra `valueChange` and `statusChange` events and the status of the form should not be affected by these changes.
+     */
+    updateValue(value, emitEvent = true) {
+        var _a;
+        if (this._value === value) {
+            return;
+        }
+        let fuzzyDate;
+        let fuzzyMoment;
+        let dateValue;
+        let formattedDate;
+        if (value instanceof Date) {
+            dateValue = value;
+            formattedDate = this.dateFormatter.format(value, this.dateFormat);
+            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromSelectedDate(value, this.dateFormat);
+        }
+        else if (typeof value === 'string') {
+            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
+            formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
+            if (!formattedDate) {
+                formattedDate = value;
+            }
+            fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
+            if (fuzzyMoment) {
+                dateValue = fuzzyMoment.toDate();
+            }
+        }
+        else {
+            fuzzyDate = value;
+            formattedDate = this.fuzzyDateService.format(fuzzyDate, this.dateFormat, this.locale);
+            fuzzyMoment = this.fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
+            if (fuzzyMoment) {
+                dateValue = fuzzyMoment.toDate();
+            }
+        }
+        const areFuzzyDatesEqual = this.fuzzyDatesEqual(this._value, fuzzyDate);
+        const isNewValue = fuzzyDate !== this._value || !areFuzzyDatesEqual;
+        this._value = fuzzyDate || value;
+        if (isNewValue) {
+            if (emitEvent) {
+                this.onChange(this._value);
+            }
+            else {
+                (_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(this._value, { emitEvent: false });
+            }
+            this.datepickerComponent.selectedDate = dateValue;
+        }
+        this.setInputElementValue(formattedDate || '');
+    }
 }
 SkyFuzzyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 SkyFuzzyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", skyFuzzyDatepickerInput: "skyFuzzyDatepickerInput", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
@@ -2709,11 +2717,12 @@ class SkyDatepickerInputDirective {
          */
         this.skyDatepickerNoValidate = false;
         this.dateFormatter = new SkyDateFormatter();
-        this.isFirstChange = true;
         this.ngUnsubscribe = new Subject();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_) => { };
-        /*istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onValidatorChange = () => { };
         this.initialPlaceholder = this.adapter.getPlaceholder(this.elementRef);
         this.updatePlaceholder();
@@ -2834,28 +2843,7 @@ class SkyDatepickerInputDirective {
         return this._value;
     }
     set value(value) {
-        const dateValue = this.getDateValue(value);
-        const areDatesEqual = this._value instanceof Date &&
-            dateValue &&
-            dateValue.getTime() === this._value.getTime();
-        const isValidDateString = this.isDateStringValid(value);
-        // If the string value supplied is malformed, do not set the value to its Date equivalent.
-        // (JavaScript's Date parser will convert poorly formatted dates to Date objects, such as "abc 123", which isn't ideal.)
-        if (!isValidDateString) {
-            this._value = value;
-            this.notifyUpdatedValue();
-        }
-        else if (dateValue !== this._value || !areDatesEqual) {
-            this._value = dateValue || value;
-            this.notifyUpdatedValue();
-        }
-        if (dateValue && isValidDateString) {
-            const formattedDate = this.dateFormatter.format(dateValue, this.dateFormat);
-            this.setInputElementValue(formattedDate);
-        }
-        else {
-            this.setInputElementValue(value || '');
-        }
+        this.updateValue(value);
     }
     ngOnInit() {
         if (!this.datepickerComponent) {
@@ -2879,7 +2867,6 @@ class SkyDatepickerInputDirective {
             .pipe(distinctUntilChanged())
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((value) => {
-            this.isFirstChange = false;
             this.value = value;
             this.onTouched();
         });
@@ -2931,7 +2918,7 @@ class SkyDatepickerInputDirective {
         this.control.markAsDirty();
     }
     writeValue(value) {
-        this.value = value;
+        this.updateValue(value, false);
     }
     validate(control) {
         if (!this.control) {
@@ -3002,7 +2989,6 @@ class SkyDatepickerInputDirective {
         }
     }
     onValueChange(newValue) {
-        this.isFirstChange = false;
         this.value = newValue;
     }
     setInputElementValue(value) {
@@ -3029,7 +3015,7 @@ class SkyDatepickerInputDirective {
             return true;
         }
         // Does the value only include digits, dashes, or slashes?
-        const regexp = /^[\d\/\-]+$/;
+        const regexp = /^[\d/-]+$/;
         const isValid = regexp.test(value);
         if (isValid) {
             return true;
@@ -3038,23 +3024,56 @@ class SkyDatepickerInputDirective {
         const isValidIso = moment(value, moment.ISO_8601).isValid();
         return isValidIso;
     }
-    notifyUpdatedValue() {
-        this.onChange(this._value);
-        // Do not mark the field as "dirty"
-        // if the field has been initialized with a value.
-        if (this.isFirstChange && this.control) {
-            this.control.markAsPristine();
-        }
-        if (this.isFirstChange && this._value) {
-            this.isFirstChange = false;
-        }
-        this.datepickerComponent.selectedDate = this._value;
-    }
     updatePlaceholder() {
         if (!this.initialPlaceholder) {
             this.adapter.setPlaceholder(this.elementRef, this.dateFormat);
         }
     }
+    /**
+     * Update the value of the form control and input element
+     * @param emitEvent Denotes if we emit an event to the consumer's form control. We do not want to do this if the value is being updated via a `setValue` call or a `patchValue` call as this is already handled by Angular.
+     * In these cases we do not want to fire `onChange` as it will cause extra `valueChange` and `statusChange` events and the status of the form should not be affected by these changes.
+     */
+    updateValue(value, emitEvent = true) {
+        var _a, _b;
+        if (this._value === value) {
+            return;
+        }
+        const dateValue = this.getDateValue(value);
+        const areDatesEqual = this._value instanceof Date &&
+            dateValue &&
+            dateValue.getTime() === this._value.getTime();
+        const isValidDateString = this.isDateStringValid(value);
+        // If the string value supplied is malformed, do not set the value to its Date equivalent.
+        // (JavaScript's Date parser will convert poorly formatted dates to Date objects, such as "abc 123", which isn't ideal.)
+        if (!isValidDateString) {
+            this._value = value;
+            if (emitEvent) {
+                this.onChange(this._value);
+            }
+            else {
+                (_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(this._value, { emitEvent: false });
+            }
+            this.datepickerComponent.selectedDate = this._value;
+        }
+        else if (dateValue !== this._value || !areDatesEqual) {
+            this._value = dateValue || value;
+            if (emitEvent) {
+                this.onChange(this._value);
+            }
+            else {
+                (_b = this.control) === null || _b === void 0 ? void 0 : _b.setValue(this._value, { emitEvent: false });
+            }
+            this.datepickerComponent.selectedDate = this._value;
+        }
+        if (dateValue && isValidDateString) {
+            const formattedDate = this.dateFormatter.format(dateValue, this.dateFormat);
+            this.setInputElementValue(formattedDate);
+        }
+        else {
+            this.setInputElementValue(value || '');
+        }
+    }
 }
 SkyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 SkyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
@@ -3182,9 +3201,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @dynamic
  */
 class SkyDateRangeRelativeValue {
-    // Abstract classes are not covered properly.
-    /* istanbul ignore next */
-    constructor() { }
     static get today() {
         const today = new Date();
         return {
@@ -3684,12 +3700,13 @@ let uniqueId = 0;
  * ```
  */
 class SkyDateRangePickerComponent {
-    constructor(changeDetector, dateRangeService, formBuilder, localeProvider, windowRef, themeSvc) {
+    constructor(changeDetector, dateRangeService, formBuilder, localeProvider, windowRef, ngZone, themeSvc) {
         this.changeDetector = changeDetector;
         this.dateRangeService = dateRangeService;
         this.formBuilder = formBuilder;
         this.localeProvider = localeProvider;
         this.windowRef = windowRef;
+        this.ngZone = ngZone;
         /**
          * Indicates whether to require users to specify a start date.
          * @default false
@@ -3706,11 +3723,11 @@ class SkyDateRangePickerComponent {
         this.showStartDatePicker = false;
         this.ngUnsubscribe = new Subject();
         this._disabled = false;
-        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_) => { };
-        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onTouched = () => { };
-        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onValidatorChange = () => { };
         this.localeProvider
             .getLocaleInfo()
@@ -3833,24 +3850,27 @@ class SkyDateRangePickerComponent {
         this.updateCalculators().then(() => {
             this.addEventListeners();
             this.isReady = true;
-            this.resetFormGroupValue();
             this.showRelevantFormFields();
-            // Fill in any unprovided values after the calculators have been initialized.
-            // For example, if the control is initialized with only the `calculatorId`,
-            // allow the calculator to fill in the missing start and end dates.
-            const { startDate, endDate } = this.value;
-            const defaultValue = this.selectedCalculator.getValue(startDate, endDate);
-            const newValue = Object.assign({}, defaultValue, this.value);
-            this.setValue(newValue, false);
-            // This is needed to address a bug in Angular 4.
-            // When a control value is set intially, its value is not represented on the view.
-            // See: https://github.com/angular/angular/issues/13792
-            /* istanbul ignore else */
-            if (this.control) {
-                this.control.setValue(this.value, {
-                    emitEvent: false,
-                });
-            }
+            // We need to let Angular be stable and have rendered the components prior to setting the values and form controls. This ensures all initial validation will be ran correctly.
+            this.ngZone.onStable.pipe(first()).subscribe(() => {
+                // Fill in any unprovided values after the calculators have been initialized.
+                // For example, if the control is initialized with only the `calculatorId`,
+                // allow the calculator to fill in the missing start and end dates.
+                const { startDate, endDate } = this.value;
+                const defaultValue = this.selectedCalculator.getValue(startDate, endDate);
+                const newValue = Object.assign({}, defaultValue, this.value);
+                this.setValue(newValue, false);
+                this.resetFormGroupValue();
+                // This is needed to address a bug in Angular 4.
+                // When a control value is set intially, its value is not represented on the view.
+                // See: https://github.com/angular/angular/issues/13792
+                /* istanbul ignore else */
+                if (this.control) {
+                    this.control.setValue(this.value, {
+                        emitEvent: false,
+                    });
+                }
+            });
         });
     }
     ngOnChanges(changes) {
@@ -3989,46 +4009,26 @@ class SkyDateRangePickerComponent {
         this.changeDetector.markForCheck();
     }
     resetFormGroupValue(value) {
-        // Do not emit a value change event on the underlying form group
-        // because we're already watching for changes that are triggered by the end user.
-        // For example, if we change the value of the form group internally, we don't want the event
-        // listeners to be triggered, as those are reserved for user interactions.
-        // (See the event listeners listed below.)
-        this.formGroup.reset(value || this.value, {
-            emitEvent: false,
-        });
+        this.formGroup.reset(value || this.value);
     }
     addEventListeners() {
-        // Detect errors from the date pickers
-        // when control is initialized with a value.
-        combineLatest([
-            this.startDateControl.statusChanges,
-            this.endDateControl.statusChanges,
-        ])
-            .pipe(first())
-            .subscribe((status) => {
-            if (status.indexOf('INVALID') > -1) {
-                // Wait for initial validation to complete.
-                this.windowRef.nativeWindow.setTimeout(() => {
-                    this.onValidatorChange();
-                });
-            }
-        });
         // Watch for selected calculator change.
         this.calculatorIdControl.valueChanges
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((value) => {
-            const id = parseInt(value, 10);
-            // if the component is disabled during form creation, null is passed
-            // as the value of the calculator id control
-            // only handle the value changes if the calculator id is a number
-            /* istanbul ignore else */
-            if (!isNaN(id)) {
-                const calculator = this.getCalculatorById(id);
-                const newValue = calculator.getValue();
-                this.setValue(newValue);
-                this.resetFormGroupValue(newValue);
-                this.showRelevantFormFields();
+            if (value !== this.value.calculatorId) {
+                const id = parseInt(value, 10);
+                // if the component is disabled during form creation, null is passed
+                // as the value of the calculator id control
+                // only handle the value changes if the calculator id is a number
+                /* istanbul ignore else */
+                if (!isNaN(id)) {
+                    const calculator = this.getCalculatorById(id);
+                    const newValue = calculator.getValue();
+                    this.setValue(newValue);
+                    this.resetFormGroupValue(newValue);
+                    this.showRelevantFormFields();
+                }
             }
         });
         // Watch for start date value changes.
@@ -4051,6 +4051,11 @@ class SkyDateRangePickerComponent {
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(() => {
             this.changeDetector.markForCheck();
+            // Wait for initial validation to complete.
+            this.ngZone.onStable.pipe(first()).subscribe(() => {
+                var _a;
+                (_a = this.control) === null || _a === void 0 ? void 0 : _a.updateValueAndValidity({ emitEvent: false });
+            });
         });
     }
     updateCalculators() {
@@ -4070,7 +4075,7 @@ class SkyDateRangePickerComponent {
         return JSON.stringify(rangeA) === JSON.stringify(rangeB);
     }
 }
-SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2$2.FormBuilder }, { token: i3.SkyAppLocaleProvider }, { token: i1.SkyAppWindowRef }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyDateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2$2.FormBuilder }, { token: i3.SkyAppLocaleProvider }, { token: i1.SkyAppWindowRef }, { token: i0.NgZone }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
         SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
         SKY_DATE_RANGE_PICKER_VALIDATOR,
@@ -4087,7 +4092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2$2.FormBuilder }, { type: i3.SkyAppLocaleProvider }, { type: i1.SkyAppWindowRef }, { type: i3$2.SkyThemeService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2$2.FormBuilder }, { type: i3.SkyAppLocaleProvider }, { type: i1.SkyAppWindowRef }, { type: i0.NgZone }, { type: i3$2.SkyThemeService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { calculatorIds: [{
                 type: Input
@@ -4177,7 +4182,6 @@ class SkyTimepickerComponent {
         return this._disabled;
     }
     set selectedHour(setHour) {
-        let hour;
         let hourOffset = 0;
         if (this.selectedMeridies === 'AM' && setHour === 12) {
             hourOffset = -12;
@@ -4188,7 +4192,7 @@ class SkyTimepickerComponent {
         if (this.is8601) {
             hourOffset = 0;
         }
-        hour = moment({ hour: setHour }).add(hourOffset, 'hours').hour();
+        const hour = moment({ hour: setHour }).add(hourOffset, 'hours').hour();
         this.activeTime = moment({
             hour: hour,
             minute: moment(this.activeTime).get('minute') + 0,
@@ -4308,9 +4312,9 @@ class SkyTimepickerComponent {
             localeFormat = 'HH:mm';
             this.is8601 = true;
         }
-        let data;
-        data = {
-            hours: Array.apply(undefined, Array(h)).map(function (x, i) {
+        const data = {
+            // Create a sparse array with a length equal to the hour.
+            hours: Array(...Array(h)).map((_, i) => {
                 if (format === 'hh') {
                     return ++i;
                 }
@@ -4322,7 +4326,8 @@ class SkyTimepickerComponent {
                 /* sanity check */
                 return 0;
             }),
-            minutes: Array.apply(undefined, Array(m)).map(function (x, i) {
+            // Create a sparse array with a length equal to the minute.
+            minutes: Array(...Array(m)).map(function (_, i) {
                 return i * minuteMultiplier;
             }),
             localeFormat: localeFormat,
@@ -4512,11 +4517,11 @@ class SkyTimepickerInputDirective {
         this.resourcesService = resourcesService;
         this.changeDetector = changeDetector;
         this._timeFormat = 'hh';
-        /*istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onChange = (_) => { };
-        /*istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._onTouched = () => { };
-        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         this._validatorChange = () => { };
     }
     /**
@@ -4659,7 +4664,6 @@ class SkyTimepickerInputDirective {
                 return '';
             }
             let currentFormat;
-            let formatTime;
             if (this.timeFormat === 'hh') {
                 currentFormat = 'h:mm A';
             }
@@ -4669,7 +4673,7 @@ class SkyTimepickerInputDirective {
             if (typeof this.returnFormat === 'undefined') {
                 this.returnFormat = currentFormat;
             }
-            formatTime = {
+            const formatTime = {
                 hour: moment(time, currentFormat).hour(),
                 minute: moment(time, currentFormat).minute(),
                 meridie: moment(time, currentFormat).format('A'),