@magmonium/one 0.4.30 → 0.4.31

package/fesm2022/magmonium-one-directives-DOBENX_K.mjs

@@ -0,0 +1,1285 @@
+import { B as IS_DESIGN_MODE, a as resolveSpacing } from "./magmonium-one-size-converter-B-UubQQ0.mjs";
+import "./magmonium-one-selector-DDnBYNLr.mjs";
+import "./magmonium-one-m-ref-Dt0DCm8X.mjs";
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, HostListener, InjectionToken, Input, Renderer2, afterRenderEffect, booleanAttribute, computed, effect, inject, input, model, output, signal } from "@angular/core";
+function isWithinBoundary(value, draggable, axis) {
+	const maxVal = draggable.max?.[axis] ?? (axis === "x" ? window.innerWidth : window.innerHeight);
+	const minVal = draggable.min?.[axis] ?? 0;
+	return value <= maxVal && value >= minVal;
+}
+function getNewPosition(draggable, event, delta) {
+	let { x, y } = draggable.position;
+	const touch = "touches" in event ? event.touches[0] || event.changedTouches[0] : null;
+	const screenX = touch ? touch.screenX : event.screenX;
+	const screenY = touch ? touch.screenY : event.screenY;
+	if (draggable.direction !== "y") {
+		const dx = screenX - (delta.x ?? 0);
+		if (isWithinBoundary(dx, draggable, "x")) x = dx;
+	}
+	if (draggable.direction !== "x") {
+		const dy = screenY - (delta.y ?? 0);
+		if (isWithinBoundary(dy, draggable, "y")) y = dy;
+	}
+	return {
+		x,
+		y
+	};
+}
+function getCursor({ direction }) {
+	switch (direction) {
+		case "x": return "ew-resize";
+		case "y": return "ns-resize";
+		default: return "move";
+	}
+}
+const INTERACTIVE_SELECTOR = "button, a, input, textarea, select, [contenteditable=\"true\"]";
+const shouldIgnorePointer = (target) => target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable || !!target.closest(INTERACTIVE_SELECTOR);
+var DraggableDirective = class DraggableDirective {
+	mDraggable = model.required(...ngDevMode ? [{ debugName: "mDraggable" }] : /* istanbul ignore next */ []);
+	handleSelector = input(...ngDevMode ? [void 0, { debugName: "handleSelector" }] : /* istanbul ignore next */ []);
+	min = input(void 0, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(void 0, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	dragStart = output();
+	dragEnd = output();
+	cursor = computed(() => getCursor(this.mDraggable()), ...ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []);
+	state = {
+		dragging: false,
+		delta: {
+			x: 0,
+			y: 0
+		}
+	};
+	set pos(position) {
+		this.mDraggable.update((config) => ({
+			...config,
+			position
+		}));
+	}
+	bounded = (config) => ({
+		...config,
+		min: this.min() ?? config.min,
+		max: this.max() ?? config.max
+	});
+	handleMouseDown(event) {
+		const target = event.target;
+		if (this.mDraggable()?.direction === "none" || shouldIgnorePointer(target)) return;
+		const selector = this.handleSelector();
+		if (selector && !target.closest(selector)) return;
+		event.stopPropagation();
+		event.preventDefault();
+		this.state.dragging = true;
+		this.dragStart.emit();
+		const { screenX, screenY } = event;
+		const { x, y } = this.mDraggable()?.position ?? {};
+		this.state.delta.x = screenX - (x ?? 0);
+		this.state.delta.y = screenY - (y ?? 0);
+	}
+	handleMouseMove(event) {
+		if (!this.state.dragging) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.mDraggable.update((config) => ({
+			...config,
+			position: getNewPosition(this.bounded(config), event, this.state.delta)
+		}));
+	}
+	handleMouseUp(event) {
+		if (!this.state.dragging) return;
+		event.stopPropagation();
+		event.preventDefault();
+		this.state.dragging = false;
+		this.dragEnd.emit();
+	}
+	handleTouchStart(event) {
+		const target = event.target;
+		if (this.mDraggable()?.direction === "none" || shouldIgnorePointer(target)) return;
+		const selector = this.handleSelector();
+		if (selector && !target.closest(selector)) return;
+		event.stopPropagation();
+		this.state.dragging = true;
+		this.dragStart.emit();
+		const { screenX, screenY } = event.touches[0];
+		const { x, y } = this.mDraggable()?.position ?? {};
+		this.state.delta.x = screenX - (x ?? 0);
+		this.state.delta.y = screenY - (y ?? 0);
+	}
+	handleTouchMove(event) {
+		if (!this.state.dragging) return;
+		if (event.cancelable) event.preventDefault();
+		event.stopPropagation();
+		this.mDraggable.update((config) => ({
+			...config,
+			position: getNewPosition(this.bounded(config), event, this.state.delta)
+		}));
+	}
+	handleTouchEnd(event) {
+		if (!this.state.dragging) return;
+		event.stopPropagation();
+		event.preventDefault();
+		this.state.dragging = false;
+		this.dragEnd.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DraggableDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: DraggableDirective,
+		isStandalone: true,
+		selector: "[mDraggable]",
+		inputs: {
+			mDraggable: {
+				classPropertyName: "mDraggable",
+				publicName: "mDraggable",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			handleSelector: {
+				classPropertyName: "handleSelector",
+				publicName: "handleSelector",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pos: {
+				classPropertyName: "pos",
+				publicName: "pos",
+				isSignal: false,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			mDraggable: "mDraggableChange",
+			dragStart: "dragStart",
+			dragEnd: "dragEnd"
+		},
+		host: {
+			listeners: {
+				"mousedown": "handleMouseDown($event)",
+				"window:mousemove": "handleMouseMove($event)",
+				"window:mouseup": "handleMouseUp($event)",
+				"touchstart": "handleTouchStart($event)",
+				"window:touchmove": "handleTouchMove($event)",
+				"window:touchend": "handleTouchEnd($event)"
+			},
+			properties: {
+				"class.draggable": "mDraggable()?.direction !== 'none'",
+				"class.dragging": "this.state.dragging",
+				"style.position": "mDraggable()?.direction !== 'none' ? (mDraggable()?.positionType ?? 'absolute') : null",
+				"style.top.px": "mDraggable()?.direction !== 'none' && mDraggable()?.direction !== 'x' ? mDraggable()?.position?.y : null",
+				"style.left.px": "mDraggable()?.direction !== 'none' && mDraggable()?.direction !== 'y' ? mDraggable()?.position?.x : null",
+				"style.cursor": "mDraggable()?.direction !== 'none' ? cursor() : null"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DraggableDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[mDraggable]",
+			host: {
+				"[class.draggable]": "mDraggable()?.direction !== 'none'",
+				"[class.dragging]": "this.state.dragging",
+				"[style.position]": "mDraggable()?.direction !== 'none' ? (mDraggable()?.positionType ?? 'absolute') : null",
+				"[style.top.px]": "mDraggable()?.direction !== 'none' && mDraggable()?.direction !== 'x' ? mDraggable()?.position?.y : null",
+				"[style.left.px]": "mDraggable()?.direction !== 'none' && mDraggable()?.direction !== 'y' ? mDraggable()?.position?.x : null",
+				"[style.cursor]": "mDraggable()?.direction !== 'none' ? cursor() : null"
+			}
+		}]
+	}],
+	propDecorators: {
+		mDraggable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mDraggable",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["mDraggableChange"]
+		}],
+		handleSelector: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "handleSelector",
+				required: false
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		dragStart: [{
+			type: i0.Output,
+			args: ["dragStart"]
+		}],
+		dragEnd: [{
+			type: i0.Output,
+			args: ["dragEnd"]
+		}],
+		pos: [{ type: Input }],
+		handleMouseDown: [{
+			type: HostListener,
+			args: ["mousedown", ["$event"]]
+		}],
+		handleMouseMove: [{
+			type: HostListener,
+			args: ["window:mousemove", ["$event"]]
+		}],
+		handleMouseUp: [{
+			type: HostListener,
+			args: ["window:mouseup", ["$event"]]
+		}],
+		handleTouchStart: [{
+			type: HostListener,
+			args: ["touchstart", ["$event"]]
+		}],
+		handleTouchMove: [{
+			type: HostListener,
+			args: ["window:touchmove", ["$event"]]
+		}],
+		handleTouchEnd: [{
+			type: HostListener,
+			args: ["window:touchend", ["$event"]]
+		}]
+	}
+});
+var DragListDirective = class DragListDirective {
+	removeOnDragOut = input(false, {
+		...ngDevMode ? { debugName: "removeOnDragOut" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	reordered = output();
+	removed = output();
+	draggedIndex = signal(null, ...ngDevMode ? [{ debugName: "draggedIndex" }] : /* istanbul ignore next */ []);
+	dragOverIndex = signal(null, ...ngDevMode ? [{ debugName: "dragOverIndex" }] : /* istanbul ignore next */ []);
+	#elementRef = inject(ElementRef);
+	#scrollAnimationFrameId = null;
+	#dragPointerX = 0;
+	#dragPointerY = 0;
+	#scrollContainers = [];
+	startDrag = (index, clientX, clientY) => {
+		this.draggedIndex.set(index);
+		this.#dragPointerX = clientX;
+		this.#dragPointerY = clientY;
+		this.#startScrollLoop();
+	};
+	trackPointer = (clientX, clientY) => {
+		if (clientX !== 0 || clientY !== 0) {
+			this.#dragPointerX = clientX;
+			this.#dragPointerY = clientY;
+		}
+	};
+	endDrag = () => {
+		this.draggedIndex.set(null);
+		this.dragOverIndex.set(null);
+		this.#stopScrollLoop();
+	};
+	dragEnded = (event) => {
+		const from = this.draggedIndex();
+		if (from !== null && this.removeOnDragOut() && this.#isPointerOutside(event)) {
+			this.endDrag();
+			this.removed.emit(from);
+			return;
+		}
+		this.endDrag();
+	};
+	#isPointerOutside = (event) => {
+		const x = event.clientX || this.#dragPointerX;
+		const y = event.clientY || this.#dragPointerY;
+		const rect = this.#elementRef.nativeElement.getBoundingClientRect();
+		return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
+	};
+	drop = (index) => {
+		const from = this.draggedIndex();
+		this.endDrag();
+		if (from !== null && from !== index) this.reordered.emit({
+			from,
+			to: index
+		});
+	};
+	onContainerDragOver = (event) => {
+		event.preventDefault();
+		this.trackPointer(event.clientX, event.clientY);
+	};
+	#getScrollContainers = () => {
+		const list = [];
+		let el = this.#elementRef.nativeElement;
+		while (el && el !== document.body) {
+			const style = window.getComputedStyle(el);
+			const overflowY = style.overflowY || style.overflow;
+			if ((overflowY === "auto" || overflowY === "scroll" || overflowY === "hidden") && el.scrollHeight > el.clientHeight) list.push(el);
+			el = el.parentElement;
+		}
+		list.push(document.documentElement);
+		return list;
+	};
+	#startScrollLoop = () => {
+		this.#stopScrollLoop();
+		this.#scrollContainers = this.#getScrollContainers();
+		window.addEventListener("dragover", this.#onGlobalDragOver, true);
+		window.addEventListener("drag", this.#onGlobalDrag, true);
+		const loop = () => {
+			if (this.draggedIndex() === null) {
+				this.#stopScrollLoop();
+				return;
+			}
+			for (const container of this.#scrollContainers) {
+				const isRoot = container === document.documentElement;
+				const rect = container.getBoundingClientRect();
+				const topThreshold = isRoot ? 150 : rect.top + 150;
+				const bottomThreshold = isRoot ? window.innerHeight - 150 : rect.bottom - 150;
+				if (this.#dragPointerY < topThreshold) {
+					const diff = topThreshold - this.#dragPointerY;
+					const speed = Math.min(25, Math.max(2, Math.floor(diff / 4)));
+					if (isRoot) window.scrollBy(0, -speed);
+					else container.scrollTop -= speed;
+				} else if (this.#dragPointerY > bottomThreshold) {
+					const diff = this.#dragPointerY - bottomThreshold;
+					const speed = Math.min(25, Math.max(2, Math.floor(diff / 4)));
+					if (isRoot) window.scrollBy(0, speed);
+					else container.scrollTop += speed;
+				}
+			}
+			this.#scrollAnimationFrameId = requestAnimationFrame(loop);
+		};
+		this.#scrollAnimationFrameId = requestAnimationFrame(loop);
+	};
+	#stopScrollLoop = () => {
+		window.removeEventListener("dragover", this.#onGlobalDragOver, true);
+		window.removeEventListener("drag", this.#onGlobalDrag, true);
+		if (this.#scrollAnimationFrameId !== null) {
+			cancelAnimationFrame(this.#scrollAnimationFrameId);
+			this.#scrollAnimationFrameId = null;
+		}
+		this.#scrollContainers = [];
+	};
+	#onGlobalDragOver = (event) => {
+		event.preventDefault();
+		this.trackPointer(event.clientX, event.clientY);
+	};
+	#onGlobalDrag = (event) => {
+		this.trackPointer(event.clientX, event.clientY);
+	};
+	ngOnDestroy() {
+		this.#stopScrollLoop();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DragListDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: DragListDirective,
+		isStandalone: true,
+		selector: "[mDragList]",
+		inputs: { removeOnDragOut: {
+			classPropertyName: "removeOnDragOut",
+			publicName: "removeOnDragOut",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: {
+			reordered: "reordered",
+			removed: "removed"
+		},
+		host: { listeners: { "dragover": "onContainerDragOver($event)" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DragListDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[mDragList]",
+			host: { "(dragover)": "onContainerDragOver($event)" }
+		}]
+	}],
+	propDecorators: {
+		removeOnDragOut: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeOnDragOut",
+				required: false
+			}]
+		}],
+		reordered: [{
+			type: i0.Output,
+			args: ["reordered"]
+		}],
+		removed: [{
+			type: i0.Output,
+			args: ["removed"]
+		}]
+	}
+});
+var DragListItemDirective = class DragListItemDirective {
+	mDragListItem = input.required(...ngDevMode ? [{ debugName: "mDragListItem" }] : /* istanbul ignore next */ []);
+	#list = inject(DragListDirective);
+	#elementRef = inject(ElementRef);
+	isDragging = computed(() => this.#list.draggedIndex() === this.mDragListItem(), ...ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []);
+	isDragOver = computed(() => this.#list.dragOverIndex() === this.mDragListItem(), ...ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []);
+	onDragStart = (event) => {
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = "move";
+			event.dataTransfer.setData("text/plain", this.mDragListItem().toString());
+			this.#setDragGhost(event);
+		}
+		this.#list.startDrag(this.mDragListItem(), event.clientX, event.clientY);
+	};
+	#setDragGhost = (event) => {
+		const host = this.#elementRef.nativeElement;
+		const rect = host.getBoundingClientRect();
+		const padding = 24;
+		const ghost = host.cloneNode(true);
+		ghost.style.width = `${rect.width}px`;
+		ghost.style.margin = "0";
+		ghost.style.transform = "rotate(2.5deg) scale(1.04)";
+		ghost.style.boxShadow = "0 16px 40px rgba(0, 0, 0, 0.4)";
+		ghost.style.opacity = "0.95";
+		const wrapper = document.createElement("div");
+		wrapper.style.position = "fixed";
+		wrapper.style.top = "-10000px";
+		wrapper.style.left = "-10000px";
+		wrapper.style.padding = `${padding}px`;
+		wrapper.style.pointerEvents = "none";
+		wrapper.appendChild(ghost);
+		document.body.appendChild(wrapper);
+		event.dataTransfer?.setDragImage(wrapper, event.clientX - rect.left + padding, event.clientY - rect.top + padding);
+		setTimeout(() => wrapper.remove(), 0);
+	};
+	onDrag = (event) => {
+		this.#list.trackPointer(event.clientX, event.clientY);
+	};
+	onDragOver = (event) => {
+		if (this.#list.draggedIndex() === this.mDragListItem()) return;
+		event.preventDefault();
+		this.#list.trackPointer(event.clientX, event.clientY);
+	};
+	onDragEnter = () => {
+		if (this.#list.draggedIndex() === this.mDragListItem()) return;
+		this.#list.dragOverIndex.set(this.mDragListItem());
+	};
+	onDragLeave = () => {
+		if (this.#list.dragOverIndex() === this.mDragListItem()) this.#list.dragOverIndex.set(null);
+	};
+	onDragEnd = (event) => {
+		this.#list.dragEnded(event);
+	};
+	onDrop = (event) => {
+		event.preventDefault();
+		this.#list.drop(this.mDragListItem());
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: DragListItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: DragListItemDirective,
+		isStandalone: true,
+		selector: "[mDragListItem]",
+		inputs: { mDragListItem: {
+			classPropertyName: "mDragListItem",
+			publicName: "mDragListItem",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "draggable": "true" },
+			listeners: {
+				"dragstart": "onDragStart($event)",
+				"dragover": "onDragOver($event)",
+				"dragenter": "onDragEnter()",
+				"dragleave": "onDragLeave()",
+				"dragend": "onDragEnd($event)",
+				"drop": "onDrop($event)",
+				"drag": "onDrag($event)"
+			},
+			properties: {
+				"class.is-dragging": "isDragging()",
+				"class.is-drag-over": "isDragOver()"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: DragListItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[mDragListItem]",
+			host: {
+				draggable: "true",
+				"[class.is-dragging]": "isDragging()",
+				"[class.is-drag-over]": "isDragOver()",
+				"(dragstart)": "onDragStart($event)",
+				"(dragover)": "onDragOver($event)",
+				"(dragenter)": "onDragEnter()",
+				"(dragleave)": "onDragLeave()",
+				"(dragend)": "onDragEnd($event)",
+				"(drop)": "onDrop($event)",
+				"(drag)": "onDrag($event)"
+			}
+		}]
+	}],
+	propDecorators: { mDragListItem: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "mDragListItem",
+			required: true
+		}]
+	}] }
+});
+var AutosizeDirective = class AutosizeDirective {
+	_el = inject(ElementRef);
+	#isDesignMode = !!inject(IS_DESIGN_MODE, { optional: true });
+	#measuredValue = null;
+	#measuredWidth = -1;
+	onInput() {
+		if (!this.#isDesignMode) this.#adjust();
+	}
+	ngAfterViewChecked() {
+		if (this.#isDesignMode) return;
+		if (this._el.nativeElement.offsetParent != null) setTimeout(this.#adjust);
+	}
+	#adjust = () => {
+		const el = this._el.nativeElement;
+		const width = el.clientWidth;
+		if (el.value === this.#measuredValue && width === this.#measuredWidth) return;
+		this.#measuredValue = el.value;
+		this.#measuredWidth = width;
+		el.style.overflow = "hidden";
+		el.style.height = "0px";
+		el.style.height = `${el.scrollHeight}px`;
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AutosizeDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: AutosizeDirective,
+		isStandalone: true,
+		selector: "[mAutosize]",
+		host: { listeners: {
+			"input": "onInput()",
+			"window:resize": "onInput()"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AutosizeDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[mAutosize]" }]
+	}],
+	propDecorators: { onInput: [{
+		type: HostListener,
+		args: ["input", []]
+	}, {
+		type: HostListener,
+		args: ["window:resize", []]
+	}] }
+});
+var FileUploadDirective = class FileUploadDirective {
+	mFileUpload = input({}, ...ngDevMode ? [{ debugName: "mFileUpload" }] : /* istanbul ignore next */ []);
+	fileSelect = output();
+	elementRef = inject(ElementRef);
+	fileInput = null;
+	openFilePicker() {
+		if (!this.fileInput) {
+			this.fileInput = document.createElement("input");
+			this.fileInput.type = "file";
+			this.fileInput.style.display = "none";
+			this.fileInput.addEventListener("change", this.onFileChange);
+			this.elementRef.nativeElement.appendChild(this.fileInput);
+		}
+		const config = this.mFileUpload();
+		this.fileInput.accept = config.accept?.join(",") ?? "*";
+		this.fileInput.multiple = config.multiple ?? false;
+		this.fileInput.click();
+	}
+	onFileChange = (event) => {
+		const input = event.target;
+		const files = Array.from(input.files ?? []);
+		if (files.length === 0) return;
+		const maxSize = this.mFileUpload().maxSize;
+		const validFiles = maxSize ? files.filter((f) => f.size <= maxSize) : files;
+		if (validFiles.length > 0) this.fileSelect.emit({ files: validFiles });
+		input.value = "";
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: FileUploadDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: FileUploadDirective,
+		isStandalone: true,
+		selector: "[mFileUpload]",
+		inputs: { mFileUpload: {
+			classPropertyName: "mFileUpload",
+			publicName: "mFileUpload",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { fileSelect: "fileSelect" },
+		host: {
+			listeners: { "click": "openFilePicker()" },
+			properties: { "style.cursor": "\"pointer\"" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: FileUploadDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[mFileUpload]",
+			host: { "[style.cursor]": "\"pointer\"" }
+		}]
+	}],
+	propDecorators: {
+		mFileUpload: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mFileUpload",
+				required: false
+			}]
+		}],
+		fileSelect: [{
+			type: i0.Output,
+			args: ["fileSelect"]
+		}],
+		openFilePicker: [{
+			type: HostListener,
+			args: ["click"]
+		}]
+	}
+});
+var ToolTipDirective = class ToolTipDirective {
+	mToolTip = input("", ...ngDevMode ? [{ debugName: "mToolTip" }] : /* istanbul ignore next */ []);
+	elementRef = inject(ElementRef);
+	tooltipElement = null;
+	showTooltip() {
+		const text = this.mToolTip();
+		if (!text) return;
+		this.tooltipElement = document.createElement("div");
+		this.tooltipElement.textContent = text;
+		Object.assign(this.tooltipElement.style, {
+			position: "fixed",
+			background: "rgba(0, 0, 0, 0.8)",
+			color: "#fff",
+			padding: "4px 8px",
+			borderRadius: "4px",
+			fontSize: "12px",
+			zIndex: "10000",
+			pointerEvents: "none",
+			whiteSpace: "nowrap"
+		});
+		document.body.appendChild(this.tooltipElement);
+		this.positionTooltip();
+	}
+	hideTooltip() {
+		this.removeTooltip();
+	}
+	ngOnDestroy() {
+		this.removeTooltip();
+	}
+	positionTooltip() {
+		if (!this.tooltipElement) return;
+		const rect = this.elementRef.nativeElement.getBoundingClientRect();
+		const tooltipRect = this.tooltipElement.getBoundingClientRect();
+		this.tooltipElement.style.left = `${rect.left + rect.width / 2 - tooltipRect.width / 2}px`;
+		this.tooltipElement.style.top = `${rect.top - tooltipRect.height - 6}px`;
+	}
+	removeTooltip() {
+		this.tooltipElement?.remove();
+		this.tooltipElement = null;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ToolTipDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: ToolTipDirective,
+		isStandalone: true,
+		selector: "[mToolTip]",
+		inputs: { mToolTip: {
+			classPropertyName: "mToolTip",
+			publicName: "mToolTip",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { listeners: {
+			"mouseenter": "showTooltip()",
+			"mouseleave": "hideTooltip()"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ToolTipDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[mToolTip]" }]
+	}],
+	propDecorators: {
+		mToolTip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mToolTip",
+				required: false
+			}]
+		}],
+		showTooltip: [{
+			type: HostListener,
+			args: ["mouseenter"]
+		}],
+		hideTooltip: [{
+			type: HostListener,
+			args: ["mouseleave"]
+		}]
+	}
+});
+var PositionDirective = class PositionDirective {
+	el = inject(ElementRef);
+	direction = signal("below", ...ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []);
+	detect() {
+		const rect = this.el.nativeElement.getBoundingClientRect();
+		const spaces = {
+			below: window.innerHeight - rect.bottom,
+			above: rect.top,
+			right: window.innerWidth - rect.right,
+			left: rect.left
+		};
+		const best = Object.entries(spaces).reduce((best, [dir, space]) => space > best.space ? {
+			dir,
+			space
+		} : best, {
+			dir: "below",
+			space: spaces.below
+		});
+		this.direction.set(best.dir);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PositionDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: PositionDirective,
+		isStandalone: true,
+		selector: "[mPosition]",
+		host: {
+			listeners: { "mouseenter": "detect()" },
+			properties: {
+				"class.m-pos--above": "direction() === \"above\"",
+				"class.m-pos--below": "direction() === \"below\"",
+				"class.m-pos--left": "direction() === \"left\"",
+				"class.m-pos--right": "direction() === \"right\""
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: PositionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[mPosition]",
+			host: {
+				"[class.m-pos--above]": "direction() === \"above\"",
+				"[class.m-pos--below]": "direction() === \"below\"",
+				"[class.m-pos--left]": "direction() === \"left\"",
+				"[class.m-pos--right]": "direction() === \"right\""
+			}
+		}]
+	}],
+	propDecorators: { detect: [{
+		type: HostListener,
+		args: ["mouseenter"]
+	}] }
+});
+var HighlightDirective = class HighlightDirective {
+	mHighlight = input("", ...ngDevMode ? [{ debugName: "mHighlight" }] : /* istanbul ignore next */ []);
+	mHighlightText = input("", ...ngDevMode ? [{ debugName: "mHighlightText" }] : /* istanbul ignore next */ []);
+	el = inject(ElementRef);
+	constructor() {
+		afterRenderEffect(() => {
+			const query = this.mHighlight().trim();
+			const text = this.mHighlightText();
+			if (!query) {
+				this.el.nativeElement.innerHTML = this.escapeHtml(text);
+				return;
+			}
+			const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+			const regex = new RegExp(`(${escaped})`, "gi");
+			this.el.nativeElement.innerHTML = this.escapeHtml(text).replace(regex, "<mark class=\"m-table__highlight\">$1</mark>");
+		});
+	}
+	escapeHtml = (str) => String(str ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HighlightDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: HighlightDirective,
+		isStandalone: true,
+		selector: "[mHighlight]",
+		inputs: {
+			mHighlight: {
+				classPropertyName: "mHighlight",
+				publicName: "mHighlight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mHighlightText: {
+				classPropertyName: "mHighlightText",
+				publicName: "mHighlightText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HighlightDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[mHighlight]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		mHighlight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mHighlight",
+				required: false
+			}]
+		}],
+		mHighlightText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mHighlightText",
+				required: false
+			}]
+		}]
+	}
+});
+function stringToColor(str) {
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) hash = Math.imul(31, hash) + str.charCodeAt(i) | 0;
+	return `hsl(${Math.abs(hash) % 360}, ${65 + Math.abs(hash >> 8) % 20}%, ${45 + Math.abs(hash >> 16) % 15}%)`;
+}
+var MHeroColorDirective = class MHeroColorDirective {
+	mHeroColor = input.required(...ngDevMode ? [{ debugName: "mHeroColor" }] : /* istanbul ignore next */ []);
+	mHeroColorVar = input("--hero-accent-color", ...ngDevMode ? [{ debugName: "mHeroColorVar" }] : /* istanbul ignore next */ []);
+	#el = inject(ElementRef);
+	#renderer = inject(Renderer2);
+	constructor() {
+		effect(() => {
+			const source = this.mHeroColor();
+			const varName = this.mHeroColorVar();
+			if (source) {
+				const color = stringToColor(source);
+				this.#renderer.setStyle(this.#el.nativeElement, varName, color);
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: MHeroColorDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: MHeroColorDirective,
+		isStandalone: true,
+		selector: "[mHeroColor]",
+		inputs: {
+			mHeroColor: {
+				classPropertyName: "mHeroColor",
+				publicName: "mHeroColor",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			mHeroColorVar: {
+				classPropertyName: "mHeroColorVar",
+				publicName: "mHeroColorVar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: MHeroColorDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[mHeroColor]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		mHeroColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mHeroColor",
+				required: true
+			}]
+		}],
+		mHeroColorVar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mHeroColorVar",
+				required: false
+			}]
+		}]
+	}
+});
+const SPACING_INWARD = new InjectionToken("SPACING_INWARD");
+const isBlank = (value) => value === void 0 || value === null || typeof value === "string" && value.trim() === "";
+const axis = (own, shorthand) => resolveSpacing(isBlank(own) ? shorthand : own);
+var PaddingDirective = class PaddingDirective {
+	mPadding = input(void 0, ...ngDevMode ? [{ debugName: "mPadding" }] : /* istanbul ignore next */ []);
+	mPaddingX = input(void 0, ...ngDevMode ? [{ debugName: "mPaddingX" }] : /* istanbul ignore next */ []);
+	mPaddingY = input(void 0, ...ngDevMode ? [{ debugName: "mPaddingY" }] : /* istanbul ignore next */ []);
+	inward = !!inject(SPACING_INWARD, {
+		self: true,
+		optional: true
+	})?.padding;
+	inline = computed(() => axis(this.mPaddingX(), this.mPadding()), ...ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []);
+	block = computed(() => axis(this.mPaddingY(), this.mPadding()), ...ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PaddingDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: PaddingDirective,
+		isStandalone: true,
+		selector: "[mPadding],[mPaddingX],[mPaddingY]",
+		inputs: {
+			mPadding: {
+				classPropertyName: "mPadding",
+				publicName: "mPadding",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mPaddingX: {
+				classPropertyName: "mPaddingX",
+				publicName: "mPaddingX",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mPaddingY: {
+				classPropertyName: "mPaddingY",
+				publicName: "mPaddingY",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"style.--m-padding-inline": "inline()",
+				"style.--m-padding-block": "block()",
+				"style.padding-inline": "inward ? null : inline()",
+				"style.padding-block": "inward ? null : block()"
+			},
+			classAttribute: "m-padded"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: PaddingDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[mPadding],[mPaddingX],[mPaddingY]",
+			host: {
+				class: "m-padded",
+				"[style.--m-padding-inline]": "inline()",
+				"[style.--m-padding-block]": "block()",
+				"[style.padding-inline]": "inward ? null : inline()",
+				"[style.padding-block]": "inward ? null : block()"
+			}
+		}]
+	}],
+	propDecorators: {
+		mPadding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mPadding",
+				required: false
+			}]
+		}],
+		mPaddingX: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mPaddingX",
+				required: false
+			}]
+		}],
+		mPaddingY: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mPaddingY",
+				required: false
+			}]
+		}]
+	}
+});
+var MarginDirective = class MarginDirective {
+	mMargin = input(void 0, ...ngDevMode ? [{ debugName: "mMargin" }] : /* istanbul ignore next */ []);
+	mMarginX = input(void 0, ...ngDevMode ? [{ debugName: "mMarginX" }] : /* istanbul ignore next */ []);
+	mMarginY = input(void 0, ...ngDevMode ? [{ debugName: "mMarginY" }] : /* istanbul ignore next */ []);
+	inward = !!inject(SPACING_INWARD, {
+		self: true,
+		optional: true
+	})?.margin;
+	inline = computed(() => axis(this.mMarginX(), this.mMargin()), ...ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []);
+	block = computed(() => axis(this.mMarginY(), this.mMargin()), ...ngDevMode ? [{ debugName: "block" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: MarginDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: MarginDirective,
+		isStandalone: true,
+		selector: "[mMargin],[mMarginX],[mMarginY]",
+		inputs: {
+			mMargin: {
+				classPropertyName: "mMargin",
+				publicName: "mMargin",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mMarginX: {
+				classPropertyName: "mMarginX",
+				publicName: "mMarginX",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mMarginY: {
+				classPropertyName: "mMarginY",
+				publicName: "mMarginY",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"style.--m-margin-inline": "inline()",
+				"style.--m-margin-block": "block()",
+				"style.margin-inline": "inward ? null : inline()",
+				"style.margin-block": "block()"
+			},
+			classAttribute: "m-spaced"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: MarginDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[mMargin],[mMarginX],[mMarginY]",
+			host: {
+				class: "m-spaced",
+				"[style.--m-margin-inline]": "inline()",
+				"[style.--m-margin-block]": "block()",
+				"[style.margin-inline]": "inward ? null : inline()",
+				"[style.margin-block]": "block()"
+			}
+		}]
+	}],
+	propDecorators: {
+		mMargin: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mMargin",
+				required: false
+			}]
+		}],
+		mMarginX: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mMarginX",
+				required: false
+			}]
+		}],
+		mMarginY: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mMarginY",
+				required: false
+			}]
+		}]
+	}
+});
+export { stringToColor as a, ToolTipDirective as c, DragListItemDirective as d, DragListDirective as f, MHeroColorDirective as i, FileUploadDirective as l, PaddingDirective as n, HighlightDirective as o, DraggableDirective as p, SPACING_INWARD as r, PositionDirective as s, MarginDirective as t, AutosizeDirective as u };
+
+//# sourceMappingURL=magmonium-one-directives-DOBENX_K.mjs.map