@raqm/ui 0.0.0-stage → 0.1.1

package/fesm2022/raqm-ui-select.mjs

@@ -0,0 +1,1073 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, TemplateRef, ViewContainerRef, booleanAttribute, computed, effect, forwardRef, inject, input, isDevMode, linkedSignal, output, signal, untracked, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { Directionality } from "@angular/cdk/bidi";
+import { Overlay, ViewportRuler } from "@angular/cdk/overlay";
+import { ActiveDescendantKeyManager } from "@angular/cdk/a11y";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { registerOverlayOwnership } from "@raqm/ui/overlay-internal";
+function isSelectGroup(entry) {
+	return Array.isArray(entry.options);
+}
+function normalizeValue(value) {
+	return typeof value === "string" ? value : null;
+}
+function resolveSelectDirection(dir, element, directionality) {
+	const explicit = dir;
+	if (explicit === "ltr" || explicit === "rtl") return explicit;
+	if (getComputedStyle(element).direction === "rtl") return "rtl";
+	return directionality?.value ?? "ltr";
+}
+var RaqmSelectOptionRef = class {
+	view;
+	activate;
+	constructor(view, activate) {
+		this.view = view;
+		this.activate = activate;
+	}
+	get disabled() {
+		return this.view.option.disabled === true;
+	}
+	getLabel() {
+		return this.view.option.label;
+	}
+	setActiveStyles() {
+		this.activate(this);
+	}
+	setInactiveStyles() {}
+};
+var RaqmSelectControl = class {
+	host;
+	onChange;
+	onTouched;
+	constructor(host) {
+		this.host = host;
+	}
+	writeValue(value) {
+		this.host.setSelected(normalizeValue(value));
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.host.setCvaDisabled(isDisabled);
+		if (isDisabled) this.host.close(false);
+	}
+	onOptionClick(option) {
+		if (option.disabled === true) return;
+		this.commitSelection(option.value);
+	}
+	commitSelection(value) {
+		if (this.host.effectiveDisabled()) return;
+		if (this.host.selected() === value) {
+			this.host.close(true);
+			return;
+		}
+		this.host.setSelected(value);
+		this.onChange?.(value);
+		this.host.emit(value);
+		this.host.close(true);
+	}
+	markTouched() {
+		this.onTouched?.();
+	}
+	reportDuplicateValues() {
+		if (!isDevMode()) return;
+		const seen = /* @__PURE__ */ new Set();
+		const duplicates = /* @__PURE__ */ new Set();
+		for (const view of this.host.optionViews()) {
+			const value = view.option.value;
+			if (seen.has(value)) duplicates.add(value);
+			else seen.add(value);
+		}
+		if (duplicates.size > 0) console.error(`[raqm-select] Duplicate option value(s) ${[...duplicates].map((value) => JSON.stringify(value)).join(", ")}; Select option values must be unique.`);
+	}
+};
+function connectSelectEffects(host) {
+	effect(() => host.reportDuplicateValues());
+	effect(() => host.reactToAlignmentChange());
+	effect(() => {
+		if (host.effectiveDisabled() && host.open()) untracked(() => host.close(false));
+	});
+}
+var RaqmSelectKeyboard = class {
+	injector;
+	host;
+	keyManager;
+	constructor(injector, host) {
+		this.injector = injector;
+		this.host = host;
+	}
+	init() {
+		this.keyManager = new ActiveDescendantKeyManager(this.host.optionRefs(), this.injector).withWrap(false).withVerticalOrientation(true).withHomeAndEnd(true).withTypeAhead();
+	}
+	destroy() {
+		this.keyManager?.destroy();
+	}
+	onTriggerKeydown(event) {
+		if (!this.host.open()) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				this.host.openPopup();
+			}
+			return;
+		}
+		switch (event.key) {
+			case "Escape":
+				event.preventDefault();
+				this.host.close(true);
+				return;
+			case "Tab":
+				this.host.close(true);
+				return;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				this.commitActiveOption();
+				return;
+			default: this.keyManager?.onKeydown(event);
+		}
+	}
+	onTriggerBlur(event) {
+		const next = event.relatedTarget;
+		const overlayElement = this.host.overlayRef()?.overlayElement;
+		if (next && (this.host.element().contains(next) || overlayElement?.contains(next) === true)) return;
+		if (this.host.open()) this.host.close(true);
+		else this.host.markTouched();
+	}
+	onOptionPointerMove(view) {
+		if (view.option.disabled === true) return;
+		if (this.host.activeId() === view.id) return;
+		const index = this.host.optionViews().findIndex((candidate) => candidate.id === view.id);
+		if (index === -1) return;
+		this.keyManager?.setActiveItem(index);
+	}
+	onOptionPointerLeave(event) {
+		if (event.pointerType === "touch") return;
+		const related = event.relatedTarget;
+		if (related instanceof Element && related.closest(".raqm-select-option")) return;
+		this.resetActive();
+	}
+	resetActive() {
+		this.keyManager?.setActiveItem(-1);
+		this.host.setActiveId(null);
+	}
+	commitActiveOption() {
+		const active = this.keyManager?.activeItem;
+		if (!active || active.disabled) return;
+		this.host.commitSelection(active.view.option.value);
+	}
+	setInitialActive() {
+		const views = this.host.optionViews();
+		if (views.length === 0) return;
+		const selected = this.host.selected();
+		let index = views.findIndex((view) => view.option.value === selected && view.option.disabled !== true);
+		if (index === -1) index = views.findIndex((view) => view.option.disabled !== true);
+		if (index === -1) return;
+		this.keyManager?.setActiveItem(index);
+	}
+};
+var RaqmSelectOverlay = class {
+	overlay;
+	viewContainerRef;
+	position;
+	scrolling;
+	host;
+	overlayRef;
+	scrollStrategy;
+	overlaySubscription;
+	overlayDetachSubscription;
+	constructor(overlay, viewContainerRef, position, scrolling, host) {
+		this.overlay = overlay;
+		this.viewContainerRef = viewContainerRef;
+		this.position = position;
+		this.scrolling = scrolling;
+		this.host = host;
+	}
+	get ref() {
+		return this.overlayRef;
+	}
+	openPopup() {
+		if (this.host.open() || this.host.effectiveDisabled()) return;
+		this.position.resetDeactivation();
+		const trigger = this.host.trigger();
+		const direction = this.host.direction();
+		this.host.setOverlayDir(direction);
+		const aligned = this.host.alignItemWithTrigger();
+		const strategy = this.overlay.position().flexibleConnectedTo(trigger);
+		this.position.configureStrategy(strategy, aligned);
+		const config = {
+			positionStrategy: strategy,
+			scrollStrategy: this.overlay.scrollStrategies.block(),
+			hasBackdrop: true,
+			backdropClass: "cdk-overlay-transparent-backdrop",
+			panelClass: "raqm-select-overlay-pane",
+			disposeOnNavigation: true,
+			width: trigger.getBoundingClientRect().width,
+			direction
+		};
+		this.position.bind(strategy, aligned);
+		this.scrollStrategy = config.scrollStrategy;
+		this.overlayRef = this.overlay.create(config);
+		registerOverlayOwnership(trigger, this.overlayRef);
+		this.overlayRef.attach(new TemplatePortal(this.host.popupTemplate(), this.viewContainerRef));
+		this.host.setOpen(true);
+		this.host.setActiveId(null);
+		if (aligned) this.position.boundPopupHeight();
+		this.host.setInitialActive();
+		this.scrolling.attach();
+		this.scrolling.updateAffordances();
+		if (aligned) this.position.alignPopup();
+		this.overlaySubscription = this.overlayRef.backdropClick().subscribe(() => this.close(true));
+		this.overlayDetachSubscription = this.overlayRef.detachments().subscribe(() => this.handleOverlayDetached());
+	}
+	close(touched) {
+		this.destroyOverlay();
+		if (touched) this.host.markTouched();
+	}
+	destroy() {
+		this.destroyOverlay();
+	}
+	destroyOverlay() {
+		const overlayRef = this.overlayRef;
+		this.overlaySubscription?.unsubscribe();
+		this.overlaySubscription = void 0;
+		this.overlayDetachSubscription?.unsubscribe();
+		this.overlayDetachSubscription = void 0;
+		this.releaseOverlayTracking();
+		this.overlayRef = void 0;
+		this.position.resetAfterClose();
+		this.host.setOpen(false);
+		this.host.setActiveId(null);
+		this.host.setCanScrollUp(false);
+		this.host.setCanScrollDown(false);
+		overlayRef?.dispose();
+	}
+	handleOverlayDetached() {
+		this.overlaySubscription?.unsubscribe();
+		this.overlaySubscription = void 0;
+		this.overlayDetachSubscription?.unsubscribe();
+		this.overlayDetachSubscription = void 0;
+		this.releaseOverlayTracking();
+		this.overlayRef = void 0;
+		this.position.resetAfterDetach();
+		this.host.setOpen(false);
+		this.host.setActiveId(null);
+		this.host.setCanScrollUp(false);
+		this.host.setCanScrollDown(false);
+	}
+	releaseOverlayTracking() {
+		this.scrolling.release();
+		this.scrollStrategy?.disable();
+		this.scrollStrategy = void 0;
+		this.position.releaseSubscription();
+		const popupElement = this.overlayRef?.overlayElement.querySelector(".raqm-select-popup");
+		if (popupElement) popupElement.style.maxHeight = "";
+	}
+};
+var RaqmSelectPosition = class {
+	viewportRuler;
+	host;
+	positionStrategy;
+	positionSubscription;
+	appliedAligned;
+	alignmentDeactivated = false;
+	constructor(viewportRuler, host) {
+		this.viewportRuler = viewportRuler;
+		this.host = host;
+	}
+	resetDeactivation() {
+		this.alignmentDeactivated = false;
+	}
+	positionsFor(aligned) {
+		if (aligned) return [{
+			originX: "start",
+			originY: "top",
+			overlayX: "start",
+			overlayY: "top"
+		}];
+		return [{
+			originX: "start",
+			originY: "bottom",
+			overlayX: "start",
+			overlayY: "top",
+			offsetY: 4
+		}, {
+			originX: "start",
+			originY: "top",
+			overlayX: "start",
+			overlayY: "bottom",
+			offsetY: -4
+		}];
+	}
+	configureStrategy(strategy, aligned) {
+		strategy.withPositions(this.positionsFor(aligned)).withFlexibleDimensions(!aligned).withGrowAfterOpen(!aligned).withPush(!aligned).withViewportMargin(10);
+	}
+	bind(strategy, aligned) {
+		this.positionStrategy = strategy;
+		this.appliedAligned = aligned;
+		this.host.setAlignmentSide(aligned ? "none" : "bottom");
+		this.positionSubscription = strategy.positionChanges.subscribe((change) => {
+			if (this.appliedAligned === false) this.host.setAlignmentSide(change.connectionPair.originY === "bottom" ? "bottom" : "top");
+		});
+	}
+	releaseSubscription() {
+		this.positionSubscription?.unsubscribe();
+		this.positionSubscription = void 0;
+	}
+	resetAfterClose() {
+		this.positionStrategy = void 0;
+		this.appliedAligned = void 0;
+		this.alignmentDeactivated = false;
+	}
+	resetAfterDetach() {
+		this.positionStrategy = void 0;
+		this.appliedAligned = void 0;
+	}
+	reactToAlignmentChange() {
+		const aligned = this.host.alignItemWithTrigger();
+		if (!this.host.open() || aligned === this.appliedAligned) return;
+		untracked(() => this.applyAlignmentMode(aligned));
+	}
+	applyAlignmentMode(aligned) {
+		const overlayRef = this.host.overlayRef();
+		const strategy = this.positionStrategy;
+		if (!overlayRef || !strategy) return;
+		const popupElement = overlayRef.overlayElement.querySelector(".raqm-select-popup");
+		this.configureStrategy(strategy, aligned);
+		this.appliedAligned = aligned;
+		if (aligned) {
+			this.host.setAlignmentSide("none");
+			this.alignmentDeactivated = false;
+			this.boundPopupHeight();
+			this.alignPopup();
+		} else {
+			strategy.withDefaultOffsetY(0);
+			if (popupElement) popupElement.style.maxHeight = "";
+			overlayRef.updatePosition();
+		}
+		this.host.updateScrollAffordances();
+	}
+	alignPopup() {
+		const overlayRef = this.host.overlayRef();
+		const strategy = this.positionStrategy;
+		if (!overlayRef || !strategy || !this.host.alignItemWithTrigger() || this.alignmentDeactivated) return;
+		const triggerElement = this.host.trigger();
+		const popupElement = overlayRef.overlayElement.querySelector(".raqm-select-popup");
+		const activeId = this.host.activeId();
+		const rowElement = activeId ? overlayRef.overlayElement.querySelector(`[id="${activeId}"]`) : null;
+		if (!popupElement || !rowElement) {
+			overlayRef.updatePosition();
+			return;
+		}
+		const viewport = this.viewportRuler.getViewportSize();
+		const triggerRect = triggerElement.getBoundingClientRect();
+		const rowCenterInPopup = rowElement.offsetTop - popupElement.scrollTop + rowElement.offsetHeight / 2;
+		const desired = triggerRect.height / 2 - rowCenterInPopup;
+		const boundaryTop = 10;
+		const boundaryBottom = viewport.height - 10;
+		const alignedTop = triggerRect.top + desired;
+		let offset = desired;
+		let height = popupElement.getBoundingClientRect().height;
+		let heightReduced = false;
+		const bottomOverflow = alignedTop + height - boundaryBottom;
+		if (bottomOverflow > 0) {
+			height = Math.max(0, height - bottomOverflow);
+			popupElement.style.maxHeight = `${height}px`;
+			heightReduced = true;
+		}
+		const shift = boundaryTop - alignedTop;
+		if (shift > 0) {
+			offset += shift;
+			height = Math.max(0, height - shift);
+			popupElement.style.maxHeight = `${height}px`;
+			heightReduced = true;
+		}
+		if (this.shouldDeactivateAlignment(triggerRect, height, viewport.height)) {
+			this.deactivateAlignment();
+			return;
+		}
+		strategy.withDefaultOffsetY(offset);
+		overlayRef.updatePosition();
+		if (heightReduced) this.host.updateScrollAffordances();
+	}
+	boundPopupHeight() {
+		const popupElement = this.host.overlayRef()?.overlayElement.querySelector(".raqm-select-popup");
+		if (!popupElement) return;
+		const triggerRect = this.host.trigger().getBoundingClientRect();
+		const viewport = this.viewportRuler.getViewportSize();
+		const spaceAbove = triggerRect.top - 9;
+		const spaceBelow = viewport.height - triggerRect.bottom - 9;
+		popupElement.style.maxHeight = `${Math.max(0, Math.max(spaceAbove, spaceBelow))}px`;
+	}
+	shouldDeactivateAlignment(triggerRect, height, viewportHeight) {
+		const triggerCollisionThreshold = 20;
+		const boundaryHeight = viewportHeight - 20;
+		const minimumAlignedHeight = 100;
+		const contentHeight = this.host.popupScrollElement()?.scrollHeight ?? 0;
+		return triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > boundaryHeight - triggerCollisionThreshold || Math.ceil(height) + 1 < Math.min(contentHeight, minimumAlignedHeight);
+	}
+	deactivateAlignment() {
+		const overlayRef = this.host.overlayRef();
+		const strategy = this.positionStrategy;
+		if (!overlayRef || !strategy) return;
+		this.alignmentDeactivated = true;
+		this.appliedAligned = false;
+		const popupElement = overlayRef.overlayElement.querySelector(".raqm-select-popup");
+		if (popupElement) popupElement.style.maxHeight = "";
+		strategy.withDefaultOffsetY(0);
+		this.configureStrategy(strategy, false);
+		overlayRef.updatePosition();
+		this.host.updateScrollAffordances();
+	}
+};
+var RaqmSelectScrolling = class {
+	viewportRuler;
+	host;
+	autoScrollTimer;
+	autoScrollDirection = null;
+	scrollCleanup;
+	viewportSubscription;
+	constructor(viewportRuler, host) {
+		this.viewportRuler = viewportRuler;
+		this.host = host;
+	}
+	scrollOptionIntoView(id) {
+		const overlayRef = this.host.overlayRef();
+		if (!overlayRef || !id) return;
+		const popupElement = overlayRef.overlayElement.querySelector(".raqm-select-popup");
+		const rowElement = overlayRef.overlayElement.querySelector(`[id="${id}"]`);
+		if (!popupElement || !rowElement) return;
+		const rowTop = rowElement.offsetTop;
+		const rowBottom = rowTop + rowElement.offsetHeight;
+		const viewTop = popupElement.scrollTop;
+		const viewBottom = viewTop + popupElement.clientHeight;
+		if (rowTop < viewTop) popupElement.scrollTop = rowTop;
+		else if (rowBottom > viewBottom) popupElement.scrollTop = rowBottom - popupElement.clientHeight;
+	}
+	attach() {
+		const popupElement = this.host.overlayRef()?.overlayElement.querySelector(".raqm-select-popup");
+		if (popupElement) {
+			const handler = () => this.updateAffordances();
+			popupElement.addEventListener("scroll", handler, { passive: true });
+			this.scrollCleanup = () => popupElement.removeEventListener("scroll", handler);
+		}
+		this.viewportSubscription = this.viewportRuler.change().subscribe(() => this.updateAffordances());
+	}
+	release() {
+		this.stopAutoScroll();
+		this.scrollCleanup?.();
+		this.scrollCleanup = void 0;
+		this.viewportSubscription?.unsubscribe();
+		this.viewportSubscription = void 0;
+	}
+	updateAffordances() {
+		const popupElement = this.host.overlayRef()?.overlayElement.querySelector(".raqm-select-popup");
+		if (!popupElement) {
+			this.host.setCanScrollUp(false);
+			this.host.setCanScrollDown(false);
+			return;
+		}
+		const { scrollTop, clientHeight, scrollHeight } = popupElement;
+		this.host.setCanScrollUp(scrollTop > 0);
+		this.host.setCanScrollDown(scrollTop + clientHeight < scrollHeight - 1);
+	}
+	scrollByStep(direction) {
+		const popupElement = this.host.overlayRef()?.overlayElement.querySelector(".raqm-select-popup");
+		if (!popupElement) return;
+		popupElement.scrollTop += direction === "up" ? -120 : 120;
+		this.updateAffordances();
+	}
+	popupScrollElement() {
+		return this.host.overlayRef()?.overlayElement.querySelector(".raqm-select-popup") ?? null;
+	}
+	normalizeScrollOffset(value, max) {
+		if (max <= 0) return 0;
+		const clamped = Math.max(0, Math.min(value, max));
+		const withinStart = clamped <= 1;
+		const withinEnd = max - clamped <= 1;
+		if (withinStart && withinEnd) return clamped <= max - clamped ? 0 : max;
+		if (withinStart) return 0;
+		if (withinEnd) return max;
+		return clamped;
+	}
+	scrollArrowStep(direction) {
+		this.host.resetActive();
+		const popupElement = this.popupScrollElement();
+		if (!popupElement) {
+			this.stopAutoScroll();
+			return;
+		}
+		const isUp = direction === "up";
+		const arrowHeight = (this.host.overlayRef()?.overlayElement.querySelector(isUp ? ".raqm-select-scroll-button--up" : ".raqm-select-scroll-button--down"))?.offsetHeight ?? 0;
+		const rows = Array.from(popupElement.querySelectorAll(".raqm-select-option"));
+		const maxScrollTop = Math.max(0, popupElement.scrollHeight - popupElement.clientHeight);
+		const scrollTop = this.normalizeScrollOffset(popupElement.scrollTop, maxScrollTop);
+		if (scrollTop !== popupElement.scrollTop) popupElement.scrollTop = scrollTop;
+		if (scrollTop === (isUp ? 0 : maxScrollTop)) {
+			this.stopAutoScroll();
+			this.updateAffordances();
+			return;
+		}
+		let target = maxScrollTop;
+		if (rows.length > 0) {
+			if (isUp) {
+				let firstVisibleIndex = 0;
+				const visibleTop = scrollTop + arrowHeight - 1;
+				for (let i = 0; i < rows.length; i += 1) if (rows[i].offsetTop >= visibleTop) {
+					firstVisibleIndex = i;
+					break;
+				}
+				const targetIndex = Math.max(0, firstVisibleIndex - 1);
+				const targetRow = rows[targetIndex];
+				target = targetIndex < firstVisibleIndex && targetRow ? targetRow.offsetTop - arrowHeight : 0;
+			} else {
+				let lastVisibleIndex = rows.length - 1;
+				const visibleBottom = scrollTop + popupElement.clientHeight - arrowHeight + 1;
+				for (let i = 0; i < rows.length; i += 1) if (rows[i].offsetTop + rows[i].offsetHeight > visibleBottom) {
+					lastVisibleIndex = Math.max(0, i - 1);
+					break;
+				}
+				const targetIndex = Math.min(rows.length - 1, lastVisibleIndex + 1);
+				const targetRow = rows[targetIndex];
+				target = targetIndex > lastVisibleIndex && targetRow ? targetRow.offsetTop + targetRow.offsetHeight - popupElement.clientHeight + arrowHeight : maxScrollTop;
+			}
+		}
+		const nextScrollTop = this.normalizeScrollOffset(target, maxScrollTop);
+		if (Math.abs(popupElement.scrollTop - nextScrollTop) > 1) popupElement.scrollTop = nextScrollTop;
+		this.updateAffordances();
+	}
+	startAutoScroll(direction) {
+		if (this.autoScrollDirection === direction) return;
+		this.stopAutoScroll();
+		this.autoScrollDirection = direction;
+		this.host.resetActive();
+		this.autoScrollTimer = setInterval(() => {
+			this.scrollArrowStep(direction);
+		}, 40);
+	}
+	stopAutoScroll() {
+		if (this.autoScrollTimer !== void 0) {
+			clearInterval(this.autoScrollTimer);
+			this.autoScrollTimer = void 0;
+		}
+		this.autoScrollDirection = null;
+	}
+};
+var RaqmSelectViewState = class {
+	host;
+	cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	activeId = signal(null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	overlayDir = signal("ltr", ...ngDevMode ? [{ debugName: "overlayDir" }] : /* istanbul ignore next */ []);
+	canScrollUp = signal(false, ...ngDevMode ? [{ debugName: "canScrollUp" }] : /* istanbul ignore next */ []);
+	canScrollDown = signal(false, ...ngDevMode ? [{ debugName: "canScrollDown" }] : /* istanbul ignore next */ []);
+	alignmentSide = signal("none", ...ngDevMode ? [{ debugName: "alignmentSide" }] : /* istanbul ignore next */ []);
+	resolvedInputId = computed(() => this.host.inputId() || this.host.autoId, ...ngDevMode ? [{ debugName: "resolvedInputId" }] : /* istanbul ignore next */ []);
+	labelId = computed(() => `${this.resolvedInputId()}-label`, ...ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []);
+	listboxId = computed(() => `${this.resolvedInputId()}-listbox`, ...ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []);
+	chunks = computed(() => {
+		const baseId = this.resolvedInputId();
+		const chunks = [];
+		let optionIndex = 0;
+		let chunkIndex = 0;
+		let loose = null;
+		const nextView = (option) => {
+			const view = {
+				option,
+				id: `${baseId}-option-${optionIndex}`,
+				index: optionIndex
+			};
+			optionIndex++;
+			return view;
+		};
+		for (const entry of this.host.items()) {
+			if (isSelectGroup(entry)) {
+				loose = null;
+				chunks.push({
+					key: `${baseId}-group-${chunkIndex}`,
+					label: entry.label,
+					labelId: `${baseId}-group-label-${chunkIndex}`,
+					separatorBefore: entry.separatorBefore === true,
+					options: entry.options.map(nextView)
+				});
+				chunkIndex++;
+				continue;
+			}
+			if (loose === null) {
+				loose = {
+					key: `${baseId}-loose-${chunkIndex}`,
+					label: null,
+					labelId: null,
+					separatorBefore: false,
+					options: []
+				};
+				chunks.push(loose);
+				chunkIndex++;
+			}
+			loose.options.push(nextView(entry));
+		}
+		return chunks;
+	}, ...ngDevMode ? [{ debugName: "chunks" }] : /* istanbul ignore next */ []);
+	optionViews = computed(() => this.chunks().flatMap((chunk) => chunk.options), ...ngDevMode ? [{ debugName: "optionViews" }] : /* istanbul ignore next */ []);
+	optionRefs = computed(() => this.optionViews().map((view) => new RaqmSelectOptionRef(view, (ref) => {
+		this.activeId.set(ref.view.id);
+		this.host.scrollOptionIntoView(ref.view.id);
+	})), ...ngDevMode ? [{ debugName: "optionRefs" }] : /* istanbul ignore next */ []);
+	selectedLabel = computed(() => {
+		const value = this.host.selected();
+		const match = this.optionViews().find((view) => view.option.value === value);
+		return match ? match.option.triggerLabel ?? match.option.label : null;
+	}, ...ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []);
+	constructor(host) {
+		this.host = host;
+	}
+};
+let nextSelectId = 0;
+var RaqmSelect = class RaqmSelect {
+	host = inject(ElementRef);
+	overlay = inject(Overlay);
+	viewportRuler = inject(ViewportRuler);
+	directionality = inject(Directionality, { optional: true });
+	viewContainerRef = inject(ViewContainerRef);
+	triggerRef = viewChild.required("trigger", ...ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []);
+	popupTemplate = viewChild.required("popup", {
+		...ngDevMode ? { debugName: "popupTemplate" } : /* istanbul ignore next */ {},
+		read: TemplateRef
+	});
+	autoId = `raqm-select-${++nextSelectId}`;
+	injector = inject(Injector);
+	items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	value = input(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	placeholder = input(null, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	alignItemWithTrigger = input(true, {
+		...ngDevMode ? { debugName: "alignItemWithTrigger" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	dir = input(void 0, ...ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []);
+	inputId = input("", ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	labelledBy = input(void 0, ...ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []);
+	describedBy = input(void 0, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selected = linkedSignal(() => this.value(), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	state = new RaqmSelectViewState({
+		items: () => this.items(),
+		inputId: () => this.inputId(),
+		autoId: this.autoId,
+		selected: () => this.selected(),
+		scrollOptionIntoView: (id) => this.scrolling.scrollOptionIntoView(id)
+	});
+	resolvedInputId = this.state.resolvedInputId;
+	labelId = this.state.labelId;
+	listboxId = this.state.listboxId;
+	chunks = this.state.chunks;
+	selectedLabel = this.state.selectedLabel;
+	effectiveDisabled = computed(() => this.disabled() || this.state.cvaDisabled(), ...ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []);
+	open = this.state.open;
+	activeId = this.state.activeId;
+	overlayDir = this.state.overlayDir;
+	canScrollUp = this.state.canScrollUp;
+	canScrollDown = this.state.canScrollDown;
+	alignmentSide = this.state.alignmentSide;
+	control = new RaqmSelectControl({
+		effectiveDisabled: () => this.effectiveDisabled(),
+		selected: () => this.selected(),
+		setSelected: (value) => this.selected.set(value),
+		emit: (value) => this.valueChange.emit(value),
+		close: (touched) => this.layer.close(touched),
+		setCvaDisabled: (value) => this.state.cvaDisabled.set(value),
+		optionViews: () => this.state.optionViews()
+	});
+	position = new RaqmSelectPosition(this.viewportRuler, {
+		overlayRef: () => this.layer.ref,
+		trigger: () => this.triggerRef().nativeElement,
+		activeId: () => this.state.activeId(),
+		alignItemWithTrigger: () => this.alignItemWithTrigger(),
+		open: () => this.state.open(),
+		setAlignmentSide: (side) => this.state.alignmentSide.set(side),
+		updateScrollAffordances: () => this.scrolling.updateAffordances(),
+		popupScrollElement: () => this.scrolling.popupScrollElement()
+	});
+	scrolling = new RaqmSelectScrolling(this.viewportRuler, {
+		overlayRef: () => this.layer.ref,
+		resetActive: () => this.keyboard.resetActive(),
+		setCanScrollUp: (value) => this.state.canScrollUp.set(value),
+		setCanScrollDown: (value) => this.state.canScrollDown.set(value)
+	});
+	layer = new RaqmSelectOverlay(this.overlay, this.viewContainerRef, this.position, this.scrolling, {
+		open: () => this.state.open(),
+		effectiveDisabled: () => this.effectiveDisabled(),
+		trigger: () => this.triggerRef().nativeElement,
+		popupTemplate: () => this.popupTemplate(),
+		direction: () => resolveSelectDirection(this.dir(), this.host.nativeElement, this.directionality),
+		alignItemWithTrigger: () => this.alignItemWithTrigger(),
+		setOpen: (value) => this.state.open.set(value),
+		setActiveId: (id) => this.state.activeId.set(id),
+		setOverlayDir: (dir) => this.state.overlayDir.set(dir),
+		setInitialActive: () => this.keyboard.setInitialActive(),
+		markTouched: () => this.control.markTouched(),
+		setCanScrollUp: (value) => this.state.canScrollUp.set(value),
+		setCanScrollDown: (value) => this.state.canScrollDown.set(value)
+	});
+	keyboard = new RaqmSelectKeyboard(this.injector, {
+		optionRefs: () => this.state.optionRefs,
+		optionViews: () => this.state.optionViews(),
+		selected: () => this.selected(),
+		activeId: () => this.state.activeId(),
+		open: () => this.state.open(),
+		element: () => this.host.nativeElement,
+		overlayRef: () => this.layer.ref,
+		openPopup: () => this.layer.openPopup(),
+		close: (touched) => this.layer.close(touched),
+		markTouched: () => this.control.markTouched(),
+		commitSelection: (value) => this.control.commitSelection(value),
+		setActiveId: (id) => this.state.activeId.set(id)
+	});
+	constructor() {
+		connectSelectEffects({
+			reportDuplicateValues: () => this.control.reportDuplicateValues(),
+			reactToAlignmentChange: () => this.position.reactToAlignmentChange(),
+			effectiveDisabled: () => this.effectiveDisabled(),
+			open: () => this.state.open(),
+			close: (touched) => this.layer.close(touched)
+		});
+	}
+	ngOnInit() {
+		this.keyboard.init();
+	}
+	ngOnDestroy() {
+		this.keyboard.destroy();
+		this.layer.destroy();
+	}
+	writeValue(value) {
+		this.control.writeValue(value);
+	}
+	registerOnChange(fn) {
+		this.control.registerOnChange(fn);
+	}
+	registerOnTouched(fn) {
+		this.control.registerOnTouched(fn);
+	}
+	setDisabledState(isDisabled) {
+		this.control.setDisabledState(isDisabled);
+	}
+	toggle() {
+		if (this.open()) this.close(true);
+		else this.openPopup();
+	}
+	onTriggerKeydown(event) {
+		this.keyboard.onTriggerKeydown(event);
+	}
+	onTriggerBlur(event) {
+		this.keyboard.onTriggerBlur(event);
+	}
+	onOptionClick(option) {
+		this.control.onOptionClick(option);
+	}
+	onOptionPointerMove(view) {
+		this.keyboard.onOptionPointerMove(view);
+	}
+	onOptionPointerLeave(event) {
+		this.keyboard.onOptionPointerLeave(event);
+	}
+	scrollByStep(direction) {
+		this.scrolling.scrollByStep(direction);
+	}
+	startAutoScroll(direction) {
+		this.scrolling.startAutoScroll(direction);
+	}
+	stopAutoScroll() {
+		this.scrolling.stopAutoScroll();
+	}
+	openPopup() {
+		this.layer.openPopup();
+	}
+	close(touched) {
+		this.layer.close(touched);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmSelect,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmSelect,
+		isStandalone: true,
+		selector: "raqm-select",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			alignItemWithTrigger: {
+				classPropertyName: "alignItemWithTrigger",
+				publicName: "alignItemWithTrigger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dir: {
+				classPropertyName: "dir",
+				publicName: "dir",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelledBy: {
+				classPropertyName: "labelledBy",
+				publicName: "labelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			describedBy: {
+				classPropertyName: "describedBy",
+				publicName: "describedBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { valueChange: "valueChange" },
+		host: {
+			properties: {
+				"attr.data-raqm-disabled": "effectiveDisabled() ? \"true\" : null",
+				"attr.data-raqm-invalid": "invalid() ? \"true\" : null",
+				"attr.data-raqm-open": "open() ? \"true\" : null"
+			},
+			classAttribute: "raqm-select"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => RaqmSelect),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "triggerRef",
+			first: true,
+			predicate: ["trigger"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "popupTemplate",
+			first: true,
+			predicate: ["popup"],
+			descendants: true,
+			read: TemplateRef,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (label(); as labelText) {\r\n  <!-- `for` targets the real trigger button, not the custom-element host. -->\r\n  <label class=\"raqm-select-label\" [attr.for]=\"resolvedInputId()\" [attr.id]=\"labelId()\">\r\n    {{ labelText }}\r\n  </label>\r\n}\r\n\r\n<!-- The control: a native button with combobox semantics and the single tab stop. -->\r\n<button\r\n  #trigger\r\n  type=\"button\"\r\n  class=\"raqm-select-trigger\"\r\n  role=\"combobox\"\r\n  aria-haspopup=\"listbox\"\r\n  [attr.id]=\"resolvedInputId()\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  [attr.aria-controls]=\"open() ? listboxId() : null\"\r\n  [attr.aria-activedescendant]=\"open() ? activeId() : null\"\r\n  [attr.aria-labelledby]=\"labelledBy() ?? null\"\r\n  [attr.aria-describedby]=\"describedBy() ?? null\"\r\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n  [attr.data-raqm-placeholder]=\"selectedLabel() === null ? '' : null\"\r\n  [disabled]=\"effectiveDisabled()\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n  (blur)=\"onTriggerBlur($event)\"\r\n>\r\n  <span class=\"raqm-select-value\">{{ selectedLabel() ?? placeholder() }}</span>\r\n\r\n  <svg\r\n    class=\"raqm-select-trigger-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"2\"\r\n    stroke-linecap=\"round\"\r\n    stroke-linejoin=\"round\"\r\n    aria-hidden=\"true\"\r\n    focusable=\"false\"\r\n  >\r\n    <path d=\"m6 9 6 6 6-6\" />\r\n  </svg>\r\n</button>\r\n\r\n<!-- Instantiated into a CDK overlay; its nodes come from this view, so component styles apply. -->\r\n<ng-template #popup>\r\n  <div\r\n    class=\"raqm-select-popup\"\r\n    [attr.dir]=\"overlayDir()\"\r\n    [attr.data-raqm-align]=\"alignItemWithTrigger()\"\r\n    [attr.data-raqm-side]=\"alignmentSide()\"\r\n    (mousedown)=\"$event.preventDefault()\"\r\n  >\r\n    <!-- Pointer-only affordance; `visibility` keeps the layout and measure stable. -->\r\n    <div\r\n      class=\"raqm-select-scroll-button raqm-select-scroll-button--up\"\r\n      [class.raqm-select-scroll-button--hidden]=\"!canScrollUp()\"\r\n      aria-hidden=\"true\"\r\n      (pointermove)=\"startAutoScroll('up')\"\r\n      (pointerleave)=\"stopAutoScroll()\"\r\n      (click)=\"scrollByStep('up')\"\r\n    >\r\n      <svg\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        aria-hidden=\"true\"\r\n        focusable=\"false\"\r\n      >\r\n        <path d=\"m18 15-6-6-6 6\" />\r\n      </svg>\r\n    </div>\r\n\r\n    <div\r\n      class=\"raqm-select-list\"\r\n      role=\"listbox\"\r\n      [attr.id]=\"listboxId()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : (labelledBy() ?? null)\"\r\n    >\r\n      <!-- One row shared by grouped and loose chunks, so loose options are direct listbox children. -->\r\n      <ng-template #optionList let-options>\r\n        @for (view of options; track view.id) {\r\n          <div\r\n            class=\"raqm-select-option\"\r\n            role=\"option\"\r\n            [id]=\"view.id\"\r\n            [attr.aria-selected]=\"selected() === view.option.value\"\r\n            [attr.aria-disabled]=\"view.option.disabled ? 'true' : null\"\r\n            [class.raqm-select-option--active]=\"view.id === activeId()\"\r\n            [attr.data-raqm-highlighted]=\"view.id === activeId() ? '' : null\"\r\n            (pointermove)=\"onOptionPointerMove(view)\"\r\n            (pointerleave)=\"onOptionPointerLeave($event)\"\r\n            (click)=\"onOptionClick(view.option)\"\r\n          >\r\n            <span class=\"raqm-select-item-indicator\" aria-hidden=\"true\">\r\n              <svg\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                focusable=\"false\"\r\n              >\r\n                <path d=\"M20 6 9 17l-5-5\" />\r\n              </svg>\r\n            </span>\r\n            <span class=\"raqm-select-item-text\">{{ view.option.label }}</span>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n\r\n      @for (chunk of chunks(); track chunk.key) {\r\n        @if (chunk.separatorBefore) {\r\n          <!-- Decorative, non-focusable separator. -->\r\n          <div class=\"raqm-select-separator\" role=\"separator\" aria-orientation=\"horizontal\"></div>\r\n        }\r\n        @if (chunk.label; as groupLabel) {\r\n          <!-- A labelled explicit group. -->\r\n          <div class=\"raqm-select-group\" role=\"group\" [attr.aria-labelledby]=\"chunk.labelId\">\r\n            <div class=\"raqm-select-group-label\" [attr.id]=\"chunk.labelId\">\r\n              {{ groupLabel }}\r\n            </div>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"optionList\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: chunk.options }\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <!-- A loose run keeps the same unnamed `role=\"group\"` padding, which sets the popup height. -->\r\n          <div class=\"raqm-select-group\" role=\"group\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"optionList\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: chunk.options }\"\r\n            />\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Pointer-only, non-focusable affordance; see the note above. -->\r\n    <div\r\n      class=\"raqm-select-scroll-button raqm-select-scroll-button--down\"\r\n      [class.raqm-select-scroll-button--hidden]=\"!canScrollDown()\"\r\n      aria-hidden=\"true\"\r\n      (pointermove)=\"startAutoScroll('down')\"\r\n      (pointerleave)=\"stopAutoScroll()\"\r\n      (click)=\"scrollByStep('down')\"\r\n    >\r\n      <svg\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        aria-hidden=\"true\"\r\n        focusable=\"false\"\r\n      >\r\n        <path d=\"m6 9 6 6 6-6\" />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [":host{display:inline-block;max-inline-size:100%}.raqm-select-label{display:block;margin-block-end:calc(var(--raqm-spacing) * 1.5);font-size:var(--raqm-font-size-sm);font-weight:var(--raqm-font-weight-medium);color:var(--raqm-foreground)}.raqm-select-trigger{display:inline-flex;align-items:center;justify-content:space-between;white-space:nowrap;outline:none;box-sizing:border-box;inline-size:100%;gap:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-lg);border:1px solid var(--raqm-input);padding-block:calc(var(--raqm-spacing) * 2);padding-inline-start:calc(var(--raqm-spacing) * 2.5);padding-inline-end:calc(var(--raqm-spacing) * 2);font-size:var(--raqm-font-size-sm);block-size:calc(var(--raqm-spacing) * 8);background-color:var(--raqm-control-bg);color:inherit;transition:color var(--raqm-duration-base) var(--raqm-ease-standard),background-color var(--raqm-duration-base) var(--raqm-ease-standard),border-color var(--raqm-duration-base) var(--raqm-ease-standard),box-shadow var(--raqm-duration-base) var(--raqm-ease-standard);-webkit-user-select:none;user-select:none}.raqm-select-trigger:disabled{cursor:not-allowed;opacity:var(--raqm-disabled-opacity)}.raqm-select-trigger:not(:disabled):hover{background-color:color-mix(in oklch,var(--raqm-input) var(--raqm-control-hover-alpha, 0%),transparent)}.raqm-select-trigger:focus-visible{border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}.raqm-select-trigger[aria-invalid=true]{border-color:var(--raqm-invalid-border);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-invalid-ring)}.raqm-select-trigger[data-raqm-placeholder] .raqm-select-value{color:var(--raqm-muted-foreground)}.raqm-select-value{display:flex;flex:1 1 auto;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.raqm-select-trigger svg:not([class*=size-]){inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4);pointer-events:none;flex-shrink:0}.raqm-select-trigger-icon{color:var(--raqm-muted-foreground)}.raqm-select-popup{box-sizing:border-box;position:relative;inline-size:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.raqm-select-popup::-webkit-scrollbar{display:none}.raqm-select-popup{background-color:color-mix(in oklch,var(--raqm-popover) 70%,transparent);color:var(--raqm-popover-foreground);border-radius:var(--raqm-radius-lg);min-inline-size:calc(var(--raqm-spacing) * 36);box-shadow:var(--raqm-shadow-md),0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent)}.raqm-select-popup:before{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%)}.raqm-select-group{padding:var(--raqm-spacing);scroll-margin-block:var(--raqm-spacing)}.raqm-select-group-label{color:var(--raqm-muted-foreground);padding-inline:calc(var(--raqm-spacing) * 1.5);padding-block:var(--raqm-spacing);font-size:var(--raqm-font-size-xs);line-height:calc(var(--raqm-spacing) * 4)}.raqm-select-option{position:relative;display:flex;inline-size:100%;align-items:center;cursor:default;outline:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;gap:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-md);padding-block:var(--raqm-spacing);padding-inline-start:calc(var(--raqm-spacing) * 1.5);padding-inline-end:calc(var(--raqm-spacing) * 8);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}.raqm-select-option[aria-disabled=true]{pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-select-option--active,.raqm-select-option[data-raqm-highlighted]{background-color:color-mix(in oklch,var(--raqm-foreground) 10%,transparent);color:var(--raqm-accent-foreground)}.raqm-select-item-indicator{position:absolute;inset-inline-end:calc(var(--raqm-spacing) * 2);display:flex;inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4);align-items:center;justify-content:center;pointer-events:none;visibility:hidden}.raqm-select-option[aria-selected=true] .raqm-select-item-indicator{visibility:visible}.raqm-select-item-indicator svg{inline-size:100%;block-size:100%}.raqm-select-item-text{display:flex;flex:1 1 auto;gap:calc(var(--raqm-spacing) * 2);white-space:nowrap}.raqm-select-separator{background-color:color-mix(in oklch,var(--raqm-foreground) 5%,transparent);block-size:1px;margin-inline:calc(var(--raqm-spacing) * -1);margin-block:var(--raqm-spacing)}@media(forced-colors:active){.raqm-select-trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}.raqm-select-popup{border:1px solid CanvasText}.raqm-select-option--active,.raqm-select-option[data-raqm-highlighted]{background-color:Highlight;color:HighlightText;outline:1px solid HighlightText}}.raqm-select-scroll-button{position:sticky;z-index:10;display:flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:100%;padding-block:var(--raqm-spacing);background-color:var(--raqm-popover);cursor:default}.raqm-select-scroll-button--up{inset-block-start:0;margin-block-end:calc(var(--raqm-spacing) * -6)}.raqm-select-scroll-button--down{inset-block-end:0;margin-block-start:calc(var(--raqm-spacing) * -6)}.raqm-select-scroll-button--hidden{visibility:hidden;pointer-events:none}.raqm-select-scroll-button svg:not([class*=size-]){inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4);pointer-events:none;flex-shrink:0}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmSelect,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-select",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => RaqmSelect),
+				multi: true
+			}],
+			host: {
+				class: "raqm-select",
+				"[attr.data-raqm-disabled]": "effectiveDisabled() ? \"true\" : null",
+				"[attr.data-raqm-invalid]": "invalid() ? \"true\" : null",
+				"[attr.data-raqm-open]": "open() ? \"true\" : null"
+			},
+			template: "@if (label(); as labelText) {\r\n  <!-- `for` targets the real trigger button, not the custom-element host. -->\r\n  <label class=\"raqm-select-label\" [attr.for]=\"resolvedInputId()\" [attr.id]=\"labelId()\">\r\n    {{ labelText }}\r\n  </label>\r\n}\r\n\r\n<!-- The control: a native button with combobox semantics and the single tab stop. -->\r\n<button\r\n  #trigger\r\n  type=\"button\"\r\n  class=\"raqm-select-trigger\"\r\n  role=\"combobox\"\r\n  aria-haspopup=\"listbox\"\r\n  [attr.id]=\"resolvedInputId()\"\r\n  [attr.aria-expanded]=\"open()\"\r\n  [attr.aria-controls]=\"open() ? listboxId() : null\"\r\n  [attr.aria-activedescendant]=\"open() ? activeId() : null\"\r\n  [attr.aria-labelledby]=\"labelledBy() ?? null\"\r\n  [attr.aria-describedby]=\"describedBy() ?? null\"\r\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n  [attr.data-raqm-placeholder]=\"selectedLabel() === null ? '' : null\"\r\n  [disabled]=\"effectiveDisabled()\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n  (blur)=\"onTriggerBlur($event)\"\r\n>\r\n  <span class=\"raqm-select-value\">{{ selectedLabel() ?? placeholder() }}</span>\r\n\r\n  <svg\r\n    class=\"raqm-select-trigger-icon\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"2\"\r\n    stroke-linecap=\"round\"\r\n    stroke-linejoin=\"round\"\r\n    aria-hidden=\"true\"\r\n    focusable=\"false\"\r\n  >\r\n    <path d=\"m6 9 6 6 6-6\" />\r\n  </svg>\r\n</button>\r\n\r\n<!-- Instantiated into a CDK overlay; its nodes come from this view, so component styles apply. -->\r\n<ng-template #popup>\r\n  <div\r\n    class=\"raqm-select-popup\"\r\n    [attr.dir]=\"overlayDir()\"\r\n    [attr.data-raqm-align]=\"alignItemWithTrigger()\"\r\n    [attr.data-raqm-side]=\"alignmentSide()\"\r\n    (mousedown)=\"$event.preventDefault()\"\r\n  >\r\n    <!-- Pointer-only affordance; `visibility` keeps the layout and measure stable. -->\r\n    <div\r\n      class=\"raqm-select-scroll-button raqm-select-scroll-button--up\"\r\n      [class.raqm-select-scroll-button--hidden]=\"!canScrollUp()\"\r\n      aria-hidden=\"true\"\r\n      (pointermove)=\"startAutoScroll('up')\"\r\n      (pointerleave)=\"stopAutoScroll()\"\r\n      (click)=\"scrollByStep('up')\"\r\n    >\r\n      <svg\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        aria-hidden=\"true\"\r\n        focusable=\"false\"\r\n      >\r\n        <path d=\"m18 15-6-6-6 6\" />\r\n      </svg>\r\n    </div>\r\n\r\n    <div\r\n      class=\"raqm-select-list\"\r\n      role=\"listbox\"\r\n      [attr.id]=\"listboxId()\"\r\n      [attr.aria-labelledby]=\"label() ? labelId() : (labelledBy() ?? null)\"\r\n    >\r\n      <!-- One row shared by grouped and loose chunks, so loose options are direct listbox children. -->\r\n      <ng-template #optionList let-options>\r\n        @for (view of options; track view.id) {\r\n          <div\r\n            class=\"raqm-select-option\"\r\n            role=\"option\"\r\n            [id]=\"view.id\"\r\n            [attr.aria-selected]=\"selected() === view.option.value\"\r\n            [attr.aria-disabled]=\"view.option.disabled ? 'true' : null\"\r\n            [class.raqm-select-option--active]=\"view.id === activeId()\"\r\n            [attr.data-raqm-highlighted]=\"view.id === activeId() ? '' : null\"\r\n            (pointermove)=\"onOptionPointerMove(view)\"\r\n            (pointerleave)=\"onOptionPointerLeave($event)\"\r\n            (click)=\"onOptionClick(view.option)\"\r\n          >\r\n            <span class=\"raqm-select-item-indicator\" aria-hidden=\"true\">\r\n              <svg\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                focusable=\"false\"\r\n              >\r\n                <path d=\"M20 6 9 17l-5-5\" />\r\n              </svg>\r\n            </span>\r\n            <span class=\"raqm-select-item-text\">{{ view.option.label }}</span>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n\r\n      @for (chunk of chunks(); track chunk.key) {\r\n        @if (chunk.separatorBefore) {\r\n          <!-- Decorative, non-focusable separator. -->\r\n          <div class=\"raqm-select-separator\" role=\"separator\" aria-orientation=\"horizontal\"></div>\r\n        }\r\n        @if (chunk.label; as groupLabel) {\r\n          <!-- A labelled explicit group. -->\r\n          <div class=\"raqm-select-group\" role=\"group\" [attr.aria-labelledby]=\"chunk.labelId\">\r\n            <div class=\"raqm-select-group-label\" [attr.id]=\"chunk.labelId\">\r\n              {{ groupLabel }}\r\n            </div>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"optionList\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: chunk.options }\"\r\n            />\r\n          </div>\r\n        } @else {\r\n          <!-- A loose run keeps the same unnamed `role=\"group\"` padding, which sets the popup height. -->\r\n          <div class=\"raqm-select-group\" role=\"group\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"optionList\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: chunk.options }\"\r\n            />\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Pointer-only, non-focusable affordance; see the note above. -->\r\n    <div\r\n      class=\"raqm-select-scroll-button raqm-select-scroll-button--down\"\r\n      [class.raqm-select-scroll-button--hidden]=\"!canScrollDown()\"\r\n      aria-hidden=\"true\"\r\n      (pointermove)=\"startAutoScroll('down')\"\r\n      (pointerleave)=\"stopAutoScroll()\"\r\n      (click)=\"scrollByStep('down')\"\r\n    >\r\n      <svg\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        stroke-width=\"2\"\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        aria-hidden=\"true\"\r\n        focusable=\"false\"\r\n      >\r\n        <path d=\"m6 9 6 6 6-6\" />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [":host{display:inline-block;max-inline-size:100%}.raqm-select-label{display:block;margin-block-end:calc(var(--raqm-spacing) * 1.5);font-size:var(--raqm-font-size-sm);font-weight:var(--raqm-font-weight-medium);color:var(--raqm-foreground)}.raqm-select-trigger{display:inline-flex;align-items:center;justify-content:space-between;white-space:nowrap;outline:none;box-sizing:border-box;inline-size:100%;gap:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-lg);border:1px solid var(--raqm-input);padding-block:calc(var(--raqm-spacing) * 2);padding-inline-start:calc(var(--raqm-spacing) * 2.5);padding-inline-end:calc(var(--raqm-spacing) * 2);font-size:var(--raqm-font-size-sm);block-size:calc(var(--raqm-spacing) * 8);background-color:var(--raqm-control-bg);color:inherit;transition:color var(--raqm-duration-base) var(--raqm-ease-standard),background-color var(--raqm-duration-base) var(--raqm-ease-standard),border-color var(--raqm-duration-base) var(--raqm-ease-standard),box-shadow var(--raqm-duration-base) var(--raqm-ease-standard);-webkit-user-select:none;user-select:none}.raqm-select-trigger:disabled{cursor:not-allowed;opacity:var(--raqm-disabled-opacity)}.raqm-select-trigger:not(:disabled):hover{background-color:color-mix(in oklch,var(--raqm-input) var(--raqm-control-hover-alpha, 0%),transparent)}.raqm-select-trigger:focus-visible{border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}.raqm-select-trigger[aria-invalid=true]{border-color:var(--raqm-invalid-border);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-invalid-ring)}.raqm-select-trigger[data-raqm-placeholder] .raqm-select-value{color:var(--raqm-muted-foreground)}.raqm-select-value{display:flex;flex:1 1 auto;text-align:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.raqm-select-trigger svg:not([class*=size-]){inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4);pointer-events:none;flex-shrink:0}.raqm-select-trigger-icon{color:var(--raqm-muted-foreground)}.raqm-select-popup{box-sizing:border-box;position:relative;inline-size:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.raqm-select-popup::-webkit-scrollbar{display:none}.raqm-select-popup{background-color:color-mix(in oklch,var(--raqm-popover) 70%,transparent);color:var(--raqm-popover-foreground);border-radius:var(--raqm-radius-lg);min-inline-size:calc(var(--raqm-spacing) * 36);box-shadow:var(--raqm-shadow-md),0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent)}.raqm-select-popup:before{content:\"\";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%)}.raqm-select-group{padding:var(--raqm-spacing);scroll-margin-block:var(--raqm-spacing)}.raqm-select-group-label{color:var(--raqm-muted-foreground);padding-inline:calc(var(--raqm-spacing) * 1.5);padding-block:var(--raqm-spacing);font-size:var(--raqm-font-size-xs);line-height:calc(var(--raqm-spacing) * 4)}.raqm-select-option{position:relative;display:flex;inline-size:100%;align-items:center;cursor:default;outline:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;gap:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-md);padding-block:var(--raqm-spacing);padding-inline-start:calc(var(--raqm-spacing) * 1.5);padding-inline-end:calc(var(--raqm-spacing) * 8);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}.raqm-select-option[aria-disabled=true]{pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-select-option--active,.raqm-select-option[data-raqm-highlighted]{background-color:color-mix(in oklch,var(--raqm-foreground) 10%,transparent);color:var(--raqm-accent-foreground)}.raqm-select-item-indicator{position:absolute;inset-inline-end:calc(var(--raqm-spacing) * 2);display:flex;inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4);align-items:center;justify-content:center;pointer-events:none;visibility:hidden}.raqm-select-option[aria-selected=true] .raqm-select-item-indicator{visibility:visible}.raqm-select-item-indicator svg{inline-size:100%;block-size:100%}.raqm-select-item-text{display:flex;flex:1 1 auto;gap:calc(var(--raqm-spacing) * 2);white-space:nowrap}.raqm-select-separator{background-color:color-mix(in oklch,var(--raqm-foreground) 5%,transparent);block-size:1px;margin-inline:calc(var(--raqm-spacing) * -1);margin-block:var(--raqm-spacing)}@media(forced-colors:active){.raqm-select-trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}.raqm-select-popup{border:1px solid CanvasText}.raqm-select-option--active,.raqm-select-option[data-raqm-highlighted]{background-color:Highlight;color:HighlightText;outline:1px solid HighlightText}}.raqm-select-scroll-button{position:sticky;z-index:10;display:flex;align-items:center;justify-content:center;box-sizing:border-box;inline-size:100%;padding-block:var(--raqm-spacing);background-color:var(--raqm-popover);cursor:default}.raqm-select-scroll-button--up{inset-block-start:0;margin-block-end:calc(var(--raqm-spacing) * -6)}.raqm-select-scroll-button--down{inset-block-end:0;margin-block-start:calc(var(--raqm-spacing) * -6)}.raqm-select-scroll-button--hidden{visibility:hidden;pointer-events:none}.raqm-select-scroll-button svg:not([class*=size-]){inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4);pointer-events:none;flex-shrink:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		triggerRef: [{
+			type: i0.ViewChild,
+			args: ["trigger", { isSignal: true }]
+		}],
+		popupTemplate: [{
+			type: i0.ViewChild,
+			args: ["popup", {
+				read: TemplateRef,
+				isSignal: true
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		alignItemWithTrigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "alignItemWithTrigger",
+				required: false
+			}]
+		}],
+		dir: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dir",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		labelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelledBy",
+				required: false
+			}]
+		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedBy",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}]
+	}
+});
+export { RaqmSelect };
+
+//# sourceMappingURL=raqm-ui-select.mjs.map