@star-ng/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,1556 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input, model, output, signal } from "@angular/core";
+import { STAR_UI_TEXT, optionText, readOption, starInlineKey } from "@star-ng/ui/core";
+import { StarPaginator } from "@star-ng/ui/paginator";
+var StarTreeTable = class StarTreeTable {
+	text = inject(STAR_UI_TEXT);
+	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 */ []);
+	rows = computed(() => {
+		const rows = [];
+		const open = new Set(this.expanded());
+		const walk = (nodes, level) => nodes.forEach((node, i) => {
+			rows.push({
+				node,
+				level,
+				setSize: nodes.length,
+				position: i + 1
+			});
+			if (node.children?.length && open.has(node.key)) walk(node.children, level + 1);
+		});
+		walk(this.nodes(), 1);
+		return rows;
+	}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	focusKey = signal(null, ...ngDevMode ? [{ debugName: "focusKey" }] : /* istanbul ignore next */ []);
+	isOpen(key) {
+		return this.expanded().includes(key);
+	}
+	toggle(key, open = !this.isOpen(key)) {
+		this.expanded.update((keys) => open ? [...keys, key] : keys.filter((k) => k !== key));
+	}
+	onKeydown(event, row) {
+		const rows = this.rows();
+		const index = rows.indexOf(row);
+		const focus = (target) => {
+			if (!target) return;
+			event.preventDefault();
+			this.focusKey.set(target.node.key);
+			(event.currentTarget.closest("tbody")?.querySelector(`[data-key="${CSS.escape(target.node.key)}"]`))?.focus();
+		};
+		const key = starInlineKey(event);
+		if (key === "ArrowDown") focus(rows[index + 1]);
+		else if (key === "ArrowUp") focus(rows[index - 1]);
+		else if (key === "ArrowRight" && row.node.children?.length) {
+			event.preventDefault();
+			this.toggle(row.node.key, true);
+		} else if (key === "ArrowLeft") {
+			event.preventDefault();
+			if (row.node.children?.length && this.isOpen(row.node.key)) this.toggle(row.node.key, false);
+			else focus([...rows.slice(0, index)].reverse().find((r) => r.level < row.level));
+		}
+	}
+	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
+			}
+		},
+		outputs: { expanded: "expandedChange" },
+		host: { classAttribute: "star-table star-tree-table" },
+		ngImport: i0,
+		template: `
+    <div class="star-table__scroll">
+      <table role="treegrid" [attr.aria-label]="ariaLabel()">
+        <thead>
+          <tr>
+            @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>
+          @for (row of rows(); track row.node.key) {
+            <tr
+              class="star-table__row"
+              [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)"
+              (focus)="focusKey.set(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>
+          }
+        </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" },
+			template: `
+    <div class="star-table__scroll">
+      <table role="treegrid" [attr.aria-label]="ariaLabel()">
+        <thead>
+          <tr>
+            @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>
+          @for (row of rows(); track row.node.key) {
+            <tr
+              class="star-table__row"
+              [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)"
+              (focus)="focusKey.set(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>
+          }
+        </tbody>
+      </table>
+    </div>
+  `
+		}]
+	}],
+	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
+			}]
+		}]
+	}
+});
+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