@star-ng/ui 0.1.0 → 0.2.0

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

@@ -1,11 +1,11 @@
 import { _IdGenerator } from "@angular/cdk/a11y";
 import { CdkMenuTrigger } from "@angular/cdk/menu";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input, model, output, signal, viewChild } from "@angular/core";
-import { STAR_UI_TEXT, StarDirectionService, matchesFilter, optionText, readOption } from "@star-ng/ui/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, Injector, TemplateRef, afterNextRender, booleanAttribute, computed, contentChild, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { STAR_UI_TEXT, StarDirectionService, matchesFilter, optionText, readOption, starListKeyboardTarget, starListLayout, starListPageSize, starListRevealOffset, starListRevealRows, starListRowRendered } from "@star-ng/ui/core";
 import { STAR_MENU_POSITIONS, StarMenu, StarMenuInDialog } from "@star-ng/ui/menu";
 import { CdkConnectedOverlay, CdkOverlayOrigin } from "@angular/cdk/overlay";
-import { NgTemplateOutlet } from "@angular/common";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
 var StarCascadeSelect = class StarCascadeSelect {
 	directionSync = inject(StarDirectionService);
 	text = inject(STAR_UI_TEXT);
@@ -628,6 +628,8 @@ var StarOptionListBase = class StarOptionListBase {
 	directionSync = inject(StarDirectionService);
 	text = inject(STAR_UI_TEXT);
 	ids = inject(_IdGenerator);
+	document = inject(DOCUMENT);
+	injector = inject(Injector);
 	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
 	optionLabel = input(null, ...ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []);
 	optionValue = input(null, ...ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []);
@@ -713,35 +715,8 @@ var StarOptionListBase = class StarOptionListBase {
 			rank: order.get(this.groupOf(option)) ?? 0
 		})).sort((a, b) => a.rank - b.rank || a.index - b.index).map(({ option }) => option);
 	}
-	rows = computed(() => {
-		const grouped = !!this.optionGroup();
-		const rows = [];
-		let current = null;
-		let groupId = null;
-		this.visibleOptions().forEach((option, index) => {
-			if (grouped) {
-				const label = this.groupOf(option);
-				if (label !== current) {
-					current = label;
-					groupId = `${this.listId}-group-${rows.length}`;
-					rows.push({
-						kind: "group",
-						key: `g:${label}`,
-						label,
-						id: groupId
-					});
-				}
-			}
-			rows.push({
-				kind: "option",
-				key: `o:${index}`,
-				option,
-				index,
-				groupId
-			});
-		});
-		return rows;
-	}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	layout = computed(() => starListLayout(this.visibleOptions(), this.optionGroup() ? (option) => this.groupOf(option) : null, this.listId), ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	rows = computed(() => this.layout().rows, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
 	listScrollTop = signal(0, ...ngDevMode ? [{ debugName: "listScrollTop" }] : /* istanbul ignore next */ []);
 	listHeight = signal(0, ...ngDevMode ? [{ debugName: "listHeight" }] : /* istanbul ignore next */ []);
 	virtualWindow = computed(() => {
@@ -775,7 +750,15 @@ var StarOptionListBase = class StarOptionListBase {
 		this.listScrollTop.set(list.scrollTop);
 		this.listHeight.set(list.clientHeight);
 	}
-	activeId = computed(() => this.open() && this.activeIndex() >= 0 ? this.optionId(this.activeIndex()) : null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	activeId = computed(() => {
+		const index = this.activeIndex();
+		if (!this.open() || index < 0) return null;
+		const row = this.layout().rowOfOption[index];
+		return row !== void 0 && starListRowRendered(row, this.virtualWindow()) ? this.optionId(index) : null;
+	}, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	describedBy(row) {
+		return row.groupId !== null && starListRowRendered(row.groupRow, this.virtualWindow()) ? row.groupId : null;
+	}
 	emptyText = computed(() => this.filterValue() ? this.text.emptyFilterMessage : this.emptyMessage() ?? this.text.emptyMessage, ...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
 	typeahead = "";
 	typeaheadTimer;
@@ -837,7 +820,14 @@ var StarOptionListBase = class StarOptionListBase {
 	}
 	onPanelAttached() {
 		this.filterInput()?.nativeElement.focus();
+		const height = this.listElement()?.clientHeight;
+		if (this.virtualScroll() && height) this.listHeight.set(height);
 		this.scrollActiveIntoView();
+		if (this.virtualScroll()) afterNextRender(() => {
+			const list = this.listElement();
+			if (list?.clientHeight) this.listHeight.set(list.clientHeight);
+			this.scrollActiveIntoView();
+		}, { injector: this.injector });
 	}
 	onOutsideClick(event) {
 		if (this.trigger().nativeElement.contains(event.target)) return;
@@ -853,9 +843,14 @@ var StarOptionListBase = class StarOptionListBase {
 	onFilterInput(value) {
 		this.filterValue.set(value);
 		this.filterChange.emit(value);
-		this.listScrollTop.set(0);
+		this.resetScroll();
 		this.activeIndex.set(this.firstEnabledFrom(0, 1));
 	}
+	resetScroll() {
+		this.listScrollTop.set(0);
+		const list = this.listElement();
+		if (list) list.scrollTop = 0;
+	}
 	onOptionClick(option, index) {
 		if (this.isDisabled(option)) return;
 		this.activeIndex.set(index);
@@ -889,6 +884,12 @@ var StarOptionListBase = class StarOptionListBase {
 				this.activeIndex.set(event.key === "Home" ? this.firstEnabledFrom(0, 1) : this.firstEnabledFrom(this.visibleOptions().length - 1, -1));
 				this.scrollActiveIntoView();
 				return;
+			case "PageDown":
+			case "PageUp":
+				if (!open || !this.virtualScroll()) return;
+				event.preventDefault();
+				this.movePage(event.key === "PageDown" ? 1 : -1);
+				return;
 			case "Enter":
 				event.preventDefault();
 				if (!open) this.openPanel();
@@ -897,6 +898,10 @@ var StarOptionListBase = class StarOptionListBase {
 			case " ":
 				if (event.target instanceof HTMLInputElement) return;
 				event.preventDefault();
+				if (this.typeahead) {
+					this.runTypeahead(" ");
+					return;
+				}
 				if (!open) this.openPanel();
 				else this.chooseActive(this.closeOnChoose);
 				return;
@@ -927,6 +932,15 @@ var StarOptionListBase = class StarOptionListBase {
 		if (next >= 0) this.activeIndex.set(next);
 		this.scrollActiveIntoView();
 	}
+	movePage(step) {
+		const count = this.visibleOptions().length;
+		const height = this.listElement()?.clientHeight || VIRTUAL_FALLBACK_HEIGHT;
+		const target = starListKeyboardTarget(step === 1 ? "PageDown" : "PageUp", this.activeIndex(), count, starListPageSize(height, this.virtualItemSize()));
+		const next = this.firstEnabledFrom(target, step);
+		const found = next >= 0 ? next : this.firstEnabledFrom(target, step === 1 ? -1 : 1);
+		if (found >= 0) this.activeIndex.set(found);
+		this.scrollActiveIntoView();
+	}
 	firstEnabledFrom(start, step) {
 		const options = this.visibleOptions();
 		for (let i = start; i >= 0 && i < options.length; i += step) if (!this.isDisabled(options[i])) return i;
@@ -944,26 +958,33 @@ var StarOptionListBase = class StarOptionListBase {
 		if (!this.open() && this.closeOnChoose) this.choose(options[match]);
 		this.scrollActiveIntoView();
 	}
+	listElement() {
+		return this.document.getElementById(this.listId);
+	}
+	applyScroll(list, offset, frames) {
+		if (!list.isConnected || this.listScrollTop() !== offset) return;
+		list.scrollTop = offset;
+		if (frames > 0 && Math.abs(list.scrollTop - offset) > 1) this.document.defaultView?.requestAnimationFrame?.(() => this.applyScroll(list, offset, frames - 1));
+	}
 	scrollActiveIntoView() {
-		const id = this.activeId();
-		if (!id) return;
+		if (!this.open() || this.activeIndex() < 0) return;
 		if (this.virtualScroll()) {
-			const active = this.activeIndex();
-			const line = this.rows().findIndex((row) => row.kind === "option" && row.index === active);
-			const list = this.trigger().nativeElement.ownerDocument.getElementById(this.listId);
-			if (line < 0 || !list) return;
-			const size = Math.max(1, this.virtualItemSize());
+			const list = this.listElement();
+			const layout = this.layout();
+			if (!list || layout.rowOfOption[this.activeIndex()] === void 0) return;
 			const height = list.clientHeight || VIRTUAL_FALLBACK_HEIGHT;
-			const top = line * size;
-			let scrollTop = this.listScrollTop();
-			if (top < scrollTop) scrollTop = top;
-			else if (top + size > scrollTop + height) scrollTop = top + size - height;
-			this.listScrollTop.set(scrollTop);
+			const inset = parseFloat(getComputedStyle(list).paddingTop) || 0;
+			const [first, last] = starListRevealRows(layout, this.activeIndex());
+			const offset = starListRevealOffset(first, last, Math.max(1, this.virtualItemSize()), list.clientHeight ? list.scrollTop : this.listScrollTop(), height, inset);
 			this.listHeight.set(height);
-			queueMicrotask(() => list.scrollTop = scrollTop);
+			if (offset === null) return;
+			this.listScrollTop.set(offset);
+			queueMicrotask(() => this.applyScroll(list, offset, 12));
 			return;
 		}
-		queueMicrotask(() => this.trigger().nativeElement.ownerDocument.getElementById(id)?.scrollIntoView?.({ block: "nearest" }));
+		const id = this.activeId();
+		if (!id) return;
+		queueMicrotask(() => this.document.getElementById(id)?.scrollIntoView?.({ block: "nearest" }));
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -1439,9 +1460,11 @@ var StarMultiSelect = class StarMultiSelect extends StarOptionListBase {
 		if (!options.length || selected === 0) return false;
 		return selected === options.length ? true : "mixed";
 	}, ...ngDevMode ? [{ debugName: "allState" }] : /* istanbul ignore next */ []);
+	chosenSet = computed(() => this.compareWith() === Object.is ? new Set(this.value()) : null, ...ngDevMode ? [{ debugName: "chosenSet" }] : /* istanbul ignore next */ []);
 	isSelected(option) {
 		const optionValue = this.valueOf(option);
-		return this.value().some((value) => this.equals(value, optionValue));
+		const chosen = this.chosenSet();
+		return chosen ? chosen.has(optionValue) : this.value().some((value) => this.equals(value, optionValue));
 	}
 	choose(option) {
 		if (this.isSelected(option)) {
@@ -1463,7 +1486,8 @@ var StarMultiSelect = class StarMultiSelect extends StarOptionListBase {
 		const options = this.selectableVisible();
 		if (this.allState() === true) {
 			const visibleValues = options.map((option) => this.valueOf(option));
-			this.value.update((values) => values.filter((value) => !visibleValues.some((visible) => this.equals(visible, value))));
+			const visibleSet = this.compareWith() === Object.is ? new Set(visibleValues) : null;
+			this.value.update((values) => values.filter((value) => visibleSet ? !visibleSet.has(value) : !visibleValues.some((visible) => this.equals(visible, value))));
 			return;
 		}
 		const additions = options.filter((option) => !this.isSelected(option)).map((option) => this.valueOf(option));
@@ -1697,7 +1721,7 @@ var StarMultiSelect = class StarMultiSelect extends StarOptionListBase {
                 [class.star-listbox__option--selected]="isSelected(option)"
                 [attr.aria-selected]="isSelected(option)"
                 [attr.aria-disabled]="isDisabled(option) || null"
-                [attr.aria-describedby]="row.groupId"
+                [attr.aria-describedby]="describedBy(row)"
                 [attr.aria-setsize]="virtualScroll() ? visibleOptions().length : null"
                 [attr.aria-posinset]="virtualScroll() ? i + 1 : null"
                 (click)="onOptionClick(option, i)"
@@ -1979,7 +2003,7 @@ i0.ɵɵngDeclareClassMetadata({
                 [class.star-listbox__option--selected]="isSelected(option)"
                 [attr.aria-selected]="isSelected(option)"
                 [attr.aria-disabled]="isDisabled(option) || null"
-                [attr.aria-describedby]="row.groupId"
+                [attr.aria-describedby]="describedBy(row)"
                 [attr.aria-setsize]="virtualScroll() ? visibleOptions().length : null"
                 [attr.aria-posinset]="virtualScroll() ? i + 1 : null"
                 (click)="onOptionClick(option, i)"
@@ -2235,7 +2259,7 @@ var StarSelect = class StarSelect extends StarOptionListBase {
                 [class.star-listbox__option--selected]="isSelected(option)"
                 [attr.aria-selected]="isSelected(option)"
                 [attr.aria-disabled]="isDisabled(option) || null"
-                [attr.aria-describedby]="row.groupId"
+                [attr.aria-describedby]="describedBy(row)"
                 [attr.aria-setsize]="virtualScroll() ? visibleOptions().length : null"
                 [attr.aria-posinset]="virtualScroll() ? i + 1 : null"
                 (click)="onOptionClick(option, i)"
@@ -2470,7 +2494,7 @@ i0.ɵɵngDeclareClassMetadata({
                 [class.star-listbox__option--selected]="isSelected(option)"
                 [attr.aria-selected]="isSelected(option)"
                 [attr.aria-disabled]="isDisabled(option) || null"
-                [attr.aria-describedby]="row.groupId"
+                [attr.aria-describedby]="describedBy(row)"
                 [attr.aria-setsize]="virtualScroll() ? visibleOptions().length : null"
                 [attr.aria-posinset]="virtualScroll() ? i + 1 : null"
                 (click)="onOptionClick(option, i)"