@skyux/datetime 8.0.0-alpha.0 → 8.0.0-alpha.10
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';
|
@@ -114,9 +114,9 @@ _SkyDatePipe_defaultFormat = new WeakMap(), _SkyDatePipe_format = new WeakMap(),
|
|
114
114
|
const format = __classPrivateFieldGet(this, _SkyDatePipe_format, "f") || __classPrivateFieldGet(this, _SkyDatePipe_defaultFormat, "f");
|
115
115
|
__classPrivateFieldSet(this, _SkyDatePipe_formattedValue, SkyDateFormatUtility.format(locale, __classPrivateFieldGet(this, _SkyDatePipe_value, "f"), format), "f");
|
116
116
|
};
|
117
|
-
SkyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
118
|
-
SkyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1
|
119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
117
|
+
SkyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipe, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
|
118
|
+
SkyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false });
|
119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipe, decorators: [{
|
120
120
|
type: Pipe,
|
121
121
|
args: [{
|
122
122
|
name: 'skyDate',
|
@@ -229,16 +229,16 @@ class SkyDatetimeResourcesProvider {
|
|
229
229
|
*/
|
230
230
|
class SkyDatetimeResourcesModule {
|
231
231
|
}
|
232
|
-
SkyDatetimeResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
233
|
-
SkyDatetimeResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
234
|
-
SkyDatetimeResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
232
|
+
SkyDatetimeResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
233
|
+
SkyDatetimeResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] });
|
234
|
+
SkyDatetimeResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [
|
235
235
|
{
|
236
236
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
237
237
|
useClass: SkyDatetimeResourcesProvider,
|
238
238
|
multi: true,
|
239
239
|
},
|
240
240
|
], imports: [SkyI18nModule] });
|
241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
|
242
242
|
type: NgModule,
|
243
243
|
args: [{
|
244
244
|
exports: [SkyI18nModule],
|
@@ -628,9 +628,9 @@ _SkyFuzzyDateService_currentLocale = new WeakMap(), _SkyFuzzyDateService_ngUnsub
|
|
628
628
|
}
|
629
629
|
return true;
|
630
630
|
};
|
631
|
-
SkyFuzzyDateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
632
|
-
SkyFuzzyDateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
633
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
631
|
+
SkyFuzzyDateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable });
|
632
|
+
SkyFuzzyDateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' });
|
633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
|
634
634
|
type: Injectable,
|
635
635
|
args: [{
|
636
636
|
providedIn: 'root',
|
@@ -673,9 +673,9 @@ class SkyFuzzyDatePipe {
|
|
673
673
|
}
|
674
674
|
}
|
675
675
|
_SkyFuzzyDatePipe_fuzzyDateService = new WeakMap();
|
676
|
-
SkyFuzzyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
677
|
-
SkyFuzzyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1
|
678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
676
|
+
SkyFuzzyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe });
|
677
|
+
SkyFuzzyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
|
678
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
|
679
679
|
type: Pipe,
|
680
680
|
args: [{
|
681
681
|
name: 'skyFuzzyDate',
|
@@ -685,10 +685,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
685
685
|
|
686
686
|
class SkyDatePipeModule {
|
687
687
|
}
|
688
|
-
SkyDatePipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
689
|
-
SkyDatePipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
690
|
-
SkyDatePipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
691
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
688
|
+
SkyDatePipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
689
|
+
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] });
|
690
|
+
SkyDatePipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [CommonModule, SkyDatetimeResourcesModule] });
|
691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatePipeModule, decorators: [{
|
692
692
|
type: NgModule,
|
693
693
|
args: [{
|
694
694
|
declarations: [SkyDatePipe, SkyFuzzyDatePipe],
|
@@ -1234,11 +1234,11 @@ _SkyDatepickerCalendarInnerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepick
|
|
1234
1234
|
}
|
1235
1235
|
return undefined;
|
1236
1236
|
};
|
1237
|
-
SkyDatepickerCalendarInnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1238
|
-
SkyDatepickerCalendarInnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1239
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1237
|
+
SkyDatepickerCalendarInnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
1238
|
+
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 });
|
1239
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
|
1240
1240
|
type: Component,
|
1241
|
-
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"] }]
|
1241
|
+
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"] }]
|
1242
1242
|
}], propDecorators: { customDates: [{
|
1243
1243
|
type: Input
|
1244
1244
|
}], startingDay: [{
|
@@ -1272,9 +1272,9 @@ class SkyDatepickerAdapterService {
|
|
1272
1272
|
}
|
1273
1273
|
}
|
1274
1274
|
_SkyDatepickerAdapterService_renderer = new WeakMap();
|
1275
|
-
SkyDatepickerAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1276
|
-
SkyDatepickerAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
1277
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1275
|
+
SkyDatepickerAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
1276
|
+
SkyDatepickerAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerAdapterService });
|
1277
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerAdapterService, decorators: [{
|
1278
1278
|
type: Injectable
|
1279
1279
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
|
1280
1280
|
|
@@ -1288,9 +1288,9 @@ class SkyDatepickerConfigService {
|
|
1288
1288
|
this.startingDay = 0;
|
1289
1289
|
}
|
1290
1290
|
}
|
1291
|
-
SkyDatepickerConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1292
|
-
SkyDatepickerConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
1293
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1291
|
+
SkyDatepickerConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
1292
|
+
SkyDatepickerConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' });
|
1293
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
|
1294
1294
|
type: Injectable,
|
1295
1295
|
args: [{
|
1296
1296
|
providedIn: 'root',
|
@@ -1309,9 +1309,9 @@ class SkyDatepickerService {
|
|
1309
1309
|
this.keyDatePopoverStream = new Subject();
|
1310
1310
|
}
|
1311
1311
|
}
|
1312
|
-
SkyDatepickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1313
|
-
SkyDatepickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
1314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1312
|
+
SkyDatepickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
1313
|
+
SkyDatepickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerService });
|
1314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerService, decorators: [{
|
1315
1315
|
type: Injectable
|
1316
1316
|
}] });
|
1317
1317
|
|
@@ -1323,9 +1323,9 @@ class SkyDayPickerButtonComponent {
|
|
1323
1323
|
this.datepicker = datepicker;
|
1324
1324
|
}
|
1325
1325
|
}
|
1326
|
-
SkyDayPickerButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1327
|
-
SkyDayPickerButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1328
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1326
|
+
SkyDayPickerButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
|
1327
|
+
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"] }] });
|
1328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
|
1329
1329
|
type: Component,
|
1330
1330
|
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"] }]
|
1331
1331
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { date: [{
|
@@ -1436,9 +1436,9 @@ _SkyDayPickerCellComponent_activeUid = new WeakMap(), _SkyDayPickerCellComponent
|
|
1436
1436
|
}, 500);
|
1437
1437
|
}
|
1438
1438
|
};
|
1439
|
-
SkyDayPickerCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1440
|
-
SkyDayPickerCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1441
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1439
|
+
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 });
|
1440
|
+
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 });
|
1441
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
|
1442
1442
|
type: Component,
|
1443
1443
|
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" }]
|
1444
1444
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }]; }, propDecorators: { activeDateHasChanged: [{
|
@@ -1452,6 +1452,12 @@ var _SkyDayPickerComponent_instances, _SkyDayPickerComponent_daysInMonth, _SkyDa
|
|
1452
1452
|
* @internal
|
1453
1453
|
*/
|
1454
1454
|
class SkyDayPickerComponent {
|
1455
|
+
set customDates(value) {
|
1456
|
+
/* istanbul ignore else */
|
1457
|
+
if (value) {
|
1458
|
+
__classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_applyCustomDates).call(this, value, this.rows);
|
1459
|
+
}
|
1460
|
+
}
|
1455
1461
|
constructor(datepicker) {
|
1456
1462
|
_SkyDayPickerComponent_instances.add(this);
|
1457
1463
|
this.calendarDateRangeChange = new EventEmitter();
|
@@ -1468,12 +1474,6 @@ class SkyDayPickerComponent {
|
|
1468
1474
|
_SkyDayPickerComponent_ngUnsubscribe.set(this, new Subject());
|
1469
1475
|
this.datepicker = datepicker;
|
1470
1476
|
}
|
1471
|
-
set customDates(value) {
|
1472
|
-
/* istanbul ignore else */
|
1473
|
-
if (value) {
|
1474
|
-
__classPrivateFieldGet(this, _SkyDayPickerComponent_instances, "m", _SkyDayPickerComponent_applyCustomDates).call(this, value, this.rows);
|
1475
|
-
}
|
1476
|
-
}
|
1477
1477
|
ngOnInit() {
|
1478
1478
|
this.datepicker.stepDay = { months: 1 };
|
1479
1479
|
__classPrivateFieldSet(this, _SkyDayPickerComponent_initialDate, this.datepicker.activeDate.getDate(), "f");
|
@@ -1642,9 +1642,9 @@ _SkyDayPickerComponent_daysInMonth = new WeakMap(), _SkyDayPickerComponent_initi
|
|
1642
1642
|
}
|
1643
1643
|
return undefined;
|
1644
1644
|
};
|
1645
|
-
SkyDayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1646
|
-
SkyDayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1647
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1645
|
+
SkyDayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
|
1646
|
+
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"] }] });
|
1647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
|
1648
1648
|
type: Component,
|
1649
1649
|
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"] }]
|
1650
1650
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { customDates: [{
|
@@ -1723,9 +1723,9 @@ _SkyMonthPickerComponent_instances = new WeakSet(), _SkyMonthPickerComponent_com
|
|
1723
1723
|
}
|
1724
1724
|
this.datepicker.activeDate.setMonth(date);
|
1725
1725
|
};
|
1726
|
-
SkyMonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1727
|
-
SkyMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1728
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1726
|
+
SkyMonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
|
1727
|
+
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"] }] });
|
1728
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
|
1729
1729
|
type: Component,
|
1730
1730
|
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"] }]
|
1731
1731
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
|
@@ -1804,9 +1804,9 @@ _SkyYearPickerComponent_instances = new WeakSet(), _SkyYearPickerComponent_compa
|
|
1804
1804
|
}
|
1805
1805
|
this.datepicker.activeDate.setFullYear(date);
|
1806
1806
|
};
|
1807
|
-
SkyYearPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1808
|
-
SkyYearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1807
|
+
SkyYearPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
|
1808
|
+
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"] }] });
|
1809
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
|
1810
1810
|
type: Component,
|
1811
1811
|
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"] }]
|
1812
1812
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
|
@@ -1816,6 +1816,13 @@ var _SkyDatepickerCalendarComponent_formatter, _SkyDatepickerCalendarComponent__
|
|
1816
1816
|
* @internal
|
1817
1817
|
*/
|
1818
1818
|
class SkyDatepickerCalendarComponent {
|
1819
|
+
/** starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) */
|
1820
|
+
set startingDay(start) {
|
1821
|
+
__classPrivateFieldSet(this, _SkyDatepickerCalendarComponent__startingDay, start ?? 0, "f");
|
1822
|
+
}
|
1823
|
+
get startingDay() {
|
1824
|
+
return __classPrivateFieldGet(this, _SkyDatepickerCalendarComponent__startingDay, "f");
|
1825
|
+
}
|
1819
1826
|
constructor(config) {
|
1820
1827
|
this.calendarDateRangeChange = new EventEmitter();
|
1821
1828
|
this.calendarModeChange = new EventEmitter();
|
@@ -1827,13 +1834,6 @@ class SkyDatepickerCalendarComponent {
|
|
1827
1834
|
__classPrivateFieldSet(this, _SkyDatepickerCalendarComponent_config, config, "f");
|
1828
1835
|
this.configureOptions();
|
1829
1836
|
}
|
1830
|
-
/** starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) */
|
1831
|
-
set startingDay(start) {
|
1832
|
-
__classPrivateFieldSet(this, _SkyDatepickerCalendarComponent__startingDay, start ?? 0, "f");
|
1833
|
-
}
|
1834
|
-
get startingDay() {
|
1835
|
-
return __classPrivateFieldGet(this, _SkyDatepickerCalendarComponent__startingDay, "f");
|
1836
|
-
}
|
1837
1837
|
configureOptions() {
|
1838
1838
|
Object.assign(this, __classPrivateFieldGet(this, _SkyDatepickerCalendarComponent_config, "f"));
|
1839
1839
|
}
|
@@ -1865,9 +1865,9 @@ class SkyDatepickerCalendarComponent {
|
|
1865
1865
|
}
|
1866
1866
|
}
|
1867
1867
|
_SkyDatepickerCalendarComponent_formatter = new WeakMap(), _SkyDatepickerCalendarComponent__startingDay = new WeakMap(), _SkyDatepickerCalendarComponent_config = new WeakMap();
|
1868
|
-
SkyDatepickerCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
1869
|
-
SkyDatepickerCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
1870
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
1868
|
+
SkyDatepickerCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerConfigService }], target: i0.ɵɵFactoryTarget.Component });
|
1869
|
+
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" }] });
|
1870
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
|
1871
1871
|
type: Component,
|
1872
1872
|
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"] }]
|
1873
1873
|
}], ctorParameters: function () { return [{ type: SkyDatepickerConfigService }]; }, propDecorators: { customDates: [{
|
@@ -1896,14 +1896,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
1896
1896
|
}]
|
1897
1897
|
}] } });
|
1898
1898
|
|
1899
|
-
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;
|
1899
|
+
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;
|
1900
1900
|
let nextId$1 = 0;
|
1901
1901
|
/**
|
1902
1902
|
* Creates the datepicker button and calendar.
|
1903
1903
|
* You must wrap this component around an input with the `skyDatepickerInput` directive.
|
1904
1904
|
*/
|
1905
1905
|
class SkyDatepickerComponent {
|
1906
|
-
|
1906
|
+
get disabled() {
|
1907
|
+
return __classPrivateFieldGet(this, _SkyDatepickerComponent__disabled, "f");
|
1908
|
+
}
|
1909
|
+
set disabled(value) {
|
1910
|
+
__classPrivateFieldSet(this, _SkyDatepickerComponent__disabled, value, "f");
|
1911
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
|
1912
|
+
}
|
1913
|
+
set selectedDate(value) {
|
1914
|
+
__classPrivateFieldSet(this, _SkyDatepickerComponent__selectedDate, value, "f");
|
1915
|
+
if (this.calendar) {
|
1916
|
+
this.calendar.writeValue(value);
|
1917
|
+
}
|
1918
|
+
}
|
1919
|
+
get selectedDate() {
|
1920
|
+
return __classPrivateFieldGet(this, _SkyDatepickerComponent__selectedDate, "f");
|
1921
|
+
}
|
1922
|
+
set calendarRef(value) {
|
1923
|
+
if (value) {
|
1924
|
+
__classPrivateFieldSet(this, _SkyDatepickerComponent__calendarRef, value, "f");
|
1925
|
+
// Wait for the calendar component to render before gauging dimensions.
|
1926
|
+
setTimeout(() => {
|
1927
|
+
if (this.calendarRef) {
|
1928
|
+
this.calendar?.writeValue(this.selectedDate);
|
1929
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
|
1930
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_createAffixer).call(this);
|
1931
|
+
setTimeout(() => {
|
1932
|
+
if (this.calendarRef) {
|
1933
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_coreAdapter, "f").getFocusableChildrenAndApplyFocus(this.calendarRef, '.sky-datepicker-calendar-inner', false);
|
1934
|
+
this.isVisible = true;
|
1935
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
|
1936
|
+
}
|
1937
|
+
});
|
1938
|
+
}
|
1939
|
+
});
|
1940
|
+
}
|
1941
|
+
}
|
1942
|
+
get calendarRef() {
|
1943
|
+
return __classPrivateFieldGet(this, _SkyDatepickerComponent__calendarRef, "f");
|
1944
|
+
}
|
1945
|
+
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
|
1907
1946
|
this.inputBoxHostService = inputBoxHostService;
|
1908
1947
|
_SkyDatepickerComponent_instances.add(this);
|
1909
1948
|
/**
|
@@ -1934,6 +1973,7 @@ class SkyDatepickerComponent {
|
|
1934
1973
|
_SkyDatepickerComponent_changeDetector.set(this, void 0);
|
1935
1974
|
_SkyDatepickerComponent_coreAdapter.set(this, void 0);
|
1936
1975
|
_SkyDatepickerComponent_overlayService.set(this, void 0);
|
1976
|
+
_SkyDatepickerComponent_zIndex.set(this, void 0);
|
1937
1977
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_affixService, affixService, "f");
|
1938
1978
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_changeDetector, changeDetector, "f");
|
1939
1979
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_coreAdapter, coreAdapter, "f");
|
@@ -1941,6 +1981,7 @@ class SkyDatepickerComponent {
|
|
1941
1981
|
const uniqueId = nextId$1++;
|
1942
1982
|
this.calendarId = `sky-datepicker-calendar-${uniqueId}`;
|
1943
1983
|
this.triggerButtonId = `sky-datepicker-button-${uniqueId}`;
|
1984
|
+
__classPrivateFieldSet(this, _SkyDatepickerComponent_zIndex, stackingContext?.zIndex, "f");
|
1944
1985
|
// Update icons when theme changes.
|
1945
1986
|
themeSvc?.settingsChange
|
1946
1987
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f")))
|
@@ -1948,45 +1989,6 @@ class SkyDatepickerComponent {
|
|
1948
1989
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
|
1949
1990
|
});
|
1950
1991
|
}
|
1951
|
-
get disabled() {
|
1952
|
-
return __classPrivateFieldGet(this, _SkyDatepickerComponent__disabled, "f");
|
1953
|
-
}
|
1954
|
-
set disabled(value) {
|
1955
|
-
__classPrivateFieldSet(this, _SkyDatepickerComponent__disabled, value, "f");
|
1956
|
-
__classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
|
1957
|
-
}
|
1958
|
-
set selectedDate(value) {
|
1959
|
-
__classPrivateFieldSet(this, _SkyDatepickerComponent__selectedDate, value, "f");
|
1960
|
-
if (this.calendar) {
|
1961
|
-
this.calendar.writeValue(value);
|
1962
|
-
}
|
1963
|
-
}
|
1964
|
-
get selectedDate() {
|
1965
|
-
return __classPrivateFieldGet(this, _SkyDatepickerComponent__selectedDate, "f");
|
1966
|
-
}
|
1967
|
-
set calendarRef(value) {
|
1968
|
-
if (value) {
|
1969
|
-
__classPrivateFieldSet(this, _SkyDatepickerComponent__calendarRef, value, "f");
|
1970
|
-
// Wait for the calendar component to render before gauging dimensions.
|
1971
|
-
setTimeout(() => {
|
1972
|
-
if (this.calendarRef) {
|
1973
|
-
this.calendar?.writeValue(this.selectedDate);
|
1974
|
-
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
|
1975
|
-
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_createAffixer).call(this);
|
1976
|
-
setTimeout(() => {
|
1977
|
-
if (this.calendarRef) {
|
1978
|
-
__classPrivateFieldGet(this, _SkyDatepickerComponent_coreAdapter, "f").getFocusableChildrenAndApplyFocus(this.calendarRef, '.sky-datepicker-calendar-inner', false);
|
1979
|
-
this.isVisible = true;
|
1980
|
-
__classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
|
1981
|
-
}
|
1982
|
-
});
|
1983
|
-
}
|
1984
|
-
});
|
1985
|
-
}
|
1986
|
-
}
|
1987
|
-
get calendarRef() {
|
1988
|
-
return __classPrivateFieldGet(this, _SkyDatepickerComponent__calendarRef, "f");
|
1989
|
-
}
|
1990
1992
|
ngOnInit() {
|
1991
1993
|
if (this.inputBoxHostService && this.inputTemplateRef) {
|
1992
1994
|
this.inputBoxHostService.populate({
|
@@ -2058,7 +2060,7 @@ class SkyDatepickerComponent {
|
|
2058
2060
|
}
|
2059
2061
|
}
|
2060
2062
|
}
|
2061
|
-
_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() {
|
2063
|
+
_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() {
|
2062
2064
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
|
2063
2065
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyOverlay).call(this);
|
2064
2066
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_removePickerEventListeners).call(this);
|
@@ -2104,6 +2106,13 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
|
|
2104
2106
|
enableClose: false,
|
2105
2107
|
enablePointerEvents: false,
|
2106
2108
|
});
|
2109
|
+
if (__classPrivateFieldGet(this, _SkyDatepickerComponent_zIndex, "f")) {
|
2110
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_zIndex, "f")
|
2111
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f")))
|
2112
|
+
.subscribe((zIndex) => {
|
2113
|
+
overlay.componentRef.instance.zIndex = zIndex.toString(10);
|
2114
|
+
});
|
2115
|
+
}
|
2107
2116
|
overlay.backdropClick
|
2108
2117
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f")))
|
2109
2118
|
.subscribe(() => {
|
@@ -2142,15 +2151,20 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
|
|
2142
2151
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_customDatesSubscription, undefined, "f");
|
2143
2152
|
}
|
2144
2153
|
};
|
2145
|
-
SkyDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
2146
|
-
SkyDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
2147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
2154
|
+
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 });
|
2155
|
+
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 });
|
2156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
|
2148
2157
|
type: Component,
|
2149
2158
|
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"] }]
|
2150
2159
|
}], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
|
2151
2160
|
type: Optional
|
2152
2161
|
}] }, { type: i3$2.SkyThemeService, decorators: [{
|
2153
2162
|
type: Optional
|
2163
|
+
}] }, { type: undefined, decorators: [{
|
2164
|
+
type: Optional
|
2165
|
+
}, {
|
2166
|
+
type: Inject,
|
2167
|
+
args: [SKY_STACKING_CONTEXT]
|
2154
2168
|
}] }]; }, propDecorators: { pickerClass: [{
|
2155
2169
|
type: Input
|
2156
2170
|
}], calendarDateRangeChange: [{
|
@@ -2199,63 +2213,6 @@ const SKY_FUZZY_DATEPICKER_VALIDATOR = {
|
|
2199
2213
|
multi: true,
|
2200
2214
|
};
|
2201
2215
|
class SkyFuzzyDatepickerInputDirective {
|
2202
|
-
constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, resourcesService, datepickerComponent) {
|
2203
|
-
_SkyFuzzyDatepickerInputDirective_instances.add(this);
|
2204
|
-
/**
|
2205
|
-
* Whether to disable date validation on the fuzzy datepicker input.
|
2206
|
-
* @default false
|
2207
|
-
*/
|
2208
|
-
this.skyDatepickerNoValidate = false;
|
2209
|
-
_SkyFuzzyDatepickerInputDirective_control.set(this, void 0);
|
2210
|
-
_SkyFuzzyDatepickerInputDirective_dateFormatter.set(this, new SkyDateFormatter());
|
2211
|
-
_SkyFuzzyDatepickerInputDirective_locale.set(this, void 0);
|
2212
|
-
_SkyFuzzyDatepickerInputDirective_preferredShortDateFormat.set(this, void 0);
|
2213
|
-
_SkyFuzzyDatepickerInputDirective_ngUnsubscribe.set(this, new Subject());
|
2214
|
-
_SkyFuzzyDatepickerInputDirective__futureDisabled.set(this, false);
|
2215
|
-
_SkyFuzzyDatepickerInputDirective__dateFormat.set(this, void 0);
|
2216
|
-
_SkyFuzzyDatepickerInputDirective__disabled.set(this, false);
|
2217
|
-
_SkyFuzzyDatepickerInputDirective__maxDate.set(this, void 0);
|
2218
|
-
_SkyFuzzyDatepickerInputDirective__minDate.set(this, void 0);
|
2219
|
-
_SkyFuzzyDatepickerInputDirective__startingDay.set(this, void 0);
|
2220
|
-
_SkyFuzzyDatepickerInputDirective__value.set(this, void 0);
|
2221
|
-
_SkyFuzzyDatepickerInputDirective__yearRequired.set(this, false);
|
2222
|
-
_SkyFuzzyDatepickerInputDirective_changeDetector.set(this, void 0);
|
2223
|
-
_SkyFuzzyDatepickerInputDirective_configService.set(this, void 0);
|
2224
|
-
_SkyFuzzyDatepickerInputDirective_elementRef.set(this, void 0);
|
2225
|
-
_SkyFuzzyDatepickerInputDirective_fuzzyDateService.set(this, void 0);
|
2226
|
-
_SkyFuzzyDatepickerInputDirective_renderer.set(this, void 0);
|
2227
|
-
_SkyFuzzyDatepickerInputDirective_resourcesService.set(this, void 0);
|
2228
|
-
_SkyFuzzyDatepickerInputDirective_datepickerComponent.set(this, void 0);
|
2229
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2230
|
-
// istanbul ignore next
|
2231
|
-
_SkyFuzzyDatepickerInputDirective_onChange.set(this, (_) => { });
|
2232
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2233
|
-
// istanbul ignore next
|
2234
|
-
_SkyFuzzyDatepickerInputDirective_onTouched.set(this, () => { });
|
2235
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2236
|
-
// istanbul ignore next
|
2237
|
-
_SkyFuzzyDatepickerInputDirective_onValidatorChange.set(this, () => { });
|
2238
|
-
if (!datepickerComponent) {
|
2239
|
-
throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
|
2240
|
-
'`<sky-datepicker>` component!');
|
2241
|
-
}
|
2242
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_changeDetector, changeDetector, "f");
|
2243
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_configService, configService, "f");
|
2244
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_elementRef, elementRef, "f");
|
2245
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, fuzzyDateService, "f");
|
2246
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_renderer, renderer, "f");
|
2247
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_resourcesService, resourcesService, "f");
|
2248
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, datepickerComponent, "f");
|
2249
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_locale, localeProvider.defaultLocale, "f");
|
2250
|
-
localeProvider
|
2251
|
-
.getLocaleInfo()
|
2252
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_ngUnsubscribe, "f")))
|
2253
|
-
.subscribe((localeInfo) => {
|
2254
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_locale, localeInfo.locale, "f");
|
2255
|
-
SkyDateFormatter.setLocale(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_locale, "f"));
|
2256
|
-
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
|
2257
|
-
});
|
2258
|
-
}
|
2259
2216
|
/**
|
2260
2217
|
* The date format for the input. Place this attribute on the `input` element
|
2261
2218
|
* to override the default in `SkyDatepickerConfigService`.
|
@@ -2353,6 +2310,63 @@ class SkyFuzzyDatepickerInputDirective {
|
|
2353
2310
|
get yearRequired() {
|
2354
2311
|
return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__yearRequired, "f");
|
2355
2312
|
}
|
2313
|
+
constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, resourcesService, datepickerComponent) {
|
2314
|
+
_SkyFuzzyDatepickerInputDirective_instances.add(this);
|
2315
|
+
/**
|
2316
|
+
* Whether to disable date validation on the fuzzy datepicker input.
|
2317
|
+
* @default false
|
2318
|
+
*/
|
2319
|
+
this.skyDatepickerNoValidate = false;
|
2320
|
+
_SkyFuzzyDatepickerInputDirective_control.set(this, void 0);
|
2321
|
+
_SkyFuzzyDatepickerInputDirective_dateFormatter.set(this, new SkyDateFormatter());
|
2322
|
+
_SkyFuzzyDatepickerInputDirective_locale.set(this, void 0);
|
2323
|
+
_SkyFuzzyDatepickerInputDirective_preferredShortDateFormat.set(this, void 0);
|
2324
|
+
_SkyFuzzyDatepickerInputDirective_ngUnsubscribe.set(this, new Subject());
|
2325
|
+
_SkyFuzzyDatepickerInputDirective__futureDisabled.set(this, false);
|
2326
|
+
_SkyFuzzyDatepickerInputDirective__dateFormat.set(this, void 0);
|
2327
|
+
_SkyFuzzyDatepickerInputDirective__disabled.set(this, false);
|
2328
|
+
_SkyFuzzyDatepickerInputDirective__maxDate.set(this, void 0);
|
2329
|
+
_SkyFuzzyDatepickerInputDirective__minDate.set(this, void 0);
|
2330
|
+
_SkyFuzzyDatepickerInputDirective__startingDay.set(this, void 0);
|
2331
|
+
_SkyFuzzyDatepickerInputDirective__value.set(this, void 0);
|
2332
|
+
_SkyFuzzyDatepickerInputDirective__yearRequired.set(this, false);
|
2333
|
+
_SkyFuzzyDatepickerInputDirective_changeDetector.set(this, void 0);
|
2334
|
+
_SkyFuzzyDatepickerInputDirective_configService.set(this, void 0);
|
2335
|
+
_SkyFuzzyDatepickerInputDirective_elementRef.set(this, void 0);
|
2336
|
+
_SkyFuzzyDatepickerInputDirective_fuzzyDateService.set(this, void 0);
|
2337
|
+
_SkyFuzzyDatepickerInputDirective_renderer.set(this, void 0);
|
2338
|
+
_SkyFuzzyDatepickerInputDirective_resourcesService.set(this, void 0);
|
2339
|
+
_SkyFuzzyDatepickerInputDirective_datepickerComponent.set(this, void 0);
|
2340
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2341
|
+
// istanbul ignore next
|
2342
|
+
_SkyFuzzyDatepickerInputDirective_onChange.set(this, (_) => { });
|
2343
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2344
|
+
// istanbul ignore next
|
2345
|
+
_SkyFuzzyDatepickerInputDirective_onTouched.set(this, () => { });
|
2346
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2347
|
+
// istanbul ignore next
|
2348
|
+
_SkyFuzzyDatepickerInputDirective_onValidatorChange.set(this, () => { });
|
2349
|
+
if (!datepickerComponent) {
|
2350
|
+
throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
|
2351
|
+
'`<sky-datepicker>` component!');
|
2352
|
+
}
|
2353
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_changeDetector, changeDetector, "f");
|
2354
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_configService, configService, "f");
|
2355
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_elementRef, elementRef, "f");
|
2356
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_fuzzyDateService, fuzzyDateService, "f");
|
2357
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_renderer, renderer, "f");
|
2358
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_resourcesService, resourcesService, "f");
|
2359
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_datepickerComponent, datepickerComponent, "f");
|
2360
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_locale, localeProvider.defaultLocale, "f");
|
2361
|
+
localeProvider
|
2362
|
+
.getLocaleInfo()
|
2363
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_ngUnsubscribe, "f")))
|
2364
|
+
.subscribe((localeInfo) => {
|
2365
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_locale, localeInfo.locale, "f");
|
2366
|
+
SkyDateFormatter.setLocale(__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_locale, "f"));
|
2367
|
+
__classPrivateFieldSet(this, _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
|
2368
|
+
});
|
2369
|
+
}
|
2356
2370
|
ngOnInit() {
|
2357
2371
|
if (this.yearRequired) {
|
2358
2372
|
if (this.dateFormat?.toLowerCase().indexOf('y') === -1) {
|
@@ -2594,12 +2608,12 @@ _SkyFuzzyDatepickerInputDirective_control = new WeakMap(), _SkyFuzzyDatepickerIn
|
|
2594
2608
|
}
|
2595
2609
|
__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_instances, "m", _SkyFuzzyDatepickerInputDirective_setInputElementValue).call(this, formattedDate || '');
|
2596
2610
|
};
|
2597
|
-
SkyFuzzyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
2598
|
-
SkyFuzzyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1
|
2611
|
+
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 });
|
2612
|
+
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: [
|
2599
2613
|
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
2600
2614
|
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
2601
2615
|
], ngImport: i0 });
|
2602
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
2616
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
|
2603
2617
|
type: Directive,
|
2604
2618
|
args: [{
|
2605
2619
|
selector: '[skyFuzzyDatepickerInput]',
|
@@ -2649,65 +2663,6 @@ const SKY_DATEPICKER_VALIDATOR = {
|
|
2649
2663
|
multi: true,
|
2650
2664
|
};
|
2651
2665
|
class SkyDatepickerInputDirective {
|
2652
|
-
constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
|
2653
|
-
_SkyDatepickerInputDirective_instances.add(this);
|
2654
|
-
/**
|
2655
|
-
* Whether to disable date validation on the datepicker input.
|
2656
|
-
* @default false
|
2657
|
-
*/
|
2658
|
-
this.skyDatepickerNoValidate = false;
|
2659
|
-
_SkyDatepickerInputDirective_control.set(this, void 0);
|
2660
|
-
_SkyDatepickerInputDirective_dateFormatter.set(this, new SkyDateFormatter());
|
2661
|
-
_SkyDatepickerInputDirective_initialPlaceholder.set(this, void 0);
|
2662
|
-
_SkyDatepickerInputDirective_preferredShortDateFormat.set(this, void 0);
|
2663
|
-
_SkyDatepickerInputDirective_ngUnsubscribe.set(this, new Subject());
|
2664
|
-
_SkyDatepickerInputDirective__dateFormat.set(this, void 0);
|
2665
|
-
_SkyDatepickerInputDirective__disabled.set(this, false);
|
2666
|
-
_SkyDatepickerInputDirective__maxDate.set(this, void 0);
|
2667
|
-
_SkyDatepickerInputDirective__minDate.set(this, void 0);
|
2668
|
-
_SkyDatepickerInputDirective__startingDay.set(this, void 0);
|
2669
|
-
_SkyDatepickerInputDirective__strict.set(this, false);
|
2670
|
-
_SkyDatepickerInputDirective__value.set(this, void 0);
|
2671
|
-
_SkyDatepickerInputDirective_adapter.set(this, void 0);
|
2672
|
-
_SkyDatepickerInputDirective_changeDetector.set(this, void 0);
|
2673
|
-
_SkyDatepickerInputDirective_configService.set(this, void 0);
|
2674
|
-
_SkyDatepickerInputDirective_elementRef.set(this, void 0);
|
2675
|
-
_SkyDatepickerInputDirective_localeProvider.set(this, void 0);
|
2676
|
-
_SkyDatepickerInputDirective_renderer.set(this, void 0);
|
2677
|
-
_SkyDatepickerInputDirective_resourcesService.set(this, void 0);
|
2678
|
-
_SkyDatepickerInputDirective_datepickerComponent.set(this, void 0);
|
2679
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2680
|
-
// istanbul ignore next
|
2681
|
-
_SkyDatepickerInputDirective_onChange.set(this, (_) => { });
|
2682
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2683
|
-
// istanbul ignore next
|
2684
|
-
_SkyDatepickerInputDirective_onTouched.set(this, () => { });
|
2685
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2686
|
-
// istanbul ignore next
|
2687
|
-
_SkyDatepickerInputDirective_onValidatorChange.set(this, () => { });
|
2688
|
-
if (!datepickerComponent) {
|
2689
|
-
throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
|
2690
|
-
'`<sky-datepicker>` component!');
|
2691
|
-
}
|
2692
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_adapter, adapter, "f");
|
2693
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_changeDetector, changeDetector, "f");
|
2694
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_configService, configService, "f");
|
2695
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_elementRef, elementRef, "f");
|
2696
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_localeProvider, localeProvider, "f");
|
2697
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_renderer, renderer, "f");
|
2698
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_resourcesService, resourcesService, "f");
|
2699
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_datepickerComponent, datepickerComponent, "f");
|
2700
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_initialPlaceholder, __classPrivateFieldGet(this, _SkyDatepickerInputDirective_adapter, "f").getPlaceholder(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f")), "f");
|
2701
|
-
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_updatePlaceholder).call(this);
|
2702
|
-
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_localeProvider, "f")
|
2703
|
-
.getLocaleInfo()
|
2704
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_ngUnsubscribe, "f")))
|
2705
|
-
.subscribe((localeInfo) => {
|
2706
|
-
SkyDateFormatter.setLocale(localeInfo.locale);
|
2707
|
-
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
|
2708
|
-
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_applyDateFormat).call(this);
|
2709
|
-
});
|
2710
|
-
}
|
2711
2666
|
/**
|
2712
2667
|
* The date format for the input. Place this attribute on the `input` element
|
2713
2668
|
* to override the default in the `SkyDatepickerConfigService`.
|
@@ -2808,6 +2763,65 @@ class SkyDatepickerInputDirective {
|
|
2808
2763
|
get strict() {
|
2809
2764
|
return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__strict, "f");
|
2810
2765
|
}
|
2766
|
+
constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
|
2767
|
+
_SkyDatepickerInputDirective_instances.add(this);
|
2768
|
+
/**
|
2769
|
+
* Whether to disable date validation on the datepicker input.
|
2770
|
+
* @default false
|
2771
|
+
*/
|
2772
|
+
this.skyDatepickerNoValidate = false;
|
2773
|
+
_SkyDatepickerInputDirective_control.set(this, void 0);
|
2774
|
+
_SkyDatepickerInputDirective_dateFormatter.set(this, new SkyDateFormatter());
|
2775
|
+
_SkyDatepickerInputDirective_initialPlaceholder.set(this, void 0);
|
2776
|
+
_SkyDatepickerInputDirective_preferredShortDateFormat.set(this, void 0);
|
2777
|
+
_SkyDatepickerInputDirective_ngUnsubscribe.set(this, new Subject());
|
2778
|
+
_SkyDatepickerInputDirective__dateFormat.set(this, void 0);
|
2779
|
+
_SkyDatepickerInputDirective__disabled.set(this, false);
|
2780
|
+
_SkyDatepickerInputDirective__maxDate.set(this, void 0);
|
2781
|
+
_SkyDatepickerInputDirective__minDate.set(this, void 0);
|
2782
|
+
_SkyDatepickerInputDirective__startingDay.set(this, void 0);
|
2783
|
+
_SkyDatepickerInputDirective__strict.set(this, false);
|
2784
|
+
_SkyDatepickerInputDirective__value.set(this, void 0);
|
2785
|
+
_SkyDatepickerInputDirective_adapter.set(this, void 0);
|
2786
|
+
_SkyDatepickerInputDirective_changeDetector.set(this, void 0);
|
2787
|
+
_SkyDatepickerInputDirective_configService.set(this, void 0);
|
2788
|
+
_SkyDatepickerInputDirective_elementRef.set(this, void 0);
|
2789
|
+
_SkyDatepickerInputDirective_localeProvider.set(this, void 0);
|
2790
|
+
_SkyDatepickerInputDirective_renderer.set(this, void 0);
|
2791
|
+
_SkyDatepickerInputDirective_resourcesService.set(this, void 0);
|
2792
|
+
_SkyDatepickerInputDirective_datepickerComponent.set(this, void 0);
|
2793
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2794
|
+
// istanbul ignore next
|
2795
|
+
_SkyDatepickerInputDirective_onChange.set(this, (_) => { });
|
2796
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2797
|
+
// istanbul ignore next
|
2798
|
+
_SkyDatepickerInputDirective_onTouched.set(this, () => { });
|
2799
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
2800
|
+
// istanbul ignore next
|
2801
|
+
_SkyDatepickerInputDirective_onValidatorChange.set(this, () => { });
|
2802
|
+
if (!datepickerComponent) {
|
2803
|
+
throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
|
2804
|
+
'`<sky-datepicker>` component!');
|
2805
|
+
}
|
2806
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_adapter, adapter, "f");
|
2807
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_changeDetector, changeDetector, "f");
|
2808
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_configService, configService, "f");
|
2809
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_elementRef, elementRef, "f");
|
2810
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_localeProvider, localeProvider, "f");
|
2811
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_renderer, renderer, "f");
|
2812
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_resourcesService, resourcesService, "f");
|
2813
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_datepickerComponent, datepickerComponent, "f");
|
2814
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_initialPlaceholder, __classPrivateFieldGet(this, _SkyDatepickerInputDirective_adapter, "f").getPlaceholder(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f")), "f");
|
2815
|
+
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_updatePlaceholder).call(this);
|
2816
|
+
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_localeProvider, "f")
|
2817
|
+
.getLocaleInfo()
|
2818
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerInputDirective_ngUnsubscribe, "f")))
|
2819
|
+
.subscribe((localeInfo) => {
|
2820
|
+
SkyDateFormatter.setLocale(localeInfo.locale);
|
2821
|
+
__classPrivateFieldSet(this, _SkyDatepickerInputDirective_preferredShortDateFormat, SkyDateFormatter.getPreferredShortDateFormat(), "f");
|
2822
|
+
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_instances, "m", _SkyDatepickerInputDirective_applyDateFormat).call(this);
|
2823
|
+
});
|
2824
|
+
}
|
2811
2825
|
ngOnInit() {
|
2812
2826
|
const element = __classPrivateFieldGet(this, _SkyDatepickerInputDirective_elementRef, "f").nativeElement;
|
2813
2827
|
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_renderer, "f").addClass(element, 'sky-form-control');
|
@@ -3074,13 +3088,13 @@ _SkyDatepickerInputDirective_control = new WeakMap(), _SkyDatepickerInputDirecti
|
|
3074
3088
|
}
|
3075
3089
|
}
|
3076
3090
|
};
|
3077
|
-
SkyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
3078
|
-
SkyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1
|
3091
|
+
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 });
|
3092
|
+
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: [
|
3079
3093
|
SKY_DATEPICKER_VALUE_ACCESSOR,
|
3080
3094
|
SKY_DATEPICKER_VALIDATOR,
|
3081
3095
|
SkyDatepickerAdapterService,
|
3082
3096
|
], ngImport: i0 });
|
3083
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
3097
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
|
3084
3098
|
type: Directive,
|
3085
3099
|
args: [{
|
3086
3100
|
selector: '[skyDatepickerInput]',
|
@@ -3121,8 +3135,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
3121
3135
|
|
3122
3136
|
class SkyDatepickerModule {
|
3123
3137
|
}
|
3124
|
-
SkyDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
3125
|
-
SkyDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
3138
|
+
SkyDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
3139
|
+
SkyDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
|
3126
3140
|
SkyDatepickerCalendarInnerComponent,
|
3127
3141
|
SkyDayPickerComponent,
|
3128
3142
|
SkyMonthPickerComponent,
|
@@ -3144,7 +3158,7 @@ SkyDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
3144
3158
|
SkyDatepickerComponent,
|
3145
3159
|
SkyDatepickerInputDirective,
|
3146
3160
|
SkyFuzzyDatepickerInputDirective] });
|
3147
|
-
SkyDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
3161
|
+
SkyDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerService], imports: [CommonModule,
|
3148
3162
|
SkyI18nModule,
|
3149
3163
|
FormsModule,
|
3150
3164
|
SkyIconModule,
|
@@ -3154,7 +3168,7 @@ SkyDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
|
|
3154
3168
|
SkyThemeModule,
|
3155
3169
|
SkyPopoverModule,
|
3156
3170
|
SkyWaitModule] });
|
3157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
3171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDatepickerModule, decorators: [{
|
3158
3172
|
type: NgModule,
|
3159
3173
|
args: [{
|
3160
3174
|
declarations: [
|
@@ -3199,9 +3213,9 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
|
|
3199
3213
|
return 'skyux_date_range_picker_before_date_label';
|
3200
3214
|
}
|
3201
3215
|
}
|
3202
|
-
SkyDateRangePickerEndDateResourceKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
3203
|
-
SkyDateRangePickerEndDateResourceKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1
|
3204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
3216
|
+
SkyDateRangePickerEndDateResourceKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
3217
|
+
SkyDateRangePickerEndDateResourceKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" });
|
3218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
|
3205
3219
|
type: Pipe,
|
3206
3220
|
args: [{
|
3207
3221
|
name: 'skyDateRangePickerEndDateResourceKey',
|
@@ -3216,9 +3230,9 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
|
|
3216
3230
|
return 'skyux_date_range_picker_after_date_label';
|
3217
3231
|
}
|
3218
3232
|
}
|
3219
|
-
SkyDateRangePickerStartDateResourceKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
3220
|
-
SkyDateRangePickerStartDateResourceKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.1
|
3221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
3233
|
+
SkyDateRangePickerStartDateResourceKeyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
3234
|
+
SkyDateRangePickerStartDateResourceKeyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" });
|
3235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
|
3222
3236
|
type: Pipe,
|
3223
3237
|
args: [{
|
3224
3238
|
name: 'skyDateRangePickerStartDateResourceKey',
|
@@ -3706,9 +3720,9 @@ _SkyDateRangeService_calculatorReadyStream = new WeakMap(), _SkyDateRangeService
|
|
3706
3720
|
// Start the count higher than the number of available values
|
3707
3721
|
// provided in the SkyDateRangeCalculatorId enum.
|
3708
3722
|
SkyDateRangeService.lastId = 1000;
|
3709
|
-
SkyDateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
3710
|
-
SkyDateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1
|
3711
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
3723
|
+
SkyDateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangeService, deps: [{ token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
|
3724
|
+
SkyDateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangeService });
|
3725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangeService, decorators: [{
|
3712
3726
|
type: Injectable
|
3713
3727
|
}], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }]; } });
|
3714
3728
|
|
@@ -3735,6 +3749,73 @@ let uniqueId = 0;
|
|
3735
3749
|
* ```
|
3736
3750
|
*/
|
3737
3751
|
class SkyDateRangePickerComponent {
|
3752
|
+
/**
|
3753
|
+
* IDs for the date range options to include in the picker's dropdown.
|
3754
|
+
* The options specify calculator objects that return two `Date` objects to represent date ranges.
|
3755
|
+
* By default, this property includes all `SkyDateRangeCalculatorId` values.
|
3756
|
+
*/
|
3757
|
+
set calculatorIds(value) {
|
3758
|
+
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__calculatorIds, value || [
|
3759
|
+
SkyDateRangeCalculatorId.AnyTime,
|
3760
|
+
SkyDateRangeCalculatorId.Before,
|
3761
|
+
SkyDateRangeCalculatorId.After,
|
3762
|
+
SkyDateRangeCalculatorId.SpecificRange,
|
3763
|
+
SkyDateRangeCalculatorId.Yesterday,
|
3764
|
+
SkyDateRangeCalculatorId.Today,
|
3765
|
+
SkyDateRangeCalculatorId.Tomorrow,
|
3766
|
+
SkyDateRangeCalculatorId.LastWeek,
|
3767
|
+
SkyDateRangeCalculatorId.ThisWeek,
|
3768
|
+
SkyDateRangeCalculatorId.NextWeek,
|
3769
|
+
SkyDateRangeCalculatorId.LastMonth,
|
3770
|
+
SkyDateRangeCalculatorId.ThisMonth,
|
3771
|
+
SkyDateRangeCalculatorId.NextMonth,
|
3772
|
+
SkyDateRangeCalculatorId.LastQuarter,
|
3773
|
+
SkyDateRangeCalculatorId.ThisQuarter,
|
3774
|
+
SkyDateRangeCalculatorId.NextQuarter,
|
3775
|
+
SkyDateRangeCalculatorId.LastCalendarYear,
|
3776
|
+
SkyDateRangeCalculatorId.ThisCalendarYear,
|
3777
|
+
SkyDateRangeCalculatorId.NextCalendarYear,
|
3778
|
+
SkyDateRangeCalculatorId.LastFiscalYear,
|
3779
|
+
SkyDateRangeCalculatorId.ThisFiscalYear,
|
3780
|
+
SkyDateRangeCalculatorId.NextFiscalYear,
|
3781
|
+
], "f");
|
3782
|
+
}
|
3783
|
+
get calculatorIds() {
|
3784
|
+
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__calculatorIds, "f");
|
3785
|
+
}
|
3786
|
+
/**
|
3787
|
+
* The date format for
|
3788
|
+
* [the `sky-datepicker` components](https://developer.blackbaud.com/skyux/components/datepicker)
|
3789
|
+
* that make up the date range picker. The text input is a composite component of
|
3790
|
+
* up to two `sky-datepicker` components.
|
3791
|
+
* @default "MM/DD/YYYY"
|
3792
|
+
*/
|
3793
|
+
set dateFormat(value) {
|
3794
|
+
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__dateFormat, value, "f");
|
3795
|
+
this.dateFormatOrDefault = value || __classPrivateFieldGet(this, _SkyDateRangePickerComponent_preferredShortDateFormat, "f");
|
3796
|
+
}
|
3797
|
+
get dateFormat() {
|
3798
|
+
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__dateFormat, "f");
|
3799
|
+
}
|
3800
|
+
/**
|
3801
|
+
* Whether to disable the date range picker.
|
3802
|
+
* @default false
|
3803
|
+
*/
|
3804
|
+
set disabled(value) {
|
3805
|
+
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__disabled, value, "f");
|
3806
|
+
if (this.formGroup) {
|
3807
|
+
if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent__disabled, "f")) {
|
3808
|
+
this.formGroup.disable();
|
3809
|
+
}
|
3810
|
+
else {
|
3811
|
+
this.formGroup.enable();
|
3812
|
+
}
|
3813
|
+
}
|
3814
|
+
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
|
3815
|
+
}
|
3816
|
+
get disabled() {
|
3817
|
+
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__disabled, "f");
|
3818
|
+
}
|
3738
3819
|
constructor(changeDetector, dateRangeService, formBuilder, localeProvider, ngZone, themeSvc) {
|
3739
3820
|
_SkyDateRangePickerComponent_instances.add(this);
|
3740
3821
|
/**
|
@@ -3817,73 +3898,6 @@ class SkyDateRangePickerComponent {
|
|
3817
3898
|
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
|
3818
3899
|
});
|
3819
3900
|
}
|
3820
|
-
/**
|
3821
|
-
* IDs for the date range options to include in the picker's dropdown.
|
3822
|
-
* The options specify calculator objects that return two `Date` objects to represent date ranges.
|
3823
|
-
* By default, this property includes all `SkyDateRangeCalculatorId` values.
|
3824
|
-
*/
|
3825
|
-
set calculatorIds(value) {
|
3826
|
-
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__calculatorIds, value || [
|
3827
|
-
SkyDateRangeCalculatorId.AnyTime,
|
3828
|
-
SkyDateRangeCalculatorId.Before,
|
3829
|
-
SkyDateRangeCalculatorId.After,
|
3830
|
-
SkyDateRangeCalculatorId.SpecificRange,
|
3831
|
-
SkyDateRangeCalculatorId.Yesterday,
|
3832
|
-
SkyDateRangeCalculatorId.Today,
|
3833
|
-
SkyDateRangeCalculatorId.Tomorrow,
|
3834
|
-
SkyDateRangeCalculatorId.LastWeek,
|
3835
|
-
SkyDateRangeCalculatorId.ThisWeek,
|
3836
|
-
SkyDateRangeCalculatorId.NextWeek,
|
3837
|
-
SkyDateRangeCalculatorId.LastMonth,
|
3838
|
-
SkyDateRangeCalculatorId.ThisMonth,
|
3839
|
-
SkyDateRangeCalculatorId.NextMonth,
|
3840
|
-
SkyDateRangeCalculatorId.LastQuarter,
|
3841
|
-
SkyDateRangeCalculatorId.ThisQuarter,
|
3842
|
-
SkyDateRangeCalculatorId.NextQuarter,
|
3843
|
-
SkyDateRangeCalculatorId.LastCalendarYear,
|
3844
|
-
SkyDateRangeCalculatorId.ThisCalendarYear,
|
3845
|
-
SkyDateRangeCalculatorId.NextCalendarYear,
|
3846
|
-
SkyDateRangeCalculatorId.LastFiscalYear,
|
3847
|
-
SkyDateRangeCalculatorId.ThisFiscalYear,
|
3848
|
-
SkyDateRangeCalculatorId.NextFiscalYear,
|
3849
|
-
], "f");
|
3850
|
-
}
|
3851
|
-
get calculatorIds() {
|
3852
|
-
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__calculatorIds, "f");
|
3853
|
-
}
|
3854
|
-
/**
|
3855
|
-
* The date format for
|
3856
|
-
* [the `sky-datepicker` components](https://developer.blackbaud.com/skyux/components/datepicker)
|
3857
|
-
* that make up the date range picker. The text input is a composite component of
|
3858
|
-
* up to two `sky-datepicker` components.
|
3859
|
-
* @default "MM/DD/YYYY"
|
3860
|
-
*/
|
3861
|
-
set dateFormat(value) {
|
3862
|
-
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__dateFormat, value, "f");
|
3863
|
-
this.dateFormatOrDefault = value || __classPrivateFieldGet(this, _SkyDateRangePickerComponent_preferredShortDateFormat, "f");
|
3864
|
-
}
|
3865
|
-
get dateFormat() {
|
3866
|
-
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__dateFormat, "f");
|
3867
|
-
}
|
3868
|
-
/**
|
3869
|
-
* Whether to disable the date range picker.
|
3870
|
-
* @default false
|
3871
|
-
*/
|
3872
|
-
set disabled(value) {
|
3873
|
-
__classPrivateFieldSet(this, _SkyDateRangePickerComponent__disabled, value, "f");
|
3874
|
-
if (this.formGroup) {
|
3875
|
-
if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent__disabled, "f")) {
|
3876
|
-
this.formGroup.disable();
|
3877
|
-
}
|
3878
|
-
else {
|
3879
|
-
this.formGroup.enable();
|
3880
|
-
}
|
3881
|
-
}
|
3882
|
-
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_changeDetector, "f").markForCheck();
|
3883
|
-
}
|
3884
|
-
get disabled() {
|
3885
|
-
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__disabled, "f");
|
3886
|
-
}
|
3887
3901
|
ngOnInit() {
|
3888
3902
|
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_createForm).call(this);
|
3889
3903
|
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_updateCalculators).call(this).then(() => {
|
@@ -4158,12 +4172,12 @@ _SkyDateRangePickerComponent_value = new WeakMap(), _SkyDateRangePickerComponent
|
|
4158
4172
|
? __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_getCalculatorById).call(this, __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "a", _SkyDateRangePickerComponent_valueOrDefault_get).calculatorId)
|
4159
4173
|
: undefined;
|
4160
4174
|
};
|
4161
|
-
SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
4162
|
-
SkyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
4175
|
+
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 });
|
4176
|
+
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: [
|
4163
4177
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
4164
4178
|
SKY_DATE_RANGE_PICKER_VALIDATOR,
|
4165
4179
|
], 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 });
|
4166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
4180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
|
4167
4181
|
type: Component,
|
4168
4182
|
args: [{ selector: 'sky-date-range-picker', providers: [
|
4169
4183
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
@@ -4187,8 +4201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
4187
4201
|
|
4188
4202
|
class SkyDateRangePickerModule {
|
4189
4203
|
}
|
4190
|
-
SkyDateRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
4191
|
-
SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
4204
|
+
SkyDateRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
4205
|
+
SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent,
|
4192
4206
|
SkyDateRangePickerEndDateResourceKeyPipe,
|
4193
4207
|
SkyDateRangePickerStartDateResourceKeyPipe], imports: [CommonModule,
|
4194
4208
|
FormsModule,
|
@@ -4197,14 +4211,14 @@ SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0"
|
|
4197
4211
|
SkyDatepickerModule,
|
4198
4212
|
SkyDatetimeResourcesModule,
|
4199
4213
|
SkyInputBoxModule], exports: [SkyDateRangePickerComponent] });
|
4200
|
-
SkyDateRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
4214
|
+
SkyDateRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerModule, providers: [SkyDateRangeService], imports: [CommonModule,
|
4201
4215
|
FormsModule,
|
4202
4216
|
ReactiveFormsModule,
|
4203
4217
|
SkyI18nModule,
|
4204
4218
|
SkyDatepickerModule,
|
4205
4219
|
SkyDatetimeResourcesModule,
|
4206
4220
|
SkyInputBoxModule] });
|
4207
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
4221
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
|
4208
4222
|
type: NgModule,
|
4209
4223
|
args: [{
|
4210
4224
|
declarations: [
|
@@ -4226,7 +4240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
4226
4240
|
}]
|
4227
4241
|
}] });
|
4228
4242
|
|
4229
|
-
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;
|
4243
|
+
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;
|
4230
4244
|
let nextId = 0;
|
4231
4245
|
/**
|
4232
4246
|
* Creates a SKY UX-themed replacement for the HTML `input` element with `type="time"`.
|
@@ -4235,46 +4249,6 @@ let nextId = 0;
|
|
4235
4249
|
* with the `skyTimepickerInput` directive.
|
4236
4250
|
*/
|
4237
4251
|
class SkyTimepickerComponent {
|
4238
|
-
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
|
4239
|
-
this.inputBoxHostService = inputBoxHostService;
|
4240
|
-
_SkyTimepickerComponent_instances.add(this);
|
4241
|
-
/**
|
4242
|
-
* Fires when the value in the timepicker input changes.
|
4243
|
-
*/
|
4244
|
-
this.selectedTimeChanged = new EventEmitter();
|
4245
|
-
this.activeTime = new Date();
|
4246
|
-
this.hours = [];
|
4247
|
-
this.is8601 = false;
|
4248
|
-
this.isOpen = false;
|
4249
|
-
this.isVisible = false;
|
4250
|
-
this.localeFormat = 'h:mm A';
|
4251
|
-
this.minutes = [];
|
4252
|
-
this.timeFormat = 'hh';
|
4253
|
-
_SkyTimepickerComponent_affixer.set(this, void 0);
|
4254
|
-
_SkyTimepickerComponent_timepickerUnsubscribe.set(this, new Subject());
|
4255
|
-
_SkyTimepickerComponent_ngUnsubscribe.set(this, new Subject());
|
4256
|
-
_SkyTimepickerComponent_overlay.set(this, void 0);
|
4257
|
-
_SkyTimepickerComponent_overlayKeydownListener.set(this, void 0);
|
4258
|
-
_SkyTimepickerComponent__disabled.set(this, false);
|
4259
|
-
_SkyTimepickerComponent__timepickerRef.set(this, void 0);
|
4260
|
-
_SkyTimepickerComponent_affixService.set(this, void 0);
|
4261
|
-
_SkyTimepickerComponent_changeDetector.set(this, void 0);
|
4262
|
-
_SkyTimepickerComponent_coreAdapter.set(this, void 0);
|
4263
|
-
_SkyTimepickerComponent_overlayService.set(this, void 0);
|
4264
|
-
__classPrivateFieldSet(this, _SkyTimepickerComponent_affixService, affixService, "f");
|
4265
|
-
__classPrivateFieldSet(this, _SkyTimepickerComponent_changeDetector, changeDetector, "f");
|
4266
|
-
__classPrivateFieldSet(this, _SkyTimepickerComponent_coreAdapter, coreAdapter, "f");
|
4267
|
-
__classPrivateFieldSet(this, _SkyTimepickerComponent_overlayService, overlayService, "f");
|
4268
|
-
const uniqueId = nextId++;
|
4269
|
-
this.timepickerId = `sky-timepicker-${uniqueId}`;
|
4270
|
-
this.triggerButtonId = `sky-timepicker-button-${uniqueId}`;
|
4271
|
-
// Update icons when theme changes.
|
4272
|
-
themeSvc?.settingsChange
|
4273
|
-
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f")))
|
4274
|
-
.subscribe(() => {
|
4275
|
-
__classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
|
4276
|
-
});
|
4277
|
-
}
|
4278
4252
|
set disabled(value) {
|
4279
4253
|
__classPrivateFieldSet(this, _SkyTimepickerComponent__disabled, value, "f");
|
4280
4254
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
|
@@ -4378,6 +4352,48 @@ class SkyTimepickerComponent {
|
|
4378
4352
|
get timepickerRef() {
|
4379
4353
|
return __classPrivateFieldGet(this, _SkyTimepickerComponent__timepickerRef, "f");
|
4380
4354
|
}
|
4355
|
+
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
|
4356
|
+
this.inputBoxHostService = inputBoxHostService;
|
4357
|
+
_SkyTimepickerComponent_instances.add(this);
|
4358
|
+
/**
|
4359
|
+
* Fires when the value in the timepicker input changes.
|
4360
|
+
*/
|
4361
|
+
this.selectedTimeChanged = new EventEmitter();
|
4362
|
+
this.activeTime = new Date();
|
4363
|
+
this.hours = [];
|
4364
|
+
this.is8601 = false;
|
4365
|
+
this.isOpen = false;
|
4366
|
+
this.isVisible = false;
|
4367
|
+
this.localeFormat = 'h:mm A';
|
4368
|
+
this.minutes = [];
|
4369
|
+
this.timeFormat = 'hh';
|
4370
|
+
_SkyTimepickerComponent_affixer.set(this, void 0);
|
4371
|
+
_SkyTimepickerComponent_timepickerUnsubscribe.set(this, new Subject());
|
4372
|
+
_SkyTimepickerComponent_ngUnsubscribe.set(this, new Subject());
|
4373
|
+
_SkyTimepickerComponent_overlay.set(this, void 0);
|
4374
|
+
_SkyTimepickerComponent_overlayKeydownListener.set(this, void 0);
|
4375
|
+
_SkyTimepickerComponent__disabled.set(this, false);
|
4376
|
+
_SkyTimepickerComponent__timepickerRef.set(this, void 0);
|
4377
|
+
_SkyTimepickerComponent_affixService.set(this, void 0);
|
4378
|
+
_SkyTimepickerComponent_changeDetector.set(this, void 0);
|
4379
|
+
_SkyTimepickerComponent_coreAdapter.set(this, void 0);
|
4380
|
+
_SkyTimepickerComponent_overlayService.set(this, void 0);
|
4381
|
+
_SkyTimepickerComponent_zIndex.set(this, void 0);
|
4382
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_affixService, affixService, "f");
|
4383
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_changeDetector, changeDetector, "f");
|
4384
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_coreAdapter, coreAdapter, "f");
|
4385
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_overlayService, overlayService, "f");
|
4386
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_zIndex, stackingContext?.zIndex, "f");
|
4387
|
+
const uniqueId = nextId++;
|
4388
|
+
this.timepickerId = `sky-timepicker-${uniqueId}`;
|
4389
|
+
this.triggerButtonId = `sky-timepicker-button-${uniqueId}`;
|
4390
|
+
// Update icons when theme changes.
|
4391
|
+
themeSvc?.settingsChange
|
4392
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f")))
|
4393
|
+
.subscribe(() => {
|
4394
|
+
__classPrivateFieldGet(this, _SkyTimepickerComponent_changeDetector, "f").markForCheck();
|
4395
|
+
});
|
4396
|
+
}
|
4381
4397
|
ngOnInit() {
|
4382
4398
|
this.setFormat(this.timeFormat);
|
4383
4399
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_addKeydownListener).call(this);
|
@@ -4465,7 +4481,7 @@ class SkyTimepickerComponent {
|
|
4465
4481
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_openPicker).call(this);
|
4466
4482
|
}
|
4467
4483
|
}
|
4468
|
-
_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() {
|
4484
|
+
_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() {
|
4469
4485
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
|
4470
4486
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyOverlay).call(this);
|
4471
4487
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_removePickerEventListeners).call(this);
|
@@ -4510,6 +4526,13 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
|
|
4510
4526
|
enableClose: false,
|
4511
4527
|
enablePointerEvents: false,
|
4512
4528
|
});
|
4529
|
+
if (__classPrivateFieldGet(this, _SkyTimepickerComponent_zIndex, "f")) {
|
4530
|
+
__classPrivateFieldGet(this, _SkyTimepickerComponent_zIndex, "f")
|
4531
|
+
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f")))
|
4532
|
+
.subscribe((zIndex) => {
|
4533
|
+
overlay.componentRef.instance.zIndex = zIndex.toString(10);
|
4534
|
+
});
|
4535
|
+
}
|
4513
4536
|
overlay.backdropClick
|
4514
4537
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f")))
|
4515
4538
|
.subscribe(() => {
|
@@ -4548,15 +4571,20 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
|
|
4548
4571
|
/* istanbul ignore next */
|
4549
4572
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_overlayKeydownListener, "f")?.unsubscribe();
|
4550
4573
|
};
|
4551
|
-
SkyTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
4552
|
-
SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1
|
4553
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
4574
|
+
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 });
|
4575
|
+
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 });
|
4576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
4554
4577
|
type: Component,
|
4555
|
-
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"] }]
|
4578
|
+
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"] }]
|
4556
4579
|
}], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
|
4557
4580
|
type: Optional
|
4558
4581
|
}] }, { type: i3$2.SkyThemeService, decorators: [{
|
4559
4582
|
type: Optional
|
4583
|
+
}] }, { type: undefined, decorators: [{
|
4584
|
+
type: Optional
|
4585
|
+
}, {
|
4586
|
+
type: Inject,
|
4587
|
+
args: [SKY_STACKING_CONTEXT]
|
4560
4588
|
}] }]; }, propDecorators: { selectedTimeChanged: [{
|
4561
4589
|
type: Output
|
4562
4590
|
}], timepickerRef: [{
|
@@ -4600,31 +4628,6 @@ const SKY_TIMEPICKER_VALIDATOR = {
|
|
4600
4628
|
multi: true,
|
4601
4629
|
};
|
4602
4630
|
class SkyTimepickerInputDirective {
|
4603
|
-
constructor(renderer, elRef, resourcesService, changeDetector) {
|
4604
|
-
_SkyTimepickerInputDirective_instances.add(this);
|
4605
|
-
_SkyTimepickerInputDirective__timeFormat.set(this, 'hh');
|
4606
|
-
_SkyTimepickerInputDirective_control.set(this, void 0);
|
4607
|
-
_SkyTimepickerInputDirective__disabled.set(this, false);
|
4608
|
-
_SkyTimepickerInputDirective__modelValue.set(this, void 0);
|
4609
|
-
_SkyTimepickerInputDirective__skyTimepickerInput.set(this, void 0);
|
4610
|
-
_SkyTimepickerInputDirective_renderer.set(this, void 0);
|
4611
|
-
_SkyTimepickerInputDirective_elRef.set(this, void 0);
|
4612
|
-
_SkyTimepickerInputDirective_resourcesService.set(this, void 0);
|
4613
|
-
_SkyTimepickerInputDirective_changeDetector.set(this, void 0);
|
4614
|
-
/* istanbul ignore next */
|
4615
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
|
4616
|
-
_SkyTimepickerInputDirective__onChange.set(this, (_) => { });
|
4617
|
-
/* istanbul ignore next */
|
4618
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
4619
|
-
_SkyTimepickerInputDirective__onTouched.set(this, () => { });
|
4620
|
-
/* istanbul ignore next */
|
4621
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
4622
|
-
_SkyTimepickerInputDirective__validatorChange.set(this, () => { });
|
4623
|
-
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_renderer, renderer, "f");
|
4624
|
-
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_elRef, elRef, "f");
|
4625
|
-
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_resourcesService, resourcesService, "f");
|
4626
|
-
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_changeDetector, changeDetector, "f");
|
4627
|
-
}
|
4628
4631
|
// TODO: In a future breaking change - grab the parent component through dependency injection and remove this setter.
|
4629
4632
|
/**
|
4630
4633
|
* Creates the timepicker input field and picker. Place this attribute on an `input` element,
|
@@ -4662,6 +4665,31 @@ class SkyTimepickerInputDirective {
|
|
4662
4665
|
__classPrivateFieldGet(this, _SkyTimepickerInputDirective_instances, "m", _SkyTimepickerInputDirective_updateTimepickerInput).call(this);
|
4663
4666
|
__classPrivateFieldGet(this, _SkyTimepickerInputDirective_renderer, "f").setProperty(__classPrivateFieldGet(this, _SkyTimepickerInputDirective_elRef, "f").nativeElement, 'disabled', value);
|
4664
4667
|
}
|
4668
|
+
constructor(renderer, elRef, resourcesService, changeDetector) {
|
4669
|
+
_SkyTimepickerInputDirective_instances.add(this);
|
4670
|
+
_SkyTimepickerInputDirective__timeFormat.set(this, 'hh');
|
4671
|
+
_SkyTimepickerInputDirective_control.set(this, void 0);
|
4672
|
+
_SkyTimepickerInputDirective__disabled.set(this, false);
|
4673
|
+
_SkyTimepickerInputDirective__modelValue.set(this, void 0);
|
4674
|
+
_SkyTimepickerInputDirective__skyTimepickerInput.set(this, void 0);
|
4675
|
+
_SkyTimepickerInputDirective_renderer.set(this, void 0);
|
4676
|
+
_SkyTimepickerInputDirective_elRef.set(this, void 0);
|
4677
|
+
_SkyTimepickerInputDirective_resourcesService.set(this, void 0);
|
4678
|
+
_SkyTimepickerInputDirective_changeDetector.set(this, void 0);
|
4679
|
+
/* istanbul ignore next */
|
4680
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
|
4681
|
+
_SkyTimepickerInputDirective__onChange.set(this, (_) => { });
|
4682
|
+
/* istanbul ignore next */
|
4683
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
4684
|
+
_SkyTimepickerInputDirective__onTouched.set(this, () => { });
|
4685
|
+
/* istanbul ignore next */
|
4686
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
4687
|
+
_SkyTimepickerInputDirective__validatorChange.set(this, () => { });
|
4688
|
+
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_renderer, renderer, "f");
|
4689
|
+
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_elRef, elRef, "f");
|
4690
|
+
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_resourcesService, resourcesService, "f");
|
4691
|
+
__classPrivateFieldSet(this, _SkyTimepickerInputDirective_changeDetector, changeDetector, "f");
|
4692
|
+
}
|
4665
4693
|
ngOnInit() {
|
4666
4694
|
__classPrivateFieldGet(this, _SkyTimepickerInputDirective_renderer, "f").addClass(__classPrivateFieldGet(this, _SkyTimepickerInputDirective_elRef, "f").nativeElement, 'sky-form-control');
|
4667
4695
|
this.pickerChangedSubscription =
|
@@ -4793,9 +4821,9 @@ _SkyTimepickerInputDirective__timeFormat = new WeakMap(), _SkyTimepickerInputDir
|
|
4793
4821
|
}
|
4794
4822
|
}
|
4795
4823
|
};
|
4796
|
-
SkyTimepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
4797
|
-
SkyTimepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1
|
4798
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
4824
|
+
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 });
|
4825
|
+
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 });
|
4826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
|
4799
4827
|
type: Directive,
|
4800
4828
|
args: [{
|
4801
4829
|
selector: '[skyTimepickerInput]',
|
@@ -4819,22 +4847,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
4819
4847
|
|
4820
4848
|
class SkyTimepickerModule {
|
4821
4849
|
}
|
4822
|
-
SkyTimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1
|
4823
|
-
SkyTimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1
|
4850
|
+
SkyTimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
4851
|
+
SkyTimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
|
4824
4852
|
SkyI18nModule,
|
4825
4853
|
SkyIconModule,
|
4826
4854
|
SkyDatetimeResourcesModule,
|
4827
4855
|
SkyAffixModule,
|
4828
4856
|
SkyOverlayModule,
|
4829
4857
|
SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] });
|
4830
|
-
SkyTimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1
|
4858
|
+
SkyTimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerModule, imports: [CommonModule,
|
4831
4859
|
SkyI18nModule,
|
4832
4860
|
SkyIconModule,
|
4833
4861
|
SkyDatetimeResourcesModule,
|
4834
4862
|
SkyAffixModule,
|
4835
4863
|
SkyOverlayModule,
|
4836
4864
|
SkyThemeModule] });
|
4837
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1
|
4865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyTimepickerModule, decorators: [{
|
4838
4866
|
type: NgModule,
|
4839
4867
|
args: [{
|
4840
4868
|
declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],
|