@skyux/flyout 11.15.0 → 11.16.0

package/fesm2022/skyux-flyout.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, NgModule, Injectable, Component, Input, Output, inject, ChangeDetectorRef, ElementRef, EnvironmentInjector, NgZone, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener } from '@angular/core';
-import { Subject, ReplaySubject, BehaviorSubject, fromEvent } from 'rxjs';
+import { EventEmitter, NgModule, Injectable, Component, Input, Output, inject, ChangeDetectorRef, EnvironmentInjector, NgZone, ElementRef, ViewContainerRef, ChangeDetectionStrategy, ViewChild, HostListener } from '@angular/core';
+import { Subject, BehaviorSubject, fromEvent } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1$2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -9,7 +9,7 @@ import { CommonModule } from '@angular/common';
 import * as i2$2 from '@angular/router';
 import { RouterModule, NavigationStart } from '@angular/router';
 import * as i1 from '@skyux/core';
-import { SkyMediaBreakpoints, SkyDynamicComponentService, SkyUIConfigService, SKY_STACKING_CONTEXT, SkyMediaQueryService } from '@skyux/core';
+import { SkyDynamicComponentService, SkyUIConfigService, SKY_STACKING_CONTEXT, SkyResponsiveHostDirective } from '@skyux/core';
 import * as i2 from '@skyux/i18n';
 import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import * as i1$1 from '@skyux/icon';
@@ -222,37 +222,6 @@ class SkyFlyoutAdapterService {
             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.
@@ -315,70 +284,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 type: Output
             }] } });
 
-/**
- * @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: "18.2.8", ngImport: i0, type: SkyFlyoutMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFlyoutMediaQueryService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFlyoutMediaQueryService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 /**
  * Handler for notifying the flyout when it is appropriate to close the flyout. This will be returned from the flyout instance's `beforeClose` observable.
  */
@@ -406,9 +311,7 @@ class SkyFlyoutComponent {
     #adapter;
     #changeDetector;
     #dynamicComponentSvc;
-    #elementRef;
     #environmentInjector;
-    #flyoutMediaQueryService;
     #ngZone;
     #resourcesService;
     #uiConfigService;
@@ -446,9 +349,7 @@ class SkyFlyoutComponent {
         this.#adapter = inject(SkyFlyoutAdapterService);
         this.#changeDetector = inject(ChangeDetectorRef);
         this.#dynamicComponentSvc = inject(SkyDynamicComponentService);
-        this.#elementRef = inject(ElementRef);
         this.#environmentInjector = inject(EnvironmentInjector);
-        this.#flyoutMediaQueryService = inject(SkyFlyoutMediaQueryService);
         this.#ngZone = inject(NgZone);
         this.#resourcesService = inject(SkyLibResourcesService);
         this.#uiConfigService = inject(SkyUIConfigService);
@@ -470,15 +371,13 @@ class SkyFlyoutComponent {
         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;
+        if (this.isFullscreen) {
+            return;
+        }
+        const target = event.target;
+        if (target.innerWidth - this.flyoutWidth < this.#windowBufferSize) {
+            this.flyoutWidth = target.innerWidth - this.#windowBufferSize;
             this.#xCoord = this.#windowBufferSize;
             this.#setUserData();
         }
@@ -623,8 +522,8 @@ class SkyFlyoutComponent {
             .pipe(takeWhile(() => {
             return this.isDragging;
         }))
-            .subscribe((mouseUpEvent) => {
-            this.onHandleRelease(mouseUpEvent);
+            .subscribe(() => {
+            this.onHandleRelease();
         });
     }
     onMouseMove(event) {
@@ -647,10 +546,9 @@ class SkyFlyoutComponent {
             this.#xCoord = event.clientX;
         }
         this.flyoutWidth = width;
-        this.#updateBreakpointAndResponsiveClass(this.flyoutWidth);
         this.#changeDetector.markForCheck();
     }
-    onHandleRelease(event) {
+    onHandleRelease() {
         fromEvent(document, 'click')
             .pipe(take(1))
             .subscribe(() => {
@@ -725,11 +623,6 @@ class SkyFlyoutComponent {
     #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;
@@ -768,12 +661,6 @@ class SkyFlyoutComponent {
             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) {
@@ -836,11 +723,7 @@ class SkyFlyoutComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyFlyoutComponent, isStandalone: true, 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  #flyoutRef\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]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  [cdkTrapFocus]=\"enableTrapFocus\"\n  [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n  (@flyoutState.done)=\"animationDone($event)\"\n>\n  <div\n    #flyoutHeader\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    [style.z-index]=\"zIndex$ | async\"\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        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" size=\"lg\" />\n      </button>\n\n      @if (config.showIterator) {\n        <sky-flyout-iterator\n          [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n          [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n          (nextButtonClick)=\"onIteratorNextButtonClick()\"\n          (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n        />\n      }\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\" />\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\" />\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\" />\n        <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"lg\" />\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  @if (permalink) {\n    @if (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    } @else if (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    }\n  }\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  @if (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  }\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:-webkit-grab;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:-webkit-grab;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: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i4.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }, { kind: "ngmodule", type: SkyFlyoutResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyFlyoutComponent, isStandalone: true, selector: "sky-flyout", host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [SkyFlyoutAdapterService], 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  #flyoutRef\n  class=\"sky-flyout\"\n  skyResponsiveHost\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]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  [cdkTrapFocus]=\"enableTrapFocus\"\n  [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n  (@flyoutState.done)=\"animationDone($event)\"\n>\n  <div\n    #flyoutHeader\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    [style.z-index]=\"zIndex$ | async\"\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        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" size=\"lg\" />\n      </button>\n\n      @if (config.showIterator) {\n        <sky-flyout-iterator\n          [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n          [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n          (nextButtonClick)=\"onIteratorNextButtonClick()\"\n          (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n        />\n      }\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\" />\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\" />\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\" />\n        <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"lg\" />\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  @if (permalink) {\n    @if (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    } @else if (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    }\n  }\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  @if (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  }\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-fullscreen .sky-flyout-header{width:100%}.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:-webkit-grab;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:-webkit-grab;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: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: SkyResponsiveHostDirective, selector: "[skyResponsiveHost]", exportAs: ["skyResponsiveHost"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i4.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyFlyoutIteratorComponent, selector: "sky-flyout-iterator", inputs: ["nextButtonDisabled", "previousButtonDisabled"], outputs: ["previousButtonClick", "nextButtonClick"] }, { kind: "ngmodule", type: SkyFlyoutResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], animations: [
             trigger('flyoutState', [
                 state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),
                 state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
@@ -854,11 +737,7 @@ class SkyFlyoutComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFlyoutComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'sky-flyout', providers: [
-                        SkyFlyoutAdapterService,
-                        SkyFlyoutMediaQueryService,
-                        { provide: SkyMediaQueryService, useExisting: SkyFlyoutMediaQueryService },
-                    ], animations: [
+            args: [{ standalone: true, selector: 'sky-flyout', providers: [SkyFlyoutAdapterService], animations: [
                         trigger('flyoutState', [
                             state(FLYOUT_OPEN_STATE, style({ transform: 'initial' })),
                             state(FLYOUT_CLOSED_STATE, style({ transform: 'translateX(100%)' })),
@@ -872,12 +751,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         A11yModule,
                         CommonModule,
                         RouterModule,
+                        SkyResponsiveHostDirective,
                         SkyHrefModule,
                         SkyIconModule,
                         SkyFlyoutIteratorComponent,
                         SkyFlyoutResourcesModule,
                         SkyThemeModule,
-                    ], template: "<div\n  #flyoutRef\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]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  [cdkTrapFocus]=\"enableTrapFocus\"\n  [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n  (@flyoutState.done)=\"animationDone($event)\"\n>\n  <div\n    #flyoutHeader\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    [style.z-index]=\"zIndex$ | async\"\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        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" size=\"lg\" />\n      </button>\n\n      @if (config.showIterator) {\n        <sky-flyout-iterator\n          [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n          [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n          (nextButtonClick)=\"onIteratorNextButtonClick()\"\n          (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n        />\n      }\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\" />\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\" />\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\" />\n        <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"lg\" />\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  @if (permalink) {\n    @if (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    } @else if (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    }\n  }\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  @if (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  }\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:-webkit-grab;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:-webkit-grab;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"] }]
+                    ], template: "<div\n  #flyoutRef\n  class=\"sky-flyout\"\n  skyResponsiveHost\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]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\"\n  [cdkTrapFocus]=\"enableTrapFocus\"\n  [cdkTrapFocusAutoCapture]=\"enableTrapFocusAutoCapture\"\n  (@flyoutState.done)=\"animationDone($event)\"\n>\n  <div\n    #flyoutHeader\n    class=\"sky-flyout-header\"\n    [skyThemeClass]=\"{\n      'sky-padding-squish-large': 'default'\n    }\"\n    [style.z-index]=\"zIndex$ | async\"\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        type=\"button\"\n        [attr.aria-label]=\"'skyux_flyout_resize_handle' | skyLibResources\"\n        (keydown)=\"onHeaderGrabHandleKeyDown($event)\"\n        (mousedown)=\"onHeaderGrabHandleMouseDown($event)\"\n      >\n        <sky-icon icon=\"tile-drag\" size=\"lg\" />\n      </button>\n\n      @if (config.showIterator) {\n        <sky-flyout-iterator\n          [nextButtonDisabled]=\"config.iteratorNextButtonDisabled\"\n          [previousButtonDisabled]=\"config.iteratorPreviousButtonDisabled\"\n          (nextButtonClick)=\"onIteratorNextButtonClick()\"\n          (previousButtonClick)=\"onIteratorPreviousButtonClick()\"\n        />\n      }\n    </div>\n    <div class=\"sky-flyout-header-buttons\">\n      <ng-container *ngTemplateOutlet=\"permalinkTemplate\" />\n      <ng-container *ngTemplateOutlet=\"primaryActionTemplate\" />\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\" />\n        <sky-icon *skyThemeIf=\"'modern'\" icon=\"close\" size=\"lg\" />\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  @if (permalink) {\n    @if (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    } @else if (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    }\n  }\n</ng-template>\n\n<ng-template #primaryActionTemplate>\n  @if (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  }\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-fullscreen .sky-flyout-header{width:100%}.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:-webkit-grab;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:-webkit-grab;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: () => [], propDecorators: { flyoutRef: [{
                 type: ViewChild,
                 args: ['flyoutRef', {