@skyux/flyout 5.0.4 → 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.i9, global.i2$1, global.ng.animations, global.rxjs.operators, global.i1));
-})(this, (function (exports, i0, rxjs, i7, forms, i2$2, i1$1, i2, i9, 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,11 +23,12 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    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);
-    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
+    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
 
@@ -59,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;
@@ -68,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.
@@ -149,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();
@@ -352,6 +368,16 @@
                 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
      */
@@ -421,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;
@@ -431,11 +457,13 @@
             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;
@@ -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) {
@@ -687,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:
@@ -694,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;
@@ -810,14 +853,33 @@
                 }
             }
         };
+        /** 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.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 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    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  <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__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: 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: i9__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%)' })),
@@ -832,7 +894,7 @@
                 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  <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",
+                        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,
@@ -853,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,
@@ -865,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', {
@@ -882,15 +956,17 @@
         return SkyFlyoutModule;
     }());
     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: [i7.CommonModule,
+    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,
-            i9.SkyHrefModule], exports: [SkyFlyoutComponent] });
+            i10.SkyHrefModule], exports: [SkyFlyoutComponent] });
     SkyFlyoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutModule, imports: [[
+                i9.A11yModule,
                 i7.CommonModule,
                 forms.FormsModule,
                 i2$2.RouterModule,
@@ -898,13 +974,14 @@
                 i1$1.SkyIconModule,
                 SkyFlyoutResourcesModule,
                 i2$1.SkyThemeModule,
-                i9.SkyHrefModule,
+                i10.SkyHrefModule,
             ]] });
     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,
                             forms.FormsModule,
                             i2$2.RouterModule,
@@ -912,7 +989,7 @@
                             i1$1.SkyIconModule,
                             SkyFlyoutResourcesModule,
                             i2$1.SkyThemeModule,
-                            i9.SkyHrefModule,
+                            i10.SkyHrefModule,
                         ],
                         exports: [SkyFlyoutComponent],
                         entryComponents: [SkyFlyoutComponent],
@@ -925,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();
@@ -942,12 +1021,16 @@
         };
         /**
          * 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,
+                    },
                 });
             }
         };
@@ -970,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();
+                            }
+                        });
                     }
                 });
             }
@@ -1034,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;
@@ -1056,19 +1147,20 @@
         };
         return SkyFlyoutService;
     }());
-    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 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    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;