@skyux/datetime 15.0.0-alpha.0 → 15.0.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/skyux-datetime.mjs +327 -218
- package/fesm2022/skyux-datetime.mjs.map +1 -1
- package/package.json +12 -12
- package/types/skyux-datetime.d.ts +57 -52
|
@@ -1,24 +1,23 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule, inject, Injectable, Pipe, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, computed, effect, ViewChild, DestroyRef, output, EnvironmentInjector, ElementRef, TemplateRef,
|
|
2
|
+
import { NgModule, inject, Injectable, Pipe, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, computed, effect, ViewChild, DestroyRef, output, ChangeDetectorRef, EnvironmentInjector, ElementRef, TemplateRef, forwardRef, Renderer2, HostListener, Directive, Injector, viewChildren, signal, runInInjectionContext, booleanAttribute, HostBinding } from '@angular/core';
|
|
3
3
|
import * as i1 from '@skyux/i18n';
|
|
4
4
|
import { SkyLibResourcesService, SkyI18nModule, SkyAppLocaleProvider, SkyIntlDateFormatter, SkyLibResourcesPipe } from '@skyux/i18n';
|
|
5
5
|
import { Subject, takeUntil as takeUntil$1, BehaviorSubject, fromEvent, of, filter, map, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
|
|
6
6
|
import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
7
7
|
import moment from 'moment';
|
|
8
|
-
import * as
|
|
9
|
-
import { SkyInputBoxModule, SkyFormErrorsModule, SKY_FORM_ERRORS_ENABLED, SkyFormErrorModule } from '@skyux/forms';
|
|
8
|
+
import * as i5 from '@skyux/forms';
|
|
9
|
+
import { SkyInputBoxHostService, SkyInputBoxModule, SkyFormErrorsModule, SKY_FORM_ERRORS_ENABLED, SkyFormErrorModule } from '@skyux/forms';
|
|
10
10
|
import * as i1$1 from '@angular/common';
|
|
11
11
|
import { CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
12
12
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
13
|
-
import * as i2$
|
|
13
|
+
import * as i2$2 from '@angular/forms';
|
|
14
14
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormBuilder, NgControl, StatusChangeEvent, TouchedChangeEvent, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
15
|
-
import
|
|
16
|
-
import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyLogService } from '@skyux/core';
|
|
15
|
+
import { SkyLiveAnnouncerService, SkyAffixService, SkyAppFormat, SkyCoreAdapterService, SkyOverlayService, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyLogService } from '@skyux/core';
|
|
17
16
|
import * as i2 from '@skyux/icon';
|
|
18
17
|
import { SkyIconModule } from '@skyux/icon';
|
|
19
18
|
import * as i3 from '@skyux/theme';
|
|
20
|
-
import { SkyThemeModule } from '@skyux/theme';
|
|
21
|
-
import * as
|
|
19
|
+
import { SkyThemeModule, SkyThemeService } from '@skyux/theme';
|
|
20
|
+
import * as i1$2 from '@skyux/indicators';
|
|
22
21
|
import { SkyWaitModule } from '@skyux/indicators';
|
|
23
22
|
import * as i2$1 from '@skyux/popovers';
|
|
24
23
|
import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
|
|
@@ -217,7 +216,7 @@ const RESOURCES = {
|
|
|
217
216
|
skyux_date_range_picker_start_date_label: {
|
|
218
217
|
message: 'À partir de la date du',
|
|
219
218
|
},
|
|
220
|
-
skyux_date_range_picker_end_date_label: { message: '
|
|
219
|
+
skyux_date_range_picker_end_date_label: { message: "Jusqu'à la date du" },
|
|
221
220
|
skyux_date_range_picker_before_date_label: { message: 'Date avant' },
|
|
222
221
|
skyux_date_range_picker_after_date_label: { message: 'Date après' },
|
|
223
222
|
skyux_date_range_picker_default_aria_label: { message: '{0} pour {1}' },
|
|
@@ -228,11 +227,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
228
227
|
* Import into any component library module that needs to use resource strings.
|
|
229
228
|
*/
|
|
230
229
|
class SkyDatetimeResourcesModule {
|
|
231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
232
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
233
|
-
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] }); }
|
|
234
233
|
}
|
|
235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
|
|
236
235
|
type: NgModule,
|
|
237
236
|
args: [{
|
|
238
237
|
exports: [SkyI18nModule],
|
|
@@ -314,10 +313,10 @@ class SkyDateService {
|
|
|
314
313
|
}
|
|
315
314
|
return SkyIntlDateFormatter.format(date, locale || this.#defaultLocale, this.#ALIASES[pattern] || pattern);
|
|
316
315
|
}
|
|
317
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
318
|
-
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' }); }
|
|
319
318
|
}
|
|
320
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateService, decorators: [{
|
|
321
320
|
type: Injectable,
|
|
322
321
|
args: [{
|
|
323
322
|
providedIn: 'root',
|
|
@@ -378,10 +377,10 @@ class SkyDatePipe {
|
|
|
378
377
|
const format = this.#format || this.#defaultFormat;
|
|
379
378
|
this.#formattedValue = this.#dateSvc.format(this.#value, locale, format);
|
|
380
379
|
}
|
|
381
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
382
|
-
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 }); }
|
|
383
382
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatePipe, decorators: [{
|
|
385
384
|
type: Pipe,
|
|
386
385
|
args: [{
|
|
387
386
|
name: 'skyDate',
|
|
@@ -395,6 +394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
395
394
|
class SkyFuzzyDateService {
|
|
396
395
|
#currentLocale;
|
|
397
396
|
#ngUnsubscribe = new Subject();
|
|
397
|
+
// eslint-disable-next-line @angular-eslint/prefer-inject -- constructor injection is required to maintain the public API for consumers who may instantiate this service directly (e.g. `new SkyFuzzyDateService(...)`).
|
|
398
398
|
constructor(localeProvider) {
|
|
399
399
|
this.#currentLocale = localeProvider.defaultLocale;
|
|
400
400
|
localeProvider
|
|
@@ -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',
|
|
@@ -805,6 +805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
805
805
|
*/
|
|
806
806
|
class SkyFuzzyDatePipe {
|
|
807
807
|
#fuzzyDateService;
|
|
808
|
+
// eslint-disable-next-line @angular-eslint/prefer-inject -- constructor injection is required to maintain the public API for consumers who may instantiate this pipe directly (e.g. `new SkyFuzzyDatePipe(...)`).
|
|
808
809
|
constructor(fuzzyDateService) {
|
|
809
810
|
this.#fuzzyDateService = fuzzyDateService;
|
|
810
811
|
}
|
|
@@ -827,10 +828,10 @@ class SkyFuzzyDatePipe {
|
|
|
827
828
|
const fuzzyDateLocale = locale || this.#fuzzyDateService.getCurrentLocale();
|
|
828
829
|
return this.#fuzzyDateService.format(value, fuzzyDateFormat, fuzzyDateLocale);
|
|
829
830
|
}
|
|
830
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
831
|
-
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 }); }
|
|
832
833
|
}
|
|
833
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
834
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
|
|
834
835
|
type: Pipe,
|
|
835
836
|
args: [{
|
|
836
837
|
name: 'skyFuzzyDate',
|
|
@@ -839,11 +840,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
839
840
|
}], ctorParameters: () => [{ type: SkyFuzzyDateService }] });
|
|
840
841
|
|
|
841
842
|
class SkyDatePipeModule {
|
|
842
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
843
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
844
|
-
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] }); }
|
|
845
846
|
}
|
|
846
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatePipeModule, decorators: [{
|
|
847
848
|
type: NgModule,
|
|
848
849
|
args: [{
|
|
849
850
|
imports: [SkyDatetimeResourcesModule, SkyDatePipe, SkyFuzzyDatePipe],
|
|
@@ -889,6 +890,25 @@ class SkyDateFormatter {
|
|
|
889
890
|
}
|
|
890
891
|
}
|
|
891
892
|
|
|
893
|
+
class SkyDatepickerConfigService {
|
|
894
|
+
constructor() {
|
|
895
|
+
/**
|
|
896
|
+
* The starting day of the week in the calendar,
|
|
897
|
+
* where `0` sets the starting day to Sunday.
|
|
898
|
+
* @default 0
|
|
899
|
+
*/
|
|
900
|
+
this.startingDay = 0;
|
|
901
|
+
}
|
|
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
|
+
}
|
|
905
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
|
|
906
|
+
type: Injectable,
|
|
907
|
+
args: [{
|
|
908
|
+
providedIn: 'root',
|
|
909
|
+
}]
|
|
910
|
+
}] });
|
|
911
|
+
|
|
892
912
|
let nextDatepickerId = 0;
|
|
893
913
|
/**
|
|
894
914
|
* @internal
|
|
@@ -1238,12 +1258,12 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1238
1258
|
}
|
|
1239
1259
|
return undefined;
|
|
1240
1260
|
}
|
|
1241
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1242
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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-comp-override-link-text-decoration-line: var( --sky-font-text_decoration-standalone_link-base );--sky-comp-override-link-text-decoration-line-hover: var( --sky-font-text_decoration-standalone_link-hover );--sky-comp-override-link-text-decoration-line-active: var( --sky-font-text_decoration-standalone_link-active );--sky-comp-override-link-text-decoration-line-focus: var( --sky-font-text_decoration-standalone_link-focus );--sky-comp-override-link-text-decoration-line-disabled: var( --sky-font-text_decoration-standalone_link-disabled )}.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 }); }
|
|
1243
1263
|
}
|
|
1244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
|
|
1245
1265
|
type: Component,
|
|
1246
|
-
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"] }]
|
|
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-comp-override-link-text-decoration-line: var( --sky-font-text_decoration-standalone_link-base );--sky-comp-override-link-text-decoration-line-hover: var( --sky-font-text_decoration-standalone_link-hover );--sky-comp-override-link-text-decoration-line-active: var( --sky-font-text_decoration-standalone_link-active );--sky-comp-override-link-text-decoration-line-focus: var( --sky-font-text_decoration-standalone_link-focus );--sky-comp-override-link-text-decoration-line-disabled: var( --sky-font-text_decoration-standalone_link-disabled )}.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"] }]
|
|
1247
1267
|
}], propDecorators: { customDates: [{
|
|
1248
1268
|
type: Input
|
|
1249
1269
|
}], startingDay: [{
|
|
@@ -1274,10 +1294,10 @@ class SkyDatepickerCalendarService {
|
|
|
1274
1294
|
*/
|
|
1275
1295
|
this.keyDatePopoverStream = new Subject();
|
|
1276
1296
|
}
|
|
1277
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1278
|
-
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 }); }
|
|
1279
1299
|
}
|
|
1280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1300
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarService, decorators: [{
|
|
1281
1301
|
type: Injectable
|
|
1282
1302
|
}] });
|
|
1283
1303
|
|
|
@@ -1306,10 +1326,10 @@ class SkyDatepickerCalendarLabelPipe {
|
|
|
1306
1326
|
}
|
|
1307
1327
|
return formattedValue;
|
|
1308
1328
|
}
|
|
1309
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1310
|
-
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" }); }
|
|
1311
1331
|
}
|
|
1312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, decorators: [{
|
|
1313
1333
|
type: Pipe,
|
|
1314
1334
|
args: [{
|
|
1315
1335
|
name: 'skyDatepickerCalendarLabel',
|
|
@@ -1320,16 +1340,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
1320
1340
|
* @internal
|
|
1321
1341
|
*/
|
|
1322
1342
|
class SkyDayPickerButtonComponent {
|
|
1323
|
-
constructor(
|
|
1324
|
-
this.datepicker =
|
|
1343
|
+
constructor() {
|
|
1344
|
+
this.datepicker = inject(SkyDatepickerCalendarInnerComponent);
|
|
1325
1345
|
}
|
|
1326
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1327
|
-
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 }); }
|
|
1328
1348
|
}
|
|
1329
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
|
|
1330
1350
|
type: Component,
|
|
1331
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"] }]
|
|
1332
|
-
}],
|
|
1352
|
+
}], propDecorators: { date: [{
|
|
1333
1353
|
type: Input
|
|
1334
1354
|
}] } });
|
|
1335
1355
|
|
|
@@ -1411,10 +1431,10 @@ class SkyDayPickerCellComponent {
|
|
|
1411
1431
|
#showTooltip() {
|
|
1412
1432
|
this.popoverController.next({ type: SkyPopoverMessageType.Open });
|
|
1413
1433
|
}
|
|
1414
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1415
|
-
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 }); }
|
|
1416
1436
|
}
|
|
1417
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
|
|
1418
1438
|
type: Component,
|
|
1419
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" }]
|
|
1420
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 }] }] } });
|
|
@@ -1423,16 +1443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
1423
1443
|
* @internal
|
|
1424
1444
|
*/
|
|
1425
1445
|
class SkyDayPickerComponent {
|
|
1426
|
-
|
|
1427
|
-
/* istanbul ignore else */
|
|
1428
|
-
if (value) {
|
|
1429
|
-
this.#applyCustomDates(value, this.rows);
|
|
1430
|
-
}
|
|
1431
|
-
}
|
|
1432
|
-
#daysInMonth;
|
|
1433
|
-
#initialDate;
|
|
1434
|
-
#ngUnsubscribe;
|
|
1435
|
-
constructor(datepicker) {
|
|
1446
|
+
constructor() {
|
|
1436
1447
|
this.calendarDateRangeChange = new EventEmitter();
|
|
1437
1448
|
this.isWaiting = false;
|
|
1438
1449
|
this.activeDateHasChanged = false;
|
|
@@ -1440,10 +1451,19 @@ class SkyDayPickerComponent {
|
|
|
1440
1451
|
this.title = '';
|
|
1441
1452
|
this.rows = [];
|
|
1442
1453
|
this.weekNumbers = [];
|
|
1454
|
+
this.datepicker = inject(SkyDatepickerCalendarInnerComponent);
|
|
1443
1455
|
this.#daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
|
1444
1456
|
this.#ngUnsubscribe = new Subject();
|
|
1445
|
-
this.datepicker = datepicker;
|
|
1446
1457
|
}
|
|
1458
|
+
set customDates(value) {
|
|
1459
|
+
/* istanbul ignore else */
|
|
1460
|
+
if (value) {
|
|
1461
|
+
this.#applyCustomDates(value, this.rows);
|
|
1462
|
+
}
|
|
1463
|
+
}
|
|
1464
|
+
#daysInMonth;
|
|
1465
|
+
#initialDate;
|
|
1466
|
+
#ngUnsubscribe;
|
|
1447
1467
|
ngOnInit() {
|
|
1448
1468
|
this.datepicker.stepDay = { months: 1 };
|
|
1449
1469
|
this.#initialDate = this.datepicker.activeDate.getDate();
|
|
@@ -1619,13 +1639,13 @@ class SkyDayPickerComponent {
|
|
|
1619
1639
|
}
|
|
1620
1640
|
return undefined;
|
|
1621
1641
|
}
|
|
1622
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1623
|
-
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 }); }
|
|
1624
1644
|
}
|
|
1625
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1645
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
|
|
1626
1646
|
type: Component,
|
|
1627
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" }]
|
|
1628
|
-
}],
|
|
1648
|
+
}], propDecorators: { customDates: [{
|
|
1629
1649
|
type: Input
|
|
1630
1650
|
}], calendarDateRangeChange: [{
|
|
1631
1651
|
type: Output
|
|
@@ -1637,10 +1657,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
1637
1657
|
* @internal
|
|
1638
1658
|
*/
|
|
1639
1659
|
class SkyMonthPickerComponent {
|
|
1640
|
-
constructor(
|
|
1660
|
+
constructor() {
|
|
1661
|
+
this.datepicker = inject(SkyDatepickerCalendarInnerComponent);
|
|
1641
1662
|
this.rows = [];
|
|
1642
1663
|
this.title = '';
|
|
1643
|
-
this.datepicker = datepicker;
|
|
1644
1664
|
}
|
|
1645
1665
|
ngOnInit() {
|
|
1646
1666
|
this.datepicker.stepMonth = {
|
|
@@ -1699,22 +1719,22 @@ class SkyMonthPickerComponent {
|
|
|
1699
1719
|
this.datepicker.activeDate.setMonth(date);
|
|
1700
1720
|
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatMonthLabel);
|
|
1701
1721
|
}
|
|
1702
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1703
|
-
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 }); }
|
|
1704
1724
|
}
|
|
1705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
|
|
1706
1726
|
type: Component,
|
|
1707
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" }]
|
|
1708
|
-
}]
|
|
1728
|
+
}] });
|
|
1709
1729
|
|
|
1710
1730
|
/**
|
|
1711
1731
|
* @internal
|
|
1712
1732
|
*/
|
|
1713
1733
|
class SkyYearPickerComponent {
|
|
1714
|
-
constructor(
|
|
1734
|
+
constructor() {
|
|
1735
|
+
this.datepicker = inject(SkyDatepickerCalendarInnerComponent);
|
|
1715
1736
|
this.rows = [];
|
|
1716
1737
|
this.title = '';
|
|
1717
|
-
this.datepicker = datepicker;
|
|
1718
1738
|
}
|
|
1719
1739
|
ngOnInit() {
|
|
1720
1740
|
this.datepicker.stepYear = { years: this.datepicker.yearRange };
|
|
@@ -1780,31 +1800,12 @@ class SkyYearPickerComponent {
|
|
|
1780
1800
|
this.datepicker.activeDate.setFullYear(date);
|
|
1781
1801
|
this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatYearLabel);
|
|
1782
1802
|
}
|
|
1783
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1784
|
-
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 }); }
|
|
1785
1805
|
}
|
|
1786
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
|
|
1787
1807
|
type: Component,
|
|
1788
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" }]
|
|
1789
|
-
}], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
|
|
1790
|
-
|
|
1791
|
-
class SkyDatepickerConfigService {
|
|
1792
|
-
constructor() {
|
|
1793
|
-
/**
|
|
1794
|
-
* The starting day of the week in the calendar,
|
|
1795
|
-
* where `0` sets the starting day to Sunday.
|
|
1796
|
-
* @default 0
|
|
1797
|
-
*/
|
|
1798
|
-
this.startingDay = 0;
|
|
1799
|
-
}
|
|
1800
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1801
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' }); }
|
|
1802
|
-
}
|
|
1803
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
|
|
1804
|
-
type: Injectable,
|
|
1805
|
-
args: [{
|
|
1806
|
-
providedIn: 'root',
|
|
1807
|
-
}]
|
|
1808
1809
|
}] });
|
|
1809
1810
|
|
|
1810
1811
|
/**
|
|
@@ -1821,14 +1822,14 @@ class SkyDatepickerCalendarComponent {
|
|
|
1821
1822
|
#formatter;
|
|
1822
1823
|
#_startingDay;
|
|
1823
1824
|
#config;
|
|
1824
|
-
constructor(
|
|
1825
|
+
constructor() {
|
|
1825
1826
|
this.calendarDateRangeChange = new EventEmitter();
|
|
1826
1827
|
this.calendarModeChange = new EventEmitter();
|
|
1827
1828
|
this.selectedDateChange = new EventEmitter(undefined);
|
|
1828
1829
|
this._now = new Date();
|
|
1829
1830
|
this.#formatter = new SkyDateFormatter();
|
|
1830
1831
|
this.#_startingDay = 0;
|
|
1831
|
-
this.#config =
|
|
1832
|
+
this.#config = inject(SkyDatepickerConfigService);
|
|
1832
1833
|
this.configureOptions();
|
|
1833
1834
|
}
|
|
1834
1835
|
configureOptions() {
|
|
@@ -1860,10 +1861,10 @@ class SkyDatepickerCalendarComponent {
|
|
|
1860
1861
|
this.datepicker?.select(this.startAtDate ?? new Date(), false);
|
|
1861
1862
|
}
|
|
1862
1863
|
}
|
|
1863
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1864
|
-
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 }); }
|
|
1865
1866
|
}
|
|
1866
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
|
|
1867
1868
|
type: Component,
|
|
1868
1869
|
args: [{ imports: [
|
|
1869
1870
|
SkyDatepickerCalendarInnerComponent,
|
|
@@ -1871,7 +1872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
1871
1872
|
SkyMonthPickerComponent,
|
|
1872
1873
|
SkyYearPickerComponent,
|
|
1873
1874
|
], selector: 'sky-datepicker-calendar', changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
|
|
1874
|
-
}], ctorParameters: () => [
|
|
1875
|
+
}], ctorParameters: () => [], propDecorators: { customDates: [{
|
|
1875
1876
|
type: Input
|
|
1876
1877
|
}], isDaypickerWaiting: [{
|
|
1877
1878
|
type: Input
|
|
@@ -1949,13 +1950,21 @@ class SkyDatepickerHostService {
|
|
|
1949
1950
|
}
|
|
1950
1951
|
}
|
|
1951
1952
|
}
|
|
1952
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1953
|
-
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 }); }
|
|
1954
1955
|
}
|
|
1955
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerHostService, decorators: [{
|
|
1956
1957
|
type: Injectable
|
|
1957
1958
|
}] });
|
|
1958
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
|
+
|
|
1959
1968
|
let nextId$1 = 0;
|
|
1960
1969
|
/**
|
|
1961
1970
|
* Creates the datepicker button and calendar.
|
|
@@ -1990,7 +1999,7 @@ class SkyDatepickerComponent {
|
|
|
1990
1999
|
set calendarRef(value) {
|
|
1991
2000
|
if (value) {
|
|
1992
2001
|
this.#_calendarRef = value;
|
|
1993
|
-
this.#
|
|
2002
|
+
this.#addKeyEventListeners();
|
|
1994
2003
|
// Wait for the calendar component to render before gauging dimensions.
|
|
1995
2004
|
setTimeout(() => {
|
|
1996
2005
|
if (this.calendarRef) {
|
|
@@ -2016,6 +2025,7 @@ class SkyDatepickerComponent {
|
|
|
2016
2025
|
#customDatesSubscription;
|
|
2017
2026
|
#ngUnsubscribe;
|
|
2018
2027
|
#overlay;
|
|
2028
|
+
#overlayKeydownListener;
|
|
2019
2029
|
#overlayKeyupListener;
|
|
2020
2030
|
#_calendarRef;
|
|
2021
2031
|
#_dateFormat;
|
|
@@ -2032,8 +2042,7 @@ class SkyDatepickerComponent {
|
|
|
2032
2042
|
#zIndex;
|
|
2033
2043
|
#datepickerHostSvc;
|
|
2034
2044
|
#elementRef;
|
|
2035
|
-
constructor(
|
|
2036
|
-
this.inputBoxHostService = inputBoxHostService;
|
|
2045
|
+
constructor() {
|
|
2037
2046
|
/**
|
|
2038
2047
|
* Adds a class to the datepicker.
|
|
2039
2048
|
* @default ""
|
|
@@ -2065,23 +2074,28 @@ class SkyDatepickerComponent {
|
|
|
2065
2074
|
this.#calendarUnsubscribe = new Subject();
|
|
2066
2075
|
this.#ngUnsubscribe = new Subject();
|
|
2067
2076
|
this.#_disabled = false;
|
|
2077
|
+
this.#affixService = inject(SkyAffixService);
|
|
2068
2078
|
this.#appFormatter = inject(SkyAppFormat);
|
|
2079
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
2080
|
+
this.#coreAdapter = inject(SkyCoreAdapterService);
|
|
2069
2081
|
this.#dateFormatHintTextTemplateString = '';
|
|
2070
2082
|
this.#environmentInjector = inject(EnvironmentInjector);
|
|
2071
2083
|
this.#resourceSvc = inject(SkyLibResourcesService);
|
|
2084
|
+
this.#overlayService = inject(SkyOverlayService);
|
|
2085
|
+
this.inputBoxHostService = inject(SkyInputBoxHostService, {
|
|
2086
|
+
optional: true,
|
|
2087
|
+
});
|
|
2088
|
+
this.#zIndex = inject(SKY_STACKING_CONTEXT, {
|
|
2089
|
+
optional: true,
|
|
2090
|
+
})?.zIndex;
|
|
2072
2091
|
this.#datepickerHostSvc = inject(SkyDatepickerHostService);
|
|
2073
2092
|
this.#elementRef = inject(ElementRef);
|
|
2074
|
-
this.#affixService = affixService;
|
|
2075
|
-
this.#changeDetector = changeDetector;
|
|
2076
|
-
this.#coreAdapter = coreAdapter;
|
|
2077
|
-
this.#overlayService = overlayService;
|
|
2078
2093
|
const uniqueId = nextId$1++;
|
|
2079
2094
|
this.calendarId = `sky-datepicker-calendar-${uniqueId}`;
|
|
2080
2095
|
this.triggerButtonId = `sky-datepicker-button-${uniqueId}`;
|
|
2081
|
-
this.#zIndex = stackingContext?.zIndex;
|
|
2082
2096
|
// Update icons when theme changes.
|
|
2083
|
-
|
|
2084
|
-
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2097
|
+
inject(SkyThemeService, { optional: true })
|
|
2098
|
+
?.settingsChange.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2085
2099
|
.subscribe(() => {
|
|
2086
2100
|
this.#changeDetector.markForCheck();
|
|
2087
2101
|
});
|
|
@@ -2132,6 +2146,32 @@ class SkyDatepickerComponent {
|
|
|
2132
2146
|
this.#openPicker();
|
|
2133
2147
|
}
|
|
2134
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
|
+
}
|
|
2135
2175
|
onCalendarDateRangeChange(event) {
|
|
2136
2176
|
/* istanbul ignore else */
|
|
2137
2177
|
if (event) {
|
|
@@ -2262,7 +2302,7 @@ class SkyDatepickerComponent {
|
|
|
2262
2302
|
this.#overlay = undefined;
|
|
2263
2303
|
}
|
|
2264
2304
|
}
|
|
2265
|
-
#
|
|
2305
|
+
#addKeyEventListeners() {
|
|
2266
2306
|
const datepickerCalendarElement = this.calendarRef?.nativeElement;
|
|
2267
2307
|
if (datepickerCalendarElement) {
|
|
2268
2308
|
this.#overlayKeyupListener = fromEvent(datepickerCalendarElement, 'keyup')
|
|
@@ -2273,6 +2313,14 @@ class SkyDatepickerComponent {
|
|
|
2273
2313
|
this.#closePicker();
|
|
2274
2314
|
}
|
|
2275
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
|
+
});
|
|
2276
2324
|
}
|
|
2277
2325
|
}
|
|
2278
2326
|
#removePickerEventListeners() {
|
|
@@ -2280,6 +2328,25 @@ class SkyDatepickerComponent {
|
|
|
2280
2328
|
this.#calendarUnsubscribe.complete();
|
|
2281
2329
|
this.#calendarUnsubscribe = new Subject();
|
|
2282
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;
|
|
2283
2350
|
}
|
|
2284
2351
|
#cancelCustomDatesSubscription() {
|
|
2285
2352
|
if (this.#customDatesSubscription) {
|
|
@@ -2299,27 +2366,18 @@ class SkyDatepickerComponent {
|
|
|
2299
2366
|
}
|
|
2300
2367
|
}
|
|
2301
2368
|
}
|
|
2302
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2303
|
-
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 }); }
|
|
2304
2371
|
}
|
|
2305
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
|
|
2306
2373
|
type: Component,
|
|
2307
2374
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2308
2375
|
CommonModule,
|
|
2309
2376
|
SkyDatepickerCalendarComponent,
|
|
2310
2377
|
SkyDatetimeResourcesModule,
|
|
2311
2378
|
SkyIconModule,
|
|
2312
|
-
], 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"] }]
|
|
2313
|
-
}], ctorParameters: () => [
|
|
2314
|
-
type: Optional
|
|
2315
|
-
}] }, { type: i3.SkyThemeService, decorators: [{
|
|
2316
|
-
type: Optional
|
|
2317
|
-
}] }, { type: undefined, decorators: [{
|
|
2318
|
-
type: Optional
|
|
2319
|
-
}, {
|
|
2320
|
-
type: Inject,
|
|
2321
|
-
args: [SKY_STACKING_CONTEXT]
|
|
2322
|
-
}] }], propDecorators: { pickerClass: [{
|
|
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"] }]
|
|
2380
|
+
}], ctorParameters: () => [], propDecorators: { pickerClass: [{
|
|
2323
2381
|
type: Input
|
|
2324
2382
|
}], calendarDateRangeChange: [{
|
|
2325
2383
|
type: Output
|
|
@@ -2511,9 +2569,10 @@ class SkyDatepickerInputDirective {
|
|
|
2511
2569
|
#elementRef;
|
|
2512
2570
|
#localeProvider;
|
|
2513
2571
|
#renderer;
|
|
2572
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
2514
2573
|
#datepickerComponent;
|
|
2515
2574
|
#datepickerHostSvc;
|
|
2516
|
-
constructor(
|
|
2575
|
+
constructor() {
|
|
2517
2576
|
/**
|
|
2518
2577
|
* Whether to disable date validation on the datepicker input.
|
|
2519
2578
|
* @default false
|
|
@@ -2523,6 +2582,13 @@ class SkyDatepickerInputDirective {
|
|
|
2523
2582
|
this.#ngUnsubscribe = new Subject();
|
|
2524
2583
|
this.#_disabled = false;
|
|
2525
2584
|
this.#_strict = false;
|
|
2585
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
2586
|
+
this.#configService = inject(SkyDatepickerConfigService);
|
|
2587
|
+
this.#elementRef = inject(ElementRef);
|
|
2588
|
+
this.#localeProvider = inject(SkyAppLocaleProvider);
|
|
2589
|
+
this.#renderer = inject(Renderer2);
|
|
2590
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
2591
|
+
this.#datepickerComponent = inject(SkyDatepickerComponent, { optional: true });
|
|
2526
2592
|
this.#datepickerHostSvc = inject(SkyDatepickerHostService, {
|
|
2527
2593
|
optional: true,
|
|
2528
2594
|
});
|
|
@@ -2530,16 +2596,10 @@ class SkyDatepickerInputDirective {
|
|
|
2530
2596
|
this.#onChange = (_) => { };
|
|
2531
2597
|
// istanbul ignore next
|
|
2532
2598
|
this.#onValidatorChange = () => { };
|
|
2533
|
-
if (!datepickerComponent) {
|
|
2599
|
+
if (!this.#datepickerComponent) {
|
|
2534
2600
|
throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
|
|
2535
2601
|
'`<sky-datepicker>` component!');
|
|
2536
2602
|
}
|
|
2537
|
-
this.#changeDetector = changeDetector;
|
|
2538
|
-
this.#configService = configService;
|
|
2539
|
-
this.#elementRef = elementRef;
|
|
2540
|
-
this.#localeProvider = localeProvider;
|
|
2541
|
-
this.#renderer = renderer;
|
|
2542
|
-
this.#datepickerComponent = datepickerComponent;
|
|
2543
2603
|
this.#localeProvider
|
|
2544
2604
|
.getLocaleInfo()
|
|
2545
2605
|
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
@@ -2613,6 +2673,12 @@ class SkyDatepickerInputDirective {
|
|
|
2613
2673
|
onInput() {
|
|
2614
2674
|
this.#control?.markAsDirty();
|
|
2615
2675
|
}
|
|
2676
|
+
onKeydown(event) {
|
|
2677
|
+
if (datepickerIsSetToTodayKey(event)) {
|
|
2678
|
+
event.preventDefault();
|
|
2679
|
+
this.#datepickerComponent.selectToday();
|
|
2680
|
+
}
|
|
2681
|
+
}
|
|
2616
2682
|
writeValue(value) {
|
|
2617
2683
|
this.#updateValue(value, false);
|
|
2618
2684
|
}
|
|
@@ -2836,10 +2902,10 @@ class SkyDatepickerInputDirective {
|
|
|
2836
2902
|
}
|
|
2837
2903
|
}
|
|
2838
2904
|
}
|
|
2839
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2840
|
-
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 }); }
|
|
2841
2907
|
}
|
|
2842
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
|
|
2843
2909
|
type: Directive,
|
|
2844
2910
|
args: [{
|
|
2845
2911
|
host: {
|
|
@@ -2848,9 +2914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2848
2914
|
providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
|
|
2849
2915
|
selector: '[skyDatepickerInput]',
|
|
2850
2916
|
}]
|
|
2851
|
-
}], ctorParameters: () => [
|
|
2852
|
-
type: Optional
|
|
2853
|
-
}] }], propDecorators: { dateFormat: [{
|
|
2917
|
+
}], ctorParameters: () => [], propDecorators: { dateFormat: [{
|
|
2854
2918
|
type: Input
|
|
2855
2919
|
}], disabled: [{
|
|
2856
2920
|
type: Input
|
|
@@ -2874,6 +2938,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2874
2938
|
}], onInput: [{
|
|
2875
2939
|
type: HostListener,
|
|
2876
2940
|
args: ['input']
|
|
2941
|
+
}], onKeydown: [{
|
|
2942
|
+
type: HostListener,
|
|
2943
|
+
args: ['keydown', ['$event']]
|
|
2877
2944
|
}] } });
|
|
2878
2945
|
|
|
2879
2946
|
const SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
|
|
@@ -3026,9 +3093,10 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3026
3093
|
#elementRef;
|
|
3027
3094
|
#fuzzyDateService;
|
|
3028
3095
|
#renderer;
|
|
3096
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
3029
3097
|
#datepickerComponent;
|
|
3030
3098
|
#datepickerHostSvc;
|
|
3031
|
-
constructor(
|
|
3099
|
+
constructor() {
|
|
3032
3100
|
/**
|
|
3033
3101
|
* Whether to disable date validation on the fuzzy datepicker input.
|
|
3034
3102
|
* @default false
|
|
@@ -3039,6 +3107,13 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3039
3107
|
this.#_futureDisabled = false;
|
|
3040
3108
|
this.#_disabled = false;
|
|
3041
3109
|
this.#_yearRequired = false;
|
|
3110
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
3111
|
+
this.#configService = inject(SkyDatepickerConfigService);
|
|
3112
|
+
this.#elementRef = inject(ElementRef);
|
|
3113
|
+
this.#fuzzyDateService = inject(SkyFuzzyDateService);
|
|
3114
|
+
this.#renderer = inject(Renderer2);
|
|
3115
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
3116
|
+
this.#datepickerComponent = inject(SkyDatepickerComponent, { optional: true });
|
|
3042
3117
|
this.#datepickerHostSvc = inject(SkyDatepickerHostService, {
|
|
3043
3118
|
optional: true,
|
|
3044
3119
|
});
|
|
@@ -3046,16 +3121,11 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3046
3121
|
this.#onChange = (_) => { };
|
|
3047
3122
|
// istanbul ignore next
|
|
3048
3123
|
this.#onValidatorChange = () => { };
|
|
3049
|
-
if (!datepickerComponent) {
|
|
3124
|
+
if (!this.#datepickerComponent) {
|
|
3050
3125
|
throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
|
|
3051
3126
|
'`<sky-datepicker>` component!');
|
|
3052
3127
|
}
|
|
3053
|
-
|
|
3054
|
-
this.#configService = configService;
|
|
3055
|
-
this.#elementRef = elementRef;
|
|
3056
|
-
this.#fuzzyDateService = fuzzyDateService;
|
|
3057
|
-
this.#renderer = renderer;
|
|
3058
|
-
this.#datepickerComponent = datepickerComponent;
|
|
3128
|
+
const localeProvider = inject(SkyAppLocaleProvider);
|
|
3059
3129
|
this.#locale = localeProvider.defaultLocale;
|
|
3060
3130
|
localeProvider
|
|
3061
3131
|
.getLocaleInfo()
|
|
@@ -3123,6 +3193,12 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3123
3193
|
onInput() {
|
|
3124
3194
|
this.#control?.markAsDirty();
|
|
3125
3195
|
}
|
|
3196
|
+
onKeydown(event) {
|
|
3197
|
+
if (datepickerIsSetToTodayKey(event)) {
|
|
3198
|
+
event.preventDefault();
|
|
3199
|
+
this.#datepickerComponent.selectToday();
|
|
3200
|
+
}
|
|
3201
|
+
}
|
|
3126
3202
|
writeValue(value) {
|
|
3127
3203
|
this.#updateValue(value, false);
|
|
3128
3204
|
}
|
|
@@ -3330,13 +3406,13 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3330
3406
|
}
|
|
3331
3407
|
this.#setInputElementValue(formattedDate || '');
|
|
3332
3408
|
}
|
|
3333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3334
|
-
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: [
|
|
3335
3411
|
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
3336
3412
|
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
3337
3413
|
], ngImport: i0 }); }
|
|
3338
3414
|
}
|
|
3339
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
|
|
3340
3416
|
type: Directive,
|
|
3341
3417
|
args: [{
|
|
3342
3418
|
host: {
|
|
@@ -3348,9 +3424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
3348
3424
|
],
|
|
3349
3425
|
selector: '[skyFuzzyDatepickerInput]',
|
|
3350
3426
|
}]
|
|
3351
|
-
}], ctorParameters: () => [
|
|
3352
|
-
type: Optional
|
|
3353
|
-
}] }], propDecorators: { dateFormat: [{
|
|
3427
|
+
}], ctorParameters: () => [], propDecorators: { dateFormat: [{
|
|
3354
3428
|
type: Input
|
|
3355
3429
|
}], disabled: [{
|
|
3356
3430
|
type: Input
|
|
@@ -3377,11 +3451,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
3377
3451
|
}], onInput: [{
|
|
3378
3452
|
type: HostListener,
|
|
3379
3453
|
args: ['input']
|
|
3454
|
+
}], onKeydown: [{
|
|
3455
|
+
type: HostListener,
|
|
3456
|
+
args: ['keydown', ['$event']]
|
|
3380
3457
|
}] } });
|
|
3381
3458
|
|
|
3382
3459
|
class SkyDatepickerModule {
|
|
3383
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3384
|
-
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,
|
|
3385
3462
|
SkyDatepickerCalendarInnerComponent,
|
|
3386
3463
|
SkyDatepickerComponent,
|
|
3387
3464
|
SkyDatepickerInputDirective,
|
|
@@ -3394,7 +3471,7 @@ class SkyDatepickerModule {
|
|
|
3394
3471
|
SkyDatepickerComponent,
|
|
3395
3472
|
SkyDatepickerInputDirective,
|
|
3396
3473
|
SkyFuzzyDatepickerInputDirective] }); }
|
|
3397
|
-
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,
|
|
3398
3475
|
SkyDatepickerCalendarInnerComponent,
|
|
3399
3476
|
SkyDatepickerComponent,
|
|
3400
3477
|
SkyDayPickerButtonComponent,
|
|
@@ -3403,7 +3480,7 @@ class SkyDatepickerModule {
|
|
|
3403
3480
|
SkyMonthPickerComponent,
|
|
3404
3481
|
SkyYearPickerComponent] }); }
|
|
3405
3482
|
}
|
|
3406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDatepickerModule, decorators: [{
|
|
3407
3484
|
type: NgModule,
|
|
3408
3485
|
args: [{
|
|
3409
3486
|
imports: [
|
|
@@ -3458,10 +3535,10 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
|
|
|
3458
3535
|
}
|
|
3459
3536
|
return 'skyux_date_range_picker_before_date_label';
|
|
3460
3537
|
}
|
|
3461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3462
|
-
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" }); }
|
|
3463
3540
|
}
|
|
3464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
|
|
3465
3542
|
type: Pipe,
|
|
3466
3543
|
args: [{
|
|
3467
3544
|
name: 'skyDateRangePickerEndDateResourceKey',
|
|
@@ -3475,10 +3552,10 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
|
|
|
3475
3552
|
}
|
|
3476
3553
|
return 'skyux_date_range_picker_after_date_label';
|
|
3477
3554
|
}
|
|
3478
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3479
|
-
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" }); }
|
|
3480
3557
|
}
|
|
3481
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3558
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
|
|
3482
3559
|
type: Pipe,
|
|
3483
3560
|
args: [{
|
|
3484
3561
|
name: 'skyDateRangePickerStartDateResourceKey',
|
|
@@ -4171,10 +4248,10 @@ class SkyDateRangeService {
|
|
|
4171
4248
|
}
|
|
4172
4249
|
return calculators;
|
|
4173
4250
|
}
|
|
4174
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4175
|
-
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' }); }
|
|
4176
4253
|
}
|
|
4177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangeService, decorators: [{
|
|
4178
4255
|
type: Injectable,
|
|
4179
4256
|
args: [{
|
|
4180
4257
|
providedIn: 'root',
|
|
@@ -4541,8 +4618,8 @@ class SkyDateRangePickerComponent {
|
|
|
4541
4618
|
#createTouchedChangeSignal(control) {
|
|
4542
4619
|
return toSignal(control.events.pipe(filter((evt) => evt instanceof TouchedChangeEvent), map((evt) => evt.touched), takeUntilDestroyed(this.#destroyRef)));
|
|
4543
4620
|
}
|
|
4544
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4545
|
-
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: [
|
|
4546
4623
|
{
|
|
4547
4624
|
provide: NG_VALIDATORS,
|
|
4548
4625
|
useExisting: SkyDateRangePickerComponent,
|
|
@@ -4554,9 +4631,9 @@ class SkyDateRangePickerComponent {
|
|
|
4554
4631
|
multi: true,
|
|
4555
4632
|
},
|
|
4556
4633
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
4557
|
-
], 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$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.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$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.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: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ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: i2$3.λ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 }); }
|
|
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 }); }
|
|
4558
4635
|
}
|
|
4559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4636
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
|
|
4560
4637
|
type: Component,
|
|
4561
4638
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4562
4639
|
'(focusout)': 'onFocusout($event)',
|
|
@@ -4611,11 +4688,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
4611
4688
|
}], datepickers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SkyDatepickerComponent), { isSignal: true }] }] } });
|
|
4612
4689
|
|
|
4613
4690
|
class SkyDateRangePickerModule {
|
|
4614
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4615
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
4616
|
-
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] }); }
|
|
4617
4694
|
}
|
|
4618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4695
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
|
|
4619
4696
|
type: NgModule,
|
|
4620
4697
|
args: [{
|
|
4621
4698
|
exports: [SkyDateRangePickerComponent, SkyFormErrorModule],
|
|
@@ -4756,8 +4833,7 @@ class SkyTimepickerComponent {
|
|
|
4756
4833
|
#environmentInjector;
|
|
4757
4834
|
#overlayService;
|
|
4758
4835
|
#zIndex;
|
|
4759
|
-
constructor(
|
|
4760
|
-
this.inputBoxHostService = inputBoxHostService;
|
|
4836
|
+
constructor() {
|
|
4761
4837
|
/**
|
|
4762
4838
|
* Fires when the value in the timepicker input changes.
|
|
4763
4839
|
*/
|
|
@@ -4773,18 +4849,23 @@ class SkyTimepickerComponent {
|
|
|
4773
4849
|
this.#timepickerUnsubscribe = new Subject();
|
|
4774
4850
|
this.#ngUnsubscribe = new Subject();
|
|
4775
4851
|
this.#_disabled = false;
|
|
4852
|
+
this.#affixService = inject(SkyAffixService);
|
|
4853
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
4854
|
+
this.#coreAdapter = inject(SkyCoreAdapterService);
|
|
4776
4855
|
this.#environmentInjector = inject(EnvironmentInjector);
|
|
4777
|
-
this.#
|
|
4778
|
-
this
|
|
4779
|
-
|
|
4780
|
-
|
|
4781
|
-
this.#zIndex =
|
|
4856
|
+
this.#overlayService = inject(SkyOverlayService);
|
|
4857
|
+
this.inputBoxHostService = inject(SkyInputBoxHostService, {
|
|
4858
|
+
optional: true,
|
|
4859
|
+
});
|
|
4860
|
+
this.#zIndex = inject(SKY_STACKING_CONTEXT, {
|
|
4861
|
+
optional: true,
|
|
4862
|
+
})?.zIndex;
|
|
4782
4863
|
const uniqueId = nextId++;
|
|
4783
4864
|
this.timepickerId = `sky-timepicker-${uniqueId}`;
|
|
4784
4865
|
this.triggerButtonId = `sky-timepicker-button-${uniqueId}`;
|
|
4785
4866
|
// Update icons when theme changes.
|
|
4786
|
-
|
|
4787
|
-
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
4867
|
+
inject(SkyThemeService, { optional: true })
|
|
4868
|
+
?.settingsChange.pipe(takeUntil(this.#ngUnsubscribe))
|
|
4788
4869
|
.subscribe(() => {
|
|
4789
4870
|
this.#changeDetector.markForCheck();
|
|
4790
4871
|
});
|
|
@@ -4981,10 +5062,10 @@ class SkyTimepickerComponent {
|
|
|
4981
5062
|
/* istanbul ignore next */
|
|
4982
5063
|
this.#overlayKeyupListener?.unsubscribe();
|
|
4983
5064
|
}
|
|
4984
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4985
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", 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 }); }
|
|
4986
5067
|
}
|
|
4987
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
|
4988
5069
|
type: Component,
|
|
4989
5070
|
args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4990
5071
|
NgTemplateOutlet,
|
|
@@ -4992,17 +5073,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
4992
5073
|
SkyIconModule,
|
|
4993
5074
|
SkyThemeModule,
|
|
4994
5075
|
SkyDatetimeResourcesModule,
|
|
4995
|
-
], 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"] }]
|
|
4996
|
-
}], ctorParameters: () => [
|
|
4997
|
-
type: Optional
|
|
4998
|
-
}] }, { type: i3.SkyThemeService, decorators: [{
|
|
4999
|
-
type: Optional
|
|
5000
|
-
}] }, { type: undefined, decorators: [{
|
|
5001
|
-
type: Optional
|
|
5002
|
-
}, {
|
|
5003
|
-
type: Inject,
|
|
5004
|
-
args: [SKY_STACKING_CONTEXT]
|
|
5005
|
-
}] }], propDecorators: { selectedTimeChanged: [{
|
|
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"] }]
|
|
5077
|
+
}], ctorParameters: () => [], propDecorators: { selectedTimeChanged: [{
|
|
5006
5078
|
type: Output
|
|
5007
5079
|
}], timepickerRef: [{
|
|
5008
5080
|
type: ViewChild,
|
|
@@ -5079,8 +5151,11 @@ class SkyTimepickerInputDirective {
|
|
|
5079
5151
|
return this.#_modelValue;
|
|
5080
5152
|
}
|
|
5081
5153
|
set #modelValue(value) {
|
|
5082
|
-
|
|
5154
|
+
// A retained invalid entry must be cleaned up even when the model value is
|
|
5155
|
+
// unchanged (e.g. a form reset while `undefined` is the model value).
|
|
5156
|
+
if (value !== this.#_modelValue || this.#hasRetainedInvalidValue) {
|
|
5083
5157
|
this.#_modelValue = value;
|
|
5158
|
+
this.#hasRetainedInvalidValue = false;
|
|
5084
5159
|
this.#updateTimepickerInput();
|
|
5085
5160
|
this.#setInputValue(value);
|
|
5086
5161
|
this.#_validatorChange();
|
|
@@ -5091,14 +5166,11 @@ class SkyTimepickerInputDirective {
|
|
|
5091
5166
|
#_disabled = false;
|
|
5092
5167
|
#_modelValue;
|
|
5093
5168
|
#_skyTimepickerInput;
|
|
5094
|
-
|
|
5095
|
-
#
|
|
5096
|
-
#
|
|
5097
|
-
|
|
5098
|
-
|
|
5099
|
-
this.#elRef = elRef;
|
|
5100
|
-
this.#changeDetector = changeDetector;
|
|
5101
|
-
}
|
|
5169
|
+
// Set while an invalid entry is retained on the control instead of cleared.
|
|
5170
|
+
#hasRetainedInvalidValue = false;
|
|
5171
|
+
#renderer = inject(Renderer2);
|
|
5172
|
+
#elRef = inject(ElementRef);
|
|
5173
|
+
#changeDetector = inject(ChangeDetectorRef);
|
|
5102
5174
|
ngOnInit() {
|
|
5103
5175
|
this.#renderer.addClass(this.#elRef.nativeElement, 'sky-form-control');
|
|
5104
5176
|
this.pickerChangedSubscription =
|
|
@@ -5111,7 +5183,12 @@ class SkyTimepickerInputDirective {
|
|
|
5111
5183
|
// Watch for the control to be added and initialize the value immediately.
|
|
5112
5184
|
/* istanbul ignore else */
|
|
5113
5185
|
if (this.#control && this.#control.parent) {
|
|
5114
|
-
|
|
5186
|
+
// When an invalid entry is being retained, the raw string is already on
|
|
5187
|
+
// the control and flagged invalid by the validator; overwriting it with
|
|
5188
|
+
// the (undefined) model value would discard the entry and clear the error.
|
|
5189
|
+
if (!this.#hasRetainedInvalidValue) {
|
|
5190
|
+
this.#control.setValue(this.#modelValue, { emitEvent: false });
|
|
5191
|
+
}
|
|
5115
5192
|
this.#changeDetector.markForCheck();
|
|
5116
5193
|
}
|
|
5117
5194
|
}
|
|
@@ -5147,7 +5224,16 @@ class SkyTimepickerInputDirective {
|
|
|
5147
5224
|
this.disabled = isDisabled;
|
|
5148
5225
|
}
|
|
5149
5226
|
writeValue(value) {
|
|
5150
|
-
|
|
5227
|
+
const formatted = this.#formatter(value);
|
|
5228
|
+
// Keep invalid entries in the input instead of clearing them so the user
|
|
5229
|
+
// can see and correct their entry (matching the datepicker's behavior).
|
|
5230
|
+
if (typeof value === 'string' &&
|
|
5231
|
+
value.length > 0 &&
|
|
5232
|
+
formatted.local === 'Invalid date') {
|
|
5233
|
+
this.#applyInvalidValue(value);
|
|
5234
|
+
return;
|
|
5235
|
+
}
|
|
5236
|
+
this.#modelValue = formatted;
|
|
5151
5237
|
}
|
|
5152
5238
|
validate(control) {
|
|
5153
5239
|
if (!this.#control) {
|
|
@@ -5157,12 +5243,35 @@ class SkyTimepickerInputDirective {
|
|
|
5157
5243
|
if (!value) {
|
|
5158
5244
|
return null;
|
|
5159
5245
|
}
|
|
5246
|
+
// A raw string value only remains on the control when it could not be
|
|
5247
|
+
// parsed into a time and was retained as-is.
|
|
5248
|
+
if (typeof value === 'string') {
|
|
5249
|
+
if (this.#formatter(value).local === 'Invalid date') {
|
|
5250
|
+
// Mark as touched so the invalid CSS styles appear even when the value
|
|
5251
|
+
// is set programmatically.
|
|
5252
|
+
this.#control.markAsTouched();
|
|
5253
|
+
return { skyTime: { invalid: value } };
|
|
5254
|
+
}
|
|
5255
|
+
return null;
|
|
5256
|
+
}
|
|
5160
5257
|
/* istanbul ignore next */
|
|
5161
5258
|
if (value.local === 'Invalid date') {
|
|
5162
5259
|
return { skyTime: { invalid: control.value } };
|
|
5163
5260
|
}
|
|
5164
5261
|
return null;
|
|
5165
5262
|
}
|
|
5263
|
+
#applyInvalidValue(rawValue) {
|
|
5264
|
+
// There is no valid model value while an invalid entry is retained.
|
|
5265
|
+
this.#_modelValue = undefined;
|
|
5266
|
+
this.#hasRetainedInvalidValue = true;
|
|
5267
|
+
// Keep the user's raw entry in the input element.
|
|
5268
|
+
this.#renderer.setProperty(this.#elRef.nativeElement, 'value', rawValue);
|
|
5269
|
+
// Push the raw string to the form control and re-run validation. The
|
|
5270
|
+
// validator supplies the `skyTime` error, so we avoid calling `setErrors`
|
|
5271
|
+
// here to preserve any errors contributed by other validators.
|
|
5272
|
+
this.#_onChange(rawValue);
|
|
5273
|
+
this.#_validatorChange();
|
|
5274
|
+
}
|
|
5166
5275
|
#setInputValue(value) {
|
|
5167
5276
|
let formattedValue = '';
|
|
5168
5277
|
if (value) {
|
|
@@ -5217,16 +5326,16 @@ class SkyTimepickerInputDirective {
|
|
|
5217
5326
|
/* istanbul ignore next */
|
|
5218
5327
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5219
5328
|
#_validatorChange = () => { };
|
|
5220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5221
|
-
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 }); }
|
|
5222
5331
|
}
|
|
5223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
|
|
5224
5333
|
type: Directive,
|
|
5225
5334
|
args: [{
|
|
5226
5335
|
selector: '[skyTimepickerInput]',
|
|
5227
5336
|
providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR],
|
|
5228
5337
|
}]
|
|
5229
|
-
}],
|
|
5338
|
+
}], propDecorators: { skyTimepickerInput: [{
|
|
5230
5339
|
type: Input
|
|
5231
5340
|
}], hostTimepickerInput: [{
|
|
5232
5341
|
type: HostBinding,
|
|
@@ -5246,14 +5355,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
5246
5355
|
}] } });
|
|
5247
5356
|
|
|
5248
5357
|
class SkyTimepickerModule {
|
|
5249
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
5250
|
-
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,
|
|
5251
5360
|
SkyTimepickerInputDirective,
|
|
5252
5361
|
SkyTimepickerComponent], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] }); }
|
|
5253
|
-
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,
|
|
5254
5363
|
SkyTimepickerComponent] }); }
|
|
5255
5364
|
}
|
|
5256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
5365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyTimepickerModule, decorators: [{
|
|
5257
5366
|
type: NgModule,
|
|
5258
5367
|
args: [{
|
|
5259
5368
|
imports: [
|