@skyux/datetime 10.0.0-alpha.1 → 10.0.0-alpha.3
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 +1812 -1740
- package/esm2022/lib/modules/date-pipe/date-pipe.module.mjs +4 -4
- package/esm2022/lib/modules/date-pipe/date.pipe.mjs +3 -3
- package/esm2022/lib/modules/date-pipe/date.service.mjs +4 -4
- 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 +4 -4
- package/esm2022/lib/modules/date-range-picker/date-range-picker.module.mjs +5 -7
- package/esm2022/lib/modules/date-range-picker/date-range.service.mjs +8 -5
- package/esm2022/lib/modules/datepicker/datepicker-calendar-inner.component.mjs +74 -27
- package/esm2022/lib/modules/datepicker/datepicker-calendar-label.pipe.mjs +39 -0
- package/esm2022/lib/modules/datepicker/datepicker-calendar.component.mjs +10 -10
- package/esm2022/lib/modules/datepicker/datepicker-config.service.mjs +3 -3
- package/esm2022/lib/modules/datepicker/datepicker-custom-date.mjs +1 -1
- package/esm2022/lib/modules/datepicker/datepicker-date.mjs +1 -1
- package/esm2022/lib/modules/datepicker/datepicker-input-fuzzy.directive.mjs +3 -3
- package/esm2022/lib/modules/datepicker/datepicker-input.directive.mjs +12 -31
- package/esm2022/lib/modules/datepicker/datepicker.component.mjs +53 -11
- package/esm2022/lib/modules/datepicker/datepicker.module.mjs +13 -6
- package/esm2022/lib/modules/datepicker/datepicker.service.mjs +3 -3
- package/esm2022/lib/modules/datepicker/daypicker-button.component.mjs +6 -5
- package/esm2022/lib/modules/datepicker/daypicker-cell.component.mjs +3 -3
- package/esm2022/lib/modules/datepicker/daypicker.component.mjs +13 -16
- package/esm2022/lib/modules/datepicker/fuzzy-date.service.mjs +5 -6
- package/esm2022/lib/modules/datepicker/monthpicker.component.mjs +13 -14
- package/esm2022/lib/modules/datepicker/yearpicker.component.mjs +14 -14
- package/esm2022/lib/modules/shared/sky-datetime-resources.module.mjs +12 -5
- package/esm2022/lib/modules/timepicker/timepicker.component.mjs +17 -9
- 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 +301 -200
- package/fesm2022/skyux-datetime.mjs.map +1 -1
- package/lib/modules/datepicker/datepicker-calendar-inner.component.d.ts +13 -6
- package/lib/modules/datepicker/datepicker-calendar-label.pipe.d.ts +23 -0
- package/lib/modules/datepicker/datepicker-custom-date.d.ts +1 -1
- package/lib/modules/datepicker/datepicker-date.d.ts +1 -1
- package/lib/modules/datepicker/datepicker-input.directive.d.ts +2 -3
- package/lib/modules/datepicker/datepicker.component.d.ts +7 -1
- package/lib/modules/datepicker/datepicker.module.d.ts +10 -8
- package/lib/modules/datepicker/daypicker.component.d.ts +1 -1
- package/lib/modules/datepicker/monthpicker.component.d.ts +1 -1
- package/lib/modules/datepicker/yearpicker.component.d.ts +1 -1
- package/lib/modules/timepicker/timepicker.component.d.ts +2 -2
- package/package.json +13 -12
- package/esm2022/lib/modules/datepicker/datepicker-adapter.service.mjs +0 -23
- package/lib/modules/datepicker/datepicker-adapter.service.d.ts +0 -13
|
@@ -4,20 +4,22 @@ import * as i0 from '@angular/core';
|
|
|
4
4
|
import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener } from '@angular/core';
|
|
5
5
|
import * as i3 from '@skyux/i18n';
|
|
6
6
|
import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyAppLocaleProvider, SkyIntlDateFormatter } from '@skyux/i18n';
|
|
7
|
-
import { Subject, fromEvent, BehaviorSubject, forkJoin, combineLatest } from 'rxjs';
|
|
7
|
+
import { Subject, takeUntil as takeUntil$1, fromEvent, BehaviorSubject, forkJoin, combineLatest } from 'rxjs';
|
|
8
8
|
import { takeUntil, debounceTime, distinctUntilChanged, first, map } from 'rxjs/operators';
|
|
9
9
|
import moment from 'moment';
|
|
10
|
-
import * as i2$
|
|
10
|
+
import * as i2$3 from '@angular/forms';
|
|
11
11
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
|
|
12
|
-
import * as i2$
|
|
12
|
+
import * as i2$2 from '@skyux/forms';
|
|
13
13
|
import { SkyInputBoxModule } from '@skyux/forms';
|
|
14
|
+
import * as i4$1 from '@angular/cdk/a11y';
|
|
15
|
+
import { A11yModule } from '@angular/cdk/a11y';
|
|
14
16
|
import * as i1 from '@skyux/core';
|
|
15
|
-
import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule } from '@skyux/core';
|
|
16
|
-
import * as
|
|
17
|
+
import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule } from '@skyux/core';
|
|
18
|
+
import * as i2$1 from '@skyux/indicators';
|
|
17
19
|
import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
|
|
18
20
|
import * as i4 from '@skyux/popovers';
|
|
19
21
|
import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
|
|
20
|
-
import * as i3$
|
|
22
|
+
import * as i3$1 from '@skyux/theme';
|
|
21
23
|
import { SkyThemeModule } from '@skyux/theme';
|
|
22
24
|
|
|
23
25
|
/* istanbul ignore file */
|
|
@@ -62,10 +64,17 @@ const RESOURCES = {
|
|
|
62
64
|
},
|
|
63
65
|
},
|
|
64
66
|
'EN-US': {
|
|
67
|
+
skyux_datepicker_format_hint_text: { message: 'Use the format {0}.' },
|
|
65
68
|
skyux_datepicker_trigger_button_label: { message: 'Select date' },
|
|
66
69
|
skyux_datepicker_trigger_button_label_context: {
|
|
67
70
|
message: 'Open calendar for {0}',
|
|
68
71
|
},
|
|
72
|
+
skyux_datepicker_move_calendar_previous_day: { message: 'Previous month' },
|
|
73
|
+
skyux_datepicker_move_calendar_next_day: { message: 'Next month' },
|
|
74
|
+
skyux_datepicker_move_calendar_previous_month: { message: 'Previous year' },
|
|
75
|
+
skyux_datepicker_move_calendar_next_month: { message: 'Next year' },
|
|
76
|
+
skyux_datepicker_move_calendar_previous_year: { message: 'Previous page' },
|
|
77
|
+
skyux_datepicker_move_calendar_next_year: { message: 'Next page' },
|
|
69
78
|
skyux_timepicker_button_label: { message: 'Choose time' },
|
|
70
79
|
skyux_timepicker_button_label_context: {
|
|
71
80
|
message: 'Open time picker for {0}',
|
|
@@ -131,9 +140,9 @@ class SkyDatetimeResourcesProvider {
|
|
|
131
140
|
* Import into any component library module that needs to use resource strings.
|
|
132
141
|
*/
|
|
133
142
|
class SkyDatetimeResourcesModule {
|
|
134
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
135
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.
|
|
136
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.
|
|
143
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
144
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] }); }
|
|
145
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [
|
|
137
146
|
{
|
|
138
147
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
139
148
|
useClass: SkyDatetimeResourcesProvider,
|
|
@@ -141,7 +150,7 @@ class SkyDatetimeResourcesModule {
|
|
|
141
150
|
},
|
|
142
151
|
], imports: [SkyI18nModule] }); }
|
|
143
152
|
}
|
|
144
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
|
|
145
154
|
type: NgModule,
|
|
146
155
|
args: [{
|
|
147
156
|
exports: [SkyI18nModule],
|
|
@@ -212,10 +221,10 @@ class SkyDateService {
|
|
|
212
221
|
}
|
|
213
222
|
return SkyIntlDateFormatter.format(date, locale || this.#defaultLocale, this.#ALIASES[pattern] || pattern);
|
|
214
223
|
}
|
|
215
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
216
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.
|
|
224
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
225
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateService, providedIn: 'root' }); }
|
|
217
226
|
}
|
|
218
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateService, decorators: [{
|
|
219
228
|
type: Injectable,
|
|
220
229
|
args: [{
|
|
221
230
|
providedIn: 'root',
|
|
@@ -276,10 +285,10 @@ class SkyDatePipe {
|
|
|
276
285
|
const format = this.#format || this.#defaultFormat;
|
|
277
286
|
this.#formattedValue = this.#dateSvc.format(this.#value, locale, format);
|
|
278
287
|
}
|
|
279
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
280
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.
|
|
288
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
289
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false }); }
|
|
281
290
|
}
|
|
282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatePipe, decorators: [{
|
|
283
292
|
type: Pipe,
|
|
284
293
|
args: [{
|
|
285
294
|
name: 'skyDate',
|
|
@@ -338,8 +347,7 @@ class SkyFuzzyDateService {
|
|
|
338
347
|
: [format];
|
|
339
348
|
locale = locale || this.#currentLocale;
|
|
340
349
|
const fuzzyDateMoment = this.getMomentFromFuzzyDate(fuzzyDate).locale(locale);
|
|
341
|
-
for (
|
|
342
|
-
const token = formatTokens[index];
|
|
350
|
+
for (const token of formatTokens) {
|
|
343
351
|
/* istanbul ignore else */
|
|
344
352
|
if (token) {
|
|
345
353
|
switch (token.substr(0, 1).toLowerCase()) {
|
|
@@ -683,10 +691,10 @@ class SkyFuzzyDateService {
|
|
|
683
691
|
}
|
|
684
692
|
return true;
|
|
685
693
|
}
|
|
686
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
687
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.
|
|
694
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
695
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' }); }
|
|
688
696
|
}
|
|
689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
697
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
|
|
690
698
|
type: Injectable,
|
|
691
699
|
args: [{
|
|
692
700
|
providedIn: 'root',
|
|
@@ -726,10 +734,10 @@ class SkyFuzzyDatePipe {
|
|
|
726
734
|
const fuzzyDateLocale = locale || this.#fuzzyDateService.getCurrentLocale();
|
|
727
735
|
return this.#fuzzyDateService.format(value, fuzzyDateFormat, fuzzyDateLocale);
|
|
728
736
|
}
|
|
729
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
730
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.
|
|
737
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
738
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false }); }
|
|
731
739
|
}
|
|
732
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
740
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
|
|
733
741
|
type: Pipe,
|
|
734
742
|
args: [{
|
|
735
743
|
name: 'skyFuzzyDate',
|
|
@@ -738,11 +746,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
738
746
|
}], ctorParameters: () => [{ type: SkyFuzzyDateService }] });
|
|
739
747
|
|
|
740
748
|
class SkyDatePipeModule {
|
|
741
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
742
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.
|
|
743
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.
|
|
749
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
750
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SkyDatePipeModule, declarations: [SkyDatePipe, SkyFuzzyDatePipe], imports: [CommonModule, SkyDatetimeResourcesModule], exports: [SkyDatePipe, SkyFuzzyDatePipe] }); }
|
|
751
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [CommonModule, SkyDatetimeResourcesModule] }); }
|
|
744
752
|
}
|
|
745
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatePipeModule, decorators: [{
|
|
746
754
|
type: NgModule,
|
|
747
755
|
args: [{
|
|
748
756
|
declarations: [SkyDatePipe, SkyFuzzyDatePipe],
|
|
@@ -800,6 +808,7 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
800
808
|
// TODO: `activeDate` is very similar to `selectedDate` and at the very least should be able to be undefined. However, this would take considerable refactoring to do and thus has been deferred.
|
|
801
809
|
this.activeDate = new Date();
|
|
802
810
|
this.activeDateId = '';
|
|
811
|
+
this.title = '';
|
|
803
812
|
this.minMode = 'day';
|
|
804
813
|
this.maxMode = 'year';
|
|
805
814
|
this.monthColLimit = 3;
|
|
@@ -812,26 +821,32 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
812
821
|
this.formatDayHeader = 'dd';
|
|
813
822
|
this.formatDayTitle = 'MMMM YYYY';
|
|
814
823
|
this.formatMonthTitle = 'YYYY';
|
|
824
|
+
this.formatDayLabel = 'dddd, MMMM Do YYYY';
|
|
825
|
+
this.formatMonthLabel = 'MMMM YYYY';
|
|
826
|
+
this.formatYearLabel = 'YYYY';
|
|
815
827
|
this.datepickerId = `sky-datepicker-${++nextDatepickerId}`;
|
|
816
828
|
this.stepDay = {};
|
|
817
829
|
this.stepMonth = {};
|
|
818
830
|
this.stepYear = {};
|
|
819
831
|
this.modes = ['day', 'month', 'year'];
|
|
820
832
|
this.dateFormatter = new SkyDateFormatter();
|
|
821
|
-
this.keys =
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
+
this.keys = [
|
|
834
|
+
'enter',
|
|
835
|
+
' ',
|
|
836
|
+
'spacebar',
|
|
837
|
+
'pageup',
|
|
838
|
+
'pagedown',
|
|
839
|
+
'end',
|
|
840
|
+
'home',
|
|
841
|
+
'arrowleft',
|
|
842
|
+
'arrowup',
|
|
843
|
+
'arrowright',
|
|
844
|
+
'arrowdown',
|
|
845
|
+
];
|
|
833
846
|
this.#ngUnsubscribe = new Subject();
|
|
834
847
|
this.#_startingDay = 0;
|
|
848
|
+
this.#resourcesSvc = inject(SkyLibResourcesService);
|
|
849
|
+
this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
|
|
835
850
|
}
|
|
836
851
|
set startingDay(value) {
|
|
837
852
|
this.#_startingDay = value || 0;
|
|
@@ -853,8 +868,16 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
853
868
|
return this.#_selectedDate;
|
|
854
869
|
}
|
|
855
870
|
#ngUnsubscribe;
|
|
871
|
+
#prevDay;
|
|
872
|
+
#nextDay;
|
|
873
|
+
#prevMonth;
|
|
874
|
+
#nextMonth;
|
|
875
|
+
#prevYear;
|
|
876
|
+
#nextYear;
|
|
856
877
|
#_selectedDate;
|
|
857
878
|
#_startingDay;
|
|
879
|
+
#resourcesSvc;
|
|
880
|
+
#liveAnnouncerSvc;
|
|
858
881
|
ngOnInit() {
|
|
859
882
|
if (this.selectedDate) {
|
|
860
883
|
this.activeDate = new Date(this.selectedDate);
|
|
@@ -862,6 +885,25 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
862
885
|
else {
|
|
863
886
|
this.activeDate = new Date();
|
|
864
887
|
}
|
|
888
|
+
this.#resourcesSvc
|
|
889
|
+
.getStrings({
|
|
890
|
+
prevDay: 'skyux_datepicker_move_calendar_previous_day',
|
|
891
|
+
nextDay: 'skyux_datepicker_move_calendar_next_day',
|
|
892
|
+
prevMonth: 'skyux_datepicker_move_calendar_previous_month',
|
|
893
|
+
nextMonth: 'skyux_datepicker_move_calendar_next_month',
|
|
894
|
+
prevYear: 'skyux_datepicker_move_calendar_previous_year',
|
|
895
|
+
nextYear: 'skyux_datepicker_move_calendar_next_year',
|
|
896
|
+
})
|
|
897
|
+
.pipe(takeUntil$1(this.#ngUnsubscribe))
|
|
898
|
+
.subscribe((resources) => {
|
|
899
|
+
this.#prevDay = resources.prevDay;
|
|
900
|
+
this.#nextDay = resources.nextDay;
|
|
901
|
+
this.#prevMonth = resources.prevMonth;
|
|
902
|
+
this.#nextMonth = resources.nextMonth;
|
|
903
|
+
this.#prevYear = resources.prevYear;
|
|
904
|
+
this.#nextYear = resources.nextYear;
|
|
905
|
+
this.refreshView();
|
|
906
|
+
});
|
|
865
907
|
}
|
|
866
908
|
ngOnChanges(changes) {
|
|
867
909
|
this.refreshView();
|
|
@@ -912,13 +954,19 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
912
954
|
}
|
|
913
955
|
refreshView() {
|
|
914
956
|
if (this.datepickerMode === 'day' && this.refreshViewHandlerDay) {
|
|
915
|
-
this.refreshViewHandlerDay();
|
|
957
|
+
this.title = this.refreshViewHandlerDay();
|
|
958
|
+
this.previousLabel = this.#prevDay;
|
|
959
|
+
this.nextLabel = this.#nextDay;
|
|
916
960
|
}
|
|
917
961
|
if (this.datepickerMode === 'month' && this.refreshViewHandlerMonth) {
|
|
918
|
-
this.refreshViewHandlerMonth();
|
|
962
|
+
this.title = this.refreshViewHandlerMonth();
|
|
963
|
+
this.previousLabel = this.#prevMonth;
|
|
964
|
+
this.nextLabel = this.#nextMonth;
|
|
919
965
|
}
|
|
920
966
|
if (this.datepickerMode === 'year' && this.refreshViewHandlerYear) {
|
|
921
|
-
this.refreshViewHandlerYear();
|
|
967
|
+
this.title = this.refreshViewHandlerYear();
|
|
968
|
+
this.previousLabel = this.#prevYear;
|
|
969
|
+
this.nextLabel = this.#nextYear;
|
|
922
970
|
}
|
|
923
971
|
}
|
|
924
972
|
setKeydownHandler(handler, type) {
|
|
@@ -954,20 +1002,20 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
954
1002
|
return false;
|
|
955
1003
|
}
|
|
956
1004
|
onKeydown(event) {
|
|
957
|
-
const key =
|
|
958
|
-
if (!key || event.shiftKey
|
|
1005
|
+
const key = event.key?.toLowerCase();
|
|
1006
|
+
if (!this.keys.includes(key) || event.shiftKey) {
|
|
959
1007
|
return;
|
|
960
1008
|
}
|
|
961
1009
|
event.preventDefault();
|
|
962
1010
|
event.stopPropagation();
|
|
963
|
-
if (key === 'enter' || key === '
|
|
1011
|
+
if (key === 'enter' || key === 'spacebar' || key === ' ') {
|
|
964
1012
|
if (this.isDisabled(this.activeDate)) {
|
|
965
1013
|
return;
|
|
966
1014
|
}
|
|
967
1015
|
this.select(this.activeDate);
|
|
968
1016
|
}
|
|
969
|
-
else if (event.ctrlKey && (key === '
|
|
970
|
-
this.toggleMode(key === '
|
|
1017
|
+
else if (event.ctrlKey && (key === 'arrowup' || key === 'arrowdown')) {
|
|
1018
|
+
this.toggleMode(key === 'arrowup' ? 1 : -1);
|
|
971
1019
|
}
|
|
972
1020
|
else {
|
|
973
1021
|
this.handleKeydown(key, event);
|
|
@@ -1073,6 +1121,10 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1073
1121
|
this.refreshView();
|
|
1074
1122
|
}
|
|
1075
1123
|
}
|
|
1124
|
+
announceDate(date, format) {
|
|
1125
|
+
const caption = this.dateFilter(date, format);
|
|
1126
|
+
this.#liveAnnouncerSvc.announce(caption);
|
|
1127
|
+
}
|
|
1076
1128
|
/**
|
|
1077
1129
|
* Date is disabled if it meets any of these criteria:
|
|
1078
1130
|
* 1. Date falls outside the min or max dates set by the SkyDatepickerConfigService.
|
|
@@ -1094,12 +1146,12 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1094
1146
|
}
|
|
1095
1147
|
return undefined;
|
|
1096
1148
|
}
|
|
1097
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
1098
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.
|
|
1149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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 *ngIf=\"datepickerMode\" class=\"sky-datepicker-calendar-inner\">\n <div class=\"sky-datepicker-calendar-header\">\n <span 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 [attr.aria-label]=\"previousLabel\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <button\n [id]=\"datepickerId + '-title'\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"toggleModeCalendar($event)\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n >\n <strong>{{ title }}</strong>\n </button>\n </span>\n <span 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 [attr.aria-label]=\"nextLabel\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n </button>\n </span>\n </div>\n <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-datepicker-calendar-header{width:100%;display:flex}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.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 .sky-datepicker-calendar-table-container:focus-visible{outline:none}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron{font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1099
1151
|
}
|
|
1100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
1152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
|
|
1101
1153
|
type: Component,
|
|
1102
|
-
args: [{ selector: 'sky-datepicker-inner', encapsulation: ViewEncapsulation.None, template: "<div
|
|
1154
|
+
args: [{ selector: 'sky-datepicker-inner', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"datepickerMode\" class=\"sky-datepicker-calendar-inner\">\n <div class=\"sky-datepicker-calendar-header\">\n <span 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 [attr.aria-label]=\"previousLabel\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <button\n [id]=\"datepickerId + '-title'\"\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n (click)=\"toggleModeCalendar($event)\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n >\n <strong>{{ title }}</strong>\n </button>\n </span>\n <span 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 [attr.aria-label]=\"nextLabel\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n </button>\n </span>\n </div>\n <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-datepicker-calendar-header{width:100%;display:flex}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.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 .sky-datepicker-calendar-table-container:focus-visible{outline:none}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron{font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"] }]
|
|
1103
1155
|
}], propDecorators: { customDates: [{
|
|
1104
1156
|
type: Input
|
|
1105
1157
|
}], startingDay: [{
|
|
@@ -1117,25 +1169,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
1117
1169
|
}] } });
|
|
1118
1170
|
|
|
1119
1171
|
/**
|
|
1172
|
+
* Formats date values according to formatting rules.
|
|
1173
|
+
* @example
|
|
1174
|
+
* ```markup
|
|
1175
|
+
* {{ myDate | skyDatepickerCalendarLabel }}
|
|
1176
|
+
* {{ myDate | skyDatepickerCalendarLabel:'YYYY' }}
|
|
1177
|
+
* ```
|
|
1120
1178
|
* @internal
|
|
1121
1179
|
*/
|
|
1122
|
-
class
|
|
1123
|
-
#
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1180
|
+
class SkyDatepickerCalendarLabelPipe {
|
|
1181
|
+
#datepicker = inject(SkyDatepickerCalendarInnerComponent);
|
|
1182
|
+
#defaultFormat = this.#datepicker.formatDayLabel;
|
|
1183
|
+
/**
|
|
1184
|
+
* Transforms a date value using locale and format rules.
|
|
1185
|
+
* @param value Specifies the date value to transform.
|
|
1186
|
+
* @param format Specifies the format to apply to the transform. The format string is
|
|
1187
|
+
* constructed by a series of symbols that represent date-time values.
|
|
1188
|
+
*/
|
|
1189
|
+
transform(value, format) {
|
|
1190
|
+
let formattedValue = '';
|
|
1191
|
+
if (value && value instanceof Date) {
|
|
1192
|
+
formattedValue = this.#datepicker.dateFilter(value, format || this.#defaultFormat);
|
|
1193
|
+
}
|
|
1194
|
+
return formattedValue;
|
|
1132
1195
|
}
|
|
1133
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
1134
|
-
static { this.ɵ
|
|
1196
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1197
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, isStandalone: true, name: "skyDatepickerCalendarLabel" }); }
|
|
1135
1198
|
}
|
|
1136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
1137
|
-
type:
|
|
1138
|
-
|
|
1199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, decorators: [{
|
|
1200
|
+
type: Pipe,
|
|
1201
|
+
args: [{
|
|
1202
|
+
name: 'skyDatepickerCalendarLabel',
|
|
1203
|
+
standalone: true,
|
|
1204
|
+
}]
|
|
1205
|
+
}] });
|
|
1139
1206
|
|
|
1140
1207
|
class SkyDatepickerConfigService {
|
|
1141
1208
|
constructor() {
|
|
@@ -1146,10 +1213,10 @@ class SkyDatepickerConfigService {
|
|
|
1146
1213
|
*/
|
|
1147
1214
|
this.startingDay = 0;
|
|
1148
1215
|
}
|
|
1149
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
1150
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.
|
|
1216
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1217
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' }); }
|
|
1151
1218
|
}
|
|
1152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
1219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
|
|
1153
1220
|
type: Injectable,
|
|
1154
1221
|
args: [{
|
|
1155
1222
|
providedIn: 'root',
|
|
@@ -1167,10 +1234,10 @@ class SkyDatepickerService {
|
|
|
1167
1234
|
*/
|
|
1168
1235
|
this.keyDatePopoverStream = new Subject();
|
|
1169
1236
|
}
|
|
1170
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
1171
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.
|
|
1237
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1238
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerService }); }
|
|
1172
1239
|
}
|
|
1173
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
1240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerService, decorators: [{
|
|
1174
1241
|
type: Injectable
|
|
1175
1242
|
}] });
|
|
1176
1243
|
|
|
@@ -1181,12 +1248,12 @@ class SkyDayPickerButtonComponent {
|
|
|
1181
1248
|
constructor(datepicker) {
|
|
1182
1249
|
this.datepicker = datepicker;
|
|
1183
1250
|
}
|
|
1184
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
1185
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.
|
|
1251
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1252
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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 [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\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"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
|
|
1186
1253
|
}
|
|
1187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
1254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
|
|
1188
1255
|
type: Component,
|
|
1189
|
-
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"] }]
|
|
1256
|
+
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 [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\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"] }]
|
|
1190
1257
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { date: [{
|
|
1191
1258
|
type: Input
|
|
1192
1259
|
}] } });
|
|
@@ -1297,10 +1364,10 @@ class SkyDayPickerCellComponent {
|
|
|
1297
1364
|
}, 500);
|
|
1298
1365
|
}
|
|
1299
1366
|
}
|
|
1300
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
1301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.
|
|
1367
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1368
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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 }); }
|
|
1302
1369
|
}
|
|
1303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
1370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
|
|
1304
1371
|
type: Component,
|
|
1305
1372
|
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" }]
|
|
1306
1373
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }], propDecorators: { activeDateHasChanged: [{
|
|
@@ -1330,18 +1397,14 @@ class SkyDayPickerComponent {
|
|
|
1330
1397
|
this.title = '';
|
|
1331
1398
|
this.rows = [];
|
|
1332
1399
|
this.weekNumbers = [];
|
|
1333
|
-
this.#daysInMonth = [
|
|
1334
|
-
31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31,
|
|
1335
|
-
];
|
|
1400
|
+
this.#daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
|
1336
1401
|
this.#ngUnsubscribe = new Subject();
|
|
1337
1402
|
this.datepicker = datepicker;
|
|
1338
1403
|
}
|
|
1339
1404
|
ngOnInit() {
|
|
1340
1405
|
this.datepicker.stepDay = { months: 1 };
|
|
1341
1406
|
this.#initialDate = this.datepicker.activeDate.getDate();
|
|
1342
|
-
this.datepicker.setRefreshViewHandler(() =>
|
|
1343
|
-
this.#refreshDayView();
|
|
1344
|
-
}, 'day');
|
|
1407
|
+
this.datepicker.setRefreshViewHandler(() => this.#refreshDayView(), 'day');
|
|
1345
1408
|
this.datepicker.setCompareHandler(this.#compareDays, 'day');
|
|
1346
1409
|
this.datepicker.setKeydownHandler((key, event) => {
|
|
1347
1410
|
this.#keydownDays(key, event);
|
|
@@ -1398,7 +1461,6 @@ class SkyDayPickerComponent {
|
|
|
1398
1461
|
this.labels[j].abbr = this.datepicker.dateFilter(pickerDates[j].date, this.datepicker.formatDayHeader);
|
|
1399
1462
|
this.labels[j].full = this.datepicker.dateFilter(pickerDates[j].date, 'EEEE');
|
|
1400
1463
|
}
|
|
1401
|
-
this.title = this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatDayTitle);
|
|
1402
1464
|
const oldDateRange = this.#getDateRange(this.rows);
|
|
1403
1465
|
this.rows = this.datepicker.createCalendarRows(pickerDates, 7);
|
|
1404
1466
|
const newDateRange = this.#getDateRange(this.rows);
|
|
@@ -1415,21 +1477,22 @@ class SkyDayPickerComponent {
|
|
|
1415
1477
|
this.calendarDateRangeChange.next(undefined);
|
|
1416
1478
|
}
|
|
1417
1479
|
}
|
|
1480
|
+
return this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatDayTitle);
|
|
1418
1481
|
}
|
|
1419
1482
|
#keydownDays(key, event) {
|
|
1420
1483
|
let date = this.datepicker.activeDate.getDate();
|
|
1421
1484
|
/* istanbul ignore else */
|
|
1422
1485
|
/* sanity check */
|
|
1423
|
-
if (key === '
|
|
1486
|
+
if (key === 'arrowleft') {
|
|
1424
1487
|
date = date - 1;
|
|
1425
1488
|
}
|
|
1426
|
-
else if (key === '
|
|
1489
|
+
else if (key === 'arrowup') {
|
|
1427
1490
|
date = date - 7;
|
|
1428
1491
|
}
|
|
1429
|
-
else if (key === '
|
|
1492
|
+
else if (key === 'arrowright') {
|
|
1430
1493
|
date = date + 1;
|
|
1431
1494
|
}
|
|
1432
|
-
else if (key === '
|
|
1495
|
+
else if (key === 'arrowdown') {
|
|
1433
1496
|
date = date + 7;
|
|
1434
1497
|
}
|
|
1435
1498
|
else if (key === 'pageup' || key === 'pagedown') {
|
|
@@ -1444,6 +1507,7 @@ class SkyDayPickerComponent {
|
|
|
1444
1507
|
date = this.#getDaysInMonth(this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth());
|
|
1445
1508
|
}
|
|
1446
1509
|
this.datepicker.activeDate.setDate(date);
|
|
1510
|
+
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatDayLabel);
|
|
1447
1511
|
}
|
|
1448
1512
|
#getDaysInMonth(year, month) {
|
|
1449
1513
|
return month === 1 &&
|
|
@@ -1512,12 +1576,12 @@ class SkyDayPickerComponent {
|
|
|
1512
1576
|
}
|
|
1513
1577
|
return undefined;
|
|
1514
1578
|
}
|
|
1515
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
1516
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.
|
|
1579
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1580
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n <thead>\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", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }] }); }
|
|
1517
1581
|
}
|
|
1518
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
1582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
|
|
1519
1583
|
type: Component,
|
|
1520
|
-
args: [{ selector: 'sky-daypicker', template: "<
|
|
1584
|
+
args: [{ selector: 'sky-daypicker', template: "<table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n <thead>\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" }]
|
|
1521
1585
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { customDates: [{
|
|
1522
1586
|
type: Input
|
|
1523
1587
|
}], calendarDateRangeChange: [{
|
|
@@ -1539,9 +1603,7 @@ class SkyMonthPickerComponent {
|
|
|
1539
1603
|
this.datepicker.stepMonth = {
|
|
1540
1604
|
years: 1,
|
|
1541
1605
|
};
|
|
1542
|
-
this.datepicker.setRefreshViewHandler(() =>
|
|
1543
|
-
this.#refreshMonthView();
|
|
1544
|
-
}, 'month');
|
|
1606
|
+
this.datepicker.setRefreshViewHandler(() => this.#refreshMonthView(), 'month');
|
|
1545
1607
|
this.datepicker.setCompareHandler(this.#compareMonth, 'month');
|
|
1546
1608
|
this.datepicker.refreshView();
|
|
1547
1609
|
this.datepicker.setKeydownHandler((key, event) => {
|
|
@@ -1562,23 +1624,23 @@ class SkyMonthPickerComponent {
|
|
|
1562
1624
|
date = this.datepicker.fixTimeZone(date);
|
|
1563
1625
|
months[i] = this.datepicker.createDateObject(date, this.datepicker.formatMonth, false, this.datepicker.datepickerId + '-' + i);
|
|
1564
1626
|
}
|
|
1565
|
-
this.title = this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatMonthTitle);
|
|
1566
1627
|
this.rows = this.datepicker.createCalendarRows(months, this.datepicker.monthColLimit);
|
|
1628
|
+
return this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatMonthTitle);
|
|
1567
1629
|
}
|
|
1568
1630
|
#keydownMonths(key, event) {
|
|
1569
1631
|
let date = this.datepicker.activeDate.getMonth();
|
|
1570
1632
|
/* istanbul ignore else */
|
|
1571
1633
|
/* sanity check */
|
|
1572
|
-
if (key === '
|
|
1634
|
+
if (key === 'arrowleft') {
|
|
1573
1635
|
date = date - 1;
|
|
1574
1636
|
}
|
|
1575
|
-
else if (key === '
|
|
1637
|
+
else if (key === 'arrowup') {
|
|
1576
1638
|
date = date - this.datepicker.monthColLimit;
|
|
1577
1639
|
}
|
|
1578
|
-
else if (key === '
|
|
1640
|
+
else if (key === 'arrowright') {
|
|
1579
1641
|
date = date + 1;
|
|
1580
1642
|
}
|
|
1581
|
-
else if (key === '
|
|
1643
|
+
else if (key === 'arrowdown') {
|
|
1582
1644
|
date = date + this.datepicker.monthColLimit;
|
|
1583
1645
|
}
|
|
1584
1646
|
else if (key === 'pageup' || key === 'pagedown') {
|
|
@@ -1592,13 +1654,14 @@ class SkyMonthPickerComponent {
|
|
|
1592
1654
|
date = 11;
|
|
1593
1655
|
}
|
|
1594
1656
|
this.datepicker.activeDate.setMonth(date);
|
|
1657
|
+
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatMonthLabel);
|
|
1595
1658
|
}
|
|
1596
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
1597
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.
|
|
1659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0, template: "<table role=\"grid\">\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 [attr.aria-label]=\"\n date.date | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\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", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
|
|
1598
1661
|
}
|
|
1599
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
1662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
|
|
1600
1663
|
type: Component,
|
|
1601
|
-
args: [{ selector: 'sky-monthpicker', template: "<table
|
|
1664
|
+
args: [{ selector: 'sky-monthpicker', template: "<table role=\"grid\">\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 [attr.aria-label]=\"\n date.date | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\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" }]
|
|
1602
1665
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
|
|
1603
1666
|
|
|
1604
1667
|
/**
|
|
@@ -1612,9 +1675,7 @@ class SkyYearPickerComponent {
|
|
|
1612
1675
|
}
|
|
1613
1676
|
ngOnInit() {
|
|
1614
1677
|
this.datepicker.stepYear = { years: this.datepicker.yearRange };
|
|
1615
|
-
this.datepicker.setRefreshViewHandler(() =>
|
|
1616
|
-
this.#refreshYearView();
|
|
1617
|
-
}, 'year');
|
|
1678
|
+
this.datepicker.setRefreshViewHandler(() => this.#refreshYearView(), 'year');
|
|
1618
1679
|
this.datepicker.setCompareHandler(this.#compareYears, 'year');
|
|
1619
1680
|
this.datepicker.setKeydownHandler((key, event) => {
|
|
1620
1681
|
this.#keydownYears(key, event);
|
|
@@ -1638,26 +1699,27 @@ class SkyYearPickerComponent {
|
|
|
1638
1699
|
date.setFullYear(start + i, 0, 1);
|
|
1639
1700
|
years[i] = this.datepicker.createDateObject(date, this.datepicker.formatYear, false, this.datepicker.datepickerId + '-' + i);
|
|
1640
1701
|
}
|
|
1641
|
-
|
|
1702
|
+
const newTitle = [
|
|
1642
1703
|
years[0].label,
|
|
1643
1704
|
years[this.datepicker.yearRange - 1].label,
|
|
1644
1705
|
].join(' - ');
|
|
1645
1706
|
this.rows = this.datepicker.createCalendarRows(years, this.datepicker.yearColLimit);
|
|
1707
|
+
return newTitle;
|
|
1646
1708
|
}
|
|
1647
1709
|
#keydownYears(key, event) {
|
|
1648
1710
|
let date = this.datepicker.activeDate.getFullYear();
|
|
1649
1711
|
/* istanbul ignore else */
|
|
1650
1712
|
/* sanity check */
|
|
1651
|
-
if (key === '
|
|
1713
|
+
if (key === 'arrowleft') {
|
|
1652
1714
|
date = date - 1;
|
|
1653
1715
|
}
|
|
1654
|
-
else if (key === '
|
|
1716
|
+
else if (key === 'arrowup') {
|
|
1655
1717
|
date = date - this.datepicker.yearColLimit;
|
|
1656
1718
|
}
|
|
1657
|
-
else if (key === '
|
|
1719
|
+
else if (key === 'arrowright') {
|
|
1658
1720
|
date = date + 1;
|
|
1659
1721
|
}
|
|
1660
|
-
else if (key === '
|
|
1722
|
+
else if (key === 'arrowdown') {
|
|
1661
1723
|
date = date + this.datepicker.yearColLimit;
|
|
1662
1724
|
}
|
|
1663
1725
|
else if (key === 'pageup' || key === 'pagedown') {
|
|
@@ -1673,13 +1735,14 @@ class SkyYearPickerComponent {
|
|
|
1673
1735
|
1;
|
|
1674
1736
|
}
|
|
1675
1737
|
this.datepicker.activeDate.setFullYear(date);
|
|
1738
|
+
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatYearLabel);
|
|
1676
1739
|
}
|
|
1677
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
1678
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.
|
|
1740
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1741
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0, template: "<table role=\"grid\">\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 [attr.aria-label]=\"\n date.date | skyDatepickerCalendarLabel: datepicker.formatYearLabel\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", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
|
|
1679
1742
|
}
|
|
1680
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
1743
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
|
|
1681
1744
|
type: Component,
|
|
1682
|
-
args: [{ selector: 'sky-yearpicker', template: "<table
|
|
1745
|
+
args: [{ selector: 'sky-yearpicker', template: "<table role=\"grid\">\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 [attr.aria-label]=\"\n date.date | skyDatepickerCalendarLabel: datepicker.formatYearLabel\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" }]
|
|
1683
1746
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
|
|
1684
1747
|
|
|
1685
1748
|
/**
|
|
@@ -1735,12 +1798,12 @@ class SkyDatepickerCalendarComponent {
|
|
|
1735
1798
|
this.datepicker?.select(new Date(), false);
|
|
1736
1799
|
}
|
|
1737
1800
|
}
|
|
1738
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
1739
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.
|
|
1801
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1802
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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" }, 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 <div\n class=\"sky-datepicker-calendar-table-container\"\n autofocus\n tabindex=\"0\"\n (keydown)=\"datepicker?.onKeydown($event)\"\n >\n <sky-daypicker\n *ngIf=\"datepicker?.datepickerMode === 'day'\"\n [customDates]=\"customDates\"\n [isWaiting]=\"isDaypickerWaiting\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n ></sky-daypicker>\n <sky-monthpicker\n *ngIf=\"datepicker?.datepickerMode === 'month'\"\n ></sky-monthpicker>\n <sky-yearpicker\n *ngIf=\"datepicker?.datepickerMode === 'year'\"\n ></sky-yearpicker>\n </div>\n </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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" }] }); }
|
|
1740
1803
|
}
|
|
1741
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
1804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
|
|
1742
1805
|
type: Component,
|
|
1743
|
-
args: [{ selector: 'sky-datepicker-calendar',
|
|
1806
|
+
args: [{ selector: 'sky-datepicker-calendar', 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 <div\n class=\"sky-datepicker-calendar-table-container\"\n autofocus\n tabindex=\"0\"\n (keydown)=\"datepicker?.onKeydown($event)\"\n >\n <sky-daypicker\n *ngIf=\"datepicker?.datepickerMode === 'day'\"\n [customDates]=\"customDates\"\n [isWaiting]=\"isDaypickerWaiting\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n ></sky-daypicker>\n <sky-monthpicker\n *ngIf=\"datepicker?.datepickerMode === 'month'\"\n ></sky-monthpicker>\n <sky-yearpicker\n *ngIf=\"datepicker?.datepickerMode === 'year'\"\n ></sky-yearpicker>\n </div>\n </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"] }]
|
|
1744
1807
|
}], ctorParameters: () => [{ type: SkyDatepickerConfigService }], propDecorators: { customDates: [{
|
|
1745
1808
|
type: Input
|
|
1746
1809
|
}], isDaypickerWaiting: [{
|
|
@@ -1773,6 +1836,14 @@ let nextId$1 = 0;
|
|
|
1773
1836
|
* You must wrap this component around an input with the `skyDatepickerInput` directive.
|
|
1774
1837
|
*/
|
|
1775
1838
|
class SkyDatepickerComponent {
|
|
1839
|
+
set dateFormat(value) {
|
|
1840
|
+
this.#_dateFormat = value;
|
|
1841
|
+
this.dateFormatChange.emit(value);
|
|
1842
|
+
this.#populateInputBoxHelpText();
|
|
1843
|
+
}
|
|
1844
|
+
get dateFormat() {
|
|
1845
|
+
return this.#_dateFormat;
|
|
1846
|
+
}
|
|
1776
1847
|
get disabled() {
|
|
1777
1848
|
return this.#_disabled;
|
|
1778
1849
|
}
|
|
@@ -1801,7 +1872,7 @@ class SkyDatepickerComponent {
|
|
|
1801
1872
|
this.#createAffixer();
|
|
1802
1873
|
setTimeout(() => {
|
|
1803
1874
|
if (this.calendarRef) {
|
|
1804
|
-
this.#coreAdapter.
|
|
1875
|
+
this.#coreAdapter.applyAutoFocus(this.calendarRef);
|
|
1805
1876
|
this.isVisible = true;
|
|
1806
1877
|
this.#changeDetector.markForCheck();
|
|
1807
1878
|
}
|
|
@@ -1820,12 +1891,16 @@ class SkyDatepickerComponent {
|
|
|
1820
1891
|
#overlay;
|
|
1821
1892
|
#overlayKeyupListener;
|
|
1822
1893
|
#_calendarRef;
|
|
1894
|
+
#_dateFormat;
|
|
1823
1895
|
#_disabled;
|
|
1824
1896
|
#_selectedDate;
|
|
1825
1897
|
#affixService;
|
|
1898
|
+
#appFormatter;
|
|
1826
1899
|
#changeDetector;
|
|
1827
1900
|
#coreAdapter;
|
|
1901
|
+
#dateFormatHintTextTemplateString;
|
|
1828
1902
|
#environmentInjector;
|
|
1903
|
+
#resourceSvc;
|
|
1829
1904
|
#overlayService;
|
|
1830
1905
|
#zIndex;
|
|
1831
1906
|
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
|
|
@@ -1841,6 +1916,10 @@ class SkyDatepickerComponent {
|
|
|
1841
1916
|
* to modify individual dates on the calendar.
|
|
1842
1917
|
*/
|
|
1843
1918
|
this.calendarDateRangeChange = new EventEmitter();
|
|
1919
|
+
/**
|
|
1920
|
+
* @internal
|
|
1921
|
+
*/
|
|
1922
|
+
this.dateFormatChange = new EventEmitter();
|
|
1844
1923
|
/**
|
|
1845
1924
|
* @internal
|
|
1846
1925
|
*/
|
|
@@ -1852,7 +1931,10 @@ class SkyDatepickerComponent {
|
|
|
1852
1931
|
this.#calendarUnsubscribe = new Subject();
|
|
1853
1932
|
this.#ngUnsubscribe = new Subject();
|
|
1854
1933
|
this.#_disabled = false;
|
|
1934
|
+
this.#appFormatter = inject(SkyAppFormat);
|
|
1935
|
+
this.#dateFormatHintTextTemplateString = '';
|
|
1855
1936
|
this.#environmentInjector = inject(EnvironmentInjector);
|
|
1937
|
+
this.#resourceSvc = inject(SkyLibResourcesService);
|
|
1856
1938
|
this.#affixService = affixService;
|
|
1857
1939
|
this.#changeDetector = changeDetector;
|
|
1858
1940
|
this.#coreAdapter = coreAdapter;
|
|
@@ -1874,6 +1956,13 @@ class SkyDatepickerComponent {
|
|
|
1874
1956
|
inputTemplate: this.inputTemplateRef,
|
|
1875
1957
|
buttonsTemplate: this.triggerButtonTemplateRef,
|
|
1876
1958
|
});
|
|
1959
|
+
this.#resourceSvc
|
|
1960
|
+
.getString('skyux_datepicker_format_hint_text')
|
|
1961
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
1962
|
+
.subscribe((templateString) => {
|
|
1963
|
+
this.#dateFormatHintTextTemplateString = templateString;
|
|
1964
|
+
this.#populateInputBoxHelpText();
|
|
1965
|
+
});
|
|
1877
1966
|
}
|
|
1878
1967
|
}
|
|
1879
1968
|
ngOnDestroy() {
|
|
@@ -2043,15 +2132,27 @@ class SkyDatepickerComponent {
|
|
|
2043
2132
|
this.#customDatesSubscription = undefined;
|
|
2044
2133
|
}
|
|
2045
2134
|
}
|
|
2046
|
-
|
|
2047
|
-
|
|
2135
|
+
#populateInputBoxHelpText() {
|
|
2136
|
+
if (this.inputBoxHostService && this.inputTemplateRef) {
|
|
2137
|
+
/* safety check */
|
|
2138
|
+
/* istanbul ignore else */
|
|
2139
|
+
if (this.dateFormat) {
|
|
2140
|
+
this.inputBoxHostService?.setHintText(this.#appFormatter.formatText(this.#dateFormatHintTextTemplateString, this.dateFormat));
|
|
2141
|
+
}
|
|
2142
|
+
else {
|
|
2143
|
+
this.inputBoxHostService?.setHintText('');
|
|
2144
|
+
}
|
|
2145
|
+
}
|
|
2146
|
+
}
|
|
2147
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$2.SkyInputBoxHostService, optional: true }, { token: i3$1.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2148
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", 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 />\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 inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon icon=\"calendar\" size=\"lg\" />\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 cdkTrapFocus\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: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2048
2149
|
}
|
|
2049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
2150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
|
|
2050
2151
|
type: Component,
|
|
2051
|
-
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 />\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 inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources
|
|
2052
|
-
}], ctorParameters: () => [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$
|
|
2152
|
+
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 />\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 inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon icon=\"calendar\" size=\"lg\" />\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 cdkTrapFocus\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"] }]
|
|
2153
|
+
}], ctorParameters: () => [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$2.SkyInputBoxHostService, decorators: [{
|
|
2053
2154
|
type: Optional
|
|
2054
|
-
}] }, { type: i3$
|
|
2155
|
+
}] }, { type: i3$1.SkyThemeService, decorators: [{
|
|
2055
2156
|
type: Optional
|
|
2056
2157
|
}] }, { type: undefined, decorators: [{
|
|
2057
2158
|
type: Optional
|
|
@@ -2062,6 +2163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
2062
2163
|
type: Input
|
|
2063
2164
|
}], calendarDateRangeChange: [{
|
|
2064
2165
|
type: Output
|
|
2166
|
+
}], dateFormatChange: [{
|
|
2167
|
+
type: Output
|
|
2065
2168
|
}], openChange: [{
|
|
2066
2169
|
type: Output
|
|
2067
2170
|
}], calendar: [{
|
|
@@ -2517,13 +2620,13 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2517
2620
|
}
|
|
2518
2621
|
this.#setInputElementValue(formattedDate || '');
|
|
2519
2622
|
}
|
|
2520
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
2521
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.
|
|
2623
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2624
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.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: [
|
|
2522
2625
|
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
2523
2626
|
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
2524
2627
|
], ngImport: i0 }); }
|
|
2525
2628
|
}
|
|
2526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
2629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
|
|
2527
2630
|
type: Directive,
|
|
2528
2631
|
args: [{
|
|
2529
2632
|
selector: '[skyFuzzyDatepickerInput]',
|
|
@@ -2681,7 +2784,6 @@ class SkyDatepickerInputDirective {
|
|
|
2681
2784
|
}
|
|
2682
2785
|
#control;
|
|
2683
2786
|
#dateFormatter;
|
|
2684
|
-
#initialPlaceholder;
|
|
2685
2787
|
#preferredShortDateFormat;
|
|
2686
2788
|
#ngUnsubscribe;
|
|
2687
2789
|
#_dateFormat;
|
|
@@ -2691,14 +2793,13 @@ class SkyDatepickerInputDirective {
|
|
|
2691
2793
|
#_startingDay;
|
|
2692
2794
|
#_strict;
|
|
2693
2795
|
#_value;
|
|
2694
|
-
#adapter;
|
|
2695
2796
|
#changeDetector;
|
|
2696
2797
|
#configService;
|
|
2697
2798
|
#elementRef;
|
|
2698
2799
|
#localeProvider;
|
|
2699
2800
|
#renderer;
|
|
2700
2801
|
#datepickerComponent;
|
|
2701
|
-
constructor(
|
|
2802
|
+
constructor(changeDetector, configService, elementRef, localeProvider, renderer, datepickerComponent) {
|
|
2702
2803
|
/**
|
|
2703
2804
|
* Whether to disable date validation on the datepicker input.
|
|
2704
2805
|
* @default false
|
|
@@ -2721,15 +2822,12 @@ class SkyDatepickerInputDirective {
|
|
|
2721
2822
|
throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
|
|
2722
2823
|
'`<sky-datepicker>` component!');
|
|
2723
2824
|
}
|
|
2724
|
-
this.#adapter = adapter;
|
|
2725
2825
|
this.#changeDetector = changeDetector;
|
|
2726
2826
|
this.#configService = configService;
|
|
2727
2827
|
this.#elementRef = elementRef;
|
|
2728
2828
|
this.#localeProvider = localeProvider;
|
|
2729
2829
|
this.#renderer = renderer;
|
|
2730
2830
|
this.#datepickerComponent = datepickerComponent;
|
|
2731
|
-
this.#initialPlaceholder = this.#adapter.getPlaceholder(this.#elementRef);
|
|
2732
|
-
this.#updatePlaceholder();
|
|
2733
2831
|
this.#localeProvider
|
|
2734
2832
|
.getLocaleInfo()
|
|
2735
2833
|
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
@@ -2745,6 +2843,7 @@ class SkyDatepickerInputDirective {
|
|
|
2745
2843
|
this.#renderer.addClass(element, 'sky-form-control');
|
|
2746
2844
|
}
|
|
2747
2845
|
ngAfterContentInit() {
|
|
2846
|
+
this.#datepickerComponent.dateFormat = this.dateFormat;
|
|
2748
2847
|
this.#datepickerComponent.dateChange
|
|
2749
2848
|
.pipe(distinctUntilChanged())
|
|
2750
2849
|
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
@@ -2882,7 +2981,7 @@ class SkyDatepickerInputDirective {
|
|
|
2882
2981
|
this.#onValueChange(this.#elementRef.nativeElement.value);
|
|
2883
2982
|
}
|
|
2884
2983
|
#applyDateFormat() {
|
|
2885
|
-
this.#
|
|
2984
|
+
this.#datepickerComponent.dateFormat = this.dateFormat;
|
|
2886
2985
|
if (this.#value) {
|
|
2887
2986
|
const formattedDate = this.#dateFormatter.format(this.#value, this.dateFormat);
|
|
2888
2987
|
this.#setInputElementValue(formattedDate);
|
|
@@ -2972,11 +3071,6 @@ class SkyDatepickerInputDirective {
|
|
|
2972
3071
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
2973
3072
|
// istanbul ignore next
|
|
2974
3073
|
#onValidatorChange;
|
|
2975
|
-
#updatePlaceholder() {
|
|
2976
|
-
if (!this.#initialPlaceholder && this.dateFormat) {
|
|
2977
|
-
this.#adapter.setPlaceholder(this.#elementRef, this.dateFormat);
|
|
2978
|
-
}
|
|
2979
|
-
}
|
|
2980
3074
|
/**
|
|
2981
3075
|
* Update the value of the form control and input element
|
|
2982
3076
|
* @param emitEvent Denotes if we emit an event to the consumer's form control. We do not want to do this if the value is being updated via a `setValue` call or a `patchValue` call as this is already handled by Angular.
|
|
@@ -3026,24 +3120,16 @@ class SkyDatepickerInputDirective {
|
|
|
3026
3120
|
}
|
|
3027
3121
|
}
|
|
3028
3122
|
}
|
|
3029
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
3030
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.
|
|
3031
|
-
SKY_DATEPICKER_VALUE_ACCESSOR,
|
|
3032
|
-
SKY_DATEPICKER_VALIDATOR,
|
|
3033
|
-
SkyDatepickerAdapterService,
|
|
3034
|
-
], ngImport: i0 }); }
|
|
3123
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3124
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.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: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR], ngImport: i0 }); }
|
|
3035
3125
|
}
|
|
3036
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
3126
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
|
|
3037
3127
|
type: Directive,
|
|
3038
3128
|
args: [{
|
|
3039
3129
|
selector: '[skyDatepickerInput]',
|
|
3040
|
-
providers: [
|
|
3041
|
-
SKY_DATEPICKER_VALUE_ACCESSOR,
|
|
3042
|
-
SKY_DATEPICKER_VALIDATOR,
|
|
3043
|
-
SkyDatepickerAdapterService,
|
|
3044
|
-
],
|
|
3130
|
+
providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
|
|
3045
3131
|
}]
|
|
3046
|
-
}], ctorParameters: () => [{ type:
|
|
3132
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
|
|
3047
3133
|
type: Optional
|
|
3048
3134
|
}] }], propDecorators: { dateFormat: [{
|
|
3049
3135
|
type: Input
|
|
@@ -3073,8 +3159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
3073
3159
|
}] } });
|
|
3074
3160
|
|
|
3075
3161
|
class SkyDatepickerModule {
|
|
3076
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
3077
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.
|
|
3162
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3163
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
|
|
3078
3164
|
SkyDatepickerCalendarInnerComponent,
|
|
3079
3165
|
SkyDayPickerComponent,
|
|
3080
3166
|
SkyMonthPickerComponent,
|
|
@@ -3083,9 +3169,11 @@ class SkyDatepickerModule {
|
|
|
3083
3169
|
SkyDatepickerInputDirective,
|
|
3084
3170
|
SkyFuzzyDatepickerInputDirective,
|
|
3085
3171
|
SkyDayPickerCellComponent,
|
|
3086
|
-
SkyDayPickerButtonComponent], imports: [
|
|
3172
|
+
SkyDayPickerButtonComponent], imports: [A11yModule,
|
|
3173
|
+
CommonModule,
|
|
3087
3174
|
FormsModule,
|
|
3088
3175
|
SkyIconModule,
|
|
3176
|
+
SkyDatepickerCalendarLabelPipe,
|
|
3089
3177
|
SkyDatetimeResourcesModule,
|
|
3090
3178
|
SkyAffixModule,
|
|
3091
3179
|
SkyThemeModule,
|
|
@@ -3094,7 +3182,8 @@ class SkyDatepickerModule {
|
|
|
3094
3182
|
SkyDatepickerComponent,
|
|
3095
3183
|
SkyDatepickerInputDirective,
|
|
3096
3184
|
SkyFuzzyDatepickerInputDirective] }); }
|
|
3097
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.
|
|
3185
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerService], imports: [A11yModule,
|
|
3186
|
+
CommonModule,
|
|
3098
3187
|
FormsModule,
|
|
3099
3188
|
SkyIconModule,
|
|
3100
3189
|
SkyDatetimeResourcesModule,
|
|
@@ -3103,7 +3192,7 @@ class SkyDatepickerModule {
|
|
|
3103
3192
|
SkyPopoverModule,
|
|
3104
3193
|
SkyWaitModule] }); }
|
|
3105
3194
|
}
|
|
3106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
3195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDatepickerModule, decorators: [{
|
|
3107
3196
|
type: NgModule,
|
|
3108
3197
|
args: [{
|
|
3109
3198
|
declarations: [
|
|
@@ -3119,9 +3208,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
3119
3208
|
SkyDayPickerButtonComponent,
|
|
3120
3209
|
],
|
|
3121
3210
|
imports: [
|
|
3211
|
+
A11yModule,
|
|
3122
3212
|
CommonModule,
|
|
3123
3213
|
FormsModule,
|
|
3124
3214
|
SkyIconModule,
|
|
3215
|
+
SkyDatepickerCalendarLabelPipe,
|
|
3125
3216
|
SkyDatetimeResourcesModule,
|
|
3126
3217
|
SkyAffixModule,
|
|
3127
3218
|
SkyThemeModule,
|
|
@@ -3168,10 +3259,10 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
|
|
|
3168
3259
|
}
|
|
3169
3260
|
return 'skyux_date_range_picker_before_date_label';
|
|
3170
3261
|
}
|
|
3171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
3172
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.
|
|
3262
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3263
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }); }
|
|
3173
3264
|
}
|
|
3174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
3265
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
|
|
3175
3266
|
type: Pipe,
|
|
3176
3267
|
args: [{
|
|
3177
3268
|
name: 'skyDateRangePickerEndDateResourceKey',
|
|
@@ -3185,10 +3276,10 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
|
|
|
3185
3276
|
}
|
|
3186
3277
|
return 'skyux_date_range_picker_after_date_label';
|
|
3187
3278
|
}
|
|
3188
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
3189
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.
|
|
3279
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3280
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }); }
|
|
3190
3281
|
}
|
|
3191
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
3282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
|
|
3192
3283
|
type: Pipe,
|
|
3193
3284
|
args: [{
|
|
3194
3285
|
name: 'skyDateRangePickerStartDateResourceKey',
|
|
@@ -3845,11 +3936,14 @@ class SkyDateRangeService {
|
|
|
3845
3936
|
this.#calculatorReadyStream.next(true);
|
|
3846
3937
|
});
|
|
3847
3938
|
}
|
|
3848
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
3849
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.
|
|
3939
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangeService, deps: [{ token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3940
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangeService, providedIn: 'root' }); }
|
|
3850
3941
|
}
|
|
3851
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
3852
|
-
type: Injectable
|
|
3942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangeService, decorators: [{
|
|
3943
|
+
type: Injectable,
|
|
3944
|
+
args: [{
|
|
3945
|
+
providedIn: 'root',
|
|
3946
|
+
}]
|
|
3853
3947
|
}], ctorParameters: () => [{ type: i3.SkyLibResourcesService }] });
|
|
3854
3948
|
|
|
3855
3949
|
const SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
|
|
@@ -4324,19 +4418,19 @@ class SkyDateRangePickerComponent {
|
|
|
4324
4418
|
/* istanbul ignore next */
|
|
4325
4419
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4326
4420
|
#onTouched;
|
|
4327
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
4328
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.
|
|
4421
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2$3.UntypedFormBuilder }, { token: i3.SkyAppLocaleProvider }, { token: i0.NgZone }, { token: i3$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4422
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
|
|
4329
4423
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
|
4330
4424
|
SKY_DATE_RANGE_PICKER_VALIDATOR,
|
|
4331
|
-
], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"isReady && formGroup\"\n class=\"sky-date-range-picker\"\n [formGroup]=\"formGroup\"\n>\n <div\n class=\"sky-date-range-picker-form-group\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n !showStartDatePicker && !showEndDatePicker\n }\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <label\n class=\"sky-control-label\"\n [attr.for]=\"dateRangePickerId + '-select-calculator'\"\n >\n {{\n label || ('skyux_date_range_picker_default_label' | skyLibResources)\n }}\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\n class=\"sky-date-range-picker-form-group\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n showStartDatePicker && !showEndDatePicker\n }\"\n [hidden]=\"!showStartDatePicker\"\n >\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 class=\"sky-form-control\"\n formControlName=\"startDate\"\n [attr.aria-label]=\"\n label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator?.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n : 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\n class=\"sky-date-range-picker-form-group\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input': showEndDatePicker\n }\"\n [hidden]=\"!showEndDatePicker\"\n >\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 class=\"sky-form-control\"\n formControlName=\"endDate\"\n skyDatepickerInput\n [attr.aria-label]=\"\n label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator?.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n : 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: [":host{display:block}.sky-date-range-picker{display:flex}@media (max-width: 768px){.sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}: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%}: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%}: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}@media (max-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0}@media (max-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}\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", "hintText"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4425
|
+
], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"isReady && formGroup\"\n class=\"sky-date-range-picker\"\n [formGroup]=\"formGroup\"\n>\n <div\n class=\"sky-date-range-picker-form-group\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n !showStartDatePicker && !showEndDatePicker\n }\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <label\n class=\"sky-control-label\"\n [attr.for]=\"dateRangePickerId + '-select-calculator'\"\n >\n {{\n label || ('skyux_date_range_picker_default_label' | skyLibResources)\n }}\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\n class=\"sky-date-range-picker-form-group\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n showStartDatePicker && !showEndDatePicker\n }\"\n [hidden]=\"!showStartDatePicker\"\n >\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 class=\"sky-form-control\"\n formControlName=\"startDate\"\n [attr.aria-label]=\"\n label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator?.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n : 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\n class=\"sky-date-range-picker-form-group\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input': showEndDatePicker\n }\"\n [hidden]=\"!showEndDatePicker\"\n >\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 class=\"sky-form-control\"\n formControlName=\"endDate\"\n skyDatepickerInput\n [attr.aria-label]=\"\n label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator?.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n : 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: [":host{display:block}.sky-date-range-picker{display:flex}@media (max-width: 768px){.sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}: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%}: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%}: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}@media (max-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0}@media (max-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}\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$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.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$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "hintText"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4332
4426
|
}
|
|
4333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
4427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
|
|
4334
4428
|
type: Component,
|
|
4335
4429
|
args: [{ selector: 'sky-date-range-picker', providers: [
|
|
4336
4430
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
|
4337
4431
|
SKY_DATE_RANGE_PICKER_VALIDATOR,
|
|
4338
4432
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isReady && formGroup\"\n class=\"sky-date-range-picker\"\n [formGroup]=\"formGroup\"\n>\n <div\n class=\"sky-date-range-picker-form-group\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n !showStartDatePicker && !showEndDatePicker\n }\"\n >\n <sky-input-box [disabled]=\"disabled\">\n <label\n class=\"sky-control-label\"\n [attr.for]=\"dateRangePickerId + '-select-calculator'\"\n >\n {{\n label || ('skyux_date_range_picker_default_label' | skyLibResources)\n }}\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\n class=\"sky-date-range-picker-form-group\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n showStartDatePicker && !showEndDatePicker\n }\"\n [hidden]=\"!showStartDatePicker\"\n >\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 class=\"sky-form-control\"\n formControlName=\"startDate\"\n [attr.aria-label]=\"\n label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator?.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n : 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\n class=\"sky-date-range-picker-form-group\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input': showEndDatePicker\n }\"\n [hidden]=\"!showEndDatePicker\"\n >\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 class=\"sky-form-control\"\n formControlName=\"endDate\"\n skyDatepickerInput\n [attr.aria-label]=\"\n label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator?.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n : 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: [":host{display:block}.sky-date-range-picker{display:flex}@media (max-width: 768px){.sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}: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%}: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%}: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}@media (max-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0}@media (max-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}\n"] }]
|
|
4339
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2$
|
|
4433
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2$3.UntypedFormBuilder }, { type: i3.SkyAppLocaleProvider }, { type: i0.NgZone }, { type: i3$1.SkyThemeService, decorators: [{
|
|
4340
4434
|
type: Optional
|
|
4341
4435
|
}] }], propDecorators: { calculatorIds: [{
|
|
4342
4436
|
type: Input
|
|
@@ -4353,8 +4447,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
4353
4447
|
}] } });
|
|
4354
4448
|
|
|
4355
4449
|
class SkyDateRangePickerModule {
|
|
4356
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
4357
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.
|
|
4450
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4451
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent,
|
|
4358
4452
|
SkyDateRangePickerEndDateResourceKeyPipe,
|
|
4359
4453
|
SkyDateRangePickerStartDateResourceKeyPipe], imports: [CommonModule,
|
|
4360
4454
|
FormsModule,
|
|
@@ -4362,14 +4456,14 @@ class SkyDateRangePickerModule {
|
|
|
4362
4456
|
SkyDatepickerModule,
|
|
4363
4457
|
SkyDatetimeResourcesModule,
|
|
4364
4458
|
SkyInputBoxModule], exports: [SkyDateRangePickerComponent] }); }
|
|
4365
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.
|
|
4459
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerModule, imports: [CommonModule,
|
|
4366
4460
|
FormsModule,
|
|
4367
4461
|
ReactiveFormsModule,
|
|
4368
4462
|
SkyDatepickerModule,
|
|
4369
4463
|
SkyDatetimeResourcesModule,
|
|
4370
4464
|
SkyInputBoxModule] }); }
|
|
4371
4465
|
}
|
|
4372
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
4466
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
|
|
4373
4467
|
type: NgModule,
|
|
4374
4468
|
args: [{
|
|
4375
4469
|
declarations: [
|
|
@@ -4386,7 +4480,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
4386
4480
|
SkyInputBoxModule,
|
|
4387
4481
|
],
|
|
4388
4482
|
exports: [SkyDateRangePickerComponent],
|
|
4389
|
-
providers: [SkyDateRangeService],
|
|
4390
4483
|
}]
|
|
4391
4484
|
}] });
|
|
4392
4485
|
|
|
@@ -4433,12 +4526,20 @@ class SkyTimepickerComponent {
|
|
|
4433
4526
|
}
|
|
4434
4527
|
}
|
|
4435
4528
|
set selectedMeridies(meridies) {
|
|
4529
|
+
meridies = meridies.trim();
|
|
4436
4530
|
/* istanbul ignore else */
|
|
4437
|
-
if (
|
|
4438
|
-
|
|
4439
|
-
|
|
4440
|
-
|
|
4531
|
+
if (meridies !== this.selectedMeridies) {
|
|
4532
|
+
switch (meridies) {
|
|
4533
|
+
case 'AM':
|
|
4534
|
+
this.activeTime = moment(this.activeTime)
|
|
4535
|
+
.subtract(12, 'hours')
|
|
4536
|
+
.toDate();
|
|
4537
|
+
break;
|
|
4538
|
+
case 'PM':
|
|
4539
|
+
this.activeTime = moment(this.activeTime).add(12, 'hours').toDate();
|
|
4540
|
+
break;
|
|
4441
4541
|
}
|
|
4542
|
+
this.selectedTimeChanged.emit(this.selectedTime);
|
|
4442
4543
|
}
|
|
4443
4544
|
}
|
|
4444
4545
|
get selectedMeridies() {
|
|
@@ -4736,15 +4837,15 @@ class SkyTimepickerComponent {
|
|
|
4736
4837
|
/* istanbul ignore next */
|
|
4737
4838
|
this.#overlayKeyupListener?.unsubscribe();
|
|
4738
4839
|
}
|
|
4739
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
4740
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.
|
|
4840
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$2.SkyInputBoxHostService, optional: true }, { token: i3$1.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4841
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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 />\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]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon icon=\"clock\" size=\"lg\" />\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: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4741
4842
|
}
|
|
4742
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
4843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
|
4743
4844
|
type: Component,
|
|
4744
|
-
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 />\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]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources
|
|
4745
|
-
}], ctorParameters: () => [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$
|
|
4845
|
+
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 />\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]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon icon=\"clock\" size=\"lg\" />\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"] }]
|
|
4846
|
+
}], ctorParameters: () => [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$2.SkyInputBoxHostService, decorators: [{
|
|
4746
4847
|
type: Optional
|
|
4747
|
-
}] }, { type: i3$
|
|
4848
|
+
}] }, { type: i3$1.SkyThemeService, decorators: [{
|
|
4748
4849
|
type: Optional
|
|
4749
4850
|
}] }, { type: undefined, decorators: [{
|
|
4750
4851
|
type: Optional
|
|
@@ -4979,10 +5080,10 @@ class SkyTimepickerInputDirective {
|
|
|
4979
5080
|
/* istanbul ignore next */
|
|
4980
5081
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4981
5082
|
#_validatorChange = () => { };
|
|
4982
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
4983
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.
|
|
5083
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyTimepickerInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5084
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.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 }); }
|
|
4984
5085
|
}
|
|
4985
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
5086
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
|
|
4986
5087
|
type: Directive,
|
|
4987
5088
|
args: [{
|
|
4988
5089
|
selector: '[skyTimepickerInput]',
|
|
@@ -5005,19 +5106,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
|
|
|
5005
5106
|
}] } });
|
|
5006
5107
|
|
|
5007
5108
|
class SkyTimepickerModule {
|
|
5008
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.
|
|
5009
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.
|
|
5109
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5110
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
|
|
5010
5111
|
SkyIconModule,
|
|
5011
5112
|
SkyDatetimeResourcesModule,
|
|
5012
5113
|
SkyAffixModule,
|
|
5013
5114
|
SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] }); }
|
|
5014
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.
|
|
5115
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyTimepickerModule, imports: [CommonModule,
|
|
5015
5116
|
SkyIconModule,
|
|
5016
5117
|
SkyDatetimeResourcesModule,
|
|
5017
5118
|
SkyAffixModule,
|
|
5018
5119
|
SkyThemeModule] }); }
|
|
5019
5120
|
}
|
|
5020
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.
|
|
5121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SkyTimepickerModule, decorators: [{
|
|
5021
5122
|
type: NgModule,
|
|
5022
5123
|
args: [{
|
|
5023
5124
|
declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],
|