@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-splitter.mjs

@@ -0,0 +1,604 @@
+import * as i0 from '@angular/core';
+import { input, model, computed, Component, signal, inject, ViewContainerRef, output, viewChild, contentChildren, untracked, runInInjectionContext, afterRenderEffect, NgModule } from '@angular/core';
+import { NgnBase, provideSelf, NgnPt } from '@ngneers/controls/base';
+import { generateElementId, registerState } from '@ngneers/controls/utils-ng';
+import { splitterControlTemplate } from '@ngneers/controls-themes/templates/splitter';
+import { NGN_CONFIG, templateTypeFn, elementSizeSignal, NgnTemplate } from '@ngneers/controls/api/ng';
+import { I18n } from '@ngneers/controls/i18n';
+import { throwExp, Logger, NgnError } from '@ngneers/controls/utils';
+import { ResizeEngine } from '@ngneers/controls/api/resize';
+
+/**
+ * @category control
+ */
+class NgnSplitterPanel extends NgnBase {
+    theme = this.injectThemeTemplate(splitterControlTemplate, 'panel');
+    _fallbackAreaName = generateElementId();
+    /**
+     * The name of the panel, used to identify it in the persisted splitter state and in {@link NgnSplitter.panelOrder}.
+     * If nullish, a generated fallback name is used.
+     */
+    name = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * The size of the panel along the splitter's layout axis. Accepts `fr` or `px` units.
+     * @default 1fr
+     */
+    size = model('1fr', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * The minimum size the panel can be resized to.
+     * @default 0px
+     */
+    minSize = model('0px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    /**
+     * The maximum size the panel can be resized to.
+     * @default 100%
+     */
+    maxSize = model('100%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets the `aria-label` for the panel region.
+     */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets the `aria-labelledby` for the panel region.
+     */
+    ariaLabelledBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    gridArea = computed(() => this.name() ?? this._fallbackAreaName, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridArea" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSplitterPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: NgnSplitterPanel, isStandalone: true, selector: "ngn-splitter-panel", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", minSize: "minSizeChange", maxSize: "maxSizeChange" }, host: { attributes: { "role": "region" }, properties: { "style.grid-area": "gridArea()", "aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()" } }, providers: [provideSelf(NgnSplitterPanel)], usesInheritance: true, ngImport: i0, template: "<ng-content />\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSplitterPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-splitter-panel', providers: [provideSelf(NgnSplitterPanel)], host: {
+                        role: 'region',
+                        '[style.grid-area]': 'gridArea()',
+                        '[aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy()',
+                    }, template: "<ng-content />\n" }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }, { type: i0.Output, args: ["minSizeChange"] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }, { type: i0.Output, args: ["maxSizeChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }] } });
+
+/**
+ * Default implementation of the {@link SplitterCalculator} interface.
+ * Delegates all resize math to the generic {@link ResizeEngine}.
+ */
+class DefaultSplitterCalculator {
+    panels;
+    dividers;
+    panelOrder;
+    layout;
+    splitterSize;
+    _engine;
+    constructor(splitter) {
+        this.panels = splitter.panels;
+        this.dividers = splitter.dividers;
+        this.panelOrder = splitter.panelOrder;
+        this.layout = splitter.layout;
+        this.splitterSize = computed(() => this.layout() === 'vertical' ? splitter.elementSize().height : splitter.elementSize().width, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "splitterSize" }] : /* istanbul ignore next */ []));
+        // Create the resize engine with panels mapped as ResizableItems
+        this._engine = new ResizeEngine({
+            items: computed(() => this.orderedPanels()),
+            containerSize: this.splitterSize,
+            gapSizes: this.dividerSizes,
+            distributionMode: computed(() => (splitter.resizeMode?.() ?? 'adjacent')),
+            containerConstrained: signal(true), // Splitter is always constrained
+            lockSizes: computed(() => splitter.lockSizes?.() ?? false),
+        });
+    }
+    orderedPanels = computed(() => {
+        const panels = this.panels();
+        const order = this.panelOrder();
+        return order
+            ? [...panels].sort((a, b) => {
+                const aIndex = order.indexOf(a['gridArea']());
+                const bIndex = order.indexOf(b['gridArea']());
+                if (aIndex === -1 && bIndex === -1)
+                    return 0;
+                if (aIndex === -1)
+                    return 1;
+                if (bIndex === -1)
+                    return -1;
+                return aIndex - bIndex;
+            })
+            : panels;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orderedPanels" }] : /* istanbul ignore next */ []));
+    gridTemplateSizes = computed(() => this._engine.gridTemplateSizes(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridTemplateSizes" }] : /* istanbul ignore next */ []));
+    gridTemplateAreas = computed(() => {
+        const panels = this.orderedPanels();
+        if (panels.length === 0)
+            return null;
+        let result = '';
+        panels.forEach((panel, i) => {
+            if (i > 0) {
+                result +=
+                    this.layout() === 'horizontal' ? ` ngn-divider-${i - 1} ` : ` "ngn-divider-${i - 1}" `;
+            }
+            result += this.layout() === 'horizontal' ? panel['gridArea']() : `"${panel['gridArea']()}"`;
+        });
+        return this.layout() === 'horizontal' ? `"${result}"` : result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridTemplateAreas" }] : /* istanbul ignore next */ []));
+    minSize = computed(() => this._engine.minTotalSize(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    maxSize = computed(() => this._engine.maxTotalSize(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    dragContext = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragContext" }] : /* istanbul ignore next */ []));
+    dividerSizes = computed(() => this.dividers().map(d => {
+        const el = d.rootNodes.find(x => x instanceof HTMLElement);
+        return el ? (this.layout() === 'horizontal' ? el.offsetWidth : el.offsetHeight) : 0;
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dividerSizes" }] : /* istanbul ignore next */ []));
+    startDrag(index, event) {
+        const panels = this.orderedPanels();
+        if (index < 0 || index >= panels.length - 1)
+            return;
+        const startPosition = this.layout() === 'horizontal' ? event.clientX : event.clientY;
+        this.dragContext.set({
+            dividerIndex: index,
+            pointerId: event.pointerId,
+            startPosition,
+        });
+        this._engine.startDrag(index, startPosition);
+    }
+    drag(index, event) {
+        const ctx = this.dragContext();
+        if (!ctx || ctx.dividerIndex !== index || ctx.pointerId !== event.pointerId)
+            return;
+        const currentPosition = this.layout() === 'horizontal' ? event.clientX : event.clientY;
+        this._engine.drag(index, currentPosition);
+    }
+    endDrag(index, event, isCancel) {
+        const ctx = this.dragContext();
+        if (!ctx || ctx.dividerIndex !== index || ctx.pointerId !== event.pointerId)
+            return;
+        this._engine.endDrag(index, isCancel);
+        this.dragContext.set(null);
+    }
+    moveDivider(index, pxDelta) {
+        const panels = this.orderedPanels();
+        if (index < 0 || index >= panels.length - 1)
+            return;
+        const leftPanel = panels[index] ??
+            throwExp('NgnSplitterCalculator', `Left panel is missing for divider at index ${index}`);
+        const rightPanel = panels[index + 1] ??
+            throwExp('NgnSplitterCalculator', `Right panel is missing for divider at index ${index}`);
+        if (!this._engine.isItemSizeCalculated(leftPanel) ||
+            !this._engine.isItemSizeCalculated(rightPanel)) {
+            Logger.warn('Cannot move divider, panel sizes are not calculated');
+            return;
+        }
+        this._engine.moveDivider(index, pxDelta);
+    }
+    /**
+     * Ensures all panels respect their min/max size constraints.
+     * Delegates to the underlying {@link ResizeEngine}.
+     */
+    ensureMinMaxSizes() {
+        this._engine.ensureMinMaxSizes();
+    }
+    /** @internal — used by tests to seed panel sizes into the engine. */
+    setPanelSize(panel, size) {
+        this._engine.setItemSize(panel, size);
+    }
+}
+
+function isSplitterPanelSize(value) {
+    if (typeof value !== 'string')
+        return false;
+    const m = value.match(/^(.+)(px|fr)$/);
+    if (!m || !m[1])
+        return false;
+    if (isNaN(parseFloat(m[1])))
+        return false;
+    return true;
+}
+function getSplitterPanelSizeUnit(value) {
+    return value.slice(-2);
+}
+function getSplitterPanelSizeValue(value) {
+    return parseFloat(value.slice(0, -2));
+}
+function isSplitterPanelSizeLimit(value) {
+    if (typeof value !== 'string')
+        return false;
+    const m = value.match(/^(.+)(px|%)$/);
+    if (!m || !m[1])
+        return false;
+    if (isNaN(parseFloat(m[1])))
+        return false;
+    return true;
+}
+function getSplitterPanelSizeLimitUnit(value) {
+    return value.endsWith('px') ? 'px' : '%';
+}
+function getSplitterPanelSizeLimitValue(value) {
+    return value.endsWith('px') ? parseFloat(value.slice(0, -2)) : parseFloat(value.slice(0, -1));
+}
+function getSplitterPanelSizeLimitInPx(value, totalSize) {
+    const unit = getSplitterPanelSizeLimitUnit(value);
+    const sizeValue = getSplitterPanelSizeLimitValue(value);
+    return unit === 'px' ? sizeValue : (sizeValue / 100) * totalSize;
+}
+function expandSplitterPanelSize(value) {
+    return {
+        value: getSplitterPanelSizeValue(value),
+        unit: getSplitterPanelSizeUnit(value),
+    };
+}
+function expandSplitterPanelSizeLimit(value) {
+    return {
+        value: getSplitterPanelSizeLimitValue(value),
+        unit: getSplitterPanelSizeLimitUnit(value),
+    };
+}
+function collapseSplitterPanelSize(size) {
+    return `${size.value}${size.unit}`;
+}
+function collapseSplitterPanelSizeLimit(size) {
+    return `${size.value}${size.unit}`;
+}
+
+/**
+ * @category control
+ */
+class NgnSplitter extends NgnBase {
+    _viewContainer = inject(ViewContainerRef);
+    _config = inject(NGN_CONFIG);
+    theme = this.injectThemeTemplate(splitterControlTemplate, {
+        root: true,
+        dragging: () => this.isDragging(),
+        horizontal: () => this.layout() === 'horizontal',
+        vertical: () => this.layout() === 'vertical',
+    });
+    translations = inject(I18n).translations;
+    /**
+     * The layout of the splitter.
+     */
+    layout = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /**
+     * A array of panel names that defines the order of panels.
+     * If nullish, the order is determined by the order the panels are defined in the template.
+     */
+    panelOrder = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "panelOrder" }] : /* istanbul ignore next */ []));
+    /**
+     * The storage to use for saving the splitter state.
+     * @default `session`
+     */
+    stateStorage = input(this._config.defaults.splitter.stateStorage, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateStorage" }] : /* istanbul ignore next */ []));
+    /**
+     * The key to use for saving the splitter state.
+     * If nullish, the state will not be saved.
+     */
+    stateKey = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "stateKey" }] : /* istanbul ignore next */ []));
+    /**
+     * The type of data to save in the splitter state.
+     * @default `['layout', 'panelOrder', 'panelSizes']`
+     */
+    stateData = input([
+        'layout',
+        'panelOrder',
+        'panelSizes',
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateData" }] : /* istanbul ignore next */ []));
+    /**
+     * The type of calculator to use for the splitter.
+     * @default `DefaultSplitterCalculator`
+     */
+    calculatorType = input(DefaultSplitterCalculator, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calculatorType" }] : /* istanbul ignore next */ []));
+    /**
+     * The resize distribution mode for the splitter.
+     * - `'adjacent'`: Only the panels adjacent to the divider are resized.
+     * - `'proportional'`: The deficit is distributed proportionally across all panels on the other side.
+     * @default adjacent
+     */
+    resizeMode = input('adjacent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to lock affected panels to fixed `px` values after a resize completes.
+     * When `true`, panels whose size changed are converted from their original unit to `px`.
+     * When `false`, panels keep their original units (`fr`, `px`).
+     * @default false
+     */
+    lockSizes = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lockSizes" }] : /* istanbul ignore next */ []));
+    /**
+     * The step size for moving the dividers using the keyboard.
+     * This can be a pixel value (e.g., '5px') or a percentage value (e.g., '5%').
+     * If a percentage is used, it will be calculated based on the size of the splitter element.
+     * @default '5px'
+     */
+    step = input('5px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /**
+     * Event emitted when the splitter state is being saved.
+     * This can be used to modify the state before it is saved.
+     */
+    stateSaving = output();
+    /**
+     * Event emitted when the splitter state is loaded.
+     * This can be used to modify the state before it is applied or to perform actions based on the loaded state.
+     */
+    stateLoading = output();
+    dividerTemplateType = templateTypeFn();
+    _dividerTemplate = viewChild.required('defaultDividerTemplate');
+    /**
+     * The current dividers in the splitter.
+     */
+    dividers = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dividers" }] : /* istanbul ignore next */ []));
+    /**
+     * The current panels in the splitter.
+     */
+    panels = contentChildren(NgnSplitterPanel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    /**
+     * The current size of the splitter element.
+     */
+    elementSize = elementSizeSignal(this.element);
+    /**
+     * A value indicating whether the splitter is currently being dragged.
+     */
+    isDragging = computed(() => this.calculator().dragContext() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    calculator = computed(() => {
+        const calculatorType = this.calculatorType();
+        return untracked(() => runInInjectionContext(this.injector, () => new calculatorType(this)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calculator" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        afterRenderEffect(() => {
+            const panels = this.panels();
+            this.updateDividers(panels);
+        });
+        registerState({
+            storage: () => this.stateStorage(),
+            key: () => this.stateKey(),
+            valueFn: this.computeState.bind(this),
+            onLoad: this.onStateLoad.bind(this),
+            debounce: 100,
+        });
+    }
+    ngOnDestroy() {
+        // Clean up dividers
+        this.dividers().forEach(divider => divider.destroy());
+        this.dividers.set([]);
+    }
+    onHandlePointerDown(index, event) {
+        const target = event.target;
+        if (!(target instanceof HTMLElement)) {
+            throw new Error('Event target is not an HTMLElement');
+        }
+        // Make sure the element is stable before capturing the pointer
+        requestAnimationFrame(() => {
+            try {
+                target.setPointerCapture(event.pointerId);
+            }
+            catch {
+                // Ignore errors if the element is not capable of capturing the pointer
+            }
+        });
+        this.calculator().startDrag(index, event);
+    }
+    onHandlePointerMove(index, event) {
+        this.calculator().drag(index, event);
+    }
+    onHandlePointerUp(index, event) {
+        this.calculator().endDrag(index, event, false);
+    }
+    onHandlePointerCancel(index, event) {
+        this.calculator().endDrag(index, event, true);
+    }
+    onHandleKeyDown(index, event) {
+        if ((event.key === 'ArrowLeft' && this.layout() === 'horizontal') ||
+            (event.key === 'ArrowUp' && this.layout() === 'vertical')) {
+            this.calculator().moveDivider(index, -this.getStepInPx());
+            event.preventDefault(); // Prevent default scrolling behavior
+        }
+        else if ((event.key === 'ArrowRight' && this.layout() === 'horizontal') ||
+            (event.key === 'ArrowDown' && this.layout() === 'vertical')) {
+            this.calculator().moveDivider(index, this.getStepInPx());
+            event.preventDefault(); // Prevent default scrolling behavior
+        }
+        else if (event.key === 'Home') {
+            this.calculator().moveDivider(index, Number.NEGATIVE_INFINITY);
+            event.preventDefault(); // Prevent default scrolling behavior
+        }
+        else if (event.key === 'End') {
+            this.calculator().moveDivider(index, Number.POSITIVE_INFINITY);
+            event.preventDefault(); // Prevent default scrolling behavior
+        }
+    }
+    updateDividers(panels) {
+        this.dividers.update(divider => {
+            if (divider.length === panels.length - 1) {
+                return divider; // No need to update if the number of dividers matches the number of panels
+            }
+            else if (divider.length < panels.length - 1) {
+                // Add missing dividers
+                const newDividers = [...divider];
+                for (let i = divider.length; i < panels.length - 1; i++) {
+                    newDividers.push(this.createDivider(i));
+                }
+                return newDividers;
+            }
+            else {
+                // More dividers than needed, remove the excess
+                divider.slice(panels.length - 1).forEach(divider => divider.destroy());
+                return divider.slice(0, panels.length - 1);
+            }
+        });
+        // Move dividers to the correct positions (skip first panel — no divider before it)
+        for (let i = 1; i < panels.length; i++) {
+            const panel = panels[i];
+            const divider = this.dividers()[i - 1];
+            if (!divider) {
+                throw new NgnError('NgnSplitter', `Divider is missing for panel at index ${i}`);
+            }
+            this.moveDividerBefore(panel, divider);
+        }
+    }
+    createDivider(index) {
+        const viewRef = this._viewContainer.createEmbeddedView(this._dividerTemplate(), { index });
+        viewRef.detectChanges();
+        return viewRef;
+    }
+    moveDividerBefore(panel, divider) {
+        const panelElement = panel.element.nativeElement;
+        divider.rootNodes.forEach(node => {
+            if (node instanceof HTMLElement) {
+                panelElement.parentElement?.insertBefore(node, panelElement);
+            }
+        });
+    }
+    computeState(previousState) {
+        const data = this.stateData();
+        const state = {
+            layout: data.includes('layout') ? this.layout() : undefined,
+            panelOrder: data.includes('panelOrder') ? this.panelOrder() : undefined,
+            panelSizes: data.includes('panelSizes')
+                ? this.panels().reduce((acc, panel, index) => {
+                    acc[panel.name() || `ngn-panel-${index}`] = panel.size();
+                    return acc;
+                }, { ...previousState?.panelSizes })
+                : undefined,
+        };
+        this.stateSaving.emit(state);
+        return state;
+    }
+    onStateLoad(state) {
+        if (state) {
+            this.ensureValidState(state);
+            this.stateLoading.emit(state);
+            this.applyFromState(state);
+        }
+        return state;
+    }
+    ensureValidState(state) {
+        if (state.layout && state.layout !== 'horizontal' && state.layout !== 'vertical') {
+            Logger.warn(`Invalid layout in saved splitter state.`, { state });
+            delete state.layout;
+        }
+        if (state.panelOrder &&
+            (!Array.isArray(state.panelOrder) || state.panelOrder.some(x => typeof x !== 'string'))) {
+            Logger.warn(`Invalid panelOrder in saved splitter state.`, { state });
+            delete state.panelOrder;
+        }
+        if (state.panelSizes &&
+            (typeof state.panelSizes !== 'object' ||
+                state.panelSizes === null ||
+                Object.values(state.panelSizes).some(x => !isSplitterPanelSize(x)))) {
+            Logger.warn(`Invalid panelSizes in saved splitter state.`, { state });
+            delete state.panelSizes;
+        }
+    }
+    applyFromState(state) {
+        if (state.layout && this.stateData().includes('layout')) {
+            this.layout.set(state.layout);
+        }
+        if (state.panelOrder && this.stateData().includes('panelOrder')) {
+            this.panelOrder.set(state.panelOrder);
+        }
+        if (state.panelSizes && this.stateData().includes('panelSizes')) {
+            const panels = this.panels();
+            for (let i = 0; i < panels.length; i++) {
+                const panelName = panels[i]?.name() || `ngn-panel-${i}`;
+                if (panelName in state.panelSizes) {
+                    const panelSize = state.panelSizes[panelName];
+                    if (!panelSize) {
+                        continue;
+                    }
+                    panels[i]?.size.set(panelSize);
+                }
+            }
+        }
+    }
+    /**
+     * The divider's current position as a percentage (0–100) of the total panel
+     * content size, used for `aria-valuenow` on the `role="separator"` handle.
+     * Reads `gridTemplateSizes()` to stay reactive to resizes, then measures the
+     * rendered panel sizes on either side of the divider.
+     */
+    dividerValueNow(index) {
+        // ponytail: DOM-offset heuristic; one CD-frame lag during drag is fine for
+        // an aria value. Swap for an engine-reported px signal if exactness matters.
+        this.calculator().gridTemplateSizes(); // reactive trigger
+        const panels = this.calculator().orderedPanels();
+        const horizontal = this.layout() === 'horizontal';
+        let before = 0;
+        let total = 0;
+        panels.forEach((panel, i) => {
+            const el = panel.element.nativeElement;
+            const size = horizontal ? el.offsetWidth : el.offsetHeight;
+            total += size;
+            if (i <= index)
+                before += size;
+        });
+        return total > 0 ? Math.round((before / total) * 100) : 0;
+    }
+    getStepInPx() {
+        const step = this.step();
+        if (step.endsWith('px')) {
+            return parseFloat(step.slice(0, -2));
+        }
+        else if (step.endsWith('%')) {
+            const size = this.layout() === 'horizontal' ? this.elementSize().width : this.elementSize().height;
+            return (parseFloat(step.slice(0, -1)) / 100) * size;
+        }
+        else {
+            Logger.warn(`Invalid step value: ${step}.`);
+            return 10; // Default step in pixels
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSplitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: NgnSplitter, isStandalone: true, selector: "ngn-splitter", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, panelOrder: { classPropertyName: "panelOrder", publicName: "panelOrder", isSignal: true, isRequired: false, transformFunction: null }, stateStorage: { classPropertyName: "stateStorage", publicName: "stateStorage", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, stateData: { classPropertyName: "stateData", publicName: "stateData", isSignal: true, isRequired: false, transformFunction: null }, calculatorType: { classPropertyName: "calculatorType", publicName: "calculatorType", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, lockSizes: { classPropertyName: "lockSizes", publicName: "lockSizes", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", panelOrder: "panelOrderChange", stateSaving: "stateSaving", stateLoading: "stateLoading" }, host: { attributes: { "role": "region" }, properties: { "style.grid-template-columns": "layout() === 'horizontal' ? calculator().gridTemplateSizes() : null", "style.grid-template-rows": "layout() === 'vertical' ? calculator().gridTemplateSizes() : null", "style.grid-template-areas": "calculator().gridTemplateAreas()", "style.max-width": "layout() === 'horizontal' ? calculator().maxSize() : null", "style.max-height": "layout() === 'vertical' ? calculator().maxSize() : null", "style.min-width": "layout() === 'horizontal' ? calculator().minSize() : null", "style.min-height": "layout() === 'vertical' ? calculator().minSize() : null" } }, providers: [provideSelf(NgnSplitter)], queries: [{ propertyName: "panels", predicate: NgnSplitterPanel, isSignal: true }], viewQueries: [{ propertyName: "_dividerTemplate", first: true, predicate: ["defaultDividerTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content />\n\n<ng-template #defaultDividerTemplate [ngnTemplate]=\"dividerTemplateType\" let-index=\"index\">\n  <div\n    [style.grid-area]=\"`ngn-divider-${index}`\"\n    [ptInt]=\"this\"\n    [ptClass]=\"{\n      divider: true,\n      'divider-dragging': calculator().dragContext()?.dividerIndex === index,\n    }\"\n  >\n    <button\n      role=\"separator\"\n      [aria-orientation]=\"layout()\"\n      [aria-label]=\"translations['splitter_handleLabel']()\"\n      [attr.aria-valuenow]=\"dividerValueNow(index)\"\n      [attr.aria-valuemin]=\"0\"\n      [attr.aria-valuemax]=\"100\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'divider-handle'\"\n      (pointerdown)=\"onHandlePointerDown(index, $event)\"\n      (pointermove)=\"onHandlePointerMove(index, $event)\"\n      (pointerup)=\"onHandlePointerUp(index, $event)\"\n      (pointercancel)=\"onHandlePointerCancel(index, $event)\"\n      (keydown)=\"onHandleKeyDown(index, $event)\"\n    ></button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSplitter, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-splitter', imports: [NgnPt, NgnTemplate], providers: [provideSelf(NgnSplitter)], host: {
+                        role: 'region',
+                        '[style.grid-template-columns]': `layout() === 'horizontal' ? calculator().gridTemplateSizes() : null`,
+                        '[style.grid-template-rows]': `layout() === 'vertical' ? calculator().gridTemplateSizes() : null`,
+                        '[style.grid-template-areas]': 'calculator().gridTemplateAreas()',
+                        '[style.max-width]': `layout() === 'horizontal' ? calculator().maxSize() : null`,
+                        '[style.max-height]': `layout() === 'vertical' ? calculator().maxSize() : null`,
+                        '[style.min-width]': `layout() === 'horizontal' ? calculator().minSize() : null`,
+                        '[style.min-height]': `layout() === 'vertical' ? calculator().minSize() : null`,
+                    }, template: "<ng-content />\n\n<ng-template #defaultDividerTemplate [ngnTemplate]=\"dividerTemplateType\" let-index=\"index\">\n  <div\n    [style.grid-area]=\"`ngn-divider-${index}`\"\n    [ptInt]=\"this\"\n    [ptClass]=\"{\n      divider: true,\n      'divider-dragging': calculator().dragContext()?.dividerIndex === index,\n    }\"\n  >\n    <button\n      role=\"separator\"\n      [aria-orientation]=\"layout()\"\n      [aria-label]=\"translations['splitter_handleLabel']()\"\n      [attr.aria-valuenow]=\"dividerValueNow(index)\"\n      [attr.aria-valuemin]=\"0\"\n      [attr.aria-valuemax]=\"100\"\n      [ptInt]=\"this\"\n      [ptClass]=\"'divider-handle'\"\n      (pointerdown)=\"onHandlePointerDown(index, $event)\"\n      (pointermove)=\"onHandlePointerMove(index, $event)\"\n      (pointerup)=\"onHandlePointerUp(index, $event)\"\n      (pointercancel)=\"onHandlePointerCancel(index, $event)\"\n      (keydown)=\"onHandleKeyDown(index, $event)\"\n    ></button>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }, { type: i0.Output, args: ["layoutChange"] }], panelOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelOrder", required: false }] }, { type: i0.Output, args: ["panelOrderChange"] }], stateStorage: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateStorage", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], stateData: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateData", required: false }] }], calculatorType: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculatorType", required: false }] }], resizeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMode", required: false }] }], lockSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockSizes", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], stateSaving: [{ type: i0.Output, args: ["stateSaving"] }], stateLoading: [{ type: i0.Output, args: ["stateLoading"] }], _dividerTemplate: [{ type: i0.ViewChild, args: ['defaultDividerTemplate', { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NgnSplitterPanel), { isSignal: true }] }] } });
+
+// This module is just for grouping the Splitter and SplitterPanel components for convenience.
+// The components are standalone and can be used without this module.
+class NgnSplitterModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: NgnSplitterModule, imports: [NgnSplitter, NgnSplitterPanel], exports: [NgnSplitter, NgnSplitterPanel] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSplitterModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnSplitterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [NgnSplitter, NgnSplitterPanel],
+                    exports: [NgnSplitter, NgnSplitterPanel],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DefaultSplitterCalculator, NgnSplitter, NgnSplitterModule, NgnSplitterPanel };
+//# sourceMappingURL=ngneers-controls-splitter.mjs.map