@skyux/datetime 5.7.2 → 6.0.0-beta.2

package/fesm2015/skyux-datetime.mjs

@@ -0,0 +1,4726 @@
+import * as i0 from '@angular/core';
+import { Pipe, NgModule, Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, ElementRef, TemplateRef, Optional, forwardRef, Directive, HostListener } from '@angular/core';
+import { Subject, fromEvent, BehaviorSubject, forkJoin, combineLatest } from 'rxjs';
+import { takeUntil, debounceTime, distinctUntilChanged, first, map } from 'rxjs/operators';
+import * as i3 from '@skyux/i18n';
+import { SkyIntlDateFormatter, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import moment from 'moment';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i2$1 from '@skyux/forms';
+import { SkyInputBoxModule } from '@skyux/forms';
+import * as i1 from '@skyux/core';
+import { SkyAffixAutoFitContext, SkyAffixModule, SkyOverlayModule } from '@skyux/core';
+import * as i2 from '@skyux/indicators';
+import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
+import * as i3$1 from '@skyux/popovers';
+import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
+import * as i3$2 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+
+// This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
+class SkyDateFormatUtility {
+    static format(locale, value, pattern) {
+        let date;
+        if (isBlank(value) || value !== value) {
+            return undefined;
+        }
+        // Moment will interpret any non-date object as today's date. That would
+        // introduce a breaking change, so we check for it here. This could probably be removed
+        // in a future major version.
+        if (value instanceof Object && !(value instanceof Date)) {
+            handleInvalidDate(value);
+        }
+        // Use moment to avoid inconsistencies between browsers interpreting the value differently.
+        const momentDate = moment(value);
+        if (momentDate.isValid()) {
+            date = momentDate.toDate();
+        }
+        else {
+            handleInvalidDate(value);
+        }
+        return SkyIntlDateFormatter.format(date, locale, SkyDateFormatUtility._ALIASES[pattern] || pattern);
+    }
+}
+SkyDateFormatUtility._ALIASES = {
+    medium: 'yMMMdjms',
+    short: 'yMdjm',
+    fullDate: 'yMMMMEEEEd',
+    longDate: 'yMMMMd',
+    mediumDate: 'yMMMd',
+    shortDate: 'yMd',
+    mediumTime: 'jms',
+    shortTime: 'jm',
+};
+function isBlank(obj) {
+    return !obj;
+}
+function handleInvalidDate(value) {
+    throw new Error('Invalid value: ' + value);
+}
+
+/**
+ * Formats date values according to locale rules.
+ * @example
+ * ```markup
+ * {{ myDate | skyDate }}
+ * {{ myDate | skyDate:'medium' }}
+ * {{ myDate | skyDate:'medium':'en-CA' }}
+ * ```
+ */
+class SkyDatePipe {
+    constructor(localeProvider) {
+        this.localeProvider = localeProvider;
+        this.defaultFormat = 'short';
+        this.defaultLocale = 'en-US';
+        this.ngUnsubscribe = new Subject();
+        this.localeProvider
+            .getLocaleInfo()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((localeInfo) => {
+            this.defaultLocale = localeInfo.locale;
+            this.updateFormattedValue();
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    /**
+     * Transforms a date value using locale and format rules.
+     * @param value Specifies the date value to transform.
+     * @param format Specifies the format to apply to the transform. The format string is
+     * constructed by a series of symbols that represent date-time values. The symbols are
+     * identical to [Angular's `DatePipe`](https://angular.io/api/common/DatePipe#pre-defined-format-options) format options.
+     * @param locale Specifies the locale code to use in the transform.
+     */
+    transform(value, format, locale) {
+        this.value = value;
+        this.format = format;
+        this.locale = locale;
+        this.updateFormattedValue();
+        return this.formattedValue;
+    }
+    updateFormattedValue() {
+        const locale = this.locale || this.defaultLocale;
+        const format = this.format || this.defaultFormat;
+        this.formattedValue = SkyDateFormatUtility.format(locale, this.value, format);
+    }
+}
+SkyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatePipe, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDate',
+                    pure: false,
+                }]
+        }], ctorParameters: function () { return [{ type: i3.SkyAppLocaleProvider }]; } });
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-datetime' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-AU': {
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last financial year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This financial year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next financial year',
+        },
+    },
+    'EN-GB': {
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last financial year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This financial year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next financial year',
+        },
+    },
+    'EN-NZ': {
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last financial year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This financial year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next financial year',
+        },
+    },
+    'EN-US': {
+        skyux_date_field_default_label: { message: 'Date' },
+        skyux_datepicker_trigger_button_label: { message: 'Select date' },
+        skyux_timepicker_button_label: { message: 'Choose time' },
+        skyux_timepicker_close: { message: 'Done' },
+        skyux_timepicker_input_default_label: { message: 'Time' },
+        skyux_date_range_picker_default_label: { message: 'Select a date range' },
+        skyux_date_range_picker_format_label_specific_range: {
+            message: 'Specific range',
+        },
+        skyux_date_range_picker_format_label_before: { message: 'Before' },
+        skyux_date_range_picker_format_label_after: { message: 'After' },
+        skyux_date_range_picker_format_label_any_time: { message: 'At any time' },
+        skyux_date_range_picker_format_label_yesterday: { message: 'Yesterday' },
+        skyux_date_range_picker_format_label_today: { message: 'Today' },
+        skyux_date_range_picker_format_label_tomorrow: { message: 'Tomorrow' },
+        skyux_date_range_picker_format_label_last_week: { message: 'Last week' },
+        skyux_date_range_picker_format_label_this_week: { message: 'This week' },
+        skyux_date_range_picker_format_label_next_week: { message: 'Next week' },
+        skyux_date_range_picker_format_label_last_month: { message: 'Last month' },
+        skyux_date_range_picker_format_label_this_month: { message: 'This month' },
+        skyux_date_range_picker_format_label_next_month: { message: 'Next month' },
+        skyux_date_range_picker_format_label_last_quarter: {
+            message: 'Last quarter',
+        },
+        skyux_date_range_picker_format_label_this_quarter: {
+            message: 'This quarter',
+        },
+        skyux_date_range_picker_format_label_next_quarter: {
+            message: 'Next quarter',
+        },
+        skyux_date_range_picker_format_label_last_calendar_year: {
+            message: 'Last calendar year',
+        },
+        skyux_date_range_picker_format_label_this_calendar_year: {
+            message: 'This calendar year',
+        },
+        skyux_date_range_picker_format_label_next_calendar_year: {
+            message: 'Next calendar year',
+        },
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last fiscal year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This fiscal year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next fiscal year',
+        },
+        skyux_date_range_picker_start_date_label: { message: 'From date' },
+        skyux_date_range_picker_end_date_label: { message: 'To date' },
+        skyux_date_range_picker_before_date_label: { message: 'Before date' },
+        skyux_date_range_picker_after_date_label: { message: 'After date' },
+    },
+};
+class SkyDatetimeResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyDatetimeResourcesModule {
+}
+SkyDatetimeResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDatetimeResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] });
+SkyDatetimeResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyDatetimeResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyDatetimeResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyFuzzyDateService {
+    constructor(localeProvider) {
+        this.localeProvider = localeProvider;
+        this.ngUnsubscribe = new Subject();
+        this.localeProvider
+            .getLocaleInfo()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((localeInfo) => {
+            this.currentLocale = localeInfo.locale;
+        });
+    }
+    /* istanbul ignore next */
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    /**
+     * Returns the browser's current locale string.
+     */
+    getCurrentLocale() {
+        return this.currentLocale;
+    }
+    /**
+     * Returns the short format of the provided locale.
+     * If not provided, the locale will be taken from the browser's default locale.
+     */
+    getLocaleShortFormat(locale) {
+        return moment.localeData(locale || this.currentLocale).longDateFormat('L');
+    }
+    /**
+     * Formats a fuzzy date by using the provided format and locale strings.
+     * If not provided, the locale will be taken from the browser's default locale.
+     */
+    format(fuzzyDate, format, locale) {
+        if (!this.isFuzzyDateValid(fuzzyDate)) {
+            return '';
+        }
+        if (!format) {
+            return '';
+        }
+        const separator = this.getDateSeparator(format);
+        const dateParts = [];
+        const formatTokens = format.split(separator);
+        locale = locale || this.currentLocale;
+        const fuzzyDateMoment = this.getMomentFromFuzzyDate(fuzzyDate).locale(locale);
+        for (let index = 0; index < formatTokens.length; index++) {
+            const token = formatTokens[index];
+            /* istanbul ignore else */
+            if (token) {
+                // tslint:disable-next-line: switch-default
+                switch (token.substr(0, 1).toLowerCase()) {
+                    case 'y':
+                        if (fuzzyDate.year) {
+                            dateParts.push(fuzzyDateMoment.format(token));
+                        }
+                        break;
+                    case 'm':
+                        if (fuzzyDate.month) {
+                            dateParts.push(fuzzyDateMoment.format(token));
+                        }
+                        break;
+                    case 'd':
+                        if (fuzzyDate.day) {
+                            dateParts.push(fuzzyDateMoment.format(token));
+                        }
+                        break;
+                }
+            }
+        }
+        return dateParts.join(separator);
+    }
+    /**
+     * If not provided, years will default to current year; months will default to January;
+     * days will default to 1st of the month.
+     */
+    getMomentFromFuzzyDate(fuzzyDate) {
+        if (!fuzzyDate) {
+            return;
+        }
+        const year = fuzzyDate.year || this.getDefaultYear(fuzzyDate);
+        const month = fuzzyDate.month > 0 ? fuzzyDate.month - 1 : 0;
+        const day = fuzzyDate.day || 1;
+        return moment([year, month, day]);
+    }
+    /**
+     * Gets a string instance of a fuzzy date.
+     * @deprecated Deprecated in favor of the `format` function.
+     */
+    getStringFromFuzzyDate(fuzzyDate, dateFormat) {
+        if (!fuzzyDate || !dateFormat) {
+            return;
+        }
+        const separator = this.getDateSeparator(dateFormat);
+        const dateFormatIndexes = this.getDateFormatIndexes(dateFormat);
+        let dateString = '';
+        // Get the components of the date in the order expected of the local format.
+        const dateComponents = [
+            { value: fuzzyDate.year || 0, index: dateFormatIndexes.yearIndex },
+            { value: fuzzyDate.month || 0, index: dateFormatIndexes.monthIndex },
+            { value: fuzzyDate.day || 0, index: dateFormatIndexes.dayIndex },
+        ];
+        dateComponents.sort((a, b) => a.index - b.index);
+        dateComponents.forEach((component) => {
+            if (component.value > 0 && component.index > -1) {
+                if (dateString) {
+                    dateString += separator;
+                }
+                dateString += component.value.toString();
+            }
+        });
+        return dateString.trim();
+    }
+    getFuzzyDateFromSelectedDate(selectedDate, dateFormat) {
+        if (!selectedDate || !dateFormat) {
+            return;
+        }
+        const fuzzyDate = {};
+        const dateFormatIndexes = this.getDateFormatIndexes(dateFormat);
+        if (dateFormatIndexes.yearIndex > -1) {
+            fuzzyDate.year = selectedDate.getFullYear();
+        }
+        if (dateFormatIndexes.dayIndex > -1) {
+            fuzzyDate.day = selectedDate.getDate();
+        }
+        if (dateFormatIndexes.monthIndex > -1) {
+            fuzzyDate.month = selectedDate.getMonth() + 1; // getMonth() is 0-indexed.
+        }
+        return fuzzyDate;
+    }
+    getFuzzyDateFromString(date, dateFormat) {
+        if (!date || !dateFormat) {
+            return;
+        }
+        let day;
+        let month;
+        let year;
+        const dateComponents = this.getDateComponents(date);
+        const indexes = this.getDateValueIndexes(date, dateFormat);
+        // Look at the date string's component count:
+        // 3 indicates a full date
+        // 2 indicates a month-year or month-day date
+        // 1 indicates a year
+        // Other indicates a problem
+        switch (dateComponents.length) {
+            case 3:
+                year = dateComponents[indexes.yearIndex];
+                month = dateComponents[indexes.monthIndex];
+                day = dateComponents[indexes.dayIndex];
+                break;
+            case 2:
+                // First, check for a 4-digit year. If year exists, then we assume the other component
+                // is the month. Otherwise, we can assume the input is mm/dd or mm/yy (2-digit year).
+                year = this.get4DigitYearFromDateString(date);
+                if (year) {
+                    month =
+                        dateComponents[0] === year.toString()
+                            ? dateComponents[1]
+                            : dateComponents[0];
+                }
+                else {
+                    if (indexes.dayIndex > -1) {
+                        // mm/dd
+                        month =
+                            indexes.monthIndex < indexes.dayIndex
+                                ? dateComponents[0]
+                                : dateComponents[1];
+                        day =
+                            month === dateComponents[1]
+                                ? dateComponents[0]
+                                : dateComponents[1];
+                    }
+                    else {
+                        // mm/yy
+                        month =
+                            indexes.monthIndex < indexes.yearIndex
+                                ? dateComponents[0]
+                                : dateComponents[1];
+                        year =
+                            month === dateComponents[1]
+                                ? dateComponents[0]
+                                : dateComponents[1];
+                    }
+                }
+                break;
+            case 1:
+                year = date;
+                break;
+            default:
+                return;
+        }
+        if (month) {
+            // Check if month is valid.
+            month = this.getMonthNumber(month);
+            if (month === undefined) {
+                return;
+            }
+            // Check if day is valid.
+            if (day) {
+                day = parseInt(day, 10);
+                const fuzzyMoment = this.getMomentFromFuzzyDate({
+                    month: month,
+                    day: day,
+                    year: year,
+                });
+                if (isNaN(day) || !fuzzyMoment.isValid()) {
+                    return;
+                }
+            }
+        }
+        if (year) {
+            year =
+                year.toString().length === 2
+                    ? moment.parseTwoDigitYear(year)
+                    : parseInt(year.toString(), 10);
+            if (isNaN(year) || year.toString().length !== 4) {
+                return;
+            }
+        }
+        return {
+            month: month,
+            day: day,
+            year: year,
+        };
+    }
+    getFuzzyDateRange(startFuzzyDate, endFuzzyDate) {
+        let start;
+        let end;
+        let days;
+        let months;
+        let years;
+        let valid = false;
+        if (startFuzzyDate &&
+            startFuzzyDate.year &&
+            endFuzzyDate &&
+            endFuzzyDate.year) {
+            start = this.getMomentFromFuzzyDate(startFuzzyDate);
+            end = this.getMomentFromFuzzyDate(endFuzzyDate);
+            years = end.diff(start, 'years');
+            months = end.diff(start, 'months');
+            days = end.diff(start, 'days');
+            valid = end.diff(start) >= 0;
+        }
+        return {
+            years: years,
+            months: months,
+            days: days,
+            valid: valid,
+        };
+    }
+    getCurrentFuzzyDate() {
+        const currentDate = moment();
+        return {
+            day: currentDate.date(),
+            month: currentDate.month() + 1,
+            year: currentDate.year(),
+        };
+    }
+    getMostRecentLeapYear() {
+        let leapYear = new Date().getFullYear();
+        while (!this.isLeapYear(leapYear)) {
+            leapYear -= 1;
+        }
+        return leapYear;
+    }
+    /**
+     * Returns the first separator found in the provided date format string.
+     * Accepted separators: ['/', '.', '-', ' '].
+     * @param dateFormat
+     */
+    getDateSeparator(dateFormat) {
+        let returnValue;
+        const separators = ['/', '.', '-', ' '];
+        separators.forEach((separator) => {
+            if (!returnValue && dateFormat.indexOf(separator) > 0) {
+                returnValue = separator;
+            }
+        });
+        return returnValue;
+    }
+    get4DigitYearFromDateString(date) {
+        let year;
+        const separator = this.getDateSeparator(date);
+        // Find the number value in the string that is 4 digits long.
+        date.split(separator).forEach((dateComponent) => {
+            if (!year && parseInt(dateComponent, 10).toString().length === 4) {
+                year = dateComponent;
+            }
+        });
+        if (year && !isNaN(Number(year))) {
+            return parseInt(year, 10);
+        }
+    }
+    isLeapYear(year) {
+        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+    }
+    getMonthNumber(month) {
+        let returnValue;
+        const monthAsNumber = parseInt(month, 10);
+        // If the month component is a string ("Janaury"), we check to see if it is a valid month
+        if (isNaN(monthAsNumber)) {
+            if (!moment(month, 'MMMM').isValid()) {
+                return;
+            }
+            returnValue = parseInt(moment().month(month).format('M'), 10);
+        }
+        else {
+            returnValue = monthAsNumber;
+        }
+        // Ensure that the month is between 1 and 12
+        if (!(1 <= returnValue && returnValue <= 12)) {
+            return;
+        }
+        return returnValue;
+    }
+    getDefaultYear(fuzzyDate) {
+        // Check if we need to return a leap year or the current year.
+        if (fuzzyDate.month === 2 && fuzzyDate.day === 29) {
+            return this.getMostRecentLeapYear();
+        }
+        else {
+            return new Date().getFullYear();
+        }
+    }
+    getDateComponents(date) {
+        const separator = this.getDateSeparator(date);
+        return date.split(separator);
+    }
+    // Returns the order of year, month, and day from the provided date format.
+    getDateFormatIndexes(dateFormat) {
+        dateFormat = dateFormat.toLowerCase();
+        return {
+            yearIndex: dateFormat.indexOf('y'),
+            monthIndex: dateFormat.indexOf('m'),
+            dayIndex: dateFormat.indexOf('d'),
+        };
+    }
+    // Returns the index of each of the date components in the provided string (month, day, year).
+    getDateValueIndexes(date, dateFormat) {
+        const dateFormatIndexes = this.getDateFormatIndexes(dateFormat);
+        const dateComponentIndexes = [];
+        if (dateFormatIndexes.yearIndex > -1) {
+            dateComponentIndexes.push(dateFormatIndexes.yearIndex);
+        }
+        if (dateFormatIndexes.monthIndex > -1) {
+            dateComponentIndexes.push(dateFormatIndexes.monthIndex);
+        }
+        if (dateFormatIndexes.dayIndex > -1) {
+            dateComponentIndexes.push(dateFormatIndexes.dayIndex);
+        }
+        dateComponentIndexes.sort(function (a, b) {
+            return a - b;
+        });
+        return {
+            yearIndex: dateComponentIndexes.indexOf(dateFormatIndexes.yearIndex),
+            monthIndex: dateComponentIndexes.indexOf(dateFormatIndexes.monthIndex),
+            dayIndex: dateComponentIndexes.indexOf(dateFormatIndexes.dayIndex),
+        };
+    }
+    /**
+     * Validates the provided SkyFuzzyDate object. Valid fuzzy dates are as follows:
+     * month, day, year
+     * month, year
+     * month, day
+     * year only
+     */
+    isFuzzyDateValid(fuzzyDate) {
+        if (!fuzzyDate) {
+            return false;
+        }
+        // If none of the dates part are specified, return false.
+        if (!fuzzyDate.day && !fuzzyDate.month && !fuzzyDate.year) {
+            return false;
+        }
+        // If only month is specified, return false.
+        if (!fuzzyDate.day && fuzzyDate.month && !fuzzyDate.year) {
+            return false;
+        }
+        // If only day is specified, return false.
+        if (fuzzyDate.day && !fuzzyDate.month && !fuzzyDate.year) {
+            return false;
+        }
+        return true;
+    }
+}
+SkyFuzzyDateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFuzzyDateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i3.SkyAppLocaleProvider }]; } });
+
+/**
+ * Formats date values using two or more date tokens that represent the day, month,
+ * and year. The tokens are described in the [moment.js values](https://momentjs.com/docs/#/displaying/).
+ * @example
+ * ```markup
+ * {{ myFuzzyDate | skyFuzzyDate:'MMM Y' }}
+ * {{ myFuzzyDate | skyFuzzyDate:'MMM Y':'en-CA' }}
+ * ```
+ */
+class SkyFuzzyDatePipe {
+    constructor(fuzzyDateService) {
+        this.fuzzyDateService = fuzzyDateService;
+    }
+    /**
+     * Transforms fuzzy date values using two or more date tokens that represent the day, month,
+     * and year.
+     * @param value Specifies the date value to transform.
+     * @param format Specifies the format to apply to the transform. You construct the format
+     * string with a two or more tokens that specify the components of date-time value. The
+     * tokens are described in the [moment.js values](https://momentjs.com/docs/#/displaying/).
+     * If you don't provide a format, `SkyFuzzyDatePipe` attempts to format fuzzy dates based
+     * on the browser's default locale.
+     * @param locale Specifies the locale code to use in the transform.
+     */
+    transform(value, format, locale) {
+        if (!value) {
+            return undefined;
+        }
+        const fuzzyDateFormat = format || this.fuzzyDateService.getLocaleShortFormat(locale);
+        const fuzzyDateLocale = locale || this.fuzzyDateService.getCurrentLocale();
+        return this.fuzzyDateService.format(value, fuzzyDateFormat, fuzzyDateLocale);
+    }
+}
+SkyFuzzyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyFuzzyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyFuzzyDate',
+                    pure: false,
+                }]
+        }], ctorParameters: function () { return [{ type: SkyFuzzyDateService }]; } });
+
+class SkyDatePipeModule {
+}
+SkyDatePipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDatePipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatePipeModule, declarations: [SkyDatePipe, SkyFuzzyDatePipe], imports: [CommonModule, SkyDatetimeResourcesModule], exports: [SkyDatePipe, SkyFuzzyDatePipe] });
+SkyDatePipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [[CommonModule, SkyDatetimeResourcesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatePipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyDatePipe, SkyFuzzyDatePipe],
+                    providers: [SkyDatePipe, SkyFuzzyDatePipe],
+                    imports: [CommonModule, SkyDatetimeResourcesModule],
+                    exports: [SkyDatePipe, SkyFuzzyDatePipe],
+                }]
+        }] });
+
+/**
+ * Represents the calculator.
+ */
+class SkyDateRangeCalculator {
+    constructor(
+    /**
+     * Provides a calculator ID to specify calculator objects that represent date ranges.
+     */
+    calculatorId, config) {
+        this.calculatorId = calculatorId;
+        this.config = config;
+        this.type = config.type;
+        this.shortDescription = config.shortDescription;
+    }
+    /**
+     * Gets the current value of the calculator.
+     * @param startDateInput The start date.
+     * @param endDateInput The end date.
+     */
+    getValue(startDateInput, endDateInput) {
+        const result = this.config.getValue(startDateInput, endDateInput);
+        /* tslint:disable:no-null-keyword */
+        // (Angular form controls use null for the "empty" value.)
+        let startDate = null;
+        if (result.startDate instanceof Date) {
+            startDate = this.parseDateWithoutTime(result.startDate);
+        }
+        let endDate = null;
+        if (result.endDate instanceof Date) {
+            endDate = this.parseDateWithoutTime(result.endDate);
+        }
+        /* tslint:enable */
+        return {
+            calculatorId: this.calculatorId,
+            startDate,
+            endDate,
+        };
+    }
+    /**
+     * Performs synchronous validation against the control.
+     */
+    validate(value) {
+        if (!this.config.validate) {
+            return;
+        }
+        return this.config.validate(value);
+    }
+    /**
+     * Get a date object without time information.
+     * See: https://stackoverflow.com/a/38050824/6178885
+     */
+    parseDateWithoutTime(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+}
+
+/**
+ * `SkyDateRangeCalculatorId` values specify calculator objects that return
+ * two `Date` objects to represent date ranges. The values populate the options
+ * in the date range picker's dropdown. SKY UX uses `SkyDateRangeService` to create
+ * calculators and configures each one with a `validate` function to confirm that dates
+ * are compatible. For example, `validate` functions ensure that start dates are before
+ * end dates. SKY UX also configures calculators to call a `getValue` function after
+ * the `validate` function and return a range of two `Date` objects.
+ */
+var SkyDateRangeCalculatorId;
+(function (SkyDateRangeCalculatorId) {
+    /**
+     * Selects no dates and considers all dates within the date range. This is the default selection.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["AnyTime"] = 0] = "AnyTime";
+    /**
+     * Enables users to select an end date with no starting date.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["Before"] = 1] = "Before";
+    /**
+     * Enables users to select a start date with no end date.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["After"] = 2] = "After";
+    /**
+     * Enables users to select specific start and end dates.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["SpecificRange"] = 3] = "SpecificRange";
+    /**
+     * Sets the start and end dates to the day before the current day.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["Yesterday"] = 4] = "Yesterday";
+    /**
+     * Sets the start and end dates to the current day.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["Today"] = 5] = "Today";
+    /**
+     * Sets the start and end dates to the day after the current day.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["Tomorrow"] = 6] = "Tomorrow";
+    /**
+     * Sets the start date to Sunday of the week before the current week and
+     * the end date to Saturday of that week.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["LastWeek"] = 7] = "LastWeek";
+    /**
+     * Sets the start date to Sunday of the current week and the end date to Saturday.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["ThisWeek"] = 8] = "ThisWeek";
+    /**
+     * Sets the start date to Sunday of the week after the current week and
+     * the end date to Saturday of that week.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["NextWeek"] = 9] = "NextWeek";
+    /**
+     * Sets the start date to the first day of the month before the current month and
+     * the end date to the last day of that month.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["LastMonth"] = 10] = "LastMonth";
+    /**
+     * Sets the start date to the first day of the current month and
+     * the end date to the last day of the month.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["ThisMonth"] = 11] = "ThisMonth";
+    /**
+     * Sets the start date to the first day of the month after the current month
+     * and the end date to the last day of that month.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["NextMonth"] = 12] = "NextMonth";
+    /**
+     * Sets the start date to the first day of the quarter before the current quarter and
+     * the end date to the last day of that quarter. Quarters are
+     * January to March, April to June, July to September, and October to December.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["LastQuarter"] = 13] = "LastQuarter";
+    /**
+     * Sets the start date to the first day of the current quarter and
+     * the end date to the last day of the quarter. Quarters are
+     * January to March, April to June, July to September, and October to December.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["ThisQuarter"] = 14] = "ThisQuarter";
+    /**
+     * Sets the start date to the first day of the quarter after the current quarter and
+     * the end date to the last day of that quarter. Quarters are
+     * January to March, April to June, July to September, and October to December.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["NextQuarter"] = 15] = "NextQuarter";
+    /**
+     * Sets the start date to the first day of the year before the current year
+     * and the end date to the last day of that year.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["LastCalendarYear"] = 16] = "LastCalendarYear";
+    /**
+     * Sets the start date to the first day of the current year and
+     * the end date to the last day of the year.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["ThisCalendarYear"] = 17] = "ThisCalendarYear";
+    /**
+     * Sets the start date to the first day of the year after the current year and
+     * the end date to the last day of that year.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["NextCalendarYear"] = 18] = "NextCalendarYear";
+    /**
+     * Sets the start date to the first day of the fiscal year before the current fiscal year and
+     * the end date to the last day of that fiscal year. The fiscal year is Oct. 1 to Sept. 30.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["LastFiscalYear"] = 19] = "LastFiscalYear";
+    /**
+     * Sets the start date to the first day of the current fiscal year and
+     * the end date to the last day of the fiscal year. The fiscal year is Oct. 1 to Sept. 30.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["ThisFiscalYear"] = 20] = "ThisFiscalYear";
+    /**
+     * Sets the start date to the first day of the fiscal year after the current fiscal year
+     * and the end date to the last day of that fiscal year. The fiscal year is Oct. 1 to Sept. 30.
+     */
+    SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["NextFiscalYear"] = 21] = "NextFiscalYear";
+})(SkyDateRangeCalculatorId || (SkyDateRangeCalculatorId = {}));
+
+/**
+ * Indicates the types of calculations available for a date range calculator.
+ */
+var SkyDateRangeCalculatorType;
+(function (SkyDateRangeCalculatorType) {
+    /**
+     * Includes an input for a date after the current date.
+     */
+    SkyDateRangeCalculatorType[SkyDateRangeCalculatorType["After"] = 0] = "After";
+    /**
+     * Includes an input for a date before the current date.
+     */
+    SkyDateRangeCalculatorType[SkyDateRangeCalculatorType["Before"] = 1] = "Before";
+    /**
+     * Includes two inputs for a range of dates.
+     */
+    SkyDateRangeCalculatorType[SkyDateRangeCalculatorType["Range"] = 2] = "Range";
+    /**
+     * Does not accept any input but calculates a specific range based on the current date.
+     */
+    SkyDateRangeCalculatorType[SkyDateRangeCalculatorType["Relative"] = 3] = "Relative";
+})(SkyDateRangeCalculatorType || (SkyDateRangeCalculatorType = {}));
+
+class SkyDateFormatter {
+    /**
+     * Sets moment's global locale.
+     */
+    static setLocale(locale) {
+        moment.locale(locale || SkyDateFormatter.defaultLocale);
+    }
+    /**
+     * Returns the preferred short date format for the current locale.
+     */
+    static getPreferredShortDateFormat() {
+        /* istanbul ignore next */
+        return (moment.localeData().longDateFormat('L') ||
+            SkyDateFormatter.defaultShortDateFormat);
+    }
+    format(date, format) {
+        return moment(date.getTime()).format(format);
+    }
+    getDateFromString(dateString, format, 
+    /* istanbul ignore next */
+    strict = false) {
+        let momentValue = moment(dateString, format, strict);
+        if (!momentValue.isValid()) {
+            momentValue = moment(dateString, 'YYYY-MM-DDThh:mm:ss.SZ', strict);
+        }
+        return momentValue.toDate();
+    }
+    dateIsValid(date) {
+        return (date &&
+            date instanceof Date &&
+            !isNaN(date.valueOf()) &&
+            !isNaN(new Date(date).getDate()));
+    }
+}
+SkyDateFormatter.defaultLocale = 'en-US';
+SkyDateFormatter.defaultShortDateFormat = 'MM/DD/YYYY';
+
+let nextDatepickerId = 0;
+/**
+ * @internal
+ */
+class SkyDatepickerCalendarInnerComponent {
+    constructor() {
+        this.selectedDateChange = new EventEmitter(undefined);
+        this.calendarModeChange = new EventEmitter();
+        this.minMode = 'day';
+        this.maxMode = 'year';
+        this.monthColLimit = 3;
+        this.yearColLimit = 5;
+        this.datepickerMode = 'day';
+        this.yearRange = 20;
+        this.formatDay = 'DD';
+        this.formatMonth = 'MMMM';
+        this.formatYear = 'YYYY';
+        this.formatDayHeader = 'dd';
+        this.formatDayTitle = 'MMMM YYYY';
+        this.formatMonthTitle = 'YYYY';
+        this.datepickerId = `sky-datepicker-${++nextDatepickerId}`;
+        this.stepDay = {};
+        this.stepMonth = {};
+        this.stepYear = {};
+        this.modes = ['day', 'month', 'year'];
+        this.dateFormatter = new SkyDateFormatter();
+        this.keys = {
+            13: 'enter',
+            32: 'space',
+            33: 'pageup',
+            34: 'pagedown',
+            35: 'end',
+            36: 'home',
+            37: 'left',
+            38: 'up',
+            39: 'right',
+            40: 'down',
+        };
+        this.ngUnsubscribe = new Subject();
+    }
+    set selectedDate(value) {
+        if (this.dateFormatter.dateIsValid(value)) {
+            this._selectedDate = value;
+            this.activeDate = value;
+        }
+    }
+    get selectedDate() {
+        return this._selectedDate;
+    }
+    ngOnInit() {
+        if (this.selectedDate) {
+            this.activeDate = new Date(this.selectedDate);
+        }
+        else {
+            this.activeDate = new Date();
+        }
+    }
+    ngOnChanges(changes) {
+        this.refreshView();
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    setCompareHandler(handler, type) {
+        if (type === 'day') {
+            this.compareHandlerDay = handler;
+        }
+        if (type === 'month') {
+            this.compareHandlerMonth = handler;
+        }
+        if (type === 'year') {
+            this.compareHandlerYear = handler;
+        }
+    }
+    compare(date1, date2) {
+        if (date1 === undefined || date2 === undefined) {
+            return undefined;
+        }
+        if (this.datepickerMode === 'day' && this.compareHandlerDay) {
+            return this.compareHandlerDay(date1, date2);
+        }
+        if (this.datepickerMode === 'month' && this.compareHandlerMonth) {
+            return this.compareHandlerMonth(date1, date2);
+        }
+        /* istanbul ignore else */
+        /* sanity check */
+        if (this.datepickerMode === 'year' && this.compareHandlerYear) {
+            return this.compareHandlerYear(date1, date2);
+        }
+    }
+    setRefreshViewHandler(handler, type) {
+        if (type === 'day') {
+            this.refreshViewHandlerDay = handler;
+        }
+        if (type === 'month') {
+            this.refreshViewHandlerMonth = handler;
+        }
+        if (type === 'year') {
+            this.refreshViewHandlerYear = handler;
+        }
+    }
+    refreshView() {
+        if (this.datepickerMode === 'day' && this.refreshViewHandlerDay) {
+            this.refreshViewHandlerDay();
+        }
+        if (this.datepickerMode === 'month' && this.refreshViewHandlerMonth) {
+            this.refreshViewHandlerMonth();
+        }
+        if (this.datepickerMode === 'year' && this.refreshViewHandlerYear) {
+            this.refreshViewHandlerYear();
+        }
+    }
+    setKeydownHandler(handler, type) {
+        if (type === 'day') {
+            this.handleKeydownDay = handler;
+        }
+        if (type === 'month') {
+            this.handleKeydownMonth = handler;
+        }
+        if (type === 'year') {
+            this.handleKeydownYear = handler;
+        }
+    }
+    handleKeydown(key, event) {
+        if (this.datepickerMode === 'day' && this.handleKeydownDay) {
+            this.handleKeydownDay(key, event);
+        }
+        if (this.datepickerMode === 'month' && this.handleKeydownMonth) {
+            this.handleKeydownMonth(key, event);
+        }
+        if (this.datepickerMode === 'year' && this.handleKeydownYear) {
+            this.handleKeydownYear(key, event);
+        }
+    }
+    dateFilter(date, format) {
+        return this.dateFormatter.format(date, format);
+    }
+    isActive(dateObject) {
+        if (this.compare(dateObject.date, this.activeDate) === 0) {
+            this.activeDateId = dateObject.uid;
+            return true;
+        }
+        return false;
+    }
+    onKeydown(event) {
+        const key = this.keys[event.which];
+        if (!key || event.shiftKey || event.altKey) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (key === 'enter' || key === 'space') {
+            if (this.isDisabled(this.activeDate)) {
+                return;
+            }
+            this.select(this.activeDate);
+        }
+        else if (event.ctrlKey && (key === 'up' || key === 'down')) {
+            this.toggleMode(key === 'up' ? 1 : -1);
+        }
+        else {
+            this.handleKeydown(key, event);
+            this.refreshView();
+        }
+    }
+    createDateObject(date, format, isSecondary, id) {
+        const customDateMatch = this.getCustomDate(date);
+        const dateObject = {
+            date: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
+            label: this.dateFilter(date, format),
+            selected: this.compare(date, this.selectedDate) === 0,
+            disabled: this.isDisabled(date),
+            current: this.compare(date, new Date()) === 0,
+            secondary: isSecondary,
+            uid: id,
+            keyDate: customDateMatch ? customDateMatch.keyDate : undefined,
+            keyDateText: customDateMatch ? customDateMatch.keyDateText : [],
+        };
+        return dateObject;
+    }
+    createCalendarRows(dates, size) {
+        const rows = [];
+        while (dates.length > 0) {
+            rows.push(dates.splice(0, size));
+        }
+        return rows;
+    }
+    /*
+      This is ensures that no strangeness happens when converting a date to local time.
+    */
+    fixTimeZone(date) {
+        const newDate = new Date(date);
+        newDate.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
+        return newDate;
+    }
+    selectCalendar(event, date, closePicker = false) {
+        if (!closePicker) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        this.select(date);
+    }
+    select(date, isManual = true) {
+        this.activeDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+        /*
+            Only actually select date if in minmode (day picker mode).
+            Otherwise, just change the active view for the datepicker.
+        */
+        if (this.datepickerMode === this.minMode) {
+            this.selectedDate = new Date(this.activeDate);
+            if (isManual) {
+                this.selectedDateChange.emit(this.selectedDate);
+            }
+        }
+        else {
+            this.datepickerMode =
+                this.modes[this.modes.indexOf(this.datepickerMode) - 1];
+            this.calendarModeChange.emit(this.datepickerMode);
+        }
+        this.refreshView();
+    }
+    moveCalendar(event, direction) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.move(direction);
+    }
+    move(direction) {
+        let expectedStep;
+        if (this.datepickerMode === 'day') {
+            expectedStep = this.stepDay;
+        }
+        if (this.datepickerMode === 'month') {
+            expectedStep = this.stepMonth;
+        }
+        if (this.datepickerMode === 'year') {
+            expectedStep = this.stepYear;
+        }
+        /* istanbul ignore else */
+        /* sanity check */
+        if (expectedStep) {
+            const year = this.activeDate.getFullYear() + direction * (expectedStep.years || 0);
+            const month = this.activeDate.getMonth() + direction * (expectedStep.months || 0);
+            this.activeDate = new Date(year, month, 1);
+            this.refreshView();
+        }
+    }
+    toggleModeCalendar(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggleMode(1);
+    }
+    toggleMode(direction) {
+        /*istanbul ignore next */
+        direction = direction || 1;
+        /* istanbul ignore else */
+        /* sanity check */
+        if (!(direction === 1 && this.datepickerMode === this.maxMode) &&
+            !(this.datepickerMode === this.minMode && direction === -1)) {
+            this.datepickerMode =
+                this.modes[this.modes.indexOf(this.datepickerMode) + direction];
+            this.calendarModeChange.emit(this.datepickerMode);
+            this.refreshView();
+        }
+    }
+    /**
+     * Date is disabled if it meets any of these criteria:
+     * 1. Date falls outside the min or max dates set by the SkyDatepickerConfigService.
+     * 2. Date is marked as disabled in the customDates array.
+     */
+    isDisabled(date) {
+        const customDate = this.getCustomDate(date);
+        return ((this.minDate && this.compare(date, this.minDate) < 0) ||
+            (this.maxDate && this.compare(date, this.maxDate) > 0) ||
+            (customDate && customDate.disabled));
+    }
+    getCustomDate(date) {
+        if (this.customDates) {
+            return this.customDates.find((customDate) => {
+                return customDate.date.getTime() === date.getTime();
+            });
+        }
+    }
+}
+SkyDatepickerCalendarInnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDatepickerCalendarInnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"datepickerMode\"\n  class=\"sky-datepicker-calendar-inner\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-datepicker-inner', encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"datepickerMode\"\n  class=\"sky-datepicker-calendar-inner\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"] }]
+        }], propDecorators: { customDates: [{
+                type: Input
+            }], startingDay: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], selectedDate: [{
+                type: Input
+            }], selectedDateChange: [{
+                type: Output
+            }], calendarModeChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyDatepickerAdapterService {
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    init(elRef) {
+        this.el = elRef.nativeElement;
+    }
+    elementIsFocused() {
+        const focusedEl = document.activeElement;
+        return this.el.contains(focusedEl);
+    }
+    elementIsVisible() {
+        const styles = this.el && getComputedStyle(this.el);
+        return styles && styles.visibility === 'visible';
+    }
+    getPlaceholder(elementRef) {
+        return elementRef.nativeElement.getAttribute('placeholder');
+    }
+    setPlaceholder(elementRef, value) {
+        this.renderer.setAttribute(elementRef.nativeElement, 'placeholder', value);
+    }
+}
+SkyDatepickerAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDatepickerAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
+
+class SkyDatepickerConfigService {
+    constructor() {
+        /**
+         * Specifies the starting day of the week in the calendar,
+         * where `0` sets the starting day to Sunday.
+         * @default 0
+         */
+        this.startingDay = 0;
+    }
+}
+SkyDatepickerConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDatepickerConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDatepickerService {
+    constructor() {
+        /**
+         * Specifies if a key date popover is currently displayed.
+         * Useful for communicating across all daypicker siblings when a popover is displayed.
+         */
+        this.keyDatePopoverStream = new Subject();
+    }
+}
+SkyDatepickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDatepickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDayPickerButtonComponent {
+    constructor(datepicker) {
+        this.datepicker = datepicker;
+    }
+}
+SkyDayPickerButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+SkyDayPickerButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n  tabindex=\"-1\"\n  type=\"button\"\n  [disabled]=\"date.disabled\"\n  [ngClass]=\"{\n    'sky-datepicker-btn-selected': date.selected,\n    'sky-btn-disabled': date.disabled,\n    'sky-btn-active': datepicker.isActive(date),\n    'sky-datepicker-btn-disabled': date.disabled,\n    'sky-datepicker-btn-key-date': date.keyDate\n  }\"\n  (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n>\n  <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n    {{ date.label }}\n  </span>\n</button>\n", styles: [".sky-datepicker-btn-disabled{font-style:italic}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:5px;width:5px;background-color:#d93a3d;border-radius:50%;left:15px;top:22px}:host-context(.sky-theme-modern) .sky-datepicker-btn-key-date:before{left:12px}.sky-theme-modern .sky-datepicker-btn-key-date:before{left:12px}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-daypicker-button', template: "<button\n  class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n  tabindex=\"-1\"\n  type=\"button\"\n  [disabled]=\"date.disabled\"\n  [ngClass]=\"{\n    'sky-datepicker-btn-selected': date.selected,\n    'sky-btn-disabled': date.disabled,\n    'sky-btn-active': datepicker.isActive(date),\n    'sky-datepicker-btn-disabled': date.disabled,\n    'sky-datepicker-btn-key-date': date.keyDate\n  }\"\n  (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n>\n  <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n    {{ date.label }}\n  </span>\n</button>\n", styles: [".sky-datepicker-btn-disabled{font-style:italic}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:5px;width:5px;background-color:#d93a3d;border-radius:50%;left:15px;top:22px}:host-context(.sky-theme-modern) .sky-datepicker-btn-key-date:before{left:12px}.sky-theme-modern .sky-datepicker-btn-key-date:before{left:12px}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { date: [{
+                type: Input
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyDayPickerCellComponent {
+    constructor(datepicker, datepickerService) {
+        this.datepicker = datepicker;
+        this.datepickerService = datepickerService;
+        this.hasTooltip = false;
+        this.popoverController = new Subject();
+        this.activeUid = '';
+        this.cancelPopover = false;
+        this.popoverOpen = false;
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        this.hasTooltip =
+            this.date.keyDate &&
+                this.date.keyDateText &&
+                this.date.keyDateText.length > 0 &&
+                this.date.keyDateText[0].length > 0;
+        // show the tooltip if this is the active date and is not the
+        // initial active date (activeDateHasChanged)
+        if (this.datepicker.isActive(this.date) &&
+            this.activeDateHasChanged &&
+            this.hasTooltip) {
+            this.activeUid = this.date.uid;
+            this.showTooltip();
+        }
+        if (this.hasTooltip) {
+            this.datepickerService.keyDatePopoverStream
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((date) => {
+                if (date) {
+                    this.activeUid = date.uid;
+                }
+                else {
+                    this.activeUid = '';
+                }
+                // If this day has an open popover and they have moved off of the day close the popover.
+                if (this.date.uid !== this.activeUid) {
+                    this.hideTooltip();
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    onDayMouseenter() {
+        this.cancelPopover = false;
+        if (this.hasTooltip) {
+            this.showTooltip();
+            this.datepickerService.keyDatePopoverStream.next(this.date);
+        }
+    }
+    onDayMouseleave() {
+        this.cancelPopover = true;
+        if (this.hasTooltip) {
+            this.hideTooltip();
+        }
+        this.datepickerService.keyDatePopoverStream.next(undefined);
+    }
+    onPopoverClosed() {
+        this.popoverOpen = false;
+    }
+    onPopoverOpened() {
+        this.popoverOpen = true;
+        /* istanbul ignore else */
+        if (this.cancelPopover) {
+            // If the popover gets opened just as a mouseout event happens, close it.
+            this.hideTooltip();
+            this.cancelPopover = false;
+        }
+    }
+    getKeyDateLabel() {
+        if (this.hasTooltip) {
+            return this.date.keyDateText.join(', ');
+        }
+        else {
+            return '';
+        }
+    }
+    hideTooltip() {
+        /* istanbul ignore else */
+        if (this.popoverOpen) {
+            this.popoverController.next({ type: SkyPopoverMessageType.Close });
+        }
+    }
+    showTooltip() {
+        /* istanbul ignore else */
+        if (this.hasTooltip && !this.popoverOpen) {
+            /**
+             * Delay 1/2 second before opening the popover as long as mouse hasn't moved off the date.
+             */
+            setTimeout(() => {
+                if (!this.cancelPopover && this.activeUid === this.date.uid) {
+                    this.popoverController.next({ type: SkyPopoverMessageType.Open });
+                }
+            }, 500);
+        }
+    }
+}
+SkyDayPickerCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDayPickerCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: "activeDateHasChanged", date: "date" }, ngImport: i0, template: "<div\n  *ngIf=\"hasTooltip\"\n  class=\"sky-daypicker-cell\"\n  [attr.aria-label]=\"getKeyDateLabel()\"\n  [skyPopover]=\"dayInfoPopover\"\n  skyPopoverPlacement=\"left\"\n  [skyPopoverMessageStream]=\"popoverController\"\n  (mouseenter)=\"onDayMouseenter()\"\n  (mouseleave)=\"onDayMouseleave()\"\n>\n  <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n  <sky-popover\n    (popoverClosed)=\"onPopoverClosed()\"\n    (popoverOpened)=\"onPopoverOpened()\"\n    #dayInfoPopover\n  >\n    <div *ngFor=\"let text of date.keyDateText\">\n      {{ text }}\n    </div>\n  </sky-popover>\n</div>\n<div\n  *ngIf=\"!hasTooltip\"\n  class=\"sky-daypicker-cell\"\n  (mouseenter)=\"onDayMouseenter()\"\n  (mouseleave)=\"onDayMouseleave()\"\n>\n  <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n</div>\n\n<ng-template #daypickerButtonTemplateRef>\n  <sky-daypicker-button [date]=\"date\"> </sky-daypicker-button>\n</ng-template>\n", components: [{ type: i3$1.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-daypicker-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"hasTooltip\"\n  class=\"sky-daypicker-cell\"\n  [attr.aria-label]=\"getKeyDateLabel()\"\n  [skyPopover]=\"dayInfoPopover\"\n  skyPopoverPlacement=\"left\"\n  [skyPopoverMessageStream]=\"popoverController\"\n  (mouseenter)=\"onDayMouseenter()\"\n  (mouseleave)=\"onDayMouseleave()\"\n>\n  <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n  <sky-popover\n    (popoverClosed)=\"onPopoverClosed()\"\n    (popoverOpened)=\"onPopoverOpened()\"\n    #dayInfoPopover\n  >\n    <div *ngFor=\"let text of date.keyDateText\">\n      {{ text }}\n    </div>\n  </sky-popover>\n</div>\n<div\n  *ngIf=\"!hasTooltip\"\n  class=\"sky-daypicker-cell\"\n  (mouseenter)=\"onDayMouseenter()\"\n  (mouseleave)=\"onDayMouseleave()\"\n>\n  <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n</div>\n\n<ng-template #daypickerButtonTemplateRef>\n  <sky-daypicker-button [date]=\"date\"> </sky-daypicker-button>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }]; }, propDecorators: { activeDateHasChanged: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyDayPickerComponent {
+    constructor(datepicker) {
+        this.calendarDateRangeChange = new EventEmitter();
+        this.isWaiting = false;
+        this.activeDateHasChanged = false;
+        this.labels = [];
+        this.rows = [];
+        this.weekNumbers = [];
+        this.daysInMonth = [
+            31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31,
+        ];
+        this.ngUnsubscribe = new Subject();
+        this.datepicker = datepicker;
+    }
+    set customDates(value) {
+        /* istanbul ignore else */
+        if (value) {
+            this.applyCustomDates(value, this.rows);
+        }
+    }
+    ngOnInit() {
+        this.datepicker.stepDay = { months: 1 };
+        this.initialDate = this.datepicker.activeDate.getDate();
+        this.datepicker.setRefreshViewHandler(() => {
+            this.refreshDayView();
+        }, 'day');
+        this.datepicker.setCompareHandler(this.compareDays, 'day');
+        this.datepicker.setKeydownHandler((key, event) => {
+            this.keydownDays(key, event);
+        }, 'day');
+        this.datepicker.refreshView();
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    getDates(startDate, n) {
+        const dates = new Array(n);
+        let current = new Date(startDate.getTime());
+        let i = 0;
+        let date;
+        while (i < n) {
+            date = new Date(current.getTime());
+            date = this.datepicker.fixTimeZone(date);
+            dates[i++] = date;
+            current = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+        }
+        return dates;
+    }
+    compareDays(date1, date2) {
+        const d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+        const d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+        return d1.getTime() - d2.getTime();
+    }
+    refreshDayView() {
+        const year = this.datepicker.activeDate.getFullYear();
+        const month = this.datepicker.activeDate.getMonth();
+        const firstDayOfMonth = new Date(year, month, 1);
+        const difference = this.datepicker.startingDay - firstDayOfMonth.getDay();
+        const numDisplayedFromPreviousMonth = difference > 0 ? 7 - difference : -difference;
+        const firstDate = new Date(firstDayOfMonth.getTime());
+        if (this.datepicker.activeDate.getDate() !== this.initialDate) {
+            this.activeDateHasChanged = true;
+        }
+        /* istanbul ignore else */
+        /* sanity check */
+        if (numDisplayedFromPreviousMonth > 0) {
+            firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
+        }
+        // 42 is the number of days on a six-week calendar
+        const days = this.getDates(firstDate, 42);
+        const pickerDates = [];
+        for (let i = 0; i < 42; i++) {
+            const _dateObject = this.datepicker.createDateObject(days[i], this.datepicker.formatDay, days[i].getMonth() !== month, this.datepicker.datepickerId + '-' + i);
+            pickerDates[i] = _dateObject;
+        }
+        this.labels = [];
+        for (let j = 0; j < 7; j++) {
+            this.labels[j] = {};
+            this.labels[j].abbr = this.datepicker.dateFilter(pickerDates[j].date, this.datepicker.formatDayHeader);
+            this.labels[j].full = this.datepicker.dateFilter(pickerDates[j].date, 'EEEE');
+        }
+        this.title = this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatDayTitle);
+        const oldDateRange = this.getDateRange(this.rows);
+        this.rows = this.datepicker.createCalendarRows(pickerDates, 7);
+        const newDateRange = this.getDateRange(this.rows);
+        if (!this.dateRangeRowsAreEqual(oldDateRange, newDateRange)) {
+            this.calendarDateRangeChange.next({
+                startDate: newDateRange.startDate,
+                endDate: newDateRange.endDate,
+            });
+        }
+    }
+    keydownDays(key, event) {
+        let date = this.datepicker.activeDate.getDate();
+        /* istanbul ignore else */
+        /* sanity check */
+        if (key === 'left') {
+            date = date - 1;
+        }
+        else if (key === 'up') {
+            date = date - 7;
+        }
+        else if (key === 'right') {
+            date = date + 1;
+        }
+        else if (key === 'down') {
+            date = date + 7;
+        }
+        else if (key === 'pageup' || key === 'pagedown') {
+            const month = this.datepicker.activeDate.getMonth() + (key === 'pageup' ? -1 : 1);
+            this.datepicker.activeDate.setMonth(month, 1);
+            date = Math.min(this.getDaysInMonth(this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth()), date);
+        }
+        else if (key === 'home') {
+            date = 1;
+        }
+        else if (key === 'end') {
+            date = this.getDaysInMonth(this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth());
+        }
+        this.datepicker.activeDate.setDate(date);
+    }
+    getDaysInMonth(year, month) {
+        return month === 1 &&
+            year % 4 === 0 &&
+            (year % 400 === 0 || year % 100 !== 0)
+            ? 29
+            : this.daysInMonth[month];
+    }
+    /**
+     * Applies custom date properties to the existing dates displayed in the calendar.
+     */
+    applyCustomDates(customDates, dateRows) {
+        let date;
+        let newDate;
+        let dateIndex;
+        /* istanbul ignore else */
+        if (customDates && dateRows) {
+            customDates.forEach((customDate) => {
+                dateIndex = -1;
+                dateRows.forEach((row) => {
+                    if (dateIndex === -1) {
+                        dateIndex = row.findIndex((d) => {
+                            return d.date.getTime() === customDate.date.getTime();
+                        });
+                        if (dateIndex > -1) {
+                            date = row[dateIndex];
+                            // Replace the date with a new instance so the display gets updated.
+                            newDate = {
+                                current: date.current,
+                                date: date.date,
+                                disabled: !!date.disabled || !!customDate.disabled,
+                                keyDate: !!customDate.keyDate || !!date.keyDate,
+                                keyDateText: customDate.keyDateText || date.keyDateText,
+                                label: date.label,
+                                secondary: date.secondary,
+                                selected: date.selected,
+                                uid: date.uid,
+                            };
+                            row[dateIndex] = newDate;
+                        }
+                    }
+                });
+            });
+        }
+    }
+    dateRangeRowsAreEqual(rangeA, rangeB) {
+        /* istanbul ignore if */
+        if (!rangeA && !rangeB) {
+            return true;
+        }
+        else if ((rangeA && !rangeB) || (!rangeA && rangeB)) {
+            return false;
+        }
+        return (this.compareDays(rangeA.startDate, rangeB.startDate) === 0 &&
+            this.compareDays(rangeA.endDate, rangeB.endDate) === 0);
+    }
+    getDateRange(rows) {
+        /* istanbul ignore else */
+        if (rows && rows.length > 0) {
+            return {
+                startDate: rows[0][0].date,
+                endDate: rows[rows.length - 1][rows[rows.length - 1].length - 1].date,
+            };
+        }
+    }
+}
+SkyDayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+SkyDayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\" class=\"sky-daypicker-wrapper\">\n  <table\n    class=\"sky-daypicker-table\"\n    role=\"grid\"\n    [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n  >\n    <thead>\n      <tr>\n        <th class=\"sky-datepicker-header-left\" scope=\"col\">\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n            (click)=\"datepicker.moveCalendar($event, -1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n          >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-left\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-left\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n        <th scope=\"col\" [attr.colspan]=\"5\">\n          <button\n            [id]=\"datepicker.datepickerId + '-title'\"\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n            (click)=\"datepicker.toggleModeCalendar($event)\"\n            [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n            [ngClass]=\"{\n              'sky-btn-disabled':\n                datepicker.datepickerMode === datepicker.maxMode\n            }\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n          >\n            <strong>{{ title }}</strong>\n          </button>\n        </th>\n        <th class=\"sky-datepicker-header-right\" scope=\"col\">\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n            (click)=\"datepicker.moveCalendar($event, 1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n          >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-right\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-right\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n      </tr>\n      <tr>\n        <th\n          scope=\"col\"\n          *ngFor=\"let label of labels\"\n          class=\"sky-datepicker-center sky-datepicker-weekdays\"\n        >\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{ label.abbr }}</b>\n          </small>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <!-- Wait indicator for async custom date stream -->\n      <sky-wait [isWaiting]=\"isWaiting\"> </sky-wait>\n      <ng-template ngFor [ngForOf]=\"rows\" let-row=\"$implicit\" let-index=\"index\">\n        <tr role=\"row\">\n          <td\n            *ngFor=\"let date of row\"\n            class=\"sky-datepicker-center\"\n            role=\"gridcell\"\n            [id]=\"date.uid\"\n          >\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            >\n            </sky-daypicker-cell>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-daypicker', template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\" class=\"sky-daypicker-wrapper\">\n  <table\n    class=\"sky-daypicker-table\"\n    role=\"grid\"\n    [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n  >\n    <thead>\n      <tr>\n        <th class=\"sky-datepicker-header-left\" scope=\"col\">\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n            (click)=\"datepicker.moveCalendar($event, -1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n          >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-left\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-left\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n        <th scope=\"col\" [attr.colspan]=\"5\">\n          <button\n            [id]=\"datepicker.datepickerId + '-title'\"\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n            (click)=\"datepicker.toggleModeCalendar($event)\"\n            [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n            [ngClass]=\"{\n              'sky-btn-disabled':\n                datepicker.datepickerMode === datepicker.maxMode\n            }\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n          >\n            <strong>{{ title }}</strong>\n          </button>\n        </th>\n        <th class=\"sky-datepicker-header-right\" scope=\"col\">\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n            (click)=\"datepicker.moveCalendar($event, 1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n          >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-right\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-right\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n      </tr>\n      <tr>\n        <th\n          scope=\"col\"\n          *ngFor=\"let label of labels\"\n          class=\"sky-datepicker-center sky-datepicker-weekdays\"\n        >\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{ label.abbr }}</b>\n          </small>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <!-- Wait indicator for async custom date stream -->\n      <sky-wait [isWaiting]=\"isWaiting\"> </sky-wait>\n      <ng-template ngFor [ngForOf]=\"rows\" let-row=\"$implicit\" let-index=\"index\">\n        <tr role=\"row\">\n          <td\n            *ngFor=\"let date of row\"\n            class=\"sky-datepicker-center\"\n            role=\"gridcell\"\n            [id]=\"date.uid\"\n          >\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            >\n            </sky-daypicker-cell>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { customDates: [{
+                type: Input
+            }], calendarDateRangeChange: [{
+                type: Output
+            }], isWaiting: [{
+                type: Input
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyMonthPickerComponent {
+    constructor(datepicker) {
+        this.rows = [];
+        this.datepicker = datepicker;
+    }
+    ngOnInit() {
+        this.datepicker.stepMonth = {
+            years: 1,
+        };
+        this.datepicker.setRefreshViewHandler(() => {
+            this.refreshMonthView();
+        }, 'month');
+        this.datepicker.setCompareHandler(this.compareMonth, 'month');
+        this.datepicker.refreshView();
+        this.datepicker.setKeydownHandler((key, event) => {
+            this.keydownMonths(key, event);
+        }, 'month');
+    }
+    compareMonth(date1, date2) {
+        const d1 = new Date(date1.getFullYear(), date1.getMonth());
+        const d2 = new Date(date2.getFullYear(), date2.getMonth());
+        return d1.getTime() - d2.getTime();
+    }
+    refreshMonthView() {
+        const months = new Array(12);
+        const year = this.datepicker.activeDate.getFullYear();
+        let date;
+        for (let i = 0; i < 12; i++) {
+            date = new Date(year, i, 1);
+            date = this.datepicker.fixTimeZone(date);
+            months[i] = this.datepicker.createDateObject(date, this.datepicker.formatMonth, false, this.datepicker.datepickerId + '-' + i);
+        }
+        this.title = this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatMonthTitle);
+        this.rows = this.datepicker.createCalendarRows(months, this.datepicker.monthColLimit);
+    }
+    keydownMonths(key, event) {
+        let date = this.datepicker.activeDate.getMonth();
+        /* istanbul ignore else */
+        /* sanity check */
+        if (key === 'left') {
+            date = date - 1;
+        }
+        else if (key === 'up') {
+            date = date - this.datepicker.monthColLimit;
+        }
+        else if (key === 'right') {
+            date = date + 1;
+        }
+        else if (key === 'down') {
+            date = date + this.datepicker.monthColLimit;
+        }
+        else if (key === 'pageup' || key === 'pagedown') {
+            const year = this.datepicker.activeDate.getFullYear() + (key === 'pageup' ? -1 : 1);
+            this.datepicker.activeDate.setFullYear(year);
+        }
+        else if (key === 'home') {
+            date = 0;
+        }
+        else if (key === 'end') {
+            date = 11;
+        }
+        this.datepicker.activeDate.setMonth(date);
+    }
+}
+SkyMonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+SkyMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0, template: "<table *ngIf=\"datepicker.datepickerMode === 'month'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th\n        [attr.colspan]=\"\n          datepicker.monthColLimit - 2 <= 0 ? 1 : datepicker.monthColLimit - 2\n        \"\n      >\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepicker.datepickerMode === maxMode\n          }\"\n          tabindex=\"-1\"\n        >\n          <strong>{{ title }}</strong>\n        </button>\n      </th>\n      <th class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"text-center\"\n        role=\"gridcell\"\n        id=\"{{ date.uid }}\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{\n            'sky-datepicker-btn-selected': date.selected,\n            'sky-btn-disabled': date.disabled,\n            'sky-btn-active': datepicker.isActive(date)\n          }\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n        >\n          <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n            date.label\n          }}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-monthpicker', template: "<table *ngIf=\"datepicker.datepickerMode === 'month'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th\n        [attr.colspan]=\"\n          datepicker.monthColLimit - 2 <= 0 ? 1 : datepicker.monthColLimit - 2\n        \"\n      >\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepicker.datepickerMode === maxMode\n          }\"\n          tabindex=\"-1\"\n        >\n          <strong>{{ title }}</strong>\n        </button>\n      </th>\n      <th class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"text-center\"\n        role=\"gridcell\"\n        id=\"{{ date.uid }}\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{\n            'sky-datepicker-btn-selected': date.selected,\n            'sky-btn-disabled': date.disabled,\n            'sky-btn-active': datepicker.isActive(date)\n          }\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n        >\n          <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n            date.label\n          }}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
+
+/**
+ * @internal
+ */
+class SkyYearPickerComponent {
+    constructor(datepicker) {
+        this.rows = [];
+        this.datepicker = datepicker;
+    }
+    ngOnInit() {
+        this.datepicker.stepYear = { years: this.datepicker.yearRange };
+        this.datepicker.setRefreshViewHandler(() => {
+            this.refreshYearView();
+        }, 'year');
+        this.datepicker.setCompareHandler(this.compareYears, 'year');
+        this.datepicker.setKeydownHandler((key, event) => {
+            this.keydownYears(key, event);
+        }, 'year');
+        this.datepicker.refreshView();
+    }
+    getStartingYear(year) {
+        return (Math.floor((year - 1) / this.datepicker.yearRange) *
+            this.datepicker.yearRange +
+            1);
+    }
+    compareYears(date1, date2) {
+        return date1.getFullYear() - date2.getFullYear();
+    }
+    refreshYearView() {
+        const years = new Array(this.datepicker.yearRange);
+        let date;
+        const start = this.getStartingYear(this.datepicker.activeDate.getFullYear());
+        for (let i = 0; i < this.datepicker.yearRange; i++) {
+            date = new Date(this.datepicker.activeDate);
+            date.setFullYear(start + i, 0, 1);
+            years[i] = this.datepicker.createDateObject(date, this.datepicker.formatYear, false, this.datepicker.datepickerId + '-' + i);
+        }
+        this.title = [
+            years[0].label,
+            years[this.datepicker.yearRange - 1].label,
+        ].join(' - ');
+        this.rows = this.datepicker.createCalendarRows(years, this.datepicker.yearColLimit);
+    }
+    keydownYears(key, event) {
+        let date = this.datepicker.activeDate.getFullYear();
+        /* istanbul ignore else */
+        /* sanity check */
+        if (key === 'left') {
+            date = date - 1;
+        }
+        else if (key === 'up') {
+            date = date - this.datepicker.yearColLimit;
+        }
+        else if (key === 'right') {
+            date = date + 1;
+        }
+        else if (key === 'down') {
+            date = date + this.datepicker.yearColLimit;
+        }
+        else if (key === 'pageup' || key === 'pagedown') {
+            date += (key === 'pageup' ? -1 : 1) * this.datepicker.yearRange;
+        }
+        else if (key === 'home') {
+            date = this.getStartingYear(this.datepicker.activeDate.getFullYear());
+        }
+        else if (key === 'end') {
+            date =
+                this.getStartingYear(this.datepicker.activeDate.getFullYear()) +
+                    this.datepicker.yearRange -
+                    1;
+        }
+        this.datepicker.activeDate.setFullYear(date);
+    }
+}
+SkyYearPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+SkyYearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0, template: "<table *ngIf=\"datepicker.datepickerMode === 'year'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th\n        [attr.colspan]=\"\n          datepicker.yearColLimit - 2 <= 0 ? 1 : datepicker.yearColLimit - 2\n        \"\n      >\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          role=\"heading\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n          }\"\n          tabindex=\"-1\"\n        >\n          <strong>{{ title }}</strong>\n        </button>\n      </th>\n      <th class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td *ngFor=\"let date of row\" class=\"sky-datepicker-row\" role=\"gridcell\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{\n            'sky-datepicker-btn-selected': date.selected,\n            'sky-btn-disabled': date.disabled,\n            'sky-btn-active': datepicker.isActive(date)\n          }\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n        >\n          <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n            date.label\n          }}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-yearpicker', template: "<table *ngIf=\"datepicker.datepickerMode === 'year'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th\n        [attr.colspan]=\"\n          datepicker.yearColLimit - 2 <= 0 ? 1 : datepicker.yearColLimit - 2\n        \"\n      >\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          role=\"heading\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n          }\"\n          tabindex=\"-1\"\n        >\n          <strong>{{ title }}</strong>\n        </button>\n      </th>\n      <th class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td *ngFor=\"let date of row\" class=\"sky-datepicker-row\" role=\"gridcell\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{\n            'sky-datepicker-btn-selected': date.selected,\n            'sky-btn-disabled': date.disabled,\n            'sky-btn-active': datepicker.isActive(date)\n          }\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n        >\n          <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n            date.label\n          }}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
+
+/**
+ * @internal
+ */
+class SkyDatepickerCalendarComponent {
+    constructor(adapter, config, elementRef) {
+        this.adapter = adapter;
+        this.config = config;
+        this.elementRef = elementRef;
+        this.calendarDateRangeChange = new EventEmitter();
+        this.calendarModeChange = new EventEmitter();
+        this.selectedDateChange = new EventEmitter(undefined);
+        this._now = new Date();
+        this.formatter = new SkyDateFormatter();
+        this.configureOptions();
+    }
+    /** starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) */
+    set startingDay(start) {
+        this._startingDay = start;
+    }
+    get startingDay() {
+        return this._startingDay || 0;
+    }
+    /**
+     * @internal
+     * Indicates if the calendar element's visiblity property is 'visible'.
+     */
+    get isVisible() {
+        return this.adapter.elementIsVisible();
+    }
+    ngAfterViewInit() {
+        this.adapter.init(this.elementRef);
+    }
+    configureOptions() {
+        Object.assign(this, this.config);
+    }
+    onCalendarDateRangeChange(event) {
+        this.calendarDateRangeChange.next(event);
+    }
+    onCalendarModeChange(event) {
+        this.calendarModeChange.emit(event);
+    }
+    onSelectedDateChange(event) {
+        this.selectedDateChange.emit(event);
+    }
+    writeValue(value) {
+        if (value !== undefined &&
+            this.formatter.dateIsValid(value) &&
+            this.selectedDate !== undefined &&
+            this._datepicker.compareHandlerDay(value, this.selectedDate) === 0) {
+            return;
+        }
+        if (this.formatter.dateIsValid(value)) {
+            this.selectedDate = value;
+            this._datepicker.select(value, false);
+        }
+        else {
+            this.selectedDate = new Date();
+            this._datepicker.select(new Date(), false);
+        }
+    }
+}
+SkyDatepickerCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerAdapterService }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyDatepickerCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: { customDates: "customDates", isDaypickerWaiting: "isDaypickerWaiting", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", calendarModeChange: "calendarModeChange", selectedDateChange: "selectedDateChange" }, providers: [SkyDatepickerAdapterService], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n    [customDates]=\"customDates\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [selectedDate]=\"selectedDate\"\n    [startingDay]=\"startingDay\"\n    (calendarModeChange)=\"onCalendarModeChange($event)\"\n    (selectedDateChange)=\"onSelectedDateChange($event)\"\n  >\n    <sky-daypicker\n      tabindex=\"0\"\n      [customDates]=\"customDates\"\n      [isWaiting]=\"isDaypickerWaiting\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n    ></sky-daypicker>\n    <sky-monthpicker tabindex=\"0\"></sky-monthpicker>\n    <sky-yearpicker tabindex=\"0\"></sky-yearpicker>\n  </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], components: [{ type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: ["customDates", "isWaiting"], outputs: ["calendarDateRangeChange"] }, { type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { type: SkyYearPickerComponent, selector: "sky-yearpicker" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-datepicker-calendar', providers: [SkyDatepickerAdapterService], template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n    [customDates]=\"customDates\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [selectedDate]=\"selectedDate\"\n    [startingDay]=\"startingDay\"\n    (calendarModeChange)=\"onCalendarModeChange($event)\"\n    (selectedDateChange)=\"onSelectedDateChange($event)\"\n  >\n    <sky-daypicker\n      tabindex=\"0\"\n      [customDates]=\"customDates\"\n      [isWaiting]=\"isDaypickerWaiting\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n    ></sky-daypicker>\n    <sky-monthpicker tabindex=\"0\"></sky-monthpicker>\n    <sky-yearpicker tabindex=\"0\"></sky-yearpicker>\n  </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }]; }, propDecorators: { customDates: [{
+                type: Input
+            }], isDaypickerWaiting: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], selectedDate: [{
+                type: Input
+            }], startingDay: [{
+                type: Input
+            }], calendarDateRangeChange: [{
+                type: Output
+            }], calendarModeChange: [{
+                type: Output
+            }], selectedDateChange: [{
+                type: Output
+            }], _datepicker: [{
+                type: ViewChild,
+                args: [SkyDatepickerCalendarInnerComponent, {
+                        read: SkyDatepickerCalendarInnerComponent,
+                        static: true,
+                    }]
+            }] } });
+
+let nextId$1 = 0;
+/**
+ * Creates the datepicker button and calendar.
+ * You must wrap this component around an input with the `skyDatepickerInput` directive.
+ */
+class SkyDatepickerComponent {
+    constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
+        this.affixService = affixService;
+        this.changeDetector = changeDetector;
+        this.coreAdapter = coreAdapter;
+        this.overlayService = overlayService;
+        this.inputBoxHostService = inputBoxHostService;
+        /**
+         * Adds a class to the datepicker.
+         * @default ""
+         */
+        this.pickerClass = '';
+        /**
+         * Fires when the range of displayed dates in the calendar changes. Provides the
+         * current range of displayed dates and a mutable `customDate` property consumers can use
+         * to modify individual dates on the calendar.
+         */
+        this.calendarDateRangeChange = new EventEmitter();
+        this.dateChange = new EventEmitter();
+        this.isDaypickerWaiting = false;
+        this.isOpen = false;
+        this.isVisible = false;
+        this.ngUnsubscribe = new Subject();
+        this._disabled = false;
+        const uniqueId = nextId$1++;
+        this.calendarId = `sky-datepicker-calendar-${uniqueId}`;
+        this.triggerButtonId = `sky-datepicker-button-${uniqueId}`;
+        // Update icons when theme changes.
+        themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.changeDetector.markForCheck();
+        });
+    }
+    /**
+     * @internal
+     * Indicates if the calendar button element or any of its children have focus.
+     * @deprecated This property will be removed in the next major version release.
+     */
+    get buttonIsFocused() {
+        /* sanity check */
+        /* istanbul ignore if */
+        if (!this.triggerButtonRef) {
+            return false;
+        }
+        const activeEl = document.activeElement;
+        return this.triggerButtonRef.nativeElement === activeEl;
+    }
+    /**
+     * @internal
+     * Indicates if the calendar element or any of its children have focus.
+     * @deprecated This property will be removed in the next major version release.
+     */
+    get calendarIsFocused() {
+        if (!this.calendarRef) {
+            return false;
+        }
+        const focusedEl = document.activeElement;
+        return this.calendarRef.nativeElement.contains(focusedEl);
+    }
+    /**
+     * @internal
+     * Indicates if the calendar element's visiblity property is 'visible'.
+     * @deprecated This property will be removed in the next major version release.
+     */
+    get calendarIsVisible() {
+        return this.calendar ? this.calendar.isVisible : false;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        this.changeDetector.markForCheck();
+    }
+    set selectedDate(value) {
+        this._selectedDate = value;
+        if (this.calendar) {
+            this.calendar.writeValue(this._selectedDate);
+        }
+    }
+    set calendarRef(value) {
+        if (value) {
+            this._calendarRef = value;
+            // Wait for the calendar component to render before gauging dimensions.
+            setTimeout(() => {
+                this.calendar.writeValue(this._selectedDate);
+                this.destroyAffixer();
+                this.createAffixer();
+                setTimeout(() => {
+                    this.coreAdapter.getFocusableChildrenAndApplyFocus(this.calendarRef, '.sky-datepicker-calendar-inner', false);
+                    this.isVisible = true;
+                    this.changeDetector.markForCheck();
+                });
+            });
+        }
+    }
+    get calendarRef() {
+        return this._calendarRef;
+    }
+    ngOnInit() {
+        if (this.inputBoxHostService) {
+            this.inputBoxHostService.populate({
+                inputTemplate: this.inputTemplateRef,
+                buttonsTemplate: this.triggerButtonTemplateRef,
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.dateChange.complete();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.removePickerEventListeners();
+        this.destroyAffixer();
+        this.destroyOverlay();
+    }
+    onCalendarModeChange() {
+        // Let the calendar populate in the DOM before recalculating placement.
+        setTimeout(() => {
+            this.affixer.reaffix();
+        });
+    }
+    onSelectedDateChange(value) {
+        this.dateChange.emit(value);
+        this.closePicker();
+    }
+    onTriggerButtonClick() {
+        if (this.isOpen) {
+            this.closePicker();
+        }
+        else {
+            this.openPicker();
+        }
+    }
+    onCalendarDateRangeChange(event) {
+        /* istanbul ignore else */
+        if (event) {
+            this.cancelCustomDatesSubscription();
+            const args = {
+                startDate: event.startDate,
+                endDate: event.endDate,
+                customDates: undefined,
+            };
+            this.calendarDateRangeChange.emit(args);
+            // If consumer has added an observable to the args, watch for incoming custom dates.
+            /* istanbul ignore else */
+            if (args.customDates) {
+                this.isDaypickerWaiting = true;
+                // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
+                this.changeDetector.detectChanges();
+                this.customDatesSubscription = args.customDates
+                    .pipe(debounceTime(250))
+                    .subscribe((result) => {
+                    this.customDates = result;
+                    this.isDaypickerWaiting = false;
+                    // Trigger change detection in child components to show changes in the calendar.
+                    this.changeDetector.markForCheck();
+                });
+            }
+            else {
+                // If consumer returns an undefined value after custom dates have
+                // already ben established, remove custom dates.
+                if (this.customDates) {
+                    this.customDates = undefined;
+                    // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
+                    this.changeDetector.detectChanges();
+                }
+            }
+        }
+    }
+    closePicker() {
+        this.destroyAffixer();
+        this.destroyOverlay();
+        this.removePickerEventListeners();
+        this.triggerButtonRef.nativeElement.focus();
+        this.isOpen = false;
+    }
+    openPicker() {
+        this.isVisible = false;
+        this.changeDetector.markForCheck();
+        this.removePickerEventListeners();
+        this.calendarUnsubscribe = new Subject();
+        this.destroyOverlay();
+        this.createOverlay();
+        this.isOpen = true;
+        this.changeDetector.markForCheck();
+    }
+    createAffixer() {
+        const affixer = this.affixService.createAffixer(this.calendarRef);
+        // Hide calendar when trigger button is scrolled off screen.
+        affixer.placementChange
+            .pipe(takeUntil(this.calendarUnsubscribe))
+            .subscribe((change) => {
+            this.isVisible = change.placement !== null;
+            this.changeDetector.markForCheck();
+        });
+        affixer.affixTo(this.triggerButtonRef.nativeElement, {
+            autoFitContext: SkyAffixAutoFitContext.Viewport,
+            enableAutoFit: true,
+            horizontalAlignment: 'right',
+            isSticky: true,
+            placement: 'below',
+        });
+        this.affixer = affixer;
+    }
+    destroyAffixer() {
+        /*istanbul ignore else*/
+        if (this.affixer) {
+            this.affixer.destroy();
+            this.affixer = undefined;
+        }
+    }
+    createOverlay() {
+        const overlay = this.overlayService.create({
+            wrapperClass: this.pickerClass,
+            enableClose: false,
+            enablePointerEvents: false,
+        });
+        overlay.backdropClick
+            .pipe(takeUntil(this.calendarUnsubscribe))
+            .subscribe(() => {
+            /* istanbul ignore else */
+            if (this.isOpen) {
+                this.closePicker();
+            }
+        });
+        this.addKeydownListner();
+        overlay.attachTemplate(this.calendarTemplateRef);
+        this.overlay = overlay;
+    }
+    destroyOverlay() {
+        /*istanbul ignore else*/
+        if (this.overlay) {
+            this.overlayService.close(this.overlay);
+            this.overlay = undefined;
+        }
+    }
+    addKeydownListner() {
+        this.overlayKeydownListner = fromEvent(window.document, 'keydown')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((event) => {
+            var _a;
+            const key = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            if (key === 'escape' && this.isOpen) {
+                this.closePicker();
+            }
+        });
+    }
+    removePickerEventListeners() {
+        var _a;
+        /* istanbul ignore else */
+        if (this.calendarUnsubscribe) {
+            this.calendarUnsubscribe.next();
+            this.calendarUnsubscribe.complete();
+            this.calendarUnsubscribe = undefined;
+        }
+        (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    cancelCustomDatesSubscription() {
+        if (this.customDatesSubscription) {
+            this.customDatesSubscription.unsubscribe();
+            this.customDatesSubscription = undefined;
+        }
+    }
+}
+SkyDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$1.SkyInputBoxHostService, optional: true }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        'skyux_datepicker_trigger_button_label' | skyLibResources\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"calendar\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"calendar\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n    #calendarRef\n  >\n    <sky-datepicker-calendar\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    >\n    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-datepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        'skyux_datepicker_trigger_button_label' | skyLibResources\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"calendar\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"calendar\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n    #calendarRef\n  >\n    <sky-datepicker-calendar\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    >\n    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
+                        type: Optional
+                    }] }, { type: i3$2.SkyThemeService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { pickerClass: [{
+                type: Input
+            }], calendarDateRangeChange: [{
+                type: Output
+            }], calendar: [{
+                type: ViewChild,
+                args: [SkyDatepickerCalendarComponent]
+            }], calendarRef: [{
+                type: ViewChild,
+                args: ['calendarRef', {
+                        read: ElementRef,
+                    }]
+            }], calendarTemplateRef: [{
+                type: ViewChild,
+                args: ['calendarTemplateRef', {
+                        read: TemplateRef,
+                    }]
+            }], triggerButtonRef: [{
+                type: ViewChild,
+                args: ['triggerButtonRef', {
+                        read: ElementRef,
+                    }]
+            }], inputTemplateRef: [{
+                type: ViewChild,
+                args: ['inputTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], triggerButtonTemplateRef: [{
+                type: ViewChild,
+                args: ['triggerButtonTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+// tslint:disable:no-forward-ref no-use-before-declare
+const SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
+    multi: true,
+};
+const SKY_FUZZY_DATEPICKER_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
+    multi: true,
+};
+// tslint:enable
+class SkyFuzzyDatepickerInputDirective {
+    constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, resourcesService, datepickerComponent) {
+        this.changeDetector = changeDetector;
+        this.configService = configService;
+        this.elementRef = elementRef;
+        this.fuzzyDateService = fuzzyDateService;
+        this.localeProvider = localeProvider;
+        this.renderer = renderer;
+        this.resourcesService = resourcesService;
+        this.datepickerComponent = datepickerComponent;
+        /**
+         * Indicates whether to disable date validation on the fuzzy datepicker input.
+         * @default false
+         */
+        this.skyDatepickerNoValidate = false;
+        this.dateFormatter = new SkyDateFormatter();
+        this.ngUnsubscribe = new Subject();
+        this._futureDisabled = false;
+        this._disabled = false;
+        this._yearRequired = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (_) => { };
+        // 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()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((localeInfo) => {
+            this.locale = localeInfo.locale;
+            SkyDateFormatter.setLocale(this.locale);
+            this.preferredShortDateFormat =
+                SkyDateFormatter.getPreferredShortDateFormat();
+        });
+    }
+    /**
+     * Specifies the date format for the input. Place this attribute on the `input` element
+     * to override the default in `SkyDatepickerConfigService`.
+     * @default "MM/DD/YYYY"
+     */
+    set dateFormat(value) {
+        this._dateFormat = value;
+        if (this.value) {
+            const formattedDate = this.fuzzyDateService.format(this.value, this.dateFormat, this.locale);
+            this.setInputElementValue(formattedDate);
+            this.changeDetector.markForCheck();
+        }
+    }
+    get dateFormat() {
+        return (this._dateFormat ||
+            this.configService.dateFormat ||
+            this.preferredShortDateFormat);
+    }
+    /**
+     * Indicates whether to disable the datepicker.
+     * @default false
+     */
+    set disabled(value) {
+        this._disabled = value;
+        this.datepickerComponent.disabled = value;
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', value);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    /**
+     * Indicates whether to prevent users from specifying dates that are in the future.
+     * Place this attribute on the `input` element.
+     * @default false
+     */
+    set futureDisabled(value) {
+        this._futureDisabled = value;
+        this.onValidatorChange();
+    }
+    get futureDisabled() {
+        return this._futureDisabled;
+    }
+    /**
+     * Specifies the latest fuzzy date allowed. Place this attribute on the `input` element
+     * to prevent fuzzy dates after a specified date. This property accepts
+     * a `SkyFuzzyDate` value that includes numeric month, day, and year values.
+     * For example: `{ month: 1, day: 1, year: 2027 }`.
+     */
+    set maxDate(value) {
+        this._maxDate = value;
+        this.datepickerComponent.maxDate = this.getMaxDate();
+        this.onValidatorChange();
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
+    /**
+     * Specifies the earliest fuzzy date allowed. Place this attribute on the `input` element
+     * to prevent fuzzy dates before a specified date. This property accepts a `SkyFuzzyDate` value
+     * that includes numeric month, day, and year values.
+     * For example: `{ month: 1, day: 1, year: 2007 }`.
+     */
+    set minDate(value) {
+        this._minDate = value;
+        this.datepickerComponent.minDate = this.getMinDate();
+        this.onValidatorChange();
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    /**
+     * Creates the fuzzy datepicker input and calendar to let users specify dates that are
+     * not complete. For example, if users know the year but not the month or day, they can
+     * enter just the year. Place this directive on an `input` element, and wrap the `input`
+     * in a `sky-datepicker` component. The value that users select is driven
+     * through the `ngModel` attribute specified on the `input` element.
+     * @required
+     */
+    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
+     * in `SkyDatepickerConfigService`.
+     * @default 0
+     */
+    set startingDay(value) {
+        this._startingDay = value;
+        this.datepickerComponent.startingDay = this.startingDay;
+        this.onValidatorChange();
+    }
+    get startingDay() {
+        return this._startingDay || this.configService.startingDay;
+    }
+    /**
+     * Indicates whether to require the year in fuzzy dates.
+     * @default false
+     */
+    set yearRequired(value) {
+        this._yearRequired = value;
+        this.onValidatorChange();
+    }
+    get yearRequired() {
+        return this._yearRequired;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this.updateValue(value);
+    }
+    ngOnInit() {
+        if (this.yearRequired) {
+            if (this.dateFormat.toLowerCase().indexOf('y') === -1) {
+                throw new Error('You have configured conflicting settings. Year is required and dateFormat does not include year.');
+            }
+        }
+        if (!this.datepickerComponent) {
+            throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
+                '`<sky-datepicker>` component!');
+        }
+        const element = this.elementRef.nativeElement;
+        this.renderer.addClass(element, 'sky-form-control');
+        const hasAriaLabel = element.getAttribute('aria-label');
+        /* istanbul ignore else */
+        if (!hasAriaLabel) {
+            this.resourcesService
+                .getString('skyux_date_field_default_label')
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((value) => {
+                this.renderer.setAttribute(element, 'aria-label', value);
+            });
+        }
+    }
+    ngAfterContentInit() {
+        this.datepickerComponent.dateChange
+            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
+            .subscribe((value) => {
+            this.value = value;
+            this.onTouched();
+        });
+    }
+    ngAfterViewInit() {
+        // 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
+        // Of note is the parent check which allows us to determine if the form is reactive.
+        // Without this check there is a changed before checked error
+        /* istanbul ignore else */
+        if (this.control && this.control.parent) {
+            setTimeout(() => {
+                this.control.setValue(this.value, {
+                    emitEvent: false,
+                });
+                this.changeDetector.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    onInputChange(event) {
+        this.onValueChange(event.target.value);
+    }
+    onInputBlur() {
+        this.onTouched();
+        const formattedDate = this.fuzzyDateService.format(this.value, this.dateFormat, this.locale);
+        if (this.control.valid) {
+            this.setInputElementValue(formattedDate);
+        }
+    }
+    onInputKeyup() {
+        this.control.markAsDirty();
+    }
+    writeValue(value) {
+        this.updateValue(value, false);
+    }
+    validate(control) {
+        if (!this.control) {
+            this.control = control;
+        }
+        if (this.skyDatepickerNoValidate) {
+            return;
+        }
+        if (!this.control.value) {
+            return;
+        }
+        const value = control.value;
+        let fuzzyDate;
+        let validationError;
+        if (typeof value === 'string') {
+            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
+        }
+        else {
+            fuzzyDate = value;
+        }
+        if (!fuzzyDate) {
+            validationError = {
+                skyFuzzyDate: {
+                    invalid: value,
+                },
+            };
+        }
+        if (!validationError && !fuzzyDate.year && this.yearRequired) {
+            validationError = {
+                skyFuzzyDate: {
+                    yearRequired: value,
+                },
+            };
+        }
+        if (!validationError && fuzzyDate.year) {
+            let fuzzyDateRange;
+            if (this.maxDate) {
+                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.maxDate);
+                if (!fuzzyDateRange.valid) {
+                    validationError = {
+                        skyFuzzyDate: {
+                            maxDate: value,
+                        },
+                    };
+                }
+            }
+            if (!validationError && this.minDate) {
+                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(this.minDate, fuzzyDate);
+                if (!fuzzyDateRange.valid) {
+                    validationError = {
+                        skyFuzzyDate: {
+                            minDate: value,
+                        },
+                    };
+                }
+            }
+            if (!validationError && this.futureDisabled) {
+                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.fuzzyDateService.getCurrentFuzzyDate());
+                if (!fuzzyDateRange.valid) {
+                    validationError = {
+                        skyFuzzyDate: {
+                            futureDisabled: value,
+                        },
+                    };
+                }
+            }
+        }
+        if (validationError) {
+            // Mark the invalid control as touched so that the input's invalid CSS styles appear.
+            // (This is only required when the invalid value is set by the FormControl constructor.)
+            this.control.markAsTouched();
+        }
+        return validationError;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+        this.datepickerComponent.disabled = disabled;
+    }
+    /**
+     * Detects changes to the underlying input element's value and updates the ngModel accordingly.
+     * This is useful if you need to update the ngModel value before the input element loses focus.
+     */
+    detectInputValueChange() {
+        this.onValueChange(this.elementRef.nativeElement.value);
+    }
+    onValueChange(newValue) {
+        this.value = newValue;
+    }
+    setInputElementValue(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
+    }
+    getMaxDate() {
+        if (this.maxDate) {
+            const maxDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.maxDate);
+            if (maxDate.isValid()) {
+                return maxDate.toDate();
+            }
+        }
+        else if (this.futureDisabled) {
+            return new Date();
+        }
+        return this.configService.maxDate;
+    }
+    getMinDate() {
+        if (this.minDate) {
+            const minDate = this.fuzzyDateService.getMomentFromFuzzyDate(this.minDate);
+            if (minDate.isValid()) {
+                return minDate.toDate();
+            }
+        }
+        return this.configService.minDate;
+    }
+    /* istanbul ignore next */
+    fuzzyDatesEqual(dateA, dateB) {
+        return (dateA &&
+            dateB &&
+            ((!dateA.day && !dateB.day) || dateA.day === dateB.day) &&
+            ((!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: "13.2.7", 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: "13.2.7", 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: [
+        SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
+        SKY_FUZZY_DATEPICKER_VALIDATOR,
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyFuzzyDatepickerInput]',
+                    providers: [
+                        SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
+                        SKY_FUZZY_DATEPICKER_VALIDATOR,
+                    ],
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: i3.SkyLibResourcesService }, { type: SkyDatepickerComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { dateFormat: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], futureDisabled: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], skyDatepickerNoValidate: [{
+                type: Input
+            }], skyFuzzyDatepickerInput: [{
+                type: Input
+            }], startingDay: [{
+                type: Input
+            }], yearRequired: [{
+                type: Input
+            }], onInputChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], onInputBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onInputKeyup: [{
+                type: HostListener,
+                args: ['keyup']
+            }] } });
+
+// tslint:disable:no-forward-ref no-use-before-declare
+const SKY_DATEPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SkyDatepickerInputDirective),
+    multi: true,
+};
+const SKY_DATEPICKER_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => SkyDatepickerInputDirective),
+    multi: true,
+};
+// tslint:enable
+class SkyDatepickerInputDirective {
+    constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
+        this.adapter = adapter;
+        this.changeDetector = changeDetector;
+        this.configService = configService;
+        this.elementRef = elementRef;
+        this.localeProvider = localeProvider;
+        this.renderer = renderer;
+        this.resourcesService = resourcesService;
+        this.datepickerComponent = datepickerComponent;
+        /**
+         * Indicates whether to disable date validation on the datepicker input.
+         * @default false
+         */
+        this.skyDatepickerNoValidate = false;
+        this.dateFormatter = new SkyDateFormatter();
+        this.ngUnsubscribe = new Subject();
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (_) => { };
+        // 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();
+        this.localeProvider
+            .getLocaleInfo()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((localeInfo) => {
+            SkyDateFormatter.setLocale(localeInfo.locale);
+            this.preferredShortDateFormat =
+                SkyDateFormatter.getPreferredShortDateFormat();
+            this.applyDateFormat();
+        });
+    }
+    /**
+     * Specifies the date format for the input. Place this attribute on the `input` element
+     * to override the default in the `SkyDatepickerConfigService`.
+     * @default "MM/DD/YYYY"
+     */
+    set dateFormat(value) {
+        /* istanbul ignore else */
+        if (value !== this._dateFormat) {
+            this._dateFormat = value;
+            this.applyDateFormat();
+        }
+    }
+    get dateFormat() {
+        return (this._dateFormat ||
+            this.configService.dateFormat ||
+            this.preferredShortDateFormat);
+    }
+    /**
+     * Indicates whether to disable the datepicker.
+     * @default false
+     */
+    set disabled(value) {
+        this._disabled = value;
+        this.datepickerComponent.disabled = value;
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', value);
+    }
+    get disabled() {
+        return this._disabled || false;
+    }
+    /**
+     * @internal
+     * Indicates if the input element or any of its children have focus.
+     */
+    get inputIsFocused() {
+        return this.adapter.elementIsFocused();
+    }
+    /**
+     * Specifies the latest date that is available in the calendar. Place this attribute on
+     * the `input` element to override the default in `SkyDatepickerConfigService`.
+     */
+    set maxDate(value) {
+        this._maxDate = value;
+        this.datepickerComponent.maxDate = this.maxDate;
+        this.onValidatorChange();
+    }
+    get maxDate() {
+        return this._maxDate || this.configService.maxDate;
+    }
+    /**
+     * Specifies the earliest date that is available in the calendar. Place this attribute on
+     * the `input` element to override the default in `SkyDatepickerConfigService`.
+     */
+    set minDate(value) {
+        this._minDate = value;
+        this.datepickerComponent.minDate = this.minDate;
+        this.onValidatorChange();
+    }
+    get minDate() {
+        return this._minDate || this.configService.minDate;
+    }
+    /**
+     * Creates the datepicker input and calendar. Place this directive on an `input` element,
+     * and wrap the input in a `sky-datepicker` component. The value that users select is driven
+     * through the `ngModel` attribute specified on the `input` element.
+     * @required
+     */
+    set skyDatepickerInput(value) {
+        if (value) {
+            console.warn('[Deprecation warning] You no longer need to provide a template reference variable ' +
+                'to the `skyDatepickerInput` attribute (this will be a breaking change in the next ' +
+                'major version release).\n' +
+                'Do this instead:\n' +
+                '<sky-datepicker>\n  <input skyDatepickerInput />\n</sky-datepicker>');
+        }
+    }
+    /**
+     * 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
+     * in `SkyDatepickerConfigService`.
+     * @default 0
+     */
+    set startingDay(value) {
+        this._startingDay = value;
+        this.datepickerComponent.startingDay = this.startingDay;
+        this.onValidatorChange();
+    }
+    get startingDay() {
+        return this._startingDay || this.configService.startingDay;
+    }
+    /**
+     * Indicates whether the format of the date value must match the format from the `dateFormat` value.
+     * If this property is `true` and the datepicker input directive cannot find an exact match, then
+     * the input is marked as invalid.
+     * If this property is `false` and the datepicker input directive cannot find an exact match, then
+     * it attempts to format the string based on the [ISO 8601 standard format](https://www.iso.org/iso-8601-date-and-time-format.html).
+     * @default false
+     */
+    set strict(value) {
+        this._strict = value;
+    }
+    get strict() {
+        return this._strict || false;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this.updateValue(value);
+    }
+    ngOnInit() {
+        if (!this.datepickerComponent) {
+            throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
+                '`<sky-datepicker>` component!');
+        }
+        const element = this.elementRef.nativeElement;
+        this.renderer.addClass(element, 'sky-form-control');
+        const hasAriaLabel = element.getAttribute('aria-label');
+        if (!hasAriaLabel) {
+            this.resourcesService
+                .getString('skyux_date_field_default_label')
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((value) => {
+                this.renderer.setAttribute(element, 'aria-label', value);
+            });
+        }
+    }
+    ngAfterContentInit() {
+        this.datepickerComponent.dateChange
+            .pipe(distinctUntilChanged())
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((value) => {
+            this.value = value;
+            this.onTouched();
+        });
+    }
+    ngAfterViewInit() {
+        // 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
+        // Of note is the parent check which allows us to determine if the form is reactive.
+        // Without this check there is a changed before checked error
+        /* istanbul ignore else */
+        if (this.control && this.control.parent) {
+            setTimeout(() => {
+                this.control.setValue(this.value, {
+                    emitEvent: false,
+                });
+                this.changeDetector.markForCheck();
+            });
+        }
+        this.adapter.init(this.elementRef);
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    onInputChange(event) {
+        const value = event.target.value;
+        if (this.skyDatepickerNoValidate) {
+            this.onValueChange(value);
+            return;
+        }
+        // Don't try to parse the string value into a Date value if it is malformed.
+        if (this.isDateStringValid(value)) {
+            this.onValueChange(value);
+            return;
+        }
+        this._value = value;
+        this.onChange(value);
+        this.control.setErrors({
+            skyDate: {
+                invalid: true,
+            },
+        });
+    }
+    onInputBlur() {
+        this.onTouched();
+    }
+    onInputKeyup() {
+        this.control.markAsDirty();
+    }
+    writeValue(value) {
+        this.updateValue(value, false);
+    }
+    validate(control) {
+        if (!this.control) {
+            this.control = control;
+        }
+        if (this.skyDatepickerNoValidate) {
+            return;
+        }
+        const value = control.value;
+        if (!value) {
+            return;
+        }
+        const dateValue = this.getDateValue(value);
+        const isDateValid = dateValue && this.dateFormatter.dateIsValid(dateValue);
+        if (!isDateValid || !this.isDateStringValid(value)) {
+            // Mark the invalid control as touched so that the input's invalid CSS styles appear.
+            // (This is only required when the invalid value is set by the FormControl constructor.)
+            this.control.markAsTouched();
+            return {
+                skyDate: {
+                    invalid: value,
+                },
+            };
+        }
+        const minDate = this.minDate;
+        if (minDate && this.dateFormatter.dateIsValid(minDate) && value < minDate) {
+            return {
+                skyDate: {
+                    minDate,
+                },
+            };
+        }
+        const maxDate = this.maxDate;
+        if (maxDate && this.dateFormatter.dateIsValid(maxDate) && value > maxDate) {
+            return {
+                skyDate: {
+                    maxDate,
+                },
+            };
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+        this.datepickerComponent.disabled = disabled;
+    }
+    /**
+     * Detects changes to the underlying input element's value and updates the ngModel accordingly.
+     * This is useful if you need to update the ngModel value before the input element loses focus.
+     */
+    detectInputValueChange() {
+        this.onValueChange(this.elementRef.nativeElement.value);
+    }
+    applyDateFormat() {
+        this.updatePlaceholder();
+        if (this.value) {
+            const formattedDate = this.dateFormatter.format(this.value, this.dateFormat);
+            this.setInputElementValue(formattedDate);
+            this.changeDetector.markForCheck();
+        }
+    }
+    onValueChange(newValue) {
+        this.value = newValue;
+    }
+    setInputElementValue(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
+    }
+    getDateValue(value) {
+        let dateValue;
+        if (value instanceof Date) {
+            dateValue = value;
+        }
+        else if (typeof value === 'string') {
+            const date = this.dateFormatter.getDateFromString(value, this.dateFormat, this.strict);
+            if (this.dateFormatter.dateIsValid(date)) {
+                dateValue = date;
+            }
+        }
+        return dateValue;
+    }
+    /**
+     * Validates the input value to ensure it is formatted correctly.
+     */
+    isDateStringValid(value) {
+        if (!value || typeof value !== 'string') {
+            return true;
+        }
+        // Does the value only include digits, dashes, or slashes?
+        const regexp = /^[\d/-]+$/;
+        const isValid = regexp.test(value);
+        if (isValid) {
+            return true;
+        }
+        // If not, does it conform to the standard ISO format?
+        const isValidIso = moment(value, moment.ISO_8601).isValid();
+        return isValidIso;
+    }
+    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: "13.2.7", 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: "13.2.7", 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: [
+        SKY_DATEPICKER_VALUE_ACCESSOR,
+        SKY_DATEPICKER_VALIDATOR,
+        SkyDatepickerAdapterService,
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyDatepickerInput]',
+                    providers: [
+                        SKY_DATEPICKER_VALUE_ACCESSOR,
+                        SKY_DATEPICKER_VALIDATOR,
+                        SkyDatepickerAdapterService,
+                    ],
+                }]
+        }], ctorParameters: function () {
+        return [{ type: SkyDatepickerAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: i3.SkyLibResourcesService }, { type: SkyDatepickerComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { dateFormat: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], skyDatepickerInput: [{
+                type: Input
+            }], skyDatepickerNoValidate: [{
+                type: Input
+            }], startingDay: [{
+                type: Input
+            }], strict: [{
+                type: Input
+            }], onInputChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], onInputBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onInputKeyup: [{
+                type: HostListener,
+                args: ['keyup']
+            }] } });
+
+class SkyDatepickerModule {
+}
+SkyDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
+        SkyDatepickerCalendarInnerComponent,
+        SkyDayPickerComponent,
+        SkyMonthPickerComponent,
+        SkyYearPickerComponent,
+        SkyDatepickerComponent,
+        SkyDatepickerInputDirective,
+        SkyFuzzyDatepickerInputDirective,
+        SkyDayPickerCellComponent,
+        SkyDayPickerButtonComponent], imports: [CommonModule,
+        SkyI18nModule,
+        FormsModule,
+        SkyIconModule,
+        SkyDatetimeResourcesModule,
+        SkyAffixModule,
+        SkyOverlayModule,
+        SkyThemeModule,
+        SkyPopoverModule,
+        SkyWaitModule], exports: [SkyDatepickerCalendarComponent,
+        SkyDatepickerComponent,
+        SkyDatepickerInputDirective,
+        SkyFuzzyDatepickerInputDirective] });
+SkyDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerService], imports: [[
+            CommonModule,
+            SkyI18nModule,
+            FormsModule,
+            SkyIconModule,
+            SkyDatetimeResourcesModule,
+            SkyAffixModule,
+            SkyOverlayModule,
+            SkyThemeModule,
+            SkyPopoverModule,
+            SkyWaitModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyDatepickerCalendarComponent,
+                        SkyDatepickerCalendarInnerComponent,
+                        SkyDayPickerComponent,
+                        SkyMonthPickerComponent,
+                        SkyYearPickerComponent,
+                        SkyDatepickerComponent,
+                        SkyDatepickerInputDirective,
+                        SkyFuzzyDatepickerInputDirective,
+                        SkyDayPickerCellComponent,
+                        SkyDayPickerButtonComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        FormsModule,
+                        SkyIconModule,
+                        SkyDatetimeResourcesModule,
+                        SkyAffixModule,
+                        SkyOverlayModule,
+                        SkyThemeModule,
+                        SkyPopoverModule,
+                        SkyWaitModule,
+                    ],
+                    exports: [
+                        SkyDatepickerCalendarComponent,
+                        SkyDatepickerComponent,
+                        SkyDatepickerInputDirective,
+                        SkyFuzzyDatepickerInputDirective,
+                    ],
+                    providers: [SkyDatepickerService],
+                }]
+        }] });
+
+/**
+ * Need to add the following to classes which contain static methods.
+ * See: https://github.com/ng-packagr/ng-packagr/issues/641
+ * @internal
+ * @dynamic
+ */
+class SkyDateRangeRelativeValue {
+    static get today() {
+        const today = new Date();
+        return {
+            startDate: today,
+            endDate: today,
+        };
+    }
+    static get tomorrow() {
+        const tomorrow = new Date();
+        tomorrow.setDate(tomorrow.getDate() + 1);
+        return {
+            startDate: tomorrow,
+            endDate: tomorrow,
+        };
+    }
+    static get yesterday() {
+        const yesterday = new Date();
+        yesterday.setDate(yesterday.getDate() - 1);
+        return {
+            startDate: yesterday,
+            endDate: yesterday,
+        };
+    }
+    /**
+     * A date range starting with the nearest past Sunday and ending with the following Saturday.
+     */
+    static get thisWeek() {
+        const startDate = new Date();
+        startDate.setDate(startDate.getDate() - startDate.getDay());
+        const endDate = new Date();
+        endDate.setDate(endDate.getDate() - endDate.getDay() + 6);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    /**
+     * A date range starting with the nearest upcoming Sunday and ending with the following Saturday.
+     */
+    static get nextWeek() {
+        const startDate = new Date();
+        startDate.setDate(startDate.getDate() - startDate.getDay() + 7);
+        const endDate = new Date();
+        endDate.setDate(endDate.getDate() - endDate.getDay() + 13);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get lastWeek() {
+        const startDate = new Date();
+        startDate.setDate(startDate.getDate() - startDate.getDay() - 7);
+        const endDate = new Date();
+        endDate.setDate(endDate.getDate() - endDate.getDay() - 1);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get thisMonth() {
+        const startDate = new Date();
+        startDate.setDate(1);
+        const endDate = new Date();
+        endDate.setMonth(endDate.getMonth() + 1);
+        endDate.setDate(0);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get nextMonth() {
+        const startDate = new Date();
+        startDate.setDate(1);
+        startDate.setMonth(startDate.getMonth() + 1);
+        const endDate = new Date();
+        endDate.setDate(1);
+        endDate.setMonth(endDate.getMonth() + 2);
+        endDate.setDate(0);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get lastMonth() {
+        const startDate = new Date();
+        // First, set the day of the month to zero,
+        // which points to the last day of the previous month.
+        startDate.setDate(0);
+        // Finally, set the day of the month to 1.
+        startDate.setDate(1);
+        const endDate = new Date();
+        endDate.setDate(0);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get thisQuarter() {
+        const startDate = new Date();
+        const endDate = new Date();
+        const currentMonth = startDate.getMonth();
+        const quarterStartMonth = SkyDateRangeRelativeValue.getQuarterStartMonth(currentMonth);
+        startDate.setMonth(quarterStartMonth);
+        startDate.setDate(1);
+        endDate.setMonth(quarterStartMonth + 3);
+        endDate.setDate(0);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get nextQuarter() {
+        const startDate = new Date();
+        const endDate = new Date();
+        const currentMonth = startDate.getMonth();
+        const quarterStartMonth = SkyDateRangeRelativeValue.getQuarterStartMonth(currentMonth);
+        startDate.setMonth(quarterStartMonth + 3);
+        startDate.setDate(1);
+        endDate.setMonth(quarterStartMonth + 6);
+        endDate.setDate(0);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get lastQuarter() {
+        const startDate = new Date();
+        startDate.setDate(1);
+        const endDate = new Date();
+        endDate.setDate(1);
+        const currentMonth = startDate.getMonth();
+        const quarterStartMonth = SkyDateRangeRelativeValue.getQuarterStartMonth(currentMonth);
+        startDate.setMonth(quarterStartMonth - 3);
+        startDate.setDate(1);
+        endDate.setMonth(quarterStartMonth);
+        endDate.setDate(0);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get thisCalendarYear() {
+        const startDate = new Date();
+        startDate.setDate(1);
+        startDate.setMonth(0);
+        const endDate = new Date();
+        endDate.setDate(1);
+        endDate.setMonth(0);
+        endDate.setFullYear(endDate.getFullYear() + 1);
+        endDate.setDate(0);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get nextCalendarYear() {
+        const startDate = new Date();
+        startDate.setDate(1);
+        startDate.setMonth(0);
+        startDate.setFullYear(startDate.getFullYear() + 1);
+        const endDate = new Date();
+        endDate.setDate(1);
+        endDate.setMonth(0);
+        endDate.setFullYear(startDate.getFullYear() + 1);
+        endDate.setDate(0);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get lastCalendarYear() {
+        const startDate = new Date();
+        startDate.setDate(1);
+        startDate.setMonth(0);
+        startDate.setFullYear(startDate.getFullYear() - 1);
+        const endDate = new Date();
+        endDate.setDate(1);
+        endDate.setMonth(0);
+        endDate.setDate(0);
+        return {
+            startDate,
+            endDate,
+        };
+    }
+    static get thisFiscalYear() {
+        const start = new Date();
+        start.setDate(1);
+        return SkyDateRangeRelativeValue.getClosestFiscalYearRange(start);
+    }
+    static get nextFiscalYear() {
+        const start = new Date();
+        start.setDate(1);
+        start.setFullYear(start.getFullYear() + 1);
+        return SkyDateRangeRelativeValue.getClosestFiscalYearRange(start);
+    }
+    static get lastFiscalYear() {
+        const start = new Date();
+        start.setDate(1);
+        start.setFullYear(start.getFullYear() - 1);
+        return SkyDateRangeRelativeValue.getClosestFiscalYearRange(start);
+    }
+    static getQuarterStartMonth(currentMonth) {
+        let month;
+        if (currentMonth < 3) {
+            month = 0;
+        }
+        else if (currentMonth < 6) {
+            month = 3;
+        }
+        else if (currentMonth < 9) {
+            month = 6;
+        }
+        else {
+            month = 9;
+        }
+        return month;
+    }
+    /**
+     * Return a fiscal year based on a start date.
+     * (The fiscal year starts in October and continues through to next September.)
+     */
+    static getClosestFiscalYearRange(startDate) {
+        const endDate = new Date(startDate);
+        if (startDate.getMonth() >= 9) {
+            startDate.setMonth(9);
+            endDate.setFullYear(startDate.getFullYear() + 1);
+            endDate.setMonth(9);
+            endDate.setDate(0);
+        }
+        else {
+            startDate.setFullYear(startDate.getFullYear() - 1);
+            startDate.setMonth(9);
+            endDate.setMonth(9);
+            endDate.setDate(0);
+        }
+        return {
+            startDate,
+            endDate,
+        };
+    }
+}
+
+const SKY_DEFAULT_CALCULATOR_CONFIGS = [
+    {
+        calculatorId: SkyDateRangeCalculatorId.AnyTime,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_any_time',
+        getValue: (startDate, endDate) => ({ startDate, endDate }),
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.Before,
+        type: SkyDateRangeCalculatorType.Before,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_before',
+        getValue: (startDate, endDate) => ({ startDate, endDate }),
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.After,
+        type: SkyDateRangeCalculatorType.After,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_after',
+        getValue: (startDate, endDate) => ({ startDate, endDate }),
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.SpecificRange,
+        type: SkyDateRangeCalculatorType.Range,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_specific_range',
+        getValue: (startDate, endDate) => ({ startDate, endDate }),
+        validate: (value) => {
+            if (value.startDate &&
+                value.endDate &&
+                value.startDate > value.endDate) {
+                return {
+                    endDateBeforeStartDate: true,
+                };
+            }
+        },
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.LastFiscalYear,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_fiscal_year',
+        getValue: () => SkyDateRangeRelativeValue.lastFiscalYear,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.LastMonth,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_month',
+        getValue: () => SkyDateRangeRelativeValue.lastMonth,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.LastQuarter,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_quarter',
+        getValue: () => SkyDateRangeRelativeValue.lastQuarter,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.LastWeek,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_week',
+        getValue: () => SkyDateRangeRelativeValue.lastWeek,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.LastCalendarYear,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_calendar_year',
+        getValue: () => SkyDateRangeRelativeValue.lastCalendarYear,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.NextFiscalYear,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_fiscal_year',
+        getValue: () => SkyDateRangeRelativeValue.nextFiscalYear,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.NextMonth,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_month',
+        getValue: () => SkyDateRangeRelativeValue.nextMonth,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.NextQuarter,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_quarter',
+        getValue: () => SkyDateRangeRelativeValue.nextQuarter,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.NextWeek,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_week',
+        getValue: () => SkyDateRangeRelativeValue.nextWeek,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.NextCalendarYear,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_calendar_year',
+        getValue: () => SkyDateRangeRelativeValue.nextCalendarYear,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.ThisFiscalYear,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_fiscal_year',
+        getValue: () => SkyDateRangeRelativeValue.thisFiscalYear,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.ThisMonth,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_month',
+        getValue: () => SkyDateRangeRelativeValue.thisMonth,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.ThisQuarter,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_quarter',
+        getValue: () => SkyDateRangeRelativeValue.thisQuarter,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.ThisWeek,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_week',
+        getValue: () => SkyDateRangeRelativeValue.thisWeek,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.ThisCalendarYear,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_calendar_year',
+        getValue: () => SkyDateRangeRelativeValue.thisCalendarYear,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.Today,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_today',
+        getValue: () => SkyDateRangeRelativeValue.today,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.Tomorrow,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_tomorrow',
+        getValue: () => SkyDateRangeRelativeValue.tomorrow,
+    },
+    {
+        calculatorId: SkyDateRangeCalculatorId.Yesterday,
+        type: SkyDateRangeCalculatorType.Relative,
+        shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_yesterday',
+        getValue: () => SkyDateRangeRelativeValue.yesterday,
+    },
+];
+
+/**
+ * Creates and manages `SkyDateRangeCalculator` instances.
+ */
+class SkyDateRangeService {
+    constructor(resourcesService) {
+        this.resourcesService = resourcesService;
+        this.calculatorReadyStream = new BehaviorSubject(false);
+        this.calculatorConfigs = {};
+        this.calculators = [];
+        this.createDefaultCalculators();
+    }
+    /**
+     * Creates a custom date range calculator.
+     * @param config The calculator config.
+     */
+    createCalculator(config) {
+        const newId = SkyDateRangeService.lastId++;
+        const calculator = new SkyDateRangeCalculator(newId, config);
+        this.calculators.push(calculator);
+        return calculator;
+    }
+    /**
+     * Returns calculators from an array of calculator IDs.
+     * @param ids The array of calculator IDs.
+     */
+    getCalculators(ids) {
+        const promises = ids.map((id) => {
+            return this.getCalculatorById(id);
+        });
+        return Promise.all(promises);
+    }
+    /**
+     * Returns a calculator from a calculator ID.
+     * @param id The calculator ID.
+     */
+    getCalculatorById(id) {
+        const calculatorId = parseInt(id, 10);
+        const found = this.calculators.find((calculator) => {
+            return calculator.calculatorId === calculatorId;
+        });
+        return new Promise((resolve, reject) => {
+            if (!found) {
+                reject(new Error(`A calculator with the ID ${id} was not found.`));
+                return;
+            }
+            this.calculatorReadyStream.pipe(first()).subscribe(() => {
+                resolve(found);
+            });
+        });
+    }
+    createDefaultCalculators() {
+        const tasks = [];
+        // Get resource strings for short descriptions.
+        SKY_DEFAULT_CALCULATOR_CONFIGS.forEach((defaultConfig) => {
+            const config = {
+                getValue: defaultConfig.getValue,
+                validate: defaultConfig.validate,
+                shortDescription: '',
+                type: defaultConfig.type,
+            };
+            tasks.push(this.resourcesService
+                .getString(defaultConfig.shortDescriptionResourceKey)
+                .pipe(first(), map((value) => {
+                config.shortDescription = value;
+            })));
+            this.calculatorConfigs[defaultConfig.calculatorId] = config;
+        });
+        forkJoin(tasks)
+            .pipe(first())
+            .subscribe(() => {
+            const calculatorIds = Object.keys(this.calculatorConfigs);
+            const calculators = calculatorIds.map((calculatorId) => {
+                const id = parseInt(calculatorId, 10);
+                return new SkyDateRangeCalculator(id, this.calculatorConfigs[id]);
+            });
+            this.calculators = calculators;
+            this.calculatorReadyStream.next(true);
+        });
+    }
+}
+// Start the count higher than the number of available values
+// provided in the SkyDateRangeCalculatorId enum.
+SkyDateRangeService.lastId = 1000;
+SkyDateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDateRangeService, deps: [{ token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDateRangeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDateRangeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }]; } });
+
+/* tslint:disable:no-forward-ref no-use-before-declare */
+const SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SkyDateRangePickerComponent),
+    multi: true,
+};
+const SKY_DATE_RANGE_PICKER_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => SkyDateRangePickerComponent),
+    multi: true,
+};
+/* tslint:enable */
+let uniqueId = 0;
+/**
+ * Acts as a form control with a form model of type `SkyDateRangeCalculation`.
+ * @example
+ * ```
+ * <sky-date-range-picker
+ *   formControlName="myPicker"
+ * >
+ * </sky-date-range-picker>
+ * ```
+ */
+class SkyDateRangePickerComponent {
+    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
+         */
+        this.startDateRequired = false;
+        /**
+         * Indicates whether to require users to specify a end date.
+         * @default false
+         */
+        this.endDateRequired = false;
+        this.dateRangePickerId = `sky-date-range-picker-${uniqueId++}`;
+        this.isReady = false;
+        this.showEndDatePicker = false;
+        this.showStartDatePicker = false;
+        this.ngUnsubscribe = new Subject();
+        this._disabled = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (_) => { };
+        // 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()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((localeInfo) => {
+            SkyDateFormatter.setLocale(localeInfo.locale);
+            this.preferredShortDateFormat =
+                SkyDateFormatter.getPreferredShortDateFormat();
+        });
+        // Update icons when theme changes.
+        /* istanbul ignore next */
+        themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.changeDetector.markForCheck();
+        });
+    }
+    /**
+     * Specifies IDs for the date range options to include in the picker's dropdown.
+     * The options specify calculator objects that return two `Date` objects to represent date ranges.
+     * By default, this property includes all `SkyDateRangeCalculatorId` values.
+     */
+    set calculatorIds(value) {
+        this._calculatorIds = value;
+    }
+    get calculatorIds() {
+        return (this._calculatorIds || [
+            SkyDateRangeCalculatorId.AnyTime,
+            SkyDateRangeCalculatorId.Before,
+            SkyDateRangeCalculatorId.After,
+            SkyDateRangeCalculatorId.SpecificRange,
+            SkyDateRangeCalculatorId.Yesterday,
+            SkyDateRangeCalculatorId.Today,
+            SkyDateRangeCalculatorId.Tomorrow,
+            SkyDateRangeCalculatorId.LastWeek,
+            SkyDateRangeCalculatorId.ThisWeek,
+            SkyDateRangeCalculatorId.NextWeek,
+            SkyDateRangeCalculatorId.LastMonth,
+            SkyDateRangeCalculatorId.ThisMonth,
+            SkyDateRangeCalculatorId.NextMonth,
+            SkyDateRangeCalculatorId.LastQuarter,
+            SkyDateRangeCalculatorId.ThisQuarter,
+            SkyDateRangeCalculatorId.NextQuarter,
+            SkyDateRangeCalculatorId.LastCalendarYear,
+            SkyDateRangeCalculatorId.ThisCalendarYear,
+            SkyDateRangeCalculatorId.NextCalendarYear,
+            SkyDateRangeCalculatorId.LastFiscalYear,
+            SkyDateRangeCalculatorId.ThisFiscalYear,
+            SkyDateRangeCalculatorId.NextFiscalYear,
+        ]);
+    }
+    /**
+     * Specifies a date format for
+     * [the `sky-datepicker` components](https://developer.blackbaud.com/skyux/components/datepicker)
+     * that make up the date range picker. The text input is a composite component of
+     * up to two `sky-datepicker` components.
+     * @default "MM/DD/YYYY"
+     */
+    set dateFormat(value) {
+        this._dateFormat = value;
+    }
+    get dateFormat() {
+        return this._dateFormat || this.preferredShortDateFormat;
+    }
+    /**
+     * Indicates whether to disable the date range picker.
+     * @default false
+     */
+    set disabled(value) {
+        this._disabled = value;
+        if (this.formGroup) {
+            if (this._disabled) {
+                this.formGroup.disable();
+            }
+            else {
+                this.formGroup.enable();
+            }
+        }
+        this.changeDetector.markForCheck();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    get startDateLabelResourceKey() {
+        if (this.selectedCalculator.type === SkyDateRangeCalculatorType.Range) {
+            return 'skyux_date_range_picker_start_date_label';
+        }
+        return 'skyux_date_range_picker_after_date_label';
+    }
+    get endDateLabelResourceKey() {
+        if (this.selectedCalculator.type === SkyDateRangeCalculatorType.Range) {
+            return 'skyux_date_range_picker_end_date_label';
+        }
+        return 'skyux_date_range_picker_before_date_label';
+    }
+    get selectedCalculator() {
+        return this.getCalculatorById(this.value.calculatorId);
+    }
+    get calculatorIdControl() {
+        return this.formGroup.get('calculatorId');
+    }
+    get defaultCalculator() {
+        return this.calculators[0];
+    }
+    get defaultValue() {
+        return this.defaultCalculator.getValue();
+    }
+    get endDateControl() {
+        return this.formGroup.get('endDate');
+    }
+    get startDateControl() {
+        return this.formGroup.get('startDate');
+    }
+    get value() {
+        if (this._value && this._value.calculatorId !== undefined) {
+            return this._value;
+        }
+        return this.defaultValue;
+    }
+    ngOnInit() {
+        this.createForm();
+        this.updateCalculators().then(() => {
+            this.addEventListeners();
+            this.isReady = true;
+            this.showRelevantFormFields();
+            // 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) {
+        if (changes.calculatorIds && changes.calculatorIds.firstChange === false) {
+            this.updateCalculators().then(() => {
+                const id = this.calculatorIdControl.value;
+                // Maintain the currently selected values if the calculators change after
+                // a value has been chosen.
+                const found = this.calculators.find((calculator) => {
+                    return calculator.calculatorId === id;
+                });
+                /* istanbul ignore else */
+                if (!found) {
+                    const newValue = this.defaultCalculator.getValue();
+                    this.setValue(newValue);
+                    this.resetFormGroupValue(newValue);
+                    this.showRelevantFormFields();
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    onFieldBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        // Only update the underlying controls when the calculators are ready.
+        const notifyChange = false;
+        // (We still need to save the initial value set by the consumer's form, however.)
+        this.setValue(value, notifyChange);
+        if (this.isReady) {
+            // When the control's value is set to `null`,
+            // set it to the default value.
+            if (!value) {
+                this.onChange(this.defaultValue);
+            }
+            this.resetFormGroupValue();
+            this.showRelevantFormFields();
+        }
+    }
+    validate(control) {
+        if (!this.control) {
+            this.control = control;
+        }
+        if (!this.isReady) {
+            return;
+        }
+        const value = control.value;
+        const idControl = this.calculatorIdControl;
+        const result = this.selectedCalculator.validate(value);
+        let errors;
+        if (result) {
+            errors = {
+                skyDateRange: {
+                    calculatorId: idControl.value,
+                    errors: result,
+                },
+            };
+        }
+        else {
+            errors = this.startDateControl.errors || this.endDateControl.errors;
+        }
+        if (!errors) {
+            // Clear any errors on the calculator select.
+            // tslint:disable-next-line:no-null-keyword
+            idControl.setErrors(null);
+            return;
+        }
+        idControl.setErrors(errors);
+        idControl.markAsTouched();
+        idControl.markAsDirty();
+        // Need to mark the control as touched for the error messages to appear.
+        this.control.markAsTouched();
+        // Notify the view to display any errors.
+        this.changeDetector.markForCheck();
+        return errors;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    setValue(value, notifyChange = true) {
+        const isNewValue = !this.dateRangesEqual(this._value, value);
+        if (isNewValue) {
+            this._value = value;
+            if (notifyChange) {
+                this.onChange(this.value);
+            }
+        }
+    }
+    patchValue(value) {
+        const newValue = Object.assign({}, this.value, value);
+        this.setValue(newValue);
+    }
+    createForm() {
+        this.formGroup = this.formBuilder.group({
+            calculatorId: new FormControl(),
+            startDate: new FormControl(),
+            endDate: new FormControl(),
+        });
+        if (this.disabled) {
+            this.formGroup.disable();
+        }
+    }
+    showRelevantFormFields() {
+        const calculator = this.selectedCalculator;
+        let showEndDatePicker = false;
+        let showStartDatePicker = false;
+        switch (calculator.type) {
+            case SkyDateRangeCalculatorType.Before:
+                showEndDatePicker = true;
+                break;
+            case SkyDateRangeCalculatorType.After:
+                showStartDatePicker = true;
+                break;
+            case SkyDateRangeCalculatorType.Range:
+                showEndDatePicker = true;
+                showStartDatePicker = true;
+                break;
+            default:
+                break;
+        }
+        this.showEndDatePicker = showEndDatePicker;
+        this.showStartDatePicker = showStartDatePicker;
+        this.changeDetector.markForCheck();
+    }
+    resetFormGroupValue(value) {
+        this.formGroup.reset(value || this.value);
+    }
+    addEventListeners() {
+        // Watch for selected calculator change.
+        this.calculatorIdControl.valueChanges
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((value) => {
+            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.
+        this.startDateControl.valueChanges
+            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
+            .subscribe((startDate) => {
+            this.patchValue({ startDate });
+        });
+        // Watch for end date value changes.
+        this.endDateControl.valueChanges
+            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
+            .subscribe((endDate) => {
+            this.patchValue({ endDate });
+        });
+        // Detect errors from the date inputs and update ng- classes on picker.
+        combineLatest([
+            this.startDateControl.statusChanges,
+            this.endDateControl.statusChanges,
+        ])
+            .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() {
+        return this.dateRangeService
+            .getCalculators(this.calculatorIds)
+            .then((calculators) => {
+            this.calculators = calculators;
+            this.changeDetector.markForCheck();
+        });
+    }
+    getCalculatorById(id) {
+        return this.calculators.find((calculator) => {
+            return calculator.calculatorId === id;
+        });
+    }
+    dateRangesEqual(rangeA, rangeB) {
+        return JSON.stringify(rangeA) === JSON.stringify(rangeB);
+    }
+}
+SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", 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,
+    ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isReady\" class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div class=\"sky-date-range-picker-form-group\">\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-select-calculator'\"\n      >\n        {{ label || 'skyux_date_range_picker_default_label' | skyLibResources }}\n      </label>\n      <select\n        class=\"sky-form-control\"\n        formControlName=\"calculatorId\"\n        [attr.id]=\"dateRangePickerId + '-select-calculator'\"\n        (blur)=\"onFieldBlur()\"\n      >\n        <option\n          *ngFor=\"let calculator of calculators\"\n          [value]=\"calculator.calculatorId\"\n        >\n          {{ calculator.shortDescription }}\n        </option>\n      </select>\n    </sky-input-box>\n  </div>\n\n  <div class=\"sky-date-range-picker-form-group\" [hidden]=\"!showStartDatePicker\">\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-start-date'\"\n        [ngClass]=\"{ 'sky-control-label-required': startDateRequired }\"\n      >\n        {{ startDateLabelResourceKey | skyLibResources }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"startDate\"\n          [attr.aria-label]=\"startDateLabelResourceKey | skyLibResources\"\n          [attr.id]=\"dateRangePickerId + '-start-date'\"\n          [attr.placeholder]=\"dateFormat\"\n          [required]=\"startDateRequired\"\n          [dateFormat]=\"dateFormat\"\n          (blur)=\"onFieldBlur()\"\n          skyDatepickerInput\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n\n  <div class=\"sky-date-range-picker-form-group\" [hidden]=\"!showEndDatePicker\">\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-end-date'\"\n        [ngClass]=\"{ 'sky-control-label-required': endDateRequired }\"\n      >\n        {{ endDateLabelResourceKey | skyLibResources }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"endDate\"\n          skyDatepickerInput\n          [attr.aria-label]=\"endDateLabelResourceKey | skyLibResources\"\n          [attr.id]=\"dateRangePickerId + '-end-date'\"\n          [attr.placeholder]=\"dateFormat\"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"endDateRequired\"\n          (blur)=\"onFieldBlur()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker{display:flex;margin-left:-5px;margin-right:-5px}.sky-date-range-picker-form-group{padding-left:5px;padding-right:5px}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;margin-bottom:0}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;margin-bottom:0}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern .sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern .sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-lg) .sky-date-range-picker-form-group{margin:0 20px 0 0}\n"], components: [{ type: i2$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-date-range-picker', providers: [
+                        SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
+                        SKY_DATE_RANGE_PICKER_VALIDATOR,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"isReady\" class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div class=\"sky-date-range-picker-form-group\">\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-select-calculator'\"\n      >\n        {{ label || 'skyux_date_range_picker_default_label' | skyLibResources }}\n      </label>\n      <select\n        class=\"sky-form-control\"\n        formControlName=\"calculatorId\"\n        [attr.id]=\"dateRangePickerId + '-select-calculator'\"\n        (blur)=\"onFieldBlur()\"\n      >\n        <option\n          *ngFor=\"let calculator of calculators\"\n          [value]=\"calculator.calculatorId\"\n        >\n          {{ calculator.shortDescription }}\n        </option>\n      </select>\n    </sky-input-box>\n  </div>\n\n  <div class=\"sky-date-range-picker-form-group\" [hidden]=\"!showStartDatePicker\">\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-start-date'\"\n        [ngClass]=\"{ 'sky-control-label-required': startDateRequired }\"\n      >\n        {{ startDateLabelResourceKey | skyLibResources }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"startDate\"\n          [attr.aria-label]=\"startDateLabelResourceKey | skyLibResources\"\n          [attr.id]=\"dateRangePickerId + '-start-date'\"\n          [attr.placeholder]=\"dateFormat\"\n          [required]=\"startDateRequired\"\n          [dateFormat]=\"dateFormat\"\n          (blur)=\"onFieldBlur()\"\n          skyDatepickerInput\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n\n  <div class=\"sky-date-range-picker-form-group\" [hidden]=\"!showEndDatePicker\">\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-end-date'\"\n        [ngClass]=\"{ 'sky-control-label-required': endDateRequired }\"\n      >\n        {{ endDateLabelResourceKey | skyLibResources }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"endDate\"\n          skyDatepickerInput\n          [attr.aria-label]=\"endDateLabelResourceKey | skyLibResources\"\n          [attr.id]=\"dateRangePickerId + '-end-date'\"\n          [attr.placeholder]=\"dateFormat\"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"endDateRequired\"\n          (blur)=\"onFieldBlur()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker{display:flex;margin-left:-5px;margin-right:-5px}.sky-date-range-picker-form-group{padding-left:5px;padding-right:5px}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;margin-bottom:0}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;margin-bottom:0}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern .sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern .sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-lg) .sky-date-range-picker-form-group{margin:0 20px 0 0}\n"] }]
+        }], 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
+            }], dateFormat: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], startDateRequired: [{
+                type: Input
+            }], endDateRequired: [{
+                type: Input
+            }] } });
+
+class SkyDateRangePickerModule {
+}
+SkyDateRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        SkyI18nModule,
+        SkyDatepickerModule,
+        SkyDatetimeResourcesModule,
+        SkyInputBoxModule], exports: [SkyDateRangePickerComponent] });
+SkyDateRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDateRangePickerModule, providers: [SkyDateRangeService], imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            SkyI18nModule,
+            SkyDatepickerModule,
+            SkyDatetimeResourcesModule,
+            SkyInputBoxModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyDateRangePickerComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyI18nModule,
+                        SkyDatepickerModule,
+                        SkyDatetimeResourcesModule,
+                        SkyInputBoxModule,
+                    ],
+                    exports: [SkyDateRangePickerComponent],
+                    providers: [SkyDateRangeService],
+                }]
+        }] });
+
+let nextId = 0;
+/**
+ * Creates a SKY UX-themed replacement for the HTML `input` element with `type="time"`.
+ * The value that users select is driven through the `ngModel` attribute
+ * specified on the `input` element. You must wrap this component around an `input`
+ * with the `skyTimepickerInput` directive.
+ */
+class SkyTimepickerComponent {
+    constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
+        this.affixService = affixService;
+        this.changeDetector = changeDetector;
+        this.coreAdapter = coreAdapter;
+        this.overlayService = overlayService;
+        this.inputBoxHostService = inputBoxHostService;
+        /**
+         * Fires when the value in the timepicker input changes.
+         */
+        this.selectedTimeChanged = new EventEmitter();
+        this.is8601 = false;
+        this.timeFormat = 'hh';
+        this.ngUnsubscribe = new Subject();
+        const uniqueId = nextId++;
+        this.timepickerId = `sky-timepicker-${uniqueId}`;
+        this.triggerButtonId = `sky-timepicker-button-${uniqueId}`;
+        // Update icons when theme changes.
+        themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
+            this.changeDetector.markForCheck();
+        });
+    }
+    set disabled(value) {
+        this._disabled = value;
+        this.changeDetector.markForCheck();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set selectedHour(setHour) {
+        let hourOffset = 0;
+        if (this.selectedMeridies === 'AM' && setHour === 12) {
+            hourOffset = -12;
+        }
+        if (this.selectedMeridies === 'PM' && setHour !== 12) {
+            hourOffset = 12;
+        }
+        if (this.is8601) {
+            hourOffset = 0;
+        }
+        const hour = moment({ hour: setHour }).add(hourOffset, 'hours').hour();
+        this.activeTime = moment({
+            hour: hour,
+            minute: moment(this.activeTime).get('minute') + 0,
+        }).toDate();
+        this.selectedTimeChanged.emit(this.selectedTime);
+    }
+    get selectedHour() {
+        if (!this.is8601) {
+            /* istanbul ignore next */
+            return parseInt(moment(this.activeTime).format('h'), 0) || 1;
+        }
+        /* istanbul ignore else */
+        if (this.is8601) {
+            return moment(this.activeTime).hour() + 0;
+        }
+    }
+    set selectedMeridies(meridies) {
+        /* istanbul ignore else */
+        if (!this.is8601) {
+            if (meridies.trim() !== this.selectedMeridies) {
+                this.activeTime = moment(this.activeTime).add(12, 'hours').toDate();
+                this.selectedTimeChanged.emit(this.selectedTime);
+            }
+        }
+    }
+    get selectedMeridies() {
+        if (this.activeTime) {
+            return moment(this.activeTime).format('A');
+        }
+        return '';
+    }
+    set selectedMinute(minute) {
+        this.activeTime = moment({
+            hour: moment(this.activeTime).get('hour') + 0,
+            minute: minute,
+        }).toDate();
+        this.selectedTimeChanged.emit(this.selectedTime);
+    }
+    get selectedMinute() {
+        return moment(this.activeTime).minute() + 0;
+    }
+    set selectedTime(newTime) {
+        if (typeof newTime !== 'undefined') {
+            /* sanity check */
+            /* istanbul ignore else */
+            if (newTime.local !== 'Invalid date') {
+                this.activeTime = newTime.iso8601;
+                this.changeDetector.markForCheck();
+            }
+        }
+    }
+    get selectedTime() {
+        const time = {
+            hour: moment(this.activeTime).hour(),
+            minute: moment(this.activeTime).minute(),
+            meridie: moment(this.activeTime).format('A'),
+            timezone: parseInt(moment(this.activeTime).format('Z'), 10),
+            iso8601: this.activeTime,
+            local: moment(this.activeTime).format(this.localeFormat),
+            customFormat: typeof this.returnFormat !== 'undefined'
+                ? this.returnFormat
+                : this.localeFormat,
+        };
+        return time;
+    }
+    set timepickerRef(value) {
+        if (value) {
+            this._timepickerRef = value;
+            // Wait for the timepicker component to render before guaging dimensions.
+            setTimeout(() => {
+                this.destroyAffixer();
+                this.createAffixer();
+                setTimeout(() => {
+                    this.coreAdapter.getFocusableChildrenAndApplyFocus(this.timepickerRef, '.sky-timepicker-content', false);
+                    this.isVisible = true;
+                    this.changeDetector.markForCheck();
+                });
+            });
+        }
+    }
+    get timepickerRef() {
+        return this._timepickerRef;
+    }
+    ngOnInit() {
+        this.setFormat(this.timeFormat);
+        this.addKeydownListner();
+        if (this.inputBoxHostService) {
+            this.inputBoxHostService.populate({
+                inputTemplate: this.inputTemplateRef,
+                buttonsTemplate: this.triggerButtonTemplateRef,
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.removePickerEventListeners();
+        this.destroyAffixer();
+        this.destroyOverlay();
+    }
+    setFormat(format) {
+        let h = 12;
+        let m = 12;
+        let minuteMultiplier = 5;
+        let localeFormat = 'h:mm A';
+        if (format === 'hh') {
+            h = 12;
+            m = 12;
+            minuteMultiplier = 5;
+            localeFormat = 'h:mm A';
+            this.is8601 = false;
+        }
+        if (format === 'HH') {
+            h = 24;
+            m = 4;
+            minuteMultiplier = 15;
+            localeFormat = 'HH:mm';
+            this.is8601 = true;
+        }
+        const data = {
+            // Create a sparse array with a length equal to the hour.
+            hours: Array(...Array(h)).map((_, i) => {
+                if (format === 'hh') {
+                    return ++i;
+                }
+                /* istanbul ignore else */
+                if (format === 'HH') {
+                    return i;
+                }
+                /* istanbul ignore next */
+                /* sanity check */
+                return 0;
+            }),
+            // Create a sparse array with a length equal to the minute.
+            minutes: Array(...Array(m)).map(function (_, i) {
+                return i * minuteMultiplier;
+            }),
+            localeFormat: localeFormat,
+            minuteMultiplier: minuteMultiplier,
+        };
+        this.hours = data.hours;
+        this.minutes = data.minutes;
+        this.localeFormat = data.localeFormat;
+        this.minuteMultiplier = data.minuteMultiplier;
+    }
+    onCloseButtonCick() {
+        this.closePicker();
+    }
+    setTime(event) {
+        /* istanbul ignore else */
+        if (typeof event !== 'undefined') {
+            /* istanbul ignore else */
+            if (event.type === 'click') {
+                event.stopPropagation();
+                if (event.target.name === 'hour') {
+                    this.selectedHour = parseInt(event.target.innerHTML, 0);
+                }
+                if (event.target.name === 'minute') {
+                    this.selectedMinute = parseInt(event.target.innerHTML, 0);
+                }
+                if (event.target.name === 'meridie') {
+                    this.selectedMeridies = event.target.innerHTML;
+                }
+            }
+        }
+    }
+    onTriggerButtonClick() {
+        this.openPicker();
+    }
+    closePicker() {
+        this.destroyAffixer();
+        this.destroyOverlay();
+        this.removePickerEventListeners();
+        this.triggerButtonRef.nativeElement.focus();
+        this.isOpen = false;
+    }
+    openPicker() {
+        this.isVisible = false;
+        this.changeDetector.markForCheck();
+        this.removePickerEventListeners();
+        this.timepickerUnsubscribe = new Subject();
+        this.destroyOverlay();
+        this.createOverlay();
+        this.isOpen = true;
+        this.changeDetector.markForCheck();
+    }
+    createAffixer() {
+        const affixer = this.affixService.createAffixer(this.timepickerRef);
+        // Hide timepicker when trigger button is scrolled off screen.
+        affixer.placementChange
+            .pipe(takeUntil(this.timepickerUnsubscribe))
+            .subscribe((change) => {
+            this.isVisible = change.placement !== null;
+            this.changeDetector.markForCheck();
+        });
+        affixer.affixTo(this.triggerButtonRef.nativeElement, {
+            autoFitContext: SkyAffixAutoFitContext.Viewport,
+            enableAutoFit: true,
+            horizontalAlignment: 'right',
+            isSticky: true,
+            placement: 'below',
+        });
+        this.affixer = affixer;
+    }
+    destroyAffixer() {
+        /*istanbul ignore else*/
+        if (this.affixer) {
+            this.affixer.destroy();
+            this.affixer = undefined;
+        }
+    }
+    createOverlay() {
+        const overlay = this.overlayService.create({
+            enableClose: false,
+            enablePointerEvents: false,
+        });
+        overlay.backdropClick
+            .pipe(takeUntil(this.timepickerUnsubscribe))
+            .subscribe(() => {
+            /* istanbul ignore else */
+            if (this.isOpen) {
+                this.closePicker();
+            }
+        });
+        this.addKeydownListner();
+        overlay.attachTemplate(this.timepickerTemplateRef);
+        this.overlay = overlay;
+    }
+    destroyOverlay() {
+        /*istanbul ignore else*/
+        if (this.overlay) {
+            this.overlayService.close(this.overlay);
+            this.overlay = undefined;
+        }
+    }
+    addKeydownListner() {
+        this.overlayKeydownListner = fromEvent(window.document, 'keydown')
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((event) => {
+            var _a;
+            const key = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            /* istanbul ignore else */
+            if (key === 'escape' && this.isOpen) {
+                this.closePicker();
+            }
+        });
+    }
+    removePickerEventListeners() {
+        var _a;
+        /* istanbul ignore else */
+        if (this.timepickerUnsubscribe) {
+            this.timepickerUnsubscribe.next();
+            this.timepickerUnsubscribe.complete();
+            this.timepickerUnsubscribe = undefined;
+        }
+        /* istanbul ignore next */
+        (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+}
+SkyTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$1.SkyInputBoxHostService, optional: true }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"clock\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\n            <button\n              name=\"hour\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ hour }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n        <ol>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n              (click)=\"setTime($event)\"\n            >\n              AM\n            </button>\n          </li>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n              (click)=\"setTime($event)\"\n            >\n              PM\n            </button>\n          </li>\n        </ol>\n      </section>\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonCick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"clock\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\n            <button\n              name=\"hour\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ hour }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n        <ol>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n              (click)=\"setTime($event)\"\n            >\n              AM\n            </button>\n          </li>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n              (click)=\"setTime($event)\"\n            >\n              PM\n            </button>\n          </li>\n        </ol>\n      </section>\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonCick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
+                        type: Optional
+                    }] }, { type: i3$2.SkyThemeService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { selectedTimeChanged: [{
+                type: Output
+            }], timepickerRef: [{
+                type: ViewChild,
+                args: ['timepickerRef', {
+                        read: ElementRef,
+                    }]
+            }], timepickerTemplateRef: [{
+                type: ViewChild,
+                args: ['timepickerTemplateRef', {
+                        read: TemplateRef,
+                    }]
+            }], triggerButtonRef: [{
+                type: ViewChild,
+                args: ['triggerButtonRef', {
+                        read: ElementRef,
+                    }]
+            }], inputTemplateRef: [{
+                type: ViewChild,
+                args: ['inputTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], triggerButtonTemplateRef: [{
+                type: ViewChild,
+                args: ['triggerButtonTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+// tslint:disable:no-forward-ref no-use-before-declare
+const SKY_TIMEPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SkyTimepickerInputDirective),
+    multi: true,
+};
+const SKY_TIMEPICKER_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => SkyTimepickerInputDirective),
+    multi: true,
+};
+// tslint:enable
+class SkyTimepickerInputDirective {
+    constructor(renderer, elRef, resourcesService, changeDetector) {
+        this.renderer = renderer;
+        this.elRef = elRef;
+        this.resourcesService = resourcesService;
+        this.changeDetector = changeDetector;
+        this._timeFormat = 'hh';
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onChange = (_) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._onTouched = () => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this._validatorChange = () => { };
+    }
+    /**
+     * Creates the timepicker input field and picker. Place this attribute on an `input` element,
+     * and wrap the input in a `sky-timepicker` component.
+     * This attribute must be set to the instance of the `sky-timepicker`.
+     * @required
+     */
+    get skyTimepickerInput() {
+        return this._skyTimepickerInput;
+    }
+    set skyTimepickerInput(value) {
+        this._skyTimepickerInput = value;
+        this.updateTimepickerInput();
+    }
+    /**
+     * Specifies the 12-hour `hh` or 24-hour `HH` time format for the input.
+     * @default "hh"
+     */
+    set timeFormat(value) {
+        this._timeFormat = value;
+    }
+    get timeFormat() {
+        return this._timeFormat || 'hh';
+    }
+    /**
+     * Indicates whether to disable the timepicker.
+     * @default false
+     */
+    get disabled() {
+        return this._disabled || false;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        this.updateTimepickerInput();
+        this.renderer.setProperty(this.elRef.nativeElement, 'disabled', value);
+    }
+    get modelValue() {
+        return this._modelValue;
+    }
+    set modelValue(value) {
+        if (value !== this._modelValue) {
+            this._modelValue = value;
+            this.updateTimepickerInput();
+            this.setInputValue(value);
+            this._validatorChange();
+            this._onChange(value);
+        }
+    }
+    ngOnInit() {
+        this.renderer.addClass(this.elRef.nativeElement, 'sky-form-control');
+        this.pickerChangedSubscription =
+            this.skyTimepickerInput.selectedTimeChanged.subscribe((newTime) => {
+                this.writeValue(newTime);
+                this._onTouched();
+            });
+        /* istanbul ignore else */
+        if (!this.elRef.nativeElement.getAttribute('aria-label')) {
+            this.resourcesService
+                .getString('skyux_timepicker_input_default_label')
+                .subscribe((value) => {
+                this.renderer.setAttribute(this.elRef.nativeElement, 'aria-label', value);
+            });
+        }
+    }
+    ngAfterContentInit() {
+        // Watch for the control to be added and initialize the value immediately.
+        /* istanbul ignore else */
+        if (this.control && this.control.parent) {
+            this.control.setValue(this.modelValue, {
+                emitEvent: false,
+            });
+            this.changeDetector.markForCheck();
+        }
+    }
+    ngOnDestroy() {
+        this.pickerChangedSubscription.unsubscribe();
+    }
+    ngOnChanges() {
+        this.skyTimepickerInput.setFormat(this.timeFormat);
+        this.skyTimepickerInput.returnFormat = this.returnFormat;
+    }
+    onChange(event) {
+        this.writeValue(event.target.value);
+    }
+    /* istanbul ignore next */
+    onBlur() {
+        this._onTouched();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorChange = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(value) {
+        this.modelValue = this.formatter(value);
+    }
+    validate(control) {
+        if (!this.control) {
+            this.control = control;
+        }
+        const value = control.value;
+        if (!value) {
+            return undefined;
+        }
+        /* istanbul ignore next */
+        if (value.local === 'Invalid date') {
+            return {
+                skyTime: {
+                    invalid: control.value,
+                },
+            };
+        }
+        return undefined;
+    }
+    setInputValue(value) {
+        let formattedValue = '';
+        if (value) {
+            const output = moment(value).format(value.customFormat);
+            /* istanbul ignore else */
+            if (output !== 'Invalid date') {
+                formattedValue = output;
+            }
+        }
+        this.renderer.setProperty(this.elRef.nativeElement, 'value', formattedValue);
+    }
+    formatter(time) {
+        if (time && typeof time !== 'string' && 'local' in time) {
+            return time;
+        }
+        if (typeof time === 'string') {
+            if (time.length === 0) {
+                return '';
+            }
+            let currentFormat;
+            if (this.timeFormat === 'hh') {
+                currentFormat = 'h:mm A';
+            }
+            if (this.timeFormat === 'HH') {
+                currentFormat = 'H:mm';
+            }
+            if (typeof this.returnFormat === 'undefined') {
+                this.returnFormat = currentFormat;
+            }
+            const formatTime = {
+                hour: moment(time, currentFormat).hour(),
+                minute: moment(time, currentFormat).minute(),
+                meridie: moment(time, currentFormat).format('A'),
+                timezone: parseInt(moment(time, currentFormat).format('Z'), 10),
+                iso8601: moment(time, currentFormat).toDate(),
+                local: moment(time, currentFormat).format(currentFormat),
+                customFormat: this.returnFormat,
+            };
+            return formatTime;
+        }
+    }
+    updateTimepickerInput() {
+        if (this.skyTimepickerInput) {
+            this.skyTimepickerInput.disabled = this.disabled;
+            /* istanbul ignore else */
+            if (this.skyTimepickerInput.selectedTime !== this.modelValue) {
+                this.skyTimepickerInput.selectedTime = this.modelValue;
+            }
+        }
+    }
+}
+SkyTimepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTimepickerInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SkyTimepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SkyTimepickerInputDirective, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyTimepickerInput]',
+                    providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { skyTimepickerInput: [{
+                type: Input
+            }], timeFormat: [{
+                type: Input
+            }], returnFormat: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+class SkyTimepickerModule {
+}
+SkyTimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyDatetimeResourcesModule,
+        SkyAffixModule,
+        SkyOverlayModule,
+        SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] });
+SkyTimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTimepickerModule, imports: [[
+            CommonModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyDatetimeResourcesModule,
+            SkyAffixModule,
+            SkyOverlayModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTimepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyDatetimeResourcesModule,
+                        SkyAffixModule,
+                        SkyOverlayModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [SkyTimepickerInputDirective, SkyTimepickerComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyDatePipe, SkyDatePipeModule, SkyDateRangeCalculator, SkyDateRangeCalculatorId, SkyDateRangeCalculatorType, SkyDateRangePickerModule, SkyDateRangeService, SkyDatepickerConfigService, SkyDatepickerModule, SkyFuzzyDatePipe, SkyFuzzyDateService, SkyTimepickerModule, SkyDatepickerCalendarComponent as λ1, SkyDatepickerComponent as λ2, SkyDatepickerInputDirective as λ3, SkyFuzzyDatepickerInputDirective as λ4, SkyDateRangePickerComponent as λ5, SkyTimepickerComponent as λ6, SkyTimepickerInputDirective as λ7 };
+//# sourceMappingURL=skyux-datetime.mjs.map