@skyux/datetime 7.0.0-beta.12 → 7.0.0-beta.13

package/fesm2020/skyux-datetime.mjs

@@ -251,53 +251,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyFuzzyDateService_instances, _SkyFuzzyDateService_currentLocale, _SkyFuzzyDateService_ngUnsubscribe, _SkyFuzzyDateService_getMostRecentLeapYear, _SkyFuzzyDateService_getDateSeparator, _SkyFuzzyDateService_get4DigitYearFromDateString, _SkyFuzzyDateService_isLeapYear, _SkyFuzzyDateService_getMonthNumber, _SkyFuzzyDateService_getDefaultYear, _SkyFuzzyDateService_getDateComponents, _SkyFuzzyDateService_getDateFormatIndexes, _SkyFuzzyDateService_getDateValueIndexes, _SkyFuzzyDateService_isFuzzyDateValid;
 /**
  * @internal
  */
 class SkyFuzzyDateService {
     constructor(localeProvider) {
-        this.localeProvider = localeProvider;
-        this.ngUnsubscribe = new Subject();
-        this.localeProvider
+        _SkyFuzzyDateService_instances.add(this);
+        _SkyFuzzyDateService_currentLocale.set(this, void 0);
+        _SkyFuzzyDateService_ngUnsubscribe.set(this, new Subject());
+        __classPrivateFieldSet(this, _SkyFuzzyDateService_currentLocale, localeProvider.defaultLocale, "f");
+        localeProvider
             .getLocaleInfo()
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyFuzzyDateService_ngUnsubscribe, "f")))
             .subscribe((localeInfo) => {
-            this.currentLocale = localeInfo.locale;
+            __classPrivateFieldSet(this, _SkyFuzzyDateService_currentLocale, localeInfo.locale, "f");
         });
     }
     /* istanbul ignore next */
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyFuzzyDateService_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyFuzzyDateService_ngUnsubscribe, "f").complete();
     }
     /**
      * Returns the browser's current locale string.
      */
     getCurrentLocale() {
-        return this.currentLocale;
+        return __classPrivateFieldGet(this, _SkyFuzzyDateService_currentLocale, "f");
     }
     /**
      * 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');
+        return moment.localeData(locale || __classPrivateFieldGet(this, _SkyFuzzyDateService_currentLocale, "f")).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)) {
+        if (!__classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_isFuzzyDateValid).call(this, fuzzyDate)) {
             return '';
         }
         if (!format) {
             return '';
         }
-        const separator = this.getDateSeparator(format);
+        const separator = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getDateSeparator).call(this, format);
         const dateParts = [];
-        const formatTokens = format.split(separator);
-        locale = locale || this.currentLocale;
+        const formatTokens = separator
+            ? format.split(separator)
+            : [format];
+        locale = locale || __classPrivateFieldGet(this, _SkyFuzzyDateService_currentLocale, "f");
         const fuzzyDateMoment = this.getMomentFromFuzzyDate(fuzzyDate).locale(locale);
         for (let index = 0; index < formatTokens.length; index++) {
             const token = formatTokens[index];
@@ -332,8 +337,8 @@ class SkyFuzzyDateService {
         if (!fuzzyDate) {
             return;
         }
-        const year = fuzzyDate.year || this.getDefaultYear(fuzzyDate);
-        const month = fuzzyDate.month > 0 ? fuzzyDate.month - 1 : 0;
+        const year = fuzzyDate.year || __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getDefaultYear).call(this, fuzzyDate);
+        const month = fuzzyDate.month && fuzzyDate.month > 0 ? fuzzyDate.month - 1 : 0;
         const day = fuzzyDate.day || 1;
         return moment([year, month, day]);
     }
@@ -345,8 +350,8 @@ class SkyFuzzyDateService {
         if (!fuzzyDate || !dateFormat) {
             return;
         }
-        const separator = this.getDateSeparator(dateFormat);
-        const dateFormatIndexes = this.getDateFormatIndexes(dateFormat);
+        const separator = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getDateSeparator).call(this, dateFormat);
+        const dateFormatIndexes = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getDateFormatIndexes).call(this, dateFormat);
         let dateString = '';
         // Get the components of the date in the order expected of the local format.
         const dateComponents = [
@@ -370,7 +375,7 @@ class SkyFuzzyDateService {
             return;
         }
         const fuzzyDate = {};
-        const dateFormatIndexes = this.getDateFormatIndexes(dateFormat);
+        const dateFormatIndexes = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getDateFormatIndexes).call(this, dateFormat);
         if (dateFormatIndexes.yearIndex > -1) {
             fuzzyDate.year = selectedDate.getFullYear();
         }
@@ -389,8 +394,8 @@ class SkyFuzzyDateService {
         let day;
         let month;
         let year;
-        const dateComponents = this.getDateComponents(date);
-        const indexes = this.getDateValueIndexes(date, dateFormat);
+        const dateComponents = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getDateComponents).call(this, date);
+        const indexes = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getDateValueIndexes).call(this, date, dateFormat);
         // Look at the date string's component count:
         // 3 indicates a full date
         // 2 indicates a month-year or month-day date
@@ -405,7 +410,7 @@ class SkyFuzzyDateService {
             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);
+                year = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_get4DigitYearFromDateString).call(this, date);
                 if (year) {
                     month =
                         dateComponents[0] === year.toString()
@@ -445,7 +450,7 @@ class SkyFuzzyDateService {
         }
         if (month) {
             // Check if month is valid.
-            month = this.getMonthNumber(month);
+            month = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getMonthNumber).call(this, month);
             if (month === undefined) {
                 return;
             }
@@ -510,133 +515,118 @@ class SkyFuzzyDateService {
             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);
+}
+_SkyFuzzyDateService_currentLocale = new WeakMap(), _SkyFuzzyDateService_ngUnsubscribe = new WeakMap(), _SkyFuzzyDateService_instances = new WeakSet(), _SkyFuzzyDateService_getMostRecentLeapYear = function _SkyFuzzyDateService_getMostRecentLeapYear() {
+    let leapYear = new Date().getFullYear();
+    while (!__classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_isLeapYear).call(this, leapYear)) {
+        leapYear -= 1;
+    }
+    return leapYear;
+}, _SkyFuzzyDateService_getDateSeparator = function _SkyFuzzyDateService_getDateSeparator(dateFormat) {
+    let returnValue;
+    const separators = ['/', '.', '-', ' '];
+    separators.forEach((separator) => {
+        if (!returnValue && dateFormat.indexOf(separator) > 0) {
+            returnValue = separator;
+        }
+    });
+    return returnValue;
+}, _SkyFuzzyDateService_get4DigitYearFromDateString = function _SkyFuzzyDateService_get4DigitYearFromDateString(date) {
+    let year;
+    const separator = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getDateSeparator).call(this, date);
+    if (separator) {
         // 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)) {
+    if (year && !isNaN(Number(year))) {
+        return parseInt(year, 10);
+    }
+    return undefined;
+}, _SkyFuzzyDateService_isLeapYear = function _SkyFuzzyDateService_isLeapYear(year) {
+    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+}, _SkyFuzzyDateService_getMonthNumber = function _SkyFuzzyDateService_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;
         }
-        return returnValue;
+        returnValue = parseInt(moment().month(month).format('M'), 10);
     }
-    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();
-        }
+    else {
+        returnValue = monthAsNumber;
+    }
+    // Ensure that the month is between 1 and 12
+    if (!(1 <= returnValue && returnValue <= 12)) {
+        return;
+    }
+    return returnValue;
+}, _SkyFuzzyDateService_getDefaultYear = function _SkyFuzzyDateService_getDefaultYear(fuzzyDate) {
+    // Check if we need to return a leap year or the current year.
+    if (fuzzyDate.month === 2 && fuzzyDate.day === 29) {
+        return __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getMostRecentLeapYear).call(this);
+    }
+    else {
+        return new Date().getFullYear();
     }
-    getDateComponents(date) {
-        const separator = this.getDateSeparator(date);
+}, _SkyFuzzyDateService_getDateComponents = function _SkyFuzzyDateService_getDateComponents(date) {
+    const separator = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getDateSeparator).call(this, date);
+    if (separator) {
         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'),
-        };
+    else {
+        return [date];
+    }
+}, _SkyFuzzyDateService_getDateFormatIndexes = function _SkyFuzzyDateService_getDateFormatIndexes(dateFormat) {
+    dateFormat = dateFormat.toLowerCase();
+    return {
+        yearIndex: dateFormat.indexOf('y'),
+        monthIndex: dateFormat.indexOf('m'),
+        dayIndex: dateFormat.indexOf('d'),
+    };
+}, _SkyFuzzyDateService_getDateValueIndexes = function _SkyFuzzyDateService_getDateValueIndexes(date, dateFormat) {
+    const dateFormatIndexes = __classPrivateFieldGet(this, _SkyFuzzyDateService_instances, "m", _SkyFuzzyDateService_getDateFormatIndexes).call(this, 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),
+    };
+}, _SkyFuzzyDateService_isFuzzyDateValid = function _SkyFuzzyDateService_isFuzzyDateValid(fuzzyDate) {
+    if (!fuzzyDate) {
+        return false;
     }
-    // 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),
-        };
+    // If none of the dates part are specified, return false.
+    if (!fuzzyDate.day && !fuzzyDate.month && !fuzzyDate.year) {
+        return false;
     }
-    /**
-     * 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;
+    // 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: "14.2.0", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyFuzzyDateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
@@ -704,6 +694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyDateRangeCalculator_instances, _SkyDateRangeCalculator_config, _SkyDateRangeCalculator_parseDateWithoutTime;
 /**
  * Represents the calculator.
  */
@@ -714,7 +705,9 @@ class SkyDateRangeCalculator {
      */
     calculatorId, config) {
         this.calculatorId = calculatorId;
-        this.config = config;
+        _SkyDateRangeCalculator_instances.add(this);
+        _SkyDateRangeCalculator_config.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDateRangeCalculator_config, config, "f");
         this.type = config.type;
         this.shortDescription = config.shortDescription;
     }
@@ -724,14 +717,14 @@ class SkyDateRangeCalculator {
      * @param endDateInput The end date.
      */
     getValue(startDateInput, endDateInput) {
-        const result = this.config.getValue(startDateInput, endDateInput);
+        const result = __classPrivateFieldGet(this, _SkyDateRangeCalculator_config, "f").getValue(startDateInput, endDateInput);
         let startDate = null;
         if (result.startDate instanceof Date) {
-            startDate = this.parseDateWithoutTime(result.startDate);
+            startDate = __classPrivateFieldGet(this, _SkyDateRangeCalculator_instances, "m", _SkyDateRangeCalculator_parseDateWithoutTime).call(this, result.startDate);
         }
         let endDate = null;
         if (result.endDate instanceof Date) {
-            endDate = this.parseDateWithoutTime(result.endDate);
+            endDate = __classPrivateFieldGet(this, _SkyDateRangeCalculator_instances, "m", _SkyDateRangeCalculator_parseDateWithoutTime).call(this, result.endDate);
         }
         return {
             calculatorId: this.calculatorId,
@@ -743,19 +736,15 @@ class SkyDateRangeCalculator {
      * Performs synchronous validation against the control.
      */
     validate(value) {
-        if (!this.config.validate) {
-            return;
+        if (!__classPrivateFieldGet(this, _SkyDateRangeCalculator_config, "f").validate) {
+            return null;
         }
-        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());
+        return __classPrivateFieldGet(this, _SkyDateRangeCalculator_config, "f").validate(value);
     }
 }
+_SkyDateRangeCalculator_config = new WeakMap(), _SkyDateRangeCalculator_instances = new WeakSet(), _SkyDateRangeCalculator_parseDateWithoutTime = function _SkyDateRangeCalculator_parseDateWithoutTime(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+};
 
 /**
  * `SkyDateRangeCalculatorId` values specify calculator objects that return
@@ -926,7 +915,7 @@ class SkyDateFormatter {
         return momentValue.toDate();
     }
     dateIsValid(date) {
-        return (date &&
+        return !!(date &&
             date instanceof Date &&
             !isNaN(date.valueOf()) &&
             !isNaN(new Date(date).getDate()));
@@ -935,14 +924,19 @@ class SkyDateFormatter {
 SkyDateFormatter.defaultLocale = 'en-US';
 SkyDateFormatter.defaultShortDateFormat = 'MM/DD/YYYY';
 
+var _SkyDatepickerCalendarInnerComponent_instances, _SkyDatepickerCalendarInnerComponent_ngUnsubscribe, _SkyDatepickerCalendarInnerComponent__selectedDate, _SkyDatepickerCalendarInnerComponent__startingDay, _SkyDatepickerCalendarInnerComponent_getCustomDate;
 let nextDatepickerId = 0;
 /**
  * @internal
  */
 class SkyDatepickerCalendarInnerComponent {
     constructor() {
+        _SkyDatepickerCalendarInnerComponent_instances.add(this);
         this.selectedDateChange = new EventEmitter(undefined);
         this.calendarModeChange = new EventEmitter();
+        // TODO: `activeDate` is very similar to `selectedDate` and at the very least should be able to be undefined. However, this would take considerable refactoring to do and thus has been deferred.
+        this.activeDate = new Date();
+        this.activeDateId = '';
         this.minMode = 'day';
         this.maxMode = 'year';
         this.monthColLimit = 3;
@@ -973,16 +967,28 @@ class SkyDatepickerCalendarInnerComponent {
             39: 'right',
             40: 'down',
         };
-        this.ngUnsubscribe = new Subject();
+        _SkyDatepickerCalendarInnerComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyDatepickerCalendarInnerComponent__selectedDate.set(this, void 0);
+        _SkyDatepickerCalendarInnerComponent__startingDay.set(this, 0);
+    }
+    set startingDay(value) {
+        __classPrivateFieldSet(this, _SkyDatepickerCalendarInnerComponent__startingDay, value || 0, "f");
+    }
+    get startingDay() {
+        return __classPrivateFieldGet(this, _SkyDatepickerCalendarInnerComponent__startingDay, "f");
     }
     set selectedDate(value) {
-        if (this.dateFormatter.dateIsValid(value)) {
-            this._selectedDate = value;
+        if (value && this.dateFormatter.dateIsValid(value)) {
+            __classPrivateFieldSet(this, _SkyDatepickerCalendarInnerComponent__selectedDate, value, "f");
             this.activeDate = value;
         }
+        else {
+            __classPrivateFieldSet(this, _SkyDatepickerCalendarInnerComponent__selectedDate, undefined, "f");
+            this.activeDate = new Date();
+        }
     }
     get selectedDate() {
-        return this._selectedDate;
+        return __classPrivateFieldGet(this, _SkyDatepickerCalendarInnerComponent__selectedDate, "f");
     }
     ngOnInit() {
         if (this.selectedDate) {
@@ -996,8 +1002,8 @@ class SkyDatepickerCalendarInnerComponent {
         this.refreshView();
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDatepickerCalendarInnerComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDatepickerCalendarInnerComponent_ngUnsubscribe, "f").complete();
     }
     setCompareHandler(handler, type) {
         if (type === 'day') {
@@ -1025,6 +1031,8 @@ class SkyDatepickerCalendarInnerComponent {
         if (this.datepickerMode === 'year' && this.compareHandlerYear) {
             return this.compareHandlerYear(date1, date2);
         }
+        /* istanbul ignore next */
+        return undefined;
     }
     setRefreshViewHandler(handler, type) {
         if (type === 'day') {
@@ -1102,11 +1110,11 @@ class SkyDatepickerCalendarInnerComponent {
         }
     }
     createDateObject(date, format, isSecondary, id) {
-        const customDateMatch = this.getCustomDate(date);
+        const customDateMatch = __classPrivateFieldGet(this, _SkyDatepickerCalendarInnerComponent_instances, "m", _SkyDatepickerCalendarInnerComponent_getCustomDate).call(this, date);
         const dateObject = {
             date: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
             label: this.dateFilter(date, format),
-            selected: this.compare(date, this.selectedDate) === 0,
+            selected: !!this.selectedDate && this.compare(date, this.selectedDate) === 0,
             disabled: this.isDisabled(date),
             current: this.compare(date, new Date()) === 0,
             secondary: isSecondary,
@@ -1206,19 +1214,22 @@ class SkyDatepickerCalendarInnerComponent {
      * 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();
-            });
-        }
+        const customDate = __classPrivateFieldGet(this, _SkyDatepickerCalendarInnerComponent_instances, "m", _SkyDatepickerCalendarInnerComponent_getCustomDate).call(this, date);
+        const minDateCompare = this.compare(date, this.minDate);
+        const maxDateCompare = this.compare(date, this.maxDate);
+        return ((minDateCompare !== undefined && minDateCompare < 0) ||
+            (maxDateCompare !== undefined && maxDateCompare > 0) ||
+            !!customDate?.disabled);
     }
 }
+_SkyDatepickerCalendarInnerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepickerCalendarInnerComponent__selectedDate = new WeakMap(), _SkyDatepickerCalendarInnerComponent__startingDay = new WeakMap(), _SkyDatepickerCalendarInnerComponent_instances = new WeakSet(), _SkyDatepickerCalendarInnerComponent_getCustomDate = function _SkyDatepickerCalendarInnerComponent_getCustomDate(date) {
+    if (this.customDates) {
+        return this.customDates.find((customDate) => {
+            return customDate.date.getTime() === date.getTime();
+        });
+    }
+    return undefined;
+};
 SkyDatepickerCalendarInnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 SkyDatepickerCalendarInnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
@@ -1240,31 +1251,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Output
             }] } });
 
+var _SkyDatepickerAdapterService_renderer;
 /**
  * @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';
+        _SkyDatepickerAdapterService_renderer.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDatepickerAdapterService_renderer, renderer, "f");
     }
     getPlaceholder(elementRef) {
         return elementRef.nativeElement.getAttribute('placeholder');
     }
     setPlaceholder(elementRef, value) {
-        this.renderer.setAttribute(elementRef.nativeElement, 'placeholder', value);
+        __classPrivateFieldGet(this, _SkyDatepickerAdapterService_renderer, "f").setAttribute(elementRef.nativeElement, 'placeholder', value);
     }
 }
+_SkyDatepickerAdapterService_renderer = new WeakMap();
 SkyDatepickerAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDatepickerAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyDatepickerAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDatepickerAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDatepickerAdapterService, decorators: [{
@@ -1317,166 +1320,171 @@ class SkyDayPickerButtonComponent {
     }
 }
 SkyDayPickerButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
-SkyDayPickerButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+SkyDayPickerButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0, template: "<button\n  *ngIf=\"date\"\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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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"] }]
+            args: [{ selector: 'sky-daypicker-button', template: "<button\n  *ngIf=\"date\"\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
             }] } });
 
+var _SkyDayPickerCellComponent_instances, _SkyDayPickerCellComponent_activeUid, _SkyDayPickerCellComponent_cancelPopover, _SkyDayPickerCellComponent_popoverOpen, _SkyDayPickerCellComponent_ngUnsubscribe, _SkyDayPickerCellComponent_datepicker, _SkyDayPickerCellComponent_datepickerService, _SkyDayPickerCellComponent_hideTooltip, _SkyDayPickerCellComponent_showTooltip;
 /**
  * @internal
  */
 class SkyDayPickerCellComponent {
     constructor(datepicker, datepickerService) {
-        this.datepicker = datepicker;
-        this.datepickerService = datepickerService;
+        _SkyDayPickerCellComponent_instances.add(this);
         this.hasTooltip = false;
         this.popoverController = new Subject();
-        this.activeUid = '';
-        this.cancelPopover = false;
-        this.popoverOpen = false;
-        this.ngUnsubscribe = new Subject();
+        _SkyDayPickerCellComponent_activeUid.set(this, '');
+        _SkyDayPickerCellComponent_cancelPopover.set(this, false);
+        _SkyDayPickerCellComponent_popoverOpen.set(this, false);
+        _SkyDayPickerCellComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyDayPickerCellComponent_datepicker.set(this, void 0);
+        _SkyDayPickerCellComponent_datepickerService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDayPickerCellComponent_datepicker, datepicker, "f");
+        __classPrivateFieldSet(this, _SkyDayPickerCellComponent_datepickerService, datepickerService, "f");
     }
     ngOnInit() {
-        this.hasTooltip =
+        this.hasTooltip = !!(this.date &&
             this.date.keyDate &&
-                this.date.keyDateText &&
-                this.date.keyDateText.length > 0 &&
-                this.date.keyDateText[0].length > 0;
+            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) &&
+        if (!!this.date &&
+            __classPrivateFieldGet(this, _SkyDayPickerCellComponent_datepicker, "f").isActive(this.date) &&
             this.activeDateHasChanged &&
             this.hasTooltip) {
-            this.activeUid = this.date.uid;
-            this.showTooltip();
+            __classPrivateFieldSet(this, _SkyDayPickerCellComponent_activeUid, this.date.uid, "f");
+            __classPrivateFieldGet(this, _SkyDayPickerCellComponent_instances, "m", _SkyDayPickerCellComponent_showTooltip).call(this);
         }
         if (this.hasTooltip) {
-            this.datepickerService.keyDatePopoverStream
-                .pipe(takeUntil(this.ngUnsubscribe))
+            __classPrivateFieldGet(this, _SkyDayPickerCellComponent_datepickerService, "f").keyDatePopoverStream
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDayPickerCellComponent_ngUnsubscribe, "f")))
                 .subscribe((date) => {
                 if (date) {
-                    this.activeUid = date.uid;
+                    __classPrivateFieldSet(this, _SkyDayPickerCellComponent_activeUid, date.uid, "f");
                 }
                 else {
-                    this.activeUid = '';
+                    __classPrivateFieldSet(this, _SkyDayPickerCellComponent_activeUid, '', "f");
                 }
                 // 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();
+                if (this.date?.uid !== __classPrivateFieldGet(this, _SkyDayPickerCellComponent_activeUid, "f")) {
+                    __classPrivateFieldGet(this, _SkyDayPickerCellComponent_instances, "m", _SkyDayPickerCellComponent_hideTooltip).call(this);
                 }
             });
         }
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDayPickerCellComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDayPickerCellComponent_ngUnsubscribe, "f").complete();
     }
     onDayMouseenter() {
-        this.cancelPopover = false;
+        __classPrivateFieldSet(this, _SkyDayPickerCellComponent_cancelPopover, false, "f");
         if (this.hasTooltip) {
-            this.showTooltip();
-            this.datepickerService.keyDatePopoverStream.next(this.date);
+            __classPrivateFieldGet(this, _SkyDayPickerCellComponent_instances, "m", _SkyDayPickerCellComponent_showTooltip).call(this);
+            __classPrivateFieldGet(this, _SkyDayPickerCellComponent_datepickerService, "f").keyDatePopoverStream.next(this.date);
         }
     }
     onDayMouseleave() {
-        this.cancelPopover = true;
+        __classPrivateFieldSet(this, _SkyDayPickerCellComponent_cancelPopover, true, "f");
         if (this.hasTooltip) {
-            this.hideTooltip();
+            __classPrivateFieldGet(this, _SkyDayPickerCellComponent_instances, "m", _SkyDayPickerCellComponent_hideTooltip).call(this);
         }
-        this.datepickerService.keyDatePopoverStream.next(undefined);
+        __classPrivateFieldGet(this, _SkyDayPickerCellComponent_datepickerService, "f").keyDatePopoverStream.next(undefined);
     }
     onPopoverClosed() {
-        this.popoverOpen = false;
+        __classPrivateFieldSet(this, _SkyDayPickerCellComponent_popoverOpen, false, "f");
     }
     onPopoverOpened() {
-        this.popoverOpen = true;
+        __classPrivateFieldSet(this, _SkyDayPickerCellComponent_popoverOpen, true, "f");
         /* istanbul ignore else */
-        if (this.cancelPopover) {
+        if (__classPrivateFieldGet(this, _SkyDayPickerCellComponent_cancelPopover, "f")) {
             // If the popover gets opened just as a mouseout event happens, close it.
-            this.hideTooltip();
-            this.cancelPopover = false;
+            __classPrivateFieldGet(this, _SkyDayPickerCellComponent_instances, "m", _SkyDayPickerCellComponent_hideTooltip).call(this);
+            __classPrivateFieldSet(this, _SkyDayPickerCellComponent_cancelPopover, false, "f");
         }
     }
     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);
-        }
+        return this.hasTooltip && this.date?.keyDateText
+            ? this.date.keyDateText.join(', ')
+            : '';
     }
 }
+_SkyDayPickerCellComponent_activeUid = new WeakMap(), _SkyDayPickerCellComponent_cancelPopover = new WeakMap(), _SkyDayPickerCellComponent_popoverOpen = new WeakMap(), _SkyDayPickerCellComponent_ngUnsubscribe = new WeakMap(), _SkyDayPickerCellComponent_datepicker = new WeakMap(), _SkyDayPickerCellComponent_datepickerService = new WeakMap(), _SkyDayPickerCellComponent_instances = new WeakSet(), _SkyDayPickerCellComponent_hideTooltip = function _SkyDayPickerCellComponent_hideTooltip() {
+    /* istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyDayPickerCellComponent_popoverOpen, "f")) {
+        this.popoverController.next({ type: SkyPopoverMessageType.Close });
+    }
+}, _SkyDayPickerCellComponent_showTooltip = function _SkyDayPickerCellComponent_showTooltip() {
+    /* istanbul ignore else */
+    if (this.hasTooltip && !__classPrivateFieldGet(this, _SkyDayPickerCellComponent_popoverOpen, "f")) {
+        /**
+         * Delay 1/2 second before opening the popover as long as mouse hasn't moved off the date.
+         */
+        setTimeout(() => {
+            if (!__classPrivateFieldGet(this, _SkyDayPickerCellComponent_cancelPopover, "f") && __classPrivateFieldGet(this, _SkyDayPickerCellComponent_activeUid, "f") === this.date?.uid) {
+                this.popoverController.next({ type: SkyPopoverMessageType.Open });
+            }
+        }, 500);
+    }
+};
 SkyDayPickerCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDayPickerCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "component", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyDayPickerCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "component", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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" }]
+            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
             }] } });
 
+var _SkyDayPickerComponent_instances, _SkyDayPickerComponent_daysInMonth, _SkyDayPickerComponent_initialDate, _SkyDayPickerComponent_ngUnsubscribe, _SkyDayPickerComponent_compareDays, _SkyDayPickerComponent_refreshDayView, _SkyDayPickerComponent_keydownDays, _SkyDayPickerComponent_getDaysInMonth, _SkyDayPickerComponent_applyCustomDates, _SkyDayPickerComponent_dateRangeRowsAreEqual, _SkyDayPickerComponent_getDateRange;
 /**
  * @internal
  */
 class SkyDayPickerComponent {
     constructor(datepicker) {
+        _SkyDayPickerComponent_instances.add(this);
         this.calendarDateRangeChange = new EventEmitter();
         this.isWaiting = false;
         this.activeDateHasChanged = false;
         this.labels = [];
+        this.title = '';
         this.rows = [];
         this.weekNumbers = [];
-        this.daysInMonth = [
+        _SkyDayPickerComponent_daysInMonth.set(this, [
             31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31,
-        ];
-        this.ngUnsubscribe = new Subject();
+        ]);
+        _SkyDayPickerComponent_initialDate.set(this, void 0);
+        _SkyDayPickerComponent_ngUnsubscribe.set(this, new Subject());
         this.datepicker = datepicker;
     }
     set customDates(value) {
         /* istanbul ignore else */
         if (value) {
-            this.applyCustomDates(value, this.rows);
+            __classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_applyCustomDates).call(this, value, this.rows);
         }
     }
     ngOnInit() {
         this.datepicker.stepDay = { months: 1 };
-        this.initialDate = this.datepicker.activeDate.getDate();
+        __classPrivateFieldSet(this, _SkyDayPickerComponent_initialDate, this.datepicker.activeDate.getDate(), "f");
         this.datepicker.setRefreshViewHandler(() => {
-            this.refreshDayView();
+            __classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_refreshDayView).call(this);
         }, 'day');
-        this.datepicker.setCompareHandler(this.compareDays, 'day');
+        this.datepicker.setCompareHandler(__classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_compareDays), 'day');
         this.datepicker.setKeydownHandler((key, event) => {
-            this.keydownDays(key, event);
+            __classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_keydownDays).call(this, key, event);
         }, 'day');
         this.datepicker.refreshView();
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDayPickerComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDayPickerComponent_ngUnsubscribe, "f").complete();
     }
     getDates(startDate, n) {
         const dates = new Array(n);
@@ -1491,144 +1499,145 @@ class SkyDayPickerComponent {
         }
         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;
-        }
+}
+_SkyDayPickerComponent_daysInMonth = new WeakMap(), _SkyDayPickerComponent_initialDate = new WeakMap(), _SkyDayPickerComponent_ngUnsubscribe = new WeakMap(), _SkyDayPickerComponent_instances = new WeakSet(), _SkyDayPickerComponent_compareDays = function _SkyDayPickerComponent_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();
+}, _SkyDayPickerComponent_refreshDayView = function _SkyDayPickerComponent_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() !== __classPrivateFieldGet(this, _SkyDayPickerComponent_initialDate, "f")) {
+        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 = __classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_getDateRange).call(this, this.rows);
+    this.rows = this.datepicker.createCalendarRows(pickerDates, 7);
+    const newDateRange = __classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_getDateRange).call(this, this.rows);
+    if (!__classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_dateRangeRowsAreEqual).call(this, oldDateRange, newDateRange)) {
+        // Safety check
         /* 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)) {
+        if (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;
-                        }
+        else {
+            this.calendarDateRangeChange.next(undefined);
+        }
+    }
+}, _SkyDayPickerComponent_keydownDays = function _SkyDayPickerComponent_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(__classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_getDaysInMonth).call(this, this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth()), date);
+    }
+    else if (key === 'home') {
+        date = 1;
+    }
+    else if (key === 'end') {
+        date = __classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_getDaysInMonth).call(this, this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth());
+    }
+    this.datepicker.activeDate.setDate(date);
+}, _SkyDayPickerComponent_getDaysInMonth = function _SkyDayPickerComponent_getDaysInMonth(year, month) {
+    return month === 1 &&
+        year % 4 === 0 &&
+        (year % 400 === 0 || year % 100 !== 0)
+        ? 29
+        : __classPrivateFieldGet(this, _SkyDayPickerComponent_daysInMonth, "f")[month];
+}, _SkyDayPickerComponent_applyCustomDates = function _SkyDayPickerComponent_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);
+}, _SkyDayPickerComponent_dateRangeRowsAreEqual = function _SkyDayPickerComponent_dateRangeRowsAreEqual(rangeA, rangeB) {
+    /* istanbul ignore if */
+    if (!rangeA && !rangeB) {
+        return true;
     }
-    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,
-            };
-        }
+    else if (rangeA && rangeB) {
+        return (__classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_compareDays).call(this, rangeA.startDate, rangeB.startDate) === 0 &&
+            __classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_compareDays).call(this, rangeA.endDate, rangeB.endDate) === 0);
     }
-}
+    else {
+        return false;
+    }
+}, _SkyDayPickerComponent_getDateRange = function _SkyDayPickerComponent_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,
+        };
+    }
+    return undefined;
+};
 SkyDayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
 SkyDayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i3$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
@@ -1642,12 +1651,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Input
             }] } });
 
+var _SkyMonthPickerComponent_instances, _SkyMonthPickerComponent_compareMonth, _SkyMonthPickerComponent_refreshMonthView, _SkyMonthPickerComponent_keydownMonths;
 /**
  * @internal
  */
 class SkyMonthPickerComponent {
     constructor(datepicker) {
+        _SkyMonthPickerComponent_instances.add(this);
         this.rows = [];
+        this.title = '';
         this.datepicker = datepicker;
     }
     ngOnInit() {
@@ -1655,83 +1667,84 @@ class SkyMonthPickerComponent {
             years: 1,
         };
         this.datepicker.setRefreshViewHandler(() => {
-            this.refreshMonthView();
+            __classPrivateFieldGet(this, _SkyMonthPickerComponent_instances, "m", _SkyMonthPickerComponent_refreshMonthView).call(this);
         }, 'month');
-        this.datepicker.setCompareHandler(this.compareMonth, 'month');
+        this.datepicker.setCompareHandler(__classPrivateFieldGet(this, _SkyMonthPickerComponent_instances, "m", _SkyMonthPickerComponent_compareMonth), 'month');
         this.datepicker.refreshView();
         this.datepicker.setKeydownHandler((key, event) => {
-            this.keydownMonths(key, event);
+            __classPrivateFieldGet(this, _SkyMonthPickerComponent_instances, "m", _SkyMonthPickerComponent_keydownMonths).call(this, 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_instances = new WeakSet(), _SkyMonthPickerComponent_compareMonth = function _SkyMonthPickerComponent_compareMonth(date1, date2) {
+    const d1 = new Date(date1.getFullYear(), date1.getMonth());
+    const d2 = new Date(date2.getFullYear(), date2.getMonth());
+    return d1.getTime() - d2.getTime();
+}, _SkyMonthPickerComponent_refreshMonthView = function _SkyMonthPickerComponent_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);
+}, _SkyMonthPickerComponent_keydownMonths = function _SkyMonthPickerComponent_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: "14.2.0", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
-SkyMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] });
+SkyMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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 === 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\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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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"] }]
+            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 === 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\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 }]; } });
 
+var _SkyYearPickerComponent_instances, _SkyYearPickerComponent_compareYears, _SkyYearPickerComponent_refreshYearView, _SkyYearPickerComponent_keydownYears;
 /**
  * @internal
  */
 class SkyYearPickerComponent {
     constructor(datepicker) {
+        _SkyYearPickerComponent_instances.add(this);
         this.rows = [];
+        this.title = '';
         this.datepicker = datepicker;
     }
     ngOnInit() {
         this.datepicker.stepYear = { years: this.datepicker.yearRange };
         this.datepicker.setRefreshViewHandler(() => {
-            this.refreshYearView();
+            __classPrivateFieldGet(this, _SkyYearPickerComponent_instances, "m", _SkyYearPickerComponent_refreshYearView).call(this);
         }, 'year');
-        this.datepicker.setCompareHandler(this.compareYears, 'year');
+        this.datepicker.setCompareHandler(__classPrivateFieldGet(this, _SkyYearPickerComponent_instances, "m", _SkyYearPickerComponent_compareYears), 'year');
         this.datepicker.setKeydownHandler((key, event) => {
-            this.keydownYears(key, event);
+            __classPrivateFieldGet(this, _SkyYearPickerComponent_instances, "m", _SkyYearPickerComponent_keydownYears).call(this, key, event);
         }, 'year');
         this.datepicker.refreshView();
     }
@@ -1740,55 +1753,53 @@ class SkyYearPickerComponent {
             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_instances = new WeakSet(), _SkyYearPickerComponent_compareYears = function _SkyYearPickerComponent_compareYears(date1, date2) {
+    return date1.getFullYear() - date2.getFullYear();
+}, _SkyYearPickerComponent_refreshYearView = function _SkyYearPickerComponent_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);
+}, _SkyYearPickerComponent_keydownYears = function _SkyYearPickerComponent_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: "14.2.0", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
 SkyYearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
@@ -1796,40 +1807,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             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 }]; } });
 
+var _SkyDatepickerCalendarComponent_formatter, _SkyDatepickerCalendarComponent__startingDay, _SkyDatepickerCalendarComponent_config;
 /**
  * @internal
  */
 class SkyDatepickerCalendarComponent {
-    constructor(adapter, config, elementRef) {
-        this.adapter = adapter;
-        this.config = config;
-        this.elementRef = elementRef;
+    constructor(config) {
         this.calendarDateRangeChange = new EventEmitter();
         this.calendarModeChange = new EventEmitter();
         this.selectedDateChange = new EventEmitter(undefined);
         this._now = new Date();
-        this.formatter = new SkyDateFormatter();
+        _SkyDatepickerCalendarComponent_formatter.set(this, new SkyDateFormatter());
+        _SkyDatepickerCalendarComponent__startingDay.set(this, 0);
+        _SkyDatepickerCalendarComponent_config.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDatepickerCalendarComponent_config, config, "f");
         this.configureOptions();
     }
     /** starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) */
     set startingDay(start) {
-        this._startingDay = start;
+        __classPrivateFieldSet(this, _SkyDatepickerCalendarComponent__startingDay, start ?? 0, "f");
     }
     get startingDay() {
-        return this._startingDay || 0;
-    }
-    /**
-     * @internal
-     * Indicates if the calendar element's visibility property is 'visible'.
-     */
-    get isVisible() {
-        return this.adapter.elementIsVisible();
-    }
-    ngAfterViewInit() {
-        this.adapter.init(this.elementRef);
+        return __classPrivateFieldGet(this, _SkyDatepickerCalendarComponent__startingDay, "f");
     }
     configureOptions() {
-        Object.assign(this, this.config);
+        Object.assign(this, __classPrivateFieldGet(this, _SkyDatepickerCalendarComponent_config, "f"));
     }
     onCalendarDateRangeChange(event) {
         this.calendarDateRangeChange.next(event);
@@ -1842,27 +1844,29 @@ class SkyDatepickerCalendarComponent {
     }
     writeValue(value) {
         if (value !== undefined &&
-            this.formatter.dateIsValid(value) &&
+            __classPrivateFieldGet(this, _SkyDatepickerCalendarComponent_formatter, "f").dateIsValid(value) &&
             this.selectedDate !== undefined &&
-            this._datepicker.compareHandlerDay(value, this.selectedDate) === 0) {
+            this.datepicker?.compareHandlerDay &&
+            this.datepicker.compareHandlerDay(value, this.selectedDate) === 0) {
             return;
         }
-        if (this.formatter.dateIsValid(value)) {
+        if (value && __classPrivateFieldGet(this, _SkyDatepickerCalendarComponent_formatter, "f").dateIsValid(value)) {
             this.selectedDate = value;
-            this._datepicker.select(value, false);
+            this.datepicker?.select(value, false);
         }
         else {
             this.selectedDate = new Date();
-            this._datepicker.select(new Date(), false);
+            this.datepicker?.select(new Date(), false);
         }
     }
 }
-SkyDatepickerCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerAdapterService }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyDatepickerCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "component", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { kind: "component", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: ["customDates", "isWaiting"], outputs: ["calendarDateRangeChange"] }, { kind: "component", type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { kind: "component", type: SkyYearPickerComponent, selector: "sky-yearpicker" }] });
+_SkyDatepickerCalendarComponent_formatter = new WeakMap(), _SkyDatepickerCalendarComponent__startingDay = new WeakMap(), _SkyDatepickerCalendarComponent_config = new WeakMap();
+SkyDatepickerCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerConfigService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDatepickerCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "component", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { kind: "component", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: ["customDates", "isWaiting"], outputs: ["calendarDateRangeChange"] }, { kind: "component", type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { kind: "component", type: SkyYearPickerComponent, selector: "sky-yearpicker" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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: [{
+        }], ctorParameters: function () { return [{ type: SkyDatepickerConfigService }]; }, propDecorators: { customDates: [{
                 type: Input
             }], isDaypickerWaiting: [{
                 type: Input
@@ -1880,7 +1884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Output
             }], selectedDateChange: [{
                 type: Output
-            }], _datepicker: [{
+            }], datepicker: [{
                 type: ViewChild,
                 args: [SkyDatepickerCalendarInnerComponent, {
                         read: SkyDatepickerCalendarInnerComponent,
@@ -1888,6 +1892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                     }]
             }] } });
 
+var _SkyDatepickerComponent_instances, _SkyDatepickerComponent_affixer, _SkyDatepickerComponent_calendarUnsubscribe, _SkyDatepickerComponent_customDatesSubscription, _SkyDatepickerComponent_ngUnsubscribe, _SkyDatepickerComponent_overlay, _SkyDatepickerComponent_overlayKeydownListner, _SkyDatepickerComponent__calendarRef, _SkyDatepickerComponent__disabled, _SkyDatepickerComponent__selectedDate, _SkyDatepickerComponent_affixService, _SkyDatepickerComponent_changeDetector, _SkyDatepickerComponent_coreAdapter, _SkyDatepickerComponent_overlayService, _SkyDatepickerComponent_closePicker, _SkyDatepickerComponent_openPicker, _SkyDatepickerComponent_createAffixer, _SkyDatepickerComponent_destroyAffixer, _SkyDatepickerComponent_createOverlay, _SkyDatepickerComponent_destroyOverlay, _SkyDatepickerComponent_addKeydownListener, _SkyDatepickerComponent_removePickerEventListeners, _SkyDatepickerComponent_cancelCustomDatesSubscription;
 let nextId$1 = 0;
 /**
  * Creates the datepicker button and calendar.
@@ -1895,11 +1900,8 @@ let nextId$1 = 0;
  */
 class SkyDatepickerComponent {
     constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
-        this.affixService = affixService;
-        this.changeDetector = changeDetector;
-        this.coreAdapter = coreAdapter;
-        this.overlayService = overlayService;
         this.inputBoxHostService = inputBoxHostService;
+        _SkyDatepickerComponent_instances.add(this);
         /**
          * Adds a class to the datepicker.
          * @default ""
@@ -1915,86 +1917,74 @@ class SkyDatepickerComponent {
         this.isDaypickerWaiting = false;
         this.isOpen = false;
         this.isVisible = false;
-        this.ngUnsubscribe = new Subject();
-        this._disabled = false;
+        _SkyDatepickerComponent_affixer.set(this, void 0);
+        _SkyDatepickerComponent_calendarUnsubscribe.set(this, new Subject());
+        _SkyDatepickerComponent_customDatesSubscription.set(this, void 0);
+        _SkyDatepickerComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyDatepickerComponent_overlay.set(this, void 0);
+        _SkyDatepickerComponent_overlayKeydownListner.set(this, void 0);
+        _SkyDatepickerComponent__calendarRef.set(this, void 0);
+        _SkyDatepickerComponent__disabled.set(this, false);
+        _SkyDatepickerComponent__selectedDate.set(this, void 0);
+        _SkyDatepickerComponent_affixService.set(this, void 0);
+        _SkyDatepickerComponent_changeDetector.set(this, void 0);
+        _SkyDatepickerComponent_coreAdapter.set(this, void 0);
+        _SkyDatepickerComponent_overlayService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDatepickerComponent_affixService, affixService, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerComponent_coreAdapter, coreAdapter, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerComponent_overlayService, overlayService, "f");
         const uniqueId = nextId$1++;
         this.calendarId = `sky-datepicker-calendar-${uniqueId}`;
         this.triggerButtonId = `sky-datepicker-button-${uniqueId}`;
         // Update icons when theme changes.
         themeSvc?.settingsChange
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f")))
             .subscribe(() => {
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").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;
+        return __classPrivateFieldGet(this, _SkyDatepickerComponent__disabled, "f");
     }
     set disabled(value) {
-        this._disabled = value;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldSet(this, _SkyDatepickerComponent__disabled, value, "f");
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
     }
     set selectedDate(value) {
-        this._selectedDate = value;
+        __classPrivateFieldSet(this, _SkyDatepickerComponent__selectedDate, value, "f");
         if (this.calendar) {
-            this.calendar.writeValue(this._selectedDate);
+            this.calendar.writeValue(value);
         }
     }
+    get selectedDate() {
+        return __classPrivateFieldGet(this, _SkyDatepickerComponent__selectedDate, "f");
+    }
     set calendarRef(value) {
         if (value) {
-            this._calendarRef = value;
+            __classPrivateFieldSet(this, _SkyDatepickerComponent__calendarRef, value, "f");
             // 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();
-                });
+                if (this.calendarRef) {
+                    this.calendar?.writeValue(this.selectedDate);
+                    __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
+                    __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_createAffixer).call(this);
+                    setTimeout(() => {
+                        if (this.calendarRef) {
+                            __classPrivateFieldGet(this, _SkyDatepickerComponent_coreAdapter, "f").getFocusableChildrenAndApplyFocus(this.calendarRef, '.sky-datepicker-calendar-inner', false);
+                            this.isVisible = true;
+                            __classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
+                        }
+                    });
+                }
             });
         }
     }
     get calendarRef() {
-        return this._calendarRef;
+        return __classPrivateFieldGet(this, _SkyDatepickerComponent__calendarRef, "f");
     }
     ngOnInit() {
-        if (this.inputBoxHostService) {
+        if (this.inputBoxHostService && this.inputTemplateRef) {
             this.inputBoxHostService.populate({
                 inputTemplate: this.inputTemplateRef,
                 buttonsTemplate: this.triggerButtonTemplateRef,
@@ -2003,34 +1993,34 @@ class SkyDatepickerComponent {
     }
     ngOnDestroy() {
         this.dateChange.complete();
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.removePickerEventListeners();
-        this.destroyAffixer();
-        this.destroyOverlay();
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_removePickerEventListeners).call(this);
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyOverlay).call(this);
     }
     onCalendarModeChange() {
         // Let the calendar populate in the DOM before recalculating placement.
         setTimeout(() => {
-            this.affixer.reaffix();
+            __classPrivateFieldGet(this, _SkyDatepickerComponent_affixer, "f")?.reaffix();
         });
     }
     onSelectedDateChange(value) {
         this.dateChange.emit(value);
-        this.closePicker();
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_closePicker).call(this);
     }
     onTriggerButtonClick() {
         if (this.isOpen) {
-            this.closePicker();
+            __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_closePicker).call(this);
         }
         else {
-            this.openPicker();
+            __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_openPicker).call(this);
         }
     }
     onCalendarDateRangeChange(event) {
         /* istanbul ignore else */
         if (event) {
-            this.cancelCustomDatesSubscription();
+            __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_cancelCustomDatesSubscription).call(this);
             const args = {
                 startDate: event.startDate,
                 endDate: event.endDate,
@@ -2042,15 +2032,15 @@ class SkyDatepickerComponent {
             if (args.customDates) {
                 this.isDaypickerWaiting = true;
                 // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
-                this.changeDetector.detectChanges();
-                this.customDatesSubscription = args.customDates
+                __classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").detectChanges();
+                __classPrivateFieldSet(this, _SkyDatepickerComponent_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();
-                });
+                    __classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
+                }), "f");
             }
             else {
                 // If consumer returns an undefined value after custom dates have
@@ -2058,36 +2048,35 @@ class SkyDatepickerComponent {
                 if (this.customDates) {
                     this.customDates = undefined;
                     // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
-                    this.changeDetector.detectChanges();
+                    __classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").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);
+}
+_SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calendarUnsubscribe = new WeakMap(), _SkyDatepickerComponent_customDatesSubscription = new WeakMap(), _SkyDatepickerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepickerComponent_overlay = new WeakMap(), _SkyDatepickerComponent_overlayKeydownListner = new WeakMap(), _SkyDatepickerComponent__calendarRef = new WeakMap(), _SkyDatepickerComponent__disabled = new WeakMap(), _SkyDatepickerComponent__selectedDate = new WeakMap(), _SkyDatepickerComponent_affixService = new WeakMap(), _SkyDatepickerComponent_changeDetector = new WeakMap(), _SkyDatepickerComponent_coreAdapter = new WeakMap(), _SkyDatepickerComponent_overlayService = new WeakMap(), _SkyDatepickerComponent_instances = new WeakSet(), _SkyDatepickerComponent_closePicker = function _SkyDatepickerComponent_closePicker() {
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyOverlay).call(this);
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_removePickerEventListeners).call(this);
+    this.triggerButtonRef?.nativeElement.focus();
+    this.isOpen = false;
+}, _SkyDatepickerComponent_openPicker = function _SkyDatepickerComponent_openPicker() {
+    this.isVisible = false;
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_removePickerEventListeners).call(this);
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyOverlay).call(this);
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_createOverlay).call(this);
+    this.isOpen = true;
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
+}, _SkyDatepickerComponent_createAffixer = function _SkyDatepickerComponent_createAffixer() {
+    if (this.calendarRef && this.triggerButtonRef) {
+        const affixer = __classPrivateFieldGet(this, _SkyDatepickerComponent_affixService, "f").createAffixer(this.calendarRef);
         // Hide calendar when trigger button is scrolled off screen.
         affixer.placementChange
-            .pipe(takeUntil(this.calendarUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f")))
             .subscribe((change) => {
             this.isVisible = change.placement !== null;
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
         });
         affixer.affixTo(this.triggerButtonRef.nativeElement, {
             autoFitContext: SkyAffixAutoFitContext.Viewport,
@@ -2096,66 +2085,59 @@ class SkyDatepickerComponent {
             isSticky: true,
             placement: 'below',
         });
-        this.affixer = affixer;
+        __classPrivateFieldSet(this, _SkyDatepickerComponent_affixer, affixer, "f");
     }
-    destroyAffixer() {
-        /*istanbul ignore else*/
-        if (this.affixer) {
-            this.affixer.destroy();
-            this.affixer = undefined;
-        }
+}, _SkyDatepickerComponent_destroyAffixer = function _SkyDatepickerComponent_destroyAffixer() {
+    /*istanbul ignore else*/
+    if (__classPrivateFieldGet(this, _SkyDatepickerComponent_affixer, "f")) {
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_affixer, "f").destroy();
+        __classPrivateFieldSet(this, _SkyDatepickerComponent_affixer, undefined, "f");
     }
-    createOverlay() {
-        const overlay = this.overlayService.create({
+}, _SkyDatepickerComponent_createOverlay = function _SkyDatepickerComponent_createOverlay() {
+    if (this.calendarTemplateRef) {
+        const overlay = __classPrivateFieldGet(this, _SkyDatepickerComponent_overlayService, "f").create({
             wrapperClass: this.pickerClass,
             enableClose: false,
             enablePointerEvents: false,
         });
         overlay.backdropClick
-            .pipe(takeUntil(this.calendarUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f")))
             .subscribe(() => {
             /* istanbul ignore else */
             if (this.isOpen) {
-                this.closePicker();
+                __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_closePicker).call(this);
             }
         });
-        this.addKeydownListner();
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_addKeydownListener).call(this);
         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) => {
-            const key = event.key?.toLowerCase();
-            if (key === 'escape' && this.isOpen) {
-                this.closePicker();
-            }
-        });
-    }
-    removePickerEventListeners() {
-        /* istanbul ignore else */
-        if (this.calendarUnsubscribe) {
-            this.calendarUnsubscribe.next();
-            this.calendarUnsubscribe.complete();
-            this.calendarUnsubscribe = undefined;
-        }
-        this.overlayKeydownListner?.unsubscribe();
+        __classPrivateFieldSet(this, _SkyDatepickerComponent_overlay, overlay, "f");
+    }
+}, _SkyDatepickerComponent_destroyOverlay = function _SkyDatepickerComponent_destroyOverlay() {
+    /*istanbul ignore else*/
+    if (__classPrivateFieldGet(this, _SkyDatepickerComponent_overlay, "f")) {
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_overlayService, "f").close(__classPrivateFieldGet(this, _SkyDatepickerComponent_overlay, "f"));
+        __classPrivateFieldSet(this, _SkyDatepickerComponent_overlay, undefined, "f");
+    }
+}, _SkyDatepickerComponent_addKeydownListener = function _SkyDatepickerComponent_addKeydownListener() {
+    __classPrivateFieldSet(this, _SkyDatepickerComponent_overlayKeydownListner, fromEvent(window.document, 'keydown')
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f")))
+        .subscribe((event) => {
+        const key = event.key?.toLowerCase();
+        if (key === 'escape' && this.isOpen) {
+            __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_closePicker).call(this);
+        }
+    }), "f");
+}, _SkyDatepickerComponent_removePickerEventListeners = function _SkyDatepickerComponent_removePickerEventListeners() {
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f").next();
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f").complete();
+    __classPrivateFieldSet(this, _SkyDatepickerComponent_calendarUnsubscribe, new Subject(), "f");
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_overlayKeydownListner, "f")?.unsubscribe();
+}, _SkyDatepickerComponent_cancelCustomDatesSubscription = function _SkyDatepickerComponent_cancelCustomDatesSubscription() {
+    if (__classPrivateFieldGet(this, _SkyDatepickerComponent_customDatesSubscription, "f")) {
+        __classPrivateFieldGet(this, _SkyDatepickerComponent_customDatesSubscription, "f").unsubscribe();
+        __classPrivateFieldSet(this, _SkyDatepickerComponent_customDatesSubscription, undefined, "f");
     }
-    cancelCustomDatesSubscription() {
-        if (this.customDatesSubscription) {
-            this.customDatesSubscription.unsubscribe();
-            this.customDatesSubscription = undefined;
-        }
-    }
-}
+};
 SkyDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
@@ -2201,6 +2183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                     }]
             }] } });
 
+var _SkyFuzzyDatepickerInputDirective_instances, _SkyFuzzyDatepickerInputDirective_value_get, _SkyFuzzyDatepickerInputDirective_value_set, _SkyFuzzyDatepickerInputDirective_control, _SkyFuzzyDatepickerInputDirective_dateFormatter, _SkyFuzzyDatepickerInputDirective_locale, _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat, _SkyFuzzyDatepickerInputDirective_ngUnsubscribe, _SkyFuzzyDatepickerInputDirective__futureDisabled, _SkyFuzzyDatepickerInputDirective__dateFormat, _SkyFuzzyDatepickerInputDirective__disabled, _SkyFuzzyDatepickerInputDirective__maxDate, _SkyFuzzyDatepickerInputDirective__minDate, _SkyFuzzyDatepickerInputDirective__startingDay, _SkyFuzzyDatepickerInputDirective__value, _SkyFuzzyDatepickerInputDirective__yearRequired, _SkyFuzzyDatepickerInputDirective_changeDetector, _SkyFuzzyDatepickerInputDirective_configService, _SkyFuzzyDatepickerInputDirective_elementRef, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, _SkyFuzzyDatepickerInputDirective_renderer, _SkyFuzzyDatepickerInputDirective_resourcesService, _SkyFuzzyDatepickerInputDirective_datepickerComponent, _SkyFuzzyDatepickerInputDirective_onValueChange, _SkyFuzzyDatepickerInputDirective_setInputElementValue, _SkyFuzzyDatepickerInputDirective_getMaxDate, _SkyFuzzyDatepickerInputDirective_getMinDate, _SkyFuzzyDatepickerInputDirective_fuzzyDatesEqual, _SkyFuzzyDatepickerInputDirective_onChange, _SkyFuzzyDatepickerInputDirective_onTouched, _SkyFuzzyDatepickerInputDirective_onValidatorChange, _SkyFuzzyDatepickerInputDirective_updateValue;
 const SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
@@ -2213,38 +2196,60 @@ const SKY_FUZZY_DATEPICKER_VALIDATOR = {
 };
 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;
+        _SkyFuzzyDatepickerInputDirective_instances.add(this);
         /**
          * 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;
+        _SkyFuzzyDatepickerInputDirective_control.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective_dateFormatter.set(this, new SkyDateFormatter());
+        _SkyFuzzyDatepickerInputDirective_locale.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective_ngUnsubscribe.set(this, new Subject());
+        _SkyFuzzyDatepickerInputDirective__futureDisabled.set(this, false);
+        _SkyFuzzyDatepickerInputDirective__dateFormat.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective__disabled.set(this, false);
+        _SkyFuzzyDatepickerInputDirective__maxDate.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective__minDate.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective__startingDay.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective__value.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective__yearRequired.set(this, false);
+        _SkyFuzzyDatepickerInputDirective_changeDetector.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective_configService.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective_elementRef.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective_fuzzyDateService.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective_renderer.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective_resourcesService.set(this, void 0);
+        _SkyFuzzyDatepickerInputDirective_datepickerComponent.set(this, void 0);
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onChange = (_) => { };
+        // istanbul ignore next
+        _SkyFuzzyDatepickerInputDirective_onChange.set(this, (_) => { });
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
+        // istanbul ignore next
+        _SkyFuzzyDatepickerInputDirective_onTouched.set(this, () => { });
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onValidatorChange = () => { };
-        this.localeProvider
+        // istanbul ignore next
+        _SkyFuzzyDatepickerInputDirective_onValidatorChange.set(this, () => { });
+        if (!datepickerComponent) {
+            throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
+                '`<sky-datepicker>` component!');
+        }
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_configService, configService, "f");
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_elementRef, elementRef, "f");
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, fuzzyDateService, "f");
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_renderer, renderer, "f");
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_resourcesService, resourcesService, "f");
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, datepickerComponent, "f");
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_locale, localeProvider.defaultLocale, "f");
+        localeProvider
             .getLocaleInfo()
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_ngUnsubscribe, "f")))
             .subscribe((localeInfo) => {
-            this.locale = localeInfo.locale;
-            SkyDateFormatter.setLocale(this.locale);
-            this.preferredShortDateFormat =
-                SkyDateFormatter.getPreferredShortDateFormat();
+            __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_locale, localeInfo.locale, "f");
+            SkyDateFormatter.setLocale(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_locale, "f"));
+            __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
         });
     }
     /**
@@ -2253,29 +2258,30 @@ class SkyFuzzyDatepickerInputDirective {
      * @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();
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective__dateFormat, value, "f");
+        if (__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "a", _SkyFuzzyDatepickerInputDirective_value_get)) {
+            const formattedDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").format(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "a", _SkyFuzzyDatepickerInputDirective_value_get), this.dateFormat, __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_locale, "f"));
+            __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_setInputElementValue).call(this, formattedDate);
+            __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_changeDetector, "f").markForCheck();
         }
     }
+    // TODO: Refactor to not have getter logic
     get dateFormat() {
-        return (this._dateFormat ||
-            this.configService.dateFormat ||
-            this.preferredShortDateFormat);
+        return (__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__dateFormat, "f") ||
+            __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_configService, "f").dateFormat ||
+            __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat, "f"));
     }
     /**
      * 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);
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective__disabled, value, "f");
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, "f").disabled = value;
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_elementRef, "f").nativeElement, 'disabled', value);
     }
     get disabled() {
-        return this._disabled;
+        return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__disabled, "f");
     }
     /**
      * Indicates whether to prevent users from specifying dates that are in the future.
@@ -2283,11 +2289,11 @@ class SkyFuzzyDatepickerInputDirective {
      * @default false
      */
     set futureDisabled(value) {
-        this._futureDisabled = value;
-        this.onValidatorChange();
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective__futureDisabled, value, "f");
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_onValidatorChange, "f").call(this);
     }
     get futureDisabled() {
-        return this._futureDisabled;
+        return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__futureDisabled, "f");
     }
     /**
      * Specifies the latest fuzzy date allowed. Place this attribute on the `input` element
@@ -2296,12 +2302,12 @@ class SkyFuzzyDatepickerInputDirective {
      * For example: `{ month: 1, day: 1, year: 2027 }`.
      */
     set maxDate(value) {
-        this._maxDate = value;
-        this.datepickerComponent.maxDate = this.getMaxDate();
-        this.onValidatorChange();
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective__maxDate, value, "f");
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, "f").maxDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_getMaxDate).call(this);
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_onValidatorChange, "f").call(this);
     }
     get maxDate() {
-        return this._maxDate;
+        return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__maxDate, "f");
     }
     /**
      * Specifies the earliest fuzzy date allowed. Place this attribute on the `input` element
@@ -2310,12 +2316,12 @@ class SkyFuzzyDatepickerInputDirective {
      * For example: `{ month: 1, day: 1, year: 2007 }`.
      */
     set minDate(value) {
-        this._minDate = value;
-        this.datepickerComponent.minDate = this.getMinDate();
-        this.onValidatorChange();
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective__minDate, value, "f");
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, "f").minDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_getMinDate).call(this);
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_onValidatorChange, "f").call(this);
     }
     get minDate() {
-        return this._minDate;
+        return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__minDate, "f");
     }
     /**
      * Specifies the starting day of the week in the calendar, where `0` sets the starting day
@@ -2324,59 +2330,50 @@ class SkyFuzzyDatepickerInputDirective {
      * @default 0
      */
     set startingDay(value) {
-        this._startingDay = value;
-        this.datepickerComponent.startingDay = this.startingDay;
-        this.onValidatorChange();
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective__startingDay, value, "f");
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, "f").startingDay = this.startingDay;
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_onValidatorChange, "f").call(this);
     }
+    // TODO: Refactor to not have getter logic
     get startingDay() {
-        return this._startingDay || this.configService.startingDay;
+        return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__startingDay, "f") || __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_configService, "f").startingDay;
     }
     /**
      * Indicates whether to require the year in fuzzy dates.
      * @default false
      */
     set yearRequired(value) {
-        this._yearRequired = value;
-        this.onValidatorChange();
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective__yearRequired, value, "f");
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_onValidatorChange, "f").call(this);
     }
     get yearRequired() {
-        return this._yearRequired;
-    }
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        this.updateValue(value);
+        return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__yearRequired, "f");
     }
     ngOnInit() {
         if (this.yearRequired) {
-            if (this.dateFormat.toLowerCase().indexOf('y') === -1) {
+            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 element = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_elementRef, "f").nativeElement;
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_renderer, "f").addClass(element, 'sky-form-control');
         const hasAriaLabel = element.getAttribute('aria-label');
         /* istanbul ignore else */
         if (!hasAriaLabel) {
-            this.resourcesService
+            __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_resourcesService, "f")
                 .getString('skyux_date_field_default_label')
-                .pipe(takeUntil(this.ngUnsubscribe))
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_ngUnsubscribe, "f")))
                 .subscribe((value) => {
-                this.renderer.setAttribute(element, 'aria-label', value);
+                __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_renderer, "f").setAttribute(element, 'aria-label', value);
             });
         }
     }
     ngAfterContentInit() {
-        this.datepickerComponent.dateChange
-            .pipe(distinctUntilChanged(), takeUntil(this.ngUnsubscribe))
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, "f").dateChange
+            .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_ngUnsubscribe, "f")))
             .subscribe((value) => {
-            this.value = value;
-            this.onTouched();
+            __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_instances, value, "a", _SkyFuzzyDatepickerInputDirective_value_set);
+            __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_onTouched, "f").call(this);
         });
     }
     ngAfterViewInit() {
@@ -2386,50 +2383,50 @@ class SkyFuzzyDatepickerInputDirective {
         // 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) {
+        if (__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_control, "f") && __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_control, "f").parent) {
             setTimeout(() => {
-                this.control.setValue(this.value, {
+                __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_control, "f")?.setValue(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "a", _SkyFuzzyDatepickerInputDirective_value_get), {
                     emitEvent: false,
                 });
-                this.changeDetector.markForCheck();
+                __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_changeDetector, "f").markForCheck();
             });
         }
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_ngUnsubscribe, "f").complete();
     }
     onInputChange(event) {
-        this.onValueChange(event.target.value);
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_onValueChange).call(this, event.target.value);
     }
     onInputBlur() {
-        this.onTouched();
-        const formattedDate = this.fuzzyDateService.format(this.value, this.dateFormat, this.locale);
-        if (this.control.valid) {
-            this.setInputElementValue(formattedDate);
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_onTouched, "f").call(this);
+        const formattedDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").format(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "a", _SkyFuzzyDatepickerInputDirective_value_get), this.dateFormat, __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_locale, "f"));
+        if (__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_control, "f")?.valid) {
+            __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_setInputElementValue).call(this, formattedDate);
         }
     }
     onInput() {
-        this.control.markAsDirty();
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_control, "f")?.markAsDirty();
     }
     writeValue(value) {
-        this.updateValue(value, false);
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_updateValue).call(this, value, false);
     }
     validate(control) {
-        if (!this.control) {
-            this.control = control;
+        if (!__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_control, "f")) {
+            __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_control, control, "f");
         }
         if (this.skyDatepickerNoValidate) {
-            return;
+            return null;
         }
-        if (!this.control.value) {
-            return;
+        if (!__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_control, "f").value) {
+            return null;
         }
         const value = control.value;
         let fuzzyDate;
-        let validationError;
+        let validationError = null;
         if (typeof value === 'string') {
-            fuzzyDate = this.fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
+            fuzzyDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").getFuzzyDateFromString(value, this.dateFormat);
         }
         else {
             fuzzyDate = value;
@@ -2441,160 +2438,158 @@ class SkyFuzzyDatepickerInputDirective {
                 },
             };
         }
-        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,
-                        },
-                    };
-                }
+        else {
+            if (!fuzzyDate.year && this.yearRequired) {
+                validationError = {
+                    skyFuzzyDate: {
+                        yearRequired: value,
+                    },
+                };
             }
-            if (!validationError && this.minDate) {
-                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(this.minDate, fuzzyDate);
-                if (!fuzzyDateRange.valid) {
-                    validationError = {
-                        skyFuzzyDate: {
-                            minDate: value,
-                        },
-                    };
+            if (!validationError && fuzzyDate.year) {
+                let fuzzyDateRange;
+                if (this.maxDate) {
+                    fuzzyDateRange = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").getFuzzyDateRange(fuzzyDate, this.maxDate);
+                    if (!fuzzyDateRange.valid) {
+                        validationError = {
+                            skyFuzzyDate: {
+                                maxDate: value,
+                            },
+                        };
+                    }
                 }
-            }
-            if (!validationError && this.futureDisabled) {
-                fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.fuzzyDateService.getCurrentFuzzyDate());
-                if (!fuzzyDateRange.valid) {
-                    validationError = {
-                        skyFuzzyDate: {
-                            futureDisabled: value,
-                        },
-                    };
+                if (!validationError && this.minDate) {
+                    fuzzyDateRange = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").getFuzzyDateRange(this.minDate, fuzzyDate);
+                    if (!fuzzyDateRange.valid) {
+                        validationError = {
+                            skyFuzzyDate: {
+                                minDate: value,
+                            },
+                        };
+                    }
+                }
+                if (!validationError && this.futureDisabled) {
+                    fuzzyDateRange = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").getFuzzyDateRange(fuzzyDate, __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").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();
+            __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_control, "f").markAsTouched();
         }
         return validationError;
     }
     registerOnChange(fn) {
-        this.onChange = fn;
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_onChange, fn, "f");
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_onTouched, fn, "f");
     }
     registerOnValidatorChange(fn) {
-        this.onValidatorChange = fn;
+        __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_onValidatorChange, fn, "f");
     }
     setDisabledState(disabled) {
         this.disabled = disabled;
-        this.datepickerComponent.disabled = disabled;
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, "f").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));
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_onValueChange).call(this, __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_elementRef, "f").nativeElement.value);
     }
-    /**
-     * 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) {
-        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();
-            }
+}
+_SkyFuzzyDatepickerInputDirective_control = new WeakMap(), _SkyFuzzyDatepickerInputDirective_dateFormatter = new WeakMap(), _SkyFuzzyDatepickerInputDirective_locale = new WeakMap(), _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat = new WeakMap(), _SkyFuzzyDatepickerInputDirective_ngUnsubscribe = new WeakMap(), _SkyFuzzyDatepickerInputDirective__futureDisabled = new WeakMap(), _SkyFuzzyDatepickerInputDirective__dateFormat = new WeakMap(), _SkyFuzzyDatepickerInputDirective__disabled = new WeakMap(), _SkyFuzzyDatepickerInputDirective__maxDate = new WeakMap(), _SkyFuzzyDatepickerInputDirective__minDate = new WeakMap(), _SkyFuzzyDatepickerInputDirective__startingDay = new WeakMap(), _SkyFuzzyDatepickerInputDirective__value = new WeakMap(), _SkyFuzzyDatepickerInputDirective__yearRequired = new WeakMap(), _SkyFuzzyDatepickerInputDirective_changeDetector = new WeakMap(), _SkyFuzzyDatepickerInputDirective_configService = new WeakMap(), _SkyFuzzyDatepickerInputDirective_elementRef = new WeakMap(), _SkyFuzzyDatepickerInputDirective_fuzzyDateService = new WeakMap(), _SkyFuzzyDatepickerInputDirective_renderer = new WeakMap(), _SkyFuzzyDatepickerInputDirective_resourcesService = new WeakMap(), _SkyFuzzyDatepickerInputDirective_datepickerComponent = new WeakMap(), _SkyFuzzyDatepickerInputDirective_onChange = new WeakMap(), _SkyFuzzyDatepickerInputDirective_onTouched = new WeakMap(), _SkyFuzzyDatepickerInputDirective_onValidatorChange = new WeakMap(), _SkyFuzzyDatepickerInputDirective_instances = new WeakSet(), _SkyFuzzyDatepickerInputDirective_value_get = function _SkyFuzzyDatepickerInputDirective_value_get() {
+    return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__value, "f");
+}, _SkyFuzzyDatepickerInputDirective_value_set = function _SkyFuzzyDatepickerInputDirective_value_set(value) {
+    __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_updateValue).call(this, value);
+}, _SkyFuzzyDatepickerInputDirective_onValueChange = function _SkyFuzzyDatepickerInputDirective_onValueChange(newValue) {
+    __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_instances, newValue, "a", _SkyFuzzyDatepickerInputDirective_value_set);
+}, _SkyFuzzyDatepickerInputDirective_setInputElementValue = function _SkyFuzzyDatepickerInputDirective_setInputElementValue(value) {
+    __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_elementRef, "f").nativeElement, 'value', value);
+}, _SkyFuzzyDatepickerInputDirective_getMaxDate = function _SkyFuzzyDatepickerInputDirective_getMaxDate() {
+    if (this.maxDate) {
+        const maxDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").getMomentFromFuzzyDate(this.maxDate);
+        if (maxDate.isValid()) {
+            return maxDate.toDate();
+        }
+    }
+    else if (this.futureDisabled) {
+        return new Date();
+    }
+    return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_configService, "f").maxDate;
+}, _SkyFuzzyDatepickerInputDirective_getMinDate = function _SkyFuzzyDatepickerInputDirective_getMinDate() {
+    if (this.minDate) {
+        const minDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").getMomentFromFuzzyDate(this.minDate);
+        if (minDate.isValid()) {
+            return minDate.toDate();
+        }
+    }
+    return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_configService, "f").minDate;
+}, _SkyFuzzyDatepickerInputDirective_fuzzyDatesEqual = function _SkyFuzzyDatepickerInputDirective_fuzzyDatesEqual(dateA, dateB) {
+    return (dateA !== undefined &&
+        dateB !== undefined &&
+        ((!dateA.day && !dateB.day) || dateA.day === dateB.day) &&
+        ((!dateA.month && !dateB.month) || dateA.month === dateB.month) &&
+        ((!dateA.year && !dateB.year) || dateA.year === dateB.year));
+}, _SkyFuzzyDatepickerInputDirective_updateValue = function _SkyFuzzyDatepickerInputDirective_updateValue(value, emitEvent = true) {
+    if (__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__value, "f") === value ||
+        (__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__value, "f") === undefined && value === null)) {
+        return;
+    }
+    let fuzzyDate;
+    let fuzzyMoment;
+    let dateValue;
+    let formattedDate;
+    if (value instanceof Date) {
+        dateValue = value;
+        formattedDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_dateFormatter, "f").format(value, this.dateFormat);
+        fuzzyDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").getFuzzyDateFromSelectedDate(value, this.dateFormat);
+    }
+    else if (typeof value === 'string') {
+        fuzzyDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").getFuzzyDateFromString(value, this.dateFormat);
+        if (fuzzyDate) {
+            formattedDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").format(fuzzyDate, this.dateFormat, __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_locale, "f"));
+        }
+        if (!formattedDate) {
+            formattedDate = value;
+        }
+        fuzzyMoment = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").getMomentFromFuzzyDate(fuzzyDate);
+        if (fuzzyMoment) {
+            dateValue = fuzzyMoment.toDate();
+        }
+    }
+    else {
+        fuzzyDate = value;
+        formattedDate = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").format(fuzzyDate, this.dateFormat, __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_locale, "f"));
+        fuzzyMoment = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, "f").getMomentFromFuzzyDate(fuzzyDate);
+        if (fuzzyMoment) {
+            dateValue = fuzzyMoment.toDate();
+        }
+    }
+    const areFuzzyDatesEqual = __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_fuzzyDatesEqual).call(this, __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__value, "f"), fuzzyDate);
+    const isNewValue = fuzzyDate !== __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__value, "f") || !areFuzzyDatesEqual;
+    __classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective__value, fuzzyDate || value, "f");
+    if (isNewValue) {
+        if (emitEvent) {
+            __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_onChange, "f").call(this, __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__value, "f"));
         }
         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 {
-                this.control?.setValue(this._value, { emitEvent: false });
-            }
-            this.datepickerComponent.selectedDate = dateValue;
+            __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_control, "f")?.setValue(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__value, "f"), { emitEvent: false });
         }
-        this.setInputElementValue(formattedDate || '');
+        __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, "f").selectedDate = dateValue;
     }
-}
+    __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_setInputElementValue).call(this, formattedDate || '');
+};
 SkyFuzzyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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: "14.0.0", version: "14.2.0", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [
         SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
@@ -2638,6 +2633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 args: ['input']
             }] } });
 
+var _SkyDatepickerInputDirective_instances, _SkyDatepickerInputDirective_value_get, _SkyDatepickerInputDirective_value_set, _SkyDatepickerInputDirective_control, _SkyDatepickerInputDirective_dateFormatter, _SkyDatepickerInputDirective_initialPlaceholder, _SkyDatepickerInputDirective_preferredShortDateFormat, _SkyDatepickerInputDirective_ngUnsubscribe, _SkyDatepickerInputDirective__dateFormat, _SkyDatepickerInputDirective__disabled, _SkyDatepickerInputDirective__maxDate, _SkyDatepickerInputDirective__minDate, _SkyDatepickerInputDirective__startingDay, _SkyDatepickerInputDirective__strict, _SkyDatepickerInputDirective__value, _SkyDatepickerInputDirective_adapter, _SkyDatepickerInputDirective_changeDetector, _SkyDatepickerInputDirective_configService, _SkyDatepickerInputDirective_elementRef, _SkyDatepickerInputDirective_localeProvider, _SkyDatepickerInputDirective_renderer, _SkyDatepickerInputDirective_resourcesService, _SkyDatepickerInputDirective_datepickerComponent, _SkyDatepickerInputDirective_applyDateFormat, _SkyDatepickerInputDirective_onValueChange, _SkyDatepickerInputDirective_setInputElementValue, _SkyDatepickerInputDirective_getDateValue, _SkyDatepickerInputDirective_getShortcutOrDateValue, _SkyDatepickerInputDirective_isDateStringValid, _SkyDatepickerInputDirective_onChange, _SkyDatepickerInputDirective_onTouched, _SkyDatepickerInputDirective_onValidatorChange, _SkyDatepickerInputDirective_updatePlaceholder, _SkyDatepickerInputDirective_updateValue;
 const SKY_DATEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyDatepickerInputDirective),
@@ -2650,40 +2646,62 @@ const SKY_DATEPICKER_VALIDATOR = {
 };
 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;
+        _SkyDatepickerInputDirective_instances.add(this);
         /**
          * Indicates whether to disable date validation on the datepicker input.
          * @default false
          */
         this.skyDatepickerNoValidate = false;
-        this.dateFormatter = new SkyDateFormatter();
-        this.ngUnsubscribe = new Subject();
+        _SkyDatepickerInputDirective_control.set(this, void 0);
+        _SkyDatepickerInputDirective_dateFormatter.set(this, new SkyDateFormatter());
+        _SkyDatepickerInputDirective_initialPlaceholder.set(this, void 0);
+        _SkyDatepickerInputDirective_preferredShortDateFormat.set(this, void 0);
+        _SkyDatepickerInputDirective_ngUnsubscribe.set(this, new Subject());
+        _SkyDatepickerInputDirective__dateFormat.set(this, void 0);
+        _SkyDatepickerInputDirective__disabled.set(this, false);
+        _SkyDatepickerInputDirective__maxDate.set(this, void 0);
+        _SkyDatepickerInputDirective__minDate.set(this, void 0);
+        _SkyDatepickerInputDirective__startingDay.set(this, void 0);
+        _SkyDatepickerInputDirective__strict.set(this, false);
+        _SkyDatepickerInputDirective__value.set(this, void 0);
+        _SkyDatepickerInputDirective_adapter.set(this, void 0);
+        _SkyDatepickerInputDirective_changeDetector.set(this, void 0);
+        _SkyDatepickerInputDirective_configService.set(this, void 0);
+        _SkyDatepickerInputDirective_elementRef.set(this, void 0);
+        _SkyDatepickerInputDirective_localeProvider.set(this, void 0);
+        _SkyDatepickerInputDirective_renderer.set(this, void 0);
+        _SkyDatepickerInputDirective_resourcesService.set(this, void 0);
+        _SkyDatepickerInputDirective_datepickerComponent.set(this, void 0);
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         // istanbul ignore next
-        this.onChange = (_) => { };
+        _SkyDatepickerInputDirective_onChange.set(this, (_) => { });
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         // istanbul ignore next
-        this.onTouched = () => { };
+        _SkyDatepickerInputDirective_onTouched.set(this, () => { });
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         // istanbul ignore next
-        this.onValidatorChange = () => { };
-        this.initialPlaceholder = this.adapter.getPlaceholder(this.elementRef);
-        this.updatePlaceholder();
-        this.localeProvider
+        _SkyDatepickerInputDirective_onValidatorChange.set(this, () => { });
+        if (!datepickerComponent) {
+            throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
+                '`<sky-datepicker>` component!');
+        }
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_adapter, adapter, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_configService, configService, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_elementRef, elementRef, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_localeProvider, localeProvider, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_renderer, renderer, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_resourcesService, resourcesService, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_datepickerComponent, datepickerComponent, "f");
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_initialPlaceholder, __classPrivateFieldGet(this, _SkyDatepickerInputDirective_adapter, "f").getPlaceholder(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f")), "f");
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_updatePlaceholder).call(this);
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_localeProvider, "f")
             .getLocaleInfo()
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_ngUnsubscribe, "f")))
             .subscribe((localeInfo) => {
             SkyDateFormatter.setLocale(localeInfo.locale);
-            this.preferredShortDateFormat =
-                SkyDateFormatter.getPreferredShortDateFormat();
-            this.applyDateFormat();
+            __classPrivateFieldSet(this, _SkyDatepickerInputDirective_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_applyDateFormat).call(this);
         });
     }
     /**
@@ -2693,58 +2711,54 @@ class SkyDatepickerInputDirective {
      */
     set dateFormat(value) {
         /* istanbul ignore else */
-        if (value !== this._dateFormat) {
-            this._dateFormat = value;
-            this.applyDateFormat();
+        if (value !== __classPrivateFieldGet(this, _SkyDatepickerInputDirective__dateFormat, "f")) {
+            __classPrivateFieldSet(this, _SkyDatepickerInputDirective__dateFormat, value, "f");
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_applyDateFormat).call(this);
         }
     }
+    // TODO: Refactor to not have getter logic
     get dateFormat() {
-        return (this._dateFormat ||
-            this.configService.dateFormat ||
-            this.preferredShortDateFormat);
+        return (__classPrivateFieldGet(this, _SkyDatepickerInputDirective__dateFormat, "f") ||
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_configService, "f").dateFormat ||
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_preferredShortDateFormat, "f"));
     }
     /**
      * 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);
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective__disabled, value || false, "f");
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_datepickerComponent, "f").disabled = value;
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f").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();
+        return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__disabled, "f");
     }
     /**
      * 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();
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective__maxDate, value, "f");
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_datepickerComponent, "f").maxDate = this.maxDate;
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_onValidatorChange, "f").call(this);
     }
+    // TODO: Refactor to not have getter logic
     get maxDate() {
-        return this._maxDate || this.configService.maxDate;
+        return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__maxDate, "f") || __classPrivateFieldGet(this, _SkyDatepickerInputDirective_configService, "f").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();
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective__minDate, value, "f");
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_datepickerComponent, "f").minDate = this.minDate;
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_onValidatorChange, "f").call(this);
     }
+    // TODO: Refactor to not have getter logic
     get minDate() {
-        return this._minDate || this.configService.minDate;
+        return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__minDate, "f") || __classPrivateFieldGet(this, _SkyDatepickerInputDirective_configService, "f").minDate;
     }
     /**
      * Creates the datepicker input and calendar. Place this directive on an `input` element,
@@ -2768,12 +2782,13 @@ class SkyDatepickerInputDirective {
      * @default 0
      */
     set startingDay(value) {
-        this._startingDay = value;
-        this.datepickerComponent.startingDay = this.startingDay;
-        this.onValidatorChange();
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective__startingDay, value, "f");
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_datepickerComponent, "f").startingDay = this.startingDay;
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_onValidatorChange, "f").call(this);
     }
+    // TODO: Refactor to not have getter logic
     get startingDay() {
-        return this._startingDay || this.configService.startingDay;
+        return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__startingDay, "f") || __classPrivateFieldGet(this, _SkyDatepickerInputDirective_configService, "f").startingDay;
     }
     /**
      * Indicates whether the format of the date value must match the format from the `dateFormat` value.
@@ -2784,41 +2799,31 @@ class SkyDatepickerInputDirective {
      * @default false
      */
     set strict(value) {
-        this._strict = value;
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective__strict, value || false, "f");
     }
     get strict() {
-        return this._strict || false;
-    }
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        this.updateValue(value);
+        return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__strict, "f");
     }
     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 element = __classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f").nativeElement;
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_renderer, "f").addClass(element, 'sky-form-control');
         const hasAriaLabel = element.getAttribute('aria-label');
         if (!hasAriaLabel) {
-            this.resourcesService
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_resourcesService, "f")
                 .getString('skyux_date_field_default_label')
-                .pipe(takeUntil(this.ngUnsubscribe))
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_ngUnsubscribe, "f")))
                 .subscribe((value) => {
-                this.renderer.setAttribute(element, 'aria-label', value);
+                __classPrivateFieldGet(this, _SkyDatepickerInputDirective_renderer, "f").setAttribute(element, 'aria-label', value);
             });
         }
     }
     ngAfterContentInit() {
-        this.datepickerComponent.dateChange
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_datepickerComponent, "f").dateChange
             .pipe(distinctUntilChanged())
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_ngUnsubscribe, "f")))
             .subscribe((value) => {
-            this.value = value;
-            this.onTouched();
+            __classPrivateFieldSet(this, _SkyDatepickerInputDirective_instances, value, "a", _SkyDatepickerInputDirective_value_set);
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_onTouched, "f").call(this);
         });
     }
     ngAfterViewInit() {
@@ -2828,69 +2833,68 @@ class SkyDatepickerInputDirective {
         // 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) {
+        if (__classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f") && __classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f").parent) {
             setTimeout(() => {
-                this.control.setValue(this.value, {
+                __classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f")?.setValue(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "a", _SkyDatepickerInputDirective_value_get), {
                     emitEvent: false,
                 });
-                this.changeDetector.markForCheck();
+                __classPrivateFieldGet(this, _SkyDatepickerInputDirective_changeDetector, "f").markForCheck();
             });
         }
-        this.adapter.init(this.elementRef);
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_ngUnsubscribe, "f").complete();
     }
     onInputChange(event) {
         const value = event.target.value;
         if (this.skyDatepickerNoValidate) {
-            this.onValueChange(value);
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_onValueChange).call(this, 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);
+        if (__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_isDateStringValid).call(this, value)) {
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_onValueChange).call(this, value);
             return;
         }
-        this._value = value;
-        this.onChange(value);
-        this.control.setErrors({
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective__value, value, "f");
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_onChange, "f").call(this, value);
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f")?.setErrors({
             skyDate: {
                 invalid: true,
             },
         });
     }
     onInputBlur() {
-        this.onTouched();
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_onTouched, "f").call(this);
     }
     onInput() {
-        this.control.markAsDirty();
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f")?.markAsDirty();
     }
     writeValue(value) {
-        this.updateValue(value, false);
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_updateValue).call(this, value, false);
     }
     validate(control) {
-        if (!this.control) {
-            this.control = control;
+        if (!__classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f")) {
+            __classPrivateFieldSet(this, _SkyDatepickerInputDirective_control, control, "f");
             // Account for any date conversion that may have occurred prior to validation.
-            if (this.control.value !== this.value) {
-                this.control.patchValue(this.value, { emitEvent: false });
+            if (__classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f").value !== __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "a", _SkyDatepickerInputDirective_value_get)) {
+                __classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f").patchValue(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "a", _SkyDatepickerInputDirective_value_get), { emitEvent: false });
             }
         }
         if (this.skyDatepickerNoValidate) {
-            return;
+            return null;
         }
         const value = control.value;
         if (!value) {
-            return;
+            return null;
         }
         if (value instanceof Date) {
-            const isDateValid = this.dateFormatter.dateIsValid(value);
+            const isDateValid = __classPrivateFieldGet(this, _SkyDatepickerInputDirective_dateFormatter, "f").dateIsValid(value);
             if (!isDateValid) {
                 // 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();
+                __classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f").markAsTouched();
                 return {
                     skyDate: {
                         invalid: value,
@@ -2899,7 +2903,7 @@ class SkyDatepickerInputDirective {
             }
             const minDate = this.minDate;
             if (minDate &&
-                this.dateFormatter.dateIsValid(minDate) &&
+                __classPrivateFieldGet(this, _SkyDatepickerInputDirective_dateFormatter, "f").dateIsValid(minDate) &&
                 value < minDate) {
                 return {
                     skyDate: {
@@ -2909,7 +2913,7 @@ class SkyDatepickerInputDirective {
             }
             const maxDate = this.maxDate;
             if (maxDate &&
-                this.dateFormatter.dateIsValid(maxDate) &&
+                __classPrivateFieldGet(this, _SkyDatepickerInputDirective_dateFormatter, "f").dateIsValid(maxDate) &&
                 value > maxDate) {
                 return {
                     skyDate: {
@@ -2921,169 +2925,151 @@ class SkyDatepickerInputDirective {
         else {
             // 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();
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f").markAsTouched();
             return {
                 skyDate: {
                     invalid: value,
                 },
             };
         }
+        return null;
     }
     registerOnChange(fn) {
-        this.onChange = fn;
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_onChange, fn, "f");
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_onTouched, fn, "f");
     }
     registerOnValidatorChange(fn) {
-        this.onValidatorChange = fn;
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective_onValidatorChange, fn, "f");
     }
     setDisabledState(disabled) {
         this.disabled = disabled;
-        this.datepickerComponent.disabled = disabled;
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_datepickerComponent, "f").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;
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_onValueChange).call(this, __classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f").nativeElement.value);
     }
-    setInputElementValue(value) {
-        this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
-    }
-    /**
-     * Gets the date value from a value - if possible.
-     * Will not convert unconvertable dates or numbers outside of the current month's number of days.
-     * Returns `undefined` if the value can not be converted.
-     */
-    getDateValue(value) {
-        if (value instanceof Date) {
-            return value;
-        }
-        else if (typeof value === 'string') {
-            return this.getShortcutOrDateValue(value);
-        }
-    }
-    /**
-     * Converts a string to a date object if the string is a valid date string.
-     * It will also convert numeric input to a date if that number is within the current month's number of days.
-     * If the string can not be converted, `undefined` be returned.
-     */
-    getShortcutOrDateValue(value) {
-        const num = Number(value);
-        if (Number.isInteger(num)) {
-            // We require 8 digits in order to know that we have all information needed to determine what part of the number is the month (2), day (2), and year (4).
-            if (value.length === 8) {
-                const regex = new RegExp(/\b(MM)\b|\b(DD)\b|\b(YY)\b|\b(YYYY)\b/, 'g');
-                const formatTokensOnly = this.dateFormat
-                    .match(regex)
-                    .join('')
-                    .replace(new RegExp(/Y+/), 'YYYY');
-                if (formatTokensOnly.length === 8) {
-                    const date = this.dateFormatter.getDateFromString(value, formatTokensOnly, true);
-                    if (this.dateFormatter.dateIsValid(date)) {
-                        return date;
-                    }
+}
+_SkyDatepickerInputDirective_control = new WeakMap(), _SkyDatepickerInputDirective_dateFormatter = new WeakMap(), _SkyDatepickerInputDirective_initialPlaceholder = new WeakMap(), _SkyDatepickerInputDirective_preferredShortDateFormat = new WeakMap(), _SkyDatepickerInputDirective_ngUnsubscribe = new WeakMap(), _SkyDatepickerInputDirective__dateFormat = new WeakMap(), _SkyDatepickerInputDirective__disabled = new WeakMap(), _SkyDatepickerInputDirective__maxDate = new WeakMap(), _SkyDatepickerInputDirective__minDate = new WeakMap(), _SkyDatepickerInputDirective__startingDay = new WeakMap(), _SkyDatepickerInputDirective__strict = new WeakMap(), _SkyDatepickerInputDirective__value = new WeakMap(), _SkyDatepickerInputDirective_adapter = new WeakMap(), _SkyDatepickerInputDirective_changeDetector = new WeakMap(), _SkyDatepickerInputDirective_configService = new WeakMap(), _SkyDatepickerInputDirective_elementRef = new WeakMap(), _SkyDatepickerInputDirective_localeProvider = new WeakMap(), _SkyDatepickerInputDirective_renderer = new WeakMap(), _SkyDatepickerInputDirective_resourcesService = new WeakMap(), _SkyDatepickerInputDirective_datepickerComponent = new WeakMap(), _SkyDatepickerInputDirective_onChange = new WeakMap(), _SkyDatepickerInputDirective_onTouched = new WeakMap(), _SkyDatepickerInputDirective_onValidatorChange = new WeakMap(), _SkyDatepickerInputDirective_instances = new WeakSet(), _SkyDatepickerInputDirective_value_get = function _SkyDatepickerInputDirective_value_get() {
+    return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f");
+}, _SkyDatepickerInputDirective_value_set = function _SkyDatepickerInputDirective_value_set(value) {
+    __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_updateValue).call(this, value);
+}, _SkyDatepickerInputDirective_applyDateFormat = function _SkyDatepickerInputDirective_applyDateFormat() {
+    __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_updatePlaceholder).call(this);
+    if (__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "a", _SkyDatepickerInputDirective_value_get)) {
+        const formattedDate = __classPrivateFieldGet(this, _SkyDatepickerInputDirective_dateFormatter, "f").format(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "a", _SkyDatepickerInputDirective_value_get), this.dateFormat);
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_setInputElementValue).call(this, formattedDate);
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_changeDetector, "f").markForCheck();
+    }
+}, _SkyDatepickerInputDirective_onValueChange = function _SkyDatepickerInputDirective_onValueChange(newValue) {
+    __classPrivateFieldSet(this, _SkyDatepickerInputDirective_instances, newValue, "a", _SkyDatepickerInputDirective_value_set);
+}, _SkyDatepickerInputDirective_setInputElementValue = function _SkyDatepickerInputDirective_setInputElementValue(value) {
+    __classPrivateFieldGet(this, _SkyDatepickerInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f").nativeElement, 'value', value);
+}, _SkyDatepickerInputDirective_getDateValue = function _SkyDatepickerInputDirective_getDateValue(value) {
+    if (value instanceof Date) {
+        return value;
+    }
+    else if (typeof value === 'string') {
+        return __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_getShortcutOrDateValue).call(this, value);
+    }
+    return undefined;
+}, _SkyDatepickerInputDirective_getShortcutOrDateValue = function _SkyDatepickerInputDirective_getShortcutOrDateValue(value) {
+    const num = Number(value);
+    if (Number.isInteger(num)) {
+        // We require 8 digits in order to know that we have all information needed to determine what part of the number is the month (2), day (2), and year (4).
+        if (value.length === 8) {
+            const regex = new RegExp(/\b(MM)\b|\b(DD)\b|\b(YY)\b|\b(YYYY)\b/, 'g');
+            const formatTokensOnly = this.dateFormat
+                ?.match(regex)
+                ?.join('')
+                .replace(new RegExp(/Y+/), 'YYYY');
+            if (formatTokensOnly && formatTokensOnly.length === 8) {
+                const date = __classPrivateFieldGet(this, _SkyDatepickerInputDirective_dateFormatter, "f").getDateFromString(value, formatTokensOnly, true);
+                if (__classPrivateFieldGet(this, _SkyDatepickerInputDirective_dateFormatter, "f").dateIsValid(date)) {
+                    return date;
                 }
             }
-            const now = new Date();
-            const shortcutDate = new Date(now.getFullYear(), now.getMonth(), num);
-            const daysInMonth = shortcutDate.getDate();
-            if (num > 0 && num <= daysInMonth) {
-                return shortcutDate;
-            }
         }
-        else {
-            const date = this.dateFormatter.getDateFromString(value, this.dateFormat, this.strict);
-            if (this.dateFormatter.dateIsValid(date)) {
-                return date;
-            }
+        const now = new Date();
+        const shortcutDate = new Date(now.getFullYear(), now.getMonth(), num);
+        const daysInMonth = shortcutDate.getDate();
+        if (num > 0 && num <= daysInMonth) {
+            return shortcutDate;
         }
     }
-    /**
-     * 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;
+    else {
+        const date = __classPrivateFieldGet(this, _SkyDatepickerInputDirective_dateFormatter, "f").getDateFromString(value, this.dateFormat, this.strict);
+        if (__classPrivateFieldGet(this, _SkyDatepickerInputDirective_dateFormatter, "f").dateIsValid(date)) {
+            return date;
         }
-        // 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);
-        }
+    return undefined;
+}, _SkyDatepickerInputDirective_isDateStringValid = function _SkyDatepickerInputDirective_isDateStringValid(value) {
+    if (!value || typeof value !== 'string') {
+        return true;
     }
-    /**
-     * 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) {
-        if (this._value === value) {
-            return;
+    // 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;
+}, _SkyDatepickerInputDirective_updatePlaceholder = function _SkyDatepickerInputDirective_updatePlaceholder() {
+    if (!__classPrivateFieldGet(this, _SkyDatepickerInputDirective_initialPlaceholder, "f") && this.dateFormat) {
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_adapter, "f").setPlaceholder(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f"), this.dateFormat);
+    }
+}, _SkyDatepickerInputDirective_updateValue = function _SkyDatepickerInputDirective_updateValue(value, emitEvent = true) {
+    if (__classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f") === value) {
+        return;
+    }
+    const isValidDateString = __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_isDateStringValid).call(this, 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) {
+        __classPrivateFieldSet(this, _SkyDatepickerInputDirective__value, value, "f");
+        if (emitEvent) {
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_onChange, "f").call(this, __classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f"));
         }
-        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;
+        else {
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f")?.setValue(__classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f"), { emitEvent: false });
+        }
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_datepickerComponent, "f").selectedDate = __classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f");
+        __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_setInputElementValue).call(this, value);
+    }
+    else {
+        // This value represents the date value for the input if possible.
+        // This value will take into account all shortcut functionality.
+        const dateValue = __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_getDateValue).call(this, value);
+        const areDatesEqual = __classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f") instanceof Date &&
+            dateValue &&
+            dateValue.getTime() === __classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f").getTime();
+        if (dateValue !== __classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f") || !areDatesEqual) {
+            __classPrivateFieldSet(this, _SkyDatepickerInputDirective__value, dateValue || value, "f");
             if (emitEvent) {
-                this.onChange(this._value);
+                __classPrivateFieldGet(this, _SkyDatepickerInputDirective_onChange, "f").call(this, __classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f"));
             }
             else {
-                this.control?.setValue(this._value, { emitEvent: false });
+                __classPrivateFieldGet(this, _SkyDatepickerInputDirective_control, "f")?.setValue(__classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f"), { emitEvent: false });
             }
-            this.datepickerComponent.selectedDate = this._value;
-            this.setInputElementValue(value || '');
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_datepickerComponent, "f").selectedDate = __classPrivateFieldGet(this, _SkyDatepickerInputDirective__value, "f");
+        }
+        if (dateValue) {
+            const formattedDateString = __classPrivateFieldGet(this, _SkyDatepickerInputDirective_dateFormatter, "f").format(dateValue, this.dateFormat);
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_setInputElementValue).call(this, formattedDateString);
         }
         else {
-            // This value represents the date value for the input if possible.
-            // This value will take into account all shortcut functionality.
-            const dateValue = this.getDateValue(value);
-            const areDatesEqual = this._value instanceof Date &&
-                dateValue &&
-                dateValue.getTime() === this._value.getTime();
-            if (dateValue !== this._value || !areDatesEqual) {
-                this._value = dateValue || value;
-                if (emitEvent) {
-                    this.onChange(this._value);
-                }
-                else {
-                    this.control?.setValue(this._value, { emitEvent: false });
-                }
-                this.datepickerComponent.selectedDate = this._value;
-            }
-            if (dateValue) {
-                const formattedDateString = this.dateFormatter.format(dateValue, this.dateFormat);
-                this.setInputElementValue(formattedDateString);
-            }
-            else {
-                this.setInputElementValue(value || '');
-            }
+            __classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_setInputElementValue).call(this, value || '');
         }
     }
-}
+};
 SkyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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: "14.0.0", version: "14.2.0", 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()", "input": "onInput()" } }, providers: [
         SKY_DATEPICKER_VALUE_ACCESSOR,
@@ -3201,6 +3187,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+class SkyDateRangePickerEndDateResourceKeyPipe {
+    transform(calculatorType) {
+        if (calculatorType === SkyDateRangeCalculatorType.Range) {
+            return 'skyux_date_range_picker_end_date_label';
+        }
+        return 'skyux_date_range_picker_before_date_label';
+    }
+}
+SkyDateRangePickerEndDateResourceKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SkyDateRangePickerEndDateResourceKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDateRangePickerEndDateResourceKey',
+                }]
+        }] });
+
+class SkyDateRangePickerStartDateResourceKeyPipe {
+    transform(calculatorType) {
+        if (calculatorType === SkyDateRangeCalculatorType.Range) {
+            return 'skyux_date_range_picker_start_date_label';
+        }
+        return 'skyux_date_range_picker_after_date_label';
+    }
+}
+SkyDateRangePickerStartDateResourceKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SkyDateRangePickerStartDateResourceKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyDateRangePickerStartDateResourceKey',
+                }]
+        }] });
+
 /**
  * Need to add the following to classes which contain static methods.
  * See: https://github.com/ng-packagr/ng-packagr/issues/641
@@ -3475,13 +3495,15 @@ const SKY_DEFAULT_CALCULATOR_CONFIGS = [
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_specific_range',
         getValue: (startDate, endDate) => ({ startDate, endDate }),
         validate: (value) => {
-            if (value.startDate &&
+            if (value &&
+                value.startDate &&
                 value.endDate &&
                 value.startDate > value.endDate) {
                 return {
                     endDateBeforeStartDate: true,
                 };
             }
+            return null;
         },
     },
     {
@@ -3594,16 +3616,19 @@ const SKY_DEFAULT_CALCULATOR_CONFIGS = [
     },
 ];
 
+var _SkyDateRangeService_instances, _SkyDateRangeService_calculatorReadyStream, _SkyDateRangeService_calculatorConfigs, _SkyDateRangeService_calculators, _SkyDateRangeService_resourcesService, _SkyDateRangeService_createDefaultCalculators;
 /**
  * Creates and manages `SkyDateRangeCalculator` instances.
  */
 class SkyDateRangeService {
     constructor(resourcesService) {
-        this.resourcesService = resourcesService;
-        this.calculatorReadyStream = new BehaviorSubject(false);
-        this.calculatorConfigs = {};
-        this.calculators = [];
-        this.createDefaultCalculators();
+        _SkyDateRangeService_instances.add(this);
+        _SkyDateRangeService_calculatorReadyStream.set(this, new BehaviorSubject(false));
+        _SkyDateRangeService_calculatorConfigs.set(this, {});
+        _SkyDateRangeService_calculators.set(this, []);
+        _SkyDateRangeService_resourcesService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDateRangeService_resourcesService, resourcesService, "f");
+        __classPrivateFieldGet(this, _SkyDateRangeService_instances, "m", _SkyDateRangeService_createDefaultCalculators).call(this);
     }
     /**
      * Creates a custom date range calculator.
@@ -3612,7 +3637,7 @@ class SkyDateRangeService {
     createCalculator(config) {
         const newId = SkyDateRangeService.lastId++;
         const calculator = new SkyDateRangeCalculator(newId, config);
-        this.calculators.push(calculator);
+        __classPrivateFieldGet(this, _SkyDateRangeService_calculators, "f").push(calculator);
         return calculator;
     }
     /**
@@ -3631,7 +3656,7 @@ class SkyDateRangeService {
      */
     getCalculatorById(id) {
         const calculatorId = parseInt(id, 10);
-        const found = this.calculators.find((calculator) => {
+        const found = __classPrivateFieldGet(this, _SkyDateRangeService_calculators, "f").find((calculator) => {
             return calculator.calculatorId === calculatorId;
         });
         return new Promise((resolve, reject) => {
@@ -3639,41 +3664,41 @@ class SkyDateRangeService {
                 reject(new Error(`A calculator with the ID ${id} was not found.`));
                 return;
             }
-            this.calculatorReadyStream.pipe(first()).subscribe(() => {
+            __classPrivateFieldGet(this, _SkyDateRangeService_calculatorReadyStream, "f").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);
-        });
-    }
 }
+_SkyDateRangeService_calculatorReadyStream = new WeakMap(), _SkyDateRangeService_calculatorConfigs = new WeakMap(), _SkyDateRangeService_calculators = new WeakMap(), _SkyDateRangeService_resourcesService = new WeakMap(), _SkyDateRangeService_instances = new WeakSet(), _SkyDateRangeService_createDefaultCalculators = function _SkyDateRangeService_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(__classPrivateFieldGet(this, _SkyDateRangeService_resourcesService, "f")
+            .getString(defaultConfig.shortDescriptionResourceKey)
+            .pipe(first(), map((value) => {
+            config.shortDescription = value;
+        })));
+        __classPrivateFieldGet(this, _SkyDateRangeService_calculatorConfigs, "f")[defaultConfig.calculatorId] = config;
+    });
+    forkJoin(tasks)
+        .pipe(first())
+        .subscribe(() => {
+        const calculatorIds = Object.keys(__classPrivateFieldGet(this, _SkyDateRangeService_calculatorConfigs, "f"));
+        const calculators = calculatorIds.map((calculatorId) => {
+            const id = parseInt(calculatorId, 10);
+            return new SkyDateRangeCalculator(id, __classPrivateFieldGet(this, _SkyDateRangeService_calculatorConfigs, "f")[id]);
+        });
+        __classPrivateFieldSet(this, _SkyDateRangeService_calculators, calculators, "f");
+        __classPrivateFieldGet(this, _SkyDateRangeService_calculatorReadyStream, "f").next(true);
+    });
+};
 // Start the count higher than the number of available values
 // provided in the SkyDateRangeCalculatorId enum.
 SkyDateRangeService.lastId = 1000;
@@ -3683,6 +3708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }]; } });
 
+var _SkyDateRangePickerComponent_instances, _SkyDateRangePickerComponent_calculatorIdControl_get, _SkyDateRangePickerComponent_defaultCalculator_get, _SkyDateRangePickerComponent_defaultValue_get, _SkyDateRangePickerComponent_endDateControl_get, _SkyDateRangePickerComponent_startDateControl_get, _SkyDateRangePickerComponent_value, _SkyDateRangePickerComponent_valueOrDefault_set, _SkyDateRangePickerComponent_valueOrDefault_get, _SkyDateRangePickerComponent_control, _SkyDateRangePickerComponent_preferredShortDateFormat, _SkyDateRangePickerComponent_ngUnsubscribe, _SkyDateRangePickerComponent__calculatorIds, _SkyDateRangePickerComponent__dateFormat, _SkyDateRangePickerComponent__disabled, _SkyDateRangePickerComponent__valueOrDefault, _SkyDateRangePickerComponent_changeDetector, _SkyDateRangePickerComponent_dateRangeService, _SkyDateRangePickerComponent_formBuilder, _SkyDateRangePickerComponent_localeProvider, _SkyDateRangePickerComponent_ngZone, _SkyDateRangePickerComponent_setValue, _SkyDateRangePickerComponent_patchValue, _SkyDateRangePickerComponent_createForm, _SkyDateRangePickerComponent_showRelevantFormFields, _SkyDateRangePickerComponent_resetFormGroupValue, _SkyDateRangePickerComponent_addEventListeners, _SkyDateRangePickerComponent_updateBasedOnControls, _SkyDateRangePickerComponent_updateCalculators, _SkyDateRangePickerComponent_getCalculatorById, _SkyDateRangePickerComponent_dateRangesEqual, _SkyDateRangePickerComponent_updateSelectedCalculator, _SkyDateRangePickerComponent_onChange, _SkyDateRangePickerComponent_onTouched;
 const SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyDateRangePickerComponent),
@@ -3706,11 +3732,7 @@ let uniqueId = 0;
  */
 class SkyDateRangePickerComponent {
     constructor(changeDetector, dateRangeService, formBuilder, localeProvider, ngZone, themeSvc) {
-        this.changeDetector = changeDetector;
-        this.dateRangeService = dateRangeService;
-        this.formBuilder = formBuilder;
-        this.localeProvider = localeProvider;
-        this.ngZone = ngZone;
+        _SkyDateRangePickerComponent_instances.add(this);
         /**
          * Indicates whether to require users to specify a start date.
          * @default false
@@ -3722,29 +3744,73 @@ class SkyDateRangePickerComponent {
          */
         this.endDateRequired = false;
         this.dateRangePickerId = `sky-date-range-picker-${uniqueId++}`;
+        this.calculators = [];
         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 = (_) => { };
+        _SkyDateRangePickerComponent_value.set(this, void 0);
+        _SkyDateRangePickerComponent_control.set(this, void 0);
+        _SkyDateRangePickerComponent_preferredShortDateFormat.set(this, void 0);
+        _SkyDateRangePickerComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyDateRangePickerComponent__calculatorIds.set(this, [
+            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,
+        ]);
+        _SkyDateRangePickerComponent__dateFormat.set(this, void 0);
+        _SkyDateRangePickerComponent__disabled.set(this, false);
+        _SkyDateRangePickerComponent__valueOrDefault.set(this, void 0);
+        _SkyDateRangePickerComponent_changeDetector.set(this, void 0);
+        _SkyDateRangePickerComponent_dateRangeService.set(this, void 0);
+        _SkyDateRangePickerComponent_formBuilder.set(this, void 0);
+        _SkyDateRangePickerComponent_localeProvider.set(this, void 0);
+        _SkyDateRangePickerComponent_ngZone.set(this, void 0);
+        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+        _SkyDateRangePickerComponent_onChange.set(this, (_) => { });
+        /* istanbul ignore next */
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
-        this.localeProvider
+        _SkyDateRangePickerComponent_onTouched.set(this, () => { });
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent_dateRangeService, dateRangeService, "f");
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent_formBuilder, formBuilder, "f");
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent_localeProvider, localeProvider, "f");
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent_ngZone, ngZone, "f");
+        this.dateFormatOrDefault = this.dateFormat;
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_localeProvider, "f")
             .getLocaleInfo()
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngUnsubscribe, "f")))
             .subscribe((localeInfo) => {
             SkyDateFormatter.setLocale(localeInfo.locale);
-            this.preferredShortDateFormat =
-                SkyDateFormatter.getPreferredShortDateFormat();
+            __classPrivateFieldSet(this, _SkyDateRangePickerComponent_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
+            this.dateFormatOrDefault =
+                this.dateFormat || __classPrivateFieldGet(this, _SkyDateRangePickerComponent_preferredShortDateFormat, "f");
         });
         // Update icons when theme changes.
         /* istanbul ignore next */
         themeSvc?.settingsChange
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngUnsubscribe, "f")))
             .subscribe(() => {
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
         });
     }
     /**
@@ -3753,10 +3819,7 @@ class SkyDateRangePickerComponent {
      * By default, this property includes all `SkyDateRangeCalculatorId` values.
      */
     set calculatorIds(value) {
-        this._calculatorIds = value;
-    }
-    get calculatorIds() {
-        return (this._calculatorIds || [
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent__calculatorIds, value || [
             SkyDateRangeCalculatorId.AnyTime,
             SkyDateRangeCalculatorId.Before,
             SkyDateRangeCalculatorId.After,
@@ -3779,7 +3842,10 @@ class SkyDateRangePickerComponent {
             SkyDateRangeCalculatorId.LastFiscalYear,
             SkyDateRangeCalculatorId.ThisFiscalYear,
             SkyDateRangeCalculatorId.NextFiscalYear,
-        ]);
+        ], "f");
+    }
+    get calculatorIds() {
+        return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__calculatorIds, "f");
     }
     /**
      * Specifies a date format for
@@ -3789,88 +3855,55 @@ class SkyDateRangePickerComponent {
      * @default "MM/DD/YYYY"
      */
     set dateFormat(value) {
-        this._dateFormat = value;
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent__dateFormat, value, "f");
+        this.dateFormatOrDefault = value || __classPrivateFieldGet(this, _SkyDateRangePickerComponent_preferredShortDateFormat, "f");
     }
     get dateFormat() {
-        return this._dateFormat || this.preferredShortDateFormat;
+        return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__dateFormat, "f");
     }
     /**
      * Indicates whether to disable the date range picker.
      * @default false
      */
     set disabled(value) {
-        this._disabled = value;
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent__disabled, value, "f");
         if (this.formGroup) {
-            if (this._disabled) {
+            if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent__disabled, "f")) {
                 this.formGroup.disable();
             }
             else {
                 this.formGroup.enable();
             }
         }
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").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;
+        return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__disabled, "f");
     }
     ngOnInit() {
-        this.createForm();
-        this.updateCalculators().then(() => {
-            this.addEventListeners();
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_createForm).call(this);
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_updateCalculators).call(this).then(() => {
+            if (!__classPrivateFieldGet(this, _SkyDateRangePickerComponent_value, "f") || !__classPrivateFieldGet(this, _SkyDateRangePickerComponent_value, "f").calculatorId) {
+                __classPrivateFieldSet(this, _SkyDateRangePickerComponent_instances, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_defaultValue_get), "a", _SkyDateRangePickerComponent_valueOrDefault_set);
+            }
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_addEventListeners).call(this);
             this.isReady = true;
-            this.showRelevantFormFields();
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_showRelevantFormFields).call(this);
             // 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(() => {
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngZone, "f").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();
+                const defaultValue = this.selectedCalculator?.getValue(__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get)?.startDate, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get)?.endDate);
+                const newValue = Object.assign({}, defaultValue, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get));
+                __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_setValue).call(this, newValue, false);
+                __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_resetFormGroupValue).call(this);
                 // 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, {
+                if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent_control, "f")) {
+                    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_control, "f").setValue(__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get), {
                         emitEvent: false,
                     });
                 }
@@ -3879,8 +3912,8 @@ class SkyDateRangePickerComponent {
     }
     ngOnChanges(changes) {
         if (changes.calculatorIds && changes.calculatorIds.firstChange === false) {
-            this.updateCalculators().then(() => {
-                const id = this.calculatorIdControl.value;
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_updateCalculators).call(this).then(() => {
+                const id = __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_calculatorIdControl_get)?.value;
                 // Maintain the currently selected values if the calculators change after
                 // a value has been chosen.
                 const found = this.calculators.find((calculator) => {
@@ -3888,203 +3921,250 @@ class SkyDateRangePickerComponent {
                 });
                 /* istanbul ignore else */
                 if (!found) {
-                    const newValue = this.defaultCalculator.getValue();
-                    this.setValue(newValue);
-                    this.resetFormGroupValue(newValue);
-                    this.showRelevantFormFields();
+                    const newValue = __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_defaultCalculator_get)?.getValue();
+                    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_setValue).call(this, newValue);
+                    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_resetFormGroupValue).call(this, newValue);
+                    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_showRelevantFormFields).call(this);
                 }
             });
         }
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngUnsubscribe, "f").complete();
     }
     onFieldBlur() {
-        this.onTouched();
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_onTouched, "f").call(this);
     }
     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);
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_setValue).call(this, 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);
+                __classPrivateFieldGet(this, _SkyDateRangePickerComponent_onChange, "f").call(this, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_defaultValue_get));
             }
-            this.resetFormGroupValue();
-            this.showRelevantFormFields();
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_resetFormGroupValue).call(this);
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_showRelevantFormFields).call(this);
         }
     }
     validate(control) {
-        if (!this.control) {
-            this.control = control;
+        if (!__classPrivateFieldGet(this, _SkyDateRangePickerComponent_control, "f")) {
+            __classPrivateFieldSet(this, _SkyDateRangePickerComponent_control, control, "f");
         }
         if (!this.isReady) {
-            return;
+            return null;
         }
         const value = control.value;
-        const idControl = this.calculatorIdControl;
-        const result = this.selectedCalculator.validate(value);
-        let errors;
+        const idControl = __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_calculatorIdControl_get);
+        const result = this.selectedCalculator?.validate(value);
+        let errors = null;
         if (result) {
             errors = {
                 skyDateRange: {
-                    calculatorId: idControl.value,
+                    calculatorId: idControl?.value,
                     errors: result,
                 },
             };
         }
         else {
-            errors = this.startDateControl.errors || this.endDateControl.errors;
+            let startErrors = null;
+            let endErrors = null;
+            if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_startDateControl_get)) {
+                startErrors = __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_startDateControl_get).errors;
+            }
+            if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_endDateControl_get)) {
+                endErrors = __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_endDateControl_get).errors;
+            }
+            errors = startErrors || endErrors;
         }
         if (!errors) {
             // Clear any errors on the calculator select.
-            idControl.setErrors(null);
-            return;
+            idControl?.setErrors(null);
+            return null;
         }
-        idControl.setErrors(errors);
-        idControl.markAsTouched();
-        idControl.markAsDirty();
+        idControl?.setErrors(errors);
+        idControl?.markAsTouched();
+        idControl?.markAsDirty();
         // Need to mark the control as touched for the error messages to appear.
-        this.control.markAsTouched();
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_control, "f").markAsTouched();
         // Notify the view to display any errors.
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
         return errors;
     }
     registerOnChange(fn) {
-        this.onChange = fn;
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent_onChange, fn, "f");
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent_onTouched, fn, "f");
     }
     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 UntypedFormControl(),
-            startDate: new UntypedFormControl(),
-            endDate: new UntypedFormControl(),
-        });
-        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;
+}
+_SkyDateRangePickerComponent_value = new WeakMap(), _SkyDateRangePickerComponent_control = new WeakMap(), _SkyDateRangePickerComponent_preferredShortDateFormat = new WeakMap(), _SkyDateRangePickerComponent_ngUnsubscribe = new WeakMap(), _SkyDateRangePickerComponent__calculatorIds = new WeakMap(), _SkyDateRangePickerComponent__dateFormat = new WeakMap(), _SkyDateRangePickerComponent__disabled = new WeakMap(), _SkyDateRangePickerComponent__valueOrDefault = new WeakMap(), _SkyDateRangePickerComponent_changeDetector = new WeakMap(), _SkyDateRangePickerComponent_dateRangeService = new WeakMap(), _SkyDateRangePickerComponent_formBuilder = new WeakMap(), _SkyDateRangePickerComponent_localeProvider = new WeakMap(), _SkyDateRangePickerComponent_ngZone = new WeakMap(), _SkyDateRangePickerComponent_onChange = new WeakMap(), _SkyDateRangePickerComponent_onTouched = new WeakMap(), _SkyDateRangePickerComponent_instances = new WeakSet(), _SkyDateRangePickerComponent_calculatorIdControl_get = function _SkyDateRangePickerComponent_calculatorIdControl_get() {
+    return this.formGroup?.get('calculatorId');
+}, _SkyDateRangePickerComponent_defaultCalculator_get = function _SkyDateRangePickerComponent_defaultCalculator_get() {
+    return this.calculators[0];
+}, _SkyDateRangePickerComponent_defaultValue_get = function _SkyDateRangePickerComponent_defaultValue_get() {
+    return __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_defaultCalculator_get)?.getValue();
+}, _SkyDateRangePickerComponent_endDateControl_get = function _SkyDateRangePickerComponent_endDateControl_get() {
+    return this.formGroup?.get('endDate');
+}, _SkyDateRangePickerComponent_startDateControl_get = function _SkyDateRangePickerComponent_startDateControl_get() {
+    return this.formGroup?.get('startDate');
+}, _SkyDateRangePickerComponent_valueOrDefault_set = function _SkyDateRangePickerComponent_valueOrDefault_set(value) {
+    __classPrivateFieldSet(this, _SkyDateRangePickerComponent__valueOrDefault, value, "f");
+    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_updateSelectedCalculator).call(this);
+}, _SkyDateRangePickerComponent_valueOrDefault_get = function _SkyDateRangePickerComponent_valueOrDefault_get() {
+    return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__valueOrDefault, "f");
+}, _SkyDateRangePickerComponent_setValue = function _SkyDateRangePickerComponent_setValue(value, notifyChange = true) {
+    const isNewValue = !__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_dateRangesEqual).call(this, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_value, "f"), value);
+    if (isNewValue) {
+        __classPrivateFieldSet(this, _SkyDateRangePickerComponent_value, value, "f");
+        if (!value || value.calculatorId === undefined) {
+            __classPrivateFieldSet(this, _SkyDateRangePickerComponent_instances, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_defaultValue_get), "a", _SkyDateRangePickerComponent_valueOrDefault_set);
         }
-        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();
-                }
+        else {
+            __classPrivateFieldSet(this, _SkyDateRangePickerComponent_instances, value, "a", _SkyDateRangePickerComponent_valueOrDefault_set);
+        }
+        if (notifyChange) {
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_onChange, "f").call(this, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get));
+        }
+    }
+}, _SkyDateRangePickerComponent_patchValue = function _SkyDateRangePickerComponent_patchValue(value) {
+    const newValue = Object.assign({}, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get), value);
+    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_setValue).call(this, newValue);
+}, _SkyDateRangePickerComponent_createForm = function _SkyDateRangePickerComponent_createForm() {
+    this.formGroup = __classPrivateFieldGet(this, _SkyDateRangePickerComponent_formBuilder, "f").group({
+        calculatorId: new UntypedFormControl(),
+        startDate: new UntypedFormControl(),
+        endDate: new UntypedFormControl(),
+    });
+    if (this.disabled) {
+        this.formGroup.disable();
+    }
+}, _SkyDateRangePickerComponent_showRelevantFormFields = function _SkyDateRangePickerComponent_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;
+    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
+}, _SkyDateRangePickerComponent_resetFormGroupValue = function _SkyDateRangePickerComponent_resetFormGroupValue(value) {
+    this.formGroup?.reset(value || __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get));
+}, _SkyDateRangePickerComponent_addEventListeners = function _SkyDateRangePickerComponent_addEventListeners() {
+    // Watch for selected calculator change.
+    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_calculatorIdControl_get)?.valueChanges
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngUnsubscribe, "f")))
+        .subscribe((value) => {
+        if (value !== __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get)?.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 = __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_getCalculatorById).call(this, id);
+                const newValue = calculator?.getValue();
+                __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_setValue).call(this, newValue);
+                __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_resetFormGroupValue).call(this, newValue);
+                __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_showRelevantFormFields).call(this);
             }
-        });
-        // 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 });
-        });
+        }
+    });
+    // Watch for start date value changes.
+    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_startDateControl_get)?.valueChanges
+        .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngUnsubscribe, "f")))
+        .subscribe((startDate) => {
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_patchValue).call(this, { startDate });
+    });
+    // Watch for end date value changes.
+    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_endDateControl_get)?.valueChanges
+        .pipe(distinctUntilChanged(), takeUntil(__classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngUnsubscribe, "f")))
+        .subscribe((endDate) => {
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_patchValue).call(this, { endDate });
+    });
+    // Safety check
+    /* istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_startDateControl_get) && __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_endDateControl_get)) {
         // Detect errors from the date inputs and update ng- classes on picker.
         combineLatest([
-            this.startDateControl.statusChanges,
-            this.endDateControl.statusChanges,
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_startDateControl_get).statusChanges,
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_endDateControl_get).statusChanges,
         ])
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngUnsubscribe, "f")))
             .subscribe(() => {
-            this.changeDetector.markForCheck();
-            // Wait for initial validation to complete.
-            this.ngZone.onStable.pipe(first()).subscribe(() => {
-                this.control?.updateValueAndValidity({ emitEvent: false });
-            });
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_updateBasedOnControls).call(this);
         });
     }
-    updateCalculators() {
-        return this.dateRangeService
-            .getCalculators(this.calculatorIds)
-            .then((calculators) => {
-            this.calculators = calculators;
-            this.changeDetector.markForCheck();
+    else if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_startDateControl_get)) {
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_startDateControl_get).statusChanges
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngUnsubscribe, "f")))
+            .subscribe(() => {
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_updateBasedOnControls).call(this);
         });
     }
-    getCalculatorById(id) {
-        return this.calculators.find((calculator) => {
-            return calculator.calculatorId === id;
+    else if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_endDateControl_get)) {
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_endDateControl_get).statusChanges
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngUnsubscribe, "f")))
+            .subscribe(() => {
+            __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_updateBasedOnControls).call(this);
         });
     }
-    dateRangesEqual(rangeA, rangeB) {
-        return JSON.stringify(rangeA) === JSON.stringify(rangeB);
-    }
-}
+}, _SkyDateRangePickerComponent_updateBasedOnControls = function _SkyDateRangePickerComponent_updateBasedOnControls() {
+    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
+    // Wait for initial validation to complete.
+    __classPrivateFieldGet(this, _SkyDateRangePickerComponent_ngZone, "f").onStable.pipe(first()).subscribe(() => {
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_control, "f")?.updateValueAndValidity({ emitEvent: false });
+    });
+}, _SkyDateRangePickerComponent_updateCalculators = function _SkyDateRangePickerComponent_updateCalculators() {
+    return __classPrivateFieldGet(this, _SkyDateRangePickerComponent_dateRangeService, "f")
+        .getCalculators(this.calculatorIds)
+        .then((calculators) => {
+        this.calculators = calculators;
+        // Ensure that any previously set value is used to determine the selected calculator
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_updateSelectedCalculator).call(this);
+        __classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
+    });
+}, _SkyDateRangePickerComponent_getCalculatorById = function _SkyDateRangePickerComponent_getCalculatorById(id) {
+    return this.calculators.find((calculator) => {
+        return calculator.calculatorId === id;
+    });
+}, _SkyDateRangePickerComponent_dateRangesEqual = function _SkyDateRangePickerComponent_dateRangesEqual(rangeA, rangeB) {
+    return (!!rangeA && !!rangeB && JSON.stringify(rangeA) === JSON.stringify(rangeB));
+}, _SkyDateRangePickerComponent_updateSelectedCalculator = function _SkyDateRangePickerComponent_updateSelectedCalculator() {
+    this.selectedCalculator = __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get)
+        ? __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_getCalculatorById).call(this, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get).calculatorId)
+        : undefined;
+};
 SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2$2.UntypedFormBuilder }, { token: i3.SkyAppLocaleProvider }, { token: i0.NgZone }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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}.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 .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}: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%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}@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 .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}}: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-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}: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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "component", type: i2$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"isReady && formGroup\"\n  class=\"sky-date-range-picker\"\n  [formGroup]=\"formGroup\"\n>\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        {{\n          selectedCalculator?.type\n            | skyDateRangePickerStartDateResourceKey\n            | skyLibResources\n        }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"startDate\"\n          [attr.aria-label]=\"\n            selectedCalculator?.type\n              | skyDateRangePickerStartDateResourceKey\n              | skyLibResources\n          \"\n          [attr.id]=\"dateRangePickerId + '-start-date'\"\n          [attr.placeholder]=\"dateFormatOrDefault\"\n          [required]=\"!!startDateRequired\"\n          [dateFormat]=\"dateFormatOrDefault\"\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        {{\n          selectedCalculator?.type\n            | skyDateRangePickerEndDateResourceKey\n            | skyLibResources\n        }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"endDate\"\n          skyDatepickerInput\n          [attr.aria-label]=\"\n            selectedCalculator?.type\n              | skyDateRangePickerEndDateResourceKey\n              | skyLibResources\n          \"\n          [attr.id]=\"dateRangePickerId + '-end-date'\"\n          [attr.placeholder]=\"dateFormatOrDefault\"\n          [dateFormat]=\"dateFormatOrDefault\"\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}.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 .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}: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%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}@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 .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}}: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-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}: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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", 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]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "component", type: i2$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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}.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 .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}: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%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}@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 .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}}: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-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}: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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"isReady && formGroup\"\n  class=\"sky-date-range-picker\"\n  [formGroup]=\"formGroup\"\n>\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        {{\n          selectedCalculator?.type\n            | skyDateRangePickerStartDateResourceKey\n            | skyLibResources\n        }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"startDate\"\n          [attr.aria-label]=\"\n            selectedCalculator?.type\n              | skyDateRangePickerStartDateResourceKey\n              | skyLibResources\n          \"\n          [attr.id]=\"dateRangePickerId + '-start-date'\"\n          [attr.placeholder]=\"dateFormatOrDefault\"\n          [required]=\"!!startDateRequired\"\n          [dateFormat]=\"dateFormatOrDefault\"\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        {{\n          selectedCalculator?.type\n            | skyDateRangePickerEndDateResourceKey\n            | skyLibResources\n        }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"endDate\"\n          skyDatepickerInput\n          [attr.aria-label]=\"\n            selectedCalculator?.type\n              | skyDateRangePickerEndDateResourceKey\n              | skyLibResources\n          \"\n          [attr.id]=\"dateRangePickerId + '-end-date'\"\n          [attr.placeholder]=\"dateFormatOrDefault\"\n          [dateFormat]=\"dateFormatOrDefault\"\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}.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 .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}: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%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}@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 .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}}: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-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}: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.UntypedFormBuilder }, { type: i3.SkyAppLocaleProvider }, { type: i0.NgZone }, { type: i3$2.SkyThemeService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { calculatorIds: [{
@@ -4104,7 +4184,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
 class SkyDateRangePickerModule {
 }
 SkyDateRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent], imports: [CommonModule,
+SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent,
+        SkyDateRangePickerEndDateResourceKeyPipe,
+        SkyDateRangePickerStartDateResourceKeyPipe], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         SkyI18nModule,
@@ -4121,7 +4203,11 @@ SkyDateRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SkyDateRangePickerComponent],
+                    declarations: [
+                        SkyDateRangePickerComponent,
+                        SkyDateRangePickerEndDateResourceKeyPipe,
+                        SkyDateRangePickerStartDateResourceKeyPipe,
+                    ],
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -4136,6 +4222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyTimepickerComponent_instances, _SkyTimepickerComponent_affixer, _SkyTimepickerComponent_timepickerUnsubscribe, _SkyTimepickerComponent_ngUnsubscribe, _SkyTimepickerComponent_overlay, _SkyTimepickerComponent_overlayKeydownListner, _SkyTimepickerComponent__disabled, _SkyTimepickerComponent__timepickerRef, _SkyTimepickerComponent_affixService, _SkyTimepickerComponent_changeDetector, _SkyTimepickerComponent_coreAdapter, _SkyTimepickerComponent_overlayService, _SkyTimepickerComponent_closePicker, _SkyTimepickerComponent_openPicker, _SkyTimepickerComponent_createAffixer, _SkyTimepickerComponent_destroyAffixer, _SkyTimepickerComponent_createOverlay, _SkyTimepickerComponent_destroyOverlay, _SkyTimepickerComponent_addKeydownListener, _SkyTimepickerComponent_removePickerEventListeners;
 let nextId = 0;
 /**
  * Creates a SKY UX-themed replacement for the HTML `input` element with `type="time"`.
@@ -4145,34 +4232,51 @@ let nextId = 0;
  */
 class SkyTimepickerComponent {
     constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
-        this.affixService = affixService;
-        this.changeDetector = changeDetector;
-        this.coreAdapter = coreAdapter;
-        this.overlayService = overlayService;
         this.inputBoxHostService = inputBoxHostService;
+        _SkyTimepickerComponent_instances.add(this);
         /**
          * Fires when the value in the timepicker input changes.
          */
         this.selectedTimeChanged = new EventEmitter();
+        this.activeTime = new Date();
+        this.hours = [];
         this.is8601 = false;
+        this.isOpen = false;
+        this.isVisible = false;
+        this.localeFormat = 'h:mm A';
+        this.minutes = [];
         this.timeFormat = 'hh';
-        this.ngUnsubscribe = new Subject();
+        _SkyTimepickerComponent_affixer.set(this, void 0);
+        _SkyTimepickerComponent_timepickerUnsubscribe.set(this, new Subject());
+        _SkyTimepickerComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyTimepickerComponent_overlay.set(this, void 0);
+        _SkyTimepickerComponent_overlayKeydownListner.set(this, void 0);
+        _SkyTimepickerComponent__disabled.set(this, false);
+        _SkyTimepickerComponent__timepickerRef.set(this, void 0);
+        _SkyTimepickerComponent_affixService.set(this, void 0);
+        _SkyTimepickerComponent_changeDetector.set(this, void 0);
+        _SkyTimepickerComponent_coreAdapter.set(this, void 0);
+        _SkyTimepickerComponent_overlayService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTimepickerComponent_affixService, affixService, "f");
+        __classPrivateFieldSet(this, _SkyTimepickerComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyTimepickerComponent_coreAdapter, coreAdapter, "f");
+        __classPrivateFieldSet(this, _SkyTimepickerComponent_overlayService, overlayService, "f");
         const uniqueId = nextId++;
         this.timepickerId = `sky-timepicker-${uniqueId}`;
         this.triggerButtonId = `sky-timepicker-button-${uniqueId}`;
         // Update icons when theme changes.
         themeSvc?.settingsChange
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f")))
             .subscribe(() => {
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
         });
     }
     set disabled(value) {
-        this._disabled = value;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldSet(this, _SkyTimepickerComponent__disabled, value, "f");
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
     }
     get disabled() {
-        return this._disabled;
+        return __classPrivateFieldGet(this, _SkyTimepickerComponent__disabled, "f");
     }
     set selectedHour(setHour) {
         let hourOffset = 0;
@@ -4197,8 +4301,7 @@ class SkyTimepickerComponent {
             /* istanbul ignore next */
             return parseInt(moment(this.activeTime).format('h'), 0) || 1;
         }
-        /* istanbul ignore else */
-        if (this.is8601) {
+        else {
             return moment(this.activeTime).hour() + 0;
         }
     }
@@ -4233,7 +4336,7 @@ class SkyTimepickerComponent {
             /* istanbul ignore else */
             if (newTime.local !== 'Invalid date') {
                 this.activeTime = newTime.iso8601;
-                this.changeDetector.markForCheck();
+                __classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
             }
         }
     }
@@ -4253,26 +4356,28 @@ class SkyTimepickerComponent {
     }
     set timepickerRef(value) {
         if (value) {
-            this._timepickerRef = value;
+            __classPrivateFieldSet(this, _SkyTimepickerComponent__timepickerRef, value, "f");
             // Wait for the timepicker component to render before guaging dimensions.
             setTimeout(() => {
-                this.destroyAffixer();
-                this.createAffixer();
+                __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
+                __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_createAffixer).call(this);
                 setTimeout(() => {
-                    this.coreAdapter.getFocusableChildrenAndApplyFocus(this.timepickerRef, '.sky-timepicker-content', false);
+                    if (this.timepickerRef) {
+                        __classPrivateFieldGet(this, _SkyTimepickerComponent_coreAdapter, "f").getFocusableChildrenAndApplyFocus(this.timepickerRef, '.sky-timepicker-content', false);
+                    }
                     this.isVisible = true;
-                    this.changeDetector.markForCheck();
+                    __classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
                 });
             });
         }
     }
     get timepickerRef() {
-        return this._timepickerRef;
+        return __classPrivateFieldGet(this, _SkyTimepickerComponent__timepickerRef, "f");
     }
     ngOnInit() {
         this.setFormat(this.timeFormat);
-        this.addKeydownListner();
-        if (this.inputBoxHostService) {
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_addKeydownListener).call(this);
+        if (this.inputBoxHostService && this.inputTemplateRef) {
             this.inputBoxHostService.populate({
                 inputTemplate: this.inputTemplateRef,
                 buttonsTemplate: this.triggerButtonTemplateRef,
@@ -4280,11 +4385,11 @@ class SkyTimepickerComponent {
         }
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.removePickerEventListeners();
-        this.destroyAffixer();
-        this.destroyOverlay();
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_removePickerEventListeners).call(this);
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyOverlay).call(this);
     }
     setFormat(format) {
         let h = 12;
@@ -4332,7 +4437,7 @@ class SkyTimepickerComponent {
         this.minuteMultiplier = data.minuteMultiplier;
     }
     onCloseButtonCick() {
-        this.closePicker();
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_closePicker).call(this);
     }
     setTime(event) {
         /* istanbul ignore else */
@@ -4353,33 +4458,32 @@ class SkyTimepickerComponent {
         }
     }
     onTriggerButtonClick() {
-        this.openPicker();
-    }
-    closePicker() {
-        this.destroyAffixer();
-        this.destroyOverlay();
-        this.removePickerEventListeners();
-        this.triggerButtonRef.nativeElement.focus();
-        this.isOpen = false;
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_openPicker).call(this);
     }
-    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);
+}
+_SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepickerUnsubscribe = new WeakMap(), _SkyTimepickerComponent_ngUnsubscribe = new WeakMap(), _SkyTimepickerComponent_overlay = new WeakMap(), _SkyTimepickerComponent_overlayKeydownListner = new WeakMap(), _SkyTimepickerComponent__disabled = new WeakMap(), _SkyTimepickerComponent__timepickerRef = new WeakMap(), _SkyTimepickerComponent_affixService = new WeakMap(), _SkyTimepickerComponent_changeDetector = new WeakMap(), _SkyTimepickerComponent_coreAdapter = new WeakMap(), _SkyTimepickerComponent_overlayService = new WeakMap(), _SkyTimepickerComponent_instances = new WeakSet(), _SkyTimepickerComponent_closePicker = function _SkyTimepickerComponent_closePicker() {
+    __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
+    __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyOverlay).call(this);
+    __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_removePickerEventListeners).call(this);
+    this.triggerButtonRef?.nativeElement.focus();
+    this.isOpen = false;
+}, _SkyTimepickerComponent_openPicker = function _SkyTimepickerComponent_openPicker() {
+    this.isVisible = false;
+    __classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
+    __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_removePickerEventListeners).call(this);
+    __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyOverlay).call(this);
+    __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_createOverlay).call(this);
+    this.isOpen = true;
+    __classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
+}, _SkyTimepickerComponent_createAffixer = function _SkyTimepickerComponent_createAffixer() {
+    if (this.timepickerRef && this.triggerButtonRef) {
+        const affixer = __classPrivateFieldGet(this, _SkyTimepickerComponent_affixService, "f").createAffixer(this.timepickerRef);
         // Hide timepicker when trigger button is scrolled off screen.
         affixer.placementChange
-            .pipe(takeUntil(this.timepickerUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f")))
             .subscribe((change) => {
             this.isVisible = change.placement !== null;
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
         });
         affixer.affixTo(this.triggerButtonRef.nativeElement, {
             autoFitContext: SkyAffixAutoFitContext.Viewport,
@@ -4388,61 +4492,58 @@ class SkyTimepickerComponent {
             isSticky: true,
             placement: 'below',
         });
-        this.affixer = affixer;
+        __classPrivateFieldSet(this, _SkyTimepickerComponent_affixer, affixer, "f");
     }
-    destroyAffixer() {
-        /*istanbul ignore else*/
-        if (this.affixer) {
-            this.affixer.destroy();
-            this.affixer = undefined;
-        }
+}, _SkyTimepickerComponent_destroyAffixer = function _SkyTimepickerComponent_destroyAffixer() {
+    /*istanbul ignore else*/
+    if (__classPrivateFieldGet(this, _SkyTimepickerComponent_affixer, "f")) {
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_affixer, "f").destroy();
+        __classPrivateFieldSet(this, _SkyTimepickerComponent_affixer, undefined, "f");
     }
-    createOverlay() {
-        const overlay = this.overlayService.create({
+}, _SkyTimepickerComponent_createOverlay = function _SkyTimepickerComponent_createOverlay() {
+    if (this.timepickerTemplateRef) {
+        const overlay = __classPrivateFieldGet(this, _SkyTimepickerComponent_overlayService, "f").create({
             enableClose: false,
             enablePointerEvents: false,
         });
         overlay.backdropClick
-            .pipe(takeUntil(this.timepickerUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f")))
             .subscribe(() => {
             /* istanbul ignore else */
             if (this.isOpen) {
-                this.closePicker();
+                __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_closePicker).call(this);
             }
         });
-        this.addKeydownListner();
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_addKeydownListener).call(this);
         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) => {
-            const key = event.key?.toLowerCase();
-            /* istanbul ignore else */
-            if (key === 'escape' && this.isOpen) {
-                this.closePicker();
-            }
-        });
-    }
-    removePickerEventListeners() {
+        __classPrivateFieldSet(this, _SkyTimepickerComponent_overlay, overlay, "f");
+    }
+}, _SkyTimepickerComponent_destroyOverlay = function _SkyTimepickerComponent_destroyOverlay() {
+    /*istanbul ignore else*/
+    if (__classPrivateFieldGet(this, _SkyTimepickerComponent_overlay, "f")) {
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_overlayService, "f").close(__classPrivateFieldGet(this, _SkyTimepickerComponent_overlay, "f"));
+        __classPrivateFieldSet(this, _SkyTimepickerComponent_overlay, undefined, "f");
+    }
+}, _SkyTimepickerComponent_addKeydownListener = function _SkyTimepickerComponent_addKeydownListener() {
+    __classPrivateFieldSet(this, _SkyTimepickerComponent_overlayKeydownListner, fromEvent(window.document, 'keydown')
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f")))
+        .subscribe((event) => {
+        const key = event.key?.toLowerCase();
         /* istanbul ignore else */
-        if (this.timepickerUnsubscribe) {
-            this.timepickerUnsubscribe.next();
-            this.timepickerUnsubscribe.complete();
-            this.timepickerUnsubscribe = undefined;
+        if (key === 'escape' && this.isOpen) {
+            __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_closePicker).call(this);
         }
-        /* istanbul ignore next */
-        this.overlayKeydownListner?.unsubscribe();
+    }), "f");
+}, _SkyTimepickerComponent_removePickerEventListeners = function _SkyTimepickerComponent_removePickerEventListeners() {
+    /* istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f")) {
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f").complete();
+        __classPrivateFieldSet(this, _SkyTimepickerComponent_timepickerUnsubscribe, new Subject(), "f");
     }
-}
+    /* istanbul ignore next */
+    __classPrivateFieldGet(this, _SkyTimepickerComponent_overlayKeydownListner, "f")?.unsubscribe();
+};
 SkyTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
@@ -4483,6 +4584,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                     }]
             }] } });
 
+var _SkyTimepickerInputDirective_instances, _SkyTimepickerInputDirective__timeFormat, _SkyTimepickerInputDirective_modelValue_get, _SkyTimepickerInputDirective_modelValue_set, _SkyTimepickerInputDirective_control, _SkyTimepickerInputDirective__disabled, _SkyTimepickerInputDirective__modelValue, _SkyTimepickerInputDirective__skyTimepickerInput, _SkyTimepickerInputDirective_renderer, _SkyTimepickerInputDirective_elRef, _SkyTimepickerInputDirective_resourcesService, _SkyTimepickerInputDirective_changeDetector, _SkyTimepickerInputDirective_setInputValue, _SkyTimepickerInputDirective_formatter, _SkyTimepickerInputDirective_updateTimepickerInput, _SkyTimepickerInputDirective__onChange, _SkyTimepickerInputDirective__onTouched, _SkyTimepickerInputDirective__validatorChange;
 const SKY_TIMEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyTimepickerInputDirective),
@@ -4495,18 +4597,31 @@ const SKY_TIMEPICKER_VALIDATOR = {
 };
 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 = (_) => { };
+        _SkyTimepickerInputDirective_instances.add(this);
+        _SkyTimepickerInputDirective__timeFormat.set(this, 'hh');
+        _SkyTimepickerInputDirective_control.set(this, void 0);
+        _SkyTimepickerInputDirective__disabled.set(this, false);
+        _SkyTimepickerInputDirective__modelValue.set(this, void 0);
+        _SkyTimepickerInputDirective__skyTimepickerInput.set(this, void 0);
+        _SkyTimepickerInputDirective_renderer.set(this, void 0);
+        _SkyTimepickerInputDirective_elRef.set(this, void 0);
+        _SkyTimepickerInputDirective_resourcesService.set(this, void 0);
+        _SkyTimepickerInputDirective_changeDetector.set(this, void 0);
+        /* istanbul ignore next */
+        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+        _SkyTimepickerInputDirective__onChange.set(this, (_) => { });
+        /* istanbul ignore next */
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this._onTouched = () => { };
+        _SkyTimepickerInputDirective__onTouched.set(this, () => { });
+        /* istanbul ignore next */
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this._validatorChange = () => { };
+        _SkyTimepickerInputDirective__validatorChange.set(this, () => { });
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective_renderer, renderer, "f");
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective_elRef, elRef, "f");
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective_resourcesService, resourcesService, "f");
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective_changeDetector, changeDetector, "f");
     }
+    // TODO: In a future breaking change - grab the parent component through dependency injection and remove this setter.
     /**
      * Creates the timepicker input field and picker. Place this attribute on an `input` element,
      * and wrap the input in a `sky-timepicker` component.
@@ -4514,70 +4629,59 @@ class SkyTimepickerInputDirective {
      * @required
      */
     get skyTimepickerInput() {
-        return this._skyTimepickerInput;
+        return __classPrivateFieldGet(this, _SkyTimepickerInputDirective__skyTimepickerInput, "f");
     }
     set skyTimepickerInput(value) {
-        this._skyTimepickerInput = value;
-        this.updateTimepickerInput();
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective__skyTimepickerInput, value, "f");
+        __classPrivateFieldGet(this, _SkyTimepickerInputDirective_instances, "m", _SkyTimepickerInputDirective_updateTimepickerInput).call(this);
     }
+    // TODO: In a future breaking change - make this more specific than "string"
     /**
      * Specifies the 12-hour `hh` or 24-hour `HH` time format for the input.
      * @default "hh"
      */
     set timeFormat(value) {
-        this._timeFormat = value;
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective__timeFormat, value || 'hh', "f");
     }
     get timeFormat() {
-        return this._timeFormat || 'hh';
+        return __classPrivateFieldGet(this, _SkyTimepickerInputDirective__timeFormat, "f");
     }
     /**
      * Indicates whether to disable the timepicker.
      * @default false
      */
     get disabled() {
-        return this._disabled || false;
+        return __classPrivateFieldGet(this, _SkyTimepickerInputDirective__disabled, "f");
     }
     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);
-        }
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective__disabled, value || false, "f");
+        __classPrivateFieldGet(this, _SkyTimepickerInputDirective_instances, "m", _SkyTimepickerInputDirective_updateTimepickerInput).call(this);
+        __classPrivateFieldGet(this, _SkyTimepickerInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyTimepickerInputDirective_elRef, "f").nativeElement, 'disabled', value);
     }
     ngOnInit() {
-        this.renderer.addClass(this.elRef.nativeElement, 'sky-form-control');
+        __classPrivateFieldGet(this, _SkyTimepickerInputDirective_renderer, "f").addClass(__classPrivateFieldGet(this, _SkyTimepickerInputDirective_elRef, "f").nativeElement, 'sky-form-control');
         this.pickerChangedSubscription =
-            this.skyTimepickerInput.selectedTimeChanged.subscribe((newTime) => {
+            this.skyTimepickerInput?.selectedTimeChanged.subscribe((newTime) => {
                 this.writeValue(newTime);
-                this._onTouched();
+                __classPrivateFieldGet(this, _SkyTimepickerInputDirective__onTouched, "f").call(this);
             });
         /* istanbul ignore else */
-        if (!this.elRef.nativeElement.getAttribute('aria-label')) {
-            this.resourcesService
+        if (!__classPrivateFieldGet(this, _SkyTimepickerInputDirective_elRef, "f").nativeElement.getAttribute('aria-label')) {
+            __classPrivateFieldGet(this, _SkyTimepickerInputDirective_resourcesService, "f")
                 .getString('skyux_timepicker_input_default_label')
                 .subscribe((value) => {
-                this.renderer.setAttribute(this.elRef.nativeElement, 'aria-label', value);
+                __classPrivateFieldGet(this, _SkyTimepickerInputDirective_renderer, "f").setAttribute(__classPrivateFieldGet(this, _SkyTimepickerInputDirective_elRef, "f").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, {
+        if (__classPrivateFieldGet(this, _SkyTimepickerInputDirective_control, "f") && __classPrivateFieldGet(this, _SkyTimepickerInputDirective_control, "f").parent) {
+            __classPrivateFieldGet(this, _SkyTimepickerInputDirective_control, "f").setValue(__classPrivateFieldGet(this, _SkyTimepickerInputDirective_instances, "a", _SkyTimepickerInputDirective_modelValue_get), {
                 emitEvent: false,
             });
-            this.changeDetector.markForCheck();
+            __classPrivateFieldGet(this, _SkyTimepickerInputDirective_changeDetector, "f").markForCheck();
         }
     }
     ngOnDestroy() {
@@ -4587,38 +4691,40 @@ class SkyTimepickerInputDirective {
         }
     }
     ngOnChanges() {
-        this.skyTimepickerInput.setFormat(this.timeFormat);
-        this.skyTimepickerInput.returnFormat = this.returnFormat;
+        if (this.skyTimepickerInput) {
+            this.skyTimepickerInput.setFormat(this.timeFormat);
+            this.skyTimepickerInput.returnFormat = this.returnFormat;
+        }
     }
     onChange(event) {
         this.writeValue(event.target.value);
     }
     /* istanbul ignore next */
     onBlur() {
-        this._onTouched();
+        __classPrivateFieldGet(this, _SkyTimepickerInputDirective__onTouched, "f").call(this);
     }
     registerOnChange(fn) {
-        this._onChange = fn;
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective__onChange, fn, "f");
     }
     registerOnTouched(fn) {
-        this._onTouched = fn;
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective__onTouched, fn, "f");
     }
     registerOnValidatorChange(fn) {
-        this._validatorChange = fn;
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective__validatorChange, fn, "f");
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
     writeValue(value) {
-        this.modelValue = this.formatter(value);
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective_instances, __classPrivateFieldGet(this, _SkyTimepickerInputDirective_instances, "m", _SkyTimepickerInputDirective_formatter).call(this, value), "a", _SkyTimepickerInputDirective_modelValue_set);
     }
     validate(control) {
-        if (!this.control) {
-            this.control = control;
+        if (!__classPrivateFieldGet(this, _SkyTimepickerInputDirective_control, "f")) {
+            __classPrivateFieldSet(this, _SkyTimepickerInputDirective_control, control, "f");
         }
         const value = control.value;
         if (!value) {
-            return undefined;
+            return null;
         }
         /* istanbul ignore next */
         if (value.local === 'Invalid date') {
@@ -4628,59 +4734,61 @@ class SkyTimepickerInputDirective {
                 },
             };
         }
-        return undefined;
+        return null;
     }
-    setInputValue(value) {
-        let formattedValue = '';
-        if (value) {
-            const output = moment(value).format(value.customFormat);
-            /* istanbul ignore else */
-            if (output !== 'Invalid date') {
-                formattedValue = output;
-            }
+}
+_SkyTimepickerInputDirective__timeFormat = new WeakMap(), _SkyTimepickerInputDirective_control = new WeakMap(), _SkyTimepickerInputDirective__disabled = new WeakMap(), _SkyTimepickerInputDirective__modelValue = new WeakMap(), _SkyTimepickerInputDirective__skyTimepickerInput = new WeakMap(), _SkyTimepickerInputDirective_renderer = new WeakMap(), _SkyTimepickerInputDirective_elRef = new WeakMap(), _SkyTimepickerInputDirective_resourcesService = new WeakMap(), _SkyTimepickerInputDirective_changeDetector = new WeakMap(), _SkyTimepickerInputDirective__onChange = new WeakMap(), _SkyTimepickerInputDirective__onTouched = new WeakMap(), _SkyTimepickerInputDirective__validatorChange = new WeakMap(), _SkyTimepickerInputDirective_instances = new WeakSet(), _SkyTimepickerInputDirective_modelValue_get = function _SkyTimepickerInputDirective_modelValue_get() {
+    return __classPrivateFieldGet(this, _SkyTimepickerInputDirective__modelValue, "f");
+}, _SkyTimepickerInputDirective_modelValue_set = function _SkyTimepickerInputDirective_modelValue_set(value) {
+    if (value !== __classPrivateFieldGet(this, _SkyTimepickerInputDirective__modelValue, "f")) {
+        __classPrivateFieldSet(this, _SkyTimepickerInputDirective__modelValue, value, "f");
+        __classPrivateFieldGet(this, _SkyTimepickerInputDirective_instances, "m", _SkyTimepickerInputDirective_updateTimepickerInput).call(this);
+        __classPrivateFieldGet(this, _SkyTimepickerInputDirective_instances, "m", _SkyTimepickerInputDirective_setInputValue).call(this, value);
+        __classPrivateFieldGet(this, _SkyTimepickerInputDirective__validatorChange, "f").call(this);
+        __classPrivateFieldGet(this, _SkyTimepickerInputDirective__onChange, "f").call(this, value);
+    }
+}, _SkyTimepickerInputDirective_setInputValue = function _SkyTimepickerInputDirective_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;
+    __classPrivateFieldGet(this, _SkyTimepickerInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyTimepickerInputDirective_elRef, "f").nativeElement, 'value', formattedValue);
+}, _SkyTimepickerInputDirective_formatter = function _SkyTimepickerInputDirective_formatter(time) {
+    if (time && typeof time !== 'string' && 'local' in time) {
+        return time;
+    }
+    if (typeof time === 'string') {
+        if (time.length === 0) {
+            return '';
         }
+        const currentFormat = this.timeFormat === 'HH' ? 'H:mm' : 'h:mm A';
+        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_updateTimepickerInput = function _SkyTimepickerInputDirective_updateTimepickerInput() {
+    if (this.skyTimepickerInput) {
+        this.skyTimepickerInput.disabled = this.disabled;
+        /* istanbul ignore else */
+        if (this.skyTimepickerInput.selectedTime !== __classPrivateFieldGet(this, _SkyTimepickerInputDirective_instances, "a", _SkyTimepickerInputDirective_modelValue_get)) {
+            this.skyTimepickerInput.selectedTime = __classPrivateFieldGet(this, _SkyTimepickerInputDirective_instances, "a", _SkyTimepickerInputDirective_modelValue_get);
         }
     }
-}
+};
 SkyTimepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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: "14.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{