@star-ng/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,2523 @@
+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 { STAR_MENU_POSITIONS, StarMenu, StarMenuInDialog } from "@star-ng/ui/menu";
+import { CdkConnectedOverlay, CdkOverlayOrigin } from "@angular/cdk/overlay";
+import { NgTemplateOutlet } from "@angular/common";
+var StarCascadeSelect = class StarCascadeSelect {
+	directionSync = inject(StarDirectionService);
+	text = inject(STAR_UI_TEXT);
+	positions = STAR_MENU_POSITIONS;
+	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 */ []);
+	optionChildren = input("children", ...ngDevMode ? [{ debugName: "optionChildren" }] : /* istanbul ignore next */ []);
+	optionDisabled = input(null, ...ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []);
+	compareWith = input(Object.is, ...ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []);
+	placeholder = input(null, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	showPath = input(false, {
+		...ngDevMode ? { debugName: "showPath" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showClear = input(false, {
+		...ngDevMode ? { debugName: "showClear" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	inputId = input(inject(_IdGenerator).getId("star-cascade-"), ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* 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();
+	optionSelect = output();
+	childrenOf(option) {
+		const children = readOption(option, this.optionChildren());
+		return Array.isArray(children) ? children : [];
+	}
+	labelOf(option) {
+		return optionText(option, this.optionLabel() ?? null);
+	}
+	leaves = computed(() => {
+		const out = [];
+		const walk = (options, path) => {
+			for (const option of options) {
+				const next = [...path, this.labelOf(option)];
+				const children = this.childrenOf(option);
+				if (children.length) walk(children, next);
+				else out.push({
+					option,
+					value: readOption(option, this.optionValue()),
+					path: next
+				});
+			}
+		};
+		walk(this.options(), []);
+		return out;
+	}, ...ngDevMode ? [{ debugName: "leaves" }] : /* istanbul ignore next */ []);
+	selected = computed(() => {
+		const value = this.value();
+		if (value === null || value === void 0) return null;
+		return this.leaves().find((leaf) => this.compareWith()(leaf.value, value)) ?? null;
+	}, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	menuItems = computed(() => {
+		const disabledKey = this.optionDisabled();
+		const selected = this.selected()?.option;
+		const build = (options) => options.map((option) => {
+			const children = this.childrenOf(option);
+			const disabled = disabledKey ? !!readOption(option, disabledKey) : false;
+			return children.length ? {
+				label: this.labelOf(option),
+				disabled,
+				items: build(children)
+			} : {
+				label: this.labelOf(option),
+				disabled,
+				icon: option === selected ? "ph-bold ph-check" : void 0,
+				command: () => this.choose(option)
+			};
+		});
+		return build(this.options());
+	}, ...ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []);
+	triggerName = computed(() => {
+		const label = this.ariaLabel();
+		if (!label) return null;
+		const leaf = this.selected();
+		return `${label}: ${leaf ? this.display(leaf) : this.placeholder() ?? this.text.selectPlaceholder}`;
+	}, ...ngDevMode ? [{ debugName: "triggerName" }] : /* istanbul ignore next */ []);
+	display(leaf) {
+		return this.showPath() ? leaf.path.join(" / ") : leaf.path.at(-1) ?? "";
+	}
+	choose(option) {
+		this.value.set(readOption(option, this.optionValue()));
+		this.optionSelect.emit(option);
+	}
+	clear() {
+		this.value.set(null);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarCascadeSelect,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarCascadeSelect,
+		isStandalone: true,
+		selector: "star-cascade-select",
+		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
+			},
+			optionChildren: {
+				classPropertyName: "optionChildren",
+				publicName: "optionChildren",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionDisabled: {
+				classPropertyName: "optionDisabled",
+				publicName: "optionDisabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compareWith: {
+				classPropertyName: "compareWith",
+				publicName: "compareWith",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showPath: {
+				classPropertyName: "showPath",
+				publicName: "showPath",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showClear: {
+				classPropertyName: "showClear",
+				publicName: "showClear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				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",
+			optionSelect: "optionSelect"
+		},
+		host: {
+			properties: {
+				"class.star-select--disabled": "disabled()",
+				"class.star-select--invalid": "invalid() && touched()",
+				"class.star-select--sm": "size() === 'sm'"
+			},
+			classAttribute: "star-select star-cascade"
+		},
+		ngImport: i0,
+		template: `
+    <div class="star-select__control">
+      <button
+        #trigger="cdkMenuTriggerFor"
+        type="button"
+        class="star-select__trigger star-cascade__trigger"
+        [id]="inputId()"
+        [cdkMenuTriggerFor]="menu.template()"
+        [cdkMenuTriggerData]="{ $implicit: menuItems() }"
+        [cdkMenuPosition]="positions"
+        [disabled]="disabled() || readonly()"
+        [attr.aria-label]="triggerName()"
+        [attr.aria-invalid]="(invalid() && touched()) || null"
+        (cdkMenuClosed)="touch.emit()"
+      >
+        @if (selected(); as leaf) {
+          <span class="star-select__value">{{ display(leaf) }}</span>
+        } @else {
+          <span class="star-select__placeholder">{{
+            placeholder() ?? text.selectPlaceholder
+          }}</span>
+        }
+      </button>
+      @if (showClear() && selected() && !disabled() && !readonly()) {
+        <button
+          type="button"
+          class="star-select__icon-btn"
+          [attr.aria-label]="text.clear"
+          (click)="clear()"
+        >
+          <i class="ph-bold ph-x" aria-hidden="true"></i>
+        </button>
+      }
+      <i class="ph-bold ph-caret-down star-select__caret" aria-hidden="true"></i>
+    </div>
+    <star-menu #menu [ariaLabel]="ariaLabel()" />
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkMenuTrigger,
+				selector: "[cdkMenuTriggerFor]",
+				inputs: [
+					"cdkMenuTriggerFor",
+					"cdkMenuPosition",
+					"cdkMenuTriggerData",
+					"cdkMenuTriggerTransformOriginOn"
+				],
+				outputs: ["cdkMenuOpened", "cdkMenuClosed"],
+				exportAs: ["cdkMenuTriggerFor"]
+			},
+			{
+				kind: "component",
+				type: StarMenu,
+				selector: "star-menu",
+				inputs: [
+					"items",
+					"inline",
+					"ariaLabel"
+				],
+				outputs: ["itemClick"]
+			},
+			{
+				kind: "directive",
+				type: StarMenuInDialog,
+				selector: "[cdkMenuTriggerFor]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarCascadeSelect,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-cascade-select",
+			imports: [
+				CdkMenuTrigger,
+				StarMenu,
+				StarMenuInDialog
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-select star-cascade",
+				"[class.star-select--disabled]": "disabled()",
+				"[class.star-select--invalid]": "invalid() && touched()",
+				"[class.star-select--sm]": "size() === 'sm'"
+			},
+			template: `
+    <div class="star-select__control">
+      <button
+        #trigger="cdkMenuTriggerFor"
+        type="button"
+        class="star-select__trigger star-cascade__trigger"
+        [id]="inputId()"
+        [cdkMenuTriggerFor]="menu.template()"
+        [cdkMenuTriggerData]="{ $implicit: menuItems() }"
+        [cdkMenuPosition]="positions"
+        [disabled]="disabled() || readonly()"
+        [attr.aria-label]="triggerName()"
+        [attr.aria-invalid]="(invalid() && touched()) || null"
+        (cdkMenuClosed)="touch.emit()"
+      >
+        @if (selected(); as leaf) {
+          <span class="star-select__value">{{ display(leaf) }}</span>
+        } @else {
+          <span class="star-select__placeholder">{{
+            placeholder() ?? text.selectPlaceholder
+          }}</span>
+        }
+      </button>
+      @if (showClear() && selected() && !disabled() && !readonly()) {
+        <button
+          type="button"
+          class="star-select__icon-btn"
+          [attr.aria-label]="text.clear"
+          (click)="clear()"
+        >
+          <i class="ph-bold ph-x" aria-hidden="true"></i>
+        </button>
+      }
+      <i class="ph-bold ph-caret-down star-select__caret" aria-hidden="true"></i>
+    </div>
+    <star-menu #menu [ariaLabel]="ariaLabel()" />
+  `
+		}]
+	}],
+	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
+			}]
+		}],
+		optionChildren: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionChildren",
+				required: false
+			}]
+		}],
+		optionDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionDisabled",
+				required: false
+			}]
+		}],
+		compareWith: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compareWith",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		showPath: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showPath",
+				required: false
+			}]
+		}],
+		showClear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showClear",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				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"]
+		}],
+		optionSelect: [{
+			type: i0.Output,
+			args: ["optionSelect"]
+		}]
+	}
+});
+var StarOptionTemplate = class StarOptionTemplate {
+	starOptionOf = input(null, ...ngDevMode ? [{ debugName: "starOptionOf" }] : /* 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: StarOptionTemplate,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarOptionTemplate,
+		isStandalone: true,
+		selector: "ng-template[starOption]",
+		inputs: { starOptionOf: {
+			classPropertyName: "starOptionOf",
+			publicName: "starOptionOf",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarOptionTemplate,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[starOption]" }]
+	}],
+	propDecorators: { starOptionOf: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "starOptionOf",
+			required: false
+		}]
+	}] }
+});
+const VIRTUAL_BUFFER = 6;
+const VIRTUAL_FALLBACK_HEIGHT = 256;
+const PANEL_POSITIONS = [{
+	originX: "start",
+	originY: "bottom",
+	overlayX: "start",
+	overlayY: "top",
+	offsetY: 6
+}, {
+	originX: "start",
+	originY: "top",
+	overlayX: "start",
+	overlayY: "bottom",
+	offsetY: -6
+}];
+var StarOptionListBase = class StarOptionListBase {
+	directionSync = inject(StarDirectionService);
+	text = inject(STAR_UI_TEXT);
+	ids = inject(_IdGenerator);
+	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 */ []);
+	compareWith = input(Object.is, ...ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []);
+	optionGroup = input(null, ...ngDevMode ? [{ debugName: "optionGroup" }] : /* istanbul ignore next */ []);
+	virtualScroll = input(false, {
+		...ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	virtualItemSize = input(40, ...ngDevMode ? [{ debugName: "virtualItemSize" }] : /* istanbul ignore next */ []);
+	placeholder = input(null, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	filter = input(false, {
+		...ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	filterPlaceholder = input(null, ...ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []);
+	showClear = input(false, {
+		...ngDevMode ? { debugName: "showClear" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	emptyMessage = input(null, ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
+	scrollHeight = input("16rem", ...ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	ariaLabelledBy = input(null, ...ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []);
+	inputId = input(this.ids.getId("star-select-"), ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* 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
+	});
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	touch = output();
+	opened = output();
+	closed = output();
+	filterChange = output();
+	optionTemplate = contentChild(StarOptionTemplate, ...ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []);
+	trigger = viewChild.required("trigger", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	filterInput = viewChild("filterInput", ...ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []);
+	positions = PANEL_POSITIONS;
+	listId = this.ids.getId("star-listbox-");
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	filterValue = signal("", ...ngDevMode ? [{ debugName: "filterValue" }] : /* istanbul ignore next */ []);
+	activeIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	showInvalid = computed(() => this.invalid() && this.touched(), ...ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []);
+	interactive = computed(() => !this.disabled() && !this.readonly(), ...ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []);
+	visibleOptions = computed(() => {
+		const query = this.filterValue();
+		const all = this.options();
+		const options = !this.filter() || !query ? all : all.filter((option) => matchesFilter(this.labelOf(option), query));
+		return this.groupedOrder(options);
+	}, ...ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []);
+	groupedOrder(options) {
+		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);
+	}
+	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 */ []);
+	listScrollTop = signal(0, ...ngDevMode ? [{ debugName: "listScrollTop" }] : /* istanbul ignore next */ []);
+	listHeight = signal(0, ...ngDevMode ? [{ debugName: "listHeight" }] : /* istanbul ignore next */ []);
+	virtualWindow = computed(() => {
+		const count = this.rows().length;
+		if (!this.virtualScroll()) return {
+			start: 0,
+			end: count,
+			before: 0,
+			after: 0
+		};
+		const size = Math.max(1, this.virtualItemSize());
+		const visible = Math.ceil((this.listHeight() || VIRTUAL_FALLBACK_HEIGHT) / size);
+		const first = Math.min(Math.floor(this.listScrollTop() / size), Math.max(0, count - visible));
+		const start = Math.max(0, first - VIRTUAL_BUFFER);
+		const end = Math.min(count, first + visible + VIRTUAL_BUFFER);
+		return {
+			start,
+			end,
+			before: start * size,
+			after: (count - end) * size
+		};
+	}, ...ngDevMode ? [{ debugName: "virtualWindow" }] : /* istanbul ignore next */ []);
+	renderedRows = computed(() => {
+		const rows = this.rows();
+		const { start, end } = this.virtualWindow();
+		return start === 0 && end === rows.length ? rows : rows.slice(start, end);
+	}, ...ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []);
+	onListScroll(event) {
+		if (!this.virtualScroll()) return;
+		const list = event.target;
+		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 */ []);
+	emptyText = computed(() => this.filterValue() ? this.text.emptyFilterMessage : this.emptyMessage() ?? this.text.emptyMessage, ...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	typeahead = "";
+	typeaheadTimer;
+	constructor() {
+		inject(DestroyRef).onDestroy(() => clearTimeout(this.typeaheadTimer));
+	}
+	labelOf(option) {
+		return optionText(option, this.optionLabel() ?? null);
+	}
+	groupOf(option) {
+		const key = this.optionGroup();
+		const group = key ? readOption(option, key) : null;
+		return group === null || group === void 0 ? "" : String(group);
+	}
+	valueOf(option) {
+		return readOption(option, this.optionValue());
+	}
+	isDisabled(option) {
+		const key = this.optionDisabled();
+		return key ? !!readOption(option, key) : false;
+	}
+	equals(a, b) {
+		return this.compareWith()(a, b);
+	}
+	optionId(index) {
+		return `${this.listId}-${index}`;
+	}
+	optionContext(option, index) {
+		return {
+			$implicit: option,
+			selected: this.isSelected(option),
+			index
+		};
+	}
+	openPanel() {
+		if (!this.interactive() || this.open()) return;
+		this.open.set(true);
+		this.activeIndex.set(this.initialActiveIndex());
+		this.opened.emit();
+	}
+	closePanel(focusTrigger = true) {
+		if (!this.open()) return;
+		this.open.set(false);
+		this.activeIndex.set(-1);
+		this.listScrollTop.set(0);
+		if (this.filterValue()) {
+			this.filterValue.set("");
+			this.filterChange.emit("");
+		}
+		if (focusTrigger) this.trigger().nativeElement.focus();
+		this.closed.emit();
+	}
+	toggle() {
+		if (this.open()) this.closePanel();
+		else this.openPanel();
+	}
+	focus(options) {
+		this.trigger().nativeElement.focus(options);
+	}
+	onPanelAttached() {
+		this.filterInput()?.nativeElement.focus();
+		this.scrollActiveIntoView();
+	}
+	onOutsideClick(event) {
+		if (this.trigger().nativeElement.contains(event.target)) return;
+		this.closePanel(false);
+		this.touch.emit();
+	}
+	onPanelMousedown(event) {
+		if (!(event.target instanceof HTMLInputElement)) event.preventDefault();
+	}
+	onTriggerBlur() {
+		if (!this.open()) this.touch.emit();
+	}
+	onFilterInput(value) {
+		this.filterValue.set(value);
+		this.filterChange.emit(value);
+		this.listScrollTop.set(0);
+		this.activeIndex.set(this.firstEnabledFrom(0, 1));
+	}
+	onOptionClick(option, index) {
+		if (this.isDisabled(option)) return;
+		this.activeIndex.set(index);
+		this.choose(option);
+		if (this.closeOnChoose) this.closePanel();
+	}
+	onKeydown(event) {
+		if (!this.interactive()) return;
+		const open = this.open();
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowUp": {
+				event.preventDefault();
+				if (!open) {
+					this.openPanel();
+					return;
+				}
+				const step = event.key === "ArrowDown" ? 1 : -1;
+				if (event.altKey && step === -1) {
+					this.chooseActive();
+					this.closePanel();
+					return;
+				}
+				this.moveActive(step);
+				return;
+			}
+			case "Home":
+			case "End":
+				if (!open) return;
+				event.preventDefault();
+				this.activeIndex.set(event.key === "Home" ? this.firstEnabledFrom(0, 1) : this.firstEnabledFrom(this.visibleOptions().length - 1, -1));
+				this.scrollActiveIntoView();
+				return;
+			case "Enter":
+				event.preventDefault();
+				if (!open) this.openPanel();
+				else this.chooseActive(this.closeOnChoose);
+				return;
+			case " ":
+				if (event.target instanceof HTMLInputElement) return;
+				event.preventDefault();
+				if (!open) this.openPanel();
+				else this.chooseActive(this.closeOnChoose);
+				return;
+			case "Escape":
+				if (open) {
+					event.preventDefault();
+					event.stopPropagation();
+					this.closePanel();
+				}
+				return;
+			case "Tab":
+				if (open) this.closePanel(false);
+				return;
+			default: if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && !(event.target instanceof HTMLInputElement)) this.runTypeahead(event.key);
+		}
+	}
+	chooseActive(thenClose = false) {
+		const option = this.visibleOptions()[this.activeIndex()];
+		if (option === void 0 || this.isDisabled(option)) return;
+		this.choose(option);
+		if (thenClose) this.closePanel();
+	}
+	moveActive(step) {
+		const count = this.visibleOptions().length;
+		if (!count) return;
+		const start = this.activeIndex() < 0 ? step === 1 ? 0 : count - 1 : this.activeIndex() + step;
+		const next = this.firstEnabledFrom(Math.min(Math.max(start, 0), count - 1), step);
+		if (next >= 0) this.activeIndex.set(next);
+		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;
+		return -1;
+	}
+	runTypeahead(char) {
+		clearTimeout(this.typeaheadTimer);
+		this.typeahead += char.toLocaleLowerCase();
+		this.typeaheadTimer = setTimeout(() => this.typeahead = "", 500);
+		const options = this.visibleOptions();
+		const start = Math.max(this.activeIndex(), 0);
+		const match = [...options.keys()].map((i) => (start + (this.typeahead.length === 1 ? 1 : 0) + i) % options.length).find((i) => !this.isDisabled(options[i]) && this.labelOf(options[i]).toLocaleLowerCase().startsWith(this.typeahead));
+		if (match === void 0) return;
+		this.activeIndex.set(match);
+		if (!this.open() && this.closeOnChoose) this.choose(options[match]);
+		this.scrollActiveIntoView();
+	}
+	scrollActiveIntoView() {
+		const id = this.activeId();
+		if (!id) 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 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);
+			this.listHeight.set(height);
+			queueMicrotask(() => list.scrollTop = scrollTop);
+			return;
+		}
+		queueMicrotask(() => this.trigger().nativeElement.ownerDocument.getElementById(id)?.scrollIntoView?.({ block: "nearest" }));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarOptionListBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.6",
+		type: StarOptionListBase,
+		isStandalone: true,
+		inputs: {
+			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
+			},
+			compareWith: {
+				classPropertyName: "compareWith",
+				publicName: "compareWith",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionGroup: {
+				classPropertyName: "optionGroup",
+				publicName: "optionGroup",
+				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
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filter: {
+				classPropertyName: "filter",
+				publicName: "filter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filterPlaceholder: {
+				classPropertyName: "filterPlaceholder",
+				publicName: "filterPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showClear: {
+				classPropertyName: "showClear",
+				publicName: "showClear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyMessage: {
+				classPropertyName: "emptyMessage",
+				publicName: "emptyMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scrollHeight: {
+				classPropertyName: "scrollHeight",
+				publicName: "scrollHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledBy: {
+				classPropertyName: "ariaLabelledBy",
+				publicName: "ariaLabelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				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
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			touch: "touch",
+			opened: "opened",
+			closed: "closed",
+			filterChange: "filterChange"
+		},
+		queries: [{
+			propertyName: "optionTemplate",
+			first: true,
+			predicate: StarOptionTemplate,
+			descendants: true,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "trigger",
+			first: true,
+			predicate: ["trigger"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "filterInput",
+			first: true,
+			predicate: ["filterInput"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarOptionListBase,
+	decorators: [{ type: Directive }],
+	ctorParameters: () => [],
+	propDecorators: {
+		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
+			}]
+		}],
+		compareWith: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compareWith",
+				required: false
+			}]
+		}],
+		optionGroup: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionGroup",
+				required: false
+			}]
+		}],
+		virtualScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualScroll",
+				required: false
+			}]
+		}],
+		virtualItemSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualItemSize",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		filter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filter",
+				required: false
+			}]
+		}],
+		filterPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filterPlaceholder",
+				required: false
+			}]
+		}],
+		showClear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showClear",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		emptyMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyMessage",
+				required: false
+			}]
+		}],
+		scrollHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollHeight",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledBy",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		opened: [{
+			type: i0.Output,
+			args: ["opened"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}],
+		filterChange: [{
+			type: i0.Output,
+			args: ["filterChange"]
+		}],
+		optionTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => StarOptionTemplate), { isSignal: true }]
+		}],
+		trigger: [{
+			type: i0.ViewChild,
+			args: ["trigger", { isSignal: true }]
+		}],
+		filterInput: [{
+			type: i0.ViewChild,
+			args: ["filterInput", { isSignal: true }]
+		}]
+	}
+});
+var StarMultiSelect = class StarMultiSelect extends StarOptionListBase {
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	display = input("comma", ...ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []);
+	maxSelectedLabels = input(3, ...ngDevMode ? [{ debugName: "maxSelectedLabels" }] : /* istanbul ignore next */ []);
+	selectionLimit = input(0, ...ngDevMode ? [{ debugName: "selectionLimit" }] : /* istanbul ignore next */ []);
+	showToggleAll = input(true, ...ngDevMode ? [{ debugName: "showToggleAll" }] : /* istanbul ignore next */ []);
+	closeOnChoose = false;
+	selectedOptions = computed(() => this.options().filter((option) => this.isSelected(option)), ...ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []);
+	collapsed = computed(() => this.selectedOptions().length > this.maxSelectedLabels(), ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	selectedLabels = computed(() => this.selectedOptions().map((option) => this.labelOf(option)).join(", "), ...ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []);
+	selectableVisible = computed(() => this.visibleOptions().filter((option) => !this.isDisabled(option)), ...ngDevMode ? [{ debugName: "selectableVisible" }] : /* istanbul ignore next */ []);
+	allState = computed(() => {
+		const options = this.selectableVisible();
+		const selected = options.filter((option) => this.isSelected(option)).length;
+		if (!options.length || selected === 0) return false;
+		return selected === options.length ? true : "mixed";
+	}, ...ngDevMode ? [{ debugName: "allState" }] : /* istanbul ignore next */ []);
+	isSelected(option) {
+		const optionValue = this.valueOf(option);
+		return this.value().some((value) => this.equals(value, optionValue));
+	}
+	choose(option) {
+		if (this.isSelected(option)) {
+			this.remove(option);
+			return;
+		}
+		const limit = this.selectionLimit();
+		if (limit > 0 && this.value().length >= limit) return;
+		this.value.update((values) => [...values, this.valueOf(option)]);
+	}
+	initialActiveIndex() {
+		return this.firstEnabledFrom(0, 1);
+	}
+	remove(option) {
+		const optionValue = this.valueOf(option);
+		this.value.update((values) => values.filter((value) => !this.equals(value, optionValue)));
+	}
+	toggleAll() {
+		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))));
+			return;
+		}
+		const additions = options.filter((option) => !this.isSelected(option)).map((option) => this.valueOf(option));
+		this.value.update((values) => [...values, ...additions]);
+	}
+	clear() {
+		this.value.set([]);
+		this.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarMultiSelect,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarMultiSelect,
+		isStandalone: true,
+		selector: "star-multi-select",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			display: {
+				classPropertyName: "display",
+				publicName: "display",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxSelectedLabels: {
+				classPropertyName: "maxSelectedLabels",
+				publicName: "maxSelectedLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionLimit: {
+				classPropertyName: "selectionLimit",
+				publicName: "selectionLimit",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showToggleAll: {
+				classPropertyName: "showToggleAll",
+				publicName: "showToggleAll",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			properties: {
+				"class.star-select--open": "open()",
+				"class.star-select--disabled": "disabled()",
+				"class.star-select--invalid": "showInvalid()",
+				"class.star-select--sm": "size() === 'sm'"
+			},
+			classAttribute: "star-select star-select--multi"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <div class="star-select__control" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+      <div
+        #trigger
+        class="star-select__trigger"
+        role="combobox"
+        aria-haspopup="listbox"
+        [id]="inputId()"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="open() ? listId : null"
+        [attr.aria-activedescendant]="activeId()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledBy()"
+        [attr.aria-required]="required() || null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.aria-readonly]="readonly() || null"
+        (click)="toggle()"
+        (keydown)="onKeydown($event)"
+        (blur)="onTriggerBlur()"
+      >
+        @if (selectedOptions().length === 0) {
+          <span class="star-select__placeholder">{{
+            placeholder() ?? text.selectPlaceholder
+          }}</span>
+        } @else if (collapsed()) {
+          <span class="star-select__value">{{ text.selectedItems(selectedOptions().length) }}</span>
+        } @else if (display() === 'chip') {
+          <span class="star-select__chips">
+            @for (option of selectedOptions(); track $index) {
+              <span class="star-chip star-chip--sm">
+                {{ labelOf(option) }}
+                @if (interactive()) {
+                  <button
+                    type="button"
+                    class="star-chip__remove"
+                    tabindex="-1"
+                    [attr.aria-label]="text.removeItem(labelOf(option))"
+                    (click)="$event.stopPropagation(); remove(option)"
+                  >
+                    <i class="ph-bold ph-x" aria-hidden="true"></i>
+                  </button>
+                }
+              </span>
+            }
+          </span>
+        } @else {
+          <span class="star-select__value">{{ selectedLabels() }}</span>
+        }
+      </div>
+      @if (showClear() && selectedOptions().length && interactive()) {
+        <button
+          type="button"
+          class="star-select__icon-btn"
+          [attr.aria-label]="text.clear"
+          (click)="clear()"
+        >
+          <i class="ph-bold ph-x" aria-hidden="true"></i>
+        </button>
+      }
+      @if (loading()) {
+        <i
+          class="ph-bold ph-spinner-gap star-spin star-select__caret"
+          role="img"
+          [attr.aria-label]="text.loading"
+        ></i>
+      } @else {
+        <i class="ph-bold ph-caret-down star-select__caret" aria-hidden="true"></i>
+      }
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      cdkConnectedOverlayUsePopover="inline"
+      cdkConnectedOverlayMatchWidth
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayPositions]="positions"
+      (attach)="onPanelAttached()"
+      (detach)="closePanel(false)"
+      (overlayOutsideClick)="onOutsideClick($event)"
+    >
+      <div class="star-panel" (mousedown)="onPanelMousedown($event)">
+        @if (showToggleAll() || filter()) {
+          <div class="star-panel__filter">
+            @if (showToggleAll() && !selectionLimit()) {
+              <button
+                type="button"
+                class="star-panel__toggle-all"
+                role="checkbox"
+                tabindex="-1"
+                [attr.aria-checked]="allState()"
+                [attr.aria-label]="text.selectAll"
+                (click)="toggleAll()"
+              >
+                <span class="star-check__box" aria-hidden="true">
+                  @if (allState() === 'mixed') {
+                    <i class="ph-bold ph-minus"></i>
+                  } @else if (allState() === true) {
+                    <i class="ph-bold ph-check"></i>
+                  }
+                </span>
+              </button>
+            }
+            @if (filter()) {
+              <i class="ph-bold ph-magnifying-glass" aria-hidden="true"></i>
+              <input
+                #filterInput
+                type="text"
+                class="star-input star-input--sm"
+                role="searchbox"
+                autocomplete="off"
+                [value]="filterValue()"
+                [attr.placeholder]="filterPlaceholder() ?? text.filterPlaceholder"
+                [attr.aria-label]="filterPlaceholder() ?? text.filterPlaceholder"
+                [attr.aria-controls]="listId"
+                [attr.aria-activedescendant]="activeId()"
+                (input)="onFilterInput(filterInput.value)"
+                (keydown)="onKeydown($event)"
+              />
+            } @else {
+              <span class="star-panel__toggle-label">{{ text.selectAll }}</span>
+            }
+          </div>
+        }
+        <ul
+          class="star-listbox"
+          role="listbox"
+          aria-multiselectable="true"
+          [id]="listId"
+          [class.star-listbox--virtual]="virtualScroll()"
+          [style.--star-item-size.px]="virtualScroll() ? virtualItemSize() : null"
+          [style.max-height]="scrollHeight()"
+          [attr.aria-label]="ariaLabel()"
+          [attr.aria-labelledby]="ariaLabelledBy()"
+          (scroll)="onListScroll($event)"
+        >
+          @if (virtualWindow().before) {
+            <li
+              class="star-listbox__spacer"
+              role="presentation"
+              [style.height.px]="virtualWindow().before"
+            ></li>
+          }
+          @for (row of renderedRows(); track row.key) {
+            @if (row.kind === 'group') {
+              <li class="star-listbox__group" role="presentation" [id]="row.id">{{ row.label }}</li>
+            } @else {
+              @let option = row.option;
+              @let i = row.index;
+              <!-- Keyboard is handled on the combobox via aria-activedescendant (WAI-ARIA combobox pattern). -->
+              <!-- 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]="optionId(i)"
+                [class.star-listbox__option--active]="activeIndex() === i"
+                [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-setsize]="virtualScroll() ? visibleOptions().length : null"
+                [attr.aria-posinset]="virtualScroll() ? i + 1 : null"
+                (click)="onOptionClick(option, i)"
+                (mousemove)="isDisabled(option) || activeIndex.set(i)"
+              >
+                <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: optionContext(option, i)"
+                    />
+                  } @else {
+                    {{ labelOf(option) }}
+                  }
+                </span>
+              </li>
+            }
+          } @empty {
+            <li class="star-listbox__empty" role="presentation">{{ emptyText() }}</li>
+          }
+          @if (virtualWindow().after) {
+            <li
+              class="star-listbox__spacer"
+              role="presentation"
+              [style.height.px]="virtualWindow().after"
+            ></li>
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				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: StarMultiSelect,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-multi-select",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				NgTemplateOutlet
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-select star-select--multi",
+				"[class.star-select--open]": "open()",
+				"[class.star-select--disabled]": "disabled()",
+				"[class.star-select--invalid]": "showInvalid()",
+				"[class.star-select--sm]": "size() === 'sm'"
+			},
+			template: `
+    <div class="star-select__control" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+      <div
+        #trigger
+        class="star-select__trigger"
+        role="combobox"
+        aria-haspopup="listbox"
+        [id]="inputId()"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="open() ? listId : null"
+        [attr.aria-activedescendant]="activeId()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledBy()"
+        [attr.aria-required]="required() || null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.aria-readonly]="readonly() || null"
+        (click)="toggle()"
+        (keydown)="onKeydown($event)"
+        (blur)="onTriggerBlur()"
+      >
+        @if (selectedOptions().length === 0) {
+          <span class="star-select__placeholder">{{
+            placeholder() ?? text.selectPlaceholder
+          }}</span>
+        } @else if (collapsed()) {
+          <span class="star-select__value">{{ text.selectedItems(selectedOptions().length) }}</span>
+        } @else if (display() === 'chip') {
+          <span class="star-select__chips">
+            @for (option of selectedOptions(); track $index) {
+              <span class="star-chip star-chip--sm">
+                {{ labelOf(option) }}
+                @if (interactive()) {
+                  <button
+                    type="button"
+                    class="star-chip__remove"
+                    tabindex="-1"
+                    [attr.aria-label]="text.removeItem(labelOf(option))"
+                    (click)="$event.stopPropagation(); remove(option)"
+                  >
+                    <i class="ph-bold ph-x" aria-hidden="true"></i>
+                  </button>
+                }
+              </span>
+            }
+          </span>
+        } @else {
+          <span class="star-select__value">{{ selectedLabels() }}</span>
+        }
+      </div>
+      @if (showClear() && selectedOptions().length && interactive()) {
+        <button
+          type="button"
+          class="star-select__icon-btn"
+          [attr.aria-label]="text.clear"
+          (click)="clear()"
+        >
+          <i class="ph-bold ph-x" aria-hidden="true"></i>
+        </button>
+      }
+      @if (loading()) {
+        <i
+          class="ph-bold ph-spinner-gap star-spin star-select__caret"
+          role="img"
+          [attr.aria-label]="text.loading"
+        ></i>
+      } @else {
+        <i class="ph-bold ph-caret-down star-select__caret" aria-hidden="true"></i>
+      }
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      cdkConnectedOverlayUsePopover="inline"
+      cdkConnectedOverlayMatchWidth
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayPositions]="positions"
+      (attach)="onPanelAttached()"
+      (detach)="closePanel(false)"
+      (overlayOutsideClick)="onOutsideClick($event)"
+    >
+      <div class="star-panel" (mousedown)="onPanelMousedown($event)">
+        @if (showToggleAll() || filter()) {
+          <div class="star-panel__filter">
+            @if (showToggleAll() && !selectionLimit()) {
+              <button
+                type="button"
+                class="star-panel__toggle-all"
+                role="checkbox"
+                tabindex="-1"
+                [attr.aria-checked]="allState()"
+                [attr.aria-label]="text.selectAll"
+                (click)="toggleAll()"
+              >
+                <span class="star-check__box" aria-hidden="true">
+                  @if (allState() === 'mixed') {
+                    <i class="ph-bold ph-minus"></i>
+                  } @else if (allState() === true) {
+                    <i class="ph-bold ph-check"></i>
+                  }
+                </span>
+              </button>
+            }
+            @if (filter()) {
+              <i class="ph-bold ph-magnifying-glass" aria-hidden="true"></i>
+              <input
+                #filterInput
+                type="text"
+                class="star-input star-input--sm"
+                role="searchbox"
+                autocomplete="off"
+                [value]="filterValue()"
+                [attr.placeholder]="filterPlaceholder() ?? text.filterPlaceholder"
+                [attr.aria-label]="filterPlaceholder() ?? text.filterPlaceholder"
+                [attr.aria-controls]="listId"
+                [attr.aria-activedescendant]="activeId()"
+                (input)="onFilterInput(filterInput.value)"
+                (keydown)="onKeydown($event)"
+              />
+            } @else {
+              <span class="star-panel__toggle-label">{{ text.selectAll }}</span>
+            }
+          </div>
+        }
+        <ul
+          class="star-listbox"
+          role="listbox"
+          aria-multiselectable="true"
+          [id]="listId"
+          [class.star-listbox--virtual]="virtualScroll()"
+          [style.--star-item-size.px]="virtualScroll() ? virtualItemSize() : null"
+          [style.max-height]="scrollHeight()"
+          [attr.aria-label]="ariaLabel()"
+          [attr.aria-labelledby]="ariaLabelledBy()"
+          (scroll)="onListScroll($event)"
+        >
+          @if (virtualWindow().before) {
+            <li
+              class="star-listbox__spacer"
+              role="presentation"
+              [style.height.px]="virtualWindow().before"
+            ></li>
+          }
+          @for (row of renderedRows(); track row.key) {
+            @if (row.kind === 'group') {
+              <li class="star-listbox__group" role="presentation" [id]="row.id">{{ row.label }}</li>
+            } @else {
+              @let option = row.option;
+              @let i = row.index;
+              <!-- Keyboard is handled on the combobox via aria-activedescendant (WAI-ARIA combobox pattern). -->
+              <!-- 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]="optionId(i)"
+                [class.star-listbox__option--active]="activeIndex() === i"
+                [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-setsize]="virtualScroll() ? visibleOptions().length : null"
+                [attr.aria-posinset]="virtualScroll() ? i + 1 : null"
+                (click)="onOptionClick(option, i)"
+                (mousemove)="isDisabled(option) || activeIndex.set(i)"
+              >
+                <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: optionContext(option, i)"
+                    />
+                  } @else {
+                    {{ labelOf(option) }}
+                  }
+                </span>
+              </li>
+            }
+          } @empty {
+            <li class="star-listbox__empty" role="presentation">{{ emptyText() }}</li>
+          }
+          @if (virtualWindow().after) {
+            <li
+              class="star-listbox__spacer"
+              role="presentation"
+              [style.height.px]="virtualWindow().after"
+            ></li>
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		display: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "display",
+				required: false
+			}]
+		}],
+		maxSelectedLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSelectedLabels",
+				required: false
+			}]
+		}],
+		selectionLimit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionLimit",
+				required: false
+			}]
+		}],
+		showToggleAll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showToggleAll",
+				required: false
+			}]
+		}]
+	}
+});
+var StarSelect = class StarSelect extends StarOptionListBase {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	closeOnChoose = true;
+	selectedOption = computed(() => {
+		const value = this.value();
+		if (value === null) return void 0;
+		return this.options().find((option) => this.equals(this.valueOf(option), value));
+	}, ...ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []);
+	isSelected(option) {
+		const value = this.value();
+		return value !== null && this.equals(this.valueOf(option), value);
+	}
+	choose(option) {
+		this.value.set(this.valueOf(option));
+	}
+	initialActiveIndex() {
+		const index = this.visibleOptions().findIndex((option) => this.isSelected(option));
+		return index >= 0 ? index : this.firstEnabledFrom(0, 1);
+	}
+	clear() {
+		this.value.set(null);
+		this.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarSelect,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarSelect,
+		isStandalone: true,
+		selector: "star-select",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { value: "valueChange" },
+		host: {
+			properties: {
+				"class.star-select--open": "open()",
+				"class.star-select--disabled": "disabled()",
+				"class.star-select--invalid": "showInvalid()",
+				"class.star-select--sm": "size() === 'sm'"
+			},
+			classAttribute: "star-select"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <div class="star-select__control" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+      <div
+        #trigger
+        class="star-select__trigger"
+        role="combobox"
+        aria-haspopup="listbox"
+        [id]="inputId()"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="open() ? listId : null"
+        [attr.aria-activedescendant]="activeId()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledBy()"
+        [attr.aria-required]="required() || null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.aria-readonly]="readonly() || null"
+        (click)="toggle()"
+        (keydown)="onKeydown($event)"
+        (blur)="onTriggerBlur()"
+      >
+        @if (selectedOption(); as option) {
+          <span class="star-select__value">{{ labelOf(option) }}</span>
+        } @else {
+          <span class="star-select__placeholder">{{
+            placeholder() ?? text.selectPlaceholder
+          }}</span>
+        }
+      </div>
+      @if (showClear() && selectedOption() !== undefined && interactive()) {
+        <button
+          type="button"
+          class="star-select__icon-btn"
+          [attr.aria-label]="text.clear"
+          (click)="clear()"
+        >
+          <i class="ph-bold ph-x" aria-hidden="true"></i>
+        </button>
+      }
+      @if (loading()) {
+        <i
+          class="ph-bold ph-spinner-gap star-spin star-select__caret"
+          role="img"
+          [attr.aria-label]="text.loading"
+        ></i>
+      } @else {
+        <i class="ph-bold ph-caret-down star-select__caret" aria-hidden="true"></i>
+      }
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      cdkConnectedOverlayUsePopover="inline"
+      cdkConnectedOverlayMatchWidth
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayPositions]="positions"
+      (attach)="onPanelAttached()"
+      (detach)="closePanel(false)"
+      (overlayOutsideClick)="onOutsideClick($event)"
+    >
+      <div class="star-panel" (mousedown)="onPanelMousedown($event)">
+        @if (filter()) {
+          <div class="star-panel__filter">
+            <i class="ph-bold ph-magnifying-glass" aria-hidden="true"></i>
+            <input
+              #filterInput
+              type="text"
+              class="star-input star-input--sm"
+              role="searchbox"
+              autocomplete="off"
+              [value]="filterValue()"
+              [attr.placeholder]="filterPlaceholder() ?? text.filterPlaceholder"
+              [attr.aria-label]="filterPlaceholder() ?? text.filterPlaceholder"
+              [attr.aria-controls]="listId"
+              [attr.aria-activedescendant]="activeId()"
+              (input)="onFilterInput(filterInput.value)"
+              (keydown)="onKeydown($event)"
+            />
+          </div>
+        }
+        <ul
+          class="star-listbox"
+          role="listbox"
+          [id]="listId"
+          [class.star-listbox--virtual]="virtualScroll()"
+          [style.--star-item-size.px]="virtualScroll() ? virtualItemSize() : null"
+          [style.max-height]="scrollHeight()"
+          [attr.aria-label]="ariaLabel()"
+          [attr.aria-labelledby]="ariaLabelledBy()"
+          (scroll)="onListScroll($event)"
+        >
+          @if (virtualWindow().before) {
+            <li
+              class="star-listbox__spacer"
+              role="presentation"
+              [style.height.px]="virtualWindow().before"
+            ></li>
+          }
+          @for (row of renderedRows(); track row.key) {
+            @if (row.kind === 'group') {
+              <li class="star-listbox__group" role="presentation" [id]="row.id">{{ row.label }}</li>
+            } @else {
+              @let option = row.option;
+              @let i = row.index;
+              <!-- Keyboard is handled on the combobox via aria-activedescendant (WAI-ARIA combobox pattern). -->
+              <!-- 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]="optionId(i)"
+                [class.star-listbox__option--active]="activeIndex() === i"
+                [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-setsize]="virtualScroll() ? visibleOptions().length : null"
+                [attr.aria-posinset]="virtualScroll() ? i + 1 : null"
+                (click)="onOptionClick(option, i)"
+                (mousemove)="isDisabled(option) || activeIndex.set(i)"
+              >
+                <span class="star-listbox__label">
+                  @if (optionTemplate(); as custom) {
+                    <ng-container
+                      *ngTemplateOutlet="custom.template; context: optionContext(option, i)"
+                    />
+                  } @else {
+                    {{ labelOf(option) }}
+                  }
+                </span>
+                @if (isSelected(option)) {
+                  <i class="ph-bold ph-check star-listbox__check" aria-hidden="true"></i>
+                }
+              </li>
+            }
+          } @empty {
+            <li class="star-listbox__empty" role="presentation">{{ emptyText() }}</li>
+          }
+          @if (virtualWindow().after) {
+            <li
+              class="star-listbox__spacer"
+              role="presentation"
+              [style.height.px]="virtualWindow().after"
+            ></li>
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				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: StarSelect,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-select",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				NgTemplateOutlet
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "star-select",
+				"[class.star-select--open]": "open()",
+				"[class.star-select--disabled]": "disabled()",
+				"[class.star-select--invalid]": "showInvalid()",
+				"[class.star-select--sm]": "size() === 'sm'"
+			},
+			template: `
+    <div class="star-select__control" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+      <div
+        #trigger
+        class="star-select__trigger"
+        role="combobox"
+        aria-haspopup="listbox"
+        [id]="inputId()"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="open() ? listId : null"
+        [attr.aria-activedescendant]="activeId()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledBy()"
+        [attr.aria-required]="required() || null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.aria-readonly]="readonly() || null"
+        (click)="toggle()"
+        (keydown)="onKeydown($event)"
+        (blur)="onTriggerBlur()"
+      >
+        @if (selectedOption(); as option) {
+          <span class="star-select__value">{{ labelOf(option) }}</span>
+        } @else {
+          <span class="star-select__placeholder">{{
+            placeholder() ?? text.selectPlaceholder
+          }}</span>
+        }
+      </div>
+      @if (showClear() && selectedOption() !== undefined && interactive()) {
+        <button
+          type="button"
+          class="star-select__icon-btn"
+          [attr.aria-label]="text.clear"
+          (click)="clear()"
+        >
+          <i class="ph-bold ph-x" aria-hidden="true"></i>
+        </button>
+      }
+      @if (loading()) {
+        <i
+          class="ph-bold ph-spinner-gap star-spin star-select__caret"
+          role="img"
+          [attr.aria-label]="text.loading"
+        ></i>
+      } @else {
+        <i class="ph-bold ph-caret-down star-select__caret" aria-hidden="true"></i>
+      }
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      cdkConnectedOverlayUsePopover="inline"
+      cdkConnectedOverlayMatchWidth
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open()"
+      [cdkConnectedOverlayPositions]="positions"
+      (attach)="onPanelAttached()"
+      (detach)="closePanel(false)"
+      (overlayOutsideClick)="onOutsideClick($event)"
+    >
+      <div class="star-panel" (mousedown)="onPanelMousedown($event)">
+        @if (filter()) {
+          <div class="star-panel__filter">
+            <i class="ph-bold ph-magnifying-glass" aria-hidden="true"></i>
+            <input
+              #filterInput
+              type="text"
+              class="star-input star-input--sm"
+              role="searchbox"
+              autocomplete="off"
+              [value]="filterValue()"
+              [attr.placeholder]="filterPlaceholder() ?? text.filterPlaceholder"
+              [attr.aria-label]="filterPlaceholder() ?? text.filterPlaceholder"
+              [attr.aria-controls]="listId"
+              [attr.aria-activedescendant]="activeId()"
+              (input)="onFilterInput(filterInput.value)"
+              (keydown)="onKeydown($event)"
+            />
+          </div>
+        }
+        <ul
+          class="star-listbox"
+          role="listbox"
+          [id]="listId"
+          [class.star-listbox--virtual]="virtualScroll()"
+          [style.--star-item-size.px]="virtualScroll() ? virtualItemSize() : null"
+          [style.max-height]="scrollHeight()"
+          [attr.aria-label]="ariaLabel()"
+          [attr.aria-labelledby]="ariaLabelledBy()"
+          (scroll)="onListScroll($event)"
+        >
+          @if (virtualWindow().before) {
+            <li
+              class="star-listbox__spacer"
+              role="presentation"
+              [style.height.px]="virtualWindow().before"
+            ></li>
+          }
+          @for (row of renderedRows(); track row.key) {
+            @if (row.kind === 'group') {
+              <li class="star-listbox__group" role="presentation" [id]="row.id">{{ row.label }}</li>
+            } @else {
+              @let option = row.option;
+              @let i = row.index;
+              <!-- Keyboard is handled on the combobox via aria-activedescendant (WAI-ARIA combobox pattern). -->
+              <!-- 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]="optionId(i)"
+                [class.star-listbox__option--active]="activeIndex() === i"
+                [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-setsize]="virtualScroll() ? visibleOptions().length : null"
+                [attr.aria-posinset]="virtualScroll() ? i + 1 : null"
+                (click)="onOptionClick(option, i)"
+                (mousemove)="isDisabled(option) || activeIndex.set(i)"
+              >
+                <span class="star-listbox__label">
+                  @if (optionTemplate(); as custom) {
+                    <ng-container
+                      *ngTemplateOutlet="custom.template; context: optionContext(option, i)"
+                    />
+                  } @else {
+                    {{ labelOf(option) }}
+                  }
+                </span>
+                @if (isSelected(option)) {
+                  <i class="ph-bold ph-check star-listbox__check" aria-hidden="true"></i>
+                }
+              </li>
+            }
+          } @empty {
+            <li class="star-listbox__empty" role="presentation">{{ emptyText() }}</li>
+          }
+          @if (virtualWindow().after) {
+            <li
+              class="star-listbox__spacer"
+              role="presentation"
+              [style.height.px]="virtualWindow().after"
+            ></li>
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `
+		}]
+	}],
+	propDecorators: { value: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "value",
+			required: false
+		}]
+	}, {
+		type: i0.Output,
+		args: ["valueChange"]
+	}] }
+});
+export { StarCascadeSelect, StarMultiSelect, StarOptionListBase, StarOptionTemplate, StarSelect };
+
+//# sourceMappingURL=star-ng-ui-select.mjs.map