@skyux/datetime 5.0.1 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/bundles/skyux-datetime.umd.js +479 -122
  2. package/bundles/skyux-datetime.umd.js.map +1 -1
  3. package/documentation.json +1151 -772
  4. package/esm2015/modules/date-pipe/date-pipe.module.js +4 -4
  5. package/esm2015/modules/date-pipe/date.pipe.js +3 -3
  6. package/esm2015/modules/date-pipe/fuzzy-date.pipe.js +3 -3
  7. package/esm2015/modules/date-range-picker/date-range-picker.component.js +4 -4
  8. package/esm2015/modules/date-range-picker/date-range-picker.module.js +8 -6
  9. package/esm2015/modules/date-range-picker/date-range.service.js +5 -8
  10. package/esm2015/modules/datepicker/datepicker-adapter.service.js +3 -3
  11. package/esm2015/modules/datepicker/datepicker-calendar-change.js +2 -0
  12. package/esm2015/modules/datepicker/datepicker-calendar-inner.component.js +33 -8
  13. package/esm2015/modules/datepicker/datepicker-calendar.component.js +17 -7
  14. package/esm2015/modules/datepicker/datepicker-config.service.js +3 -3
  15. package/esm2015/modules/datepicker/datepicker-custom-date.js +2 -0
  16. package/esm2015/modules/datepicker/datepicker-date.js +1 -1
  17. package/esm2015/modules/datepicker/datepicker-input-fuzzy.directive.js +3 -3
  18. package/esm2015/modules/datepicker/datepicker-input.directive.js +3 -3
  19. package/esm2015/modules/datepicker/datepicker.component.js +57 -6
  20. package/esm2015/modules/datepicker/datepicker.module.js +31 -12
  21. package/esm2015/modules/datepicker/datepicker.service.js +21 -0
  22. package/esm2015/modules/datepicker/daypicker-button.component.js +25 -0
  23. package/esm2015/modules/datepicker/daypicker-cell.component.js +130 -0
  24. package/esm2015/modules/datepicker/daypicker.component.js +98 -7
  25. package/esm2015/modules/datepicker/fuzzy-date.service.js +3 -3
  26. package/esm2015/modules/datepicker/monthpicker.component.js +3 -3
  27. package/esm2015/modules/datepicker/yearpicker.component.js +3 -3
  28. package/esm2015/modules/shared/sky-datetime-resources.module.js +4 -4
  29. package/esm2015/modules/timepicker/timepicker.component.js +3 -3
  30. package/esm2015/modules/timepicker/timepicker.directive.js +3 -3
  31. package/esm2015/modules/timepicker/timepicker.module.js +4 -4
  32. package/esm2015/public-api.js +3 -1
  33. package/fesm2015/skyux-datetime.js +443 -95
  34. package/fesm2015/skyux-datetime.js.map +1 -1
  35. package/modules/datepicker/datepicker-calendar-change.d.ts +24 -0
  36. package/modules/datepicker/datepicker-calendar-inner.component.d.ts +13 -3
  37. package/modules/datepicker/datepicker-calendar.component.d.ts +8 -2
  38. package/modules/datepicker/datepicker-custom-date.d.ts +21 -0
  39. package/modules/datepicker/datepicker-date.d.ts +2 -0
  40. package/modules/datepicker/datepicker.component.d.ts +14 -1
  41. package/modules/datepicker/datepicker.module.d.ts +11 -8
  42. package/modules/datepicker/datepicker.service.d.ts +15 -0
  43. package/modules/datepicker/daypicker-button.component.d.ts +16 -0
  44. package/modules/datepicker/daypicker-cell.component.d.ts +40 -0
  45. package/modules/datepicker/daypicker.component.d.ts +18 -3
  46. package/package.json +9 -9
  47. package/public-api.d.ts +2 -0
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@skyux/i18n'), require('moment'), require('@angular/common'), require('@angular/forms'), require('@skyux/forms'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/theme')) :
3
- typeof define === 'function' && define.amd ? define('@skyux/datetime', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@skyux/i18n', 'moment', '@angular/common', '@angular/forms', '@skyux/forms', '@skyux/core', '@skyux/indicators', '@skyux/theme'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.datetime = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.i3, global.moment, global.ng.common, global.ng.forms, global.i2$1, global.i1, global.i2, global.i3$2));
5
- })(this, (function (exports, i0, rxjs, operators, i3, moment, i3$1, i2$2, i2$1, i1, i2, i3$2) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@skyux/i18n'), require('moment'), require('@angular/common'), require('@angular/forms'), require('@skyux/forms'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/popovers')) :
3
+ typeof define === 'function' && define.amd ? define('@skyux/datetime', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@skyux/i18n', 'moment', '@angular/common', '@angular/forms', '@skyux/forms', '@skyux/core', '@skyux/indicators', '@skyux/theme', '@skyux/popovers'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.datetime = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.i3, global.moment, global.ng.common, global.ng.forms, global.i2$1, global.i1, global.i2, global.i3$2, global.i3$1));
5
+ })(this, (function (exports, i0, rxjs, operators, i3, moment, i5, i2$2, i2$1, i1, i2, i3$2, i3$1) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -27,12 +27,13 @@
27
27
  var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
28
28
  var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
29
29
  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
30
- var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
30
+ var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
31
31
  var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
32
32
  var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
33
33
  var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
34
34
  var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
35
35
  var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
36
+ var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
36
37
 
37
38
  // This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
38
39
  var SkyDateFormatUtility = /** @class */ (function () {
@@ -128,9 +129,9 @@
128
129
  };
129
130
  return SkyDatePipe;
130
131
  }());
131
- SkyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatePipe, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
132
- SkyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatePipe, name: "skyDate", pure: false });
133
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatePipe, decorators: [{
132
+ SkyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipe, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
133
+ SkyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipe, name: "skyDate", pure: false });
134
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipe, decorators: [{
134
135
  type: i0.Pipe,
135
136
  args: [{
136
137
  name: 'skyDate',
@@ -166,14 +167,14 @@
166
167
  }
167
168
  return SkyDatetimeResourcesModule;
168
169
  }());
169
- SkyDatetimeResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
170
- SkyDatetimeResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, exports: [i3.SkyI18nModule] });
171
- SkyDatetimeResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, providers: [{
170
+ SkyDatetimeResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
171
+ SkyDatetimeResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, exports: [i3.SkyI18nModule] });
172
+ SkyDatetimeResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, providers: [{
172
173
  provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
173
174
  useClass: SkyDatetimeResourcesProvider,
174
175
  multi: true
175
176
  }], imports: [i3.SkyI18nModule] });
176
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, decorators: [{
177
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, decorators: [{
177
178
  type: i0.NgModule,
178
179
  args: [{
179
180
  exports: [i3.SkyI18nModule],
@@ -546,9 +547,9 @@
546
547
  };
547
548
  return SkyFuzzyDateService;
548
549
  }());
549
- SkyFuzzyDateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyFuzzyDateService, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
550
- SkyFuzzyDateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyFuzzyDateService, providedIn: 'root' });
551
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyFuzzyDateService, decorators: [{
550
+ SkyFuzzyDateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDateService, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
551
+ SkyFuzzyDateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDateService, providedIn: 'root' });
552
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDateService, decorators: [{
552
553
  type: i0.Injectable,
553
554
  args: [{
554
555
  providedIn: 'root'
@@ -589,9 +590,9 @@
589
590
  };
590
591
  return SkyFuzzyDatePipe;
591
592
  }());
592
- SkyFuzzyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
593
- SkyFuzzyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
594
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyFuzzyDatePipe, decorators: [{
593
+ SkyFuzzyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
594
+ SkyFuzzyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
595
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatePipe, decorators: [{
595
596
  type: i0.Pipe,
596
597
  args: [{
597
598
  name: 'skyFuzzyDate',
@@ -604,19 +605,19 @@
604
605
  }
605
606
  return SkyDatePipeModule;
606
607
  }());
607
- SkyDatePipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatePipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
608
- SkyDatePipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatePipeModule, declarations: [SkyDatePipe,
609
- SkyFuzzyDatePipe], imports: [i3$1.CommonModule,
608
+ SkyDatePipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
609
+ SkyDatePipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipeModule, declarations: [SkyDatePipe,
610
+ SkyFuzzyDatePipe], imports: [i5.CommonModule,
610
611
  SkyDatetimeResourcesModule], exports: [SkyDatePipe,
611
612
  SkyFuzzyDatePipe] });
612
- SkyDatePipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatePipeModule, providers: [
613
+ SkyDatePipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipeModule, providers: [
613
614
  SkyDatePipe,
614
615
  SkyFuzzyDatePipe
615
616
  ], imports: [[
616
- i3$1.CommonModule,
617
+ i5.CommonModule,
617
618
  SkyDatetimeResourcesModule
618
619
  ]] });
619
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatePipeModule, decorators: [{
620
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipeModule, decorators: [{
620
621
  type: i0.NgModule,
621
622
  args: [{
622
623
  declarations: [
@@ -628,7 +629,7 @@
628
629
  SkyFuzzyDatePipe
629
630
  ],
630
631
  imports: [
631
- i3$1.CommonModule,
632
+ i5.CommonModule,
632
633
  SkyDatetimeResourcesModule
633
634
  ],
634
635
  exports: [
@@ -805,9 +806,9 @@
805
806
  };
806
807
  return SkyDatepickerAdapterService;
807
808
  }());
808
- SkyDatepickerAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerAdapterService, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
809
- SkyDatepickerAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerAdapterService });
810
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerAdapterService, decorators: [{
809
+ SkyDatepickerAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerAdapterService, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
810
+ SkyDatepickerAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerAdapterService });
811
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerAdapterService, decorators: [{
811
812
  type: i0.Injectable
812
813
  }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }]; } });
813
814
 
@@ -889,6 +890,7 @@
889
890
  39: 'right',
890
891
  40: 'down'
891
892
  };
893
+ this.ngUnsubscribe = new rxjs.Subject();
892
894
  }
893
895
  Object.defineProperty(SkyDatepickerCalendarInnerComponent.prototype, "selectedDate", {
894
896
  get: function () {
@@ -914,6 +916,10 @@
914
916
  SkyDatepickerCalendarInnerComponent.prototype.ngOnChanges = function (changes) {
915
917
  this.refreshView();
916
918
  };
919
+ SkyDatepickerCalendarInnerComponent.prototype.ngOnDestroy = function () {
920
+ this.ngUnsubscribe.next();
921
+ this.ngUnsubscribe.complete();
922
+ };
917
923
  SkyDatepickerCalendarInnerComponent.prototype.setCompareHandler = function (handler, type) {
918
924
  if (type === 'day') {
919
925
  this.compareHandlerDay = handler;
@@ -1017,6 +1023,7 @@
1017
1023
  }
1018
1024
  };
1019
1025
  SkyDatepickerCalendarInnerComponent.prototype.createDateObject = function (date, format, isSecondary, id) {
1026
+ var customDateMatch = this.getCustomDate(date);
1020
1027
  var dateObject = {
1021
1028
  date: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
1022
1029
  label: this.dateFilter(date, format),
@@ -1024,7 +1031,9 @@
1024
1031
  disabled: this.isDisabled(date),
1025
1032
  current: this.compare(date, new Date()) === 0,
1026
1033
  secondary: isSecondary,
1027
- uid: id
1034
+ uid: id,
1035
+ keyDate: customDateMatch ? customDateMatch.keyDate : undefined,
1036
+ keyDateText: customDateMatch ? customDateMatch.keyDateText : []
1028
1037
  };
1029
1038
  return dateObject;
1030
1039
  };
@@ -1112,23 +1121,39 @@
1112
1121
  this.refreshView();
1113
1122
  }
1114
1123
  };
1124
+ /**
1125
+ * Date is disabled if it meets any of these criteria:
1126
+ * 1. Date falls outside the min or max dates set by the SkyDatepickerConfigService.
1127
+ * 2. Date is marked as disabled in the customDates array.
1128
+ */
1115
1129
  SkyDatepickerCalendarInnerComponent.prototype.isDisabled = function (date) {
1116
- return ((this.minDate && this.compare(date, this.minDate) < 0)
1117
- || (this.maxDate && this.compare(date, this.maxDate) > 0));
1130
+ var customDate = this.getCustomDate(date);
1131
+ return ((this.minDate && this.compare(date, this.minDate) < 0) ||
1132
+ (this.maxDate && this.compare(date, this.maxDate) > 0)) ||
1133
+ (customDate && customDate.disabled);
1134
+ };
1135
+ SkyDatepickerCalendarInnerComponent.prototype.getCustomDate = function (date) {
1136
+ if (this.customDates) {
1137
+ return this.customDates.find(function (customDate) {
1138
+ return customDate.date.getTime() === date.getTime();
1139
+ });
1140
+ }
1118
1141
  };
1119
1142
  return SkyDatepickerCalendarInnerComponent;
1120
1143
  }());
1121
- SkyDatepickerCalendarInnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
1122
- SkyDatepickerCalendarInnerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n *ngIf=\"datepickerMode\"\n class=\"sky-datepicker-calendar-inner\"\n (keydown)=\"onKeydown($event)\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
1123
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, decorators: [{
1144
+ SkyDatepickerCalendarInnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
1145
+ SkyDatepickerCalendarInnerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", 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__namespace, template: "<div\n *ngIf=\"datepickerMode\"\n class=\"sky-datepicker-calendar-inner\"\n (keydown)=\"onKeydown($event)\">\n <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
1146
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, decorators: [{
1124
1147
  type: i0.Component,
1125
1148
  args: [{
1126
1149
  selector: 'sky-datepicker-inner',
1127
- templateUrl: './datepicker-calendar-inner.component.html',
1128
- styleUrls: ['./datepicker-calendar-inner.component.scss'],
1150
+ template: "<div\n *ngIf=\"datepickerMode\"\n class=\"sky-datepicker-calendar-inner\"\n (keydown)=\"onKeydown($event)\">\n <ng-content></ng-content>\n</div>\n",
1151
+ 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"],
1129
1152
  encapsulation: i0.ViewEncapsulation.None
1130
1153
  }]
1131
- }], propDecorators: { startingDay: [{
1154
+ }], propDecorators: { customDates: [{
1155
+ type: i0.Input
1156
+ }], startingDay: [{
1132
1157
  type: i0.Input
1133
1158
  }], minDate: [{
1134
1159
  type: i0.Input
@@ -1153,29 +1178,208 @@
1153
1178
  }
1154
1179
  return SkyDatepickerConfigService;
1155
1180
  }());
1156
- SkyDatepickerConfigService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerConfigService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
1157
- SkyDatepickerConfigService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerConfigService, providedIn: 'root' });
1158
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerConfigService, decorators: [{
1181
+ SkyDatepickerConfigService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerConfigService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
1182
+ SkyDatepickerConfigService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerConfigService, providedIn: 'root' });
1183
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerConfigService, decorators: [{
1159
1184
  type: i0.Injectable,
1160
1185
  args: [{
1161
1186
  providedIn: 'root'
1162
1187
  }]
1163
1188
  }] });
1164
1189
 
1190
+ /**
1191
+ * @internal
1192
+ */
1193
+ var SkyDatepickerService = /** @class */ (function () {
1194
+ function SkyDatepickerService() {
1195
+ /**
1196
+ * Specifies if a key date popover is currently displayed.
1197
+ * Useful for communicating across all daypicker siblings when a popover is displayed.
1198
+ */
1199
+ this.keyDatePopoverStream = new rxjs.Subject();
1200
+ }
1201
+ return SkyDatepickerService;
1202
+ }());
1203
+ SkyDatepickerService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
1204
+ SkyDatepickerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerService });
1205
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerService, decorators: [{
1206
+ type: i0.Injectable
1207
+ }] });
1208
+
1209
+ /**
1210
+ * @internal
1211
+ */
1212
+ var SkyDayPickerButtonComponent = /** @class */ (function () {
1213
+ function SkyDayPickerButtonComponent(datepicker) {
1214
+ this.datepicker = datepicker;
1215
+ }
1216
+ return SkyDayPickerButtonComponent;
1217
+ }());
1218
+ SkyDayPickerButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
1219
+ SkyDayPickerButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0__namespace, 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\n [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\"\n >\n {{date.label}}\n </span>\n</button>\n", styles: [".sky-datepicker-btn-disabled{font-style:italic}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:5px;width:5px;background-color:#d93a3d;border-radius:50%;left:15px;top:22px}:host-context(.sky-theme-modern) .sky-datepicker-btn-key-date:before{left:12px}.sky-theme-modern .sky-datepicker-btn-key-date:before{left:12px}\n"], directives: [{ type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1220
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerButtonComponent, decorators: [{
1221
+ type: i0.Component,
1222
+ args: [{
1223
+ selector: 'sky-daypicker-button',
1224
+ 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\n [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\"\n >\n {{date.label}}\n </span>\n</button>\n",
1225
+ 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"]
1226
+ }]
1227
+ }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { date: [{
1228
+ type: i0.Input
1229
+ }] } });
1230
+
1231
+ /**
1232
+ * @internal
1233
+ */
1234
+ var SkyDayPickerCellComponent = /** @class */ (function () {
1235
+ function SkyDayPickerCellComponent(datepicker, datepickerService) {
1236
+ this.datepicker = datepicker;
1237
+ this.datepickerService = datepickerService;
1238
+ this.hasTooltip = false;
1239
+ this.popoverController = new rxjs.Subject();
1240
+ this.activeUid = '';
1241
+ this.cancelPopover = false;
1242
+ this.popoverOpen = false;
1243
+ this.ngUnsubscribe = new rxjs.Subject();
1244
+ }
1245
+ SkyDayPickerCellComponent.prototype.ngOnInit = function () {
1246
+ var _this = this;
1247
+ this.hasTooltip =
1248
+ this.date.keyDate &&
1249
+ this.date.keyDateText &&
1250
+ this.date.keyDateText.length > 0 &&
1251
+ this.date.keyDateText[0].length > 0;
1252
+ // show the tooltip if this is the active date and is not the
1253
+ // initial active date (activeDateHasChanged)
1254
+ if (this.datepicker.isActive(this.date) &&
1255
+ this.activeDateHasChanged &&
1256
+ this.hasTooltip) {
1257
+ this.activeUid = this.date.uid;
1258
+ this.showTooltip();
1259
+ }
1260
+ if (this.hasTooltip) {
1261
+ this.datepickerService.keyDatePopoverStream
1262
+ .pipe(operators.takeUntil(this.ngUnsubscribe))
1263
+ .subscribe(function (date) {
1264
+ if (date) {
1265
+ _this.activeUid = date.uid;
1266
+ }
1267
+ else {
1268
+ _this.activeUid = '';
1269
+ }
1270
+ // If this day has an open popover and they have moved off of the day close the popover.
1271
+ if (_this.date.uid !== _this.activeUid) {
1272
+ _this.hideTooltip();
1273
+ }
1274
+ });
1275
+ }
1276
+ };
1277
+ SkyDayPickerCellComponent.prototype.ngOnDestroy = function () {
1278
+ this.ngUnsubscribe.next();
1279
+ this.ngUnsubscribe.complete();
1280
+ };
1281
+ SkyDayPickerCellComponent.prototype.onDayMouseenter = function () {
1282
+ this.cancelPopover = false;
1283
+ if (this.hasTooltip) {
1284
+ this.showTooltip();
1285
+ this.datepickerService.keyDatePopoverStream.next(this.date);
1286
+ }
1287
+ };
1288
+ SkyDayPickerCellComponent.prototype.onDayMouseleave = function () {
1289
+ this.cancelPopover = true;
1290
+ if (this.hasTooltip) {
1291
+ this.hideTooltip();
1292
+ }
1293
+ this.datepickerService.keyDatePopoverStream.next(undefined);
1294
+ };
1295
+ SkyDayPickerCellComponent.prototype.onPopoverClosed = function () {
1296
+ this.popoverOpen = false;
1297
+ };
1298
+ SkyDayPickerCellComponent.prototype.onPopoverOpened = function () {
1299
+ this.popoverOpen = true;
1300
+ /* istanbul ignore else */
1301
+ if (this.cancelPopover) {
1302
+ // If the popover gets opened just as a mouseout event happens, close it.
1303
+ this.hideTooltip();
1304
+ this.cancelPopover = false;
1305
+ }
1306
+ };
1307
+ SkyDayPickerCellComponent.prototype.getKeyDateLabel = function () {
1308
+ if (this.hasTooltip) {
1309
+ return this.date.keyDateText.join(', ');
1310
+ }
1311
+ else {
1312
+ return '';
1313
+ }
1314
+ };
1315
+ SkyDayPickerCellComponent.prototype.hideTooltip = function () {
1316
+ /* istanbul ignore else */
1317
+ if (this.popoverOpen) {
1318
+ this.popoverController.next({ type: i3$1.SkyPopoverMessageType.Close });
1319
+ }
1320
+ };
1321
+ SkyDayPickerCellComponent.prototype.showTooltip = function () {
1322
+ var _this = this;
1323
+ /* istanbul ignore else */
1324
+ if (this.hasTooltip &&
1325
+ !this.popoverOpen) {
1326
+ /**
1327
+ * Delay 1/2 second before opening the popover as long as mouse hasn't moved off the date.
1328
+ */
1329
+ setTimeout(function () {
1330
+ if (!_this.cancelPopover &&
1331
+ _this.activeUid === _this.date.uid) {
1332
+ _this.popoverController.next({ type: i3$1.SkyPopoverMessageType.Open });
1333
+ }
1334
+ }, 500);
1335
+ }
1336
+ };
1337
+ return SkyDayPickerCellComponent;
1338
+ }());
1339
+ SkyDayPickerCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerService }], target: i0__namespace.ɵɵFactoryTarget.Component });
1340
+ SkyDayPickerCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: "activeDateHasChanged", date: "date" }, ngImport: i0__namespace, template: "<div *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 *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\n [date]=\"date\"\n >\n </sky-daypicker-button>\n</ng-template>\n", components: [{ type: i3__namespace$1.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
1341
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerCellComponent, decorators: [{
1342
+ type: i0.Component,
1343
+ args: [{
1344
+ selector: 'sky-daypicker-cell',
1345
+ template: "<div *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 *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\n [date]=\"date\"\n >\n </sky-daypicker-button>\n</ng-template>\n",
1346
+ changeDetection: i0.ChangeDetectionStrategy.OnPush
1347
+ }]
1348
+ }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }]; }, propDecorators: { activeDateHasChanged: [{
1349
+ type: i0.Input
1350
+ }], date: [{
1351
+ type: i0.Input
1352
+ }] } });
1353
+
1165
1354
  /**
1166
1355
  * @internal
1167
1356
  */
1168
1357
  var SkyDayPickerComponent = /** @class */ (function () {
1169
1358
  function SkyDayPickerComponent(datepicker) {
1359
+ this.calendarDateRangeChange = new i0.EventEmitter();
1360
+ this.isWaiting = false;
1361
+ this.activeDateHasChanged = false;
1170
1362
  this.labels = [];
1171
1363
  this.rows = [];
1172
1364
  this.weekNumbers = [];
1173
1365
  this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
1366
+ this.ngUnsubscribe = new rxjs.Subject();
1174
1367
  this.datepicker = datepicker;
1175
1368
  }
1369
+ Object.defineProperty(SkyDayPickerComponent.prototype, "customDates", {
1370
+ set: function (value) {
1371
+ /* istanbul ignore else */
1372
+ if (value) {
1373
+ this.applyCustomDates(value, this.rows);
1374
+ }
1375
+ },
1376
+ enumerable: false,
1377
+ configurable: true
1378
+ });
1176
1379
  SkyDayPickerComponent.prototype.ngOnInit = function () {
1177
1380
  var _this = this;
1178
1381
  this.datepicker.stepDay = { months: 1 };
1382
+ this.initialDate = this.datepicker.activeDate.getDate();
1179
1383
  this.datepicker.setRefreshViewHandler(function () {
1180
1384
  _this.refreshDayView();
1181
1385
  }, 'day');
@@ -1185,6 +1389,10 @@
1185
1389
  }, 'day');
1186
1390
  this.datepicker.refreshView();
1187
1391
  };
1392
+ SkyDayPickerComponent.prototype.ngOnDestroy = function () {
1393
+ this.ngUnsubscribe.next();
1394
+ this.ngUnsubscribe.complete();
1395
+ };
1188
1396
  SkyDayPickerComponent.prototype.getDates = function (startDate, n) {
1189
1397
  var dates = new Array(n);
1190
1398
  var current = new Date(startDate.getTime());
@@ -1212,6 +1420,9 @@
1212
1420
  ? 7 - difference
1213
1421
  : -difference;
1214
1422
  var firstDate = new Date(firstDayOfMonth.getTime());
1423
+ if (this.datepicker.activeDate.getDate() !== this.initialDate) {
1424
+ this.activeDateHasChanged = true;
1425
+ }
1215
1426
  /* istanbul ignore else */
1216
1427
  /* sanity check */
1217
1428
  if (numDisplayedFromPreviousMonth > 0) {
@@ -1233,7 +1444,15 @@
1233
1444
  }
1234
1445
  this.title =
1235
1446
  this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatDayTitle);
1447
+ var oldDateRange = this.getDateRange(this.rows);
1236
1448
  this.rows = this.datepicker.createCalendarRows(pickerDates, 7);
1449
+ var newDateRange = this.getDateRange(this.rows);
1450
+ if (!this.dateRangeRowsAreEqual(oldDateRange, newDateRange)) {
1451
+ this.calendarDateRangeChange.next({
1452
+ startDate: newDateRange.startDate,
1453
+ endDate: newDateRange.endDate
1454
+ });
1455
+ }
1237
1456
  };
1238
1457
  SkyDayPickerComponent.prototype.keydownDays = function (key, event) {
1239
1458
  var date = this.datepicker.activeDate.getDate();
@@ -1269,18 +1488,81 @@
1269
1488
  return month === 1 && year % 4 === 0 &&
1270
1489
  (year % 400 === 0 || year % 100 !== 0) ? 29 : this.daysInMonth[month];
1271
1490
  };
1491
+ /**
1492
+ * Applies custom date properties to the existing dates displayed in the calendar.
1493
+ */
1494
+ SkyDayPickerComponent.prototype.applyCustomDates = function (customDates, dateRows) {
1495
+ var date;
1496
+ var newDate;
1497
+ var dateIndex;
1498
+ /* istanbul ignore else */
1499
+ if (customDates && dateRows) {
1500
+ customDates.forEach(function (customDate) {
1501
+ dateIndex = -1;
1502
+ dateRows.forEach(function (row) {
1503
+ if (dateIndex === -1) {
1504
+ dateIndex = row.findIndex(function (d) {
1505
+ return d.date.getTime() === customDate.date.getTime();
1506
+ });
1507
+ if (dateIndex > -1) {
1508
+ date = row[dateIndex];
1509
+ // Replace the date with a new instance so the display gets updated.
1510
+ newDate = {
1511
+ current: date.current,
1512
+ date: date.date,
1513
+ disabled: !!date.disabled || !!customDate.disabled,
1514
+ keyDate: !!customDate.keyDate || !!date.keyDate,
1515
+ keyDateText: customDate.keyDateText || date.keyDateText,
1516
+ label: date.label,
1517
+ secondary: date.secondary,
1518
+ selected: date.selected,
1519
+ uid: date.uid
1520
+ };
1521
+ row[dateIndex] = newDate;
1522
+ }
1523
+ }
1524
+ });
1525
+ });
1526
+ }
1527
+ };
1528
+ SkyDayPickerComponent.prototype.dateRangeRowsAreEqual = function (rangeA, rangeB) {
1529
+ /* istanbul ignore if */
1530
+ if (!rangeA && !rangeB) {
1531
+ return true;
1532
+ }
1533
+ else if ((rangeA && !rangeB) || (!rangeA && rangeB)) {
1534
+ return false;
1535
+ }
1536
+ return this.compareDays(rangeA.startDate, rangeB.startDate) === 0 &&
1537
+ this.compareDays(rangeA.endDate, rangeB.endDate) === 0;
1538
+ };
1539
+ SkyDayPickerComponent.prototype.getDateRange = function (rows) {
1540
+ /* istanbul ignore else */
1541
+ if (rows && rows.length > 0) {
1542
+ return {
1543
+ startDate: rows[0][0].date,
1544
+ endDate: rows[rows.length - 1][rows[rows.length - 1].length - 1].date
1545
+ };
1546
+ }
1547
+ };
1272
1548
  return SkyDayPickerComponent;
1273
1549
  }());
1274
- SkyDayPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
1275
- SkyDayPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyDayPickerComponent, selector: "sky-daypicker", ngImport: i0__namespace, template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\"\n class=\"sky-daypicker-wrapper\"\n>\n <table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId+'-title'\"\n >\n <thead>\n <tr>\n <th\n class=\"sky-datepicker-header-left\"\n scope=\"col\"\n >\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\n scope=\"col\"\n [attr.colspan]=\"5\"\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]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <strong>{{title}}</strong>\n </button>\n </th>\n <th\n class=\"sky-datepicker-header-right\"\n scope=\"col\"\n >\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 <small [attr.aria-label]=\"label.full\">\n <b>{{label.abbr}}</b>\n </small>\n </th>\n </tr>\n </thead>\n <tbody>\n <ng-template\n ngFor\n [ngForOf]=\"rows\"\n let-row=\"$implicit\"\n let-index=\"index\"\n >\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 <button\n type=\"button\"\n class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{ 'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n tabindex=\"-1\"\n >\n <span\n [ngClass]=\"{'sky-datepicker-secondary': date.secondary }\"\n >{{date.label}}</span>\n </button>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1276
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDayPickerComponent, decorators: [{
1550
+ SkyDayPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
1551
+ SkyDayPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0__namespace, template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\"\n class=\"sky-daypicker-wrapper\"\n>\n <table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId+'-title'\"\n >\n <thead>\n <tr>\n <th\n class=\"sky-datepicker-header-left\"\n scope=\"col\"\n >\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\n scope=\"col\"\n [attr.colspan]=\"5\"\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]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <strong>{{title}}</strong>\n </button>\n </th>\n <th\n class=\"sky-datepicker-header-right\"\n scope=\"col\"\n >\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 <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\n [isWaiting]=\"isWaiting\"\n >\n </sky-wait>\n <ng-template\n ngFor\n [ngForOf]=\"rows\"\n let-row=\"$implicit\"\n let-index=\"index\"\n >\n <tr role=\"row\">\n <td *ngFor=\"let date of row\"\n class=\"sky-datepicker-center\"\n role=\"gridcell\"\n [id]=\"date.uid\"\n >\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n >\n </sky-daypicker-cell>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2__namespace.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1552
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerComponent, decorators: [{
1277
1553
  type: i0.Component,
1278
1554
  args: [{
1279
1555
  selector: 'sky-daypicker',
1280
- templateUrl: 'daypicker.component.html',
1281
- styleUrls: ['./daypicker.component.scss']
1556
+ template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\"\n class=\"sky-daypicker-wrapper\"\n>\n <table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId+'-title'\"\n >\n <thead>\n <tr>\n <th\n class=\"sky-datepicker-header-left\"\n scope=\"col\"\n >\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\n scope=\"col\"\n [attr.colspan]=\"5\"\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]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <strong>{{title}}</strong>\n </button>\n </th>\n <th\n class=\"sky-datepicker-header-right\"\n scope=\"col\"\n >\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 <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\n [isWaiting]=\"isWaiting\"\n >\n </sky-wait>\n <ng-template\n ngFor\n [ngForOf]=\"rows\"\n let-row=\"$implicit\"\n let-index=\"index\"\n >\n <tr role=\"row\">\n <td *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",
1557
+ styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"]
1282
1558
  }]
1283
- }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
1559
+ }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { customDates: [{
1560
+ type: i0.Input
1561
+ }], calendarDateRangeChange: [{
1562
+ type: i0.Output
1563
+ }], isWaiting: [{
1564
+ type: i0.Input
1565
+ }] } });
1284
1566
 
1285
1567
  /**
1286
1568
  * @internal
@@ -1353,14 +1635,14 @@
1353
1635
  };
1354
1636
  return SkyMonthPickerComponent;
1355
1637
  }());
1356
- SkyMonthPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
1357
- SkyMonthPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0__namespace, template: "<table *ngIf=\"datepicker.datepickerMode==='month'\" role=\"grid\">\n <thead>\n <tr>\n <th\n class=\"sky-datepicker-header-left\"\n >\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></th>\n <th [attr.colspan]=\"((datepicker.monthColLimit - 2) <= 0) ? 1 : datepicker.monthColLimit - 2\">\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]=\"{'sky-btn-disabled': datepicker.datepickerMode === maxMode}\"\n tabindex=\"-1\"\n >\n <strong>{{title}}</strong>\n </button>\n </th>\n <th\n class=\"sky-datepicker-header-right\"\n >\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 <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{'sky-datepicker-current': date.current}\">{{date.label}}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1358
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyMonthPickerComponent, decorators: [{
1638
+ SkyMonthPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
1639
+ SkyMonthPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0__namespace, template: "<table *ngIf=\"datepicker.datepickerMode==='month'\" role=\"grid\">\n <thead>\n <tr>\n <th\n class=\"sky-datepicker-header-left\"\n >\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></th>\n <th [attr.colspan]=\"((datepicker.monthColLimit - 2) <= 0) ? 1 : datepicker.monthColLimit - 2\">\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]=\"{'sky-btn-disabled': datepicker.datepickerMode === maxMode}\"\n tabindex=\"-1\"\n >\n <strong>{{title}}</strong>\n </button>\n </th>\n <th\n class=\"sky-datepicker-header-right\"\n >\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 <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{'sky-datepicker-current': date.current}\">{{date.label}}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1640
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyMonthPickerComponent, decorators: [{
1359
1641
  type: i0.Component,
1360
1642
  args: [{
1361
1643
  selector: 'sky-monthpicker',
1362
- templateUrl: 'monthpicker.component.html',
1363
- styleUrls: ['./monthpicker.component.scss']
1644
+ template: "<table *ngIf=\"datepicker.datepickerMode==='month'\" role=\"grid\">\n <thead>\n <tr>\n <th\n class=\"sky-datepicker-header-left\"\n >\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></th>\n <th [attr.colspan]=\"((datepicker.monthColLimit - 2) <= 0) ? 1 : datepicker.monthColLimit - 2\">\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]=\"{'sky-btn-disabled': datepicker.datepickerMode === maxMode}\"\n tabindex=\"-1\"\n >\n <strong>{{title}}</strong>\n </button>\n </th>\n <th\n class=\"sky-datepicker-header-right\"\n >\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 <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{'sky-datepicker-current': date.current}\">{{date.label}}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n",
1645
+ styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"]
1364
1646
  }]
1365
1647
  }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
1366
1648
 
@@ -1434,14 +1716,14 @@
1434
1716
  };
1435
1717
  return SkyYearPickerComponent;
1436
1718
  }());
1437
- SkyYearPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
1438
- SkyYearPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0__namespace, template: "<table *ngIf=\"datepicker.datepickerMode==='year'\" role=\"grid\">\n <thead>\n <tr>\n <th\n class=\"sky-datepicker-header-left\"\n >\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 [attr.colspan]=\"((datepicker.yearColLimit - 2) <= 0) ? 1 : datepicker.yearColLimit - 2\">\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]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n tabindex=\"-1\"\n >\n <strong>{{title}}</strong>\n </button>\n </th>\n <th\n class=\"sky-datepicker-header-right\"\n >\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=\"sky-datepicker-row\"\n role=\"gridcell\"\n >\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span\n [ngClass]=\"{'sky-datepicker-current': date.current }\">{{date.label}}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1439
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyYearPickerComponent, decorators: [{
1719
+ SkyYearPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
1720
+ SkyYearPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0__namespace, template: "<table *ngIf=\"datepicker.datepickerMode==='year'\" role=\"grid\">\n <thead>\n <tr>\n <th\n class=\"sky-datepicker-header-left\"\n >\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 [attr.colspan]=\"((datepicker.yearColLimit - 2) <= 0) ? 1 : datepicker.yearColLimit - 2\">\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]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n tabindex=\"-1\"\n >\n <strong>{{title}}</strong>\n </button>\n </th>\n <th\n class=\"sky-datepicker-header-right\"\n >\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=\"sky-datepicker-row\"\n role=\"gridcell\"\n >\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span\n [ngClass]=\"{'sky-datepicker-current': date.current }\">{{date.label}}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1721
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyYearPickerComponent, decorators: [{
1440
1722
  type: i0.Component,
1441
1723
  args: [{
1442
1724
  selector: 'sky-yearpicker',
1443
- templateUrl: 'yearpicker.component.html',
1444
- styleUrls: ['./yearpicker.component.scss']
1725
+ template: "<table *ngIf=\"datepicker.datepickerMode==='year'\" role=\"grid\">\n <thead>\n <tr>\n <th\n class=\"sky-datepicker-header-left\"\n >\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 [attr.colspan]=\"((datepicker.yearColLimit - 2) <= 0) ? 1 : datepicker.yearColLimit - 2\">\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]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n tabindex=\"-1\"\n >\n <strong>{{title}}</strong>\n </button>\n </th>\n <th\n class=\"sky-datepicker-header-right\"\n >\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=\"sky-datepicker-row\"\n role=\"gridcell\"\n >\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span\n [ngClass]=\"{'sky-datepicker-current': date.current }\">{{date.label}}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n",
1726
+ styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"]
1445
1727
  }]
1446
1728
  }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
1447
1729
 
@@ -1453,8 +1735,9 @@
1453
1735
  this.adapter = adapter;
1454
1736
  this.config = config;
1455
1737
  this.elementRef = elementRef;
1456
- this.selectedDateChange = new i0.EventEmitter(undefined);
1738
+ this.calendarDateRangeChange = new i0.EventEmitter();
1457
1739
  this.calendarModeChange = new i0.EventEmitter();
1740
+ this.selectedDateChange = new i0.EventEmitter(undefined);
1458
1741
  this._now = new Date();
1459
1742
  this.formatter = new SkyDateFormatter();
1460
1743
  this.configureOptions();
@@ -1487,6 +1770,9 @@
1487
1770
  SkyDatepickerCalendarComponent.prototype.configureOptions = function () {
1488
1771
  Object.assign(this, this.config);
1489
1772
  };
1773
+ SkyDatepickerCalendarComponent.prototype.onCalendarDateRangeChange = function (event) {
1774
+ this.calendarDateRangeChange.next(event);
1775
+ };
1490
1776
  SkyDatepickerCalendarComponent.prototype.onCalendarModeChange = function (event) {
1491
1777
  this.calendarModeChange.emit(event);
1492
1778
  };
@@ -1511,17 +1797,21 @@
1511
1797
  };
1512
1798
  return SkyDatepickerCalendarComponent;
1513
1799
  }());
1514
- SkyDatepickerCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerAdapterService }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
1515
- SkyDatepickerCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, providers: [SkyDatepickerAdapterService], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0__namespace, template: "<div class=\"sky-datepicker-calendar\">\n <sky-datepicker-inner\n [selectedDate]=\"selectedDate\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [startingDay]=\"startingDay\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange($event)\">\n <sky-daypicker tabindex=\"0\"></sky-daypicker>\n <sky-monthpicker tabindex=\"0\"></sky-monthpicker>\n <sky-yearpicker tabindex=\"0\"></sky-yearpicker>\n </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], components: [{ type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["startingDay", "minDate", "maxDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { type: SkyDayPickerComponent, selector: "sky-daypicker" }, { type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { type: SkyYearPickerComponent, selector: "sky-yearpicker" }] });
1516
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerCalendarComponent, decorators: [{
1800
+ SkyDatepickerCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerAdapterService }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
1801
+ SkyDatepickerCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", 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__namespace, template: "<div\n class=\"sky-datepicker-calendar\"\n>\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\n tabindex=\"0\"\n ></sky-monthpicker>\n <sky-yearpicker\n tabindex=\"0\"\n ></sky-yearpicker>\n </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], components: [{ type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: ["customDates", "isWaiting"], outputs: ["calendarDateRangeChange"] }, { type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { type: SkyYearPickerComponent, selector: "sky-yearpicker" }] });
1802
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerCalendarComponent, decorators: [{
1517
1803
  type: i0.Component,
1518
1804
  args: [{
1519
1805
  selector: 'sky-datepicker-calendar',
1520
- templateUrl: './datepicker-calendar.component.html',
1521
- styleUrls: ['./datepicker-calendar.component.scss'],
1806
+ template: "<div\n class=\"sky-datepicker-calendar\"\n>\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\n tabindex=\"0\"\n ></sky-monthpicker>\n <sky-yearpicker\n tabindex=\"0\"\n ></sky-yearpicker>\n </sky-datepicker-inner>\n</div>\n",
1807
+ styles: [".sky-datepicker-calendar{display:block}\n"],
1522
1808
  providers: [SkyDatepickerAdapterService]
1523
1809
  }]
1524
- }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: SkyDatepickerConfigService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { minDate: [{
1810
+ }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: SkyDatepickerConfigService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { customDates: [{
1811
+ type: i0.Input
1812
+ }], isDaypickerWaiting: [{
1813
+ type: i0.Input
1814
+ }], minDate: [{
1525
1815
  type: i0.Input
1526
1816
  }], maxDate: [{
1527
1817
  type: i0.Input
@@ -1529,10 +1819,12 @@
1529
1819
  type: i0.Input
1530
1820
  }], startingDay: [{
1531
1821
  type: i0.Input
1532
- }], selectedDateChange: [{
1822
+ }], calendarDateRangeChange: [{
1533
1823
  type: i0.Output
1534
1824
  }], calendarModeChange: [{
1535
1825
  type: i0.Output
1826
+ }], selectedDateChange: [{
1827
+ type: i0.Output
1536
1828
  }], _datepicker: [{
1537
1829
  type: i0.ViewChild,
1538
1830
  args: [SkyDatepickerCalendarInnerComponent, {
@@ -1558,7 +1850,14 @@
1558
1850
  * Adds a class to the datepicker.
1559
1851
  */
1560
1852
  this.pickerClass = '';
1853
+ /**
1854
+ * Fires when the range of displayed dates in the calendar changes. Provides the
1855
+ * current range of displayed dates and a mutable `customDate` property consumers can use
1856
+ * to modify individual dates on the calendar.
1857
+ */
1858
+ this.calendarDateRangeChange = new i0.EventEmitter();
1561
1859
  this.dateChange = new i0.EventEmitter();
1860
+ this.isDaypickerWaiting = false;
1562
1861
  this.isOpen = false;
1563
1862
  this.isVisible = false;
1564
1863
  this.ngUnsubscribe = new rxjs.Subject();
@@ -1697,6 +1996,43 @@
1697
1996
  this.openPicker();
1698
1997
  }
1699
1998
  };
1999
+ SkyDatepickerComponent.prototype.onCalendarDateRangeChange = function (event) {
2000
+ var _this = this;
2001
+ /* istanbul ignore else */
2002
+ if (event) {
2003
+ this.cancelCustomDatesSubscription();
2004
+ var args = {
2005
+ startDate: event.startDate,
2006
+ endDate: event.endDate,
2007
+ customDates: undefined
2008
+ };
2009
+ this.calendarDateRangeChange.emit(args);
2010
+ // If consumer has added an observable to the args, watch for incoming custom dates.
2011
+ /* istanbul ignore else */
2012
+ if (args.customDates) {
2013
+ this.isDaypickerWaiting = true;
2014
+ // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
2015
+ this.changeDetector.detectChanges();
2016
+ this.customDatesSubscription = args.customDates
2017
+ .pipe(operators.debounceTime(250))
2018
+ .subscribe(function (result) {
2019
+ _this.customDates = result;
2020
+ _this.isDaypickerWaiting = false;
2021
+ // Trigger change detection in child components to show changes in the calendar.
2022
+ _this.changeDetector.markForCheck();
2023
+ });
2024
+ }
2025
+ else {
2026
+ // If consumer returns an undefined value after custom dates have
2027
+ // already ben established, remove custom dates.
2028
+ if (this.customDates) {
2029
+ this.customDates = undefined;
2030
+ // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
2031
+ this.changeDetector.detectChanges();
2032
+ }
2033
+ }
2034
+ }
2035
+ };
1700
2036
  SkyDatepickerComponent.prototype.closePicker = function () {
1701
2037
  this.destroyAffixer();
1702
2038
  this.destroyOverlay();
@@ -1788,16 +2124,22 @@
1788
2124
  }
1789
2125
  (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
1790
2126
  };
2127
+ SkyDatepickerComponent.prototype.cancelCustomDatesSubscription = function () {
2128
+ if (this.customDatesSubscription) {
2129
+ this.customDatesSubscription.unsubscribe();
2130
+ this.customDatesSubscription = undefined;
2131
+ }
2132
+ };
1791
2133
  return SkyDatepickerComponent;
1792
2134
  }());
1793
- SkyDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace$1.SkyInputBoxHostService, optional: true }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
1794
- SkyDatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: i0.ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<div\n class=\"sky-datepicker\"\n>\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div\n class=\"sky-input-group\"\n >\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\n class=\"sky-input-group-btn\"\n >\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]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\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'\"\n icon=\"calendar\"\n size=\"lg\"\n ></sky-icon>\n <sky-icon *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 [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startingDay]=\"startingDay\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n </sky-datepicker-calendar>\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["selectedDateChange", "calendarModeChange"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
1795
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerComponent, decorators: [{
2135
+ SkyDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace$1.SkyInputBoxHostService, optional: true }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
2136
+ SkyDatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", 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: i0.ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<div\n class=\"sky-datepicker\"\n>\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div\n class=\"sky-input-group\"\n >\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\n class=\"sky-input-group-btn\"\n >\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]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\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'\"\n icon=\"calendar\"\n size=\"lg\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'modern'\"\n icon=\"calendar\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"calendarId\"\n [class.sky-datepicker-hidden]=\"!isVisible\"\n #calendarRef\n >\n <sky-datepicker-calendar\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n </sky-datepicker-calendar>\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
2137
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerComponent, decorators: [{
1796
2138
  type: i0.Component,
1797
2139
  args: [{
1798
2140
  selector: 'sky-datepicker',
1799
- templateUrl: './datepicker.component.html',
1800
- styleUrls: ['./datepicker.component.scss'],
2141
+ template: "<div\n class=\"sky-datepicker\"\n>\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div\n class=\"sky-input-group\"\n >\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\n class=\"sky-input-group-btn\"\n >\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]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\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'\"\n icon=\"calendar\"\n size=\"lg\"\n ></sky-icon>\n <sky-icon *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",
2142
+ styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"],
1801
2143
  changeDetection: i0.ChangeDetectionStrategy.OnPush
1802
2144
  }]
1803
2145
  }], ctorParameters: function () {
@@ -1808,6 +2150,8 @@
1808
2150
  }] }];
1809
2151
  }, propDecorators: { pickerClass: [{
1810
2152
  type: i0.Input
2153
+ }], calendarDateRangeChange: [{
2154
+ type: i0.Output
1811
2155
  }], calendar: [{
1812
2156
  type: i0.ViewChild,
1813
2157
  args: [SkyDatepickerCalendarComponent]
@@ -2257,13 +2601,13 @@
2257
2601
  };
2258
2602
  return SkyDatepickerInputDirective;
2259
2603
  }());
2260
- SkyDatepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
2261
- SkyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.12", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
2604
+ SkyDatepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
2605
+ SkyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
2262
2606
  SKY_DATEPICKER_VALUE_ACCESSOR,
2263
2607
  SKY_DATEPICKER_VALIDATOR,
2264
2608
  SkyDatepickerAdapterService
2265
2609
  ], ngImport: i0__namespace });
2266
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerInputDirective, decorators: [{
2610
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerInputDirective, decorators: [{
2267
2611
  type: i0.Directive,
2268
2612
  args: [{
2269
2613
  selector: '[skyDatepickerInput]',
@@ -2743,12 +3087,12 @@
2743
3087
  };
2744
3088
  return SkyFuzzyDatepickerInputDirective;
2745
3089
  }());
2746
- SkyFuzzyDatepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: SkyFuzzyDateService }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
2747
- SkyFuzzyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.12", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", skyFuzzyDatepickerInput: "skyFuzzyDatepickerInput", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
3090
+ SkyFuzzyDatepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: SkyFuzzyDateService }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
3091
+ SkyFuzzyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", skyFuzzyDatepickerInput: "skyFuzzyDatepickerInput", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
2748
3092
  SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
2749
3093
  SKY_FUZZY_DATEPICKER_VALIDATOR
2750
3094
  ], ngImport: i0__namespace });
2751
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, decorators: [{
3095
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, decorators: [{
2752
3096
  type: i0.Directive,
2753
3097
  args: [{
2754
3098
  selector: '[skyFuzzyDatepickerInput]',
@@ -2795,36 +3139,44 @@
2795
3139
  }
2796
3140
  return SkyDatepickerModule;
2797
3141
  }());
2798
- SkyDatepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
2799
- SkyDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
3142
+ SkyDatepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
3143
+ SkyDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
2800
3144
  SkyDatepickerCalendarInnerComponent,
2801
3145
  SkyDayPickerComponent,
2802
3146
  SkyMonthPickerComponent,
2803
3147
  SkyYearPickerComponent,
2804
3148
  SkyDatepickerComponent,
2805
3149
  SkyDatepickerInputDirective,
2806
- SkyFuzzyDatepickerInputDirective], imports: [i3$1.CommonModule,
3150
+ SkyFuzzyDatepickerInputDirective,
3151
+ SkyDayPickerCellComponent,
3152
+ SkyDayPickerButtonComponent], imports: [i5.CommonModule,
2807
3153
  i3.SkyI18nModule,
2808
3154
  i2$2.FormsModule,
2809
3155
  i2.SkyIconModule,
2810
3156
  SkyDatetimeResourcesModule,
2811
3157
  i1.SkyAffixModule,
2812
3158
  i1.SkyOverlayModule,
2813
- i3$2.SkyThemeModule], exports: [SkyDatepickerCalendarComponent,
3159
+ i3$2.SkyThemeModule,
3160
+ i3$1.SkyPopoverModule,
3161
+ i2.SkyWaitModule], exports: [SkyDatepickerCalendarComponent,
2814
3162
  SkyDatepickerComponent,
2815
3163
  SkyDatepickerInputDirective,
2816
3164
  SkyFuzzyDatepickerInputDirective] });
2817
- SkyDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerModule, imports: [[
2818
- i3$1.CommonModule,
3165
+ SkyDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, providers: [
3166
+ SkyDatepickerService
3167
+ ], imports: [[
3168
+ i5.CommonModule,
2819
3169
  i3.SkyI18nModule,
2820
3170
  i2$2.FormsModule,
2821
3171
  i2.SkyIconModule,
2822
3172
  SkyDatetimeResourcesModule,
2823
3173
  i1.SkyAffixModule,
2824
3174
  i1.SkyOverlayModule,
2825
- i3$2.SkyThemeModule
3175
+ i3$2.SkyThemeModule,
3176
+ i3$1.SkyPopoverModule,
3177
+ i2.SkyWaitModule,
2826
3178
  ]] });
2827
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDatepickerModule, decorators: [{
3179
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, decorators: [{
2828
3180
  type: i0.NgModule,
2829
3181
  args: [{
2830
3182
  declarations: [
@@ -2835,23 +3187,30 @@
2835
3187
  SkyYearPickerComponent,
2836
3188
  SkyDatepickerComponent,
2837
3189
  SkyDatepickerInputDirective,
2838
- SkyFuzzyDatepickerInputDirective
3190
+ SkyFuzzyDatepickerInputDirective,
3191
+ SkyDayPickerCellComponent,
3192
+ SkyDayPickerButtonComponent,
2839
3193
  ],
2840
3194
  imports: [
2841
- i3$1.CommonModule,
3195
+ i5.CommonModule,
2842
3196
  i3.SkyI18nModule,
2843
3197
  i2$2.FormsModule,
2844
3198
  i2.SkyIconModule,
2845
3199
  SkyDatetimeResourcesModule,
2846
3200
  i1.SkyAffixModule,
2847
3201
  i1.SkyOverlayModule,
2848
- i3$2.SkyThemeModule
3202
+ i3$2.SkyThemeModule,
3203
+ i3$1.SkyPopoverModule,
3204
+ i2.SkyWaitModule,
2849
3205
  ],
2850
3206
  exports: [
2851
3207
  SkyDatepickerCalendarComponent,
2852
3208
  SkyDatepickerComponent,
2853
3209
  SkyDatepickerInputDirective,
2854
- SkyFuzzyDatepickerInputDirective
3210
+ SkyFuzzyDatepickerInputDirective,
3211
+ ],
3212
+ providers: [
3213
+ SkyDatepickerService
2855
3214
  ]
2856
3215
  }]
2857
3216
  }] });
@@ -3472,13 +3831,10 @@
3472
3831
  // Start the count higher than the number of available values
3473
3832
  // provided in the SkyDateRangeCalculatorId enum.
3474
3833
  SkyDateRangeService.lastId = 1000;
3475
- SkyDateRangeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDateRangeService, deps: [{ token: i3__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
3476
- SkyDateRangeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDateRangeService, providedIn: 'any' });
3477
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDateRangeService, decorators: [{
3478
- type: i0.Injectable,
3479
- args: [{
3480
- providedIn: 'any'
3481
- }]
3834
+ SkyDateRangeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangeService, deps: [{ token: i3__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
3835
+ SkyDateRangeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangeService });
3836
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangeService, decorators: [{
3837
+ type: i0.Injectable
3482
3838
  }], ctorParameters: function () { return [{ type: i3__namespace.SkyLibResourcesService }]; } });
3483
3839
 
3484
3840
  /* tslint:disable:no-forward-ref no-use-before-declare */
@@ -3946,17 +4302,17 @@
3946
4302
  };
3947
4303
  return SkyDateRangePickerComponent;
3948
4304
  }());
3949
- SkyDateRangePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDateRangePickerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2__namespace$2.FormBuilder }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i1__namespace.SkyAppWindowRef }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
3950
- SkyDateRangePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
4305
+ SkyDateRangePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2__namespace$2.FormBuilder }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i1__namespace.SkyAppWindowRef }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
4306
+ SkyDateRangePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
3951
4307
  SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
3952
4308
  SKY_DATE_RANGE_PICKER_VALIDATOR
3953
- ], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"isReady\"\n class=\"sky-date-range-picker\"\n [formGroup]=\"formGroup\"\n>\n <div\n class=\"sky-date-range-picker-form-group\"\n >\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 *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\n class=\"sky-date-range-picker-form-group\"\n [hidden]=\"!showStartDatePicker\"\n >\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\n class=\"sky-date-range-picker-form-group\"\n [hidden]=\"!showEndDatePicker\"\n >\n <sky-input-box>\n <label\n class=\"sky-control-label\"\n [attr.for]=\"dateRangePickerId + '-end-date'\"\n [ngClass]=\"{ 'sky-control-label-required' : endDateRequired }\"\n >\n {{ endDateLabelResourceKey | skyLibResources }}\n </label>\n\n <sky-datepicker>\n <input\n formControlName=\"endDate\"\n skyDatepickerInput\n [attr.aria-label]=\"endDateLabelResourceKey | skyLibResources\"\n [attr.id]=\"dateRangePickerId + '-end-date'\"\n [attr.placeholder]=\"dateFormat\"\n [dateFormat]=\"dateFormat\"\n [required]=\"endDateRequired\"\n (blur)=\"onFieldBlur()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n</div>\n", styles: [".sky-date-range-picker{display:flex;margin-left:-5px;margin-right:-5px}.sky-date-range-picker-form-group{padding-left:5px;padding-right:5px}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern .sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern .sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-lg) .sky-date-range-picker-form-group{margin:0 20px 0 0}\n"], components: [{ type: i2__namespace$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { type: i2__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
3954
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDateRangePickerComponent, decorators: [{
4309
+ ], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"isReady\"\n class=\"sky-date-range-picker\"\n [formGroup]=\"formGroup\"\n>\n <div\n class=\"sky-date-range-picker-form-group\"\n >\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 *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\n class=\"sky-date-range-picker-form-group\"\n [hidden]=\"!showStartDatePicker\"\n >\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\n class=\"sky-date-range-picker-form-group\"\n [hidden]=\"!showEndDatePicker\"\n >\n <sky-input-box>\n <label\n class=\"sky-control-label\"\n [attr.for]=\"dateRangePickerId + '-end-date'\"\n [ngClass]=\"{ 'sky-control-label-required' : endDateRequired }\"\n >\n {{ endDateLabelResourceKey | skyLibResources }}\n </label>\n\n <sky-datepicker>\n <input\n formControlName=\"endDate\"\n skyDatepickerInput\n [attr.aria-label]=\"endDateLabelResourceKey | skyLibResources\"\n [attr.id]=\"dateRangePickerId + '-end-date'\"\n [attr.placeholder]=\"dateFormat\"\n [dateFormat]=\"dateFormat\"\n [required]=\"endDateRequired\"\n (blur)=\"onFieldBlur()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n</div>\n", styles: [".sky-date-range-picker{display:flex;margin-left:-5px;margin-right:-5px}.sky-date-range-picker-form-group{padding-left:5px;padding-right:5px}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern .sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern .sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-lg) .sky-date-range-picker-form-group{margin:0 20px 0 0}\n"], components: [{ type: i2__namespace$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { type: i2__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
4310
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerComponent, decorators: [{
3955
4311
  type: i0.Component,
3956
4312
  args: [{
3957
4313
  selector: 'sky-date-range-picker',
3958
- templateUrl: './date-range-picker.component.html',
3959
- styleUrls: ['./date-range-picker.component.scss'],
4314
+ template: "<div *ngIf=\"isReady\"\n class=\"sky-date-range-picker\"\n [formGroup]=\"formGroup\"\n>\n <div\n class=\"sky-date-range-picker-form-group\"\n >\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 *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\n class=\"sky-date-range-picker-form-group\"\n [hidden]=\"!showStartDatePicker\"\n >\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\n class=\"sky-date-range-picker-form-group\"\n [hidden]=\"!showEndDatePicker\"\n >\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",
4315
+ styles: [".sky-date-range-picker{display:flex;margin-left:-5px;margin-right:-5px}.sky-date-range-picker-form-group{padding-left:5px;padding-right:5px}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern .sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern .sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-lg) .sky-date-range-picker-form-group{margin:0 20px 0 0}\n"],
3960
4316
  providers: [
3961
4317
  SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
3962
4318
  SKY_DATE_RANGE_PICKER_VALIDATOR
@@ -3986,16 +4342,16 @@
3986
4342
  }
3987
4343
  return SkyDateRangePickerModule;
3988
4344
  }());
3989
- SkyDateRangePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDateRangePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
3990
- SkyDateRangePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent], imports: [i3$1.CommonModule,
4345
+ SkyDateRangePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
4346
+ SkyDateRangePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent], imports: [i5.CommonModule,
3991
4347
  i2$2.FormsModule,
3992
4348
  i2$2.ReactiveFormsModule,
3993
4349
  i3.SkyI18nModule,
3994
4350
  SkyDatepickerModule,
3995
4351
  SkyDatetimeResourcesModule,
3996
4352
  i2$1.SkyInputBoxModule], exports: [SkyDateRangePickerComponent] });
3997
- SkyDateRangePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDateRangePickerModule, imports: [[
3998
- i3$1.CommonModule,
4353
+ SkyDateRangePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, providers: [SkyDateRangeService], imports: [[
4354
+ i5.CommonModule,
3999
4355
  i2$2.FormsModule,
4000
4356
  i2$2.ReactiveFormsModule,
4001
4357
  i3.SkyI18nModule,
@@ -4003,14 +4359,14 @@
4003
4359
  SkyDatetimeResourcesModule,
4004
4360
  i2$1.SkyInputBoxModule
4005
4361
  ]] });
4006
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyDateRangePickerModule, decorators: [{
4362
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, decorators: [{
4007
4363
  type: i0.NgModule,
4008
4364
  args: [{
4009
4365
  declarations: [
4010
4366
  SkyDateRangePickerComponent
4011
4367
  ],
4012
4368
  imports: [
4013
- i3$1.CommonModule,
4369
+ i5.CommonModule,
4014
4370
  i2$2.FormsModule,
4015
4371
  i2$2.ReactiveFormsModule,
4016
4372
  i3.SkyI18nModule,
@@ -4020,7 +4376,8 @@
4020
4376
  ],
4021
4377
  exports: [
4022
4378
  SkyDateRangePickerComponent
4023
- ]
4379
+ ],
4380
+ providers: [SkyDateRangeService]
4024
4381
  }]
4025
4382
  }] });
4026
4383
 
@@ -4233,12 +4590,12 @@
4233
4590
  };
4234
4591
  return SkyTimepickerInputDirective;
4235
4592
  }());
4236
- SkyTimepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTimepickerInputDirective, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
4237
- SkyTimepickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.12", type: SkyTimepickerInputDirective, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [
4593
+ SkyTimepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerInputDirective, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
4594
+ SkyTimepickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyTimepickerInputDirective, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [
4238
4595
  SKY_TIMEPICKER_VALUE_ACCESSOR,
4239
4596
  SKY_TIMEPICKER_VALIDATOR
4240
4597
  ], usesOnChanges: true, ngImport: i0__namespace });
4241
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTimepickerInputDirective, decorators: [{
4598
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerInputDirective, decorators: [{
4242
4599
  type: i0.Directive,
4243
4600
  args: [{
4244
4601
  selector: '[skyTimepickerInput]',
@@ -4601,14 +4958,14 @@
4601
4958
  };
4602
4959
  return SkyTimepickerComponent;
4603
4960
  }());
4604
- SkyTimepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTimepickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace$1.SkyInputBoxHostService, optional: true }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
4605
- SkyTimepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.12", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: i0.ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<div\n class=\"sky-timepicker\"\n>\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div\n class=\"sky-input-group\"\n >\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\n class=\"sky-input-group-btn\"\n >\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'\"\n icon=\"clock-o\"\n size=\"lg\"\n ></sky-icon>\n <sky-icon *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\n class=\"sky-timepicker-content\"\n >\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\n class=\"sky-timepicker-column\"\n >\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\"\n class=\"sky-timepicker-column\"\n >\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\n class=\"sky-timepicker-footer\"\n >\n <section\n class=\"sky-timepicker-column\"\n >\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;grid-column-gap:1px;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{display:none}.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
4606
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTimepickerComponent, decorators: [{
4961
+ SkyTimepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace$1.SkyInputBoxHostService, optional: true }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
4962
+ SkyTimepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: i0.ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<div\n class=\"sky-timepicker\"\n>\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div\n class=\"sky-input-group\"\n >\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\n class=\"sky-input-group-btn\"\n >\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'\"\n icon=\"clock-o\"\n size=\"lg\"\n ></sky-icon>\n <sky-icon *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\n class=\"sky-timepicker-content\"\n >\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\n class=\"sky-timepicker-column\"\n >\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\"\n class=\"sky-timepicker-column\"\n >\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\n class=\"sky-timepicker-footer\"\n >\n <section\n class=\"sky-timepicker-column\"\n >\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;grid-column-gap:1px;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{display:none}.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
4963
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerComponent, decorators: [{
4607
4964
  type: i0.Component,
4608
4965
  args: [{
4609
4966
  selector: 'sky-timepicker',
4610
- templateUrl: './timepicker.component.html',
4611
- styleUrls: ['./timepicker.component.scss'],
4967
+ template: "<div\n class=\"sky-timepicker\"\n>\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div\n class=\"sky-input-group\"\n >\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\n class=\"sky-input-group-btn\"\n >\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'\"\n icon=\"clock-o\"\n size=\"lg\"\n ></sky-icon>\n <sky-icon *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\n class=\"sky-timepicker-content\"\n >\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\n class=\"sky-timepicker-column\"\n >\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\"\n class=\"sky-timepicker-column\"\n >\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\n class=\"sky-timepicker-footer\"\n >\n <section\n class=\"sky-timepicker-column\"\n >\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",
4968
+ 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;grid-column-gap:1px;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{display:none}.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"],
4612
4969
  encapsulation: i0.ViewEncapsulation.None,
4613
4970
  changeDetection: i0.ChangeDetectionStrategy.OnPush
4614
4971
  }]
@@ -4654,9 +5011,9 @@
4654
5011
  }
4655
5012
  return SkyTimepickerModule;
4656
5013
  }());
4657
- SkyTimepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTimepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
4658
- SkyTimepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective,
4659
- SkyTimepickerComponent], imports: [i3$1.CommonModule,
5014
+ SkyTimepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
5015
+ SkyTimepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective,
5016
+ SkyTimepickerComponent], imports: [i5.CommonModule,
4660
5017
  i3.SkyI18nModule,
4661
5018
  i2.SkyIconModule,
4662
5019
  SkyDatetimeResourcesModule,
@@ -4664,8 +5021,8 @@
4664
5021
  i1.SkyOverlayModule,
4665
5022
  i3$2.SkyThemeModule], exports: [SkyTimepickerInputDirective,
4666
5023
  SkyTimepickerComponent] });
4667
- SkyTimepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTimepickerModule, imports: [[
4668
- i3$1.CommonModule,
5024
+ SkyTimepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, imports: [[
5025
+ i5.CommonModule,
4669
5026
  i3.SkyI18nModule,
4670
5027
  i2.SkyIconModule,
4671
5028
  SkyDatetimeResourcesModule,
@@ -4673,7 +5030,7 @@
4673
5030
  i1.SkyOverlayModule,
4674
5031
  i3$2.SkyThemeModule
4675
5032
  ]] });
4676
- i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.12", ngImport: i0__namespace, type: SkyTimepickerModule, decorators: [{
5033
+ i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, decorators: [{
4677
5034
  type: i0.NgModule,
4678
5035
  args: [{
4679
5036
  declarations: [
@@ -4681,7 +5038,7 @@
4681
5038
  SkyTimepickerComponent
4682
5039
  ],
4683
5040
  imports: [
4684
- i3$1.CommonModule,
5041
+ i5.CommonModule,
4685
5042
  i3.SkyI18nModule,
4686
5043
  i2.SkyIconModule,
4687
5044
  SkyDatetimeResourcesModule,