@skyux/datetime 7.4.2 → 7.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +70 -70
- package/esm2020/lib/modules/date-pipe/date-format-utility.mjs +3 -1
- package/esm2020/lib/modules/date-range-picker/date-range-picker.component.mjs +7 -7
- package/esm2020/lib/modules/date-range-picker/types/date-range-calculation.mjs +1 -1
- package/esm2020/lib/modules/date-range-picker/types/date-range-calculator-type.mjs +2 -2
- package/esm2020/lib/modules/date-range-picker/types/date-range-calculator.mjs +2 -2
- package/esm2020/lib/modules/date-range-picker/types/date-range.mjs +1 -1
- package/esm2020/lib/modules/datepicker/datepicker-calendar-change.mjs +1 -1
- package/esm2020/lib/modules/datepicker/datepicker-calendar-inner.component.mjs +2 -2
- package/esm2020/lib/modules/datepicker/datepicker-config.service.mjs +2 -2
- package/esm2020/lib/modules/datepicker/datepicker-custom-date.mjs +1 -1
- package/esm2020/lib/modules/datepicker/datepicker-input-fuzzy.directive.mjs +10 -10
- package/esm2020/lib/modules/datepicker/datepicker-input.directive.mjs +9 -9
- package/esm2020/lib/modules/datepicker/datepicker.component.mjs +6 -6
- package/esm2020/lib/modules/datepicker/datepicker.service.mjs +2 -2
- package/esm2020/lib/modules/datepicker/daypicker-button.component.mjs +1 -1
- package/esm2020/lib/modules/datepicker/daypicker-cell.component.mjs +1 -1
- package/esm2020/lib/modules/datepicker/fuzzy-date.mjs +1 -1
- package/esm2020/lib/modules/datepicker/fuzzy-date.service.mjs +2 -2
- package/esm2020/lib/modules/timepicker/timepicker.component.mjs +10 -10
- package/esm2020/lib/modules/timepicker/timepicker.directive.mjs +3 -3
- package/esm2020/lib/modules/timepicker/timepicker.interface.mjs +1 -1
- package/fesm2015/skyux-datetime.mjs +47 -45
- package/fesm2015/skyux-datetime.mjs.map +1 -1
- package/fesm2020/skyux-datetime.mjs +47 -45
- package/fesm2020/skyux-datetime.mjs.map +1 -1
- package/lib/modules/date-range-picker/date-range-picker.component.d.ts +6 -6
- package/lib/modules/date-range-picker/types/date-range-calculation.d.ts +1 -1
- package/lib/modules/date-range-picker/types/date-range-calculator-type.d.ts +1 -1
- package/lib/modules/date-range-picker/types/date-range-calculator.d.ts +4 -4
- package/lib/modules/date-range-picker/types/date-range.d.ts +2 -2
- package/lib/modules/datepicker/datepicker-calendar-change.d.ts +1 -1
- package/lib/modules/datepicker/datepicker-config.service.d.ts +4 -4
- package/lib/modules/datepicker/datepicker-custom-date.d.ts +2 -2
- package/lib/modules/datepicker/datepicker-input-fuzzy.directive.d.ts +8 -8
- package/lib/modules/datepicker/datepicker-input.directive.d.ts +7 -7
- package/lib/modules/datepicker/datepicker.service.d.ts +1 -1
- package/lib/modules/datepicker/daypicker-button.component.d.ts +1 -1
- package/lib/modules/datepicker/daypicker-cell.component.d.ts +2 -2
- package/lib/modules/datepicker/fuzzy-date.d.ts +3 -3
- package/lib/modules/timepicker/timepicker.component.d.ts +1 -1
- package/lib/modules/timepicker/timepicker.directive.d.ts +3 -3
- package/lib/modules/timepicker/timepicker.interface.d.ts +7 -7
- package/package.json +8 -8
|
@@ -23,6 +23,7 @@ import { SkyThemeModule } from '@skyux/theme';
|
|
|
23
23
|
|
|
24
24
|
// This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
|
|
25
25
|
class SkyDateFormatUtility {
|
|
26
|
+
/* spell-checker:enable */
|
|
26
27
|
static format(locale, value, pattern) {
|
|
27
28
|
let date;
|
|
28
29
|
if (isBlank(value) || value !== value) {
|
|
@@ -45,6 +46,7 @@ class SkyDateFormatUtility {
|
|
|
45
46
|
return SkyIntlDateFormatter.format(date, locale, SkyDateFormatUtility._ALIASES[pattern] || pattern);
|
|
46
47
|
}
|
|
47
48
|
}
|
|
49
|
+
/* spell-checker:disable */
|
|
48
50
|
SkyDateFormatUtility._ALIASES = {
|
|
49
51
|
medium: 'yMMMdjms',
|
|
50
52
|
short: 'yMdjm',
|
|
@@ -551,7 +553,7 @@ _SkyFuzzyDateService_currentLocale = new WeakMap(), _SkyFuzzyDateService_ngUnsub
|
|
|
551
553
|
}, _SkyFuzzyDateService_getMonthNumber = function _SkyFuzzyDateService_getMonthNumber(month) {
|
|
552
554
|
let returnValue;
|
|
553
555
|
const monthAsNumber = parseInt(month, 10);
|
|
554
|
-
// If the month component is a string ("
|
|
556
|
+
// If the month component is a string ("January"), we check to see if it is a valid month
|
|
555
557
|
if (isNaN(monthAsNumber)) {
|
|
556
558
|
if (!moment(month, 'MMMM').isValid()) {
|
|
557
559
|
return;
|
|
@@ -704,7 +706,7 @@ var _SkyDateRangeCalculator_instances, _SkyDateRangeCalculator_config, _SkyDateR
|
|
|
704
706
|
class SkyDateRangeCalculator {
|
|
705
707
|
constructor(
|
|
706
708
|
/**
|
|
707
|
-
*
|
|
709
|
+
* The calculator ID that specifies calculator objects that represent date ranges.
|
|
708
710
|
*/
|
|
709
711
|
calculatorId, config) {
|
|
710
712
|
this.calculatorId = calculatorId;
|
|
@@ -868,7 +870,7 @@ var SkyDateRangeCalculatorId;
|
|
|
868
870
|
})(SkyDateRangeCalculatorId || (SkyDateRangeCalculatorId = {}));
|
|
869
871
|
|
|
870
872
|
/**
|
|
871
|
-
*
|
|
873
|
+
* The types of calculations available for a date range calculator.
|
|
872
874
|
*/
|
|
873
875
|
var SkyDateRangeCalculatorType;
|
|
874
876
|
(function (SkyDateRangeCalculatorType) {
|
|
@@ -1152,7 +1154,7 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1152
1154
|
select(date, isManual = true) {
|
|
1153
1155
|
this.activeDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
1154
1156
|
/*
|
|
1155
|
-
Only actually select date if in
|
|
1157
|
+
Only actually select date if in minMode (day picker mode).
|
|
1156
1158
|
Otherwise, just change the active view for the datepicker.
|
|
1157
1159
|
*/
|
|
1158
1160
|
if (this.datepickerMode === this.minMode) {
|
|
@@ -1280,7 +1282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
1280
1282
|
class SkyDatepickerConfigService {
|
|
1281
1283
|
constructor() {
|
|
1282
1284
|
/**
|
|
1283
|
-
*
|
|
1285
|
+
* The starting day of the week in the calendar,
|
|
1284
1286
|
* where `0` sets the starting day to Sunday.
|
|
1285
1287
|
* @default 0
|
|
1286
1288
|
*/
|
|
@@ -1302,7 +1304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
1302
1304
|
class SkyDatepickerService {
|
|
1303
1305
|
constructor() {
|
|
1304
1306
|
/**
|
|
1305
|
-
*
|
|
1307
|
+
* Whether a key date popover is currently displayed.
|
|
1306
1308
|
* Useful for communicating across all daypicker siblings when a popover is displayed.
|
|
1307
1309
|
*/
|
|
1308
1310
|
this.keyDatePopoverStream = new Subject();
|
|
@@ -1899,7 +1901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
1899
1901
|
}]
|
|
1900
1902
|
}] } });
|
|
1901
1903
|
|
|
1902
|
-
var _SkyDatepickerComponent_instances, _SkyDatepickerComponent_affixer, _SkyDatepickerComponent_calendarUnsubscribe, _SkyDatepickerComponent_customDatesSubscription, _SkyDatepickerComponent_ngUnsubscribe, _SkyDatepickerComponent_overlay,
|
|
1904
|
+
var _SkyDatepickerComponent_instances, _SkyDatepickerComponent_affixer, _SkyDatepickerComponent_calendarUnsubscribe, _SkyDatepickerComponent_customDatesSubscription, _SkyDatepickerComponent_ngUnsubscribe, _SkyDatepickerComponent_overlay, _SkyDatepickerComponent_overlayKeydownListener, _SkyDatepickerComponent__calendarRef, _SkyDatepickerComponent__disabled, _SkyDatepickerComponent__selectedDate, _SkyDatepickerComponent_affixService, _SkyDatepickerComponent_changeDetector, _SkyDatepickerComponent_coreAdapter, _SkyDatepickerComponent_overlayService, _SkyDatepickerComponent_closePicker, _SkyDatepickerComponent_openPicker, _SkyDatepickerComponent_createAffixer, _SkyDatepickerComponent_destroyAffixer, _SkyDatepickerComponent_createOverlay, _SkyDatepickerComponent_destroyOverlay, _SkyDatepickerComponent_addKeydownListener, _SkyDatepickerComponent_removePickerEventListeners, _SkyDatepickerComponent_cancelCustomDatesSubscription;
|
|
1903
1905
|
let nextId$1 = 0;
|
|
1904
1906
|
/**
|
|
1905
1907
|
* Creates the datepicker button and calendar.
|
|
@@ -1929,7 +1931,7 @@ class SkyDatepickerComponent {
|
|
|
1929
1931
|
_SkyDatepickerComponent_customDatesSubscription.set(this, void 0);
|
|
1930
1932
|
_SkyDatepickerComponent_ngUnsubscribe.set(this, new Subject());
|
|
1931
1933
|
_SkyDatepickerComponent_overlay.set(this, void 0);
|
|
1932
|
-
|
|
1934
|
+
_SkyDatepickerComponent_overlayKeydownListener.set(this, void 0);
|
|
1933
1935
|
_SkyDatepickerComponent__calendarRef.set(this, void 0);
|
|
1934
1936
|
_SkyDatepickerComponent__disabled.set(this, false);
|
|
1935
1937
|
_SkyDatepickerComponent__selectedDate.set(this, void 0);
|
|
@@ -2061,7 +2063,7 @@ class SkyDatepickerComponent {
|
|
|
2061
2063
|
}
|
|
2062
2064
|
}
|
|
2063
2065
|
}
|
|
2064
|
-
_SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calendarUnsubscribe = new WeakMap(), _SkyDatepickerComponent_customDatesSubscription = new WeakMap(), _SkyDatepickerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepickerComponent_overlay = new WeakMap(),
|
|
2066
|
+
_SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calendarUnsubscribe = new WeakMap(), _SkyDatepickerComponent_customDatesSubscription = new WeakMap(), _SkyDatepickerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepickerComponent_overlay = new WeakMap(), _SkyDatepickerComponent_overlayKeydownListener = new WeakMap(), _SkyDatepickerComponent__calendarRef = new WeakMap(), _SkyDatepickerComponent__disabled = new WeakMap(), _SkyDatepickerComponent__selectedDate = new WeakMap(), _SkyDatepickerComponent_affixService = new WeakMap(), _SkyDatepickerComponent_changeDetector = new WeakMap(), _SkyDatepickerComponent_coreAdapter = new WeakMap(), _SkyDatepickerComponent_overlayService = new WeakMap(), _SkyDatepickerComponent_instances = new WeakSet(), _SkyDatepickerComponent_closePicker = function _SkyDatepickerComponent_closePicker() {
|
|
2065
2067
|
var _a;
|
|
2066
2068
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
|
|
2067
2069
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyOverlay).call(this);
|
|
@@ -2127,7 +2129,7 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
|
|
|
2127
2129
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_overlay, undefined, "f");
|
|
2128
2130
|
}
|
|
2129
2131
|
}, _SkyDatepickerComponent_addKeydownListener = function _SkyDatepickerComponent_addKeydownListener() {
|
|
2130
|
-
__classPrivateFieldSet(this,
|
|
2132
|
+
__classPrivateFieldSet(this, _SkyDatepickerComponent_overlayKeydownListener, fromEvent(window.document, 'keydown')
|
|
2131
2133
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f")))
|
|
2132
2134
|
.subscribe((event) => {
|
|
2133
2135
|
var _a;
|
|
@@ -2141,7 +2143,7 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
|
|
|
2141
2143
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f").next();
|
|
2142
2144
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f").complete();
|
|
2143
2145
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_calendarUnsubscribe, new Subject(), "f");
|
|
2144
|
-
(_a = __classPrivateFieldGet(this,
|
|
2146
|
+
(_a = __classPrivateFieldGet(this, _SkyDatepickerComponent_overlayKeydownListener, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
2145
2147
|
}, _SkyDatepickerComponent_cancelCustomDatesSubscription = function _SkyDatepickerComponent_cancelCustomDatesSubscription() {
|
|
2146
2148
|
if (__classPrivateFieldGet(this, _SkyDatepickerComponent_customDatesSubscription, "f")) {
|
|
2147
2149
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_customDatesSubscription, "f").unsubscribe();
|
|
@@ -2210,7 +2212,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2210
2212
|
constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, resourcesService, datepickerComponent) {
|
|
2211
2213
|
_SkyFuzzyDatepickerInputDirective_instances.add(this);
|
|
2212
2214
|
/**
|
|
2213
|
-
*
|
|
2215
|
+
* Whether to disable date validation on the fuzzy datepicker input.
|
|
2214
2216
|
* @default false
|
|
2215
2217
|
*/
|
|
2216
2218
|
this.skyDatepickerNoValidate = false;
|
|
@@ -2265,7 +2267,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2265
2267
|
});
|
|
2266
2268
|
}
|
|
2267
2269
|
/**
|
|
2268
|
-
*
|
|
2270
|
+
* The date format for the input. Place this attribute on the `input` element
|
|
2269
2271
|
* to override the default in `SkyDatepickerConfigService`.
|
|
2270
2272
|
* @default "MM/DD/YYYY"
|
|
2271
2273
|
*/
|
|
@@ -2284,7 +2286,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2284
2286
|
__classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat, "f"));
|
|
2285
2287
|
}
|
|
2286
2288
|
/**
|
|
2287
|
-
*
|
|
2289
|
+
* Whether to disable the datepicker.
|
|
2288
2290
|
* @default false
|
|
2289
2291
|
*/
|
|
2290
2292
|
set disabled(value) {
|
|
@@ -2296,7 +2298,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2296
2298
|
return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__disabled, "f");
|
|
2297
2299
|
}
|
|
2298
2300
|
/**
|
|
2299
|
-
*
|
|
2301
|
+
* Whether to prevent users from specifying dates that are in the future.
|
|
2300
2302
|
* Place this attribute on the `input` element.
|
|
2301
2303
|
* @default false
|
|
2302
2304
|
*/
|
|
@@ -2308,7 +2310,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2308
2310
|
return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__futureDisabled, "f");
|
|
2309
2311
|
}
|
|
2310
2312
|
/**
|
|
2311
|
-
*
|
|
2313
|
+
* The latest fuzzy date allowed. Place this attribute on the `input` element
|
|
2312
2314
|
* to prevent fuzzy dates after a specified date. This property accepts
|
|
2313
2315
|
* a `SkyFuzzyDate` value that includes numeric month, day, and year values.
|
|
2314
2316
|
* For example: `{ month: 1, day: 1, year: 2027 }`.
|
|
@@ -2322,7 +2324,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2322
2324
|
return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__maxDate, "f");
|
|
2323
2325
|
}
|
|
2324
2326
|
/**
|
|
2325
|
-
*
|
|
2327
|
+
* The earliest fuzzy date allowed. Place this attribute on the `input` element
|
|
2326
2328
|
* to prevent fuzzy dates before a specified date. This property accepts a `SkyFuzzyDate` value
|
|
2327
2329
|
* that includes numeric month, day, and year values.
|
|
2328
2330
|
* For example: `{ month: 1, day: 1, year: 2007 }`.
|
|
@@ -2336,7 +2338,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2336
2338
|
return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__minDate, "f");
|
|
2337
2339
|
}
|
|
2338
2340
|
/**
|
|
2339
|
-
*
|
|
2341
|
+
* The starting day of the week in the calendar, where `0` sets the starting day
|
|
2340
2342
|
* to Sunday. Place this attribute on the `input` element to override the default
|
|
2341
2343
|
* in `SkyDatepickerConfigService`.
|
|
2342
2344
|
* @default 0
|
|
@@ -2351,7 +2353,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2351
2353
|
return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__startingDay, "f") || __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_configService, "f").startingDay;
|
|
2352
2354
|
}
|
|
2353
2355
|
/**
|
|
2354
|
-
*
|
|
2356
|
+
* Whether to require the year in fuzzy dates.
|
|
2355
2357
|
* @default false
|
|
2356
2358
|
*/
|
|
2357
2359
|
set yearRequired(value) {
|
|
@@ -2391,7 +2393,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2391
2393
|
}
|
|
2392
2394
|
ngAfterViewInit() {
|
|
2393
2395
|
// This is needed to address a bug in Angular 4.
|
|
2394
|
-
// When a control value is set
|
|
2396
|
+
// When a control value is set initially, its value is not represented on the view.
|
|
2395
2397
|
// See: https://github.com/angular/angular/issues/13792
|
|
2396
2398
|
// Of note is the parent check which allows us to determine if the form is reactive.
|
|
2397
2399
|
// Without this check there is a changed before checked error
|
|
@@ -2667,7 +2669,7 @@ class SkyDatepickerInputDirective {
|
|
|
2667
2669
|
constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
|
|
2668
2670
|
_SkyDatepickerInputDirective_instances.add(this);
|
|
2669
2671
|
/**
|
|
2670
|
-
*
|
|
2672
|
+
* Whether to disable date validation on the datepicker input.
|
|
2671
2673
|
* @default false
|
|
2672
2674
|
*/
|
|
2673
2675
|
this.skyDatepickerNoValidate = false;
|
|
@@ -2724,7 +2726,7 @@ class SkyDatepickerInputDirective {
|
|
|
2724
2726
|
});
|
|
2725
2727
|
}
|
|
2726
2728
|
/**
|
|
2727
|
-
*
|
|
2729
|
+
* The date format for the input. Place this attribute on the `input` element
|
|
2728
2730
|
* to override the default in the `SkyDatepickerConfigService`.
|
|
2729
2731
|
* @default "MM/DD/YYYY"
|
|
2730
2732
|
*/
|
|
@@ -2742,7 +2744,7 @@ class SkyDatepickerInputDirective {
|
|
|
2742
2744
|
__classPrivateFieldGet(this, _SkyDatepickerInputDirective_preferredShortDateFormat, "f"));
|
|
2743
2745
|
}
|
|
2744
2746
|
/**
|
|
2745
|
-
*
|
|
2747
|
+
* Whether to disable the datepicker.
|
|
2746
2748
|
* @default false
|
|
2747
2749
|
*/
|
|
2748
2750
|
set disabled(value) {
|
|
@@ -2754,7 +2756,7 @@ class SkyDatepickerInputDirective {
|
|
|
2754
2756
|
return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__disabled, "f");
|
|
2755
2757
|
}
|
|
2756
2758
|
/**
|
|
2757
|
-
*
|
|
2759
|
+
* The latest date that is available in the calendar. Place this attribute on
|
|
2758
2760
|
* the `input` element to override the default in `SkyDatepickerConfigService`.
|
|
2759
2761
|
*/
|
|
2760
2762
|
set maxDate(value) {
|
|
@@ -2767,7 +2769,7 @@ class SkyDatepickerInputDirective {
|
|
|
2767
2769
|
return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__maxDate, "f") || __classPrivateFieldGet(this, _SkyDatepickerInputDirective_configService, "f").maxDate;
|
|
2768
2770
|
}
|
|
2769
2771
|
/**
|
|
2770
|
-
*
|
|
2772
|
+
* The earliest date that is available in the calendar. Place this attribute on
|
|
2771
2773
|
* the `input` element to override the default in `SkyDatepickerConfigService`. To avoid validation errors, the time associated with the minimum date must be midnight. This is necessary because the datepicker automatically sets the time on the `Date` object for selected dates to midnight in the current user's time zone.
|
|
2772
2774
|
*/
|
|
2773
2775
|
set minDate(value) {
|
|
@@ -2795,7 +2797,7 @@ class SkyDatepickerInputDirective {
|
|
|
2795
2797
|
}
|
|
2796
2798
|
}
|
|
2797
2799
|
/**
|
|
2798
|
-
*
|
|
2800
|
+
* The starting day of the week in the calendar, where `0` sets the starting day
|
|
2799
2801
|
* to Sunday. Place this attribute on the `input` element to override the default
|
|
2800
2802
|
* in `SkyDatepickerConfigService`.
|
|
2801
2803
|
* @default 0
|
|
@@ -2810,7 +2812,7 @@ class SkyDatepickerInputDirective {
|
|
|
2810
2812
|
return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__startingDay, "f") || __classPrivateFieldGet(this, _SkyDatepickerInputDirective_configService, "f").startingDay;
|
|
2811
2813
|
}
|
|
2812
2814
|
/**
|
|
2813
|
-
*
|
|
2815
|
+
* Whether the format of the date value must match the format from the `dateFormat` value.
|
|
2814
2816
|
* If this property is `true` and the datepicker input directive cannot find an exact match, then
|
|
2815
2817
|
* the input is marked as invalid.
|
|
2816
2818
|
* If this property is `false` and the datepicker input directive cannot find an exact match, then
|
|
@@ -2847,7 +2849,7 @@ class SkyDatepickerInputDirective {
|
|
|
2847
2849
|
}
|
|
2848
2850
|
ngAfterViewInit() {
|
|
2849
2851
|
// This is needed to address a bug in Angular 4.
|
|
2850
|
-
// When a control value is set
|
|
2852
|
+
// When a control value is set initially, its value is not represented on the view.
|
|
2851
2853
|
// See: https://github.com/angular/angular/issues/13792
|
|
2852
2854
|
// Of note is the parent check which allows us to determine if the form is reactive.
|
|
2853
2855
|
// Without this check there is a changed before checked error
|
|
@@ -3757,12 +3759,12 @@ class SkyDateRangePickerComponent {
|
|
|
3757
3759
|
constructor(changeDetector, dateRangeService, formBuilder, localeProvider, ngZone, themeSvc) {
|
|
3758
3760
|
_SkyDateRangePickerComponent_instances.add(this);
|
|
3759
3761
|
/**
|
|
3760
|
-
*
|
|
3762
|
+
* Whether to require users to specify a start date.
|
|
3761
3763
|
* @default false
|
|
3762
3764
|
*/
|
|
3763
3765
|
this.startDateRequired = false;
|
|
3764
3766
|
/**
|
|
3765
|
-
*
|
|
3767
|
+
* Whether to require users to specify a end date.
|
|
3766
3768
|
* @default false
|
|
3767
3769
|
*/
|
|
3768
3770
|
this.endDateRequired = false;
|
|
@@ -3835,7 +3837,7 @@ class SkyDateRangePickerComponent {
|
|
|
3835
3837
|
});
|
|
3836
3838
|
}
|
|
3837
3839
|
/**
|
|
3838
|
-
*
|
|
3840
|
+
* IDs for the date range options to include in the picker's dropdown.
|
|
3839
3841
|
* The options specify calculator objects that return two `Date` objects to represent date ranges.
|
|
3840
3842
|
* By default, this property includes all `SkyDateRangeCalculatorId` values.
|
|
3841
3843
|
*/
|
|
@@ -3869,7 +3871,7 @@ class SkyDateRangePickerComponent {
|
|
|
3869
3871
|
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__calculatorIds, "f");
|
|
3870
3872
|
}
|
|
3871
3873
|
/**
|
|
3872
|
-
*
|
|
3874
|
+
* The date format for
|
|
3873
3875
|
* [the `sky-datepicker` components](https://developer.blackbaud.com/skyux/components/datepicker)
|
|
3874
3876
|
* that make up the date range picker. The text input is a composite component of
|
|
3875
3877
|
* up to two `sky-datepicker` components.
|
|
@@ -3883,7 +3885,7 @@ class SkyDateRangePickerComponent {
|
|
|
3883
3885
|
return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__dateFormat, "f");
|
|
3884
3886
|
}
|
|
3885
3887
|
/**
|
|
3886
|
-
*
|
|
3888
|
+
* Whether to disable the date range picker.
|
|
3887
3889
|
* @default false
|
|
3888
3890
|
*/
|
|
3889
3891
|
set disabled(value) {
|
|
@@ -3921,7 +3923,7 @@ class SkyDateRangePickerComponent {
|
|
|
3921
3923
|
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_setValue).call(this, newValue, false);
|
|
3922
3924
|
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_resetFormGroupValue).call(this);
|
|
3923
3925
|
// This is needed to address a bug in Angular 4.
|
|
3924
|
-
// When a control value is set
|
|
3926
|
+
// When a control value is set initially, its value is not represented on the view.
|
|
3925
3927
|
// See: https://github.com/angular/angular/issues/13792
|
|
3926
3928
|
/* istanbul ignore else */
|
|
3927
3929
|
if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent_control, "f")) {
|
|
@@ -4250,7 +4252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
4250
4252
|
}]
|
|
4251
4253
|
}] });
|
|
4252
4254
|
|
|
4253
|
-
var _SkyTimepickerComponent_instances, _SkyTimepickerComponent_affixer, _SkyTimepickerComponent_timepickerUnsubscribe, _SkyTimepickerComponent_ngUnsubscribe, _SkyTimepickerComponent_overlay,
|
|
4255
|
+
var _SkyTimepickerComponent_instances, _SkyTimepickerComponent_affixer, _SkyTimepickerComponent_timepickerUnsubscribe, _SkyTimepickerComponent_ngUnsubscribe, _SkyTimepickerComponent_overlay, _SkyTimepickerComponent_overlayKeydownListener, _SkyTimepickerComponent__disabled, _SkyTimepickerComponent__timepickerRef, _SkyTimepickerComponent_affixService, _SkyTimepickerComponent_changeDetector, _SkyTimepickerComponent_coreAdapter, _SkyTimepickerComponent_overlayService, _SkyTimepickerComponent_closePicker, _SkyTimepickerComponent_openPicker, _SkyTimepickerComponent_createAffixer, _SkyTimepickerComponent_destroyAffixer, _SkyTimepickerComponent_createOverlay, _SkyTimepickerComponent_destroyOverlay, _SkyTimepickerComponent_addKeydownListener, _SkyTimepickerComponent_removePickerEventListeners;
|
|
4254
4256
|
let nextId = 0;
|
|
4255
4257
|
/**
|
|
4256
4258
|
* Creates a SKY UX-themed replacement for the HTML `input` element with `type="time"`.
|
|
@@ -4278,7 +4280,7 @@ class SkyTimepickerComponent {
|
|
|
4278
4280
|
_SkyTimepickerComponent_timepickerUnsubscribe.set(this, new Subject());
|
|
4279
4281
|
_SkyTimepickerComponent_ngUnsubscribe.set(this, new Subject());
|
|
4280
4282
|
_SkyTimepickerComponent_overlay.set(this, void 0);
|
|
4281
|
-
|
|
4283
|
+
_SkyTimepickerComponent_overlayKeydownListener.set(this, void 0);
|
|
4282
4284
|
_SkyTimepickerComponent__disabled.set(this, false);
|
|
4283
4285
|
_SkyTimepickerComponent__timepickerRef.set(this, void 0);
|
|
4284
4286
|
_SkyTimepickerComponent_affixService.set(this, void 0);
|
|
@@ -4383,7 +4385,7 @@ class SkyTimepickerComponent {
|
|
|
4383
4385
|
set timepickerRef(value) {
|
|
4384
4386
|
if (value) {
|
|
4385
4387
|
__classPrivateFieldSet(this, _SkyTimepickerComponent__timepickerRef, value, "f");
|
|
4386
|
-
// Wait for the timepicker component to render before
|
|
4388
|
+
// Wait for the timepicker component to render before gauging dimensions.
|
|
4387
4389
|
setTimeout(() => {
|
|
4388
4390
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
|
|
4389
4391
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_createAffixer).call(this);
|
|
@@ -4462,7 +4464,7 @@ class SkyTimepickerComponent {
|
|
|
4462
4464
|
this.localeFormat = data.localeFormat;
|
|
4463
4465
|
this.minuteMultiplier = data.minuteMultiplier;
|
|
4464
4466
|
}
|
|
4465
|
-
|
|
4467
|
+
onCloseButtonClick() {
|
|
4466
4468
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_closePicker).call(this);
|
|
4467
4469
|
}
|
|
4468
4470
|
setTime(event) {
|
|
@@ -4487,7 +4489,7 @@ class SkyTimepickerComponent {
|
|
|
4487
4489
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_openPicker).call(this);
|
|
4488
4490
|
}
|
|
4489
4491
|
}
|
|
4490
|
-
_SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepickerUnsubscribe = new WeakMap(), _SkyTimepickerComponent_ngUnsubscribe = new WeakMap(), _SkyTimepickerComponent_overlay = new WeakMap(),
|
|
4492
|
+
_SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepickerUnsubscribe = new WeakMap(), _SkyTimepickerComponent_ngUnsubscribe = new WeakMap(), _SkyTimepickerComponent_overlay = new WeakMap(), _SkyTimepickerComponent_overlayKeydownListener = new WeakMap(), _SkyTimepickerComponent__disabled = new WeakMap(), _SkyTimepickerComponent__timepickerRef = new WeakMap(), _SkyTimepickerComponent_affixService = new WeakMap(), _SkyTimepickerComponent_changeDetector = new WeakMap(), _SkyTimepickerComponent_coreAdapter = new WeakMap(), _SkyTimepickerComponent_overlayService = new WeakMap(), _SkyTimepickerComponent_instances = new WeakSet(), _SkyTimepickerComponent_closePicker = function _SkyTimepickerComponent_closePicker() {
|
|
4491
4493
|
var _a;
|
|
4492
4494
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
|
|
4493
4495
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyOverlay).call(this);
|
|
@@ -4552,7 +4554,7 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
|
|
|
4552
4554
|
__classPrivateFieldSet(this, _SkyTimepickerComponent_overlay, undefined, "f");
|
|
4553
4555
|
}
|
|
4554
4556
|
}, _SkyTimepickerComponent_addKeydownListener = function _SkyTimepickerComponent_addKeydownListener() {
|
|
4555
|
-
__classPrivateFieldSet(this,
|
|
4557
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_overlayKeydownListener, fromEvent(window.document, 'keydown')
|
|
4556
4558
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f")))
|
|
4557
4559
|
.subscribe((event) => {
|
|
4558
4560
|
var _a;
|
|
@@ -4571,13 +4573,13 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
|
|
|
4571
4573
|
__classPrivateFieldSet(this, _SkyTimepickerComponent_timepickerUnsubscribe, new Subject(), "f");
|
|
4572
4574
|
}
|
|
4573
4575
|
/* istanbul ignore next */
|
|
4574
|
-
(_a = __classPrivateFieldGet(this,
|
|
4576
|
+
(_a = __classPrivateFieldGet(this, _SkyTimepickerComponent_overlayKeydownListener, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
4575
4577
|
};
|
|
4576
4578
|
SkyTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$1.SkyInputBoxHostService, optional: true }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4577
|
-
SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"clock\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n #timepickerRef\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n <li *ngFor=\"let hour of hours\">\n <button\n name=\"hour\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n <li *ngFor=\"let minute of minutes\">\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n </ol>\n </section>\n <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"
|
|
4579
|
+
SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"clock\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n #timepickerRef\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n <li *ngFor=\"let hour of hours\">\n <button\n name=\"hour\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n <li *ngFor=\"let minute of minutes\">\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n </ol>\n </section>\n <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"onCloseButtonClick()\"\n >\n {{ 'skyux_timepicker_close' | skyLibResources }}\n </button>\n </section>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4578
4580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
|
4579
4581
|
type: Component,
|
|
4580
|
-
args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"clock\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n #timepickerRef\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n <li *ngFor=\"let hour of hours\">\n <button\n name=\"hour\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n <li *ngFor=\"let minute of minutes\">\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n </ol>\n </section>\n <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"
|
|
4582
|
+
args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n <ng-container *ngIf=\"!inputBoxHostService\">\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n </div>\n </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n aria-haspopup=\"dialog\"\n class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n type=\"button\"\n [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n #triggerButtonRef\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n icon=\"clock\"\n size=\"lg\"\n iconType=\"skyux\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n role=\"dialog\"\n [attr.aria-labelledby]=\"triggerButtonId\"\n [attr.id]=\"timepickerId\"\n [class.sky-timepicker-hidden]=\"!isVisible\"\n #timepickerRef\n >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n <li *ngFor=\"let hour of hours\">\n <button\n name=\"hour\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n (click)=\"setTime($event)\"\n >\n {{ hour }}\n </button>\n </li>\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n <li *ngFor=\"let minute of minutes\">\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n </ol>\n </section>\n <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n <ol>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n (click)=\"setTime($event)\"\n >\n AM\n </button>\n </li>\n <li>\n <button\n name=\"meridie\"\n type=\"button\"\n [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n (click)=\"setTime($event)\"\n >\n PM\n </button>\n </li>\n </ol>\n </section>\n </div>\n <div class=\"sky-timepicker-footer\">\n <section class=\"sky-timepicker-column\">\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"onCloseButtonClick()\"\n >\n {{ 'skyux_timepicker_close' | skyLibResources }}\n </button>\n </section>\n </div>\n </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"] }]
|
|
4581
4583
|
}], ctorParameters: function () {
|
|
4582
4584
|
return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
|
|
4583
4585
|
type: Optional
|
|
@@ -4668,7 +4670,7 @@ class SkyTimepickerInputDirective {
|
|
|
4668
4670
|
}
|
|
4669
4671
|
// TODO: In a future breaking change - make this more specific than "string"
|
|
4670
4672
|
/**
|
|
4671
|
-
*
|
|
4673
|
+
* The 12-hour `hh` or 24-hour `HH` time format for the input.
|
|
4672
4674
|
* @default "hh"
|
|
4673
4675
|
*/
|
|
4674
4676
|
set timeFormat(value) {
|
|
@@ -4678,7 +4680,7 @@ class SkyTimepickerInputDirective {
|
|
|
4678
4680
|
return __classPrivateFieldGet(this, _SkyTimepickerInputDirective__timeFormat, "f");
|
|
4679
4681
|
}
|
|
4680
4682
|
/**
|
|
4681
|
-
*
|
|
4683
|
+
* Whether to disable the timepicker.
|
|
4682
4684
|
* @default false
|
|
4683
4685
|
*/
|
|
4684
4686
|
get disabled() {
|