@skyux/split-view 11.15.1 → 11.16.0

package/fesm2022/skyux-split-view.mjs

@@ -1,16 +1,16 @@
+import * as i0 from '@angular/core';
+import { NgModule, inject, Injectable, Component, ChangeDetectionStrategy, Input, HostListener, ContentChild } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { NgModule, Injectable, Component, ChangeDetectionStrategy, Input, HostListener, HostBinding, EventEmitter, ContentChild } from '@angular/core';
-import * as i2$1 from '@skyux/icon';
-import { SkyIconModule } from '@skyux/icon';
-import { SkyThemeModule } from '@skyux/theme';
-import * as i2 from '@skyux/i18n';
-import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import * as i1 from '@skyux/core';
-import { SkyMediaBreakpoints, SkyMediaQueryService } from '@skyux/core';
 import { BehaviorSubject, Subject, fromEvent } from 'rxjs';
 import { take, takeUntil, takeWhile } from 'rxjs/operators';
+import * as i1 from '@skyux/i18n';
+import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i1$1 from '@skyux/core';
+import { SkyMediaQueryService, SkyResponsiveHostDirective } from '@skyux/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import * as i2 from '@skyux/icon';
+import { SkyIconModule } from '@skyux/icon';
 import { trigger, transition, state, style, animate } from '@angular/animations';
 
 /* istanbul ignore file */
@@ -62,78 +62,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
-/**
- * Internal media query service for use determining the media query size of the split view workspace.
- * @internal
- */
-class SkySplitViewMediaQueryService {
-    get current() {
-        return this.#_current;
-    }
-    #currentSubject;
-    #_current = SkyMediaBreakpoints.xs;
-    constructor() {
-        this.#currentSubject = new BehaviorSubject(this.#_current);
-    }
-    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) {
-        if (width === undefined) {
-            return false;
-        }
-        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: SkySplitViewMediaQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewMediaQueryService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewMediaQueryService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 /**
  * Internal service for operations between the split view drawer and workspace.
  * @internal
@@ -142,9 +70,6 @@ class SkySplitViewService {
     get backButtonTextStream() {
         return this.#_backButtonTextStream;
     }
-    get drawerWidthStream() {
-        return this.#_drawerWidthStream;
-    }
     set isMobile(value) {
         this.#_isMobile = value;
     }
@@ -154,15 +79,12 @@ class SkySplitViewService {
     get isMobileStream() {
         return this.#_isMobileStream;
     }
-    #mediaQueryServiceSubscription;
     #_backButtonTextStream;
-    #_drawerWidthStream;
     #_isMobile;
     #_isMobileStream;
-    constructor(mediaQueryService, resources) {
+    constructor(resources) {
         this.drawerVisible = new BehaviorSubject(true);
         this.#_backButtonTextStream = new BehaviorSubject('');
-        this.#_drawerWidthStream = new BehaviorSubject(320);
         this.#_isMobile = false;
         this.#_isMobileStream = new BehaviorSubject(false);
         // Set default back button text.
@@ -173,8 +95,10 @@ class SkySplitViewService {
             this.updateBackButtonText(resource);
         });
         // Set breakpoint.
-        this.#mediaQueryServiceSubscription = mediaQueryService.subscribe((breakpoint) => {
-            const nowMobile = breakpoint === SkyMediaBreakpoints.xs;
+        inject(SkyMediaQueryService)
+            .breakpointChange.pipe(takeUntilDestroyed())
+            .subscribe((breakpoint) => {
+            const nowMobile = breakpoint === 'xs';
             if (nowMobile && !this.isMobile) {
                 // switching to mobile
                 this.#_isMobileStream.next(true);
@@ -188,24 +112,18 @@ class SkySplitViewService {
             this.isMobile = nowMobile;
         });
     }
-    ngOnDestroy() {
-        this.#mediaQueryServiceSubscription.unsubscribe();
-    }
     backButtonClick() {
         this.drawerVisible.next(true);
     }
     updateBackButtonText(text) {
         this.#_backButtonTextStream.next(text);
     }
-    updateDrawerWidth(drawerWidth) {
-        this.#_drawerWidthStream.next(drawerWidth);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewService, deps: [{ token: i1.SkyMediaQueryService }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.SkyMediaQueryService }, { type: i2.SkyLibResourcesService }] });
+        }], ctorParameters: () => [{ type: i1.SkyLibResourcesService }] });
 
 let skySplitViewNextId = 0;
 /**
@@ -219,8 +137,6 @@ class SkySplitViewDrawerComponent {
     set width(value) {
         if (value) {
             this.#_width = Number(value);
-            this.#updateBreakpoint();
-            this.#splitViewSvc.updateDrawerWidth(this.#_width);
             this.#changeDetectorRef.markForCheck();
         }
     }
@@ -245,12 +161,10 @@ class SkySplitViewDrawerComponent {
     #xCoord;
     #changeDetectorRef;
     #coreAdapterService;
-    #elementRef;
-    #splitViewMediaQuerySvc;
     #splitViewSvc;
     #windowRef;
     #_width;
-    constructor(changeDetectorRef, coreAdapterService, elementRef, splitViewMediaQuerySvc, splitViewSvc, windowRef) {
+    constructor(changeDetectorRef, coreAdapterService, splitViewSvc, windowRef) {
         this.isMobile = false;
         this.widthDefault = 320;
         // Max needs to start as something to allow input range to work.
@@ -263,8 +177,6 @@ class SkySplitViewDrawerComponent {
         this.#xCoord = 0;
         this.#changeDetectorRef = changeDetectorRef;
         this.#coreAdapterService = coreAdapterService;
-        this.#elementRef = elementRef;
-        this.#splitViewMediaQuerySvc = splitViewMediaQuerySvc;
         this.#splitViewSvc = splitViewSvc;
         this.#windowRef = windowRef;
         this.splitViewDrawerId = `sky-split-view-drawer-${++skySplitViewNextId}`;
@@ -278,9 +190,6 @@ class SkySplitViewDrawerComponent {
             this.#changeDetectorRef.markForCheck();
         });
     }
-    ngAfterViewInit() {
-        this.#updateBreakpoint();
-    }
     ngOnDestroy() {
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
@@ -288,9 +197,6 @@ class SkySplitViewDrawerComponent {
     onResizeHandleMouseDown(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (this.#splitViewMediaQuerySvc.isWidthWithinBreakpoint(window.innerWidth, SkyMediaBreakpoints.xs)) {
-            return;
-        }
         this.#setMaxWidth();
         this.#isDragging = true;
         this.#xCoord = event.clientX;
@@ -344,32 +250,17 @@ class SkySplitViewDrawerComponent {
             this.width = window.innerWidth - this.widthTolerance;
         }
     }
-    #updateBreakpoint() {
-        this.#splitViewMediaQuerySvc.setBreakpointForWidth(this.width);
-        const newDrawerBreakpoint = this.#splitViewMediaQuerySvc.current;
-        this.#coreAdapterService.setResponsiveContainerClass(this.#elementRef, newDrawerBreakpoint);
-    }
     #setMaxWidth() {
         const splitView = this.#splitViewSvc.splitViewElementRef?.nativeElement.querySelector('.sky-split-view');
         this.widthMax = splitView.clientWidth - this.widthTolerance;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewDrawerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: SkySplitViewMediaQueryService }, { token: SkySplitViewService }, { token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkySplitViewDrawerComponent, selector: "sky-split-view-drawer", inputs: { ariaLabel: "ariaLabel", width: "width" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
-            {
-                provide: SkyMediaQueryService,
-                useExisting: SkySplitViewMediaQueryService,
-            },
-        ], ngImport: i0, template: "<div\n  class=\"sky-split-view-drawer\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\"\n  [id]=\"splitViewDrawerId\"\n  [style.width.px]=\"width\"\n>\n  <ng-content />\n  @if (!isMobile && width !== undefined) {\n    <input\n      aria-orientation=\"vertical\"\n      class=\"sky-split-view-resize-handle\"\n      step=\"10\"\n      type=\"range\"\n      [attr.aria-controls]=\"splitViewDrawerId\"\n      [attr.aria-label]=\"'skyux_split_view_resize_handle' | skyLibResources\"\n      [attr.aria-valuemax]=\"widthMax\"\n      [attr.aria-valuemin]=\"widthMin\"\n      [attr.aria-valuenow]=\"width\"\n      [attr.aria-valuetext]=\"width + ' pixels wide'\"\n      [max]=\"widthMax\"\n      [min]=\"widthMin\"\n      [style.left.px]=\"width - 7\"\n      [value]=\"width\"\n      (change)=\"onResizeHandleChange($event)\"\n      (mousedown)=\"onResizeHandleMouseDown($event)\"\n    />\n  }\n</div>\n", styles: [".sky-split-view-drawer{background:#fff;overflow:auto;height:100%;width:100%}@media (min-width: 768px){:host .sky-split-view-drawer{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer,:host-context(.sky-responsive-container-md) .sky-split-view-drawer,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer{border-right:1px solid #cdcfd2}.sky-split-view-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;z-index:999;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0}.sky-split-view-resize-handle::-moz-range-thumb,.sky-split-view-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-split-view-resize-handle::-ms-thumb,.sky-split-view-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-split-view-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}:host-context(.sky-theme-modern) .sky-split-view-drawer{background:transparent}:host-context(.sky-theme-modern) .sky-split-view-resize-handle{transition:box-shadow .15s}:host-context(.sky-theme-modern) .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}.sky-theme-modern .sky-split-view-drawer{background:transparent}.sky-theme-modern .sky-split-view-resize-handle{transition:box-shadow .15s}.sky-theme-modern .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}\n"], dependencies: [{ kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewDrawerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: SkySplitViewService }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkySplitViewDrawerComponent, isStandalone: true, selector: "sky-split-view-drawer", inputs: { ariaLabel: "ariaLabel", width: "width" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, ngImport: i0, template: "<div\n  class=\"sky-split-view-drawer\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\"\n  [id]=\"splitViewDrawerId\"\n  [style.width.px]=\"width\"\n>\n  <ng-content />\n  @if (!isMobile && width !== undefined) {\n    <input\n      aria-orientation=\"vertical\"\n      class=\"sky-split-view-resize-handle\"\n      step=\"10\"\n      type=\"range\"\n      [attr.aria-controls]=\"splitViewDrawerId\"\n      [attr.aria-label]=\"'skyux_split_view_resize_handle' | skyLibResources\"\n      [attr.aria-valuemax]=\"widthMax\"\n      [attr.aria-valuemin]=\"widthMin\"\n      [attr.aria-valuenow]=\"width\"\n      [attr.aria-valuetext]=\"width + ' pixels wide'\"\n      [max]=\"widthMax\"\n      [min]=\"widthMin\"\n      [style.left.px]=\"width - 7\"\n      [value]=\"width\"\n      (change)=\"onResizeHandleChange($event)\"\n      (mousedown)=\"onResizeHandleMouseDown($event)\"\n    />\n  }\n</div>\n", styles: [".sky-split-view-drawer{background:#fff;overflow:auto;height:100%;width:100%}@media (min-width: 768px){:host .sky-split-view-drawer{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer,:host-context(.sky-responsive-container-md) .sky-split-view-drawer,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer{border-right:1px solid #cdcfd2}.sky-split-view-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;z-index:999;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0}.sky-split-view-resize-handle::-moz-range-thumb,.sky-split-view-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-split-view-resize-handle::-ms-thumb,.sky-split-view-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-split-view-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}:host-context(.sky-theme-modern) .sky-split-view-drawer{background:transparent}:host-context(.sky-theme-modern) .sky-split-view-resize-handle{transition:box-shadow .15s}:host-context(.sky-theme-modern) .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}.sky-theme-modern .sky-split-view-drawer{background:transparent}.sky-theme-modern .sky-split-view-resize-handle{transition:box-shadow .15s}.sky-theme-modern .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkySplitViewResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-split-view-drawer', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkySplitViewMediaQueryService,
-                        },
-                    ], template: "<div\n  class=\"sky-split-view-drawer\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\"\n  [id]=\"splitViewDrawerId\"\n  [style.width.px]=\"width\"\n>\n  <ng-content />\n  @if (!isMobile && width !== undefined) {\n    <input\n      aria-orientation=\"vertical\"\n      class=\"sky-split-view-resize-handle\"\n      step=\"10\"\n      type=\"range\"\n      [attr.aria-controls]=\"splitViewDrawerId\"\n      [attr.aria-label]=\"'skyux_split_view_resize_handle' | skyLibResources\"\n      [attr.aria-valuemax]=\"widthMax\"\n      [attr.aria-valuemin]=\"widthMin\"\n      [attr.aria-valuenow]=\"width\"\n      [attr.aria-valuetext]=\"width + ' pixels wide'\"\n      [max]=\"widthMax\"\n      [min]=\"widthMin\"\n      [style.left.px]=\"width - 7\"\n      [value]=\"width\"\n      (change)=\"onResizeHandleChange($event)\"\n      (mousedown)=\"onResizeHandleMouseDown($event)\"\n    />\n  }\n</div>\n", styles: [".sky-split-view-drawer{background:#fff;overflow:auto;height:100%;width:100%}@media (min-width: 768px){:host .sky-split-view-drawer{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer,:host-context(.sky-responsive-container-md) .sky-split-view-drawer,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer{border-right:1px solid #cdcfd2}.sky-split-view-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;z-index:999;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0}.sky-split-view-resize-handle::-moz-range-thumb,.sky-split-view-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-split-view-resize-handle::-ms-thumb,.sky-split-view-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-split-view-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}:host-context(.sky-theme-modern) .sky-split-view-drawer{background:transparent}:host-context(.sky-theme-modern) .sky-split-view-resize-handle{transition:box-shadow .15s}:host-context(.sky-theme-modern) .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}.sky-theme-modern .sky-split-view-drawer{background:transparent}.sky-theme-modern .sky-split-view-resize-handle{transition:box-shadow .15s}.sky-theme-modern .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i0.ElementRef }, { type: SkySplitViewMediaQueryService }, { type: SkySplitViewService }, { type: i1.SkyAppWindowRef }], propDecorators: { ariaLabel: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, SkySplitViewResourcesModule], selector: 'sky-split-view-drawer', standalone: true, template: "<div\n  class=\"sky-split-view-drawer\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\"\n  [id]=\"splitViewDrawerId\"\n  [style.width.px]=\"width\"\n>\n  <ng-content />\n  @if (!isMobile && width !== undefined) {\n    <input\n      aria-orientation=\"vertical\"\n      class=\"sky-split-view-resize-handle\"\n      step=\"10\"\n      type=\"range\"\n      [attr.aria-controls]=\"splitViewDrawerId\"\n      [attr.aria-label]=\"'skyux_split_view_resize_handle' | skyLibResources\"\n      [attr.aria-valuemax]=\"widthMax\"\n      [attr.aria-valuemin]=\"widthMin\"\n      [attr.aria-valuenow]=\"width\"\n      [attr.aria-valuetext]=\"width + ' pixels wide'\"\n      [max]=\"widthMax\"\n      [min]=\"widthMin\"\n      [style.left.px]=\"width - 7\"\n      [value]=\"width\"\n      (change)=\"onResizeHandleChange($event)\"\n      (mousedown)=\"onResizeHandleMouseDown($event)\"\n    />\n  }\n</div>\n", styles: [".sky-split-view-drawer{background:#fff;overflow:auto;height:100%;width:100%}@media (min-width: 768px){:host .sky-split-view-drawer{border-right:1px solid #cdcfd2}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer,:host-context(.sky-responsive-container-md) .sky-split-view-drawer,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer{border-right:1px solid #cdcfd2}.sky-split-view-resize-handle{-webkit-appearance:none;-moz-appearance:none;height:100%;width:14px;position:absolute;z-index:999;cursor:ew-resize;padding:0;border:0;background:transparent;display:block;top:0;bottom:0}.sky-split-view-resize-handle::-moz-range-thumb,.sky-split-view-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-split-view-resize-handle::-ms-thumb,.sky-split-view-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-split-view-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}:host-context(.sky-theme-modern) .sky-split-view-drawer{background:transparent}:host-context(.sky-theme-modern) .sky-split-view-resize-handle{transition:box-shadow .15s}:host-context(.sky-theme-modern) .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}.sky-theme-modern .sky-split-view-drawer{background:transparent}.sky-theme-modern .sky-split-view-resize-handle{transition:box-shadow .15s}.sky-theme-modern .sky-split-view-resize-handle:focus{border:solid 2px #1870B8;box-shadow:0 1px 8px #0000004d;outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: SkySplitViewService }, { type: i1$1.SkyAppWindowRef }], propDecorators: { ariaLabel: [{
                 type: Input
             }], width: [{
                 type: Input
@@ -382,30 +273,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
  * Specifies the content to display in the split view's workspace panel.
  */
 class SkySplitViewWorkspaceContentComponent {
-    constructor() {
-        this.tabIndex = '0';
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewWorkspaceContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkySplitViewWorkspaceContentComponent, selector: "sky-split-view-workspace-content", host: { properties: { "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<div class=\"sky-split-view-workspace-content\">\n  <ng-content />\n</div>\n", styles: [":host{overflow:auto;flex-grow:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkySplitViewWorkspaceContentComponent, isStandalone: true, selector: "sky-split-view-workspace-content", host: { attributes: { "tabindex": "0" } }, hostDirectives: [{ directive: i1$1.SkyResponsiveHostDirective }], ngImport: i0, template: "<div class=\"sky-split-view-workspace-content\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;overflow:auto;flex-grow:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewWorkspaceContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-split-view-workspace-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-split-view-workspace-content\">\n  <ng-content />\n</div>\n", styles: [":host{overflow:auto;flex-grow:1}\n"] }]
-        }], propDecorators: { tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        tabindex: '0',
+                    }, hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-split-view-workspace-content', standalone: true, template: "<div class=\"sky-split-view-workspace-content\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;overflow:auto;flex-grow:1}\n"] }]
+        }] });
 
 /**
  * Specifies the footer to display in the split view's workspace panel. This component is often used with a summary action bar.
  */
 class SkySplitViewWorkspaceFooterComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewWorkspaceFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkySplitViewWorkspaceFooterComponent, selector: "sky-split-view-workspace-footer", ngImport: i0, template: "<div class=\"sky-split-view-workspace-footer\">\n  <ng-content />\n</div>\n", styles: [":host{flex-shrink:0}.sky-split-view-workspace-footer{padding:10px;box-shadow:0 -3px 3px #cdcfd2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkySplitViewWorkspaceFooterComponent, isStandalone: true, selector: "sky-split-view-workspace-footer", hostDirectives: [{ directive: i1$1.SkyResponsiveHostDirective }], ngImport: i0, template: "<div class=\"sky-split-view-workspace-footer\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;flex-shrink:0}.sky-split-view-workspace-footer{padding:10px;box-shadow:0 -3px 3px #cdcfd2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewWorkspaceFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-split-view-workspace-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-split-view-workspace-footer\">\n  <ng-content />\n</div>\n", styles: [":host{flex-shrink:0}.sky-split-view-workspace-footer{padding:10px;box-shadow:0 -3px 3px #cdcfd2}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-split-view-workspace-footer', standalone: true, template: "<div class=\"sky-split-view-workspace-footer\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;flex-shrink:0}.sky-split-view-workspace-footer{padding:10px;box-shadow:0 -3px 3px #cdcfd2}\n"] }]
         }] });
 
 /**
@@ -433,92 +320,31 @@ class SkySplitViewWorkspaceHeaderComponent {
         this.#ngUnsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewWorkspaceHeaderComponent, deps: [{ token: SkySplitViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkySplitViewWorkspaceHeaderComponent, selector: "sky-split-view-workspace-header", ngImport: i0, template: "<div class=\"sky-split-view-workspace-header\">\n  <div class=\"sky-split-view-workspace-header-content\">\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"onShowDrawerButtonClick()\"\n    >\n      <sky-icon icon=\"chevron-left\" />\n      {{ backButtonText }}\n    </button>\n  </div>\n</div>\n", styles: [".sky-split-view-workspace-header{display:flex;align-items:flex-start;justify-content:flex-end;border-bottom:1px solid #cdcfd2;padding:5px 0}.sky-split-view-workspace-header .sky-split-view-workspace-header-content{flex-grow:1}\n"], dependencies: [{ kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkySplitViewWorkspaceHeaderComponent, isStandalone: true, selector: "sky-split-view-workspace-header", ngImport: i0, template: "<div class=\"sky-split-view-workspace-header\">\n  <div class=\"sky-split-view-workspace-header-content\">\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"onShowDrawerButtonClick()\"\n    >\n      <sky-icon icon=\"chevron-left\" />\n      {{ backButtonText }}\n    </button>\n  </div>\n</div>\n", styles: [".sky-split-view-workspace-header{display:flex;align-items:flex-start;justify-content:flex-end;border-bottom:1px solid #cdcfd2;padding:5px 0}.sky-split-view-workspace-header .sky-split-view-workspace-header-content{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewWorkspaceHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-split-view-workspace-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-split-view-workspace-header\">\n  <div class=\"sky-split-view-workspace-header-content\">\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"onShowDrawerButtonClick()\"\n    >\n      <sky-icon icon=\"chevron-left\" />\n      {{ backButtonText }}\n    </button>\n  </div>\n</div>\n", styles: [".sky-split-view-workspace-header{display:flex;align-items:flex-start;justify-content:flex-end;border-bottom:1px solid #cdcfd2;padding:5px 0}.sky-split-view-workspace-header .sky-split-view-workspace-header-content{flex-grow:1}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyIconModule], selector: 'sky-split-view-workspace-header', standalone: true, template: "<div class=\"sky-split-view-workspace-header\">\n  <div class=\"sky-split-view-workspace-header-content\">\n    <button\n      class=\"sky-btn sky-btn-link\"\n      type=\"button\"\n      (click)=\"onShowDrawerButtonClick()\"\n    >\n      <sky-icon icon=\"chevron-left\" />\n      {{ backButtonText }}\n    </button>\n  </div>\n</div>\n", styles: [".sky-split-view-workspace-header{display:flex;align-items:flex-start;justify-content:flex-end;border-bottom:1px solid #cdcfd2;padding:5px 0}.sky-split-view-workspace-header .sky-split-view-workspace-header-content{flex-grow:1}\n"] }]
         }], ctorParameters: () => [{ type: SkySplitViewService }] });
 
 /**
  * Contains the content, footer, and header to display in the split view's workspace panel.
  */
 class SkySplitViewWorkspaceComponent {
-    set isMobile(value) {
-        this.#_isMobile = value;
-        this.#changeDetectorRef.markForCheck();
-    }
-    // Shows/hides the workspace header when the parent split view is in mobile responsive mode.
-    get isMobile() {
-        return this.#_isMobile;
-    }
-    #ngUnsubscribe;
-    #changeDetectorRef;
-    #coreAdapterSvc;
-    #elementRef;
-    #splitViewMediaQuerySvc;
-    #splitViewSvc;
-    #_isMobile;
-    constructor(changeDetectorRef, coreAdapterSvc, elementRef, splitViewMediaQuerySvc, splitViewSvc) {
-        this.showDrawerButtonClick = new EventEmitter();
-        this.#ngUnsubscribe = new Subject();
-        this.#changeDetectorRef = changeDetectorRef;
-        this.#coreAdapterSvc = coreAdapterSvc;
-        this.#elementRef = elementRef;
-        this.#splitViewMediaQuerySvc = splitViewMediaQuerySvc;
-        this.#splitViewSvc = splitViewSvc;
-    }
-    ngOnInit() {
-        this.#splitViewSvc.isMobileStream
-            .pipe(takeUntil(this.#ngUnsubscribe))
-            .subscribe((mobile) => {
-            this.isMobile = mobile;
-            this.#changeDetectorRef.markForCheck();
-        });
-    }
-    ngAfterViewInit() {
-        this.#splitViewSvc.drawerWidthStream
-            .pipe(takeUntil(this.#ngUnsubscribe))
-            .subscribe(() => {
-            this.#updateBreakpoint();
-        });
-    }
-    ngOnDestroy() {
-        this.showDrawerButtonClick.complete();
-        this.#ngUnsubscribe.next();
-        this.#ngUnsubscribe.complete();
-    }
-    onWindowResize() {
-        this.#updateBreakpoint();
-    }
-    #updateBreakpoint() {
-        const width = this.#elementRef.nativeElement.parentElement.clientWidth;
-        this.#splitViewMediaQuerySvc.setBreakpointForWidth(width);
-        const newDrawerBreakpoint = this.#splitViewMediaQuerySvc.current;
-        this.#coreAdapterSvc.setResponsiveContainerClass(this.#elementRef, newDrawerBreakpoint);
-        this.#changeDetectorRef.markForCheck();
+    constructor() {
+        // Use the parent's breakpoint since the mobile header should only appear when
+        // the split view container as a whole reaches the "xs" breakpoint, not just
+        // the workspace area.
+        this.breakpoint = toSignal(inject(SkyMediaQueryService, { skipSelf: true }).breakpointChange);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewWorkspaceComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: SkySplitViewMediaQueryService }, { token: SkySplitViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkySplitViewWorkspaceComponent, selector: "sky-split-view-workspace", inputs: { ariaLabel: "ariaLabel" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [
-            {
-                provide: SkyMediaQueryService,
-                useExisting: SkySplitViewMediaQueryService,
-            },
-        ], ngImport: i0, template: "<div\n  class=\"sky-split-view-workspace\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  @if (isMobile) {\n    <sky-split-view-workspace-header />\n  }\n  <ng-content select=\"sky-split-view-workspace-content\" />\n  <ng-content select=\"sky-split-view-workspace-footer\" />\n</div>\n", styles: [".sky-split-view-workspace{background:#fff;height:100%;display:flex;flex-direction:column}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-split-view-workspace{background-color:#121212;border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-split-view-workspace{background-color:#121212;border-color:#686c73}\n"], dependencies: [{ kind: "component", type: SkySplitViewWorkspaceHeaderComponent, selector: "sky-split-view-workspace-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewWorkspaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkySplitViewWorkspaceComponent, isStandalone: true, selector: "sky-split-view-workspace", inputs: { ariaLabel: "ariaLabel" }, ngImport: i0, template: "<div\n  class=\"sky-split-view-workspace\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  @if (breakpoint() === 'xs') {\n    <sky-split-view-workspace-header />\n  }\n  <ng-content select=\"sky-split-view-workspace-content\" />\n  <ng-content select=\"sky-split-view-workspace-footer\" />\n</div>\n", styles: [".sky-split-view-workspace{background:#fff;height:100%;display:flex;flex-direction:column}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-split-view-workspace{background-color:#121212;border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-split-view-workspace{background-color:#121212;border-color:#686c73}\n"], dependencies: [{ kind: "component", type: SkySplitViewWorkspaceHeaderComponent, selector: "sky-split-view-workspace-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewWorkspaceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-split-view-workspace', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: SkyMediaQueryService,
-                            useExisting: SkySplitViewMediaQueryService,
-                        },
-                    ], template: "<div\n  class=\"sky-split-view-workspace\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  @if (isMobile) {\n    <sky-split-view-workspace-header />\n  }\n  <ng-content select=\"sky-split-view-workspace-content\" />\n  <ng-content select=\"sky-split-view-workspace-footer\" />\n</div>\n", styles: [".sky-split-view-workspace{background:#fff;height:100%;display:flex;flex-direction:column}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-split-view-workspace{background-color:#121212;border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-split-view-workspace{background-color:#121212;border-color:#686c73}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i0.ElementRef }, { type: SkySplitViewMediaQueryService }, { type: SkySplitViewService }], propDecorators: { ariaLabel: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkySplitViewWorkspaceHeaderComponent], selector: 'sky-split-view-workspace', standalone: true, template: "<div\n  class=\"sky-split-view-workspace\"\n  role=\"region\"\n  tabindex=\"0\"\n  [attr.aria-label]=\"ariaLabel\"\n>\n  @if (breakpoint() === 'xs') {\n    <sky-split-view-workspace-header />\n  }\n  <ng-content select=\"sky-split-view-workspace-content\" />\n  <ng-content select=\"sky-split-view-workspace-footer\" />\n</div>\n", styles: [".sky-split-view-workspace{background:#fff;height:100%;display:flex;flex-direction:column}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-split-view-workspace{background-color:#121212;border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-split-view-workspace{background-color:#121212;border-color:#686c73}\n"] }]
+        }], propDecorators: { ariaLabel: [{
                 type: Input
-            }], onWindowResize: [{
-                type: HostListener,
-                args: ['window:resize']
             }] } });
 
 /**
@@ -575,12 +401,12 @@ class SkySplitViewAdapterService {
         this.#renderer.setStyle(splitViewElement, 'max-height', 'calc(100vh - ' + offsetTop + 'px - ' + marginBottom + ')');
         this.#renderer.setStyle(splitViewElement, 'min-height', '300px');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewAdapterService, deps: [{ token: i1.SkyMutationObserverService }, { token: i0.RendererFactory2 }, { token: i1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewAdapterService, deps: [{ token: i1$1.SkyMutationObserverService }, { token: i0.RendererFactory2 }, { token: i1$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewAdapterService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewAdapterService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.SkyMutationObserverService }, { type: i0.RendererFactory2 }, { type: i1.SkyAppWindowRef }] });
+        }], ctorParameters: () => [{ type: i1$1.SkyMutationObserverService }, { type: i0.RendererFactory2 }, { type: i1$1.SkyAppWindowRef }] });
 
 var SkySplitViewMessageType;
 (function (SkySplitViewMessageType) {
@@ -734,12 +560,8 @@ class SkySplitViewComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewComponent, deps: [{ token: SkySplitViewAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: SkySplitViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkySplitViewComponent, selector: "sky-split-view", inputs: { backButtonText: "backButtonText", bindHeightToWindow: "bindHeightToWindow", dock: "dock", messageStream: "messageStream" }, providers: [
-            SkySplitViewAdapterService,
-            SkySplitViewMediaQueryService,
-            SkySplitViewService,
-        ], queries: [{ propertyName: "drawerComponent", first: true, predicate: SkySplitViewDrawerComponent, descendants: true }], ngImport: i0, template: "<div\n  class=\"sky-split-view\"\n  [ngClass]=\"'sky-split-view-dock-' + dock\"\n  [@blockAnimationOnLoad]\n>\n  <div\n    class=\"sky-split-view-drawer-flex-container\"\n    [hidden]=\"!drawerVisible\"\n    [@drawerEnter]=\"drawerVisible\"\n  >\n    <ng-content select=\"sky-split-view-drawer\" />\n  </div>\n\n  <div\n    class=\"sky-split-view-workspace-flex-container\"\n    [hidden]=\"!workspaceVisible\"\n    [@workspaceEnter]=\"workspaceVisible\"\n    (@workspaceEnter.done)=\"onWorkspaceEnterComplete()\"\n  >\n    <ng-content select=\"sky-split-view-workspace\" />\n  </div>\n</div>\n", styles: [".sky-split-view{position:relative;display:flex;border:1px solid #cdcfd2;background:transparent;margin:var(--sky-layout-host-content-spacing, 0);max-height:100%}.sky-split-view .sky-split-view-workspace-flex-container{flex-grow:1;flex-shrink:99;overflow:auto}.sky-split-view-dock-fill{position:absolute;inset:0}:host .sky-split-view-drawer-flex-container{width:100%}:host-context(.sky-responsive-container-xs) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:100%}@media (min-width: 768px){:host .sky-split-view-drawer-flex-container{width:auto}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:auto}@media (min-width: 768px){:host :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host .sky-theme-modern .sky-split-view{border-left:none}}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-md) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host-context(.sky-responsive-container-sm) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-md) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-lg) .sky-theme-modern .sky-split-view{border-left:none}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewComponent, deps: [{ token: SkySplitViewAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: SkySplitViewService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkySplitViewComponent, isStandalone: true, selector: "sky-split-view", inputs: { backButtonText: "backButtonText", bindHeightToWindow: "bindHeightToWindow", dock: "dock", messageStream: "messageStream" }, providers: [SkySplitViewAdapterService, SkySplitViewService], queries: [{ propertyName: "drawerComponent", first: true, predicate: SkySplitViewDrawerComponent, descendants: true }], hostDirectives: [{ directive: i1$1.SkyResponsiveHostDirective }], ngImport: i0, template: "<div\n  class=\"sky-split-view\"\n  [ngClass]=\"'sky-split-view-dock-' + dock\"\n  [@blockAnimationOnLoad]\n>\n  <div\n    class=\"sky-split-view-drawer-flex-container\"\n    [hidden]=\"!drawerVisible\"\n    [@drawerEnter]=\"drawerVisible\"\n  >\n    <ng-content select=\"sky-split-view-drawer\" />\n  </div>\n\n  <div\n    class=\"sky-split-view-workspace-flex-container\"\n    [hidden]=\"!workspaceVisible\"\n    [@workspaceEnter]=\"workspaceVisible\"\n    (@workspaceEnter.done)=\"onWorkspaceEnterComplete()\"\n  >\n    <ng-content select=\"sky-split-view-workspace\" />\n  </div>\n</div>\n", styles: [":host{display:block}.sky-split-view{position:relative;display:flex;border:1px solid #cdcfd2;background:transparent;margin:var(--sky-layout-host-content-spacing, 0);max-height:100%}.sky-split-view .sky-split-view-workspace-flex-container{flex-grow:1;flex-shrink:99;overflow:auto}.sky-split-view-dock-fill{position:absolute;inset:0}:host .sky-split-view-drawer-flex-container{width:100%}:host-context(.sky-responsive-container-xs) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:100%}@media (min-width: 768px){:host .sky-split-view-drawer-flex-container{width:auto}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:auto}@media (min-width: 768px){:host :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host .sky-theme-modern .sky-split-view{border-left:none}}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-md) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host-context(.sky-responsive-container-sm) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-md) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-lg) .sky-theme-modern .sky-split-view{border-left:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('blockAnimationOnLoad', [transition(':enter', [])]),
             trigger('drawerEnter', [
                 state('false', style({ transform: 'translate(-100%)' })),
@@ -753,11 +575,7 @@ class SkySplitViewComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-split-view', providers: [
-                        SkySplitViewAdapterService,
-                        SkySplitViewMediaQueryService,
-                        SkySplitViewService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+            args: [{ animations: [
                         trigger('blockAnimationOnLoad', [transition(':enter', [])]),
                         trigger('drawerEnter', [
                             state('false', style({ transform: 'translate(-100%)' })),
@@ -767,8 +585,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             state('false', style({ transform: 'translate(100%)' })),
                             transition('* => true', animate('150ms ease-in')),
                         ]),
-                    ], template: "<div\n  class=\"sky-split-view\"\n  [ngClass]=\"'sky-split-view-dock-' + dock\"\n  [@blockAnimationOnLoad]\n>\n  <div\n    class=\"sky-split-view-drawer-flex-container\"\n    [hidden]=\"!drawerVisible\"\n    [@drawerEnter]=\"drawerVisible\"\n  >\n    <ng-content select=\"sky-split-view-drawer\" />\n  </div>\n\n  <div\n    class=\"sky-split-view-workspace-flex-container\"\n    [hidden]=\"!workspaceVisible\"\n    [@workspaceEnter]=\"workspaceVisible\"\n    (@workspaceEnter.done)=\"onWorkspaceEnterComplete()\"\n  >\n    <ng-content select=\"sky-split-view-workspace\" />\n  </div>\n</div>\n", styles: [".sky-split-view{position:relative;display:flex;border:1px solid #cdcfd2;background:transparent;margin:var(--sky-layout-host-content-spacing, 0);max-height:100%}.sky-split-view .sky-split-view-workspace-flex-container{flex-grow:1;flex-shrink:99;overflow:auto}.sky-split-view-dock-fill{position:absolute;inset:0}:host .sky-split-view-drawer-flex-container{width:100%}:host-context(.sky-responsive-container-xs) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:100%}@media (min-width: 768px){:host .sky-split-view-drawer-flex-container{width:auto}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:auto}@media (min-width: 768px){:host :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host .sky-theme-modern .sky-split-view{border-left:none}}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-md) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host-context(.sky-responsive-container-sm) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-md) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-lg) .sky-theme-modern .sky-split-view{border-left:none}\n"] }]
-        }], ctorParameters: () => [{ type: SkySplitViewAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i0.ElementRef }, { type: SkySplitViewService }], propDecorators: { backButtonText: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [SkyResponsiveHostDirective], imports: [CommonModule], providers: [SkySplitViewAdapterService, SkySplitViewService], selector: 'sky-split-view', standalone: true, template: "<div\n  class=\"sky-split-view\"\n  [ngClass]=\"'sky-split-view-dock-' + dock\"\n  [@blockAnimationOnLoad]\n>\n  <div\n    class=\"sky-split-view-drawer-flex-container\"\n    [hidden]=\"!drawerVisible\"\n    [@drawerEnter]=\"drawerVisible\"\n  >\n    <ng-content select=\"sky-split-view-drawer\" />\n  </div>\n\n  <div\n    class=\"sky-split-view-workspace-flex-container\"\n    [hidden]=\"!workspaceVisible\"\n    [@workspaceEnter]=\"workspaceVisible\"\n    (@workspaceEnter.done)=\"onWorkspaceEnterComplete()\"\n  >\n    <ng-content select=\"sky-split-view-workspace\" />\n  </div>\n</div>\n", styles: [":host{display:block}.sky-split-view{position:relative;display:flex;border:1px solid #cdcfd2;background:transparent;margin:var(--sky-layout-host-content-spacing, 0);max-height:100%}.sky-split-view .sky-split-view-workspace-flex-container{flex-grow:1;flex-shrink:99;overflow:auto}.sky-split-view-dock-fill{position:absolute;inset:0}:host .sky-split-view-drawer-flex-container{width:100%}:host-context(.sky-responsive-container-xs) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:100%}@media (min-width: 768px){:host .sky-split-view-drawer-flex-container{width:auto}}:host-context(.sky-responsive-container-sm) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-md) .sky-split-view-drawer-flex-container,:host-context(.sky-responsive-container-lg) .sky-split-view-drawer-flex-container{width:auto}@media (min-width: 768px){:host :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host .sky-theme-modern .sky-split-view{border-left:none}}:host-context(.sky-responsive-container-sm) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-md) :host-context(.sky-theme-modern) .sky-split-view,:host-context(.sky-responsive-container-lg) :host-context(.sky-theme-modern) .sky-split-view{border-left:none}:host-context(.sky-responsive-container-sm) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-md) .sky-theme-modern .sky-split-view,:host-context(.sky-responsive-container-lg) .sky-theme-modern .sky-split-view{border-left:none}\n"] }]
+        }], ctorParameters: () => [{ type: SkySplitViewAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: i0.ElementRef }, { type: SkySplitViewService }], propDecorators: { backButtonText: [{
                 type: Input
             }], bindHeightToWindow: [{
                 type: Input
@@ -783,29 +601,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 
 class SkySplitViewModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewModule, declarations: [SkySplitViewComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewModule, imports: [SkySplitViewComponent,
             SkySplitViewDrawerComponent,
             SkySplitViewWorkspaceComponent,
             SkySplitViewWorkspaceContentComponent,
             SkySplitViewWorkspaceFooterComponent,
-            SkySplitViewWorkspaceHeaderComponent], imports: [CommonModule,
-            SkyIconModule,
-            SkySplitViewResourcesModule,
-            SkyThemeModule], exports: [SkySplitViewComponent,
+            SkySplitViewWorkspaceHeaderComponent], exports: [SkySplitViewComponent,
             SkySplitViewDrawerComponent,
             SkySplitViewWorkspaceComponent,
             SkySplitViewWorkspaceContentComponent,
             SkySplitViewWorkspaceFooterComponent,
             SkySplitViewWorkspaceHeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewModule, imports: [CommonModule,
-            SkyIconModule,
-            SkySplitViewResourcesModule,
-            SkyThemeModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewModule, imports: [SkySplitViewComponent,
+            SkySplitViewDrawerComponent,
+            SkySplitViewWorkspaceComponent,
+            SkySplitViewWorkspaceHeaderComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkySplitViewModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
                         SkySplitViewComponent,
                         SkySplitViewDrawerComponent,
                         SkySplitViewWorkspaceComponent,
@@ -813,12 +628,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         SkySplitViewWorkspaceFooterComponent,
                         SkySplitViewWorkspaceHeaderComponent,
                     ],
-                    imports: [
-                        CommonModule,
-                        SkyIconModule,
-                        SkySplitViewResourcesModule,
-                        SkyThemeModule,
-                    ],
                     exports: [
                         SkySplitViewComponent,
                         SkySplitViewDrawerComponent,