@magmonium/one 0.4.30 → 0.4.31

package/fesm2022/magmonium-one-selector-DDnBYNLr.mjs

@@ -0,0 +1,1065 @@
+import { G as MODAL_STORE_REF } from "./magmonium-one-size-converter-B-UubQQ0.mjs";
+import "./magmonium-one-file.service-Bo06pU3_.mjs";
+import { m as ThemeStore } from "./magmonium-one-color-utl-CirPzUFk.mjs";
+import "./magmonium-one-theme-a7GlFbzE.mjs";
+import * as i0 from "@angular/core";
+import { ApplicationRef, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostListener, Injectable, RendererFactory2, computed, createComponent, inject, input, linkedSignal, output, signal } from "@angular/core";
+import { Observable } from "rxjs";
+const MOBILE_QUERY = "(max-width: 767px)";
+const TABLET_QUERY = "(min-width: 768px) and (max-width: 1199px)";
+const DESKTOP_QUERY = "(min-width: 1200px)";
+const TOUCH_QUERY = "(pointer: coarse)";
+var DeviceService = class DeviceService {
+	isMobile = signal(this.matches(MOBILE_QUERY), ...ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []);
+	isTablet = signal(this.matches(TABLET_QUERY), ...ngDevMode ? [{ debugName: "isTablet" }] : /* istanbul ignore next */ []);
+	isDesktop = signal(this.matches(DESKTOP_QUERY), ...ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []);
+	isTouch = signal(this.matches(TOUCH_QUERY), ...ngDevMode ? [{ debugName: "isTouch" }] : /* istanbul ignore next */ []);
+	destroyRef = inject(DestroyRef);
+	constructor() {
+		this.listen(MOBILE_QUERY, this.isMobile);
+		this.listen(TABLET_QUERY, this.isTablet);
+		this.listen(DESKTOP_QUERY, this.isDesktop);
+		this.listen(TOUCH_QUERY, this.isTouch);
+	}
+	matches(query) {
+		return typeof window !== "undefined" && window.matchMedia(query).matches;
+	}
+	listen(query, sig) {
+		if (typeof window === "undefined") return;
+		const mql = window.matchMedia(query);
+		const handler = (e) => sig.set(e.matches);
+		mql.addEventListener("change", handler);
+		this.destroyRef.onDestroy(() => mql.removeEventListener("change", handler));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DeviceService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DeviceService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DeviceService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var DomService = class DomService {
+	fullscreen = signal(false, ...ngDevMode ? [{ debugName: "fullscreen" }] : /* istanbul ignore next */ []);
+	document = inject(DOCUMENT);
+	applicationRef = inject(ApplicationRef);
+	renderer;
+	rendererFactory = inject(RendererFactory2);
+	deviceService = inject(DeviceService);
+	animationDuration = 300;
+	constructor() {
+		this.renderer = this.rendererFactory.createRenderer(null, null);
+	}
+	create({ component, className, styles, id, parentClassName, parentStyles, bindings }) {
+		if (this.document.querySelector(`#${id}`)) return;
+		const componentRef = createComponent(component, {
+			environmentInjector: this.applicationRef.injector,
+			bindings
+		});
+		this.applicationRef.attachView(componentRef.hostView);
+		const child = this.document.createElement("div");
+		child.className = className;
+		this.applyStyles(child, styles);
+		if (id) child.id = id;
+		this.renderer.appendChild(child, componentRef.hostView.rootNodes[0]);
+		if (parentClassName) {
+			this.append({
+				className: parentClassName,
+				child,
+				styles: parentStyles
+			});
+			return componentRef;
+		}
+		this.renderer.appendChild(this.document.querySelector("body"), child);
+		return componentRef;
+	}
+	destroy({ componentRef, parentClassName, id, className }) {
+		const parent = parentClassName ? this.document?.querySelector(`.${parentClassName}`) : void 0;
+		const elm = parent ? id ? parent.querySelector(`#${id}`) : parent.querySelector(`.${className}`) : this.document?.querySelector(`.${className}`) ?? this.document?.querySelector(`#${id}`);
+		if (!elm) return;
+		if (componentRef) {
+			this.applicationRef.detachView(componentRef.hostView);
+			componentRef.destroy();
+		}
+		elm.remove();
+	}
+	addBodyScroll() {
+		this.document.body.style.overflow = "auto";
+	}
+	removeBodyScroll() {
+		this.document.body.style.overflow = "hidden";
+	}
+	toggleFullScreen = () => {
+		const doc = this.document;
+		const docEl = doc.documentElement;
+		if (doc.fullscreenElement || doc.webkitFullscreenElement) {
+			(doc.exitFullscreen?.bind(doc) ?? doc.webkitExitFullscreen?.bind(doc))?.();
+			this.fullscreen.set(false);
+		} else {
+			(docEl.requestFullscreen?.bind(docEl) ?? docEl.webkitRequestFullscreen?.bind(docEl))?.();
+			this.fullscreen.set(true);
+		}
+	};
+	showHideScroll = (className) => {
+		const element = this.document.querySelector(`.${className}`);
+		this.document.body.style.overflow = element ? "hidden" : "auto";
+	};
+	toggleBodyScroll = () => {
+		const isHidden = this.document.body.style.overflow === "hidden";
+		this.document.body.style.overflow = isHidden ? "auto" : "hidden";
+	};
+	remove = (id, parentClassName, componentRef) => {
+		const element = this.document.querySelector(`.${parentClassName}`)?.querySelector(`#${id}`);
+		if (!element) return;
+		element.style.transition = `opacity ${this.animationDuration}ms ease`;
+		element.style.opacity = "0";
+		setTimeout(() => {
+			if (componentRef) {
+				this.applicationRef.detachView(componentRef.hostView);
+				componentRef.destroy();
+			}
+			element.remove();
+		}, this.animationDuration);
+	};
+	updateStyle = (className, styles) => {
+		const element = this.document.querySelector(`.${className}`);
+		if (!element || !styles) return;
+		this.applyStyles(element, styles);
+	};
+	updateStyleById = ({ id, parentClassName, styles }) => {
+		const element = (parentClassName ? this.document.querySelector(`.${parentClassName}`) : this.document)?.querySelector(`#${id}`);
+		if (!element || !styles) return;
+		this.applyStyles(element, styles);
+	};
+	positionRelativeTo = (element, boundary) => {
+		const positionClass = Array.from(element.classList).find((cls) => [
+			"top-left",
+			"top-right",
+			"bottom-left",
+			"bottom-right"
+		].includes(cls));
+		this.applyPositionFromClass(element, boundary, positionClass ?? "bottom-left");
+	};
+	createDom = (html, className, boundary) => {
+		let element = this.document.querySelector(`.${className}`);
+		if (!element) {
+			element = this.document.createElement("div");
+			element.className = className;
+			this.renderer.appendChild(this.document.body, element);
+		}
+		element.innerHTML = html;
+		if (boundary) this.positionRelativeTo(element, boundary);
+		return element;
+	};
+	observeMutations = (targetNode, config = {
+		childList: true,
+		subtree: true
+	}) => {
+		return new Observable((subscriber) => {
+			const observer = new MutationObserver((mutations) => {
+				subscriber.next(mutations);
+			});
+			observer.observe(targetNode, config);
+			return () => observer.disconnect();
+		});
+	};
+	cleanup = (parentClassName) => {
+		const parent = this.document.querySelector(`.${parentClassName}`);
+		if (parent) parent.remove();
+	};
+	createAndAppend = (config) => {
+		const { boundary, ...createConfig } = config;
+		const componentRef = this.create(createConfig);
+		if (componentRef && boundary) {
+			const wrapper = componentRef.hostView.rootNodes[0]?.parentElement;
+			if (wrapper) this.positionRelativeTo(wrapper, boundary);
+		}
+		return componentRef;
+	};
+	applyStyles(element, styles) {
+		if (!styles) return;
+		Object.entries(styles).forEach(([property, value]) => {
+			this.renderer.setStyle(element, property, value);
+		});
+	}
+	append({ className, styles, child }) {
+		const parentClass = `.${className}`;
+		let parentElement = this.document.querySelector(parentClass);
+		if (!parentElement) {
+			parentElement = this.document.createElement("div");
+			parentElement.className = className;
+			this.applyStyles(parentElement, styles);
+			this.renderer.appendChild(this.document.querySelector("body"), parentElement);
+		}
+		this.renderer.appendChild(parentElement, child);
+	}
+	applyPositionFromClass = (element, boundary, positionClass) => {
+		const isMobile = this.deviceService.isMobile();
+		const styles = { position: "absolute" };
+		if (isMobile) {
+			styles["left"] = "0";
+			styles["right"] = "0";
+			styles["bottom"] = "0";
+		} else switch (positionClass) {
+			case "top-left":
+				styles["top"] = `${boundary.top}px`;
+				styles["left"] = `${boundary.left}px`;
+				break;
+			case "top-right":
+				styles["top"] = `${boundary.top}px`;
+				styles["left"] = `${boundary.right}px`;
+				break;
+			case "bottom-right":
+				styles["top"] = `${boundary.bottom}px`;
+				styles["left"] = `${boundary.right}px`;
+				break;
+			default:
+				styles["top"] = `${boundary.bottom}px`;
+				styles["left"] = `${boundary.left}px`;
+		}
+		Object.entries(styles).forEach(([prop, val]) => {
+			this.renderer.setStyle(element, prop, val);
+		});
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DomService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DomService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DomService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var ScrollService = class ScrollService {
+	scrollTop = signal(0, ...ngDevMode ? [{ debugName: "scrollTop" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.setupWindowScroll();
+	}
+	setupWindowScroll() {
+		const onScroll = (event) => {
+			let top = 0;
+			if (event?.target && event.target !== document && event.target !== window) top = event.target.scrollTop;
+			else top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+			this.scrollTop.set(top);
+		};
+		window.addEventListener("scroll", onScroll, {
+			passive: true,
+			capture: true
+		});
+		onScroll();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ScrollService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ScrollService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ScrollService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var OverlayService = class OverlayService {
+	appRef = inject(ApplicationRef);
+	injector = inject(EnvironmentInjector);
+	overlayContainer;
+	open(component, config) {
+		if (!this.overlayContainer || !document.body.contains(this.overlayContainer)) {
+			this.overlayContainer = document.createElement("div");
+			this.overlayContainer.className = "overlay-container";
+			document.body.appendChild(this.overlayContainer);
+		}
+		const backdrop = document.createElement("div");
+		backdrop.className = config.backdropClass || "overlay-backdrop";
+		this.overlayContainer.appendChild(backdrop);
+		const wrapper = document.createElement("div");
+		wrapper.className = "overlay-wrapper";
+		this.overlayContainer.appendChild(wrapper);
+		const componentRef = createComponent(component, {
+			environmentInjector: this.injector,
+			hostElement: wrapper,
+			bindings: config.bindings || []
+		});
+		this.appRef.attachView(componentRef.hostView);
+		this.position(wrapper, config.triggerElement, config.offsetY || 4);
+		return new OverlayRef(componentRef, backdrop, wrapper, this.overlayContainer, config.triggerElement, config.offsetY || 4, config.closeOnFocusOut ?? false);
+	}
+	position(element, trigger, offsetY) {
+		const triggerRect = trigger.getBoundingClientRect();
+		const viewportWidth = window.innerWidth;
+		const viewportHeight = window.innerHeight;
+		element.style.position = "fixed";
+		element.style.zIndex = "9999";
+		element.style.visibility = "hidden";
+		element.style.display = "block";
+		const elementRect = element.getBoundingClientRect();
+		element.style.visibility = "";
+		const shouldConsiderHorizontal = elementRect.width - triggerRect.width > 150;
+		let position = "bottom";
+		let left = triggerRect.left;
+		let top = triggerRect.bottom + offsetY;
+		if (shouldConsiderHorizontal) {
+			const spaceRight = viewportWidth - triggerRect.right;
+			const spaceLeft = triggerRect.left;
+			const spaceBottom = viewportHeight - triggerRect.bottom;
+			if (spaceRight >= elementRect.width + offsetY) {
+				position = "right";
+				left = triggerRect.right + offsetY;
+				top = triggerRect.top;
+			} else if (spaceLeft >= elementRect.width + offsetY) {
+				position = "left";
+				left = triggerRect.left - elementRect.width - offsetY;
+				top = triggerRect.top;
+			} else if (spaceBottom >= elementRect.height + offsetY) {
+				position = "bottom";
+				left = Math.max(offsetY, Math.min(triggerRect.left, viewportWidth - elementRect.width - offsetY));
+				top = triggerRect.bottom + offsetY;
+			} else {
+				position = "top";
+				left = Math.max(offsetY, Math.min(triggerRect.left, viewportWidth - elementRect.width - offsetY));
+				top = triggerRect.top - elementRect.height - offsetY;
+			}
+		} else {
+			const spaceBottom = viewportHeight - triggerRect.bottom;
+			const spaceTop = triggerRect.top;
+			if (spaceBottom >= elementRect.height + offsetY) {
+				position = "bottom";
+				left = triggerRect.left;
+				top = triggerRect.bottom + offsetY;
+			} else if (spaceTop >= elementRect.height + offsetY) {
+				position = "top";
+				left = triggerRect.left;
+				top = triggerRect.top - elementRect.height - offsetY;
+			} else {
+				position = "bottom";
+				left = triggerRect.left;
+				top = triggerRect.bottom + offsetY;
+			}
+			element.style.width = `${triggerRect.width}px`;
+		}
+		element.style.left = `${left}px`;
+		element.style.top = `${top}px`;
+		element.setAttribute("data-position", position);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OverlayService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OverlayService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OverlayService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var OverlayRef = class {
+	componentRef;
+	backdrop;
+	wrapper;
+	container;
+	trigger;
+	offsetY;
+	closeOnFocusOut;
+	repositionHandler;
+	backdropClickPromise;
+	backdropClickResolve;
+	backdropClickHandler;
+	focusOutPromise;
+	focusOutResolve;
+	triggerFocusOutHandler;
+	overlayFocusOutHandler;
+	constructor(componentRef, backdrop, wrapper, container, trigger, offsetY, closeOnFocusOut) {
+		this.componentRef = componentRef;
+		this.backdrop = backdrop;
+		this.wrapper = wrapper;
+		this.container = container;
+		this.trigger = trigger;
+		this.offsetY = offsetY;
+		this.closeOnFocusOut = closeOnFocusOut;
+		this.repositionHandler = () => this.updatePosition();
+		window.addEventListener("scroll", this.repositionHandler, true);
+		window.addEventListener("resize", this.repositionHandler);
+		this.backdropClickPromise = new Promise((resolve) => {
+			this.backdropClickResolve = resolve;
+		});
+		this.backdropClickHandler = () => {
+			if (this.backdropClickResolve) this.backdropClickResolve();
+		};
+		this.backdrop.addEventListener("click", this.backdropClickHandler);
+		this.focusOutPromise = new Promise((resolve) => {
+			this.focusOutResolve = resolve;
+		});
+		if (this.closeOnFocusOut) {
+			this.triggerFocusOutHandler = (event) => {
+				this.handleFocusOut(event, "trigger");
+			};
+			this.overlayFocusOutHandler = (event) => {
+				this.handleFocusOut(event, "overlay");
+			};
+			this.trigger.addEventListener("focusout", this.triggerFocusOutHandler);
+			this.wrapper.addEventListener("focusout", this.overlayFocusOutHandler);
+		}
+	}
+	backdropClick() {
+		return this.backdropClickPromise;
+	}
+	focusOut() {
+		return this.focusOutPromise;
+	}
+	dispose() {
+		window.removeEventListener("scroll", this.repositionHandler, true);
+		window.removeEventListener("resize", this.repositionHandler);
+		if (this.backdrop && this.backdropClickHandler) this.backdrop.removeEventListener("click", this.backdropClickHandler);
+		if (this.closeOnFocusOut) {
+			if (this.trigger && this.triggerFocusOutHandler) this.trigger.removeEventListener("focusout", this.triggerFocusOutHandler);
+			if (this.wrapper && this.overlayFocusOutHandler) this.wrapper.removeEventListener("focusout", this.overlayFocusOutHandler);
+		}
+		if (this.componentRef) this.componentRef.destroy();
+		if (this.backdrop && this.backdrop.parentNode) this.backdrop.parentNode.removeChild(this.backdrop);
+		if (this.wrapper && this.wrapper.parentNode) this.wrapper.parentNode.removeChild(this.wrapper);
+		if (this.container && this.container.children.length === 0) {
+			if (this.container.parentNode) this.container.parentNode.removeChild(this.container);
+		}
+	}
+	handleFocusOut(event, _source) {
+		const relatedTarget = event.relatedTarget;
+		if (!relatedTarget) {
+			setTimeout(() => {
+				const activeElement = document.activeElement;
+				if (!activeElement || activeElement === document.body) return;
+				const focusInTrigger = this.trigger?.contains(activeElement);
+				const focusInOverlay = this.wrapper?.contains(activeElement);
+				if (!focusInTrigger && !focusInOverlay) {
+					if (this.focusOutResolve) this.focusOutResolve();
+				}
+			}, 0);
+			return;
+		}
+		const focusStaysInTrigger = this.trigger.contains(relatedTarget);
+		const focusStaysInOverlay = this.wrapper.contains(relatedTarget);
+		if (!focusStaysInTrigger && !focusStaysInOverlay) {
+			if (this.focusOutResolve) this.focusOutResolve();
+		}
+	}
+	updatePosition() {
+		const triggerRect = this.trigger.getBoundingClientRect();
+		const viewportWidth = window.innerWidth;
+		const viewportHeight = window.innerHeight;
+		const elementRect = this.wrapper.getBoundingClientRect();
+		const shouldConsiderHorizontal = elementRect.width - triggerRect.width > 150;
+		let left = triggerRect.left;
+		let top = triggerRect.bottom + this.offsetY;
+		let position = "bottom";
+		if (shouldConsiderHorizontal) {
+			const spaceRight = viewportWidth - triggerRect.right;
+			const spaceLeft = triggerRect.left;
+			const spaceBottom = viewportHeight - triggerRect.bottom;
+			if (spaceRight >= elementRect.width + this.offsetY) {
+				position = "right";
+				left = triggerRect.right + this.offsetY;
+				top = triggerRect.top;
+			} else if (spaceLeft >= elementRect.width + this.offsetY) {
+				position = "left";
+				left = triggerRect.left - elementRect.width - this.offsetY;
+				top = triggerRect.top;
+			} else if (spaceBottom >= elementRect.height + this.offsetY) {
+				position = "bottom";
+				left = Math.max(this.offsetY, Math.min(triggerRect.left, viewportWidth - elementRect.width - this.offsetY));
+				top = triggerRect.bottom + this.offsetY;
+			} else {
+				position = "top";
+				left = Math.max(this.offsetY, Math.min(triggerRect.left, viewportWidth - elementRect.width - this.offsetY));
+				top = triggerRect.top - elementRect.height - this.offsetY;
+			}
+			this.wrapper.style.width = "";
+		} else {
+			const spaceBottom = viewportHeight - triggerRect.bottom;
+			const spaceTop = triggerRect.top;
+			if (spaceBottom >= elementRect.height + this.offsetY) {
+				position = "bottom";
+				left = triggerRect.left;
+				top = triggerRect.bottom + this.offsetY;
+			} else if (spaceTop >= elementRect.height + this.offsetY) {
+				position = "top";
+				left = triggerRect.left;
+				top = triggerRect.top - elementRect.height - this.offsetY;
+			} else {
+				position = "bottom";
+				left = triggerRect.left;
+				top = triggerRect.bottom + this.offsetY;
+			}
+			this.wrapper.style.width = `${triggerRect.width}px`;
+		}
+		this.wrapper.style.left = `${left}px`;
+		this.wrapper.style.top = `${top}px`;
+		this.wrapper.setAttribute("data-position", position);
+	}
+};
+var ThemeService = class ThemeService {
+	themeStore = inject(ThemeStore);
+	color = computed(() => this.themeStore.color(), ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	theme = computed(() => this.themeStore.theme(), ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ThemeService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ThemeService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ThemeService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var Direction;
+(function(Direction) {
+	Direction["TOP"] = "top";
+	Direction["BOTTOM"] = "bottom";
+	Direction["LEFT"] = "left";
+	Direction["RIGHT"] = "right";
+	Direction["CENTER"] = "center";
+	Direction["UP_DOWN"] = "up-down";
+})(Direction || (Direction = {}));
+function isOutOfViewport(boundary) {
+	const margin = 8;
+	return boundary.top + boundary.height + margin < 0 || boundary.left + boundary.width + margin < 0 || boundary.bottom - margin > window.innerHeight || boundary.right - margin > window.innerWidth;
+}
+function calculatePosition(boundary, direction, width = "250px", height = "300px", align) {
+	const margin = 8;
+	const viewport = {
+		width: window.innerWidth,
+		height: window.innerHeight
+	};
+	const contentWidth = parseInt(width) || 250;
+	const contentHeight = parseInt(height) || 0;
+	const space = {
+		top: boundary.top,
+		bottom: viewport.height - boundary.bottom,
+		left: boundary.left,
+		right: viewport.width - boundary.right
+	};
+	const centerX = boundary.left + boundary.width / 2;
+	const centerY = boundary.top + boundary.height / 2;
+	direction = detectBestDirection(space, {
+		width: contentWidth,
+		height: contentHeight
+	}, direction);
+	const horizontalLeft = align === "right" ? calculateRightAlignedPosition(boundary.right, contentWidth, viewport.width) : align === "left" ? calculateLeftAlignedPosition(boundary.left, contentWidth, viewport.width) : calculateHorizontalPosition(centerX, contentWidth, viewport.width);
+	return {
+		[Direction.TOP]: {
+			top: "unset",
+			bottom: `${viewport.height - boundary.top + margin}px`,
+			"max-height": `${Math.max(space.top - 16, 0)}px`,
+			left: horizontalLeft
+		},
+		[Direction.BOTTOM]: {
+			top: `${boundary.bottom + margin}px`,
+			bottom: "unset",
+			"max-height": `${Math.max(space.bottom - 16, 0)}px`,
+			left: horizontalLeft
+		},
+		[Direction.LEFT]: {
+			right: `${viewport.width - boundary.left + margin}px`,
+			top: calculateVerticalPosition(centerY, contentHeight, viewport.height)
+		},
+		[Direction.RIGHT]: {
+			left: `${boundary.right + margin}px`,
+			top: calculateVerticalPosition(centerY, contentHeight, viewport.height)
+		},
+		[Direction.CENTER]: {
+			top: calculateVerticalPosition(centerY, contentHeight, viewport.height),
+			left: horizontalLeft
+		},
+		[Direction.UP_DOWN]: {
+			top: calculateVerticalPosition(centerY, contentHeight, viewport.height),
+			left: `${boundary.left}px`
+		}
+	}[direction] || {
+		top: calculateVerticalPosition(centerY, contentHeight, viewport.height),
+		left: horizontalLeft
+	};
+}
+function detectBestDirection(space, content, preferredDirection) {
+	const margin = 8;
+	const fits = (available, needed) => available >= needed + margin;
+	if (preferredDirection && preferredDirection !== Direction.UP_DOWN) {
+		if ({
+			[Direction.BOTTOM]: fits(space.bottom, content.height),
+			[Direction.TOP]: fits(space.top, content.height),
+			[Direction.LEFT]: fits(space.left, content.width),
+			[Direction.RIGHT]: fits(space.right, content.width)
+		}[preferredDirection]) return preferredDirection;
+	}
+	if (content.height <= 0) return Direction.BOTTOM;
+	if (fits(space.bottom, content.height)) return Direction.BOTTOM;
+	if (fits(space.top, content.height)) return Direction.TOP;
+	if (preferredDirection === Direction.UP_DOWN) return Direction.BOTTOM;
+	if (fits(space.right, content.width)) return Direction.RIGHT;
+	if (fits(space.left, content.width)) return Direction.LEFT;
+	return Direction.BOTTOM;
+}
+function calculateHorizontalPosition(center, width, viewportWidth) {
+	return calculatePosition1D(center, width, viewportWidth);
+}
+function calculateRightAlignedPosition(rightEdge, width, viewportWidth) {
+	const start = rightEdge - width;
+	if (start < 0) return "0px";
+	if (start + width > viewportWidth) return `${viewportWidth - width}px`;
+	return `${start}px`;
+}
+function calculateLeftAlignedPosition(leftEdge, width, viewportWidth) {
+	if (leftEdge < 0) return "0px";
+	if (leftEdge + width > viewportWidth) return `${viewportWidth - width}px`;
+	return `${leftEdge}px`;
+}
+function calculateVerticalPosition(center, height, viewportHeight) {
+	return calculatePosition1D(center, height, viewportHeight);
+}
+function calculatePosition1D(center, size, viewportSize) {
+	const start = center - size / 2;
+	if (start < 0) return "0px";
+	if (start + size > viewportSize) return `${viewportSize - size}px`;
+	return `${start}px`;
+}
+var SelectorDirective = class SelectorDirective {
+	static openSelector = {};
+	mSelector = input(void 0, ...ngDevMode ? [{ debugName: "mSelector" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	opened = output();
+	closed = output();
+	deviceService = inject(DeviceService);
+	domService = inject(DomService);
+	modalStore = inject(MODAL_STORE_REF, { optional: true });
+	element = inject(ElementRef);
+	doc = inject(DOCUMENT);
+	componentRef;
+	modalId = signal(void 0, ...ngDevMode ? [{ debugName: "modalId" }] : /* istanbul ignore next */ []);
+	triggerFocusOutHandler;
+	boxFocusOutHandler;
+	outsideMouseDownHandler;
+	isCompact = () => this.deviceService.isMobile() || this.deviceService.isTablet() || this.deviceService.isTouch();
+	isOpen = linkedSignal({
+		...ngDevMode ? { debugName: "isOpen" } : /* istanbul ignore next */ {},
+		source: () => ({
+			triggerMap: this.modalStore?.modalTriggerMap() ?? {},
+			id: this.modalId(),
+			isCompact: this.deviceService.isMobile() || this.deviceService.isTablet() || this.deviceService.isTouch()
+		}),
+		computation: ({ triggerMap, id, isCompact }, previous) => {
+			if (isCompact && id && !triggerMap[id]) {
+				this.closed.emit();
+				return false;
+			}
+			return previous?.value ?? false;
+		}
+	});
+	onClick(_e) {
+		if (this.disabled()) return;
+		if (this.isOpen()) {
+			this.close();
+			return;
+		}
+		this.open();
+	}
+	onArrowDown(event) {
+		if (this.disabled() || this.isOpen()) return;
+		event.preventDefault();
+		this.open();
+	}
+	onScroll(_event) {
+		this.handleViewportChange(_event);
+	}
+	ngOnDestroy() {
+		this.teardownFocusTracking();
+		this.close();
+		const selector = this.mSelector();
+		if (!selector) return;
+		if (SelectorDirective.openSelector[selector.base] === this) delete SelectorDirective.openSelector[selector.base];
+	}
+	close() {
+		if (!this.isOpen()) return;
+		this.teardownFocusTracking();
+		const selector = this.mSelector();
+		if (!selector) return;
+		const { base } = selector;
+		if (this.isCompact()) this.modalStore?.close(this.modalId());
+		else this.domService.destroy({
+			componentRef: this.componentRef,
+			parentClassName: "m-selector-box",
+			className: base
+		});
+		if (SelectorDirective.openSelector[base] === this) delete SelectorDirective.openSelector[base];
+		this.isOpen.set(false);
+		this.closed.emit();
+	}
+	open() {
+		if (this.isOpen()) return;
+		const base = this.mSelector()?.base;
+		if (!base) return;
+		if (SelectorDirective.openSelector[base] && SelectorDirective.openSelector[base] !== this) SelectorDirective.openSelector[base].close();
+		SelectorDirective.openSelector[base] = this;
+		if (this.isCompact()) this.openInModal();
+		else this.openInBox();
+		this.isOpen.set(true);
+		this.opened.emit();
+	}
+	openInBox = () => {
+		const selector = this.mSelector();
+		if (!selector) return;
+		const { component, base, bindings, dir, align, width, height } = selector;
+		const boundary = this.element.nativeElement.getBoundingClientRect();
+		const styles = { ...calculatePosition(boundary, dir, width, height, align) };
+		this.componentRef = this.domService.create({
+			component,
+			styles,
+			parentClassName: "m-selector-box",
+			className: base,
+			bindings
+		});
+		if (selector.matchTriggerWidth) this.alignToTrigger();
+		else if (!parseInt(height ?? "")) requestAnimationFrame(() => this.reflowAfterRender(boundary, selector));
+		requestAnimationFrame(() => this.setupFocusTracking());
+	};
+	reflowAfterRender(boundary, selector) {
+		const boxElement = this.getBoxElement();
+		if (!boxElement) return;
+		const actualHeight = boxElement.scrollHeight;
+		if (!actualHeight) return;
+		const { base, dir, align, width } = selector;
+		const style = calculatePosition(boundary, dir, width, `${actualHeight}px`, align);
+		this.domService.updateStyle(base, { ...style });
+	}
+	openInModal = () => {
+		const selector = this.mSelector();
+		if (!selector) return;
+		const { component, bindings } = selector;
+		this.modalId.set(this.modalStore?.open({
+			component,
+			bindings,
+			name: "bottom",
+			one: true,
+			config: { align: "bottom" }
+		}) ?? void 0);
+	};
+	getBoxElement() {
+		const base = this.mSelector()?.base;
+		if (!base) return null;
+		return this.doc.querySelector(`.m-selector-box .${base}`);
+	}
+	setupFocusTracking() {
+		this.triggerFocusOutHandler = (event) => this.handleFocusOut(event);
+		this.element.nativeElement.addEventListener("focusout", this.triggerFocusOutHandler);
+		const boxElement = this.getBoxElement();
+		if (boxElement) {
+			this.boxFocusOutHandler = (event) => this.handleFocusOut(event);
+			boxElement.addEventListener("focusout", this.boxFocusOutHandler);
+		}
+		this.outsideMouseDownHandler = (event) => this.handleOutsideMouseDown(event);
+		this.doc.addEventListener("mousedown", this.outsideMouseDownHandler);
+	}
+	teardownFocusTracking() {
+		if (this.triggerFocusOutHandler) {
+			this.element.nativeElement.removeEventListener("focusout", this.triggerFocusOutHandler);
+			this.triggerFocusOutHandler = void 0;
+		}
+		if (this.boxFocusOutHandler) {
+			this.getBoxElement()?.removeEventListener("focusout", this.boxFocusOutHandler);
+			this.boxFocusOutHandler = void 0;
+		}
+		if (this.outsideMouseDownHandler) {
+			this.doc.removeEventListener("mousedown", this.outsideMouseDownHandler);
+			this.outsideMouseDownHandler = void 0;
+		}
+	}
+	handleFocusOut(event) {
+		if (!this.isOpen()) return;
+		const relatedTarget = event.relatedTarget;
+		const triggerElement = this.element.nativeElement;
+		const boxElement = this.getBoxElement();
+		const selectorContainer = this.doc.querySelector(".m-selector-box");
+		if (!relatedTarget) {
+			setTimeout(() => {
+				if (!this.isOpen()) return;
+				const activeElement = this.doc.activeElement;
+				if (!activeElement || activeElement === this.doc.body) return;
+				const inTrigger = triggerElement.contains(activeElement);
+				const inBox = boxElement?.contains(activeElement) ?? false;
+				const inSelectorContainer = selectorContainer?.contains(activeElement) ?? false;
+				if (!inTrigger && !inBox && !inSelectorContainer) this.close();
+			}, 0);
+			return;
+		}
+		const inTrigger = triggerElement.contains(relatedTarget);
+		const inBox = boxElement?.contains(relatedTarget) ?? false;
+		const inSelectorContainer = selectorContainer?.contains(relatedTarget) ?? false;
+		if (!inTrigger && !inBox && !inSelectorContainer) this.close();
+	}
+	handleOutsideMouseDown(event) {
+		if (!this.isOpen()) return;
+		const target = event.target;
+		const triggerElement = this.element.nativeElement;
+		const boxElement = this.getBoxElement();
+		const inTrigger = triggerElement.contains(target);
+		const inBox = boxElement?.contains(target) ?? false;
+		if (inTrigger || inBox) return;
+		if (this.doc.querySelector(".m-selector-box")?.contains(target)) return;
+		this.close();
+	}
+	alignToTrigger() {
+		const boxElement = this.getBoxElement();
+		if (!boxElement) return;
+		const boundary = this.element.nativeElement.getBoundingClientRect();
+		const margin = 8;
+		const viewport = {
+			width: window.innerWidth,
+			height: window.innerHeight
+		};
+		const selector = this.mSelector();
+		const width = selector?.width || "250px";
+		const height = selector?.height || "300px";
+		const contentWidth = parseInt(width) || 250;
+		const contentHeight = parseInt(height) || 0;
+		const direction = detectBestDirection({
+			top: boundary.top,
+			bottom: viewport.height - boundary.bottom,
+			left: boundary.left,
+			right: viewport.width - boundary.right
+		}, {
+			width: contentWidth,
+			height: contentHeight
+		}, selector?.dir);
+		boxElement.style.width = `${boundary.width}px`;
+		boxElement.style.left = `${boundary.left}px`;
+		if (direction === Direction.TOP) {
+			boxElement.style.top = "unset";
+			boxElement.style.bottom = `${viewport.height - boundary.top + margin}px`;
+			boxElement.classList.add("open-upward");
+		} else {
+			boxElement.style.top = `${boundary.bottom + margin}px`;
+			boxElement.style.bottom = "unset";
+			boxElement.classList.remove("open-upward");
+		}
+	}
+	handleViewportChange(_event) {
+		const selector = this.mSelector();
+		if (!selector) return;
+		if (!this.isOpen() || this.isCompact()) return;
+		const boundary = this.element.nativeElement.getBoundingClientRect();
+		if (isOutOfViewport(boundary)) {
+			this.close();
+			return;
+		}
+		const { base, dir, align, width, height } = selector;
+		const style = calculatePosition(boundary, dir, width, height, align);
+		this.domService.updateStyle(base, { ...style });
+		if (selector.matchTriggerWidth) this.alignToTrigger();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SelectorDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: SelectorDirective,
+		isStandalone: true,
+		selector: "[mSelector]",
+		inputs: {
+			mSelector: {
+				classPropertyName: "mSelector",
+				publicName: "mSelector",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			opened: "opened",
+			closed: "closed"
+		},
+		host: {
+			listeners: {
+				"click": "onClick($event)",
+				"keydown.enter": "onClick($event)",
+				"keydown.space": "onClick($event)",
+				"keydown.tab": "onClick($event)",
+				"focus": "onClick($event)",
+				"keydown.arrowdown": "onArrowDown($event)",
+				"window:scroll": "onScroll($event)",
+				"window:resize": "onScroll($event)"
+			},
+			properties: { "class.active": "isOpen()" }
+		},
+		exportAs: ["mSelector"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SelectorDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[mSelector]",
+			exportAs: "mSelector",
+			host: { "[class.active]": "isOpen()" }
+		}]
+	}],
+	propDecorators: {
+		mSelector: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mSelector",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		opened: [{
+			type: i0.Output,
+			args: ["opened"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}],
+		onClick: [
+			{
+				type: HostListener,
+				args: ["click", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.enter", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.space", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.tab", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["focus", ["$event"]]
+			}
+		],
+		onArrowDown: [{
+			type: HostListener,
+			args: ["keydown.arrowdown", ["$event"]]
+		}],
+		onScroll: [{
+			type: HostListener,
+			args: ["window:scroll", ["$event"]]
+		}, {
+			type: HostListener,
+			args: ["window:resize", ["$event"]]
+		}]
+	}
+});
+export { OverlayService as a, DeviceService as c, OverlayRef as i, Direction as n, ScrollService as o, ThemeService as r, DomService as s, SelectorDirective as t };
+
+//# sourceMappingURL=magmonium-one-selector-DDnBYNLr.mjs.map