@skyux/flyout 8.7.0 → 9.0.0-alpha.0

package/fesm2022/skyux-flyout.mjs

@@ -0,0 +1,1098 @@
+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 = {}));
+
+/**
+ * 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 this.#_beforeClose;
+    }
+    /**
+     * Used to communicate with the host component.
+     * @internal
+     */
+    get hostController() {
+        return this.#_hostController;
+    }
+    /**
+     * An event that the flyout instance emits when users click the next iterator button.
+     */
+    get iteratorNextButtonClick() {
+        return this.#_iteratorNextButtonClick;
+    }
+    /**
+     * An event that the flyout instance emits when users click the previous iterator button.
+     */
+    get iteratorPreviousButtonClick() {
+        return this.#_iteratorPreviousButtonClick;
+    }
+    /**
+     * Disables the next iterator button.
+     * @default false
+     */
+    set iteratorNextButtonDisabled(newValue) {
+        this.#_iteratorNextButtonDisabled = newValue;
+        if (newValue) {
+            this.hostController.next({
+                type: SkyFlyoutMessageType.DisableIteratorNextButton,
+            });
+        }
+        else {
+            this.hostController.next({
+                type: SkyFlyoutMessageType.EnableIteratorNextButton,
+            });
+        }
+    }
+    get iteratorNextButtonDisabled() {
+        return this.#_iteratorNextButtonDisabled;
+    }
+    /**
+     * Disables the previous iterator button.
+     * @default false
+     */
+    set iteratorPreviousButtonDisabled(newValue) {
+        this.#_iteratorPreviousButtonDisabled = newValue;
+        if (newValue) {
+            this.hostController.next({
+                type: SkyFlyoutMessageType.DisableIteratorPreviousButton,
+            });
+        }
+        else {
+            this.hostController.next({
+                type: SkyFlyoutMessageType.EnableIteratorPreviousButton,
+            });
+        }
+    }
+    get iteratorPreviousButtonDisabled() {
+        return this.#_iteratorPreviousButtonDisabled;
+    }
+    #_beforeClose;
+    #_iteratorNextButtonClick;
+    #_iteratorPreviousButtonClick;
+    #_iteratorNextButtonDisabled;
+    #_iteratorPreviousButtonDisabled;
+    #_hostController;
+    // 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;
+        this.#_beforeClose = new Subject();
+        this.#_iteratorNextButtonClick = new EventEmitter();
+        this.#_iteratorPreviousButtonClick = new EventEmitter();
+        this.#_iteratorNextButtonDisabled = false;
+        this.#_iteratorPreviousButtonDisabled = false;
+        this.#_hostController = 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 },
+        });
+        this.#_iteratorPreviousButtonClick.complete();
+        this.#_iteratorNextButtonClick.complete();
+        this.hostController.complete();
+    }
+}
+
+/**
+ * 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyFlyoutResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyFlyoutResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyFlyoutIteratorComponent {
+    get previousButtonClick() {
+        return this.#_previousButtonClick;
+    }
+    get nextButtonClick() {
+        return this.#_nextButtonClick;
+    }
+    #ngUnsubscribe = new Subject();
+    #_nextButtonClick = new EventEmitter();
+    #_previousButtonClick = new EventEmitter();
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    onIteratorPreviousClick() {
+        /* istanbul ignore else */
+        if (!this.previousButtonDisabled) {
+            this.#_previousButtonClick.emit();
+        }
+    }
+    onIteratorNextClick() {
+        /* istanbul ignore else */
+        if (!this.nextButtonDisabled) {
+            this.#_nextButtonClick.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyFlyoutAdapterService {
+    #renderer;
+    #windowRef;
+    constructor(rendererFactory, windowRef) {
+        this.#windowRef = windowRef;
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    adjustHeaderForHelp(header) {
+        const windowObj = this.#windowRef.nativeWindow;
+        const helpWidget = windowObj.document.getElementById('bb-help-invoker');
+        if (helpWidget) {
+            this.#renderer.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');
+        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;
+            }
+        }
+        this.#renderer.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';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1$1.SkyAppWindowRef }]; } });
+
+/**
+ * @internal
+ */
+class SkyFlyoutMediaQueryService {
+    #currentSubject;
+    constructor() {
+        this.#currentSubject = new ReplaySubject(1);
+    }
+    subscribe(listener) {
+        return this.#currentSubject.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;
+        this.#currentSubject.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() {
+        this.#currentSubject.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutMediaQueryService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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;
+    }
+}
+
+const FLYOUT_OPEN_STATE = 'flyoutOpen';
+const FLYOUT_CLOSED_STATE = 'flyoutClosed';
+let nextId = 0;
+/**
+ * @internal
+ */
+class SkyFlyoutComponent {
+    #xCoord;
+    #windowBufferSize;
+    get messageStream() {
+        return this.#_messageStream;
+    }
+    #flyoutInstance;
+    #ngUnsubscribe;
+    #_messageStream;
+    #adapter;
+    #changeDetector;
+    #injector;
+    #resolver;
+    #resourcesService;
+    #flyoutMediaQueryService;
+    #elementRef;
+    #uiConfigService;
+    #ngZone;
+    constructor(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService, ngZone) {
+        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;
+        this.#xCoord = 0;
+        this.#windowBufferSize = 20;
+        this.permalink = {};
+        this.permalinkLabel = '';
+        this.primaryAction = {};
+        this.primaryActionLabel = '';
+        /**
+         * @internal
+         */
+        this.widthStep = 10;
+        this.zIndex$ = new BehaviorSubject(1001);
+        this.#ngUnsubscribe = new Subject();
+        this.#_messageStream = new Subject();
+        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;
+        // All commands flow through the message stream.
+        this.messageStream
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((message) => {
+            this.#handleIncomingMessages(message);
+        });
+    }
+    ngOnInit() {
+        /* istanbul ignore else */
+        if (this.flyoutHeader) {
+            this.#adapter.adjustHeaderForHelp(this.flyoutHeader);
+        }
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    onWindowResize(event) {
+        if (this.#flyoutMediaQueryService.isWidthWithinBreakpoint(event.target.innerWidth, SkyMediaBreakpoints.xs)) {
+            this.#updateBreakpointAndResponsiveClass(event.target.innerWidth);
+        }
+        else {
+            this.#updateBreakpointAndResponsiveClass(this.flyoutWidth);
+        }
+        this.#setFullscreen();
+        if (event.target.innerWidth - this.flyoutWidth < this.#windowBufferSize) {
+            this.flyoutWidth = event.target.innerWidth - this.#windowBufferSize;
+            this.#xCoord = this.#windowBufferSize;
+            this.#setUserData();
+        }
+    }
+    attach(component, config) {
+        this.#cleanTemplate();
+        // Emit the closed event on any previously opened flyout instance
+        if (this.#flyoutInstance) {
+            this.#notifyClosed();
+        }
+        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(this.#ngUnsubscribe)),
+                    },
+                },
+            ],
+        }, config);
+        if (config?.defaultWidth && !config?.maxWidth) {
+            this.config.maxWidth = 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 = this.config.permalink ?? {};
+        this.permalinkLabel =
+            this.config.permalink && this.config.permalink.label
+                ? this.config.permalink.label
+                : this.#getString('skyux_flyout_permalink_button');
+        this.primaryAction = this.config.primaryAction ?? {};
+        this.primaryActionLabel =
+            this.config.primaryAction && this.config.primaryAction.label
+                ? this.config.primaryAction.label
+                : this.#getString('skyux_flyout_primary_action_button');
+        const factory = this.#resolver.resolveComponentFactory(component);
+        const injector = Injector.create({
+            parent: this.#injector,
+            providers: this.config.providers,
+        });
+        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");
+        }
+        this.#flyoutInstance = this.#createFlyoutInstance(componentRef.instance);
+        // This is used to ensure we do not render the flyout until we have attached the component.
+        // This allows the aria-labelledby to function correctly.
+        this.instanceReady = true;
+        this.#changeDetector.markForCheck();
+        // Open the flyout immediately.
+        this.messageStream.next({
+            type: SkyFlyoutMessageType.Open,
+        });
+        if (this.config.settingsKey) {
+            this.#uiConfigService
+                .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;
+                }
+                this.#checkInitialSize();
+            });
+        }
+        else {
+            this.flyoutWidth = this.config.defaultWidth;
+            this.#checkInitialSize();
+        }
+        return this.#flyoutInstance;
+    }
+    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;
+            this.#notifyClosed();
+            this.#cleanTemplate();
+        }
+    }
+    onHeaderGrabHandleMouseDown(event) {
+        this.onResizeHandleMouseDown(event);
+    }
+    onHeaderGrabHandleKeyDown(event) {
+        this.#handleResizeKeyDown(event);
+    }
+    onResizeHandleKeyDown(event) {
+        this.#handleResizeKeyDown(event);
+    }
+    onResizeHandleMouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isFullscreen) {
+            return;
+        }
+        this.isDragging = true;
+        this.#xCoord = event.clientX;
+        this.#adapter.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 - this.#xCoord;
+        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;
+        }
+        else {
+            this.#xCoord = event.clientX;
+        }
+        this.flyoutWidth = width;
+        this.#updateBreakpointAndResponsiveClass(this.flyoutWidth);
+        this.#changeDetector.markForCheck();
+    }
+    onHandleRelease(event) {
+        fromEvent(document, 'click')
+            .pipe(take(1))
+            .subscribe(() => {
+            this.isDragging = false;
+            this.#adapter.toggleIframePointerEvents(true);
+            this.#setUserData();
+        });
+    }
+    onIteratorPreviousButtonClick() {
+        /* istanbul ignore else */
+        if (this.#flyoutInstance) {
+            this.#flyoutInstance.iteratorPreviousButtonClick.emit();
+        }
+    }
+    onIteratorNextButtonClick() {
+        /* istanbul ignore else */
+        if (this.#flyoutInstance) {
+            this.#flyoutInstance.iteratorNextButtonClick.emit();
+        }
+    }
+    #createFlyoutInstance(component) {
+        const instance = new SkyFlyoutInstance(component);
+        instance.hostController
+            .pipe(takeUntil(this.#ngUnsubscribe))
+            .subscribe((message) => {
+            this.messageStream.next(message);
+        });
+        return instance;
+    }
+    #handleIncomingMessages(message) {
+        switch (message.type) {
+            case SkyFlyoutMessageType.Open:
+                if (!this.isOpen) {
+                    this.isOpen = false;
+                    this.isOpening = true;
+                }
+                this.#initFocusTrap();
+                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;
+                    }));
+                }
+                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 newBreakpoint = this.#flyoutMediaQueryService.current;
+        this.#adapter.setResponsiveClass(this.#elementRef, newBreakpoint);
+    }
+    #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.isWidthWithinBreakpoint(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':
+                    /* istanbul ignore else */
+                    if (this.resizeKeyControlActive) {
+                        this.resizeKeyControlActive = false;
+                    }
+                    break;
+                case 'left':
+                    if (this.resizeKeyControlActive) {
+                        /* istanbul ignore else */
+                        if (this.flyoutWidth < this.config.maxWidth) {
+                            this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
+                        }
+                    }
+                    break;
+                case 'right':
+                    if (this.resizeKeyControlActive) {
+                        /* istanbul ignore else */
+                        if (this.flyoutWidth > this.config.minWidth) {
+                            this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
+                        }
+                    }
+                    break;
+                /* istanbul ignore next */
+                default:
+                    break;
+            }
+        }
+    }
+    /** Executes a function when the zone is stable. */
+    #executeOnStable(fn) {
+        if (this.#ngZone.isStable) {
+            fn();
+        }
+        else {
+            this.#ngZone.onStable.pipe(take(1)).subscribe(fn);
+        }
+    }
+    #initFocusTrap() {
+        this.enableTrapFocusAutoCapture = false;
+        this.enableTrapFocus = false;
+        // Waiting for zone to be stable will avoid ExpressionChangeAfterCheckedError.
+        this.#executeOnStable(() => {
+            this.enableTrapFocusAutoCapture = true;
+            this.enableTrapFocus = true;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0.ElementRef }, { token: i1$1.SkyUIConfigService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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: "16.1.7", 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutModule, declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent], imports: [A11yModule,
+            CommonModule,
+            FormsModule,
+            RouterModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyFlyoutResourcesModule,
+            SkyThemeModule,
+            SkyHrefModule], exports: [SkyFlyoutComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutModule, imports: [A11yModule,
+            CommonModule,
+            FormsModule,
+            RouterModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyFlyoutResourcesModule,
+            SkyThemeModule,
+            SkyHrefModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyFlyoutComponent, SkyFlyoutIteratorComponent],
+                    imports: [
+                        A11yModule,
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyFlyoutResourcesModule,
+                        SkyThemeModule,
+                        SkyHrefModule,
+                    ],
+                    exports: [SkyFlyoutComponent],
+                }]
+        }] });
+
+/**
+ * Launches flyouts and provides a common look and feel.
+ * This service dynamically generates the flyout component and appends it directly to the
+ * document's `body` element. The `SkyFlyoutInstance` class watches for and triggers flyout events.
+ */
+class SkyFlyoutService {
+    #host;
+    #removeAfterClosed = false;
+    #isOpening = false;
+    #ngUnsubscribe = new Subject();
+    #coreAdapter;
+    #windowRef;
+    #dynamicComponentService;
+    #router;
+    #ngZone;
+    constructor(coreAdapter, windowRef, dynamicComponentService, router, ngZone) {
+        this.#coreAdapter = coreAdapter;
+        this.#windowRef = windowRef;
+        this.#dynamicComponentService = dynamicComponentService;
+        this.#router = router;
+        this.#ngZone = ngZone;
+    }
+    ngOnDestroy() {
+        this.#removeListeners();
+        if (this.#host) {
+            this.#removeHostComponent();
+        }
+    }
+    /**
+     * Closes the flyout. This method also removes the flyout's HTML elements from the DOM.
+     * @param args Arguments used when closing the flyout.
+     */
+    close(args) {
+        if (this.#host && !this.#isOpening) {
+            this.#host.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.
+        this.#isOpening = true;
+        this.#windowRef.nativeWindow.setTimeout(() => {
+            this.#isOpening = false;
+        });
+        if (!this.#host) {
+            this.#host = this.#createHostComponent();
+            this.#router.events
+                .pipe(takeWhile(() => this.#host !== 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();
+                        }
+                    });
+                }
+            });
+        }
+        const flyout = this.#host.instance.attach(component, config);
+        this.#addListeners(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 || !event.target
+                    ? 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.#removeListeners();
+                if (this.#removeAfterClosed) {
+                    this.#removeHostComponent();
+                }
+            });
+        }
+    }
+    #removeListeners() {
+        this.#ngUnsubscribe.next(true);
+        this.#ngUnsubscribe.unsubscribe();
+        this.#ngUnsubscribe = new Subject();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", 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 }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFlyoutService, providedIn: 'any' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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