@star-ng/ui 0.0.0-stage → 0.2.0

package/fesm2022/star-ng-ui-tree.mjs

@@ -0,0 +1,1446 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import { CdkConnectedOverlay, CdkOverlayOrigin } from "@angular/cdk/overlay";
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, afterEveryRender, afterRenderEffect, booleanAttribute, computed, effect, inject, input, linkedSignal, model, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
+import { STAR_UI_TEXT, StarDirectionService, matchesFilter, starInlineKey } from "@star-ng/ui/core";
+function flattenVisible(nodes, open, openAll = false) {
+	const rows = [];
+	const walk = (list, level, parentKey) => {
+		const setSize = list.length;
+		list.forEach((node, i) => {
+			rows.push({
+				node,
+				level,
+				setSize,
+				position: i + 1,
+				parentKey
+			});
+			if (node.children?.length && (openAll || open.has(node.key))) walk(node.children, level + 1, node.key);
+		});
+	};
+	walk(nodes, 1, null);
+	return rows;
+}
+function rowIndexOf(rows) {
+	const map = /* @__PURE__ */ new Map();
+	rows.forEach((row, i) => map.set(row.node.key, i));
+	return map;
+}
+function subtreeKeys(node) {
+	const keys = [];
+	const walk = (current) => {
+		keys.push(current.key);
+		current.children?.forEach(walk);
+	};
+	walk(node);
+	return keys;
+}
+function parentsOf(nodes) {
+	const map = /* @__PURE__ */ new Map();
+	const walk = (list, parent) => list.forEach((node) => {
+		map.set(node.key, parent);
+		if (node.children) walk(node.children, node.key);
+	});
+	walk(nodes, null);
+	return map;
+}
+function stillFocusable(previous, rowIndex, parents, firstKey) {
+	let key = previous ?? null;
+	while (key !== null) {
+		if (rowIndex.has(key)) return key;
+		key = parents.get(key) ?? null;
+	}
+	return firstKey;
+}
+function navigationTarget(rows, index, key, state) {
+	const row = rows[index];
+	if (!row) return null;
+	switch (key) {
+		case "ArrowDown": return rows[index + 1]?.node.key ?? null;
+		case "ArrowUp": return rows[index - 1]?.node.key ?? null;
+		case "Home": return rows[0]?.node.key ?? null;
+		case "End": return rows.at(-1)?.node.key ?? null;
+		case "ArrowRight": return state.hasChildren && state.expanded ? rows[index + 1]?.node.key ?? null : null;
+		case "ArrowLeft": return state.hasChildren && state.expanded ? null : row.parentKey;
+		default: return null;
+	}
+}
+function checkStates(nodes, selected, isLeaf) {
+	const states = /* @__PURE__ */ new Map();
+	const walk = (node) => {
+		if (!node.children?.length) {
+			states.set(node.key, selected.has(node.key));
+			const leaf = isLeaf(node.key);
+			return {
+				leaves: leaf ? 1 : 0,
+				checked: leaf && selected.has(node.key) ? 1 : 0
+			};
+		}
+		let leaves = 0;
+		let checked = 0;
+		for (const child of node.children) {
+			const part = walk(child);
+			leaves += part.leaves;
+			checked += part.checked;
+		}
+		states.set(node.key, checked === 0 ? false : checked === leaves ? true : "mixed");
+		return {
+			leaves,
+			checked
+		};
+	};
+	nodes.forEach(walk);
+	return states;
+}
+function scrollOffsetToReveal(index, itemSize, scrollOffset, viewportSize) {
+	const top = index * itemSize;
+	const bottom = top + itemSize;
+	if (top < scrollOffset) return top;
+	if (bottom > scrollOffset + viewportSize) return Math.max(0, bottom - viewportSize);
+	return null;
+}
+function filterNodes(nodes, query) {
+	if (!query) return [...nodes];
+	return nodes.flatMap((node) => {
+		const children = filterNodes(node.children ?? [], query);
+		return matchesFilter(node.label, query) || children.length ? [{
+			...node,
+			children
+		}] : [];
+	});
+}
+var StarTree = class StarTree {
+	text = inject(STAR_UI_TEXT);
+	host = inject(ElementRef);
+	doc = inject(DOCUMENT);
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	nodes = input([], ...ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []);
+	selectionMode = input(null, ...ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []);
+	expanded = model([], ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	filter = input(false, {
+		...ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	scrollHeight = input(null, ...ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []);
+	virtualScroll = input(false, {
+		...ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	virtualItemSize = input(34, {
+		...ngDevMode ? { debugName: "virtualItemSize" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	nodeSelect = output();
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	viewport = viewChild(CdkVirtualScrollViewport, ...ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []);
+	filtered = computed(() => filterNodes(this.nodes(), this.query()), ...ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []);
+	index = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		const walk = (nodes) => nodes.forEach((node) => {
+			map.set(node.key, node);
+			walk(node.children ?? []);
+		});
+		walk(this.nodes());
+		return map;
+	}, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	parents = computed(() => parentsOf(this.nodes()), ...ngDevMode ? [{ debugName: "parents" }] : /* istanbul ignore next */ []);
+	openKeys = computed(() => new Set(this.expanded()), ...ngDevMode ? [{ debugName: "openKeys" }] : /* istanbul ignore next */ []);
+	selectedKeys = computed(() => new Set(this.value()), ...ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []);
+	visible = computed(() => flattenVisible(this.filtered(), this.openKeys(), !!this.query()), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	rowIndex = computed(() => rowIndexOf(this.visible()), ...ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []);
+	checkMap = computed(() => this.selectionMode() === "checkbox" ? checkStates(this.filtered(), this.selectedKeys(), (key) => this.isLeaf(key)) : /* @__PURE__ */ new Map(), ...ngDevMode ? [{ debugName: "checkMap" }] : /* istanbul ignore next */ []);
+	focusKey = linkedSignal({
+		...ngDevMode ? { debugName: "focusKey" } : /* istanbul ignore next */ {},
+		source: this.visible,
+		computation: (rows, previous) => stillFocusable(previous?.value, this.rowIndex(), this.parents(), rows[0]?.node.key ?? null)
+	});
+	windowed = computed(() => this.virtualScroll() && !!this.scrollHeight() && this.virtualItemSize() > 0, ...ngDevMode ? [{ debugName: "windowed" }] : /* istanbul ignore next */ []);
+	showViewport = computed(() => this.windowed() && this.visible().length > 0, ...ngDevMode ? [{ debugName: "showViewport" }] : /* istanbul ignore next */ []);
+	viewportHeight = computed(() => `min(${this.visible().length * this.virtualItemSize()}px, ${this.scrollHeight()})`, ...ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []);
+	range = signal({
+		start: 0,
+		end: 0
+	}, ...ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []);
+	activeRendered = computed(() => {
+		const index = this.rowIndex().get(this.focusKey() ?? "");
+		const { start, end } = this.range();
+		return index !== void 0 && index >= start && index < end;
+	}, ...ngDevMode ? [{ debugName: "activeRendered" }] : /* istanbul ignore next */ []);
+	multiselectable = computed(() => this.selectionMode() !== "single" && this.selectionMode() !== null ? true : null, ...ngDevMode ? [{ debugName: "multiselectable" }] : /* istanbul ignore next */ []);
+	pendingFocus = null;
+	parked = false;
+	trackRow = (_, row) => row.node.key;
+	constructor() {
+		effect((onCleanup) => {
+			const viewport = this.viewport();
+			if (!viewport) {
+				this.range.set({
+					start: 0,
+					end: 0
+				});
+				return;
+			}
+			this.range.set({ ...viewport.getRenderedRange() });
+			const subscription = viewport.renderedRangeStream.subscribe((range) => {
+				this.parkFocus(range);
+				this.range.set({ ...range });
+			});
+			onCleanup(() => subscription.unsubscribe());
+		});
+		effect(() => {
+			this.visible();
+			untracked(() => {
+				const viewport = this.viewport();
+				if (viewport) this.parkFocus(viewport.getRenderedRange());
+			});
+		});
+		afterRenderEffect(() => {
+			this.viewportHeight();
+			this.viewport()?.checkViewportSize();
+		});
+		afterEveryRender(() => {
+			this.applyPendingFocus();
+			if (this.parked) this.restoreParkedFocus();
+		});
+	}
+	isExpanded(node) {
+		return !!this.query() || this.openKeys().has(node.key);
+	}
+	toggle(node, open = !this.isExpanded(node)) {
+		this.expanded.update((keys) => {
+			if (!open) return keys.filter((k) => k !== node.key);
+			return keys.includes(node.key) ? keys : [...keys, node.key];
+		});
+	}
+	isSelected(node) {
+		return this.selectedKeys().has(node.key);
+	}
+	checkState(node) {
+		const known = this.checkMap().get(node.key);
+		if (known !== void 0) return known;
+		if (!node.children?.length) return this.isSelected(node);
+		return checkStates([node], this.selectedKeys(), (key) => this.isLeaf(key)).get(node.key) ?? false;
+	}
+	select(node) {
+		const mode = this.selectionMode();
+		if (!mode || this.disabled() || node.disabled || node.selectable === false) return;
+		if (mode === "single") this.value.set([node.key]);
+		else if (mode === "multiple") this.value.update((keys) => keys.includes(node.key) ? keys.filter((k) => k !== node.key) : [...keys, node.key]);
+		else {
+			const branch = subtreeKeys(node);
+			const inBranch = new Set(branch);
+			const on = this.checkState(node) !== true;
+			this.value.update((keys) => {
+				const rest = keys.filter((k) => !inBranch.has(k));
+				return on ? [...rest, ...branch.filter((key) => this.isLeaf(key))] : rest;
+			});
+		}
+		this.nodeSelect.emit(node);
+	}
+	onClick(node, event) {
+		this.focusKey.set(node.key);
+		event.currentTarget.focus();
+		if (this.selectionMode()) this.select(node);
+		else if (node.children?.length) this.toggle(node);
+	}
+	onRowFocus(key) {
+		this.focusKey.set(key);
+		this.pendingFocus = null;
+		this.parked = false;
+	}
+	focusRow(key) {
+		if (!key) return;
+		this.focusKey.set(key);
+		this.pendingFocus = key;
+		if (this.showViewport()) this.revealRow(key);
+		queueMicrotask(() => this.applyPendingFocus());
+	}
+	revealRow(key) {
+		const viewport = this.viewport();
+		const index = this.rowIndex().get(key);
+		if (!viewport || index === void 0) return;
+		const offset = scrollOffsetToReveal(index, this.virtualItemSize(), viewport.measureScrollOffset(), viewport.getViewportSize());
+		if (offset !== null) viewport.scrollToOffset(offset);
+	}
+	rowElement(key) {
+		return this.host.nativeElement.querySelector(`[data-key="${CSS.escape(key)}"]`);
+	}
+	applyPendingFocus() {
+		const key = this.pendingFocus;
+		if (key === null) return;
+		if (!this.rowIndex().has(key)) {
+			this.pendingFocus = null;
+			return;
+		}
+		const row = this.rowElement(key);
+		if (!row) return;
+		this.pendingFocus = null;
+		row.focus({ preventScroll: this.windowed() });
+	}
+	parkFocus(range) {
+		const viewport = this.viewport()?.elementRef.nativeElement;
+		const active = this.doc.activeElement;
+		if (!viewport || !active || active === viewport || !viewport.contains(active)) return;
+		const key = active.closest("[data-key]")?.dataset["key"];
+		const index = key === void 0 ? void 0 : this.rowIndex().get(key);
+		if (index !== void 0 && index >= range.start && index < range.end) return;
+		this.parked = true;
+		viewport.focus({ preventScroll: true });
+	}
+	restoreParkedFocus() {
+		const viewport = this.viewport()?.elementRef.nativeElement;
+		if (!viewport || this.doc.activeElement !== viewport) {
+			this.parked = false;
+			return;
+		}
+		const key = this.focusKey();
+		if (key === null) return;
+		this.rowElement(key)?.focus({ preventScroll: true });
+	}
+	onViewportFocus() {
+		if (!this.parked) this.focusRow(this.focusKey());
+	}
+	onViewportKeydown(event) {
+		if (event.target !== event.currentTarget) return;
+		const row = this.visible()[this.rowIndex().get(this.focusKey() ?? "") ?? -1];
+		if (row) this.onKeydown(event, row);
+	}
+	onKeydown(event, row) {
+		const rows = this.visible();
+		const item = this.pendingFocus === null ? row : rows[this.rowIndex().get(this.pendingFocus) ?? -1] ?? row;
+		const index = this.rowIndex().get(item.node.key) ?? -1;
+		const hasChildren = !!item.node.children?.length;
+		const expanded = hasChildren && this.isExpanded(item.node);
+		const key = starInlineKey(event);
+		const target = () => navigationTarget(rows, index, key, {
+			hasChildren,
+			expanded
+		});
+		const handled = () => event.preventDefault();
+		switch (key) {
+			case "ArrowDown":
+			case "ArrowUp":
+			case "Home":
+			case "End":
+				handled();
+				return this.focusRow(target());
+			case "ArrowRight":
+				handled();
+				if (hasChildren && !expanded) this.toggle(item.node, true);
+				else this.focusRow(target());
+				return;
+			case "ArrowLeft":
+				handled();
+				if (expanded) this.toggle(item.node, false);
+				else this.focusRow(target());
+				return;
+			case "Enter":
+			case " ":
+				handled();
+				if (this.selectionMode()) this.select(item.node);
+				else if (hasChildren) this.toggle(item.node);
+				return;
+			case "*": {
+				handled();
+				const siblings = rows.filter((r) => r.parentKey === item.parentKey && r.node.children?.length).map((r) => r.node.key);
+				this.expanded.update((keys) => {
+					const open = new Set(keys);
+					const added = siblings.filter((key) => !open.has(key));
+					return added.length ? [...keys, ...added] : keys;
+				});
+				return;
+			}
+		}
+	}
+	labelFor(key) {
+		return this.index().get(key)?.label ?? key;
+	}
+	isLeaf(key) {
+		return !this.index().get(key)?.children?.length;
+	}
+	focus() {
+		this.focusRow(this.focusKey());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTree,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarTree,
+		isStandalone: true,
+		selector: "star-tree",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nodes: {
+				classPropertyName: "nodes",
+				publicName: "nodes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionMode: {
+				classPropertyName: "selectionMode",
+				publicName: "selectionMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filter: {
+				classPropertyName: "filter",
+				publicName: "filter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scrollHeight: {
+				classPropertyName: "scrollHeight",
+				publicName: "scrollHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			virtualScroll: {
+				classPropertyName: "virtualScroll",
+				publicName: "virtualScroll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			virtualItemSize: {
+				classPropertyName: "virtualItemSize",
+				publicName: "virtualItemSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			expanded: "expandedChange",
+			touch: "touch",
+			nodeSelect: "nodeSelect"
+		},
+		host: { classAttribute: "star-tree" },
+		viewQueries: [{
+			propertyName: "viewport",
+			first: true,
+			predicate: CdkVirtualScrollViewport,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @if (filter()) {
+      <div class="star-panel__filter">
+        <i class="ph-bold ph-magnifying-glass" aria-hidden="true"></i>
+        <input
+          #filterInput
+          type="search"
+          class="star-input star-input--sm"
+          autocomplete="off"
+          [attr.aria-label]="text.filterPlaceholder"
+          [placeholder]="text.filterPlaceholder"
+          [value]="query()"
+          (input)="query.set(filterInput.value)"
+        />
+      </div>
+    }
+    <ng-template #row let-item>
+      <li
+        class="star-tree__item"
+        role="treeitem"
+        [attr.data-key]="item.node.key"
+        [attr.aria-level]="item.level"
+        [attr.aria-setsize]="item.setSize"
+        [attr.aria-posinset]="item.position"
+        [attr.aria-expanded]="item.node.children?.length ? isExpanded(item.node) : null"
+        [attr.aria-selected]="
+          selectionMode() && selectionMode() !== 'checkbox' ? isSelected(item.node) : null
+        "
+        [attr.aria-checked]="selectionMode() === 'checkbox' ? checkState(item.node) : null"
+        [attr.aria-disabled]="item.node.disabled || null"
+        [attr.tabindex]="focusKey() === item.node.key ? 0 : -1"
+        [class.star-tree__item--selected]="isSelected(item.node)"
+        [style.--star-tree-level]="item.level - 1"
+        [style.height.px]="showViewport() ? virtualItemSize() : null"
+        (click)="onClick(item.node, $event)"
+        (keydown)="onKeydown($event, item)"
+        (focus)="onRowFocus(item.node.key)"
+      >
+        @if (item.node.children?.length) {
+          <span
+            class="star-tree__toggle"
+            aria-hidden="true"
+            (click)="$event.stopPropagation(); toggle(item.node)"
+          >
+            <i class="ph-bold ph-caret-right"></i>
+          </span>
+        } @else {
+          <span class="star-tree__toggle star-tree__toggle--leaf" aria-hidden="true"></span>
+        }
+        @if (selectionMode() === 'checkbox') {
+          <span
+            class="star-check__box star-tree__check"
+            aria-hidden="true"
+            [class.star-tree__check--on]="checkState(item.node) !== false"
+          >
+            @if (checkState(item.node) === 'mixed') {
+              <i class="ph-bold ph-minus"></i>
+            } @else if (checkState(item.node) === true) {
+              <i class="ph-bold ph-check"></i>
+            }
+          </span>
+        }
+        @if (item.node.icon) {
+          <i class="star-tree__icon" [class]="item.node.icon" aria-hidden="true"></i>
+        }
+        <span class="star-tree__label">{{ item.node.label }}</span>
+      </li>
+    </ng-template>
+    @if (showViewport()) {
+      <cdk-virtual-scroll-viewport
+        #viewport
+        class="star-tree__viewport"
+        role="tree"
+        [itemSize]="virtualItemSize()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-multiselectable]="multiselectable()"
+        [attr.tabindex]="activeRendered() ? -1 : 0"
+        [style.height]="viewportHeight()"
+        (focus)="onViewportFocus()"
+        (blur)="parked = false"
+        (keydown)="onViewportKeydown($event)"
+      >
+        <ng-template
+          cdkVirtualFor
+          let-item
+          [cdkVirtualForOf]="visible()"
+          [cdkVirtualForTrackBy]="trackRow"
+        >
+          <ng-container [ngTemplateOutlet]="row" [ngTemplateOutletContext]="{ $implicit: item }" />
+        </ng-template>
+      </cdk-virtual-scroll-viewport>
+    } @else {
+      <ul
+        #tree
+        class="star-tree__list"
+        role="tree"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-multiselectable]="multiselectable()"
+        [style.max-height]="scrollHeight()"
+      >
+        @for (item of visible(); track item.node.key) {
+          <ng-container [ngTemplateOutlet]="row" [ngTemplateOutletContext]="{ $implicit: item }" />
+        } @empty {
+          <li class="star-listbox__empty" role="presentation">{{ text.emptyFilterMessage }}</li>
+        }
+      </ul>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: CdkVirtualScrollViewport,
+				selector: "cdk-virtual-scroll-viewport",
+				inputs: ["orientation", "appendOnly"],
+				outputs: ["scrolledIndexChange"]
+			},
+			{
+				kind: "directive",
+				type: CdkFixedSizeVirtualScroll,
+				selector: "cdk-virtual-scroll-viewport[itemSize]",
+				inputs: [
+					"itemSize",
+					"minBufferPx",
+					"maxBufferPx"
+				]
+			},
+			{
+				kind: "directive",
+				type: CdkVirtualForOf,
+				selector: "[cdkVirtualFor][cdkVirtualForOf]",
+				inputs: [
+					"cdkVirtualForOf",
+					"cdkVirtualForTrackBy",
+					"cdkVirtualForTemplate",
+					"cdkVirtualForTemplateCacheSize"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTree,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-tree",
+			imports: [
+				CdkVirtualScrollViewport,
+				CdkFixedSizeVirtualScroll,
+				CdkVirtualForOf,
+				NgTemplateOutlet
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-tree" },
+			template: `
+    @if (filter()) {
+      <div class="star-panel__filter">
+        <i class="ph-bold ph-magnifying-glass" aria-hidden="true"></i>
+        <input
+          #filterInput
+          type="search"
+          class="star-input star-input--sm"
+          autocomplete="off"
+          [attr.aria-label]="text.filterPlaceholder"
+          [placeholder]="text.filterPlaceholder"
+          [value]="query()"
+          (input)="query.set(filterInput.value)"
+        />
+      </div>
+    }
+    <ng-template #row let-item>
+      <li
+        class="star-tree__item"
+        role="treeitem"
+        [attr.data-key]="item.node.key"
+        [attr.aria-level]="item.level"
+        [attr.aria-setsize]="item.setSize"
+        [attr.aria-posinset]="item.position"
+        [attr.aria-expanded]="item.node.children?.length ? isExpanded(item.node) : null"
+        [attr.aria-selected]="
+          selectionMode() && selectionMode() !== 'checkbox' ? isSelected(item.node) : null
+        "
+        [attr.aria-checked]="selectionMode() === 'checkbox' ? checkState(item.node) : null"
+        [attr.aria-disabled]="item.node.disabled || null"
+        [attr.tabindex]="focusKey() === item.node.key ? 0 : -1"
+        [class.star-tree__item--selected]="isSelected(item.node)"
+        [style.--star-tree-level]="item.level - 1"
+        [style.height.px]="showViewport() ? virtualItemSize() : null"
+        (click)="onClick(item.node, $event)"
+        (keydown)="onKeydown($event, item)"
+        (focus)="onRowFocus(item.node.key)"
+      >
+        @if (item.node.children?.length) {
+          <span
+            class="star-tree__toggle"
+            aria-hidden="true"
+            (click)="$event.stopPropagation(); toggle(item.node)"
+          >
+            <i class="ph-bold ph-caret-right"></i>
+          </span>
+        } @else {
+          <span class="star-tree__toggle star-tree__toggle--leaf" aria-hidden="true"></span>
+        }
+        @if (selectionMode() === 'checkbox') {
+          <span
+            class="star-check__box star-tree__check"
+            aria-hidden="true"
+            [class.star-tree__check--on]="checkState(item.node) !== false"
+          >
+            @if (checkState(item.node) === 'mixed') {
+              <i class="ph-bold ph-minus"></i>
+            } @else if (checkState(item.node) === true) {
+              <i class="ph-bold ph-check"></i>
+            }
+          </span>
+        }
+        @if (item.node.icon) {
+          <i class="star-tree__icon" [class]="item.node.icon" aria-hidden="true"></i>
+        }
+        <span class="star-tree__label">{{ item.node.label }}</span>
+      </li>
+    </ng-template>
+    @if (showViewport()) {
+      <cdk-virtual-scroll-viewport
+        #viewport
+        class="star-tree__viewport"
+        role="tree"
+        [itemSize]="virtualItemSize()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-multiselectable]="multiselectable()"
+        [attr.tabindex]="activeRendered() ? -1 : 0"
+        [style.height]="viewportHeight()"
+        (focus)="onViewportFocus()"
+        (blur)="parked = false"
+        (keydown)="onViewportKeydown($event)"
+      >
+        <ng-template
+          cdkVirtualFor
+          let-item
+          [cdkVirtualForOf]="visible()"
+          [cdkVirtualForTrackBy]="trackRow"
+        >
+          <ng-container [ngTemplateOutlet]="row" [ngTemplateOutletContext]="{ $implicit: item }" />
+        </ng-template>
+      </cdk-virtual-scroll-viewport>
+    } @else {
+      <ul
+        #tree
+        class="star-tree__list"
+        role="tree"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-multiselectable]="multiselectable()"
+        [style.max-height]="scrollHeight()"
+      >
+        @for (item of visible(); track item.node.key) {
+          <ng-container [ngTemplateOutlet]="row" [ngTemplateOutletContext]="{ $implicit: item }" />
+        } @empty {
+          <li class="star-listbox__empty" role="presentation">{{ text.emptyFilterMessage }}</li>
+        }
+      </ul>
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		nodes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nodes",
+				required: false
+			}]
+		}],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		filter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filter",
+				required: false
+			}]
+		}],
+		scrollHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollHeight",
+				required: false
+			}]
+		}],
+		virtualScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualScroll",
+				required: false
+			}]
+		}],
+		virtualItemSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualItemSize",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		nodeSelect: [{
+			type: i0.Output,
+			args: ["nodeSelect"]
+		}],
+		viewport: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }]
+		}]
+	}
+});
+const POSITIONS = [{
+	originX: "start",
+	originY: "bottom",
+	overlayX: "start",
+	overlayY: "top",
+	offsetY: 6
+}, {
+	originX: "start",
+	originY: "top",
+	overlayX: "start",
+	overlayY: "bottom",
+	offsetY: -6
+}];
+var StarTreeSelect = class StarTreeSelect {
+	directionSync = inject(StarDirectionService);
+	text = inject(STAR_UI_TEXT);
+	inputId = inject(_IdGenerator).getId("star-tree-select-");
+	positions = POSITIONS;
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	nodes = input([], ...ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []);
+	selectionMode = input("single", ...ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []);
+	expanded = model([], ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	filter = input(false, {
+		...ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	virtualScroll = input(false, {
+		...ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	virtualItemSize = input(34, {
+		...ngDevMode ? { debugName: "virtualItemSize" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	showClear = input(false, {
+		...ngDevMode ? { debugName: "showClear" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	placeholder = input(null, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	maxSelectedLabels = input(3, ...ngDevMode ? [{ debugName: "maxSelectedLabels" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	panelTree = viewChild("panelTree", ...ngDevMode ? [{ debugName: "panelTree" }] : /* istanbul ignore next */ []);
+	trigger = viewChild.required("trigger", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	labels = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		const walk = (nodes) => nodes.forEach((n) => {
+			map.set(n.key, n.label);
+			walk(n.children ?? []);
+		});
+		walk(this.nodes());
+		return map;
+	}, ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	summary = computed(() => {
+		const keys = this.value();
+		if (keys.length > this.maxSelectedLabels()) return this.text.selectedItems(keys.length);
+		return keys.map((key) => this.labels().get(key) ?? key).join(", ");
+	}, ...ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []);
+	triggerName = computed(() => {
+		const label = this.ariaLabel();
+		if (!label) return null;
+		return `${label}: ${this.summary() || (this.placeholder() ?? this.text.selectPlaceholder)}`;
+	}, ...ngDevMode ? [{ debugName: "triggerName" }] : /* istanbul ignore next */ []);
+	close(focus = false) {
+		if (!this.open()) return;
+		this.open.set(false);
+		if (focus) this.trigger().nativeElement.focus();
+	}
+	onOutside(event) {
+		if (this.trigger().nativeElement.contains(event.target)) return;
+		this.close();
+		this.touch.emit();
+	}
+	focus() {
+		this.trigger().nativeElement.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTreeSelect,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarTreeSelect,
+		isStandalone: true,
+		selector: "star-tree-select",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nodes: {
+				classPropertyName: "nodes",
+				publicName: "nodes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionMode: {
+				classPropertyName: "selectionMode",
+				publicName: "selectionMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filter: {
+				classPropertyName: "filter",
+				publicName: "filter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			virtualScroll: {
+				classPropertyName: "virtualScroll",
+				publicName: "virtualScroll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			virtualItemSize: {
+				classPropertyName: "virtualItemSize",
+				publicName: "virtualItemSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showClear: {
+				classPropertyName: "showClear",
+				publicName: "showClear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxSelectedLabels: {
+				classPropertyName: "maxSelectedLabels",
+				publicName: "maxSelectedLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			expanded: "expandedChange",
+			touch: "touch"
+		},
+		host: {
+			properties: {
+				"class.star-select--open": "open()",
+				"class.star-select--disabled": "disabled()",
+				"class.star-select--invalid": "invalid() && touched()"
+			},
+			classAttribute: "star-select star-tree-select"
+		},
+		viewQueries: [{
+			propertyName: "panelTree",
+			first: true,
+			predicate: ["panelTree"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "trigger",
+			first: true,
+			predicate: ["trigger"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="star-select__control" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+      <button
+        #trigger
+        type="button"
+        class="star-select__trigger star-tree-select__trigger"
+        aria-haspopup="tree"
+        [id]="inputId"
+        [disabled]="disabled()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-label]="triggerName()"
+        (click)="open.set(!open())"
+        (keydown.arrowdown)="$event.preventDefault(); open.set(true)"
+        (blur)="!open() && touch.emit()"
+      >
+        @if (summary()) {
+          <span class="star-select__value">{{ summary() }}</span>
+        } @else {
+          <span class="star-select__placeholder">{{
+            placeholder() ?? text.selectPlaceholder
+          }}</span>
+        }
+      </button>
+      @if (showClear() && value().length && !disabled()) {
+        <button
+          type="button"
+          class="star-select__icon-btn"
+          [attr.aria-label]="text.clear"
+          (click)="value.set([])"
+        >
+          <i class="ph-bold ph-x" aria-hidden="true"></i>
+        </button>
+      }
+      <i class="ph-bold ph-caret-down star-select__caret" aria-hidden="true"></i>
+    </div>
+    <ng-template
+      cdkConnectedOverlay
+      cdkConnectedOverlayUsePopover="inline"
+      [cdkConnectedOverlayMinWidth]="origin.elementRef.nativeElement.offsetWidth"
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayPositions]="positions"
+      (attach)="panelTree()?.focus()"
+      (detach)="close()"
+      (overlayOutsideClick)="onOutside($event)"
+      (overlayKeydown)="$event.key === 'Escape' && close(true)"
+    >
+      <div class="star-panel star-tree-select__panel">
+        <star-tree
+          #panelTree
+          [nodes]="nodes()"
+          [selectionMode]="selectionMode()"
+          [(value)]="value"
+          [(expanded)]="expanded"
+          [filter]="filter()"
+          scrollHeight="18rem"
+          [virtualScroll]="virtualScroll()"
+          [virtualItemSize]="virtualItemSize()"
+          [ariaLabel]="ariaLabel()"
+          (nodeSelect)="selectionMode() === 'single' && close(true)"
+        />
+      </div>
+    </ng-template>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "component",
+				type: StarTree,
+				selector: "star-tree",
+				inputs: [
+					"value",
+					"nodes",
+					"selectionMode",
+					"expanded",
+					"filter",
+					"scrollHeight",
+					"virtualScroll",
+					"virtualItemSize",
+					"ariaLabel",
+					"disabled"
+				],
+				outputs: [
+					"valueChange",
+					"expandedChange",
+					"touch",
+					"nodeSelect"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTreeSelect,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-tree-select",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				StarTree
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-select star-tree-select",
+				"[class.star-select--open]": "open()",
+				"[class.star-select--disabled]": "disabled()",
+				"[class.star-select--invalid]": "invalid() && touched()"
+			},
+			template: `
+    <div class="star-select__control" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+      <button
+        #trigger
+        type="button"
+        class="star-select__trigger star-tree-select__trigger"
+        aria-haspopup="tree"
+        [id]="inputId"
+        [disabled]="disabled()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-label]="triggerName()"
+        (click)="open.set(!open())"
+        (keydown.arrowdown)="$event.preventDefault(); open.set(true)"
+        (blur)="!open() && touch.emit()"
+      >
+        @if (summary()) {
+          <span class="star-select__value">{{ summary() }}</span>
+        } @else {
+          <span class="star-select__placeholder">{{
+            placeholder() ?? text.selectPlaceholder
+          }}</span>
+        }
+      </button>
+      @if (showClear() && value().length && !disabled()) {
+        <button
+          type="button"
+          class="star-select__icon-btn"
+          [attr.aria-label]="text.clear"
+          (click)="value.set([])"
+        >
+          <i class="ph-bold ph-x" aria-hidden="true"></i>
+        </button>
+      }
+      <i class="ph-bold ph-caret-down star-select__caret" aria-hidden="true"></i>
+    </div>
+    <ng-template
+      cdkConnectedOverlay
+      cdkConnectedOverlayUsePopover="inline"
+      [cdkConnectedOverlayMinWidth]="origin.elementRef.nativeElement.offsetWidth"
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayPositions]="positions"
+      (attach)="panelTree()?.focus()"
+      (detach)="close()"
+      (overlayOutsideClick)="onOutside($event)"
+      (overlayKeydown)="$event.key === 'Escape' && close(true)"
+    >
+      <div class="star-panel star-tree-select__panel">
+        <star-tree
+          #panelTree
+          [nodes]="nodes()"
+          [selectionMode]="selectionMode()"
+          [(value)]="value"
+          [(expanded)]="expanded"
+          [filter]="filter()"
+          scrollHeight="18rem"
+          [virtualScroll]="virtualScroll()"
+          [virtualItemSize]="virtualItemSize()"
+          [ariaLabel]="ariaLabel()"
+          (nodeSelect)="selectionMode() === 'single' && close(true)"
+        />
+      </div>
+    </ng-template>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		nodes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nodes",
+				required: false
+			}]
+		}],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		filter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filter",
+				required: false
+			}]
+		}],
+		virtualScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualScroll",
+				required: false
+			}]
+		}],
+		virtualItemSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualItemSize",
+				required: false
+			}]
+		}],
+		showClear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showClear",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		maxSelectedLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSelectedLabels",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		panelTree: [{
+			type: i0.ViewChild,
+			args: ["panelTree", { isSignal: true }]
+		}],
+		trigger: [{
+			type: i0.ViewChild,
+			args: ["trigger", { isSignal: true }]
+		}]
+	}
+});
+export { StarTree, StarTreeSelect, flattenVisible, navigationTarget, parentsOf, rowIndexOf, scrollOffsetToReveal, stillFocusable };
+
+//# sourceMappingURL=star-ng-ui-tree.mjs.map