@skyux/flyout 5.5.0 → 5.6.0

package/fesm2015/skyux-flyout.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, NgModule, Injectable, Component, Input, Output, Injector, ElementRef, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener } from '@angular/core';
+import { EventEmitter, NgModule, Component, Input, Output, Injectable, Injector, ElementRef, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener } from '@angular/core';
 import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
 import * as i9 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -8,18 +8,18 @@ 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 i1$1 from '@skyux/indicators';
-import { SkyIconModule } from '@skyux/indicators';
 import * as i2$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as 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 { takeUntil, take, takeWhile } from 'rxjs/operators';
-import * as i1 from '@skyux/core';
+import * as i1$1 from '@skyux/core';
 import { SkyMediaBreakpoints, SkyMediaQueryService } from '@skyux/core';
+import { takeUntil, take, takeWhile } from 'rxjs/operators';
 
 /**
  * @internal
@@ -191,6 +191,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+/**
+ * @internal
+ */
+class SkyFlyoutIteratorComponent {
+    constructor() {
+        this.ngUnsubscribe = new Subject();
+        this._nextButtonClick = new EventEmitter();
+        this._previousButtonClick = new EventEmitter();
+    }
+    get previousButtonClick() {
+        return this._previousButtonClick;
+    }
+    get nextButtonClick() {
+        return this._nextButtonClick;
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this._previousButtonClick.complete();
+        this._nextButtonClick.complete();
+    }
+    onIteratorPreviousClick() {
+        /* istanbul ignore else */
+        if (!this.previousButtonDisabled) {
+            this._previousButtonClick.emit();
+        }
+    }
+    onIteratorNextClick() {
+        /* istanbul ignore else */
+        if (!this.nextButtonDisabled) {
+            this._nextButtonClick.emit();
+        }
+    }
+}
+SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0, template: "<div id=\"iterators\" class=\"sky-flyout-iterators\">\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"\n      'skyux_flyout_iterator_previous_button' | skyLibResources\n    \"\n    [disabled]=\"previousButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorPreviousClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-up\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n    [disabled]=\"nextButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorNextClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-down\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"], components: [{ type: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-flyout-iterator',
+                    templateUrl: './flyout-iterator.component.html',
+                    styleUrls: ['./flyout-iterator.component.scss'],
+                }]
+        }], propDecorators: { nextButtonDisabled: [{
+                type: Input
+            }], previousButtonDisabled: [{
+                type: Input
+            }], previousButtonClick: [{
+                type: Output
+            }], nextButtonClick: [{
+                type: Output
+            }] } });
+
 /**
  * @internal
  */
@@ -245,11 +298,11 @@ class SkyFlyoutAdapterService {
         }
     }
 }
-SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFlyoutAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyFlyoutAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutAdapterService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1.SkyAppWindowRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i1$1.SkyAppWindowRef }]; } });
 
 /**
  * @internal
@@ -328,59 +381,6 @@ class SkyFlyoutBeforeCloseHandler {
     }
 }
 
-/**
- * @internal
- */
-class SkyFlyoutIteratorComponent {
-    constructor() {
-        this.ngUnsubscribe = new Subject();
-        this._nextButtonClick = new EventEmitter();
-        this._previousButtonClick = new EventEmitter();
-    }
-    get previousButtonClick() {
-        return this._previousButtonClick;
-    }
-    get nextButtonClick() {
-        return this._nextButtonClick;
-    }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this._previousButtonClick.complete();
-        this._nextButtonClick.complete();
-    }
-    onIteratorPreviousClick() {
-        /* istanbul ignore else */
-        if (!this.previousButtonDisabled) {
-            this._previousButtonClick.emit();
-        }
-    }
-    onIteratorNextClick() {
-        /* istanbul ignore else */
-        if (!this.nextButtonDisabled) {
-            this._nextButtonClick.emit();
-        }
-    }
-}
-SkyFlyoutIteratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyFlyoutIteratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: { nextButtonDisabled: "nextButtonDisabled", previousButtonDisabled: "previousButtonDisabled" }, outputs: { previousButtonClick: "previousButtonClick", nextButtonClick: "nextButtonClick" }, ngImport: i0, template: "<div id=\"iterators\" class=\"sky-flyout-iterators\">\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"\n      'skyux_flyout_iterator_previous_button' | skyLibResources\n    \"\n    [disabled]=\"previousButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorPreviousClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-up\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-up\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n  <button\n    class=\"sky-btn\"\n    [attr.aria-label]=\"'skyux_flyout_iterator_next_button' | skyLibResources\"\n    [disabled]=\"nextButtonDisabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-default sky-margin-inline-compact': 'default',\n      'sky-btn-icon-borderless sky-margin-inline-sm': 'modern'\n    }\"\n    (click)=\"onIteratorNextClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"chevron-down\"> </sky-icon>\n    <sky-icon\n      *skyThemeIf=\"'modern'\"\n      icon=\"chevron-down\"\n      iconType=\"skyux\"\n      size=\"lg\"\n    >\n    </sky-icon>\n  </button>\n</div>\n", styles: [":host-context(.sky-theme-modern) .sky-flyout-iterators{display:inline}.sky-theme-modern .sky-flyout-iterators{display:inline}\n"], components: [{ type: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutIteratorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-flyout-iterator',
-                    templateUrl: './flyout-iterator.component.html',
-                    styleUrls: ['./flyout-iterator.component.scss'],
-                }]
-        }], propDecorators: { nextButtonDisabled: [{
-                type: Input
-            }], previousButtonDisabled: [{
-                type: Input
-            }], previousButtonClick: [{
-                type: Output
-            }], nextButtonClick: [{
-                type: Output
-            }] } });
-
 const FLYOUT_OPEN_STATE = 'flyoutOpen';
 const FLYOUT_CLOSED_STATE = 'flyoutClosed';
 let nextId = 0;
@@ -439,7 +439,7 @@ class SkyFlyoutComponent {
         return this.getString('skyux_flyout_permalink_button');
     }
     get primaryAction() {
-        let primaryAction = this.config.primaryAction;
+        const primaryAction = this.config.primaryAction;
         if (primaryAction) {
             return primaryAction;
         }
@@ -746,6 +746,7 @@ class SkyFlyoutComponent {
                     if (this.resizeKeyControlActive) {
                         this.resizeKeyControlActive = false;
                     }
+                    break;
                 case 'left':
                     if (this.resizeKeyControlActive) {
                         /* istanbul ignore else */
@@ -787,12 +788,12 @@ class SkyFlyoutComponent {
         });
     }
 }
-SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0.ElementRef }, { token: i1.SkyUIConfigService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+SkyFlyoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutComponent, deps: [{ token: SkyFlyoutAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i2$1.SkyLibResourcesService }, { token: SkyFlyoutMediaQueryService }, { token: i0.ElementRef }, { token: i1$1.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: i1$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe }, animations: [
+    ], 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: i1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i9.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i2$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "skyLibResources": i2$1.SkyLibResourcesPipe }, animations: [
         trigger('flyoutState', [
             state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),
             state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
@@ -828,7 +829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // Allow automatic change detection for child components.
                     changeDetection: ChangeDetectionStrategy.Default,
                 }]
-        }], ctorParameters: function () { return [{ type: SkyFlyoutAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i2$1.SkyLibResourcesService }, { type: SkyFlyoutMediaQueryService }, { type: i0.ElementRef }, { type: i1.SkyUIConfigService }, { type: i0.NgZone }]; }, propDecorators: { flyoutRef: [{
+        }], 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,
@@ -1054,14 +1055,14 @@ class SkyFlyoutService {
         this.ngUnsubscribe = new Subject();
     }
 }
-SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i1.SkyAppWindowRef }, { token: i1.SkyDynamicComponentService }, { token: i2$2.Router }, { token: i0.NgZone }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFlyoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, deps: [{ token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyAppWindowRef }, { token: i1$1.SkyDynamicComponentService }, { token: i2$2.Router }, { token: i0.NgZone }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyFlyoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, providedIn: 'any' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyFlyoutService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'any',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i1.SkyAppWindowRef }, { type: i1.SkyDynamicComponentService }, { type: i2$2.Router }, { type: i0.NgZone }, { type: i0.ApplicationRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyAppWindowRef }, { type: i1$1.SkyDynamicComponentService }, { type: i2$2.Router }, { type: i0.NgZone }, { type: i0.ApplicationRef }]; } });
 
 /**
  * Generated bundle index. Do not edit.