@skyux/datetime 15.0.0-alpha.0 → 15.0.0-alpha.2
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 +196 -209
- package/fesm2022/skyux-datetime.mjs.map +1 -1
- package/package.json +12 -12
- package/types/skyux-datetime.d.ts +45 -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';
|
|
@@ -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.0.
|
|
232
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
233
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
230
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
231
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] }); }
|
|
232
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatetimeResourcesModule, imports: [SkyI18nModule] }); }
|
|
234
233
|
}
|
|
235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
318
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
317
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateService, providedIn: 'root' }); }
|
|
319
318
|
}
|
|
320
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
382
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.
|
|
380
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
381
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyDatePipe, isStandalone: true, name: "skyDate", pure: false }); }
|
|
383
382
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
788
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
787
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
788
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' }); }
|
|
789
789
|
}
|
|
790
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
790
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
831
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.
|
|
831
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
832
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyFuzzyDatePipe, isStandalone: true, name: "skyFuzzyDate", pure: false }); }
|
|
832
833
|
}
|
|
833
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
834
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
843
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
844
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
843
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
844
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyDatePipeModule, imports: [SkyDatetimeResourcesModule, SkyDatePipe, SkyFuzzyDatePipe], exports: [SkyDatePipe, SkyFuzzyDatePipe] }); }
|
|
845
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [SkyDatetimeResourcesModule] }); }
|
|
845
846
|
}
|
|
846
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.6", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
903
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' }); }
|
|
904
|
+
}
|
|
905
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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,10 +1258,10 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1238
1258
|
}
|
|
1239
1259
|
return undefined;
|
|
1240
1260
|
}
|
|
1241
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
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.0.6", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1262
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkyDatepickerCalendarInnerComponent, isStandalone: true, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "@if (datepickerMode) {\n <div class=\"sky-datepicker-calendar-inner\">\n <div class=\"sky-datepicker-calendar-header\">\n <span class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-btn-previous\"\n [attr.aria-label]=\"previousLabel\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" iconName=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <!-- display: inline -->\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-calendar-title\"\n [id]=\"datepickerId + '-title'\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-link': 'modern'\n }\"\n (click)=\"toggleModeCalendar($event)\"\n >{{ title }}</button\n >\n </span>\n <span class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-btn-next\"\n [attr.aria-label]=\"nextLabel\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" iconName=\"chevron-right\" />\n </button>\n </span>\n </div>\n <ng-content />\n </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-button-box-shadow-focus: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-month-year-button-width: auto;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-title-font-weight: 12px;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-header-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-right)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-comp-datepicker-calendar-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-right)) var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-calendar-space-inset-bottom)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{font-size:var(--sky-override-datepicker-title-font-weight, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-default));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-link{color:var(--sky-color-text-default);padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-comp-datepicker-m_y_button-space-inset-top) var(--sky-comp-datepicker-m_y_button-space-inset-right) var(--sky-comp-datepicker-m_y_button-space-inset-bottom) var(--sky-comp-datepicker-m_y_button-space-inset-left))}sky-yearpicker td{width:var(--sky-override-datepicker-month-year-button-width, 20%)}sky-monthpicker td{width:var(--sky-override-datepicker-month-year-button-width, 33%)}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1243
1263
|
}
|
|
1244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
|
|
1245
1265
|
type: Component,
|
|
1246
1266
|
args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule, SkyIconModule, SkyThemeModule], selector: 'sky-datepicker-inner', changeDetection: ChangeDetectionStrategy.Eager, template: "@if (datepickerMode) {\n <div class=\"sky-datepicker-calendar-inner\">\n <div class=\"sky-datepicker-calendar-header\">\n <span class=\"sky-datepicker-header-left\">\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-btn-previous\"\n [attr.aria-label]=\"previousLabel\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"moveCalendar($event, -1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" iconName=\"chevron-left\" />\n </button>\n </span>\n <span class=\"sky-datepicker-header-center\">\n <!-- display: inline -->\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-calendar-title\"\n [id]=\"datepickerId + '-title'\"\n [disabled]=\"datepickerMode === maxMode\"\n [ngClass]=\"{\n 'sky-btn-disabled': datepickerMode === maxMode\n }\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-link': 'modern'\n }\"\n (click)=\"toggleModeCalendar($event)\"\n >{{ title }}</button\n >\n </span>\n <span class=\"sky-datepicker-header-right\">\n <button\n type=\"button\"\n class=\"sky-btn sky-datepicker-btn-next\"\n [attr.aria-label]=\"nextLabel\"\n [skyThemeClass]=\"{\n 'sky-btn-default sky-btn-sm': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"moveCalendar($event, 1)\"\n >\n <sky-icon class=\"sky-datepicker-chevron\" iconName=\"chevron-right\" />\n </button>\n </span>\n </div>\n <ng-content />\n </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-button-box-shadow-focus: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-month-year-button-width: auto;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-title-font-weight: 12px;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-header-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-right)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-comp-datepicker-calendar-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-right)) var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-calendar-space-inset-bottom)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{font-size:var(--sky-override-datepicker-title-font-weight, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-default));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-link{color:var(--sky-color-text-default);padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-comp-datepicker-m_y_button-space-inset-top) var(--sky-comp-datepicker-m_y_button-space-inset-right) var(--sky-comp-datepicker-m_y_button-space-inset-bottom) var(--sky-comp-datepicker-m_y_button-space-inset-left))}sky-yearpicker td{width:var(--sky-override-datepicker-month-year-button-width, 20%)}sky-monthpicker td{width:var(--sky-override-datepicker-month-year-button-width, 33%)}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"] }]
|
|
1247
1267
|
}], propDecorators: { customDates: [{
|
|
@@ -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.0.
|
|
1278
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
1297
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerCalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1298
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerCalendarService }); }
|
|
1279
1299
|
}
|
|
1280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1300
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
1310
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.
|
|
1329
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1330
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, isStandalone: true, name: "skyDatepickerCalendarLabel" }); }
|
|
1311
1331
|
}
|
|
1312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
1327
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1346
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1347
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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.0.
|
|
1349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
1415
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1434
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDayPickerCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1435
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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.0.
|
|
1437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
1623
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1642
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDayPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1643
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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.0.
|
|
1645
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
1703
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1722
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyMonthPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1723
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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.0.
|
|
1725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
1784
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1803
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyYearPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1804
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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.0.
|
|
1806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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.0.
|
|
1864
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1864
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1865
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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.0.
|
|
1867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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,10 +1950,10 @@ class SkyDatepickerHostService {
|
|
|
1949
1950
|
}
|
|
1950
1951
|
}
|
|
1951
1952
|
}
|
|
1952
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1953
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
1953
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1954
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerHostService }); }
|
|
1954
1955
|
}
|
|
1955
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1956
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerHostService, decorators: [{
|
|
1956
1957
|
type: Injectable
|
|
1957
1958
|
}] });
|
|
1958
1959
|
|
|
@@ -2032,8 +2033,7 @@ class SkyDatepickerComponent {
|
|
|
2032
2033
|
#zIndex;
|
|
2033
2034
|
#datepickerHostSvc;
|
|
2034
2035
|
#elementRef;
|
|
2035
|
-
constructor(
|
|
2036
|
-
this.inputBoxHostService = inputBoxHostService;
|
|
2036
|
+
constructor() {
|
|
2037
2037
|
/**
|
|
2038
2038
|
* Adds a class to the datepicker.
|
|
2039
2039
|
* @default ""
|
|
@@ -2065,23 +2065,28 @@ class SkyDatepickerComponent {
|
|
|
2065
2065
|
this.#calendarUnsubscribe = new Subject();
|
|
2066
2066
|
this.#ngUnsubscribe = new Subject();
|
|
2067
2067
|
this.#_disabled = false;
|
|
2068
|
+
this.#affixService = inject(SkyAffixService);
|
|
2068
2069
|
this.#appFormatter = inject(SkyAppFormat);
|
|
2070
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
2071
|
+
this.#coreAdapter = inject(SkyCoreAdapterService);
|
|
2069
2072
|
this.#dateFormatHintTextTemplateString = '';
|
|
2070
2073
|
this.#environmentInjector = inject(EnvironmentInjector);
|
|
2071
2074
|
this.#resourceSvc = inject(SkyLibResourcesService);
|
|
2075
|
+
this.#overlayService = inject(SkyOverlayService);
|
|
2076
|
+
this.inputBoxHostService = inject(SkyInputBoxHostService, {
|
|
2077
|
+
optional: true,
|
|
2078
|
+
});
|
|
2079
|
+
this.#zIndex = inject(SKY_STACKING_CONTEXT, {
|
|
2080
|
+
optional: true,
|
|
2081
|
+
})?.zIndex;
|
|
2072
2082
|
this.#datepickerHostSvc = inject(SkyDatepickerHostService);
|
|
2073
2083
|
this.#elementRef = inject(ElementRef);
|
|
2074
|
-
this.#affixService = affixService;
|
|
2075
|
-
this.#changeDetector = changeDetector;
|
|
2076
|
-
this.#coreAdapter = coreAdapter;
|
|
2077
|
-
this.#overlayService = overlayService;
|
|
2078
2084
|
const uniqueId = nextId$1++;
|
|
2079
2085
|
this.calendarId = `sky-datepicker-calendar-${uniqueId}`;
|
|
2080
2086
|
this.triggerButtonId = `sky-datepicker-button-${uniqueId}`;
|
|
2081
|
-
this.#zIndex = stackingContext?.zIndex;
|
|
2082
2087
|
// Update icons when theme changes.
|
|
2083
|
-
|
|
2084
|
-
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2088
|
+
inject(SkyThemeService, { optional: true })
|
|
2089
|
+
?.settingsChange.pipe(takeUntil(this.#ngUnsubscribe))
|
|
2085
2090
|
.subscribe(() => {
|
|
2086
2091
|
this.#changeDetector.markForCheck();
|
|
2087
2092
|
});
|
|
@@ -2299,10 +2304,10 @@ class SkyDatepickerComponent {
|
|
|
2299
2304
|
}
|
|
2300
2305
|
}
|
|
2301
2306
|
}
|
|
2302
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
2303
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
2307
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2308
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 >\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
2309
|
}
|
|
2305
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
2310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
|
|
2306
2311
|
type: Component,
|
|
2307
2312
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2308
2313
|
CommonModule,
|
|
@@ -2310,16 +2315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2310
2315
|
SkyDatetimeResourcesModule,
|
|
2311
2316
|
SkyIconModule,
|
|
2312
2317
|
], providers: [SkyDatepickerHostService], selector: 'sky-datepicker', template: "<div class=\"sky-datepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n #triggerButtonRef\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? calendarId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"\n inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_datepicker_trigger_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n >\n <sky-icon iconName=\"calendar-ltr\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n <div\n #calendarRef\n class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"calendarId\"\n [class.sky-datepicker-hidden]=\"!isVisible\"\n >\n <sky-datepicker-calendar\n cdkTrapFocus\n [customDates]=\"customDates\"\n [isDaypickerWaiting]=\"isDaypickerWaiting\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [startAtDate]=\"startAtDate\"\n [startingDay]=\"startingDay\"\n (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n (calendarModeChange)=\"onCalendarModeChange()\"\n (selectedDateChange)=\"onSelectedDateChange($event)\"\n />\n </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"] }]
|
|
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: [{
|
|
2318
|
+
}], ctorParameters: () => [], propDecorators: { pickerClass: [{
|
|
2323
2319
|
type: Input
|
|
2324
2320
|
}], calendarDateRangeChange: [{
|
|
2325
2321
|
type: Output
|
|
@@ -2511,9 +2507,10 @@ class SkyDatepickerInputDirective {
|
|
|
2511
2507
|
#elementRef;
|
|
2512
2508
|
#localeProvider;
|
|
2513
2509
|
#renderer;
|
|
2510
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
2514
2511
|
#datepickerComponent;
|
|
2515
2512
|
#datepickerHostSvc;
|
|
2516
|
-
constructor(
|
|
2513
|
+
constructor() {
|
|
2517
2514
|
/**
|
|
2518
2515
|
* Whether to disable date validation on the datepicker input.
|
|
2519
2516
|
* @default false
|
|
@@ -2523,6 +2520,13 @@ class SkyDatepickerInputDirective {
|
|
|
2523
2520
|
this.#ngUnsubscribe = new Subject();
|
|
2524
2521
|
this.#_disabled = false;
|
|
2525
2522
|
this.#_strict = false;
|
|
2523
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
2524
|
+
this.#configService = inject(SkyDatepickerConfigService);
|
|
2525
|
+
this.#elementRef = inject(ElementRef);
|
|
2526
|
+
this.#localeProvider = inject(SkyAppLocaleProvider);
|
|
2527
|
+
this.#renderer = inject(Renderer2);
|
|
2528
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
2529
|
+
this.#datepickerComponent = inject(SkyDatepickerComponent, { optional: true });
|
|
2526
2530
|
this.#datepickerHostSvc = inject(SkyDatepickerHostService, {
|
|
2527
2531
|
optional: true,
|
|
2528
2532
|
});
|
|
@@ -2530,16 +2534,10 @@ class SkyDatepickerInputDirective {
|
|
|
2530
2534
|
this.#onChange = (_) => { };
|
|
2531
2535
|
// istanbul ignore next
|
|
2532
2536
|
this.#onValidatorChange = () => { };
|
|
2533
|
-
if (!datepickerComponent) {
|
|
2537
|
+
if (!this.#datepickerComponent) {
|
|
2534
2538
|
throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
|
|
2535
2539
|
'`<sky-datepicker>` component!');
|
|
2536
2540
|
}
|
|
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
2541
|
this.#localeProvider
|
|
2544
2542
|
.getLocaleInfo()
|
|
2545
2543
|
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
@@ -2836,10 +2834,10 @@ class SkyDatepickerInputDirective {
|
|
|
2836
2834
|
}
|
|
2837
2835
|
}
|
|
2838
2836
|
}
|
|
2839
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
2840
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.
|
|
2837
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2838
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", 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()" } }, providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR], ngImport: i0 }); }
|
|
2841
2839
|
}
|
|
2842
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
2840
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
|
|
2843
2841
|
type: Directive,
|
|
2844
2842
|
args: [{
|
|
2845
2843
|
host: {
|
|
@@ -2848,9 +2846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2848
2846
|
providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
|
|
2849
2847
|
selector: '[skyDatepickerInput]',
|
|
2850
2848
|
}]
|
|
2851
|
-
}], ctorParameters: () => [
|
|
2852
|
-
type: Optional
|
|
2853
|
-
}] }], propDecorators: { dateFormat: [{
|
|
2849
|
+
}], ctorParameters: () => [], propDecorators: { dateFormat: [{
|
|
2854
2850
|
type: Input
|
|
2855
2851
|
}], disabled: [{
|
|
2856
2852
|
type: Input
|
|
@@ -3026,9 +3022,10 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3026
3022
|
#elementRef;
|
|
3027
3023
|
#fuzzyDateService;
|
|
3028
3024
|
#renderer;
|
|
3025
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
3029
3026
|
#datepickerComponent;
|
|
3030
3027
|
#datepickerHostSvc;
|
|
3031
|
-
constructor(
|
|
3028
|
+
constructor() {
|
|
3032
3029
|
/**
|
|
3033
3030
|
* Whether to disable date validation on the fuzzy datepicker input.
|
|
3034
3031
|
* @default false
|
|
@@ -3039,6 +3036,13 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3039
3036
|
this.#_futureDisabled = false;
|
|
3040
3037
|
this.#_disabled = false;
|
|
3041
3038
|
this.#_yearRequired = false;
|
|
3039
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
3040
|
+
this.#configService = inject(SkyDatepickerConfigService);
|
|
3041
|
+
this.#elementRef = inject(ElementRef);
|
|
3042
|
+
this.#fuzzyDateService = inject(SkyFuzzyDateService);
|
|
3043
|
+
this.#renderer = inject(Renderer2);
|
|
3044
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
3045
|
+
this.#datepickerComponent = inject(SkyDatepickerComponent, { optional: true });
|
|
3042
3046
|
this.#datepickerHostSvc = inject(SkyDatepickerHostService, {
|
|
3043
3047
|
optional: true,
|
|
3044
3048
|
});
|
|
@@ -3046,16 +3050,11 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3046
3050
|
this.#onChange = (_) => { };
|
|
3047
3051
|
// istanbul ignore next
|
|
3048
3052
|
this.#onValidatorChange = () => { };
|
|
3049
|
-
if (!datepickerComponent) {
|
|
3053
|
+
if (!this.#datepickerComponent) {
|
|
3050
3054
|
throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
|
|
3051
3055
|
'`<sky-datepicker>` component!');
|
|
3052
3056
|
}
|
|
3053
|
-
|
|
3054
|
-
this.#configService = configService;
|
|
3055
|
-
this.#elementRef = elementRef;
|
|
3056
|
-
this.#fuzzyDateService = fuzzyDateService;
|
|
3057
|
-
this.#renderer = renderer;
|
|
3058
|
-
this.#datepickerComponent = datepickerComponent;
|
|
3057
|
+
const localeProvider = inject(SkyAppLocaleProvider);
|
|
3059
3058
|
this.#locale = localeProvider.defaultLocale;
|
|
3060
3059
|
localeProvider
|
|
3061
3060
|
.getLocaleInfo()
|
|
@@ -3330,13 +3329,13 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
3330
3329
|
}
|
|
3331
3330
|
this.#setInputElementValue(formattedDate || '');
|
|
3332
3331
|
}
|
|
3333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
3334
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.
|
|
3332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3333
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", 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()" } }, providers: [
|
|
3335
3334
|
SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
|
|
3336
3335
|
SKY_FUZZY_DATEPICKER_VALIDATOR,
|
|
3337
3336
|
], ngImport: i0 }); }
|
|
3338
3337
|
}
|
|
3339
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
3338
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
|
|
3340
3339
|
type: Directive,
|
|
3341
3340
|
args: [{
|
|
3342
3341
|
host: {
|
|
@@ -3348,9 +3347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
3348
3347
|
],
|
|
3349
3348
|
selector: '[skyFuzzyDatepickerInput]',
|
|
3350
3349
|
}]
|
|
3351
|
-
}], ctorParameters: () => [
|
|
3352
|
-
type: Optional
|
|
3353
|
-
}] }], propDecorators: { dateFormat: [{
|
|
3350
|
+
}], ctorParameters: () => [], propDecorators: { dateFormat: [{
|
|
3354
3351
|
type: Input
|
|
3355
3352
|
}], disabled: [{
|
|
3356
3353
|
type: Input
|
|
@@ -3380,8 +3377,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
3380
3377
|
}] } });
|
|
3381
3378
|
|
|
3382
3379
|
class SkyDatepickerModule {
|
|
3383
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
3384
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
3380
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3381
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerModule, imports: [SkyDatepickerCalendarComponent,
|
|
3385
3382
|
SkyDatepickerCalendarInnerComponent,
|
|
3386
3383
|
SkyDatepickerComponent,
|
|
3387
3384
|
SkyDatepickerInputDirective,
|
|
@@ -3394,7 +3391,7 @@ class SkyDatepickerModule {
|
|
|
3394
3391
|
SkyDatepickerComponent,
|
|
3395
3392
|
SkyDatepickerInputDirective,
|
|
3396
3393
|
SkyFuzzyDatepickerInputDirective] }); }
|
|
3397
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
3394
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerCalendarService], imports: [SkyDatepickerCalendarComponent,
|
|
3398
3395
|
SkyDatepickerCalendarInnerComponent,
|
|
3399
3396
|
SkyDatepickerComponent,
|
|
3400
3397
|
SkyDayPickerButtonComponent,
|
|
@@ -3403,7 +3400,7 @@ class SkyDatepickerModule {
|
|
|
3403
3400
|
SkyMonthPickerComponent,
|
|
3404
3401
|
SkyYearPickerComponent] }); }
|
|
3405
3402
|
}
|
|
3406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
3403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDatepickerModule, decorators: [{
|
|
3407
3404
|
type: NgModule,
|
|
3408
3405
|
args: [{
|
|
3409
3406
|
imports: [
|
|
@@ -3458,10 +3455,10 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
|
|
|
3458
3455
|
}
|
|
3459
3456
|
return 'skyux_date_range_picker_before_date_label';
|
|
3460
3457
|
}
|
|
3461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
3462
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.
|
|
3458
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3459
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, isStandalone: true, name: "skyDateRangePickerEndDateResourceKey" }); }
|
|
3463
3460
|
}
|
|
3464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
3461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
|
|
3465
3462
|
type: Pipe,
|
|
3466
3463
|
args: [{
|
|
3467
3464
|
name: 'skyDateRangePickerEndDateResourceKey',
|
|
@@ -3475,10 +3472,10 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
|
|
|
3475
3472
|
}
|
|
3476
3473
|
return 'skyux_date_range_picker_after_date_label';
|
|
3477
3474
|
}
|
|
3478
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
3479
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.
|
|
3475
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3476
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, isStandalone: true, name: "skyDateRangePickerStartDateResourceKey" }); }
|
|
3480
3477
|
}
|
|
3481
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
3478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
|
|
3482
3479
|
type: Pipe,
|
|
3483
3480
|
args: [{
|
|
3484
3481
|
name: 'skyDateRangePickerStartDateResourceKey',
|
|
@@ -4171,10 +4168,10 @@ class SkyDateRangeService {
|
|
|
4171
4168
|
}
|
|
4172
4169
|
return calculators;
|
|
4173
4170
|
}
|
|
4174
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
4175
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
4171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4172
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangeService, providedIn: 'root' }); }
|
|
4176
4173
|
}
|
|
4177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
4174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangeService, decorators: [{
|
|
4178
4175
|
type: Injectable,
|
|
4179
4176
|
args: [{
|
|
4180
4177
|
providedIn: 'root',
|
|
@@ -4541,8 +4538,8 @@ class SkyDateRangePickerComponent {
|
|
|
4541
4538
|
#createTouchedChangeSignal(control) {
|
|
4542
4539
|
return toSignal(control.events.pipe(filter((evt) => evt instanceof TouchedChangeEvent), map((evt) => evt.touched), takeUntilDestroyed(this.#destroyRef)));
|
|
4543
4540
|
}
|
|
4544
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
4545
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
4541
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4542
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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
4543
|
{
|
|
4547
4544
|
provide: NG_VALIDATORS,
|
|
4548
4545
|
useExisting: SkyDateRangePickerComponent,
|
|
@@ -4554,9 +4551,9 @@ class SkyDateRangePickerComponent {
|
|
|
4554
4551
|
multi: true,
|
|
4555
4552
|
},
|
|
4556
4553
|
{ 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 }); }
|
|
4554
|
+
], 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
4555
|
}
|
|
4559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
4556
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
|
|
4560
4557
|
type: Component,
|
|
4561
4558
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4562
4559
|
'(focusout)': 'onFocusout($event)',
|
|
@@ -4611,11 +4608,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
4611
4608
|
}], datepickers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SkyDatepickerComponent), { isSignal: true }] }] } });
|
|
4612
4609
|
|
|
4613
4610
|
class SkyDateRangePickerModule {
|
|
4614
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
4615
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
4616
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
4611
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4612
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerModule, imports: [SkyDateRangePickerComponent], exports: [SkyDateRangePickerComponent, SkyFormErrorModule] }); }
|
|
4613
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerModule, imports: [SkyDateRangePickerComponent, SkyFormErrorModule] }); }
|
|
4617
4614
|
}
|
|
4618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
4615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
|
|
4619
4616
|
type: NgModule,
|
|
4620
4617
|
args: [{
|
|
4621
4618
|
exports: [SkyDateRangePickerComponent, SkyFormErrorModule],
|
|
@@ -4756,8 +4753,7 @@ class SkyTimepickerComponent {
|
|
|
4756
4753
|
#environmentInjector;
|
|
4757
4754
|
#overlayService;
|
|
4758
4755
|
#zIndex;
|
|
4759
|
-
constructor(
|
|
4760
|
-
this.inputBoxHostService = inputBoxHostService;
|
|
4756
|
+
constructor() {
|
|
4761
4757
|
/**
|
|
4762
4758
|
* Fires when the value in the timepicker input changes.
|
|
4763
4759
|
*/
|
|
@@ -4773,18 +4769,23 @@ class SkyTimepickerComponent {
|
|
|
4773
4769
|
this.#timepickerUnsubscribe = new Subject();
|
|
4774
4770
|
this.#ngUnsubscribe = new Subject();
|
|
4775
4771
|
this.#_disabled = false;
|
|
4772
|
+
this.#affixService = inject(SkyAffixService);
|
|
4773
|
+
this.#changeDetector = inject(ChangeDetectorRef);
|
|
4774
|
+
this.#coreAdapter = inject(SkyCoreAdapterService);
|
|
4776
4775
|
this.#environmentInjector = inject(EnvironmentInjector);
|
|
4777
|
-
this.#
|
|
4778
|
-
this
|
|
4779
|
-
|
|
4780
|
-
|
|
4781
|
-
this.#zIndex =
|
|
4776
|
+
this.#overlayService = inject(SkyOverlayService);
|
|
4777
|
+
this.inputBoxHostService = inject(SkyInputBoxHostService, {
|
|
4778
|
+
optional: true,
|
|
4779
|
+
});
|
|
4780
|
+
this.#zIndex = inject(SKY_STACKING_CONTEXT, {
|
|
4781
|
+
optional: true,
|
|
4782
|
+
})?.zIndex;
|
|
4782
4783
|
const uniqueId = nextId++;
|
|
4783
4784
|
this.timepickerId = `sky-timepicker-${uniqueId}`;
|
|
4784
4785
|
this.triggerButtonId = `sky-timepicker-button-${uniqueId}`;
|
|
4785
4786
|
// Update icons when theme changes.
|
|
4786
|
-
|
|
4787
|
-
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
4787
|
+
inject(SkyThemeService, { optional: true })
|
|
4788
|
+
?.settingsChange.pipe(takeUntil(this.#ngUnsubscribe))
|
|
4788
4789
|
.subscribe(() => {
|
|
4789
4790
|
this.#changeDetector.markForCheck();
|
|
4790
4791
|
});
|
|
@@ -4981,10 +4982,10 @@ class SkyTimepickerComponent {
|
|
|
4981
4982
|
/* istanbul ignore next */
|
|
4982
4983
|
this.#overlayKeyupListener?.unsubscribe();
|
|
4983
4984
|
}
|
|
4984
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
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 }); }
|
|
4985
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SkyTimepickerComponent, isStandalone: true, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n #triggerButtonRef\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n >\n <sky-icon iconName=\"clock\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n #timepickerRef\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column sky-timepicker-column-hours\"\n [class.sky-timepicker-24hour-hours]=\"is8601\"\n >\n <ol>\n @for (hour of hours; track hour) {\n <li>\n <button\n name=\"hour\"\n type=\"button\"\n [class.sky-btn-active]=\"selectedHour === hour\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n }\n </ol>\n </section>\n <section\n class=\"sky-timepicker-column sky-timepicker-column-minutes\"\n [class.sky-timepicker-24hour-minutes]=\"is8601\"\n >\n <ol>\n @for (minute of minutes; track minute) {\n <li>\n <button\n name=\"minute\"\n type=\"button\"\n [class.sky-btn-active]=\"highlightMinute(selectedMinute, minute)\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n }\n </ol>\n </section>\n @if (!is8601) {\n <section class=\"sky-timepicker-column sky-timepicker-column-meridies\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [class.sky-btn-active]=\"selectedMeridies === 'AM'\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [class.sky-btn-active]=\"selectedMeridies === 'PM'\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n }\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"onCloseButtonClick()\"\n >\n {{ 'skyux_timepicker_close' | skyLibResources }}\n </button>\n </section>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-timepicker-container:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-box-shadow: none;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-height: 100%;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-button-width: 100%;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s))}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-container-base) solid var(--sky-color-border-container-base));column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, auto) var(--sky-override-timepicker-button-padding-horizontal, auto);width:var(--sky-override-timepicker-button-width, var(--sky-size-picker_btn));height:var(--sky-override-timepicker-button-height, var(--sky-size-picker_btn))}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active):not(:active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-column-meridies ol li button,.sky-timepicker-column.sky-timepicker-24hour-minutes ol li button{height:100%}.sky-timepicker-column.sky-timepicker-24hour-hours ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour-hours ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-comp-timepicker-content-space-inset-top) var(--sky-comp-timepicker-content-space-inset-right) var(--sky-comp-timepicker-content-space-inset-bottom) var(--sky-comp-timepicker-content-space-inset-left));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-top)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-right)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-bottom)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-left))}.sky-timepicker-footer .sky-timepicker-column{width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4986
4987
|
}
|
|
4987
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
4988
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
|
4988
4989
|
type: Component,
|
|
4989
4990
|
args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4990
4991
|
NgTemplateOutlet,
|
|
@@ -4993,16 +4994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
4993
4994
|
SkyThemeModule,
|
|
4994
4995
|
SkyDatetimeResourcesModule,
|
|
4995
4996
|
], template: "<div class=\"sky-timepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n #triggerButtonRef\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n >\n <sky-icon iconName=\"clock\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n #timepickerRef\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column sky-timepicker-column-hours\"\n [class.sky-timepicker-24hour-hours]=\"is8601\"\n >\n <ol>\n @for (hour of hours; track hour) {\n <li>\n <button\n name=\"hour\"\n type=\"button\"\n [class.sky-btn-active]=\"selectedHour === hour\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n }\n </ol>\n </section>\n <section\n class=\"sky-timepicker-column sky-timepicker-column-minutes\"\n [class.sky-timepicker-24hour-minutes]=\"is8601\"\n >\n <ol>\n @for (minute of minutes; track minute) {\n <li>\n <button\n name=\"minute\"\n type=\"button\"\n [class.sky-btn-active]=\"highlightMinute(selectedMinute, minute)\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n }\n </ol>\n </section>\n @if (!is8601) {\n <section class=\"sky-timepicker-column sky-timepicker-column-meridies\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [class.sky-btn-active]=\"selectedMeridies === 'AM'\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [class.sky-btn-active]=\"selectedMeridies === 'PM'\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n }\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"onCloseButtonClick()\"\n >\n {{ 'skyux_timepicker_close' | skyLibResources }}\n </button>\n </section>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-timepicker-container:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-box-shadow: none;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-height: 100%;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-button-width: 100%;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s))}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-container-base) solid var(--sky-color-border-container-base));column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, auto) var(--sky-override-timepicker-button-padding-horizontal, auto);width:var(--sky-override-timepicker-button-width, var(--sky-size-picker_btn));height:var(--sky-override-timepicker-button-height, var(--sky-size-picker_btn))}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active):not(:active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-column-meridies ol li button,.sky-timepicker-column.sky-timepicker-24hour-minutes ol li button{height:100%}.sky-timepicker-column.sky-timepicker-24hour-hours ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour-hours ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-comp-timepicker-content-space-inset-top) var(--sky-comp-timepicker-content-space-inset-right) var(--sky-comp-timepicker-content-space-inset-bottom) var(--sky-comp-timepicker-content-space-inset-left));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-top)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-right)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-bottom)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-left))}.sky-timepicker-footer .sky-timepicker-column{width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}\n"] }]
|
|
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: [{
|
|
4997
|
+
}], ctorParameters: () => [], propDecorators: { selectedTimeChanged: [{
|
|
5006
4998
|
type: Output
|
|
5007
4999
|
}], timepickerRef: [{
|
|
5008
5000
|
type: ViewChild,
|
|
@@ -5091,14 +5083,9 @@ class SkyTimepickerInputDirective {
|
|
|
5091
5083
|
#_disabled = false;
|
|
5092
5084
|
#_modelValue;
|
|
5093
5085
|
#_skyTimepickerInput;
|
|
5094
|
-
#renderer;
|
|
5095
|
-
#elRef;
|
|
5096
|
-
#changeDetector;
|
|
5097
|
-
constructor(renderer, elRef, changeDetector) {
|
|
5098
|
-
this.#renderer = renderer;
|
|
5099
|
-
this.#elRef = elRef;
|
|
5100
|
-
this.#changeDetector = changeDetector;
|
|
5101
|
-
}
|
|
5086
|
+
#renderer = inject(Renderer2);
|
|
5087
|
+
#elRef = inject(ElementRef);
|
|
5088
|
+
#changeDetector = inject(ChangeDetectorRef);
|
|
5102
5089
|
ngOnInit() {
|
|
5103
5090
|
this.#renderer.addClass(this.#elRef.nativeElement, 'sky-form-control');
|
|
5104
5091
|
this.pickerChangedSubscription =
|
|
@@ -5217,16 +5204,16 @@ class SkyTimepickerInputDirective {
|
|
|
5217
5204
|
/* istanbul ignore next */
|
|
5218
5205
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
5219
5206
|
#_validatorChange = () => { };
|
|
5220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
5221
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.
|
|
5207
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTimepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5208
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", 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
5209
|
}
|
|
5223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
5210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
|
|
5224
5211
|
type: Directive,
|
|
5225
5212
|
args: [{
|
|
5226
5213
|
selector: '[skyTimepickerInput]',
|
|
5227
5214
|
providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR],
|
|
5228
5215
|
}]
|
|
5229
|
-
}],
|
|
5216
|
+
}], propDecorators: { skyTimepickerInput: [{
|
|
5230
5217
|
type: Input
|
|
5231
5218
|
}], hostTimepickerInput: [{
|
|
5232
5219
|
type: HostBinding,
|
|
@@ -5246,14 +5233,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
5246
5233
|
}] } });
|
|
5247
5234
|
|
|
5248
5235
|
class SkyTimepickerModule {
|
|
5249
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
5250
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
5236
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5237
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SkyTimepickerModule, imports: [SkyDatetimeResourcesModule,
|
|
5251
5238
|
SkyTimepickerInputDirective,
|
|
5252
5239
|
SkyTimepickerComponent], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] }); }
|
|
5253
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
5240
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTimepickerModule, imports: [SkyDatetimeResourcesModule,
|
|
5254
5241
|
SkyTimepickerComponent] }); }
|
|
5255
5242
|
}
|
|
5256
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
5243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyTimepickerModule, decorators: [{
|
|
5257
5244
|
type: NgModule,
|
|
5258
5245
|
args: [{
|
|
5259
5246
|
imports: [
|