@skyux/flyout 5.0.2 → 5.1.0

package/bundles/skyux-flyout.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@skyux/indicators'), require('@skyux/i18n'), require('@skyux/router'), require('@skyux/theme'), require('@angular/animations'), require('rxjs/operators'), require('@skyux/core')) :
-    typeof define === 'function' && define.amd ? define('@skyux/flyout', ['exports', '@angular/core', 'rxjs', '@angular/common', '@angular/forms', '@angular/router', '@skyux/indicators', '@skyux/i18n', '@skyux/router', '@skyux/theme', '@angular/animations', 'rxjs/operators', '@skyux/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.flyout = {}), global.ng.core, global.rxjs, global.ng.common, global.ng.forms, global.ng.router, global.i1$1, global.i2, global.i10, global.i2$1, global.ng.animations, global.rxjs.operators, global.i1));
-})(this, (function (exports, i0, rxjs, i7, i9, i2$2, i1$1, i2, i10, i2$1, animations, operators, i1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/cdk/a11y'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@skyux/indicators'), require('@skyux/i18n'), require('@skyux/router'), require('@skyux/theme'), require('@angular/animations'), require('rxjs/operators'), require('@skyux/core')) :
+    typeof define === 'function' && define.amd ? define('@skyux/flyout', ['exports', '@angular/core', 'rxjs', '@angular/cdk/a11y', '@angular/common', '@angular/forms', '@angular/router', '@skyux/indicators', '@skyux/i18n', '@skyux/router', '@skyux/theme', '@angular/animations', 'rxjs/operators', '@skyux/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.flyout = {}), global.ng.core, global.rxjs, global.ng.cdk.a11y, global.ng.common, global.ng.forms, global.ng.router, global.i1$1, global.i2, global.i10, global.i2$1, global.ng.animations, global.rxjs.operators, global.i1));
+})(this, (function (exports, i0, rxjs, i9, i7, forms, i2$2, i1$1, i2, i10, i2$1, animations, operators, i1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,8 +23,8 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
@@ -60,6 +60,7 @@
              * @default true
              */
             this.isOpen = true;
+            this._beforeClose = new rxjs.Subject();
             this._iteratorNextButtonClick = new i0.EventEmitter();
             this._iteratorPreviousButtonClick = new i0.EventEmitter();
             this._iteratorNextButtonDisabled = false;
@@ -69,6 +70,18 @@
                 _this.isOpen = false;
             });
         }
+        Object.defineProperty(SkyFlyoutInstance.prototype, "beforeClose", {
+            /**
+             * An event that the modal instance emits when it is about to close.
+             * If a subscription exists for this event,
+             * the modal does not close until the subscriber calls the handler's `closeModal` method.
+             */
+            get: function () {
+                return this._beforeClose;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SkyFlyoutInstance.prototype, "hostController", {
             /**
              * Used to communicate with the host component.
@@ -150,10 +163,12 @@
         });
         /**
          * Closes the flyout instance and emits its `closed` event.
+         * @param args Arguments used when closing the flyout.
          */
-        SkyFlyoutInstance.prototype.close = function () {
+        SkyFlyoutInstance.prototype.close = function (args) {
             this.hostController.next({
                 type: exports.SkyFlyoutMessageType.Close,
+                data: { ignoreBeforeClose: args ? args.ignoreBeforeClose : false },
             });
             this._iteratorPreviousButtonClick.complete();
             this._iteratorNextButtonClick.complete();
@@ -165,7 +180,7 @@
     /**
      * NOTICE: DO NOT MODIFY THIS FILE!
      * The contents of this file were automatically generated by
-     * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/SkyFlyout' schematic.
+     * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-flyout' schematic.
      * To update this file, simply rerun the command.
      */
     var RESOURCES = {
@@ -176,7 +191,7 @@
             skyux_flyout_permalink_button: { message: 'View record' },
             skyux_flyout_primary_action_button: { message: 'Create list' },
             skyux_flyout_resize_handle: {
-                message: 'Resize the flyout window. Use left arrow key to expand the flyout window and right arrow key to shrink the flyout window.',
+                message: 'Resize the flyout window. Press the enter or space key to activate, then use left arrow key to expand the flyout window and right arrow key to shrink the flyout window. Press the enter, space, or tab key to deactivate.',
             },
         },
     };
@@ -196,16 +211,16 @@
         }
         return SkyFlyoutResourcesModule;
     }());
-    SkyFlyoutResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyFlyoutResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, exports: [i2.SkyI18nModule] });
-    SkyFlyoutResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, providers: [
+    SkyFlyoutResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyFlyoutResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, exports: [i2.SkyI18nModule] });
+    SkyFlyoutResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, providers: [
             {
                 provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyFlyoutResourcesProvider,
                 multi: true,
             },
         ], imports: [i2.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [i2.SkyI18nModule],
@@ -274,9 +289,9 @@
         };
         return SkyFlyoutAdapterService;
     }());
-    SkyFlyoutAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }, { token: i1__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyFlyoutAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutAdapterService, decorators: [{
+    SkyFlyoutAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }, { token: i1__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyFlyoutAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }, { type: i1__namespace.SkyAppWindowRef }]; } });
 
@@ -347,12 +362,22 @@
         };
         return SkyFlyoutMediaQueryService;
     }());
-    SkyFlyoutMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyFlyoutMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, decorators: [{
+    SkyFlyoutMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyFlyoutMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
+    /**
+     * Handler for notifying the flyout when it is appropriate to close the flyout. This will be returned from the flyout instance's `beforeClose` observable.
+     */
+    var SkyFlyoutBeforeCloseHandler = /** @class */ (function () {
+        function SkyFlyoutBeforeCloseHandler(closeFlyoutFunction) {
+            this.closeFlyout = closeFlyoutFunction;
+        }
+        return SkyFlyoutBeforeCloseHandler;
+    }());
+
     /**
      * @internal
      */
@@ -396,9 +421,9 @@
         };
         return SkyFlyoutIteratorComponent;
     }());
-    SkyFlyoutIteratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyFlyoutIteratorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0__namespace, template: "<div id=\"iterators\" class=\"sky-flyout-iterators\">\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"\n      'skyux_flyout_iterator_previous_button' | skyLibResources\n    \"\n    [disabled]=\"previousButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorPreviousClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-up\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n    [disabled]=\"nextButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorNextClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-down\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"], components: [{ type: i1__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2__namespace$1.SkyLibResourcesPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, decorators: [{
+    SkyFlyoutIteratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyFlyoutIteratorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0__namespace, template: "<div id=\"iterators\" class=\"sky-flyout-iterators\">\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"\n      'skyux_flyout_iterator_previous_button' | skyLibResources\n    \"\n    [disabled]=\"previousButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorPreviousClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-up\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n    [disabled]=\"nextButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorNextClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-down\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"], components: [{ type: i1__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2__namespace$1.SkyLibResourcesPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-flyout-iterator',
@@ -422,7 +447,7 @@
      * @internal
      */
     var SkyFlyoutComponent = /** @class */ (function () {
-        function SkyFlyoutComponent(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService) {
+        function SkyFlyoutComponent(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService, _ngZone) {
             var _this = this;
             this.adapter = adapter;
             this.changeDetector = changeDetector;
@@ -432,13 +457,16 @@
             this.flyoutMediaQueryService = flyoutMediaQueryService;
             this.elementRef = elementRef;
             this.uiConfigService = uiConfigService;
+            this._ngZone = _ngZone;
             this.flyoutId = "sky-flyout-" + ++nextId;
             this.flyoutState = FLYOUT_CLOSED_STATE;
             this.isOpen = false;
             this.isOpening = false;
             this.flyoutWidth = 0;
+            this.instanceReady = false;
             this.isDragging = false;
             this.isFullscreen = false;
+            this.resizeKeyControlActive = false;
             this.xCoord = 0;
             this.windowBufferSize = 20;
             /**
@@ -542,16 +570,16 @@
             this.config.iteratorPreviousButtonDisabled =
                 this.config.iteratorPreviousButtonDisabled || false;
             var factory = this.resolver.resolveComponentFactory(component);
-            /* tslint:disable:deprecation */
-            /**
-             * NOTE: We need to update this to use the new Injector.create(options) method
-             * after Angular 4 support is dropped.
-             */
-            var providers = i0.ReflectiveInjector.resolve(this.config.providers);
-            var injector = i0.ReflectiveInjector.fromResolvedProviders(providers, this.injector);
-            /* tslint:enable:deprecation */
+            var injector = i0.Injector.create({
+                parent: this.injector,
+                providers: this.config.providers,
+            });
             var componentRef = this.target.createComponent(factory, undefined, injector);
             this.flyoutInstance = this.createFlyoutInstance(componentRef.instance);
+            // This is used to ensure we do not render the flyout until we have attached the component.
+            // This allows the aria-labelledby to function correctly.
+            this.instanceReady = true;
+            this.changeDetector.markForCheck();
             // Open the flyout immediately.
             this.messageStream.next({
                 type: exports.SkyFlyoutMessageType.Open,
@@ -590,7 +618,9 @@
             return false;
         };
         SkyFlyoutComponent.prototype.getAnimationState = function () {
-            return this.isOpening ? FLYOUT_OPEN_STATE : FLYOUT_CLOSED_STATE;
+            return this.instanceReady && this.isOpening
+                ? FLYOUT_OPEN_STATE
+                : FLYOUT_CLOSED_STATE;
         };
         SkyFlyoutComponent.prototype.animationDone = function (event) {
             if (event.toState === FLYOUT_OPEN_STATE) {
@@ -606,27 +636,10 @@
             this.onResizeHandleMouseDown(event);
         };
         SkyFlyoutComponent.prototype.onHeaderGrabHandleKeyDown = function (event) {
-            /* istanbul ignore else */
-            if (event.key) {
-                var direction = event.key.toLowerCase().replace('arrow', '');
-                switch (direction) {
-                    case 'left':
-                        /* istanbul ignore else */
-                        if (this.flyoutWidth < this.config.maxWidth) {
-                            this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
-                        }
-                        break;
-                    case 'right':
-                        /* istanbul ignore else */
-                        if (this.flyoutWidth > this.config.minWidth) {
-                            this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
-                        }
-                        break;
-                    /* istanbul ignore next */
-                    default:
-                        break;
-                }
-            }
+            this.handleResizeKeyDown(event);
+        };
+        SkyFlyoutComponent.prototype.onResizeHandleKeyDown = function (event) {
+            this.handleResizeKeyDown(event);
         };
         SkyFlyoutComponent.prototype.onResizeHandleMouseDown = function (event) {
             var _this = this;
@@ -704,6 +717,8 @@
             return instance;
         };
         SkyFlyoutComponent.prototype.handleIncomingMessages = function (message) {
+            var _this = this;
+            var _a;
             /* tslint:disable-next-line:switch-default */
             switch (message.type) {
                 case exports.SkyFlyoutMessageType.Open:
@@ -711,10 +726,21 @@
                         this.isOpen = false;
                         this.isOpening = true;
                     }
+                    this.initFocusTrap();
                     break;
                 case exports.SkyFlyoutMessageType.Close:
-                    this.isOpen = true;
-                    this.isOpening = false;
+                    if (this.flyoutInstance.beforeClose.observers.length ===
+                        0 ||
+                        ((_a = message.data) === null || _a === void 0 ? void 0 : _a.ignoreBeforeClose)) {
+                        this.isOpen = true;
+                        this.isOpening = false;
+                    }
+                    else {
+                        this.flyoutInstance.beforeClose.next(new SkyFlyoutBeforeCloseHandler(function () {
+                            _this.isOpen = true;
+                            _this.isOpening = false;
+                        }));
+                    }
                     break;
                 case exports.SkyFlyoutMessageType.EnableIteratorNextButton:
                     this.config.iteratorNextButtonDisabled = false;
@@ -791,14 +817,69 @@
             // TODO: Need to implement the async `getString` method in a breaking change.
             return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
         };
+        SkyFlyoutComponent.prototype.handleResizeKeyDown = function (event) {
+            /* istanbul ignore else */
+            if (event.key) {
+                var keyPressed = event.key.toLowerCase().replace('arrow', '');
+                switch (keyPressed) {
+                    case 'enter':
+                    case ' ':
+                        this.resizeKeyControlActive = !this.resizeKeyControlActive;
+                        break;
+                    case 'tab':
+                        /* istanbul ignore else */
+                        if (this.resizeKeyControlActive) {
+                            this.resizeKeyControlActive = false;
+                        }
+                    case 'left':
+                        if (this.resizeKeyControlActive) {
+                            /* istanbul ignore else */
+                            if (this.flyoutWidth < this.config.maxWidth) {
+                                this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
+                            }
+                        }
+                        break;
+                    case 'right':
+                        if (this.resizeKeyControlActive) {
+                            /* istanbul ignore else */
+                            if (this.flyoutWidth > this.config.minWidth) {
+                                this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
+                            }
+                        }
+                        break;
+                    /* istanbul ignore next */
+                    default:
+                        break;
+                }
+            }
+        };
+        /** Executes a function when the zone is stable. */
+        SkyFlyoutComponent.prototype._executeOnStable = function (fn) {
+            if (this._ngZone.isStable) {
+                fn();
+            }
+            else {
+                this._ngZone.onStable.pipe(operators.take(1)).subscribe(fn);
+            }
+        };
+        SkyFlyoutComponent.prototype.initFocusTrap = function () {
+            var _this = this;
+            this.enableTrapFocusAutoCapture = false;
+            this.enableTrapFocus = false;
+            // Waiting for zone to be stable will avoid ExpressionChangeAfterCheckedError.
+            this._executeOnStable(function () {
+                _this.enableTrapFocusAutoCapture = true;
+                _this.enableTrapFocus = true;
+            });
+        };
         return SkyFlyoutComponent;
     }());
-    SkyFlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Injector }, { token: i0__namespace.ComponentFactoryResolver }, { token: i2__namespace$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0__namespace.ElementRef }, { token: i1__namespace.SkyUIConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyFlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
+    SkyFlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Injector }, { token: i0__namespace.ComponentFactoryResolver }, { token: i2__namespace$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0__namespace.ElementRef }, { token: i1__namespace.SkyUIConfigService }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyFlyoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
             SkyFlyoutAdapterService,
             SkyFlyoutMediaQueryService,
             { provide: i1.SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
-        ], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-flyout\"\n  tabindex=\"-1\"\n  [attr.role]=\"config?.ariaRole\"\n  [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n  [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\n  [id]=\"flyoutId\"\n  [ngClass]=\"{\n    'sky-flyout-hidden': !isOpen && !isOpening,\n    'sky-flyout-fullscreen': isFullscreen\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-8': 'modern'\n  }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  #flyoutRef\n>\n  <input\n    class=\"sky-flyout-resize-handle\"\n    role=\"separator\"\n    type=\"range\"\n    [attr.aria-controls]=\"flyoutId\"\n    [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n    [attr.aria-valuemax]=\"config.maxWidth\"\n    [attr.aria-valuemin]=\"config.minWidth\"\n    [attr.aria-valuenow]=\"flyoutWidth\"\n    [attr.step]=\"widthStep\"\n    [max]=\"config.maxWidth\"\n    [min]=\"config.minWidth\"\n    [(ngModel)]=\"flyoutWidth\"\n    (mousedown)=\"onResizeHandleMouseDown($event)\"\n  />\n\n  <div\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    #flyoutHeader\n  >\n    <div class=\"sky-flyout-header-content\">\n      <button\n        *skyThemeIf=\"'modern'\"\n        class=\"\n          sky-btn\n          sky-btn-icon-borderless\n          sky-margin-inline-sm\n          sky-flyout-header-grab-handle\n        \"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n      </button>\n\n      <sky-flyout-iterator\n        *ngIf=\"config.showIterator\"\n        [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n        [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n        (nextButtonClick)=\"onIteratorNextButtonClick()\"\n        (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n      >\n      </sky-flyout-iterator>\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\n      <button\n        class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-icon-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"close\"\n          iconType=\"skyux\"\n          size=\"lg\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-flyout-content\">\n    <div #target></div>\n  </div>\n</div>\n\n<ng-template #permalinkTemplate>\n  <ng-template [ngIf]=\"permalink\">\n    <ng-template [ngIf]=\"permalink.url\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [skyHref]=\"permalink.url\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n    <ng-template [ngIf]=\"permalink.route\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [routerLink]=\"permalink.route.commands\"\n        [fragment]=\"permalink.route.extras?.fragment\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        [queryParams]=\"permalink.route.extras?.queryParams\"\n        [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n        [state]=\"permalink.route.extras?.state\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n    <button\n      type=\"button\"\n      class=\"\n        sky-btn\n        sky-btn-default\n        sky-flyout-btn-primary-action\n        sky-margin-inline-default\n      \"\n      (click)=\"invokePrimaryAction()\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </ng-template>\n</ng-template>\n", styles: [".sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:#fff;border-left:6px solid #0974a1;z-index:1001}.sky-flyout:focus{outline:none}.sky-flyout.sky-flyout-fullscreen{min-width:100%;max-width:100%}.sky-flyout.sky-flyout-fullscreen .sky-flyout-resize-handle{cursor:initial}.sky-flyout.sky-flyout-hidden{visibility:hidden}.sky-flyout .sky-flyout-input-aria-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);outline:none}.sky-flyout-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;left:-10px;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;direction:rtl}.sky-flyout-resize-handle::-moz-range-thumb,.sky-flyout-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-ms-thumb,.sky-flyout-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-header{border-bottom:1px solid #cdcfd2;width:100%;background:#eeeeef;height:50px;display:flex;align-items:flex-start}.sky-flyout-header-content{flex-grow:1}.sky-flyout-btn-permalink:hover{text-decoration:none}.sky-flyout-help-shim{padding-right:8px}@media (min-width: 768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;height:calc(100% - 50px)}:host-context(.sky-theme-modern) .sky-flyout{border-left:0}:host-context(.sky-theme-modern) .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}:host-context(.sky-theme-modern) .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}.sky-theme-modern .sky-flyout{border-left:0}.sky-theme-modern .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}.sky-theme-modern .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout{background:#000}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout-header{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"], components: [{ type: i1__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }], directives: [{ type: i7__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9__namespace.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10__namespace.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2__namespace$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2__namespace$1.SkyLibResourcesPipe }, animations: [
+        ], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: i0.ViewContainerRef, static: true }, { propertyName: "flyoutCloseButton", first: true, predicate: ["flyoutCloseButton"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "flyoutContent", first: true, predicate: ["flyoutContent"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-flyout\"\n  tabindex=\"-1\"\n  [attr.role]=\"config?.ariaRole ? config.ariaRole : 'dialog'\"\n  [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n  [attr.aria-label]=\"config?.ariaLabel\"\n  [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\n  [attr.aria-modal]=\"\n    config?.ariaRole === 'dialog' || !config?.ariaRole ? true : false\n  \"\n  [attr.hidden]=\"!instanceReady ? true : undefined\"\n  [id]=\"flyoutId\"\n  [ngClass]=\"{\n    'sky-flyout-hidden': !isOpen && !isOpening,\n    'sky-flyout-fullscreen': isFullscreen\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-8': 'modern'\n  }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  #flyoutRef\n  [cdkTrapFocus]=\"enableTrapFocus\"\n  [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n  <div\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    #flyoutHeader\n  >\n    <div class=\"sky-flyout-header-content\">\n      <button\n        *skyThemeIf=\"'modern'\"\n        class=\"\n          sky-btn\n          sky-btn-icon-borderless\n          sky-margin-inline-sm\n          sky-flyout-header-grab-handle\n        \"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n      </button>\n\n      <sky-flyout-iterator\n        *ngIf=\"config.showIterator\"\n        [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n        [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n        (nextButtonClick)=\"onIteratorNextButtonClick()\"\n        (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n      >\n      </sky-flyout-iterator>\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\n      <button\n        class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-icon-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n        #flyoutCloseButton\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"close\"\n          iconType=\"skyux\"\n          size=\"lg\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-flyout-content\" #flyoutContent>\n    <div #target></div>\n  </div>\n  <div\n    class=\"sky-flyout-resize-handle\"\n    role=\"separator\"\n    tabindex=\"0\"\n    type=\"range\"\n    [attr.aria-controls]=\"flyoutId\"\n    [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n    [attr.aria-valuemax]=\"config.maxWidth\"\n    [attr.aria-valuemin]=\"config.minWidth\"\n    [attr.aria-valuenow]=\"flyoutWidth\"\n    (keydown)=\"onResizeHandleKeyDown($event)\"\n    (mousedown)=\"onResizeHandleMouseDown($event)\"\n  ></div>\n</div>\n\n<ng-template #permalinkTemplate>\n  <ng-template [ngIf]=\"permalink\">\n    <ng-template [ngIf]=\"permalink.url\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [skyHref]=\"permalink.url\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n    <ng-template [ngIf]=\"permalink.route\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [routerLink]=\"permalink.route.commands\"\n        [fragment]=\"permalink.route.extras?.fragment\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        [queryParams]=\"permalink.route.extras?.queryParams\"\n        [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n        [state]=\"permalink.route.extras?.state\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n    <button\n      type=\"button\"\n      class=\"\n        sky-btn\n        sky-btn-default\n        sky-flyout-btn-primary-action\n        sky-margin-inline-default\n      \"\n      (click)=\"invokePrimaryAction()\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </ng-template>\n</ng-template>\n", styles: [".sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:#fff;border-left:6px solid #0974a1;z-index:1001}.sky-flyout:focus{outline:none}.sky-flyout.sky-flyout-fullscreen{min-width:100%;max-width:100%}.sky-flyout.sky-flyout-fullscreen .sky-flyout-resize-handle{cursor:initial}.sky-flyout.sky-flyout-hidden{visibility:hidden}.sky-flyout .sky-flyout-input-aria-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);outline:none}.sky-flyout-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;left:-10px;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;direction:rtl}.sky-flyout-resize-handle::-moz-range-thumb,.sky-flyout-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-ms-thumb,.sky-flyout-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-header{border-bottom:1px solid #cdcfd2;width:100%;background:#eeeeef;height:50px;display:flex;align-items:flex-start}.sky-flyout-header-content{flex-grow:1}.sky-flyout-btn-permalink:hover{text-decoration:none}.sky-flyout-help-shim{padding-right:8px}@media (min-width: 768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;height:calc(100% - 50px)}:host-context(.sky-theme-modern) .sky-flyout{border-left:0}:host-context(.sky-theme-modern) .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}:host-context(.sky-theme-modern) .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}.sky-theme-modern .sky-flyout{border-left:0}.sky-theme-modern .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}.sky-theme-modern .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout{background:#000}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout-header{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"], components: [{ type: i1__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }], directives: [{ type: i7__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9__namespace.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10__namespace.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2__namespace$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2__namespace$1.SkyLibResourcesPipe }, animations: [
             animations.trigger('flyoutState', [
                 animations.state(FLYOUT_OPEN_STATE, animations.style({ transform: 'initial' })),
                 animations.state(FLYOUT_CLOSED_STATE, animations.style({ transform: 'translateX(100%)' })),
@@ -809,11 +890,11 @@
                 animations.transition("* <=> *", animations.animate('250ms ease-in')),
             ]),
         ], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-flyout',
-                        template: "<div\n  class=\"sky-flyout\"\n  tabindex=\"-1\"\n  [attr.role]=\"config?.ariaRole\"\n  [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n  [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\n  [id]=\"flyoutId\"\n  [ngClass]=\"{\n    'sky-flyout-hidden': !isOpen && !isOpening,\n    'sky-flyout-fullscreen': isFullscreen\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-8': 'modern'\n  }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  #flyoutRef\n>\n  <input\n    class=\"sky-flyout-resize-handle\"\n    role=\"separator\"\n    type=\"range\"\n    [attr.aria-controls]=\"flyoutId\"\n    [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n    [attr.aria-valuemax]=\"config.maxWidth\"\n    [attr.aria-valuemin]=\"config.minWidth\"\n    [attr.aria-valuenow]=\"flyoutWidth\"\n    [attr.step]=\"widthStep\"\n    [max]=\"config.maxWidth\"\n    [min]=\"config.minWidth\"\n    [(ngModel)]=\"flyoutWidth\"\n    (mousedown)=\"onResizeHandleMouseDown($event)\"\n  />\n\n  <div\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    #flyoutHeader\n  >\n    <div class=\"sky-flyout-header-content\">\n      <button\n        *skyThemeIf=\"'modern'\"\n        class=\"\n          sky-btn\n          sky-btn-icon-borderless\n          sky-margin-inline-sm\n          sky-flyout-header-grab-handle\n        \"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n      </button>\n\n      <sky-flyout-iterator\n        *ngIf=\"config.showIterator\"\n        [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n        [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n        (nextButtonClick)=\"onIteratorNextButtonClick()\"\n        (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n      >\n      </sky-flyout-iterator>\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\n      <button\n        class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-icon-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"close\"\n          iconType=\"skyux\"\n          size=\"lg\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-flyout-content\">\n    <div #target></div>\n  </div>\n</div>\n\n<ng-template #permalinkTemplate>\n  <ng-template [ngIf]=\"permalink\">\n    <ng-template [ngIf]=\"permalink.url\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [skyHref]=\"permalink.url\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n    <ng-template [ngIf]=\"permalink.route\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [routerLink]=\"permalink.route.commands\"\n        [fragment]=\"permalink.route.extras?.fragment\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        [queryParams]=\"permalink.route.extras?.queryParams\"\n        [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n        [state]=\"permalink.route.extras?.state\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n    <button\n      type=\"button\"\n      class=\"\n        sky-btn\n        sky-btn-default\n        sky-flyout-btn-primary-action\n        sky-margin-inline-default\n      \"\n      (click)=\"invokePrimaryAction()\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </ng-template>\n</ng-template>\n",
+                        template: "<div\n  class=\"sky-flyout\"\n  tabindex=\"-1\"\n  [attr.role]=\"config?.ariaRole ? config.ariaRole : 'dialog'\"\n  [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n  [attr.aria-label]=\"config?.ariaLabel\"\n  [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\n  [attr.aria-modal]=\"\n    config?.ariaRole === 'dialog' || !config?.ariaRole ? true : false\n  \"\n  [attr.hidden]=\"!instanceReady ? true : undefined\"\n  [id]=\"flyoutId\"\n  [ngClass]=\"{\n    'sky-flyout-hidden': !isOpen && !isOpening,\n    'sky-flyout-fullscreen': isFullscreen\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-8': 'modern'\n  }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  #flyoutRef\n  [cdkTrapFocus]=\"enableTrapFocus\"\n  [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n  <div\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    #flyoutHeader\n  >\n    <div class=\"sky-flyout-header-content\">\n      <button\n        *skyThemeIf=\"'modern'\"\n        class=\"\n          sky-btn\n          sky-btn-icon-borderless\n          sky-margin-inline-sm\n          sky-flyout-header-grab-handle\n        \"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n      </button>\n\n      <sky-flyout-iterator\n        *ngIf=\"config.showIterator\"\n        [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n        [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n        (nextButtonClick)=\"onIteratorNextButtonClick()\"\n        (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n      >\n      </sky-flyout-iterator>\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\n      <button\n        class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-icon-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n        #flyoutCloseButton\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"close\"\n          iconType=\"skyux\"\n          size=\"lg\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-flyout-content\" #flyoutContent>\n    <div #target></div>\n  </div>\n  <div\n    class=\"sky-flyout-resize-handle\"\n    role=\"separator\"\n    tabindex=\"0\"\n    type=\"range\"\n    [attr.aria-controls]=\"flyoutId\"\n    [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n    [attr.aria-valuemax]=\"config.maxWidth\"\n    [attr.aria-valuemin]=\"config.minWidth\"\n    [attr.aria-valuenow]=\"flyoutWidth\"\n    (keydown)=\"onResizeHandleKeyDown($event)\"\n    (mousedown)=\"onResizeHandleMouseDown($event)\"\n  ></div>\n</div>\n\n<ng-template #permalinkTemplate>\n  <ng-template [ngIf]=\"permalink\">\n    <ng-template [ngIf]=\"permalink.url\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [skyHref]=\"permalink.url\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n    <ng-template [ngIf]=\"permalink.route\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [routerLink]=\"permalink.route.commands\"\n        [fragment]=\"permalink.route.extras?.fragment\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        [queryParams]=\"permalink.route.extras?.queryParams\"\n        [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n        [state]=\"permalink.route.extras?.state\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n    <button\n      type=\"button\"\n      class=\"\n        sky-btn\n        sky-btn-default\n        sky-flyout-btn-primary-action\n        sky-margin-inline-default\n      \"\n      (click)=\"invokePrimaryAction()\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </ng-template>\n</ng-template>\n",
                         styles: [".sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:#fff;border-left:6px solid #0974a1;z-index:1001}.sky-flyout:focus{outline:none}.sky-flyout.sky-flyout-fullscreen{min-width:100%;max-width:100%}.sky-flyout.sky-flyout-fullscreen .sky-flyout-resize-handle{cursor:initial}.sky-flyout.sky-flyout-hidden{visibility:hidden}.sky-flyout .sky-flyout-input-aria-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);outline:none}.sky-flyout-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;left:-10px;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;direction:rtl}.sky-flyout-resize-handle::-moz-range-thumb,.sky-flyout-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-ms-thumb,.sky-flyout-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-header{border-bottom:1px solid #cdcfd2;width:100%;background:#eeeeef;height:50px;display:flex;align-items:flex-start}.sky-flyout-header-content{flex-grow:1}.sky-flyout-btn-permalink:hover{text-decoration:none}.sky-flyout-help-shim{padding-right:8px}@media (min-width: 768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;height:calc(100% - 50px)}:host-context(.sky-theme-modern) .sky-flyout{border-left:0}:host-context(.sky-theme-modern) .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}:host-context(.sky-theme-modern) .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}.sky-theme-modern .sky-flyout{border-left:0}.sky-theme-modern .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}.sky-theme-modern .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout{background:#000}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout-header{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"],
                         providers: [
                             SkyFlyoutAdapterService,
@@ -834,7 +915,7 @@
                         // Allow automatic change detection for child components.
                         changeDetection: i0.ChangeDetectionStrategy.Default,
                     }]
-            }], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Injector }, { type: i0__namespace.ComponentFactoryResolver }, { type: i2__namespace$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0__namespace.ElementRef }, { type: i1__namespace.SkyUIConfigService }]; }, propDecorators: { flyoutRef: [{
+            }], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Injector }, { type: i0__namespace.ComponentFactoryResolver }, { type: i2__namespace$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0__namespace.ElementRef }, { type: i1__namespace.SkyUIConfigService }, { type: i0__namespace.NgZone }]; }, propDecorators: { flyoutRef: [{
                     type: i0.ViewChild,
                     args: ['flyoutRef', {
                             read: i0.ElementRef,
@@ -846,6 +927,18 @@
                             read: i0.ViewContainerRef,
                             static: true,
                         }]
+                }], flyoutCloseButton: [{
+                    type: i0.ViewChild,
+                    args: ['flyoutCloseButton', {
+                            read: i0.ElementRef,
+                            static: true,
+                        }]
+                }], flyoutContent: [{
+                    type: i0.ViewChild,
+                    args: ['flyoutContent', {
+                            read: i0.ElementRef,
+                            static: true,
+                        }]
                 }], flyoutHeader: [{
                     type: i0.ViewChild,
                     args: ['flyoutHeader', {
@@ -862,18 +955,20 @@
         }
         return SkyFlyoutModule;
     }());
-    SkyFlyoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyFlyoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [i7.CommonModule,
-            i9.FormsModule,
+    SkyFlyoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyFlyoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [i9.A11yModule,
+            i7.CommonModule,
+            forms.FormsModule,
             i2$2.RouterModule,
             i2.SkyI18nModule,
             i1$1.SkyIconModule,
             SkyFlyoutResourcesModule,
             i2$1.SkyThemeModule,
             i10.SkyHrefModule], exports: [SkyFlyoutComponent] });
-    SkyFlyoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutModule, imports: [[
+    SkyFlyoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, imports: [[
+                i9.A11yModule,
                 i7.CommonModule,
-                i9.FormsModule,
+                forms.FormsModule,
                 i2$2.RouterModule,
                 i2.SkyI18nModule,
                 i1$1.SkyIconModule,
@@ -881,13 +976,14 @@
                 i2$1.SkyThemeModule,
                 i10.SkyHrefModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent],
                         imports: [
+                            i9.A11yModule,
                             i7.CommonModule,
-                            i9.FormsModule,
+                            forms.FormsModule,
                             i2$2.RouterModule,
                             i2.SkyI18nModule,
                             i1$1.SkyIconModule,
@@ -906,11 +1002,13 @@
      * document's `body` element. The `SkyFlyoutInstance` class watches for and triggers flyout events.
      */
     var SkyFlyoutService = /** @class */ (function () {
-        function SkyFlyoutService(coreAdapter, windowRef, dynamicComponentService, router) {
+        function SkyFlyoutService(coreAdapter, windowRef, dynamicComponentService, router, _ngZone, applicationRef) {
             this.coreAdapter = coreAdapter;
             this.windowRef = windowRef;
             this.dynamicComponentService = dynamicComponentService;
             this.router = router;
+            this._ngZone = _ngZone;
+            this.applicationRef = applicationRef;
             this.removeAfterClosed = false;
             this.isOpening = false;
             this.ngUnsubscribe = new rxjs.Subject();
@@ -923,21 +1021,22 @@
         };
         /**
          * Closes the flyout. This method also removes the flyout's HTML elements from the DOM.
+         * @param args Arguments used when closing the flyout.
          */
-        SkyFlyoutService.prototype.close = function () {
+        SkyFlyoutService.prototype.close = function (args) {
             if (this.host && !this.isOpening) {
                 this.removeAfterClosed = true;
                 this.host.instance.messageStream.next({
                     type: exports.SkyFlyoutMessageType.Close,
+                    data: {
+                        ignoreBeforeClose: args ? args.ignoreBeforeClose : false,
+                    },
                 });
             }
         };
         /**
          * Opens a flyout and displays the specified component.
-         * @param component Specifies the component to render. Since you generate the component dynamically instead of
-         * with HTML selectors, you must register it with the `entryComponents` property in the
-         * `app-extras.module.ts` file. For more information, see the
-         * [entry components tutorial](https://developer.blackbaud.com/skyux/learn/get-started/advanced/entry-components).
+         * @param component Specifies the component to render.
          * @param config Specifies the flyout configuration passed to the specified component's constructor.
          */
         SkyFlyoutService.prototype.open = function (component, config) {
@@ -954,6 +1053,14 @@
                     .subscribe(function (event) {
                     if (event instanceof i2$2.NavigationStart) {
                         _this.close();
+                        // Sanity check - if the host still exists after animations should have completed - remove host
+                        _this._ngZone.onStable.pipe(operators.take(1)).subscribe(function () {
+                            if (_this.host) {
+                                _this.removeHostComponent();
+                                // Without this tick - the host does not actually get removed on initial navigation in this case.
+                                _this.applicationRef.tick();
+                            }
+                        });
                     }
                 });
             }
@@ -1018,7 +1125,7 @@
                 });
                 this.removeAfterClosed = false;
                 flyoutInstance_1.messageStream
-                    .pipe(operators.take(1))
+                    .pipe(operators.takeUntil(this.ngUnsubscribe))
                     .subscribe(function (message) {
                     if (message.type === exports.SkyFlyoutMessageType.Close) {
                         _this.removeAfterClosed = true;
@@ -1040,19 +1147,20 @@
         };
         return SkyFlyoutService;
     }());
-    SkyFlyoutService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutService, deps: [{ token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyAppWindowRef }, { token: i1__namespace.SkyDynamicComponentService }, { token: i2__namespace$2.Router }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyFlyoutService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutService, providedIn: 'any' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFlyoutService, decorators: [{
+    SkyFlyoutService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutService, deps: [{ token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyAppWindowRef }, { token: i1__namespace.SkyDynamicComponentService }, { token: i2__namespace$2.Router }, { token: i0__namespace.NgZone }, { token: i0__namespace.ApplicationRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyFlyoutService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutService, providedIn: 'any' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutService, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'any',
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace.SkyCoreAdapterService }, { type: i1__namespace.SkyAppWindowRef }, { type: i1__namespace.SkyDynamicComponentService }, { type: i2__namespace$2.Router }]; } });
+            }], ctorParameters: function () { return [{ type: i1__namespace.SkyCoreAdapterService }, { type: i1__namespace.SkyAppWindowRef }, { type: i1__namespace.SkyDynamicComponentService }, { type: i2__namespace$2.Router }, { type: i0__namespace.NgZone }, { type: i0__namespace.ApplicationRef }]; } });
 
     /**
      * Generated bundle index. Do not edit.
      */
 
+    exports.SkyFlyoutBeforeCloseHandler = SkyFlyoutBeforeCloseHandler;
     exports.SkyFlyoutInstance = SkyFlyoutInstance;
     exports.SkyFlyoutModule = SkyFlyoutModule;
     exports.SkyFlyoutService = SkyFlyoutService;