@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-resizable.mjs

@@ -0,0 +1,439 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, booleanAttribute, computed, contentChildren, inject, input, signal } from "@angular/core";
+import { _IdGenerator } from "@angular/cdk/a11y";
+var RaqmResizablePanelGroupComponent = class RaqmResizablePanelGroupComponent {
+	vertical = input(false, {
+		...ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	defaultSize = input(50, ...ngDevMode ? [{ debugName: "defaultSize" }] : /* istanbul ignore next */ []);
+	minSize = input(10, ...ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []);
+	maxSize = input(90, ...ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []);
+	element = inject(ElementRef);
+	panels = contentChildren(RaqmResizablePanelDirective, ...ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []);
+	handles = contentChildren(RaqmResizableHandleDirective, ...ngDevMode ? [{ debugName: "handles" }] : /* istanbul ignore next */ []);
+	changed = signal(/* @__PURE__ */ new Map(), ...ngDevMode ? [{ debugName: "changed" }] : /* istanbul ignore next */ []);
+	sizes = computed(() => {
+		const panels = this.panels();
+		const changes = this.changed();
+		if (!panels.length) return [];
+		const explicit = panels.map((p) => p.defaultSize());
+		const missing = explicit.filter((x) => x === void 0).length;
+		const remaining = Math.max(0, 100 - explicit.reduce((a, b) => a + (b ?? 0), 0));
+		let initial = explicit.map((v) => v ?? (missing ? remaining / missing : 0));
+		if (panels.every((p) => changes.has(p))) initial = panels.map((p) => changes.get(p));
+		else if (panels.length === 2 && explicit.every((v) => v === void 0)) initial = [this.defaultSize(), 100 - this.defaultSize()];
+		const mins = panels.map((p, i) => Math.max(0, p.minSize() ?? (panels.length === 2 && i === 0 ? this.minSize() : 0)));
+		const maxs = panels.map((p, i) => Math.min(100, p.maxSize() ?? (panels.length === 2 && i === 0 ? this.maxSize() : 100)));
+		const values = initial.map((v, i) => Math.min(maxs[i], Math.max(mins[i], Number.isFinite(v) ? v : 0)));
+		let remainingSize = 100 - values.reduce((a, b) => a + b, 0);
+		for (let i = 0; i < values.length && Math.abs(remainingSize) > 1e-6; i++) {
+			const change = remainingSize > 0 ? Math.min(remainingSize, maxs[i] - values[i]) : Math.max(remainingSize, mins[i] - values[i]);
+			values[i] += change;
+			remainingSize -= change;
+		}
+		return values;
+	}, ...ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []);
+	panelIndex(panel) {
+		return this.panels().indexOf(panel);
+	}
+	handleIndex(handle) {
+		return this.handles().indexOf(handle);
+	}
+	bounds(index) {
+		const panels = this.panels(), sizes = this.sizes(), left = panels[index], right = panels[index + 1];
+		if (!left || !right) return {
+			min: 0,
+			max: 0
+		};
+		const total = sizes[index] + sizes[index + 1];
+		const legacy = panels.length === 2;
+		const leftMin = left.minSize() ?? (legacy ? this.minSize() : 0);
+		const leftMax = left.maxSize() ?? (legacy ? this.maxSize() : 100);
+		const rightMin = right.minSize() ?? 0;
+		const rightMax = right.maxSize() ?? 100;
+		return {
+			min: Math.max(0, leftMin, total - rightMax),
+			max: Math.min(total, leftMax, total - rightMin)
+		};
+	}
+	resize(index, value) {
+		const panels = this.panels(), sizes = this.sizes(), bounds = this.bounds(index);
+		if (!panels[index] || !panels[index + 1] || bounds.min > bounds.max || !Number.isFinite(value)) return;
+		const next = Math.min(bounds.max, Math.max(bounds.min, value));
+		const total = sizes[index] + sizes[index + 1];
+		const values = new Map(panels.map((panel, i) => [panel, sizes[i]]));
+		values.set(panels[index], next);
+		values.set(panels[index + 1], total - next);
+		this.changed.set(values);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmResizablePanelGroupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: RaqmResizablePanelGroupComponent,
+		isStandalone: true,
+		selector: "raqm-resizable-panel-group",
+		inputs: {
+			vertical: {
+				classPropertyName: "vertical",
+				publicName: "vertical",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			defaultSize: {
+				classPropertyName: "defaultSize",
+				publicName: "defaultSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minSize: {
+				classPropertyName: "minSize",
+				publicName: "minSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxSize: {
+				classPropertyName: "maxSize",
+				publicName: "maxSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.data-raqm-vertical": "vertical() ? \"\" : null" },
+			classAttribute: "raqm-resizable-panel-group"
+		},
+		queries: [{
+			propertyName: "panels",
+			predicate: RaqmResizablePanelDirective,
+			isSignal: true
+		}, {
+			propertyName: "handles",
+			predicate: RaqmResizableHandleDirective,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{display:flex;inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}:host([data-raqm-vertical]){flex-direction:column}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmResizablePanelGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-resizable-panel-group",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-resizable-panel-group",
+				"[attr.data-raqm-vertical]": "vertical() ? \"\" : null"
+			},
+			styles: [":host{display:flex;inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}:host([data-raqm-vertical]){flex-direction:column}\n"]
+		}]
+	}],
+	propDecorators: {
+		vertical: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "vertical",
+				required: false
+			}]
+		}],
+		defaultSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultSize",
+				required: false
+			}]
+		}],
+		minSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minSize",
+				required: false
+			}]
+		}],
+		maxSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSize",
+				required: false
+			}]
+		}],
+		panels: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RaqmResizablePanelDirective), { isSignal: true }]
+		}],
+		handles: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RaqmResizableHandleDirective), { isSignal: true }]
+		}]
+	}
+});
+var RaqmResizablePanelDirective = class RaqmResizablePanelDirective {
+	group = inject(RaqmResizablePanelGroupComponent);
+	id = inject(_IdGenerator).getId("raqm-resizable-panel-");
+	defaultSize = input(void 0, ...ngDevMode ? [{ debugName: "defaultSize" }] : /* istanbul ignore next */ []);
+	minSize = input(void 0, ...ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []);
+	maxSize = input(void 0, ...ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []);
+	basis = computed(() => this.group.sizes()[this.group.panelIndex(this)] ?? 0, ...ngDevMode ? [{ debugName: "basis" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmResizablePanelDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmResizablePanelDirective,
+		isStandalone: true,
+		selector: "[raqm-resizable-panel]",
+		inputs: {
+			defaultSize: {
+				classPropertyName: "defaultSize",
+				publicName: "defaultSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minSize: {
+				classPropertyName: "minSize",
+				publicName: "minSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxSize: {
+				classPropertyName: "maxSize",
+				publicName: "maxSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"style.flex-basis.%": "basis()",
+				"style.flex-grow": "0",
+				"id": "id"
+			},
+			classAttribute: "raqm-resizable-panel"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmResizablePanelDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-resizable-panel]",
+			host: {
+				class: "raqm-resizable-panel",
+				"[style.flex-basis.%]": "basis()",
+				"[style.flex-grow]": "0",
+				"[id]": "id"
+			}
+		}]
+	}],
+	propDecorators: {
+		defaultSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultSize",
+				required: false
+			}]
+		}],
+		minSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minSize",
+				required: false
+			}]
+		}],
+		maxSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxSize",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmResizableHandleDirective = class RaqmResizableHandleDirective {
+	withHandle = input(false, {
+		...ngDevMode ? { debugName: "withHandle" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	group = inject(RaqmResizablePanelGroupComponent);
+	index = computed(() => this.group.handleIndex(this), ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	value = computed(() => this.group.sizes()[this.index()] ?? 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	bounds = computed(() => this.group.bounds(this.index()), ...ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []);
+	element = inject(ElementRef);
+	destroy = inject(DestroyRef);
+	cleanup;
+	constructor() {
+		this.destroy.onDestroy(() => this.cleanup?.());
+	}
+	onKey(event) {
+		const horizontal = !this.group.vertical();
+		const rtl = getComputedStyle(this.group.element.nativeElement).direction === "rtl";
+		let delta = 0;
+		if (horizontal && event.key === "ArrowRight") delta = rtl ? -1 : 1;
+		if (horizontal && event.key === "ArrowLeft") delta = rtl ? 1 : -1;
+		if (!horizontal && event.key === "ArrowDown") delta = 1;
+		if (!horizontal && event.key === "ArrowUp") delta = -1;
+		if (event.key === "Home" || event.key === "End") {
+			event.preventDefault();
+			this.group.resize(this.index(), event.key === "Home" ? this.bounds().min : this.bounds().max);
+		} else if (delta) {
+			event.preventDefault();
+			this.group.resize(this.index(), this.value() + delta * (event.shiftKey ? 10 : 1));
+		}
+	}
+	onPointer(event) {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		this.cleanup?.();
+		const handle = this.element.nativeElement;
+		const horizontal = !this.group.vertical();
+		const rect = this.group.element.nativeElement.getBoundingClientRect();
+		const rtl = horizontal && getComputedStyle(this.group.element.nativeElement).direction === "rtl";
+		const start = horizontal ? event.clientX : event.clientY;
+		const initialSize = this.value();
+		const move = (e) => {
+			const distance = (horizontal ? e.clientX : e.clientY) - start;
+			const length = horizontal ? rect.width : rect.height;
+			if (length) this.group.resize(this.index(), initialSize + (rtl ? -distance : distance) / length * 100);
+		};
+		const end = () => this.cleanup?.();
+		this.cleanup = () => {
+			handle.removeEventListener("pointermove", move);
+			handle.removeEventListener("pointerup", end);
+			handle.removeEventListener("pointercancel", end);
+			handle.removeEventListener("lostpointercapture", end);
+			if (handle.hasPointerCapture(event.pointerId)) handle.releasePointerCapture(event.pointerId);
+			this.cleanup = void 0;
+		};
+		handle.setPointerCapture(event.pointerId);
+		handle.addEventListener("pointermove", move);
+		handle.addEventListener("pointerup", end);
+		handle.addEventListener("pointercancel", end);
+		handle.addEventListener("lostpointercapture", end);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmResizableHandleDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmResizableHandleDirective,
+		isStandalone: true,
+		selector: "[raqm-resizable-handle]",
+		inputs: { withHandle: {
+			classPropertyName: "withHandle",
+			publicName: "withHandle",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "separator",
+				"tabindex": "0"
+			},
+			listeners: {
+				"keydown": "onKey($event)",
+				"pointerdown": "onPointer($event)"
+			},
+			properties: {
+				"attr.data-raqm-with-handle": "withHandle() ? \"\" : null",
+				"attr.aria-orientation": "group.vertical() ? \"horizontal\" : \"vertical\"",
+				"attr.aria-valuenow": "value()",
+				"attr.aria-valuemin": "bounds().min",
+				"attr.aria-valuemax": "bounds().max",
+				"attr.aria-controls": "group.panels()[index()]?.id ?? null"
+			},
+			classAttribute: "raqm-resizable-handle"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmResizableHandleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-resizable-handle]",
+			host: {
+				class: "raqm-resizable-handle",
+				role: "separator",
+				tabindex: "0",
+				"[attr.data-raqm-with-handle]": "withHandle() ? \"\" : null",
+				"[attr.aria-orientation]": "group.vertical() ? \"horizontal\" : \"vertical\"",
+				"[attr.aria-valuenow]": "value()",
+				"[attr.aria-valuemin]": "bounds().min",
+				"[attr.aria-valuemax]": "bounds().max",
+				"[attr.aria-controls]": "group.panels()[index()]?.id ?? null",
+				"(keydown)": "onKey($event)",
+				"(pointerdown)": "onPointer($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { withHandle: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "withHandle",
+			required: false
+		}]
+	}] }
+});
+const RaqmResizable = [
+	RaqmResizablePanelGroupComponent,
+	RaqmResizablePanelDirective,
+	RaqmResizableHandleDirective
+];
+export { RaqmResizable, RaqmResizableHandleDirective, RaqmResizablePanelDirective, RaqmResizablePanelGroupComponent };
+
+//# sourceMappingURL=raqm-ui-resizable.mjs.map

package/fesm2022/raqm-ui-resizable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raqm-ui-resizable.mjs","names":[],"sources":["../../../projects/ui/resizable/resizable.ts","../../../projects/ui/resizable/public-api.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  Directive,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  computed,\r\n  contentChildren,\r\n  inject,\r\n  input,\r\n  signal,\r\n} from '@angular/core';\r\nimport { _IdGenerator } from '@angular/cdk/a11y';\r\n\r\n/** Raqm resizable panel group — percentage-based panels with a draggable divider; the app supplies every accessible name. */\r\n@Component({\r\n  selector: 'raqm-resizable-panel-group',\r\n  template: '<ng-content />',\r\n  styleUrl: './resizable.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-resizable-panel-group',\r\n    '[attr.data-raqm-vertical]': 'vertical() ? \"\" : null',\r\n  },\r\n})\r\nexport class RaqmResizablePanelGroupComponent {\r\n  /** A horizontal row by default; a bare `vertical` attribute makes a column. */\r\n  readonly vertical = input(false, { transform: booleanAttribute });\r\n  readonly defaultSize = input(50);\r\n  readonly minSize = input(10);\r\n  readonly maxSize = input(90);\r\n  readonly element = inject(ElementRef<HTMLElement>);\r\n  readonly panels = contentChildren(RaqmResizablePanelDirective);\r\n  readonly handles = contentChildren(RaqmResizableHandleDirective);\r\n  private readonly changed = signal<ReadonlyMap<RaqmResizablePanelDirective, number>>(new Map());\r\n  readonly sizes = computed(() => {\r\n    const panels = this.panels();\r\n    const changes = this.changed();\r\n    if (!panels.length) return [];\r\n    const explicit = panels.map((p) => p.defaultSize());\r\n    const missing = explicit.filter((x) => x === undefined).length;\r\n    const remaining = Math.max(0, 100 - explicit.reduce<number>((a, b) => a + (b ?? 0), 0));\r\n    let initial = explicit.map((v) => v ?? (missing ? remaining / missing : 0));\r\n    if (panels.every((p) => changes.has(p))) initial = panels.map((p) => changes.get(p)!);\r\n    else if (panels.length === 2 && explicit.every((v) => v === undefined)) {\r\n      initial = [this.defaultSize(), 100 - this.defaultSize()];\r\n    }\r\n    const mins = panels.map((p, i) =>\r\n      Math.max(0, p.minSize() ?? (panels.length === 2 && i === 0 ? this.minSize() : 0)),\r\n    );\r\n    const maxs = panels.map((p, i) =>\r\n      Math.min(100, p.maxSize() ?? (panels.length === 2 && i === 0 ? this.maxSize() : 100)),\r\n    );\r\n    const values = initial.map((v, i) =>\r\n      Math.min(maxs[i], Math.max(mins[i], Number.isFinite(v) ? v : 0)),\r\n    );\r\n    let remainingSize = 100 - values.reduce((a, b) => a + b, 0);\r\n    for (let i = 0; i < values.length && Math.abs(remainingSize) > 0.000001; i++) {\r\n      const change =\r\n        remainingSize > 0\r\n          ? Math.min(remainingSize, maxs[i] - values[i])\r\n          : Math.max(remainingSize, mins[i] - values[i]);\r\n      values[i] += change;\r\n      remainingSize -= change;\r\n    }\r\n    return values;\r\n  });\r\n  panelIndex(panel: RaqmResizablePanelDirective): number {\r\n    return this.panels().indexOf(panel);\r\n  }\r\n  handleIndex(handle: RaqmResizableHandleDirective): number {\r\n    return this.handles().indexOf(handle);\r\n  }\r\n  bounds(index: number): { min: number; max: number } {\r\n    const panels = this.panels(),\r\n      sizes = this.sizes(),\r\n      left = panels[index],\r\n      right = panels[index + 1];\r\n    if (!left || !right) return { min: 0, max: 0 };\r\n    const total = sizes[index] + sizes[index + 1];\r\n    const legacy = panels.length === 2;\r\n    const leftMin = left.minSize() ?? (legacy ? this.minSize() : 0);\r\n    const leftMax = left.maxSize() ?? (legacy ? this.maxSize() : 100);\r\n    const rightMin = right.minSize() ?? 0;\r\n    const rightMax = right.maxSize() ?? 100;\r\n    return {\r\n      min: Math.max(0, leftMin, total - rightMax),\r\n      max: Math.min(total, leftMax, total - rightMin),\r\n    };\r\n  }\r\n  resize(index: number, value: number): void {\r\n    const panels = this.panels(),\r\n      sizes = this.sizes(),\r\n      bounds = this.bounds(index);\r\n    if (!panels[index] || !panels[index + 1] || bounds.min > bounds.max || !Number.isFinite(value))\r\n      return;\r\n    const next = Math.min(bounds.max, Math.max(bounds.min, value));\r\n    const total = sizes[index] + sizes[index + 1];\r\n    const values = new Map(panels.map((panel, i) => [panel, sizes[i]]));\r\n    values.set(panels[index], next);\r\n    values.set(panels[index + 1], total - next);\r\n    this.changed.set(values);\r\n  }\r\n}\r\n\r\n/** Raqm resizable panel — one percentage-sized region; owns its id (the handle's `aria-controls` target) and flex-basis. */\r\n@Directive({\r\n  selector: '[raqm-resizable-panel]',\r\n  host: {\r\n    class: 'raqm-resizable-panel',\r\n    '[style.flex-basis.%]': 'basis()',\r\n    '[style.flex-grow]': '0',\r\n    '[id]': 'id',\r\n  },\r\n})\r\nexport class RaqmResizablePanelDirective {\r\n  private readonly group = inject(RaqmResizablePanelGroupComponent);\r\n  readonly id = inject(_IdGenerator).getId('raqm-resizable-panel-');\r\n  readonly defaultSize = input<number | undefined>(undefined);\r\n  readonly minSize = input<number | undefined>(undefined);\r\n  readonly maxSize = input<number | undefined>(undefined);\r\n  protected readonly basis = computed(() => this.group.sizes()[this.group.panelIndex(this)] ?? 0);\r\n}\r\n\r\n/** Raqm resizable handle — draggable `role=\"separator\"`, focusable and keyboard-operable; accessible name is app-authored. */\r\n@Directive({\r\n  selector: '[raqm-resizable-handle]',\r\n  host: {\r\n    class: 'raqm-resizable-handle',\r\n    role: 'separator',\r\n    tabindex: '0',\r\n    '[attr.data-raqm-with-handle]': 'withHandle() ? \"\" : null',\r\n    '[attr.aria-orientation]': 'group.vertical() ? \"horizontal\" : \"vertical\"',\r\n    '[attr.aria-valuenow]': 'value()',\r\n    '[attr.aria-valuemin]': 'bounds().min',\r\n    '[attr.aria-valuemax]': 'bounds().max',\r\n    '[attr.aria-controls]': 'group.panels()[index()]?.id ?? null',\r\n    '(keydown)': 'onKey($event)',\r\n    '(pointerdown)': 'onPointer($event)',\r\n  },\r\n})\r\nexport class RaqmResizableHandleDirective {\r\n  readonly withHandle = input(false, { transform: booleanAttribute });\r\n  protected readonly group = inject(RaqmResizablePanelGroupComponent);\r\n  protected readonly index = computed(() => this.group.handleIndex(this));\r\n  protected readonly value = computed(() => this.group.sizes()[this.index()] ?? 0);\r\n  protected readonly bounds = computed(() => this.group.bounds(this.index()));\r\n  private readonly element = inject(ElementRef<HTMLElement>);\r\n  private readonly destroy = inject(DestroyRef);\r\n  private cleanup: (() => void) | undefined;\r\n  constructor() {\r\n    this.destroy.onDestroy(() => this.cleanup?.());\r\n  }\r\n  protected onKey(event: KeyboardEvent): void {\r\n    const horizontal = !this.group.vertical();\r\n    const rtl = getComputedStyle(this.group.element.nativeElement).direction === 'rtl';\r\n    let delta = 0;\r\n    if (horizontal && event.key === 'ArrowRight') delta = rtl ? -1 : 1;\r\n    if (horizontal && event.key === 'ArrowLeft') delta = rtl ? 1 : -1;\r\n    if (!horizontal && event.key === 'ArrowDown') delta = 1;\r\n    if (!horizontal && event.key === 'ArrowUp') delta = -1;\r\n    if (event.key === 'Home' || event.key === 'End') {\r\n      event.preventDefault();\r\n      this.group.resize(this.index(), event.key === 'Home' ? this.bounds().min : this.bounds().max);\r\n    } else if (delta) {\r\n      event.preventDefault();\r\n      this.group.resize(this.index(), this.value() + delta * (event.shiftKey ? 10 : 1));\r\n    }\r\n  }\r\n  protected onPointer(event: PointerEvent): void {\r\n    if (event.button !== 0) return;\r\n    event.preventDefault();\r\n    this.cleanup?.();\r\n    const handle = this.element.nativeElement;\r\n    const horizontal = !this.group.vertical();\r\n    const rect = this.group.element.nativeElement.getBoundingClientRect();\r\n    const rtl =\r\n      horizontal && getComputedStyle(this.group.element.nativeElement).direction === 'rtl';\r\n    const start = horizontal ? event.clientX : event.clientY;\r\n    const initialSize = this.value();\r\n    const move = (e: PointerEvent) => {\r\n      const distance = (horizontal ? e.clientX : e.clientY) - start;\r\n      const length = horizontal ? rect.width : rect.height;\r\n      if (length)\r\n        this.group.resize(\r\n          this.index(),\r\n          initialSize + ((rtl ? -distance : distance) / length) * 100,\r\n        );\r\n    };\r\n    const end = () => this.cleanup?.();\r\n    this.cleanup = () => {\r\n      handle.removeEventListener('pointermove', move);\r\n      handle.removeEventListener('pointerup', end);\r\n      handle.removeEventListener('pointercancel', end);\r\n      handle.removeEventListener('lostpointercapture', end);\r\n      if (handle.hasPointerCapture(event.pointerId)) handle.releasePointerCapture(event.pointerId);\r\n      this.cleanup = undefined;\r\n    };\r\n    handle.setPointerCapture(event.pointerId);\r\n    handle.addEventListener('pointermove', move);\r\n    handle.addEventListener('pointerup', end);\r\n    handle.addEventListener('pointercancel', end);\r\n    handle.addEventListener('lostpointercapture', end);\r\n  }\r\n}\r\n","import {\r\n  RaqmResizablePanelGroupComponent,\r\n  RaqmResizablePanelDirective,\r\n  RaqmResizableHandleDirective,\r\n} from './resizable';\r\n\r\nexport {\r\n  RaqmResizablePanelGroupComponent,\r\n  RaqmResizablePanelDirective,\r\n  RaqmResizableHandleDirective,\r\n};\r\n\r\nexport const RaqmResizable = [\r\n  RaqmResizablePanelGroupComponent,\r\n  RaqmResizablePanelDirective,\r\n  RaqmResizableHandleDirective,\r\n] as const;\r\n"],"mappings":"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"}