@skyux/flyout 5.0.0 → 5.0.4

package/fesm2015/skyux-flyout.js

@@ -3,7 +3,6 @@ import { EventEmitter, NgModule, Injectable, Component, Input, Output, Reflectiv
 import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i9 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2$2 from '@angular/router';
 import { RouterModule, NavigationStart } from '@angular/router';
@@ -11,7 +10,7 @@ import * as i1$1 from '@skyux/indicators';
 import { SkyIconModule } from '@skyux/indicators';
 import * as i2$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import * as i10 from '@skyux/router';
+import * as i9 from '@skyux/router';
 import { SkyHrefModule } from '@skyux/router';
 import * as i2 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
@@ -83,12 +82,12 @@ class SkyFlyoutInstance {
         this._iteratorNextButtonDisabled = newValue;
         if (newValue) {
             this.hostController.next({
-                type: SkyFlyoutMessageType.DisableIteratorNextButton
+                type: SkyFlyoutMessageType.DisableIteratorNextButton,
             });
         }
         else {
             this.hostController.next({
-                type: SkyFlyoutMessageType.EnableIteratorNextButton
+                type: SkyFlyoutMessageType.EnableIteratorNextButton,
             });
         }
     }
@@ -103,12 +102,12 @@ class SkyFlyoutInstance {
         this._iteratorPreviousButtonDisabled = newValue;
         if (newValue) {
             this.hostController.next({
-                type: SkyFlyoutMessageType.DisableIteratorPreviousButton
+                type: SkyFlyoutMessageType.DisableIteratorPreviousButton,
             });
         }
         else {
             this.hostController.next({
-                type: SkyFlyoutMessageType.EnableIteratorPreviousButton
+                type: SkyFlyoutMessageType.EnableIteratorPreviousButton,
             });
         }
     }
@@ -120,7 +119,7 @@ class SkyFlyoutInstance {
      */
     close() {
         this.hostController.next({
-            type: SkyFlyoutMessageType.Close
+            type: SkyFlyoutMessageType.Close,
         });
         this._iteratorPreviousButtonClick.complete();
         this._iteratorNextButtonClick.complete();
@@ -131,11 +130,20 @@ class SkyFlyoutInstance {
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
  * The contents of this file were automatically generated by
- * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/SkyFlyout' schematic.
+ * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-flyout' schematic.
  * To update this file, simply rerun the command.
  */
 const 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. Use left arrow key to expand the flyout window and right arrow key to shrink the flyout window." } },
+    '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.',
+        },
+    },
 };
 class SkyFlyoutResourcesProvider {
     getString(localeInfo, name) {
@@ -147,22 +155,26 @@ class SkyFlyoutResourcesProvider {
  */
 class SkyFlyoutResourcesModule {
 }
-SkyFlyoutResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyFlyoutResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutResourcesModule, exports: [SkyI18nModule] });
-SkyFlyoutResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutResourcesModule, providers: [{
+SkyFlyoutResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyFlyoutResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutResourcesModule, exports: [SkyI18nModule] });
+SkyFlyoutResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutResourcesModule, providers: [
+        {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyFlyoutResourcesProvider,
-            multi: true
-        }], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutResourcesModule, decorators: [{
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
-                    providers: [{
+                    providers: [
+                        {
                             provide: SKY_LIB_RESOURCES_PROVIDERS,
                             useClass: SkyFlyoutResourcesProvider,
-                            multi: true
-                        }]
+                            multi: true,
+                        },
+                    ],
                 }]
         }] });
 
@@ -220,9 +232,9 @@ class SkyFlyoutAdapterService {
         }
     }
 }
-SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyFlyoutAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
+SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFlyoutAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1.SkyAppWindowRef }]; } });
 
@@ -242,7 +254,7 @@ class SkyFlyoutMediaQueryService {
         return this.currentSubject.subscribe({
             next: (breakpoints) => {
                 listener(breakpoints);
-            }
+            },
         });
     }
     setBreakpointForWidth(width) {
@@ -271,16 +283,16 @@ class SkyFlyoutMediaQueryService {
         const lgBreakpointMinPixels = 1200;
         switch (breakpoint) {
             case SkyMediaBreakpoints.xs: {
-                return (width <= xsBreakpointMaxPixels);
+                return width <= xsBreakpointMaxPixels;
             }
             case SkyMediaBreakpoints.sm: {
-                return (width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels);
+                return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
             }
             case SkyMediaBreakpoints.md: {
-                return (width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels);
+                return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
             }
             default: {
-                return (width >= lgBreakpointMinPixels);
+                return width >= lgBreakpointMinPixels;
             }
         }
     }
@@ -288,9 +300,9 @@ class SkyFlyoutMediaQueryService {
         this.currentSubject.complete();
     }
 }
-SkyFlyoutMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyFlyoutMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutMediaQueryService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutMediaQueryService, decorators: [{
+SkyFlyoutMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFlyoutMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutMediaQueryService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutMediaQueryService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -328,14 +340,14 @@ class SkyFlyoutIteratorComponent {
         }
     }
 }
-SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0, template: "<div\n  id=\"iterators\"\n  class=\"sky-flyout-iterators\"\n>\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"'skyux_flyout_iterator_previous_button' | skyLibResources\"\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'\"\n      icon=\"chevron-up\"\n    >\n    </sky-icon>\n    <sky-icon *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'\"\n      icon=\"chevron-down\"\n    >\n    </sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\"\n      icon=\"chevron-down\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"], components: [{ type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
+SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0, template: "<div id=\"iterators\" class=\"sky-flyout-iterators\">\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"\n      'skyux_flyout_iterator_previous_button' | skyLibResources\n    \"\n    [disabled]=\"previousButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorPreviousClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-up\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n    [disabled]=\"nextButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorNextClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-down\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"], components: [{ type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-flyout-iterator',
                     templateUrl: './flyout-iterator.component.html',
-                    styleUrls: ['./flyout-iterator.component.scss']
+                    styleUrls: ['./flyout-iterator.component.scss'],
                 }]
         }], propDecorators: { nextButtonDisabled: [{
                 type: Input
@@ -370,6 +382,7 @@ class SkyFlyoutComponent {
         this.flyoutWidth = 0;
         this.isDragging = false;
         this.isFullscreen = false;
+        this.resizeKeyControlActive = false;
         this.xCoord = 0;
         this.windowBufferSize = 20;
         /**
@@ -442,12 +455,15 @@ class SkyFlyoutComponent {
             this.notifyClosed();
         }
         this.config = Object.assign({ providers: [] }, config);
-        this.config.defaultWidth = this.config.defaultWidth || (window.innerWidth / 2);
+        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;
+        this.config.iteratorNextButtonDisabled =
+            this.config.iteratorNextButtonDisabled || false;
+        this.config.iteratorPreviousButtonDisabled =
+            this.config.iteratorPreviousButtonDisabled || false;
         const factory = this.resolver.resolveComponentFactory(component);
         /* tslint:disable:deprecation */
         /**
@@ -461,10 +477,11 @@ class SkyFlyoutComponent {
         this.flyoutInstance = this.createFlyoutInstance(componentRef.instance);
         // Open the flyout immediately.
         this.messageStream.next({
-            type: SkyFlyoutMessageType.Open
+            type: SkyFlyoutMessageType.Open,
         });
         if (this.config.settingsKey) {
-            this.uiConfigService.getConfig(this.config.settingsKey)
+            this.uiConfigService
+                .getConfig(this.config.settingsKey)
                 .pipe(take(1))
                 .subscribe((value) => {
                 if (value && value.flyoutWidth) {
@@ -485,7 +502,7 @@ class SkyFlyoutComponent {
     }
     close() {
         this.messageStream.next({
-            type: SkyFlyoutMessageType.Close
+            type: SkyFlyoutMessageType.Close,
         });
     }
     invokePrimaryAction() {
@@ -496,7 +513,7 @@ class SkyFlyoutComponent {
         return false;
     }
     getAnimationState() {
-        return (this.isOpening) ? FLYOUT_OPEN_STATE : FLYOUT_CLOSED_STATE;
+        return this.isOpening ? FLYOUT_OPEN_STATE : FLYOUT_CLOSED_STATE;
     }
     animationDone(event) {
         if (event.toState === FLYOUT_OPEN_STATE) {
@@ -512,27 +529,10 @@ class SkyFlyoutComponent {
         this.onResizeHandleMouseDown(event);
     }
     onHeaderGrabHandleKeyDown(event) {
-        /* istanbul ignore else */
-        if (event.key) {
-            const direction = event.key.toLowerCase().replace('arrow', '');
-            switch (direction) {
-                case 'left':
-                    /* istanbul ignore else */
-                    if (this.flyoutWidth < this.config.maxWidth) {
-                        this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
-                    }
-                    break;
-                case 'right':
-                    /* istanbul ignore else */
-                    if (this.flyoutWidth > this.config.minWidth) {
-                        this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
-                    }
-                    break;
-                /* istanbul ignore next */
-                default:
-                    break;
-            }
-        }
+        this.handleResizeKeyDown(event);
+    }
+    onResizeHandleKeyDown(event) {
+        this.handleResizeKeyDown(event);
     }
     onResizeHandleMouseDown(event) {
         event.preventDefault();
@@ -647,7 +647,7 @@ class SkyFlyoutComponent {
         this.adapter.setResponsiveClass(this.elementRef, newBreakpiont);
     }
     setFullscreen() {
-        if ((window.innerWidth - this.windowBufferSize) < this.config.minWidth) {
+        if (window.innerWidth - this.windowBufferSize < this.config.minWidth) {
             this.isFullscreen = true;
         }
         else {
@@ -656,8 +656,9 @@ class SkyFlyoutComponent {
     }
     setUserData() {
         if (this.config.settingsKey) {
-            this.uiConfigService.setConfig(this.config.settingsKey, {
-                flyoutWidth: this.flyoutWidth
+            this.uiConfigService
+                .setConfig(this.config.settingsKey, {
+                flyoutWidth: this.flyoutWidth,
             })
                 .pipe(take(1))
                 .subscribe(() => { }, (err) => {
@@ -693,24 +694,60 @@ class SkyFlyoutComponent {
         // TODO: Need to implement the async `getString` method in a breaking change.
         return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
     }
+    handleResizeKeyDown(event) {
+        /* istanbul ignore else */
+        if (event.key) {
+            const keyPressed = event.key.toLowerCase().replace('arrow', '');
+            switch (keyPressed) {
+                case 'enter':
+                case ' ':
+                    this.resizeKeyControlActive = !this.resizeKeyControlActive;
+                    break;
+                case 'tab':
+                    /* istanbul ignore else */
+                    if (this.resizeKeyControlActive) {
+                        this.resizeKeyControlActive = false;
+                    }
+                case 'left':
+                    if (this.resizeKeyControlActive) {
+                        /* istanbul ignore else */
+                        if (this.flyoutWidth < this.config.maxWidth) {
+                            this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
+                        }
+                    }
+                    break;
+                case 'right':
+                    if (this.resizeKeyControlActive) {
+                        /* istanbul ignore else */
+                        if (this.flyoutWidth > this.config.minWidth) {
+                            this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
+                        }
+                    }
+                    break;
+                /* istanbul ignore next */
+                default:
+                    break;
+            }
+        }
+    }
 }
-SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0.ElementRef }, { token: i1.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Component });
-SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
+SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0.ElementRef }, { token: i1.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Component });
+SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
         SkyFlyoutAdapterService,
         SkyFlyoutMediaQueryService,
-        { provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService }
-    ], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-flyout\"\n  tabindex=\"-1\"\n  [attr.role]=\"config?.ariaRole\"\n  [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n  [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\n  [id]=\"flyoutId\"\n  [ngClass]=\"{\n    'sky-flyout-hidden': !isOpen && !isOpening,\n    'sky-flyout-fullscreen': isFullscreen\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-8': 'modern'\n  }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  #flyoutRef\n>\n\n  <input\n    class=\"sky-flyout-resize-handle\"\n    role=\"separator\"\n    type=\"range\"\n    [attr.aria-controls]=\"flyoutId\"\n    [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n    [attr.aria-valuemax]=\"config.maxWidth\"\n    [attr.aria-valuemin]=\"config.minWidth\"\n    [attr.aria-valuenow]=\"flyoutWidth\"\n    [attr.step]=\"widthStep\"\n    [max]=\"config.maxWidth\"\n    [min]=\"config.minWidth\"\n    [(ngModel)]=\"flyoutWidth\"\n    (mousedown)=\"onResizeHandleMouseDown($event)\" />\n\n  <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\n      <button *skyThemeIf=\"'modern'\"\n        class=\"sky-btn sky-btn-icon-borderless sky-margin-inline-sm sky-flyout-header-grab-handle\"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon\n          icon=\"tile-drag\"\n          iconType=\"skyux\"\n          size=\"lg\"\n        >\n        </sky-icon>\n      </button>\n\n      <sky-flyout-iterator *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\">\n      </ng-container>\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\">\n      </ng-container>\n      <button\n        class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-icon-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\"\n          icon=\"close\"\n        >\n        </sky-icon>\n        <sky-icon *skyThemeIf=\"'modern'\"\n          icon=\"close\"\n          iconType=\"skyux\"\n          size=\"lg\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-flyout-content\">\n    <div #target></div>\n  </div>\n</div>\n\n<ng-template #permalinkTemplate>\n  <ng-template [ngIf]=\"permalink\">\n    <ng-template [ngIf]=\"permalink.url\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [skyHref]=\"permalink.url\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n    <ng-template [ngIf]=\"permalink.route\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [routerLink]=\"permalink.route.commands\"\n        [fragment]=\"permalink.route.extras?.fragment\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        [queryParams]=\"permalink.route.extras?.queryParams\"\n        [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n        [state]=\"permalink.route.extras?.state\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-default sky-flyout-btn-primary-action sky-margin-inline-default\"\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:auto;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:-webkit-grab;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:-webkit-grab;cursor:-moz-grab}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout{background:#000}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout-header{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"], components: [{ type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe }, animations: [
+        { provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
+    ], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-flyout\"\n  tabindex=\"-1\"\n  [attr.role]=\"config?.ariaRole\"\n  [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n  [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\n  [id]=\"flyoutId\"\n  [ngClass]=\"{\n    'sky-flyout-hidden': !isOpen && !isOpening,\n    'sky-flyout-fullscreen': isFullscreen\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-8': 'modern'\n  }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  #flyoutRef\n>\n  <div\n    class=\"sky-flyout-resize-handle\"\n    role=\"separator\"\n    tabindex=\"0\"\n    type=\"range\"\n    [attr.aria-controls]=\"flyoutId\"\n    [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n    [attr.aria-valuemax]=\"config.maxWidth\"\n    [attr.aria-valuemin]=\"config.minWidth\"\n    [attr.aria-valuenow]=\"flyoutWidth\"\n    (keydown)=\"onResizeHandleKeyDown($event)\"\n    (mousedown)=\"onResizeHandleMouseDown($event)\"\n  ></div>\n\n  <div\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    #flyoutHeader\n  >\n    <div class=\"sky-flyout-header-content\">\n      <button\n        *skyThemeIf=\"'modern'\"\n        class=\"\n          sky-btn\n          sky-btn-icon-borderless\n          sky-margin-inline-sm\n          sky-flyout-header-grab-handle\n        \"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n      </button>\n\n      <sky-flyout-iterator\n        *ngIf=\"config.showIterator\"\n        [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n        [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n        (nextButtonClick)=\"onIteratorNextButtonClick()\"\n        (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n      >\n      </sky-flyout-iterator>\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\n      <button\n        class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-icon-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"close\"\n          iconType=\"skyux\"\n          size=\"lg\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-flyout-content\">\n    <div #target></div>\n  </div>\n</div>\n\n<ng-template #permalinkTemplate>\n  <ng-template [ngIf]=\"permalink\">\n    <ng-template [ngIf]=\"permalink.url\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [skyHref]=\"permalink.url\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n    <ng-template [ngIf]=\"permalink.route\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [routerLink]=\"permalink.route.commands\"\n        [fragment]=\"permalink.route.extras?.fragment\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        [queryParams]=\"permalink.route.extras?.queryParams\"\n        [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n        [state]=\"permalink.route.extras?.state\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n    <button\n      type=\"button\"\n      class=\"\n        sky-btn\n        sky-btn-default\n        sky-flyout-btn-primary-action\n        sky-margin-inline-default\n      \"\n      (click)=\"invokePrimaryAction()\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </ng-template>\n</ng-template>\n", styles: [".sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:#fff;border-left:6px solid #0974a1;z-index:1001}.sky-flyout:focus{outline:none}.sky-flyout.sky-flyout-fullscreen{min-width:100%;max-width:100%}.sky-flyout.sky-flyout-fullscreen .sky-flyout-resize-handle{cursor:initial}.sky-flyout.sky-flyout-hidden{visibility:hidden}.sky-flyout .sky-flyout-input-aria-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);outline:none}.sky-flyout-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;left:-10px;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;direction:rtl}.sky-flyout-resize-handle::-moz-range-thumb,.sky-flyout-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-ms-thumb,.sky-flyout-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-header{border-bottom:1px solid #cdcfd2;width:100%;background:#eeeeef;height:50px;display:flex;align-items:flex-start}.sky-flyout-header-content{flex-grow:1}.sky-flyout-btn-permalink:hover{text-decoration:none}.sky-flyout-help-shim{padding-right:8px}@media (min-width: 768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;height:calc(100% - 50px)}:host-context(.sky-theme-modern) .sky-flyout{border-left:0}:host-context(.sky-theme-modern) .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}:host-context(.sky-theme-modern) .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}.sky-theme-modern .sky-flyout{border-left:0}.sky-theme-modern .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}.sky-theme-modern .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout{background:#000}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout-header{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"], components: [{ type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe }, animations: [
         trigger('flyoutState', [
             state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),
             state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
             transition('void => *', [
                 style({ transform: 'translateX(100%)' }),
-                animate(250)
+                animate(250),
             ]),
-            transition(`* <=> *`, animate('250ms ease-in'))
-        ])
+            transition(`* <=> *`, animate('250ms ease-in')),
+        ]),
     ], changeDetection: i0.ChangeDetectionStrategy.Default });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-flyout',
@@ -719,7 +756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                     providers: [
                         SkyFlyoutAdapterService,
                         SkyFlyoutMediaQueryService,
-                        { provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService }
+                        { provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
                     ],
                     animations: [
                         trigger('flyoutState', [
@@ -727,31 +764,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                             state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
                             transition('void => *', [
                                 style({ transform: 'translateX(100%)' }),
-                                animate(250)
+                                animate(250),
                             ]),
-                            transition(`* <=> *`, animate('250ms ease-in'))
-                        ])
+                            transition(`* <=> *`, animate('250ms ease-in')),
+                        ]),
                     ],
                     // Allow automatic change detection for child components.
-                    changeDetection: ChangeDetectionStrategy.Default
+                    changeDetection: ChangeDetectionStrategy.Default,
                 }]
         }], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i2$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0.ElementRef }, { type: i1.SkyUIConfigService }]; }, propDecorators: { flyoutRef: [{
                 type: ViewChild,
                 args: ['flyoutRef', {
                         read: ElementRef,
-                        static: true
+                        static: true,
                     }]
             }], target: [{
                 type: ViewChild,
                 args: ['target', {
                         read: ViewContainerRef,
-                        static: true
+                        static: true,
                     }]
             }], flyoutHeader: [{
                 type: ViewChild,
                 args: ['flyoutHeader', {
                         read: ElementRef,
-                        static: true
+                        static: true,
                     }]
             }], onWindowResize: [{
                 type: HostListener,
@@ -760,9 +797,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 class SkyFlyoutModule {
 }
-SkyFlyoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyFlyoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent,
-        SkyFlyoutIteratorComponent], imports: [CommonModule,
+SkyFlyoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyFlyoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [CommonModule,
         FormsModule,
         RouterModule,
         SkyI18nModule,
@@ -770,7 +806,7 @@ SkyFlyoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         SkyFlyoutResourcesModule,
         SkyThemeModule,
         SkyHrefModule], exports: [SkyFlyoutComponent] });
-SkyFlyoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutModule, imports: [[
+SkyFlyoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutModule, imports: [[
             CommonModule,
             FormsModule,
             RouterModule,
@@ -778,15 +814,12 @@ SkyFlyoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
             SkyIconModule,
             SkyFlyoutResourcesModule,
             SkyThemeModule,
-            SkyHrefModule
+            SkyHrefModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyFlyoutComponent,
-                        SkyFlyoutIteratorComponent
-                    ],
+                    declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent],
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -795,14 +828,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         SkyIconModule,
                         SkyFlyoutResourcesModule,
                         SkyThemeModule,
-                        SkyHrefModule
-                    ],
-                    exports: [
-                        SkyFlyoutComponent
+                        SkyHrefModule,
                     ],
-                    entryComponents: [
-                        SkyFlyoutComponent
-                    ]
+                    exports: [SkyFlyoutComponent],
+                    entryComponents: [SkyFlyoutComponent],
                 }]
         }] });
 
@@ -834,16 +863,13 @@ class SkyFlyoutService {
         if (this.host && !this.isOpening) {
             this.removeAfterClosed = true;
             this.host.instance.messageStream.next({
-                type: SkyFlyoutMessageType.Close
+                type: SkyFlyoutMessageType.Close,
             });
         }
     }
     /**
      * Opens a flyout and displays the specified component.
-     * @param component Specifies the component to render. Since you generate the component dynamically instead of
-     * with HTML selectors, you must register it with the `entryComponents` property in the
-     * `app-extras.module.ts` file. For more information, see the
-     * [entry components tutorial](https://developer.blackbaud.com/skyux/learn/get-started/advanced/entry-components).
+     * @param component Specifies the component to render.
      * @param config Specifies the flyout configuration passed to the specified component's constructor.
      */
     open(component, config) {
@@ -867,7 +893,8 @@ class SkyFlyoutService {
         return flyout;
     }
     createHostComponent() {
-        this.host = this.dynamicComponentService.createComponent(SkyFlyoutComponent);
+        this.host =
+            this.dynamicComponentService.createComponent(SkyFlyoutComponent);
         return this.host;
     }
     removeHostComponent() {
@@ -898,7 +925,9 @@ class SkyFlyoutService {
                 if (flyoutInstance.flyoutRef.nativeElement.contains(event.target)) {
                     return;
                 }
-                const isAbove = event.target === document ? false : this.coreAdapter.isTargetAboveElement(event.target, flyoutInstance.flyoutRef.nativeElement);
+                const isAbove = event.target === document
+                    ? false
+                    : this.coreAdapter.isTargetAboveElement(event.target, flyoutInstance.flyoutRef.nativeElement);
                 /* istanbul ignore else */
                 if (!isAbove) {
                     doClose = true;
@@ -940,12 +969,12 @@ class SkyFlyoutService {
         this.ngUnsubscribe = new Subject();
     }
 }
-SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i1.SkyAppWindowRef }, { token: i1.SkyDynamicComponentService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyFlyoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: SkyFlyoutService, decorators: [{
+SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i1.SkyAppWindowRef }, { token: i1.SkyDynamicComponentService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFlyoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, providedIn: 'any' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'any',
                 }]
         }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i1.SkyAppWindowRef }, { type: i1.SkyDynamicComponentService }, { type: i2$2.Router }]; } });