@ojiepermana/angular 22.1.14 → 22.2.1

package/fesm2022/ojiepermana-angular-component-resizable.mjs

@@ -1,206 +1,344 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Directive, inject, ElementRef, input, signal, computed, Component, booleanAttribute, contentChildren, effect, untracked, forwardRef } from '@angular/core';
-import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
-
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, Directive, ElementRef, booleanAttribute, computed, contentChildren, effect, forwardRef, inject, input, signal, untracked } from "@angular/core";
+import { cn, injectUniqueId } from "@ojiepermana/angular/component/utils/core";
 function clampResizableValue(value, min, max) {
-    return Math.min(Math.max(value, min), max);
+	return Math.min(Math.max(value, min), max);
 }
 function parseResizablePercent(value) {
-    if (value == null || value === '')
-        return null;
-    if (typeof value === 'number')
-        return Number.isFinite(value) ? value : null;
-    const parsed = Number.parseFloat(value);
-    return Number.isFinite(parsed) ? parsed : null;
+	if (value == null || value === "") return null;
+	if (typeof value === "number") return Number.isFinite(value) ? value : null;
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : null;
 }
 function roundResizablePercentage(value) {
-    return Math.round(value * 1000) / 1000;
+	return Math.round(value * 1e3) / 1e3;
 }
 function resolveInitialResizableSizes(preferred, minimums, maximums) {
-    const unresolvedIndexes = preferred.flatMap((value, index) => (value == null ? [index] : []));
-    const specifiedTotal = sum(preferred.flatMap((value) => (value == null ? [] : [value])));
-    let sizes;
-    if (preferred.every((value) => value == null)) {
-        const equalSize = 100 / preferred.length;
-        sizes = preferred.map(() => equalSize);
-    }
-    else {
-        const share = unresolvedIndexes.length
-            ? Math.max(100 - specifiedTotal, 0) / unresolvedIndexes.length
-            : 0;
-        sizes = preferred.map((value) => value ?? share);
-    }
-    sizes = sizes.map((size, index) => clampResizableValue(size, minimums[index], maximums[index]));
-    sizes = rebalanceSizes(sizes, minimums, maximums);
-    return sizes.map(roundResizablePercentage);
+	const unresolvedIndexes = preferred.flatMap((value, index) => value == null ? [index] : []);
+	const specifiedTotal = sum(preferred.flatMap((value) => value == null ? [] : [value]));
+	let sizes;
+	if (preferred.every((value) => value == null)) {
+		const equalSize = 100 / preferred.length;
+		sizes = preferred.map(() => equalSize);
+	} else {
+		const share = unresolvedIndexes.length ? Math.max(100 - specifiedTotal, 0) / unresolvedIndexes.length : 0;
+		sizes = preferred.map((value) => value ?? share);
+	}
+	sizes = sizes.map((size, index) => clampResizableValue(size, minimums[index], maximums[index]));
+	sizes = rebalanceSizes(sizes, minimums, maximums);
+	return sizes.map(roundResizablePercentage);
 }
 function toResizableAriaValue(value) {
-    return value == null ? null : String(Math.round(value));
+	return value == null ? null : String(Math.round(value));
 }
 function sum(values) {
-    return values.reduce((total, value) => total + value, 0);
+	return values.reduce((total, value) => total + value, 0);
 }
 function rebalanceSizes(sizes, minimums, maximums) {
-    const next = [...sizes];
-    for (let iteration = 0; iteration < next.length * 4; iteration += 1) {
-        const difference = roundResizablePercentage(100 - sum(next));
-        if (Math.abs(difference) <= 0.001)
-            return next;
-        const adjustableIndexes = next.flatMap((size, index) => {
-            const room = difference > 0 ? maximums[index] - size : size - minimums[index];
-            return room > 0.001 ? [index] : [];
-        });
-        if (!adjustableIndexes.length)
-            return next;
-        const perPanelDelta = difference / adjustableIndexes.length;
-        adjustableIndexes.forEach((index) => {
-            next[index] = clampResizableValue(next[index] + perPanelDelta, minimums[index], maximums[index]);
-        });
-    }
-    return next;
-}
-
-class ResizableGroupContextBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ResizableGroupContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ResizableGroupContextBase, isStandalone: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ResizableGroupContextBase, decorators: [{
-            type: Directive
-        }] });
-class ResizablePanelComponent {
-    ctx = inject(ResizableGroupContextBase);
-    host = inject((ElementRef));
-    defaultSize = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "defaultSize" }] : /* istanbul ignore next */ []));
-    minSize = input('10%', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
-    maxSize = input('90%', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
-    id = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    generatedId = injectUniqueId('ResizablePanel');
-    currentSize = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentSize" }] : /* istanbul ignore next */ []));
-    resolvedId = computed(() => this.id() ?? this.generatedId, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('relative block min-h-0 min-w-0 overflow-hidden', this.ctx.groupOrientation() === 'horizontal' ? 'h-full' : 'w-full', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    flexStyle = computed(() => {
-        const size = this.currentSize();
-        return size == null ? '1 1 0%' : `0 0 ${size}%`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "flexStyle" }] : /* istanbul ignore next */ []));
-    panelId() {
-        return this.resolvedId();
-    }
-    preferredSizePercent() {
-        return parseResizablePercent(this.defaultSize());
-    }
-    minSizePercent() {
-        return clampResizableValue(parseResizablePercent(this.minSize()) ?? 10, 0, 100);
-    }
-    maxSizePercent() {
-        return clampResizableValue(parseResizablePercent(this.maxSize()) ?? 90, this.minSizePercent(), 100);
-    }
-    size() {
-        return this.currentSize() ?? 0;
-    }
-    setSize(size) {
-        this.currentSize.set(roundResizablePercentage(clampResizableValue(size, 0, 100)));
-    }
-    nativeElement() {
-        return this.host.nativeElement;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ResizablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: ResizablePanelComponent, isStandalone: true, selector: "ResizablePanel", 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()", "style.flex": "flexStyle()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+	const next = [...sizes];
+	for (let iteration = 0; iteration < next.length * 4; iteration += 1) {
+		const difference = roundResizablePercentage(100 - sum(next));
+		if (Math.abs(difference) <= .001) return next;
+		const adjustableIndexes = next.flatMap((size, index) => {
+			return (difference > 0 ? maximums[index] - size : size - minimums[index]) > .001 ? [index] : [];
+		});
+		if (!adjustableIndexes.length) return next;
+		const perPanelDelta = difference / adjustableIndexes.length;
+		adjustableIndexes.forEach((index) => {
+			next[index] = clampResizableValue(next[index] + perPanelDelta, minimums[index], maximums[index]);
+		});
+	}
+	return next;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ResizablePanelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ResizablePanel',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.id]': 'resolvedId()',
-                        '[style.flex]': 'flexStyle()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], 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 }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class ResizableHandleComponent {
-    ctx = inject(ResizableGroupContextBase);
-    host = inject((ElementRef));
-    withHandle = input(false, { ...(ngDevMode ? { debugName: "withHandle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    lastExpandedPrimarySize = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "lastExpandedPrimarySize" }] : /* istanbul ignore next */ []));
-    active = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    state = computed(() => this.ctx.pairState(this), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('group relative flex shrink-0 select-none items-center justify-center bg-transparent text-foreground transition-colors', 'touch-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', this.ctx.groupOrientation() === 'horizontal'
-        ? 'h-full w-2 cursor-col-resize before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-border'
-        : 'h-2 w-full cursor-row-resize before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-border', this.active() ? 'before:bg-foreground/60' : 'hover:before:bg-foreground/40', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether this handle sits between two panels it can actually resize.
-     *
-     * A handle with no adjacent pair -- a lone panel, or a handle at the edge of
-     * the group -- changes nothing, so it is decorative and gives up `separator`
-     * and its tab stop. A focusable `separator` owes `aria-valuenow`, and there is
-     * no honest value to give: inventing one would satisfy axe while telling a
-     * screen reader about a slider that does not exist. Dropping the role is the
-     * truthful half of that trade, and it also stops the handle from soaking up a
-     * Tab press that leads nowhere.
-     */
-    resizable = computed(() => this.state() !== null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
-    separatorOrientation = computed(() => this.ctx.groupOrientation() === 'horizontal' ? 'vertical' : 'horizontal', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "separatorOrientation" }] : /* istanbul ignore next */ []));
-    controls = computed(() => this.state()?.panelId ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
-    label = computed(() => this.ariaLabel() ?? 'Resize panel', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    valueNow = computed(() => toResizableAriaValue(this.state()?.valueNow), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueNow" }] : /* istanbul ignore next */ []));
-    valueMin = computed(() => toResizableAriaValue(this.state()?.valueMin), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueMin" }] : /* istanbul ignore next */ []));
-    valueMax = computed(() => toResizableAriaValue(this.state()?.valueMax), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueMax" }] : /* istanbul ignore next */ []));
-    valueText = computed(() => {
-        const value = this.state()?.valueNow;
-        return value == null ? null : `${Math.round(value)}%`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
-    onPointerDown(event) {
-        if (event.button !== 0) {
-            return;
-        }
-        event.preventDefault();
-        this.host.nativeElement.focus();
-        this.ctx.beginPointerResize(this, event);
-    }
-    onKeydown(event) {
-        this.ctx.handleKeydown(this, event);
-    }
-    setActive(active) {
-        this.active.set(active);
-    }
-    rememberPrimarySize(size) {
-        this.lastExpandedPrimarySize.set(roundResizablePercentage(size));
-    }
-    rememberedPrimarySize() {
-        return this.lastExpandedPrimarySize();
-    }
-    nativeElement() {
-        return this.host.nativeElement;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ResizableHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ResizableHandleComponent, isStandalone: true, selector: "ResizableHandle", inputs: { withHandle: { classPropertyName: "withHandle", publicName: "withHandle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)", "pointerdown": "onPointerDown($event)" }, properties: { "class": "classes()", "attr.role": "resizable() ? \"separator\" : null", "attr.tabindex": "resizable() ? 0 : null", "attr.data-active": "active() ? \"true\" : null", "attr.aria-controls": "controls()", "attr.aria-label": "resizable() ? label() : null", "attr.aria-orientation": "resizable() ? separatorOrientation() : null", "attr.aria-valuenow": "valueNow()", "attr.aria-valuemin": "valueMin()", "attr.aria-valuemax": "valueMax()", "attr.aria-valuetext": "valueText()" } }, ngImport: i0, template: `
+var ResizableGroupContextBase = class ResizableGroupContextBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ResizableGroupContextBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: ResizableGroupContextBase,
+		isStandalone: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ResizableGroupContextBase,
+	decorators: [{ type: Directive }]
+});
+var ResizablePanelComponent = class ResizablePanelComponent {
+	ctx = inject(ResizableGroupContextBase);
+	host = inject(ElementRef);
+	defaultSize = input(null, ...ngDevMode ? [{ debugName: "defaultSize" }] : /* istanbul ignore next */ []);
+	minSize = input("10%", ...ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []);
+	maxSize = input("90%", ...ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []);
+	id = input(null, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	generatedId = injectUniqueId("ResizablePanel");
+	currentSize = signal(null, ...ngDevMode ? [{ debugName: "currentSize" }] : /* istanbul ignore next */ []);
+	resolvedId = computed(() => this.id() ?? this.generatedId, ...ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("relative block min-h-0 min-w-0 overflow-hidden", this.ctx.groupOrientation() === "horizontal" ? "h-full" : "w-full", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	flexStyle = computed(() => {
+		const size = this.currentSize();
+		return size == null ? "1 1 0%" : `0 0 ${size}%`;
+	}, ...ngDevMode ? [{ debugName: "flexStyle" }] : /* istanbul ignore next */ []);
+	panelId() {
+		return this.resolvedId();
+	}
+	preferredSizePercent() {
+		return parseResizablePercent(this.defaultSize());
+	}
+	minSizePercent() {
+		return clampResizableValue(parseResizablePercent(this.minSize()) ?? 10, 0, 100);
+	}
+	maxSizePercent() {
+		return clampResizableValue(parseResizablePercent(this.maxSize()) ?? 90, this.minSizePercent(), 100);
+	}
+	size() {
+		return this.currentSize() ?? 0;
+	}
+	setSize(size) {
+		this.currentSize.set(roundResizablePercentage(clampResizableValue(size, 0, 100)));
+	}
+	nativeElement() {
+		return this.host.nativeElement;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ResizablePanelComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: ResizablePanelComponent,
+		isStandalone: true,
+		selector: "ResizablePanel",
+		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
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.id": "resolvedId()",
+			"style.flex": "flexStyle()"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ResizablePanelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ResizablePanel",
+			host: {
+				"[class]": "classes()",
+				"[attr.id]": "resolvedId()",
+				"[style.flex]": "flexStyle()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	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
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var ResizableHandleComponent = class ResizableHandleComponent {
+	ctx = inject(ResizableGroupContextBase);
+	host = inject(ElementRef);
+	withHandle = input(false, {
+		...ngDevMode ? { debugName: "withHandle" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaLabel = input(null, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	lastExpandedPrimarySize = signal(null, ...ngDevMode ? [{ debugName: "lastExpandedPrimarySize" }] : /* istanbul ignore next */ []);
+	active = signal(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	state = computed(() => this.ctx.pairState(this), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("group relative flex shrink-0 select-none items-center justify-center bg-transparent text-foreground transition-colors", "touch-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", this.ctx.groupOrientation() === "horizontal" ? "h-full w-2 cursor-col-resize before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-border" : "h-2 w-full cursor-row-resize before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-border", this.active() ? "before:bg-foreground/60" : "hover:before:bg-foreground/40", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	resizable = computed(() => this.state() !== null, ...ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []);
+	separatorOrientation = computed(() => this.ctx.groupOrientation() === "horizontal" ? "vertical" : "horizontal", ...ngDevMode ? [{ debugName: "separatorOrientation" }] : /* istanbul ignore next */ []);
+	controls = computed(() => this.state()?.panelId ?? null, ...ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []);
+	label = computed(() => this.ariaLabel() ?? "Resize panel", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	valueNow = computed(() => toResizableAriaValue(this.state()?.valueNow), ...ngDevMode ? [{ debugName: "valueNow" }] : /* istanbul ignore next */ []);
+	valueMin = computed(() => toResizableAriaValue(this.state()?.valueMin), ...ngDevMode ? [{ debugName: "valueMin" }] : /* istanbul ignore next */ []);
+	valueMax = computed(() => toResizableAriaValue(this.state()?.valueMax), ...ngDevMode ? [{ debugName: "valueMax" }] : /* istanbul ignore next */ []);
+	valueText = computed(() => {
+		const value = this.state()?.valueNow;
+		return value == null ? null : `${Math.round(value)}%`;
+	}, ...ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []);
+	onPointerDown(event) {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		this.host.nativeElement.focus();
+		this.ctx.beginPointerResize(this, event);
+	}
+	onKeydown(event) {
+		this.ctx.handleKeydown(this, event);
+	}
+	setActive(active) {
+		this.active.set(active);
+	}
+	rememberPrimarySize(size) {
+		this.lastExpandedPrimarySize.set(roundResizablePercentage(size));
+	}
+	rememberedPrimarySize() {
+		return this.lastExpandedPrimarySize();
+	}
+	nativeElement() {
+		return this.host.nativeElement;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ResizableHandleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ResizableHandleComponent,
+		isStandalone: true,
+		selector: "ResizableHandle",
+		inputs: {
+			withHandle: {
+				classPropertyName: "withHandle",
+				publicName: "withHandle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"keydown": "onKeydown($event)",
+				"pointerdown": "onPointerDown($event)"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.role": "resizable() ? \"separator\" : null",
+				"attr.tabindex": "resizable() ? 0 : null",
+				"attr.data-active": "active() ? \"true\" : null",
+				"attr.aria-controls": "controls()",
+				"attr.aria-label": "resizable() ? label() : null",
+				"attr.aria-orientation": "resizable() ? separatorOrientation() : null",
+				"attr.aria-valuenow": "valueNow()",
+				"attr.aria-valuemin": "valueMin()",
+				"attr.aria-valuemax": "valueMax()",
+				"attr.aria-valuetext": "valueText()"
+			}
+		},
+		ngImport: i0,
+		template: `
     @if (withHandle()) {
       <span
         aria-hidden="true"
@@ -216,28 +354,35 @@ class ResizableHandleComponent {
         </svg>
       </span>
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ResizableHandleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ResizableHandle',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.role]': 'resizable() ? "separator" : null',
-                        '[attr.tabindex]': 'resizable() ? 0 : null',
-                        '[attr.data-active]': 'active() ? "true" : null',
-                        '[attr.aria-controls]': 'controls()',
-                        '[attr.aria-label]': 'resizable() ? label() : null',
-                        '[attr.aria-orientation]': 'resizable() ? separatorOrientation() : null',
-                        '[attr.aria-valuenow]': 'valueNow()',
-                        '[attr.aria-valuemin]': 'valueMin()',
-                        '[attr.aria-valuemax]': 'valueMax()',
-                        '[attr.aria-valuetext]': 'valueText()',
-                        '(keydown)': 'onKeydown($event)',
-                        '(pointerdown)': 'onPointerDown($event)',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ResizableHandleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ResizableHandle",
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "resizable() ? \"separator\" : null",
+				"[attr.tabindex]": "resizable() ? 0 : null",
+				"[attr.data-active]": "active() ? \"true\" : null",
+				"[attr.aria-controls]": "controls()",
+				"[attr.aria-label]": "resizable() ? label() : null",
+				"[attr.aria-orientation]": "resizable() ? separatorOrientation() : null",
+				"[attr.aria-valuenow]": "valueNow()",
+				"[attr.aria-valuemin]": "valueMin()",
+				"[attr.aria-valuemax]": "valueMax()",
+				"[attr.aria-valuetext]": "valueText()",
+				"(keydown)": "onKeydown($event)",
+				"(pointerdown)": "onPointerDown($event)"
+			},
+			template: `
     @if (withHandle()) {
       <span
         aria-hidden="true"
@@ -253,245 +398,306 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </svg>
       </span>
     }
-  `,
-                }]
-        }], propDecorators: { withHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "withHandle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class ResizablePanelGroupComponent extends ResizableGroupContextBase {
-    host = inject((ElementRef));
-    document = inject(DOCUMENT);
-    orientation = input('horizontal', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    panels = contentChildren(ResizablePanelComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
-    handles = contentChildren(ResizableHandleComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "handles" }] : /* istanbul ignore next */ []));
-    pointerSession = null;
-    removePointerListeners = null;
-    classes = computed(() => cn('flex w-full min-h-0 min-w-0 items-stretch', this.orientation() === 'horizontal' ? 'flex-row' : 'flex-col', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    syncLayout = effect(() => {
-        const panels = this.panels();
-        void this.handles();
-        if (!panels.length) {
-            return;
-        }
-        untracked(() => this.initializeLayout(panels));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "syncLayout" }] : /* istanbul ignore next */ []));
-    groupOrientation() {
-        return this.orientation();
-    }
-    panelDirection() {
-        const view = this.document.defaultView;
-        if (!view) {
-            return 'ltr';
-        }
-        return view.getComputedStyle(this.host.nativeElement).direction === 'rtl' ? 'rtl' : 'ltr';
-    }
-    pairState(handle) {
-        const pair = this.resolvePair(handle);
-        if (!pair) {
-            return null;
-        }
-        const bounds = this.boundsForPair(pair);
-        return {
-            panelId: pair.previous.panelId(),
-            valueNow: pair.previous.size(),
-            valueMin: bounds.min,
-            valueMax: bounds.max,
-        };
-    }
-    beginPointerResize(handle, event) {
-        const pair = this.resolvePair(handle);
-        if (!pair) {
-            return;
-        }
-        this.finishPointerResize();
-        handle.setActive(true);
-        this.pointerSession = {
-            handle,
-            pair,
-            startCoordinate: this.coordinateFromEvent(event),
-            previousSize: pair.previous.size(),
-        };
-        const move = (nextEvent) => {
-            const session = this.pointerSession;
-            if (!session) {
-                return;
-            }
-            const containerSize = this.containerSize();
-            if (containerSize <= 0) {
-                return;
-            }
-            const delta = this.coordinateFromEvent(nextEvent) - session.startCoordinate;
-            const directionFactor = this.orientation() === 'horizontal' && this.panelDirection() === 'rtl' ? -1 : 1;
-            const deltaPercent = (delta / containerSize) * 100 * directionFactor;
-            this.applyPrimarySize(session.pair, session.previousSize + deltaPercent);
-        };
-        const end = () => this.finishPointerResize();
-        this.document.addEventListener('pointermove', move);
-        this.document.addEventListener('pointerup', end);
-        this.document.addEventListener('pointercancel', end);
-        this.removePointerListeners = () => {
-            this.document.removeEventListener('pointermove', move);
-            this.document.removeEventListener('pointerup', end);
-            this.document.removeEventListener('pointercancel', end);
-        };
-    }
-    handleKeydown(handle, event) {
-        const pair = this.resolvePair(handle);
-        if (!pair) {
-            return;
-        }
-        const current = pair.previous.size();
-        const bounds = this.boundsForPair(pair);
-        const horizontalStep = this.panelDirection() === 'rtl' ? -10 : 10;
-        switch (event.key) {
-            case 'ArrowRight':
-                if (this.orientation() !== 'horizontal') {
-                    return;
-                }
-                this.applyPrimarySize(pair, current + horizontalStep);
-                break;
-            case 'ArrowLeft':
-                if (this.orientation() !== 'horizontal') {
-                    return;
-                }
-                this.applyPrimarySize(pair, current - horizontalStep);
-                break;
-            case 'ArrowDown':
-                if (this.orientation() !== 'vertical') {
-                    return;
-                }
-                this.applyPrimarySize(pair, current + 10);
-                break;
-            case 'ArrowUp':
-                if (this.orientation() !== 'vertical') {
-                    return;
-                }
-                this.applyPrimarySize(pair, current - 10);
-                break;
-            case 'Home':
-                this.applyPrimarySize(pair, bounds.min);
-                break;
-            case 'End':
-                this.applyPrimarySize(pair, bounds.max);
-                break;
-            case 'Enter': {
-                const remembered = handle.rememberedPrimarySize();
-                if (current > bounds.min + 0.5) {
-                    handle.rememberPrimarySize(current);
-                    this.applyPrimarySize(pair, bounds.min);
-                }
-                else if (remembered != null) {
-                    this.applyPrimarySize(pair, remembered);
-                }
-                else {
-                    this.applyPrimarySize(pair, (bounds.min + bounds.max) / 2);
-                }
-                break;
-            }
-            default:
-                return;
-        }
-        event.preventDefault();
-    }
-    ngOnDestroy() {
-        this.finishPointerResize();
-    }
-    finishPointerResize() {
-        this.pointerSession?.handle.setActive(false);
-        this.pointerSession = null;
-        this.removePointerListeners?.();
-        this.removePointerListeners = null;
-    }
-    initializeLayout(panels) {
-        const minimums = panels.map((panel) => panel.minSizePercent());
-        const maximums = panels.map((panel, index) => Math.max(minimums[index], panel.maxSizePercent()));
-        const preferred = panels.map((panel) => panel.preferredSizePercent());
-        const sizes = resolveInitialResizableSizes(preferred, minimums, maximums);
-        panels.forEach((panel, index) => panel.setSize(sizes[index]));
-    }
-    resolvePair(handle) {
-        const panels = new Map(this.panels().map((panel) => [panel.nativeElement(), panel]));
-        const children = Array.from(this.host.nativeElement.children);
-        const handleIndex = children.indexOf(handle.nativeElement());
-        if (handleIndex === -1) {
-            return null;
-        }
-        let previous = null;
-        let next = null;
-        for (let index = handleIndex - 1; index >= 0; index -= 1) {
-            previous = panels.get(children[index]) ?? null;
-            if (previous) {
-                break;
-            }
-        }
-        for (let index = handleIndex + 1; index < children.length; index += 1) {
-            next = panels.get(children[index]) ?? null;
-            if (next) {
-                break;
-            }
-        }
-        if (!previous || !next) {
-            return null;
-        }
-        return { previous, next };
-    }
-    boundsForPair(pair) {
-        const pairTotal = pair.previous.size() + pair.next.size();
-        const min = Math.max(pair.previous.minSizePercent(), pairTotal - pair.next.maxSizePercent());
-        const max = Math.min(pair.previous.maxSizePercent(), pairTotal - pair.next.minSizePercent());
-        if (min > max) {
-            return { min: pairTotal / 2, max: pairTotal / 2 };
-        }
-        return { min: roundResizablePercentage(min), max: roundResizablePercentage(max) };
-    }
-    applyPrimarySize(pair, nextPrimarySize) {
-        const pairTotal = pair.previous.size() + pair.next.size();
-        const bounds = this.boundsForPair(pair);
-        const primarySize = roundResizablePercentage(clampResizableValue(nextPrimarySize, bounds.min, bounds.max));
-        const secondarySize = roundResizablePercentage(pairTotal - primarySize);
-        pair.previous.setSize(primarySize);
-        pair.next.setSize(secondarySize);
-    }
-    containerSize() {
-        const rect = this.host.nativeElement.getBoundingClientRect();
-        return this.orientation() === 'horizontal' ? rect.width : rect.height;
-    }
-    coordinateFromEvent(event) {
-        return this.orientation() === 'horizontal' ? event.clientX : event.clientY;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ResizablePanelGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: ResizablePanelGroupComponent, isStandalone: true, selector: "ResizablePanelGroup", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()" } }, providers: [
-            {
-                provide: ResizableGroupContextBase,
-                useExisting: forwardRef(() => ResizablePanelGroupComponent),
-            },
-        ], queries: [{ propertyName: "panels", predicate: ResizablePanelComponent, isSignal: true }, { propertyName: "handles", predicate: ResizableHandleComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ResizablePanelGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ResizablePanelGroup',
-                    providers: [
-                        {
-                            provide: ResizableGroupContextBase,
-                            useExisting: forwardRef(() => ResizablePanelGroupComponent),
-                        },
-                    ],
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-orientation]': 'orientation()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ResizablePanelComponent), { isSignal: true }] }], handles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ResizableHandleComponent), { isSignal: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ResizableGroupContextBase, ResizableHandleComponent, ResizablePanelComponent, ResizablePanelGroupComponent, clampResizableValue, parseResizablePercent, resolveInitialResizableSizes, roundResizablePercentage, toResizableAriaValue };
+  `
+		}]
+	}],
+	propDecorators: {
+		withHandle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "withHandle",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var ResizablePanelGroupComponent = class ResizablePanelGroupComponent extends ResizableGroupContextBase {
+	host = inject(ElementRef);
+	document = inject(DOCUMENT);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	panels = contentChildren(ResizablePanelComponent, ...ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []);
+	handles = contentChildren(ResizableHandleComponent, ...ngDevMode ? [{ debugName: "handles" }] : /* istanbul ignore next */ []);
+	pointerSession = null;
+	removePointerListeners = null;
+	classes = computed(() => cn("flex w-full min-h-0 min-w-0 items-stretch", this.orientation() === "horizontal" ? "flex-row" : "flex-col", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	syncLayout = effect(() => {
+		const panels = this.panels();
+		this.handles();
+		if (!panels.length) return;
+		untracked(() => this.initializeLayout(panels));
+	}, ...ngDevMode ? [{ debugName: "syncLayout" }] : /* istanbul ignore next */ []);
+	groupOrientation() {
+		return this.orientation();
+	}
+	panelDirection() {
+		const view = this.document.defaultView;
+		if (!view) return "ltr";
+		return view.getComputedStyle(this.host.nativeElement).direction === "rtl" ? "rtl" : "ltr";
+	}
+	pairState(handle) {
+		const pair = this.resolvePair(handle);
+		if (!pair) return null;
+		const bounds = this.boundsForPair(pair);
+		return {
+			panelId: pair.previous.panelId(),
+			valueNow: pair.previous.size(),
+			valueMin: bounds.min,
+			valueMax: bounds.max
+		};
+	}
+	beginPointerResize(handle, event) {
+		const pair = this.resolvePair(handle);
+		if (!pair) return;
+		this.finishPointerResize();
+		handle.setActive(true);
+		this.pointerSession = {
+			handle,
+			pair,
+			startCoordinate: this.coordinateFromEvent(event),
+			previousSize: pair.previous.size()
+		};
+		const move = (nextEvent) => {
+			const session = this.pointerSession;
+			if (!session) return;
+			const containerSize = this.containerSize();
+			if (containerSize <= 0) return;
+			const delta = this.coordinateFromEvent(nextEvent) - session.startCoordinate;
+			const directionFactor = this.orientation() === "horizontal" && this.panelDirection() === "rtl" ? -1 : 1;
+			const deltaPercent = delta / containerSize * 100 * directionFactor;
+			this.applyPrimarySize(session.pair, session.previousSize + deltaPercent);
+		};
+		const end = () => this.finishPointerResize();
+		this.document.addEventListener("pointermove", move);
+		this.document.addEventListener("pointerup", end);
+		this.document.addEventListener("pointercancel", end);
+		this.removePointerListeners = () => {
+			this.document.removeEventListener("pointermove", move);
+			this.document.removeEventListener("pointerup", end);
+			this.document.removeEventListener("pointercancel", end);
+		};
+	}
+	handleKeydown(handle, event) {
+		const pair = this.resolvePair(handle);
+		if (!pair) return;
+		const current = pair.previous.size();
+		const bounds = this.boundsForPair(pair);
+		const horizontalStep = this.panelDirection() === "rtl" ? -10 : 10;
+		switch (event.key) {
+			case "ArrowRight":
+				if (this.orientation() !== "horizontal") return;
+				this.applyPrimarySize(pair, current + horizontalStep);
+				break;
+			case "ArrowLeft":
+				if (this.orientation() !== "horizontal") return;
+				this.applyPrimarySize(pair, current - horizontalStep);
+				break;
+			case "ArrowDown":
+				if (this.orientation() !== "vertical") return;
+				this.applyPrimarySize(pair, current + 10);
+				break;
+			case "ArrowUp":
+				if (this.orientation() !== "vertical") return;
+				this.applyPrimarySize(pair, current - 10);
+				break;
+			case "Home":
+				this.applyPrimarySize(pair, bounds.min);
+				break;
+			case "End":
+				this.applyPrimarySize(pair, bounds.max);
+				break;
+			case "Enter": {
+				const remembered = handle.rememberedPrimarySize();
+				if (current > bounds.min + .5) {
+					handle.rememberPrimarySize(current);
+					this.applyPrimarySize(pair, bounds.min);
+				} else if (remembered != null) this.applyPrimarySize(pair, remembered);
+				else this.applyPrimarySize(pair, (bounds.min + bounds.max) / 2);
+				break;
+			}
+			default: return;
+		}
+		event.preventDefault();
+	}
+	ngOnDestroy() {
+		this.finishPointerResize();
+	}
+	finishPointerResize() {
+		this.pointerSession?.handle.setActive(false);
+		this.pointerSession = null;
+		this.removePointerListeners?.();
+		this.removePointerListeners = null;
+	}
+	initializeLayout(panels) {
+		const minimums = panels.map((panel) => panel.minSizePercent());
+		const maximums = panels.map((panel, index) => Math.max(minimums[index], panel.maxSizePercent()));
+		const sizes = resolveInitialResizableSizes(panels.map((panel) => panel.preferredSizePercent()), minimums, maximums);
+		panels.forEach((panel, index) => panel.setSize(sizes[index]));
+	}
+	resolvePair(handle) {
+		const panels = new Map(this.panels().map((panel) => [panel.nativeElement(), panel]));
+		const children = Array.from(this.host.nativeElement.children);
+		const handleIndex = children.indexOf(handle.nativeElement());
+		if (handleIndex === -1) return null;
+		let previous = null;
+		let next = null;
+		for (let index = handleIndex - 1; index >= 0; index -= 1) {
+			previous = panels.get(children[index]) ?? null;
+			if (previous) break;
+		}
+		for (let index = handleIndex + 1; index < children.length; index += 1) {
+			next = panels.get(children[index]) ?? null;
+			if (next) break;
+		}
+		if (!previous || !next) return null;
+		return {
+			previous,
+			next
+		};
+	}
+	boundsForPair(pair) {
+		const pairTotal = pair.previous.size() + pair.next.size();
+		const min = Math.max(pair.previous.minSizePercent(), pairTotal - pair.next.maxSizePercent());
+		const max = Math.min(pair.previous.maxSizePercent(), pairTotal - pair.next.minSizePercent());
+		if (min > max) return {
+			min: pairTotal / 2,
+			max: pairTotal / 2
+		};
+		return {
+			min: roundResizablePercentage(min),
+			max: roundResizablePercentage(max)
+		};
+	}
+	applyPrimarySize(pair, nextPrimarySize) {
+		const pairTotal = pair.previous.size() + pair.next.size();
+		const bounds = this.boundsForPair(pair);
+		const primarySize = roundResizablePercentage(clampResizableValue(nextPrimarySize, bounds.min, bounds.max));
+		const secondarySize = roundResizablePercentage(pairTotal - primarySize);
+		pair.previous.setSize(primarySize);
+		pair.next.setSize(secondarySize);
+	}
+	containerSize() {
+		const rect = this.host.nativeElement.getBoundingClientRect();
+		return this.orientation() === "horizontal" ? rect.width : rect.height;
+	}
+	coordinateFromEvent(event) {
+		return this.orientation() === "horizontal" ? event.clientX : event.clientY;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ResizablePanelGroupComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: ResizablePanelGroupComponent,
+		isStandalone: true,
+		selector: "ResizablePanelGroup",
+		inputs: {
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-orientation": "orientation()"
+		} },
+		providers: [{
+			provide: ResizableGroupContextBase,
+			useExisting: forwardRef(() => ResizablePanelGroupComponent)
+		}],
+		queries: [{
+			propertyName: "panels",
+			predicate: ResizablePanelComponent,
+			isSignal: true
+		}, {
+			propertyName: "handles",
+			predicate: ResizableHandleComponent,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ResizablePanelGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ResizablePanelGroup",
+			providers: [{
+				provide: ResizableGroupContextBase,
+				useExisting: forwardRef(() => ResizablePanelGroupComponent)
+			}],
+			host: {
+				"[class]": "classes()",
+				"[attr.data-orientation]": "orientation()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		panels: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => ResizablePanelComponent), { isSignal: true }]
+		}],
+		handles: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => ResizableHandleComponent), { isSignal: true }]
+		}]
+	}
+});
+export { ResizableGroupContextBase, ResizableHandleComponent, ResizablePanelComponent, ResizablePanelGroupComponent, clampResizableValue, parseResizablePercent, resolveInitialResizableSizes, roundResizablePercentage, toResizableAriaValue };