@skyux/datetime 7.9.0 → 7.10.0

package/fesm2015/skyux-datetime.mjs

@@ -1,6 +1,6 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import * as i0 from '@angular/core';
-import { Pipe, NgModule, Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, ElementRef, TemplateRef, Optional, forwardRef, Directive, HostListener } from '@angular/core';
+import { Pipe, NgModule, Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener } from '@angular/core';
 import { Subject, fromEvent, BehaviorSubject, forkJoin, combineLatest } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged, first, map } from 'rxjs/operators';
 import * as i3 from '@skyux/i18n';
@@ -13,7 +13,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, UntypedFormControl, Reac
 import * as i2$1 from '@skyux/forms';
 import { SkyInputBoxModule } from '@skyux/forms';
 import * as i1 from '@skyux/core';
-import { SkyAffixAutoFitContext, SkyAffixModule, SkyOverlayModule } from '@skyux/core';
+import { SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyOverlayModule } from '@skyux/core';
 import * as i3$1 from '@skyux/indicators';
 import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
 import * as i4 from '@skyux/popovers';
@@ -1901,14 +1901,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
                     }]
             }] } });
 
-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;
+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_zIndex, _SkyDatepickerComponent_closePicker, _SkyDatepickerComponent_openPicker, _SkyDatepickerComponent_createAffixer, _SkyDatepickerComponent_destroyAffixer, _SkyDatepickerComponent_createOverlay, _SkyDatepickerComponent_destroyOverlay, _SkyDatepickerComponent_addKeydownListener, _SkyDatepickerComponent_removePickerEventListeners, _SkyDatepickerComponent_cancelCustomDatesSubscription;
 let nextId$1 = 0;
 /**
  * Creates the datepicker button and calendar.
  * You must wrap this component around an input with the `skyDatepickerInput` directive.
  */
 class SkyDatepickerComponent {
-    constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
+    constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
         this.inputBoxHostService = inputBoxHostService;
         _SkyDatepickerComponent_instances.add(this);
         /**
@@ -1939,6 +1939,7 @@ class SkyDatepickerComponent {
         _SkyDatepickerComponent_changeDetector.set(this, void 0);
         _SkyDatepickerComponent_coreAdapter.set(this, void 0);
         _SkyDatepickerComponent_overlayService.set(this, void 0);
+        _SkyDatepickerComponent_zIndex.set(this, void 0);
         __classPrivateFieldSet(this, _SkyDatepickerComponent_affixService, affixService, "f");
         __classPrivateFieldSet(this, _SkyDatepickerComponent_changeDetector, changeDetector, "f");
         __classPrivateFieldSet(this, _SkyDatepickerComponent_coreAdapter, coreAdapter, "f");
@@ -1946,6 +1947,7 @@ class SkyDatepickerComponent {
         const uniqueId = nextId$1++;
         this.calendarId = `sky-datepicker-calendar-${uniqueId}`;
         this.triggerButtonId = `sky-datepicker-button-${uniqueId}`;
+        __classPrivateFieldSet(this, _SkyDatepickerComponent_zIndex, stackingContext === null || stackingContext === void 0 ? void 0 : stackingContext.zIndex, "f");
         // Update icons when theme changes.
         themeSvc === null || themeSvc === void 0 ? void 0 : themeSvc.settingsChange.pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f"))).subscribe(() => {
             __classPrivateFieldGet(this, _SkyDatepickerComponent_changeDetector, "f").markForCheck();
@@ -2063,7 +2065,7 @@ class SkyDatepickerComponent {
         }
     }
 }
-_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() {
+_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_zIndex = new WeakMap(), _SkyDatepickerComponent_instances = new WeakSet(), _SkyDatepickerComponent_closePicker = function _SkyDatepickerComponent_closePicker() {
     var _a;
     __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
     __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyOverlay).call(this);
@@ -2110,6 +2112,13 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
             enableClose: false,
             enablePointerEvents: false,
         });
+        if (__classPrivateFieldGet(this, _SkyDatepickerComponent_zIndex, "f")) {
+            __classPrivateFieldGet(this, _SkyDatepickerComponent_zIndex, "f")
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f")))
+                .subscribe((zIndex) => {
+                overlay.componentRef.instance.zIndex = zIndex.toString(10);
+            });
+        }
         overlay.backdropClick
             .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f")))
             .subscribe(() => {
@@ -2150,7 +2159,7 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
         __classPrivateFieldSet(this, _SkyDatepickerComponent_customDatesSubscription, undefined, "f");
     }
 };
-SkyDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyDatepickerComponent, 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 });
+SkyDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyDatepickerComponent, 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 }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, 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  <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-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        'skyux_datepicker_trigger_button_label' | skyLibResources\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"calendar\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"calendar\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\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    #calendarRef\n  >\n    <sky-datepicker-calendar\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    >\n    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ 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: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
             type: Component,
@@ -2160,6 +2169,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
                         type: Optional
                     }] }, { type: i3$2.SkyThemeService, decorators: [{
                         type: Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [SKY_STACKING_CONTEXT]
                     }] }];
     }, propDecorators: { pickerClass: [{
                 type: Input
@@ -4252,7 +4266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
                 }]
         }] });
 
-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;
+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_zIndex, _SkyTimepickerComponent_closePicker, _SkyTimepickerComponent_openPicker, _SkyTimepickerComponent_createAffixer, _SkyTimepickerComponent_destroyAffixer, _SkyTimepickerComponent_createOverlay, _SkyTimepickerComponent_destroyOverlay, _SkyTimepickerComponent_addKeydownListener, _SkyTimepickerComponent_removePickerEventListeners;
 let nextId = 0;
 /**
  * Creates a SKY UX-themed replacement for the HTML `input` element with `type="time"`.
@@ -4261,7 +4275,7 @@ let nextId = 0;
  * with the `skyTimepickerInput` directive.
  */
 class SkyTimepickerComponent {
-    constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc) {
+    constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
         this.inputBoxHostService = inputBoxHostService;
         _SkyTimepickerComponent_instances.add(this);
         /**
@@ -4287,10 +4301,12 @@ class SkyTimepickerComponent {
         _SkyTimepickerComponent_changeDetector.set(this, void 0);
         _SkyTimepickerComponent_coreAdapter.set(this, void 0);
         _SkyTimepickerComponent_overlayService.set(this, void 0);
+        _SkyTimepickerComponent_zIndex.set(this, void 0);
         __classPrivateFieldSet(this, _SkyTimepickerComponent_affixService, affixService, "f");
         __classPrivateFieldSet(this, _SkyTimepickerComponent_changeDetector, changeDetector, "f");
         __classPrivateFieldSet(this, _SkyTimepickerComponent_coreAdapter, coreAdapter, "f");
         __classPrivateFieldSet(this, _SkyTimepickerComponent_overlayService, overlayService, "f");
+        __classPrivateFieldSet(this, _SkyTimepickerComponent_zIndex, stackingContext === null || stackingContext === void 0 ? void 0 : stackingContext.zIndex, "f");
         const uniqueId = nextId++;
         this.timepickerId = `sky-timepicker-${uniqueId}`;
         this.triggerButtonId = `sky-timepicker-button-${uniqueId}`;
@@ -4489,7 +4505,7 @@ class SkyTimepickerComponent {
         __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_openPicker).call(this);
     }
 }
-_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() {
+_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_zIndex = new WeakMap(), _SkyTimepickerComponent_instances = new WeakSet(), _SkyTimepickerComponent_closePicker = function _SkyTimepickerComponent_closePicker() {
     var _a;
     __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
     __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyOverlay).call(this);
@@ -4535,6 +4551,13 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
             enableClose: false,
             enablePointerEvents: false,
         });
+        if (__classPrivateFieldGet(this, _SkyTimepickerComponent_zIndex, "f")) {
+            __classPrivateFieldGet(this, _SkyTimepickerComponent_zIndex, "f")
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f")))
+                .subscribe((zIndex) => {
+                overlay.componentRef.instance.zIndex = zIndex.toString(10);
+            });
+        }
         overlay.backdropClick
             .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_timepickerUnsubscribe, "f")))
             .subscribe(() => {
@@ -4575,7 +4598,7 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
     /* istanbul ignore next */
     (_a = __classPrivateFieldGet(this, _SkyTimepickerComponent_overlayKeydownListener, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
 };
-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 });
+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 }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
             type: Component,
@@ -4585,6 +4608,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
                         type: Optional
                     }] }, { type: i3$2.SkyThemeService, decorators: [{
                         type: Optional
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [SKY_STACKING_CONTEXT]
                     }] }];
     }, propDecorators: { selectedTimeChanged: [{
                 type: Output