@skyux/datetime 10.0.0-alpha.2 → 10.0.0-alpha.4
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 +1326 -1254
- 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 +3 -3
- 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 +15 -5
- package/esm2022/lib/modules/datepicker/datepicker-calendar-label.pipe.mjs +39 -0
- package/esm2022/lib/modules/datepicker/datepicker-calendar.component.mjs +5 -6
- package/esm2022/lib/modules/datepicker/datepicker-config.service.mjs +3 -3
- package/esm2022/lib/modules/datepicker/datepicker-input-fuzzy.directive.mjs +3 -3
- package/esm2022/lib/modules/datepicker/datepicker-input.directive.mjs +12 -31
- package/esm2022/lib/modules/datepicker/datepicker.component.mjs +47 -6
- package/esm2022/lib/modules/datepicker/datepicker.module.mjs +8 -5
- 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 +5 -4
- package/esm2022/lib/modules/datepicker/fuzzy-date.service.mjs +3 -3
- package/esm2022/lib/modules/datepicker/monthpicker.component.mjs +7 -5
- package/esm2022/lib/modules/datepicker/yearpicker.component.mjs +7 -5
- package/esm2022/lib/modules/shared/sky-datetime-resources.module.mjs +6 -5
- package/esm2022/lib/modules/timepicker/timepicker.component.mjs +5 -5
- 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 +189 -134
- package/fesm2022/skyux-datetime.mjs.map +1 -1
- package/lib/modules/datepicker/datepicker-calendar-inner.component.d.ts +4 -0
- package/lib/modules/datepicker/datepicker-calendar-label.pipe.d.ts +23 -0
- 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 +6 -5
- package/package.json +13 -13
- package/esm2022/lib/modules/datepicker/datepicker-adapter.service.mjs +0 -23
- package/lib/modules/datepicker/datepicker-adapter.service.d.ts +0 -13
|
@@ -14,7 +14,7 @@ import { SkyInputBoxModule } from '@skyux/forms';
|
|
|
14
14
|
import * as i4$1 from '@angular/cdk/a11y';
|
|
15
15
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
16
16
|
import * as i1 from '@skyux/core';
|
|
17
|
-
import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule } from '@skyux/core';
|
|
17
|
+
import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule } from '@skyux/core';
|
|
18
18
|
import * as i2$1 from '@skyux/indicators';
|
|
19
19
|
import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
|
|
20
20
|
import * as i4 from '@skyux/popovers';
|
|
@@ -64,6 +64,7 @@ const RESOURCES = {
|
|
|
64
64
|
},
|
|
65
65
|
},
|
|
66
66
|
'EN-US': {
|
|
67
|
+
skyux_datepicker_format_hint_text: { message: 'Use the format {0}.' },
|
|
67
68
|
skyux_datepicker_trigger_button_label: { message: 'Select date' },
|
|
68
69
|
skyux_datepicker_trigger_button_label_context: {
|
|
69
70
|
message: 'Open calendar for {0}',
|
|
@@ -139,9 +140,9 @@ class SkyDatetimeResourcesProvider {
|
|
|
139
140
|
* Import into any component library module that needs to use resource strings.
|
|
140
141
|
*/
|
|
141
142
|
class SkyDatetimeResourcesModule {
|
|
142
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
143
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.
|
|
144
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.
|
|
143
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
144
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] }); }
|
|
145
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [
|
|
145
146
|
{
|
|
146
147
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
147
148
|
useClass: SkyDatetimeResourcesProvider,
|
|
@@ -149,7 +150,7 @@ class SkyDatetimeResourcesModule {
|
|
|
149
150
|
},
|
|
150
151
|
], imports: [SkyI18nModule] }); }
|
|
151
152
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
|
|
153
154
|
type: NgModule,
|
|
154
155
|
args: [{
|
|
155
156
|
exports: [SkyI18nModule],
|
|
@@ -220,10 +221,10 @@ class SkyDateService {
|
|
|
220
221
|
}
|
|
221
222
|
return SkyIntlDateFormatter.format(date, locale || this.#defaultLocale, this.#ALIASES[pattern] || pattern);
|
|
222
223
|
}
|
|
223
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
224
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
224
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
225
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateService, providedIn: 'root' }); }
|
|
225
226
|
}
|
|
226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateService, decorators: [{
|
|
227
228
|
type: Injectable,
|
|
228
229
|
args: [{
|
|
229
230
|
providedIn: 'root',
|
|
@@ -284,10 +285,10 @@ class SkyDatePipe {
|
|
|
284
285
|
const format = this.#format || this.#defaultFormat;
|
|
285
286
|
this.#formattedValue = this.#dateSvc.format(this.#value, locale, format);
|
|
286
287
|
}
|
|
287
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
288
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.
|
|
288
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
289
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false }); }
|
|
289
290
|
}
|
|
290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatePipe, decorators: [{
|
|
291
292
|
type: Pipe,
|
|
292
293
|
args: [{
|
|
293
294
|
name: 'skyDate',
|
|
@@ -690,10 +691,10 @@ class SkyFuzzyDateService {
|
|
|
690
691
|
}
|
|
691
692
|
return true;
|
|
692
693
|
}
|
|
693
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
694
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
694
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
695
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' }); }
|
|
695
696
|
}
|
|
696
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
697
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
|
|
697
698
|
type: Injectable,
|
|
698
699
|
args: [{
|
|
699
700
|
providedIn: 'root',
|
|
@@ -733,10 +734,10 @@ class SkyFuzzyDatePipe {
|
|
|
733
734
|
const fuzzyDateLocale = locale || this.#fuzzyDateService.getCurrentLocale();
|
|
734
735
|
return this.#fuzzyDateService.format(value, fuzzyDateFormat, fuzzyDateLocale);
|
|
735
736
|
}
|
|
736
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
737
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.
|
|
737
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
738
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false }); }
|
|
738
739
|
}
|
|
739
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
740
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
|
|
740
741
|
type: Pipe,
|
|
741
742
|
args: [{
|
|
742
743
|
name: 'skyFuzzyDate',
|
|
@@ -745,11 +746,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
745
746
|
}], ctorParameters: () => [{ type: SkyFuzzyDateService }] });
|
|
746
747
|
|
|
747
748
|
class SkyDatePipeModule {
|
|
748
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
749
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.
|
|
750
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.
|
|
749
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
750
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", 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.2.4", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [CommonModule, SkyDatetimeResourcesModule] }); }
|
|
751
752
|
}
|
|
752
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatePipeModule, decorators: [{
|
|
753
754
|
type: NgModule,
|
|
754
755
|
args: [{
|
|
755
756
|
declarations: [SkyDatePipe, SkyFuzzyDatePipe],
|
|
@@ -820,6 +821,9 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
820
821
|
this.formatDayHeader = 'dd';
|
|
821
822
|
this.formatDayTitle = 'MMMM YYYY';
|
|
822
823
|
this.formatMonthTitle = 'YYYY';
|
|
824
|
+
this.formatDayLabel = 'dddd, MMMM Do YYYY';
|
|
825
|
+
this.formatMonthLabel = 'MMMM YYYY';
|
|
826
|
+
this.formatYearLabel = 'YYYY';
|
|
823
827
|
this.datepickerId = `sky-datepicker-${++nextDatepickerId}`;
|
|
824
828
|
this.stepDay = {};
|
|
825
829
|
this.stepMonth = {};
|
|
@@ -842,6 +846,7 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
842
846
|
this.#ngUnsubscribe = new Subject();
|
|
843
847
|
this.#_startingDay = 0;
|
|
844
848
|
this.#resourcesSvc = inject(SkyLibResourcesService);
|
|
849
|
+
this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
|
|
845
850
|
}
|
|
846
851
|
set startingDay(value) {
|
|
847
852
|
this.#_startingDay = value || 0;
|
|
@@ -872,6 +877,7 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
872
877
|
#_selectedDate;
|
|
873
878
|
#_startingDay;
|
|
874
879
|
#resourcesSvc;
|
|
880
|
+
#liveAnnouncerSvc;
|
|
875
881
|
ngOnInit() {
|
|
876
882
|
if (this.selectedDate) {
|
|
877
883
|
this.activeDate = new Date(this.selectedDate);
|
|
@@ -997,7 +1003,7 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
997
1003
|
}
|
|
998
1004
|
onKeydown(event) {
|
|
999
1005
|
const key = event.key?.toLowerCase();
|
|
1000
|
-
if (!this.keys.includes(key) || event.shiftKey
|
|
1006
|
+
if (!this.keys.includes(key) || event.shiftKey) {
|
|
1001
1007
|
return;
|
|
1002
1008
|
}
|
|
1003
1009
|
event.preventDefault();
|
|
@@ -1115,6 +1121,10 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1115
1121
|
this.refreshView();
|
|
1116
1122
|
}
|
|
1117
1123
|
}
|
|
1124
|
+
announceDate(date, format) {
|
|
1125
|
+
const caption = this.dateFilter(date, format);
|
|
1126
|
+
this.#liveAnnouncerSvc.announce(caption);
|
|
1127
|
+
}
|
|
1118
1128
|
/**
|
|
1119
1129
|
* Date is disabled if it meets any of these criteria:
|
|
1120
1130
|
* 1. Date falls outside the min or max dates set by the SkyDatepickerConfigService.
|
|
@@ -1136,10 +1146,10 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1136
1146
|
}
|
|
1137
1147
|
return undefined;
|
|
1138
1148
|
}
|
|
1139
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1140
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
1149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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 }); }
|
|
1141
1151
|
}
|
|
1142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
|
|
1143
1153
|
type: Component,
|
|
1144
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"] }]
|
|
1145
1155
|
}], propDecorators: { customDates: [{
|
|
@@ -1159,25 +1169,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
1159
1169
|
}] } });
|
|
1160
1170
|
|
|
1161
1171
|
/**
|
|
1172
|
+
* Formats date values according to formatting rules.
|
|
1173
|
+
* @example
|
|
1174
|
+
* ```markup
|
|
1175
|
+
* {{ myDate | skyDatepickerCalendarLabel }}
|
|
1176
|
+
* {{ myDate | skyDatepickerCalendarLabel:'YYYY' }}
|
|
1177
|
+
* ```
|
|
1162
1178
|
* @internal
|
|
1163
1179
|
*/
|
|
1164
|
-
class
|
|
1165
|
-
#
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
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;
|
|
1174
1195
|
}
|
|
1175
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1176
|
-
static { this.ɵ
|
|
1196
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1197
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, isStandalone: true, name: "skyDatepickerCalendarLabel" }); }
|
|
1177
1198
|
}
|
|
1178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1179
|
-
type:
|
|
1180
|
-
|
|
1199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, decorators: [{
|
|
1200
|
+
type: Pipe,
|
|
1201
|
+
args: [{
|
|
1202
|
+
name: 'skyDatepickerCalendarLabel',
|
|
1203
|
+
standalone: true,
|
|
1204
|
+
}]
|
|
1205
|
+
}] });
|
|
1181
1206
|
|
|
1182
1207
|
class SkyDatepickerConfigService {
|
|
1183
1208
|
constructor() {
|
|
@@ -1188,10 +1213,10 @@ class SkyDatepickerConfigService {
|
|
|
1188
1213
|
*/
|
|
1189
1214
|
this.startingDay = 0;
|
|
1190
1215
|
}
|
|
1191
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1192
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
1216
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1217
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' }); }
|
|
1193
1218
|
}
|
|
1194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
|
|
1195
1220
|
type: Injectable,
|
|
1196
1221
|
args: [{
|
|
1197
1222
|
providedIn: 'root',
|
|
@@ -1209,10 +1234,10 @@ class SkyDatepickerService {
|
|
|
1209
1234
|
*/
|
|
1210
1235
|
this.keyDatePopoverStream = new Subject();
|
|
1211
1236
|
}
|
|
1212
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1213
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
1237
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1238
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerService }); }
|
|
1214
1239
|
}
|
|
1215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerService, decorators: [{
|
|
1216
1241
|
type: Injectable
|
|
1217
1242
|
}] });
|
|
1218
1243
|
|
|
@@ -1223,12 +1248,12 @@ class SkyDayPickerButtonComponent {
|
|
|
1223
1248
|
constructor(datepicker) {
|
|
1224
1249
|
this.datepicker = datepicker;
|
|
1225
1250
|
}
|
|
1226
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1227
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
1251
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1252
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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" }] }); }
|
|
1228
1253
|
}
|
|
1229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
|
|
1230
1255
|
type: Component,
|
|
1231
|
-
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"] }]
|
|
1232
1257
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { date: [{
|
|
1233
1258
|
type: Input
|
|
1234
1259
|
}] } });
|
|
@@ -1339,10 +1364,10 @@ class SkyDayPickerCellComponent {
|
|
|
1339
1364
|
}, 500);
|
|
1340
1365
|
}
|
|
1341
1366
|
}
|
|
1342
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1343
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
1367
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", 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.2.4", 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 }); }
|
|
1344
1369
|
}
|
|
1345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
|
|
1346
1371
|
type: Component,
|
|
1347
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" }]
|
|
1348
1373
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }], propDecorators: { activeDateHasChanged: [{
|
|
@@ -1482,6 +1507,7 @@ class SkyDayPickerComponent {
|
|
|
1482
1507
|
date = this.#getDaysInMonth(this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth());
|
|
1483
1508
|
}
|
|
1484
1509
|
this.datepicker.activeDate.setDate(date);
|
|
1510
|
+
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatDayLabel);
|
|
1485
1511
|
}
|
|
1486
1512
|
#getDaysInMonth(year, month) {
|
|
1487
1513
|
return month === 1 &&
|
|
@@ -1550,10 +1576,10 @@ class SkyDayPickerComponent {
|
|
|
1550
1576
|
}
|
|
1551
1577
|
return undefined;
|
|
1552
1578
|
}
|
|
1553
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1554
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
1579
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1580
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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"] }] }); }
|
|
1555
1581
|
}
|
|
1556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
|
|
1557
1583
|
type: Component,
|
|
1558
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" }]
|
|
1559
1585
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { customDates: [{
|
|
@@ -1628,13 +1654,14 @@ class SkyMonthPickerComponent {
|
|
|
1628
1654
|
date = 11;
|
|
1629
1655
|
}
|
|
1630
1656
|
this.datepicker.activeDate.setMonth(date);
|
|
1657
|
+
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatMonthLabel);
|
|
1631
1658
|
}
|
|
1632
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1633
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
1659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1660
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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" }] }); }
|
|
1634
1661
|
}
|
|
1635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
|
|
1636
1663
|
type: Component,
|
|
1637
|
-
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 [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" }]
|
|
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" }]
|
|
1638
1665
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
|
|
1639
1666
|
|
|
1640
1667
|
/**
|
|
@@ -1708,13 +1735,14 @@ class SkyYearPickerComponent {
|
|
|
1708
1735
|
1;
|
|
1709
1736
|
}
|
|
1710
1737
|
this.datepicker.activeDate.setFullYear(date);
|
|
1738
|
+
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatYearLabel);
|
|
1711
1739
|
}
|
|
1712
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1713
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
1740
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1741
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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" }] }); }
|
|
1714
1742
|
}
|
|
1715
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1743
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
|
|
1716
1744
|
type: Component,
|
|
1717
|
-
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 [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" }]
|
|
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" }]
|
|
1718
1746
|
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
|
|
1719
1747
|
|
|
1720
1748
|
/**
|
|
@@ -1770,12 +1798,12 @@ class SkyDatepickerCalendarComponent {
|
|
|
1770
1798
|
this.datepicker?.select(new Date(), false);
|
|
1771
1799
|
}
|
|
1772
1800
|
}
|
|
1773
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
1774
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
1801
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1802
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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" }] }); }
|
|
1775
1803
|
}
|
|
1776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
1804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
|
|
1777
1805
|
type: Component,
|
|
1778
|
-
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"] }]
|
|
1779
1807
|
}], ctorParameters: () => [{ type: SkyDatepickerConfigService }], propDecorators: { customDates: [{
|
|
1780
1808
|
type: Input
|
|
1781
1809
|
}], isDaypickerWaiting: [{
|
|
@@ -1808,6 +1836,14 @@ let nextId$1 = 0;
|
|
|
1808
1836
|
* You must wrap this component around an input with the `skyDatepickerInput` directive.
|
|
1809
1837
|
*/
|
|
1810
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
|
+
}
|
|
1811
1847
|
get disabled() {
|
|
1812
1848
|
return this.#_disabled;
|
|
1813
1849
|
}
|
|
@@ -1855,12 +1891,16 @@ class SkyDatepickerComponent {
|
|
|
1855
1891
|
#overlay;
|
|
1856
1892
|
#overlayKeyupListener;
|
|
1857
1893
|
#_calendarRef;
|
|
1894
|
+
#_dateFormat;
|
|
1858
1895
|
#_disabled;
|
|
1859
1896
|
#_selectedDate;
|
|
1860
1897
|
#affixService;
|
|
1898
|
+
#appFormatter;
|
|
1861
1899
|
#changeDetector;
|
|
1862
1900
|
#coreAdapter;
|
|
1901
|
+
#dateFormatHintTextTemplateString;
|
|
1863
1902
|
#environmentInjector;
|
|
1903
|
+
#resourceSvc;
|
|
1864
1904
|
#overlayService;
|
|
1865
1905
|
#zIndex;
|
|
1866
1906
|
constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
|
|
@@ -1876,6 +1916,10 @@ class SkyDatepickerComponent {
|
|
|
1876
1916
|
* to modify individual dates on the calendar.
|
|
1877
1917
|
*/
|
|
1878
1918
|
this.calendarDateRangeChange = new EventEmitter();
|
|
1919
|
+
/**
|
|
1920
|
+
* @internal
|
|
1921
|
+
*/
|
|
1922
|
+
this.dateFormatChange = new EventEmitter();
|
|
1879
1923
|
/**
|
|
1880
1924
|
* @internal
|
|
1881
1925
|
*/
|
|
@@ -1887,7 +1931,10 @@ class SkyDatepickerComponent {
|
|
|
1887
1931
|
this.#calendarUnsubscribe = new Subject();
|
|
1888
1932
|
this.#ngUnsubscribe = new Subject();
|
|
1889
1933
|
this.#_disabled = false;
|
|
1934
|
+
this.#appFormatter = inject(SkyAppFormat);
|
|
1935
|
+
this.#dateFormatHintTextTemplateString = '';
|
|
1890
1936
|
this.#environmentInjector = inject(EnvironmentInjector);
|
|
1937
|
+
this.#resourceSvc = inject(SkyLibResourcesService);
|
|
1891
1938
|
this.#affixService = affixService;
|
|
1892
1939
|
this.#changeDetector = changeDetector;
|
|
1893
1940
|
this.#coreAdapter = coreAdapter;
|
|
@@ -1909,6 +1956,13 @@ class SkyDatepickerComponent {
|
|
|
1909
1956
|
inputTemplate: this.inputTemplateRef,
|
|
1910
1957
|
buttonsTemplate: this.triggerButtonTemplateRef,
|
|
1911
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
|
+
});
|
|
1912
1966
|
}
|
|
1913
1967
|
}
|
|
1914
1968
|
ngOnDestroy() {
|
|
@@ -2078,12 +2132,24 @@ class SkyDatepickerComponent {
|
|
|
2078
2132
|
this.#customDatesSubscription = undefined;
|
|
2079
2133
|
}
|
|
2080
2134
|
}
|
|
2081
|
-
|
|
2082
|
-
|
|
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.2.4", 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.2.4", 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 }); }
|
|
2083
2149
|
}
|
|
2084
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
|
|
2085
2151
|
type: Component,
|
|
2086
|
-
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
|
|
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"] }]
|
|
2087
2153
|
}], ctorParameters: () => [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$2.SkyInputBoxHostService, decorators: [{
|
|
2088
2154
|
type: Optional
|
|
2089
2155
|
}] }, { type: i3$1.SkyThemeService, decorators: [{
|
|
@@ -2097,6 +2163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
2097
2163
|
type: Input
|
|
2098
2164
|
}], calendarDateRangeChange: [{
|
|
2099
2165
|
type: Output
|
|
2166
|
+
}], dateFormatChange: [{
|
|
2167
|
+
type: Output
|
|
2100
2168
|
}], openChange: [{
|
|
2101
2169
|
type: Output
|
|
2102
2170
|
}], calendar: [{
|
|
@@ -2552,13 +2620,13 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2552
2620
|
}
|
|
2553
2621
|
this.#setInputElementValue(formattedDate || '');
|
|
2554
2622
|
}
|
|
2555
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
2556
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.
|
|
2623
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", 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.2.4", 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: [
|
|
2557
2625
|
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
2558
2626
|
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
2559
2627
|
], ngImport: i0 }); }
|
|
2560
2628
|
}
|
|
2561
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
2629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
|
|
2562
2630
|
type: Directive,
|
|
2563
2631
|
args: [{
|
|
2564
2632
|
selector: '[skyFuzzyDatepickerInput]',
|
|
@@ -2716,7 +2784,6 @@ class SkyDatepickerInputDirective {
|
|
|
2716
2784
|
}
|
|
2717
2785
|
#control;
|
|
2718
2786
|
#dateFormatter;
|
|
2719
|
-
#initialPlaceholder;
|
|
2720
2787
|
#preferredShortDateFormat;
|
|
2721
2788
|
#ngUnsubscribe;
|
|
2722
2789
|
#_dateFormat;
|
|
@@ -2726,14 +2793,13 @@ class SkyDatepickerInputDirective {
|
|
|
2726
2793
|
#_startingDay;
|
|
2727
2794
|
#_strict;
|
|
2728
2795
|
#_value;
|
|
2729
|
-
#adapter;
|
|
2730
2796
|
#changeDetector;
|
|
2731
2797
|
#configService;
|
|
2732
2798
|
#elementRef;
|
|
2733
2799
|
#localeProvider;
|
|
2734
2800
|
#renderer;
|
|
2735
2801
|
#datepickerComponent;
|
|
2736
|
-
constructor(
|
|
2802
|
+
constructor(changeDetector, configService, elementRef, localeProvider, renderer, datepickerComponent) {
|
|
2737
2803
|
/**
|
|
2738
2804
|
* Whether to disable date validation on the datepicker input.
|
|
2739
2805
|
* @default false
|
|
@@ -2756,15 +2822,12 @@ class SkyDatepickerInputDirective {
|
|
|
2756
2822
|
throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
|
|
2757
2823
|
'`<sky-datepicker>` component!');
|
|
2758
2824
|
}
|
|
2759
|
-
this.#adapter = adapter;
|
|
2760
2825
|
this.#changeDetector = changeDetector;
|
|
2761
2826
|
this.#configService = configService;
|
|
2762
2827
|
this.#elementRef = elementRef;
|
|
2763
2828
|
this.#localeProvider = localeProvider;
|
|
2764
2829
|
this.#renderer = renderer;
|
|
2765
2830
|
this.#datepickerComponent = datepickerComponent;
|
|
2766
|
-
this.#initialPlaceholder = this.#adapter.getPlaceholder(this.#elementRef);
|
|
2767
|
-
this.#updatePlaceholder();
|
|
2768
2831
|
this.#localeProvider
|
|
2769
2832
|
.getLocaleInfo()
|
|
2770
2833
|
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
@@ -2780,6 +2843,7 @@ class SkyDatepickerInputDirective {
|
|
|
2780
2843
|
this.#renderer.addClass(element, 'sky-form-control');
|
|
2781
2844
|
}
|
|
2782
2845
|
ngAfterContentInit() {
|
|
2846
|
+
this.#datepickerComponent.dateFormat = this.dateFormat;
|
|
2783
2847
|
this.#datepickerComponent.dateChange
|
|
2784
2848
|
.pipe(distinctUntilChanged())
|
|
2785
2849
|
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
@@ -2917,7 +2981,7 @@ class SkyDatepickerInputDirective {
|
|
|
2917
2981
|
this.#onValueChange(this.#elementRef.nativeElement.value);
|
|
2918
2982
|
}
|
|
2919
2983
|
#applyDateFormat() {
|
|
2920
|
-
this.#
|
|
2984
|
+
this.#datepickerComponent.dateFormat = this.dateFormat;
|
|
2921
2985
|
if (this.#value) {
|
|
2922
2986
|
const formattedDate = this.#dateFormatter.format(this.#value, this.dateFormat);
|
|
2923
2987
|
this.#setInputElementValue(formattedDate);
|
|
@@ -3007,11 +3071,6 @@ class SkyDatepickerInputDirective {
|
|
|
3007
3071
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3008
3072
|
// istanbul ignore next
|
|
3009
3073
|
#onValidatorChange;
|
|
3010
|
-
#updatePlaceholder() {
|
|
3011
|
-
if (!this.#initialPlaceholder && this.dateFormat) {
|
|
3012
|
-
this.#adapter.setPlaceholder(this.#elementRef, this.dateFormat);
|
|
3013
|
-
}
|
|
3014
|
-
}
|
|
3015
3074
|
/**
|
|
3016
3075
|
* Update the value of the form control and input element
|
|
3017
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.
|
|
@@ -3061,24 +3120,16 @@ class SkyDatepickerInputDirective {
|
|
|
3061
3120
|
}
|
|
3062
3121
|
}
|
|
3063
3122
|
}
|
|
3064
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
3065
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.
|
|
3066
|
-
SKY_DATEPICKER_VALUE_ACCESSOR,
|
|
3067
|
-
SKY_DATEPICKER_VALIDATOR,
|
|
3068
|
-
SkyDatepickerAdapterService,
|
|
3069
|
-
], ngImport: i0 }); }
|
|
3123
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", 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.2.4", 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 }); }
|
|
3070
3125
|
}
|
|
3071
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
3126
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
|
|
3072
3127
|
type: Directive,
|
|
3073
3128
|
args: [{
|
|
3074
3129
|
selector: '[skyDatepickerInput]',
|
|
3075
|
-
providers: [
|
|
3076
|
-
SKY_DATEPICKER_VALUE_ACCESSOR,
|
|
3077
|
-
SKY_DATEPICKER_VALIDATOR,
|
|
3078
|
-
SkyDatepickerAdapterService,
|
|
3079
|
-
],
|
|
3130
|
+
providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
|
|
3080
3131
|
}]
|
|
3081
|
-
}], ctorParameters: () => [{ type:
|
|
3132
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
|
|
3082
3133
|
type: Optional
|
|
3083
3134
|
}] }], propDecorators: { dateFormat: [{
|
|
3084
3135
|
type: Input
|
|
@@ -3108,8 +3159,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
3108
3159
|
}] } });
|
|
3109
3160
|
|
|
3110
3161
|
class SkyDatepickerModule {
|
|
3111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
3112
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.
|
|
3162
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3163
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
|
|
3113
3164
|
SkyDatepickerCalendarInnerComponent,
|
|
3114
3165
|
SkyDayPickerComponent,
|
|
3115
3166
|
SkyMonthPickerComponent,
|
|
@@ -3122,6 +3173,7 @@ class SkyDatepickerModule {
|
|
|
3122
3173
|
CommonModule,
|
|
3123
3174
|
FormsModule,
|
|
3124
3175
|
SkyIconModule,
|
|
3176
|
+
SkyDatepickerCalendarLabelPipe,
|
|
3125
3177
|
SkyDatetimeResourcesModule,
|
|
3126
3178
|
SkyAffixModule,
|
|
3127
3179
|
SkyThemeModule,
|
|
@@ -3130,7 +3182,7 @@ class SkyDatepickerModule {
|
|
|
3130
3182
|
SkyDatepickerComponent,
|
|
3131
3183
|
SkyDatepickerInputDirective,
|
|
3132
3184
|
SkyFuzzyDatepickerInputDirective] }); }
|
|
3133
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.
|
|
3185
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerService], imports: [A11yModule,
|
|
3134
3186
|
CommonModule,
|
|
3135
3187
|
FormsModule,
|
|
3136
3188
|
SkyIconModule,
|
|
@@ -3140,7 +3192,7 @@ class SkyDatepickerModule {
|
|
|
3140
3192
|
SkyPopoverModule,
|
|
3141
3193
|
SkyWaitModule] }); }
|
|
3142
3194
|
}
|
|
3143
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
3195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDatepickerModule, decorators: [{
|
|
3144
3196
|
type: NgModule,
|
|
3145
3197
|
args: [{
|
|
3146
3198
|
declarations: [
|
|
@@ -3160,6 +3212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
3160
3212
|
CommonModule,
|
|
3161
3213
|
FormsModule,
|
|
3162
3214
|
SkyIconModule,
|
|
3215
|
+
SkyDatepickerCalendarLabelPipe,
|
|
3163
3216
|
SkyDatetimeResourcesModule,
|
|
3164
3217
|
SkyAffixModule,
|
|
3165
3218
|
SkyThemeModule,
|
|
@@ -3206,10 +3259,10 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
|
|
|
3206
3259
|
}
|
|
3207
3260
|
return 'skyux_date_range_picker_before_date_label';
|
|
3208
3261
|
}
|
|
3209
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
3210
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.
|
|
3262
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3263
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }); }
|
|
3211
3264
|
}
|
|
3212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
3265
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
|
|
3213
3266
|
type: Pipe,
|
|
3214
3267
|
args: [{
|
|
3215
3268
|
name: 'skyDateRangePickerEndDateResourceKey',
|
|
@@ -3223,10 +3276,10 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
|
|
|
3223
3276
|
}
|
|
3224
3277
|
return 'skyux_date_range_picker_after_date_label';
|
|
3225
3278
|
}
|
|
3226
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
3227
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.
|
|
3279
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3280
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }); }
|
|
3228
3281
|
}
|
|
3229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
3282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
|
|
3230
3283
|
type: Pipe,
|
|
3231
3284
|
args: [{
|
|
3232
3285
|
name: 'skyDateRangePickerStartDateResourceKey',
|
|
@@ -3883,11 +3936,14 @@ class SkyDateRangeService {
|
|
|
3883
3936
|
this.#calculatorReadyStream.next(true);
|
|
3884
3937
|
});
|
|
3885
3938
|
}
|
|
3886
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
3887
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
3939
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangeService, deps: [{ token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3940
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangeService, providedIn: 'root' }); }
|
|
3888
3941
|
}
|
|
3889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
3890
|
-
type: Injectable
|
|
3942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangeService, decorators: [{
|
|
3943
|
+
type: Injectable,
|
|
3944
|
+
args: [{
|
|
3945
|
+
providedIn: 'root',
|
|
3946
|
+
}]
|
|
3891
3947
|
}], ctorParameters: () => [{ type: i3.SkyLibResourcesService }] });
|
|
3892
3948
|
|
|
3893
3949
|
const SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
|
|
@@ -4362,13 +4418,13 @@ class SkyDateRangePickerComponent {
|
|
|
4362
4418
|
/* istanbul ignore next */
|
|
4363
4419
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4364
4420
|
#onTouched;
|
|
4365
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
4366
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
4421
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", 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.2.4", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
|
|
4367
4423
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
|
4368
4424
|
SKY_DATE_RANGE_PICKER_VALIDATOR,
|
|
4369
|
-
], 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", "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 }); }
|
|
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 }); }
|
|
4370
4426
|
}
|
|
4371
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
4427
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
|
|
4372
4428
|
type: Component,
|
|
4373
4429
|
args: [{ selector: 'sky-date-range-picker', providers: [
|
|
4374
4430
|
SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
|
|
@@ -4391,8 +4447,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
4391
4447
|
}] } });
|
|
4392
4448
|
|
|
4393
4449
|
class SkyDateRangePickerModule {
|
|
4394
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
4395
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.
|
|
4450
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4451
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent,
|
|
4396
4452
|
SkyDateRangePickerEndDateResourceKeyPipe,
|
|
4397
4453
|
SkyDateRangePickerStartDateResourceKeyPipe], imports: [CommonModule,
|
|
4398
4454
|
FormsModule,
|
|
@@ -4400,14 +4456,14 @@ class SkyDateRangePickerModule {
|
|
|
4400
4456
|
SkyDatepickerModule,
|
|
4401
4457
|
SkyDatetimeResourcesModule,
|
|
4402
4458
|
SkyInputBoxModule], exports: [SkyDateRangePickerComponent] }); }
|
|
4403
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.
|
|
4459
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerModule, imports: [CommonModule,
|
|
4404
4460
|
FormsModule,
|
|
4405
4461
|
ReactiveFormsModule,
|
|
4406
4462
|
SkyDatepickerModule,
|
|
4407
4463
|
SkyDatetimeResourcesModule,
|
|
4408
4464
|
SkyInputBoxModule] }); }
|
|
4409
4465
|
}
|
|
4410
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
4466
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
|
|
4411
4467
|
type: NgModule,
|
|
4412
4468
|
args: [{
|
|
4413
4469
|
declarations: [
|
|
@@ -4424,7 +4480,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
4424
4480
|
SkyInputBoxModule,
|
|
4425
4481
|
],
|
|
4426
4482
|
exports: [SkyDateRangePickerComponent],
|
|
4427
|
-
providers: [SkyDateRangeService],
|
|
4428
4483
|
}]
|
|
4429
4484
|
}] });
|
|
4430
4485
|
|
|
@@ -4782,12 +4837,12 @@ class SkyTimepickerComponent {
|
|
|
4782
4837
|
/* istanbul ignore next */
|
|
4783
4838
|
this.#overlayKeyupListener?.unsubscribe();
|
|
4784
4839
|
}
|
|
4785
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
4786
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
4840
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", 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.2.4", 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 }); }
|
|
4787
4842
|
}
|
|
4788
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
4843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
|
4789
4844
|
type: Component,
|
|
4790
|
-
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
|
|
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"] }]
|
|
4791
4846
|
}], ctorParameters: () => [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$2.SkyInputBoxHostService, decorators: [{
|
|
4792
4847
|
type: Optional
|
|
4793
4848
|
}] }, { type: i3$1.SkyThemeService, decorators: [{
|
|
@@ -5025,10 +5080,10 @@ class SkyTimepickerInputDirective {
|
|
|
5025
5080
|
/* istanbul ignore next */
|
|
5026
5081
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5027
5082
|
#_validatorChange = () => { };
|
|
5028
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
5029
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.
|
|
5083
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", 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.2.4", 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 }); }
|
|
5030
5085
|
}
|
|
5031
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
5086
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
|
|
5032
5087
|
type: Directive,
|
|
5033
5088
|
args: [{
|
|
5034
5089
|
selector: '[skyTimepickerInput]',
|
|
@@ -5051,19 +5106,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
5051
5106
|
}] } });
|
|
5052
5107
|
|
|
5053
5108
|
class SkyTimepickerModule {
|
|
5054
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
5055
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.
|
|
5109
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5110
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
|
|
5056
5111
|
SkyIconModule,
|
|
5057
5112
|
SkyDatetimeResourcesModule,
|
|
5058
5113
|
SkyAffixModule,
|
|
5059
5114
|
SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] }); }
|
|
5060
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.
|
|
5115
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyTimepickerModule, imports: [CommonModule,
|
|
5061
5116
|
SkyIconModule,
|
|
5062
5117
|
SkyDatetimeResourcesModule,
|
|
5063
5118
|
SkyAffixModule,
|
|
5064
5119
|
SkyThemeModule] }); }
|
|
5065
5120
|
}
|
|
5066
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
5121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkyTimepickerModule, decorators: [{
|
|
5067
5122
|
type: NgModule,
|
|
5068
5123
|
args: [{
|
|
5069
5124
|
declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],
|