@skyux/datetime 7.4.1 → 7.5.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 +2 -2
- package/esm2020/lib/modules/date-pipe/date-format-utility.mjs +3 -1
- package/esm2020/lib/modules/date-range-picker/date-range-picker.component.mjs +2 -2
- package/esm2020/lib/modules/datepicker/datepicker-calendar-inner.component.mjs +2 -2
- package/esm2020/lib/modules/datepicker/datepicker-input-fuzzy.directive.mjs +2 -2
- package/esm2020/lib/modules/datepicker/datepicker-input.directive.mjs +2 -2
- package/esm2020/lib/modules/datepicker/datepicker.component.mjs +6 -6
- package/esm2020/lib/modules/datepicker/fuzzy-date.service.mjs +2 -2
- package/esm2020/lib/modules/timepicker/timepicker.component.mjs +10 -10
- package/fesm2015/skyux-datetime.mjs +21 -19
- package/fesm2015/skyux-datetime.mjs.map +1 -1
- package/fesm2020/skyux-datetime.mjs +21 -19
- package/fesm2020/skyux-datetime.mjs.map +1 -1
- package/lib/modules/timepicker/timepicker.component.d.ts +1 -1
- 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',
|
|
@@ -550,7 +552,7 @@ _SkyFuzzyDateService_currentLocale = new WeakMap(), _SkyFuzzyDateService_ngUnsub
|
|
|
550
552
|
}, _SkyFuzzyDateService_getMonthNumber = function _SkyFuzzyDateService_getMonthNumber(month) {
|
|
551
553
|
let returnValue;
|
|
552
554
|
const monthAsNumber = parseInt(month, 10);
|
|
553
|
-
// If the month component is a string ("
|
|
555
|
+
// If the month component is a string ("January"), we check to see if it is a valid month
|
|
554
556
|
if (isNaN(monthAsNumber)) {
|
|
555
557
|
if (!moment(month, 'MMMM').isValid()) {
|
|
556
558
|
return;
|
|
@@ -1151,7 +1153,7 @@ class SkyDatepickerCalendarInnerComponent {
|
|
|
1151
1153
|
select(date, isManual = true) {
|
|
1152
1154
|
this.activeDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
1153
1155
|
/*
|
|
1154
|
-
Only actually select date if in
|
|
1156
|
+
Only actually select date if in minMode (day picker mode).
|
|
1155
1157
|
Otherwise, just change the active view for the datepicker.
|
|
1156
1158
|
*/
|
|
1157
1159
|
if (this.datepickerMode === this.minMode) {
|
|
@@ -1894,7 +1896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
1894
1896
|
}]
|
|
1895
1897
|
}] } });
|
|
1896
1898
|
|
|
1897
|
-
var _SkyDatepickerComponent_instances, _SkyDatepickerComponent_affixer, _SkyDatepickerComponent_calendarUnsubscribe, _SkyDatepickerComponent_customDatesSubscription, _SkyDatepickerComponent_ngUnsubscribe, _SkyDatepickerComponent_overlay,
|
|
1899
|
+
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;
|
|
1898
1900
|
let nextId$1 = 0;
|
|
1899
1901
|
/**
|
|
1900
1902
|
* Creates the datepicker button and calendar.
|
|
@@ -1924,7 +1926,7 @@ class SkyDatepickerComponent {
|
|
|
1924
1926
|
_SkyDatepickerComponent_customDatesSubscription.set(this, void 0);
|
|
1925
1927
|
_SkyDatepickerComponent_ngUnsubscribe.set(this, new Subject());
|
|
1926
1928
|
_SkyDatepickerComponent_overlay.set(this, void 0);
|
|
1927
|
-
|
|
1929
|
+
_SkyDatepickerComponent_overlayKeydownListener.set(this, void 0);
|
|
1928
1930
|
_SkyDatepickerComponent__calendarRef.set(this, void 0);
|
|
1929
1931
|
_SkyDatepickerComponent__disabled.set(this, false);
|
|
1930
1932
|
_SkyDatepickerComponent__selectedDate.set(this, void 0);
|
|
@@ -2056,7 +2058,7 @@ class SkyDatepickerComponent {
|
|
|
2056
2058
|
}
|
|
2057
2059
|
}
|
|
2058
2060
|
}
|
|
2059
|
-
_SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calendarUnsubscribe = new WeakMap(), _SkyDatepickerComponent_customDatesSubscription = new WeakMap(), _SkyDatepickerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepickerComponent_overlay = new WeakMap(),
|
|
2061
|
+
_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() {
|
|
2060
2062
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
|
|
2061
2063
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyOverlay).call(this);
|
|
2062
2064
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_removePickerEventListeners).call(this);
|
|
@@ -2121,7 +2123,7 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
|
|
|
2121
2123
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_overlay, undefined, "f");
|
|
2122
2124
|
}
|
|
2123
2125
|
}, _SkyDatepickerComponent_addKeydownListener = function _SkyDatepickerComponent_addKeydownListener() {
|
|
2124
|
-
__classPrivateFieldSet(this,
|
|
2126
|
+
__classPrivateFieldSet(this, _SkyDatepickerComponent_overlayKeydownListener, fromEvent(window.document, 'keydown')
|
|
2125
2127
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f")))
|
|
2126
2128
|
.subscribe((event) => {
|
|
2127
2129
|
const key = event.key?.toLowerCase();
|
|
@@ -2133,7 +2135,7 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
|
|
|
2133
2135
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f").next();
|
|
2134
2136
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f").complete();
|
|
2135
2137
|
__classPrivateFieldSet(this, _SkyDatepickerComponent_calendarUnsubscribe, new Subject(), "f");
|
|
2136
|
-
__classPrivateFieldGet(this,
|
|
2138
|
+
__classPrivateFieldGet(this, _SkyDatepickerComponent_overlayKeydownListener, "f")?.unsubscribe();
|
|
2137
2139
|
}, _SkyDatepickerComponent_cancelCustomDatesSubscription = function _SkyDatepickerComponent_cancelCustomDatesSubscription() {
|
|
2138
2140
|
if (__classPrivateFieldGet(this, _SkyDatepickerComponent_customDatesSubscription, "f")) {
|
|
2139
2141
|
__classPrivateFieldGet(this, _SkyDatepickerComponent_customDatesSubscription, "f").unsubscribe();
|
|
@@ -2380,7 +2382,7 @@ class SkyFuzzyDatepickerInputDirective {
|
|
|
2380
2382
|
}
|
|
2381
2383
|
ngAfterViewInit() {
|
|
2382
2384
|
// This is needed to address a bug in Angular 4.
|
|
2383
|
-
// When a control value is set
|
|
2385
|
+
// When a control value is set initially, its value is not represented on the view.
|
|
2384
2386
|
// See: https://github.com/angular/angular/issues/13792
|
|
2385
2387
|
// Of note is the parent check which allows us to determine if the form is reactive.
|
|
2386
2388
|
// Without this check there is a changed before checked error
|
|
@@ -2830,7 +2832,7 @@ class SkyDatepickerInputDirective {
|
|
|
2830
2832
|
}
|
|
2831
2833
|
ngAfterViewInit() {
|
|
2832
2834
|
// This is needed to address a bug in Angular 4.
|
|
2833
|
-
// When a control value is set
|
|
2835
|
+
// When a control value is set initially, its value is not represented on the view.
|
|
2834
2836
|
// See: https://github.com/angular/angular/issues/13792
|
|
2835
2837
|
// Of note is the parent check which allows us to determine if the form is reactive.
|
|
2836
2838
|
// Without this check there is a changed before checked error
|
|
@@ -3901,7 +3903,7 @@ class SkyDateRangePickerComponent {
|
|
|
3901
3903
|
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_setValue).call(this, newValue, false);
|
|
3902
3904
|
__classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_resetFormGroupValue).call(this);
|
|
3903
3905
|
// This is needed to address a bug in Angular 4.
|
|
3904
|
-
// When a control value is set
|
|
3906
|
+
// When a control value is set initially, its value is not represented on the view.
|
|
3905
3907
|
// See: https://github.com/angular/angular/issues/13792
|
|
3906
3908
|
/* istanbul ignore else */
|
|
3907
3909
|
if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent_control, "f")) {
|
|
@@ -4224,7 +4226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
4224
4226
|
}]
|
|
4225
4227
|
}] });
|
|
4226
4228
|
|
|
4227
|
-
var _SkyTimepickerComponent_instances, _SkyTimepickerComponent_affixer, _SkyTimepickerComponent_timepickerUnsubscribe, _SkyTimepickerComponent_ngUnsubscribe, _SkyTimepickerComponent_overlay,
|
|
4229
|
+
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;
|
|
4228
4230
|
let nextId = 0;
|
|
4229
4231
|
/**
|
|
4230
4232
|
* Creates a SKY UX-themed replacement for the HTML `input` element with `type="time"`.
|
|
@@ -4252,7 +4254,7 @@ class SkyTimepickerComponent {
|
|
|
4252
4254
|
_SkyTimepickerComponent_timepickerUnsubscribe.set(this, new Subject());
|
|
4253
4255
|
_SkyTimepickerComponent_ngUnsubscribe.set(this, new Subject());
|
|
4254
4256
|
_SkyTimepickerComponent_overlay.set(this, void 0);
|
|
4255
|
-
|
|
4257
|
+
_SkyTimepickerComponent_overlayKeydownListener.set(this, void 0);
|
|
4256
4258
|
_SkyTimepickerComponent__disabled.set(this, false);
|
|
4257
4259
|
_SkyTimepickerComponent__timepickerRef.set(this, void 0);
|
|
4258
4260
|
_SkyTimepickerComponent_affixService.set(this, void 0);
|
|
@@ -4359,7 +4361,7 @@ class SkyTimepickerComponent {
|
|
|
4359
4361
|
set timepickerRef(value) {
|
|
4360
4362
|
if (value) {
|
|
4361
4363
|
__classPrivateFieldSet(this, _SkyTimepickerComponent__timepickerRef, value, "f");
|
|
4362
|
-
// Wait for the timepicker component to render before
|
|
4364
|
+
// Wait for the timepicker component to render before gauging dimensions.
|
|
4363
4365
|
setTimeout(() => {
|
|
4364
4366
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
|
|
4365
4367
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_createAffixer).call(this);
|
|
@@ -4438,7 +4440,7 @@ class SkyTimepickerComponent {
|
|
|
4438
4440
|
this.localeFormat = data.localeFormat;
|
|
4439
4441
|
this.minuteMultiplier = data.minuteMultiplier;
|
|
4440
4442
|
}
|
|
4441
|
-
|
|
4443
|
+
onCloseButtonClick() {
|
|
4442
4444
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_closePicker).call(this);
|
|
4443
4445
|
}
|
|
4444
4446
|
setTime(event) {
|
|
@@ -4463,7 +4465,7 @@ class SkyTimepickerComponent {
|
|
|
4463
4465
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_openPicker).call(this);
|
|
4464
4466
|
}
|
|
4465
4467
|
}
|
|
4466
|
-
_SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepickerUnsubscribe = new WeakMap(), _SkyTimepickerComponent_ngUnsubscribe = new WeakMap(), _SkyTimepickerComponent_overlay = new WeakMap(),
|
|
4468
|
+
_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() {
|
|
4467
4469
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
|
|
4468
4470
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyOverlay).call(this);
|
|
4469
4471
|
__classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_removePickerEventListeners).call(this);
|
|
@@ -4527,7 +4529,7 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
|
|
|
4527
4529
|
__classPrivateFieldSet(this, _SkyTimepickerComponent_overlay, undefined, "f");
|
|
4528
4530
|
}
|
|
4529
4531
|
}, _SkyTimepickerComponent_addKeydownListener = function _SkyTimepickerComponent_addKeydownListener() {
|
|
4530
|
-
__classPrivateFieldSet(this,
|
|
4532
|
+
__classPrivateFieldSet(this, _SkyTimepickerComponent_overlayKeydownListener, fromEvent(window.document, 'keydown')
|
|
4531
4533
|
.pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f")))
|
|
4532
4534
|
.subscribe((event) => {
|
|
4533
4535
|
const key = event.key?.toLowerCase();
|
|
@@ -4544,13 +4546,13 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
|
|
|
4544
4546
|
__classPrivateFieldSet(this, _SkyTimepickerComponent_timepickerUnsubscribe, new Subject(), "f");
|
|
4545
4547
|
}
|
|
4546
4548
|
/* istanbul ignore next */
|
|
4547
|
-
__classPrivateFieldGet(this,
|
|
4549
|
+
__classPrivateFieldGet(this, _SkyTimepickerComponent_overlayKeydownListener, "f")?.unsubscribe();
|
|
4548
4550
|
};
|
|
4549
4551
|
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 });
|
|
4550
|
-
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)=\"
|
|
4552
|
+
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 });
|
|
4551
4553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
|
|
4552
4554
|
type: Component,
|
|
4553
|
-
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)=\"
|
|
4555
|
+
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"] }]
|
|
4554
4556
|
}], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
|
|
4555
4557
|
type: Optional
|
|
4556
4558
|
}] }, { type: i3$2.SkyThemeService, decorators: [{
|