@skyux/datetime 9.0.0-alpha.1 → 9.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 +9399 -4505
- package/esm2022/index.mjs +14 -23
- package/esm2022/lib/modules/date-pipe/date-pipe.module.mjs +4 -4
- package/esm2022/lib/modules/date-pipe/date.pipe.mjs +15 -14
- package/esm2022/lib/modules/date-pipe/date.service.mjs +76 -0
- package/esm2022/lib/modules/date-pipe/fuzzy-date.pipe.mjs +3 -3
- package/esm2022/lib/modules/date-range-picker/date-range-picker-end-date-resource-key.pipe.mjs +3 -3
- package/esm2022/lib/modules/date-range-picker/date-range-picker-start-date-resource-key.pipe.mjs +3 -3
- package/esm2022/lib/modules/date-range-picker/date-range-picker.component.mjs +6 -6
- package/esm2022/lib/modules/date-range-picker/date-range-picker.module.mjs +5 -9
- package/esm2022/lib/modules/date-range-picker/date-range.service.mjs +3 -3
- package/esm2022/lib/modules/datepicker/datepicker-adapter.service.mjs +3 -3
- package/esm2022/lib/modules/datepicker/datepicker-calendar-inner.component.mjs +4 -4
- package/esm2022/lib/modules/datepicker/datepicker-calendar.component.mjs +3 -3
- package/esm2022/lib/modules/datepicker/datepicker-config.service.mjs +3 -3
- package/esm2022/lib/modules/datepicker/datepicker-input-fuzzy.directive.mjs +6 -18
- package/esm2022/lib/modules/datepicker/datepicker-input.directive.mjs +6 -17
- package/esm2022/lib/modules/datepicker/datepicker.component.mjs +20 -8
- package/esm2022/lib/modules/datepicker/datepicker.module.mjs +6 -13
- package/esm2022/lib/modules/datepicker/datepicker.service.mjs +3 -3
- package/esm2022/lib/modules/datepicker/daypicker-button.component.mjs +3 -3
- package/esm2022/lib/modules/datepicker/daypicker-cell.component.mjs +3 -3
- package/esm2022/lib/modules/datepicker/daypicker.component.mjs +5 -5
- package/esm2022/lib/modules/datepicker/fuzzy-date.service.mjs +3 -3
- package/esm2022/lib/modules/datepicker/monthpicker.component.mjs +5 -5
- package/esm2022/lib/modules/datepicker/yearpicker.component.mjs +5 -5
- package/esm2022/lib/modules/shared/sky-datetime-resources.module.mjs +8 -8
- package/esm2022/lib/modules/timepicker/timepicker.component.mjs +9 -6
- package/esm2022/lib/modules/timepicker/timepicker.directive.mjs +6 -17
- package/esm2022/lib/modules/timepicker/timepicker.module.mjs +6 -13
- package/esm2022/testing/public-api.mjs +3 -3
- package/fesm2022/skyux-datetime.mjs +164 -169
- package/fesm2022/skyux-datetime.mjs.map +1 -1
- package/index.d.ts +23 -22
- package/lib/modules/date-pipe/date.pipe.d.ts +1 -2
- package/lib/modules/date-pipe/date.service.d.ts +13 -0
- package/lib/modules/date-range-picker/date-range-picker.module.d.ts +4 -5
- package/lib/modules/datepicker/datepicker-input-fuzzy.directive.d.ts +3 -3
- package/lib/modules/datepicker/datepicker-input.directive.d.ts +3 -3
- package/lib/modules/datepicker/datepicker.component.d.ts +5 -1
- package/lib/modules/datepicker/datepicker.module.d.ts +7 -8
- package/lib/modules/timepicker/timepicker.directive.d.ts +1 -2
- package/lib/modules/timepicker/timepicker.module.d.ts +5 -6
- package/package.json +13 -13
- package/testing/public-api.d.ts +2 -2
- package/esm2022/lib/modules/date-pipe/date-format-utility.mjs +0 -45
- package/lib/modules/date-pipe/date-format-utility.d.ts +0 -4
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, NgModule,
|
|
2
|
+
import { inject, Injectable, Pipe, NgModule, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener } from '@angular/core';
|
|
3
|
+
import * as i3 from '@skyux/i18n';
|
|
4
|
+
import { SkyAppLocaleProvider, SkyIntlDateFormatter, SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
3
5
|
import { Subject, fromEvent, BehaviorSubject, forkJoin, combineLatest } from 'rxjs';
|
|
4
6
|
import { takeUntil, debounceTime, distinctUntilChanged, first, map } from 'rxjs/operators';
|
|
5
|
-
import * as i3 from '@skyux/i18n';
|
|
6
|
-
import { SkyIntlDateFormatter, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
7
7
|
import moment from 'moment';
|
|
8
8
|
import * as i2 from '@angular/common';
|
|
9
9
|
import { CommonModule } from '@angular/common';
|
|
@@ -12,7 +12,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, UntypedFormControl, Reac
|
|
|
12
12
|
import * as i2$1 from '@skyux/forms';
|
|
13
13
|
import { SkyInputBoxModule } from '@skyux/forms';
|
|
14
14
|
import * as i1 from '@skyux/core';
|
|
15
|
-
import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule
|
|
15
|
+
import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule } from '@skyux/core';
|
|
16
16
|
import * as i3$1 from '@skyux/indicators';
|
|
17
17
|
import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
|
|
18
18
|
import * as i4 from '@skyux/popovers';
|
|
@@ -24,9 +24,12 @@ import { SkyThemeModule } from '@skyux/theme';
|
|
|
24
24
|
// behavior of using the `Intl` API for formatting dates rather than having to register every
|
|
25
25
|
// supported locale.
|
|
26
26
|
// https://github.com/angular/angular/blob/4.4.x/packages/common/src/pipes/date_pipe.ts
|
|
27
|
-
|
|
27
|
+
/**
|
|
28
|
+
* @internal
|
|
29
|
+
*/
|
|
30
|
+
class SkyDateService {
|
|
28
31
|
/* spell-checker:disable */
|
|
29
|
-
|
|
32
|
+
#ALIASES = {
|
|
30
33
|
medium: 'yMMMdjms',
|
|
31
34
|
short: 'yMdjm',
|
|
32
35
|
fullDate: 'yMMMMEEEEd',
|
|
@@ -35,10 +38,26 @@ class SkyDateFormatUtility {
|
|
|
35
38
|
shortDate: 'yMd',
|
|
36
39
|
mediumTime: 'jms',
|
|
37
40
|
shortTime: 'jm',
|
|
38
|
-
};
|
|
41
|
+
};
|
|
39
42
|
/* spell-checker:enable */
|
|
40
|
-
|
|
43
|
+
#defaultFormat = 'short';
|
|
44
|
+
#defaultLocale = 'en-US';
|
|
45
|
+
#ngUnsubscribe = new Subject();
|
|
46
|
+
constructor() {
|
|
47
|
+
inject(SkyAppLocaleProvider)
|
|
48
|
+
.getLocaleInfo()
|
|
49
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
50
|
+
.subscribe((localeInfo) => {
|
|
51
|
+
this.#defaultLocale = localeInfo.locale;
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
ngOnDestroy() {
|
|
55
|
+
this.#ngUnsubscribe.next();
|
|
56
|
+
this.#ngUnsubscribe.complete();
|
|
57
|
+
}
|
|
58
|
+
format(value, locale, format) {
|
|
41
59
|
let date;
|
|
60
|
+
const pattern = format || this.#defaultFormat;
|
|
42
61
|
if (isBlank(value) || value !== value) {
|
|
43
62
|
return undefined;
|
|
44
63
|
}
|
|
@@ -56,9 +75,17 @@ class SkyDateFormatUtility {
|
|
|
56
75
|
else {
|
|
57
76
|
throw new Error('Invalid value: ' + value);
|
|
58
77
|
}
|
|
59
|
-
return SkyIntlDateFormatter.format(date, locale,
|
|
78
|
+
return SkyIntlDateFormatter.format(date, locale || this.#defaultLocale, this.#ALIASES[pattern] || pattern);
|
|
60
79
|
}
|
|
80
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
81
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateService, providedIn: 'root' }); }
|
|
61
82
|
}
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateService, decorators: [{
|
|
84
|
+
type: Injectable,
|
|
85
|
+
args: [{
|
|
86
|
+
providedIn: 'root',
|
|
87
|
+
}]
|
|
88
|
+
}], ctorParameters: function () { return []; } });
|
|
62
89
|
function isBlank(obj) {
|
|
63
90
|
return !obj;
|
|
64
91
|
}
|
|
@@ -73,15 +100,16 @@ function isBlank(obj) {
|
|
|
73
100
|
* ```
|
|
74
101
|
*/
|
|
75
102
|
class SkyDatePipe {
|
|
103
|
+
#dateSvc = inject(SkyDateService);
|
|
76
104
|
#defaultFormat = 'short';
|
|
77
|
-
#format;
|
|
78
105
|
#defaultLocale = 'en-US';
|
|
79
|
-
#
|
|
80
|
-
#value;
|
|
106
|
+
#format;
|
|
81
107
|
#formattedValue;
|
|
108
|
+
#locale;
|
|
82
109
|
#ngUnsubscribe = new Subject();
|
|
83
|
-
|
|
84
|
-
|
|
110
|
+
#value;
|
|
111
|
+
constructor() {
|
|
112
|
+
inject(SkyAppLocaleProvider)
|
|
85
113
|
.getLocaleInfo()
|
|
86
114
|
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
87
115
|
.subscribe((localeInfo) => {
|
|
@@ -111,19 +139,20 @@ class SkyDatePipe {
|
|
|
111
139
|
#updateFormattedValue() {
|
|
112
140
|
const locale = this.#locale || this.#defaultLocale;
|
|
113
141
|
const format = this.#format || this.#defaultFormat;
|
|
114
|
-
this.#formattedValue =
|
|
142
|
+
this.#formattedValue = this.#dateSvc.format(this.#value, locale, format);
|
|
115
143
|
}
|
|
116
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
117
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1
|
|
144
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
145
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false }); }
|
|
118
146
|
}
|
|
119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipe, decorators: [{
|
|
120
148
|
type: Pipe,
|
|
121
149
|
args: [{
|
|
122
150
|
name: 'skyDate',
|
|
123
151
|
pure: false,
|
|
124
152
|
}]
|
|
125
|
-
}], ctorParameters: function () { return [
|
|
153
|
+
}], ctorParameters: function () { return []; } });
|
|
126
154
|
|
|
155
|
+
/* istanbul ignore file */
|
|
127
156
|
/**
|
|
128
157
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
129
158
|
* The contents of this file were automatically generated by
|
|
@@ -165,11 +194,9 @@ const RESOURCES = {
|
|
|
165
194
|
},
|
|
166
195
|
},
|
|
167
196
|
'EN-US': {
|
|
168
|
-
skyux_date_field_default_label: { message: 'Date' },
|
|
169
197
|
skyux_datepicker_trigger_button_label: { message: 'Select date' },
|
|
170
198
|
skyux_timepicker_button_label: { message: 'Choose time' },
|
|
171
199
|
skyux_timepicker_close: { message: 'Done' },
|
|
172
|
-
skyux_timepicker_input_default_label: { message: 'Time' },
|
|
173
200
|
skyux_date_range_picker_default_label: { message: 'Select a date range' },
|
|
174
201
|
skyux_date_range_picker_format_label_specific_range: {
|
|
175
202
|
message: 'Specific range',
|
|
@@ -219,6 +246,7 @@ const RESOURCES = {
|
|
|
219
246
|
skyux_date_range_picker_after_date_label: { message: 'After date' },
|
|
220
247
|
},
|
|
221
248
|
};
|
|
249
|
+
SkyLibResourcesService.addResources(RESOURCES);
|
|
222
250
|
class SkyDatetimeResourcesProvider {
|
|
223
251
|
getString(localeInfo, name) {
|
|
224
252
|
return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
|
|
@@ -228,9 +256,9 @@ class SkyDatetimeResourcesProvider {
|
|
|
228
256
|
* Import into any component library module that needs to use resource strings.
|
|
229
257
|
*/
|
|
230
258
|
class SkyDatetimeResourcesModule {
|
|
231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
232
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
233
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
259
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
260
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] }); }
|
|
261
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [
|
|
234
262
|
{
|
|
235
263
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
236
264
|
useClass: SkyDatetimeResourcesProvider,
|
|
@@ -238,7 +266,7 @@ class SkyDatetimeResourcesModule {
|
|
|
238
266
|
},
|
|
239
267
|
], imports: [SkyI18nModule] }); }
|
|
240
268
|
}
|
|
241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
269
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
|
|
242
270
|
type: NgModule,
|
|
243
271
|
args: [{
|
|
244
272
|
exports: [SkyI18nModule],
|
|
@@ -648,10 +676,10 @@ class SkyFuzzyDateService {
|
|
|
648
676
|
}
|
|
649
677
|
return true;
|
|
650
678
|
}
|
|
651
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
652
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
679
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
680
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' }); }
|
|
653
681
|
}
|
|
654
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
682
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
|
|
655
683
|
type: Injectable,
|
|
656
684
|
args: [{
|
|
657
685
|
providedIn: 'root',
|
|
@@ -691,10 +719,10 @@ class SkyFuzzyDatePipe {
|
|
|
691
719
|
const fuzzyDateLocale = locale || this.#fuzzyDateService.getCurrentLocale();
|
|
692
720
|
return this.#fuzzyDateService.format(value, fuzzyDateFormat, fuzzyDateLocale);
|
|
693
721
|
}
|
|
694
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
695
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1
|
|
722
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
723
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false }); }
|
|
696
724
|
}
|
|
697
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
|
|
698
726
|
type: Pipe,
|
|
699
727
|
args: [{
|
|
700
728
|
name: 'skyFuzzyDate',
|
|
@@ -703,11 +731,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
703
731
|
}], ctorParameters: function () { return [{ type: SkyFuzzyDateService }]; } });
|
|
704
732
|
|
|
705
733
|
class SkyDatePipeModule {
|
|
706
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
707
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
708
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
734
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
735
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipeModule, declarations: [SkyDatePipe, SkyFuzzyDatePipe], imports: [CommonModule, SkyDatetimeResourcesModule], exports: [SkyDatePipe, SkyFuzzyDatePipe] }); }
|
|
736
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [CommonModule, SkyDatetimeResourcesModule] }); }
|
|
709
737
|
}
|
|
710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
738
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipeModule, decorators: [{
|
|
711
739
|
type: NgModule,
|
|
712
740
|
args: [{
|
|
713
741
|
declarations: [SkyDatePipe, SkyFuzzyDatePipe],
|
|
@@ -1254,12 +1282,12 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1254
1282
|
}
|
|
1255
1283
|
return undefined;
|
|
1256
1284
|
}
|
|
1257
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
1258
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
1285
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1286
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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-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{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 }); }
|
|
1259
1287
|
}
|
|
1260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
|
|
1261
1289
|
type: Component,
|
|
1262
|
-
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-
|
|
1290
|
+
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-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{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"] }]
|
|
1263
1291
|
}], propDecorators: { customDates: [{
|
|
1264
1292
|
type: Input
|
|
1265
1293
|
}], startingDay: [{
|
|
@@ -1290,10 +1318,10 @@ class SkyDatepickerAdapterService {
|
|
|
1290
1318
|
setPlaceholder(elementRef, value) {
|
|
1291
1319
|
this.#renderer.setAttribute(elementRef.nativeElement, 'placeholder', value);
|
|
1292
1320
|
}
|
|
1293
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
1294
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
1321
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1322
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerAdapterService }); }
|
|
1295
1323
|
}
|
|
1296
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerAdapterService, decorators: [{
|
|
1297
1325
|
type: Injectable
|
|
1298
1326
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
|
|
1299
1327
|
|
|
@@ -1306,10 +1334,10 @@ class SkyDatepickerConfigService {
|
|
|
1306
1334
|
*/
|
|
1307
1335
|
this.startingDay = 0;
|
|
1308
1336
|
}
|
|
1309
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
1310
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
1337
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1338
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' }); }
|
|
1311
1339
|
}
|
|
1312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
|
|
1313
1341
|
type: Injectable,
|
|
1314
1342
|
args: [{
|
|
1315
1343
|
providedIn: 'root',
|
|
@@ -1327,10 +1355,10 @@ class SkyDatepickerService {
|
|
|
1327
1355
|
*/
|
|
1328
1356
|
this.keyDatePopoverStream = new Subject();
|
|
1329
1357
|
}
|
|
1330
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
1331
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
1358
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1359
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerService }); }
|
|
1332
1360
|
}
|
|
1333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerService, decorators: [{
|
|
1334
1362
|
type: Injectable
|
|
1335
1363
|
}] });
|
|
1336
1364
|
|
|
@@ -1341,10 +1369,10 @@ class SkyDayPickerButtonComponent {
|
|
|
1341
1369
|
constructor(datepicker) {
|
|
1342
1370
|
this.datepicker = datepicker;
|
|
1343
1371
|
}
|
|
1344
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
1345
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
1372
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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"] }] }); }
|
|
1346
1374
|
}
|
|
1347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
|
|
1348
1376
|
type: Component,
|
|
1349
1377
|
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"] }]
|
|
1350
1378
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { date: [{
|
|
@@ -1457,10 +1485,10 @@ class SkyDayPickerCellComponent {
|
|
|
1457
1485
|
}, 500);
|
|
1458
1486
|
}
|
|
1459
1487
|
}
|
|
1460
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
1461
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
1488
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1489
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 }); }
|
|
1462
1490
|
}
|
|
1463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
|
|
1464
1492
|
type: Component,
|
|
1465
1493
|
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" }]
|
|
1466
1494
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }]; }, propDecorators: { activeDateHasChanged: [{
|
|
@@ -1672,12 +1700,12 @@ class SkyDayPickerComponent {
|
|
|
1672
1700
|
}
|
|
1673
1701
|
return undefined;
|
|
1674
1702
|
}
|
|
1675
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
1676
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
1703
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1704
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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\"\n icon=\"chevron-left\"\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\"\n icon=\"chevron-right\"\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", "screenReaderCompletedText"] }, { kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }] }); }
|
|
1677
1705
|
}
|
|
1678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1706
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
|
|
1679
1707
|
type: Component,
|
|
1680
|
-
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
|
|
1708
|
+
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\"\n icon=\"chevron-left\"\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\"\n icon=\"chevron-right\"\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"] }]
|
|
1681
1709
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { customDates: [{
|
|
1682
1710
|
type: Input
|
|
1683
1711
|
}], calendarDateRangeChange: [{
|
|
@@ -1753,12 +1781,12 @@ class SkyMonthPickerComponent {
|
|
|
1753
1781
|
}
|
|
1754
1782
|
this.datepicker.activeDate.setMonth(date);
|
|
1755
1783
|
}
|
|
1756
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
1757
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
1784
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1785
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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\"\n icon=\"chevron-left\"\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\"\n icon=\"chevron-right\"\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"] }] }); }
|
|
1758
1786
|
}
|
|
1759
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1787
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
|
|
1760
1788
|
type: Component,
|
|
1761
|
-
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
|
|
1789
|
+
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\"\n icon=\"chevron-left\"\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\"\n icon=\"chevron-right\"\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"] }]
|
|
1762
1790
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
|
|
1763
1791
|
|
|
1764
1792
|
/**
|
|
@@ -1834,12 +1862,12 @@ class SkyYearPickerComponent {
|
|
|
1834
1862
|
}
|
|
1835
1863
|
this.datepicker.activeDate.setFullYear(date);
|
|
1836
1864
|
}
|
|
1837
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
1838
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
1865
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1866
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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\"\n icon=\"chevron-left\"\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\"\n icon=\"chevron-right\"\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"] }] }); }
|
|
1839
1867
|
}
|
|
1840
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1868
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
|
|
1841
1869
|
type: Component,
|
|
1842
|
-
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
|
|
1870
|
+
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\"\n icon=\"chevron-left\"\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\"\n icon=\"chevron-right\"\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"] }]
|
|
1843
1871
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
|
|
1844
1872
|
|
|
1845
1873
|
/**
|
|
@@ -1895,10 +1923,10 @@ class SkyDatepickerCalendarComponent {
|
|
|
1895
1923
|
this.datepicker?.select(new Date(), false);
|
|
1896
1924
|
}
|
|
1897
1925
|
}
|
|
1898
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
1899
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
1926
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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" }] }); }
|
|
1900
1928
|
}
|
|
1901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1929
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
|
|
1902
1930
|
type: Component,
|
|
1903
1931
|
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"] }]
|
|
1904
1932
|
}], ctorParameters: function () { return [{ type: SkyDatepickerConfigService }]; }, propDecorators: { customDates: [{
|
|
@@ -1984,6 +2012,7 @@ class SkyDatepickerComponent {
|
|
|
1984
2012
|
#affixService;
|
|
1985
2013
|
#changeDetector;
|
|
1986
2014
|
#coreAdapter;
|
|
2015
|
+
#environmentInjector;
|
|
1987
2016
|
#overlayService;
|
|
1988
2017
|
#zIndex;
|
|
1989
2018
|
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
|
|
@@ -1999,6 +2028,10 @@ class SkyDatepickerComponent {
|
|
|
1999
2028
|
* to modify individual dates on the calendar.
|
|
2000
2029
|
*/
|
|
2001
2030
|
this.calendarDateRangeChange = new EventEmitter();
|
|
2031
|
+
/**
|
|
2032
|
+
* @internal
|
|
2033
|
+
*/
|
|
2034
|
+
this.openChange = new EventEmitter();
|
|
2002
2035
|
this.dateChange = new EventEmitter();
|
|
2003
2036
|
this.isDaypickerWaiting = false;
|
|
2004
2037
|
this.isOpen = false;
|
|
@@ -2006,6 +2039,7 @@ class SkyDatepickerComponent {
|
|
|
2006
2039
|
this.#calendarUnsubscribe = new Subject();
|
|
2007
2040
|
this.#ngUnsubscribe = new Subject();
|
|
2008
2041
|
this.#_disabled = false;
|
|
2042
|
+
this.#environmentInjector = inject(EnvironmentInjector);
|
|
2009
2043
|
this.#affixService = affixService;
|
|
2010
2044
|
this.#changeDetector = changeDetector;
|
|
2011
2045
|
this.#coreAdapter = coreAdapter;
|
|
@@ -2031,6 +2065,7 @@ class SkyDatepickerComponent {
|
|
|
2031
2065
|
}
|
|
2032
2066
|
ngOnDestroy() {
|
|
2033
2067
|
this.dateChange.complete();
|
|
2068
|
+
this.openChange.complete();
|
|
2034
2069
|
this.#ngUnsubscribe.next();
|
|
2035
2070
|
this.#ngUnsubscribe.complete();
|
|
2036
2071
|
this.#removePickerEventListeners();
|
|
@@ -2082,7 +2117,7 @@ class SkyDatepickerComponent {
|
|
|
2082
2117
|
}
|
|
2083
2118
|
else {
|
|
2084
2119
|
// If consumer returns an undefined value after custom dates have
|
|
2085
|
-
// already
|
|
2120
|
+
// already been established, remove custom dates.
|
|
2086
2121
|
if (this.customDates) {
|
|
2087
2122
|
this.customDates = undefined;
|
|
2088
2123
|
// Avoid an ExpressionChangedAfterItHasBeenCheckedError.
|
|
@@ -2097,6 +2132,7 @@ class SkyDatepickerComponent {
|
|
|
2097
2132
|
this.#removePickerEventListeners();
|
|
2098
2133
|
this.triggerButtonRef?.nativeElement.focus();
|
|
2099
2134
|
this.isOpen = false;
|
|
2135
|
+
this.openChange.emit(false);
|
|
2100
2136
|
}
|
|
2101
2137
|
#openPicker() {
|
|
2102
2138
|
this.isVisible = false;
|
|
@@ -2106,11 +2142,12 @@ class SkyDatepickerComponent {
|
|
|
2106
2142
|
this.#createOverlay();
|
|
2107
2143
|
this.isOpen = true;
|
|
2108
2144
|
this.#changeDetector.markForCheck();
|
|
2145
|
+
this.openChange.emit(true);
|
|
2109
2146
|
}
|
|
2110
2147
|
#createAffixer() {
|
|
2111
2148
|
if (this.calendarRef && this.triggerButtonRef) {
|
|
2112
2149
|
const affixer = this.#affixService.createAffixer(this.calendarRef);
|
|
2113
|
-
// Hide calendar when trigger button is scrolled off
|
|
2150
|
+
// Hide calendar when trigger button is scrolled off-screen.
|
|
2114
2151
|
affixer.placementChange
|
|
2115
2152
|
.pipe(takeUntil(this.#calendarUnsubscribe))
|
|
2116
2153
|
.subscribe((change) => {
|
|
@@ -2140,6 +2177,7 @@ class SkyDatepickerComponent {
|
|
|
2140
2177
|
wrapperClass: this.pickerClass,
|
|
2141
2178
|
enableClose: false,
|
|
2142
2179
|
enablePointerEvents: false,
|
|
2180
|
+
environmentInjector: this.#environmentInjector,
|
|
2143
2181
|
});
|
|
2144
2182
|
if (this.#zIndex) {
|
|
2145
2183
|
this.#zIndex
|
|
@@ -2190,12 +2228,12 @@ class SkyDatepickerComponent {
|
|
|
2190
2228
|
this.#customDatesSubscription = undefined;
|
|
2191
2229
|
}
|
|
2192
2230
|
}
|
|
2193
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
2194
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
2231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.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 }); }
|
|
2232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", openChange: "openChange" }, 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 icon=\"calendar\" size=\"lg\"></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: "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 }); }
|
|
2195
2233
|
}
|
|
2196
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
2234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
|
|
2197
2235
|
type: Component,
|
|
2198
|
-
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
|
|
2236
|
+
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 icon=\"calendar\" size=\"lg\"></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"] }]
|
|
2199
2237
|
}], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
|
|
2200
2238
|
type: Optional
|
|
2201
2239
|
}] }, { type: i3$2.SkyThemeService, decorators: [{
|
|
@@ -2209,6 +2247,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
2209
2247
|
type: Input
|
|
2210
2248
|
}], calendarDateRangeChange: [{
|
|
2211
2249
|
type: Output
|
|
2250
|
+
}], openChange: [{
|
|
2251
|
+
type: Output
|
|
2212
2252
|
}], calendar: [{
|
|
2213
2253
|
type: ViewChild,
|
|
2214
2254
|
args: [SkyDatepickerCalendarComponent]
|
|
@@ -2374,9 +2414,8 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2374
2414
|
#elementRef;
|
|
2375
2415
|
#fuzzyDateService;
|
|
2376
2416
|
#renderer;
|
|
2377
|
-
#resourcesService;
|
|
2378
2417
|
#datepickerComponent;
|
|
2379
|
-
constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer,
|
|
2418
|
+
constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, datepickerComponent) {
|
|
2380
2419
|
/**
|
|
2381
2420
|
* Whether to disable date validation on the fuzzy datepicker input.
|
|
2382
2421
|
* @default false
|
|
@@ -2405,7 +2444,6 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2405
2444
|
this.#elementRef = elementRef;
|
|
2406
2445
|
this.#fuzzyDateService = fuzzyDateService;
|
|
2407
2446
|
this.#renderer = renderer;
|
|
2408
|
-
this.#resourcesService = resourcesService;
|
|
2409
2447
|
this.#datepickerComponent = datepickerComponent;
|
|
2410
2448
|
this.#locale = localeProvider.defaultLocale;
|
|
2411
2449
|
localeProvider
|
|
@@ -2426,16 +2464,6 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2426
2464
|
}
|
|
2427
2465
|
const element = this.#elementRef.nativeElement;
|
|
2428
2466
|
this.#renderer.addClass(element, 'sky-form-control');
|
|
2429
|
-
const hasAriaLabel = element.getAttribute('aria-label');
|
|
2430
|
-
/* istanbul ignore else */
|
|
2431
|
-
if (!hasAriaLabel) {
|
|
2432
|
-
this.#resourcesService
|
|
2433
|
-
.getString('skyux_date_field_default_label')
|
|
2434
|
-
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2435
|
-
.subscribe((value) => {
|
|
2436
|
-
this.#renderer.setAttribute(element, 'aria-label', value);
|
|
2437
|
-
});
|
|
2438
|
-
}
|
|
2439
2467
|
}
|
|
2440
2468
|
ngAfterContentInit() {
|
|
2441
2469
|
this.#datepickerComponent.dateChange
|
|
@@ -2674,13 +2702,13 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2674
2702
|
}
|
|
2675
2703
|
this.#setInputElementValue(formattedDate || '');
|
|
2676
2704
|
}
|
|
2677
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
2678
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1
|
|
2705
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2706
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.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: [
|
|
2679
2707
|
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
2680
2708
|
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
2681
2709
|
], ngImport: i0 }); }
|
|
2682
2710
|
}
|
|
2683
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
2711
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
|
|
2684
2712
|
type: Directive,
|
|
2685
2713
|
args: [{
|
|
2686
2714
|
selector: '[skyFuzzyDatepickerInput]',
|
|
@@ -2689,7 +2717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
2689
2717
|
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
2690
2718
|
],
|
|
2691
2719
|
}]
|
|
2692
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type:
|
|
2720
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
|
|
2693
2721
|
type: Optional
|
|
2694
2722
|
}] }]; }, propDecorators: { dateFormat: [{
|
|
2695
2723
|
type: Input
|
|
@@ -2854,9 +2882,8 @@ class SkyDatepickerInputDirective {
|
|
|
2854
2882
|
#elementRef;
|
|
2855
2883
|
#localeProvider;
|
|
2856
2884
|
#renderer;
|
|
2857
|
-
#resourcesService;
|
|
2858
2885
|
#datepickerComponent;
|
|
2859
|
-
constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer,
|
|
2886
|
+
constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, datepickerComponent) {
|
|
2860
2887
|
/**
|
|
2861
2888
|
* Whether to disable date validation on the datepicker input.
|
|
2862
2889
|
* @default false
|
|
@@ -2885,7 +2912,6 @@ class SkyDatepickerInputDirective {
|
|
|
2885
2912
|
this.#elementRef = elementRef;
|
|
2886
2913
|
this.#localeProvider = localeProvider;
|
|
2887
2914
|
this.#renderer = renderer;
|
|
2888
|
-
this.#resourcesService = resourcesService;
|
|
2889
2915
|
this.#datepickerComponent = datepickerComponent;
|
|
2890
2916
|
this.#initialPlaceholder = this.#adapter.getPlaceholder(this.#elementRef);
|
|
2891
2917
|
this.#updatePlaceholder();
|
|
@@ -2902,15 +2928,6 @@ class SkyDatepickerInputDirective {
|
|
|
2902
2928
|
ngOnInit() {
|
|
2903
2929
|
const element = this.#elementRef.nativeElement;
|
|
2904
2930
|
this.#renderer.addClass(element, 'sky-form-control');
|
|
2905
|
-
const hasAriaLabel = element.getAttribute('aria-label');
|
|
2906
|
-
if (!hasAriaLabel) {
|
|
2907
|
-
this.#resourcesService
|
|
2908
|
-
.getString('skyux_date_field_default_label')
|
|
2909
|
-
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2910
|
-
.subscribe((value) => {
|
|
2911
|
-
this.#renderer.setAttribute(element, 'aria-label', value);
|
|
2912
|
-
});
|
|
2913
|
-
}
|
|
2914
2931
|
}
|
|
2915
2932
|
ngAfterContentInit() {
|
|
2916
2933
|
this.#datepickerComponent.dateChange
|
|
@@ -3194,14 +3211,14 @@ class SkyDatepickerInputDirective {
|
|
|
3194
3211
|
}
|
|
3195
3212
|
}
|
|
3196
3213
|
}
|
|
3197
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
3198
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1
|
|
3214
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3215
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.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: [
|
|
3199
3216
|
SKY_DATEPICKER_VALUE_ACCESSOR,
|
|
3200
3217
|
SKY_DATEPICKER_VALIDATOR,
|
|
3201
3218
|
SkyDatepickerAdapterService,
|
|
3202
3219
|
], ngImport: i0 }); }
|
|
3203
3220
|
}
|
|
3204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
3221
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
|
|
3205
3222
|
type: Directive,
|
|
3206
3223
|
args: [{
|
|
3207
3224
|
selector: '[skyDatepickerInput]',
|
|
@@ -3211,7 +3228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
3211
3228
|
SkyDatepickerAdapterService,
|
|
3212
3229
|
],
|
|
3213
3230
|
}]
|
|
3214
|
-
}], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type:
|
|
3231
|
+
}], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
|
|
3215
3232
|
type: Optional
|
|
3216
3233
|
}] }]; }, propDecorators: { dateFormat: [{
|
|
3217
3234
|
type: Input
|
|
@@ -3241,8 +3258,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
3241
3258
|
}] } });
|
|
3242
3259
|
|
|
3243
3260
|
class SkyDatepickerModule {
|
|
3244
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
3245
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
3261
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3262
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
|
|
3246
3263
|
SkyDatepickerCalendarInnerComponent,
|
|
3247
3264
|
SkyDayPickerComponent,
|
|
3248
3265
|
SkyMonthPickerComponent,
|
|
@@ -3252,30 +3269,26 @@ class SkyDatepickerModule {
|
|
|
3252
3269
|
SkyFuzzyDatepickerInputDirective,
|
|
3253
3270
|
SkyDayPickerCellComponent,
|
|
3254
3271
|
SkyDayPickerButtonComponent], imports: [CommonModule,
|
|
3255
|
-
SkyI18nModule,
|
|
3256
3272
|
FormsModule,
|
|
3257
3273
|
SkyIconModule,
|
|
3258
3274
|
SkyDatetimeResourcesModule,
|
|
3259
3275
|
SkyAffixModule,
|
|
3260
|
-
SkyOverlayModule,
|
|
3261
3276
|
SkyThemeModule,
|
|
3262
3277
|
SkyPopoverModule,
|
|
3263
3278
|
SkyWaitModule], exports: [SkyDatepickerCalendarComponent,
|
|
3264
3279
|
SkyDatepickerComponent,
|
|
3265
3280
|
SkyDatepickerInputDirective,
|
|
3266
3281
|
SkyFuzzyDatepickerInputDirective] }); }
|
|
3267
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
3268
|
-
SkyI18nModule,
|
|
3282
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerService], imports: [CommonModule,
|
|
3269
3283
|
FormsModule,
|
|
3270
3284
|
SkyIconModule,
|
|
3271
3285
|
SkyDatetimeResourcesModule,
|
|
3272
3286
|
SkyAffixModule,
|
|
3273
|
-
SkyOverlayModule,
|
|
3274
3287
|
SkyThemeModule,
|
|
3275
3288
|
SkyPopoverModule,
|
|
3276
3289
|
SkyWaitModule] }); }
|
|
3277
3290
|
}
|
|
3278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
3291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerModule, decorators: [{
|
|
3279
3292
|
type: NgModule,
|
|
3280
3293
|
args: [{
|
|
3281
3294
|
declarations: [
|
|
@@ -3292,12 +3305,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
3292
3305
|
],
|
|
3293
3306
|
imports: [
|
|
3294
3307
|
CommonModule,
|
|
3295
|
-
SkyI18nModule,
|
|
3296
3308
|
FormsModule,
|
|
3297
3309
|
SkyIconModule,
|
|
3298
3310
|
SkyDatetimeResourcesModule,
|
|
3299
3311
|
SkyAffixModule,
|
|
3300
|
-
SkyOverlayModule,
|
|
3301
3312
|
SkyThemeModule,
|
|
3302
3313
|
SkyPopoverModule,
|
|
3303
3314
|
SkyWaitModule,
|
|
@@ -3319,10 +3330,10 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
|
|
|
3319
3330
|
}
|
|
3320
3331
|
return 'skyux_date_range_picker_before_date_label';
|
|
3321
3332
|
}
|
|
3322
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
3323
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1
|
|
3333
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3334
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }); }
|
|
3324
3335
|
}
|
|
3325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
3336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
|
|
3326
3337
|
type: Pipe,
|
|
3327
3338
|
args: [{
|
|
3328
3339
|
name: 'skyDateRangePickerEndDateResourceKey',
|
|
@@ -3336,10 +3347,10 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
|
|
|
3336
3347
|
}
|
|
3337
3348
|
return 'skyux_date_range_picker_after_date_label';
|
|
3338
3349
|
}
|
|
3339
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
3340
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1
|
|
3350
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3351
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }); }
|
|
3341
3352
|
}
|
|
3342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
3353
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
|
|
3343
3354
|
type: Pipe,
|
|
3344
3355
|
args: [{
|
|
3345
3356
|
name: 'skyDateRangePickerStartDateResourceKey',
|
|
@@ -3824,10 +3835,10 @@ class SkyDateRangeService {
|
|
|
3824
3835
|
this.#calculatorReadyStream.next(true);
|
|
3825
3836
|
});
|
|
3826
3837
|
}
|
|
3827
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
3828
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
3838
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangeService, deps: [{ token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3839
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangeService }); }
|
|
3829
3840
|
}
|
|
3830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
3841
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangeService, decorators: [{
|
|
3831
3842
|
type: Injectable
|
|
3832
3843
|
}], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }]; } });
|
|
3833
3844
|
|
|
@@ -4303,18 +4314,18 @@ class SkyDateRangePickerComponent {
|
|
|
4303
4314
|
/* istanbul ignore next */
|
|
4304
4315
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4305
4316
|
#onTouched;
|
|
4306
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
4307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
4317
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.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 }); }
|
|
4318
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
|
|
4308
4319
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
|
4309
4320
|
SKY_DATE_RANGE_PICKER_VALIDATOR,
|
|
4310
|
-
], 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 [disabled]=\"disabled\">\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 [disabled]=\"disabled\">\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 [disabled]=\"disabled\">\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}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}: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", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent"] }, { kind: "directive", type: i2$1.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4321
|
+
], 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 stacked=\"true\" [disabled]=\"disabled\">\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 stacked=\"true\" [disabled]=\"disabled\">\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 stacked=\"true\" [disabled]=\"disabled\">\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}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}: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", "openChange"] }, { 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", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent"] }, { kind: "directive", type: i2$1.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4311
4322
|
}
|
|
4312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
4323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
|
|
4313
4324
|
type: Component,
|
|
4314
4325
|
args: [{ selector: 'sky-date-range-picker', providers: [
|
|
4315
4326
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
|
4316
4327
|
SKY_DATE_RANGE_PICKER_VALIDATOR,
|
|
4317
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isReady && formGroup\"\n class=\"sky-date-range-picker\"\n [formGroup]=\"formGroup\"\n>\n <div class=\"sky-date-range-picker-form-group\">\n <sky-input-box [disabled]=\"disabled\">\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 [disabled]=\"disabled\">\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 [disabled]=\"disabled\">\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}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}: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"] }]
|
|
4328
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isReady && formGroup\"\n class=\"sky-date-range-picker\"\n [formGroup]=\"formGroup\"\n>\n <div class=\"sky-date-range-picker-form-group\">\n <sky-input-box stacked=\"true\" [disabled]=\"disabled\">\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 stacked=\"true\" [disabled]=\"disabled\">\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 stacked=\"true\" [disabled]=\"disabled\">\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}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}: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"] }]
|
|
4318
4329
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2$2.UntypedFormBuilder }, { type: i3.SkyAppLocaleProvider }, { type: i0.NgZone }, { type: i3$2.SkyThemeService, decorators: [{
|
|
4319
4330
|
type: Optional
|
|
4320
4331
|
}] }]; }, propDecorators: { calculatorIds: [{
|
|
@@ -4332,25 +4343,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
4332
4343
|
}] } });
|
|
4333
4344
|
|
|
4334
4345
|
class SkyDateRangePickerModule {
|
|
4335
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
4336
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
4346
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4347
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent,
|
|
4337
4348
|
SkyDateRangePickerEndDateResourceKeyPipe,
|
|
4338
4349
|
SkyDateRangePickerStartDateResourceKeyPipe], imports: [CommonModule,
|
|
4339
4350
|
FormsModule,
|
|
4340
4351
|
ReactiveFormsModule,
|
|
4341
|
-
SkyI18nModule,
|
|
4342
4352
|
SkyDatepickerModule,
|
|
4343
4353
|
SkyDatetimeResourcesModule,
|
|
4344
4354
|
SkyInputBoxModule], exports: [SkyDateRangePickerComponent] }); }
|
|
4345
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
4355
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerModule, providers: [SkyDateRangeService], imports: [CommonModule,
|
|
4346
4356
|
FormsModule,
|
|
4347
4357
|
ReactiveFormsModule,
|
|
4348
|
-
SkyI18nModule,
|
|
4349
4358
|
SkyDatepickerModule,
|
|
4350
4359
|
SkyDatetimeResourcesModule,
|
|
4351
4360
|
SkyInputBoxModule] }); }
|
|
4352
4361
|
}
|
|
4353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
4362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
|
|
4354
4363
|
type: NgModule,
|
|
4355
4364
|
args: [{
|
|
4356
4365
|
declarations: [
|
|
@@ -4362,7 +4371,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
4362
4371
|
CommonModule,
|
|
4363
4372
|
FormsModule,
|
|
4364
4373
|
ReactiveFormsModule,
|
|
4365
|
-
SkyI18nModule,
|
|
4366
4374
|
SkyDatepickerModule,
|
|
4367
4375
|
SkyDatetimeResourcesModule,
|
|
4368
4376
|
SkyInputBoxModule,
|
|
@@ -4493,6 +4501,7 @@ class SkyTimepickerComponent {
|
|
|
4493
4501
|
#affixService;
|
|
4494
4502
|
#changeDetector;
|
|
4495
4503
|
#coreAdapter;
|
|
4504
|
+
#environmentInjector;
|
|
4496
4505
|
#overlayService;
|
|
4497
4506
|
#zIndex;
|
|
4498
4507
|
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
|
|
@@ -4512,6 +4521,7 @@ class SkyTimepickerComponent {
|
|
|
4512
4521
|
this.#timepickerUnsubscribe = new Subject();
|
|
4513
4522
|
this.#ngUnsubscribe = new Subject();
|
|
4514
4523
|
this.#_disabled = false;
|
|
4524
|
+
this.#environmentInjector = inject(EnvironmentInjector);
|
|
4515
4525
|
this.#affixService = affixService;
|
|
4516
4526
|
this.#changeDetector = changeDetector;
|
|
4517
4527
|
this.#coreAdapter = coreAdapter;
|
|
@@ -4661,6 +4671,7 @@ class SkyTimepickerComponent {
|
|
|
4661
4671
|
const overlay = this.#overlayService.create({
|
|
4662
4672
|
enableClose: false,
|
|
4663
4673
|
enablePointerEvents: false,
|
|
4674
|
+
environmentInjector: this.#environmentInjector,
|
|
4664
4675
|
});
|
|
4665
4676
|
if (this.#zIndex) {
|
|
4666
4677
|
this.#zIndex
|
|
@@ -4710,12 +4721,12 @@ class SkyTimepickerComponent {
|
|
|
4710
4721
|
/* istanbul ignore next */
|
|
4711
4722
|
this.#overlayKeydownListener?.unsubscribe();
|
|
4712
4723
|
}
|
|
4713
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
4714
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
4724
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.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 }); }
|
|
4725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.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 icon=\"clock\" size=\"lg\"></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: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4715
4726
|
}
|
|
4716
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
4727
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
|
4717
4728
|
type: Component,
|
|
4718
|
-
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
|
|
4729
|
+
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 icon=\"clock\" size=\"lg\"></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"] }]
|
|
4719
4730
|
}], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
|
|
4720
4731
|
type: Optional
|
|
4721
4732
|
}] }, { type: i3$2.SkyThemeService, decorators: [{
|
|
@@ -4824,12 +4835,10 @@ class SkyTimepickerInputDirective {
|
|
|
4824
4835
|
#_skyTimepickerInput;
|
|
4825
4836
|
#renderer;
|
|
4826
4837
|
#elRef;
|
|
4827
|
-
#resourcesService;
|
|
4828
4838
|
#changeDetector;
|
|
4829
|
-
constructor(renderer, elRef,
|
|
4839
|
+
constructor(renderer, elRef, changeDetector) {
|
|
4830
4840
|
this.#renderer = renderer;
|
|
4831
4841
|
this.#elRef = elRef;
|
|
4832
|
-
this.#resourcesService = resourcesService;
|
|
4833
4842
|
this.#changeDetector = changeDetector;
|
|
4834
4843
|
}
|
|
4835
4844
|
ngOnInit() {
|
|
@@ -4839,14 +4848,6 @@ class SkyTimepickerInputDirective {
|
|
|
4839
4848
|
this.writeValue(newTime);
|
|
4840
4849
|
this.#_onTouched();
|
|
4841
4850
|
});
|
|
4842
|
-
/* istanbul ignore else */
|
|
4843
|
-
if (!this.#elRef.nativeElement.getAttribute('aria-label')) {
|
|
4844
|
-
this.#resourcesService
|
|
4845
|
-
.getString('skyux_timepicker_input_default_label')
|
|
4846
|
-
.subscribe((value) => {
|
|
4847
|
-
this.#renderer.setAttribute(this.#elRef.nativeElement, 'aria-label', value);
|
|
4848
|
-
});
|
|
4849
|
-
}
|
|
4850
4851
|
}
|
|
4851
4852
|
ngAfterContentInit() {
|
|
4852
4853
|
// Watch for the control to be added and initialize the value immediately.
|
|
@@ -4963,16 +4964,16 @@ class SkyTimepickerInputDirective {
|
|
|
4963
4964
|
/* istanbul ignore next */
|
|
4964
4965
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4965
4966
|
#_validatorChange = () => { };
|
|
4966
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
4967
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1
|
|
4967
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4968
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.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 }); }
|
|
4968
4969
|
}
|
|
4969
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
4970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
|
|
4970
4971
|
type: Directive,
|
|
4971
4972
|
args: [{
|
|
4972
4973
|
selector: '[skyTimepickerInput]',
|
|
4973
4974
|
providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR],
|
|
4974
4975
|
}]
|
|
4975
|
-
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type:
|
|
4976
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { skyTimepickerInput: [{
|
|
4976
4977
|
type: Input
|
|
4977
4978
|
}], timeFormat: [{
|
|
4978
4979
|
type: Input
|
|
@@ -4989,33 +4990,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
4989
4990
|
}] } });
|
|
4990
4991
|
|
|
4991
4992
|
class SkyTimepickerModule {
|
|
4992
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
4993
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
4994
|
-
SkyI18nModule,
|
|
4993
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4994
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
|
|
4995
4995
|
SkyIconModule,
|
|
4996
4996
|
SkyDatetimeResourcesModule,
|
|
4997
4997
|
SkyAffixModule,
|
|
4998
|
-
SkyOverlayModule,
|
|
4999
4998
|
SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] }); }
|
|
5000
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
5001
|
-
SkyI18nModule,
|
|
4999
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerModule, imports: [CommonModule,
|
|
5002
5000
|
SkyIconModule,
|
|
5003
5001
|
SkyDatetimeResourcesModule,
|
|
5004
5002
|
SkyAffixModule,
|
|
5005
|
-
SkyOverlayModule,
|
|
5006
5003
|
SkyThemeModule] }); }
|
|
5007
5004
|
}
|
|
5008
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
5005
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerModule, decorators: [{
|
|
5009
5006
|
type: NgModule,
|
|
5010
5007
|
args: [{
|
|
5011
5008
|
declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],
|
|
5012
5009
|
imports: [
|
|
5013
5010
|
CommonModule,
|
|
5014
|
-
SkyI18nModule,
|
|
5015
5011
|
SkyIconModule,
|
|
5016
5012
|
SkyDatetimeResourcesModule,
|
|
5017
5013
|
SkyAffixModule,
|
|
5018
|
-
SkyOverlayModule,
|
|
5019
5014
|
SkyThemeModule,
|
|
5020
5015
|
],
|
|
5021
5016
|
exports: [SkyTimepickerInputDirective, SkyTimepickerComponent],
|
|
@@ -5026,5 +5021,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
5026
5021
|
* Generated bundle index. Do not edit.
|
|
5027
5022
|
*/
|
|
5028
5023
|
|
|
5029
|
-
export { SkyDatePipe, SkyDatePipeModule, SkyDateRangeCalculator, SkyDateRangeCalculatorId, SkyDateRangeCalculatorType, SkyDateRangePickerModule, SkyDateRangeService, SkyDatepickerConfigService, SkyDatepickerModule, SkyFuzzyDatePipe, SkyFuzzyDateService, SkyTimepickerModule, SkyDatepickerCalendarComponent as λ1, SkyDatepickerComponent as λ2, SkyDatepickerInputDirective as λ3, SkyFuzzyDatepickerInputDirective as λ4, SkyDateRangePickerComponent as λ5, SkyTimepickerComponent as λ6, SkyTimepickerInputDirective as λ7 };
|
|
5024
|
+
export { SkyDatePipe, SkyDatePipeModule, SkyDateRangeCalculator, SkyDateRangeCalculatorId, SkyDateRangeCalculatorType, SkyDateRangePickerModule, SkyDateRangeService, SkyDateService, SkyDatepickerConfigService, SkyDatepickerModule, SkyFuzzyDatePipe, SkyFuzzyDateService, SkyTimepickerModule, SkyDatepickerCalendarComponent as λ1, SkyDatepickerComponent as λ2, SkyDatepickerInputDirective as λ3, SkyFuzzyDatepickerInputDirective as λ4, SkyDateRangePickerComponent as λ5, SkyTimepickerComponent as λ6, SkyTimepickerInputDirective as λ7 };
|
|
5030
5025
|
//# sourceMappingURL=skyux-datetime.mjs.map
|