@skyux/datetime 8.0.0-alpha.1 → 8.0.0-alpha.11
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.
- package/documentation.json +1212 -1153
- package/esm2020/index.mjs +3 -2
- package/esm2020/lib/modules/date-pipe/date-pipe.module.mjs +4 -4
- package/esm2020/lib/modules/date-pipe/date.pipe.mjs +3 -3
- package/esm2020/lib/modules/date-pipe/fuzzy-date.pipe.mjs +3 -3
- package/esm2020/lib/modules/date-range-picker/date-range-picker-end-date-resource-key.pipe.mjs +3 -3
- package/esm2020/lib/modules/date-range-picker/date-range-picker-start-date-resource-key.pipe.mjs +3 -3
- package/esm2020/lib/modules/date-range-picker/date-range-picker.component.mjs +71 -71
- package/esm2020/lib/modules/date-range-picker/date-range-picker.module.mjs +4 -4
- package/esm2020/lib/modules/date-range-picker/date-range.service.mjs +3 -3
- package/esm2020/lib/modules/datepicker/datepicker-adapter.service.mjs +3 -3
- package/esm2020/lib/modules/datepicker/datepicker-calendar-inner.component.mjs +4 -4
- package/esm2020/lib/modules/datepicker/datepicker-calendar.component.mjs +11 -11
- package/esm2020/lib/modules/datepicker/datepicker-config.service.mjs +3 -3
- package/esm2020/lib/modules/datepicker/datepicker-input-fuzzy.directive.mjs +61 -61
- package/esm2020/lib/modules/datepicker/datepicker-input.directive.mjs +63 -63
- package/esm2020/lib/modules/datepicker/datepicker.component.mjs +62 -48
- package/esm2020/lib/modules/datepicker/datepicker.module.mjs +4 -4
- package/esm2020/lib/modules/datepicker/datepicker.service.mjs +3 -3
- package/esm2020/lib/modules/datepicker/daypicker-button.component.mjs +3 -3
- package/esm2020/lib/modules/datepicker/daypicker-cell.component.mjs +3 -3
- package/esm2020/lib/modules/datepicker/daypicker.component.mjs +10 -10
- package/esm2020/lib/modules/datepicker/fuzzy-date.service.mjs +3 -3
- package/esm2020/lib/modules/datepicker/monthpicker.component.mjs +3 -3
- package/esm2020/lib/modules/datepicker/yearpicker.component.mjs +3 -3
- package/esm2020/lib/modules/shared/sky-datetime-resources.module.mjs +4 -4
- package/esm2020/lib/modules/timepicker/timepicker-time-format-type.mjs +2 -0
- package/esm2020/lib/modules/timepicker/timepicker-time-output.mjs +2 -0
- package/esm2020/lib/modules/timepicker/timepicker.component.mjs +63 -49
- package/esm2020/lib/modules/timepicker/timepicker.directive.mjs +29 -29
- package/esm2020/lib/modules/timepicker/timepicker.module.mjs +4 -4
- package/fesm2015/skyux-datetime.mjs +422 -394
- package/fesm2015/skyux-datetime.mjs.map +1 -1
- package/fesm2020/skyux-datetime.mjs +423 -395
- package/fesm2020/skyux-datetime.mjs.map +1 -1
- package/index.d.ts +2 -1
- package/lib/modules/date-range-picker/types/date-range-calculator-date-range-function.d.ts +1 -1
- package/lib/modules/date-range-picker/types/date-range-calculator-validate-function.d.ts +1 -1
- package/lib/modules/datepicker/datepicker-calendar-inner.component.d.ts +2 -2
- package/lib/modules/datepicker/datepicker.component.d.ts +3 -3
- package/lib/modules/timepicker/timepicker-time-format-type.d.ts +1 -0
- package/lib/modules/timepicker/timepicker.component.d.ts +7 -6
- package/lib/modules/timepicker/timepicker.directive.d.ts +3 -2
- package/package.json +13 -13
- package/esm2020/lib/modules/timepicker/timepicker.interface.mjs +0 -2
- /package/lib/modules/timepicker/{timepicker.interface.d.ts → timepicker-time-output.d.ts} +0 -0
@@ -1,6 +1,6 @@
|
|
1
1
|
import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
|
2
2
|
import * as i0 from '@angular/core';
|
3
|
-
import { Pipe, NgModule, Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, ElementRef, TemplateRef, Optional, forwardRef, Directive, HostListener } from '@angular/core';
|
3
|
+
import { Pipe, NgModule, Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener } from '@angular/core';
|
4
4
|
import { Subject, fromEvent, BehaviorSubject, forkJoin, combineLatest } from 'rxjs';
|
5
5
|
import { takeUntil, debounceTime, distinctUntilChanged, first, map } from 'rxjs/operators';
|
6
6
|
import * as i3 from '@skyux/i18n';
|
@@ -13,7 +13,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, UntypedFormControl, Reac
|
|
13
13
|
import * as i2$1 from '@skyux/forms';
|
14
14
|
import { SkyInputBoxModule } from '@skyux/forms';
|
15
15
|
import * as i1 from '@skyux/core';
|
16
|
-
import { SkyAffixAutoFitContext, SkyAffixModule, SkyOverlayModule } from '@skyux/core';
|
16
|
+
import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyOverlayModule } from '@skyux/core';
|
17
17
|
import * as i3$1 from '@skyux/indicators';
|
18
18
|
import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
|
19
19
|
import * as i4 from '@skyux/popovers';
|
@@ -115,9 +115,9 @@ _SkyDatePipe_defaultFormat = new WeakMap(), _SkyDatePipe_format = new WeakMap(),
|
|
115
115
|
const format = __classPrivateFieldGet(this, _SkyDatePipe_format, "f") || __classPrivateFieldGet(this, _SkyDatePipe_defaultFormat, "f");
|
116
116
|
__classPrivateFieldSet(this, _SkyDatePipe_formattedValue, SkyDateFormatUtility.format(locale, __classPrivateFieldGet(this, _SkyDatePipe_value, "f"), format), "f");
|
117
117
|
};
|
118
|
-
SkyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
119
|
-
SkyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1
|
120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
118
|
+
SkyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipe, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
|
119
|
+
SkyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false });
|
120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipe, decorators: [{
|
121
121
|
type: Pipe,
|
122
122
|
args: [{
|
123
123
|
name: 'skyDate',
|
@@ -230,16 +230,16 @@ class SkyDatetimeResourcesProvider {
|
|
230
230
|
*/
|
231
231
|
class SkyDatetimeResourcesModule {
|
232
232
|
}
|
233
|
-
SkyDatetimeResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
234
|
-
SkyDatetimeResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
235
|
-
SkyDatetimeResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
233
|
+
SkyDatetimeResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
234
|
+
SkyDatetimeResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] });
|
235
|
+
SkyDatetimeResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [
|
236
236
|
{
|
237
237
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
238
238
|
useClass: SkyDatetimeResourcesProvider,
|
239
239
|
multi: true,
|
240
240
|
},
|
241
241
|
], imports: [SkyI18nModule] });
|
242
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
242
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
|
243
243
|
type: NgModule,
|
244
244
|
args: [{
|
245
245
|
exports: [SkyI18nModule],
|
@@ -629,9 +629,9 @@ _SkyFuzzyDateService_currentLocale = new WeakMap(), _SkyFuzzyDateService_ngUnsub
|
|
629
629
|
}
|
630
630
|
return true;
|
631
631
|
};
|
632
|
-
SkyFuzzyDateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
633
|
-
SkyFuzzyDateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
634
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
632
|
+
SkyFuzzyDateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable });
|
633
|
+
SkyFuzzyDateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' });
|
634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
|
635
635
|
type: Injectable,
|
636
636
|
args: [{
|
637
637
|
providedIn: 'root',
|
@@ -674,9 +674,9 @@ class SkyFuzzyDatePipe {
|
|
674
674
|
}
|
675
675
|
}
|
676
676
|
_SkyFuzzyDatePipe_fuzzyDateService = new WeakMap();
|
677
|
-
SkyFuzzyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
678
|
-
SkyFuzzyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1
|
679
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
677
|
+
SkyFuzzyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe });
|
678
|
+
SkyFuzzyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
|
679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
|
680
680
|
type: Pipe,
|
681
681
|
args: [{
|
682
682
|
name: 'skyFuzzyDate',
|
@@ -686,10 +686,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
686
686
|
|
687
687
|
class SkyDatePipeModule {
|
688
688
|
}
|
689
|
-
SkyDatePipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
690
|
-
SkyDatePipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
691
|
-
SkyDatePipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
689
|
+
SkyDatePipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
690
|
+
SkyDatePipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipeModule, declarations: [SkyDatePipe, SkyFuzzyDatePipe], imports: [CommonModule, SkyDatetimeResourcesModule], exports: [SkyDatePipe, SkyFuzzyDatePipe] });
|
691
|
+
SkyDatePipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [CommonModule, SkyDatetimeResourcesModule] });
|
692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipeModule, decorators: [{
|
693
693
|
type: NgModule,
|
694
694
|
args: [{
|
695
695
|
declarations: [SkyDatePipe, SkyFuzzyDatePipe],
|
@@ -1235,11 +1235,11 @@ _SkyDatepickerCalendarInnerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepick
|
|
1235
1235
|
}
|
1236
1236
|
return undefined;
|
1237
1237
|
};
|
1238
|
-
SkyDatepickerCalendarInnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1239
|
-
SkyDatepickerCalendarInnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1240
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1238
|
+
SkyDatepickerCalendarInnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
1239
|
+
SkyDatepickerCalendarInnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"datepickerMode\"\n class=\"sky-datepicker-calendar-inner\"\n (keydown)=\"onKeydown($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
1240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
|
1241
1241
|
type: Component,
|
1242
|
-
args: [{ selector: 'sky-datepicker-inner', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"datepickerMode\"\n class=\"sky-datepicker-calendar-inner\"\n (keydown)=\"onKeydown($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"] }]
|
1242
|
+
args: [{ selector: 'sky-datepicker-inner', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"datepickerMode\"\n class=\"sky-datepicker-calendar-inner\"\n (keydown)=\"onKeydown($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-background-color-input-selected)}.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"] }]
|
1243
1243
|
}], propDecorators: { customDates: [{
|
1244
1244
|
type: Input
|
1245
1245
|
}], startingDay: [{
|
@@ -1273,9 +1273,9 @@ class SkyDatepickerAdapterService {
|
|
1273
1273
|
}
|
1274
1274
|
}
|
1275
1275
|
_SkyDatepickerAdapterService_renderer = new WeakMap();
|
1276
|
-
SkyDatepickerAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1277
|
-
SkyDatepickerAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
1278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1276
|
+
SkyDatepickerAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
1277
|
+
SkyDatepickerAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerAdapterService });
|
1278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerAdapterService, decorators: [{
|
1279
1279
|
type: Injectable
|
1280
1280
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
|
1281
1281
|
|
@@ -1289,9 +1289,9 @@ class SkyDatepickerConfigService {
|
|
1289
1289
|
this.startingDay = 0;
|
1290
1290
|
}
|
1291
1291
|
}
|
1292
|
-
SkyDatepickerConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1293
|
-
SkyDatepickerConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
1294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1292
|
+
SkyDatepickerConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
1293
|
+
SkyDatepickerConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' });
|
1294
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
|
1295
1295
|
type: Injectable,
|
1296
1296
|
args: [{
|
1297
1297
|
providedIn: 'root',
|
@@ -1310,9 +1310,9 @@ class SkyDatepickerService {
|
|
1310
1310
|
this.keyDatePopoverStream = new Subject();
|
1311
1311
|
}
|
1312
1312
|
}
|
1313
|
-
SkyDatepickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1314
|
-
SkyDatepickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
1315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1313
|
+
SkyDatepickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
1314
|
+
SkyDatepickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerService });
|
1315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerService, decorators: [{
|
1316
1316
|
type: Injectable
|
1317
1317
|
}] });
|
1318
1318
|
|
@@ -1324,9 +1324,9 @@ class SkyDayPickerButtonComponent {
|
|
1324
1324
|
this.datepicker = datepicker;
|
1325
1325
|
}
|
1326
1326
|
}
|
1327
|
-
SkyDayPickerButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1328
|
-
SkyDayPickerButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1329
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1327
|
+
SkyDayPickerButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
|
1328
|
+
SkyDayPickerButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0, template: "<button\n *ngIf=\"date\"\n class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"date.disabled\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date),\n 'sky-datepicker-btn-disabled': date.disabled,\n 'sky-datepicker-btn-key-date': date.keyDate\n }\"\n (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n>\n <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n {{ date.label }}\n </span>\n</button>\n", styles: [".sky-datepicker-btn-disabled{font-style:italic}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:5px;width:5px;background-color:#d93a3d;border-radius:50%;left:15px;top:22px}:host-context(.sky-theme-modern) .sky-datepicker-btn-key-date:before{left:12px}.sky-theme-modern .sky-datepicker-btn-key-date:before{left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
1329
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
|
1330
1330
|
type: Component,
|
1331
1331
|
args: [{ selector: 'sky-daypicker-button', template: "<button\n *ngIf=\"date\"\n class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\n type=\"button\"\n [disabled]=\"date.disabled\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date),\n 'sky-datepicker-btn-disabled': date.disabled,\n 'sky-datepicker-btn-key-date': date.keyDate\n }\"\n (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n>\n <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n {{ date.label }}\n </span>\n</button>\n", styles: [".sky-datepicker-btn-disabled{font-style:italic}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:5px;width:5px;background-color:#d93a3d;border-radius:50%;left:15px;top:22px}:host-context(.sky-theme-modern) .sky-datepicker-btn-key-date:before{left:12px}.sky-theme-modern .sky-datepicker-btn-key-date:before{left:12px}\n"] }]
|
1332
1332
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { date: [{
|
@@ -1440,9 +1440,9 @@ _SkyDayPickerCellComponent_activeUid = new WeakMap(), _SkyDayPickerCellComponent
|
|
1440
1440
|
}, 500);
|
1441
1441
|
}
|
1442
1442
|
};
|
1443
|
-
SkyDayPickerCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1444
|
-
SkyDayPickerCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1445
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1443
|
+
SkyDayPickerCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerService }], target: i0.ɵɵFactoryTarget.Component });
|
1444
|
+
SkyDayPickerCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: "activeDateHasChanged", date: "date" }, ngImport: i0, template: "<div\n *ngIf=\"hasTooltip\"\n class=\"sky-daypicker-cell\"\n [attr.aria-label]=\"getKeyDateLabel()\"\n [skyPopover]=\"dayInfoPopover\"\n skyPopoverPlacement=\"left\"\n [skyPopoverMessageStream]=\"popoverController\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n>\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n <sky-popover\n (popoverClosed)=\"onPopoverClosed()\"\n (popoverOpened)=\"onPopoverOpened()\"\n #dayInfoPopover\n >\n <div *ngFor=\"let text of date?.keyDateText\">\n {{ text }}\n </div>\n </sky-popover>\n</div>\n<div\n *ngIf=\"!hasTooltip\"\n class=\"sky-daypicker-cell\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n>\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n</div>\n\n<ng-template #daypickerButtonTemplateRef>\n <sky-daypicker-button [date]=\"date\"> </sky-daypicker-button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { kind: "component", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
1445
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
|
1446
1446
|
type: Component,
|
1447
1447
|
args: [{ selector: 'sky-daypicker-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"hasTooltip\"\n class=\"sky-daypicker-cell\"\n [attr.aria-label]=\"getKeyDateLabel()\"\n [skyPopover]=\"dayInfoPopover\"\n skyPopoverPlacement=\"left\"\n [skyPopoverMessageStream]=\"popoverController\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n>\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n <sky-popover\n (popoverClosed)=\"onPopoverClosed()\"\n (popoverOpened)=\"onPopoverOpened()\"\n #dayInfoPopover\n >\n <div *ngFor=\"let text of date?.keyDateText\">\n {{ text }}\n </div>\n </sky-popover>\n</div>\n<div\n *ngIf=\"!hasTooltip\"\n class=\"sky-daypicker-cell\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n>\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n</div>\n\n<ng-template #daypickerButtonTemplateRef>\n <sky-daypicker-button [date]=\"date\"> </sky-daypicker-button>\n</ng-template>\n" }]
|
1448
1448
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }]; }, propDecorators: { activeDateHasChanged: [{
|
@@ -1456,6 +1456,12 @@ var _SkyDayPickerComponent_instances, _SkyDayPickerComponent_daysInMonth, _SkyDa
|
|
1456
1456
|
* @internal
|
1457
1457
|
*/
|
1458
1458
|
class SkyDayPickerComponent {
|
1459
|
+
set customDates(value) {
|
1460
|
+
/* istanbul ignore else */
|
1461
|
+
if (value) {
|
1462
|
+
__classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_applyCustomDates).call(this, value, this.rows);
|
1463
|
+
}
|
1464
|
+
}
|
1459
1465
|
constructor(datepicker) {
|
1460
1466
|
_SkyDayPickerComponent_instances.add(this);
|
1461
1467
|
this.calendarDateRangeChange = new EventEmitter();
|
@@ -1472,12 +1478,6 @@ class SkyDayPickerComponent {
|
|
1472
1478
|
_SkyDayPickerComponent_ngUnsubscribe.set(this, new Subject());
|
1473
1479
|
this.datepicker = datepicker;
|
1474
1480
|
}
|
1475
|
-
set customDates(value) {
|
1476
|
-
/* istanbul ignore else */
|
1477
|
-
if (value) {
|
1478
|
-
__classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_applyCustomDates).call(this, value, this.rows);
|
1479
|
-
}
|
1480
|
-
}
|
1481
1481
|
ngOnInit() {
|
1482
1482
|
this.datepicker.stepDay = { months: 1 };
|
1483
1483
|
__classPrivateFieldSet(this, _SkyDayPickerComponent_initialDate, this.datepicker.activeDate.getDate(), "f");
|
@@ -1646,9 +1646,9 @@ _SkyDayPickerComponent_daysInMonth = new WeakMap(), _SkyDayPickerComponent_initi
|
|
1646
1646
|
}
|
1647
1647
|
return undefined;
|
1648
1648
|
};
|
1649
|
-
SkyDayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1650
|
-
SkyDayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1651
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1649
|
+
SkyDayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
|
1650
|
+
SkyDayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\" class=\"sky-daypicker-wrapper\">\n <table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n >\n <thead>\n <tr>\n <th class=\"sky-datepicker-header-left\" scope=\"col\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n (click)=\"datepicker.moveCalendar($event, -1)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th scope=\"col\" [attr.colspan]=\"5\">\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled':\n datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\" scope=\"col\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let label of labels\"\n class=\"sky-datepicker-center sky-datepicker-weekdays\"\n >\n <small [attr.aria-label]=\"label.full\">\n <b>{{ label.abbr }}</b>\n </small>\n </th>\n </tr>\n </thead>\n <tbody>\n <!-- Wait indicator for async custom date stream -->\n <sky-wait [isWaiting]=\"isWaiting\"> </sky-wait>\n <ng-template ngFor [ngForOf]=\"rows\" let-row=\"$implicit\" let-index=\"index\">\n <tr role=\"row\">\n <td\n *ngFor=\"let date of row\"\n class=\"sky-datepicker-center\"\n role=\"gridcell\"\n [id]=\"date.uid\"\n >\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n >\n </sky-daypicker-cell>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i3$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }] });
|
1651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
|
1652
1652
|
type: Component,
|
1653
1653
|
args: [{ selector: 'sky-daypicker', template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\" class=\"sky-daypicker-wrapper\">\n <table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n >\n <thead>\n <tr>\n <th class=\"sky-datepicker-header-left\" scope=\"col\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n (click)=\"datepicker.moveCalendar($event, -1)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th scope=\"col\" [attr.colspan]=\"5\">\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled':\n datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\" scope=\"col\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let label of labels\"\n class=\"sky-datepicker-center sky-datepicker-weekdays\"\n >\n <small [attr.aria-label]=\"label.full\">\n <b>{{ label.abbr }}</b>\n </small>\n </th>\n </tr>\n </thead>\n <tbody>\n <!-- Wait indicator for async custom date stream -->\n <sky-wait [isWaiting]=\"isWaiting\"> </sky-wait>\n <ng-template ngFor [ngForOf]=\"rows\" let-row=\"$implicit\" let-index=\"index\">\n <tr role=\"row\">\n <td\n *ngFor=\"let date of row\"\n class=\"sky-datepicker-center\"\n role=\"gridcell\"\n [id]=\"date.uid\"\n >\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n >\n </sky-daypicker-cell>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"] }]
|
1654
1654
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { customDates: [{
|
@@ -1727,9 +1727,9 @@ _SkyMonthPickerComponent_instances = new WeakSet(), _SkyMonthPickerComponent_com
|
|
1727
1727
|
}
|
1728
1728
|
this.datepicker.activeDate.setMonth(date);
|
1729
1729
|
};
|
1730
|
-
SkyMonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1731
|
-
SkyMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1732
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1730
|
+
SkyMonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
|
1731
|
+
SkyMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0, template: "<table *ngIf=\"datepicker.datepickerMode === 'month'\" role=\"grid\">\n <thead>\n <tr>\n <th class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n (click)=\"datepicker.moveCalendar($event, -1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th\n [attr.colspan]=\"\n datepicker.monthColLimit - 2 <= 0 ? 1 : datepicker.monthColLimit - 2\n \"\n >\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of rows\">\n <td\n *ngFor=\"let date of row\"\n class=\"text-center\"\n role=\"gridcell\"\n id=\"{{ date.uid }}\"\n >\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] });
|
1732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
|
1733
1733
|
type: Component,
|
1734
1734
|
args: [{ selector: 'sky-monthpicker', template: "<table *ngIf=\"datepicker.datepickerMode === 'month'\" role=\"grid\">\n <thead>\n <tr>\n <th class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n (click)=\"datepicker.moveCalendar($event, -1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th\n [attr.colspan]=\"\n datepicker.monthColLimit - 2 <= 0 ? 1 : datepicker.monthColLimit - 2\n \"\n >\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of rows\">\n <td\n *ngFor=\"let date of row\"\n class=\"text-center\"\n role=\"gridcell\"\n id=\"{{ date.uid }}\"\n >\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"] }]
|
1735
1735
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
|
@@ -1808,9 +1808,9 @@ _SkyYearPickerComponent_instances = new WeakSet(), _SkyYearPickerComponent_compa
|
|
1808
1808
|
}
|
1809
1809
|
this.datepicker.activeDate.setFullYear(date);
|
1810
1810
|
};
|
1811
|
-
SkyYearPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1812
|
-
SkyYearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1813
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1811
|
+
SkyYearPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
|
1812
|
+
SkyYearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0, template: "<table *ngIf=\"datepicker.datepickerMode === 'year'\" role=\"grid\">\n <thead>\n <tr>\n <th class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n (click)=\"datepicker.moveCalendar($event, -1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th\n [attr.colspan]=\"\n datepicker.yearColLimit - 2 <= 0 ? 1 : datepicker.yearColLimit - 2\n \"\n >\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n role=\"heading\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of rows\">\n <td *ngFor=\"let date of row\" class=\"sky-datepicker-row\" role=\"gridcell\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] });
|
1813
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
|
1814
1814
|
type: Component,
|
1815
1815
|
args: [{ selector: 'sky-yearpicker', template: "<table *ngIf=\"datepicker.datepickerMode === 'year'\" role=\"grid\">\n <thead>\n <tr>\n <th class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n (click)=\"datepicker.moveCalendar($event, -1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th\n [attr.colspan]=\"\n datepicker.yearColLimit - 2 <= 0 ? 1 : datepicker.yearColLimit - 2\n \"\n >\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n role=\"heading\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of rows\">\n <td *ngFor=\"let date of row\" class=\"sky-datepicker-row\" role=\"gridcell\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"] }]
|
1816
1816
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
|
@@ -1820,6 +1820,13 @@ var _SkyDatepickerCalendarComponent_formatter, _SkyDatepickerCalendarComponent__
|
|
1820
1820
|
* @internal
|
1821
1821
|
*/
|
1822
1822
|
class SkyDatepickerCalendarComponent {
|
1823
|
+
/** starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) */
|
1824
|
+
set startingDay(start) {
|
1825
|
+
__classPrivateFieldSet(this, _SkyDatepickerCalendarComponent__startingDay, start !== null && start !== void 0 ? start : 0, "f");
|
1826
|
+
}
|
1827
|
+
get startingDay() {
|
1828
|
+
return __classPrivateFieldGet(this, _SkyDatepickerCalendarComponent__startingDay, "f");
|
1829
|
+
}
|
1823
1830
|
constructor(config) {
|
1824
1831
|
this.calendarDateRangeChange = new EventEmitter();
|
1825
1832
|
this.calendarModeChange = new EventEmitter();
|
@@ -1831,13 +1838,6 @@ class SkyDatepickerCalendarComponent {
|
|
1831
1838
|
__classPrivateFieldSet(this, _SkyDatepickerCalendarComponent_config, config, "f");
|
1832
1839
|
this.configureOptions();
|
1833
1840
|
}
|
1834
|
-
/** starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) */
|
1835
|
-
set startingDay(start) {
|
1836
|
-
__classPrivateFieldSet(this, _SkyDatepickerCalendarComponent__startingDay, start !== null && start !== void 0 ? start : 0, "f");
|
1837
|
-
}
|
1838
|
-
get startingDay() {
|
1839
|
-
return __classPrivateFieldGet(this, _SkyDatepickerCalendarComponent__startingDay, "f");
|
1840
|
-
}
|
1841
1841
|
configureOptions() {
|
1842
1842
|
Object.assign(this, __classPrivateFieldGet(this, _SkyDatepickerCalendarComponent_config, "f"));
|
1843
1843
|
}
|
@@ -1870,9 +1870,9 @@ class SkyDatepickerCalendarComponent {
|
|
1870
1870
|
}
|
1871
1871
|
}
|
1872
1872
|
_SkyDatepickerCalendarComponent_formatter = new WeakMap(), _SkyDatepickerCalendarComponent__startingDay = new WeakMap(), _SkyDatepickerCalendarComponent_config = new WeakMap();
|
1873
|
-
SkyDatepickerCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1874
|
-
SkyDatepickerCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1875
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1873
|
+
SkyDatepickerCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerConfigService }], target: i0.ɵɵFactoryTarget.Component });
|
1874
|
+
SkyDatepickerCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: { customDates: "customDates", isDaypickerWaiting: "isDaypickerWaiting", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", calendarModeChange: "calendarModeChange", selectedDateChange: "selectedDateChange" }, providers: [SkyDatepickerAdapterService], viewQueries: [{ propertyName: "datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker-calendar\">\n <sky-datepicker-inner\n [customDates]=\"customDates\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selectedDate]=\"selectedDate\"\n [startingDay]=\"startingDay\"\n (calendarModeChange)=\"onCalendarModeChange($event)\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n <sky-daypicker\n tabindex=\"0\"\n [customDates]=\"customDates\"\n [isWaiting]=\"isDaypickerWaiting\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n ></sky-daypicker>\n <sky-monthpicker tabindex=\"0\"></sky-monthpicker>\n <sky-yearpicker tabindex=\"0\"></sky-yearpicker>\n </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], dependencies: [{ kind: "component", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { kind: "component", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: ["customDates", "isWaiting"], outputs: ["calendarDateRangeChange"] }, { kind: "component", type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { kind: "component", type: SkyYearPickerComponent, selector: "sky-yearpicker" }] });
|
1875
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
|
1876
1876
|
type: Component,
|
1877
1877
|
args: [{ selector: 'sky-datepicker-calendar', providers: [SkyDatepickerAdapterService], template: "<div class=\"sky-datepicker-calendar\">\n <sky-datepicker-inner\n [customDates]=\"customDates\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selectedDate]=\"selectedDate\"\n [startingDay]=\"startingDay\"\n (calendarModeChange)=\"onCalendarModeChange($event)\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n <sky-daypicker\n tabindex=\"0\"\n [customDates]=\"customDates\"\n [isWaiting]=\"isDaypickerWaiting\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n ></sky-daypicker>\n <sky-monthpicker tabindex=\"0\"></sky-monthpicker>\n <sky-yearpicker tabindex=\"0\"></sky-yearpicker>\n </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"] }]
|
1878
1878
|
}], ctorParameters: function () { return [{ type: SkyDatepickerConfigService }]; }, propDecorators: { customDates: [{
|
@@ -1901,14 +1901,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
1901
1901
|
}]
|
1902
1902
|
}] } });
|
1903
1903
|
|
1904
|
-
var _SkyDatepickerComponent_instances, _SkyDatepickerComponent_affixer, _SkyDatepickerComponent_calendarUnsubscribe, _SkyDatepickerComponent_customDatesSubscription, _SkyDatepickerComponent_ngUnsubscribe, _SkyDatepickerComponent_overlay, _SkyDatepickerComponent_overlayKeydownListener, _SkyDatepickerComponent__calendarRef, _SkyDatepickerComponent__disabled, _SkyDatepickerComponent__selectedDate, _SkyDatepickerComponent_affixService, _SkyDatepickerComponent_changeDetector, _SkyDatepickerComponent_coreAdapter, _SkyDatepickerComponent_overlayService, _SkyDatepickerComponent_closePicker, _SkyDatepickerComponent_openPicker, _SkyDatepickerComponent_createAffixer, _SkyDatepickerComponent_destroyAffixer, _SkyDatepickerComponent_createOverlay, _SkyDatepickerComponent_destroyOverlay, _SkyDatepickerComponent_addKeydownListener, _SkyDatepickerComponent_removePickerEventListeners, _SkyDatepickerComponent_cancelCustomDatesSubscription;
|
1904
|
+
var _SkyDatepickerComponent_instances, _SkyDatepickerComponent_affixer, _SkyDatepickerComponent_calendarUnsubscribe, _SkyDatepickerComponent_customDatesSubscription, _SkyDatepickerComponent_ngUnsubscribe, _SkyDatepickerComponent_overlay, _SkyDatepickerComponent_overlayKeydownListener, _SkyDatepickerComponent__calendarRef, _SkyDatepickerComponent__disabled, _SkyDatepickerComponent__selectedDate, _SkyDatepickerComponent_affixService, _SkyDatepickerComponent_changeDetector, _SkyDatepickerComponent_coreAdapter, _SkyDatepickerComponent_overlayService, _SkyDatepickerComponent_zIndex, _SkyDatepickerComponent_closePicker, _SkyDatepickerComponent_openPicker, _SkyDatepickerComponent_createAffixer, _SkyDatepickerComponent_destroyAffixer, _SkyDatepickerComponent_createOverlay, _SkyDatepickerComponent_destroyOverlay, _SkyDatepickerComponent_addKeydownListener, _SkyDatepickerComponent_removePickerEventListeners, _SkyDatepickerComponent_cancelCustomDatesSubscription;
|
1905
1905
|
let nextId$1 = 0;
|
1906
1906
|
/**
|
1907
1907
|
* Creates the datepicker button and calendar.
|
1908
1908
|
* You must wrap this component around an input with the `skyDatepickerInput` directive.
|
1909
1909
|
*/
|
1910
1910
|
class SkyDatepickerComponent {
|
1911
|
-
|
1911
|
+
get disabled() {
|
1912
|
+
return __classPrivateFieldGet(this, _SkyDatepickerComponent__disabled, "f");
|
1913
|
+
}
|
1914
|
+
set disabled(value) {
|
1915
|
+
__classPrivateFieldSet(this, _SkyDatepickerComponent__disabled, value, "f");
|
1916
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
|
1917
|
+
}
|
1918
|
+
set selectedDate(value) {
|
1919
|
+
__classPrivateFieldSet(this, _SkyDatepickerComponent__selectedDate, value, "f");
|
1920
|
+
if (this.calendar) {
|
1921
|
+
this.calendar.writeValue(value);
|
1922
|
+
}
|
1923
|
+
}
|
1924
|
+
get selectedDate() {
|
1925
|
+
return __classPrivateFieldGet(this, _SkyDatepickerComponent__selectedDate, "f");
|
1926
|
+
}
|
1927
|
+
set calendarRef(value) {
|
1928
|
+
if (value) {
|
1929
|
+
__classPrivateFieldSet(this, _SkyDatepickerComponent__calendarRef, value, "f");
|
1930
|
+
// Wait for the calendar component to render before gauging dimensions.
|
1931
|
+
setTimeout(() => {
|
1932
|
+
var _a;
|
1933
|
+
if (this.calendarRef) {
|
1934
|
+
(_a = this.calendar) === null || _a === void 0 ? void 0 : _a.writeValue(this.selectedDate);
|
1935
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
|
1936
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_createAffixer).call(this);
|
1937
|
+
setTimeout(() => {
|
1938
|
+
if (this.calendarRef) {
|
1939
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_coreAdapter, "f").getFocusableChildrenAndApplyFocus(this.calendarRef, '.sky-datepicker-calendar-inner', false);
|
1940
|
+
this.isVisible = true;
|
1941
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
|
1942
|
+
}
|
1943
|
+
});
|
1944
|
+
}
|
1945
|
+
});
|
1946
|
+
}
|
1947
|
+
}
|
1948
|
+
get calendarRef() {
|
1949
|
+
return __classPrivateFieldGet(this, _SkyDatepickerComponent__calendarRef, "f");
|
1950
|
+
}
|
1951
|
+
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
|
1912
1952
|
this.inputBoxHostService = inputBoxHostService;
|
1913
1953
|
_SkyDatepickerComponent_instances.add(this);
|
1914
1954
|
/**
|
@@ -1939,6 +1979,7 @@ class SkyDatepickerComponent {
|
|
1939
1979
|
_SkyDatepickerComponent_changeDetector.set(this, void 0);
|
1940
1980
|
_SkyDatepickerComponent_coreAdapter.set(this, void 0);
|
1941
1981
|
_SkyDatepickerComponent_overlayService.set(this, void 0);
|
1982
|
+
_SkyDatepickerComponent_zIndex.set(this, void 0);
|
1942
1983
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_affixService, affixService, "f");
|
1943
1984
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_changeDetector, changeDetector, "f");
|
1944
1985
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_coreAdapter, coreAdapter, "f");
|
@@ -1946,51 +1987,12 @@ class SkyDatepickerComponent {
|
|
1946
1987
|
const uniqueId = nextId$1++;
|
1947
1988
|
this.calendarId = `sky-datepicker-calendar-${uniqueId}`;
|
1948
1989
|
this.triggerButtonId = `sky-datepicker-button-${uniqueId}`;
|
1990
|
+
__classPrivateFieldSet(this, _SkyDatepickerComponent_zIndex, stackingContext === null || stackingContext === void 0 ? void 0 : stackingContext.zIndex, "f");
|
1949
1991
|
// Update icons when theme changes.
|
1950
1992
|
themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f"))).subscribe(() => {
|
1951
1993
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
|
1952
1994
|
});
|
1953
1995
|
}
|
1954
|
-
get disabled() {
|
1955
|
-
return __classPrivateFieldGet(this, _SkyDatepickerComponent__disabled, "f");
|
1956
|
-
}
|
1957
|
-
set disabled(value) {
|
1958
|
-
__classPrivateFieldSet(this, _SkyDatepickerComponent__disabled, value, "f");
|
1959
|
-
__classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
|
1960
|
-
}
|
1961
|
-
set selectedDate(value) {
|
1962
|
-
__classPrivateFieldSet(this, _SkyDatepickerComponent__selectedDate, value, "f");
|
1963
|
-
if (this.calendar) {
|
1964
|
-
this.calendar.writeValue(value);
|
1965
|
-
}
|
1966
|
-
}
|
1967
|
-
get selectedDate() {
|
1968
|
-
return __classPrivateFieldGet(this, _SkyDatepickerComponent__selectedDate, "f");
|
1969
|
-
}
|
1970
|
-
set calendarRef(value) {
|
1971
|
-
if (value) {
|
1972
|
-
__classPrivateFieldSet(this, _SkyDatepickerComponent__calendarRef, value, "f");
|
1973
|
-
// Wait for the calendar component to render before gauging dimensions.
|
1974
|
-
setTimeout(() => {
|
1975
|
-
var _a;
|
1976
|
-
if (this.calendarRef) {
|
1977
|
-
(_a = this.calendar) === null || _a === void 0 ? void 0 : _a.writeValue(this.selectedDate);
|
1978
|
-
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
|
1979
|
-
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_createAffixer).call(this);
|
1980
|
-
setTimeout(() => {
|
1981
|
-
if (this.calendarRef) {
|
1982
|
-
__classPrivateFieldGet(this, _SkyDatepickerComponent_coreAdapter, "f").getFocusableChildrenAndApplyFocus(this.calendarRef, '.sky-datepicker-calendar-inner', false);
|
1983
|
-
this.isVisible = true;
|
1984
|
-
__classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
|
1985
|
-
}
|
1986
|
-
});
|
1987
|
-
}
|
1988
|
-
});
|
1989
|
-
}
|
1990
|
-
}
|
1991
|
-
get calendarRef() {
|
1992
|
-
return __classPrivateFieldGet(this, _SkyDatepickerComponent__calendarRef, "f");
|
1993
|
-
}
|
1994
1996
|
ngOnInit() {
|
1995
1997
|
if (this.inputBoxHostService && this.inputTemplateRef) {
|
1996
1998
|
this.inputBoxHostService.populate({
|
@@ -2063,7 +2065,7 @@ class SkyDatepickerComponent {
|
|
2063
2065
|
}
|
2064
2066
|
}
|
2065
2067
|
}
|
2066
|
-
_SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calendarUnsubscribe = new WeakMap(), _SkyDatepickerComponent_customDatesSubscription = new WeakMap(), _SkyDatepickerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepickerComponent_overlay = new WeakMap(), _SkyDatepickerComponent_overlayKeydownListener = new WeakMap(), _SkyDatepickerComponent__calendarRef = new WeakMap(), _SkyDatepickerComponent__disabled = new WeakMap(), _SkyDatepickerComponent__selectedDate = new WeakMap(), _SkyDatepickerComponent_affixService = new WeakMap(), _SkyDatepickerComponent_changeDetector = new WeakMap(), _SkyDatepickerComponent_coreAdapter = new WeakMap(), _SkyDatepickerComponent_overlayService = new WeakMap(), _SkyDatepickerComponent_instances = new WeakSet(), _SkyDatepickerComponent_closePicker = function _SkyDatepickerComponent_closePicker() {
|
2068
|
+
_SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calendarUnsubscribe = new WeakMap(), _SkyDatepickerComponent_customDatesSubscription = new WeakMap(), _SkyDatepickerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepickerComponent_overlay = new WeakMap(), _SkyDatepickerComponent_overlayKeydownListener = new WeakMap(), _SkyDatepickerComponent__calendarRef = new WeakMap(), _SkyDatepickerComponent__disabled = new WeakMap(), _SkyDatepickerComponent__selectedDate = new WeakMap(), _SkyDatepickerComponent_affixService = new WeakMap(), _SkyDatepickerComponent_changeDetector = new WeakMap(), _SkyDatepickerComponent_coreAdapter = new WeakMap(), _SkyDatepickerComponent_overlayService = new WeakMap(), _SkyDatepickerComponent_zIndex = new WeakMap(), _SkyDatepickerComponent_instances = new WeakSet(), _SkyDatepickerComponent_closePicker = function _SkyDatepickerComponent_closePicker() {
|
2067
2069
|
var _a;
|
2068
2070
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
|
2069
2071
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyOverlay).call(this);
|
@@ -2110,6 +2112,13 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
|
|
2110
2112
|
enableClose: false,
|
2111
2113
|
enablePointerEvents: false,
|
2112
2114
|
});
|
2115
|
+
if (__classPrivateFieldGet(this, _SkyDatepickerComponent_zIndex, "f")) {
|
2116
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_zIndex, "f")
|
2117
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f")))
|
2118
|
+
.subscribe((zIndex) => {
|
2119
|
+
overlay.componentRef.instance.zIndex = zIndex.toString(10);
|
2120
|
+
});
|
2121
|
+
}
|
2113
2122
|
overlay.backdropClick
|
2114
2123
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f")))
|
2115
2124
|
.subscribe(() => {
|
@@ -2150,9 +2159,9 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
|
|
2150
2159
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_customDatesSubscription, undefined, "f");
|
2151
2160
|
}
|
2152
2161
|
};
|
2153
|
-
SkyDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
2154
|
-
SkyDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
2155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
2162
|
+
SkyDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$1.SkyInputBoxHostService, optional: true }, { token: i3$2.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
2163
|
+
SkyDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? calendarId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"\n 'skyux_datepicker_trigger_button_label' | skyLibResources\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"calendar\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"calendar\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"calendarId\"\n [class.sky-datepicker-hidden]=\"!isVisible\"\n #calendarRef\n >\n <sky-datepicker-calendar\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n </sky-datepicker-calendar>\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
2164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
|
2156
2165
|
type: Component,
|
2157
2166
|
args: [{ selector: 'sky-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-datepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? calendarId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"\n 'skyux_datepicker_trigger_button_label' | skyLibResources\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"calendar\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"calendar\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"calendarId\"\n [class.sky-datepicker-hidden]=\"!isVisible\"\n #calendarRef\n >\n <sky-datepicker-calendar\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n </sky-datepicker-calendar>\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"] }]
|
2158
2167
|
}], ctorParameters: function () {
|
@@ -2160,6 +2169,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
2160
2169
|
type: Optional
|
2161
2170
|
}] }, { type: i3$2.SkyThemeService, decorators: [{
|
2162
2171
|
type: Optional
|
2172
|
+
}] }, { type: undefined, decorators: [{
|
2173
|
+
type: Optional
|
2174
|
+
}, {
|
2175
|
+
type: Inject,
|
2176
|
+
args: [SKY_STACKING_CONTEXT]
|
2163
2177
|
}] }];
|
2164
2178
|
}, propDecorators: { pickerClass: [{
|
2165
2179
|
type: Input
|
@@ -2209,63 +2223,6 @@ const SKY_FUZZY_DATEPICKER_VALIDATOR = {
|
|
2209
2223
|
multi: true,
|
2210
2224
|
};
|
2211
2225
|
class SkyFuzzyDatepickerInputDirective {
|
2212
|
-
constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, resourcesService, datepickerComponent) {
|
2213
|
-
_SkyFuzzyDatepickerInputDirective_instances.add(this);
|
2214
|
-
/**
|
2215
|
-
* Whether to disable date validation on the fuzzy datepicker input.
|
2216
|
-
* @default false
|
2217
|
-
*/
|
2218
|
-
this.skyDatepickerNoValidate = false;
|
2219
|
-
_SkyFuzzyDatepickerInputDirective_control.set(this, void 0);
|
2220
|
-
_SkyFuzzyDatepickerInputDirective_dateFormatter.set(this, new SkyDateFormatter());
|
2221
|
-
_SkyFuzzyDatepickerInputDirective_locale.set(this, void 0);
|
2222
|
-
_SkyFuzzyDatepickerInputDirective_preferredShortDateFormat.set(this, void 0);
|
2223
|
-
_SkyFuzzyDatepickerInputDirective_ngUnsubscribe.set(this, new Subject());
|
2224
|
-
_SkyFuzzyDatepickerInputDirective__futureDisabled.set(this, false);
|
2225
|
-
_SkyFuzzyDatepickerInputDirective__dateFormat.set(this, void 0);
|
2226
|
-
_SkyFuzzyDatepickerInputDirective__disabled.set(this, false);
|
2227
|
-
_SkyFuzzyDatepickerInputDirective__maxDate.set(this, void 0);
|
2228
|
-
_SkyFuzzyDatepickerInputDirective__minDate.set(this, void 0);
|
2229
|
-
_SkyFuzzyDatepickerInputDirective__startingDay.set(this, void 0);
|
2230
|
-
_SkyFuzzyDatepickerInputDirective__value.set(this, void 0);
|
2231
|
-
_SkyFuzzyDatepickerInputDirective__yearRequired.set(this, false);
|
2232
|
-
_SkyFuzzyDatepickerInputDirective_changeDetector.set(this, void 0);
|
2233
|
-
_SkyFuzzyDatepickerInputDirective_configService.set(this, void 0);
|
2234
|
-
_SkyFuzzyDatepickerInputDirective_elementRef.set(this, void 0);
|
2235
|
-
_SkyFuzzyDatepickerInputDirective_fuzzyDateService.set(this, void 0);
|
2236
|
-
_SkyFuzzyDatepickerInputDirective_renderer.set(this, void 0);
|
2237
|
-
_SkyFuzzyDatepickerInputDirective_resourcesService.set(this, void 0);
|
2238
|
-
_SkyFuzzyDatepickerInputDirective_datepickerComponent.set(this, void 0);
|
2239
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2240
|
-
// istanbul ignore next
|
2241
|
-
_SkyFuzzyDatepickerInputDirective_onChange.set(this, (_) => { });
|
2242
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2243
|
-
// istanbul ignore next
|
2244
|
-
_SkyFuzzyDatepickerInputDirective_onTouched.set(this, () => { });
|
2245
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2246
|
-
// istanbul ignore next
|
2247
|
-
_SkyFuzzyDatepickerInputDirective_onValidatorChange.set(this, () => { });
|
2248
|
-
if (!datepickerComponent) {
|
2249
|
-
throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
|
2250
|
-
'`<sky-datepicker>` component!');
|
2251
|
-
}
|
2252
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_changeDetector, changeDetector, "f");
|
2253
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_configService, configService, "f");
|
2254
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_elementRef, elementRef, "f");
|
2255
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, fuzzyDateService, "f");
|
2256
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_renderer, renderer, "f");
|
2257
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_resourcesService, resourcesService, "f");
|
2258
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, datepickerComponent, "f");
|
2259
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_locale, localeProvider.defaultLocale, "f");
|
2260
|
-
localeProvider
|
2261
|
-
.getLocaleInfo()
|
2262
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_ngUnsubscribe, "f")))
|
2263
|
-
.subscribe((localeInfo) => {
|
2264
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_locale, localeInfo.locale, "f");
|
2265
|
-
SkyDateFormatter.setLocale(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_locale, "f"));
|
2266
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
|
2267
|
-
});
|
2268
|
-
}
|
2269
2226
|
/**
|
2270
2227
|
* The date format for the input. Place this attribute on the `input` element
|
2271
2228
|
* to override the default in `SkyDatepickerConfigService`.
|
@@ -2363,6 +2320,63 @@ class SkyFuzzyDatepickerInputDirective {
|
|
2363
2320
|
get yearRequired() {
|
2364
2321
|
return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__yearRequired, "f");
|
2365
2322
|
}
|
2323
|
+
constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, resourcesService, datepickerComponent) {
|
2324
|
+
_SkyFuzzyDatepickerInputDirective_instances.add(this);
|
2325
|
+
/**
|
2326
|
+
* Whether to disable date validation on the fuzzy datepicker input.
|
2327
|
+
* @default false
|
2328
|
+
*/
|
2329
|
+
this.skyDatepickerNoValidate = false;
|
2330
|
+
_SkyFuzzyDatepickerInputDirective_control.set(this, void 0);
|
2331
|
+
_SkyFuzzyDatepickerInputDirective_dateFormatter.set(this, new SkyDateFormatter());
|
2332
|
+
_SkyFuzzyDatepickerInputDirective_locale.set(this, void 0);
|
2333
|
+
_SkyFuzzyDatepickerInputDirective_preferredShortDateFormat.set(this, void 0);
|
2334
|
+
_SkyFuzzyDatepickerInputDirective_ngUnsubscribe.set(this, new Subject());
|
2335
|
+
_SkyFuzzyDatepickerInputDirective__futureDisabled.set(this, false);
|
2336
|
+
_SkyFuzzyDatepickerInputDirective__dateFormat.set(this, void 0);
|
2337
|
+
_SkyFuzzyDatepickerInputDirective__disabled.set(this, false);
|
2338
|
+
_SkyFuzzyDatepickerInputDirective__maxDate.set(this, void 0);
|
2339
|
+
_SkyFuzzyDatepickerInputDirective__minDate.set(this, void 0);
|
2340
|
+
_SkyFuzzyDatepickerInputDirective__startingDay.set(this, void 0);
|
2341
|
+
_SkyFuzzyDatepickerInputDirective__value.set(this, void 0);
|
2342
|
+
_SkyFuzzyDatepickerInputDirective__yearRequired.set(this, false);
|
2343
|
+
_SkyFuzzyDatepickerInputDirective_changeDetector.set(this, void 0);
|
2344
|
+
_SkyFuzzyDatepickerInputDirective_configService.set(this, void 0);
|
2345
|
+
_SkyFuzzyDatepickerInputDirective_elementRef.set(this, void 0);
|
2346
|
+
_SkyFuzzyDatepickerInputDirective_fuzzyDateService.set(this, void 0);
|
2347
|
+
_SkyFuzzyDatepickerInputDirective_renderer.set(this, void 0);
|
2348
|
+
_SkyFuzzyDatepickerInputDirective_resourcesService.set(this, void 0);
|
2349
|
+
_SkyFuzzyDatepickerInputDirective_datepickerComponent.set(this, void 0);
|
2350
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2351
|
+
// istanbul ignore next
|
2352
|
+
_SkyFuzzyDatepickerInputDirective_onChange.set(this, (_) => { });
|
2353
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2354
|
+
// istanbul ignore next
|
2355
|
+
_SkyFuzzyDatepickerInputDirective_onTouched.set(this, () => { });
|
2356
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2357
|
+
// istanbul ignore next
|
2358
|
+
_SkyFuzzyDatepickerInputDirective_onValidatorChange.set(this, () => { });
|
2359
|
+
if (!datepickerComponent) {
|
2360
|
+
throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
|
2361
|
+
'`<sky-datepicker>` component!');
|
2362
|
+
}
|
2363
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_changeDetector, changeDetector, "f");
|
2364
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_configService, configService, "f");
|
2365
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_elementRef, elementRef, "f");
|
2366
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, fuzzyDateService, "f");
|
2367
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_renderer, renderer, "f");
|
2368
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_resourcesService, resourcesService, "f");
|
2369
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, datepickerComponent, "f");
|
2370
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_locale, localeProvider.defaultLocale, "f");
|
2371
|
+
localeProvider
|
2372
|
+
.getLocaleInfo()
|
2373
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_ngUnsubscribe, "f")))
|
2374
|
+
.subscribe((localeInfo) => {
|
2375
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_locale, localeInfo.locale, "f");
|
2376
|
+
SkyDateFormatter.setLocale(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_locale, "f"));
|
2377
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
|
2378
|
+
});
|
2379
|
+
}
|
2366
2380
|
ngOnInit() {
|
2367
2381
|
var _a;
|
2368
2382
|
if (this.yearRequired) {
|
@@ -2609,12 +2623,12 @@ _SkyFuzzyDatepickerInputDirective_control = new WeakMap(), _SkyFuzzyDatepickerIn
|
|
2609
2623
|
}
|
2610
2624
|
__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_setInputElementValue).call(this, formattedDate || '');
|
2611
2625
|
};
|
2612
|
-
SkyFuzzyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
2613
|
-
SkyFuzzyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1
|
2626
|
+
SkyFuzzyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
2627
|
+
SkyFuzzyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [
|
2614
2628
|
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
2615
2629
|
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
2616
2630
|
], ngImport: i0 });
|
2617
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
2631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
|
2618
2632
|
type: Directive,
|
2619
2633
|
args: [{
|
2620
2634
|
selector: '[skyFuzzyDatepickerInput]',
|
@@ -2666,65 +2680,6 @@ const SKY_DATEPICKER_VALIDATOR = {
|
|
2666
2680
|
multi: true,
|
2667
2681
|
};
|
2668
2682
|
class SkyDatepickerInputDirective {
|
2669
|
-
constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
|
2670
|
-
_SkyDatepickerInputDirective_instances.add(this);
|
2671
|
-
/**
|
2672
|
-
* Whether to disable date validation on the datepicker input.
|
2673
|
-
* @default false
|
2674
|
-
*/
|
2675
|
-
this.skyDatepickerNoValidate = false;
|
2676
|
-
_SkyDatepickerInputDirective_control.set(this, void 0);
|
2677
|
-
_SkyDatepickerInputDirective_dateFormatter.set(this, new SkyDateFormatter());
|
2678
|
-
_SkyDatepickerInputDirective_initialPlaceholder.set(this, void 0);
|
2679
|
-
_SkyDatepickerInputDirective_preferredShortDateFormat.set(this, void 0);
|
2680
|
-
_SkyDatepickerInputDirective_ngUnsubscribe.set(this, new Subject());
|
2681
|
-
_SkyDatepickerInputDirective__dateFormat.set(this, void 0);
|
2682
|
-
_SkyDatepickerInputDirective__disabled.set(this, false);
|
2683
|
-
_SkyDatepickerInputDirective__maxDate.set(this, void 0);
|
2684
|
-
_SkyDatepickerInputDirective__minDate.set(this, void 0);
|
2685
|
-
_SkyDatepickerInputDirective__startingDay.set(this, void 0);
|
2686
|
-
_SkyDatepickerInputDirective__strict.set(this, false);
|
2687
|
-
_SkyDatepickerInputDirective__value.set(this, void 0);
|
2688
|
-
_SkyDatepickerInputDirective_adapter.set(this, void 0);
|
2689
|
-
_SkyDatepickerInputDirective_changeDetector.set(this, void 0);
|
2690
|
-
_SkyDatepickerInputDirective_configService.set(this, void 0);
|
2691
|
-
_SkyDatepickerInputDirective_elementRef.set(this, void 0);
|
2692
|
-
_SkyDatepickerInputDirective_localeProvider.set(this, void 0);
|
2693
|
-
_SkyDatepickerInputDirective_renderer.set(this, void 0);
|
2694
|
-
_SkyDatepickerInputDirective_resourcesService.set(this, void 0);
|
2695
|
-
_SkyDatepickerInputDirective_datepickerComponent.set(this, void 0);
|
2696
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2697
|
-
// istanbul ignore next
|
2698
|
-
_SkyDatepickerInputDirective_onChange.set(this, (_) => { });
|
2699
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2700
|
-
// istanbul ignore next
|
2701
|
-
_SkyDatepickerInputDirective_onTouched.set(this, () => { });
|
2702
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2703
|
-
// istanbul ignore next
|
2704
|
-
_SkyDatepickerInputDirective_onValidatorChange.set(this, () => { });
|
2705
|
-
if (!datepickerComponent) {
|
2706
|
-
throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
|
2707
|
-
'`<sky-datepicker>` component!');
|
2708
|
-
}
|
2709
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_adapter, adapter, "f");
|
2710
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_changeDetector, changeDetector, "f");
|
2711
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_configService, configService, "f");
|
2712
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_elementRef, elementRef, "f");
|
2713
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_localeProvider, localeProvider, "f");
|
2714
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_renderer, renderer, "f");
|
2715
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_resourcesService, resourcesService, "f");
|
2716
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_datepickerComponent, datepickerComponent, "f");
|
2717
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_initialPlaceholder, __classPrivateFieldGet(this, _SkyDatepickerInputDirective_adapter, "f").getPlaceholder(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f")), "f");
|
2718
|
-
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_updatePlaceholder).call(this);
|
2719
|
-
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_localeProvider, "f")
|
2720
|
-
.getLocaleInfo()
|
2721
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_ngUnsubscribe, "f")))
|
2722
|
-
.subscribe((localeInfo) => {
|
2723
|
-
SkyDateFormatter.setLocale(localeInfo.locale);
|
2724
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
|
2725
|
-
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_applyDateFormat).call(this);
|
2726
|
-
});
|
2727
|
-
}
|
2728
2683
|
/**
|
2729
2684
|
* The date format for the input. Place this attribute on the `input` element
|
2730
2685
|
* to override the default in the `SkyDatepickerConfigService`.
|
@@ -2825,6 +2780,65 @@ class SkyDatepickerInputDirective {
|
|
2825
2780
|
get strict() {
|
2826
2781
|
return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__strict, "f");
|
2827
2782
|
}
|
2783
|
+
constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
|
2784
|
+
_SkyDatepickerInputDirective_instances.add(this);
|
2785
|
+
/**
|
2786
|
+
* Whether to disable date validation on the datepicker input.
|
2787
|
+
* @default false
|
2788
|
+
*/
|
2789
|
+
this.skyDatepickerNoValidate = false;
|
2790
|
+
_SkyDatepickerInputDirective_control.set(this, void 0);
|
2791
|
+
_SkyDatepickerInputDirective_dateFormatter.set(this, new SkyDateFormatter());
|
2792
|
+
_SkyDatepickerInputDirective_initialPlaceholder.set(this, void 0);
|
2793
|
+
_SkyDatepickerInputDirective_preferredShortDateFormat.set(this, void 0);
|
2794
|
+
_SkyDatepickerInputDirective_ngUnsubscribe.set(this, new Subject());
|
2795
|
+
_SkyDatepickerInputDirective__dateFormat.set(this, void 0);
|
2796
|
+
_SkyDatepickerInputDirective__disabled.set(this, false);
|
2797
|
+
_SkyDatepickerInputDirective__maxDate.set(this, void 0);
|
2798
|
+
_SkyDatepickerInputDirective__minDate.set(this, void 0);
|
2799
|
+
_SkyDatepickerInputDirective__startingDay.set(this, void 0);
|
2800
|
+
_SkyDatepickerInputDirective__strict.set(this, false);
|
2801
|
+
_SkyDatepickerInputDirective__value.set(this, void 0);
|
2802
|
+
_SkyDatepickerInputDirective_adapter.set(this, void 0);
|
2803
|
+
_SkyDatepickerInputDirective_changeDetector.set(this, void 0);
|
2804
|
+
_SkyDatepickerInputDirective_configService.set(this, void 0);
|
2805
|
+
_SkyDatepickerInputDirective_elementRef.set(this, void 0);
|
2806
|
+
_SkyDatepickerInputDirective_localeProvider.set(this, void 0);
|
2807
|
+
_SkyDatepickerInputDirective_renderer.set(this, void 0);
|
2808
|
+
_SkyDatepickerInputDirective_resourcesService.set(this, void 0);
|
2809
|
+
_SkyDatepickerInputDirective_datepickerComponent.set(this, void 0);
|
2810
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2811
|
+
// istanbul ignore next
|
2812
|
+
_SkyDatepickerInputDirective_onChange.set(this, (_) => { });
|
2813
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2814
|
+
// istanbul ignore next
|
2815
|
+
_SkyDatepickerInputDirective_onTouched.set(this, () => { });
|
2816
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2817
|
+
// istanbul ignore next
|
2818
|
+
_SkyDatepickerInputDirective_onValidatorChange.set(this, () => { });
|
2819
|
+
if (!datepickerComponent) {
|
2820
|
+
throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
|
2821
|
+
'`<sky-datepicker>` component!');
|
2822
|
+
}
|
2823
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_adapter, adapter, "f");
|
2824
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_changeDetector, changeDetector, "f");
|
2825
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_configService, configService, "f");
|
2826
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_elementRef, elementRef, "f");
|
2827
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_localeProvider, localeProvider, "f");
|
2828
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_renderer, renderer, "f");
|
2829
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_resourcesService, resourcesService, "f");
|
2830
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_datepickerComponent, datepickerComponent, "f");
|
2831
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_initialPlaceholder, __classPrivateFieldGet(this, _SkyDatepickerInputDirective_adapter, "f").getPlaceholder(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f")), "f");
|
2832
|
+
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_updatePlaceholder).call(this);
|
2833
|
+
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_localeProvider, "f")
|
2834
|
+
.getLocaleInfo()
|
2835
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_ngUnsubscribe, "f")))
|
2836
|
+
.subscribe((localeInfo) => {
|
2837
|
+
SkyDateFormatter.setLocale(localeInfo.locale);
|
2838
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
|
2839
|
+
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_applyDateFormat).call(this);
|
2840
|
+
});
|
2841
|
+
}
|
2828
2842
|
ngOnInit() {
|
2829
2843
|
const element = __classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f").nativeElement;
|
2830
2844
|
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_renderer, "f").addClass(element, 'sky-form-control');
|
@@ -3093,13 +3107,13 @@ _SkyDatepickerInputDirective_control = new WeakMap(), _SkyDatepickerInputDirecti
|
|
3093
3107
|
}
|
3094
3108
|
}
|
3095
3109
|
};
|
3096
|
-
SkyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
3097
|
-
SkyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1
|
3110
|
+
SkyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
3111
|
+
SkyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [
|
3098
3112
|
SKY_DATEPICKER_VALUE_ACCESSOR,
|
3099
3113
|
SKY_DATEPICKER_VALIDATOR,
|
3100
3114
|
SkyDatepickerAdapterService,
|
3101
3115
|
], ngImport: i0 });
|
3102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
3116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
|
3103
3117
|
type: Directive,
|
3104
3118
|
args: [{
|
3105
3119
|
selector: '[skyDatepickerInput]',
|
@@ -3142,8 +3156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
3142
3156
|
|
3143
3157
|
class SkyDatepickerModule {
|
3144
3158
|
}
|
3145
|
-
SkyDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
3146
|
-
SkyDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
3159
|
+
SkyDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
3160
|
+
SkyDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
|
3147
3161
|
SkyDatepickerCalendarInnerComponent,
|
3148
3162
|
SkyDayPickerComponent,
|
3149
3163
|
SkyMonthPickerComponent,
|
@@ -3165,7 +3179,7 @@ SkyDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
3165
3179
|
SkyDatepickerComponent,
|
3166
3180
|
SkyDatepickerInputDirective,
|
3167
3181
|
SkyFuzzyDatepickerInputDirective] });
|
3168
|
-
SkyDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
3182
|
+
SkyDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerService], imports: [CommonModule,
|
3169
3183
|
SkyI18nModule,
|
3170
3184
|
FormsModule,
|
3171
3185
|
SkyIconModule,
|
@@ -3175,7 +3189,7 @@ SkyDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
|
|
3175
3189
|
SkyThemeModule,
|
3176
3190
|
SkyPopoverModule,
|
3177
3191
|
SkyWaitModule] });
|
3178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
3192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerModule, decorators: [{
|
3179
3193
|
type: NgModule,
|
3180
3194
|
args: [{
|
3181
3195
|
declarations: [
|
@@ -3220,9 +3234,9 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
|
|
3220
3234
|
return 'skyux_date_range_picker_before_date_label';
|
3221
3235
|
}
|
3222
3236
|
}
|
3223
|
-
SkyDateRangePickerEndDateResourceKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
3224
|
-
SkyDateRangePickerEndDateResourceKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1
|
3225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
3237
|
+
SkyDateRangePickerEndDateResourceKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
3238
|
+
SkyDateRangePickerEndDateResourceKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" });
|
3239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
|
3226
3240
|
type: Pipe,
|
3227
3241
|
args: [{
|
3228
3242
|
name: 'skyDateRangePickerEndDateResourceKey',
|
@@ -3237,9 +3251,9 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
|
|
3237
3251
|
return 'skyux_date_range_picker_after_date_label';
|
3238
3252
|
}
|
3239
3253
|
}
|
3240
|
-
SkyDateRangePickerStartDateResourceKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
3241
|
-
SkyDateRangePickerStartDateResourceKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1
|
3242
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
3254
|
+
SkyDateRangePickerStartDateResourceKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
3255
|
+
SkyDateRangePickerStartDateResourceKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" });
|
3256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
|
3243
3257
|
type: Pipe,
|
3244
3258
|
args: [{
|
3245
3259
|
name: 'skyDateRangePickerStartDateResourceKey',
|
@@ -3727,9 +3741,9 @@ _SkyDateRangeService_calculatorReadyStream = new WeakMap(), _SkyDateRangeService
|
|
3727
3741
|
// Start the count higher than the number of available values
|
3728
3742
|
// provided in the SkyDateRangeCalculatorId enum.
|
3729
3743
|
SkyDateRangeService.lastId = 1000;
|
3730
|
-
SkyDateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
3731
|
-
SkyDateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
3732
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
3744
|
+
SkyDateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangeService, deps: [{ token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
|
3745
|
+
SkyDateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangeService });
|
3746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangeService, decorators: [{
|
3733
3747
|
type: Injectable
|
3734
3748
|
}], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }]; } });
|
3735
3749
|
|
@@ -3756,6 +3770,73 @@ let uniqueId = 0;
|
|
3756
3770
|
* ```
|
3757
3771
|
*/
|
3758
3772
|
class SkyDateRangePickerComponent {
|
3773
|
+
/**
|
3774
|
+
* IDs for the date range options to include in the picker's dropdown.
|
3775
|
+
* The options specify calculator objects that return two `Date` objects to represent date ranges.
|
3776
|
+
* By default, this property includes all `SkyDateRangeCalculatorId` values.
|
3777
|
+
*/
|
3778
|
+
set calculatorIds(value) {
|
3779
|
+
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__calculatorIds, value || [
|
3780
|
+
SkyDateRangeCalculatorId.AnyTime,
|
3781
|
+
SkyDateRangeCalculatorId.Before,
|
3782
|
+
SkyDateRangeCalculatorId.After,
|
3783
|
+
SkyDateRangeCalculatorId.SpecificRange,
|
3784
|
+
SkyDateRangeCalculatorId.Yesterday,
|
3785
|
+
SkyDateRangeCalculatorId.Today,
|
3786
|
+
SkyDateRangeCalculatorId.Tomorrow,
|
3787
|
+
SkyDateRangeCalculatorId.LastWeek,
|
3788
|
+
SkyDateRangeCalculatorId.ThisWeek,
|
3789
|
+
SkyDateRangeCalculatorId.NextWeek,
|
3790
|
+
SkyDateRangeCalculatorId.LastMonth,
|
3791
|
+
SkyDateRangeCalculatorId.ThisMonth,
|
3792
|
+
SkyDateRangeCalculatorId.NextMonth,
|
3793
|
+
SkyDateRangeCalculatorId.LastQuarter,
|
3794
|
+
SkyDateRangeCalculatorId.ThisQuarter,
|
3795
|
+
SkyDateRangeCalculatorId.NextQuarter,
|
3796
|
+
SkyDateRangeCalculatorId.LastCalendarYear,
|
3797
|
+
SkyDateRangeCalculatorId.ThisCalendarYear,
|
3798
|
+
SkyDateRangeCalculatorId.NextCalendarYear,
|
3799
|
+
SkyDateRangeCalculatorId.LastFiscalYear,
|
3800
|
+
SkyDateRangeCalculatorId.ThisFiscalYear,
|
3801
|
+
SkyDateRangeCalculatorId.NextFiscalYear,
|
3802
|
+
], "f");
|
3803
|
+
}
|
3804
|
+
get calculatorIds() {
|
3805
|
+
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__calculatorIds, "f");
|
3806
|
+
}
|
3807
|
+
/**
|
3808
|
+
* The date format for
|
3809
|
+
* [the `sky-datepicker` components](https://developer.blackbaud.com/skyux/components/datepicker)
|
3810
|
+
* that make up the date range picker. The text input is a composite component of
|
3811
|
+
* up to two `sky-datepicker` components.
|
3812
|
+
* @default "MM/DD/YYYY"
|
3813
|
+
*/
|
3814
|
+
set dateFormat(value) {
|
3815
|
+
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__dateFormat, value, "f");
|
3816
|
+
this.dateFormatOrDefault = value || __classPrivateFieldGet(this, _SkyDateRangePickerComponent_preferredShortDateFormat, "f");
|
3817
|
+
}
|
3818
|
+
get dateFormat() {
|
3819
|
+
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__dateFormat, "f");
|
3820
|
+
}
|
3821
|
+
/**
|
3822
|
+
* Whether to disable the date range picker.
|
3823
|
+
* @default false
|
3824
|
+
*/
|
3825
|
+
set disabled(value) {
|
3826
|
+
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__disabled, value, "f");
|
3827
|
+
if (this.formGroup) {
|
3828
|
+
if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent__disabled, "f")) {
|
3829
|
+
this.formGroup.disable();
|
3830
|
+
}
|
3831
|
+
else {
|
3832
|
+
this.formGroup.enable();
|
3833
|
+
}
|
3834
|
+
}
|
3835
|
+
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
|
3836
|
+
}
|
3837
|
+
get disabled() {
|
3838
|
+
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__disabled, "f");
|
3839
|
+
}
|
3759
3840
|
constructor(changeDetector, dateRangeService, formBuilder, localeProvider, ngZone, themeSvc) {
|
3760
3841
|
_SkyDateRangePickerComponent_instances.add(this);
|
3761
3842
|
/**
|
@@ -3836,73 +3917,6 @@ class SkyDateRangePickerComponent {
|
|
3836
3917
|
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
|
3837
3918
|
});
|
3838
3919
|
}
|
3839
|
-
/**
|
3840
|
-
* IDs for the date range options to include in the picker's dropdown.
|
3841
|
-
* The options specify calculator objects that return two `Date` objects to represent date ranges.
|
3842
|
-
* By default, this property includes all `SkyDateRangeCalculatorId` values.
|
3843
|
-
*/
|
3844
|
-
set calculatorIds(value) {
|
3845
|
-
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__calculatorIds, value || [
|
3846
|
-
SkyDateRangeCalculatorId.AnyTime,
|
3847
|
-
SkyDateRangeCalculatorId.Before,
|
3848
|
-
SkyDateRangeCalculatorId.After,
|
3849
|
-
SkyDateRangeCalculatorId.SpecificRange,
|
3850
|
-
SkyDateRangeCalculatorId.Yesterday,
|
3851
|
-
SkyDateRangeCalculatorId.Today,
|
3852
|
-
SkyDateRangeCalculatorId.Tomorrow,
|
3853
|
-
SkyDateRangeCalculatorId.LastWeek,
|
3854
|
-
SkyDateRangeCalculatorId.ThisWeek,
|
3855
|
-
SkyDateRangeCalculatorId.NextWeek,
|
3856
|
-
SkyDateRangeCalculatorId.LastMonth,
|
3857
|
-
SkyDateRangeCalculatorId.ThisMonth,
|
3858
|
-
SkyDateRangeCalculatorId.NextMonth,
|
3859
|
-
SkyDateRangeCalculatorId.LastQuarter,
|
3860
|
-
SkyDateRangeCalculatorId.ThisQuarter,
|
3861
|
-
SkyDateRangeCalculatorId.NextQuarter,
|
3862
|
-
SkyDateRangeCalculatorId.LastCalendarYear,
|
3863
|
-
SkyDateRangeCalculatorId.ThisCalendarYear,
|
3864
|
-
SkyDateRangeCalculatorId.NextCalendarYear,
|
3865
|
-
SkyDateRangeCalculatorId.LastFiscalYear,
|
3866
|
-
SkyDateRangeCalculatorId.ThisFiscalYear,
|
3867
|
-
SkyDateRangeCalculatorId.NextFiscalYear,
|
3868
|
-
], "f");
|
3869
|
-
}
|
3870
|
-
get calculatorIds() {
|
3871
|
-
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__calculatorIds, "f");
|
3872
|
-
}
|
3873
|
-
/**
|
3874
|
-
* The date format for
|
3875
|
-
* [the `sky-datepicker` components](https://developer.blackbaud.com/skyux/components/datepicker)
|
3876
|
-
* that make up the date range picker. The text input is a composite component of
|
3877
|
-
* up to two `sky-datepicker` components.
|
3878
|
-
* @default "MM/DD/YYYY"
|
3879
|
-
*/
|
3880
|
-
set dateFormat(value) {
|
3881
|
-
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__dateFormat, value, "f");
|
3882
|
-
this.dateFormatOrDefault = value || __classPrivateFieldGet(this, _SkyDateRangePickerComponent_preferredShortDateFormat, "f");
|
3883
|
-
}
|
3884
|
-
get dateFormat() {
|
3885
|
-
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__dateFormat, "f");
|
3886
|
-
}
|
3887
|
-
/**
|
3888
|
-
* Whether to disable the date range picker.
|
3889
|
-
* @default false
|
3890
|
-
*/
|
3891
|
-
set disabled(value) {
|
3892
|
-
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__disabled, value, "f");
|
3893
|
-
if (this.formGroup) {
|
3894
|
-
if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent__disabled, "f")) {
|
3895
|
-
this.formGroup.disable();
|
3896
|
-
}
|
3897
|
-
else {
|
3898
|
-
this.formGroup.enable();
|
3899
|
-
}
|
3900
|
-
}
|
3901
|
-
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
|
3902
|
-
}
|
3903
|
-
get disabled() {
|
3904
|
-
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__disabled, "f");
|
3905
|
-
}
|
3906
3920
|
ngOnInit() {
|
3907
3921
|
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_createForm).call(this);
|
3908
3922
|
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_updateCalculators).call(this).then(() => {
|
@@ -4182,12 +4196,12 @@ _SkyDateRangePickerComponent_value = new WeakMap(), _SkyDateRangePickerComponent
|
|
4182
4196
|
? __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_getCalculatorById).call(this, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get).calculatorId)
|
4183
4197
|
: undefined;
|
4184
4198
|
};
|
4185
|
-
SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
4186
|
-
SkyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
4199
|
+
SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2$2.UntypedFormBuilder }, { token: i3.SkyAppLocaleProvider }, { token: i0.NgZone }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
4200
|
+
SkyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
|
4187
4201
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
4188
4202
|
SKY_DATE_RANGE_PICKER_VALIDATOR,
|
4189
4203
|
], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"isReady && formGroup\"\n class=\"sky-date-range-picker\"\n [formGroup]=\"formGroup\"\n>\n <div class=\"sky-date-range-picker-form-group\">\n <sky-input-box>\n <label\n class=\"sky-control-label\"\n [attr.for]=\"dateRangePickerId + '-select-calculator'\"\n >\n {{ label || 'skyux_date_range_picker_default_label' | skyLibResources }}\n </label>\n <select\n class=\"sky-form-control\"\n formControlName=\"calculatorId\"\n [attr.id]=\"dateRangePickerId + '-select-calculator'\"\n (blur)=\"onFieldBlur()\"\n >\n <option\n *ngFor=\"let calculator of calculators\"\n [value]=\"calculator.calculatorId\"\n >\n {{ calculator.shortDescription }}\n </option>\n </select>\n </sky-input-box>\n </div>\n\n <div class=\"sky-date-range-picker-form-group\" [hidden]=\"!showStartDatePicker\">\n <sky-input-box>\n <label\n class=\"sky-control-label\"\n [attr.for]=\"dateRangePickerId + '-start-date'\"\n [ngClass]=\"{ 'sky-control-label-required': startDateRequired }\"\n >\n {{\n selectedCalculator?.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources\n }}\n </label>\n\n <sky-datepicker>\n <input\n formControlName=\"startDate\"\n [attr.aria-label]=\"\n selectedCalculator?.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources\n \"\n [attr.id]=\"dateRangePickerId + '-start-date'\"\n [attr.placeholder]=\"dateFormatOrDefault\"\n [required]=\"!!startDateRequired\"\n [dateFormat]=\"dateFormatOrDefault\"\n (blur)=\"onFieldBlur()\"\n skyDatepickerInput\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n\n <div class=\"sky-date-range-picker-form-group\" [hidden]=\"!showEndDatePicker\">\n <sky-input-box>\n <label\n class=\"sky-control-label\"\n [attr.for]=\"dateRangePickerId + '-end-date'\"\n [ngClass]=\"{ 'sky-control-label-required': endDateRequired }\"\n >\n {{\n selectedCalculator?.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources\n }}\n </label>\n\n <sky-datepicker>\n <input\n formControlName=\"endDate\"\n skyDatepickerInput\n [attr.aria-label]=\"\n selectedCalculator?.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources\n \"\n [attr.id]=\"dateRangePickerId + '-end-date'\"\n [attr.placeholder]=\"dateFormatOrDefault\"\n [dateFormat]=\"dateFormatOrDefault\"\n [required]=\"!!endDateRequired\"\n (blur)=\"onFieldBlur()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n</div>\n", styles: [".sky-date-range-picker{display:flex}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;margin-bottom:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern .sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern .sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-lg) .sky-date-range-picker-form-group{margin:0 20px 0 0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "component", type: i2$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
4190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
4204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
|
4191
4205
|
type: Component,
|
4192
4206
|
args: [{ selector: 'sky-date-range-picker', providers: [
|
4193
4207
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
@@ -4213,8 +4227,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
4213
4227
|
|
4214
4228
|
class SkyDateRangePickerModule {
|
4215
4229
|
}
|
4216
|
-
SkyDateRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
4217
|
-
SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
4230
|
+
SkyDateRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
4231
|
+
SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent,
|
4218
4232
|
SkyDateRangePickerEndDateResourceKeyPipe,
|
4219
4233
|
SkyDateRangePickerStartDateResourceKeyPipe], imports: [CommonModule,
|
4220
4234
|
FormsModule,
|
@@ -4223,14 +4237,14 @@ SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0"
|
|
4223
4237
|
SkyDatepickerModule,
|
4224
4238
|
SkyDatetimeResourcesModule,
|
4225
4239
|
SkyInputBoxModule], exports: [SkyDateRangePickerComponent] });
|
4226
|
-
SkyDateRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
4240
|
+
SkyDateRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerModule, providers: [SkyDateRangeService], imports: [CommonModule,
|
4227
4241
|
FormsModule,
|
4228
4242
|
ReactiveFormsModule,
|
4229
4243
|
SkyI18nModule,
|
4230
4244
|
SkyDatepickerModule,
|
4231
4245
|
SkyDatetimeResourcesModule,
|
4232
4246
|
SkyInputBoxModule] });
|
4233
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
4247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
|
4234
4248
|
type: NgModule,
|
4235
4249
|
args: [{
|
4236
4250
|
declarations: [
|
@@ -4252,7 +4266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
4252
4266
|
}]
|
4253
4267
|
}] });
|
4254
4268
|
|
4255
|
-
var _SkyTimepickerComponent_instances, _SkyTimepickerComponent_affixer, _SkyTimepickerComponent_timepickerUnsubscribe, _SkyTimepickerComponent_ngUnsubscribe, _SkyTimepickerComponent_overlay, _SkyTimepickerComponent_overlayKeydownListener, _SkyTimepickerComponent__disabled, _SkyTimepickerComponent__timepickerRef, _SkyTimepickerComponent_affixService, _SkyTimepickerComponent_changeDetector, _SkyTimepickerComponent_coreAdapter, _SkyTimepickerComponent_overlayService, _SkyTimepickerComponent_closePicker, _SkyTimepickerComponent_openPicker, _SkyTimepickerComponent_createAffixer, _SkyTimepickerComponent_destroyAffixer, _SkyTimepickerComponent_createOverlay, _SkyTimepickerComponent_destroyOverlay, _SkyTimepickerComponent_addKeydownListener, _SkyTimepickerComponent_removePickerEventListeners;
|
4269
|
+
var _SkyTimepickerComponent_instances, _SkyTimepickerComponent_affixer, _SkyTimepickerComponent_timepickerUnsubscribe, _SkyTimepickerComponent_ngUnsubscribe, _SkyTimepickerComponent_overlay, _SkyTimepickerComponent_overlayKeydownListener, _SkyTimepickerComponent__disabled, _SkyTimepickerComponent__timepickerRef, _SkyTimepickerComponent_affixService, _SkyTimepickerComponent_changeDetector, _SkyTimepickerComponent_coreAdapter, _SkyTimepickerComponent_overlayService, _SkyTimepickerComponent_zIndex, _SkyTimepickerComponent_closePicker, _SkyTimepickerComponent_openPicker, _SkyTimepickerComponent_createAffixer, _SkyTimepickerComponent_destroyAffixer, _SkyTimepickerComponent_createOverlay, _SkyTimepickerComponent_destroyOverlay, _SkyTimepickerComponent_addKeydownListener, _SkyTimepickerComponent_removePickerEventListeners;
|
4256
4270
|
let nextId = 0;
|
4257
4271
|
/**
|
4258
4272
|
* Creates a SKY UX-themed replacement for the HTML `input` element with `type="time"`.
|
@@ -4261,44 +4275,6 @@ let nextId = 0;
|
|
4261
4275
|
* with the `skyTimepickerInput` directive.
|
4262
4276
|
*/
|
4263
4277
|
class SkyTimepickerComponent {
|
4264
|
-
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
|
4265
|
-
this.inputBoxHostService = inputBoxHostService;
|
4266
|
-
_SkyTimepickerComponent_instances.add(this);
|
4267
|
-
/**
|
4268
|
-
* Fires when the value in the timepicker input changes.
|
4269
|
-
*/
|
4270
|
-
this.selectedTimeChanged = new EventEmitter();
|
4271
|
-
this.activeTime = new Date();
|
4272
|
-
this.hours = [];
|
4273
|
-
this.is8601 = false;
|
4274
|
-
this.isOpen = false;
|
4275
|
-
this.isVisible = false;
|
4276
|
-
this.localeFormat = 'h:mm A';
|
4277
|
-
this.minutes = [];
|
4278
|
-
this.timeFormat = 'hh';
|
4279
|
-
_SkyTimepickerComponent_affixer.set(this, void 0);
|
4280
|
-
_SkyTimepickerComponent_timepickerUnsubscribe.set(this, new Subject());
|
4281
|
-
_SkyTimepickerComponent_ngUnsubscribe.set(this, new Subject());
|
4282
|
-
_SkyTimepickerComponent_overlay.set(this, void 0);
|
4283
|
-
_SkyTimepickerComponent_overlayKeydownListener.set(this, void 0);
|
4284
|
-
_SkyTimepickerComponent__disabled.set(this, false);
|
4285
|
-
_SkyTimepickerComponent__timepickerRef.set(this, void 0);
|
4286
|
-
_SkyTimepickerComponent_affixService.set(this, void 0);
|
4287
|
-
_SkyTimepickerComponent_changeDetector.set(this, void 0);
|
4288
|
-
_SkyTimepickerComponent_coreAdapter.set(this, void 0);
|
4289
|
-
_SkyTimepickerComponent_overlayService.set(this, void 0);
|
4290
|
-
__classPrivateFieldSet(this, _SkyTimepickerComponent_affixService, affixService, "f");
|
4291
|
-
__classPrivateFieldSet(this, _SkyTimepickerComponent_changeDetector, changeDetector, "f");
|
4292
|
-
__classPrivateFieldSet(this, _SkyTimepickerComponent_coreAdapter, coreAdapter, "f");
|
4293
|
-
__classPrivateFieldSet(this, _SkyTimepickerComponent_overlayService, overlayService, "f");
|
4294
|
-
const uniqueId = nextId++;
|
4295
|
-
this.timepickerId = `sky-timepicker-${uniqueId}`;
|
4296
|
-
this.triggerButtonId = `sky-timepicker-button-${uniqueId}`;
|
4297
|
-
// Update icons when theme changes.
|
4298
|
-
themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f"))).subscribe(() => {
|
4299
|
-
__classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
|
4300
|
-
});
|
4301
|
-
}
|
4302
4278
|
set disabled(value) {
|
4303
4279
|
__classPrivateFieldSet(this, _SkyTimepickerComponent__disabled, value, "f");
|
4304
4280
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
|
@@ -4402,6 +4378,46 @@ class SkyTimepickerComponent {
|
|
4402
4378
|
get timepickerRef() {
|
4403
4379
|
return __classPrivateFieldGet(this, _SkyTimepickerComponent__timepickerRef, "f");
|
4404
4380
|
}
|
4381
|
+
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
|
4382
|
+
this.inputBoxHostService = inputBoxHostService;
|
4383
|
+
_SkyTimepickerComponent_instances.add(this);
|
4384
|
+
/**
|
4385
|
+
* Fires when the value in the timepicker input changes.
|
4386
|
+
*/
|
4387
|
+
this.selectedTimeChanged = new EventEmitter();
|
4388
|
+
this.activeTime = new Date();
|
4389
|
+
this.hours = [];
|
4390
|
+
this.is8601 = false;
|
4391
|
+
this.isOpen = false;
|
4392
|
+
this.isVisible = false;
|
4393
|
+
this.localeFormat = 'h:mm A';
|
4394
|
+
this.minutes = [];
|
4395
|
+
this.timeFormat = 'hh';
|
4396
|
+
_SkyTimepickerComponent_affixer.set(this, void 0);
|
4397
|
+
_SkyTimepickerComponent_timepickerUnsubscribe.set(this, new Subject());
|
4398
|
+
_SkyTimepickerComponent_ngUnsubscribe.set(this, new Subject());
|
4399
|
+
_SkyTimepickerComponent_overlay.set(this, void 0);
|
4400
|
+
_SkyTimepickerComponent_overlayKeydownListener.set(this, void 0);
|
4401
|
+
_SkyTimepickerComponent__disabled.set(this, false);
|
4402
|
+
_SkyTimepickerComponent__timepickerRef.set(this, void 0);
|
4403
|
+
_SkyTimepickerComponent_affixService.set(this, void 0);
|
4404
|
+
_SkyTimepickerComponent_changeDetector.set(this, void 0);
|
4405
|
+
_SkyTimepickerComponent_coreAdapter.set(this, void 0);
|
4406
|
+
_SkyTimepickerComponent_overlayService.set(this, void 0);
|
4407
|
+
_SkyTimepickerComponent_zIndex.set(this, void 0);
|
4408
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_affixService, affixService, "f");
|
4409
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_changeDetector, changeDetector, "f");
|
4410
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_coreAdapter, coreAdapter, "f");
|
4411
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_overlayService, overlayService, "f");
|
4412
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_zIndex, stackingContext === null || stackingContext === void 0 ? void 0 : stackingContext.zIndex, "f");
|
4413
|
+
const uniqueId = nextId++;
|
4414
|
+
this.timepickerId = `sky-timepicker-${uniqueId}`;
|
4415
|
+
this.triggerButtonId = `sky-timepicker-button-${uniqueId}`;
|
4416
|
+
// Update icons when theme changes.
|
4417
|
+
themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f"))).subscribe(() => {
|
4418
|
+
__classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
|
4419
|
+
});
|
4420
|
+
}
|
4405
4421
|
ngOnInit() {
|
4406
4422
|
this.setFormat(this.timeFormat);
|
4407
4423
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_addKeydownListener).call(this);
|
@@ -4489,7 +4505,7 @@ class SkyTimepickerComponent {
|
|
4489
4505
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_openPicker).call(this);
|
4490
4506
|
}
|
4491
4507
|
}
|
4492
|
-
_SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepickerUnsubscribe = new WeakMap(), _SkyTimepickerComponent_ngUnsubscribe = new WeakMap(), _SkyTimepickerComponent_overlay = new WeakMap(), _SkyTimepickerComponent_overlayKeydownListener = new WeakMap(), _SkyTimepickerComponent__disabled = new WeakMap(), _SkyTimepickerComponent__timepickerRef = new WeakMap(), _SkyTimepickerComponent_affixService = new WeakMap(), _SkyTimepickerComponent_changeDetector = new WeakMap(), _SkyTimepickerComponent_coreAdapter = new WeakMap(), _SkyTimepickerComponent_overlayService = new WeakMap(), _SkyTimepickerComponent_instances = new WeakSet(), _SkyTimepickerComponent_closePicker = function _SkyTimepickerComponent_closePicker() {
|
4508
|
+
_SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepickerUnsubscribe = new WeakMap(), _SkyTimepickerComponent_ngUnsubscribe = new WeakMap(), _SkyTimepickerComponent_overlay = new WeakMap(), _SkyTimepickerComponent_overlayKeydownListener = new WeakMap(), _SkyTimepickerComponent__disabled = new WeakMap(), _SkyTimepickerComponent__timepickerRef = new WeakMap(), _SkyTimepickerComponent_affixService = new WeakMap(), _SkyTimepickerComponent_changeDetector = new WeakMap(), _SkyTimepickerComponent_coreAdapter = new WeakMap(), _SkyTimepickerComponent_overlayService = new WeakMap(), _SkyTimepickerComponent_zIndex = new WeakMap(), _SkyTimepickerComponent_instances = new WeakSet(), _SkyTimepickerComponent_closePicker = function _SkyTimepickerComponent_closePicker() {
|
4493
4509
|
var _a;
|
4494
4510
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
|
4495
4511
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyOverlay).call(this);
|
@@ -4535,6 +4551,13 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
|
|
4535
4551
|
enableClose: false,
|
4536
4552
|
enablePointerEvents: false,
|
4537
4553
|
});
|
4554
|
+
if (__classPrivateFieldGet(this, _SkyTimepickerComponent_zIndex, "f")) {
|
4555
|
+
__classPrivateFieldGet(this, _SkyTimepickerComponent_zIndex, "f")
|
4556
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f")))
|
4557
|
+
.subscribe((zIndex) => {
|
4558
|
+
overlay.componentRef.instance.zIndex = zIndex.toString(10);
|
4559
|
+
});
|
4560
|
+
}
|
4538
4561
|
overlay.backdropClick
|
4539
4562
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f")))
|
4540
4563
|
.subscribe(() => {
|
@@ -4575,16 +4598,21 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
|
|
4575
4598
|
/* istanbul ignore next */
|
4576
4599
|
(_a = __classPrivateFieldGet(this, _SkyTimepickerComponent_overlayKeydownListener, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
4577
4600
|
};
|
4578
|
-
SkyTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
4579
|
-
SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
4580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
4601
|
+
SkyTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$1.SkyInputBoxHostService, optional: true }, { token: i3$2.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
4602
|
+
SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"clock\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n #timepickerRef\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n <li *ngFor=\"let hour of hours\">\n <button\n name=\"hour\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n <li *ngFor=\"let minute of minutes\">\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n </ol>\n </section>\n <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"onCloseButtonClick()\"\n >\n {{ 'skyux_timepicker_close' | skyLibResources }}\n </button>\n </section>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol li button.sky-btn-active:hover,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
4603
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
4581
4604
|
type: Component,
|
4582
|
-
args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"clock\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n #timepickerRef\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n <li *ngFor=\"let hour of hours\">\n <button\n name=\"hour\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n <li *ngFor=\"let minute of minutes\">\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n </ol>\n </section>\n <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"onCloseButtonClick()\"\n >\n {{ 'skyux_timepicker_close' | skyLibResources }}\n </button>\n </section>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"] }]
|
4605
|
+
args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"clock\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n #timepickerRef\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n <li *ngFor=\"let hour of hours\">\n <button\n name=\"hour\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n <li *ngFor=\"let minute of minutes\">\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n </ol>\n </section>\n <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"onCloseButtonClick()\"\n >\n {{ 'skyux_timepicker_close' | skyLibResources }}\n </button>\n </section>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol li button.sky-btn-active:hover,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active{background-color:var(--sky-background-color-input-selected)}.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"] }]
|
4583
4606
|
}], ctorParameters: function () {
|
4584
4607
|
return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
|
4585
4608
|
type: Optional
|
4586
4609
|
}] }, { type: i3$2.SkyThemeService, decorators: [{
|
4587
4610
|
type: Optional
|
4611
|
+
}] }, { type: undefined, decorators: [{
|
4612
|
+
type: Optional
|
4613
|
+
}, {
|
4614
|
+
type: Inject,
|
4615
|
+
args: [SKY_STACKING_CONTEXT]
|
4588
4616
|
}] }];
|
4589
4617
|
}, propDecorators: { selectedTimeChanged: [{
|
4590
4618
|
type: Output
|
@@ -4629,31 +4657,6 @@ const SKY_TIMEPICKER_VALIDATOR = {
|
|
4629
4657
|
multi: true,
|
4630
4658
|
};
|
4631
4659
|
class SkyTimepickerInputDirective {
|
4632
|
-
constructor(renderer, elRef, resourcesService, changeDetector) {
|
4633
|
-
_SkyTimepickerInputDirective_instances.add(this);
|
4634
|
-
_SkyTimepickerInputDirective__timeFormat.set(this, 'hh');
|
4635
|
-
_SkyTimepickerInputDirective_control.set(this, void 0);
|
4636
|
-
_SkyTimepickerInputDirective__disabled.set(this, false);
|
4637
|
-
_SkyTimepickerInputDirective__modelValue.set(this, void 0);
|
4638
|
-
_SkyTimepickerInputDirective__skyTimepickerInput.set(this, void 0);
|
4639
|
-
_SkyTimepickerInputDirective_renderer.set(this, void 0);
|
4640
|
-
_SkyTimepickerInputDirective_elRef.set(this, void 0);
|
4641
|
-
_SkyTimepickerInputDirective_resourcesService.set(this, void 0);
|
4642
|
-
_SkyTimepickerInputDirective_changeDetector.set(this, void 0);
|
4643
|
-
/* istanbul ignore next */
|
4644
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
|
4645
|
-
_SkyTimepickerInputDirective__onChange.set(this, (_) => { });
|
4646
|
-
/* istanbul ignore next */
|
4647
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
4648
|
-
_SkyTimepickerInputDirective__onTouched.set(this, () => { });
|
4649
|
-
/* istanbul ignore next */
|
4650
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
4651
|
-
_SkyTimepickerInputDirective__validatorChange.set(this, () => { });
|
4652
|
-
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_renderer, renderer, "f");
|
4653
|
-
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_elRef, elRef, "f");
|
4654
|
-
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_resourcesService, resourcesService, "f");
|
4655
|
-
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_changeDetector, changeDetector, "f");
|
4656
|
-
}
|
4657
4660
|
// TODO: In a future breaking change - grab the parent component through dependency injection and remove this setter.
|
4658
4661
|
/**
|
4659
4662
|
* Creates the timepicker input field and picker. Place this attribute on an `input` element,
|
@@ -4691,6 +4694,31 @@ class SkyTimepickerInputDirective {
|
|
4691
4694
|
__classPrivateFieldGet(this, _SkyTimepickerInputDirective_instances, "m", _SkyTimepickerInputDirective_updateTimepickerInput).call(this);
|
4692
4695
|
__classPrivateFieldGet(this, _SkyTimepickerInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyTimepickerInputDirective_elRef, "f").nativeElement, 'disabled', value);
|
4693
4696
|
}
|
4697
|
+
constructor(renderer, elRef, resourcesService, changeDetector) {
|
4698
|
+
_SkyTimepickerInputDirective_instances.add(this);
|
4699
|
+
_SkyTimepickerInputDirective__timeFormat.set(this, 'hh');
|
4700
|
+
_SkyTimepickerInputDirective_control.set(this, void 0);
|
4701
|
+
_SkyTimepickerInputDirective__disabled.set(this, false);
|
4702
|
+
_SkyTimepickerInputDirective__modelValue.set(this, void 0);
|
4703
|
+
_SkyTimepickerInputDirective__skyTimepickerInput.set(this, void 0);
|
4704
|
+
_SkyTimepickerInputDirective_renderer.set(this, void 0);
|
4705
|
+
_SkyTimepickerInputDirective_elRef.set(this, void 0);
|
4706
|
+
_SkyTimepickerInputDirective_resourcesService.set(this, void 0);
|
4707
|
+
_SkyTimepickerInputDirective_changeDetector.set(this, void 0);
|
4708
|
+
/* istanbul ignore next */
|
4709
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
|
4710
|
+
_SkyTimepickerInputDirective__onChange.set(this, (_) => { });
|
4711
|
+
/* istanbul ignore next */
|
4712
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
4713
|
+
_SkyTimepickerInputDirective__onTouched.set(this, () => { });
|
4714
|
+
/* istanbul ignore next */
|
4715
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
4716
|
+
_SkyTimepickerInputDirective__validatorChange.set(this, () => { });
|
4717
|
+
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_renderer, renderer, "f");
|
4718
|
+
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_elRef, elRef, "f");
|
4719
|
+
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_resourcesService, resourcesService, "f");
|
4720
|
+
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_changeDetector, changeDetector, "f");
|
4721
|
+
}
|
4694
4722
|
ngOnInit() {
|
4695
4723
|
var _a;
|
4696
4724
|
__classPrivateFieldGet(this, _SkyTimepickerInputDirective_renderer, "f").addClass(__classPrivateFieldGet(this, _SkyTimepickerInputDirective_elRef, "f").nativeElement, 'sky-form-control');
|
@@ -4823,9 +4851,9 @@ _SkyTimepickerInputDirective__timeFormat = new WeakMap(), _SkyTimepickerInputDir
|
|
4823
4851
|
}
|
4824
4852
|
}
|
4825
4853
|
};
|
4826
|
-
SkyTimepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
4827
|
-
SkyTimepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1
|
4828
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
4854
|
+
SkyTimepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
4855
|
+
SkyTimepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.1", type: SkyTimepickerInputDirective, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 });
|
4856
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
|
4829
4857
|
type: Directive,
|
4830
4858
|
args: [{
|
4831
4859
|
selector: '[skyTimepickerInput]',
|
@@ -4849,22 +4877,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
4849
4877
|
|
4850
4878
|
class SkyTimepickerModule {
|
4851
4879
|
}
|
4852
|
-
SkyTimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
4853
|
-
SkyTimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
4880
|
+
SkyTimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
4881
|
+
SkyTimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
|
4854
4882
|
SkyI18nModule,
|
4855
4883
|
SkyIconModule,
|
4856
4884
|
SkyDatetimeResourcesModule,
|
4857
4885
|
SkyAffixModule,
|
4858
4886
|
SkyOverlayModule,
|
4859
4887
|
SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] });
|
4860
|
-
SkyTimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
4888
|
+
SkyTimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerModule, imports: [CommonModule,
|
4861
4889
|
SkyI18nModule,
|
4862
4890
|
SkyIconModule,
|
4863
4891
|
SkyDatetimeResourcesModule,
|
4864
4892
|
SkyAffixModule,
|
4865
4893
|
SkyOverlayModule,
|
4866
4894
|
SkyThemeModule] });
|
4867
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
4895
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerModule, decorators: [{
|
4868
4896
|
type: NgModule,
|
4869
4897
|
args: [{
|
4870
4898
|
declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],
|