@star-ng/ui 0.0.0-stage → 0.2.0

package/fesm2022/star-ng-ui-data-display.mjs

@@ -0,0 +1,1870 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, afterEveryRender, booleanAttribute, computed, contentChild, effect, inject, input, isDevMode, linkedSignal, model, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
+import { STAR_UI_TEXT, optionText, readOption, starInlineKey } from "@star-ng/ui/core";
+import { StarPaginator } from "@star-ng/ui/paginator";
+import { flattenVisible, navigationTarget, parentsOf, rowIndexOf, scrollOffsetToReveal, stillFocusable } from "@star-ng/ui/tree";
+function rowWindow(count, itemSize, scrollTop, viewportSize, bufferRows) {
+	if (count <= 0 || itemSize <= 0) return {
+		start: 0,
+		end: 0,
+		before: 0,
+		after: 0
+	};
+	const visible = Math.ceil(Math.max(0, viewportSize) / itemSize) + 1;
+	const first = Math.min(Math.max(0, Math.floor(Math.max(0, scrollTop) / itemSize)), Math.max(0, count - visible));
+	const start = Math.max(0, first - bufferRows);
+	const end = Math.min(count, first + visible + bufferRows);
+	return {
+		start,
+		end,
+		before: start * itemSize,
+		after: (count - end) * itemSize
+	};
+}
+function revealRowOffset(index, itemSize, scrollTop, viewportSize, headerSize) {
+	return scrollOffsetToReveal(index, itemSize, scrollTop, Math.max(itemSize, viewportSize - headerSize));
+}
+function ariaRowIndex(index) {
+	return index + 2;
+}
+function ariaRowCount(rowCount) {
+	return rowCount + 1;
+}
+const TREE_TABLE_ROW_HEIGHT = 53;
+const BUFFER_ROWS = 8;
+const FALLBACK_VIEWPORT = 600;
+var StarTreeTable = class StarTreeTable {
+	text = inject(STAR_UI_TEXT);
+	doc = inject(DOCUMENT);
+	nodes = input([], ...ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []);
+	columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+	expanded = model([], ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	scrollHeight = input(null, ...ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []);
+	virtualScroll = input(false, {
+		...ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	virtualItemSize = input(TREE_TABLE_ROW_HEIGHT, {
+		...ngDevMode ? { debugName: "virtualItemSize" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	scroller = viewChild("scroller", ...ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []);
+	header = viewChild("header", ...ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []);
+	openKeys = computed(() => new Set(this.expanded()), ...ngDevMode ? [{ debugName: "openKeys" }] : /* istanbul ignore next */ []);
+	parents = computed(() => parentsOf(this.nodes()), ...ngDevMode ? [{ debugName: "parents" }] : /* istanbul ignore next */ []);
+	rows = computed(() => flattenVisible(this.nodes(), this.openKeys()), ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	rowIndex = computed(() => rowIndexOf(this.rows()), ...ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []);
+	focusKey = linkedSignal({
+		...ngDevMode ? { debugName: "focusKey" } : /* istanbul ignore next */ {},
+		source: this.rows,
+		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 */ []);
+	scrollTop = signal(0, ...ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []);
+	viewportHeight = signal(0, ...ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []);
+	window = computed(() => {
+		if (!this.windowed()) return {
+			start: 0,
+			end: this.rows().length,
+			before: 0,
+			after: 0
+		};
+		return rowWindow(this.rows().length, this.virtualItemSize(), this.scrollTop(), this.viewportHeight() || FALLBACK_VIEWPORT, BUFFER_ROWS);
+	}, {
+		...ngDevMode ? { debugName: "window" } : /* istanbul ignore next */ {},
+		equal: (a, b) => a.start === b.start && a.end === b.end && a.before === b.before && a.after === b.after
+	});
+	entries = computed(() => {
+		const rows = this.rows();
+		if (!this.windowed()) return rows.map((row) => ({
+			row,
+			aria: null
+		}));
+		const { start, end } = this.window();
+		return rows.slice(start, end).map((row, i) => ({
+			row,
+			aria: ariaRowIndex(start + i)
+		}));
+	}, ...ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []);
+	activeRendered = computed(() => {
+		const index = this.rowIndex().get(this.focusKey() ?? "");
+		const { start, end } = this.window();
+		return index !== void 0 && index >= start && index < end;
+	}, ...ngDevMode ? [{ debugName: "activeRendered" }] : /* istanbul ignore next */ []);
+	ariaRowCount = ariaRowCount;
+	pendingFocus = null;
+	parked = false;
+	constructor() {
+		effect(() => {
+			const window = this.window();
+			this.rowIndex();
+			untracked(() => {
+				if (this.windowed()) this.parkFocus(window);
+			});
+		});
+		effect((onCleanup) => {
+			const scroller = this.scroller()?.nativeElement;
+			if (!this.windowed() || !scroller || typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(() => this.syncScroll());
+			observer.observe(scroller);
+			onCleanup(() => observer.disconnect());
+		});
+		afterEveryRender({ read: () => this.syncScroll() });
+		afterEveryRender(() => {
+			this.applyPendingFocus();
+			if (this.parked) this.restoreParkedFocus();
+		});
+		if (isDevMode()) effect(() => {
+			if (this.virtualScroll() && !this.scrollHeight()) console.warn("star-tree-table: virtualScroll needs scrollHeight. Without it the table renders all rows.");
+		});
+	}
+	isOpen(key) {
+		return this.openKeys().has(key);
+	}
+	toggle(key, open = !this.isOpen(key)) {
+		this.expanded.update((keys) => {
+			if (!open) return keys.filter((k) => k !== key);
+			return keys.includes(key) ? keys : [...keys, key];
+		});
+	}
+	syncScroll() {
+		const scroller = this.scroller()?.nativeElement;
+		if (!scroller || !this.windowed()) return;
+		this.scrollTop.set(scroller.scrollTop);
+		if (scroller.clientHeight) this.viewportHeight.set(scroller.clientHeight);
+	}
+	onRowFocus(event, key) {
+		this.focusKey.set(key);
+		this.pendingFocus = null;
+		this.parked = false;
+		if (event.target === event.currentTarget && this.windowed()) this.revealRow(key);
+	}
+	focusRow(key) {
+		if (!key) return;
+		this.focusKey.set(key);
+		this.pendingFocus = key;
+		if (this.windowed()) this.revealRow(key);
+		queueMicrotask(() => this.applyPendingFocus());
+	}
+	revealRow(key) {
+		const scroller = this.scroller()?.nativeElement;
+		const index = this.rowIndex().get(key);
+		if (!scroller || index === void 0) return;
+		const offset = revealRowOffset(index, this.virtualItemSize(), scroller.scrollTop, scroller.clientHeight, this.header()?.nativeElement.offsetHeight ?? 0);
+		if (offset === null) return;
+		scroller.scrollTop = offset;
+		this.syncScroll();
+	}
+	rowElement(key) {
+		return this.scroller()?.nativeElement.querySelector(`tbody > tr[data-key="${CSS.escape(key)}"]`) ?? null;
+	}
+	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(window) {
+		const scroller = this.scroller()?.nativeElement;
+		const active = this.doc.activeElement;
+		if (!scroller || !active || active === scroller || !scroller.contains(active)) return;
+		const key = active.closest("tbody > tr[data-key]")?.dataset["key"];
+		const index = key === void 0 ? void 0 : this.rowIndex().get(key);
+		if (index !== void 0 && index >= window.start && index < window.end) return;
+		this.parked = true;
+		scroller.focus({ preventScroll: true });
+	}
+	restoreParkedFocus() {
+		const scroller = this.scroller()?.nativeElement;
+		if (!scroller || this.doc.activeElement !== scroller) {
+			this.parked = false;
+			return;
+		}
+		const key = this.focusKey();
+		if (key === null) return;
+		this.rowElement(key)?.focus({ preventScroll: true });
+	}
+	onScrollerFocus() {
+		if (this.windowed() && !this.parked) this.focusRow(this.focusKey());
+	}
+	onScrollerKeydown(event) {
+		if (!this.windowed() || event.target !== event.currentTarget) return;
+		const row = this.rows()[this.rowIndex().get(this.focusKey() ?? "") ?? -1];
+		if (row) this.onKeydown(event, row);
+	}
+	onKeydown(event, row) {
+		const rows = this.rows();
+		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.isOpen(item.node.key);
+		const key = starInlineKey(event);
+		const move = (target) => {
+			if (target === null) return;
+			event.preventDefault();
+			this.focusRow(target);
+		};
+		switch (key) {
+			case "ArrowDown":
+			case "ArrowUp":
+			case "Home":
+			case "End": return move(navigationTarget(rows, index, key, {
+				hasChildren,
+				expanded
+			}));
+			case "ArrowRight":
+				if (hasChildren) {
+					event.preventDefault();
+					if (!expanded) this.toggle(item.node.key, true);
+				}
+				return;
+			case "ArrowLeft":
+				event.preventDefault();
+				if (expanded) this.toggle(item.node.key, false);
+				else move(item.parentKey);
+				return;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTreeTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarTreeTable,
+		isStandalone: true,
+		selector: "star-tree-table",
+		inputs: {
+			nodes: {
+				classPropertyName: "nodes",
+				publicName: "nodes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			columns: {
+				classPropertyName: "columns",
+				publicName: "columns",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				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
+			}
+		},
+		outputs: { expanded: "expandedChange" },
+		host: {
+			properties: {
+				"class.star-table--sticky": "!!scrollHeight()",
+				"class.star-table--virtual": "windowed()",
+				"style.--star-table-row-height.px": "windowed() ? virtualItemSize() : null"
+			},
+			classAttribute: "star-table star-tree-table"
+		},
+		viewQueries: [{
+			propertyName: "scroller",
+			first: true,
+			predicate: ["scroller"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "header",
+			first: true,
+			predicate: ["header"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div
+      #scroller
+      class="star-table__scroll"
+      [attr.role]="windowed() ? 'group' : null"
+      [attr.aria-label]="windowed() ? ariaLabel() : null"
+      [attr.tabindex]="windowed() ? (activeRendered() ? -1 : 0) : null"
+      [style.max-height]="scrollHeight()"
+      (scroll)="syncScroll()"
+      (focus)="onScrollerFocus()"
+      (blur)="parked = false"
+      (keydown)="onScrollerKeydown($event)"
+    >
+      <table
+        role="treegrid"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-rowcount]="windowed() ? ariaRowCount(rows().length) : null"
+      >
+        <thead #header>
+          <tr [attr.aria-rowindex]="windowed() ? 1 : null">
+            @for (column of columns(); track column.field) {
+              <th
+                scope="col"
+                [style.width]="column.width"
+                [class]="'star-table__th star-table__cell--' + (column.align ?? 'start')"
+              >
+                {{ column.header }}
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @if (window().before > 0) {
+            <tr class="star-table__spacer" aria-hidden="true">
+              <td [attr.colspan]="columns().length" [style.height.px]="window().before"></td>
+            </tr>
+          }
+          @for (entry of entries(); track entry.row.node.key) {
+            @let row = entry.row;
+            <tr
+              class="star-table__row"
+              [attr.aria-rowindex]="entry.aria"
+              [attr.aria-level]="row.level"
+              [attr.aria-setsize]="row.setSize"
+              [attr.aria-posinset]="row.position"
+              [attr.aria-expanded]="row.node.children?.length ? isOpen(row.node.key) : null"
+              [attr.tabindex]="focusKey() === row.node.key ? 0 : -1"
+              [attr.data-key]="row.node.key"
+              (keydown)="onKeydown($event, row)"
+              (focusin)="onRowFocus($event, row.node.key)"
+            >
+              @for (column of columns(); track column.field; let first = $first) {
+                <td [class]="'star-table__cell--' + (column.align ?? 'start')">
+                  @if (first) {
+                    <span class="star-tree-table__first" [style.--star-tree-level]="row.level - 1">
+                      @if (row.node.children?.length) {
+                        <button
+                          type="button"
+                          class="star-tree__toggle star-tree-table__toggle"
+                          tabindex="-1"
+                          [attr.aria-label]="
+                            isOpen(row.node.key)
+                              ? text.collapseItem(row.node.label)
+                              : text.expandItem(row.node.label)
+                          "
+                          (click)="toggle(row.node.key)"
+                        >
+                          <i class="ph-bold ph-caret-right" aria-hidden="true"></i>
+                        </button>
+                      } @else {
+                        <span class="star-tree__toggle star-tree__toggle--leaf"></span>
+                      }
+                      {{ row.node.data?.[column.field] ?? row.node.label }}
+                    </span>
+                  } @else {
+                    {{ row.node.data?.[column.field] }}
+                  }
+                </td>
+              }
+            </tr>
+          }
+          @if (window().after > 0) {
+            <tr class="star-table__spacer" aria-hidden="true">
+              <td [attr.colspan]="columns().length" [style.height.px]="window().after"></td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTreeTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-tree-table",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-table star-tree-table",
+				"[class.star-table--sticky]": "!!scrollHeight()",
+				"[class.star-table--virtual]": "windowed()",
+				"[style.--star-table-row-height.px]": "windowed() ? virtualItemSize() : null"
+			},
+			template: `
+    <div
+      #scroller
+      class="star-table__scroll"
+      [attr.role]="windowed() ? 'group' : null"
+      [attr.aria-label]="windowed() ? ariaLabel() : null"
+      [attr.tabindex]="windowed() ? (activeRendered() ? -1 : 0) : null"
+      [style.max-height]="scrollHeight()"
+      (scroll)="syncScroll()"
+      (focus)="onScrollerFocus()"
+      (blur)="parked = false"
+      (keydown)="onScrollerKeydown($event)"
+    >
+      <table
+        role="treegrid"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-rowcount]="windowed() ? ariaRowCount(rows().length) : null"
+      >
+        <thead #header>
+          <tr [attr.aria-rowindex]="windowed() ? 1 : null">
+            @for (column of columns(); track column.field) {
+              <th
+                scope="col"
+                [style.width]="column.width"
+                [class]="'star-table__th star-table__cell--' + (column.align ?? 'start')"
+              >
+                {{ column.header }}
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @if (window().before > 0) {
+            <tr class="star-table__spacer" aria-hidden="true">
+              <td [attr.colspan]="columns().length" [style.height.px]="window().before"></td>
+            </tr>
+          }
+          @for (entry of entries(); track entry.row.node.key) {
+            @let row = entry.row;
+            <tr
+              class="star-table__row"
+              [attr.aria-rowindex]="entry.aria"
+              [attr.aria-level]="row.level"
+              [attr.aria-setsize]="row.setSize"
+              [attr.aria-posinset]="row.position"
+              [attr.aria-expanded]="row.node.children?.length ? isOpen(row.node.key) : null"
+              [attr.tabindex]="focusKey() === row.node.key ? 0 : -1"
+              [attr.data-key]="row.node.key"
+              (keydown)="onKeydown($event, row)"
+              (focusin)="onRowFocus($event, row.node.key)"
+            >
+              @for (column of columns(); track column.field; let first = $first) {
+                <td [class]="'star-table__cell--' + (column.align ?? 'start')">
+                  @if (first) {
+                    <span class="star-tree-table__first" [style.--star-tree-level]="row.level - 1">
+                      @if (row.node.children?.length) {
+                        <button
+                          type="button"
+                          class="star-tree__toggle star-tree-table__toggle"
+                          tabindex="-1"
+                          [attr.aria-label]="
+                            isOpen(row.node.key)
+                              ? text.collapseItem(row.node.label)
+                              : text.expandItem(row.node.label)
+                          "
+                          (click)="toggle(row.node.key)"
+                        >
+                          <i class="ph-bold ph-caret-right" aria-hidden="true"></i>
+                        </button>
+                      } @else {
+                        <span class="star-tree__toggle star-tree__toggle--leaf"></span>
+                      }
+                      {{ row.node.data?.[column.field] ?? row.node.label }}
+                    </span>
+                  } @else {
+                    {{ row.node.data?.[column.field] }}
+                  }
+                </td>
+              }
+            </tr>
+          }
+          @if (window().after > 0) {
+            <tr class="star-table__spacer" aria-hidden="true">
+              <td [attr.colspan]="columns().length" [style.height.px]="window().after"></td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		nodes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nodes",
+				required: false
+			}]
+		}],
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: true
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				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
+			}]
+		}],
+		scroller: [{
+			type: i0.ViewChild,
+			args: ["scroller", { isSignal: true }]
+		}],
+		header: [{
+			type: i0.ViewChild,
+			args: ["header", { isSignal: true }]
+		}]
+	}
+});
+var StarDataViewItem = class StarDataViewItem {
+	starDataViewItemOf = input(null, ...ngDevMode ? [{ debugName: "starDataViewItemOf" }] : /* istanbul ignore next */ []);
+	template = inject(TemplateRef);
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDataViewItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarDataViewItem,
+		isStandalone: true,
+		selector: "ng-template[starDataViewItem]",
+		inputs: { starDataViewItemOf: {
+			classPropertyName: "starDataViewItemOf",
+			publicName: "starDataViewItemOf",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarDataViewItem,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starDataViewItem]" }]
+	}],
+	propDecorators: { starDataViewItemOf: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "starDataViewItemOf",
+			required: false
+		}]
+	}] }
+});
+var StarDataView = class StarDataView {
+	text = inject(STAR_UI_TEXT);
+	layouts = [{
+		id: "list",
+		label: this.text.layoutList,
+		icon: "ph-bold ph-list"
+	}, {
+		id: "grid",
+		label: this.text.layoutGrid,
+		icon: "ph-bold ph-squares-four"
+	}];
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	layout = model("list", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	paginator = input(false, {
+		...ngDevMode ? { debugName: "paginator" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	rows = model(6, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	first = model(0, ...ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []);
+	emptyMessage = input(null, ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+	itemTemplate = contentChild(StarDataViewItem, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
+	pageItems = computed(() => this.paginator() ? this.items().slice(this.first(), this.first() + this.rows()) : this.items(), ...ngDevMode ? [{ debugName: "pageItems" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDataView,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarDataView,
+		isStandalone: true,
+		selector: "star-data-view",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			layout: {
+				classPropertyName: "layout",
+				publicName: "layout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			paginator: {
+				classPropertyName: "paginator",
+				publicName: "paginator",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rows: {
+				classPropertyName: "rows",
+				publicName: "rows",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			first: {
+				classPropertyName: "first",
+				publicName: "first",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyMessage: {
+				classPropertyName: "emptyMessage",
+				publicName: "emptyMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			layout: "layoutChange",
+			rows: "rowsChange",
+			first: "firstChange"
+		},
+		host: { classAttribute: "star-data-view" },
+		queries: [{
+			propertyName: "itemTemplate",
+			first: true,
+			predicate: StarDataViewItem,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="star-data-view__header">
+      <ng-content select="[starDataViewHeader]" />
+      <div
+        class="star-segmented star-segmented--sm"
+        role="radiogroup"
+        [attr.aria-label]="text.layout"
+      >
+        @for (option of layouts; track option.id) {
+          <button
+            type="button"
+            role="radio"
+            class="star-segmented__item"
+            [class.star-segmented__item--on]="layout() === option.id"
+            [attr.aria-checked]="layout() === option.id"
+            [attr.aria-label]="option.label"
+            (click)="layout.set(option.id)"
+          >
+            <i [class]="option.icon" aria-hidden="true"></i>
+          </button>
+        }
+      </div>
+    </div>
+    <ul class="star-data-view__items" [class.star-data-view__items--grid]="layout() === 'grid'">
+      @for (item of pageItems(); track $index; let i = $index) {
+        <li class="star-data-view__item">
+          @if (itemTemplate(); as custom) {
+            <ng-container
+              *ngTemplateOutlet="
+                custom.template;
+                context: { $implicit: item, layout: layout(), index: i }
+              "
+            />
+          }
+        </li>
+      } @empty {
+        <li class="star-table__empty">
+          <i class="ph-bold ph-tray" aria-hidden="true"></i>
+          {{ emptyMessage() ?? text.noData }}
+        </li>
+      }
+    </ul>
+    @if (paginator() && items().length > rows()) {
+      <star-paginator
+        [totalRecords]="items().length"
+        [(first)]="first"
+        [(rows)]="rows"
+        [rowsPerPageOptions]="[]"
+      />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			kind: "component",
+			type: StarPaginator,
+			selector: "star-paginator",
+			inputs: [
+				"totalRecords",
+				"first",
+				"rows",
+				"rowsPerPageOptions",
+				"pageLinkSize",
+				"showCurrentPageReport",
+				"showFirstLast",
+				"ariaLabel"
+			],
+			outputs: [
+				"firstChange",
+				"rowsChange",
+				"pageChange"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarDataView,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-data-view",
+			imports: [NgTemplateOutlet, StarPaginator],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-data-view" },
+			template: `
+    <div class="star-data-view__header">
+      <ng-content select="[starDataViewHeader]" />
+      <div
+        class="star-segmented star-segmented--sm"
+        role="radiogroup"
+        [attr.aria-label]="text.layout"
+      >
+        @for (option of layouts; track option.id) {
+          <button
+            type="button"
+            role="radio"
+            class="star-segmented__item"
+            [class.star-segmented__item--on]="layout() === option.id"
+            [attr.aria-checked]="layout() === option.id"
+            [attr.aria-label]="option.label"
+            (click)="layout.set(option.id)"
+          >
+            <i [class]="option.icon" aria-hidden="true"></i>
+          </button>
+        }
+      </div>
+    </div>
+    <ul class="star-data-view__items" [class.star-data-view__items--grid]="layout() === 'grid'">
+      @for (item of pageItems(); track $index; let i = $index) {
+        <li class="star-data-view__item">
+          @if (itemTemplate(); as custom) {
+            <ng-container
+              *ngTemplateOutlet="
+                custom.template;
+                context: { $implicit: item, layout: layout(), index: i }
+              "
+            />
+          }
+        </li>
+      } @empty {
+        <li class="star-table__empty">
+          <i class="ph-bold ph-tray" aria-hidden="true"></i>
+          {{ emptyMessage() ?? text.noData }}
+        </li>
+      }
+    </ul>
+    @if (paginator() && items().length > rows()) {
+      <star-paginator
+        [totalRecords]="items().length"
+        [(first)]="first"
+        [(rows)]="rows"
+        [rowsPerPageOptions]="[]"
+      />
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["layoutChange"]
+		}],
+		paginator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "paginator",
+				required: false
+			}]
+		}],
+		rows: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rows",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["rowsChange"]
+		}],
+		first: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "first",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["firstChange"]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		itemTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarDataViewItem), { isSignal: true }]
+		}]
+	}
+});
+var StarOrderList = class StarOrderList {
+	text = inject(STAR_UI_TEXT);
+	hintId = inject(_IdGenerator).getId("star-order-hint-");
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	optionLabel = input(null, ...ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	selected = signal(-1, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
+	actions = [
+		{
+			id: "top",
+			label: this.text.moveTop,
+			icon: "ph-bold ph-caret-double-up"
+		},
+		{
+			id: "up",
+			label: this.text.moveUp,
+			icon: "ph-bold ph-caret-up"
+		},
+		{
+			id: "down",
+			label: this.text.moveDown,
+			icon: "ph-bold ph-caret-down"
+		},
+		{
+			id: "bottom",
+			label: this.text.moveBottom,
+			icon: "ph-bold ph-caret-double-down"
+		}
+	];
+	labelOf(item) {
+		return optionText(item, this.optionLabel());
+	}
+	canMove(direction) {
+		const i = this.selected();
+		return direction === "top" || direction === "up" ? i > 0 : i < this.value().length - 1;
+	}
+	move(direction) {
+		const from = this.selected();
+		if (from < 0 || !this.canMove(direction)) return;
+		const last = this.value().length - 1;
+		const to = {
+			top: 0,
+			up: from - 1,
+			down: from + 1,
+			bottom: last
+		}[direction];
+		const items = [...this.value()];
+		const [item] = items.splice(from, 1);
+		items.splice(to, 0, item);
+		this.value.set(items);
+		this.selected.set(to);
+		this.announcement.set(this.text.itemPosition(this.labelOf(item), to + 1, items.length));
+	}
+	onKeydown(event, index) {
+		const list = event.currentTarget.parentElement;
+		const focusAt = (i) => queueMicrotask(() => list.children[i]?.focus());
+		if (event.altKey && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+			event.preventDefault();
+			this.selected.set(index);
+			this.move(event.key === "ArrowUp" ? "up" : "down");
+			focusAt(this.selected());
+		} else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+			event.preventDefault();
+			focusAt(Math.min(Math.max(index + (event.key === "ArrowUp" ? -1 : 1), 0), this.value().length - 1));
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarOrderList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarOrderList,
+		isStandalone: true,
+		selector: "star-order-list",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionLabel: {
+				classPropertyName: "optionLabel",
+				publicName: "optionLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { classAttribute: "star-order-list" },
+		ngImport: i0,
+		template: `
+    <div class="star-order-list__buttons" role="group" [attr.aria-label]="text.moveSelectedItem">
+      @for (action of actions; track action.id) {
+        <button
+          type="button"
+          class="star-select__icon-btn star-order-list__btn"
+          [attr.aria-label]="action.label"
+          [disabled]="selected() < 0 || !canMove(action.id)"
+          (click)="move(action.id)"
+        >
+          <i [class]="action.icon" aria-hidden="true"></i>
+        </button>
+      }
+    </div>
+    <ul
+      class="star-listbox star-order-list__list"
+      role="listbox"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="hintId"
+    >
+      @for (item of value(); track $index; let i = $index) {
+        <li
+          role="option"
+          class="star-listbox__option"
+          tabindex="0"
+          [attr.aria-selected]="selected() === i"
+          [class.star-listbox__option--selected]="selected() === i"
+          (click)="selected.set(i)"
+          (focus)="selected.set(i)"
+          (keydown)="onKeydown($event, i)"
+        >
+          <i class="ph-bold ph-dots-six-vertical star-order-list__grip" aria-hidden="true"></i>
+          {{ labelOf(item) }}
+        </li>
+      }
+    </ul>
+    <p class="star-sr-only" [id]="hintId">{{ text.orderListHint }}</p>
+    <p class="star-sr-only" aria-live="polite">{{ announcement() }}</p>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarOrderList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-order-list",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-order-list" },
+			template: `
+    <div class="star-order-list__buttons" role="group" [attr.aria-label]="text.moveSelectedItem">
+      @for (action of actions; track action.id) {
+        <button
+          type="button"
+          class="star-select__icon-btn star-order-list__btn"
+          [attr.aria-label]="action.label"
+          [disabled]="selected() < 0 || !canMove(action.id)"
+          (click)="move(action.id)"
+        >
+          <i [class]="action.icon" aria-hidden="true"></i>
+        </button>
+      }
+    </div>
+    <ul
+      class="star-listbox star-order-list__list"
+      role="listbox"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-describedby]="hintId"
+    >
+      @for (item of value(); track $index; let i = $index) {
+        <li
+          role="option"
+          class="star-listbox__option"
+          tabindex="0"
+          [attr.aria-selected]="selected() === i"
+          [class.star-listbox__option--selected]="selected() === i"
+          (click)="selected.set(i)"
+          (focus)="selected.set(i)"
+          (keydown)="onKeydown($event, i)"
+        >
+          <i class="ph-bold ph-dots-six-vertical star-order-list__grip" aria-hidden="true"></i>
+          {{ labelOf(item) }}
+        </li>
+      }
+    </ul>
+    <p class="star-sr-only" [id]="hintId">{{ text.orderListHint }}</p>
+    <p class="star-sr-only" aria-live="polite">{{ announcement() }}</p>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		optionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionLabel",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var StarPickList = class StarPickList {
+	text = inject(STAR_UI_TEXT);
+	idGen = inject(_IdGenerator);
+	ids = {
+		source: this.idGen.getId("star-pick-src-"),
+		target: this.idGen.getId("star-pick-tgt-")
+	};
+	sides = ["source", "target"];
+	source = model([], ...ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []);
+	target = model([], ...ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []);
+	optionLabel = input(null, ...ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []);
+	sourceHeader = input(null, ...ngDevMode ? [{ debugName: "sourceHeader" }] : /* istanbul ignore next */ []);
+	targetHeader = input(null, ...ngDevMode ? [{ debugName: "targetHeader" }] : /* istanbul ignore next */ []);
+	selection = signal({
+		source: [],
+		target: []
+	}, ...ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []);
+	labelOf(item) {
+		return optionText(item, this.optionLabel());
+	}
+	picked(side) {
+		return this.selection()[side];
+	}
+	isPicked(side, item) {
+		return this.selection()[side].includes(item);
+	}
+	pick(side, item) {
+		this.selection.update((sel) => ({
+			...sel,
+			[side]: sel[side].includes(item) ? sel[side].filter((i) => i !== item) : [...sel[side], item]
+		}));
+	}
+	transfer(from, items) {
+		if (!items.length) return;
+		const moving = new Set(items);
+		const [fromModel, toModel] = from === "source" ? [this.source, this.target] : [this.target, this.source];
+		fromModel.update((list) => list.filter((item) => !moving.has(item)));
+		toModel.update((list) => [...list, ...items]);
+		this.selection.update((sel) => ({
+			...sel,
+			[from]: []
+		}));
+	}
+	read(item, key) {
+		return readOption(item, key);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarPickList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarPickList,
+		isStandalone: true,
+		selector: "star-pick-list",
+		inputs: {
+			source: {
+				classPropertyName: "source",
+				publicName: "source",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			target: {
+				classPropertyName: "target",
+				publicName: "target",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionLabel: {
+				classPropertyName: "optionLabel",
+				publicName: "optionLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sourceHeader: {
+				classPropertyName: "sourceHeader",
+				publicName: "sourceHeader",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			targetHeader: {
+				classPropertyName: "targetHeader",
+				publicName: "targetHeader",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			source: "sourceChange",
+			target: "targetChange"
+		},
+		host: { classAttribute: "star-pick-list" },
+		ngImport: i0,
+		template: `
+    @for (side of sides; track side) {
+      @let items = side === 'source' ? source() : target();
+      <section class="star-pick-list__side" [attr.aria-labelledby]="ids[side]">
+        <h3 class="star-pick-list__header" [id]="ids[side]">
+          {{
+            side === 'source'
+              ? (sourceHeader() ?? text.pickListSource)
+              : (targetHeader() ?? text.pickListTarget)
+          }}
+          <span class="star-badge star-badge--secondary star-badge--sm">{{ items.length }}</span>
+        </h3>
+        <div class="star-pick-list__box">
+          <ul
+            class="star-listbox star-pick-list__list"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-labelledby]="ids[side]"
+          >
+            @for (item of items; track $index; let i = $index) {
+              <li
+                role="option"
+                class="star-listbox__option"
+                tabindex="0"
+                [attr.aria-selected]="isPicked(side, item)"
+                [class.star-listbox__option--selected]="isPicked(side, item)"
+                (click)="pick(side, item)"
+                (dblclick)="transfer(side, [item])"
+                (keydown.enter)="transfer(side, [item])"
+                (keydown.space)="$event.preventDefault(); pick(side, item)"
+              >
+                {{ labelOf(item) }}
+              </li>
+            }
+          </ul>
+          <!-- Outside the listbox: a listbox may contain options and groups only. -->
+          @if (!items.length) {
+            <div class="star-listbox__empty star-pick-list__empty" role="presentation">
+              {{ text.emptyMessage }}
+            </div>
+          }
+        </div>
+      </section>
+      @if (side === 'source') {
+        <div class="star-pick-list__buttons" role="group" [attr.aria-label]="text.transfer">
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.moveSelectedToTarget"
+            [disabled]="!picked('source').length"
+            (click)="transfer('source', picked('source'))"
+          >
+            <i class="ph-bold ph-caret-right star-icon-mirror" aria-hidden="true"></i>
+          </button>
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.moveAllToTarget"
+            [disabled]="!source().length"
+            (click)="transfer('source', source())"
+          >
+            <i class="ph-bold ph-caret-double-right star-icon-mirror" aria-hidden="true"></i>
+          </button>
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.moveSelectedToSource"
+            [disabled]="!picked('target').length"
+            (click)="transfer('target', picked('target'))"
+          >
+            <i class="ph-bold ph-caret-left star-icon-mirror" aria-hidden="true"></i>
+          </button>
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.moveAllToSource"
+            [disabled]="!target().length"
+            (click)="transfer('target', target())"
+          >
+            <i class="ph-bold ph-caret-double-left star-icon-mirror" aria-hidden="true"></i>
+          </button>
+        </div>
+      }
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarPickList,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-pick-list",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-pick-list" },
+			template: `
+    @for (side of sides; track side) {
+      @let items = side === 'source' ? source() : target();
+      <section class="star-pick-list__side" [attr.aria-labelledby]="ids[side]">
+        <h3 class="star-pick-list__header" [id]="ids[side]">
+          {{
+            side === 'source'
+              ? (sourceHeader() ?? text.pickListSource)
+              : (targetHeader() ?? text.pickListTarget)
+          }}
+          <span class="star-badge star-badge--secondary star-badge--sm">{{ items.length }}</span>
+        </h3>
+        <div class="star-pick-list__box">
+          <ul
+            class="star-listbox star-pick-list__list"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-labelledby]="ids[side]"
+          >
+            @for (item of items; track $index; let i = $index) {
+              <li
+                role="option"
+                class="star-listbox__option"
+                tabindex="0"
+                [attr.aria-selected]="isPicked(side, item)"
+                [class.star-listbox__option--selected]="isPicked(side, item)"
+                (click)="pick(side, item)"
+                (dblclick)="transfer(side, [item])"
+                (keydown.enter)="transfer(side, [item])"
+                (keydown.space)="$event.preventDefault(); pick(side, item)"
+              >
+                {{ labelOf(item) }}
+              </li>
+            }
+          </ul>
+          <!-- Outside the listbox: a listbox may contain options and groups only. -->
+          @if (!items.length) {
+            <div class="star-listbox__empty star-pick-list__empty" role="presentation">
+              {{ text.emptyMessage }}
+            </div>
+          }
+        </div>
+      </section>
+      @if (side === 'source') {
+        <div class="star-pick-list__buttons" role="group" [attr.aria-label]="text.transfer">
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.moveSelectedToTarget"
+            [disabled]="!picked('source').length"
+            (click)="transfer('source', picked('source'))"
+          >
+            <i class="ph-bold ph-caret-right star-icon-mirror" aria-hidden="true"></i>
+          </button>
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.moveAllToTarget"
+            [disabled]="!source().length"
+            (click)="transfer('source', source())"
+          >
+            <i class="ph-bold ph-caret-double-right star-icon-mirror" aria-hidden="true"></i>
+          </button>
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.moveSelectedToSource"
+            [disabled]="!picked('target').length"
+            (click)="transfer('target', picked('target'))"
+          >
+            <i class="ph-bold ph-caret-left star-icon-mirror" aria-hidden="true"></i>
+          </button>
+          <button
+            type="button"
+            class="star-select__icon-btn"
+            [attr.aria-label]="text.moveAllToSource"
+            [disabled]="!target().length"
+            (click)="transfer('target', target())"
+          >
+            <i class="ph-bold ph-caret-double-left star-icon-mirror" aria-hidden="true"></i>
+          </button>
+        </div>
+      }
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		source: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "source",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["sourceChange"]
+		}],
+		target: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "target",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["targetChange"]
+		}],
+		optionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionLabel",
+				required: false
+			}]
+		}],
+		sourceHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sourceHeader",
+				required: false
+			}]
+		}],
+		targetHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "targetHeader",
+				required: false
+			}]
+		}]
+	}
+});
+var StarOrgNodeTemplate = class StarOrgNodeTemplate {
+	template = inject(TemplateRef);
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarOrgNodeTemplate,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.6",
+		type: StarOrgNodeTemplate,
+		isStandalone: true,
+		selector: "ng-template[starOrgNode]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarOrgNodeTemplate,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starOrgNode]" }]
+	}]
+});
+var StarOrgChart = class StarOrgChart {
+	text = inject(STAR_UI_TEXT);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	collapsedKeys = model([], ...ngDevMode ? [{ debugName: "collapsedKeys" }] : /* istanbul ignore next */ []);
+	selectable = input(false, {
+		...ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {},
+		transform: (value) => value === "" || value
+	});
+	selectedKey = model(null, ...ngDevMode ? [{ debugName: "selectedKey" }] : /* istanbul ignore next */ []);
+	nodeSelect = output();
+	nodeTemplate = contentChild(StarOrgNodeTemplate, ...ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []);
+	isCollapsed(node) {
+		return this.collapsedKeys().includes(node.key);
+	}
+	toggle(node) {
+		this.collapsedKeys.update((keys) => keys.includes(node.key) ? keys.filter((key) => key !== node.key) : [...keys, node.key]);
+	}
+	select(node) {
+		this.selectedKey.set(node.key);
+		this.nodeSelect.emit(node);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarOrgChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarOrgChart,
+		isStandalone: true,
+		selector: "star-org-chart",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsedKeys: {
+				classPropertyName: "collapsedKeys",
+				publicName: "collapsedKeys",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectable: {
+				classPropertyName: "selectable",
+				publicName: "selectable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedKey: {
+				classPropertyName: "selectedKey",
+				publicName: "selectedKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			collapsedKeys: "collapsedKeysChange",
+			selectedKey: "selectedKeyChange",
+			nodeSelect: "nodeSelect"
+		},
+		host: { classAttribute: "star-org" },
+		queries: [{
+			propertyName: "nodeTemplate",
+			first: true,
+			predicate: StarOrgNodeTemplate,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="star-org__scroll">
+      <ul class="star-org__level star-org__level--root" [attr.aria-label]="ariaLabel()">
+        <ng-container *ngTemplateOutlet="branch; context: { $implicit: value(), level: 0 }" />
+      </ul>
+    </div>
+
+    <ng-template #branch let-node let-level="level">
+      <li class="star-org__branch">
+        <div
+          class="star-org__node"
+          [class.star-org__node--selected]="selectedKey() === node.key"
+          [class.star-org__node--parent]="!!node.children?.length && !isCollapsed(node)"
+        >
+          @if (selectable()) {
+            <button
+              type="button"
+              class="star-org__card star-org__card--button"
+              [attr.aria-pressed]="selectedKey() === node.key"
+              (click)="select(node)"
+            >
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: node, level }" />
+            </button>
+          } @else {
+            <div class="star-org__card">
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: node, level }" />
+            </div>
+          }
+          @if (node.children?.length) {
+            <button
+              type="button"
+              class="star-org__toggle"
+              [attr.aria-expanded]="!isCollapsed(node)"
+              [attr.aria-label]="
+                (isCollapsed(node) ? text.expandRow : text.collapseRow) + ': ' + node.label
+              "
+              (click)="toggle(node)"
+            >
+              <i
+                class="ph-bold"
+                [class.ph-caret-down]="isCollapsed(node)"
+                [class.ph-caret-up]="!isCollapsed(node)"
+                aria-hidden="true"
+              ></i>
+            </button>
+          }
+        </div>
+        @if (node.children?.length && !isCollapsed(node)) {
+          <ul class="star-org__level">
+            @for (child of node.children; track child.key) {
+              <ng-container
+                *ngTemplateOutlet="branch; context: { $implicit: child, level: level + 1 }"
+              />
+            }
+          </ul>
+        }
+      </li>
+    </ng-template>
+
+    <ng-template #content let-node let-level="level">
+      @if (nodeTemplate(); as custom) {
+        <ng-container *ngTemplateOutlet="custom.template; context: { $implicit: node, level }" />
+      } @else {
+        <span class="star-org__label">{{ node.label }}</span>
+        @if (node.subtitle) {
+          <span class="star-org__subtitle">{{ node.subtitle }}</span>
+        }
+      }
+    </ng-template>
+  `,
+		isInline: true,
+		dependencies: [{
+			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: StarOrgChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-org-chart",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-org" },
+			template: `
+    <div class="star-org__scroll">
+      <ul class="star-org__level star-org__level--root" [attr.aria-label]="ariaLabel()">
+        <ng-container *ngTemplateOutlet="branch; context: { $implicit: value(), level: 0 }" />
+      </ul>
+    </div>
+
+    <ng-template #branch let-node let-level="level">
+      <li class="star-org__branch">
+        <div
+          class="star-org__node"
+          [class.star-org__node--selected]="selectedKey() === node.key"
+          [class.star-org__node--parent]="!!node.children?.length && !isCollapsed(node)"
+        >
+          @if (selectable()) {
+            <button
+              type="button"
+              class="star-org__card star-org__card--button"
+              [attr.aria-pressed]="selectedKey() === node.key"
+              (click)="select(node)"
+            >
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: node, level }" />
+            </button>
+          } @else {
+            <div class="star-org__card">
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: node, level }" />
+            </div>
+          }
+          @if (node.children?.length) {
+            <button
+              type="button"
+              class="star-org__toggle"
+              [attr.aria-expanded]="!isCollapsed(node)"
+              [attr.aria-label]="
+                (isCollapsed(node) ? text.expandRow : text.collapseRow) + ': ' + node.label
+              "
+              (click)="toggle(node)"
+            >
+              <i
+                class="ph-bold"
+                [class.ph-caret-down]="isCollapsed(node)"
+                [class.ph-caret-up]="!isCollapsed(node)"
+                aria-hidden="true"
+              ></i>
+            </button>
+          }
+        </div>
+        @if (node.children?.length && !isCollapsed(node)) {
+          <ul class="star-org__level">
+            @for (child of node.children; track child.key) {
+              <ng-container
+                *ngTemplateOutlet="branch; context: { $implicit: child, level: level + 1 }"
+              />
+            }
+          </ul>
+        }
+      </li>
+    </ng-template>
+
+    <ng-template #content let-node let-level="level">
+      @if (nodeTemplate(); as custom) {
+        <ng-container *ngTemplateOutlet="custom.template; context: { $implicit: node, level }" />
+      } @else {
+        <span class="star-org__label">{{ node.label }}</span>
+        @if (node.subtitle) {
+          <span class="star-org__subtitle">{{ node.subtitle }}</span>
+        }
+      }
+    </ng-template>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		collapsedKeys: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsedKeys",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["collapsedKeysChange"]
+		}],
+		selectable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectable",
+				required: false
+			}]
+		}],
+		selectedKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedKey",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedKeyChange"]
+		}],
+		nodeSelect: [{
+			type: i0.Output,
+			args: ["nodeSelect"]
+		}],
+		nodeTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarOrgNodeTemplate), { isSignal: true }]
+		}]
+	}
+});
+export { StarDataView, StarDataViewItem, StarOrderList, StarOrgChart, StarOrgNodeTemplate, StarPickList, StarTreeTable };
+
+//# sourceMappingURL=star-ng-ui-data-display.mjs.map