@skyux/flyout 5.0.4 → 5.5.0-beta.0

package/esm2015/lib/modules/flyout/flyout.component.js

@@ -0,0 +1,505 @@
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ComponentFactoryResolver, ElementRef, HostListener, Injector, ViewChild, ViewContainerRef, NgZone, } from '@angular/core';
+import { animate, state, style, transition, trigger, } from '@angular/animations';
+import { fromEvent, Subject } from 'rxjs';
+import { take, takeUntil, takeWhile } from 'rxjs/operators';
+import { SkyMediaBreakpoints, SkyMediaQueryService, SkyUIConfigService, } from '@skyux/core';
+import { SkyLibResourcesService } from '@skyux/i18n';
+import { SkyFlyoutAdapterService } from './flyout-adapter.service';
+import { SkyFlyoutInstance } from './flyout-instance';
+import { SkyFlyoutMediaQueryService } from './flyout-media-query.service';
+import { SkyFlyoutMessageType } from './types/flyout-message-type';
+import { SkyFlyoutBeforeCloseHandler } from './types/flyout-before-close-handler';
+import * as i0 from "@angular/core";
+import * as i1 from "./flyout-adapter.service";
+import * as i2 from "@skyux/i18n";
+import * as i3 from "./flyout-media-query.service";
+import * as i4 from "@skyux/core";
+import * as i5 from "@skyux/indicators";
+import * as i6 from "./flyout-iterator.component";
+import * as i7 from "@angular/common";
+import * as i8 from "@skyux/theme";
+import * as i9 from "@angular/cdk/a11y";
+import * as i10 from "@skyux/router";
+import * as i11 from "@angular/router";
+const FLYOUT_OPEN_STATE = 'flyoutOpen';
+const FLYOUT_CLOSED_STATE = 'flyoutClosed';
+let nextId = 0;
+/**
+ * @internal
+ */
+export class SkyFlyoutComponent {
+    constructor(adapter, changeDetector, injector, resolver, resourcesService, flyoutMediaQueryService, elementRef, uiConfigService, _ngZone) {
+        this.adapter = adapter;
+        this.changeDetector = changeDetector;
+        this.injector = injector;
+        this.resolver = resolver;
+        this.resourcesService = resourcesService;
+        this.flyoutMediaQueryService = flyoutMediaQueryService;
+        this.elementRef = elementRef;
+        this.uiConfigService = uiConfigService;
+        this._ngZone = _ngZone;
+        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;
+        /**
+         * @internal
+         */
+        this.widthStep = 10;
+        this.ngUnsubscribe = new Subject();
+        this._messageStream = new Subject();
+        // All commands flow through the message stream.
+        this.messageStream
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((message) => {
+            this.handleIncomingMessages(message);
+        });
+    }
+    get messageStream() {
+        return this._messageStream;
+    }
+    get permalink() {
+        const permalink = this.config.permalink;
+        if (permalink) {
+            return permalink;
+        }
+        return {};
+    }
+    get permalinkLabel() {
+        if (this.permalink.label) {
+            return this.permalink.label;
+        }
+        return this.getString('skyux_flyout_permalink_button');
+    }
+    get primaryAction() {
+        let primaryAction = this.config.primaryAction;
+        if (primaryAction) {
+            return primaryAction;
+        }
+        return {};
+    }
+    get primaryActionLabel() {
+        if (this.config.primaryAction && this.config.primaryAction.label) {
+            return this.config.primaryAction.label;
+        }
+        return this.getString('skyux_flyout_primary_action_button');
+    }
+    ngOnInit() {
+        this.adapter.adjustHeaderForHelp(this.flyoutHeader);
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    onWindowResize(event) {
+        if (this.flyoutMediaQueryService.isWidthWithinBreakpiont(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({ providers: [] }, config);
+        this.config.defaultWidth =
+            this.config.defaultWidth || window.innerWidth / 2;
+        this.config.minWidth = this.config.minWidth || 320;
+        this.config.maxWidth = this.config.maxWidth || this.config.defaultWidth;
+        this.config.showIterator = this.config.showIterator || false;
+        this.config.iteratorNextButtonDisabled =
+            this.config.iteratorNextButtonDisabled || false;
+        this.config.iteratorPreviousButtonDisabled =
+            this.config.iteratorPreviousButtonDisabled || false;
+        const factory = this.resolver.resolveComponentFactory(component);
+        const injector = Injector.create({
+            parent: this.injector,
+            providers: this.config.providers,
+        });
+        const componentRef = this.target.createComponent(factory, undefined, injector);
+        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() {
+        this.primaryAction.callback();
+        if (this.primaryAction.closeAfterInvoking) {
+            this.close();
+        }
+        return false;
+    }
+    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() {
+        this.flyoutInstance.iteratorPreviousButtonClick.emit();
+    }
+    onIteratorNextButtonClick() {
+        this.flyoutInstance.iteratorNextButtonClick.emit();
+    }
+    createFlyoutInstance(component) {
+        const instance = new SkyFlyoutInstance();
+        instance.componentInstance = component;
+        instance.hostController
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((message) => {
+            this.messageStream.next(message);
+        });
+        return instance;
+    }
+    handleIncomingMessages(message) {
+        var _a;
+        /* tslint:disable-next-line:switch-default */
+        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 ||
+                    ((_a = message.data) === null || _a === void 0 ? void 0 : _a.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 newBreakpiont = this.flyoutMediaQueryService.current;
+        this.adapter.setResponsiveClass(this.elementRef, newBreakpiont);
+    }
+    setFullscreen() {
+        if (window.innerWidth - this.windowBufferSize < this.config.minWidth) {
+            this.isFullscreen = true;
+        }
+        else {
+            this.isFullscreen = false;
+        }
+    }
+    setUserData() {
+        if (this.config.settingsKey) {
+            this.uiConfigService
+                .setConfig(this.config.settingsKey, {
+                flyoutWidth: this.flyoutWidth,
+            })
+                .pipe(take(1))
+                .subscribe(() => { }, (err) => {
+                console.warn('Could not save flyout data.');
+                console.warn(err);
+            });
+        }
+    }
+    checkInitialSize() {
+        if (this.flyoutWidth < this.config.minWidth) {
+            this.flyoutWidth = this.config.minWidth;
+            this.setUserData();
+        }
+        else if (this.flyoutWidth > this.config.maxWidth) {
+            this.flyoutWidth = this.config.maxWidth;
+            this.setUserData();
+        }
+        // Ensure flyout does not load larger than the window and its buffer
+        if (window.innerWidth - this.flyoutWidth < this.windowBufferSize) {
+            this.flyoutWidth = window.innerWidth - this.windowBufferSize;
+            this.xCoord = this.windowBufferSize;
+            this.setUserData();
+        }
+        if (this.flyoutMediaQueryService.isWidthWithinBreakpiont(window.innerWidth, SkyMediaBreakpoints.xs)) {
+            this.updateBreakpointAndResponsiveClass(window.innerWidth);
+        }
+        else {
+            this.updateBreakpointAndResponsiveClass(this.flyoutWidth);
+        }
+        this.setFullscreen();
+    }
+    getString(key) {
+        // TODO: Need to implement the async `getString` method in a breaking change.
+        return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
+    }
+    handleResizeKeyDown(event) {
+        /* istanbul ignore else */
+        if (event.key) {
+            const keyPressed = event.key.toLowerCase().replace('arrow', '');
+            switch (keyPressed) {
+                case 'enter':
+                case ' ':
+                    this.resizeKeyControlActive = !this.resizeKeyControlActive;
+                    break;
+                case 'tab':
+                    /* istanbul ignore else */
+                    if (this.resizeKeyControlActive) {
+                        this.resizeKeyControlActive = false;
+                    }
+                case 'left':
+                    if (this.resizeKeyControlActive) {
+                        /* istanbul ignore else */
+                        if (this.flyoutWidth < this.config.maxWidth) {
+                            this.flyoutWidth = Math.min(this.flyoutWidth + this.widthStep, this.config.maxWidth);
+                        }
+                    }
+                    break;
+                case 'right':
+                    if (this.resizeKeyControlActive) {
+                        /* istanbul ignore else */
+                        if (this.flyoutWidth > this.config.minWidth) {
+                            this.flyoutWidth = Math.max(this.flyoutWidth - this.widthStep, this.config.minWidth);
+                        }
+                    }
+                    break;
+                /* istanbul ignore next */
+                default:
+                    break;
+            }
+        }
+    }
+    /** 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;
+        });
+    }
+}
+SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutComponent, deps: [{ token: i1.SkyFlyoutAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2.SkyLibResourcesService }, { token: i3.SkyFlyoutMediaQueryService }, { token: i0.ElementRef }, { token: i4.SkyUIConfigService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SkyFlyoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutComponent, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
+        SkyFlyoutAdapterService,
+        SkyFlyoutMediaQueryService,
+        { provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
+    ], viewQueries: [{ propertyName: "flyoutRef", first: true, predicate: ["flyoutRef"], descendants: true, read: ElementRef, static: true }, { propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "flyoutCloseButton", first: true, predicate: ["flyoutCloseButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "flyoutContent", first: true, predicate: ["flyoutContent"], descendants: true, read: ElementRef, 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  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-8': 'modern'\n  }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  #flyoutRef\n  [cdkTrapFocus]=\"enableTrapFocus\"\n  [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n  <div\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    #flyoutHeader\n  >\n    <div class=\"sky-flyout-header-content\">\n      <button\n        *skyThemeIf=\"'modern'\"\n        class=\"\n          sky-btn\n          sky-btn-icon-borderless\n          sky-margin-inline-sm\n          sky-flyout-header-grab-handle\n        \"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n      </button>\n\n      <sky-flyout-iterator\n        *ngIf=\"config.showIterator\"\n        [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n        [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n        (nextButtonClick)=\"onIteratorNextButtonClick()\"\n        (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n      >\n      </sky-flyout-iterator>\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\n      <button\n        class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-icon-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n        #flyoutCloseButton\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"close\"\n          iconType=\"skyux\"\n          size=\"lg\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-flyout-content\" #flyoutContent>\n    <div #target></div>\n  </div>\n  <div\n    class=\"sky-flyout-resize-handle\"\n    role=\"separator\"\n    tabindex=\"0\"\n    type=\"range\"\n    [attr.aria-controls]=\"flyoutId\"\n    [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n    [attr.aria-valuemax]=\"config.maxWidth\"\n    [attr.aria-valuemin]=\"config.minWidth\"\n    [attr.aria-valuenow]=\"flyoutWidth\"\n    (keydown)=\"onResizeHandleKeyDown($event)\"\n    (mousedown)=\"onResizeHandleMouseDown($event)\"\n  ></div>\n</div>\n\n<ng-template #permalinkTemplate>\n  <ng-template [ngIf]=\"permalink\">\n    <ng-template [ngIf]=\"permalink.url\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [skyHref]=\"permalink.url\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n    <ng-template [ngIf]=\"permalink.route\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [routerLink]=\"permalink.route.commands\"\n        [fragment]=\"permalink.route.extras?.fragment\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        [queryParams]=\"permalink.route.extras?.queryParams\"\n        [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n        [state]=\"permalink.route.extras?.state\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n    <button\n      type=\"button\"\n      class=\"\n        sky-btn\n        sky-btn-default\n        sky-flyout-btn-primary-action\n        sky-margin-inline-default\n      \"\n      (click)=\"invokePrimaryAction()\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </ng-template>\n</ng-template>\n", styles: [".sky-flyout{position:fixed;right:0;top:0;bottom:0;height:100%;background-color:#fff;border-left:6px solid #0974a1;z-index:1001}.sky-flyout:focus{outline:none}.sky-flyout.sky-flyout-fullscreen{min-width:100%;max-width:100%}.sky-flyout.sky-flyout-fullscreen .sky-flyout-resize-handle{cursor:initial}.sky-flyout.sky-flyout-hidden{visibility:hidden}.sky-flyout .sky-flyout-input-aria-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);outline:none}.sky-flyout-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;left:-10px;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0;direction:rtl}.sky-flyout-resize-handle::-moz-range-thumb,.sky-flyout-resize-handle::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-ms-thumb,.sky-flyout-resize-handle::-ms-track{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-resize-handle::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-flyout-header{border-bottom:1px solid #cdcfd2;width:100%;background:#eeeeef;height:50px;display:flex;align-items:flex-start}.sky-flyout-header-content{flex-grow:1}.sky-flyout-btn-permalink:hover{text-decoration:none}.sky-flyout-help-shim{padding-right:8px}@media (min-width: 768px){.sky-flyout-help-shim{padding-right:50px}}.sky-flyout-content{overflow-y:auto;height:calc(100% - 50px)}:host-context(.sky-theme-modern) .sky-flyout{border-left:0}:host-context(.sky-theme-modern) .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}:host-context(.sky-theme-modern) .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}.sky-theme-modern .sky-flyout{border-left:0}.sky-theme-modern .sky-flyout-header{border-bottom:none;background:#fff;padding:15px 10px}.sky-theme-modern .sky-flyout-header-grab-handle{cursor:move;cursor:-moz-grab}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout{background:#000}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-flyout-header{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout{background:#000}.sky-theme-modern.sky-theme-mode-dark .sky-flyout-header{background:#000}\n"], components: [{ type: i5.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i6.SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i11.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2.SkyLibResourcesPipe }, animations: [
+        trigger('flyoutState', [
+            state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),
+            state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
+            transition('void => *', [
+                style({ transform: 'translateX(100%)' }),
+                animate(250),
+            ]),
+            transition(`* <=> *`, animate('250ms ease-in')),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-flyout',
+                    templateUrl: './flyout.component.html',
+                    styleUrls: ['./flyout.component.scss'],
+                    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')),
+                        ]),
+                    ],
+                    // Allow automatic change detection for child components.
+                    changeDetection: ChangeDetectionStrategy.Default,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyFlyoutAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i2.SkyLibResourcesService }, { type: i3.SkyFlyoutMediaQueryService }, { type: i0.ElementRef }, { type: i4.SkyUIConfigService }, { type: i0.NgZone }]; }, propDecorators: { flyoutRef: [{
+                type: ViewChild,
+                args: ['flyoutRef', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], target: [{
+                type: ViewChild,
+                args: ['target', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }], flyoutCloseButton: [{
+                type: ViewChild,
+                args: ['flyoutCloseButton', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], flyoutContent: [{
+                type: ViewChild,
+                args: ['flyoutContent', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], flyoutHeader: [{
+                type: ViewChild,
+                args: ['flyoutHeader', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+//# sourceMappingURL=flyout.component.js.map

package/esm2015/lib/modules/flyout/flyout.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flyout.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout.component.ts","../../../../../../../../libs/components/flyout/src/lib/modules/flyout/flyout.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  ComponentFactoryResolver,\n  ElementRef,\n  HostListener,\n  Injector,\n  OnDestroy,\n  OnInit,\n  Type,\n  ViewChild,\n  ViewContainerRef,\n  NgZone,\n} from '@angular/core';\n\nimport {\n  animate,\n  AnimationEvent,\n  state,\n  style,\n  transition,\n  trigger,\n} from '@angular/animations';\n\nimport { fromEvent, Subject } from 'rxjs';\n\nimport { take, takeUntil, takeWhile } from 'rxjs/operators';\n\nimport {\n  SkyMediaBreakpoints,\n  SkyMediaQueryService,\n  SkyUIConfigService,\n} from '@skyux/core';\n\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport { SkyFlyoutAdapterService } from './flyout-adapter.service';\n\nimport { SkyFlyoutInstance } from './flyout-instance';\n\nimport { SkyFlyoutMediaQueryService } from './flyout-media-query.service';\n\nimport { SkyFlyoutAction } from './types/flyout-action';\n\nimport { SkyFlyoutConfig } from './types/flyout-config';\n\nimport { SkyFlyoutMessage } from './types/flyout-message';\n\nimport { SkyFlyoutMessageType } from './types/flyout-message-type';\n\nimport { SkyFlyoutPermalink } from './types/flyout-permalink';\nimport { SkyFlyoutBeforeCloseHandler } from './types/flyout-before-close-handler';\n\nconst FLYOUT_OPEN_STATE = 'flyoutOpen';\nconst FLYOUT_CLOSED_STATE = 'flyoutClosed';\n\nlet nextId = 0;\n\n/**\n * @internal\n */\n@Component({\n  selector: 'sky-flyout',\n  templateUrl: './flyout.component.html',\n  styleUrls: ['./flyout.component.scss'],\n  providers: [\n    SkyFlyoutAdapterService,\n    SkyFlyoutMediaQueryService,\n    { provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },\n  ],\n  animations: [\n    trigger('flyoutState', [\n      state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),\n      state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),\n      transition('void => *', [\n        style({ transform: 'translateX(100%)' }),\n        animate(250),\n      ]),\n      transition(`* <=> *`, animate('250ms ease-in')),\n    ]),\n  ],\n  // Allow automatic change detection for child components.\n  changeDetection: ChangeDetectionStrategy.Default,\n})\nexport class SkyFlyoutComponent implements OnDestroy, OnInit {\n  public config: SkyFlyoutConfig;\n  public enableTrapFocus: boolean;\n  public enableTrapFocusAutoCapture: boolean;\n  public flyoutId: string = `sky-flyout-${++nextId}`;\n  public flyoutState = FLYOUT_CLOSED_STATE;\n  public isOpen = false;\n  public isOpening = false;\n\n  public flyoutWidth = 0;\n  public instanceReady = false;\n  public isDragging = false;\n  public isFullscreen = false;\n  public resizeKeyControlActive = false;\n\n  private xCoord = 0;\n  private windowBufferSize = 20;\n\n  public get messageStream(): Subject<SkyFlyoutMessage> {\n    return this._messageStream;\n  }\n\n  public get permalink(): SkyFlyoutPermalink {\n    const permalink = this.config.permalink;\n    if (permalink) {\n      return permalink;\n    }\n\n    return {};\n  }\n\n  public get permalinkLabel(): string {\n    if (this.permalink.label) {\n      return this.permalink.label;\n    }\n\n    return this.getString('skyux_flyout_permalink_button');\n  }\n\n  public get primaryAction(): SkyFlyoutAction {\n    let primaryAction = this.config.primaryAction;\n    if (primaryAction) {\n      return primaryAction;\n    }\n\n    return {};\n  }\n\n  public get primaryActionLabel(): string {\n    if (this.config.primaryAction && this.config.primaryAction.label) {\n      return this.config.primaryAction.label;\n    }\n\n    return this.getString('skyux_flyout_primary_action_button');\n  }\n\n  public themeName: string;\n\n  /**\n   * @internal\n   */\n  public widthStep: number = 10;\n\n  /**\n   * @internal\n   */\n  @ViewChild('flyoutRef', {\n    read: ElementRef,\n    static: true,\n  })\n  public flyoutRef: ElementRef;\n\n  @ViewChild('target', {\n    read: ViewContainerRef,\n    static: true,\n  })\n  private target: ViewContainerRef;\n\n  @ViewChild('flyoutCloseButton', {\n    read: ElementRef,\n    static: true,\n  })\n  private flyoutCloseButton: ElementRef;\n\n  @ViewChild('flyoutContent', {\n    read: ElementRef,\n    static: true,\n  })\n  private flyoutContent: ElementRef;\n\n  @ViewChild('flyoutHeader', {\n    read: ElementRef,\n    static: true,\n  })\n  private flyoutHeader: ElementRef;\n\n  private flyoutInstance: SkyFlyoutInstance<any>;\n\n  private ngUnsubscribe = new Subject();\n\n  private _messageStream = new Subject<SkyFlyoutMessage>();\n\n  constructor(\n    private adapter: SkyFlyoutAdapterService,\n    private changeDetector: ChangeDetectorRef,\n    private injector: Injector,\n    private resolver: ComponentFactoryResolver,\n    private resourcesService: SkyLibResourcesService,\n    private flyoutMediaQueryService: SkyFlyoutMediaQueryService,\n    private elementRef: ElementRef,\n    private uiConfigService: SkyUIConfigService,\n    private readonly _ngZone: NgZone\n  ) {\n    // All commands flow through the message stream.\n    this.messageStream\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((message: SkyFlyoutMessage) => {\n        this.handleIncomingMessages(message);\n      });\n  }\n\n  public ngOnInit(): void {\n    this.adapter.adjustHeaderForHelp(this.flyoutHeader);\n  }\n\n  public ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n  }\n\n  @HostListener('window:resize', ['$event'])\n  public onWindowResize(event: any): void {\n    if (\n      this.flyoutMediaQueryService.isWidthWithinBreakpiont(\n        event.target.innerWidth,\n        SkyMediaBreakpoints.xs\n      )\n    ) {\n      this.updateBreakpointAndResponsiveClass(event.target.innerWidth);\n    } else {\n      this.updateBreakpointAndResponsiveClass(this.flyoutWidth);\n    }\n\n    this.setFullscreen();\n\n    if (event.target.innerWidth - this.flyoutWidth < this.windowBufferSize) {\n      this.flyoutWidth = event.target.innerWidth - this.windowBufferSize;\n      this.xCoord = this.windowBufferSize;\n      this.setUserData();\n    }\n  }\n\n  public attach<T>(\n    component: Type<T>,\n    config: SkyFlyoutConfig\n  ): SkyFlyoutInstance<T> {\n    this.cleanTemplate();\n\n    // Emit the closed event on any previously opened flyout instance\n    if (this.flyoutInstance) {\n      this.notifyClosed();\n    }\n\n    this.config = Object.assign({ providers: [] }, config);\n    this.config.defaultWidth =\n      this.config.defaultWidth || window.innerWidth / 2;\n    this.config.minWidth = this.config.minWidth || 320;\n    this.config.maxWidth = this.config.maxWidth || this.config.defaultWidth;\n\n    this.config.showIterator = this.config.showIterator || false;\n    this.config.iteratorNextButtonDisabled =\n      this.config.iteratorNextButtonDisabled || false;\n    this.config.iteratorPreviousButtonDisabled =\n      this.config.iteratorPreviousButtonDisabled || false;\n\n    const factory = this.resolver.resolveComponentFactory(component);\n\n    const injector = Injector.create({\n      parent: this.injector,\n      providers: this.config.providers,\n    });\n\n    const componentRef = this.target.createComponent(\n      factory,\n      undefined,\n      injector\n    );\n\n    this.flyoutInstance = this.createFlyoutInstance<T>(componentRef.instance);\n\n    // This is used to ensure we do not render the flyout until we have attached the component.\n    // This allows the aria-labelledby to function correctly.\n    this.instanceReady = true;\n    this.changeDetector.markForCheck();\n\n    // Open the flyout immediately.\n    this.messageStream.next({\n      type: SkyFlyoutMessageType.Open,\n    });\n\n    if (this.config.settingsKey) {\n      this.uiConfigService\n        .getConfig(this.config.settingsKey)\n        .pipe(take(1))\n        .subscribe((value: any) => {\n          if (value && value.flyoutWidth) {\n            this.flyoutWidth = value.flyoutWidth;\n          } else {\n            // Bad data, or config is the default config.\n            this.flyoutWidth = this.config.defaultWidth;\n          }\n          this.checkInitialSize();\n        });\n    } else {\n      this.flyoutWidth = this.config.defaultWidth;\n      this.checkInitialSize();\n    }\n\n    return this.flyoutInstance;\n  }\n\n  public close(): void {\n    this.messageStream.next({\n      type: SkyFlyoutMessageType.Close,\n    });\n  }\n\n  public invokePrimaryAction(): boolean {\n    this.primaryAction.callback();\n\n    if (this.primaryAction.closeAfterInvoking) {\n      this.close();\n    }\n\n    return false;\n  }\n\n  public getAnimationState(): string {\n    return this.instanceReady && this.isOpening\n      ? FLYOUT_OPEN_STATE\n      : FLYOUT_CLOSED_STATE;\n  }\n\n  public animationDone(event: AnimationEvent): void {\n    if (event.toState === FLYOUT_OPEN_STATE) {\n      this.isOpen = true;\n    }\n\n    if (event.toState === FLYOUT_CLOSED_STATE) {\n      this.isOpen = false;\n      this.notifyClosed();\n      this.cleanTemplate();\n    }\n  }\n\n  public onHeaderGrabHandleMouseDown(event: MouseEvent): void {\n    this.onResizeHandleMouseDown(event);\n  }\n\n  public onHeaderGrabHandleKeyDown(event: KeyboardEvent): void {\n    this.handleResizeKeyDown(event);\n  }\n\n  public onResizeHandleKeyDown(event: KeyboardEvent): void {\n    this.handleResizeKeyDown(event);\n  }\n\n  public onResizeHandleMouseDown(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.isFullscreen) {\n      return;\n    }\n\n    this.isDragging = true;\n    this.xCoord = event.clientX;\n\n    this.adapter.toggleIframePointerEvents(false);\n\n    fromEvent(document, 'mousemove')\n      .pipe(\n        takeWhile(() => {\n          return this.isDragging;\n        })\n      )\n      .subscribe((moveEvent: any) => {\n        this.onMouseMove(moveEvent);\n      });\n\n    fromEvent(document, 'mouseup')\n      .pipe(\n        takeWhile(() => {\n          return this.isDragging;\n        })\n      )\n      .subscribe((mouseUpEvent: any) => {\n        this.onHandleRelease(mouseUpEvent);\n      });\n  }\n\n  public onMouseMove(event: MouseEvent): void {\n    /* Sanity check */\n    /* istanbul ignore if */\n    if (!this.isDragging) {\n      return;\n    }\n\n    const offsetX = event.clientX - this.xCoord;\n    let width = this.flyoutWidth;\n\n    width -= offsetX;\n\n    if (width < this.config.minWidth || width > this.config.maxWidth) {\n      return;\n    }\n\n    if (window.innerWidth - width < this.windowBufferSize) {\n      width = window.innerWidth - this.windowBufferSize;\n      this.xCoord = this.windowBufferSize;\n    } else {\n      this.xCoord = event.clientX;\n    }\n\n    this.flyoutWidth = width;\n\n    this.updateBreakpointAndResponsiveClass(this.flyoutWidth);\n\n    this.changeDetector.markForCheck();\n  }\n\n  public onHandleRelease(event: MouseEvent): void {\n    fromEvent(document, 'click')\n      .pipe(take(1))\n      .subscribe(() => {\n        this.isDragging = false;\n        this.adapter.toggleIframePointerEvents(true);\n        this.setUserData();\n      });\n  }\n\n  public onIteratorPreviousButtonClick(): void {\n    this.flyoutInstance.iteratorPreviousButtonClick.emit();\n  }\n\n  public onIteratorNextButtonClick(): void {\n    this.flyoutInstance.iteratorNextButtonClick.emit();\n  }\n\n  private createFlyoutInstance<T>(component: T): SkyFlyoutInstance<T> {\n    const instance = new SkyFlyoutInstance<T>();\n\n    instance.componentInstance = component;\n    instance.hostController\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((message: SkyFlyoutMessage) => {\n        this.messageStream.next(message);\n      });\n\n    return instance;\n  }\n\n  private handleIncomingMessages(message: SkyFlyoutMessage): void {\n    /* tslint:disable-next-line:switch-default */\n    switch (message.type) {\n      case SkyFlyoutMessageType.Open:\n        if (!this.isOpen) {\n          this.isOpen = false;\n          this.isOpening = true;\n        }\n        this.initFocusTrap();\n        break;\n\n      case SkyFlyoutMessageType.Close:\n        if (\n          (<Subject<any>>this.flyoutInstance.beforeClose).observers.length ===\n            0 ||\n          message.data?.ignoreBeforeClose\n        ) {\n          this.isOpen = true;\n          this.isOpening = false;\n        } else {\n          (<Subject<any>>this.flyoutInstance.beforeClose).next(\n            new SkyFlyoutBeforeCloseHandler(() => {\n              this.isOpen = true;\n              this.isOpening = false;\n            })\n          );\n        }\n        break;\n\n      case SkyFlyoutMessageType.EnableIteratorNextButton:\n        this.config.iteratorNextButtonDisabled = false;\n        break;\n\n      case SkyFlyoutMessageType.EnableIteratorPreviousButton:\n        this.config.iteratorPreviousButtonDisabled = false;\n        break;\n\n      case SkyFlyoutMessageType.DisableIteratorNextButton:\n        this.config.iteratorNextButtonDisabled = true;\n        break;\n\n      case SkyFlyoutMessageType.DisableIteratorPreviousButton:\n        this.config.iteratorPreviousButtonDisabled = true;\n        break;\n    }\n\n    this.changeDetector.markForCheck();\n  }\n\n  private notifyClosed(): void {\n    this.flyoutInstance.closed.emit();\n    this.flyoutInstance.closed.complete();\n  }\n\n  private cleanTemplate(): void {\n    this.target.clear();\n  }\n\n  private updateBreakpointAndResponsiveClass(width: number): void {\n    this.flyoutMediaQueryService.setBreakpointForWidth(width);\n\n    const newBreakpiont = this.flyoutMediaQueryService.current;\n\n    this.adapter.setResponsiveClass(this.elementRef, newBreakpiont);\n  }\n\n  private setFullscreen(): void {\n    if (window.innerWidth - this.windowBufferSize < this.config.minWidth) {\n      this.isFullscreen = true;\n    } else {\n      this.isFullscreen = false;\n    }\n  }\n\n  private setUserData(): void {\n    if (this.config.settingsKey) {\n      this.uiConfigService\n        .setConfig(this.config.settingsKey, {\n          flyoutWidth: this.flyoutWidth,\n        })\n        .pipe(take(1))\n        .subscribe(\n          () => {},\n          (err) => {\n            console.warn('Could not save flyout data.');\n            console.warn(err);\n          }\n        );\n    }\n  }\n\n  private checkInitialSize(): void {\n    if (this.flyoutWidth < this.config.minWidth) {\n      this.flyoutWidth = this.config.minWidth;\n      this.setUserData();\n    } else if (this.flyoutWidth > this.config.maxWidth) {\n      this.flyoutWidth = this.config.maxWidth;\n      this.setUserData();\n    }\n\n    // Ensure flyout does not load larger than the window and its buffer\n    if (window.innerWidth - this.flyoutWidth < this.windowBufferSize) {\n      this.flyoutWidth = window.innerWidth - this.windowBufferSize;\n      this.xCoord = this.windowBufferSize;\n      this.setUserData();\n    }\n\n    if (\n      this.flyoutMediaQueryService.isWidthWithinBreakpiont(\n        window.innerWidth,\n        SkyMediaBreakpoints.xs\n      )\n    ) {\n      this.updateBreakpointAndResponsiveClass(window.innerWidth);\n    } else {\n      this.updateBreakpointAndResponsiveClass(this.flyoutWidth);\n    }\n\n    this.setFullscreen();\n  }\n\n  private getString(key: string): string {\n    // TODO: Need to implement the async `getString` method in a breaking change.\n    return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);\n  }\n\n  private handleResizeKeyDown(event: KeyboardEvent): void {\n    /* istanbul ignore else */\n    if (event.key) {\n      const keyPressed = event.key.toLowerCase().replace('arrow', '');\n      switch (keyPressed) {\n        case 'enter':\n        case ' ':\n          this.resizeKeyControlActive = !this.resizeKeyControlActive;\n          break;\n        case 'tab':\n          /* istanbul ignore else */\n          if (this.resizeKeyControlActive) {\n            this.resizeKeyControlActive = false;\n          }\n        case 'left':\n          if (this.resizeKeyControlActive) {\n            /* istanbul ignore else */\n            if (this.flyoutWidth < this.config.maxWidth) {\n              this.flyoutWidth = Math.min(\n                this.flyoutWidth + this.widthStep,\n                this.config.maxWidth\n              );\n            }\n          }\n          break;\n\n        case 'right':\n          if (this.resizeKeyControlActive) {\n            /* istanbul ignore else */\n            if (this.flyoutWidth > this.config.minWidth) {\n              this.flyoutWidth = Math.max(\n                this.flyoutWidth - this.widthStep,\n                this.config.minWidth\n              );\n            }\n          }\n          break;\n\n        /* istanbul ignore next */\n        default:\n          break;\n      }\n    }\n  }\n\n  /** Executes a function when the zone is stable. */\n  private _executeOnStable(fn: () => any): void {\n    if (this._ngZone.isStable) {\n      fn();\n    } else {\n      this._ngZone.onStable.pipe(take(1)).subscribe(fn);\n    }\n  }\n\n  private initFocusTrap(): void {\n    this.enableTrapFocusAutoCapture = false;\n    this.enableTrapFocus = false;\n    // Waiting for zone to be stable will avoid ExpressionChangeAfterCheckedError.\n    this._executeOnStable(() => {\n      this.enableTrapFocusAutoCapture = true;\n      this.enableTrapFocus = true;\n    });\n  }\n}\n","<div\n  class=\"sky-flyout\"\n  tabindex=\"-1\"\n  [attr.role]=\"config?.ariaRole ? config.ariaRole : 'dialog'\"\n  [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n  [attr.aria-label]=\"config?.ariaLabel\"\n  [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\n  [attr.aria-modal]=\"\n    config?.ariaRole === 'dialog' || !config?.ariaRole ? true : false\n  \"\n  [attr.hidden]=\"!instanceReady ? true : undefined\"\n  [id]=\"flyoutId\"\n  [ngClass]=\"{\n    'sky-flyout-hidden': !isOpen && !isOpening,\n    'sky-flyout-fullscreen': isFullscreen\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-8': 'modern'\n  }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  #flyoutRef\n  [cdkTrapFocus]=\"enableTrapFocus\"\n  [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n>\n  <div\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    #flyoutHeader\n  >\n    <div class=\"sky-flyout-header-content\">\n      <button\n        *skyThemeIf=\"'modern'\"\n        class=\"\n          sky-btn\n          sky-btn-icon-borderless\n          sky-margin-inline-sm\n          sky-flyout-header-grab-handle\n        \"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" iconType=\"skyux\" size=\"lg\"> </sky-icon>\n      </button>\n\n      <sky-flyout-iterator\n        *ngIf=\"config.showIterator\"\n        [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n        [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n        (nextButtonClick)=\"onIteratorNextButtonClick()\"\n        (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n      >\n      </sky-flyout-iterator>\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\"> </ng-container>\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\"> </ng-container>\n      <button\n        class=\"sky-btn sky-flyout-btn-close sky-label-icon-theme-default\"\n        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_close' | skyLibResources\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-icon-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n        #flyoutCloseButton\n      >\n        <sky-icon *skyThemeIf=\"'default'\" icon=\"close\"> </sky-icon>\n        <sky-icon\n          *skyThemeIf=\"'modern'\"\n          icon=\"close\"\n          iconType=\"skyux\"\n          size=\"lg\"\n        >\n        </sky-icon>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-flyout-content\" #flyoutContent>\n    <div #target></div>\n  </div>\n  <div\n    class=\"sky-flyout-resize-handle\"\n    role=\"separator\"\n    tabindex=\"0\"\n    type=\"range\"\n    [attr.aria-controls]=\"flyoutId\"\n    [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n    [attr.aria-valuemax]=\"config.maxWidth\"\n    [attr.aria-valuemin]=\"config.minWidth\"\n    [attr.aria-valuenow]=\"flyoutWidth\"\n    (keydown)=\"onResizeHandleKeyDown($event)\"\n    (mousedown)=\"onResizeHandleMouseDown($event)\"\n  ></div>\n</div>\n\n<ng-template #permalinkTemplate>\n  <ng-template [ngIf]=\"permalink\">\n    <ng-template [ngIf]=\"permalink.url\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [skyHref]=\"permalink.url\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n    <ng-template [ngIf]=\"permalink.route\">\n      <a\n        class=\"sky-btn sky-flyout-btn-permalink sky-margin-inline-default\"\n        [routerLink]=\"permalink.route.commands\"\n        [fragment]=\"permalink.route.extras?.fragment\"\n        [skyThemeClass]=\"{\n          'sky-btn-default': 'default',\n          'sky-btn-borderless': 'modern'\n        }\"\n        [queryParams]=\"permalink.route.extras?.queryParams\"\n        [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n        [state]=\"permalink.route.extras?.state\"\n        (click)=\"close()\"\n      >\n        {{ permalinkLabel }}\n      </a>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  <ng-template [ngIf]=\"primaryAction && primaryAction.callback\">\n    <button\n      type=\"button\"\n      class=\"\n        sky-btn\n        sky-btn-default\n        sky-flyout-btn-primary-action\n        sky-margin-inline-default\n      \"\n      (click)=\"invokePrimaryAction()\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </ng-template>\n</ng-template>\n"]}