@skyux/datetime 9.0.0-alpha.6 → 9.0.0-alpha.8
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 +1732 -1754
- package/esm2022/index.mjs +2 -1
- package/esm2022/lib/modules/date-pipe/date-pipe.module.mjs +7 -6
- package/esm2022/lib/modules/date-pipe/date.pipe.mjs +15 -14
- package/esm2022/lib/modules/date-pipe/date.service.mjs +73 -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 +4 -4
- 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 +3 -3
- 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 +3 -3
- package/esm2022/lib/modules/datepicker/datepicker-input.directive.mjs +3 -3
- package/esm2022/lib/modules/datepicker/datepicker.component.mjs +3 -3
- package/esm2022/lib/modules/datepicker/datepicker.module.mjs +4 -4
- 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 +3 -3
- package/esm2022/lib/modules/datepicker/fuzzy-date.service.mjs +3 -3
- package/esm2022/lib/modules/datepicker/monthpicker.component.mjs +3 -3
- package/esm2022/lib/modules/datepicker/yearpicker.component.mjs +3 -3
- package/esm2022/lib/modules/shared/sky-datetime-resources.module.mjs +4 -4
- package/esm2022/lib/modules/timepicker/timepicker.component.mjs +3 -3
- package/esm2022/lib/modules/timepicker/timepicker.directive.mjs +3 -3
- package/esm2022/lib/modules/timepicker/timepicker.module.mjs +4 -4
- package/fesm2022/skyux-datetime.mjs +130 -105
- package/fesm2022/skyux-datetime.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/modules/date-pipe/date.pipe.d.ts +1 -2
- package/lib/modules/date-pipe/date.service.d.ts +13 -0
- package/package.json +13 -13
- 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, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener } from '@angular/core';
|
|
3
|
+
import * as i3 from '@skyux/i18n';
|
|
4
|
+
import { SkyAppLocaleProvider, SkyIntlDateFormatter, 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';
|
|
@@ -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,14 @@ 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 }); }
|
|
61
82
|
}
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateService, decorators: [{
|
|
84
|
+
type: Injectable
|
|
85
|
+
}], ctorParameters: function () { return []; } });
|
|
62
86
|
function isBlank(obj) {
|
|
63
87
|
return !obj;
|
|
64
88
|
}
|
|
@@ -73,15 +97,16 @@ function isBlank(obj) {
|
|
|
73
97
|
* ```
|
|
74
98
|
*/
|
|
75
99
|
class SkyDatePipe {
|
|
100
|
+
#dateSvc = inject(SkyDateService);
|
|
76
101
|
#defaultFormat = 'short';
|
|
77
|
-
#format;
|
|
78
102
|
#defaultLocale = 'en-US';
|
|
79
|
-
#
|
|
80
|
-
#value;
|
|
103
|
+
#format;
|
|
81
104
|
#formattedValue;
|
|
105
|
+
#locale;
|
|
82
106
|
#ngUnsubscribe = new Subject();
|
|
83
|
-
|
|
84
|
-
|
|
107
|
+
#value;
|
|
108
|
+
constructor() {
|
|
109
|
+
inject(SkyAppLocaleProvider)
|
|
85
110
|
.getLocaleInfo()
|
|
86
111
|
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
87
112
|
.subscribe((localeInfo) => {
|
|
@@ -111,18 +136,18 @@ class SkyDatePipe {
|
|
|
111
136
|
#updateFormattedValue() {
|
|
112
137
|
const locale = this.#locale || this.#defaultLocale;
|
|
113
138
|
const format = this.#format || this.#defaultFormat;
|
|
114
|
-
this.#formattedValue =
|
|
139
|
+
this.#formattedValue = this.#dateSvc.format(this.#value, locale, format);
|
|
115
140
|
}
|
|
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
|
|
141
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
142
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false }); }
|
|
118
143
|
}
|
|
119
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipe, decorators: [{
|
|
120
145
|
type: Pipe,
|
|
121
146
|
args: [{
|
|
122
147
|
name: 'skyDate',
|
|
123
148
|
pure: false,
|
|
124
149
|
}]
|
|
125
|
-
}], ctorParameters: function () { return [
|
|
150
|
+
}], ctorParameters: function () { return []; } });
|
|
126
151
|
|
|
127
152
|
/**
|
|
128
153
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
@@ -228,9 +253,9 @@ class SkyDatetimeResourcesProvider {
|
|
|
228
253
|
* Import into any component library module that needs to use resource strings.
|
|
229
254
|
*/
|
|
230
255
|
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
|
|
256
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
257
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] }); }
|
|
258
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [
|
|
234
259
|
{
|
|
235
260
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
236
261
|
useClass: SkyDatetimeResourcesProvider,
|
|
@@ -238,7 +263,7 @@ class SkyDatetimeResourcesModule {
|
|
|
238
263
|
},
|
|
239
264
|
], imports: [SkyI18nModule] }); }
|
|
240
265
|
}
|
|
241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
|
|
242
267
|
type: NgModule,
|
|
243
268
|
args: [{
|
|
244
269
|
exports: [SkyI18nModule],
|
|
@@ -648,10 +673,10 @@ class SkyFuzzyDateService {
|
|
|
648
673
|
}
|
|
649
674
|
return true;
|
|
650
675
|
}
|
|
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
|
|
676
|
+
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 }); }
|
|
677
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' }); }
|
|
653
678
|
}
|
|
654
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
|
|
655
680
|
type: Injectable,
|
|
656
681
|
args: [{
|
|
657
682
|
providedIn: 'root',
|
|
@@ -691,10 +716,10 @@ class SkyFuzzyDatePipe {
|
|
|
691
716
|
const fuzzyDateLocale = locale || this.#fuzzyDateService.getCurrentLocale();
|
|
692
717
|
return this.#fuzzyDateService.format(value, fuzzyDateFormat, fuzzyDateLocale);
|
|
693
718
|
}
|
|
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
|
|
719
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
720
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false }); }
|
|
696
721
|
}
|
|
697
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
722
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
|
|
698
723
|
type: Pipe,
|
|
699
724
|
args: [{
|
|
700
725
|
name: 'skyFuzzyDate',
|
|
@@ -703,15 +728,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
703
728
|
}], ctorParameters: function () { return [{ type: SkyFuzzyDateService }]; } });
|
|
704
729
|
|
|
705
730
|
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
|
|
731
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
732
|
+
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] }); }
|
|
733
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe, SkyDateService], imports: [CommonModule, SkyDatetimeResourcesModule] }); }
|
|
709
734
|
}
|
|
710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatePipeModule, decorators: [{
|
|
711
736
|
type: NgModule,
|
|
712
737
|
args: [{
|
|
713
738
|
declarations: [SkyDatePipe, SkyFuzzyDatePipe],
|
|
714
|
-
providers: [SkyDatePipe, SkyFuzzyDatePipe],
|
|
739
|
+
providers: [SkyDatePipe, SkyFuzzyDatePipe, SkyDateService],
|
|
715
740
|
imports: [CommonModule, SkyDatetimeResourcesModule],
|
|
716
741
|
exports: [SkyDatePipe, SkyFuzzyDatePipe],
|
|
717
742
|
}]
|
|
@@ -1254,10 +1279,10 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1254
1279
|
}
|
|
1255
1280
|
return undefined;
|
|
1256
1281
|
}
|
|
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
|
|
1282
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1283
|
+
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-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1259
1284
|
}
|
|
1260
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
|
|
1261
1286
|
type: Component,
|
|
1262
1287
|
args: [{ selector: 'sky-datepicker-inner', encapsulation: ViewEncapsulation.None, template: "<div\n *ngIf=\"datepickerMode\"\n class=\"sky-datepicker-calendar-inner\"\n (keydown)=\"onKeydown($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"] }]
|
|
1263
1288
|
}], propDecorators: { customDates: [{
|
|
@@ -1290,10 +1315,10 @@ class SkyDatepickerAdapterService {
|
|
|
1290
1315
|
setPlaceholder(elementRef, value) {
|
|
1291
1316
|
this.#renderer.setAttribute(elementRef.nativeElement, 'placeholder', value);
|
|
1292
1317
|
}
|
|
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
|
|
1318
|
+
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 }); }
|
|
1319
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerAdapterService }); }
|
|
1295
1320
|
}
|
|
1296
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerAdapterService, decorators: [{
|
|
1297
1322
|
type: Injectable
|
|
1298
1323
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
|
|
1299
1324
|
|
|
@@ -1306,10 +1331,10 @@ class SkyDatepickerConfigService {
|
|
|
1306
1331
|
*/
|
|
1307
1332
|
this.startingDay = 0;
|
|
1308
1333
|
}
|
|
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
|
|
1334
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1335
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' }); }
|
|
1311
1336
|
}
|
|
1312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
|
|
1313
1338
|
type: Injectable,
|
|
1314
1339
|
args: [{
|
|
1315
1340
|
providedIn: 'root',
|
|
@@ -1327,10 +1352,10 @@ class SkyDatepickerService {
|
|
|
1327
1352
|
*/
|
|
1328
1353
|
this.keyDatePopoverStream = new Subject();
|
|
1329
1354
|
}
|
|
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
|
|
1355
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1356
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerService }); }
|
|
1332
1357
|
}
|
|
1333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1358
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerService, decorators: [{
|
|
1334
1359
|
type: Injectable
|
|
1335
1360
|
}] });
|
|
1336
1361
|
|
|
@@ -1341,10 +1366,10 @@ class SkyDayPickerButtonComponent {
|
|
|
1341
1366
|
constructor(datepicker) {
|
|
1342
1367
|
this.datepicker = datepicker;
|
|
1343
1368
|
}
|
|
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
|
|
1369
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1370
|
+
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
1371
|
}
|
|
1347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
|
|
1348
1373
|
type: Component,
|
|
1349
1374
|
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
1375
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { date: [{
|
|
@@ -1457,10 +1482,10 @@ class SkyDayPickerCellComponent {
|
|
|
1457
1482
|
}, 500);
|
|
1458
1483
|
}
|
|
1459
1484
|
}
|
|
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
|
|
1485
|
+
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 }); }
|
|
1486
|
+
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
1487
|
}
|
|
1463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
|
|
1464
1489
|
type: Component,
|
|
1465
1490
|
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
1491
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }]; }, propDecorators: { activeDateHasChanged: [{
|
|
@@ -1672,10 +1697,10 @@ class SkyDayPickerComponent {
|
|
|
1672
1697
|
}
|
|
1673
1698
|
return undefined;
|
|
1674
1699
|
}
|
|
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
|
|
1700
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1701
|
+
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-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th scope=\"col\" [attr.colspan]=\"5\">\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled':\n datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\" scope=\"col\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let label of labels\"\n class=\"sky-datepicker-center sky-datepicker-weekdays\"\n >\n <small [attr.aria-label]=\"label.full\">\n <b>{{ label.abbr }}</b>\n </small>\n </th>\n </tr>\n </thead>\n <tbody>\n <!-- Wait indicator for async custom date stream -->\n <sky-wait [isWaiting]=\"isWaiting\"> </sky-wait>\n <ng-template ngFor [ngForOf]=\"rows\" let-row=\"$implicit\" let-index=\"index\">\n <tr role=\"row\">\n <td\n *ngFor=\"let date of row\"\n class=\"sky-datepicker-center\"\n role=\"gridcell\"\n [id]=\"date.uid\"\n >\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n >\n </sky-daypicker-cell>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i3$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }] }); }
|
|
1677
1702
|
}
|
|
1678
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1703
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
|
|
1679
1704
|
type: Component,
|
|
1680
1705
|
args: [{ selector: 'sky-daypicker', template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\" class=\"sky-daypicker-wrapper\">\n <table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n >\n <thead>\n <tr>\n <th class=\"sky-datepicker-header-left\" scope=\"col\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n (click)=\"datepicker.moveCalendar($event, -1)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th scope=\"col\" [attr.colspan]=\"5\">\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled':\n datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\" scope=\"col\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let label of labels\"\n class=\"sky-datepicker-center sky-datepicker-weekdays\"\n >\n <small [attr.aria-label]=\"label.full\">\n <b>{{ label.abbr }}</b>\n </small>\n </th>\n </tr>\n </thead>\n <tbody>\n <!-- Wait indicator for async custom date stream -->\n <sky-wait [isWaiting]=\"isWaiting\"> </sky-wait>\n <ng-template ngFor [ngForOf]=\"rows\" let-row=\"$implicit\" let-index=\"index\">\n <tr role=\"row\">\n <td\n *ngFor=\"let date of row\"\n class=\"sky-datepicker-center\"\n role=\"gridcell\"\n [id]=\"date.uid\"\n >\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n >\n </sky-daypicker-cell>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"] }]
|
|
1681
1706
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { customDates: [{
|
|
@@ -1753,10 +1778,10 @@ class SkyMonthPickerComponent {
|
|
|
1753
1778
|
}
|
|
1754
1779
|
this.datepicker.activeDate.setMonth(date);
|
|
1755
1780
|
}
|
|
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
|
|
1781
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1782
|
+
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-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th\n [attr.colspan]=\"\n datepicker.monthColLimit - 2 <= 0 ? 1 : datepicker.monthColLimit - 2\n \"\n >\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of rows\">\n <td\n *ngFor=\"let date of row\"\n class=\"text-center\"\n role=\"gridcell\"\n id=\"{{ date.uid }}\"\n >\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] }); }
|
|
1758
1783
|
}
|
|
1759
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
|
|
1760
1785
|
type: Component,
|
|
1761
1786
|
args: [{ selector: 'sky-monthpicker', template: "<table *ngIf=\"datepicker.datepickerMode === 'month'\" role=\"grid\">\n <thead>\n <tr>\n <th class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n (click)=\"datepicker.moveCalendar($event, -1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th\n [attr.colspan]=\"\n datepicker.monthColLimit - 2 <= 0 ? 1 : datepicker.monthColLimit - 2\n \"\n >\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of rows\">\n <td\n *ngFor=\"let date of row\"\n class=\"text-center\"\n role=\"gridcell\"\n id=\"{{ date.uid }}\"\n >\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"] }]
|
|
1762
1787
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
|
|
@@ -1834,10 +1859,10 @@ class SkyYearPickerComponent {
|
|
|
1834
1859
|
}
|
|
1835
1860
|
this.datepicker.activeDate.setFullYear(date);
|
|
1836
1861
|
}
|
|
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
|
|
1862
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1863
|
+
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-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th\n [attr.colspan]=\"\n datepicker.yearColLimit - 2 <= 0 ? 1 : datepicker.yearColLimit - 2\n \"\n >\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n role=\"heading\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of rows\">\n <td *ngFor=\"let date of row\" class=\"sky-datepicker-row\" role=\"gridcell\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] }); }
|
|
1839
1864
|
}
|
|
1840
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
|
|
1841
1866
|
type: Component,
|
|
1842
1867
|
args: [{ selector: 'sky-yearpicker', template: "<table *ngIf=\"datepicker.datepickerMode === 'year'\" role=\"grid\">\n <thead>\n <tr>\n <th class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n (click)=\"datepicker.moveCalendar($event, -1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-left\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-left\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n <th\n [attr.colspan]=\"\n datepicker.yearColLimit - 2 <= 0 ? 1 : datepicker.yearColLimit - 2\n \"\n >\n <button\n [id]=\"datepicker.datepickerId + '-title'\"\n role=\"heading\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"datepicker.toggleModeCalendar($event)\"\n [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n }\"\n tabindex=\"-1\"\n >\n <strong>{{ title }}</strong>\n </button>\n </th>\n <th class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n (click)=\"datepicker.moveCalendar($event, 1)\"\n tabindex=\"-1\"\n >\n <sky-icon\n class=\"sky-datepicker-chevron-default\"\n icon=\"chevron-right\"\n ></sky-icon>\n <sky-icon\n class=\"sky-datepicker-chevron-modern\"\n icon=\"chevron-right\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of rows\">\n <td *ngFor=\"let date of row\" class=\"sky-datepicker-row\" role=\"gridcell\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n [ngClass]=\"{\n 'sky-datepicker-btn-selected': date.selected,\n 'sky-btn-disabled': date.disabled,\n 'sky-btn-active': datepicker.isActive(date)\n }\"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n tabindex=\"-1\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n </tr>\n </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"] }]
|
|
1843
1868
|
}], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
|
|
@@ -1895,10 +1920,10 @@ class SkyDatepickerCalendarComponent {
|
|
|
1895
1920
|
this.datepicker?.select(new Date(), false);
|
|
1896
1921
|
}
|
|
1897
1922
|
}
|
|
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
|
|
1923
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1924
|
+
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
1925
|
}
|
|
1901
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
1926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
|
|
1902
1927
|
type: Component,
|
|
1903
1928
|
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
1929
|
}], ctorParameters: function () { return [{ type: SkyDatepickerConfigService }]; }, propDecorators: { customDates: [{
|
|
@@ -2197,10 +2222,10 @@ class SkyDatepickerComponent {
|
|
|
2197
2222
|
this.#customDatesSubscription = undefined;
|
|
2198
2223
|
}
|
|
2199
2224
|
}
|
|
2200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
2201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
2225
|
+
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 }); }
|
|
2226
|
+
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 *skyThemeIf=\"'default'\" icon=\"calendar\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"calendar\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"calendarId\"\n [class.sky-datepicker-hidden]=\"!isVisible\"\n #calendarRef\n >\n <sky-datepicker-calendar\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n </sky-datepicker-calendar>\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2202
2227
|
}
|
|
2203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
2228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
|
|
2204
2229
|
type: Component,
|
|
2205
2230
|
args: [{ selector: 'sky-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-datepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? calendarId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"\n 'skyux_datepicker_trigger_button_label' | skyLibResources\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"calendar\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"calendar\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"calendarId\"\n [class.sky-datepicker-hidden]=\"!isVisible\"\n #calendarRef\n >\n <sky-datepicker-calendar\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n >\n </sky-datepicker-calendar>\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"] }]
|
|
2206
2231
|
}], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
|
|
@@ -2683,13 +2708,13 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2683
2708
|
}
|
|
2684
2709
|
this.#setInputElementValue(formattedDate || '');
|
|
2685
2710
|
}
|
|
2686
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
2687
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1
|
|
2711
|
+
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: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2712
|
+
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: [
|
|
2688
2713
|
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
2689
2714
|
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
2690
2715
|
], ngImport: i0 }); }
|
|
2691
2716
|
}
|
|
2692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
2717
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
|
|
2693
2718
|
type: Directive,
|
|
2694
2719
|
args: [{
|
|
2695
2720
|
selector: '[skyFuzzyDatepickerInput]',
|
|
@@ -3203,14 +3228,14 @@ class SkyDatepickerInputDirective {
|
|
|
3203
3228
|
}
|
|
3204
3229
|
}
|
|
3205
3230
|
}
|
|
3206
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
3207
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1
|
|
3231
|
+
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: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3232
|
+
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: [
|
|
3208
3233
|
SKY_DATEPICKER_VALUE_ACCESSOR,
|
|
3209
3234
|
SKY_DATEPICKER_VALIDATOR,
|
|
3210
3235
|
SkyDatepickerAdapterService,
|
|
3211
3236
|
], ngImport: i0 }); }
|
|
3212
3237
|
}
|
|
3213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
3238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
|
|
3214
3239
|
type: Directive,
|
|
3215
3240
|
args: [{
|
|
3216
3241
|
selector: '[skyDatepickerInput]',
|
|
@@ -3250,8 +3275,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
3250
3275
|
}] } });
|
|
3251
3276
|
|
|
3252
3277
|
class SkyDatepickerModule {
|
|
3253
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
3254
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
3278
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3279
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
|
|
3255
3280
|
SkyDatepickerCalendarInnerComponent,
|
|
3256
3281
|
SkyDayPickerComponent,
|
|
3257
3282
|
SkyMonthPickerComponent,
|
|
@@ -3272,7 +3297,7 @@ class SkyDatepickerModule {
|
|
|
3272
3297
|
SkyDatepickerComponent,
|
|
3273
3298
|
SkyDatepickerInputDirective,
|
|
3274
3299
|
SkyFuzzyDatepickerInputDirective] }); }
|
|
3275
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
3300
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerService], imports: [CommonModule,
|
|
3276
3301
|
FormsModule,
|
|
3277
3302
|
SkyIconModule,
|
|
3278
3303
|
SkyDatetimeResourcesModule,
|
|
@@ -3282,7 +3307,7 @@ class SkyDatepickerModule {
|
|
|
3282
3307
|
SkyPopoverModule,
|
|
3283
3308
|
SkyWaitModule] }); }
|
|
3284
3309
|
}
|
|
3285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
3310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDatepickerModule, decorators: [{
|
|
3286
3311
|
type: NgModule,
|
|
3287
3312
|
args: [{
|
|
3288
3313
|
declarations: [
|
|
@@ -3325,10 +3350,10 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
|
|
|
3325
3350
|
}
|
|
3326
3351
|
return 'skyux_date_range_picker_before_date_label';
|
|
3327
3352
|
}
|
|
3328
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
3329
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1
|
|
3353
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3354
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }); }
|
|
3330
3355
|
}
|
|
3331
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
3356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
|
|
3332
3357
|
type: Pipe,
|
|
3333
3358
|
args: [{
|
|
3334
3359
|
name: 'skyDateRangePickerEndDateResourceKey',
|
|
@@ -3342,10 +3367,10 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
|
|
|
3342
3367
|
}
|
|
3343
3368
|
return 'skyux_date_range_picker_after_date_label';
|
|
3344
3369
|
}
|
|
3345
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
3346
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1
|
|
3370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3371
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }); }
|
|
3347
3372
|
}
|
|
3348
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
3373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
|
|
3349
3374
|
type: Pipe,
|
|
3350
3375
|
args: [{
|
|
3351
3376
|
name: 'skyDateRangePickerStartDateResourceKey',
|
|
@@ -3830,10 +3855,10 @@ class SkyDateRangeService {
|
|
|
3830
3855
|
this.#calculatorReadyStream.next(true);
|
|
3831
3856
|
});
|
|
3832
3857
|
}
|
|
3833
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
3834
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1
|
|
3858
|
+
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 }); }
|
|
3859
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangeService }); }
|
|
3835
3860
|
}
|
|
3836
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
3861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangeService, decorators: [{
|
|
3837
3862
|
type: Injectable
|
|
3838
3863
|
}], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }]; } });
|
|
3839
3864
|
|
|
@@ -4309,18 +4334,18 @@ class SkyDateRangePickerComponent {
|
|
|
4309
4334
|
/* istanbul ignore next */
|
|
4310
4335
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4311
4336
|
#onTouched;
|
|
4312
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
4313
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
4337
|
+
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 }); }
|
|
4338
|
+
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: [
|
|
4314
4339
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
|
4315
4340
|
SKY_DATE_RANGE_PICKER_VALIDATOR,
|
|
4316
|
-
], 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", "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)" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4341
|
+
], 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)" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4317
4342
|
}
|
|
4318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
4343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
|
|
4319
4344
|
type: Component,
|
|
4320
4345
|
args: [{ selector: 'sky-date-range-picker', providers: [
|
|
4321
4346
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
|
4322
4347
|
SKY_DATE_RANGE_PICKER_VALIDATOR,
|
|
4323
|
-
], 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"] }]
|
|
4348
|
+
], 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"] }]
|
|
4324
4349
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2$2.UntypedFormBuilder }, { type: i3.SkyAppLocaleProvider }, { type: i0.NgZone }, { type: i3$2.SkyThemeService, decorators: [{
|
|
4325
4350
|
type: Optional
|
|
4326
4351
|
}] }]; }, propDecorators: { calculatorIds: [{
|
|
@@ -4338,8 +4363,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
4338
4363
|
}] } });
|
|
4339
4364
|
|
|
4340
4365
|
class SkyDateRangePickerModule {
|
|
4341
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
4342
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
4366
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4367
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent,
|
|
4343
4368
|
SkyDateRangePickerEndDateResourceKeyPipe,
|
|
4344
4369
|
SkyDateRangePickerStartDateResourceKeyPipe], imports: [CommonModule,
|
|
4345
4370
|
FormsModule,
|
|
@@ -4347,14 +4372,14 @@ class SkyDateRangePickerModule {
|
|
|
4347
4372
|
SkyDatepickerModule,
|
|
4348
4373
|
SkyDatetimeResourcesModule,
|
|
4349
4374
|
SkyInputBoxModule], exports: [SkyDateRangePickerComponent] }); }
|
|
4350
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
4375
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerModule, providers: [SkyDateRangeService], imports: [CommonModule,
|
|
4351
4376
|
FormsModule,
|
|
4352
4377
|
ReactiveFormsModule,
|
|
4353
4378
|
SkyDatepickerModule,
|
|
4354
4379
|
SkyDatetimeResourcesModule,
|
|
4355
4380
|
SkyInputBoxModule] }); }
|
|
4356
4381
|
}
|
|
4357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
4382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
|
|
4358
4383
|
type: NgModule,
|
|
4359
4384
|
args: [{
|
|
4360
4385
|
declarations: [
|
|
@@ -4713,10 +4738,10 @@ class SkyTimepickerComponent {
|
|
|
4713
4738
|
/* istanbul ignore next */
|
|
4714
4739
|
this.#overlayKeydownListener?.unsubscribe();
|
|
4715
4740
|
}
|
|
4716
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
4717
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1
|
|
4741
|
+
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 }); }
|
|
4742
|
+
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 *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"clock\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n #timepickerRef\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n <li *ngFor=\"let hour of hours\">\n <button\n name=\"hour\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n <li *ngFor=\"let minute of minutes\">\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n </ol>\n </section>\n <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"onCloseButtonClick()\"\n >\n {{ 'skyux_timepicker_close' | skyLibResources }}\n </button>\n </section>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol li button.sky-btn-active:hover,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4718
4743
|
}
|
|
4719
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
4744
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
|
4720
4745
|
type: Component,
|
|
4721
4746
|
args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"clock\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n #timepickerRef\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n <li *ngFor=\"let hour of hours\">\n <button\n name=\"hour\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n <li *ngFor=\"let minute of minutes\">\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n </ol>\n </section>\n <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"onCloseButtonClick()\"\n >\n {{ 'skyux_timepicker_close' | skyLibResources }}\n </button>\n </section>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol li button.sky-btn-active:hover,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"] }]
|
|
4722
4747
|
}], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
|
|
@@ -4966,10 +4991,10 @@ class SkyTimepickerInputDirective {
|
|
|
4966
4991
|
/* istanbul ignore next */
|
|
4967
4992
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4968
4993
|
#_validatorChange = () => { };
|
|
4969
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
4970
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1
|
|
4994
|
+
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: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4995
|
+
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 }); }
|
|
4971
4996
|
}
|
|
4972
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
4997
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
|
|
4973
4998
|
type: Directive,
|
|
4974
4999
|
args: [{
|
|
4975
5000
|
selector: '[skyTimepickerInput]',
|
|
@@ -4992,21 +5017,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
4992
5017
|
}] } });
|
|
4993
5018
|
|
|
4994
5019
|
class SkyTimepickerModule {
|
|
4995
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1
|
|
4996
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1
|
|
5020
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5021
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
|
|
4997
5022
|
SkyIconModule,
|
|
4998
5023
|
SkyDatetimeResourcesModule,
|
|
4999
5024
|
SkyAffixModule,
|
|
5000
5025
|
SkyOverlayModule,
|
|
5001
5026
|
SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] }); }
|
|
5002
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1
|
|
5027
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerModule, imports: [CommonModule,
|
|
5003
5028
|
SkyIconModule,
|
|
5004
5029
|
SkyDatetimeResourcesModule,
|
|
5005
5030
|
SkyAffixModule,
|
|
5006
5031
|
SkyOverlayModule,
|
|
5007
5032
|
SkyThemeModule] }); }
|
|
5008
5033
|
}
|
|
5009
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1
|
|
5034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SkyTimepickerModule, decorators: [{
|
|
5010
5035
|
type: NgModule,
|
|
5011
5036
|
args: [{
|
|
5012
5037
|
declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],
|
|
@@ -5026,5 +5051,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
|
|
|
5026
5051
|
* Generated bundle index. Do not edit.
|
|
5027
5052
|
*/
|
|
5028
5053
|
|
|
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 };
|
|
5054
|
+
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
5055
|
//# sourceMappingURL=skyux-datetime.mjs.map
|