@skyux/flyout 7.0.0-beta.2 → 7.0.0-beta.3

package/fesm2020/skyux-flyout.mjs

@@ -1,6 +1,7 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import * as i0 from '@angular/core';
-import { EventEmitter, NgModule, Component, Input, Output, Injectable, Injector, ElementRef, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener, Optional } from '@angular/core';
-import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
+import { EventEmitter, NgModule, Component, Input, Output, Injectable, Injector, ElementRef, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener } from '@angular/core';
+import { Subject, ReplaySubject, fromEvent } from 'rxjs';
 import * as i5 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i6 from '@angular/common';
@@ -34,11 +35,12 @@ var SkyFlyoutMessageType;
     SkyFlyoutMessageType[SkyFlyoutMessageType["DisableIteratorPreviousButton"] = 5] = "DisableIteratorPreviousButton";
 })(SkyFlyoutMessageType || (SkyFlyoutMessageType = {}));
 
+var _SkyFlyoutInstance__beforeClose, _SkyFlyoutInstance__iteratorNextButtonClick, _SkyFlyoutInstance__iteratorPreviousButtonClick, _SkyFlyoutInstance__iteratorNextButtonDisabled, _SkyFlyoutInstance__iteratorPreviousButtonDisabled, _SkyFlyoutInstance__hostController;
 /**
  * Represents a single displayed flyout.
  */
 class SkyFlyoutInstance {
-    constructor() {
+    constructor(componentInstance) {
         /**
          * An event that the flyout instance emits when it closes.
          */
@@ -48,12 +50,13 @@ class SkyFlyoutInstance {
          * @default true
          */
         this.isOpen = true;
-        this._beforeClose = new Subject();
-        this._iteratorNextButtonClick = new EventEmitter();
-        this._iteratorPreviousButtonClick = new EventEmitter();
-        this._iteratorNextButtonDisabled = false;
-        this._iteratorPreviousButtonDisabled = false;
-        this._hostController = new Subject();
+        _SkyFlyoutInstance__beforeClose.set(this, new Subject());
+        _SkyFlyoutInstance__iteratorNextButtonClick.set(this, new EventEmitter());
+        _SkyFlyoutInstance__iteratorPreviousButtonClick.set(this, new EventEmitter());
+        _SkyFlyoutInstance__iteratorNextButtonDisabled.set(this, false);
+        _SkyFlyoutInstance__iteratorPreviousButtonDisabled.set(this, false);
+        _SkyFlyoutInstance__hostController.set(this, new Subject());
+        this.componentInstance = componentInstance;
         this.closed.subscribe(() => {
             this.isOpen = false;
         });
@@ -64,33 +67,33 @@ class SkyFlyoutInstance {
      * the modal does not close until the subscriber calls the handler's `closeModal` method.
      */
     get beforeClose() {
-        return this._beforeClose;
+        return __classPrivateFieldGet(this, _SkyFlyoutInstance__beforeClose, "f");
     }
     /**
      * Used to communicate with the host component.
      * @internal
      */
     get hostController() {
-        return this._hostController;
+        return __classPrivateFieldGet(this, _SkyFlyoutInstance__hostController, "f");
     }
     /**
      * An event that the flyout instance emits when users click the next iterator button.
      */
     get iteratorNextButtonClick() {
-        return this._iteratorNextButtonClick;
+        return __classPrivateFieldGet(this, _SkyFlyoutInstance__iteratorNextButtonClick, "f");
     }
     /**
      * An event that the flyout instance emits when users click the previous iterator button.
      */
     get iteratorPreviousButtonClick() {
-        return this._iteratorPreviousButtonClick;
+        return __classPrivateFieldGet(this, _SkyFlyoutInstance__iteratorPreviousButtonClick, "f");
     }
     /**
      * Disables the next iterator button.
      * @default false
      */
     set iteratorNextButtonDisabled(newValue) {
-        this._iteratorNextButtonDisabled = newValue;
+        __classPrivateFieldSet(this, _SkyFlyoutInstance__iteratorNextButtonDisabled, newValue, "f");
         if (newValue) {
             this.hostController.next({
                 type: SkyFlyoutMessageType.DisableIteratorNextButton,
@@ -103,14 +106,14 @@ class SkyFlyoutInstance {
         }
     }
     get iteratorNextButtonDisabled() {
-        return this._iteratorNextButtonDisabled;
+        return __classPrivateFieldGet(this, _SkyFlyoutInstance__iteratorNextButtonDisabled, "f");
     }
     /**
      * Disables the previous iterator button.
      * @default false
      */
     set iteratorPreviousButtonDisabled(newValue) {
-        this._iteratorPreviousButtonDisabled = newValue;
+        __classPrivateFieldSet(this, _SkyFlyoutInstance__iteratorPreviousButtonDisabled, newValue, "f");
         if (newValue) {
             this.hostController.next({
                 type: SkyFlyoutMessageType.DisableIteratorPreviousButton,
@@ -123,7 +126,7 @@ class SkyFlyoutInstance {
         }
     }
     get iteratorPreviousButtonDisabled() {
-        return this._iteratorPreviousButtonDisabled;
+        return __classPrivateFieldGet(this, _SkyFlyoutInstance__iteratorPreviousButtonDisabled, "f");
     }
     /**
      * Closes the flyout instance and emits its `closed` event.
@@ -134,11 +137,12 @@ class SkyFlyoutInstance {
             type: SkyFlyoutMessageType.Close,
             data: { ignoreBeforeClose: args ? args.ignoreBeforeClose : false },
         });
-        this._iteratorPreviousButtonClick.complete();
-        this._iteratorNextButtonClick.complete();
+        __classPrivateFieldGet(this, _SkyFlyoutInstance__iteratorPreviousButtonClick, "f").complete();
+        __classPrivateFieldGet(this, _SkyFlyoutInstance__iteratorNextButtonClick, "f").complete();
         this.hostController.complete();
     }
 }
+_SkyFlyoutInstance__beforeClose = new WeakMap(), _SkyFlyoutInstance__iteratorNextButtonClick = new WeakMap(), _SkyFlyoutInstance__iteratorPreviousButtonClick = new WeakMap(), _SkyFlyoutInstance__iteratorNextButtonDisabled = new WeakMap(), _SkyFlyoutInstance__iteratorPreviousButtonDisabled = new WeakMap(), _SkyFlyoutInstance__hostController = new WeakMap();
 
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
@@ -191,40 +195,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyFlyoutIteratorComponent_ngUnsubscribe, _SkyFlyoutIteratorComponent__nextButtonClick, _SkyFlyoutIteratorComponent__previousButtonClick;
 /**
  * @internal
  */
 class SkyFlyoutIteratorComponent {
     constructor() {
-        this.ngUnsubscribe = new Subject();
-        this._nextButtonClick = new EventEmitter();
-        this._previousButtonClick = new EventEmitter();
+        _SkyFlyoutIteratorComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyFlyoutIteratorComponent__nextButtonClick.set(this, new EventEmitter());
+        _SkyFlyoutIteratorComponent__previousButtonClick.set(this, new EventEmitter());
     }
     get previousButtonClick() {
-        return this._previousButtonClick;
+        return __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent__previousButtonClick, "f");
     }
     get nextButtonClick() {
-        return this._nextButtonClick;
+        return __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent__nextButtonClick, "f");
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this._previousButtonClick.complete();
-        this._nextButtonClick.complete();
+        __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent_ngUnsubscribe, "f").complete();
     }
     onIteratorPreviousClick() {
         /* istanbul ignore else */
         if (!this.previousButtonDisabled) {
-            this._previousButtonClick.emit();
+            __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent__previousButtonClick, "f").emit();
         }
     }
     onIteratorNextClick() {
         /* istanbul ignore else */
         if (!this.nextButtonDisabled) {
-            this._nextButtonClick.emit();
+            __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent__nextButtonClick, "f").emit();
         }
     }
 }
+_SkyFlyoutIteratorComponent_ngUnsubscribe = new WeakMap(), _SkyFlyoutIteratorComponent__nextButtonClick = new WeakMap(), _SkyFlyoutIteratorComponent__previousButtonClick = new WeakMap();
 SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "component", type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
@@ -240,28 +244,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Output
             }] } });
 
+var _SkyFlyoutAdapterService_renderer, _SkyFlyoutAdapterService_windowRef;
 /**
  * @internal
  */
 class SkyFlyoutAdapterService {
     constructor(rendererFactory, windowRef) {
-        this.rendererFactory = rendererFactory;
-        this.windowRef = windowRef;
-        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+        _SkyFlyoutAdapterService_renderer.set(this, void 0);
+        _SkyFlyoutAdapterService_windowRef.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyFlyoutAdapterService_windowRef, windowRef, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
     }
     adjustHeaderForHelp(header) {
-        const windowObj = this.windowRef.nativeWindow;
+        const windowObj = __classPrivateFieldGet(this, _SkyFlyoutAdapterService_windowRef, "f").nativeWindow;
         const helpWidget = windowObj.document.getElementById('bb-help-invoker');
         if (helpWidget) {
-            this.renderer.addClass(header.nativeElement, 'sky-flyout-help-shim');
+            __classPrivateFieldGet(this, _SkyFlyoutAdapterService_renderer, "f").addClass(header.nativeElement, 'sky-flyout-help-shim');
         }
     }
     setResponsiveClass(element, breakpoint) {
+        /* istanbul ignore if */
+        if (!breakpoint) {
+            return;
+        }
         const nativeEl = element.nativeElement;
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
-        this.renderer.removeClass(nativeEl, 'sky-responsive-container-lg');
+        __classPrivateFieldGet(this, _SkyFlyoutAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-xs');
+        __classPrivateFieldGet(this, _SkyFlyoutAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-sm');
+        __classPrivateFieldGet(this, _SkyFlyoutAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-md');
+        __classPrivateFieldGet(this, _SkyFlyoutAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-lg');
         let newClass;
         switch (breakpoint) {
             case SkyMediaBreakpoints.xs: {
@@ -281,7 +291,7 @@ class SkyFlyoutAdapterService {
                 break;
             }
         }
-        this.renderer.addClass(nativeEl, newClass);
+        __classPrivateFieldGet(this, _SkyFlyoutAdapterService_renderer, "f").addClass(nativeEl, newClass);
     }
     toggleIframePointerEvents(enable) {
         // When iframes are present on the page, they may interfere with dragging
@@ -294,26 +304,24 @@ class SkyFlyoutAdapterService {
         }
     }
 }
+_SkyFlyoutAdapterService_renderer = new WeakMap(), _SkyFlyoutAdapterService_windowRef = new WeakMap();
 SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyFlyoutAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1$1.SkyAppWindowRef }]; } });
 
+var _SkyFlyoutMediaQueryService_currentSubject;
 /**
  * @internal
  */
 class SkyFlyoutMediaQueryService {
     constructor() {
-        this.currentSubject = new BehaviorSubject(this.current);
-        this._current = SkyMediaBreakpoints.xs;
-        this.currentSubject.next(this._current);
-    }
-    get current() {
-        return this._current;
+        _SkyFlyoutMediaQueryService_currentSubject.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyFlyoutMediaQueryService_currentSubject, new ReplaySubject(1), "f");
     }
     subscribe(listener) {
-        return this.currentSubject.subscribe({
+        return __classPrivateFieldGet(this, _SkyFlyoutMediaQueryService_currentSubject, "f").subscribe({
             next: (breakpoints) => {
                 listener(breakpoints);
             },
@@ -333,8 +341,8 @@ class SkyFlyoutMediaQueryService {
         else {
             breakpoint = SkyMediaBreakpoints.lg;
         }
-        this._current = breakpoint;
-        this.currentSubject.next(this._current);
+        this.current = breakpoint;
+        __classPrivateFieldGet(this, _SkyFlyoutMediaQueryService_currentSubject, "f").next(this.current);
     }
     isWidthWithinBreakpiont(width, breakpoint) {
         const xsBreakpointMaxPixels = 767;
@@ -359,9 +367,10 @@ class SkyFlyoutMediaQueryService {
         }
     }
     destroy() {
-        this.currentSubject.complete();
+        __classPrivateFieldGet(this, _SkyFlyoutMediaQueryService_currentSubject, "f").complete();
     }
 }
+_SkyFlyoutMediaQueryService_currentSubject = new WeakMap();
 SkyFlyoutMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 SkyFlyoutMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutMediaQueryService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutMediaQueryService, decorators: [{
@@ -377,6 +386,7 @@ class SkyFlyoutBeforeCloseHandler {
     }
 }
 
+var _SkyFlyoutComponent_instances, _SkyFlyoutComponent_xCoord, _SkyFlyoutComponent_windowBufferSize, _SkyFlyoutComponent_flyoutInstance, _SkyFlyoutComponent_ngUnsubscribe, _SkyFlyoutComponent__messageStream, _SkyFlyoutComponent_adapter, _SkyFlyoutComponent_changeDetector, _SkyFlyoutComponent_injector, _SkyFlyoutComponent_resolver, _SkyFlyoutComponent_resourcesService, _SkyFlyoutComponent_flyoutMediaQueryService, _SkyFlyoutComponent_elementRef, _SkyFlyoutComponent_uiConfigService, _SkyFlyoutComponent_ngZone, _SkyFlyoutComponent_createFlyoutInstance, _SkyFlyoutComponent_handleIncomingMessages, _SkyFlyoutComponent_notifyClosed, _SkyFlyoutComponent_cleanTemplate, _SkyFlyoutComponent_updateBreakpointAndResponsiveClass, _SkyFlyoutComponent_setFullscreen, _SkyFlyoutComponent_setUserData, _SkyFlyoutComponent_checkInitialSize, _SkyFlyoutComponent_getString, _SkyFlyoutComponent_handleResizeKeyDown, _SkyFlyoutComponent_executeOnStable, _SkyFlyoutComponent_initFocusTrap;
 const FLYOUT_OPEN_STATE = 'flyoutOpen';
 const FLYOUT_CLOSED_STATE = 'flyoutClosed';
 let nextId = 0;
@@ -384,16 +394,16 @@ let nextId = 0;
  * @internal
  */
 class SkyFlyoutComponent {
-    constructor(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService, _ngZone) {
-        this.adapter = adapter;
-        this.changeDetector = changeDetector;
-        this.injector = injector;
-        this.resolver = resolver;
-        this.resourcesService = resourcesService;
-        this.flyoutMediaQueryService = flyoutMediaQueryService;
-        this.elementRef = elementRef;
-        this.uiConfigService = uiConfigService;
-        this._ngZone = _ngZone;
+    constructor(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService, ngZone) {
+        _SkyFlyoutComponent_instances.add(this);
+        this.config = {
+            defaultWidth: window.innerWidth / 2,
+            minWidth: 320,
+            maxWidth: window.innerWidth / 2,
+            providers: [],
+        };
+        this.enableTrapFocus = false;
+        this.enableTrapFocusAutoCapture = false;
         this.flyoutId = `sky-flyout-${++nextId}`;
         this.flyoutState = FLYOUT_CLOSED_STATE;
         this.isOpen = false;
@@ -403,104 +413,123 @@ class SkyFlyoutComponent {
         this.isDragging = false;
         this.isFullscreen = false;
         this.resizeKeyControlActive = false;
-        this.xCoord = 0;
-        this.windowBufferSize = 20;
+        _SkyFlyoutComponent_xCoord.set(this, 0);
+        _SkyFlyoutComponent_windowBufferSize.set(this, 20);
+        this.permalink = {};
+        this.permalinkLabel = '';
+        this.primaryAction = {};
+        this.primaryActionLabel = '';
         /**
          * @internal
          */
         this.widthStep = 10;
-        this.ngUnsubscribe = new Subject();
-        this._messageStream = new Subject();
+        _SkyFlyoutComponent_flyoutInstance.set(this, void 0);
+        _SkyFlyoutComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyFlyoutComponent__messageStream.set(this, new Subject());
+        _SkyFlyoutComponent_adapter.set(this, void 0);
+        _SkyFlyoutComponent_changeDetector.set(this, void 0);
+        _SkyFlyoutComponent_injector.set(this, void 0);
+        _SkyFlyoutComponent_resolver.set(this, void 0);
+        _SkyFlyoutComponent_resourcesService.set(this, void 0);
+        _SkyFlyoutComponent_flyoutMediaQueryService.set(this, void 0);
+        _SkyFlyoutComponent_elementRef.set(this, void 0);
+        _SkyFlyoutComponent_uiConfigService.set(this, void 0);
+        _SkyFlyoutComponent_ngZone.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_adapter, adapter, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_injector, injector, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_resolver, resolver, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_resourcesService, resourcesService, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_flyoutMediaQueryService, flyoutMediaQueryService, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_elementRef, elementRef, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_uiConfigService, uiConfigService, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_ngZone, ngZone, "f");
         // All commands flow through the message stream.
         this.messageStream
-            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyFlyoutComponent_ngUnsubscribe, "f")))
             .subscribe((message) => {
-            this.handleIncomingMessages(message);
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_handleIncomingMessages).call(this, message);
         });
     }
     get messageStream() {
-        return this._messageStream;
-    }
-    get permalink() {
-        const permalink = this.config.permalink;
-        if (permalink) {
-            return permalink;
-        }
-        return {};
-    }
-    get permalinkLabel() {
-        if (this.permalink.label) {
-            return this.permalink.label;
-        }
-        return this.getString('skyux_flyout_permalink_button');
-    }
-    get primaryAction() {
-        const primaryAction = this.config.primaryAction;
-        if (primaryAction) {
-            return primaryAction;
-        }
-        return {};
-    }
-    get primaryActionLabel() {
-        if (this.config.primaryAction && this.config.primaryAction.label) {
-            return this.config.primaryAction.label;
-        }
-        return this.getString('skyux_flyout_primary_action_button');
+        return __classPrivateFieldGet(this, _SkyFlyoutComponent__messageStream, "f");
     }
     ngOnInit() {
-        this.adapter.adjustHeaderForHelp(this.flyoutHeader);
+        /* istanbul ignore else */
+        if (this.flyoutHeader) {
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_adapter, "f").adjustHeaderForHelp(this.flyoutHeader);
+        }
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_ngUnsubscribe, "f").complete();
     }
     onWindowResize(event) {
-        if (this.flyoutMediaQueryService.isWidthWithinBreakpiont(event.target.innerWidth, SkyMediaBreakpoints.xs)) {
-            this.updateBreakpointAndResponsiveClass(event.target.innerWidth);
+        if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").isWidthWithinBreakpiont(event.target.innerWidth, SkyMediaBreakpoints.xs)) {
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_updateBreakpointAndResponsiveClass).call(this, event.target.innerWidth);
         }
         else {
-            this.updateBreakpointAndResponsiveClass(this.flyoutWidth);
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_updateBreakpointAndResponsiveClass).call(this, this.flyoutWidth);
         }
-        this.setFullscreen();
-        if (event.target.innerWidth - this.flyoutWidth < this.windowBufferSize) {
-            this.flyoutWidth = event.target.innerWidth - this.windowBufferSize;
-            this.xCoord = this.windowBufferSize;
-            this.setUserData();
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_setFullscreen).call(this);
+        if (event.target.innerWidth - this.flyoutWidth < __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f")) {
+            this.flyoutWidth = event.target.innerWidth - __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f");
+            __classPrivateFieldSet(this, _SkyFlyoutComponent_xCoord, __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f"), "f");
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_setUserData).call(this);
         }
     }
     attach(component, config) {
-        this.cleanTemplate();
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_cleanTemplate).call(this);
         // Emit the closed event on any previously opened flyout instance
-        if (this.flyoutInstance) {
-            this.notifyClosed();
+        if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")) {
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_notifyClosed).call(this);
+        }
+        this.config = Object.assign({
+            defaultWidth: window.innerWidth / 2,
+            minWidth: 320,
+            maxWidth: window.innerWidth / 2,
+            providers: [],
+        }, config);
+        if (config?.defaultWidth && !config?.maxWidth) {
+            this.config.maxWidth = config?.defaultWidth;
         }
-        this.config = Object.assign({ providers: [] }, config);
-        this.config.defaultWidth =
-            this.config.defaultWidth || window.innerWidth / 2;
-        this.config.minWidth = this.config.minWidth || 320;
-        this.config.maxWidth = this.config.maxWidth || this.config.defaultWidth;
         this.config.showIterator = this.config.showIterator || false;
         this.config.iteratorNextButtonDisabled =
             this.config.iteratorNextButtonDisabled || false;
         this.config.iteratorPreviousButtonDisabled =
             this.config.iteratorPreviousButtonDisabled || false;
-        const factory = this.resolver.resolveComponentFactory(component);
+        this.permalink = this.config.permalink ?? {};
+        this.permalinkLabel =
+            this.config.permalink && this.config.permalink.label
+                ? this.config.permalink.label
+                : __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_getString).call(this, 'skyux_flyout_permalink_button');
+        this.primaryAction = this.config.primaryAction ?? {};
+        this.primaryActionLabel =
+            this.config.primaryAction && this.config.primaryAction.label
+                ? this.config.primaryAction.label
+                : __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_getString).call(this, 'skyux_flyout_primary_action_button');
+        const factory = __classPrivateFieldGet(this, _SkyFlyoutComponent_resolver, "f").resolveComponentFactory(component);
         const injector = Injector.create({
-            parent: this.injector,
+            parent: __classPrivateFieldGet(this, _SkyFlyoutComponent_injector, "f"),
             providers: this.config.providers,
         });
-        const componentRef = this.target.createComponent(factory, undefined, injector);
-        this.flyoutInstance = this.createFlyoutInstance(componentRef.instance);
+        const componentRef = this.target?.createComponent(factory, undefined, injector);
+        /* safety check */
+        /* istanbul ignore if */
+        if (!componentRef) {
+            throw new Error("Flyout's internal component could not be created");
+        }
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_flyoutInstance, __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_createFlyoutInstance).call(this, componentRef.instance), "f");
         // This is used to ensure we do not render the flyout until we have attached the component.
         // This allows the aria-labelledby to function correctly.
         this.instanceReady = true;
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_changeDetector, "f").markForCheck();
         // Open the flyout immediately.
         this.messageStream.next({
             type: SkyFlyoutMessageType.Open,
         });
         if (this.config.settingsKey) {
-            this.uiConfigService
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_uiConfigService, "f")
                 .getConfig(this.config.settingsKey)
                 .pipe(take(1))
                 .subscribe((value) => {
@@ -511,14 +540,14 @@ class SkyFlyoutComponent {
                     // Bad data, or config is the default config.
                     this.flyoutWidth = this.config.defaultWidth;
                 }
-                this.checkInitialSize();
+                __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_checkInitialSize).call(this);
             });
         }
         else {
             this.flyoutWidth = this.config.defaultWidth;
-            this.checkInitialSize();
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_checkInitialSize).call(this);
         }
-        return this.flyoutInstance;
+        return __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f");
     }
     close() {
         this.messageStream.next({
@@ -526,11 +555,15 @@ class SkyFlyoutComponent {
         });
     }
     invokePrimaryAction() {
-        this.primaryAction.callback();
-        if (this.primaryAction.closeAfterInvoking) {
-            this.close();
+        if (this.primaryAction.callback) {
+            this.primaryAction.callback();
+            if (this.primaryAction.closeAfterInvoking) {
+                this.close();
+            }
+            return false;
         }
-        return false;
+        /* istanbul ignore next */
+        return true;
     }
     getAnimationState() {
         return this.instanceReady && this.isOpening
@@ -543,18 +576,18 @@ class SkyFlyoutComponent {
         }
         if (event.toState === FLYOUT_CLOSED_STATE) {
             this.isOpen = false;
-            this.notifyClosed();
-            this.cleanTemplate();
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_notifyClosed).call(this);
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_cleanTemplate).call(this);
         }
     }
     onHeaderGrabHandleMouseDown(event) {
         this.onResizeHandleMouseDown(event);
     }
     onHeaderGrabHandleKeyDown(event) {
-        this.handleResizeKeyDown(event);
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_handleResizeKeyDown).call(this, event);
     }
     onResizeHandleKeyDown(event) {
-        this.handleResizeKeyDown(event);
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_handleResizeKeyDown).call(this, event);
     }
     onResizeHandleMouseDown(event) {
         event.preventDefault();
@@ -563,8 +596,8 @@ class SkyFlyoutComponent {
             return;
         }
         this.isDragging = true;
-        this.xCoord = event.clientX;
-        this.adapter.toggleIframePointerEvents(false);
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_xCoord, event.clientX, "f");
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_adapter, "f").toggleIframePointerEvents(false);
         fromEvent(document, 'mousemove')
             .pipe(takeWhile(() => {
             return this.isDragging;
@@ -586,204 +619,197 @@ class SkyFlyoutComponent {
         if (!this.isDragging) {
             return;
         }
-        const offsetX = event.clientX - this.xCoord;
+        const offsetX = event.clientX - __classPrivateFieldGet(this, _SkyFlyoutComponent_xCoord, "f");
         let width = this.flyoutWidth;
         width -= offsetX;
         if (width < this.config.minWidth || width > this.config.maxWidth) {
             return;
         }
-        if (window.innerWidth - width < this.windowBufferSize) {
-            width = window.innerWidth - this.windowBufferSize;
-            this.xCoord = this.windowBufferSize;
+        if (window.innerWidth - width < __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f")) {
+            width = window.innerWidth - __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f");
+            __classPrivateFieldSet(this, _SkyFlyoutComponent_xCoord, __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f"), "f");
         }
         else {
-            this.xCoord = event.clientX;
+            __classPrivateFieldSet(this, _SkyFlyoutComponent_xCoord, event.clientX, "f");
         }
         this.flyoutWidth = width;
-        this.updateBreakpointAndResponsiveClass(this.flyoutWidth);
-        this.changeDetector.markForCheck();
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_updateBreakpointAndResponsiveClass).call(this, this.flyoutWidth);
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_changeDetector, "f").markForCheck();
     }
     onHandleRelease(event) {
         fromEvent(document, 'click')
             .pipe(take(1))
             .subscribe(() => {
             this.isDragging = false;
-            this.adapter.toggleIframePointerEvents(true);
-            this.setUserData();
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_adapter, "f").toggleIframePointerEvents(true);
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_setUserData).call(this);
         });
     }
     onIteratorPreviousButtonClick() {
-        this.flyoutInstance.iteratorPreviousButtonClick.emit();
+        /* istanbul ignore else */
+        if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")) {
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f").iteratorPreviousButtonClick.emit();
+        }
     }
     onIteratorNextButtonClick() {
-        this.flyoutInstance.iteratorNextButtonClick.emit();
+        /* istanbul ignore else */
+        if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")) {
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f").iteratorNextButtonClick.emit();
+        }
     }
-    createFlyoutInstance(component) {
-        const instance = new SkyFlyoutInstance();
-        instance.componentInstance = component;
-        instance.hostController
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((message) => {
-            this.messageStream.next(message);
+}
+_SkyFlyoutComponent_xCoord = new WeakMap(), _SkyFlyoutComponent_windowBufferSize = new WeakMap(), _SkyFlyoutComponent_flyoutInstance = new WeakMap(), _SkyFlyoutComponent_ngUnsubscribe = new WeakMap(), _SkyFlyoutComponent__messageStream = new WeakMap(), _SkyFlyoutComponent_adapter = new WeakMap(), _SkyFlyoutComponent_changeDetector = new WeakMap(), _SkyFlyoutComponent_injector = new WeakMap(), _SkyFlyoutComponent_resolver = new WeakMap(), _SkyFlyoutComponent_resourcesService = new WeakMap(), _SkyFlyoutComponent_flyoutMediaQueryService = new WeakMap(), _SkyFlyoutComponent_elementRef = new WeakMap(), _SkyFlyoutComponent_uiConfigService = new WeakMap(), _SkyFlyoutComponent_ngZone = new WeakMap(), _SkyFlyoutComponent_instances = new WeakSet(), _SkyFlyoutComponent_createFlyoutInstance = function _SkyFlyoutComponent_createFlyoutInstance(component) {
+    const instance = new SkyFlyoutInstance(component);
+    instance.hostController
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyFlyoutComponent_ngUnsubscribe, "f")))
+        .subscribe((message) => {
+        this.messageStream.next(message);
+    });
+    return instance;
+}, _SkyFlyoutComponent_handleIncomingMessages = function _SkyFlyoutComponent_handleIncomingMessages(message) {
+    switch (message.type) {
+        case SkyFlyoutMessageType.Open:
+            if (!this.isOpen) {
+                this.isOpen = false;
+                this.isOpening = true;
+            }
+            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_initFocusTrap).call(this);
+            break;
+        case SkyFlyoutMessageType.Close:
+            if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")?.beforeClose?.observers
+                .length === 0 ||
+                message.data?.ignoreBeforeClose) {
+                this.isOpen = true;
+                this.isOpening = false;
+            }
+            else {
+                __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")?.beforeClose?.next(new SkyFlyoutBeforeCloseHandler(() => {
+                    this.isOpen = true;
+                    this.isOpening = false;
+                }));
+            }
+            break;
+        case SkyFlyoutMessageType.EnableIteratorNextButton:
+            this.config.iteratorNextButtonDisabled = false;
+            break;
+        case SkyFlyoutMessageType.EnableIteratorPreviousButton:
+            this.config.iteratorPreviousButtonDisabled = false;
+            break;
+        case SkyFlyoutMessageType.DisableIteratorNextButton:
+            this.config.iteratorNextButtonDisabled = true;
+            break;
+        case SkyFlyoutMessageType.DisableIteratorPreviousButton:
+            this.config.iteratorPreviousButtonDisabled = true;
+            break;
+    }
+    __classPrivateFieldGet(this, _SkyFlyoutComponent_changeDetector, "f").markForCheck();
+}, _SkyFlyoutComponent_notifyClosed = function _SkyFlyoutComponent_notifyClosed() {
+    __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")?.closed.emit();
+    __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")?.closed.complete();
+}, _SkyFlyoutComponent_cleanTemplate = function _SkyFlyoutComponent_cleanTemplate() {
+    this.target?.clear();
+}, _SkyFlyoutComponent_updateBreakpointAndResponsiveClass = function _SkyFlyoutComponent_updateBreakpointAndResponsiveClass(width) {
+    __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").setBreakpointForWidth(width);
+    const newBreakpiont = __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").current;
+    __classPrivateFieldGet(this, _SkyFlyoutComponent_adapter, "f").setResponsiveClass(__classPrivateFieldGet(this, _SkyFlyoutComponent_elementRef, "f"), newBreakpiont);
+}, _SkyFlyoutComponent_setFullscreen = function _SkyFlyoutComponent_setFullscreen() {
+    if (window.innerWidth - __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f") < this.config.minWidth) {
+        this.isFullscreen = true;
+    }
+    else {
+        this.isFullscreen = false;
+    }
+}, _SkyFlyoutComponent_setUserData = function _SkyFlyoutComponent_setUserData() {
+    if (this.config.settingsKey) {
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_uiConfigService, "f")
+            .setConfig(this.config.settingsKey, {
+            flyoutWidth: this.flyoutWidth,
+        })
+            .pipe(take(1))
+            .subscribe(
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        () => { }, (err) => {
+            console.warn('Could not save flyout data.');
+            console.warn(err);
         });
-        return instance;
     }
-    handleIncomingMessages(message) {
-        switch (message.type) {
-            case SkyFlyoutMessageType.Open:
-                if (!this.isOpen) {
-                    this.isOpen = false;
-                    this.isOpening = true;
-                }
-                this.initFocusTrap();
+}, _SkyFlyoutComponent_checkInitialSize = function _SkyFlyoutComponent_checkInitialSize() {
+    if (this.flyoutWidth < this.config.minWidth) {
+        this.flyoutWidth = this.config.minWidth;
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_setUserData).call(this);
+    }
+    else if (this.flyoutWidth > this.config.maxWidth) {
+        this.flyoutWidth = this.config.maxWidth;
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_setUserData).call(this);
+    }
+    // Ensure flyout does not load larger than the window and its buffer
+    if (window.innerWidth - this.flyoutWidth < __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f")) {
+        this.flyoutWidth = window.innerWidth - __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutComponent_xCoord, __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f"), "f");
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_setUserData).call(this);
+    }
+    if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").isWidthWithinBreakpiont(window.innerWidth, SkyMediaBreakpoints.xs)) {
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_updateBreakpointAndResponsiveClass).call(this, window.innerWidth);
+    }
+    else {
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_updateBreakpointAndResponsiveClass).call(this, this.flyoutWidth);
+    }
+    __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_setFullscreen).call(this);
+}, _SkyFlyoutComponent_getString = function _SkyFlyoutComponent_getString(key) {
+    // TODO: Need to implement the async `getString` method in a breaking change.
+    return __classPrivateFieldGet(this, _SkyFlyoutComponent_resourcesService, "f").getStringForLocale({ locale: 'en-US' }, key);
+}, _SkyFlyoutComponent_handleResizeKeyDown = function _SkyFlyoutComponent_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 SkyFlyoutMessageType.Close:
-                if (this.flyoutInstance.beforeClose.observers.length ===
-                    0 ||
-                    message.data?.ignoreBeforeClose) {
-                    this.isOpen = true;
-                    this.isOpening = false;
-                }
-                else {
-                    this.flyoutInstance.beforeClose.next(new SkyFlyoutBeforeCloseHandler(() => {
-                        this.isOpen = true;
-                        this.isOpening = false;
-                    }));
+            case 'tab':
+                /* istanbul ignore else */
+                if (this.resizeKeyControlActive) {
+                    this.resizeKeyControlActive = false;
                 }
                 break;
-            case SkyFlyoutMessageType.EnableIteratorNextButton:
-                this.config.iteratorNextButtonDisabled = false;
-                break;
-            case SkyFlyoutMessageType.EnableIteratorPreviousButton:
-                this.config.iteratorPreviousButtonDisabled = false;
-                break;
-            case SkyFlyoutMessageType.DisableIteratorNextButton:
-                this.config.iteratorNextButtonDisabled = true;
-                break;
-            case SkyFlyoutMessageType.DisableIteratorPreviousButton:
-                this.config.iteratorPreviousButtonDisabled = true;
-                break;
-        }
-        this.changeDetector.markForCheck();
-    }
-    notifyClosed() {
-        this.flyoutInstance.closed.emit();
-        this.flyoutInstance.closed.complete();
-    }
-    cleanTemplate() {
-        this.target.clear();
-    }
-    updateBreakpointAndResponsiveClass(width) {
-        this.flyoutMediaQueryService.setBreakpointForWidth(width);
-        const newBreakpiont = this.flyoutMediaQueryService.current;
-        this.adapter.setResponsiveClass(this.elementRef, newBreakpiont);
-    }
-    setFullscreen() {
-        if (window.innerWidth - this.windowBufferSize < this.config.minWidth) {
-            this.isFullscreen = true;
-        }
-        else {
-            this.isFullscreen = false;
-        }
-    }
-    setUserData() {
-        if (this.config.settingsKey) {
-            this.uiConfigService
-                .setConfig(this.config.settingsKey, {
-                flyoutWidth: this.flyoutWidth,
-            })
-                .pipe(take(1))
-                .subscribe(
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            () => { }, (err) => {
-                console.warn('Could not save flyout data.');
-                console.warn(err);
-            });
-        }
-    }
-    checkInitialSize() {
-        if (this.flyoutWidth < this.config.minWidth) {
-            this.flyoutWidth = this.config.minWidth;
-            this.setUserData();
-        }
-        else if (this.flyoutWidth > this.config.maxWidth) {
-            this.flyoutWidth = this.config.maxWidth;
-            this.setUserData();
-        }
-        // Ensure flyout does not load larger than the window and its buffer
-        if (window.innerWidth - this.flyoutWidth < this.windowBufferSize) {
-            this.flyoutWidth = window.innerWidth - this.windowBufferSize;
-            this.xCoord = this.windowBufferSize;
-            this.setUserData();
-        }
-        if (this.flyoutMediaQueryService.isWidthWithinBreakpiont(window.innerWidth, SkyMediaBreakpoints.xs)) {
-            this.updateBreakpointAndResponsiveClass(window.innerWidth);
-        }
-        else {
-            this.updateBreakpointAndResponsiveClass(this.flyoutWidth);
-        }
-        this.setFullscreen();
-    }
-    getString(key) {
-        // 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':
+            case 'left':
+                if (this.resizeKeyControlActive) {
                     /* istanbul ignore else */
-                    if (this.resizeKeyControlActive) {
-                        this.resizeKeyControlActive = false;
+                    if (this.flyoutWidth < this.config.maxWidth) {
+                        this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
                     }
-                    break;
-                case 'left':
-                    if (this.resizeKeyControlActive) {
-                        /* istanbul ignore else */
-                        if (this.flyoutWidth < this.config.maxWidth) {
-                            this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
-                        }
-                    }
-                    break;
-                case 'right':
-                    if (this.resizeKeyControlActive) {
-                        /* istanbul ignore else */
-                        if (this.flyoutWidth > this.config.minWidth) {
-                            this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
-                        }
+                }
+                break;
+            case 'right':
+                if (this.resizeKeyControlActive) {
+                    /* istanbul ignore else */
+                    if (this.flyoutWidth > this.config.minWidth) {
+                        this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
                     }
-                    break;
-                /* istanbul ignore next */
-                default:
-                    break;
-            }
-        }
-    }
-    /** Executes a function when the zone is stable. */
-    _executeOnStable(fn) {
-        if (this._ngZone.isStable) {
-            fn();
-        }
-        else {
-            this._ngZone.onStable.pipe(take(1)).subscribe(fn);
+                }
+                break;
+            /* istanbul ignore next */
+            default:
+                break;
         }
     }
-    initFocusTrap() {
-        this.enableTrapFocusAutoCapture = false;
-        this.enableTrapFocus = false;
-        // Waiting for zone to be stable will avoid ExpressionChangeAfterCheckedError.
-        this._executeOnStable(() => {
-            this.enableTrapFocusAutoCapture = true;
-            this.enableTrapFocus = true;
-        });
-    }
-}
+}, _SkyFlyoutComponent_executeOnStable = function _SkyFlyoutComponent_executeOnStable(fn) {
+    if (__classPrivateFieldGet(this, _SkyFlyoutComponent_ngZone, "f").isStable) {
+        fn();
+    }
+    else {
+        __classPrivateFieldGet(this, _SkyFlyoutComponent_ngZone, "f").onStable.pipe(take(1)).subscribe(fn);
+    }
+}, _SkyFlyoutComponent_initFocusTrap = function _SkyFlyoutComponent_initFocusTrap() {
+    this.enableTrapFocusAutoCapture = false;
+    this.enableTrapFocus = false;
+    // Waiting for zone to be stable will avoid ExpressionChangeAfterCheckedError.
+    __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_executeOnStable).call(this, () => {
+        this.enableTrapFocusAutoCapture = true;
+        this.enableTrapFocus = true;
+    });
+};
 SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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$1.SkyUIConfigService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
         SkyFlyoutAdapterService,
@@ -880,34 +906,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyFlyoutService_instances, _SkyFlyoutService_host, _SkyFlyoutService_removeAfterClosed, _SkyFlyoutService_isOpening, _SkyFlyoutService_ngUnsubscribe, _SkyFlyoutService_coreAdapter, _SkyFlyoutService_windowRef, _SkyFlyoutService_dynamicComponentService, _SkyFlyoutService_router, _SkyFlyoutService_ngZone, _SkyFlyoutService_createHostComponent, _SkyFlyoutService_removeHostComponent, _SkyFlyoutService_addListeners, _SkyFlyoutService_removeListners;
 /**
  * Launches flyouts and provides a common look and feel.
  * This service dynamically generates the flyout component and appends it directly to the
  * document's `body` element. The `SkyFlyoutInstance` class watches for and triggers flyout events.
  */
 class SkyFlyoutService {
-    constructor(coreAdapter, windowRef, dynamicComponentService, router, _ngZone, 
-    // NOTE: This used to be used for an `applicationRef.tick` which has since been removed.
-    // We can not remove this due to it being a breaking change for those manually constructing the service.
-    _applicationRef) {
-        this.coreAdapter = coreAdapter;
-        this.windowRef = windowRef;
-        this.dynamicComponentService = dynamicComponentService;
-        this.router = router;
-        this._ngZone = _ngZone;
-        this._applicationRef = _applicationRef;
-        this.removeAfterClosed = false;
-        this.isOpening = false;
-        this.ngUnsubscribe = new Subject();
-        /*istanbul ignore if*/
-        /*eslint-disable-next-line no-empty*/
-        if (this._applicationRef) {
-        }
+    constructor(coreAdapter, windowRef, dynamicComponentService, router, ngZone) {
+        _SkyFlyoutService_instances.add(this);
+        _SkyFlyoutService_host.set(this, void 0);
+        _SkyFlyoutService_removeAfterClosed.set(this, false);
+        _SkyFlyoutService_isOpening.set(this, false);
+        _SkyFlyoutService_ngUnsubscribe.set(this, new Subject());
+        _SkyFlyoutService_coreAdapter.set(this, void 0);
+        _SkyFlyoutService_windowRef.set(this, void 0);
+        _SkyFlyoutService_dynamicComponentService.set(this, void 0);
+        _SkyFlyoutService_router.set(this, void 0);
+        _SkyFlyoutService_ngZone.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyFlyoutService_coreAdapter, coreAdapter, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutService_windowRef, windowRef, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutService_dynamicComponentService, dynamicComponentService, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutService_router, router, "f");
+        __classPrivateFieldSet(this, _SkyFlyoutService_ngZone, ngZone, "f");
     }
     ngOnDestroy() {
-        this.removeListners();
-        if (this.host) {
-            this.removeHostComponent();
+        __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeListners).call(this);
+        if (__classPrivateFieldGet(this, _SkyFlyoutService_host, "f")) {
+            __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeHostComponent).call(this);
         }
     }
     /**
@@ -915,8 +941,8 @@ class SkyFlyoutService {
      * @param args Arguments used when closing the flyout.
      */
     close(args) {
-        if (this.host && !this.isOpening) {
-            this.host.instance.messageStream.next({
+        if (__classPrivateFieldGet(this, _SkyFlyoutService_host, "f") && !__classPrivateFieldGet(this, _SkyFlyoutService_isOpening, "f")) {
+            __classPrivateFieldGet(this, _SkyFlyoutService_host, "f").instance.messageStream.next({
                 type: SkyFlyoutMessageType.Close,
                 data: {
                     ignoreBeforeClose: args ? args.ignoreBeforeClose : false,
@@ -931,117 +957,111 @@ class SkyFlyoutService {
      */
     open(component, config) {
         // isOpening flag will prevent close() from firing when open() is also fired.
-        this.isOpening = true;
-        this.windowRef.nativeWindow.setTimeout(() => {
-            this.isOpening = false;
+        __classPrivateFieldSet(this, _SkyFlyoutService_isOpening, true, "f");
+        __classPrivateFieldGet(this, _SkyFlyoutService_windowRef, "f").nativeWindow.setTimeout(() => {
+            __classPrivateFieldSet(this, _SkyFlyoutService_isOpening, false, "f");
         });
-        if (!this.host) {
-            this.host = this.createHostComponent();
-            this.router.events
-                .pipe(takeWhile(() => this.host !== undefined))
+        if (!__classPrivateFieldGet(this, _SkyFlyoutService_host, "f")) {
+            __classPrivateFieldSet(this, _SkyFlyoutService_host, __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_createHostComponent).call(this), "f");
+            __classPrivateFieldGet(this, _SkyFlyoutService_router, "f").events
+                .pipe(takeWhile(() => __classPrivateFieldGet(this, _SkyFlyoutService_host, "f") !== undefined))
                 .subscribe((event) => {
                 if (event instanceof NavigationStart) {
                     this.close();
                     // Sanity check - if the host still exists after animations should have completed - remove host
-                    this._ngZone.onStable.pipe(take(1)).subscribe(() => {
-                        if (this.host) {
-                            this.removeHostComponent();
+                    __classPrivateFieldGet(this, _SkyFlyoutService_ngZone, "f").onStable.pipe(take(1)).subscribe(() => {
+                        if (__classPrivateFieldGet(this, _SkyFlyoutService_host, "f")) {
+                            __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeHostComponent).call(this);
                         }
                     });
                 }
             });
         }
-        const flyout = this.host.instance.attach(component, config);
-        this.addListeners(flyout);
+        const flyout = __classPrivateFieldGet(this, _SkyFlyoutService_host, "f").instance.attach(component, config);
+        __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_addListeners).call(this, flyout);
         return flyout;
     }
-    createHostComponent() {
-        this.host =
-            this.dynamicComponentService.createComponent(SkyFlyoutComponent);
-        return this.host;
-    }
-    removeHostComponent() {
-        if (this.host) {
-            this.dynamicComponentService.removeComponent(this.host);
-            this.host = undefined;
-        }
-    }
-    addListeners(flyout) {
-        /* istanbul ignore else */
-        if (this.host) {
-            const flyoutInstance = this.host.instance;
-            let doClose = false;
-            /**
-             * Handles when to close a flyout.
-             * Note: We're using `mouseup` in order to capture the parent of certain targets that will be
-             * deleted immediately after being clicked. If we use `click`, the event is fired after the
-             * element is removed from the DOM making it impossible to check the parent's z-index
-             * relative to the flyout's container.
-             */
-            fromEvent(document, 'mouseup')
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe((event) => {
-                doClose = false;
-                if (this.host.instance.isDragging) {
-                    return;
-                }
-                if (flyoutInstance.flyoutRef.nativeElement.contains(event.target)) {
-                    return;
-                }
-                const isAbove = event.target === document
-                    ? false
-                    : this.coreAdapter.isTargetAboveElement(event.target, flyoutInstance.flyoutRef.nativeElement);
-                /* istanbul ignore else */
-                if (!isAbove) {
-                    doClose = true;
-                }
-            });
-            /**
-             * Check if we should close the flyout specifically on a `click` event so that we can keep
-             * it open when consumers fire another `click` event on a trigger button. Since the consumer
-             * will likely use a `click` event to open the flyout, we want to wait for that event to fire
-             * before determining if the flyout should be closed.
-             */
-            fromEvent(document, 'click')
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe(() => {
-                if (doClose) {
-                    this.close();
-                }
-            });
-            this.removeAfterClosed = false;
-            flyoutInstance.messageStream
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe((message) => {
-                if (message.type === SkyFlyoutMessageType.Close) {
-                    this.removeAfterClosed = true;
-                    this.isOpening = false;
-                }
-            });
-            flyout.closed.pipe(take(1)).subscribe(() => {
-                this.removeListners();
-                if (this.removeAfterClosed) {
-                    this.removeHostComponent();
-                }
-            });
-        }
-    }
-    removeListners() {
-        this.ngUnsubscribe.next(true);
-        this.ngUnsubscribe.unsubscribe();
-        this.ngUnsubscribe = new Subject();
-    }
 }
-SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyAppWindowRef }, { token: i1$1.SkyDynamicComponentService }, { token: i2$2.Router }, { token: i0.NgZone }, { token: i0.ApplicationRef, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+_SkyFlyoutService_host = new WeakMap(), _SkyFlyoutService_removeAfterClosed = new WeakMap(), _SkyFlyoutService_isOpening = new WeakMap(), _SkyFlyoutService_ngUnsubscribe = new WeakMap(), _SkyFlyoutService_coreAdapter = new WeakMap(), _SkyFlyoutService_windowRef = new WeakMap(), _SkyFlyoutService_dynamicComponentService = new WeakMap(), _SkyFlyoutService_router = new WeakMap(), _SkyFlyoutService_ngZone = new WeakMap(), _SkyFlyoutService_instances = new WeakSet(), _SkyFlyoutService_createHostComponent = function _SkyFlyoutService_createHostComponent() {
+    __classPrivateFieldSet(this, _SkyFlyoutService_host, __classPrivateFieldGet(this, _SkyFlyoutService_dynamicComponentService, "f").createComponent(SkyFlyoutComponent), "f");
+    return __classPrivateFieldGet(this, _SkyFlyoutService_host, "f");
+}, _SkyFlyoutService_removeHostComponent = function _SkyFlyoutService_removeHostComponent() {
+    if (__classPrivateFieldGet(this, _SkyFlyoutService_host, "f")) {
+        __classPrivateFieldGet(this, _SkyFlyoutService_dynamicComponentService, "f").removeComponent(__classPrivateFieldGet(this, _SkyFlyoutService_host, "f"));
+        __classPrivateFieldSet(this, _SkyFlyoutService_host, undefined, "f");
+    }
+}, _SkyFlyoutService_addListeners = function _SkyFlyoutService_addListeners(flyout) {
+    /* istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyFlyoutService_host, "f")) {
+        const flyoutInstance = __classPrivateFieldGet(this, _SkyFlyoutService_host, "f").instance;
+        let doClose = false;
+        /**
+         * Handles when to close a flyout.
+         * Note: We're using `mouseup` in order to capture the parent of certain targets that will be
+         * deleted immediately after being clicked. If we use `click`, the event is fired after the
+         * element is removed from the DOM making it impossible to check the parent's z-index
+         * relative to the flyout's container.
+         */
+        fromEvent(document, 'mouseup')
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyFlyoutService_ngUnsubscribe, "f")))
+            .subscribe((event) => {
+            doClose = false;
+            if (__classPrivateFieldGet(this, _SkyFlyoutService_host, "f")?.instance.isDragging) {
+                return;
+            }
+            if (flyoutInstance.flyoutRef?.nativeElement.contains(event.target)) {
+                return;
+            }
+            const isAbove = event.target === document || !event.target
+                ? false
+                : __classPrivateFieldGet(this, _SkyFlyoutService_coreAdapter, "f").isTargetAboveElement(event.target, flyoutInstance.flyoutRef?.nativeElement);
+            /* istanbul ignore else */
+            if (!isAbove) {
+                doClose = true;
+            }
+        });
+        /**
+         * Check if we should close the flyout specifically on a `click` event so that we can keep
+         * it open when consumers fire another `click` event on a trigger button. Since the consumer
+         * will likely use a `click` event to open the flyout, we want to wait for that event to fire
+         * before determining if the flyout should be closed.
+         */
+        fromEvent(document, 'click')
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyFlyoutService_ngUnsubscribe, "f")))
+            .subscribe(() => {
+            if (doClose) {
+                this.close();
+            }
+        });
+        __classPrivateFieldSet(this, _SkyFlyoutService_removeAfterClosed, false, "f");
+        flyoutInstance.messageStream
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyFlyoutService_ngUnsubscribe, "f")))
+            .subscribe((message) => {
+            if (message.type === SkyFlyoutMessageType.Close) {
+                __classPrivateFieldSet(this, _SkyFlyoutService_removeAfterClosed, true, "f");
+                __classPrivateFieldSet(this, _SkyFlyoutService_isOpening, false, "f");
+            }
+        });
+        flyout.closed.pipe(take(1)).subscribe(() => {
+            __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeListners).call(this);
+            if (__classPrivateFieldGet(this, _SkyFlyoutService_removeAfterClosed, "f")) {
+                __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeHostComponent).call(this);
+            }
+        });
+    }
+}, _SkyFlyoutService_removeListners = function _SkyFlyoutService_removeListners() {
+    __classPrivateFieldGet(this, _SkyFlyoutService_ngUnsubscribe, "f").next(true);
+    __classPrivateFieldGet(this, _SkyFlyoutService_ngUnsubscribe, "f").unsubscribe();
+    __classPrivateFieldSet(this, _SkyFlyoutService_ngUnsubscribe, new Subject(), "f");
+};
+SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyAppWindowRef }, { token: i1$1.SkyDynamicComponentService }, { token: i2$2.Router }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyFlyoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutService, providedIn: 'any' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFlyoutService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'any',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyAppWindowRef }, { type: i1$1.SkyDynamicComponentService }, { type: i2$2.Router }, { type: i0.NgZone }, { type: i0.ApplicationRef, decorators: [{
-                    type: Optional
-                }] }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyAppWindowRef }, { type: i1$1.SkyDynamicComponentService }, { type: i2$2.Router }, { type: i0.NgZone }]; } });
 
 /**
  * Generated bundle index. Do not edit.