@star-ng/ui 0.1.0 → 0.2.0

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

@@ -1,56 +1,237 @@
 import { _IdGenerator } from "@angular/cdk/a11y";
-import { NgTemplateOutlet } from "@angular/common";
+import { DOCUMENT, 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 { 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 */ []);
-	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
+	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);
 			});
-			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 */ []);
+		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.expanded().includes(key);
+		return this.openKeys().has(key);
 	}
 	toggle(key, open = !this.isOpen(key)) {
-		this.expanded.update((keys) => open ? [...keys, key] : keys.filter((k) => k !== 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 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 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);
-		if (key === "ArrowDown") focus(rows[index + 1]);
-		else if (key === "ArrowUp") focus(rows[index - 1]);
-		else if (key === "ArrowRight" && row.node.children?.length) {
+		const move = (target) => {
+			if (target === null) return;
 			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));
+			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({
@@ -95,16 +276,72 @@ var StarTreeTable = class StarTreeTable {
 				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: { classAttribute: "star-table star-tree-table" },
+		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 class="star-table__scroll">
-      <table role="treegrid" [attr.aria-label]="ariaLabel()">
-        <thead>
-          <tr>
+    <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"
@@ -117,9 +354,16 @@ var StarTreeTable = class StarTreeTable {
           </tr>
         </thead>
         <tbody>
-          @for (row of rows(); track row.node.key) {
+          @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"
@@ -127,7 +371,7 @@ var StarTreeTable = class StarTreeTable {
               [attr.tabindex]="focusKey() === row.node.key ? 0 : -1"
               [attr.data-key]="row.node.key"
               (keydown)="onKeydown($event, row)"
-              (focus)="focusKey.set(row.node.key)"
+              (focusin)="onRowFocus($event, row.node.key)"
             >
               @for (column of columns(); track column.field; let first = $first) {
                 <td [class]="'star-table__cell--' + (column.align ?? 'start')">
@@ -159,6 +403,11 @@ var StarTreeTable = class StarTreeTable {
               }
             </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>
@@ -177,12 +426,32 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "star-tree-table",
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			host: { class: "star-table star-tree-table" },
+			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 class="star-table__scroll">
-      <table role="treegrid" [attr.aria-label]="ariaLabel()">
-        <thead>
-          <tr>
+    <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"
@@ -195,9 +464,16 @@ i0.ɵɵngDeclareClassMetadata({
           </tr>
         </thead>
         <tbody>
-          @for (row of rows(); track row.node.key) {
+          @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"
@@ -205,7 +481,7 @@ i0.ɵɵngDeclareClassMetadata({
               [attr.tabindex]="focusKey() === row.node.key ? 0 : -1"
               [attr.data-key]="row.node.key"
               (keydown)="onKeydown($event, row)"
-              (focus)="focusKey.set(row.node.key)"
+              (focusin)="onRowFocus($event, row.node.key)"
             >
               @for (column of columns(); track column.field; let first = $first) {
                 <td [class]="'star-table__cell--' + (column.align ?? 'start')">
@@ -237,12 +513,18 @@ i0.ɵɵngDeclareClassMetadata({
               }
             </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,
@@ -278,6 +560,38 @@ i0.ɵɵngDeclareClassMetadata({
 				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 }]
 		}]
 	}
 });