@skyux/flyout 8.7.0 → 9.0.0-alpha.0

package/fesm2015/skyux-flyout.mjs

@@ -1,1091 +0,0 @@
-import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
-import * as i0 from '@angular/core';
-import { EventEmitter, NgModule, Component, Input, Output, Injectable, Injector, ElementRef, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener } from '@angular/core';
-import { Subject, ReplaySubject, BehaviorSubject, fromEvent } from 'rxjs';
-import * as i5 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
-import * as i6 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import * as i2$2 from '@angular/router';
-import { RouterModule, NavigationStart } from '@angular/router';
-import * as i2$1 from '@skyux/i18n';
-import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import * as i1 from '@skyux/indicators';
-import { SkyIconModule } from '@skyux/indicators';
-import * as i10 from '@skyux/router';
-import { SkyHrefModule } from '@skyux/router';
-import * as i2 from '@skyux/theme';
-import { SkyThemeModule } from '@skyux/theme';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i1$1 from '@skyux/core';
-import { SkyMediaBreakpoints, SKY_STACKING_CONTEXT, SkyMediaQueryService } from '@skyux/core';
-import { takeUntil, take, takeWhile } from 'rxjs/operators';
-
-/**
- * @internal
- */
-var SkyFlyoutMessageType;
-(function (SkyFlyoutMessageType) {
-    SkyFlyoutMessageType[SkyFlyoutMessageType["Open"] = 0] = "Open";
-    SkyFlyoutMessageType[SkyFlyoutMessageType["Close"] = 1] = "Close";
-    SkyFlyoutMessageType[SkyFlyoutMessageType["EnableIteratorNextButton"] = 2] = "EnableIteratorNextButton";
-    SkyFlyoutMessageType[SkyFlyoutMessageType["EnableIteratorPreviousButton"] = 3] = "EnableIteratorPreviousButton";
-    SkyFlyoutMessageType[SkyFlyoutMessageType["DisableIteratorNextButton"] = 4] = "DisableIteratorNextButton";
-    SkyFlyoutMessageType[SkyFlyoutMessageType["DisableIteratorPreviousButton"] = 5] = "DisableIteratorPreviousButton";
-})(SkyFlyoutMessageType || (SkyFlyoutMessageType = {}));
-
-var _SkyFlyoutInstance__beforeClose, _SkyFlyoutInstance__iteratorNextButtonClick, _SkyFlyoutInstance__iteratorPreviousButtonClick, _SkyFlyoutInstance__iteratorNextButtonDisabled, _SkyFlyoutInstance__iteratorPreviousButtonDisabled, _SkyFlyoutInstance__hostController;
-/**
- * Represents a single displayed flyout.
- */
-class SkyFlyoutInstance {
-    /**
-     * An event that the modal instance emits when it is about to close.
-     * If a subscription exists for this event,
-     * the modal does not close until the subscriber calls the handler's `closeModal` method.
-     */
-    get beforeClose() {
-        return __classPrivateFieldGet(this, _SkyFlyoutInstance__beforeClose, "f");
-    }
-    /**
-     * Used to communicate with the host component.
-     * @internal
-     */
-    get hostController() {
-        return __classPrivateFieldGet(this, _SkyFlyoutInstance__hostController, "f");
-    }
-    /**
-     * An event that the flyout instance emits when users click the next iterator button.
-     */
-    get iteratorNextButtonClick() {
-        return __classPrivateFieldGet(this, _SkyFlyoutInstance__iteratorNextButtonClick, "f");
-    }
-    /**
-     * An event that the flyout instance emits when users click the previous iterator button.
-     */
-    get iteratorPreviousButtonClick() {
-        return __classPrivateFieldGet(this, _SkyFlyoutInstance__iteratorPreviousButtonClick, "f");
-    }
-    /**
-     * Disables the next iterator button.
-     * @default false
-     */
-    set iteratorNextButtonDisabled(newValue) {
-        __classPrivateFieldSet(this, _SkyFlyoutInstance__iteratorNextButtonDisabled, newValue, "f");
-        if (newValue) {
-            this.hostController.next({
-                type: SkyFlyoutMessageType.DisableIteratorNextButton,
-            });
-        }
-        else {
-            this.hostController.next({
-                type: SkyFlyoutMessageType.EnableIteratorNextButton,
-            });
-        }
-    }
-    get iteratorNextButtonDisabled() {
-        return __classPrivateFieldGet(this, _SkyFlyoutInstance__iteratorNextButtonDisabled, "f");
-    }
-    /**
-     * Disables the previous iterator button.
-     * @default false
-     */
-    set iteratorPreviousButtonDisabled(newValue) {
-        __classPrivateFieldSet(this, _SkyFlyoutInstance__iteratorPreviousButtonDisabled, newValue, "f");
-        if (newValue) {
-            this.hostController.next({
-                type: SkyFlyoutMessageType.DisableIteratorPreviousButton,
-            });
-        }
-        else {
-            this.hostController.next({
-                type: SkyFlyoutMessageType.EnableIteratorPreviousButton,
-            });
-        }
-    }
-    get iteratorPreviousButtonDisabled() {
-        return __classPrivateFieldGet(this, _SkyFlyoutInstance__iteratorPreviousButtonDisabled, "f");
-    }
-    // TODO: Remove this being optional in a future breaking change.
-    constructor(componentInstance) {
-        /**
-         * An event that the flyout instance emits when it closes.
-         */
-        this.closed = new EventEmitter();
-        /**
-         * A `boolean` value that returns `true` if the flyout is open.
-         * @default true
-         */
-        this.isOpen = true;
-        _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());
-        if (!componentInstance) {
-            console.warn(`The SkyFlyoutInstance was created without a reference to the flyout's child component instance.
-        The instance will not have a reference ot this child component.
-        Support for creating an instance without this reference will be removed in a future breaking change.`);
-        }
-        this.componentInstance = componentInstance;
-        this.closed.subscribe(() => {
-            this.isOpen = false;
-        });
-    }
-    /**
-     * Closes the flyout instance and emits its `closed` event.
-     * @param args Arguments used when closing the flyout.
-     */
-    close(args) {
-        this.hostController.next({
-            type: SkyFlyoutMessageType.Close,
-            data: { ignoreBeforeClose: args ? args.ignoreBeforeClose : false },
-        });
-        __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!
- * The contents of this file were automatically generated by
- * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-flyout' schematic.
- * To update this file, simply rerun the command.
- */
-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. 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) {
-        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-    }
-}
-/**
- * Import into any component library module that needs to use resource strings.
- */
-class SkyFlyoutResourcesModule {
-}
-SkyFlyoutResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyFlyoutResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutResourcesModule, exports: [SkyI18nModule] });
-SkyFlyoutResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutResourcesModule, providers: [
-        {
-            provide: SKY_LIB_RESOURCES_PROVIDERS,
-            useClass: SkyFlyoutResourcesProvider,
-            multi: true,
-        },
-    ], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutResourcesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [SkyI18nModule],
-                    providers: [
-                        {
-                            provide: SKY_LIB_RESOURCES_PROVIDERS,
-                            useClass: SkyFlyoutResourcesProvider,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }] });
-
-var _SkyFlyoutIteratorComponent_ngUnsubscribe, _SkyFlyoutIteratorComponent__nextButtonClick, _SkyFlyoutIteratorComponent__previousButtonClick;
-/**
- * @internal
- */
-class SkyFlyoutIteratorComponent {
-    constructor() {
-        _SkyFlyoutIteratorComponent_ngUnsubscribe.set(this, new Subject());
-        _SkyFlyoutIteratorComponent__nextButtonClick.set(this, new EventEmitter());
-        _SkyFlyoutIteratorComponent__previousButtonClick.set(this, new EventEmitter());
-    }
-    get previousButtonClick() {
-        return __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent__previousButtonClick, "f");
-    }
-    get nextButtonClick() {
-        return __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent__nextButtonClick, "f");
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent_ngUnsubscribe, "f").complete();
-    }
-    onIteratorPreviousClick() {
-        /* istanbul ignore else */
-        if (!this.previousButtonDisabled) {
-            __classPrivateFieldGet(this, _SkyFlyoutIteratorComponent__previousButtonClick, "f").emit();
-        }
-    }
-    onIteratorNextClick() {
-        /* istanbul ignore else */
-        if (!this.nextButtonDisabled) {
-            __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: "15.2.9", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-flyout-iterator', template: "<div id=\"iterators\" class=\"sky-flyout-iterators\">\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"\n      'skyux_flyout_iterator_previous_button' | skyLibResources\n    \"\n    [disabled]=\"previousButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorPreviousClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-up\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n    [disabled]=\"nextButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorNextClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-down\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"] }]
-        }], propDecorators: { nextButtonDisabled: [{
-                type: Input
-            }], previousButtonDisabled: [{
-                type: Input
-            }], previousButtonClick: [{
-                type: Output
-            }], nextButtonClick: [{
-                type: Output
-            }] } });
-
-var _SkyFlyoutAdapterService_renderer, _SkyFlyoutAdapterService_windowRef;
-/**
- * @internal
- */
-class SkyFlyoutAdapterService {
-    constructor(rendererFactory, windowRef) {
-        _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 = __classPrivateFieldGet(this, _SkyFlyoutAdapterService_windowRef, "f").nativeWindow;
-        const helpWidget = windowObj.document.getElementById('bb-help-invoker');
-        if (helpWidget) {
-            __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;
-        __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: {
-                newClass = 'sky-responsive-container-xs';
-                break;
-            }
-            case SkyMediaBreakpoints.sm: {
-                newClass = 'sky-responsive-container-sm';
-                break;
-            }
-            case SkyMediaBreakpoints.md: {
-                newClass = 'sky-responsive-container-md';
-                break;
-            }
-            default: {
-                newClass = 'sky-responsive-container-lg';
-                break;
-            }
-        }
-        __classPrivateFieldGet(this, _SkyFlyoutAdapterService_renderer, "f").addClass(nativeEl, newClass);
-    }
-    toggleIframePointerEvents(enable) {
-        // When iframes are present on the page, they may interfere with dragging
-        // temporarily disable pointer events in iframes when dragging starts.
-        // When re-enabling we set to the empty string as it will remove the element styling
-        // and fall back to any css originally given to iframe
-        const iframes = document.querySelectorAll('iframe');
-        for (let i = 0; i < iframes.length; i++) {
-            iframes[i].style.pointerEvents = enable ? '' : 'none';
-        }
-    }
-}
-_SkyFlyoutAdapterService_renderer = new WeakMap(), _SkyFlyoutAdapterService_windowRef = new WeakMap();
-SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", 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: "15.2.9", ngImport: i0, type: SkyFlyoutAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1$1.SkyAppWindowRef }]; } });
-
-var _SkyFlyoutMediaQueryService_currentSubject;
-/**
- * @internal
- */
-class SkyFlyoutMediaQueryService {
-    constructor() {
-        _SkyFlyoutMediaQueryService_currentSubject.set(this, void 0);
-        __classPrivateFieldSet(this, _SkyFlyoutMediaQueryService_currentSubject, new ReplaySubject(1), "f");
-    }
-    subscribe(listener) {
-        return __classPrivateFieldGet(this, _SkyFlyoutMediaQueryService_currentSubject, "f").subscribe({
-            next: (breakpoints) => {
-                listener(breakpoints);
-            },
-        });
-    }
-    setBreakpointForWidth(width) {
-        let breakpoint;
-        if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.xs)) {
-            breakpoint = SkyMediaBreakpoints.xs;
-        }
-        else if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.sm)) {
-            breakpoint = SkyMediaBreakpoints.sm;
-        }
-        else if (this.isWidthWithinBreakpoint(width, SkyMediaBreakpoints.md)) {
-            breakpoint = SkyMediaBreakpoints.md;
-        }
-        else {
-            breakpoint = SkyMediaBreakpoints.lg;
-        }
-        this.current = breakpoint;
-        __classPrivateFieldGet(this, _SkyFlyoutMediaQueryService_currentSubject, "f").next(this.current);
-    }
-    isWidthWithinBreakpoint(width, breakpoint) {
-        const xsBreakpointMaxPixels = 767;
-        const smBreakpointMinPixels = 768;
-        const smBreakpointMaxPixels = 991;
-        const mdBreakpointMinPixels = 992;
-        const mdBreakpointMaxPixels = 1199;
-        const lgBreakpointMinPixels = 1200;
-        switch (breakpoint) {
-            case SkyMediaBreakpoints.xs: {
-                return width <= xsBreakpointMaxPixels;
-            }
-            case SkyMediaBreakpoints.sm: {
-                return width >= smBreakpointMinPixels && width <= smBreakpointMaxPixels;
-            }
-            case SkyMediaBreakpoints.md: {
-                return width >= mdBreakpointMinPixels && width <= mdBreakpointMaxPixels;
-            }
-            default: {
-                return width >= lgBreakpointMinPixels;
-            }
-        }
-    }
-    destroy() {
-        __classPrivateFieldGet(this, _SkyFlyoutMediaQueryService_currentSubject, "f").complete();
-    }
-}
-_SkyFlyoutMediaQueryService_currentSubject = new WeakMap();
-SkyFlyoutMediaQueryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyFlyoutMediaQueryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutMediaQueryService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutMediaQueryService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
-/**
- * Handler for notifying the flyout when it is appropriate to close the flyout. This will be returned from the flyout instance's `beforeClose` observable.
- */
-class SkyFlyoutBeforeCloseHandler {
-    constructor(closeFlyoutFunction) {
-        this.closeFlyout = closeFlyoutFunction;
-    }
-}
-
-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;
-/**
- * @internal
- */
-class SkyFlyoutComponent {
-    get messageStream() {
-        return __classPrivateFieldGet(this, _SkyFlyoutComponent__messageStream, "f");
-    }
-    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;
-        this.isOpening = false;
-        this.flyoutWidth = 0;
-        this.instanceReady = false;
-        this.isDragging = false;
-        this.isFullscreen = false;
-        this.resizeKeyControlActive = false;
-        _SkyFlyoutComponent_xCoord.set(this, 0);
-        _SkyFlyoutComponent_windowBufferSize.set(this, 20);
-        this.permalink = {};
-        this.permalinkLabel = '';
-        this.primaryAction = {};
-        this.primaryActionLabel = '';
-        /**
-         * @internal
-         */
-        this.widthStep = 10;
-        this.zIndex$ = new BehaviorSubject(1001);
-        _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(__classPrivateFieldGet(this, _SkyFlyoutComponent_ngUnsubscribe, "f")))
-            .subscribe((message) => {
-            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_handleIncomingMessages).call(this, message);
-        });
-    }
-    ngOnInit() {
-        /* istanbul ignore else */
-        if (this.flyoutHeader) {
-            __classPrivateFieldGet(this, _SkyFlyoutComponent_adapter, "f").adjustHeaderForHelp(this.flyoutHeader);
-        }
-    }
-    ngOnDestroy() {
-        __classPrivateFieldGet(this, _SkyFlyoutComponent_ngUnsubscribe, "f").next();
-        __classPrivateFieldGet(this, _SkyFlyoutComponent_ngUnsubscribe, "f").complete();
-    }
-    onWindowResize(event) {
-        if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").isWidthWithinBreakpoint(event.target.innerWidth, SkyMediaBreakpoints.xs)) {
-            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_updateBreakpointAndResponsiveClass).call(this, event.target.innerWidth);
-        }
-        else {
-            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_updateBreakpointAndResponsiveClass).call(this, this.flyoutWidth);
-        }
-        __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) {
-        var _a, _b, _c;
-        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_cleanTemplate).call(this);
-        // Emit the closed event on any previously opened flyout instance
-        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: [
-                {
-                    provide: SKY_STACKING_CONTEXT,
-                    useValue: {
-                        zIndex: this.zIndex$
-                            .asObservable()
-                            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyFlyoutComponent_ngUnsubscribe, "f"))),
-                    },
-                },
-            ],
-        }, config);
-        if ((config === null || config === void 0 ? void 0 : config.defaultWidth) && !(config === null || config === void 0 ? void 0 : config.maxWidth)) {
-            this.config.maxWidth = config === null || config === void 0 ? void 0 : config.defaultWidth;
-        }
-        this.config.showIterator = this.config.showIterator || false;
-        this.config.iteratorNextButtonDisabled =
-            this.config.iteratorNextButtonDisabled || false;
-        this.config.iteratorPreviousButtonDisabled =
-            this.config.iteratorPreviousButtonDisabled || false;
-        this.permalink = (_a = this.config.permalink) !== null && _a !== void 0 ? _a : {};
-        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 = (_b = this.config.primaryAction) !== null && _b !== void 0 ? _b : {};
-        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: __classPrivateFieldGet(this, _SkyFlyoutComponent_injector, "f"),
-            providers: this.config.providers,
-        });
-        const componentRef = (_c = this.target) === null || _c === void 0 ? void 0 : _c.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;
-        __classPrivateFieldGet(this, _SkyFlyoutComponent_changeDetector, "f").markForCheck();
-        // Open the flyout immediately.
-        this.messageStream.next({
-            type: SkyFlyoutMessageType.Open,
-        });
-        if (this.config.settingsKey) {
-            __classPrivateFieldGet(this, _SkyFlyoutComponent_uiConfigService, "f")
-                .getConfig(this.config.settingsKey)
-                .pipe(take(1))
-                .subscribe((value) => {
-                if (value && value.flyoutWidth) {
-                    this.flyoutWidth = value.flyoutWidth;
-                }
-                else {
-                    // Bad data, or config is the default config.
-                    this.flyoutWidth = this.config.defaultWidth;
-                }
-                __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_checkInitialSize).call(this);
-            });
-        }
-        else {
-            this.flyoutWidth = this.config.defaultWidth;
-            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_checkInitialSize).call(this);
-        }
-        return __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f");
-    }
-    close() {
-        this.messageStream.next({
-            type: SkyFlyoutMessageType.Close,
-        });
-    }
-    invokePrimaryAction() {
-        if (this.primaryAction.callback) {
-            this.primaryAction.callback();
-            if (this.primaryAction.closeAfterInvoking) {
-                this.close();
-            }
-            return false;
-        }
-        /* istanbul ignore next */
-        return true;
-    }
-    getAnimationState() {
-        return this.instanceReady && this.isOpening
-            ? FLYOUT_OPEN_STATE
-            : FLYOUT_CLOSED_STATE;
-    }
-    animationDone(event) {
-        if (event.toState === FLYOUT_OPEN_STATE) {
-            this.isOpen = true;
-        }
-        if (event.toState === FLYOUT_CLOSED_STATE) {
-            this.isOpen = false;
-            __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) {
-        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_handleResizeKeyDown).call(this, event);
-    }
-    onResizeHandleKeyDown(event) {
-        __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_handleResizeKeyDown).call(this, event);
-    }
-    onResizeHandleMouseDown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.isFullscreen) {
-            return;
-        }
-        this.isDragging = true;
-        __classPrivateFieldSet(this, _SkyFlyoutComponent_xCoord, event.clientX, "f");
-        __classPrivateFieldGet(this, _SkyFlyoutComponent_adapter, "f").toggleIframePointerEvents(false);
-        fromEvent(document, 'mousemove')
-            .pipe(takeWhile(() => {
-            return this.isDragging;
-        }))
-            .subscribe((moveEvent) => {
-            this.onMouseMove(moveEvent);
-        });
-        fromEvent(document, 'mouseup')
-            .pipe(takeWhile(() => {
-            return this.isDragging;
-        }))
-            .subscribe((mouseUpEvent) => {
-            this.onHandleRelease(mouseUpEvent);
-        });
-    }
-    onMouseMove(event) {
-        /* Sanity check */
-        /* istanbul ignore if */
-        if (!this.isDragging) {
-            return;
-        }
-        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 < __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f")) {
-            width = window.innerWidth - __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f");
-            __classPrivateFieldSet(this, _SkyFlyoutComponent_xCoord, __classPrivateFieldGet(this, _SkyFlyoutComponent_windowBufferSize, "f"), "f");
-        }
-        else {
-            __classPrivateFieldSet(this, _SkyFlyoutComponent_xCoord, event.clientX, "f");
-        }
-        this.flyoutWidth = width;
-        __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;
-            __classPrivateFieldGet(this, _SkyFlyoutComponent_adapter, "f").toggleIframePointerEvents(true);
-            __classPrivateFieldGet(this, _SkyFlyoutComponent_instances, "m", _SkyFlyoutComponent_setUserData).call(this);
-        });
-    }
-    onIteratorPreviousButtonClick() {
-        /* istanbul ignore else */
-        if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")) {
-            __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f").iteratorPreviousButtonClick.emit();
-        }
-    }
-    onIteratorNextButtonClick() {
-        /* istanbul ignore else */
-        if (__classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")) {
-            __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f").iteratorNextButtonClick.emit();
-        }
-    }
-}
-_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) {
-    var _a, _b, _c, _d, _e;
-    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 (((_b = (_a = __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")) === null || _a === void 0 ? void 0 : _a.beforeClose) === null || _b === void 0 ? void 0 : _b.observers.length) === 0 ||
-                ((_c = message.data) === null || _c === void 0 ? void 0 : _c.ignoreBeforeClose)) {
-                this.isOpen = true;
-                this.isOpening = false;
-            }
-            else {
-                (_e = (_d = __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")) === null || _d === void 0 ? void 0 : _d.beforeClose) === null || _e === void 0 ? void 0 : _e.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() {
-    var _a, _b;
-    (_a = __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")) === null || _a === void 0 ? void 0 : _a.closed.emit();
-    (_b = __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutInstance, "f")) === null || _b === void 0 ? void 0 : _b.closed.complete();
-}, _SkyFlyoutComponent_cleanTemplate = function _SkyFlyoutComponent_cleanTemplate() {
-    var _a;
-    (_a = this.target) === null || _a === void 0 ? void 0 : _a.clear();
-}, _SkyFlyoutComponent_updateBreakpointAndResponsiveClass = function _SkyFlyoutComponent_updateBreakpointAndResponsiveClass(width) {
-    __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").setBreakpointForWidth(width);
-    const newBreakpoint = __classPrivateFieldGet(this, _SkyFlyoutComponent_flyoutMediaQueryService, "f").current;
-    __classPrivateFieldGet(this, _SkyFlyoutComponent_adapter, "f").setResponsiveClass(__classPrivateFieldGet(this, _SkyFlyoutComponent_elementRef, "f"), newBreakpoint);
-}, _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);
-        });
-    }
-}, _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").isWidthWithinBreakpoint(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 'tab':
-                /* istanbul ignore else */
-                if (this.resizeKeyControlActive) {
-                    this.resizeKeyControlActive = false;
-                }
-                break;
-            case 'left':
-                if (this.resizeKeyControlActive) {
-                    /* istanbul ignore else */
-                    if (this.flyoutWidth < this.config.maxWidth) {
-                        this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
-                    }
-                }
-                break;
-            case 'right':
-                if (this.resizeKeyControlActive) {
-                    /* istanbul ignore else */
-                    if (this.flyoutWidth > this.config.minWidth) {
-                        this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
-                    }
-                }
-                break;
-            /* istanbul ignore next */
-            default:
-                break;
-        }
-    }
-}, _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: "15.2.9", 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: "15.2.9", 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 ? config.ariaRole : 'dialog'\"\n  [attr.aria-describedby]=\"config.ariaDescribedBy\"\n  [attr.aria-label]=\"config.ariaLabel\"\n  [attr.aria-labelledby]=\"config.ariaLabelledBy\"\n  [attr.aria-modal]=\"\n    config.ariaRole === 'dialog' || !config.ariaRole ? true : false\n  \"\n  [attr.hidden]=\"!instanceReady ? true : undefined\"\n  [id]=\"flyoutId\"\n  [ngClass]=\"{\n    'sky-flyout-hidden': !isOpen && !isOpening,\n    'sky-flyout-fullscreen': isFullscreen\n  }\"\n  [style.z-index]=\"zIndex$ | async\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-8': 'modern'\n  }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  #flyoutRef\n  [cdkTrapFocus]=\"enableTrapFocus\"\n  [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n  <div\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    [style.z-index]=\"zIndex$ | async\"\n    #flyoutHeader\n  >\n    <div class=\"sky-flyout-header-content\">\n      <button\n        *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 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    class=\"sky-flyout-resize-handle\"\n    role=\"separator\"\n    tabindex=\"0\"\n    type=\"range\"\n    [attr.aria-controls]=\"flyoutId\"\n    [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n    [attr.aria-valuemax]=\"config.maxWidth\"\n    [attr.aria-valuemin]=\"config.minWidth\"\n    [attr.aria-valuenow]=\"flyoutWidth\"\n    (keydown)=\"onResizeHandleKeyDown($event)\"\n    (mousedown)=\"onResizeHandleMouseDown($event)\"\n  ></div>\n</div>\n\n<ng-template #permalinkTemplate>\n  <ng-template [ngIf]=\"permalink\">\n    <ng-template [ngIf]=\"permalink.url\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [skyHref]=\"permalink.url\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n    <ng-template [ngIf]=\"permalink.route\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [routerLink]=\"permalink.route.commands\"\n        [fragment]=\"permalink.route.extras?.fragment\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        [queryParams]=\"permalink.route.extras?.queryParams\"\n        [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n        [state]=\"permalink.route.extras?.state\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n    <button\n      type=\"button\"\n      class=\"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;--sky-background-color-page-default: #fff;border-left:6px solid #0974a1}.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:inherit;background:#eeeeef;height:50px;display:flex;position:fixed;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;margin-top:50px;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;--sky-background-color-page-default: #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-background-color-page-default: #000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"], dependencies: [{ kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: "directive", type: i10.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }], 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),
-            ]),
-            transition(`* <=> *`, animate('250ms ease-in')),
-        ]),
-    ], changeDetection: i0.ChangeDetectionStrategy.Default });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-flyout', providers: [
-                        SkyFlyoutAdapterService,
-                        SkyFlyoutMediaQueryService,
-                        { provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
-                    ], 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),
-                            ]),
-                            transition(`* <=> *`, animate('250ms ease-in')),
-                        ]),
-                    ], changeDetection: ChangeDetectionStrategy.Default, template: "<div\n  class=\"sky-flyout\"\n  tabindex=\"-1\"\n  [attr.role]=\"config.ariaRole ? config.ariaRole : 'dialog'\"\n  [attr.aria-describedby]=\"config.ariaDescribedBy\"\n  [attr.aria-label]=\"config.ariaLabel\"\n  [attr.aria-labelledby]=\"config.ariaLabelledBy\"\n  [attr.aria-modal]=\"\n    config.ariaRole === 'dialog' || !config.ariaRole ? true : false\n  \"\n  [attr.hidden]=\"!instanceReady ? true : undefined\"\n  [id]=\"flyoutId\"\n  [ngClass]=\"{\n    'sky-flyout-hidden': !isOpen && !isOpening,\n    'sky-flyout-fullscreen': isFullscreen\n  }\"\n  [style.z-index]=\"zIndex$ | async\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-8': 'modern'\n  }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  #flyoutRef\n  [cdkTrapFocus]=\"enableTrapFocus\"\n  [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n  <div\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    [style.z-index]=\"zIndex$ | async\"\n    #flyoutHeader\n  >\n    <div class=\"sky-flyout-header-content\">\n      <button\n        *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 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    class=\"sky-flyout-resize-handle\"\n    role=\"separator\"\n    tabindex=\"0\"\n    type=\"range\"\n    [attr.aria-controls]=\"flyoutId\"\n    [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n    [attr.aria-valuemax]=\"config.maxWidth\"\n    [attr.aria-valuemin]=\"config.minWidth\"\n    [attr.aria-valuenow]=\"flyoutWidth\"\n    (keydown)=\"onResizeHandleKeyDown($event)\"\n    (mousedown)=\"onResizeHandleMouseDown($event)\"\n  ></div>\n</div>\n\n<ng-template #permalinkTemplate>\n  <ng-template [ngIf]=\"permalink\">\n    <ng-template [ngIf]=\"permalink.url\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [skyHref]=\"permalink.url\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n    <ng-template [ngIf]=\"permalink.route\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [routerLink]=\"permalink.route.commands\"\n        [fragment]=\"permalink.route.extras?.fragment\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        [queryParams]=\"permalink.route.extras?.queryParams\"\n        [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n        [state]=\"permalink.route.extras?.state\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n    <button\n      type=\"button\"\n      class=\"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;--sky-background-color-page-default: #fff;border-left:6px solid #0974a1}.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:inherit;background:#eeeeef;height:50px;display:flex;position:fixed;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;margin-top:50px;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;--sky-background-color-page-default: #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-background-color-page-default: #000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"] }]
-        }], 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$1.SkyUIConfigService }, { type: i0.NgZone }]; }, propDecorators: { flyoutRef: [{
-                type: ViewChild,
-                args: ['flyoutRef', {
-                        read: ElementRef,
-                        static: true,
-                    }]
-            }], target: [{
-                type: ViewChild,
-                args: ['target', {
-                        read: ViewContainerRef,
-                        static: true,
-                    }]
-            }], flyoutHeader: [{
-                type: ViewChild,
-                args: ['flyoutHeader', {
-                        read: ElementRef,
-                        static: true,
-                    }]
-            }], onWindowResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
-
-class SkyFlyoutModule {
-}
-SkyFlyoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyFlyoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [A11yModule,
-        CommonModule,
-        FormsModule,
-        RouterModule,
-        SkyI18nModule,
-        SkyIconModule,
-        SkyFlyoutResourcesModule,
-        SkyThemeModule,
-        SkyHrefModule], exports: [SkyFlyoutComponent] });
-SkyFlyoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutModule, imports: [A11yModule,
-        CommonModule,
-        FormsModule,
-        RouterModule,
-        SkyI18nModule,
-        SkyIconModule,
-        SkyFlyoutResourcesModule,
-        SkyThemeModule,
-        SkyHrefModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyFlyoutModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent],
-                    imports: [
-                        A11yModule,
-                        CommonModule,
-                        FormsModule,
-                        RouterModule,
-                        SkyI18nModule,
-                        SkyIconModule,
-                        SkyFlyoutResourcesModule,
-                        SkyThemeModule,
-                        SkyHrefModule,
-                    ],
-                    exports: [SkyFlyoutComponent],
-                }]
-        }] });
-
-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_removeListeners;
-/**
- * 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) {
-        _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() {
-        __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeListeners).call(this);
-        if (__classPrivateFieldGet(this, _SkyFlyoutService_host, "f")) {
-            __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeHostComponent).call(this);
-        }
-    }
-    /**
-     * Closes the flyout. This method also removes the flyout's HTML elements from the DOM.
-     * @param args Arguments used when closing the flyout.
-     */
-    close(args) {
-        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,
-                },
-            });
-        }
-    }
-    /**
-     * Opens a flyout and displays the specified component.
-     * @param component Specifies the component to render.
-     * @param config Specifies the flyout configuration passed to the specified component's constructor.
-     */
-    open(component, config) {
-        // isOpening flag will prevent close() from firing when open() is also fired.
-        __classPrivateFieldSet(this, _SkyFlyoutService_isOpening, true, "f");
-        __classPrivateFieldGet(this, _SkyFlyoutService_windowRef, "f").nativeWindow.setTimeout(() => {
-            __classPrivateFieldSet(this, _SkyFlyoutService_isOpening, false, "f");
-        });
-        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
-                    __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 = __classPrivateFieldGet(this, _SkyFlyoutService_host, "f").instance.attach(component, config);
-        __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_addListeners).call(this, flyout);
-        return flyout;
-    }
-}
-_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) => {
-            var _a, _b, _c;
-            doClose = false;
-            if ((_a = __classPrivateFieldGet(this, _SkyFlyoutService_host, "f")) === null || _a === void 0 ? void 0 : _a.instance.isDragging) {
-                return;
-            }
-            if ((_b = flyoutInstance.flyoutRef) === null || _b === void 0 ? void 0 : _b.nativeElement.contains(event.target)) {
-                return;
-            }
-            const isAbove = event.target === document || !event.target
-                ? false
-                : __classPrivateFieldGet(this, _SkyFlyoutService_coreAdapter, "f").isTargetAboveElement(event.target, (_c = flyoutInstance.flyoutRef) === null || _c === void 0 ? void 0 : _c.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_removeListeners).call(this);
-            if (__classPrivateFieldGet(this, _SkyFlyoutService_removeAfterClosed, "f")) {
-                __classPrivateFieldGet(this, _SkyFlyoutService_instances, "m", _SkyFlyoutService_removeHostComponent).call(this);
-            }
-        });
-    }
-}, _SkyFlyoutService_removeListeners = function _SkyFlyoutService_removeListeners() {
-    __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: "15.2.9", 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: "15.2.9", ngImport: i0, type: SkyFlyoutService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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 }]; } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { SkyFlyoutBeforeCloseHandler, SkyFlyoutInstance, SkyFlyoutMessageType, SkyFlyoutModule, SkyFlyoutService, SkyFlyoutComponent as λ1 };
-//# sourceMappingURL=skyux-flyout.mjs.map