@skyux/datetime 15.0.0-alpha.4 → 15.0.0-alpha.6
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/fesm2022/skyux-datetime.mjs +176 -96
- package/fesm2022/skyux-datetime.mjs.map +1 -1
- package/package.json +12 -12
- package/types/skyux-datetime.d.ts +12 -0
|
@@ -227,11 +227,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
227
227
|
* Import into any component library module that needs to use resource strings.
|
|
228
228
|
*/
|
|
229
229
|
class SkyDatetimeResourcesModule {
|
|
230
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
231
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
232
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
230
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
231
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] }); }
|
|
232
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatetimeResourcesModule, imports: [SkyI18nModule] }); }
|
|
233
233
|
}
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
|
|
235
235
|
type: NgModule,
|
|
236
236
|
args: [{
|
|
237
237
|
exports: [SkyI18nModule],
|
|
@@ -313,10 +313,10 @@ class SkyDateService {
|
|
|
313
313
|
}
|
|
314
314
|
return SkyIntlDateFormatter.format(date, locale || this.#defaultLocale, this.#ALIASES[pattern] || pattern);
|
|
315
315
|
}
|
|
316
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
317
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
317
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateService, providedIn: 'root' }); }
|
|
318
318
|
}
|
|
319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateService, decorators: [{
|
|
320
320
|
type: Injectable,
|
|
321
321
|
args: [{
|
|
322
322
|
providedIn: 'root',
|
|
@@ -377,10 +377,10 @@ class SkyDatePipe {
|
|
|
377
377
|
const format = this.#format || this.#defaultFormat;
|
|
378
378
|
this.#formattedValue = this.#dateSvc.format(this.#value, locale, format);
|
|
379
379
|
}
|
|
380
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
381
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
380
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
381
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyDatePipe, isStandalone: true, name: "skyDate", pure: false }); }
|
|
382
382
|
}
|
|
383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatePipe, decorators: [{
|
|
384
384
|
type: Pipe,
|
|
385
385
|
args: [{
|
|
386
386
|
name: 'skyDate',
|
|
@@ -784,10 +784,10 @@ class SkyFuzzyDateService {
|
|
|
784
784
|
}
|
|
785
785
|
return true;
|
|
786
786
|
}
|
|
787
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
788
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
787
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
788
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' }); }
|
|
789
789
|
}
|
|
790
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
790
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
|
|
791
791
|
type: Injectable,
|
|
792
792
|
args: [{
|
|
793
793
|
providedIn: 'root',
|
|
@@ -828,10 +828,10 @@ class SkyFuzzyDatePipe {
|
|
|
828
828
|
const fuzzyDateLocale = locale || this.#fuzzyDateService.getCurrentLocale();
|
|
829
829
|
return this.#fuzzyDateService.format(value, fuzzyDateFormat, fuzzyDateLocale);
|
|
830
830
|
}
|
|
831
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
832
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
831
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
832
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyFuzzyDatePipe, isStandalone: true, name: "skyFuzzyDate", pure: false }); }
|
|
833
833
|
}
|
|
834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
834
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
|
|
835
835
|
type: Pipe,
|
|
836
836
|
args: [{
|
|
837
837
|
name: 'skyFuzzyDate',
|
|
@@ -840,11 +840,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
840
840
|
}], ctorParameters: () => [{ type: SkyFuzzyDateService }] });
|
|
841
841
|
|
|
842
842
|
class SkyDatePipeModule {
|
|
843
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
844
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
845
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
843
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
844
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyDatePipeModule, imports: [SkyDatetimeResourcesModule, SkyDatePipe, SkyFuzzyDatePipe], exports: [SkyDatePipe, SkyFuzzyDatePipe] }); }
|
|
845
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [SkyDatetimeResourcesModule] }); }
|
|
846
846
|
}
|
|
847
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatePipeModule, decorators: [{
|
|
848
848
|
type: NgModule,
|
|
849
849
|
args: [{
|
|
850
850
|
imports: [SkyDatetimeResourcesModule, SkyDatePipe, SkyFuzzyDatePipe],
|
|
@@ -899,10 +899,10 @@ class SkyDatepickerConfigService {
|
|
|
899
899
|
*/
|
|
900
900
|
this.startingDay = 0;
|
|
901
901
|
}
|
|
902
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
903
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
902
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
903
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' }); }
|
|
904
904
|
}
|
|
905
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
905
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
|
|
906
906
|
type: Injectable,
|
|
907
907
|
args: [{
|
|
908
908
|
providedIn: 'root',
|
|
@@ -1258,10 +1258,10 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1258
1258
|
}
|
|
1259
1259
|
return undefined;
|
|
1260
1260
|
}
|
|
1261
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1262
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkyDatepickerCalendarInnerComponent, isStandalone: true, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "@if (datepickerMode) {\n <div 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-datepicker-btn-previous\"\n [attr.aria-label]=\"previousLabel\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" iconName=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <!-- display: inline -->\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-calendar-title\"\n [id]=\"datepickerId + '-title'\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-link': 'modern'\n }\"\n (click)=\"toggleModeCalendar($event)\"\n >{{ title }}</button\n >\n </span>\n <span class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-btn-next\"\n [attr.aria-label]=\"nextLabel\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" iconName=\"chevron-right\" />\n </button>\n </span>\n </div>\n <ng-content />\n </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-button-box-shadow-focus: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-month-year-button-width: auto;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-title-font-weight: 12px;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-header-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-right)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-comp-datepicker-calendar-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-right)) var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-calendar-space-inset-bottom)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{font-size:var(--sky-override-datepicker-title-font-weight, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-default));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-link{color:var(--sky-color-text-default);padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.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-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-comp-datepicker-m_y_button-space-inset-top) var(--sky-comp-datepicker-m_y_button-space-inset-right) var(--sky-comp-datepicker-m_y_button-space-inset-bottom) var(--sky-comp-datepicker-m_y_button-space-inset-left))}sky-yearpicker td{width:var(--sky-override-datepicker-month-year-button-width, 20%)}sky-monthpicker td{width:var(--sky-override-datepicker-month-year-button-width, 33%)}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1261
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1262
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyDatepickerCalendarInnerComponent, isStandalone: true, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "@if (datepickerMode) {\n <div 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-datepicker-btn-previous\"\n [attr.aria-label]=\"previousLabel\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" iconName=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <!-- display: inline -->\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-calendar-title\"\n [id]=\"datepickerId + '-title'\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-link': 'modern'\n }\"\n (click)=\"toggleModeCalendar($event)\"\n >{{ title }}</button\n >\n </span>\n <span class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-btn-next\"\n [attr.aria-label]=\"nextLabel\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" iconName=\"chevron-right\" />\n </button>\n </span>\n </div>\n <ng-content />\n </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-button-box-shadow-focus: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-month-year-button-width: auto;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-title-font-weight: 12px;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-header-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-right)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-comp-datepicker-calendar-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-right)) var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-calendar-space-inset-bottom)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{font-size:var(--sky-override-datepicker-title-font-weight, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-default));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-link{color:var(--sky-color-text-default);padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.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-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-comp-datepicker-m_y_button-space-inset-top) var(--sky-comp-datepicker-m_y_button-space-inset-right) var(--sky-comp-datepicker-m_y_button-space-inset-bottom) var(--sky-comp-datepicker-m_y_button-space-inset-left))}sky-yearpicker td{width:var(--sky-override-datepicker-month-year-button-width, 20%)}sky-monthpicker td{width:var(--sky-override-datepicker-month-year-button-width, 33%)}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1263
1263
|
}
|
|
1264
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
|
|
1265
1265
|
type: Component,
|
|
1266
1266
|
args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule, SkyIconModule, SkyThemeModule], selector: 'sky-datepicker-inner', changeDetection: ChangeDetectionStrategy.Eager, template: "@if (datepickerMode) {\n <div 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-datepicker-btn-previous\"\n [attr.aria-label]=\"previousLabel\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" iconName=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <!-- display: inline -->\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-calendar-title\"\n [id]=\"datepickerId + '-title'\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-link': 'modern'\n }\"\n (click)=\"toggleModeCalendar($event)\"\n >{{ title }}</button\n >\n </span>\n <span class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-btn-next\"\n [attr.aria-label]=\"nextLabel\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" iconName=\"chevron-right\" />\n </button>\n </span>\n </div>\n <ng-content />\n </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-button-box-shadow-focus: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-month-year-button-width: auto;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-title-font-weight: 12px;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-header-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-right)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-comp-datepicker-calendar-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-right)) var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-calendar-space-inset-bottom)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{font-size:var(--sky-override-datepicker-title-font-weight, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-default));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-link{color:var(--sky-color-text-default);padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.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-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-comp-datepicker-m_y_button-space-inset-top) var(--sky-comp-datepicker-m_y_button-space-inset-right) var(--sky-comp-datepicker-m_y_button-space-inset-bottom) var(--sky-comp-datepicker-m_y_button-space-inset-left))}sky-yearpicker td{width:var(--sky-override-datepicker-month-year-button-width, 20%)}sky-monthpicker td{width:var(--sky-override-datepicker-month-year-button-width, 33%)}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"] }]
|
|
1267
1267
|
}], propDecorators: { customDates: [{
|
|
@@ -1294,10 +1294,10 @@ class SkyDatepickerCalendarService {
|
|
|
1294
1294
|
*/
|
|
1295
1295
|
this.keyDatePopoverStream = new Subject();
|
|
1296
1296
|
}
|
|
1297
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1298
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
1297
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1298
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarService }); }
|
|
1299
1299
|
}
|
|
1300
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1300
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarService, decorators: [{
|
|
1301
1301
|
type: Injectable
|
|
1302
1302
|
}] });
|
|
1303
1303
|
|
|
@@ -1326,10 +1326,10 @@ class SkyDatepickerCalendarLabelPipe {
|
|
|
1326
1326
|
}
|
|
1327
1327
|
return formattedValue;
|
|
1328
1328
|
}
|
|
1329
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1330
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
1329
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1330
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, isStandalone: true, name: "skyDatepickerCalendarLabel" }); }
|
|
1331
1331
|
}
|
|
1332
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, decorators: [{
|
|
1333
1333
|
type: Pipe,
|
|
1334
1334
|
args: [{
|
|
1335
1335
|
name: 'skyDatepickerCalendarLabel',
|
|
@@ -1343,10 +1343,10 @@ class SkyDayPickerButtonComponent {
|
|
|
1343
1343
|
constructor() {
|
|
1344
1344
|
this.datepicker = inject(SkyDatepickerCalendarInnerComponent);
|
|
1345
1345
|
}
|
|
1346
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1347
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1346
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1347
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyDayPickerButtonComponent, isStandalone: true, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0, template: "@if (date) {\n <button\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}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxxs) / 2))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1348
1348
|
}
|
|
1349
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
|
|
1350
1350
|
type: Component,
|
|
1351
1351
|
args: [{ imports: [CommonModule, SkyDatepickerCalendarLabelPipe], selector: 'sky-daypicker-button', changeDetection: ChangeDetectionStrategy.Eager, template: "@if (date) {\n <button\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}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxxs) / 2))}\n"] }]
|
|
1352
1352
|
}], propDecorators: { date: [{
|
|
@@ -1431,10 +1431,10 @@ class SkyDayPickerCellComponent {
|
|
|
1431
1431
|
#showTooltip() {
|
|
1432
1432
|
this.popoverController.next({ type: SkyPopoverMessageType.Open });
|
|
1433
1433
|
}
|
|
1434
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1435
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1434
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDayPickerCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyDayPickerCellComponent, isStandalone: true, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: { classPropertyName: "activeDateHasChanged", publicName: "activeDateHasChanged", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (hasTooltip()) {\n <div\n class=\"sky-daypicker-cell\"\n skyPopoverPlacement=\"left\"\n [attr.aria-label]=\"ariaLabel()\"\n [skyPopover]=\"dayInfoPopover\"\n [skyPopoverMessageStream]=\"popoverController\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n >\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n <sky-popover #dayInfoPopover>\n @for (text of date()?.keyDateText; track text) {\n <div>\n {{ text }}\n </div>\n }\n </sky-popover>\n </div>\n} @else {\n <div\n class=\"sky-daypicker-cell\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n >\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n </div>\n}\n\n<ng-template #daypickerButtonTemplateRef>\n <sky-daypicker-button [date]=\"date()\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i2$1.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i2$1.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1436
1436
|
}
|
|
1437
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
|
|
1438
1438
|
type: Component,
|
|
1439
1439
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, SkyDayPickerButtonComponent, SkyPopoverModule], selector: 'sky-daypicker-cell', template: "@if (hasTooltip()) {\n <div\n class=\"sky-daypicker-cell\"\n skyPopoverPlacement=\"left\"\n [attr.aria-label]=\"ariaLabel()\"\n [skyPopover]=\"dayInfoPopover\"\n [skyPopoverMessageStream]=\"popoverController\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n >\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n <sky-popover #dayInfoPopover>\n @for (text of date()?.keyDateText; track text) {\n <div>\n {{ text }}\n </div>\n }\n </sky-popover>\n </div>\n} @else {\n <div\n class=\"sky-daypicker-cell\"\n (mouseenter)=\"onDayMouseenter()\"\n (mouseleave)=\"onDayMouseleave()\"\n >\n <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n </div>\n}\n\n<ng-template #daypickerButtonTemplateRef>\n <sky-daypicker-button [date]=\"date()\" />\n</ng-template>\n" }]
|
|
1440
1440
|
}], ctorParameters: () => [], propDecorators: { activeDateHasChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDateHasChanged", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }] } });
|
|
@@ -1639,10 +1639,10 @@ class SkyDayPickerComponent {
|
|
|
1639
1639
|
}
|
|
1640
1640
|
return undefined;
|
|
1641
1641
|
}
|
|
1642
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1643
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1642
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDayPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1643
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyDayPickerComponent, isStandalone: true, 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 @for (label of labels; track label.full) {\n <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n <!-- display: inline -->\n <span\n class=\"sky-datepicker-weekday-text\"\n [attr.aria-label]=\"label.full\"\n >{{ label.abbr }}</span\n >\n </th>\n }\n </tr>\n </thead>\n <tbody>\n <!-- Wait indicator for async custom date stream -->\n <sky-wait [isWaiting]=\"isWaiting\" />\n @for (row of rows; track $index) {\n <tr role=\"row\">\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n />\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i1$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1644
1644
|
}
|
|
1645
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1645
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
|
|
1646
1646
|
type: Component,
|
|
1647
1647
|
args: [{ imports: [SkyDayPickerCellComponent, SkyWaitModule], selector: 'sky-daypicker', changeDetection: ChangeDetectionStrategy.Eager, template: "<table\n class=\"sky-daypicker-table\"\n role=\"grid\"\n [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n <thead>\n <tr>\n @for (label of labels; track label.full) {\n <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n <!-- display: inline -->\n <span\n class=\"sky-datepicker-weekday-text\"\n [attr.aria-label]=\"label.full\"\n >{{ label.abbr }}</span\n >\n </th>\n }\n </tr>\n </thead>\n <tbody>\n <!-- Wait indicator for async custom date stream -->\n <sky-wait [isWaiting]=\"isWaiting\" />\n @for (row of rows; track $index) {\n <tr role=\"row\">\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n <sky-daypicker-cell\n [activeDateHasChanged]=\"activeDateHasChanged\"\n [date]=\"date\"\n />\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
|
|
1648
1648
|
}], propDecorators: { customDates: [{
|
|
@@ -1719,10 +1719,10 @@ class SkyMonthPickerComponent {
|
|
|
1719
1719
|
this.datepicker.activeDate.setMonth(date);
|
|
1720
1720
|
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatMonthLabel);
|
|
1721
1721
|
}
|
|
1722
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1722
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyMonthPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1723
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyMonthPickerComponent, isStandalone: true, selector: "sky-monthpicker", ngImport: i0, template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\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\n | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1724
1724
|
}
|
|
1725
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
|
|
1726
1726
|
type: Component,
|
|
1727
1727
|
args: [{ imports: [CommonModule, SkyDatepickerCalendarLabelPipe], selector: 'sky-monthpicker', changeDetection: ChangeDetectionStrategy.Eager, template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\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\n | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
|
|
1728
1728
|
}] });
|
|
@@ -1800,10 +1800,10 @@ class SkyYearPickerComponent {
|
|
|
1800
1800
|
this.datepicker.activeDate.setFullYear(date);
|
|
1801
1801
|
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatYearLabel);
|
|
1802
1802
|
}
|
|
1803
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1804
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1803
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyYearPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1804
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyYearPickerComponent, isStandalone: true, selector: "sky-yearpicker", ngImport: i0, template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-row\" role=\"gridcell\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\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\n | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1805
1805
|
}
|
|
1806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
|
|
1807
1807
|
type: Component,
|
|
1808
1808
|
args: [{ imports: [CommonModule, SkyDatepickerCalendarLabelPipe], selector: 'sky-yearpicker', changeDetection: ChangeDetectionStrategy.Eager, template: "<table role=\"grid\">\n <tbody>\n @for (row of rows; track $index) {\n <tr>\n @for (date of row; track date.uid) {\n <td class=\"sky-datepicker-row\" role=\"gridcell\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n tabindex=\"-1\"\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\n | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n \"\n [disabled]=\"date.disabled\"\n (click)=\"datepicker.selectCalendar($event, date.date)\"\n >\n <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n date.label\n }}</span>\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n</table>\n" }]
|
|
1809
1809
|
}] });
|
|
@@ -1861,10 +1861,10 @@ class SkyDatepickerCalendarComponent {
|
|
|
1861
1861
|
this.datepicker?.select(this.startAtDate ?? new Date(), false);
|
|
1862
1862
|
}
|
|
1863
1863
|
}
|
|
1864
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1865
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1864
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1865
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyDatepickerCalendarComponent, isStandalone: true, selector: "sky-datepicker-calendar", inputs: { customDates: "customDates", isDaypickerWaiting: "isDaypickerWaiting", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", 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 [startAtDate]=\"startAtDate\"\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 @if (datepicker?.datepickerMode === 'day') {\n <sky-daypicker\n [customDates]=\"customDates\"\n [isWaiting]=\"isDaypickerWaiting\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n />\n } @else if (datepicker?.datepickerMode === 'month') {\n <sky-monthpicker />\n } @else if (datepicker?.datepickerMode === 'year') {\n <sky-yearpicker />\n }\n </div>\n </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], dependencies: [{ kind: "component", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "startAtDate", "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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1866
1866
|
}
|
|
1867
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
|
|
1868
1868
|
type: Component,
|
|
1869
1869
|
args: [{ imports: [
|
|
1870
1870
|
SkyDatepickerCalendarInnerComponent,
|
|
@@ -1950,13 +1950,21 @@ class SkyDatepickerHostService {
|
|
|
1950
1950
|
}
|
|
1951
1951
|
}
|
|
1952
1952
|
}
|
|
1953
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1954
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
1953
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1954
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerHostService }); }
|
|
1955
1955
|
}
|
|
1956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerHostService, decorators: [{
|
|
1957
1957
|
type: Injectable
|
|
1958
1958
|
}] });
|
|
1959
1959
|
|
|
1960
|
+
/**
|
|
1961
|
+
* Whether the keyboard event is the shortcut for setting the datepicker value to today's date.
|
|
1962
|
+
* @internal
|
|
1963
|
+
*/
|
|
1964
|
+
function datepickerIsSetToTodayKey(event) {
|
|
1965
|
+
return event.key === 'F3';
|
|
1966
|
+
}
|
|
1967
|
+
|
|
1960
1968
|
let nextId$1 = 0;
|
|
1961
1969
|
/**
|
|
1962
1970
|
* Creates the datepicker button and calendar.
|
|
@@ -1991,7 +1999,7 @@ class SkyDatepickerComponent {
|
|
|
1991
1999
|
set calendarRef(value) {
|
|
1992
2000
|
if (value) {
|
|
1993
2001
|
this.#_calendarRef = value;
|
|
1994
|
-
this.#
|
|
2002
|
+
this.#addKeyEventListeners();
|
|
1995
2003
|
// Wait for the calendar component to render before gauging dimensions.
|
|
1996
2004
|
setTimeout(() => {
|
|
1997
2005
|
if (this.calendarRef) {
|
|
@@ -2017,6 +2025,7 @@ class SkyDatepickerComponent {
|
|
|
2017
2025
|
#customDatesSubscription;
|
|
2018
2026
|
#ngUnsubscribe;
|
|
2019
2027
|
#overlay;
|
|
2028
|
+
#overlayKeydownListener;
|
|
2020
2029
|
#overlayKeyupListener;
|
|
2021
2030
|
#_calendarRef;
|
|
2022
2031
|
#_dateFormat;
|
|
@@ -2137,6 +2146,32 @@ class SkyDatepickerComponent {
|
|
|
2137
2146
|
this.#openPicker();
|
|
2138
2147
|
}
|
|
2139
2148
|
}
|
|
2149
|
+
/**
|
|
2150
|
+
* Sets the datepicker value to today's date, if today is selectable.
|
|
2151
|
+
* @internal
|
|
2152
|
+
*/
|
|
2153
|
+
selectToday() {
|
|
2154
|
+
const now = new Date();
|
|
2155
|
+
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
|
2156
|
+
if (!this.#isSelectable(today)) {
|
|
2157
|
+
return;
|
|
2158
|
+
}
|
|
2159
|
+
this.calendarDateChange.emit(today);
|
|
2160
|
+
this.dateChange.emit(today);
|
|
2161
|
+
if (this.isOpen) {
|
|
2162
|
+
this.#closePicker();
|
|
2163
|
+
}
|
|
2164
|
+
}
|
|
2165
|
+
/**
|
|
2166
|
+
* Sets the datepicker value to today's date when the trigger button has focus.
|
|
2167
|
+
* @internal
|
|
2168
|
+
*/
|
|
2169
|
+
onTriggerButtonKeydown(event) {
|
|
2170
|
+
if (datepickerIsSetToTodayKey(event)) {
|
|
2171
|
+
event.preventDefault();
|
|
2172
|
+
this.selectToday();
|
|
2173
|
+
}
|
|
2174
|
+
}
|
|
2140
2175
|
onCalendarDateRangeChange(event) {
|
|
2141
2176
|
/* istanbul ignore else */
|
|
2142
2177
|
if (event) {
|
|
@@ -2267,7 +2302,7 @@ class SkyDatepickerComponent {
|
|
|
2267
2302
|
this.#overlay = undefined;
|
|
2268
2303
|
}
|
|
2269
2304
|
}
|
|
2270
|
-
#
|
|
2305
|
+
#addKeyEventListeners() {
|
|
2271
2306
|
const datepickerCalendarElement = this.calendarRef?.nativeElement;
|
|
2272
2307
|
if (datepickerCalendarElement) {
|
|
2273
2308
|
this.#overlayKeyupListener = fromEvent(datepickerCalendarElement, 'keyup')
|
|
@@ -2278,6 +2313,14 @@ class SkyDatepickerComponent {
|
|
|
2278
2313
|
this.#closePicker();
|
|
2279
2314
|
}
|
|
2280
2315
|
});
|
|
2316
|
+
this.#overlayKeydownListener = fromEvent(datepickerCalendarElement, 'keydown')
|
|
2317
|
+
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2318
|
+
.subscribe((event) => {
|
|
2319
|
+
if (datepickerIsSetToTodayKey(event)) {
|
|
2320
|
+
event.preventDefault();
|
|
2321
|
+
this.selectToday();
|
|
2322
|
+
}
|
|
2323
|
+
});
|
|
2281
2324
|
}
|
|
2282
2325
|
}
|
|
2283
2326
|
#removePickerEventListeners() {
|
|
@@ -2285,6 +2328,25 @@ class SkyDatepickerComponent {
|
|
|
2285
2328
|
this.#calendarUnsubscribe.complete();
|
|
2286
2329
|
this.#calendarUnsubscribe = new Subject();
|
|
2287
2330
|
this.#overlayKeyupListener?.unsubscribe();
|
|
2331
|
+
this.#overlayKeydownListener?.unsubscribe();
|
|
2332
|
+
}
|
|
2333
|
+
#isSelectable(date) {
|
|
2334
|
+
const minDateCompare = this.minDate &&
|
|
2335
|
+
date.getTime() <
|
|
2336
|
+
new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate()).getTime();
|
|
2337
|
+
if (minDateCompare) {
|
|
2338
|
+
return false;
|
|
2339
|
+
}
|
|
2340
|
+
const maxDateCompare = this.maxDate &&
|
|
2341
|
+
date.getTime() >
|
|
2342
|
+
new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), this.maxDate.getDate()).getTime();
|
|
2343
|
+
if (maxDateCompare) {
|
|
2344
|
+
return false;
|
|
2345
|
+
}
|
|
2346
|
+
const customDate = this.customDates?.find((item) => item.date.getFullYear() === date.getFullYear() &&
|
|
2347
|
+
item.date.getMonth() === date.getMonth() &&
|
|
2348
|
+
item.date.getDate() === date.getDate());
|
|
2349
|
+
return !customDate?.disabled;
|
|
2288
2350
|
}
|
|
2289
2351
|
#cancelCustomDatesSubscription() {
|
|
2290
2352
|
if (this.#customDatesSubscription) {
|
|
@@ -2304,17 +2366,17 @@ class SkyDatepickerComponent {
|
|
|
2304
2366
|
}
|
|
2305
2367
|
}
|
|
2306
2368
|
}
|
|
2307
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2308
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2369
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyDatepickerComponent, isStandalone: true, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", openChange: "openChange", calendarDateChange: "calendarDateChange" }, providers: [SkyDatepickerHostService], 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 @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\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 #triggerButtonRef\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 (keydown)=\"onTriggerButtonKeydown($event)\"\n >\n <sky-icon iconName=\"calendar-ltr\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n #calendarRef\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 >\n <sky-datepicker-calendar\n cdkTrapFocus\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startAtDate]=\"startAtDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n />\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "startAtDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2309
2371
|
}
|
|
2310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
|
|
2311
2373
|
type: Component,
|
|
2312
2374
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2313
2375
|
CommonModule,
|
|
2314
2376
|
SkyDatepickerCalendarComponent,
|
|
2315
2377
|
SkyDatetimeResourcesModule,
|
|
2316
2378
|
SkyIconModule,
|
|
2317
|
-
], providers: [SkyDatepickerHostService], selector: 'sky-datepicker', template: "<div class=\"sky-datepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\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 #triggerButtonRef\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 >\n <sky-icon iconName=\"calendar-ltr\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n #calendarRef\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 >\n <sky-datepicker-calendar\n cdkTrapFocus\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startAtDate]=\"startAtDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n />\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"] }]
|
|
2379
|
+
], providers: [SkyDatepickerHostService], selector: 'sky-datepicker', template: "<div class=\"sky-datepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\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 #triggerButtonRef\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 (keydown)=\"onTriggerButtonKeydown($event)\"\n >\n <sky-icon iconName=\"calendar-ltr\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n #calendarRef\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 >\n <sky-datepicker-calendar\n cdkTrapFocus\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startAtDate]=\"startAtDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n />\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"] }]
|
|
2318
2380
|
}], ctorParameters: () => [], propDecorators: { pickerClass: [{
|
|
2319
2381
|
type: Input
|
|
2320
2382
|
}], calendarDateRangeChange: [{
|
|
@@ -2611,6 +2673,12 @@ class SkyDatepickerInputDirective {
|
|
|
2611
2673
|
onInput() {
|
|
2612
2674
|
this.#control?.markAsDirty();
|
|
2613
2675
|
}
|
|
2676
|
+
onKeydown(event) {
|
|
2677
|
+
if (datepickerIsSetToTodayKey(event)) {
|
|
2678
|
+
event.preventDefault();
|
|
2679
|
+
this.#datepickerComponent.selectToday();
|
|
2680
|
+
}
|
|
2681
|
+
}
|
|
2614
2682
|
writeValue(value) {
|
|
2615
2683
|
this.#updateValue(value, false);
|
|
2616
2684
|
}
|
|
@@ -2834,10 +2902,10 @@ class SkyDatepickerInputDirective {
|
|
|
2834
2902
|
}
|
|
2835
2903
|
}
|
|
2836
2904
|
}
|
|
2837
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2838
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
2905
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2906
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: SkyDatepickerInputDirective, isStandalone: true, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "focusout": "onFocusout($event)", "change": "onInputChange($event)", "input": "onInput()", "keydown": "onKeydown($event)" } }, providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR], ngImport: i0 }); }
|
|
2839
2907
|
}
|
|
2840
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
|
|
2841
2909
|
type: Directive,
|
|
2842
2910
|
args: [{
|
|
2843
2911
|
host: {
|
|
@@ -2870,6 +2938,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
2870
2938
|
}], onInput: [{
|
|
2871
2939
|
type: HostListener,
|
|
2872
2940
|
args: ['input']
|
|
2941
|
+
}], onKeydown: [{
|
|
2942
|
+
type: HostListener,
|
|
2943
|
+
args: ['keydown', ['$event']]
|
|
2873
2944
|
}] } });
|
|
2874
2945
|
|
|
2875
2946
|
const SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
|
|
@@ -3122,6 +3193,12 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3122
3193
|
onInput() {
|
|
3123
3194
|
this.#control?.markAsDirty();
|
|
3124
3195
|
}
|
|
3196
|
+
onKeydown(event) {
|
|
3197
|
+
if (datepickerIsSetToTodayKey(event)) {
|
|
3198
|
+
event.preventDefault();
|
|
3199
|
+
this.#datepickerComponent.selectToday();
|
|
3200
|
+
}
|
|
3201
|
+
}
|
|
3125
3202
|
writeValue(value) {
|
|
3126
3203
|
this.#updateValue(value, false);
|
|
3127
3204
|
}
|
|
@@ -3329,13 +3406,13 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3329
3406
|
}
|
|
3330
3407
|
this.#setInputElementValue(formattedDate || '');
|
|
3331
3408
|
}
|
|
3332
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3333
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
3409
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3410
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: SkyFuzzyDatepickerInputDirective, isStandalone: true, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "focusout": "onFocusout($event)", "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()", "keydown": "onKeydown($event)" } }, providers: [
|
|
3334
3411
|
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
3335
3412
|
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
3336
3413
|
], ngImport: i0 }); }
|
|
3337
3414
|
}
|
|
3338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
|
|
3339
3416
|
type: Directive,
|
|
3340
3417
|
args: [{
|
|
3341
3418
|
host: {
|
|
@@ -3374,11 +3451,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
3374
3451
|
}], onInput: [{
|
|
3375
3452
|
type: HostListener,
|
|
3376
3453
|
args: ['input']
|
|
3454
|
+
}], onKeydown: [{
|
|
3455
|
+
type: HostListener,
|
|
3456
|
+
args: ['keydown', ['$event']]
|
|
3377
3457
|
}] } });
|
|
3378
3458
|
|
|
3379
3459
|
class SkyDatepickerModule {
|
|
3380
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3381
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
3460
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3461
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerModule, imports: [SkyDatepickerCalendarComponent,
|
|
3382
3462
|
SkyDatepickerCalendarInnerComponent,
|
|
3383
3463
|
SkyDatepickerComponent,
|
|
3384
3464
|
SkyDatepickerInputDirective,
|
|
@@ -3391,7 +3471,7 @@ class SkyDatepickerModule {
|
|
|
3391
3471
|
SkyDatepickerComponent,
|
|
3392
3472
|
SkyDatepickerInputDirective,
|
|
3393
3473
|
SkyFuzzyDatepickerInputDirective] }); }
|
|
3394
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
3474
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerCalendarService], imports: [SkyDatepickerCalendarComponent,
|
|
3395
3475
|
SkyDatepickerCalendarInnerComponent,
|
|
3396
3476
|
SkyDatepickerComponent,
|
|
3397
3477
|
SkyDayPickerButtonComponent,
|
|
@@ -3400,7 +3480,7 @@ class SkyDatepickerModule {
|
|
|
3400
3480
|
SkyMonthPickerComponent,
|
|
3401
3481
|
SkyYearPickerComponent] }); }
|
|
3402
3482
|
}
|
|
3403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerModule, decorators: [{
|
|
3404
3484
|
type: NgModule,
|
|
3405
3485
|
args: [{
|
|
3406
3486
|
imports: [
|
|
@@ -3455,10 +3535,10 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
|
|
|
3455
3535
|
}
|
|
3456
3536
|
return 'skyux_date_range_picker_before_date_label';
|
|
3457
3537
|
}
|
|
3458
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3459
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
3538
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3539
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, isStandalone: true, name: "skyDateRangePickerEndDateResourceKey" }); }
|
|
3460
3540
|
}
|
|
3461
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
|
|
3462
3542
|
type: Pipe,
|
|
3463
3543
|
args: [{
|
|
3464
3544
|
name: 'skyDateRangePickerEndDateResourceKey',
|
|
@@ -3472,10 +3552,10 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
|
|
|
3472
3552
|
}
|
|
3473
3553
|
return 'skyux_date_range_picker_after_date_label';
|
|
3474
3554
|
}
|
|
3475
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3476
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
3555
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3556
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, isStandalone: true, name: "skyDateRangePickerStartDateResourceKey" }); }
|
|
3477
3557
|
}
|
|
3478
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3558
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
|
|
3479
3559
|
type: Pipe,
|
|
3480
3560
|
args: [{
|
|
3481
3561
|
name: 'skyDateRangePickerStartDateResourceKey',
|
|
@@ -4168,10 +4248,10 @@ class SkyDateRangeService {
|
|
|
4168
4248
|
}
|
|
4169
4249
|
return calculators;
|
|
4170
4250
|
}
|
|
4171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4172
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
4251
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4252
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangeService, providedIn: 'root' }); }
|
|
4173
4253
|
}
|
|
4174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangeService, decorators: [{
|
|
4175
4255
|
type: Injectable,
|
|
4176
4256
|
args: [{
|
|
4177
4257
|
providedIn: 'root',
|
|
@@ -4538,8 +4618,8 @@ class SkyDateRangePickerComponent {
|
|
|
4538
4618
|
#createTouchedChangeSignal(control) {
|
|
4539
4619
|
return toSignal(control.events.pipe(filter((evt) => evt instanceof TouchedChangeEvent), map((evt) => evt.touched), takeUntilDestroyed(this.#destroyRef)));
|
|
4540
4620
|
}
|
|
4541
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4542
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
4621
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4622
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyDateRangePickerComponent, isStandalone: true, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", hintText: "hintText", label: "label", labelText: "labelText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, host: { listeners: { "focusout": "onFocusout($event)" }, properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
|
|
4543
4623
|
{
|
|
4544
4624
|
provide: NG_VALIDATORS,
|
|
4545
4625
|
useExisting: SkyDateRangePickerComponent,
|
|
@@ -4553,7 +4633,7 @@ class SkyDateRangePickerComponent {
|
|
|
4553
4633
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
4554
4634
|
], viewQueries: [{ propertyName: "datepickers", predicate: SkyDatepickerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n !showStartDatePicker() && !showEndDatePicker()\n }\"\n >\n <sky-input-box\n [hasErrors]=\"calculatorIdHasErrors()\"\n [helpKey]=\"helpKey\"\n [helpPopoverContent]=\"helpPopoverContent\"\n [helpPopoverTitle]=\"helpPopoverTitle\"\n [hintText]=\"hintText\"\n [labelText]=\"\n labelText ||\n label ||\n ('skyux_date_range_picker_default_label' | skyLibResources)\n \"\n >\n <select formControlName=\"calculatorId\" (change)=\"onCalculatorIdChange()\">\n @for (calculator of calculators; track calculator.calculatorId) {\n <option [value]=\"calculator.calculatorId\">\n {{ calculator.shortDescription$ | async }}\n </option>\n }\n </select>\n @if (\n hostControl?.errors?.['skyDateRange']?.errors?.[\n 'endDateBeforeStartDate'\n ] && labelText\n ) {\n <sky-form-error\n errorName=\"endDateBeforeStartDate\"\n [errorText]=\"\n 'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n | skyLibResources\n \"\n />\n }\n <span class=\"sky-input-box-descendent-form-error\">\n <ng-content select=\"sky-form-error\" />\n </span>\n </sky-input-box>\n </div>\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n [hidden]=\"!showStartDatePicker()\"\n [ngClass]=\"{\n 'sky-date-range-picker-last-input':\n showStartDatePicker() && !showEndDatePicker()\n }\"\n >\n <sky-input-box\n [hasErrors]=\"startDateHasErrors()\"\n [labelText]=\"\n selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources\n \"\n >\n <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n <input\n formControlName=\"startDate\"\n name=\"startDate\"\n skyDatepickerInput\n type=\"text\"\n [attr.aria-label]=\"\n labelText || label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n : (labelText ? labelText : label))\n : (selectedCalculator.type\n | skyDateRangePickerStartDateResourceKey\n | skyLibResources)\n \"\n [dateFormat]=\"dateFormat\"\n [required]=\"showStartDatePicker()\"\n (change)=\"onDateChange()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n <div\n class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n [hidden]=\"!showEndDatePicker()\"\n [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n >\n <sky-input-box\n [hasErrors]=\"endDateHasErrors()\"\n [labelText]=\"\n selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources\n \"\n >\n <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n <input\n formControlName=\"endDate\"\n name=\"endDate\"\n skyDatepickerInput\n type=\"text\"\n [attr.aria-label]=\"\n labelText || label\n ? ('skyux_date_range_picker_default_aria_label'\n | skyLibResources\n : (selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n : (labelText ? labelText : label))\n : (selectedCalculator.type\n | skyDateRangePickerEndDateResourceKey\n | skyLibResources)\n \"\n [dateFormat]=\"dateFormat\"\n [required]=\"showEndDatePicker()\"\n (change)=\"onDateChange()\"\n />\n </sky-datepicker>\n </sky-input-box>\n </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px;--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg )}:host{display:block}.sky-date-range-picker{display:flex}: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 .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}: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}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media(min-width:768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}: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%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}: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:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@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%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i5.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i5.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i5.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4555
4635
|
}
|
|
4556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4636
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
|
|
4557
4637
|
type: Component,
|
|
4558
4638
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4559
4639
|
'(focusout)': 'onFocusout($event)',
|
|
@@ -4608,11 +4688,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
4608
4688
|
}], datepickers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SkyDatepickerComponent), { isSignal: true }] }] } });
|
|
4609
4689
|
|
|
4610
4690
|
class SkyDateRangePickerModule {
|
|
4611
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4612
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
4613
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
4691
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4692
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerModule, imports: [SkyDateRangePickerComponent], exports: [SkyDateRangePickerComponent, SkyFormErrorModule] }); }
|
|
4693
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerModule, imports: [SkyDateRangePickerComponent, SkyFormErrorModule] }); }
|
|
4614
4694
|
}
|
|
4615
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4695
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
|
|
4616
4696
|
type: NgModule,
|
|
4617
4697
|
args: [{
|
|
4618
4698
|
exports: [SkyDateRangePickerComponent, SkyFormErrorModule],
|
|
@@ -4982,10 +5062,10 @@ class SkyTimepickerComponent {
|
|
|
4982
5062
|
/* istanbul ignore next */
|
|
4983
5063
|
this.#overlayKeyupListener?.unsubscribe();
|
|
4984
5064
|
}
|
|
4985
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4986
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkyTimepickerComponent, isStandalone: true, 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 @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\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 #triggerButtonRef\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 >\n <sky-icon iconName=\"clock\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n #timepickerRef\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 >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column sky-timepicker-column-hours\"\n [class.sky-timepicker-24hour-hours]=\"is8601\"\n >\n <ol>\n @for (hour of hours; track hour) {\n <li>\n <button\n name=\"hour\"\n type=\"button\"\n [class.sky-btn-active]=\"selectedHour === hour\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n }\n </ol>\n </section>\n <section\n class=\"sky-timepicker-column sky-timepicker-column-minutes\"\n [class.sky-timepicker-24hour-minutes]=\"is8601\"\n >\n <ol>\n @for (minute of minutes; track minute) {\n <li>\n <button\n name=\"minute\"\n type=\"button\"\n [class.sky-btn-active]=\"highlightMinute(selectedMinute, minute)\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n }\n </ol>\n </section>\n @if (!is8601) {\n <section class=\"sky-timepicker-column sky-timepicker-column-meridies\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [class.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 [class.sky-btn-active]=\"selectedMeridies === 'PM'\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n }\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:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-box-shadow: none;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-height: 100%;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-button-width: 100%;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s))}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-container-base) solid var(--sky-color-border-container-base));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{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, auto) var(--sky-override-timepicker-button-padding-horizontal, auto);width:var(--sky-override-timepicker-button-width, var(--sky-size-picker_btn));height:var(--sky-override-timepicker-button-height, var(--sky-size-picker_btn))}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active):not(:active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-column-meridies ol li button,.sky-timepicker-column.sky-timepicker-24hour-minutes ol li button{height:100%}.sky-timepicker-column.sky-timepicker-24hour-hours ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour-hours ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-comp-timepicker-content-space-inset-top) var(--sky-comp-timepicker-content-space-inset-right) var(--sky-comp-timepicker-content-space-inset-bottom) var(--sky-comp-timepicker-content-space-inset-left));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-top)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-right)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-bottom)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-left))}.sky-timepicker-footer .sky-timepicker-column{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}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5065
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5066
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyTimepickerComponent, isStandalone: true, 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 @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\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 #triggerButtonRef\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 >\n <sky-icon iconName=\"clock\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n #timepickerRef\n class=\"sky-timepicker-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column sky-timepicker-column-hours\"\n [class.sky-timepicker-24hour-hours]=\"is8601\"\n >\n <ol>\n @for (hour of hours; track hour) {\n <li>\n <button\n name=\"hour\"\n type=\"button\"\n [class.sky-btn-active]=\"selectedHour === hour\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n }\n </ol>\n </section>\n <section\n class=\"sky-timepicker-column sky-timepicker-column-minutes\"\n [class.sky-timepicker-24hour-minutes]=\"is8601\"\n >\n <ol>\n @for (minute of minutes; track minute) {\n <li>\n <button\n name=\"minute\"\n type=\"button\"\n [class.sky-btn-active]=\"highlightMinute(selectedMinute, minute)\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n }\n </ol>\n </section>\n @if (!is8601) {\n <section class=\"sky-timepicker-column sky-timepicker-column-meridies\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [class.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 [class.sky-btn-active]=\"selectedMeridies === 'PM'\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n }\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:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-box-shadow: none;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-height: 100%;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-button-width: 100%;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s))}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-container-base) solid var(--sky-color-border-container-base));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{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, auto) var(--sky-override-timepicker-button-padding-horizontal, auto);width:var(--sky-override-timepicker-button-width, var(--sky-size-picker_btn));height:var(--sky-override-timepicker-button-height, var(--sky-size-picker_btn))}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active):not(:active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-column-meridies ol li button,.sky-timepicker-column.sky-timepicker-24hour-minutes ol li button{height:100%}.sky-timepicker-column.sky-timepicker-24hour-hours ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour-hours ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-comp-timepicker-content-space-inset-top) var(--sky-comp-timepicker-content-space-inset-right) var(--sky-comp-timepicker-content-space-inset-bottom) var(--sky-comp-timepicker-content-space-inset-left));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-top)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-right)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-bottom)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-left))}.sky-timepicker-footer .sky-timepicker-column{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}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4987
5067
|
}
|
|
4988
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
|
4989
5069
|
type: Component,
|
|
4990
5070
|
args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4991
5071
|
NgTemplateOutlet,
|
|
@@ -4993,7 +5073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
4993
5073
|
SkyIconModule,
|
|
4994
5074
|
SkyThemeModule,
|
|
4995
5075
|
SkyDatetimeResourcesModule,
|
|
4996
|
-
], template: "<div class=\"sky-timepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\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 #triggerButtonRef\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 >\n <sky-icon iconName=\"clock\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n #timepickerRef\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 >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column sky-timepicker-column-hours\"\n [class.sky-timepicker-24hour-hours]=\"is8601\"\n >\n <ol>\n @for (hour of hours; track hour) {\n <li>\n <button\n name=\"hour\"\n type=\"button\"\n [class.sky-btn-active]=\"selectedHour === hour\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n }\n </ol>\n </section>\n <section\n class=\"sky-timepicker-column sky-timepicker-column-minutes\"\n [class.sky-timepicker-24hour-minutes]=\"is8601\"\n >\n <ol>\n @for (minute of minutes; track minute) {\n <li>\n <button\n name=\"minute\"\n type=\"button\"\n [class.sky-btn-active]=\"highlightMinute(selectedMinute, minute)\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n }\n </ol>\n </section>\n @if (!is8601) {\n <section class=\"sky-timepicker-column sky-timepicker-column-meridies\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [class.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 [class.sky-btn-active]=\"selectedMeridies === 'PM'\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n }\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:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-box-shadow: none;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-height: 100%;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-button-width: 100%;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s))}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-container-base) solid var(--sky-color-border-container-base));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{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, auto) var(--sky-override-timepicker-button-padding-horizontal, auto);width:var(--sky-override-timepicker-button-width, var(--sky-size-picker_btn));height:var(--sky-override-timepicker-button-height, var(--sky-size-picker_btn))}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active):not(:active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-column-meridies ol li button,.sky-timepicker-column.sky-timepicker-24hour-minutes ol li button{height:100%}.sky-timepicker-column.sky-timepicker-24hour-hours ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour-hours ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-comp-timepicker-content-space-inset-top) var(--sky-comp-timepicker-content-space-inset-right) var(--sky-comp-timepicker-content-space-inset-bottom) var(--sky-comp-timepicker-content-space-inset-left));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-top)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-right)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-bottom)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-left))}.sky-timepicker-footer .sky-timepicker-column{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}\n"] }]
|
|
5076
|
+
], template: "<div class=\"sky-timepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\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 #triggerButtonRef\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 >\n <sky-icon iconName=\"clock\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n #timepickerRef\n class=\"sky-timepicker-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column sky-timepicker-column-hours\"\n [class.sky-timepicker-24hour-hours]=\"is8601\"\n >\n <ol>\n @for (hour of hours; track hour) {\n <li>\n <button\n name=\"hour\"\n type=\"button\"\n [class.sky-btn-active]=\"selectedHour === hour\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n }\n </ol>\n </section>\n <section\n class=\"sky-timepicker-column sky-timepicker-column-minutes\"\n [class.sky-timepicker-24hour-minutes]=\"is8601\"\n >\n <ol>\n @for (minute of minutes; track minute) {\n <li>\n <button\n name=\"minute\"\n type=\"button\"\n [class.sky-btn-active]=\"highlightMinute(selectedMinute, minute)\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n }\n </ol>\n </section>\n @if (!is8601) {\n <section class=\"sky-timepicker-column sky-timepicker-column-meridies\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [class.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 [class.sky-btn-active]=\"selectedMeridies === 'PM'\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n }\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:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-box-shadow: none;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-height: 100%;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-button-width: 100%;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s))}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-container-base) solid var(--sky-color-border-container-base));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{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, auto) var(--sky-override-timepicker-button-padding-horizontal, auto);width:var(--sky-override-timepicker-button-width, var(--sky-size-picker_btn));height:var(--sky-override-timepicker-button-height, var(--sky-size-picker_btn))}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active):not(:active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-column-meridies ol li button,.sky-timepicker-column.sky-timepicker-24hour-minutes ol li button{height:100%}.sky-timepicker-column.sky-timepicker-24hour-hours ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour-hours ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-comp-timepicker-content-space-inset-top) var(--sky-comp-timepicker-content-space-inset-right) var(--sky-comp-timepicker-content-space-inset-bottom) var(--sky-comp-timepicker-content-space-inset-left));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-top)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-right)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-bottom)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-left))}.sky-timepicker-footer .sky-timepicker-column{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}\n"] }]
|
|
4997
5077
|
}], ctorParameters: () => [], propDecorators: { selectedTimeChanged: [{
|
|
4998
5078
|
type: Output
|
|
4999
5079
|
}], timepickerRef: [{
|
|
@@ -5246,10 +5326,10 @@ class SkyTimepickerInputDirective {
|
|
|
5246
5326
|
/* istanbul ignore next */
|
|
5247
5327
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5248
5328
|
#_validatorChange = () => { };
|
|
5249
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5250
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
5329
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5330
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: SkyTimepickerInputDirective, isStandalone: true, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" }, properties: { "attr.skyTimepickerInput": "this.hostTimepickerInput" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
|
|
5251
5331
|
}
|
|
5252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
|
|
5253
5333
|
type: Directive,
|
|
5254
5334
|
args: [{
|
|
5255
5335
|
selector: '[skyTimepickerInput]',
|
|
@@ -5275,14 +5355,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
5275
5355
|
}] } });
|
|
5276
5356
|
|
|
5277
5357
|
class SkyTimepickerModule {
|
|
5278
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5279
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
5358
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5359
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerModule, imports: [SkyDatetimeResourcesModule,
|
|
5280
5360
|
SkyTimepickerInputDirective,
|
|
5281
5361
|
SkyTimepickerComponent], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] }); }
|
|
5282
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
5362
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerModule, imports: [SkyDatetimeResourcesModule,
|
|
5283
5363
|
SkyTimepickerComponent] }); }
|
|
5284
5364
|
}
|
|
5285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerModule, decorators: [{
|
|
5286
5366
|
type: NgModule,
|
|
5287
5367
|
args: [{
|
|
5288
5368
|
imports: [
|