@area8975/ui 0.2.2-dev.48 → 0.2.2-dev.50

package/fesm2022/area8975-ui-select.mjs

@@ -0,0 +1,926 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectorRef, Component, DestroyRef, ElementRef, Injector, afterNextRender, booleanAttribute, computed, contentChild, effect, inject, input, model, output, signal, untracked } from "@angular/core";
+import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
+import { UiBadgeComponent } from "@area8975/ui/badge";
+import { UiCardComponent } from "@area8975/ui/card";
+import { UiDropdownComponent, UiDropdownDirective } from "@area8975/ui/dropdown";
+import { UiInputComponent } from "@area8975/ui/input";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroCheck, heroChevronDown, heroPlus, heroXMark } from "@ng-icons/heroicons/outline";
+import { Subject, catchError, debounceTime, of, skip, switchMap } from "rxjs";
+let nextId = 0;
+var UiSelectComponent = class UiSelectComponent {
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	placement = input("bottom-start", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	closeBehaviour = input("whenClickOutside", ...ngDevMode ? [{ debugName: "closeBehaviour" }] : /* istanbul ignore next */ []);
+	dataSource = input.required(...ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []);
+	items = signal([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	placeholder = input("Select an option", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	describedBy = input("", ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	pageSize = input(10, ...ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []);
+	searchMode = input("none", ...ngDevMode ? [{ debugName: "searchMode" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	validationState = model(null, ...ngDevMode ? [{ debugName: "validationState" }] : /* istanbul ignore next */ []);
+	clearable = input(false, {
+		...ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	clearLabel = input("None", ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
+	creatable = input(false, {
+		...ngDevMode ? { debugName: "creatable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	createLabel = input((query) => `Create "${query}"`, ...ngDevMode ? [{ debugName: "createLabel" }] : /* istanbul ignore next */ []);
+	groupBy = input(null, ...ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []);
+	scrollToSelected = input(true, {
+		...ngDevMode ? { debugName: "scrollToSelected" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	multipleDisplay = input("text", ...ngDevMode ? [{ debugName: "multipleDisplay" }] : /* istanbul ignore next */ []);
+	counterAfter = input(null, ...ngDevMode ? [{ debugName: "counterAfter" }] : /* istanbul ignore next */ []);
+	counterLabel = input((count) => `${count} selected`, ...ngDevMode ? [{ debugName: "counterLabel" }] : /* istanbul ignore next */ []);
+	compareWith = input((a, b) => a === b, ...ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []);
+	displayWith = input((item) => `${item}`, ...ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []);
+	selectionChange = output();
+	create = output();
+	selectedItem = model(null, ...ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []);
+	selectedItems = model([], ...ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []);
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	hasMore = signal(true, ...ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []);
+	optionTemplate = contentChild("option", ...ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []);
+	triggerTemplate = contentChild("trigger", ...ngDevMode ? [{ debugName: "triggerTemplate" }] : /* istanbul ignore next */ []);
+	leadingTemplate = contentChild("leading", ...ngDevMode ? [{ debugName: "leadingTemplate" }] : /* istanbul ignore next */ []);
+	activeIndex = signal(0, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	listId = `ui-select-${nextId++}`;
+	hasSelection = computed(() => this.multiple() ? this.selectedItems().length > 0 : this.selectedItem() !== null, ...ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []);
+	triggerLabel = computed(() => {
+		const display = this.displayWith();
+		if (!this.multiple()) {
+			const selected = this.selectedItem();
+			return selected !== null ? display(selected) : this.placeholder();
+		}
+		const selected = this.selectedItems();
+		const counterAfter = this.counterAfter();
+		if (!selected.length) return this.placeholder();
+		return counterAfter !== null && selected.length > counterAfter ? this.counterLabel()(selected.length) : selected.map(display).join(", ");
+	}, ...ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []);
+	isEmpty = computed(() => this.multiple() ? !this.selectedItems().length : this.selectedItem() === null, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	showTags = computed(() => this.multiple() && this.multipleDisplay() === "tags" && this.searchMode() !== "inline", ...ngDevMode ? [{ debugName: "showTags" }] : /* istanbul ignore next */ []);
+	showLeading = computed(() => !!this.leadingTemplate() && !this.multiple() && this.selectedItem() !== null, ...ngDevMode ? [{ debugName: "showLeading" }] : /* istanbul ignore next */ []);
+	leadingHidden = computed(() => this.isOpen() && this.query() !== "", ...ngDevMode ? [{ debugName: "leadingHidden" }] : /* istanbul ignore next */ []);
+	createQuery = computed(() => {
+		const query = this.query().trim();
+		const display = this.displayWith();
+		if (!this.creatable() || !query || this.loading()) return null;
+		return this.items().some((item) => display(item).toLowerCase() === query.toLowerCase()) ? null : query;
+	}, ...ngDevMode ? [{ debugName: "createQuery" }] : /* istanbul ignore next */ []);
+	rows = computed(() => {
+		const rows = [];
+		const groupBy = this.groupBy();
+		const display = this.displayWith();
+		const createQuery = this.createQuery();
+		let index = 0;
+		let group;
+		if (this.clearable() && this.hasSelection()) rows.push({
+			kind: "clear",
+			id: this.rowId(index),
+			index: index++
+		});
+		for (const item of this.items()) {
+			if (groupBy) {
+				const next = groupBy(item);
+				if (next !== group && next) rows.push({
+					kind: "group",
+					id: `${this.listId}-group-${rows.length}`,
+					label: next
+				});
+				group = next;
+			}
+			rows.push({
+				kind: "item",
+				id: this.rowId(index),
+				index: index++,
+				item,
+				label: display(item),
+				selected: this.isSelected(item)
+			});
+		}
+		if (createQuery) rows.push({
+			kind: "create",
+			id: this.rowId(index),
+			index,
+			query: createQuery
+		});
+		return rows;
+	}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	pickable = computed(() => this.rows().filter((row) => row.kind !== "group"), ...ngDevMode ? [{ debugName: "pickable" }] : /* istanbul ignore next */ []);
+	activeId = computed(() => this.isOpen() ? this.pickable()[this.activeIndex()]?.id ?? null : null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	page = 0;
+	load$ = new Subject();
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	destroyRef = inject(DestroyRef);
+	cdr = inject(ChangeDetectorRef);
+	constructor() {
+		effect(() => {
+			this.dataSource();
+			untracked(() => this.loadFirstPage());
+		});
+		effect(() => {
+			if (!this.isOpen()) return;
+			untracked(() => {
+				const selected = this.pickable().findIndex((row) => row.kind === "item" && row.selected);
+				this.activeIndex.set(this.scrollToSelected() && selected >= 0 ? selected : 0);
+				afterNextRender(() => {
+					if (this.scrollToSelected()) this.scrollActiveIntoView();
+					if (this.searchMode() === "dropdown") this.searchInput()?.focus();
+				}, { injector: this.injector });
+			});
+		});
+		toObservable(this.query).pipe(debounceTime(300), skip(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => this.loadFirstPage());
+		this.load$.pipe(switchMap(() => this.fetchPage()), takeUntilDestroyed(this.destroyRef)).subscribe((result) => this.applyResult(result));
+	}
+	fetchPage() {
+		this.loading.set(true);
+		return this.dataSource().load({
+			query: this.query(),
+			page: this.page,
+			size: this.pageSize()
+		}).pipe(catchError(() => of(null)));
+	}
+	applyResult(result) {
+		this.loading.set(false);
+		if (result) {
+			this.items.update((items) => [...items, ...result.items]);
+			this.hasMore.set(result.hasMore);
+		}
+		this.cdr.markForCheck();
+	}
+	open() {
+		if (!this.disabled()) this.isOpen.set(true);
+	}
+	toggle() {
+		if (this.isOpen()) this.isOpen.set(false);
+		else this.open();
+	}
+	select(item) {
+		this.selectedItem.set(item);
+		this.selectionChange.emit(item);
+	}
+	isSelected(item) {
+		const compare = this.compareWith();
+		if (item === null) return false;
+		if (this.multiple()) return this.selectedItems().some((selected) => compare(selected, item));
+		const selected = this.selectedItem();
+		return selected !== null && compare(selected, item);
+	}
+	toggleItem(item) {
+		const compare = this.compareWith();
+		this.selectedItems.update((selected) => this.isSelected(item) ? selected.filter((existing) => !compare(existing, item)) : [...selected, item]);
+	}
+	removeItem(item) {
+		const compare = this.compareWith();
+		this.selectedItems.update((selected) => selected.filter((existing) => !compare(existing, item)));
+	}
+	clear() {
+		if (this.multiple()) this.selectedItems.set([]);
+		else {
+			this.selectedItem.set(null);
+			this.selectionChange.emit(null);
+		}
+		this.isOpen.set(false);
+		this.focusTrigger();
+		if (this.searchMode() === "inline") this.query.set("");
+	}
+	onItemClick(item) {
+		if (this.multiple()) {
+			this.toggleItem(item);
+			return;
+		}
+		this.select(item);
+		this.isOpen.set(false);
+		this.focusTrigger();
+		if (this.searchMode() === "inline") this.query.set("");
+	}
+	onCreate() {
+		const query = this.createQuery();
+		if (!query) return;
+		this.create.emit(query);
+		this.query.set("");
+		if (!this.multiple()) {
+			this.isOpen.set(false);
+			this.focusTrigger();
+		}
+	}
+	onKeydown(event) {
+		const count = this.pickable().length;
+		const isSpacePick = event.key === " " && this.searchMode() === "none";
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				event.preventDefault();
+				if (!this.isOpen()) {
+					this.open();
+					return;
+				}
+				this.moveActive(event.key === "ArrowDown" ? 1 : -1, count);
+				return;
+			case "Home":
+			case "End":
+				if (this.isOpen() && count && this.searchMode() === "none") {
+					event.preventDefault();
+					this.setActive(event.key === "Home" ? 0 : count - 1);
+				}
+				return;
+			case "Enter":
+			case " ":
+				if (event.key === " " && !isSpacePick) return;
+				event.preventDefault();
+				if (!this.isOpen()) this.open();
+				else this.pickActive();
+				return;
+			case "Escape":
+				this.focusTrigger();
+				return;
+		}
+	}
+	onFocusOut(event) {
+		const next = event.relatedTarget;
+		if (this.closeBehaviour() === "none") return;
+		if (!(next instanceof Node) || !this.host.nativeElement.contains(next)) this.isOpen.set(false);
+	}
+	setActive(index) {
+		this.activeIndex.set(index);
+		afterNextRender(() => this.scrollActiveIntoView(), { injector: this.injector });
+	}
+	loadFirstPage() {
+		this.page = 0;
+		this.items.set([]);
+		this.hasMore.set(true);
+		this.load$.next();
+	}
+	loadNextPage() {
+		if (this.loading() || !this.hasMore()) return;
+		this.page++;
+		this.load$.next();
+	}
+	onQueryChange(query) {
+		this.query.set(query);
+		this.activeIndex.set(0);
+		this.open();
+	}
+	onScroll(scrollContainer) {
+		if (scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight < 48) this.loadNextPage();
+	}
+	pickActive() {
+		const row = this.pickable()[this.activeIndex()];
+		if (!row) return;
+		if (row.kind === "clear") this.clear();
+		else if (row.kind === "create") this.onCreate();
+		else if (row.kind === "item") this.onItemClick(row.item);
+	}
+	moveActive(step, count) {
+		if (count) this.setActive((this.activeIndex() + step + count) % count);
+	}
+	scrollActiveIntoView() {
+		const id = this.activeId();
+		if (id) this.host.nativeElement.querySelector(`#${id}`)?.scrollIntoView({ block: "nearest" });
+	}
+	focusTrigger() {
+		(this.searchMode() === "inline" ? this.searchInput() : this.host.nativeElement.querySelector(".ui-select"))?.focus();
+	}
+	searchInput() {
+		return this.host.nativeElement.querySelector("ui-input input");
+	}
+	rowId(index) {
+		return `${this.listId}-${index}`;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiSelectComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiSelectComponent,
+		isStandalone: true,
+		selector: "ui-select",
+		inputs: {
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeBehaviour: {
+				classPropertyName: "closeBehaviour",
+				publicName: "closeBehaviour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataSource: {
+				classPropertyName: "dataSource",
+				publicName: "dataSource",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			describedBy: {
+				classPropertyName: "describedBy",
+				publicName: "describedBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pageSize: {
+				classPropertyName: "pageSize",
+				publicName: "pageSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			searchMode: {
+				classPropertyName: "searchMode",
+				publicName: "searchMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			validationState: {
+				classPropertyName: "validationState",
+				publicName: "validationState",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearable: {
+				classPropertyName: "clearable",
+				publicName: "clearable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			creatable: {
+				classPropertyName: "creatable",
+				publicName: "creatable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			createLabel: {
+				classPropertyName: "createLabel",
+				publicName: "createLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			groupBy: {
+				classPropertyName: "groupBy",
+				publicName: "groupBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scrollToSelected: {
+				classPropertyName: "scrollToSelected",
+				publicName: "scrollToSelected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multipleDisplay: {
+				classPropertyName: "multipleDisplay",
+				publicName: "multipleDisplay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			counterAfter: {
+				classPropertyName: "counterAfter",
+				publicName: "counterAfter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			counterLabel: {
+				classPropertyName: "counterLabel",
+				publicName: "counterLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compareWith: {
+				classPropertyName: "compareWith",
+				publicName: "compareWith",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			displayWith: {
+				classPropertyName: "displayWith",
+				publicName: "displayWith",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedItem: {
+				classPropertyName: "selectedItem",
+				publicName: "selectedItem",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedItems: {
+				classPropertyName: "selectedItems",
+				publicName: "selectedItems",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			validationState: "validationStateChange",
+			selectionChange: "selectionChange",
+			create: "create",
+			selectedItem: "selectedItemChange",
+			selectedItems: "selectedItemsChange"
+		},
+		host: {
+			listeners: { "focusout": "onFocusOut($event)" },
+			properties: { "attr.id": "null" }
+		},
+		providers: [provideIcons({
+			heroChevronDown,
+			heroXMark,
+			heroCheck,
+			heroPlus
+		})],
+		queries: [
+			{
+				propertyName: "optionTemplate",
+				first: true,
+				predicate: ["option"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "triggerTemplate",
+				first: true,
+				predicate: ["trigger"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "leadingTemplate",
+				first: true,
+				predicate: ["leading"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    [placement]=\"placement()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    matchWidth=\"minWidth\"\n    class=\"w-full\"\n>\n    @if (searchMode() === 'inline') {\n        <ui-input\n            [value]=\"isOpen() ? query() : triggerLabel()\"\n            (valueChange)=\"onQueryChange($event)\"\n            [placeholder]=\"triggerLabel()\"\n            [disabled]=\"disabled()\"\n            [id]=\"id()\"\n            [describedBy]=\"describedBy()\"\n            [ariaExpanded]=\"isOpen()\"\n            [ariaControls]=\"listId\"\n            [ariaActiveDescendant]=\"activeId()\"\n            inputRole=\"combobox\"\n            ariaAutocomplete=\"list\"\n            ariaHasPopup=\"listbox\"\n            class=\"border-0!\"\n            [classes]=\"showLeading() ? 'h-auto! py-1.5! ps-2!' : 'h-auto! py-1.5!'\"\n            autocomplete=\"off\"\n            (click)=\"toggle()\"\n            (keydown)=\"onKeydown($event)\"\n        >\n            @if (showLeading()) {\n                <ng-template #leading>\n                    <!-- hidden rather than removed, so the text doesn't move -->\n                    <span class=\"ui-select-leading\" [class.invisible]=\"leadingHidden()\">\n                        <ng-container\n                            *ngTemplateOutlet=\"leadingTemplate()!; context: { $implicit: selectedItem()! }\"\n                        />\n                    </span>\n                </ng-template>\n            }\n\n            <ng-template #trailing>\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"mx-3 size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </ng-template>\n        </ui-input>\n    } @else {\n        <div\n            class=\"ui-select-trigger\"\n            [class.ui-select-trigger--tags]=\"showTags()\"\n        >\n            <button\n                type=\"button\"\n                class=\"flex justify-between items-center gap-2 px-3 py-1.5 text-left ui-select\"\n                aria-haspopup=\"listbox\"\n                [attr.id]=\"id() || null\"\n                [attr.aria-describedby]=\"describedBy() || null\"\n                [attr.aria-expanded]=\"isOpen()\"\n                [attr.aria-controls]=\"listId\"\n                [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n                [disabled]=\"disabled()\"\n                [attr.data-invalid]=\"validationState() === false ? '' : null\"\n                [attr.data-valid]=\"validationState() === true ? '' : null\"\n                (click)=\"toggle()\"\n                (keydown)=\"onKeydown($event)\"\n            >\n                @if (showTags()) {\n                    <!-- the visible tags sit on top, this names the button for screen readers -->\n                    <span class=\"sr-only\">{{ triggerLabel() }}</span>\n                } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n                    <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n                        <ng-container\n                            *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n                        />\n                    </span>\n                } @else if (multiple()) {\n                    <span class=\"ui-text-body ui-select-label\" [class.text-muted-foreground-1]=\"isEmpty()\">\n                        <span\n                            class=\"ui-select-label-sizer\"\n                            aria-hidden=\"true\"\n                        >{{ placeholder() }}</span>\n                        <span class=\"ui-select-label-text\">{{\n                                triggerLabel()\n                            }}</span>\n                    </span>\n                } @else {\n                    <span class=\"ui-text-body truncate\" [class.text-muted-foreground-1]=\"isEmpty()\">{{\n                            triggerLabel()\n                        }}</span>\n                }\n\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"ms-auto size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </button>\n\n            @if (showTags()) {\n                <span\n                    class=\"ui-text-body ui-select-tags-sizer\"\n                    aria-hidden=\"true\"\n                >\n                    {{ placeholder() }}\n                </span>\n\n                <div class=\"ui-select-tags\">\n                    @for (item of selectedItems(); track $index) {\n                        <ui-badge\n                            intent=\"secondary\"\n                            appearance=\"soft\"\n                            size=\"xs\"\n                            class=\"ui-select-tag ui-text-caption\"\n                        >\n                            <span class=\"truncate\">{{\n                                    displayWith()(item)\n                                }}</span>\n\n                            @if (!disabled()) {\n                                <button\n                                    type=\"button\"\n                                    class=\"ui-select-tag-remove\"\n                                    [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n                                    (click)=\"removeItem(item)\"\n                                >\n                                    <ng-icon\n                                        name=\"heroXMark\"\n                                        class=\"size-3 shrink-0\"\n                                    />\n                                </button>\n                            }\n                        </ui-badge>\n                    } @empty {\n                        <span\n                            class=\"text-muted-foreground-1 ui-text-body truncate\"\n                        >\n                            {{ placeholder() }}\n                        </span>\n                    }\n                </div>\n            }\n        </div>\n    }\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <ui-card radius=\"lg\" class=\"divide-y overflow-hidden\">\n                @if (searchMode() === 'dropdown') {\n                    <div class=\"p-2\">\n                        <ui-input\n                            [value]=\"query()\"\n                            (valueChange)=\"onQueryChange($event)\"\n                            (keydown)=\"onKeydown($event)\"\n                            [ariaExpanded]=\"true\"\n                            [ariaControls]=\"listId\"\n                            [ariaActiveDescendant]=\"activeId()\"\n                            inputRole=\"combobox\"\n                            ariaAutocomplete=\"list\"\n                            ariaLabel=\"Search options\"\n                            autocomplete=\"off\"\n                            placeholder=\"Search...\"\n                        />\n                    </div>\n                }\n\n                <div\n                    #scrollContainer\n                    class=\"py-1 max-h-60 overflow-y-auto\"\n                    role=\"listbox\"\n                    [attr.id]=\"listId\"\n                    [attr.aria-multiselectable]=\"multiple() || null\"\n                    (scroll)=\"onScroll(scrollContainer)\"\n                >\n                    @for (row of rows(); track row.id) {\n                        @switch (row.kind) {\n                            @case ('group') {\n                                <div\n                                    class=\"ui-text-caption ui-select-group\"\n                                    role=\"presentation\"\n                                >\n                                    {{ row.label }}\n                                </div>\n                            }\n                            @case ('clear') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"text-muted-foreground-1 ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"clear()\"\n                                >\n                                    <span class=\"truncate\">{{\n                                            clearLabel()\n                                        }}</span>\n                                </button>\n                            }\n                            @case ('item') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    tabindex=\"-1\"\n                                    class=\"text-dropdown-item-foreground ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.aria-selected]=\"row.selected\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onItemClick(row.item)\"\n                                >\n                                    @if (optionTemplate(); as template) {\n                                        <span\n                                            class=\"flex items-center gap-2 min-w-0 grow\"\n                                        >\n                                            <ng-container\n                                                *ngTemplateOutlet=\"template; context: {\n                                                    $implicit: row.item,\n                                                    selected: row.selected,\n                                                    active: row.index === activeIndex()\n                                                }\"\n                                            />\n                                        </span>\n                                    } @else {\n                                        <span class=\"truncate\">{{\n                                                row.label\n                                            }}</span>\n                                    }\n\n                                    @if (row.selected) {\n                                        <ng-icon\n                                            name=\"heroCheck\"\n                                            class=\"size-4 text-primary-600! shrink-0\"\n                                            strokeWidth=\"2.5\"\n                                        />\n                                    }\n                                </button>\n                            }\n                            @case ('create') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"justify-start! text-primary-600 ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onCreate()\"\n                                >\n                                    <ng-icon\n                                        name=\"heroPlus\"\n                                        class=\"size-4 shrink-0\"\n                                    />\n                                    <span class=\"truncate\">{{\n                                            createLabel()(row.query)\n                                        }}</span>\n                                </button>\n                            }\n                        }\n                    }\n\n                    @if (loading()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            Loading...\n                        </div>\n                    }\n\n                    @if (!loading() && items().length === 0 && !createQuery()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            No results\n                        </div>\n                    }\n                </div>\n            </ui-card>\n        </div>\n    }\n</ui-dropdown>\n",
+		styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-leading{margin-inline-start:calc(var(--spacing, .25rem) * 3);display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) * 9);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:var(--spacing, .25rem);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: UiDropdownComponent,
+				selector: "ui-dropdown",
+				inputs: [
+					"isOpen",
+					"placement",
+					"closeBehaviour",
+					"offset",
+					"viewportPadding",
+					"matchWidth"
+				],
+				exportAs: ["uiDropdown"]
+			},
+			{
+				kind: "directive",
+				type: UiDropdownDirective,
+				selector: "[uiDropdownContent]"
+			},
+			{
+				kind: "component",
+				type: UiInputComponent,
+				selector: "ui-input",
+				inputs: [
+					"value",
+					"classes",
+					"type",
+					"id",
+					"name",
+					"placeholder",
+					"autocomplete",
+					"inputmode",
+					"required",
+					"disabled",
+					"readonly",
+					"validationState",
+					"min",
+					"max",
+					"step",
+					"pattern",
+					"minlength",
+					"maxlength",
+					"autofocus",
+					"spellcheck",
+					"revealable",
+					"list",
+					"ariaLabel",
+					"describedBy",
+					"inputRole",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaActiveDescendant",
+					"ariaAutocomplete",
+					"ariaHasPopup"
+				],
+				outputs: [
+					"valueChange",
+					"validationStateChange",
+					"focused",
+					"blurred"
+				]
+			},
+			{
+				kind: "component",
+				type: UiBadgeComponent,
+				selector: "ui-badge",
+				inputs: [
+					"appearance",
+					"intent",
+					"size"
+				]
+			},
+			{
+				kind: "component",
+				type: UiCardComponent,
+				selector: "ui-card",
+				inputs: ["radius"]
+			},
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiSelectComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-select",
+			imports: [
+				UiDropdownComponent,
+				UiDropdownDirective,
+				UiInputComponent,
+				UiBadgeComponent,
+				UiCardComponent,
+				NgIcon,
+				NgTemplateOutlet
+			],
+			host: {
+				"[attr.id]": "null",
+				"(focusout)": "onFocusOut($event)"
+			},
+			providers: [provideIcons({
+				heroChevronDown,
+				heroXMark,
+				heroCheck,
+				heroPlus
+			})],
+			template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    [placement]=\"placement()\"\n    [closeBehaviour]=\"closeBehaviour()\"\n    matchWidth=\"minWidth\"\n    class=\"w-full\"\n>\n    @if (searchMode() === 'inline') {\n        <ui-input\n            [value]=\"isOpen() ? query() : triggerLabel()\"\n            (valueChange)=\"onQueryChange($event)\"\n            [placeholder]=\"triggerLabel()\"\n            [disabled]=\"disabled()\"\n            [id]=\"id()\"\n            [describedBy]=\"describedBy()\"\n            [ariaExpanded]=\"isOpen()\"\n            [ariaControls]=\"listId\"\n            [ariaActiveDescendant]=\"activeId()\"\n            inputRole=\"combobox\"\n            ariaAutocomplete=\"list\"\n            ariaHasPopup=\"listbox\"\n            class=\"border-0!\"\n            [classes]=\"showLeading() ? 'h-auto! py-1.5! ps-2!' : 'h-auto! py-1.5!'\"\n            autocomplete=\"off\"\n            (click)=\"toggle()\"\n            (keydown)=\"onKeydown($event)\"\n        >\n            @if (showLeading()) {\n                <ng-template #leading>\n                    <!-- hidden rather than removed, so the text doesn't move -->\n                    <span class=\"ui-select-leading\" [class.invisible]=\"leadingHidden()\">\n                        <ng-container\n                            *ngTemplateOutlet=\"leadingTemplate()!; context: { $implicit: selectedItem()! }\"\n                        />\n                    </span>\n                </ng-template>\n            }\n\n            <ng-template #trailing>\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"mx-3 size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </ng-template>\n        </ui-input>\n    } @else {\n        <div\n            class=\"ui-select-trigger\"\n            [class.ui-select-trigger--tags]=\"showTags()\"\n        >\n            <button\n                type=\"button\"\n                class=\"flex justify-between items-center gap-2 px-3 py-1.5 text-left ui-select\"\n                aria-haspopup=\"listbox\"\n                [attr.id]=\"id() || null\"\n                [attr.aria-describedby]=\"describedBy() || null\"\n                [attr.aria-expanded]=\"isOpen()\"\n                [attr.aria-controls]=\"listId\"\n                [attr.aria-activedescendant]=\"searchMode() === 'none' ? activeId() : null\"\n                [disabled]=\"disabled()\"\n                [attr.data-invalid]=\"validationState() === false ? '' : null\"\n                [attr.data-valid]=\"validationState() === true ? '' : null\"\n                (click)=\"toggle()\"\n                (keydown)=\"onKeydown($event)\"\n            >\n                @if (showTags()) {\n                    <!-- the visible tags sit on top, this names the button for screen readers -->\n                    <span class=\"sr-only\">{{ triggerLabel() }}</span>\n                } @else if (!multiple() && triggerTemplate() && selectedItem() !== null) {\n                    <span class=\"flex items-center gap-2 min-w-0 ui-text-body\">\n                        <ng-container\n                            *ngTemplateOutlet=\"triggerTemplate()!; context: { $implicit: selectedItem()! }\"\n                        />\n                    </span>\n                } @else if (multiple()) {\n                    <span class=\"ui-text-body ui-select-label\" [class.text-muted-foreground-1]=\"isEmpty()\">\n                        <span\n                            class=\"ui-select-label-sizer\"\n                            aria-hidden=\"true\"\n                        >{{ placeholder() }}</span>\n                        <span class=\"ui-select-label-text\">{{\n                                triggerLabel()\n                            }}</span>\n                    </span>\n                } @else {\n                    <span class=\"ui-text-body truncate\" [class.text-muted-foreground-1]=\"isEmpty()\">{{\n                            triggerLabel()\n                        }}</span>\n                }\n\n                <ng-icon\n                    name=\"heroChevronDown\"\n                    class=\"ms-auto size-4 text-muted-foreground transition-transform duration-100 shrink-0\"\n                    [class.rotate-180]=\"isOpen()\"\n                />\n            </button>\n\n            @if (showTags()) {\n                <span\n                    class=\"ui-text-body ui-select-tags-sizer\"\n                    aria-hidden=\"true\"\n                >\n                    {{ placeholder() }}\n                </span>\n\n                <div class=\"ui-select-tags\">\n                    @for (item of selectedItems(); track $index) {\n                        <ui-badge\n                            intent=\"secondary\"\n                            appearance=\"soft\"\n                            size=\"xs\"\n                            class=\"ui-select-tag ui-text-caption\"\n                        >\n                            <span class=\"truncate\">{{\n                                    displayWith()(item)\n                                }}</span>\n\n                            @if (!disabled()) {\n                                <button\n                                    type=\"button\"\n                                    class=\"ui-select-tag-remove\"\n                                    [attr.aria-label]=\"'Remove ' + displayWith()(item)\"\n                                    (click)=\"removeItem(item)\"\n                                >\n                                    <ng-icon\n                                        name=\"heroXMark\"\n                                        class=\"size-3 shrink-0\"\n                                    />\n                                </button>\n                            }\n                        </ui-badge>\n                    } @empty {\n                        <span\n                            class=\"text-muted-foreground-1 ui-text-body truncate\"\n                        >\n                            {{ placeholder() }}\n                        </span>\n                    }\n                </div>\n            }\n        </div>\n    }\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <ui-card radius=\"lg\" class=\"divide-y overflow-hidden\">\n                @if (searchMode() === 'dropdown') {\n                    <div class=\"p-2\">\n                        <ui-input\n                            [value]=\"query()\"\n                            (valueChange)=\"onQueryChange($event)\"\n                            (keydown)=\"onKeydown($event)\"\n                            [ariaExpanded]=\"true\"\n                            [ariaControls]=\"listId\"\n                            [ariaActiveDescendant]=\"activeId()\"\n                            inputRole=\"combobox\"\n                            ariaAutocomplete=\"list\"\n                            ariaLabel=\"Search options\"\n                            autocomplete=\"off\"\n                            placeholder=\"Search...\"\n                        />\n                    </div>\n                }\n\n                <div\n                    #scrollContainer\n                    class=\"py-1 max-h-60 overflow-y-auto\"\n                    role=\"listbox\"\n                    [attr.id]=\"listId\"\n                    [attr.aria-multiselectable]=\"multiple() || null\"\n                    (scroll)=\"onScroll(scrollContainer)\"\n                >\n                    @for (row of rows(); track row.id) {\n                        @switch (row.kind) {\n                            @case ('group') {\n                                <div\n                                    class=\"ui-text-caption ui-select-group\"\n                                    role=\"presentation\"\n                                >\n                                    {{ row.label }}\n                                </div>\n                            }\n                            @case ('clear') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"text-muted-foreground-1 ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"clear()\"\n                                >\n                                    <span class=\"truncate\">{{\n                                            clearLabel()\n                                        }}</span>\n                                </button>\n                            }\n                            @case ('item') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    tabindex=\"-1\"\n                                    class=\"text-dropdown-item-foreground ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.aria-selected]=\"row.selected\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onItemClick(row.item)\"\n                                >\n                                    @if (optionTemplate(); as template) {\n                                        <span\n                                            class=\"flex items-center gap-2 min-w-0 grow\"\n                                        >\n                                            <ng-container\n                                                *ngTemplateOutlet=\"template; context: {\n                                                    $implicit: row.item,\n                                                    selected: row.selected,\n                                                    active: row.index === activeIndex()\n                                                }\"\n                                            />\n                                        </span>\n                                    } @else {\n                                        <span class=\"truncate\">{{\n                                                row.label\n                                            }}</span>\n                                    }\n\n                                    @if (row.selected) {\n                                        <ng-icon\n                                            name=\"heroCheck\"\n                                            class=\"size-4 text-primary-600! shrink-0\"\n                                            strokeWidth=\"2.5\"\n                                        />\n                                    }\n                                </button>\n                            }\n                            @case ('create') {\n                                <button\n                                    type=\"button\"\n                                    role=\"option\"\n                                    aria-selected=\"false\"\n                                    tabindex=\"-1\"\n                                    class=\"justify-start! text-primary-600 ui-text-body-alt ui-select-option\"\n                                    [attr.id]=\"row.id\"\n                                    [attr.data-active]=\"row.index === activeIndex() ? '' : null\"\n                                    (mousedown)=\"$event.preventDefault()\"\n                                    (mouseenter)=\"activeIndex.set(row.index)\"\n                                    (click)=\"onCreate()\"\n                                >\n                                    <ng-icon\n                                        name=\"heroPlus\"\n                                        class=\"size-4 shrink-0\"\n                                    />\n                                    <span class=\"truncate\">{{\n                                            createLabel()(row.query)\n                                        }}</span>\n                                </button>\n                            }\n                        }\n                    }\n\n                    @if (loading()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            Loading...\n                        </div>\n                    }\n\n                    @if (!loading() && items().length === 0 && !createQuery()) {\n                        <div class=\"px-3 py-2 text-muted-foreground ui-text-body-alt text-center\">\n                            No results\n                        </div>\n                    }\n                </div>\n            </ui-card>\n        </div>\n    }\n</ui-dropdown>\n",
+			styles: ["@layer properties;@layer components{:host{width:100%}}:host{position:relative;display:inline-flex;align-items:center;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--border-line-2);background-color:var(--layer)}:host:focus-within{z-index:10}:host:focus-within{border-color:var(--primary-focus)}:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:focus-within{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}:host:has(.ui-select:disabled){opacity:50%}:host:has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(88.5% .062 18.334) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-invalid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-danger-200, var(--color-red-200)) 50%, transparent)}}:host:has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in srgb, oklch(91% .096 180.426) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){:host:has(.ui-select[data-valid]):focus-within{--tw-ring-color: color-mix(in oklab, var(--color-success-200, var(--color-teal-200)) 50%, transparent)}}:host-context(ui-input-group):has(.ui-select[data-invalid]){border-color:var(--color-danger-500, var(--color-red-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group):has(.ui-select[data-valid]){border-color:var(--color-success-500, var(--color-teal-500))!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}:host-context(ui-input-group:focus-within){border-color:var(--primary-focus)!important;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.ui-select{width:100%;height:100%;border-style:var(--tw-border-style);border-width:0px}.ui-select:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select:focus{--tw-outline-style: none;outline-style:none}.ui-select-trigger{display:flex;width:100%;min-width:0px;align-items:center}.ui-select-leading{margin-inline-start:calc(var(--spacing, .25rem) * 3);display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ui-select-label{position:relative;min-width:0px;flex:1}.ui-select-label-sizer{visibility:hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-label-text{position:absolute;inset:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-trigger--tags{position:relative;display:grid}.ui-select-tags-sizer,.ui-select-tags{grid-column-start:1;grid-row-start:1}.ui-select-tags-sizer{visibility:hidden;height:0px;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 9);white-space:nowrap}.ui-select-trigger--tags .ui-select{position:absolute;inset:0}.ui-select-tags{pointer-events:none;position:relative;z-index:10;display:flex;min-height:calc(var(--spacing, .25rem) * 9);min-width:0px;flex:1;flex-wrap:wrap;align-items:center;gap:var(--spacing, .25rem);padding-block:var(--spacing, .25rem);padding-inline-start:calc(var(--spacing, .25rem) * 2);padding-inline-end:calc(var(--spacing, .25rem) * 9);--tw-contain-size: inline-size;contain:var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,)}.ui-select-tags>span{padding-inline:var(--spacing, .25rem)}.ui-select-tag{max-width:100%;min-width:0px;column-gap:var(--spacing, .25rem)}.ui-select-tag-remove{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full, calc(infinity * 1px))}.ui-select-tag-remove:hover{color:var(--foreground)}.ui-select-tag-remove:focus{--tw-outline-style: none;outline-style:none}.ui-select-tag-remove:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in srgb, oklch(88.2% .059 254.128) 50%, transparent)}@supports (color: color-mix(in lab,red,red)){.ui-select-tag-remove:focus-visible{--tw-ring-color: color-mix(in oklab, var(--color-primary-200, var(--color-blue-200)) 50%, transparent)}}.ui-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:left}.ui-select-option:focus{--tw-outline-style: none !important;outline-style:none!important}@media(forced-colors:active){.ui-select-option:focus{outline:2px solid transparent!important;outline-offset:2px!important}}.ui-select-option[data-active]{background-color:var(--dropdown-item-hover)}.ui-select-group{padding-inline:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:var(--spacing, .25rem);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--muted-foreground-1);text-transform:uppercase}.ui-select-group:first-child{padding-top:var(--spacing, .25rem)}ui-input-group>:host{border-radius:0!important;border-style:var(--tw-border-style)!important;border-width:0px!important}ui-input-group>:host:focus-within{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ui-input-group>:host(:not(:last-child)){border-right-style:var(--tw-border-style)!important;border-right-width:1px!important;border-color:var(--border-line-2)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-contain-size{syntax: \"*\"; inherits: false;}@property --tw-contain-layout{syntax: \"*\"; inherits: false;}@property --tw-contain-paint{syntax: \"*\"; inherits: false;}@property --tw-contain-style{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-contain-size: initial;--tw-contain-layout: initial;--tw-contain-paint: initial;--tw-contain-style: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		closeBehaviour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeBehaviour",
+				required: false
+			}]
+		}],
+		dataSource: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dataSource",
+				required: true
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedBy",
+				required: false
+			}]
+		}],
+		pageSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageSize",
+				required: false
+			}]
+		}],
+		searchMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "searchMode",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		validationState: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validationState",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["validationStateChange"]
+		}],
+		clearable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearable",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		creatable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "creatable",
+				required: false
+			}]
+		}],
+		createLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "createLabel",
+				required: false
+			}]
+		}],
+		groupBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupBy",
+				required: false
+			}]
+		}],
+		scrollToSelected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollToSelected",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}],
+		multipleDisplay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multipleDisplay",
+				required: false
+			}]
+		}],
+		counterAfter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "counterAfter",
+				required: false
+			}]
+		}],
+		counterLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "counterLabel",
+				required: false
+			}]
+		}],
+		compareWith: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compareWith",
+				required: false
+			}]
+		}],
+		displayWith: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "displayWith",
+				required: false
+			}]
+		}],
+		selectionChange: [{
+			type: i0.Output,
+			args: ["selectionChange"]
+		}],
+		create: [{
+			type: i0.Output,
+			args: ["create"]
+		}],
+		selectedItem: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedItem",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedItemChange"]
+		}],
+		selectedItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedItems",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedItemsChange"]
+		}],
+		optionTemplate: [{
+			type: i0.ContentChild,
+			args: ["option", { isSignal: true }]
+		}],
+		triggerTemplate: [{
+			type: i0.ContentChild,
+			args: ["trigger", { isSignal: true }]
+		}],
+		leadingTemplate: [{
+			type: i0.ContentChild,
+			args: ["leading", { isSignal: true }]
+		}]
+	}
+});
+var SelectLocalDataSource = class {
+	items;
+	search;
+	constructor(items, search) {
+		this.items = items;
+		this.search = search;
+	}
+	load(params) {
+		const query = params.query.trim();
+		const filteredItems = query ? this.items.filter((item) => this.search(item, query)) : this.items;
+		const start = params.page * params.size;
+		const end = start + params.size;
+		return of({
+			items: filteredItems.slice(start, end),
+			hasMore: end < filteredItems.length
+		});
+	}
+};
+var SelectRemoteDataSource = class {
+	fetch;
+	constructor(fetch) {
+		this.fetch = fetch;
+	}
+	load(params) {
+		return this.fetch(params);
+	}
+};
+const SelectMultipleDisplays = ["text", "tags"];
+export { SelectLocalDataSource, SelectMultipleDisplays, SelectRemoteDataSource, UiSelectComponent };
+
+//# sourceMappingURL=area8975-ui-select.mjs.map