@skyux/flyout 5.5.0 → 5.6.2

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/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';
+    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;
@@ -26,11 +26,11 @@
     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 i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2$1);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
 
     /**
      * @internal
@@ -234,6 +234,68 @@
                     }]
             }] });
 
+    /**
+     * @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
      */
@@ -258,15 +320,15 @@
             this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
             var newClass;
             switch (breakpoint) {
-                case i1.SkyMediaBreakpoints.xs: {
+                case i1$1.SkyMediaBreakpoints.xs: {
                     newClass = 'sky-responsive-container-xs';
                     break;
                 }
-                case i1.SkyMediaBreakpoints.sm: {
+                case i1$1.SkyMediaBreakpoints.sm: {
                     newClass = 'sky-responsive-container-sm';
                     break;
                 }
-                case i1.SkyMediaBreakpoints.md: {
+                case i1$1.SkyMediaBreakpoints.md: {
                     newClass = 'sky-responsive-container-md';
                     break;
                 }
@@ -289,11 +351,11 @@
         };
         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.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    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.SkyAppWindowRef }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }, { type: i1__namespace$1.SkyAppWindowRef }]; } });
 
     /**
      * @internal
@@ -301,7 +363,7 @@
     var SkyFlyoutMediaQueryService = /** @class */ (function () {
         function SkyFlyoutMediaQueryService() {
             this.currentSubject = new rxjs.BehaviorSubject(this.current);
-            this._current = i1.SkyMediaBreakpoints.xs;
+            this._current = i1$1.SkyMediaBreakpoints.xs;
             this.currentSubject.next(this._current);
         }
         Object.defineProperty(SkyFlyoutMediaQueryService.prototype, "current", {
@@ -320,17 +382,17 @@
         };
         SkyFlyoutMediaQueryService.prototype.setBreakpointForWidth = function (width) {
             var breakpoint;
-            if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.xs)) {
-                breakpoint = i1.SkyMediaBreakpoints.xs;
+            if (this.isWidthWithinBreakpiont(width, i1$1.SkyMediaBreakpoints.xs)) {
+                breakpoint = i1$1.SkyMediaBreakpoints.xs;
             }
-            else if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.sm)) {
-                breakpoint = i1.SkyMediaBreakpoints.sm;
+            else if (this.isWidthWithinBreakpiont(width, i1$1.SkyMediaBreakpoints.sm)) {
+                breakpoint = i1$1.SkyMediaBreakpoints.sm;
             }
-            else if (this.isWidthWithinBreakpiont(width, i1.SkyMediaBreakpoints.md)) {
-                breakpoint = i1.SkyMediaBreakpoints.md;
+            else if (this.isWidthWithinBreakpiont(width, i1$1.SkyMediaBreakpoints.md)) {
+                breakpoint = i1$1.SkyMediaBreakpoints.md;
             }
             else {
-                breakpoint = i1.SkyMediaBreakpoints.lg;
+                breakpoint = i1$1.SkyMediaBreakpoints.lg;
             }
             this._current = breakpoint;
             this.currentSubject.next(this._current);
@@ -343,13 +405,13 @@
             var mdBreakpointMaxPixels = 1199;
             var lgBreakpointMinPixels = 1200;
             switch (breakpoint) {
-                case i1.SkyMediaBreakpoints.xs: {
+                case i1$1.SkyMediaBreakpoints.xs: {
                     return width <= xsBreakpointMaxPixels;
                 }
-                case i1.SkyMediaBreakpoints.sm: {
+                case i1$1.SkyMediaBreakpoints.sm: {
                     return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
                 }
-                case i1.SkyMediaBreakpoints.md: {
+                case i1$1.SkyMediaBreakpoints.md: {
                     return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
                 }
                 default: {
@@ -378,68 +440,6 @@
         return SkyFlyoutBeforeCloseHandler;
     }());
 
-    /**
-     * @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$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2__namespace.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2__namespace$1.SkyLibResourcesPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyFlyoutIteratorComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-flyout-iterator',
-                        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
-                }] } });
-
     var FLYOUT_OPEN_STATE = 'flyoutOpen';
     var FLYOUT_CLOSED_STATE = 'flyoutClosed';
     var nextId = 0;
@@ -539,7 +539,7 @@
             this.ngUnsubscribe.complete();
         };
         SkyFlyoutComponent.prototype.onWindowResize = function (event) {
-            if (this.flyoutMediaQueryService.isWidthWithinBreakpiont(event.target.innerWidth, i1.SkyMediaBreakpoints.xs)) {
+            if (this.flyoutMediaQueryService.isWidthWithinBreakpiont(event.target.innerWidth, i1$1.SkyMediaBreakpoints.xs)) {
                 this.updateBreakpointAndResponsiveClass(event.target.innerWidth);
             }
             else {
@@ -784,7 +784,9 @@
                     flyoutWidth: this.flyoutWidth,
                 })
                     .pipe(operators.take(1))
-                    .subscribe(function () { }, function (err) {
+                    .subscribe(
+                // eslint-disable-next-line @typescript-eslint/no-empty-function
+                function () { }, function (err) {
                     console.warn('Could not save flyout data.');
                     console.warn(err);
                 });
@@ -805,7 +807,7 @@
                 this.xCoord = this.windowBufferSize;
                 this.setUserData();
             }
-            if (this.flyoutMediaQueryService.isWidthWithinBreakpiont(window.innerWidth, i1.SkyMediaBreakpoints.xs)) {
+            if (this.flyoutMediaQueryService.isWidthWithinBreakpiont(window.innerWidth, i1$1.SkyMediaBreakpoints.xs)) {
                 this.updateBreakpointAndResponsiveClass(window.innerWidth);
             }
             else {
@@ -831,6 +833,7 @@
                         if (this.resizeKeyControlActive) {
                             this.resizeKeyControlActive = false;
                         }
+                        break;
                     case 'left':
                         if (this.resizeKeyControlActive) {
                             /* istanbul ignore else */
@@ -874,12 +877,12 @@
         };
         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 }, { token: i0__namespace.NgZone }], 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$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.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$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: [
+            { 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%)' })),
@@ -899,7 +902,7 @@
                         providers: [
                             SkyFlyoutAdapterService,
                             SkyFlyoutMediaQueryService,
-                            { provide: i1.SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
+                            { provide: i1$1.SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
                         ],
                         animations: [
                             animations.trigger('flyoutState', [
@@ -915,7 +918,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 }, { type: i0__namespace.NgZone }]; }, 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$1.SkyUIConfigService }, { type: i0__namespace.NgZone }]; }, propDecorators: { flyoutRef: [{
                     type: i0.ViewChild,
                     args: ['flyoutRef', {
                             read: i0.ElementRef,
@@ -961,7 +964,7 @@
             forms.FormsModule,
             i2$2.RouterModule,
             i2.SkyI18nModule,
-            i1$1.SkyIconModule,
+            i1.SkyIconModule,
             SkyFlyoutResourcesModule,
             i2$1.SkyThemeModule,
             i10.SkyHrefModule], exports: [SkyFlyoutComponent] });
@@ -971,7 +974,7 @@
                 forms.FormsModule,
                 i2$2.RouterModule,
                 i2.SkyI18nModule,
-                i1$1.SkyIconModule,
+                i1.SkyIconModule,
                 SkyFlyoutResourcesModule,
                 i2$1.SkyThemeModule,
                 i10.SkyHrefModule,
@@ -986,7 +989,7 @@
                             forms.FormsModule,
                             i2$2.RouterModule,
                             i2.SkyI18nModule,
-                            i1$1.SkyIconModule,
+                            i1.SkyIconModule,
                             SkyFlyoutResourcesModule,
                             i2$1.SkyThemeModule,
                             i10.SkyHrefModule,
@@ -1147,14 +1150,14 @@
         };
         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 }, { token: i0__namespace.NgZone }, { token: i0__namespace.ApplicationRef }], 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$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 }], 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 }, { type: i0__namespace.NgZone }, { type: i0__namespace.ApplicationRef }]; } });
+            }], 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 }]; } });
 
     /**
      * Generated bundle index. Do not edit.