@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-splitter.mjs

@@ -0,0 +1,843 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, input, Directive, model, viewChild, TemplateRef, Component, inject, output, DestroyRef, ElementRef, signal, afterNextRender, afterRenderEffect, contentChildren } from '@angular/core';
+import { where, compact, from } from '@mirei/ts-collections';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { cva } from 'class-variance-authority';
+import { v4 } from 'uuid';
+import { Directionality } from '@angular/cdk/bidi';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent, map, merge, filter, tap, skipUntil, takeUntil } from 'rxjs';
+import { LucideChevronLeft, LucideChevronRight, LucideChevronUp, LucideChevronDown } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+
+class SplitterPaneStyleDirective {
+    constructor() {
+        this.#autoSizedPane = computed(() => {
+            const paneList = this.paneList();
+            const panes = where(paneList, pane => !(pane.collapsible() && pane.collapsed()));
+            if (!panes.any()) {
+                return null;
+            }
+            return panes.firstOrDefault(pane => pane.size() === "") ?? panes.last();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#autoSizedPane" }] : /* istanbul ignore next */ []));
+        this.styles = computed(() => {
+            const pane = this.pane();
+            const flexBasis = this.getPaneFlexBasis(pane);
+            const flexGrow = this.getPaneFlexGrow(pane);
+            const flexShrink = this.getPaneFlexShrink(pane);
+            const styles = { flexGrow, flexShrink, flexBasis };
+            return styles;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+        this.pane = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pane" }] : /* istanbul ignore next */ []));
+        this.paneList = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paneList" }] : /* istanbul ignore next */ []));
+    }
+    #autoSizedPane;
+    getFractionalWeight(size) {
+        if (typeof size !== "string") {
+            return null;
+        }
+        const match = size.trim().match(/^([0-9]*\.?[0-9]+)fr$/i);
+        if (match === null) {
+            return null;
+        }
+        const weight = Number(match[1]);
+        return Number.isFinite(weight) ? weight : 1;
+    }
+    getPaneFlexBasis(pane) {
+        if (pane.collapsible() && pane.collapsed()) {
+            return "0px";
+        }
+        const size = this.getPaneSize(pane);
+        if (size === null || this.isFractionalSize(size)) {
+            return "0px";
+        }
+        return size;
+    }
+    getPaneFlexGrow(pane) {
+        if (pane.collapsible() && pane.collapsed()) {
+            return "0";
+        }
+        const size = this.getPaneSize(pane);
+        const fractionalWeight = this.getFractionalWeight(size);
+        if (fractionalWeight !== null) {
+            return fractionalWeight.toString();
+        }
+        if (pane.uid === this.#autoSizedPane()?.uid) {
+            return "1";
+        }
+        return size === null ? "1" : "0";
+    }
+    getPaneFlexShrink(pane) {
+        return pane.collapsible() && pane.collapsed() ? "0" : "1";
+    }
+    getPaneSize(pane) {
+        const size = pane.size();
+        if (size === "" || size === undefined || size === null) {
+            return null;
+        }
+        if (typeof size === "number") {
+            return `${size}px`;
+        }
+        return size;
+    }
+    isFractionalSize(size) {
+        if (typeof size !== "string") {
+            return false;
+        }
+        return size.trim().toLowerCase().endsWith("fr");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterPaneStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: SplitterPaneStyleDirective, isStandalone: true, selector: "div[monaSplitterPaneStyle]", inputs: { pane: { classPropertyName: "pane", publicName: "pane", isSignal: true, isRequired: true, transformFunction: null }, paneList: { classPropertyName: "paneList", publicName: "paneList", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style": "styles()", "aria-hidden": "pane().collapsible() && pane().collapsed()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterPaneStyleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "div[monaSplitterPaneStyle]",
+                    host: {
+                        "[style]": "styles()",
+                        "[aria-hidden]": "pane().collapsible() && pane().collapsed()"
+                    }
+                }]
+        }], propDecorators: { pane: [{ type: i0.Input, args: [{ isSignal: true, alias: "pane", required: true }] }], paneList: [{ type: i0.Input, args: [{ isSignal: true, alias: "paneList", required: true }] }] } });
+
+const splitterBaseVariants = cva(`
+        flex w-full h-full overflow-hidden min-w-0 min-h-0
+    `, {
+    variants: {
+        orientation: {
+            horizontal: "flex-row",
+            vertical: "flex-col"
+        }
+    },
+    defaultVariants: {
+        orientation: "horizontal"
+    }
+});
+const splitterResizerVariants = cva(`
+        flex items-center justify-center
+        relative bg-accent
+        hover:bg-accent-hover
+        active:bg-primary/40
+        shrink-0 outline-none
+        focus-visible:bg-primary
+    `, {
+    variants: {
+        orientation: {
+            horizontal: "w-0.5 flex-col ",
+            vertical: "h-0.5 flex-row"
+        },
+        resizing: {
+            true: "",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+        resizing: false
+    }
+});
+const splitterResizerHandleVariants = cva(`
+        flex items-center justify-center
+        [&_button]:p-0
+    `, {
+    variants: {
+        orientation: {
+            horizontal: "flex-row [&_button]:w-3.5 [&_button]:h-6",
+            vertical: "flex-col [&_button]:h-3.5 [&_button]:w-6"
+        }
+    },
+    defaultVariants: {
+        orientation: "horizontal"
+    }
+});
+
+const splitterBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return splitterBaseVariants;
+        default:
+            return splitterBaseVariants;
+    }
+};
+const splitterResizerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return splitterResizerVariants;
+        default:
+            return splitterResizerVariants;
+    }
+};
+const splitterResizerHandleThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return splitterResizerHandleVariants;
+        default:
+            return splitterResizerHandleVariants;
+    }
+};
+
+class SplitterPaneComponent {
+    constructor() {
+        /**
+         * @description Whether the pane is collapsible.
+         */
+        this.collapsible = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the pane is collapsed.
+         */
+        this.collapsed = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The maximum size of the pane.
+         */
+        this.max = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The minimum size of the pane.
+         */
+        this.min = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Whether the pane is resizable.
+         */
+        this.resizable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The size of the pane.
+         */
+        this.size = model("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.template = viewChild.required(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+        this.uid = v4();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SplitterPaneComponent, isStandalone: true, selector: "mona-splitter-pane", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", size: "sizeChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
+    `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterPaneComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "mona-splitter-pane",
+                    template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
+    `
+                }]
+        }], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+class SplitterResizerHandleComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const orientation = this.orientation();
+            return splitterResizerHandleThemeVariants(theme)({ orientation });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.collapseNext = output();
+        this.collapsePrevious = output();
+        this.nextControlsVisible = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextControlsVisible" }] : /* istanbul ignore next */ []));
+        this.orientation = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.previousControlsVisible = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previousControlsVisible" }] : /* istanbul ignore next */ []));
+        this.resizable = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    onPointerDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterResizerHandleComponent, isStandalone: true, selector: "mona-splitter-resizer-handle", inputs: { nextControlsVisible: { classPropertyName: "nextControlsVisible", publicName: "nextControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousControlsVisible: { classPropertyName: "previousControlsVisible", publicName: "previousControlsVisible", isSignal: true, isRequired: true, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { collapseNext: "collapseNext", collapsePrevious: "collapsePrevious" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (orientation() === \"horizontal\") {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse previous pane\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronLeft [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse next pane\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronRight [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n} @else {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane above\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronUp [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane below\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronDown [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n}\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerHandleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-splitter-resizer-handle", imports: [ButtonDirective, LucideChevronLeft, LucideChevronRight, LucideChevronUp, LucideChevronDown], host: {
+                        "[class]": "baseClass()"
+                    }, template: "@if (orientation() === \"horizontal\") {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse previous pane\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronLeft [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-6 w-0.5 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse next pane\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronRight [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n} @else {\r\n    @if (previousControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane above\"\r\n            (click)=\"collapsePrevious.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronUp [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n    @if (resizable()) {\r\n        <div class=\"flex h-0.5 w-6 bg-primary/40\"></div>\r\n    }\r\n    @if (nextControlsVisible()) {\r\n        <button\r\n            monaButton\r\n            look=\"secondary\"\r\n            [rounded]=\"'none'\"\r\n            aria-label=\"Collapse pane below\"\r\n            (click)=\"collapseNext.emit($event)\"\r\n            (pointerdown)=\"onPointerDown($event)\">\r\n            <svg lucideChevronDown [size]=\"12\"></svg>\r\n        </button>\r\n    }\r\n}\r\n" }]
+        }], propDecorators: { collapseNext: [{ type: i0.Output, args: ["collapseNext"] }], collapsePrevious: [{ type: i0.Output, args: ["collapsePrevious"] }], nextControlsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextControlsVisible", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], previousControlsVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousControlsVisible", required: true }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: true }] }] } });
+
+class SplitterResizerComponent {
+    #destroyRef;
+    #directionality;
+    #hostElementRef;
+    #paneSizeMemory;
+    #splitter;
+    #themeService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#directionality = inject(Directionality);
+        this.#hostElementRef = inject(ElementRef);
+        this.#paneSizeMemory = new WeakMap();
+        this.#splitter = inject(SplitterComponent);
+        this.#themeService = inject(ThemeService);
+        this.ariaValueMax = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaValueMax" }] : /* istanbul ignore next */ []));
+        this.ariaValueMin = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaValueMin" }] : /* istanbul ignore next */ []));
+        this.ariaValueNow = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const orientation = this.orientation();
+            const resizing = this.resizing();
+            return splitterResizerThemeVariants(theme)({ orientation, resizing });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.hovered = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+        this.isInert = computed(() => {
+            return !this.resizable() && this.getCollapsibleTargetPane() === null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInert" }] : /* istanbul ignore next */ []));
+        this.nextCollapseControlsVisible = computed(() => {
+            return this.hovered() && this.nextPane().collapsible() && !this.nextPane().collapsed();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextCollapseControlsVisible" }] : /* istanbul ignore next */ []));
+        this.previousCollapseControlsVisible = computed(() => {
+            return this.hovered() && this.previousPane().collapsible() && !this.previousPane().collapsed();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previousCollapseControlsVisible" }] : /* istanbul ignore next */ []));
+        this.resizable = computed(() => {
+            return this.previousPane().resizable() && this.nextPane().resizable();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+        this.resizing = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
+        this.nextPane = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextPane" }] : /* istanbul ignore next */ []));
+        this.orientation = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.previousPane = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previousPane" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => {
+                this.setHoverEvents();
+                this.setPointerEvents();
+                this.setKeyboardEvents();
+            }
+        });
+        afterRenderEffect({
+            read: () => {
+                this.previousPane().size();
+                this.previousPane().collapsed();
+                this.nextPane().size();
+                this.nextPane().collapsed();
+                this.updateAriaSeparatorValues();
+            }
+        });
+    }
+    collapseNext(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.collapsePane("next");
+    }
+    collapsePrevious(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.collapsePane("previous");
+    }
+    toggleCollapse() {
+        const targetPane = this.getCollapsibleTargetPane();
+        if (targetPane === null) {
+            return;
+        }
+        const targetElement = targetPane.uid === this.previousPane().uid ? this.getPaneElements()[0] : this.getPaneElements()[1];
+        const direction = targetPane.uid === this.previousPane().uid ? "previous" : "next";
+        this.togglePane(targetPane, targetElement, direction);
+    }
+    clamp(value, min, max) {
+        if (Number.isFinite(max)) {
+            return Math.min(Math.max(value, min), max);
+        }
+        return Math.max(value, min);
+    }
+    clampPaneSizes(total, desiredPrev, previousPane, nextPane) {
+        const prevMin = this.getMinSize(previousPane);
+        const nextMin = this.getMinSize(nextPane);
+        const prevMaxRaw = this.getMaxSize(previousPane);
+        const nextMaxRaw = this.getMaxSize(nextPane);
+        const prevMax = Math.min(prevMaxRaw, total - nextMin);
+        const prevMinBound = Math.max(prevMin, total - nextMaxRaw);
+        let prevSize = this.clamp(desiredPrev, prevMinBound, prevMax);
+        let nextSize = total - prevSize;
+        if (nextSize < nextMin) {
+            nextSize = nextMin;
+            prevSize = total - nextSize;
+        }
+        else if (nextSize > nextMaxRaw) {
+            nextSize = nextMaxRaw;
+            prevSize = total - nextSize;
+        }
+        // final guard for prev bounds
+        prevSize = this.clamp(prevSize, prevMin, prevMaxRaw);
+        nextSize = total - prevSize;
+        return [prevSize, nextSize];
+    }
+    collapseAndRedistribute(targetPane, targetSize, leading, trailing) {
+        if (targetSize <= 0) {
+            return;
+        }
+        const leadingNeighbor = leading !== null && !(leading.pane.collapsible() && leading.pane.collapsed()) ? leading : null;
+        const trailingNeighbor = trailing !== null && !(trailing.pane.collapsible() && trailing.pane.collapsed()) ? trailing : null;
+        const neighbors = compact([leadingNeighbor, trailingNeighbor]).toArray();
+        if (neighbors.length === 0) {
+            targetPane.collapsed.set(true);
+            return;
+        }
+        this.distributeSpaceToNeighbors(targetSize, neighbors);
+        targetPane.collapsed.set(true);
+    }
+    collapsePane(direction) {
+        const target = this.pickTargetPane(direction);
+        if (target === null || !target.pane.collapsible()) {
+            return;
+        }
+        this.togglePane(target.pane, target.element, target.direction);
+    }
+    distributeSpaceToNeighbors(space, neighbors) {
+        let remaining = space;
+        const capacities = neighbors.map(neighbor => {
+            const max = this.getMaxSize(neighbor.pane);
+            const capacity = max === Number.POSITIVE_INFINITY ? Number.POSITIVE_INFINITY : Math.max(0, max - neighbor.size);
+            return { neighbor, capacity };
+        });
+        const infiniteRecipients = capacities.filter(c => !Number.isFinite(c.capacity));
+        if (infiniteRecipients.length > 0) {
+            const share = remaining / infiniteRecipients.length;
+            infiniteRecipients.forEach(c => {
+                c.neighbor.pane.size.set(`${c.neighbor.size + share}px`);
+            });
+            return;
+        }
+        let available = capacities.reduce((sum, c) => sum + c.capacity, 0);
+        if (available <= 0) {
+            return;
+        }
+        capacities.forEach(c => {
+            const share = (c.capacity / available) * remaining;
+            c.neighbor.pane.size.set(`${c.neighbor.size + share}px`);
+        });
+    }
+    ensureExpandedBeforeResize() {
+        if (this.previousPane().collapsed()) {
+            this.previousPane().collapsed.set(false);
+        }
+        if (this.nextPane().collapsed()) {
+            this.nextPane().collapsed.set(false);
+        }
+    }
+    expandPane(targetPane, desiredSize, leading, trailing) {
+        const targetMin = this.getMinSize(targetPane);
+        const targetMax = this.getMaxSize(targetPane);
+        if (desiredSize <= 0) {
+            targetPane.collapsed.set(false);
+            return;
+        }
+        const currentLeadingSize = leading?.size ?? 0;
+        const currentTrailingSize = trailing?.size ?? 0;
+        const neighborTotal = currentLeadingSize + currentTrailingSize;
+        if (neighborTotal <= 0) {
+            const clampedTarget = this.clamp(desiredSize, targetMin, targetMax);
+            targetPane.size.set(`${clampedTarget}px`);
+            targetPane.collapsed.set(false);
+            return;
+        }
+        const availableFromLeading = leading !== null ? Math.max(0, currentLeadingSize - this.getMinSize(leading.pane)) : 0;
+        const availableFromTrailing = trailing !== null ? Math.max(0, currentTrailingSize - this.getMinSize(trailing.pane)) : 0;
+        const availableTotal = availableFromLeading + availableFromTrailing;
+        if (availableTotal <= 0) {
+            targetPane.collapsed.set(false);
+            return;
+        }
+        const desiredClamped = this.clamp(desiredSize, targetMin, targetMax);
+        const targetSize = Math.min(desiredClamped, availableTotal);
+        if (leading !== null && availableFromLeading > 0) {
+            const takeFromLeading = targetSize * (availableFromLeading / availableTotal);
+            const newSize = Math.max(this.getMinSize(leading.pane), currentLeadingSize - takeFromLeading);
+            leading.pane.size.set(`${newSize}px`);
+        }
+        if (trailing !== null && availableFromTrailing > 0) {
+            const takeFromTrailing = targetSize * (availableFromTrailing / availableTotal);
+            const newSize = Math.max(this.getMinSize(trailing.pane), currentTrailingSize - takeFromTrailing);
+            trailing.pane.size.set(`${newSize}px`);
+        }
+        targetPane.size.set(`${targetSize}px`);
+        targetPane.collapsed.set(false);
+    }
+    findPaneToLeft(element) {
+        let cursor = element.previousElementSibling;
+        while (cursor !== null) {
+            if (cursor.dataset["pid"]) {
+                const pane = this.#splitter.getPaneByUid(cursor.dataset["pid"]);
+                if (pane != null) {
+                    return { pane, element: cursor };
+                }
+            }
+            cursor = cursor.previousElementSibling;
+        }
+        return null;
+    }
+    findPaneToRight(element) {
+        let cursor = element.nextElementSibling;
+        while (cursor !== null) {
+            if (cursor.dataset["pid"]) {
+                const pane = this.#splitter.getPaneByUid(cursor.dataset["pid"]);
+                if (pane != null) {
+                    return { pane, element: cursor };
+                }
+            }
+            cursor = cursor.nextElementSibling;
+        }
+        return null;
+    }
+    focusAdjacentResizer(forward) {
+        let cursor = this.#hostElementRef.nativeElement;
+        if (!cursor) {
+            return false;
+        }
+        while (true) {
+            cursor = forward ? cursor.nextElementSibling : cursor.previousElementSibling;
+            if (cursor === null) {
+                return false;
+            }
+            if (cursor instanceof HTMLElement && cursor.tagName.toLowerCase() === "mona-splitter-resizer") {
+                cursor.focus();
+                return true;
+            }
+        }
+    }
+    getCollapsibleTargetPane() {
+        const previousPane = this.previousPane();
+        const nextPane = this.nextPane();
+        if (previousPane.collapsible() && previousPane.collapsed()) {
+            return previousPane;
+        }
+        if (nextPane.collapsible() && nextPane.collapsed()) {
+            return nextPane;
+        }
+        if (previousPane.collapsible()) {
+            return previousPane;
+        }
+        if (nextPane.collapsible()) {
+            return nextPane;
+        }
+        return null;
+    }
+    getMaxSize(pane) {
+        const max = pane.max();
+        const parsed = this.parseSizeInput(max);
+        return parsed === null ? Number.POSITIVE_INFINITY : Math.max(0, parsed);
+    }
+    getMinSize(pane) {
+        const min = pane.min();
+        const parsed = this.parseSizeInput(min);
+        return parsed === null ? 0 : Math.max(0, parsed);
+    }
+    getNeighborPanes(targetElement, direction) {
+        const [previousElement, nextElement] = this.getPaneElements();
+        const leadingPane = direction === "previous"
+            ? this.findPaneToLeft(targetElement)
+            : { pane: this.previousPane(), element: previousElement };
+        const trailingPane = direction === "previous"
+            ? { pane: this.nextPane(), element: nextElement }
+            : this.findPaneToRight(targetElement);
+        return {
+            leading: leadingPane !== null ? { ...leadingPane, size: this.measurePaneSize(leadingPane.element) } : null,
+            trailing: trailingPane !== null ? { ...trailingPane, size: this.measurePaneSize(trailingPane.element) } : null
+        };
+    }
+    getPaneElements() {
+        const previousPane = this.#hostElementRef.nativeElement.previousElementSibling;
+        const nextPane = this.#hostElementRef.nativeElement.nextElementSibling;
+        if (previousPane === null || nextPane === null) {
+            throw new Error("The previous or next pane element is not found.");
+        }
+        return [previousPane, nextPane];
+    }
+    getPaneRectangles() {
+        const [previousPane, nextPane] = this.getPaneElements();
+        return [previousPane.getBoundingClientRect(), nextPane.getBoundingClientRect()];
+    }
+    handleCollapserKeys(key) {
+        const orientation = this.orientation();
+        if (orientation === "horizontal") {
+            const isRtl = this.#directionality.value === "rtl";
+            if (key === "ArrowLeft") {
+                this.collapsePane(isRtl ? "next" : "previous");
+                return true;
+            }
+            if (key === "ArrowRight") {
+                this.collapsePane(isRtl ? "previous" : "next");
+                return true;
+            }
+        }
+        else {
+            if (key === "ArrowUp") {
+                this.collapsePane("previous");
+                return true;
+            }
+            if (key === "ArrowDown") {
+                this.collapsePane("next");
+                return true;
+            }
+        }
+        return false;
+    }
+    handleKeydown(event) {
+        const key = event.key;
+        if (key === "Tab") {
+            return this.focusAdjacentResizer(!event.shiftKey);
+        }
+        if (key === "Enter") {
+            this.toggleCollapse();
+            return true;
+        }
+        if (event.altKey) {
+            return this.handleCollapserKeys(key);
+        }
+        return this.handleResizerKeys(key);
+    }
+    handleResizerKeys(key) {
+        const orientation = this.orientation();
+        const step = 10;
+        const previousPane = this.previousPane();
+        const nextPane = this.nextPane();
+        if (!previousPane.resizable() && !nextPane.resizable()) {
+            return false;
+        }
+        if (orientation === "horizontal") {
+            const isRtl = this.#directionality.value === "rtl";
+            if (key === "ArrowLeft") {
+                this.nudgeSplitter(isRtl ? step : -step);
+                return true;
+            }
+            if (key === "ArrowRight") {
+                this.nudgeSplitter(isRtl ? -step : step);
+                return true;
+            }
+        }
+        else {
+            if (key === "ArrowUp") {
+                this.nudgeSplitter(-step);
+                return true;
+            }
+            if (key === "ArrowDown") {
+                this.nudgeSplitter(step);
+                return true;
+            }
+        }
+        return false;
+    }
+    measurePaneSize(paneElement) {
+        const rect = paneElement.getBoundingClientRect();
+        const orientation = this.orientation();
+        return orientation === "horizontal" ? rect.width : rect.height;
+    }
+    nudgeSplitter(delta) {
+        this.ensureExpandedBeforeResize();
+        const [previousRect, nextRect] = this.getPaneRectangles();
+        const total = this.orientation() === "horizontal"
+            ? previousRect.width + nextRect.width
+            : previousRect.height + nextRect.height;
+        const currentPrev = this.orientation() === "horizontal" ? previousRect.width : previousRect.height;
+        const desiredPrev = this.clamp(currentPrev + delta, 0, total);
+        const [prevSize, nextSize] = this.clampPaneSizes(total, desiredPrev, this.previousPane(), this.nextPane());
+        this.updatePaneSizes(`${prevSize}px`, `${nextSize}px`);
+    }
+    parseSizeInput(value) {
+        if (value === null || value === undefined || value === "") {
+            return null;
+        }
+        if (typeof value === "number") {
+            return Number.isFinite(value) ? value : null;
+        }
+        const trimmed = value.trim().toLowerCase();
+        const numeric = parseFloat(trimmed.replace("px", ""));
+        return Number.isFinite(numeric) ? numeric : null;
+    }
+    pickTargetPane(direction) {
+        const [previousElement, nextElement] = this.getPaneElements();
+        const previousPane = this.previousPane();
+        const nextPane = this.nextPane();
+        if (direction === "previous") {
+            if (nextPane.collapsible() && nextPane.collapsed()) {
+                return { pane: nextPane, element: nextElement, direction: "next" };
+            }
+            return { pane: previousPane, element: previousElement, direction: "previous" };
+        }
+        else {
+            if (previousPane.collapsible() && previousPane.collapsed()) {
+                return { pane: previousPane, element: previousElement, direction: "previous" };
+            }
+            return { pane: nextPane, element: nextElement, direction: "next" };
+        }
+    }
+    setHoverEvents() {
+        const host = this.#hostElementRef.nativeElement;
+        const pointerEnter$ = fromEvent(host, "pointerenter").pipe(map(() => true));
+        const pointerLeave$ = fromEvent(host, "pointerleave").pipe(map(() => false));
+        merge(pointerEnter$, pointerLeave$)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(isHovered => {
+            this.hovered.set(isHovered);
+        });
+    }
+    setKeyboardEvents() {
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const handled = this.handleKeydown(event);
+            if (handled) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        });
+    }
+    setPointerEvents() {
+        const pointerDown$ = fromEvent(this.#hostElementRef.nativeElement, "pointerdown").pipe(filter(() => this.resizable()), tap(event => {
+            event.preventDefault();
+            this.#hostElementRef.nativeElement.setPointerCapture(event.pointerId);
+            this.resizing.set(true);
+        }));
+        const pointerUp$ = fromEvent(this.#hostElementRef.nativeElement, "pointerup").pipe(tap(event => {
+            this.#hostElementRef.nativeElement.releasePointerCapture(event.pointerId);
+            this.resizing.set(false);
+            this.setPointerEvents();
+        }));
+        fromEvent(document, "pointermove")
+            .pipe(skipUntil(pointerDown$), takeUntil(pointerUp$))
+            .subscribe(event => {
+            this.ensureExpandedBeforeResize();
+            const orientation = this.orientation();
+            if (orientation === "horizontal") {
+                this.updateHorizontalPaneSizes(event);
+            }
+            else {
+                this.updateVerticalPaneSizes(event);
+            }
+        });
+    }
+    togglePane(targetPane, targetElement, direction) {
+        const neighbors = this.getNeighborPanes(targetElement, direction);
+        if (targetPane.collapsed()) {
+            const storedSize = this.#paneSizeMemory.get(targetPane) ?? this.measurePaneSize(targetElement);
+            this.expandPane(targetPane, storedSize, neighbors.leading, neighbors.trailing);
+        }
+        else {
+            const targetSize = this.measurePaneSize(targetElement);
+            this.#paneSizeMemory.set(targetPane, targetSize);
+            this.collapseAndRedistribute(targetPane, targetSize, neighbors.leading, neighbors.trailing);
+        }
+    }
+    updateAriaSeparatorValues() {
+        const [previousRect, nextRect] = this.getPaneRectangles();
+        const orientation = this.orientation();
+        const previousSize = orientation === "horizontal" ? previousRect.width : previousRect.height;
+        const nextSize = orientation === "horizontal" ? nextRect.width : nextRect.height;
+        const total = previousSize + nextSize;
+        const previousMin = this.getMinSize(this.previousPane());
+        const nextMin = this.getMinSize(this.nextPane());
+        const previousMaxRaw = this.getMaxSize(this.previousPane());
+        const previousMax = Math.min(previousMaxRaw, total - nextMin);
+        this.ariaValueMax.set(Math.round(Number.isFinite(previousMax) ? previousMax : total));
+        this.ariaValueMin.set(Math.round(previousMin));
+        this.ariaValueNow.set(Math.round(previousSize));
+    }
+    updateHorizontalPaneSizes(event) {
+        const [previousRect, nextRect] = this.getPaneRectangles();
+        const maxWidth = previousRect.width + nextRect.width;
+        const desiredPrevWidth = Math.min(Math.max(event.clientX - previousRect.left, 0), maxWidth);
+        const [previousPaneWidth, nextPaneWidth] = this.clampPaneSizes(maxWidth, desiredPrevWidth, this.previousPane(), this.nextPane());
+        this.updatePaneSizes(`${previousPaneWidth}px`, `${nextPaneWidth}px`);
+    }
+    updatePaneSizes(previousPaneSize, nextPaneSize) {
+        this.previousPane().collapsed.set(false);
+        this.nextPane().collapsed.set(false);
+        this.previousPane().size.set(previousPaneSize);
+        this.nextPane().size.set(nextPaneSize);
+    }
+    updateVerticalPaneSizes(event) {
+        const [previousRect, nextRect] = this.getPaneRectangles();
+        const maxHeight = previousRect.height + nextRect.height;
+        const desiredPrevHeight = Math.min(Math.max(event.clientY - previousRect.top, 0), maxHeight);
+        const [previousPaneHeight, nextPaneHeight] = this.clampPaneSizes(maxHeight, desiredPrevHeight, this.previousPane(), this.nextPane());
+        this.updatePaneSizes(`${previousPaneHeight}px`, `${nextPaneHeight}px`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: SplitterResizerComponent, isStandalone: true, selector: "mona-splitter-resizer", inputs: { nextPane: { classPropertyName: "nextPane", publicName: "nextPane", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, previousPane: { classPropertyName: "previousPane", publicName: "previousPane", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "separator" }, listeners: { "dblclick": "toggleCollapse()" }, properties: { "class": "baseClass()", "style.cursor": "resizable() ? (orientation()==='horizontal' ? 'ew-resize' : 'ns-resize') : 'auto'", "attr.aria-orientation": "orientation()", "attr.aria-valuemax": "ariaValueMax()", "attr.aria-valuemin": "ariaValueMin()", "attr.aria-valuenow": "ariaValueNow()", "attr.tabindex": "isInert() ? -1 : 0" } }, ngImport: i0, template: "<mona-splitter-resizer-handle\r\n    (collapseNext)=\"collapseNext($event)\"\r\n    (collapsePrevious)=\"collapsePrevious($event)\"\r\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\r\n    [orientation]=\"orientation()\"\r\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\r\n    [resizable]=\"resizable()\">\r\n</mona-splitter-resizer-handle>\r\n", dependencies: [{ kind: "component", type: SplitterResizerHandleComponent, selector: "mona-splitter-resizer-handle", inputs: ["nextControlsVisible", "orientation", "previousControlsVisible", "resizable"], outputs: ["collapseNext", "collapsePrevious"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterResizerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-splitter-resizer", imports: [SplitterResizerHandleComponent], host: {
+                        "[class]": "baseClass()",
+                        "[style.cursor]": "resizable() ? (orientation()==='horizontal' ? 'ew-resize' : 'ns-resize') : 'auto'",
+                        "(dblclick)": "toggleCollapse()",
+                        role: "separator",
+                        "[attr.aria-orientation]": "orientation()",
+                        "[attr.aria-valuemax]": "ariaValueMax()",
+                        "[attr.aria-valuemin]": "ariaValueMin()",
+                        "[attr.aria-valuenow]": "ariaValueNow()",
+                        "[attr.tabindex]": "isInert() ? -1 : 0"
+                    }, template: "<mona-splitter-resizer-handle\r\n    (collapseNext)=\"collapseNext($event)\"\r\n    (collapsePrevious)=\"collapsePrevious($event)\"\r\n    [nextControlsVisible]=\"nextCollapseControlsVisible()\"\r\n    [orientation]=\"orientation()\"\r\n    [previousControlsVisible]=\"previousCollapseControlsVisible()\"\r\n    [resizable]=\"resizable()\">\r\n</mona-splitter-resizer-handle>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { nextPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPane", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], previousPane: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPane", required: true }] }] } });
+
+class SplitterComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const orientation = this.orientation();
+            return splitterBaseThemeVariants(theme)({ orientation });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.paneList = contentChildren(SplitterPaneComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "paneList" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The layout direction of the splitter panes.
+         * @default "horizontal"
+         */
+        this.orientation = input("horizontal", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    /**
+     * @internal Used by SplitterResizerComponent to resolve sibling panes by id.
+     */
+    getPaneByUid(uid) {
+        return from(this.paneList()).firstOrDefault(pane => pane.uid === uid);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: SplitterComponent, isStandalone: true, selector: "mona-splitter", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "paneList", predicate: SplitterPaneComponent, isSignal: true }], ngImport: i0, template: "@for (pane of paneList(); track pane.uid) {\n    <div\n        class=\"overflow-hidden min-w-0 min-h-0\"\n        [attr.data-pid]=\"pane.uid\"\n        [attr.data-px]=\"$index\"\n        monaSplitterPaneStyle\n        [pane]=\"pane\"\n        [paneList]=\"paneList()\">\n        <ng-container [ngTemplateOutlet]=\"pane.template()\"></ng-container>\n    </div>\n    @if ($index !== $count - 1) {\n        <mona-splitter-resizer\n            [nextPane]=\"paneList()[$index + 1]\"\n            [orientation]=\"orientation()!\"\n            [previousPane]=\"paneList()[$index]\">\n        </mona-splitter-resizer>\n    }\n}\n", dependencies: [{ kind: "component", type: SplitterResizerComponent, selector: "mona-splitter-resizer", inputs: ["nextPane", "orientation", "previousPane"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SplitterPaneStyleDirective, selector: "div[monaSplitterPaneStyle]", inputs: ["pane", "paneList"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SplitterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-splitter", imports: [SplitterResizerComponent, NgTemplateOutlet, SplitterPaneStyleDirective], host: {
+                        "[class]": "baseClass()"
+                    }, template: "@for (pane of paneList(); track pane.uid) {\n    <div\n        class=\"overflow-hidden min-w-0 min-h-0\"\n        [attr.data-pid]=\"pane.uid\"\n        [attr.data-px]=\"$index\"\n        monaSplitterPaneStyle\n        [pane]=\"pane\"\n        [paneList]=\"paneList()\">\n        <ng-container [ngTemplateOutlet]=\"pane.template()\"></ng-container>\n    </div>\n    @if ($index !== $count - 1) {\n        <mona-splitter-resizer\n            [nextPane]=\"paneList()[$index + 1]\"\n            [orientation]=\"orientation()!\"\n            [previousPane]=\"paneList()[$index]\">\n        </mona-splitter-resizer>\n    }\n}\n" }]
+        }], propDecorators: { paneList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SplitterPaneComponent), { isSignal: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/splitter
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SplitterComponent, SplitterPaneComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-splitter.mjs.map