@skyux/flyout 5.7.2 → 6.0.0-beta.2

package/bundles/skyux-flyout.umd.js

@@ -1,1179 +0,0 @@
-(function (global, factory) {
-    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/i18n'), require('@skyux/indicators'), require('@skyux/router'), require('@skyux/theme'), require('@angular/animations'), require('@skyux/core'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@skyux/flyout', ['exports', '@angular/core', 'rxjs', '@angular/cdk/a11y', '@angular/common', '@angular/forms', '@angular/router', '@skyux/i18n', '@skyux/indicators', '@skyux/router', '@skyux/theme', '@angular/animations', '@skyux/core', 'rxjs/operators'], 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.i2, global.i1, global.i10, global.i2$1, global.ng.animations, global.i1$1, global.rxjs.operators));
-})(this, (function (exports, i0, rxjs, i9, i7, forms, i2$2, i2, i1, i10, i2$1, animations, i1$1, operators) { 'use strict';
-
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
-        var n = Object.create(null);
-        if (e) {
-            Object.keys(e).forEach(function (k) {
-                if (k !== 'default') {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        }
-        n["default"] = e;
-        return Object.freeze(n);
-    }
-
-    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 i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-
-    /**
-     * @internal
-     */
-    exports.SkyFlyoutMessageType = void 0;
-    (function (SkyFlyoutMessageType) {
-        SkyFlyoutMessageType[SkyFlyoutMessageType["Open"] = 0] = "Open";
-        SkyFlyoutMessageType[SkyFlyoutMessageType["Close"] = 1] = "Close";
-        SkyFlyoutMessageType[SkyFlyoutMessageType["EnableIteratorNextButton"] = 2] = "EnableIteratorNextButton";
-        SkyFlyoutMessageType[SkyFlyoutMessageType["EnableIteratorPreviousButton"] = 3] = "EnableIteratorPreviousButton";
-        SkyFlyoutMessageType[SkyFlyoutMessageType["DisableIteratorNextButton"] = 4] = "DisableIteratorNextButton";
-        SkyFlyoutMessageType[SkyFlyoutMessageType["DisableIteratorPreviousButton"] = 5] = "DisableIteratorPreviousButton";
-    })(exports.SkyFlyoutMessageType || (exports.SkyFlyoutMessageType = {}));
-
-    /**
-     * Represents a single displayed flyout.
-     */
-    var SkyFlyoutInstance = /** @class */ (function () {
-        function SkyFlyoutInstance() {
-            var _this = this;
-            /**
-             * An event that the flyout instance emits when it closes.
-             */
-            this.closed = new i0.EventEmitter();
-            /**
-             * A `boolean` value that returns `true` if the flyout is open.
-             * @default true
-             */
-            this.isOpen = true;
-            this._beforeClose = new rxjs.Subject();
-            this._iteratorNextButtonClick = new i0.EventEmitter();
-            this._iteratorPreviousButtonClick = new i0.EventEmitter();
-            this._iteratorNextButtonDisabled = false;
-            this._iteratorPreviousButtonDisabled = false;
-            this._hostController = new rxjs.Subject();
-            this.closed.subscribe(function () {
-                _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.
-             * @internal
-             */
-            get: function () {
-                return this._hostController;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFlyoutInstance.prototype, "iteratorNextButtonClick", {
-            /**
-             * An event that the flyout instance emits when users click the next iterator button.
-             */
-            get: function () {
-                return this._iteratorNextButtonClick;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFlyoutInstance.prototype, "iteratorPreviousButtonClick", {
-            /**
-             * An event that the flyout instance emits when users click the previous iterator button.
-             */
-            get: function () {
-                return this._iteratorPreviousButtonClick;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFlyoutInstance.prototype, "iteratorNextButtonDisabled", {
-            get: function () {
-                return this._iteratorNextButtonDisabled;
-            },
-            /**
-             * Disables the next iterator button.
-             * @default false
-             */
-            set: function (newValue) {
-                this._iteratorNextButtonDisabled = newValue;
-                if (newValue) {
-                    this.hostController.next({
-                        type: exports.SkyFlyoutMessageType.DisableIteratorNextButton,
-                    });
-                }
-                else {
-                    this.hostController.next({
-                        type: exports.SkyFlyoutMessageType.EnableIteratorNextButton,
-                    });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFlyoutInstance.prototype, "iteratorPreviousButtonDisabled", {
-            get: function () {
-                return this._iteratorPreviousButtonDisabled;
-            },
-            /**
-             * Disables the previous iterator button.
-             * @default false
-             */
-            set: function (newValue) {
-                this._iteratorPreviousButtonDisabled = newValue;
-                if (newValue) {
-                    this.hostController.next({
-                        type: exports.SkyFlyoutMessageType.DisableIteratorPreviousButton,
-                    });
-                }
-                else {
-                    this.hostController.next({
-                        type: exports.SkyFlyoutMessageType.EnableIteratorPreviousButton,
-                    });
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        /**
-         * Closes the flyout instance and emits its `closed` event.
-         * @param args Arguments used when closing the flyout.
-         */
-        SkyFlyoutInstance.prototype.close = function (args) {
-            this.hostController.next({
-                type: exports.SkyFlyoutMessageType.Close,
-                data: { ignoreBeforeClose: args ? args.ignoreBeforeClose : false },
-            });
-            this._iteratorPreviousButtonClick.complete();
-            this._iteratorNextButtonClick.complete();
-            this.hostController.complete();
-        };
-        return SkyFlyoutInstance;
-    }());
-
-    /**
-     * NOTICE: DO NOT MODIFY THIS FILE!
-     * The contents of this file were automatically generated by
-     * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-flyout' schematic.
-     * To update this file, simply rerun the command.
-     */
-    var RESOURCES = {
-        'EN-US': {
-            skyux_flyout_close: { message: 'Close flyout' },
-            skyux_flyout_iterator_previous_button: { message: 'Previous' },
-            skyux_flyout_iterator_next_button: { message: 'Next' },
-            skyux_flyout_permalink_button: { message: 'View record' },
-            skyux_flyout_primary_action_button: { message: 'Create list' },
-            skyux_flyout_resize_handle: {
-                message: 'Resize the flyout window. Press the enter or space key to activate, then use left arrow key to expand the flyout window and right arrow key to shrink the flyout window. Press the enter, space, or tab key to deactivate.',
-            },
-        },
-    };
-    var SkyFlyoutResourcesProvider = /** @class */ (function () {
-        function SkyFlyoutResourcesProvider() {
-        }
-        SkyFlyoutResourcesProvider.prototype.getString = function (localeInfo, name) {
-            return i2.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-        };
-        return SkyFlyoutResourcesProvider;
-    }());
-    /**
-     * Import into any component library module that needs to use resource strings.
-     */
-    var SkyFlyoutResourcesModule = /** @class */ (function () {
-        function SkyFlyoutResourcesModule() {
-        }
-        return SkyFlyoutResourcesModule;
-    }());
-    SkyFlyoutResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyFlyoutResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, exports: [i2.SkyI18nModule] });
-    SkyFlyoutResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, providers: [
-            {
-                provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
-                useClass: SkyFlyoutResourcesProvider,
-                multi: true,
-            },
-        ], imports: [i2.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutResourcesModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        exports: [i2.SkyI18nModule],
-                        providers: [
-                            {
-                                provide: i2.SKY_LIB_RESOURCES_PROVIDERS,
-                                useClass: SkyFlyoutResourcesProvider,
-                                multi: true,
-                            },
-                        ],
-                    }]
-            }] });
-
-    /**
-     * @internal
-     */
-    var SkyFlyoutIteratorComponent = /** @class */ (function () {
-        function SkyFlyoutIteratorComponent() {
-            this.ngUnsubscribe = new rxjs.Subject();
-            this._nextButtonClick = new i0.EventEmitter();
-            this._previousButtonClick = new i0.EventEmitter();
-        }
-        Object.defineProperty(SkyFlyoutIteratorComponent.prototype, "previousButtonClick", {
-            get: function () {
-                return this._previousButtonClick;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFlyoutIteratorComponent.prototype, "nextButtonClick", {
-            get: function () {
-                return this._nextButtonClick;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyFlyoutIteratorComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-            this._previousButtonClick.complete();
-            this._nextButtonClick.complete();
-        };
-        SkyFlyoutIteratorComponent.prototype.onIteratorPreviousClick = function () {
-            /* istanbul ignore else */
-            if (!this.previousButtonDisabled) {
-                this._previousButtonClick.emit();
-            }
-        };
-        SkyFlyoutIteratorComponent.prototype.onIteratorNextClick = function () {
-            /* istanbul ignore else */
-            if (!this.nextButtonDisabled) {
-                this._nextButtonClick.emit();
-            }
-        };
-        return SkyFlyoutIteratorComponent;
-    }());
-    SkyFlyoutIteratorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyFlyoutIteratorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0__namespace, template: "<div id=\"iterators\" class=\"sky-flyout-iterators\">\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"\n      'skyux_flyout_iterator_previous_button' | skyLibResources\n    \"\n    [disabled]=\"previousButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorPreviousClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-up\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n    [disabled]=\"nextButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorNextClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-down\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"], components: [{ type: i1__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2__namespace$1.SkyLibResourcesPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-flyout-iterator',
-                        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"],
-                    }]
-            }], propDecorators: { nextButtonDisabled: [{
-                    type: i0.Input
-                }], previousButtonDisabled: [{
-                    type: i0.Input
-                }], previousButtonClick: [{
-                    type: i0.Output
-                }], nextButtonClick: [{
-                    type: i0.Output
-                }] } });
-
-    /**
-     * @internal
-     */
-    var SkyFlyoutAdapterService = /** @class */ (function () {
-        function SkyFlyoutAdapterService(rendererFactory, windowRef) {
-            this.rendererFactory = rendererFactory;
-            this.windowRef = windowRef;
-            this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
-        }
-        SkyFlyoutAdapterService.prototype.adjustHeaderForHelp = function (header) {
-            var windowObj = this.windowRef.nativeWindow;
-            var helpWidget = windowObj.document.getElementById('bb-help-invoker');
-            if (helpWidget) {
-                this.renderer.addClass(header.nativeElement, 'sky-flyout-help-shim');
-            }
-        };
-        SkyFlyoutAdapterService.prototype.setResponsiveClass = function (element, breakpoint) {
-            var nativeEl = element.nativeElement;
-            this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
-            this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
-            this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
-            this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
-            var newClass;
-            switch (breakpoint) {
-                case i1$1.SkyMediaBreakpoints.xs: {
-                    newClass = 'sky-responsive-container-xs';
-                    break;
-                }
-                case i1$1.SkyMediaBreakpoints.sm: {
-                    newClass = 'sky-responsive-container-sm';
-                    break;
-                }
-                case i1$1.SkyMediaBreakpoints.md: {
-                    newClass = 'sky-responsive-container-md';
-                    break;
-                }
-                default: {
-                    newClass = 'sky-responsive-container-lg';
-                    break;
-                }
-            }
-            this.renderer.addClass(nativeEl, newClass);
-        };
-        SkyFlyoutAdapterService.prototype.toggleIframePointerEvents = function (enable) {
-            // When iframes are present on the page, they may interfere with dragging
-            // temporarily disable pointer events in iframes when dragging starts.
-            // When re-enabling we set to the empty string as it will remove the element styling
-            // and fall back to any css originally given to iframe
-            var iframes = document.querySelectorAll('iframe');
-            for (var i = 0; i < iframes.length; i++) {
-                iframes[i].style.pointerEvents = enable ? '' : 'none';
-            }
-        };
-        return SkyFlyoutAdapterService;
-    }());
-    SkyFlyoutAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }, { token: i1__namespace$1.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyFlyoutAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutAdapterService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }, { type: i1__namespace$1.SkyAppWindowRef }]; } });
-
-    /**
-     * @internal
-     */
-    var SkyFlyoutMediaQueryService = /** @class */ (function () {
-        function SkyFlyoutMediaQueryService() {
-            this.currentSubject = new rxjs.BehaviorSubject(this.current);
-            this._current = i1$1.SkyMediaBreakpoints.xs;
-            this.currentSubject.next(this._current);
-        }
-        Object.defineProperty(SkyFlyoutMediaQueryService.prototype, "current", {
-            get: function () {
-                return this._current;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyFlyoutMediaQueryService.prototype.subscribe = function (listener) {
-            return this.currentSubject.subscribe({
-                next: function (breakpoints) {
-                    listener(breakpoints);
-                },
-            });
-        };
-        SkyFlyoutMediaQueryService.prototype.setBreakpointForWidth = function (width) {
-            var breakpoint;
-            if (this.isWidthWithinBreakpiont(width, i1$1.SkyMediaBreakpoints.xs)) {
-                breakpoint = i1$1.SkyMediaBreakpoints.xs;
-            }
-            else if (this.isWidthWithinBreakpiont(width, i1$1.SkyMediaBreakpoints.sm)) {
-                breakpoint = i1$1.SkyMediaBreakpoints.sm;
-            }
-            else if (this.isWidthWithinBreakpiont(width, i1$1.SkyMediaBreakpoints.md)) {
-                breakpoint = i1$1.SkyMediaBreakpoints.md;
-            }
-            else {
-                breakpoint = i1$1.SkyMediaBreakpoints.lg;
-            }
-            this._current = breakpoint;
-            this.currentSubject.next(this._current);
-        };
-        SkyFlyoutMediaQueryService.prototype.isWidthWithinBreakpiont = function (width, breakpoint) {
-            var xsBreakpointMaxPixels = 767;
-            var smBreakpointMinPixels = 768;
-            var smBreakpointMaxPixels = 991;
-            var mdBreakpointMinPixels = 992;
-            var mdBreakpointMaxPixels = 1199;
-            var lgBreakpointMinPixels = 1200;
-            switch (breakpoint) {
-                case i1$1.SkyMediaBreakpoints.xs: {
-                    return width <= xsBreakpointMaxPixels;
-                }
-                case i1$1.SkyMediaBreakpoints.sm: {
-                    return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
-                }
-                case i1$1.SkyMediaBreakpoints.md: {
-                    return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
-                }
-                default: {
-                    return width >= lgBreakpointMinPixels;
-                }
-            }
-        };
-        SkyFlyoutMediaQueryService.prototype.destroy = function () {
-            this.currentSubject.complete();
-        };
-        return SkyFlyoutMediaQueryService;
-    }());
-    SkyFlyoutMediaQueryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyFlyoutMediaQueryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutMediaQueryService, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return []; } });
-
-    /**
-     * Handler for notifying the flyout when it is appropriate to close the flyout. This will be returned from the flyout instance's `beforeClose` observable.
-     */
-    var SkyFlyoutBeforeCloseHandler = /** @class */ (function () {
-        function SkyFlyoutBeforeCloseHandler(closeFlyoutFunction) {
-            this.closeFlyout = closeFlyoutFunction;
-        }
-        return SkyFlyoutBeforeCloseHandler;
-    }());
-
-    var FLYOUT_OPEN_STATE = 'flyoutOpen';
-    var FLYOUT_CLOSED_STATE = 'flyoutClosed';
-    var nextId = 0;
-    /**
-     * @internal
-     */
-    var SkyFlyoutComponent = /** @class */ (function () {
-        function SkyFlyoutComponent(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService, _ngZone) {
-            var _this = this;
-            this.adapter = adapter;
-            this.changeDetector = changeDetector;
-            this.injector = injector;
-            this.resolver = resolver;
-            this.resourcesService = resourcesService;
-            this.flyoutMediaQueryService = flyoutMediaQueryService;
-            this.elementRef = elementRef;
-            this.uiConfigService = uiConfigService;
-            this._ngZone = _ngZone;
-            this.flyoutId = "sky-flyout-" + ++nextId;
-            this.flyoutState = FLYOUT_CLOSED_STATE;
-            this.isOpen = false;
-            this.isOpening = false;
-            this.flyoutWidth = 0;
-            this.instanceReady = false;
-            this.isDragging = false;
-            this.isFullscreen = false;
-            this.resizeKeyControlActive = false;
-            this.xCoord = 0;
-            this.windowBufferSize = 20;
-            /**
-             * @internal
-             */
-            this.widthStep = 10;
-            this.ngUnsubscribe = new rxjs.Subject();
-            this._messageStream = new rxjs.Subject();
-            // All commands flow through the message stream.
-            this.messageStream
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (message) {
-                _this.handleIncomingMessages(message);
-            });
-        }
-        Object.defineProperty(SkyFlyoutComponent.prototype, "messageStream", {
-            get: function () {
-                return this._messageStream;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFlyoutComponent.prototype, "permalink", {
-            get: function () {
-                var permalink = this.config.permalink;
-                if (permalink) {
-                    return permalink;
-                }
-                return {};
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFlyoutComponent.prototype, "permalinkLabel", {
-            get: function () {
-                if (this.permalink.label) {
-                    return this.permalink.label;
-                }
-                return this.getString('skyux_flyout_permalink_button');
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFlyoutComponent.prototype, "primaryAction", {
-            get: function () {
-                var primaryAction = this.config.primaryAction;
-                if (primaryAction) {
-                    return primaryAction;
-                }
-                return {};
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SkyFlyoutComponent.prototype, "primaryActionLabel", {
-            get: function () {
-                if (this.config.primaryAction && this.config.primaryAction.label) {
-                    return this.config.primaryAction.label;
-                }
-                return this.getString('skyux_flyout_primary_action_button');
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkyFlyoutComponent.prototype.ngOnInit = function () {
-            this.adapter.adjustHeaderForHelp(this.flyoutHeader);
-        };
-        SkyFlyoutComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-        };
-        SkyFlyoutComponent.prototype.onWindowResize = function (event) {
-            if (this.flyoutMediaQueryService.isWidthWithinBreakpiont(event.target.innerWidth, i1$1.SkyMediaBreakpoints.xs)) {
-                this.updateBreakpointAndResponsiveClass(event.target.innerWidth);
-            }
-            else {
-                this.updateBreakpointAndResponsiveClass(this.flyoutWidth);
-            }
-            this.setFullscreen();
-            if (event.target.innerWidth - this.flyoutWidth < this.windowBufferSize) {
-                this.flyoutWidth = event.target.innerWidth - this.windowBufferSize;
-                this.xCoord = this.windowBufferSize;
-                this.setUserData();
-            }
-        };
-        SkyFlyoutComponent.prototype.attach = function (component, config) {
-            var _this = this;
-            this.cleanTemplate();
-            // Emit the closed event on any previously opened flyout instance
-            if (this.flyoutInstance) {
-                this.notifyClosed();
-            }
-            this.config = Object.assign({ providers: [] }, config);
-            this.config.defaultWidth =
-                this.config.defaultWidth || window.innerWidth / 2;
-            this.config.minWidth = this.config.minWidth || 320;
-            this.config.maxWidth = this.config.maxWidth || this.config.defaultWidth;
-            this.config.showIterator = this.config.showIterator || false;
-            this.config.iteratorNextButtonDisabled =
-                this.config.iteratorNextButtonDisabled || false;
-            this.config.iteratorPreviousButtonDisabled =
-                this.config.iteratorPreviousButtonDisabled || false;
-            var factory = this.resolver.resolveComponentFactory(component);
-            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,
-            });
-            if (this.config.settingsKey) {
-                this.uiConfigService
-                    .getConfig(this.config.settingsKey)
-                    .pipe(operators.take(1))
-                    .subscribe(function (value) {
-                    if (value && value.flyoutWidth) {
-                        _this.flyoutWidth = value.flyoutWidth;
-                    }
-                    else {
-                        // Bad data, or config is the default config.
-                        _this.flyoutWidth = _this.config.defaultWidth;
-                    }
-                    _this.checkInitialSize();
-                });
-            }
-            else {
-                this.flyoutWidth = this.config.defaultWidth;
-                this.checkInitialSize();
-            }
-            return this.flyoutInstance;
-        };
-        SkyFlyoutComponent.prototype.close = function () {
-            this.messageStream.next({
-                type: exports.SkyFlyoutMessageType.Close,
-            });
-        };
-        SkyFlyoutComponent.prototype.invokePrimaryAction = function () {
-            this.primaryAction.callback();
-            if (this.primaryAction.closeAfterInvoking) {
-                this.close();
-            }
-            return false;
-        };
-        SkyFlyoutComponent.prototype.getAnimationState = function () {
-            return this.instanceReady && this.isOpening
-                ? FLYOUT_OPEN_STATE
-                : FLYOUT_CLOSED_STATE;
-        };
-        SkyFlyoutComponent.prototype.animationDone = function (event) {
-            if (event.toState === FLYOUT_OPEN_STATE) {
-                this.isOpen = true;
-            }
-            if (event.toState === FLYOUT_CLOSED_STATE) {
-                this.isOpen = false;
-                this.notifyClosed();
-                this.cleanTemplate();
-            }
-        };
-        SkyFlyoutComponent.prototype.onHeaderGrabHandleMouseDown = function (event) {
-            this.onResizeHandleMouseDown(event);
-        };
-        SkyFlyoutComponent.prototype.onHeaderGrabHandleKeyDown = function (event) {
-            this.handleResizeKeyDown(event);
-        };
-        SkyFlyoutComponent.prototype.onResizeHandleKeyDown = function (event) {
-            this.handleResizeKeyDown(event);
-        };
-        SkyFlyoutComponent.prototype.onResizeHandleMouseDown = function (event) {
-            var _this = this;
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.isFullscreen) {
-                return;
-            }
-            this.isDragging = true;
-            this.xCoord = event.clientX;
-            this.adapter.toggleIframePointerEvents(false);
-            rxjs.fromEvent(document, 'mousemove')
-                .pipe(operators.takeWhile(function () {
-                return _this.isDragging;
-            }))
-                .subscribe(function (moveEvent) {
-                _this.onMouseMove(moveEvent);
-            });
-            rxjs.fromEvent(document, 'mouseup')
-                .pipe(operators.takeWhile(function () {
-                return _this.isDragging;
-            }))
-                .subscribe(function (mouseUpEvent) {
-                _this.onHandleRelease(mouseUpEvent);
-            });
-        };
-        SkyFlyoutComponent.prototype.onMouseMove = function (event) {
-            /* Sanity check */
-            /* istanbul ignore if */
-            if (!this.isDragging) {
-                return;
-            }
-            var offsetX = event.clientX - this.xCoord;
-            var width = this.flyoutWidth;
-            width -= offsetX;
-            if (width < this.config.minWidth || width > this.config.maxWidth) {
-                return;
-            }
-            if (window.innerWidth - width < this.windowBufferSize) {
-                width = window.innerWidth - this.windowBufferSize;
-                this.xCoord = this.windowBufferSize;
-            }
-            else {
-                this.xCoord = event.clientX;
-            }
-            this.flyoutWidth = width;
-            this.updateBreakpointAndResponsiveClass(this.flyoutWidth);
-            this.changeDetector.markForCheck();
-        };
-        SkyFlyoutComponent.prototype.onHandleRelease = function (event) {
-            var _this = this;
-            rxjs.fromEvent(document, 'click')
-                .pipe(operators.take(1))
-                .subscribe(function () {
-                _this.isDragging = false;
-                _this.adapter.toggleIframePointerEvents(true);
-                _this.setUserData();
-            });
-        };
-        SkyFlyoutComponent.prototype.onIteratorPreviousButtonClick = function () {
-            this.flyoutInstance.iteratorPreviousButtonClick.emit();
-        };
-        SkyFlyoutComponent.prototype.onIteratorNextButtonClick = function () {
-            this.flyoutInstance.iteratorNextButtonClick.emit();
-        };
-        SkyFlyoutComponent.prototype.createFlyoutInstance = function (component) {
-            var _this = this;
-            var instance = new SkyFlyoutInstance();
-            instance.componentInstance = component;
-            instance.hostController
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (message) {
-                _this.messageStream.next(message);
-            });
-            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:
-                    if (!this.isOpen) {
-                        this.isOpen = false;
-                        this.isOpening = true;
-                    }
-                    this.initFocusTrap();
-                    break;
-                case exports.SkyFlyoutMessageType.Close:
-                    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;
-                    break;
-                case exports.SkyFlyoutMessageType.EnableIteratorPreviousButton:
-                    this.config.iteratorPreviousButtonDisabled = false;
-                    break;
-                case exports.SkyFlyoutMessageType.DisableIteratorNextButton:
-                    this.config.iteratorNextButtonDisabled = true;
-                    break;
-                case exports.SkyFlyoutMessageType.DisableIteratorPreviousButton:
-                    this.config.iteratorPreviousButtonDisabled = true;
-                    break;
-            }
-            this.changeDetector.markForCheck();
-        };
-        SkyFlyoutComponent.prototype.notifyClosed = function () {
-            this.flyoutInstance.closed.emit();
-            this.flyoutInstance.closed.complete();
-        };
-        SkyFlyoutComponent.prototype.cleanTemplate = function () {
-            this.target.clear();
-        };
-        SkyFlyoutComponent.prototype.updateBreakpointAndResponsiveClass = function (width) {
-            this.flyoutMediaQueryService.setBreakpointForWidth(width);
-            var newBreakpiont = this.flyoutMediaQueryService.current;
-            this.adapter.setResponsiveClass(this.elementRef, newBreakpiont);
-        };
-        SkyFlyoutComponent.prototype.setFullscreen = function () {
-            if (window.innerWidth - this.windowBufferSize < this.config.minWidth) {
-                this.isFullscreen = true;
-            }
-            else {
-                this.isFullscreen = false;
-            }
-        };
-        SkyFlyoutComponent.prototype.setUserData = function () {
-            if (this.config.settingsKey) {
-                this.uiConfigService
-                    .setConfig(this.config.settingsKey, {
-                    flyoutWidth: this.flyoutWidth,
-                })
-                    .pipe(operators.take(1))
-                    .subscribe(
-                // eslint-disable-next-line @typescript-eslint/no-empty-function
-                function () { }, function (err) {
-                    console.warn('Could not save flyout data.');
-                    console.warn(err);
-                });
-            }
-        };
-        SkyFlyoutComponent.prototype.checkInitialSize = function () {
-            if (this.flyoutWidth < this.config.minWidth) {
-                this.flyoutWidth = this.config.minWidth;
-                this.setUserData();
-            }
-            else if (this.flyoutWidth > this.config.maxWidth) {
-                this.flyoutWidth = this.config.maxWidth;
-                this.setUserData();
-            }
-            // Ensure flyout does not load larger than the window and its buffer
-            if (window.innerWidth - this.flyoutWidth < this.windowBufferSize) {
-                this.flyoutWidth = window.innerWidth - this.windowBufferSize;
-                this.xCoord = this.windowBufferSize;
-                this.setUserData();
-            }
-            if (this.flyoutMediaQueryService.isWidthWithinBreakpiont(window.innerWidth, i1$1.SkyMediaBreakpoints.xs)) {
-                this.updateBreakpointAndResponsiveClass(window.innerWidth);
-            }
-            else {
-                this.updateBreakpointAndResponsiveClass(this.flyoutWidth);
-            }
-            this.setFullscreen();
-        };
-        SkyFlyoutComponent.prototype.getString = function (key) {
-            // TODO: Need to implement the async `getString` method in a breaking change.
-            return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
-        };
-        SkyFlyoutComponent.prototype.handleResizeKeyDown = function (event) {
-            /* istanbul ignore else */
-            if (event.key) {
-                var keyPressed = event.key.toLowerCase().replace('arrow', '');
-                switch (keyPressed) {
-                    case 'enter':
-                    case ' ':
-                        this.resizeKeyControlActive = !this.resizeKeyControlActive;
-                        break;
-                    case 'tab':
-                        /* istanbul ignore else */
-                        if (this.resizeKeyControlActive) {
-                            this.resizeKeyControlActive = false;
-                        }
-                        break;
-                    case 'left':
-                        if (this.resizeKeyControlActive) {
-                            /* istanbul ignore else */
-                            if (this.flyoutWidth < this.config.maxWidth) {
-                                this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
-                            }
-                        }
-                        break;
-                    case 'right':
-                        if (this.resizeKeyControlActive) {
-                            /* istanbul ignore else */
-                            if (this.flyoutWidth > this.config.minWidth) {
-                                this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
-                            }
-                        }
-                        break;
-                    /* istanbul ignore next */
-                    default:
-                        break;
-                }
-            }
-        };
-        /** Executes a function when the zone is stable. */
-        SkyFlyoutComponent.prototype._executeOnStable = function (fn) {
-            if (this._ngZone.isStable) {
-                fn();
-            }
-            else {
-                this._ngZone.onStable.pipe(operators.take(1)).subscribe(fn);
-            }
-        };
-        SkyFlyoutComponent.prototype.initFocusTrap = function () {
-            var _this = this;
-            this.enableTrapFocusAutoCapture = false;
-            this.enableTrapFocus = false;
-            // Waiting for zone to be stable will avoid ExpressionChangeAfterCheckedError.
-            this._executeOnStable(function () {
-                _this.enableTrapFocusAutoCapture = true;
-                _this.enableTrapFocus = true;
-            });
-        };
-        return SkyFlyoutComponent;
-    }());
-    SkyFlyoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.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$1.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$1.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: "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.λ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%)' })),
-                animations.transition('void => *', [
-                    animations.style({ transform: 'translateX(100%)' }),
-                    animations.animate(250),
-                ]),
-                animations.transition("* <=> *", animations.animate('250ms ease-in')),
-            ]),
-        ], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-flyout',
-                        template: "<div\n  class=\"sky-flyout\"\n  tabindex=\"-1\"\n  [attr.role]=\"config?.ariaRole ? 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,
-                            SkyFlyoutMediaQueryService,
-                            { provide: i1$1.SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
-                        ],
-                        animations: [
-                            animations.trigger('flyoutState', [
-                                animations.state(FLYOUT_OPEN_STATE, animations.style({ transform: 'initial' })),
-                                animations.state(FLYOUT_CLOSED_STATE, animations.style({ transform: 'translateX(100%)' })),
-                                animations.transition('void => *', [
-                                    animations.style({ transform: 'translateX(100%)' }),
-                                    animations.animate(250),
-                                ]),
-                                animations.transition("* <=> *", animations.animate('250ms ease-in')),
-                            ]),
-                        ],
-                        // 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$1.SkyUIConfigService }, { type: i0__namespace.NgZone }]; }, propDecorators: { flyoutRef: [{
-                    type: i0.ViewChild,
-                    args: ['flyoutRef', {
-                            read: i0.ElementRef,
-                            static: true,
-                        }]
-                }], target: [{
-                    type: i0.ViewChild,
-                    args: ['target', {
-                            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', {
-                            read: i0.ElementRef,
-                            static: true,
-                        }]
-                }], onWindowResize: [{
-                    type: i0.HostListener,
-                    args: ['window:resize', ['$event']]
-                }] } });
-
-    var SkyFlyoutModule = /** @class */ (function () {
-        function SkyFlyoutModule() {
-        }
-        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: [i9.A11yModule,
-            i7.CommonModule,
-            forms.FormsModule,
-            i2$2.RouterModule,
-            i2.SkyI18nModule,
-            i1.SkyIconModule,
-            SkyFlyoutResourcesModule,
-            i2$1.SkyThemeModule,
-            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,
-                i2.SkyI18nModule,
-                i1.SkyIconModule,
-                SkyFlyoutResourcesModule,
-                i2$1.SkyThemeModule,
-                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,
-                            i2.SkyI18nModule,
-                            i1.SkyIconModule,
-                            SkyFlyoutResourcesModule,
-                            i2$1.SkyThemeModule,
-                            i10.SkyHrefModule,
-                        ],
-                        exports: [SkyFlyoutComponent],
-                        entryComponents: [SkyFlyoutComponent],
-                    }]
-            }] });
-
-    /**
-     * Launches flyouts and provides a common look and feel.
-     * This service dynamically generates the flyout component and appends it directly to the
-     * document's `body` element. The `SkyFlyoutInstance` class watches for and triggers flyout events.
-     */
-    var SkyFlyoutService = /** @class */ (function () {
-        function SkyFlyoutService(coreAdapter, windowRef, dynamicComponentService, router, _ngZone, 
-        // NOTE: This used to be used for an `applicationRef.tick` which has since been removed.
-        // We can not remove this due to it being a breaking change for those manually constructing the service.
-        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();
-        }
-        SkyFlyoutService.prototype.ngOnDestroy = function () {
-            this.removeListners();
-            if (this.host) {
-                this.removeHostComponent();
-            }
-        };
-        /**
-         * 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 (args) {
-            if (this.host && !this.isOpening) {
-                this.host.instance.messageStream.next({
-                    type: exports.SkyFlyoutMessageType.Close,
-                    data: {
-                        ignoreBeforeClose: args ? args.ignoreBeforeClose : false,
-                    },
-                });
-            }
-        };
-        /**
-         * Opens a flyout and displays the specified component.
-         * @param component Specifies the component to render.
-         * @param config Specifies the flyout configuration passed to the specified component's constructor.
-         */
-        SkyFlyoutService.prototype.open = function (component, config) {
-            var _this = this;
-            // isOpening flag will prevent close() from firing when open() is also fired.
-            this.isOpening = true;
-            this.windowRef.nativeWindow.setTimeout(function () {
-                _this.isOpening = false;
-            });
-            if (!this.host) {
-                this.host = this.createHostComponent();
-                this.router.events
-                    .pipe(operators.takeWhile(function () { return _this.host !== undefined; }))
-                    .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();
-                            }
-                        });
-                    }
-                });
-            }
-            var flyout = this.host.instance.attach(component, config);
-            this.addListeners(flyout);
-            return flyout;
-        };
-        SkyFlyoutService.prototype.createHostComponent = function () {
-            this.host =
-                this.dynamicComponentService.createComponent(SkyFlyoutComponent);
-            return this.host;
-        };
-        SkyFlyoutService.prototype.removeHostComponent = function () {
-            if (this.host) {
-                this.dynamicComponentService.removeComponent(this.host);
-                this.host = undefined;
-            }
-        };
-        SkyFlyoutService.prototype.addListeners = function (flyout) {
-            var _this = this;
-            /* istanbul ignore else */
-            if (this.host) {
-                var flyoutInstance_1 = this.host.instance;
-                var doClose_1 = false;
-                /**
-                 * Handles when to close a flyout.
-                 * Note: We're using `mouseup` in order to capture the parent of certain targets that will be
-                 * deleted immediately after being clicked. If we use `click`, the event is fired after the
-                 * element is removed from the DOM making it impossible to check the parent's z-index
-                 * relative to the flyout's container.
-                 */
-                rxjs.fromEvent(document, 'mouseup')
-                    .pipe(operators.takeUntil(this.ngUnsubscribe))
-                    .subscribe(function (event) {
-                    doClose_1 = false;
-                    if (_this.host.instance.isDragging) {
-                        return;
-                    }
-                    if (flyoutInstance_1.flyoutRef.nativeElement.contains(event.target)) {
-                        return;
-                    }
-                    var isAbove = event.target === document
-                        ? false
-                        : _this.coreAdapter.isTargetAboveElement(event.target, flyoutInstance_1.flyoutRef.nativeElement);
-                    /* istanbul ignore else */
-                    if (!isAbove) {
-                        doClose_1 = true;
-                    }
-                });
-                /**
-                 * Check if we should close the flyout specifically on a `click` event so that we can keep
-                 * it open when consumers fire another `click` event on a trigger button. Since the consumer
-                 * will likely use a `click` event to open the flyout, we want to wait for that event to fire
-                 * before determining if the flyout should be closed.
-                 */
-                rxjs.fromEvent(document, 'click')
-                    .pipe(operators.takeUntil(this.ngUnsubscribe))
-                    .subscribe(function () {
-                    if (doClose_1) {
-                        _this.close();
-                    }
-                });
-                this.removeAfterClosed = false;
-                flyoutInstance_1.messageStream
-                    .pipe(operators.takeUntil(this.ngUnsubscribe))
-                    .subscribe(function (message) {
-                    if (message.type === exports.SkyFlyoutMessageType.Close) {
-                        _this.removeAfterClosed = true;
-                        _this.isOpening = false;
-                    }
-                });
-                flyout.closed.pipe(operators.take(1)).subscribe(function () {
-                    _this.removeListners();
-                    if (_this.removeAfterClosed) {
-                        _this.removeHostComponent();
-                    }
-                });
-            }
-        };
-        SkyFlyoutService.prototype.removeListners = function () {
-            this.ngUnsubscribe.next(true);
-            this.ngUnsubscribe.unsubscribe();
-            this.ngUnsubscribe = new rxjs.Subject();
-        };
-        return SkyFlyoutService;
-    }());
-    SkyFlyoutService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutService, deps: [{ token: i1__namespace$1.SkyCoreAdapterService }, { token: i1__namespace$1.SkyAppWindowRef }, { token: i1__namespace$1.SkyDynamicComponentService }, { token: i2__namespace$2.Router }, { token: i0__namespace.NgZone }, { token: i0__namespace.ApplicationRef, optional: true }], 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$1.SkyCoreAdapterService }, { type: i1__namespace$1.SkyAppWindowRef }, { type: i1__namespace$1.SkyDynamicComponentService }, { type: i2__namespace$2.Router }, { type: i0__namespace.NgZone }, { type: i0__namespace.ApplicationRef, decorators: [{
-                            type: i0.Optional
-                        }] }];
-        } });
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.SkyFlyoutBeforeCloseHandler = SkyFlyoutBeforeCloseHandler;
-    exports.SkyFlyoutInstance = SkyFlyoutInstance;
-    exports.SkyFlyoutModule = SkyFlyoutModule;
-    exports.SkyFlyoutService = SkyFlyoutService;
-    exports["λ1"] = SkyFlyoutComponent;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-//# sourceMappingURL=skyux-flyout.umd.js.map