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

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

@@ -0,0 +1,854 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, computed, effect, inject, input, model, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
+import { CdkTrapFocus, FocusTrapFactory } from "@angular/cdk/a11y";
+import { DOCUMENT } from "@angular/common";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+const FOCUS_PANEL = "";
+const FOCUS_FLAGS = /* @__PURE__ */ new Map([
+	["", true],
+	["true", true],
+	["false", false]
+]);
+function autoFocusTarget(value, over) {
+	if (typeof value === "string" && !FOCUS_FLAGS.has(value)) return value;
+	return (typeof value === "string" ? FOCUS_FLAGS.get(value) === true : value ?? true) && over ? "" : null;
+}
+function clampWidth(width, min, max) {
+	return Math.min(Math.max(width, min), Math.max(min, max));
+}
+const BEM_BLOCK$2 = "rt-resize-handle";
+const DEFAULT_STEP = 16;
+var RtResizeHandleComponent = class RtResizeHandleComponent {
+	constructor() {
+		this.#host = inject(ElementRef).nativeElement;
+		this.#start = null;
+		this.dragging = signal(false, ...ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []);
+		this.width = input(null, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.min = input(0, {
+			...ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.max = input(Number.MAX_SAFE_INTEGER, {
+			...ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.step = input(DEFAULT_STEP, {
+			...ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.edge = input("end", ...ngDevMode ? [{ debugName: "edge" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.widthChange = output();
+		this.resizing = output();
+	}
+	#host;
+	#start;
+	startDrag(event) {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		this.#host.setPointerCapture?.(event.pointerId);
+		this.#start = {
+			pointerId: event.pointerId,
+			x: event.clientX,
+			width: this.#currentWidth()
+		};
+		this.dragging.set(true);
+		this.resizing.emit(true);
+	}
+	drag(event) {
+		const start = this.#start;
+		if (start === null || start.pointerId !== event.pointerId) return;
+		const shift = event.clientX - start.x;
+		this.#report(start.width + (this.edge() === "start" ? -shift : shift));
+	}
+	endDrag(event) {
+		if (this.#start === null || this.#start.pointerId !== event.pointerId) return;
+		this.#host.releasePointerCapture?.(event.pointerId);
+		this.#start = null;
+		this.dragging.set(false);
+		this.resizing.emit(false);
+	}
+	onLostCapture(event) {
+		this.endDrag(event);
+	}
+	onKeydown(event) {
+		const target = this.#keyTarget(event.key);
+		if (target === null) return;
+		event.preventDefault();
+		this.#report(target);
+	}
+	#keyTarget(key) {
+		const grow = this.edge() === "start" ? "ArrowLeft" : "ArrowRight";
+		const shrink = this.edge() === "start" ? "ArrowRight" : "ArrowLeft";
+		switch (key) {
+			case grow: return this.#currentWidth() + this.step();
+			case shrink: return this.#currentWidth() - this.step();
+			case "Home": return this.min();
+			case "End": return this.max();
+			default: return null;
+		}
+	}
+	#report(width) {
+		const next = Math.round(clampWidth(width, this.min(), this.max()));
+		if (next !== this.width()) this.widthChange.emit(next);
+	}
+	#currentWidth() {
+		return this.width() ?? this.#host.parentElement?.getBoundingClientRect().width ?? this.min();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtResizeHandleComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtResizeHandleComponent,
+			isStandalone: true,
+			selector: "rt-resize-handle",
+			inputs: {
+				width: {
+					classPropertyName: "width",
+					publicName: "width",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				min: {
+					classPropertyName: "min",
+					publicName: "min",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				max: {
+					classPropertyName: "max",
+					publicName: "max",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				step: {
+					classPropertyName: "step",
+					publicName: "step",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				edge: {
+					classPropertyName: "edge",
+					publicName: "edge",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				widthChange: "widthChange",
+				resizing: "resizing"
+			},
+			host: {
+				attributes: {
+					"role": "separator",
+					"tabindex": "0",
+					"qa-dataid": "resize-handle",
+					"aria-orientation": "vertical"
+				},
+				listeners: {
+					"pointerdown": "startDrag($event)",
+					"pointermove": "drag($event)",
+					"pointerup": "endDrag($event)",
+					"pointercancel": "endDrag($event)",
+					"lostpointercapture": "onLostCapture($event)",
+					"keydown": "onKeydown($event)"
+				},
+				properties: {
+					"attr.aria-valuenow": "width()",
+					"attr.aria-valuemin": "min()",
+					"attr.aria-valuemax": "max()",
+					"attr.aria-label": "ariaLabel()",
+					"class.rt-resize-handle--edge--start": "edge() === 'start'",
+					"class.rt-resize-handle--edge--end": "edge() === 'end'",
+					"class.rt-resize-handle--dragging": "dragging()"
+				},
+				classAttribute: "rt-resize-handle"
+			},
+			ngImport: i0,
+			template: "",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-resize-handle{--rt-resize-handle-hit: var(--rt-space-2);--rt-resize-handle-line: var(--rt-border-width-medium);--rt-resize-handle-color: var(--rt-color-action-primary);--rt-resize-handle-duration: var(--rt-duration-fast);position:absolute;width:var(--rt-resize-handle-hit);cursor:col-resize;inset-block:0;outline:none;touch-action:none}.rt-resize-handle:after{position:absolute;width:var(--rt-resize-handle-line);background-color:transparent;content:\"\";inset-block:0;inset-inline-start:calc(50% - var(--rt-resize-handle-line) / 2);transition:background-color var(--rt-resize-handle-duration) ease}.rt-resize-handle:hover:after,.rt-resize-handle:focus-visible:after,.rt-resize-handle--dragging:after{background-color:var(--rt-resize-handle-color)}.rt-resize-handle--edge--start{inset-inline-start:0}.rt-resize-handle--edge--end{inset-inline-end:0}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtResizeHandleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-resize-handle",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: BEM_BLOCK$2,
+				role: "separator",
+				tabindex: "0",
+				"qa-dataid": "resize-handle",
+				"aria-orientation": "vertical",
+				"[attr.aria-valuenow]": "width()",
+				"[attr.aria-valuemin]": "min()",
+				"[attr.aria-valuemax]": "max()",
+				"[attr.aria-label]": "ariaLabel()",
+				"[class.rt-resize-handle--edge--start]": "edge() === 'start'",
+				"[class.rt-resize-handle--edge--end]": "edge() === 'end'",
+				"[class.rt-resize-handle--dragging]": "dragging()",
+				"(pointerdown)": "startDrag($event)",
+				"(pointermove)": "drag($event)",
+				"(pointerup)": "endDrag($event)",
+				"(pointercancel)": "endDrag($event)",
+				"(lostpointercapture)": "onLostCapture($event)",
+				"(keydown)": "onKeydown($event)"
+			},
+			template: "",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-resize-handle{--rt-resize-handle-hit: var(--rt-space-2);--rt-resize-handle-line: var(--rt-border-width-medium);--rt-resize-handle-color: var(--rt-color-action-primary);--rt-resize-handle-duration: var(--rt-duration-fast);position:absolute;width:var(--rt-resize-handle-hit);cursor:col-resize;inset-block:0;outline:none;touch-action:none}.rt-resize-handle:after{position:absolute;width:var(--rt-resize-handle-line);background-color:transparent;content:\"\";inset-block:0;inset-inline-start:calc(50% - var(--rt-resize-handle-line) / 2);transition:background-color var(--rt-resize-handle-duration) ease}.rt-resize-handle:hover:after,.rt-resize-handle:focus-visible:after,.rt-resize-handle--dragging:after{background-color:var(--rt-resize-handle-color)}.rt-resize-handle--edge--start{inset-inline-start:0}.rt-resize-handle--edge--end{inset-inline-end:0}}\n"]
+		}]
+	}],
+	propDecorators: {
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		edge: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "edge",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		widthChange: [{
+			type: i0.Output,
+			args: ["widthChange"]
+		}],
+		resizing: [{
+			type: i0.Output,
+			args: ["resizing"]
+		}]
+	}
+});
+const TRANSITION_BUFFER_MS = 80;
+function transitionDurationMs(win, element) {
+	const durationCss = win?.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;
+}
+function listenTransitionEnd(win, element, property, callback) {
+	const durationMs = transitionDurationMs(win, element);
+	if (durationMs === 0) {
+		callback();
+		return;
+	}
+	let settled = false;
+	const handler = (event) => {
+		if (event.propertyName !== property || event.target !== element || 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 + TRANSITION_BUFFER_MS);
+}
+const BEM_BLOCK$1 = "rt-drawer";
+const DEFAULT_WIDTH = 320;
+const DEFAULT_MIN_WIDTH = 200;
+const DEFAULT_MAX_WIDTH = 640;
+var RtDrawerComponent = class RtDrawerComponent {
+	#document;
+	#injector;
+	#focusTrapFactory;
+	#announced;
+	#turn;
+	#destroyed;
+	#focusBefore;
+	constructor() {
+		this.#document = inject(DOCUMENT);
+		this.#injector = inject(Injector);
+		this.#focusTrapFactory = inject(FocusTrapFactory);
+		this.#announced = false;
+		this.#turn = 0;
+		this.#destroyed = false;
+		this.#focusBefore = null;
+		this.panel = viewChild.required("panel", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+		this.resizing = signal(false, ...ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []);
+		this.shownWidth = computed(() => {
+			const width = this.width();
+			return width === null ? null : clampWidth(width, this.minWidth(), this.maxWidth());
+		}, ...ngDevMode ? [{ debugName: "shownWidth" }] : /* istanbul ignore next */ []);
+		this.autoWidth = computed(() => this.width() === null, ...ngDevMode ? [{ debugName: "autoWidth" }] : /* istanbul ignore next */ []);
+		this.handleShown = computed(() => this.resizable() && !this.autoWidth(), ...ngDevMode ? [{ debugName: "handleShown" }] : /* istanbul ignore next */ []);
+		this.backdropShown = computed(() => this.mode() === "over" && this.hasBackdrop(), ...ngDevMode ? [{ debugName: "backdropShown" }] : /* istanbul ignore next */ []);
+		this.trapFocus = computed(() => this.backdropShown() && this.opened(), ...ngDevMode ? [{ debugName: "trapFocus" }] : /* istanbul ignore next */ []);
+		this.handleEdge = computed(() => this.position() === "start" ? "end" : "start", ...ngDevMode ? [{ debugName: "handleEdge" }] : /* istanbul ignore next */ []);
+		this.opened = model(false, ...ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []);
+		this.mode = input("side", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+		this.position = input("start", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+		this.hasBackdrop = input(true, {
+			...ngDevMode ? { debugName: "hasBackdrop" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.disableClose = input(false, {
+			...ngDevMode ? { debugName: "disableClose" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.width = model(DEFAULT_WIDTH, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.minWidth = input(DEFAULT_MIN_WIDTH, {
+			...ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.maxWidth = input(DEFAULT_MAX_WIDTH, {
+			...ngDevMode ? { debugName: "maxWidth" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.resizable = input(false, {
+			...ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.overflow = input("clip", ...ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []);
+		this.autoFocus = input(true, ...ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []);
+		this.openedStart = output();
+		this.closedStart = output();
+		this.afterOpened = output();
+		this.afterClosed = output();
+		this.backdropClick = output();
+		effect(() => {
+			const opened = this.opened();
+			untracked(() => {
+				if (!this.#announced) {
+					this.#announce(opened);
+					return;
+				}
+				if (opened) this.#takeFocus();
+				else this.#returnFocus();
+				this.#announce(opened);
+			});
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.#destroyed = true;
+		});
+	}
+	open() {
+		this.opened.set(true);
+	}
+	close() {
+		this.opened.set(false);
+	}
+	toggle() {
+		this.opened.update((opened) => !opened);
+	}
+	onBackdrop(event) {
+		this.backdropClick.emit(event);
+		if (!this.disableClose()) this.close();
+	}
+	onEscape(event) {
+		if (this.mode() !== "over" || this.disableClose() || !this.opened()) return;
+		event.stopPropagation();
+		this.close();
+	}
+	onWidth(width) {
+		this.width.set(width);
+	}
+	#takeFocus() {
+		const target = autoFocusTarget(this.autoFocus(), this.mode() === "over");
+		if (target === null) return;
+		const active = this.#document.activeElement;
+		this.#focusBefore = active instanceof HTMLElement ? active : null;
+		afterNextRender(() => this.#focusInside(target), { injector: this.#injector });
+	}
+	#focusInside(target) {
+		const panel = this.panel().nativeElement;
+		if (target === "first-tabbable") {
+			const lookup = this.#focusTrapFactory.create(panel);
+			const found = lookup.focusFirstTabbableElement({ preventScroll: true });
+			lookup.destroy();
+			if (!found) panel.focus({ preventScroll: true });
+			return;
+		}
+		((target === "" ? null : panel.querySelector(target)) ?? panel).focus({ preventScroll: true });
+	}
+	#announce(opened) {
+		if (!this.#announced) {
+			this.#announced = true;
+			return;
+		}
+		this.#turn += 1;
+		const turn = this.#turn;
+		(opened ? this.openedStart : this.closedStart).emit();
+		afterNextRender(() => {
+			const panel = this.panel().nativeElement;
+			const property = this.mode() === "over" ? "transform" : "inline-size";
+			listenTransitionEnd(this.#document.defaultView, panel, property, () => {
+				if (turn === this.#turn && !this.#destroyed) (opened ? this.afterOpened : this.afterClosed).emit();
+			});
+		}, { injector: this.#injector });
+	}
+	#returnFocus() {
+		const before = this.#focusBefore;
+		const panel = this.panel().nativeElement;
+		this.#focusBefore = null;
+		if (before !== null && panel.contains(this.#document.activeElement)) before.focus({ preventScroll: true });
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDrawerComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtDrawerComponent,
+			isStandalone: true,
+			selector: "rt-drawer",
+			inputs: {
+				opened: {
+					classPropertyName: "opened",
+					publicName: "opened",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mode: {
+					classPropertyName: "mode",
+					publicName: "mode",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				position: {
+					classPropertyName: "position",
+					publicName: "position",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hasBackdrop: {
+					classPropertyName: "hasBackdrop",
+					publicName: "hasBackdrop",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disableClose: {
+					classPropertyName: "disableClose",
+					publicName: "disableClose",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				width: {
+					classPropertyName: "width",
+					publicName: "width",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				minWidth: {
+					classPropertyName: "minWidth",
+					publicName: "minWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxWidth: {
+					classPropertyName: "maxWidth",
+					publicName: "maxWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				resizable: {
+					classPropertyName: "resizable",
+					publicName: "resizable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				overflow: {
+					classPropertyName: "overflow",
+					publicName: "overflow",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				autoFocus: {
+					classPropertyName: "autoFocus",
+					publicName: "autoFocus",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				opened: "openedChange",
+				width: "widthChange",
+				openedStart: "openedStart",
+				closedStart: "closedStart",
+				afterOpened: "afterOpened",
+				afterClosed: "afterClosed",
+				backdropClick: "backdropClick"
+			},
+			host: {
+				attributes: { "qa-dataid": "drawer" },
+				classAttribute: "rt-drawer"
+			},
+			viewQueries: [{
+				propertyName: "panel",
+				first: true,
+				predicate: ["panel"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-drawer\">\n    @if (backdropShown()) {\n        <!-- Подложка закрывается и с клавиатуры: Escape в панели, которая держит фокус. Своя клавиша\n             у подложки была бы второй точкой фокуса без названия. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div rtElem=\"backdrop\" qa-dataid=\"drawer-backdrop\" [rtMod]=\"{ visible: opened() }\" (click)=\"onBackdrop($event)\"></div>\n    }\n\n    <aside\n        #panel\n        rtElem=\"panel\"\n        qa-dataid=\"drawer-panel\"\n        tabindex=\"-1\"\n        [cdkTrapFocus]=\"trapFocus()\"\n        [rtMod]=\"{\n            mode: mode(),\n            position: position(),\n            opened: opened(),\n            resizing: resizing(),\n            overflow: overflow(),\n            'auto-width': autoWidth(),\n        }\"\n        [attr.inert]=\"opened() ? null : ''\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [style.--rt-drawer-width.px]=\"shownWidth()\"\n        (keydown.escape)=\"onEscape($event)\">\n        <div rtElem=\"inner\">\n            <ng-content />\n        </div>\n\n        @if (handleShown()) {\n            <rt-resize-handle\n                [width]=\"shownWidth()\"\n                [min]=\"minWidth()\"\n                [max]=\"maxWidth()\"\n                [edge]=\"handleEdge()\"\n                [ariaLabel]=\"ariaLabel()\"\n                (widthChange)=\"onWidth($event)\"\n                (resizing)=\"resizing.set($event)\" />\n        }\n    </aside>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-drawer{display:contents}.rt-drawer__panel{--rt-drawer-width: var(--rt-size-64);--rt-drawer-bg: var(--rt-color-bg-surface);--rt-drawer-border-width: var(--rt-border-width-thin);--rt-drawer-border-color: var(--rt-color-border-subtle);--rt-drawer-shadow: var(--rt-shadow-lg);--rt-drawer-side-shadow: none;--rt-drawer-duration: var(--rt-duration-base);--rt-drawer-z-index: auto;--rt-drawer-over-z-index: var(--rt-z-modal);position:relative;z-index:var(--rt-drawer-z-index);display:flex;overflow:clip;min-height:0;flex:0 0 auto;background-color:var(--rt-drawer-bg);inline-size:var(--rt-drawer-width);outline:none;transition:inline-size var(--rt-drawer-duration) ease,transform var(--rt-drawer-duration) ease,visibility 0s linear}.rt-drawer__panel--position--start{order:-1}.rt-drawer__panel--position--end{order:1}.rt-drawer__panel--mode--side{box-shadow:var(--rt-drawer-side-shadow)}.rt-drawer__panel--mode--side.rt-drawer__panel--position--start{border-inline-end:var(--rt-drawer-border-width) solid var(--rt-drawer-border-color)}.rt-drawer__panel--mode--side.rt-drawer__panel--position--end{border-inline-start:var(--rt-drawer-border-width) solid var(--rt-drawer-border-color)}.rt-drawer__panel--mode--over{position:absolute;z-index:var(--rt-drawer-over-z-index);box-shadow:var(--rt-drawer-shadow);inset-block:0}.rt-drawer__panel--mode--over.rt-drawer__panel--position--start{inset-inline-start:0}.rt-drawer__panel--mode--over.rt-drawer__panel--position--end{inset-inline-end:0}.rt-drawer__panel--overflow--visible.rt-drawer__panel--opened{overflow:visible}.rt-drawer__panel--auto-width{inline-size:fit-content}.rt-drawer__panel:not(.rt-drawer__panel--opened){transition:inline-size var(--rt-drawer-duration) ease,transform var(--rt-drawer-duration) ease,visibility 0s linear var(--rt-drawer-duration);visibility:hidden}.rt-drawer__panel--mode--side:not(.rt-drawer__panel--opened){border-width:0;inline-size:0}.rt-drawer__panel--mode--over.rt-drawer__panel--position--start:not(.rt-drawer__panel--opened){transform:translate(-100%)}.rt-drawer__panel--mode--over.rt-drawer__panel--position--end:not(.rt-drawer__panel--opened){transform:translate(100%)}.rt-drawer__panel--mode--over.rt-drawer__panel--position--start:not(.rt-drawer__panel--opened):dir(rtl){transform:translate(100%)}.rt-drawer__panel--mode--over.rt-drawer__panel--position--end:not(.rt-drawer__panel--opened):dir(rtl){transform:translate(-100%)}.rt-drawer__panel--resizing{transition:none}.rt-drawer__inner{overflow:auto;min-width:0;flex:0 0 var(--rt-drawer-width)}.rt-drawer__panel--overflow--visible.rt-drawer__panel--opened>.rt-drawer__inner{overflow:visible}.rt-drawer__panel--auto-width>.rt-drawer__inner{flex-basis:auto}.rt-drawer__backdrop{--rt-drawer-backdrop-bg: var(--rt-color-bg-overlay);--rt-drawer-backdrop-duration: var(--rt-duration-base);--rt-drawer-backdrop-z-index: var(--rt-z-modal-backdrop);position:absolute;z-index:var(--rt-drawer-backdrop-z-index);background:var(--rt-drawer-backdrop-bg);inset:0;opacity:0;pointer-events:none;transition:opacity var(--rt-drawer-backdrop-duration) ease}.rt-drawer__backdrop--visible{opacity:1;pointer-events:auto}@media(prefers-reduced-motion:reduce){.rt-drawer__panel,.rt-drawer__panel:not(.rt-drawer__panel--opened),.rt-drawer__backdrop{transition:none}}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: CdkTrapFocus,
+					selector: "[cdkTrapFocus]",
+					inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"],
+					exportAs: ["cdkTrapFocus"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				},
+				{
+					kind: "component",
+					type: RtResizeHandleComponent,
+					selector: "rt-resize-handle",
+					inputs: [
+						"width",
+						"min",
+						"max",
+						"step",
+						"edge",
+						"ariaLabel"
+					],
+					outputs: ["widthChange", "resizing"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDrawerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-drawer",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				CdkTrapFocus,
+				BlockDirective,
+				ElemDirective,
+				ModDirective,
+				RtResizeHandleComponent
+			],
+			host: {
+				class: BEM_BLOCK$1,
+				"qa-dataid": "drawer"
+			},
+			template: "<ng-container rtBlock=\"rt-drawer\">\n    @if (backdropShown()) {\n        <!-- Подложка закрывается и с клавиатуры: Escape в панели, которая держит фокус. Своя клавиша\n             у подложки была бы второй точкой фокуса без названия. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n        <div rtElem=\"backdrop\" qa-dataid=\"drawer-backdrop\" [rtMod]=\"{ visible: opened() }\" (click)=\"onBackdrop($event)\"></div>\n    }\n\n    <aside\n        #panel\n        rtElem=\"panel\"\n        qa-dataid=\"drawer-panel\"\n        tabindex=\"-1\"\n        [cdkTrapFocus]=\"trapFocus()\"\n        [rtMod]=\"{\n            mode: mode(),\n            position: position(),\n            opened: opened(),\n            resizing: resizing(),\n            overflow: overflow(),\n            'auto-width': autoWidth(),\n        }\"\n        [attr.inert]=\"opened() ? null : ''\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [style.--rt-drawer-width.px]=\"shownWidth()\"\n        (keydown.escape)=\"onEscape($event)\">\n        <div rtElem=\"inner\">\n            <ng-content />\n        </div>\n\n        @if (handleShown()) {\n            <rt-resize-handle\n                [width]=\"shownWidth()\"\n                [min]=\"minWidth()\"\n                [max]=\"maxWidth()\"\n                [edge]=\"handleEdge()\"\n                [ariaLabel]=\"ariaLabel()\"\n                (widthChange)=\"onWidth($event)\"\n                (resizing)=\"resizing.set($event)\" />\n        }\n    </aside>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-drawer{display:contents}.rt-drawer__panel{--rt-drawer-width: var(--rt-size-64);--rt-drawer-bg: var(--rt-color-bg-surface);--rt-drawer-border-width: var(--rt-border-width-thin);--rt-drawer-border-color: var(--rt-color-border-subtle);--rt-drawer-shadow: var(--rt-shadow-lg);--rt-drawer-side-shadow: none;--rt-drawer-duration: var(--rt-duration-base);--rt-drawer-z-index: auto;--rt-drawer-over-z-index: var(--rt-z-modal);position:relative;z-index:var(--rt-drawer-z-index);display:flex;overflow:clip;min-height:0;flex:0 0 auto;background-color:var(--rt-drawer-bg);inline-size:var(--rt-drawer-width);outline:none;transition:inline-size var(--rt-drawer-duration) ease,transform var(--rt-drawer-duration) ease,visibility 0s linear}.rt-drawer__panel--position--start{order:-1}.rt-drawer__panel--position--end{order:1}.rt-drawer__panel--mode--side{box-shadow:var(--rt-drawer-side-shadow)}.rt-drawer__panel--mode--side.rt-drawer__panel--position--start{border-inline-end:var(--rt-drawer-border-width) solid var(--rt-drawer-border-color)}.rt-drawer__panel--mode--side.rt-drawer__panel--position--end{border-inline-start:var(--rt-drawer-border-width) solid var(--rt-drawer-border-color)}.rt-drawer__panel--mode--over{position:absolute;z-index:var(--rt-drawer-over-z-index);box-shadow:var(--rt-drawer-shadow);inset-block:0}.rt-drawer__panel--mode--over.rt-drawer__panel--position--start{inset-inline-start:0}.rt-drawer__panel--mode--over.rt-drawer__panel--position--end{inset-inline-end:0}.rt-drawer__panel--overflow--visible.rt-drawer__panel--opened{overflow:visible}.rt-drawer__panel--auto-width{inline-size:fit-content}.rt-drawer__panel:not(.rt-drawer__panel--opened){transition:inline-size var(--rt-drawer-duration) ease,transform var(--rt-drawer-duration) ease,visibility 0s linear var(--rt-drawer-duration);visibility:hidden}.rt-drawer__panel--mode--side:not(.rt-drawer__panel--opened){border-width:0;inline-size:0}.rt-drawer__panel--mode--over.rt-drawer__panel--position--start:not(.rt-drawer__panel--opened){transform:translate(-100%)}.rt-drawer__panel--mode--over.rt-drawer__panel--position--end:not(.rt-drawer__panel--opened){transform:translate(100%)}.rt-drawer__panel--mode--over.rt-drawer__panel--position--start:not(.rt-drawer__panel--opened):dir(rtl){transform:translate(100%)}.rt-drawer__panel--mode--over.rt-drawer__panel--position--end:not(.rt-drawer__panel--opened):dir(rtl){transform:translate(-100%)}.rt-drawer__panel--resizing{transition:none}.rt-drawer__inner{overflow:auto;min-width:0;flex:0 0 var(--rt-drawer-width)}.rt-drawer__panel--overflow--visible.rt-drawer__panel--opened>.rt-drawer__inner{overflow:visible}.rt-drawer__panel--auto-width>.rt-drawer__inner{flex-basis:auto}.rt-drawer__backdrop{--rt-drawer-backdrop-bg: var(--rt-color-bg-overlay);--rt-drawer-backdrop-duration: var(--rt-duration-base);--rt-drawer-backdrop-z-index: var(--rt-z-modal-backdrop);position:absolute;z-index:var(--rt-drawer-backdrop-z-index);background:var(--rt-drawer-backdrop-bg);inset:0;opacity:0;pointer-events:none;transition:opacity var(--rt-drawer-backdrop-duration) ease}.rt-drawer__backdrop--visible{opacity:1;pointer-events:auto}@media(prefers-reduced-motion:reduce){.rt-drawer__panel,.rt-drawer__panel:not(.rt-drawer__panel--opened),.rt-drawer__backdrop{transition:none}}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		panel: [{
+			type: i0.ViewChild,
+			args: ["panel", { isSignal: true }]
+		}],
+		opened: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "opened",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openedChange"]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		hasBackdrop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasBackdrop",
+				required: false
+			}]
+		}],
+		disableClose: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disableClose",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["widthChange"]
+		}],
+		minWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minWidth",
+				required: false
+			}]
+		}],
+		maxWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxWidth",
+				required: false
+			}]
+		}],
+		resizable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resizable",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		overflow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "overflow",
+				required: false
+			}]
+		}],
+		autoFocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoFocus",
+				required: false
+			}]
+		}],
+		openedStart: [{
+			type: i0.Output,
+			args: ["openedStart"]
+		}],
+		closedStart: [{
+			type: i0.Output,
+			args: ["closedStart"]
+		}],
+		afterOpened: [{
+			type: i0.Output,
+			args: ["afterOpened"]
+		}],
+		afterClosed: [{
+			type: i0.Output,
+			args: ["afterClosed"]
+		}],
+		backdropClick: [{
+			type: i0.Output,
+			args: ["backdropClick"]
+		}]
+	}
+});
+const BEM_BLOCK = "rt-drawer-container";
+var RtDrawerContainerComponent = class RtDrawerContainerComponent {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDrawerContainerComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtDrawerContainerComponent,
+			isStandalone: true,
+			selector: "rt-drawer-container",
+			host: {
+				attributes: { "qa-dataid": "drawer-container" },
+				classAttribute: "rt-drawer-container"
+			},
+			ngImport: i0,
+			template: "<!-- Содержимое идёт в разметке первым: панели после него рисуются поверх его узлов с положением.\n     На экране порядок задают сами панели — у каждой свой край строки. -->\n<ng-container rtBlock=\"rt-drawer-container\">\n    <div rtElem=\"content\" qa-dataid=\"drawer-container-content\">\n        <ng-content />\n    </div>\n    <ng-content select=\"rt-drawer\" />\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-drawer-container{position:relative;display:flex;overflow:hidden;min-height:0;isolation:isolate}.rt-drawer-container__content{overflow:auto;min-width:0;flex:1 1 auto}}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: BlockDirective,
+				selector: "[rtBlock]",
+				inputs: ["rtMod"]
+			}, {
+				kind: "directive",
+				type: ElemDirective,
+				selector: "[rtElem]",
+				inputs: ["rtMod"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDrawerContainerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-drawer-container",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [BlockDirective, ElemDirective],
+			host: {
+				class: BEM_BLOCK,
+				"qa-dataid": "drawer-container"
+			},
+			template: "<!-- Содержимое идёт в разметке первым: панели после него рисуются поверх его узлов с положением.\n     На экране порядок задают сами панели — у каждой свой край строки. -->\n<ng-container rtBlock=\"rt-drawer-container\">\n    <div rtElem=\"content\" qa-dataid=\"drawer-container-content\">\n        <ng-content />\n    </div>\n    <ng-content select=\"rt-drawer\" />\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-drawer-container{position:relative;display:flex;overflow:hidden;min-height:0;isolation:isolate}.rt-drawer-container__content{overflow:auto;min-width:0;flex:1 1 auto}}\n"]
+		}]
+	}]
+});
+export { FOCUS_PANEL, RtDrawerComponent, RtDrawerContainerComponent, RtResizeHandleComponent, autoFocusTarget, clampWidth, listenTransitionEnd, transitionDurationMs };
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-drawer.mjs.map