@skyux/flyout 5.0.3 → 5.5.0-alpha.0

package/fesm2015/skyux-flyout.js

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, NgModule, Injectable, Component, Input, Output, ReflectiveInjector, ElementRef, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener } from '@angular/core';
+import { EventEmitter, NgModule, Injectable, Component, Input, Output, Injector, ElementRef, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener } from '@angular/core';
 import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
+import * as i9 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -10,7 +12,7 @@ import * as i1$1 from '@skyux/indicators';
 import { SkyIconModule } from '@skyux/indicators';
 import * as i2$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import * as i9 from '@skyux/router';
+import * as i10 from '@skyux/router';
 import { SkyHrefModule } from '@skyux/router';
 import * as i2 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
@@ -46,6 +48,7 @@ class SkyFlyoutInstance {
          * @default true
          */
         this.isOpen = true;
+        this._beforeClose = new Subject();
         this._iteratorNextButtonClick = new EventEmitter();
         this._iteratorPreviousButtonClick = new EventEmitter();
         this._iteratorNextButtonDisabled = false;
@@ -55,6 +58,14 @@ class SkyFlyoutInstance {
             this.isOpen = false;
         });
     }
+    /**
+     * 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 beforeClose() {
+        return this._beforeClose;
+    }
     /**
      * Used to communicate with the host component.
      * @internal
@@ -116,10 +127,12 @@ class SkyFlyoutInstance {
     }
     /**
      * Closes the flyout instance and emits its `closed` event.
+     * @param args Arguments used when closing the flyout.
      */
-    close() {
+    close(args) {
         this.hostController.next({
             type: SkyFlyoutMessageType.Close,
+            data: { ignoreBeforeClose: args ? args.ignoreBeforeClose : false },
         });
         this._iteratorPreviousButtonClick.complete();
         this._iteratorNextButtonClick.complete();
@@ -155,16 +168,16 @@ class SkyFlyoutResourcesProvider {
  */
 class SkyFlyoutResourcesModule {
 }
-SkyFlyoutResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyFlyoutResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutResourcesModule, exports: [SkyI18nModule] });
-SkyFlyoutResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutResourcesModule, providers: [
+SkyFlyoutResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyFlyoutResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutResourcesModule, exports: [SkyI18nModule] });
+SkyFlyoutResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutResourcesModule, providers: [
         {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyFlyoutResourcesProvider,
             multi: true,
         },
     ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -232,9 +245,9 @@ class SkyFlyoutAdapterService {
         }
     }
 }
-SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyFlyoutAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
+SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFlyoutAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1.SkyAppWindowRef }]; } });
 
@@ -300,12 +313,21 @@ class SkyFlyoutMediaQueryService {
         this.currentSubject.complete();
     }
 }
-SkyFlyoutMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyFlyoutMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutMediaQueryService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutMediaQueryService, decorators: [{
+SkyFlyoutMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFlyoutMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutMediaQueryService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutMediaQueryService, decorators: [{
             type: 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.
+ */
+class SkyFlyoutBeforeCloseHandler {
+    constructor(closeFlyoutFunction) {
+        this.closeFlyout = closeFlyoutFunction;
+    }
+}
+
 /**
  * @internal
  */
@@ -340,9 +362,9 @@ class SkyFlyoutIteratorComponent {
         }
     }
 }
-SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0, 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$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
+SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵ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, 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$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-flyout-iterator',
@@ -366,7 +388,7 @@ let nextId = 0;
  * @internal
  */
 class SkyFlyoutComponent {
-    constructor(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService) {
+    constructor(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService, _ngZone) {
         this.adapter = adapter;
         this.changeDetector = changeDetector;
         this.injector = injector;
@@ -375,11 +397,13 @@ class SkyFlyoutComponent {
         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;
@@ -465,16 +489,16 @@ class SkyFlyoutComponent {
         this.config.iteratorPreviousButtonDisabled =
             this.config.iteratorPreviousButtonDisabled || false;
         const 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.
-         */
-        const providers = ReflectiveInjector.resolve(this.config.providers);
-        const injector = ReflectiveInjector.fromResolvedProviders(providers, this.injector);
-        /* tslint:enable:deprecation */
+        const injector = Injector.create({
+            parent: this.injector,
+            providers: this.config.providers,
+        });
         const 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: SkyFlyoutMessageType.Open,
@@ -513,7 +537,9 @@ class SkyFlyoutComponent {
         return false;
     }
     getAnimationState() {
-        return this.isOpening ? FLYOUT_OPEN_STATE : FLYOUT_CLOSED_STATE;
+        return this.instanceReady && this.isOpening
+            ? FLYOUT_OPEN_STATE
+            : FLYOUT_CLOSED_STATE;
     }
     animationDone(event) {
         if (event.toState === FLYOUT_OPEN_STATE) {
@@ -607,6 +633,7 @@ class SkyFlyoutComponent {
         return instance;
     }
     handleIncomingMessages(message) {
+        var _a;
         /* tslint:disable-next-line:switch-default */
         switch (message.type) {
             case SkyFlyoutMessageType.Open:
@@ -614,10 +641,21 @@ class SkyFlyoutComponent {
                     this.isOpen = false;
                     this.isOpening = true;
                 }
+                this.initFocusTrap();
                 break;
             case 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(() => {
+                        this.isOpen = true;
+                        this.isOpening = false;
+                    }));
+                }
                 break;
             case SkyFlyoutMessageType.EnableIteratorNextButton:
                 this.config.iteratorNextButtonDisabled = false;
@@ -730,13 +768,31 @@ class SkyFlyoutComponent {
             }
         }
     }
+    /** Executes a function when the zone is stable. */
+    _executeOnStable(fn) {
+        if (this._ngZone.isStable) {
+            fn();
+        }
+        else {
+            this._ngZone.onStable.pipe(take(1)).subscribe(fn);
+        }
+    }
+    initFocusTrap() {
+        this.enableTrapFocusAutoCapture = false;
+        this.enableTrapFocus = false;
+        // Waiting for zone to be stable will avoid ExpressionChangeAfterCheckedError.
+        this._executeOnStable(() => {
+            this.enableTrapFocusAutoCapture = true;
+            this.enableTrapFocus = true;
+        });
+    }
 }
-SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0.ElementRef }, { token: i1.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Component });
-SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
+SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0.ElementRef }, { token: i1.SkyUIConfigService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
         SkyFlyoutAdapterService,
         SkyFlyoutMediaQueryService,
         { provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
-    ], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: ElementRef, static: true }], ngImport: i0, 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  <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\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$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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe }, animations: [
+    ], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "flyoutCloseButton", first: true, predicate: ["flyoutCloseButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "flyoutContent", first: true, predicate: ["flyoutContent"], descendants: true, read: ElementRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: ElementRef, static: true }], ngImport: i0, 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$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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe }, animations: [
         trigger('flyoutState', [
             state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),
             state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
@@ -747,7 +803,7 @@ SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             transition(`* <=> *`, animate('250ms ease-in')),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.Default });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-flyout',
@@ -772,7 +828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                     // Allow automatic change detection for child components.
                     changeDetection: ChangeDetectionStrategy.Default,
                 }]
-        }], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i2$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0.ElementRef }, { type: i1.SkyUIConfigService }]; }, propDecorators: { flyoutRef: [{
+        }], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i2$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0.ElementRef }, { type: i1.SkyUIConfigService }, { type: i0.NgZone }]; }, propDecorators: { flyoutRef: [{
                 type: ViewChild,
                 args: ['flyoutRef', {
                         read: ElementRef,
@@ -784,6 +840,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                         read: ViewContainerRef,
                         static: true,
                     }]
+            }], flyoutCloseButton: [{
+                type: ViewChild,
+                args: ['flyoutCloseButton', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], flyoutContent: [{
+                type: ViewChild,
+                args: ['flyoutContent', {
+                        read: ElementRef,
+                        static: true,
+                    }]
             }], flyoutHeader: [{
                 type: ViewChild,
                 args: ['flyoutHeader', {
@@ -797,8 +865,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
 
 class SkyFlyoutModule {
 }
-SkyFlyoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyFlyoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [CommonModule,
+SkyFlyoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyFlyoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [A11yModule,
+        CommonModule,
         FormsModule,
         RouterModule,
         SkyI18nModule,
@@ -806,7 +875,8 @@ SkyFlyoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         SkyFlyoutResourcesModule,
         SkyThemeModule,
         SkyHrefModule], exports: [SkyFlyoutComponent] });
-SkyFlyoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutModule, imports: [[
+SkyFlyoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutModule, imports: [[
+            A11yModule,
             CommonModule,
             FormsModule,
             RouterModule,
@@ -816,11 +886,12 @@ SkyFlyoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             SkyThemeModule,
             SkyHrefModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent],
                     imports: [
+                        A11yModule,
                         CommonModule,
                         FormsModule,
                         RouterModule,
@@ -841,11 +912,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
  * document's `body` element. The `SkyFlyoutInstance` class watches for and triggers flyout events.
  */
 class SkyFlyoutService {
-    constructor(coreAdapter, windowRef, dynamicComponentService, router) {
+    constructor(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 Subject();
@@ -858,21 +931,22 @@ class SkyFlyoutService {
     }
     /**
      * Closes the flyout. This method also removes the flyout's HTML elements from the DOM.
+     * @param args Arguments used when closing the flyout.
      */
-    close() {
+    close(args) {
         if (this.host && !this.isOpening) {
             this.removeAfterClosed = true;
             this.host.instance.messageStream.next({
                 type: 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.
      */
     open(component, config) {
@@ -888,6 +962,14 @@ class SkyFlyoutService {
                 .subscribe((event) => {
                 if (event instanceof NavigationStart) {
                     this.close();
+                    // Sanity check - if the host still exists after animations should have completed - remove host
+                    this._ngZone.onStable.pipe(take(1)).subscribe(() => {
+                        if (this.host) {
+                            this.removeHostComponent();
+                            // Without this tick - the host does not actually get removed on initial navigation in this case.
+                            this.applicationRef.tick();
+                        }
+                    });
                 }
             });
         }
@@ -951,7 +1033,7 @@ class SkyFlyoutService {
             });
             this.removeAfterClosed = false;
             flyoutInstance.messageStream
-                .pipe(take(1))
+                .pipe(takeUntil(this.ngUnsubscribe))
                 .subscribe((message) => {
                 if (message.type === SkyFlyoutMessageType.Close) {
                     this.removeAfterClosed = true;
@@ -972,18 +1054,18 @@ class SkyFlyoutService {
         this.ngUnsubscribe = new Subject();
     }
 }
-SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i1.SkyAppWindowRef }, { token: i1.SkyDynamicComponentService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyFlyoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: SkyFlyoutService, decorators: [{
+SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i1.SkyAppWindowRef }, { token: i1.SkyDynamicComponentService }, { token: i2$2.Router }, { token: i0.NgZone }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFlyoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'any',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i1.SkyAppWindowRef }, { type: i1.SkyDynamicComponentService }, { type: i2$2.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i1.SkyAppWindowRef }, { type: i1.SkyDynamicComponentService }, { type: i2$2.Router }, { type: i0.NgZone }, { type: i0.ApplicationRef }]; } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SkyFlyoutInstance, SkyFlyoutMessageType, SkyFlyoutModule, SkyFlyoutService, SkyFlyoutComponent as λ1 };
+export { SkyFlyoutBeforeCloseHandler, SkyFlyoutInstance, SkyFlyoutMessageType, SkyFlyoutModule, SkyFlyoutService, SkyFlyoutComponent as λ1 };
 //# sourceMappingURL=skyux-flyout.js.map