@rt-tools/ui-kit-v2 0.33.0 → 0.34.0

package/fesm2022/rt-tools-ui-kit-v2-container.mjs

@@ -2,11 +2,12 @@ import { Overlay, ScrollStrategyOptions } from "@angular/cdk/overlay";
 import { TemplatePortal } from "@angular/cdk/portal";
 import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, Injector, RendererFactory2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, computed, contentChild, effect, inject, input, isSignal, output, signal, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, Injector, RendererFactory2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, effect, inject, input, isSignal, model, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
 import { outputToObservable, takeUntilDestroyed, toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { Subject, catchError, defer, exhaustMap, filter, finalize, map, merge, mergeMap, of, shareReplay, startWith, switchMap, take, takeUntil, tap } from "rxjs";
 import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
 import { BreakpointsService, NotificationBus, carryThemeScope, materialPresetClassesOf } from "@rt-tools/ui-kit-v2/core";
+import { RtResizeHandleComponent, clampWidth, listenTransitionEnd } from "@rt-tools/ui-kit-v2/drawer";
 import { RtToasterComponent } from "@rt-tools/ui-kit-v2/toast";
 import { ActivatedRoute, Router } from "@angular/router";
 import { ERtAsideCloseIntent, ERtAsideUnsavedOutcome, RtAsideUnsavedDialogComponent, resolveCloseIntent } from "@rt-tools/ui-kit-v2/aside";
@@ -266,8 +267,10 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ selector: "[rtContainerContent]" }]
 	}]
 });
-const ASIDE_TRANSITION_BUFFER_MS = 80;
 const BEM_BLOCK = "rt-container";
+const OVERLAY_OPEN_CLASS = "rt-aside-overlay--open";
+const RIGHT_MIN_WIDTH = 240;
+const RIGHT_MAX_WIDTH = 960;
 var RtContainerComponent = class RtContainerComponent {
 	#overlay;
 	#host;
@@ -278,6 +281,7 @@ var RtContainerComponent = class RtContainerComponent {
 	#window;
 	#rightOverlaySource;
 	#overlayRef;
+	#scrollBlocked;
 	#overlayRefSignal;
 	constructor() {
 		this.#overlay = inject(Overlay);
@@ -289,6 +293,7 @@ var RtContainerComponent = class RtContainerComponent {
 		this.#window = inject(DOCUMENT).defaultView;
 		this.#rightOverlaySource = new Subject();
 		this.#overlayRef = null;
+		this.#scrollBlocked = false;
 		this.#overlayRefSignal = signal(null, ...ngDevMode ? [{ debugName: "#overlayRefSignal" }] : /* istanbul ignore next */ []);
 		this.headerTpl = contentChild(RtContainerHeaderDirective, {
 			...ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {},
@@ -318,13 +323,41 @@ var RtContainerComponent = class RtContainerComponent {
 			...ngDevMode ? { debugName: "contentTpl" } : /* istanbul ignore next */ {},
 			read: TemplateRef
 		});
+		this.rightPaneTpl = viewChild("rightPane", {
+			...ngDevMode ? { debugName: "rightPaneTpl" } : /* istanbul ignore next */ {},
+			read: TemplateRef
+		});
+		this.rightCell = viewChild("rightCell", ...ngDevMode ? [{ debugName: "rightCell" }] : /* istanbul ignore next */ []);
+		this.rightResizing = signal(false, ...ngDevMode ? [{ debugName: "rightResizing" }] : /* istanbul ignore next */ []);
+		this.rightShownWidth = computed(() => {
+			const width = this.rightWidth();
+			return width === null ? null : clampWidth(width, this.rightMinWidth(), this.rightMaxWidth());
+		}, ...ngDevMode ? [{ debugName: "rightShownWidth" }] : /* istanbul ignore next */ []);
 		this.mobileLeftNav = input("keep", ...ngDevMode ? [{ debugName: "mobileLeftNav" }] : /* istanbul ignore next */ []);
 		this.height = input("auto", ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.rightMode = input("over", ...ngDevMode ? [{ debugName: "rightMode" }] : /* istanbul ignore next */ []);
+		this.rightBackdrop = input(true, {
+			...ngDevMode ? { debugName: "rightBackdrop" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.rightWidth = model(null, ...ngDevMode ? [{ debugName: "rightWidth" }] : /* istanbul ignore next */ []);
+		this.rightResizable = input(false, {
+			...ngDevMode ? { debugName: "rightResizable" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.rightMinWidth = input(RIGHT_MIN_WIDTH, {
+			...ngDevMode ? { debugName: "rightMinWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.rightMaxWidth = input(RIGHT_MAX_WIDTH, {
+			...ngDevMode ? { debugName: "rightMaxWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
 		this.backdropClick = output();
 		this.rightOpened = output();
 		this.rightClosed = output();
 		this.rightOpen = signal(false, ...ngDevMode ? [{ debugName: "rightOpen" }] : /* istanbul ignore next */ []);
-		this.rightOverlayReady = computed(() => this.#overlayRefSignal() !== null, ...ngDevMode ? [{ debugName: "rightOverlayReady" }] : /* istanbul ignore next */ []);
+		this.rightOverlayReady = computed(() => this.rightMode() === "side" ? this.rightSidenavTpl() !== void 0 : this.#overlayRefSignal() !== null, ...ngDevMode ? [{ debugName: "rightOverlayReady" }] : /* istanbul ignore next */ []);
 		const breakpoints = inject(BreakpointsService);
 		const destroyRef = inject(DestroyRef);
 		afterNextRender(() => {
@@ -337,11 +370,19 @@ var RtContainerComponent = class RtContainerComponent {
 		}))).pipe(takeUntil(overlayRef.detachments()))), takeUntilDestroyed()).subscribe((handleCloseIntent) => handleCloseIntent());
 		effect((onCleanup) => {
 			const tpl = this.rightSidenavTpl();
-			if (tpl === void 0 || this.#overlayRef !== null) return;
-			const overlayRef = this.#createRightOverlay(tpl);
+			const pane = this.rightPaneTpl();
+			const over = this.rightMode() === "over";
+			const backdrop = this.rightBackdrop();
+			if (tpl === void 0 || pane === void 0 || !over || this.#overlayRef !== null) return;
+			const overlayRef = this.#createRightOverlay(pane, backdrop);
 			this.#overlayRef = overlayRef;
 			this.#overlayRefSignal.set(overlayRef);
+			if (untracked(this.rightOpen)) {
+				this.#showOverlay(overlayRef);
+				this.#renderer.addClass(overlayRef.overlayElement, OVERLAY_OPEN_CLASS);
+			}
 			onCleanup(() => {
+				this.#setScrollBlocked(false);
 				overlayRef.dispose();
 				this.#overlayRef = null;
 				this.#overlayRefSignal.set(null);
@@ -349,49 +390,87 @@ var RtContainerComponent = class RtContainerComponent {
 		});
 	}
 	openRight() {
+		if (this.rightMode() === "side") {
+			this.#openSide();
+			return;
+		}
 		const overlayRef = this.#overlayRef;
 		if (overlayRef === null) return;
-		this.#blockScroll.enable();
-		carryThemeScope(overlayRef.overlayElement, this.#host.nativeElement);
-		this.#renderer.removeClass(overlayRef.overlayElement, "rt-aside-overlay--entering");
-		this.#renderer.removeClass(overlayRef.overlayElement, "rt-aside-overlay--leaving");
-		const backdropEl = overlayRef.backdropElement;
-		if (backdropEl !== null) {
-			this.#renderer.addClass(backdropEl, "rt-aside-backdrop--visible");
-			this.#renderer.removeStyle(backdropEl, "opacity");
-			this.#renderer.removeStyle(backdropEl, "pointer-events");
-		}
+		this.#showOverlay(overlayRef);
 		requestAnimationFrame(() => {
-			this.#renderer.addClass(overlayRef.overlayElement, "rt-aside-overlay--open");
-			this.#listenTransitionEnd(overlayRef, () => this.rightOpened.emit());
+			this.#renderer.addClass(overlayRef.overlayElement, OVERLAY_OPEN_CLASS);
+			listenTransitionEnd(this.#window, overlayRef.overlayElement, "transform", () => this.rightOpened.emit());
 		});
 		this.rightOpen.set(true);
 	}
 	closeRight() {
+		if (this.rightMode() === "side") {
+			this.#closeSide();
+			return;
+		}
 		const overlayRef = this.#overlayRef;
 		if (overlayRef === null || !this.rightOpen()) return;
-		this.#renderer.removeClass(overlayRef.overlayElement, "rt-aside-overlay--open");
+		this.#renderer.removeClass(overlayRef.overlayElement, OVERLAY_OPEN_CLASS);
 		this.#renderer.addClass(overlayRef.overlayElement, "rt-aside-overlay--leaving");
 		const backdropEl = overlayRef.backdropElement;
 		if (backdropEl !== null) this.#renderer.removeClass(backdropEl, "rt-aside-backdrop--visible");
-		this.#listenTransitionEnd(overlayRef, () => {
-			this.#blockScroll.disable();
+		listenTransitionEnd(this.#window, overlayRef.overlayElement, "transform", () => {
+			this.#setScrollBlocked(false);
 			this.#hideBackdrop(overlayRef);
 			this.rightOpen.set(false);
 			this.rightClosed.emit();
 		});
 	}
+	onRightWidth(width) {
+		this.rightWidth.set(width);
+	}
+	#openSide() {
+		if (this.rightOpen()) return;
+		this.rightOpen.set(true);
+		requestAnimationFrame(() => this.#afterSideTransition(() => this.rightOpened.emit()));
+	}
+	#closeSide() {
+		if (!this.rightOpen()) return;
+		this.rightOpen.set(false);
+		this.#afterSideTransition(() => this.rightClosed.emit());
+	}
+	#afterSideTransition(callback) {
+		const cell = this.rightCell()?.nativeElement;
+		if (cell === void 0) {
+			callback();
+			return;
+		}
+		listenTransitionEnd(this.#window, cell, "inline-size", callback);
+	}
+	#showOverlay(overlayRef) {
+		carryThemeScope(overlayRef.overlayElement, this.#host.nativeElement);
+		this.#renderer.removeClass(overlayRef.overlayElement, "rt-aside-overlay--entering");
+		this.#renderer.removeClass(overlayRef.overlayElement, "rt-aside-overlay--leaving");
+		const backdropEl = overlayRef.backdropElement;
+		if (backdropEl !== null) {
+			this.#setScrollBlocked(true);
+			this.#renderer.addClass(backdropEl, "rt-aside-backdrop--visible");
+			this.#renderer.removeStyle(backdropEl, "opacity");
+			this.#renderer.removeStyle(backdropEl, "pointer-events");
+		}
+	}
+	#setScrollBlocked(blocked) {
+		if (blocked === this.#scrollBlocked) return;
+		this.#scrollBlocked = blocked;
+		if (blocked) this.#blockScroll.enable();
+		else this.#blockScroll.disable();
+	}
 	#hideBackdrop(overlayRef) {
 		const backdropEl = overlayRef.backdropElement;
 		if (backdropEl === null) return;
 		this.#renderer.setStyle(backdropEl, "opacity", "0");
 		this.#renderer.setStyle(backdropEl, "pointer-events", "none");
 	}
-	#createRightOverlay(tpl) {
+	#createRightOverlay(tpl, hasBackdrop) {
 		const overlayConfig = {
 			positionStrategy: this.#overlay.position().global().right("0").top("0"),
+			hasBackdrop,
 			scrollStrategy: this.#overlay.scrollStrategies.noop(),
-			hasBackdrop: true,
 			backdropClass: "rt-aside-backdrop",
 			panelClass: [
 				"rt-aside-overlay",
@@ -408,37 +487,6 @@ var RtContainerComponent = class RtContainerComponent {
 		this.#rightOverlaySource.next(overlayRef);
 		return overlayRef;
 	}
-	#listenTransitionEnd(overlayRef, callback) {
-		const element = overlayRef.overlayElement;
-		const durationMs = this.#transitionDurationMs(element);
-		if (durationMs === 0) {
-			callback();
-			return;
-		}
-		let settled = false;
-		const handler = (event) => {
-			if (event.propertyName !== "transform" || settled) return;
-			settled = true;
-			element.removeEventListener("transitionend", handler);
-			callback();
-		};
-		element.addEventListener("transitionend", handler);
-		setTimeout(() => {
-			if (settled) return;
-			settled = true;
-			element.removeEventListener("transitionend", handler);
-			callback();
-		}, durationMs + ASIDE_TRANSITION_BUFFER_MS);
-	}
-	#transitionDurationMs(element) {
-		const durationCss = this.#window?.getComputedStyle(element).transitionDuration;
-		if (durationCss === void 0 || durationCss === "") return 0;
-		return durationCss.split(",").reduce((max, part) => {
-			const trimmed = part.trim();
-			const seconds = trimmed.endsWith("ms") ? Number.parseFloat(trimmed) / 1e3 : Number.parseFloat(trimmed);
-			return Number.isNaN(seconds) ? max : Math.max(max, seconds);
-		}, 0) * 1e3;
-	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
@@ -470,9 +518,52 @@ var RtContainerComponent = class RtContainerComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				rightMode: {
+					classPropertyName: "rightMode",
+					publicName: "rightMode",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rightBackdrop: {
+					classPropertyName: "rightBackdrop",
+					publicName: "rightBackdrop",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rightWidth: {
+					classPropertyName: "rightWidth",
+					publicName: "rightWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rightResizable: {
+					classPropertyName: "rightResizable",
+					publicName: "rightResizable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rightMinWidth: {
+					classPropertyName: "rightMinWidth",
+					publicName: "rightMinWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				rightMaxWidth: {
+					classPropertyName: "rightMaxWidth",
+					publicName: "rightMaxWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
+				rightWidth: "rightWidthChange",
 				backdropClick: "backdropClick",
 				rightOpened: "rightOpened",
 				rightClosed: "rightClosed"
@@ -480,7 +571,8 @@ var RtContainerComponent = class RtContainerComponent {
 			host: {
 				properties: {
 					"class.rt-container--mobile-left-bottom": "mobileLeftNav() === 'bottom'",
-					"class.rt-container--viewport": "height() === 'viewport'"
+					"class.rt-container--viewport": "height() === 'viewport'",
+					"class.rt-container--right-side": "rightMode() === 'side' && rightSidenavTpl() !== undefined"
 				},
 				classAttribute: "rt-container"
 			},
@@ -543,9 +635,23 @@ var RtContainerComponent = class RtContainerComponent {
 					isSignal: true
 				}
 			],
+			viewQueries: [{
+				propertyName: "rightPaneTpl",
+				first: true,
+				predicate: ["rightPane"],
+				descendants: true,
+				read: TemplateRef,
+				isSignal: true
+			}, {
+				propertyName: "rightCell",
+				first: true,
+				predicate: ["rightCell"],
+				descendants: true,
+				isSignal: true
+			}],
 			ngImport: i0,
-			template: "<ng-container rtBlock=\"rt-container\">\n    @if (headerTpl(); as tpl) {\n        <header rtElem=\"header\" qa-dataid=\"container-header\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </header>\n    }\n\n    @if (leftSidenavTpl(); as tpl) {\n        <aside rtElem=\"left-sidenav\" qa-dataid=\"container-left-sidenav\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </aside>\n    }\n\n    @if (toolbarLeftTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"left\" [rtMod]=\"{ slot: 'left' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarCenterTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"center\" [rtMod]=\"{ slot: 'center' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarRightTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"right\" [rtMod]=\"{ slot: 'right' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (contentTpl(); as tpl) {\n        <main rtElem=\"content\" qa-dataid=\"container-content\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </main>\n    }\n\n    <rt-toaster position=\"bottom-center\" />\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{:root{--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 5px}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);transition:opacity var(--rt-aside-animation-duration) ease}:is(.rt-preset-material,[data-preset=material]).cdk-overlay-backdrop.rt-aside-backdrop,[data-preset=material] .cdk-overlay-backdrop.rt-aside-backdrop{--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 0}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}}.cdk-overlay-backdrop.rt-aside-backdrop{opacity:0;pointer-events:none}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}@layer rt-kit.components{.rt-container{--rt-container-border-width: var(--rt-border-width-thin);display:grid;min-height:100%;flex:1 1 auto;background-color:var(--rt-color-bg-page);color:var(--rt-color-text-primary);container:rt-place/inline-size;grid-template:\"header header\" auto \"left-sidenav toolbar\" auto \"left-sidenav content\" 1fr/auto 1fr}.rt-container__header{position:sticky;z-index:1;top:0;display:block;grid-area:header}.rt-container__header>.rt-page-header{margin:var(--rt-space-5) var(--rt-space-5) 0}.rt-container__left-sidenav{display:block;padding:var(--rt-space-md);border-right:var(--rt-container-border-width) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface);grid-area:left-sidenav}.rt-container__toolbar{display:flex;align-items:center;padding:var(--rt-space-sm) var(--rt-space-md);border-bottom:var(--rt-container-border-width) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface);grid-area:toolbar}.rt-container__toolbar--slot--left{justify-content:flex-start}.rt-container__toolbar--slot--center{justify-content:center}.rt-container__toolbar--slot--right{justify-content:flex-end}.rt-container__content{display:flex;overflow:auto;min-height:0;flex-direction:column;grid-area:content}.rt-container--viewport{block-size:100dvh;min-block-size:0}.rt-container--viewport .rt-container__content{overflow:hidden}.rt-container--viewport .rt-container__left-sidenav{overflow:auto}@media(width<=768px){.rt-container--mobile-left-bottom{grid-template:\"header\" auto \"toolbar\" auto \"content\" 1fr \"left-sidenav\" auto/1fr}.rt-container--mobile-left-bottom .rt-container__left-sidenav{padding:0;border-top:var(--rt-container-border-width) solid var(--rt-color-border-subtle);border-right:none}}}\n"],
+			template: "<ng-container rtBlock=\"rt-container\">\n    @if (headerTpl(); as tpl) {\n        <header rtElem=\"header\" qa-dataid=\"container-header\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </header>\n    }\n\n    @if (leftSidenavTpl(); as tpl) {\n        <aside rtElem=\"left-sidenav\" qa-dataid=\"container-left-sidenav\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </aside>\n    }\n\n    @if (toolbarLeftTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"left\" [rtMod]=\"{ slot: 'left' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarCenterTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"center\" [rtMod]=\"{ slot: 'center' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarRightTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"right\" [rtMod]=\"{ slot: 'right' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (contentTpl(); as tpl) {\n        <main rtElem=\"content\" qa-dataid=\"container-content\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </main>\n    }\n\n    @if (rightSidenavTpl() !== undefined && rightMode() === 'side') {\n        <aside\n            #rightCell\n            rtElem=\"right-sidenav\"\n            qa-dataid=\"container-right-sidenav\"\n            [rtMod]=\"{ open: rightOpen(), resizing: rightResizing() }\"\n            [attr.inert]=\"rightOpen() ? null : ''\"\n            [style.--rt-container-right-width.px]=\"rightShownWidth()\">\n            <ng-container [ngTemplateOutlet]=\"rightPane\" />\n        </aside>\n    }\n\n    <rt-toaster position=\"bottom-center\" />\n\n    <!-- Правая панель с шириной и ручкой: одна разметка для оверлея и для колонки рядом с содержимым. -->\n    <ng-template #rightPane>\n        <div\n            rtElem=\"right-pane\"\n            qa-dataid=\"container-right-pane\"\n            [rtMod]=\"{ sized: rightShownWidth() !== null }\"\n            [style.--rt-container-right-width.px]=\"rightShownWidth()\">\n            @if (rightSidenavTpl(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl\" />\n            }\n\n            @if (rightResizable()) {\n                <rt-resize-handle\n                    edge=\"start\"\n                    [width]=\"rightShownWidth()\"\n                    [min]=\"rightMinWidth()\"\n                    [max]=\"rightMaxWidth()\"\n                    (widthChange)=\"onRightWidth($event)\"\n                    (resizing)=\"rightResizing.set($event)\" />\n            }\n        </div>\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{:root{--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 5px}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);transition:opacity var(--rt-aside-animation-duration) ease}:is(.rt-preset-material,[data-preset=material]).cdk-overlay-backdrop.rt-aside-backdrop,[data-preset=material] .cdk-overlay-backdrop.rt-aside-backdrop{--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 0}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}}.cdk-overlay-backdrop.rt-aside-backdrop{opacity:0;pointer-events:none}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}@layer rt-kit.components{.rt-container{--rt-container-border-width: var(--rt-border-width-thin);--rt-container-right-duration: var(--rt-duration-base);display:grid;min-height:100%;flex:1 1 auto;background-color:var(--rt-color-bg-page);color:var(--rt-color-text-primary);container:rt-place/inline-size;grid-template:\"header header header\" auto \"left-sidenav toolbar right-sidenav\" auto \"left-sidenav content right-sidenav\" 1fr/auto 1fr auto}.rt-container__header{position:sticky;z-index:1;top:0;display:block;grid-area:header}.rt-container__header>.rt-page-header{margin:var(--rt-space-5) var(--rt-space-5) 0}.rt-container__left-sidenav{display:block;padding:var(--rt-space-md);border-right:var(--rt-container-border-width) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface);grid-area:left-sidenav}.rt-container__toolbar{display:flex;align-items:center;padding:var(--rt-space-sm) var(--rt-space-md);border-bottom:var(--rt-container-border-width) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface);grid-area:toolbar}.rt-container__toolbar--slot--left{justify-content:flex-start}.rt-container__toolbar--slot--center{justify-content:center}.rt-container__toolbar--slot--right{justify-content:flex-end}.rt-container__content{display:flex;overflow:auto;min-height:0;flex-direction:column;grid-area:content}.rt-container__right-sidenav{--rt-container-right-width: auto;display:flex;overflow:clip;min-height:0;border-left:var(--rt-container-border-width) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface);grid-area:right-sidenav;inline-size:var(--rt-container-right-width);transition:inline-size var(--rt-container-right-duration) ease,visibility 0s linear}.rt-container__right-sidenav:not(.rt-container__right-sidenav--open){border-left-width:0;inline-size:0;transition:inline-size var(--rt-container-right-duration) ease,visibility 0s linear var(--rt-container-right-duration);visibility:hidden}.rt-container__right-sidenav--resizing{transition:none}.rt-container__right-pane{--rt-container-right-width: auto;position:relative;display:flex;overflow:auto;min-height:0;flex:0 0 auto;block-size:100%}.rt-container__right-pane>:not(rt-resize-handle){min-width:0;flex:1 1 auto}.rt-container__right-pane--sized{inline-size:var(--rt-container-right-width)}.cdk-overlay-pane>.rt-container__right-pane{flex-shrink:1}.rt-container--viewport{block-size:100dvh;min-block-size:0}.rt-container--viewport .rt-container__content{overflow:hidden}.rt-container--viewport .rt-container__left-sidenav{overflow:auto}@media(prefers-reduced-motion:reduce){.rt-container__right-sidenav,.rt-container__right-sidenav:not(.rt-container__right-sidenav--open){transition:none}}@media(width<=768px){.rt-container__right-sidenav{grid-column:content;grid-row:toolbar/content;inline-size:auto}.rt-container__right-sidenav .rt-container__right-pane--sized,.cdk-overlay-pane>.rt-container__right-pane--sized{inline-size:100%}.rt-container--mobile-left-bottom{grid-template:\"header\" auto \"toolbar\" auto \"content\" 1fr \"left-sidenav\" auto/1fr}.rt-container--mobile-left-bottom .rt-container__left-sidenav{padding:0;border-top:var(--rt-container-border-width) solid var(--rt-color-border-subtle);border-right:none}}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -566,9 +672,24 @@ var RtContainerComponent = class RtContainerComponent {
 						"duration",
 						"visibleToasts",
 						"mode",
-						"expand"
+						"expand",
+						"channel"
 					]
 				},
+				{
+					kind: "component",
+					type: RtResizeHandleComponent,
+					selector: "rt-resize-handle",
+					inputs: [
+						"width",
+						"min",
+						"max",
+						"step",
+						"edge",
+						"ariaLabel"
+					],
+					outputs: ["widthChange", "resizing"]
+				},
 				{
 					kind: "directive",
 					type: BlockDirective,
@@ -606,6 +727,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				NgTemplateOutlet,
 				RtToasterComponent,
+				RtResizeHandleComponent,
 				BlockDirective,
 				ElemDirective,
 				ModDirective
@@ -614,10 +736,11 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				class: BEM_BLOCK,
 				"[class.rt-container--mobile-left-bottom]": "mobileLeftNav() === 'bottom'",
-				"[class.rt-container--viewport]": "height() === 'viewport'"
+				"[class.rt-container--viewport]": "height() === 'viewport'",
+				"[class.rt-container--right-side]": "rightMode() === 'side' && rightSidenavTpl() !== undefined"
 			},
-			template: "<ng-container rtBlock=\"rt-container\">\n    @if (headerTpl(); as tpl) {\n        <header rtElem=\"header\" qa-dataid=\"container-header\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </header>\n    }\n\n    @if (leftSidenavTpl(); as tpl) {\n        <aside rtElem=\"left-sidenav\" qa-dataid=\"container-left-sidenav\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </aside>\n    }\n\n    @if (toolbarLeftTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"left\" [rtMod]=\"{ slot: 'left' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarCenterTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"center\" [rtMod]=\"{ slot: 'center' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarRightTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"right\" [rtMod]=\"{ slot: 'right' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (contentTpl(); as tpl) {\n        <main rtElem=\"content\" qa-dataid=\"container-content\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </main>\n    }\n\n    <rt-toaster position=\"bottom-center\" />\n</ng-container>\n",
-			styles: ["@charset \"UTF-8\";@layer rt-kit.components{:root{--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 5px}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);transition:opacity var(--rt-aside-animation-duration) ease}:is(.rt-preset-material,[data-preset=material]).cdk-overlay-backdrop.rt-aside-backdrop,[data-preset=material] .cdk-overlay-backdrop.rt-aside-backdrop{--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 0}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}}.cdk-overlay-backdrop.rt-aside-backdrop{opacity:0;pointer-events:none}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}@layer rt-kit.components{.rt-container{--rt-container-border-width: var(--rt-border-width-thin);display:grid;min-height:100%;flex:1 1 auto;background-color:var(--rt-color-bg-page);color:var(--rt-color-text-primary);container:rt-place/inline-size;grid-template:\"header header\" auto \"left-sidenav toolbar\" auto \"left-sidenav content\" 1fr/auto 1fr}.rt-container__header{position:sticky;z-index:1;top:0;display:block;grid-area:header}.rt-container__header>.rt-page-header{margin:var(--rt-space-5) var(--rt-space-5) 0}.rt-container__left-sidenav{display:block;padding:var(--rt-space-md);border-right:var(--rt-container-border-width) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface);grid-area:left-sidenav}.rt-container__toolbar{display:flex;align-items:center;padding:var(--rt-space-sm) var(--rt-space-md);border-bottom:var(--rt-container-border-width) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface);grid-area:toolbar}.rt-container__toolbar--slot--left{justify-content:flex-start}.rt-container__toolbar--slot--center{justify-content:center}.rt-container__toolbar--slot--right{justify-content:flex-end}.rt-container__content{display:flex;overflow:auto;min-height:0;flex-direction:column;grid-area:content}.rt-container--viewport{block-size:100dvh;min-block-size:0}.rt-container--viewport .rt-container__content{overflow:hidden}.rt-container--viewport .rt-container__left-sidenav{overflow:auto}@media(width<=768px){.rt-container--mobile-left-bottom{grid-template:\"header\" auto \"toolbar\" auto \"content\" 1fr \"left-sidenav\" auto/1fr}.rt-container--mobile-left-bottom .rt-container__left-sidenav{padding:0;border-top:var(--rt-container-border-width) solid var(--rt-color-border-subtle);border-right:none}}}\n"]
+			template: "<ng-container rtBlock=\"rt-container\">\n    @if (headerTpl(); as tpl) {\n        <header rtElem=\"header\" qa-dataid=\"container-header\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </header>\n    }\n\n    @if (leftSidenavTpl(); as tpl) {\n        <aside rtElem=\"left-sidenav\" qa-dataid=\"container-left-sidenav\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </aside>\n    }\n\n    @if (toolbarLeftTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"left\" [rtMod]=\"{ slot: 'left' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarCenterTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"center\" [rtMod]=\"{ slot: 'center' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (toolbarRightTpl(); as tpl) {\n        <div rtElem=\"toolbar\" qa-dataid=\"container-toolbar\" data-slot=\"right\" [rtMod]=\"{ slot: 'right' }\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </div>\n    }\n\n    @if (contentTpl(); as tpl) {\n        <main rtElem=\"content\" qa-dataid=\"container-content\">\n            <ng-container [ngTemplateOutlet]=\"tpl\" />\n        </main>\n    }\n\n    @if (rightSidenavTpl() !== undefined && rightMode() === 'side') {\n        <aside\n            #rightCell\n            rtElem=\"right-sidenav\"\n            qa-dataid=\"container-right-sidenav\"\n            [rtMod]=\"{ open: rightOpen(), resizing: rightResizing() }\"\n            [attr.inert]=\"rightOpen() ? null : ''\"\n            [style.--rt-container-right-width.px]=\"rightShownWidth()\">\n            <ng-container [ngTemplateOutlet]=\"rightPane\" />\n        </aside>\n    }\n\n    <rt-toaster position=\"bottom-center\" />\n\n    <!-- Правая панель с шириной и ручкой: одна разметка для оверлея и для колонки рядом с содержимым. -->\n    <ng-template #rightPane>\n        <div\n            rtElem=\"right-pane\"\n            qa-dataid=\"container-right-pane\"\n            [rtMod]=\"{ sized: rightShownWidth() !== null }\"\n            [style.--rt-container-right-width.px]=\"rightShownWidth()\">\n            @if (rightSidenavTpl(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl\" />\n            }\n\n            @if (rightResizable()) {\n                <rt-resize-handle\n                    edge=\"start\"\n                    [width]=\"rightShownWidth()\"\n                    [min]=\"rightMinWidth()\"\n                    [max]=\"rightMaxWidth()\"\n                    (widthChange)=\"onRightWidth($event)\"\n                    (resizing)=\"rightResizing.set($event)\" />\n            }\n        </div>\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{:root{--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 5px}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);transition:opacity var(--rt-aside-animation-duration) ease}:is(.rt-preset-material,[data-preset=material]).cdk-overlay-backdrop.rt-aside-backdrop,[data-preset=material] .cdk-overlay-backdrop.rt-aside-backdrop{--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 0}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}}.cdk-overlay-backdrop.rt-aside-backdrop{opacity:0;pointer-events:none}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}@layer rt-kit.components{.rt-container{--rt-container-border-width: var(--rt-border-width-thin);--rt-container-right-duration: var(--rt-duration-base);display:grid;min-height:100%;flex:1 1 auto;background-color:var(--rt-color-bg-page);color:var(--rt-color-text-primary);container:rt-place/inline-size;grid-template:\"header header header\" auto \"left-sidenav toolbar right-sidenav\" auto \"left-sidenav content right-sidenav\" 1fr/auto 1fr auto}.rt-container__header{position:sticky;z-index:1;top:0;display:block;grid-area:header}.rt-container__header>.rt-page-header{margin:var(--rt-space-5) var(--rt-space-5) 0}.rt-container__left-sidenav{display:block;padding:var(--rt-space-md);border-right:var(--rt-container-border-width) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface);grid-area:left-sidenav}.rt-container__toolbar{display:flex;align-items:center;padding:var(--rt-space-sm) var(--rt-space-md);border-bottom:var(--rt-container-border-width) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface);grid-area:toolbar}.rt-container__toolbar--slot--left{justify-content:flex-start}.rt-container__toolbar--slot--center{justify-content:center}.rt-container__toolbar--slot--right{justify-content:flex-end}.rt-container__content{display:flex;overflow:auto;min-height:0;flex-direction:column;grid-area:content}.rt-container__right-sidenav{--rt-container-right-width: auto;display:flex;overflow:clip;min-height:0;border-left:var(--rt-container-border-width) solid var(--rt-color-border-subtle);background-color:var(--rt-color-bg-surface);grid-area:right-sidenav;inline-size:var(--rt-container-right-width);transition:inline-size var(--rt-container-right-duration) ease,visibility 0s linear}.rt-container__right-sidenav:not(.rt-container__right-sidenav--open){border-left-width:0;inline-size:0;transition:inline-size var(--rt-container-right-duration) ease,visibility 0s linear var(--rt-container-right-duration);visibility:hidden}.rt-container__right-sidenav--resizing{transition:none}.rt-container__right-pane{--rt-container-right-width: auto;position:relative;display:flex;overflow:auto;min-height:0;flex:0 0 auto;block-size:100%}.rt-container__right-pane>:not(rt-resize-handle){min-width:0;flex:1 1 auto}.rt-container__right-pane--sized{inline-size:var(--rt-container-right-width)}.cdk-overlay-pane>.rt-container__right-pane{flex-shrink:1}.rt-container--viewport{block-size:100dvh;min-block-size:0}.rt-container--viewport .rt-container__content{overflow:hidden}.rt-container--viewport .rt-container__left-sidenav{overflow:auto}@media(prefers-reduced-motion:reduce){.rt-container__right-sidenav,.rt-container__right-sidenav:not(.rt-container__right-sidenav--open){transition:none}}@media(width<=768px){.rt-container__right-sidenav{grid-column:content;grid-row:toolbar/content;inline-size:auto}.rt-container__right-sidenav .rt-container__right-pane--sized,.cdk-overlay-pane>.rt-container__right-pane--sized{inline-size:100%}.rt-container--mobile-left-bottom{grid-template:\"header\" auto \"toolbar\" auto \"content\" 1fr \"left-sidenav\" auto/1fr}.rt-container--mobile-left-bottom .rt-container__left-sidenav{padding:0;border-top:var(--rt-container-border-width) solid var(--rt-color-border-subtle);border-right:none}}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -671,6 +794,17 @@ i0.ɵɵngDeclareClassMetadata({
 				isSignal: true
 			}]
 		}],
+		rightPaneTpl: [{
+			type: i0.ViewChild,
+			args: ["rightPane", {
+				read: TemplateRef,
+				isSignal: true
+			}]
+		}],
+		rightCell: [{
+			type: i0.ViewChild,
+			args: ["rightCell", { isSignal: true }]
+		}],
 		mobileLeftNav: [{
 			type: i0.Input,
 			args: [{
@@ -687,6 +821,57 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		rightMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rightMode",
+				required: false
+			}]
+		}],
+		rightBackdrop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rightBackdrop",
+				required: false
+			}]
+		}],
+		rightWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rightWidth",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["rightWidthChange"]
+		}],
+		rightResizable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rightResizable",
+				required: false
+			}]
+		}],
+		rightMinWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rightMinWidth",
+				required: false
+			}]
+		}],
+		rightMaxWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rightMaxWidth",
+				required: false
+			}]
+		}],
 		backdropClick: [{
 			type: i0.Output,
 			args: ["backdropClick"]