@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/fesm2022/rt-tools-ui-kit-v2-draggable-tree.mjs

@@ -0,0 +1,585 @@
+import { CdkDrag, CdkDragHandle, CdkDropList } from "@angular/cdk/drag-drop";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, ViewEncapsulation, computed, contentChild, inject, input, model, output, signal, viewChildren } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RT_KIT_LABELS } from "@rt-tools/ui-kit-v2/core";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import { rtTreeRows, rtTreeSideKey, rtTreeToggle } from "@rt-tools/ui-kit-v2/select";
+import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
+var RtDraggableTreeNodeDirective = class RtDraggableTreeNodeDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDraggableTreeNodeDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtDraggableTreeNodeDirective,
+			isStandalone: true,
+			selector: "ng-template[rtDraggableTreeNode]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDraggableTreeNodeDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[rtDraggableTreeNode]" }]
+	}]
+});
+function isContainer(node) {
+	return Array.isArray(node.children);
+}
+function locate(nodes, value, parent = null) {
+	for (let index = 0; index < nodes.length; index++) {
+		const node = nodes[index];
+		if (node.value === value) return {
+			siblings: nodes,
+			node,
+			index,
+			parent
+		};
+		const found = locate(node.children ?? [], value, node.value);
+		if (found) return found;
+	}
+	return null;
+}
+function holds(node, value) {
+	return (node.children ?? []).some((child) => child.value === value || holds(child, value));
+}
+function without(nodes, value) {
+	return nodes.filter((node) => node.value !== value).map((node) => node.children && holds(node, value) ? {
+		...node,
+		children: without(node.children, value)
+	} : node);
+}
+function inserted(nodes, moving, drop) {
+	const at = nodes.findIndex((node) => node.value === drop.target);
+	if (at >= 0 && drop.place !== "inside") {
+		const index = drop.place === "before" ? at : at + 1;
+		return [
+			...nodes.slice(0, index),
+			moving,
+			...nodes.slice(index)
+		];
+	}
+	return nodes.map((node) => {
+		if (node.value === drop.target && drop.place === "inside") return {
+			...node,
+			children: [...node.children ?? [], moving]
+		};
+		if (node.children && holds(node, drop.target)) return {
+			...node,
+			children: inserted(node.children, moving, drop)
+		};
+		return node;
+	});
+}
+function siblingPlace(here, step) {
+	const next = here.siblings[here.index + step];
+	return next ? {
+		target: next.value,
+		place: step < 0 ? "before" : "after"
+	} : null;
+}
+function levelPlace(here, out) {
+	if (out) return here.parent === null ? null : {
+		target: here.parent,
+		place: "after"
+	};
+	const above = here.siblings[here.index - 1];
+	return above && isContainer(above) ? {
+		target: above.value,
+		place: "inside"
+	} : null;
+}
+function rtDragPlace(target, top, height, pointer) {
+	const third = height / 3;
+	const offset = pointer - top;
+	if (offset < third) return "before";
+	if (offset > 2 * third) return "after";
+	return isContainer(target) ? "inside" : null;
+}
+function rtDragAllowed(nodes, value, drop, canDrop = null) {
+	const moving = locate(nodes, value);
+	const target = locate(nodes, drop.target);
+	if (!moving || !target || drop.target === value || holds(moving.node, drop.target)) return false;
+	if (drop.place === "inside" && !isContainer(target.node)) return false;
+	return canDrop ? canDrop(moving.node, target.node, drop.place) : true;
+}
+function rtDragMove(nodes, value, drop) {
+	const moving = locate(nodes, value);
+	if (!moving || !rtDragAllowed(nodes, value, drop)) return null;
+	const next = inserted(without(nodes, value), moving.node, drop);
+	const landed = locate(next, value);
+	if (!landed) return null;
+	return {
+		nodes: next,
+		moved: {
+			node: moving.node,
+			parent: landed.parent,
+			index: landed.index
+		}
+	};
+}
+function rtDragKeyPlace(nodes, value, key) {
+	const here = locate(nodes, value);
+	if (!here) return null;
+	if (key === "ArrowUp" || key === "ArrowDown") return siblingPlace(here, key === "ArrowUp" ? -1 : 1);
+	if (key === "ArrowLeft" || key === "ArrowRight") return levelPlace(here, key === "ArrowLeft");
+	return null;
+}
+const BEM_BLOCK = "rt-draggable-tree";
+const MOVE_KEYS = [
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+];
+var RtDraggableTreeComponent = class RtDraggableTreeComponent {
+	constructor() {
+		this.#highlighted = signal(null, ...ngDevMode ? [{ debugName: "#highlighted" }] : /* istanbul ignore next */ []);
+		this.#dragged = signal(null, ...ngDevMode ? [{ debugName: "#dragged" }] : /* istanbul ignore next */ []);
+		this.t = inject(RT_KIT_LABELS);
+		this.nodeTemplate = contentChild(RtDraggableTreeNodeDirective, ...ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []);
+		this.rowElements = viewChildren("row", ...ngDevMode ? [{ debugName: "rowElements" }] : /* istanbul ignore next */ []);
+		this.drop = signal(null, ...ngDevMode ? [{ debugName: "drop" }] : /* istanbul ignore next */ []);
+		this.openBranches = computed(() => {
+			const open = this.open();
+			if (open !== null) return new Set(open);
+			const all = /* @__PURE__ */ new Set();
+			this.#collectBranches(this.nodes(), all);
+			return all;
+		}, ...ngDevMode ? [{ debugName: "openBranches" }] : /* istanbul ignore next */ []);
+		this.rows = computed(() => rtTreeRows(this.nodes(), this.openBranches(), ""), ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+		this.highlighted = this.#highlighted.asReadonly();
+		this.nodes = model.required(...ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []);
+		this.open = model(null, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+		this.canDrop = input(null, ...ngDevMode ? [{ debugName: "canDrop" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.emptyIcon = input(null, ...ngDevMode ? [{ debugName: "emptyIcon" }] : /* istanbul ignore next */ []);
+		this.moved = output();
+		this.picked = output();
+	}
+	#highlighted;
+	#dragged;
+	handleKeydown(event) {
+		const taken = event.altKey ? this.#moveByKey(event.key) : this.#walkByKey(event.key);
+		if (taken) {
+			event.preventDefault();
+			event.stopPropagation();
+		}
+		return taken;
+	}
+	onRowClick(row) {
+		this.#highlighted.set(row.option.value);
+		this.picked.emit(row.option);
+	}
+	onToggleClick(event, value) {
+		event.stopPropagation();
+		this.#toggle(value);
+	}
+	onDragStarted(value) {
+		this.#dragged.set(value);
+	}
+	onDragMoved(event) {
+		this.drop.set(this.#dropAt(event.pointerPosition.y));
+	}
+	onDropped() {
+		const dragged = this.#dragged();
+		const drop = this.drop();
+		this.#dragged.set(null);
+		this.drop.set(null);
+		if (dragged !== null && drop) this.#apply(dragged, drop);
+	}
+	#dropAt(pointer) {
+		const dragged = this.#dragged();
+		const rows = this.rows();
+		const elements = this.rowElements();
+		if (dragged === null) return null;
+		const index = elements.findIndex((element, at) => {
+			const box = element.nativeElement.getBoundingClientRect();
+			return rows[at]?.option.value !== dragged && pointer >= box.top && pointer < box.bottom;
+		});
+		if (index < 0) return null;
+		const box = elements[index].nativeElement.getBoundingClientRect();
+		const target = rows[index].option;
+		const place = rtDragPlace(target, box.top, box.height, pointer);
+		const drop = place ? {
+			target: target.value,
+			place
+		} : null;
+		return drop && rtDragAllowed(this.nodes(), dragged, drop, this.canDrop()) ? drop : null;
+	}
+	#moveByKey(key) {
+		const value = this.#highlighted();
+		if (!MOVE_KEYS.includes(key)) return false;
+		const node = this.rows().find((row) => row.option.value === value)?.option;
+		const drop = node && !node.disabled ? rtDragKeyPlace(this.nodes(), node.value, key) : null;
+		if (node && drop && rtDragAllowed(this.nodes(), node.value, drop, this.canDrop())) this.#apply(node.value, drop);
+		return true;
+	}
+	#walkByKey(key) {
+		const rows = this.rows();
+		const index = rows.findIndex((row) => row.option.value === this.#highlighted());
+		if (key === "ArrowDown" || key === "ArrowUp") return this.#step(rows, index, key === "ArrowDown" ? 1 : -1);
+		if (index < 0) return false;
+		if (key === "ArrowRight" || key === "ArrowLeft") {
+			const answer = rtTreeSideKey(rows, index, key);
+			if (answer.toggle !== null) this.#toggle(answer.toggle);
+			this.#highlighted.set(rows[answer.index].option.value);
+			return true;
+		}
+		if (key === "Enter") {
+			this.picked.emit(rows[index].option);
+			return true;
+		}
+		return false;
+	}
+	#step(rows, index, step) {
+		if (rows.length === 0) return false;
+		const next = index < 0 ? 0 : Math.min(rows.length - 1, Math.max(0, index + step));
+		this.#highlighted.set(rows[next].option.value);
+		return true;
+	}
+	#apply(value, drop) {
+		const result = rtDragMove(this.nodes(), value, drop);
+		if (!result) return;
+		this.nodes.set(result.nodes);
+		if (drop.place === "inside" && !this.openBranches().has(drop.target)) this.open.set([...this.openBranches(), drop.target]);
+		this.moved.emit(result.moved);
+	}
+	#toggle(value) {
+		this.open.set([...rtTreeToggle(this.openBranches(), value)]);
+	}
+	#collectBranches(list, into) {
+		list.forEach((node) => {
+			if ((node.children ?? []).length > 0) {
+				into.add(node.value);
+				this.#collectBranches(node.children ?? [], into);
+			}
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDraggableTreeComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtDraggableTreeComponent,
+			isStandalone: true,
+			selector: "rt-draggable-tree",
+			inputs: {
+				nodes: {
+					classPropertyName: "nodes",
+					publicName: "nodes",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				open: {
+					classPropertyName: "open",
+					publicName: "open",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				canDrop: {
+					classPropertyName: "canDrop",
+					publicName: "canDrop",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				emptyIcon: {
+					classPropertyName: "emptyIcon",
+					publicName: "emptyIcon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				nodes: "nodesChange",
+				open: "openChange",
+				moved: "moved",
+				picked: "picked"
+			},
+			host: {
+				attributes: {
+					"role": "tree",
+					"tabindex": "0"
+				},
+				listeners: { "keydown": "handleKeydown($event)" },
+				properties: { "attr.aria-label": "ariaLabel()" },
+				classAttribute: "rt-draggable-tree"
+			},
+			queries: [{
+				propertyName: "nodeTemplate",
+				first: true,
+				predicate: RtDraggableTreeNodeDirective,
+				descendants: true,
+				isSignal: true
+			}],
+			viewQueries: [{
+				propertyName: "rowElements",
+				predicate: ["row"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-draggable-tree\">\n    <!--\n        Строки берут мышь через (click), клавиатура — на самом дереве (handleKeydown): строки фокус не\n        берут, подсвеченная строка — состояние рядом с фокусом. Строку тянут за ручку; список один на\n        всё дерево, и место сброса считает компонент по рамке строки под указателем.\n    -->\n    <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    <div rtElem=\"list\" cdkDropList [cdkDropListSortingDisabled]=\"true\" (cdkDropListDropped)=\"onDropped()\">\n        @for (row of rows(); track row.option.value) {\n            <div\n                #row\n                rtElem=\"row\"\n                qa-dataid=\"draggable-tree-row\"\n                role=\"treeitem\"\n                cdkDrag\n                [cdkDragData]=\"row.option.value\"\n                [cdkDragDisabled]=\"!!row.option.disabled\"\n                [attr.data-value]=\"row.option.value\"\n                [attr.aria-level]=\"row.level + 1\"\n                [attr.aria-expanded]=\"row.branch ? row.open : null\"\n                [attr.aria-selected]=\"row.option.value === highlighted()\"\n                [attr.aria-disabled]=\"!!row.option.disabled\"\n                [style.--rt-draggable-tree-level]=\"row.level\"\n                [rtMod]=\"{\n                    highlighted: row.option.value === highlighted(),\n                    disabled: !!row.option.disabled,\n                    'drop-before': drop()?.target === row.option.value && drop()?.place === 'before',\n                    'drop-after': drop()?.target === row.option.value && drop()?.place === 'after',\n                    'drop-inside': drop()?.target === row.option.value && drop()?.place === 'inside',\n                }\"\n                (cdkDragStarted)=\"onDragStarted(row.option.value)\"\n                (cdkDragMoved)=\"onDragMoved($event)\"\n                (click)=\"onRowClick(row)\">\n                @if (row.option.disabled) {\n                    <span rtElem=\"handle-space\"></span>\n                } @else {\n                    <span rtElem=\"handle\" qa-dataid=\"draggable-tree-handle\" cdkDragHandle aria-hidden=\"true\">\n                        <rt-icon name=\"bars\" size=\"sm\" color=\"muted\" />\n                    </span>\n                }\n\n                @if (row.branch) {\n                    <button\n                        rtElem=\"toggle\"\n                        qa-dataid=\"draggable-tree-toggle\"\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [attr.aria-label]=\"row.open ? t().uiCollapse : t().uiExpand\"\n                        (click)=\"onToggleClick($event, row.option.value)\">\n                        <rt-icon size=\"sm\" color=\"muted\" [name]=\"row.open ? 'chevron-down' : 'chevron-right'\" />\n                    </button>\n                } @else {\n                    <span rtElem=\"toggle-space\"></span>\n                }\n\n                <span rtElem=\"content\" qa-dataid=\"draggable-tree-content\">\n                    @if (nodeTemplate(); as template) {\n                        <ng-container [ngTemplateOutlet]=\"template.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: row.option }\" />\n                    } @else {\n                        <span rtElem=\"label\" qa-dataid=\"draggable-tree-label\" rtTooltipWhenTruncated [rtTooltip]=\"row.option.label\">\n                            {{ row.option.label }}\n                        </span>\n                    }\n                </span>\n            </div>\n        } @empty {\n            <div rtElem=\"empty\" qa-dataid=\"draggable-tree-empty\" [rtMod]=\"{ 'with-icon': !!emptyIcon() }\">\n                @if (emptyIcon(); as icon) {\n                    <rt-icon rtElem=\"empty-icon\" qa-dataid=\"draggable-tree-empty-icon\" size=\"lg\" [name]=\"icon\" />\n                }\n                {{ t().uiNoOptions }}\n            </div>\n        }\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-draggable-tree{--rt-draggable-tree-focus-shadow: var(--rt-shadow-focus-ring);--rt-draggable-tree-empty-color: var(--rt-color-text-muted);--rt-draggable-tree-empty-gap: var(--rt-space-sm);display:block;color:var(--rt-color-text-primary);font-size:var(--rt-input-font-size);outline:none}.rt-draggable-tree:focus-visible{box-shadow:var(--rt-draggable-tree-focus-shadow)}.rt-draggable-tree__list{display:block}.rt-draggable-tree__empty{padding:var(--rt-space-md);color:var(--rt-draggable-tree-empty-color);text-align:center}.rt-draggable-tree__empty--with-icon{display:flex;flex-direction:column;align-items:center;gap:var(--rt-draggable-tree-empty-gap)}.rt-draggable-tree__empty-icon{flex-shrink:0}.rt-draggable-tree__row{--rt-draggable-tree-level: 0;--rt-draggable-tree-indent: var(--rt-space-lg);--rt-draggable-tree-row-padding-block: var(--rt-space-sm);--rt-draggable-tree-row-padding-inline: var(--rt-space-md);--rt-draggable-tree-row-gap: var(--rt-space-sm);--rt-draggable-tree-row-spacing: var(--rt-space-0);--rt-draggable-tree-row-min-height: auto;--rt-draggable-tree-row-box-sizing: content-box;--rt-draggable-tree-row-radius: var(--rt-radius-none);--rt-draggable-tree-row-bg: var(--rt-color-bg-surface);--rt-draggable-tree-row-bg-hover: var(--rt-color-bg-hover);--rt-draggable-tree-row-shadow-hover: none;--rt-draggable-tree-handle-opacity: 1;--rt-draggable-tree-toggle-color: var(--rt-neutral-600);--rt-draggable-tree-mark-width: var(--rt-border-width-thick);--rt-draggable-tree-mark-color: var(--rt-color-action-primary);--rt-draggable-tree-mark-radius: var(--rt-radius-xs);--rt-draggable-tree-preview-shadow: var(--rt-shadow-md);position:relative;display:flex;box-sizing:var(--rt-draggable-tree-row-box-sizing);align-items:center;padding:var(--rt-draggable-tree-row-padding-block) var(--rt-draggable-tree-row-padding-inline);border-radius:var(--rt-draggable-tree-row-radius);background:var(--rt-draggable-tree-row-bg);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-input-font-size);gap:var(--rt-draggable-tree-row-gap);min-block-size:var(--rt-draggable-tree-row-min-height);padding-inline-start:calc(var(--rt-draggable-tree-row-padding-inline) + var(--rt-draggable-tree-indent) * var(--rt-draggable-tree-level))}@media(pointer:coarse){.rt-draggable-tree__row{--rt-draggable-tree-row-min-height: var(--rt-control-height-lg)}}:is(.rt-preset-material,[data-preset=material]) .rt-draggable-tree__row{--rt-draggable-tree-indent: calc(var(--rt-size-12) - var(--rt-space-0-5));--rt-draggable-tree-row-padding-block: var(--rt-space-1);--rt-draggable-tree-row-padding-inline: calc(var(--rt-space-2) + var(--rt-space-1));--rt-draggable-tree-row-gap: calc(var(--rt-space-2) + var(--rt-space-0-5));--rt-draggable-tree-row-spacing: calc(var(--rt-space-1) + var(--rt-space-0-5) / 2);--rt-draggable-tree-row-min-height: var(--rt-size-8);--rt-draggable-tree-row-box-sizing: border-box;--rt-draggable-tree-row-radius: var(--rt-radius-md);--rt-draggable-tree-row-shadow-hover: var(--rt-mat-shadow-level-2);--rt-draggable-tree-handle-opacity: 0;--rt-draggable-tree-toggle-color: var(--rt-color-action-primary);--rt-draggable-tree-mark-width: var(--rt-border-width-medium)}@media(pointer:coarse){:is(.rt-preset-material,[data-preset=material]) .rt-draggable-tree__row{--rt-draggable-tree-row-min-height: var(--rt-control-height-lg)}}.rt-draggable-tree__row+.rt-draggable-tree__row{margin-block-start:var(--rt-draggable-tree-row-spacing)}.rt-draggable-tree__row:hover,.rt-draggable-tree__row--highlighted{background-color:var(--rt-draggable-tree-row-bg-hover)}.rt-draggable-tree__row:hover{box-shadow:var(--rt-draggable-tree-row-shadow-hover)}.rt-draggable-tree__row--drop-before:before,.rt-draggable-tree__row--drop-after:after{position:absolute;background:var(--rt-draggable-tree-mark-color);block-size:var(--rt-draggable-tree-mark-width);content:\"\";inset-inline:0}.rt-draggable-tree__row--drop-before:before{inset-block-start:0}.rt-draggable-tree__row--drop-after:after{inset-block-end:0}.rt-draggable-tree__row--drop-inside{border-radius:var(--rt-draggable-tree-mark-radius);outline:var(--rt-draggable-tree-mark-width) solid var(--rt-draggable-tree-mark-color);outline-offset:calc(var(--rt-draggable-tree-mark-width) * -1)}.rt-draggable-tree__row.cdk-drag-preview{box-shadow:var(--rt-draggable-tree-preview-shadow)}.rt-draggable-tree__row.cdk-drag-placeholder{opacity:0}.rt-draggable-tree__row--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-draggable-tree__row--disabled:hover{background-color:transparent;box-shadow:none}.rt-draggable-tree__handle,.rt-draggable-tree__handle-space,.rt-draggable-tree__toggle,.rt-draggable-tree__toggle-space{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--rt-input-icon-size);inline-size:var(--rt-input-icon-size)}.rt-draggable-tree__handle{cursor:grab;opacity:var(--rt-draggable-tree-handle-opacity)}.rt-draggable-tree__handle:active{cursor:grabbing}.rt-draggable-tree__row:is(:hover,.rt-draggable-tree__row--highlighted,.cdk-drag-preview){--rt-draggable-tree-handle-opacity: 1}.rt-draggable-tree__toggle{--rt-icon-color-muted: var(--rt-draggable-tree-toggle-color);padding:0;border:0;background:transparent;cursor:pointer}.rt-draggable-tree__content{display:flex;min-width:0;flex:1 1 auto;align-items:center;gap:var(--rt-space-sm)}.rt-draggable-tree__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: CdkDrag,
+					selector: "[cdkDrag]",
+					inputs: [
+						"cdkDragData",
+						"cdkDragLockAxis",
+						"cdkDragRootElement",
+						"cdkDragBoundary",
+						"cdkDragStartDelay",
+						"cdkDragFreeDragPosition",
+						"cdkDragDisabled",
+						"cdkDragConstrainPosition",
+						"cdkDragPreviewClass",
+						"cdkDragPreviewContainer",
+						"cdkDragScale"
+					],
+					outputs: [
+						"cdkDragStarted",
+						"cdkDragReleased",
+						"cdkDragEnded",
+						"cdkDragEntered",
+						"cdkDragExited",
+						"cdkDragDropped",
+						"cdkDragMoved"
+					],
+					exportAs: ["cdkDrag"]
+				},
+				{
+					kind: "directive",
+					type: CdkDragHandle,
+					selector: "[cdkDragHandle]",
+					inputs: ["cdkDragHandleDisabled"]
+				},
+				{
+					kind: "directive",
+					type: CdkDropList,
+					selector: "[cdkDropList], cdk-drop-list",
+					inputs: [
+						"cdkDropListConnectedTo",
+						"cdkDropListData",
+						"cdkDropListOrientation",
+						"id",
+						"cdkDropListLockAxis",
+						"cdkDropListDisabled",
+						"cdkDropListSortingDisabled",
+						"cdkDropListEnterPredicate",
+						"cdkDropListSortPredicate",
+						"cdkDropListAutoScrollDisabled",
+						"cdkDropListAutoScrollStep",
+						"cdkDropListElementContainer",
+						"cdkDropListHasAnchor"
+					],
+					outputs: [
+						"cdkDropListDropped",
+						"cdkDropListEntered",
+						"cdkDropListExited",
+						"cdkDropListSorted"
+					],
+					exportAs: ["cdkDropList"]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick"
+					],
+					exportAs: ["rtTooltip"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDraggableTreeComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-draggable-tree",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				CdkDrag,
+				CdkDragHandle,
+				CdkDropList,
+				RtIconComponent,
+				RtTooltipDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: {
+				class: BEM_BLOCK,
+				role: "tree",
+				tabindex: "0",
+				"[attr.aria-label]": "ariaLabel()",
+				"(keydown)": "handleKeydown($event)"
+			},
+			template: "<ng-container rtBlock=\"rt-draggable-tree\">\n    <!--\n        Строки берут мышь через (click), клавиатура — на самом дереве (handleKeydown): строки фокус не\n        берут, подсвеченная строка — состояние рядом с фокусом. Строку тянут за ручку; список один на\n        всё дерево, и место сброса считает компонент по рамке строки под указателем.\n    -->\n    <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n    <div rtElem=\"list\" cdkDropList [cdkDropListSortingDisabled]=\"true\" (cdkDropListDropped)=\"onDropped()\">\n        @for (row of rows(); track row.option.value) {\n            <div\n                #row\n                rtElem=\"row\"\n                qa-dataid=\"draggable-tree-row\"\n                role=\"treeitem\"\n                cdkDrag\n                [cdkDragData]=\"row.option.value\"\n                [cdkDragDisabled]=\"!!row.option.disabled\"\n                [attr.data-value]=\"row.option.value\"\n                [attr.aria-level]=\"row.level + 1\"\n                [attr.aria-expanded]=\"row.branch ? row.open : null\"\n                [attr.aria-selected]=\"row.option.value === highlighted()\"\n                [attr.aria-disabled]=\"!!row.option.disabled\"\n                [style.--rt-draggable-tree-level]=\"row.level\"\n                [rtMod]=\"{\n                    highlighted: row.option.value === highlighted(),\n                    disabled: !!row.option.disabled,\n                    'drop-before': drop()?.target === row.option.value && drop()?.place === 'before',\n                    'drop-after': drop()?.target === row.option.value && drop()?.place === 'after',\n                    'drop-inside': drop()?.target === row.option.value && drop()?.place === 'inside',\n                }\"\n                (cdkDragStarted)=\"onDragStarted(row.option.value)\"\n                (cdkDragMoved)=\"onDragMoved($event)\"\n                (click)=\"onRowClick(row)\">\n                @if (row.option.disabled) {\n                    <span rtElem=\"handle-space\"></span>\n                } @else {\n                    <span rtElem=\"handle\" qa-dataid=\"draggable-tree-handle\" cdkDragHandle aria-hidden=\"true\">\n                        <rt-icon name=\"bars\" size=\"sm\" color=\"muted\" />\n                    </span>\n                }\n\n                @if (row.branch) {\n                    <button\n                        rtElem=\"toggle\"\n                        qa-dataid=\"draggable-tree-toggle\"\n                        type=\"button\"\n                        tabindex=\"-1\"\n                        [attr.aria-label]=\"row.open ? t().uiCollapse : t().uiExpand\"\n                        (click)=\"onToggleClick($event, row.option.value)\">\n                        <rt-icon size=\"sm\" color=\"muted\" [name]=\"row.open ? 'chevron-down' : 'chevron-right'\" />\n                    </button>\n                } @else {\n                    <span rtElem=\"toggle-space\"></span>\n                }\n\n                <span rtElem=\"content\" qa-dataid=\"draggable-tree-content\">\n                    @if (nodeTemplate(); as template) {\n                        <ng-container [ngTemplateOutlet]=\"template.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: row.option }\" />\n                    } @else {\n                        <span rtElem=\"label\" qa-dataid=\"draggable-tree-label\" rtTooltipWhenTruncated [rtTooltip]=\"row.option.label\">\n                            {{ row.option.label }}\n                        </span>\n                    }\n                </span>\n            </div>\n        } @empty {\n            <div rtElem=\"empty\" qa-dataid=\"draggable-tree-empty\" [rtMod]=\"{ 'with-icon': !!emptyIcon() }\">\n                @if (emptyIcon(); as icon) {\n                    <rt-icon rtElem=\"empty-icon\" qa-dataid=\"draggable-tree-empty-icon\" size=\"lg\" [name]=\"icon\" />\n                }\n                {{ t().uiNoOptions }}\n            </div>\n        }\n    </div>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-draggable-tree{--rt-draggable-tree-focus-shadow: var(--rt-shadow-focus-ring);--rt-draggable-tree-empty-color: var(--rt-color-text-muted);--rt-draggable-tree-empty-gap: var(--rt-space-sm);display:block;color:var(--rt-color-text-primary);font-size:var(--rt-input-font-size);outline:none}.rt-draggable-tree:focus-visible{box-shadow:var(--rt-draggable-tree-focus-shadow)}.rt-draggable-tree__list{display:block}.rt-draggable-tree__empty{padding:var(--rt-space-md);color:var(--rt-draggable-tree-empty-color);text-align:center}.rt-draggable-tree__empty--with-icon{display:flex;flex-direction:column;align-items:center;gap:var(--rt-draggable-tree-empty-gap)}.rt-draggable-tree__empty-icon{flex-shrink:0}.rt-draggable-tree__row{--rt-draggable-tree-level: 0;--rt-draggable-tree-indent: var(--rt-space-lg);--rt-draggable-tree-row-padding-block: var(--rt-space-sm);--rt-draggable-tree-row-padding-inline: var(--rt-space-md);--rt-draggable-tree-row-gap: var(--rt-space-sm);--rt-draggable-tree-row-spacing: var(--rt-space-0);--rt-draggable-tree-row-min-height: auto;--rt-draggable-tree-row-box-sizing: content-box;--rt-draggable-tree-row-radius: var(--rt-radius-none);--rt-draggable-tree-row-bg: var(--rt-color-bg-surface);--rt-draggable-tree-row-bg-hover: var(--rt-color-bg-hover);--rt-draggable-tree-row-shadow-hover: none;--rt-draggable-tree-handle-opacity: 1;--rt-draggable-tree-toggle-color: var(--rt-neutral-600);--rt-draggable-tree-mark-width: var(--rt-border-width-thick);--rt-draggable-tree-mark-color: var(--rt-color-action-primary);--rt-draggable-tree-mark-radius: var(--rt-radius-xs);--rt-draggable-tree-preview-shadow: var(--rt-shadow-md);position:relative;display:flex;box-sizing:var(--rt-draggable-tree-row-box-sizing);align-items:center;padding:var(--rt-draggable-tree-row-padding-block) var(--rt-draggable-tree-row-padding-inline);border-radius:var(--rt-draggable-tree-row-radius);background:var(--rt-draggable-tree-row-bg);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-input-font-size);gap:var(--rt-draggable-tree-row-gap);min-block-size:var(--rt-draggable-tree-row-min-height);padding-inline-start:calc(var(--rt-draggable-tree-row-padding-inline) + var(--rt-draggable-tree-indent) * var(--rt-draggable-tree-level))}@media(pointer:coarse){.rt-draggable-tree__row{--rt-draggable-tree-row-min-height: var(--rt-control-height-lg)}}:is(.rt-preset-material,[data-preset=material]) .rt-draggable-tree__row{--rt-draggable-tree-indent: calc(var(--rt-size-12) - var(--rt-space-0-5));--rt-draggable-tree-row-padding-block: var(--rt-space-1);--rt-draggable-tree-row-padding-inline: calc(var(--rt-space-2) + var(--rt-space-1));--rt-draggable-tree-row-gap: calc(var(--rt-space-2) + var(--rt-space-0-5));--rt-draggable-tree-row-spacing: calc(var(--rt-space-1) + var(--rt-space-0-5) / 2);--rt-draggable-tree-row-min-height: var(--rt-size-8);--rt-draggable-tree-row-box-sizing: border-box;--rt-draggable-tree-row-radius: var(--rt-radius-md);--rt-draggable-tree-row-shadow-hover: var(--rt-mat-shadow-level-2);--rt-draggable-tree-handle-opacity: 0;--rt-draggable-tree-toggle-color: var(--rt-color-action-primary);--rt-draggable-tree-mark-width: var(--rt-border-width-medium)}@media(pointer:coarse){:is(.rt-preset-material,[data-preset=material]) .rt-draggable-tree__row{--rt-draggable-tree-row-min-height: var(--rt-control-height-lg)}}.rt-draggable-tree__row+.rt-draggable-tree__row{margin-block-start:var(--rt-draggable-tree-row-spacing)}.rt-draggable-tree__row:hover,.rt-draggable-tree__row--highlighted{background-color:var(--rt-draggable-tree-row-bg-hover)}.rt-draggable-tree__row:hover{box-shadow:var(--rt-draggable-tree-row-shadow-hover)}.rt-draggable-tree__row--drop-before:before,.rt-draggable-tree__row--drop-after:after{position:absolute;background:var(--rt-draggable-tree-mark-color);block-size:var(--rt-draggable-tree-mark-width);content:\"\";inset-inline:0}.rt-draggable-tree__row--drop-before:before{inset-block-start:0}.rt-draggable-tree__row--drop-after:after{inset-block-end:0}.rt-draggable-tree__row--drop-inside{border-radius:var(--rt-draggable-tree-mark-radius);outline:var(--rt-draggable-tree-mark-width) solid var(--rt-draggable-tree-mark-color);outline-offset:calc(var(--rt-draggable-tree-mark-width) * -1)}.rt-draggable-tree__row.cdk-drag-preview{box-shadow:var(--rt-draggable-tree-preview-shadow)}.rt-draggable-tree__row.cdk-drag-placeholder{opacity:0}.rt-draggable-tree__row--disabled{cursor:not-allowed;opacity:var(--rt-input-disabled-opacity)}.rt-draggable-tree__row--disabled:hover{background-color:transparent;box-shadow:none}.rt-draggable-tree__handle,.rt-draggable-tree__handle-space,.rt-draggable-tree__toggle,.rt-draggable-tree__toggle-space{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--rt-input-icon-size);inline-size:var(--rt-input-icon-size)}.rt-draggable-tree__handle{cursor:grab;opacity:var(--rt-draggable-tree-handle-opacity)}.rt-draggable-tree__handle:active{cursor:grabbing}.rt-draggable-tree__row:is(:hover,.rt-draggable-tree__row--highlighted,.cdk-drag-preview){--rt-draggable-tree-handle-opacity: 1}.rt-draggable-tree__toggle{--rt-icon-color-muted: var(--rt-draggable-tree-toggle-color);padding:0;border:0;background:transparent;cursor:pointer}.rt-draggable-tree__content{display:flex;min-width:0;flex:1 1 auto;align-items:center;gap:var(--rt-space-sm)}.rt-draggable-tree__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}\n"]
+		}]
+	}],
+	propDecorators: {
+		nodeTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtDraggableTreeNodeDirective), { isSignal: true }]
+		}],
+		rowElements: [{
+			type: i0.ViewChildren,
+			args: ["row", { isSignal: true }]
+		}],
+		nodes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nodes",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["nodesChange"]
+		}],
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		canDrop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "canDrop",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		emptyIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyIcon",
+				required: false
+			}]
+		}],
+		moved: [{
+			type: i0.Output,
+			args: ["moved"]
+		}],
+		picked: [{
+			type: i0.Output,
+			args: ["picked"]
+		}]
+	}
+});
+export { RtDraggableTreeComponent, RtDraggableTreeNodeDirective, rtDragAllowed, rtDragKeyPlace, rtDragMove, rtDragPlace };
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-draggable-tree.mjs.map