@star-ng/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,886 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, afterNextRender, booleanAttribute, computed, contentChild, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { STAR_UI_TEXT, matchesFilter, optionText, readOption, starListAriaPosition, starListHeight, starListKeyboardTarget, starListLayout, starListPageSize, starListRevealOffset, starListRevealRows, starListRowRendered, starListTypeaheadIndex } from "@star-ng/ui/core";
+import { StarOptionTemplate } from "@star-ng/ui/select";
+var StarListbox = class StarListbox {
+	text = inject(STAR_UI_TEXT);
+	listId = inject(_IdGenerator).getId("star-listbox-");
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	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 */ []);
+	optionDisabled = input(null, ...ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []);
+	optionGroup = input(null, ...ngDevMode ? [{ debugName: "optionGroup" }] : /* istanbul ignore next */ []);
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	filter = input(false, {
+		...ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	scrollHeight = input("16rem", ...ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []);
+	virtualScroll = input(false, {
+		...ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	virtualItemSize = input(40, ...ngDevMode ? [{ debugName: "virtualItemSize" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	optionTemplate = contentChild(StarOptionTemplate, ...ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []);
+	list = viewChild("list", {
+		...ngDevMode ? { debugName: "list" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	viewport = viewChild(CdkVirtualScrollViewport, ...ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []);
+	injector = inject(Injector);
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	active = signal(-1, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	typeahead = "";
+	typeaheadAt = 0;
+	visible = computed(() => {
+		const options = this.options().filter((option) => matchesFilter(this.labelOf(option), this.query()));
+		if (!this.optionGroup()) return options;
+		const order = /* @__PURE__ */ new Map();
+		for (const option of options) {
+			const group = this.groupOf(option);
+			if (!order.has(group)) order.set(group, order.size);
+		}
+		return options.map((option, index) => ({
+			option,
+			index,
+			rank: order.get(this.groupOf(option)) ?? 0
+		})).sort((a, b) => a.rank - b.rank || a.index - b.index).map(({ option }) => option);
+	}, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	groupOf(option) {
+		const key = this.optionGroup();
+		const group = key ? readOption(option, key) : null;
+		return group === null || group === void 0 ? "" : String(group);
+	}
+	groupHeading(index) {
+		if (!this.optionGroup()) return null;
+		const options = this.visible();
+		const group = this.groupOf(options[index]);
+		return index === 0 || this.groupOf(options[index - 1]) !== group ? group : null;
+	}
+	groupId(index) {
+		if (!this.optionGroup()) return null;
+		const options = this.visible();
+		let first = index;
+		while (first > 0 && this.groupOf(options[first - 1]) === this.groupOf(options[index])) first--;
+		return `${this.listId}-group-${first}`;
+	}
+	itemSize = computed(() => Math.max(1, this.virtualItemSize()), ...ngDevMode ? [{ debugName: "itemSize" }] : /* istanbul ignore next */ []);
+	layout = computed(() => starListLayout(this.visible(), this.optionGroup() ? (option) => this.groupOf(option) : null, this.listId), ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	viewportHeight = computed(() => starListHeight(this.scrollHeight(), this.layout().rows.length, this.itemSize()), ...ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []);
+	renderedRange = signal({
+		start: 0,
+		end: 0
+	}, ...ngDevMode ? [{ debugName: "renderedRange" }] : /* istanbul ignore next */ []);
+	trackRow = (_index, row) => row.key;
+	positionOf(index) {
+		return starListAriaPosition(index, this.visible().length);
+	}
+	describedBy(row) {
+		return row.groupId !== null && starListRowRendered(row.groupRow, this.renderedRange()) ? row.groupId : null;
+	}
+	activeId = computed(() => {
+		const index = this.active();
+		if (index < 0 || index >= this.visible().length) return null;
+		if (this.virtualScroll()) {
+			const row = this.layout().rowOfOption[index];
+			if (row === void 0 || !starListRowRendered(row, this.renderedRange())) return null;
+		}
+		return `${this.listId}-${index}`;
+	}, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect((onCleanup) => {
+			const viewport = this.viewport();
+			if (!viewport) return;
+			const element = viewport.getElementRef().nativeElement;
+			this.renderedRange.set(viewport.getRenderedRange());
+			const range = viewport.renderedRangeStream.subscribe((next) => afterNextRender(() => this.renderedRange.set({ ...next }), { injector: this.injector }));
+			afterNextRender(() => element.querySelector(".cdk-virtual-scroll-content-wrapper")?.setAttribute("role", "presentation"), { injector: this.injector });
+			const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => viewport.checkViewportSize());
+			observer?.observe(element);
+			onCleanup(() => {
+				range.unsubscribe();
+				observer?.disconnect();
+			});
+		});
+	}
+	labelOf(option) {
+		return optionText(option, this.optionLabel());
+	}
+	isDisabled(option) {
+		const key = this.optionDisabled();
+		return key ? !!readOption(option, key) : false;
+	}
+	valueOf(option) {
+		return readOption(option, this.optionValue());
+	}
+	isSelected(option) {
+		const value = this.value();
+		const optionValue = this.valueOf(option);
+		return Array.isArray(value) ? value.some((v) => Object.is(v, optionValue)) : Object.is(value, optionValue);
+	}
+	firstSelectedOrZero() {
+		return Math.max(0, this.visible().findIndex((option) => this.isSelected(option)));
+	}
+	choose(option) {
+		if (this.disabled() || this.isDisabled(option)) return;
+		const optionValue = this.valueOf(option);
+		if (this.multiple()) {
+			const current = Array.isArray(this.value()) ? this.value() : [];
+			this.value.set(this.isSelected(option) ? current.filter((v) => !Object.is(v, optionValue)) : [...current, optionValue]);
+		} else this.value.set(optionValue);
+	}
+	onFilterInput(text) {
+		this.query.set(text);
+		this.active.set(0);
+		this.viewport()?.scrollToOffset(0);
+	}
+	onFocus() {
+		if (this.active() >= 0) return;
+		this.active.set(this.firstSelectedOrZero());
+		if (this.virtualScroll()) this.reveal(this.active());
+	}
+	reveal(index) {
+		if (!this.virtualScroll()) {
+			queueMicrotask(() => this.list()?.nativeElement.querySelector(`#${CSS.escape(this.activeId() ?? "")}`)?.scrollIntoView?.({ block: "nearest" }));
+			return;
+		}
+		const viewport = this.viewport();
+		if (!viewport) return;
+		const [first, last] = starListRevealRows(this.layout(), index);
+		const offset = starListRevealOffset(first, last, this.itemSize(), viewport.measureScrollOffset(), viewport.getViewportSize());
+		if (offset !== null) viewport.scrollToOffset(offset);
+	}
+	onKeydown(event) {
+		const options = this.visible();
+		if (!options.length || this.disabled()) return;
+		const fromInput = event.target instanceof HTMLInputElement;
+		const page = starListPageSize(this.viewport()?.getViewportSize() || 256, this.itemSize());
+		const move = (key) => {
+			event.preventDefault();
+			this.active.set(typeof key === "number" ? key : starListKeyboardTarget(key, this.active(), options.length, page));
+			this.reveal(this.active());
+			if (!this.multiple() && !fromInput) {
+				const option = options[this.active()];
+				if (!this.isDisabled(option)) this.value.set(this.valueOf(option));
+			}
+		};
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowUp": return move(event.key);
+			case "Home":
+			case "End":
+				if (fromInput) return;
+				return move(event.key);
+			case "PageDown":
+			case "PageUp":
+				if (fromInput || !this.virtualScroll()) return;
+				return move(event.key);
+			case " ":
+			case "Enter":
+				if (event.key === " " && fromInput) return;
+				event.preventDefault();
+				if (options[this.active()] !== void 0) this.choose(options[this.active()]);
+				return;
+			default: if (event.key.length === 1 && !fromInput) {
+				const now = Date.now();
+				this.typeahead = (now - this.typeaheadAt > 500 ? "" : this.typeahead) + event.key.toLowerCase();
+				this.typeaheadAt = now;
+				const index = starListTypeaheadIndex(options.length, (i) => this.labelOf(options[i]), this.typeahead);
+				if (index >= 0) move(index);
+			}
+		}
+	}
+	focus() {
+		this.list()?.nativeElement.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarListbox,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarListbox,
+		isStandalone: true,
+		selector: "star-listbox",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionLabel: {
+				classPropertyName: "optionLabel",
+				publicName: "optionLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionValue: {
+				classPropertyName: "optionValue",
+				publicName: "optionValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionDisabled: {
+				classPropertyName: "optionDisabled",
+				publicName: "optionDisabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionGroup: {
+				classPropertyName: "optionGroup",
+				publicName: "optionGroup",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filter: {
+				classPropertyName: "filter",
+				publicName: "filter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scrollHeight: {
+				classPropertyName: "scrollHeight",
+				publicName: "scrollHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			virtualScroll: {
+				classPropertyName: "virtualScroll",
+				publicName: "virtualScroll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			virtualItemSize: {
+				classPropertyName: "virtualItemSize",
+				publicName: "virtualItemSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			properties: {
+				"class.star-listbox-box--disabled": "disabled()",
+				"class.star-listbox-box--invalid": "invalid() && touched()"
+			},
+			classAttribute: "star-listbox-box"
+		},
+		queries: [{
+			propertyName: "optionTemplate",
+			first: true,
+			predicate: StarOptionTemplate,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "list",
+			first: true,
+			predicate: ["list"],
+			descendants: true,
+			read: ElementRef,
+			isSignal: true
+		}, {
+			propertyName: "viewport",
+			first: true,
+			predicate: CdkVirtualScrollViewport,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @if (filter()) {
+      <div class="star-panel__filter">
+        <i class="ph-bold ph-magnifying-glass" aria-hidden="true"></i>
+        <input
+          #filterInput
+          type="search"
+          class="star-input star-input--sm"
+          autocomplete="off"
+          [attr.aria-label]="text.filterPlaceholder"
+          [attr.aria-controls]="listId"
+          [placeholder]="text.filterPlaceholder"
+          [value]="query()"
+          (input)="onFilterInput(filterInput.value)"
+          (keydown)="onKeydown($event)"
+        />
+      </div>
+    }
+    @if (virtualScroll()) {
+      <!-- Virtual scroll: the CDK viewport is the listbox. Group headings and options are rows of one height. -->
+      <cdk-virtual-scroll-viewport
+        #list
+        class="star-listbox star-listbox--virtual star-listbox--viewport"
+        role="listbox"
+        [id]="listId"
+        [itemSize]="itemSize()"
+        [minBufferPx]="itemSize() * 4"
+        [maxBufferPx]="itemSize() * 8"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-multiselectable]="multiple() || null"
+        [attr.aria-activedescendant]="activeId()"
+        [attr.aria-disabled]="disabled() || null"
+        [style.--star-item-size.px]="itemSize()"
+        [style.height]="viewportHeight()"
+        (keydown)="onKeydown($event)"
+        (focus)="onFocus()"
+        (blur)="touch.emit()"
+      >
+        <ng-container *cdkVirtualFor="let row of layout().rows; trackBy: trackRow">
+          @if (row.kind === 'group') {
+            <div class="star-listbox__group" role="presentation" [id]="row.id">
+              {{ row.label }}
+            </div>
+          } @else {
+            @let option = row.option;
+            @let i = row.index;
+            @let position = positionOf(i);
+            <!-- Keyboard is handled on the listbox via aria-activedescendant. -->
+            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+            <div
+              class="star-listbox__option"
+              role="option"
+              [id]="listId + '-' + i"
+              [class.star-listbox__option--active]="active() === i"
+              [class.star-listbox__option--selected]="isSelected(option)"
+              [attr.aria-selected]="isSelected(option)"
+              [attr.aria-disabled]="isDisabled(option) || null"
+              [attr.aria-describedby]="describedBy(row)"
+              [attr.aria-setsize]="position.setsize"
+              [attr.aria-posinset]="position.posinset"
+              (click)="active.set(i); choose(option)"
+            >
+              @if (multiple()) {
+                <span class="star-check__box" aria-hidden="true">
+                  @if (isSelected(option)) {
+                    <i class="ph-bold ph-check"></i>
+                  }
+                </span>
+              }
+              <span class="star-listbox__label">
+                @if (optionTemplate(); as custom) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      custom.template;
+                      context: { $implicit: option, selected: isSelected(option), index: i }
+                    "
+                  />
+                } @else {
+                  {{ labelOf(option) }}
+                }
+              </span>
+            </div>
+          }
+        </ng-container>
+      </cdk-virtual-scroll-viewport>
+      @if (!visible().length) {
+        <div class="star-listbox__empty" role="presentation">{{ text.emptyFilterMessage }}</div>
+      }
+    } @else {
+      <ul
+        #list
+        class="star-listbox"
+        role="listbox"
+        [id]="listId"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-multiselectable]="multiple() || null"
+        [attr.aria-activedescendant]="activeId()"
+        [attr.aria-disabled]="disabled() || null"
+        [style.max-height]="scrollHeight()"
+        (keydown)="onKeydown($event)"
+        (focus)="onFocus()"
+        (blur)="touch.emit()"
+      >
+        @for (option of visible(); track $index; let i = $index) {
+          @if (groupHeading(i); as heading) {
+            <li class="star-listbox__group" role="presentation" [id]="groupId(i)">{{ heading }}</li>
+          }
+          <!-- Keyboard is handled on the listbox via aria-activedescendant. -->
+          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+          <li
+            class="star-listbox__option"
+            role="option"
+            [id]="listId + '-' + i"
+            [class.star-listbox__option--active]="active() === i"
+            [class.star-listbox__option--selected]="isSelected(option)"
+            [attr.aria-selected]="isSelected(option)"
+            [attr.aria-disabled]="isDisabled(option) || null"
+            [attr.aria-describedby]="groupId(i)"
+            (click)="active.set(i); choose(option)"
+          >
+            @if (multiple()) {
+              <span class="star-check__box" aria-hidden="true">
+                @if (isSelected(option)) {
+                  <i class="ph-bold ph-check"></i>
+                }
+              </span>
+            }
+            <span class="star-listbox__label">
+              @if (optionTemplate(); as custom) {
+                <ng-container
+                  *ngTemplateOutlet="
+                    custom.template;
+                    context: { $implicit: option, selected: isSelected(option), index: i }
+                  "
+                />
+              } @else {
+                {{ labelOf(option) }}
+              }
+            </span>
+          </li>
+        }
+      </ul>
+      <!-- Outside the listbox: a listbox may contain options and groups only. -->
+      @if (!visible().length) {
+        <div class="star-listbox__empty" role="presentation">{{ text.emptyFilterMessage }}</div>
+      }
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: CdkVirtualScrollViewport,
+				selector: "cdk-virtual-scroll-viewport",
+				inputs: ["orientation", "appendOnly"],
+				outputs: ["scrolledIndexChange"]
+			},
+			{
+				kind: "directive",
+				type: CdkFixedSizeVirtualScroll,
+				selector: "cdk-virtual-scroll-viewport[itemSize]",
+				inputs: [
+					"itemSize",
+					"minBufferPx",
+					"maxBufferPx"
+				]
+			},
+			{
+				kind: "directive",
+				type: CdkVirtualForOf,
+				selector: "[cdkVirtualFor][cdkVirtualForOf]",
+				inputs: [
+					"cdkVirtualForOf",
+					"cdkVirtualForTrackBy",
+					"cdkVirtualForTemplate",
+					"cdkVirtualForTemplateCacheSize"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarListbox,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-listbox",
+			imports: [
+				NgTemplateOutlet,
+				CdkVirtualScrollViewport,
+				CdkFixedSizeVirtualScroll,
+				CdkVirtualForOf
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-listbox-box",
+				"[class.star-listbox-box--disabled]": "disabled()",
+				"[class.star-listbox-box--invalid]": "invalid() && touched()"
+			},
+			template: `
+    @if (filter()) {
+      <div class="star-panel__filter">
+        <i class="ph-bold ph-magnifying-glass" aria-hidden="true"></i>
+        <input
+          #filterInput
+          type="search"
+          class="star-input star-input--sm"
+          autocomplete="off"
+          [attr.aria-label]="text.filterPlaceholder"
+          [attr.aria-controls]="listId"
+          [placeholder]="text.filterPlaceholder"
+          [value]="query()"
+          (input)="onFilterInput(filterInput.value)"
+          (keydown)="onKeydown($event)"
+        />
+      </div>
+    }
+    @if (virtualScroll()) {
+      <!-- Virtual scroll: the CDK viewport is the listbox. Group headings and options are rows of one height. -->
+      <cdk-virtual-scroll-viewport
+        #list
+        class="star-listbox star-listbox--virtual star-listbox--viewport"
+        role="listbox"
+        [id]="listId"
+        [itemSize]="itemSize()"
+        [minBufferPx]="itemSize() * 4"
+        [maxBufferPx]="itemSize() * 8"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-multiselectable]="multiple() || null"
+        [attr.aria-activedescendant]="activeId()"
+        [attr.aria-disabled]="disabled() || null"
+        [style.--star-item-size.px]="itemSize()"
+        [style.height]="viewportHeight()"
+        (keydown)="onKeydown($event)"
+        (focus)="onFocus()"
+        (blur)="touch.emit()"
+      >
+        <ng-container *cdkVirtualFor="let row of layout().rows; trackBy: trackRow">
+          @if (row.kind === 'group') {
+            <div class="star-listbox__group" role="presentation" [id]="row.id">
+              {{ row.label }}
+            </div>
+          } @else {
+            @let option = row.option;
+            @let i = row.index;
+            @let position = positionOf(i);
+            <!-- Keyboard is handled on the listbox via aria-activedescendant. -->
+            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+            <div
+              class="star-listbox__option"
+              role="option"
+              [id]="listId + '-' + i"
+              [class.star-listbox__option--active]="active() === i"
+              [class.star-listbox__option--selected]="isSelected(option)"
+              [attr.aria-selected]="isSelected(option)"
+              [attr.aria-disabled]="isDisabled(option) || null"
+              [attr.aria-describedby]="describedBy(row)"
+              [attr.aria-setsize]="position.setsize"
+              [attr.aria-posinset]="position.posinset"
+              (click)="active.set(i); choose(option)"
+            >
+              @if (multiple()) {
+                <span class="star-check__box" aria-hidden="true">
+                  @if (isSelected(option)) {
+                    <i class="ph-bold ph-check"></i>
+                  }
+                </span>
+              }
+              <span class="star-listbox__label">
+                @if (optionTemplate(); as custom) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      custom.template;
+                      context: { $implicit: option, selected: isSelected(option), index: i }
+                    "
+                  />
+                } @else {
+                  {{ labelOf(option) }}
+                }
+              </span>
+            </div>
+          }
+        </ng-container>
+      </cdk-virtual-scroll-viewport>
+      @if (!visible().length) {
+        <div class="star-listbox__empty" role="presentation">{{ text.emptyFilterMessage }}</div>
+      }
+    } @else {
+      <ul
+        #list
+        class="star-listbox"
+        role="listbox"
+        [id]="listId"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-multiselectable]="multiple() || null"
+        [attr.aria-activedescendant]="activeId()"
+        [attr.aria-disabled]="disabled() || null"
+        [style.max-height]="scrollHeight()"
+        (keydown)="onKeydown($event)"
+        (focus)="onFocus()"
+        (blur)="touch.emit()"
+      >
+        @for (option of visible(); track $index; let i = $index) {
+          @if (groupHeading(i); as heading) {
+            <li class="star-listbox__group" role="presentation" [id]="groupId(i)">{{ heading }}</li>
+          }
+          <!-- Keyboard is handled on the listbox via aria-activedescendant. -->
+          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+          <li
+            class="star-listbox__option"
+            role="option"
+            [id]="listId + '-' + i"
+            [class.star-listbox__option--active]="active() === i"
+            [class.star-listbox__option--selected]="isSelected(option)"
+            [attr.aria-selected]="isSelected(option)"
+            [attr.aria-disabled]="isDisabled(option) || null"
+            [attr.aria-describedby]="groupId(i)"
+            (click)="active.set(i); choose(option)"
+          >
+            @if (multiple()) {
+              <span class="star-check__box" aria-hidden="true">
+                @if (isSelected(option)) {
+                  <i class="ph-bold ph-check"></i>
+                }
+              </span>
+            }
+            <span class="star-listbox__label">
+              @if (optionTemplate(); as custom) {
+                <ng-container
+                  *ngTemplateOutlet="
+                    custom.template;
+                    context: { $implicit: option, selected: isSelected(option), index: i }
+                  "
+                />
+              } @else {
+                {{ labelOf(option) }}
+              }
+            </span>
+          </li>
+        }
+      </ul>
+      <!-- Outside the listbox: a listbox may contain options and groups only. -->
+      @if (!visible().length) {
+        <div class="star-listbox__empty" role="presentation">{{ text.emptyFilterMessage }}</div>
+      }
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		optionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionLabel",
+				required: false
+			}]
+		}],
+		optionValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionValue",
+				required: false
+			}]
+		}],
+		optionDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionDisabled",
+				required: false
+			}]
+		}],
+		optionGroup: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionGroup",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		filter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filter",
+				required: false
+			}]
+		}],
+		scrollHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollHeight",
+				required: false
+			}]
+		}],
+		virtualScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualScroll",
+				required: false
+			}]
+		}],
+		virtualItemSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualItemSize",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		optionTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarOptionTemplate), { isSignal: true }]
+		}],
+		list: [{
+			type: i0.ViewChild,
+			args: ["list", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		viewport: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }]
+		}]
+	}
+});
+export { StarListbox };
+
+//# sourceMappingURL=star-ng-ui-listbox.mjs.map