@ngneers/controls 0.0.1-pre1 → 0.0.1-pre3

package/fesm2022/ngneers-controls-splitter.mjs

@@ -0,0 +1,717 @@
+import * as i0 from '@angular/core';
+import { input, model, computed, ChangeDetectionStrategy, Component, afterRenderEffect, untracked, signal, inject, ViewContainerRef, output, viewChild, contentChildren, runInInjectionContext, 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';
+
+/**
+ * @category control
+ */
+class NgnSplitterPanel extends NgnBase {
+    theme = this.injectThemeTemplate(splitterControlTemplate, 'panel');
+    _fallbackAreaName = generateElementId();
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    size = model('1fr', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    minSize = model('0px', ...(ngDevMode ? [{ debugName: "minSize" }] : []));
+    maxSize = model('100%', ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
+    ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : []));
+    gridArea = computed(() => this.name() ?? this._fallbackAreaName, ...(ngDevMode ? [{ debugName: "gridArea" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnSplitterPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", 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 />\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnSplitterPanel, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-splitter-panel', providers: [provideSelf(NgnSplitterPanel)], host: {
+                        role: 'region',
+                        '[style.grid-area]': 'gridArea()',
+                        '[aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledBy()',
+                    }, template: "<ng-content />\r\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 }] }] } });
+
+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}`;
+}
+
+const LAST_CALC_SIZE_SYMBOL = Symbol('lastCalcSize');
+/**
+ * Default implementation of the {@link SplitterCalculator} interface.
+ */
+class DefaultSplitterCalculator {
+    panels;
+    dividers;
+    panelOrder;
+    layout;
+    splitterSize;
+    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, ...(ngDevMode ? [{ debugName: "splitterSize" }] : []));
+        // Signal fires when any panel size is not calculated
+        const hasUncalculatedSizesSig = computed(() => this.panels().some(panel => !this.isPanelSizeCalculated(panel)), { equal: (_, b) => b === false });
+        // Ensure that min and max limits are handled correctly
+        afterRenderEffect(() => {
+            // Recalculate on outside changes (e.g. panel size input changes, state restore, etc.)
+            hasUncalculatedSizesSig();
+            // Recalculate on splitter size changes
+            this.splitterSize();
+            untracked(() => this.ensureMinMaxSizes());
+        });
+    }
+    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; // a is not in order, put it at the end
+                if (bIndex === -1)
+                    return -1; // b is not in order, put it at the end
+                return aIndex - bIndex; // sort by index in panelOrder
+            })
+            : panels;
+    }, ...(ngDevMode ? [{ debugName: "orderedPanels" }] : []));
+    gridTemplateSizes = computed(() => {
+        const panels = this.orderedPanels();
+        const dividerSizes = this.dividerSizes();
+        if (panels.length === 0)
+            return 'none';
+        const result = [];
+        panels.forEach((panel, i) => {
+            const size = panel.size();
+            result.push(size);
+            if (i < dividerSizes.length) {
+                const dividerSize = dividerSizes[i] || 0;
+                result.push(`${dividerSize}px`);
+            }
+        });
+        return result.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "gridTemplateSizes" }] : []));
+    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;
+    }, ...(ngDevMode ? [{ debugName: "gridTemplateAreas" }] : []));
+    minSize = computed(() => {
+        const { px, '%': pc } = this.panels().reduce((acc, panel) => {
+            const size = panel.size();
+            if (getSplitterPanelSizeUnit(size) === 'px') {
+                acc.px += getSplitterPanelSizeValue(size);
+            }
+            else {
+                const minSize = panel.minSize();
+                acc[getSplitterPanelSizeLimitUnit(minSize)] += getSplitterPanelSizeLimitValue(minSize);
+            }
+            return acc;
+        }, { px: 0, '%': 0 });
+        return `calc(${px + this.totalDividerSize()}px + ${pc}%)`;
+    }, ...(ngDevMode ? [{ debugName: "minSize" }] : []));
+    maxSize = computed(() => {
+        const { px, '%': pc } = this.panels().reduce((acc, panel) => {
+            const size = panel.size();
+            if (getSplitterPanelSizeUnit(size) === 'px') {
+                acc.px += getSplitterPanelSizeValue(size);
+            }
+            else {
+                const maxSize = panel.maxSize();
+                acc[getSplitterPanelSizeLimitUnit(maxSize)] += getSplitterPanelSizeLimitValue(maxSize);
+            }
+            return acc;
+        }, { px: 0, '%': 0 });
+        return `calc(${px + this.totalDividerSize()}px + ${pc}%)`;
+    }, ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
+    dragContext = signal(null, ...(ngDevMode ? [{ debugName: "dragContext" }] : []));
+    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;
+    }), ...(ngDevMode ? [{ debugName: "dividerSizes" }] : []));
+    totalDividerSize = computed(() => this.dividerSizes().reduce((acc, size) => acc + size, 0), ...(ngDevMode ? [{ debugName: "totalDividerSize" }] : []));
+    totalPanelSizes = computed(() => this.panels().reduce((acc, panel) => {
+        const size = panel.size();
+        acc[getSplitterPanelSizeUnit(size)] += getSplitterPanelSizeValue(size);
+        return acc;
+    }, { px: 0, fr: 0 }), ...(ngDevMode ? [{ debugName: "totalPanelSizes" }] : []));
+    startDrag(index, event) {
+        const panels = this.orderedPanels();
+        if (index < 0 || index >= panels.length - 1)
+            return;
+        this.dragContext.set({
+            dividerIndex: index,
+            pointerId: event.pointerId,
+            startPosition: this.layout() === 'horizontal' ? event.clientX : event.clientY,
+            panels: panels.map(panel => this.createContextPanel(panel)),
+            fractionFactors: this.getCurrentFractionFactors(),
+        });
+    }
+    drag(index, event) {
+        const ctx = this.dragContext();
+        if (!ctx || ctx.dividerIndex !== index || ctx.pointerId !== event.pointerId)
+            return;
+        const { startPosition } = ctx;
+        let pxDelta;
+        if (this.layout() === 'horizontal') {
+            pxDelta = event.clientX - startPosition;
+        }
+        else {
+            pxDelta = event.clientY - startPosition;
+        }
+        this.applyDividerDelta(index, pxDelta, ctx.panels, ctx.fractionFactors);
+    }
+    endDrag(index, event, isCancel) {
+        const ctx = this.dragContext();
+        if (!ctx || ctx.dividerIndex !== index || ctx.pointerId !== event.pointerId)
+            return;
+        if (isCancel) {
+            // Reset the panels to their original sizes
+            ctx.panels.forEach(p => p.panel.size.set(`${p.startSize.value}${p.startSize.unit}`));
+        }
+        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 the size is not calculated, we cannot move the divider
+        if (!this.isPanelSizeCalculated(leftPanel) || !this.isPanelSizeCalculated(rightPanel)) {
+            Logger.warn('Cannot move divider, panel sizes are not calculated');
+            return;
+        }
+        this.applyDividerDelta(index, pxDelta, panels.map(panel => this.createContextPanel(panel)), this.getCurrentFractionFactors());
+    }
+    ensureMinMaxSizes() {
+        const panels = this.orderedPanels();
+        if (panels.length === 0)
+            return;
+        const panelSizes = panels.map(panel => {
+            return {
+                panel,
+                size: {
+                    unit: getSplitterPanelSizeUnit(panel.size()),
+                    value: getSplitterPanelSizeValue(panel.size()),
+                },
+                minSizePx: getSplitterPanelSizeLimitInPx(panel.minSize(), this.splitterSize()),
+                maxSizePx: getSplitterPanelSizeLimitInPx(panel.maxSize(), this.splitterSize()),
+            };
+        });
+        // First make sure all px sizes are in the limits
+        for (const { size, minSizePx, maxSizePx } of panelSizes) {
+            if (size.unit === 'px') {
+                if (size.value < minSizePx) {
+                    size.value = minSizePx;
+                }
+                else if (size.value > maxSizePx) {
+                    size.value = maxSizePx;
+                }
+            }
+        }
+        // Calculate the fraction factors
+        const totalPanelSizes = panelSizes.reduce((acc, { size }) => {
+            acc[size.unit] += size.value;
+            return acc;
+        }, { px: 0, fr: 0 });
+        const frArea = this.splitterSize() - this.totalDividerSize() - totalPanelSizes.px;
+        const frPerPx = totalPanelSizes.fr / frArea;
+        const pxPerFr = frArea / totalPanelSizes.fr;
+        // Now make sure all fr sizes are in the limits
+        // We need to do this in a loop because we might need to adjust the fr sizes multiple times
+        // until all panels are within their limits while distributing the over-/underflow evenly
+        let frPanelsWithoutClamping = panelSizes.filter(p => p.size.unit === 'fr');
+        let frToDistribute = undefined; // Not needed initially
+        while (frPanelsWithoutClamping.length > 0 && frToDistribute !== 0) {
+            const frToAddPerPanel = frToDistribute ? frToDistribute / frPanelsWithoutClamping.length : 0;
+            const next = []; // Track panels that are still within limits
+            let currentTotalFrSize = totalPanelSizes.fr; // Track the total fr size after clamping
+            for (const p of frPanelsWithoutClamping) {
+                const minSizeFr = p.minSizePx * frPerPx;
+                const maxSizeFr = p.maxSizePx * frPerPx;
+                p.size.value += frToAddPerPanel;
+                if (p.size.value < minSizeFr) {
+                    currentTotalFrSize = currentTotalFrSize - p.size.value + minSizeFr;
+                    p.size.value = minSizeFr;
+                }
+                else if (p.size.value > maxSizeFr) {
+                    currentTotalFrSize = currentTotalFrSize - p.size.value + maxSizeFr;
+                    p.size.value = maxSizeFr;
+                }
+                else {
+                    next.push(p);
+                }
+            }
+            frToDistribute = totalPanelSizes.fr - currentTotalFrSize;
+            if (Math.abs(frToDistribute * pxPerFr) < 1) {
+                frToDistribute = 0; // Stop if we are close enough to zero
+            }
+            frPanelsWithoutClamping = next;
+        }
+        // Now set all the new sizes to the panels
+        for (const { panel, size } of panelSizes) {
+            this.setPanelSize(panel, `${size.value}${size.unit}`);
+        }
+    }
+    createContextPanel(panel) {
+        return {
+            panel,
+            startSize: expandSplitterPanelSize(panel.size()),
+            minSize: expandSplitterPanelSizeLimit(panel.minSize()),
+            maxSize: expandSplitterPanelSizeLimit(panel.maxSize()),
+        };
+    }
+    getCurrentFractionFactors() {
+        const frArea = this.splitterSize() - this.totalDividerSize() - this.totalPanelSizes().px || 1; // Avoid division by zero
+        const totalFr = this.totalPanelSizes().fr || 1; // Avoid division by zero
+        return {
+            frPerPx: totalFr / frArea,
+            pxPerFr: frArea / totalFr,
+        };
+    }
+    setPanelSize(panel, size) {
+        panel.size.set(size);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        panel[LAST_CALC_SIZE_SYMBOL] = size;
+    }
+    isPanelSizeCalculated(panel) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return panel[LAST_CALC_SIZE_SYMBOL] === panel.size();
+    }
+    applyDividerDelta(dividerIndex, pxDelta, panels, fractionFactors) {
+        const appliedPanelDeltas = Array(panels.length).fill(0);
+        const recursion = (pxDelta, panelIndex, panelIndexIncrement) => {
+            if (panelIndex >= panels.length || panelIndex < 0)
+                return 0;
+            const panel = panels[panelIndex];
+            if (!panel) {
+                throw new NgnError('NgnSplitterCalculator', `Panel is missing at index ${panelIndex}`);
+            }
+            let unappliedDelta = 0;
+            const startPx = panel.startSize.unit === 'px'
+                ? panel.startSize.value
+                : fractionFactors.pxPerFr * panel.startSize.value;
+            const newPx = startPx + pxDelta;
+            if (pxDelta < 0) {
+                const min = panel.minSize.unit === 'px'
+                    ? panel.minSize.value
+                    : (panel.minSize.value / 100) * this.splitterSize();
+                if (min > newPx) {
+                    unappliedDelta = -(min - newPx);
+                }
+            }
+            else if (pxDelta > 0) {
+                const max = panel.maxSize.unit === 'px'
+                    ? panel.maxSize.value
+                    : (panel.maxSize.value / 100) * this.splitterSize();
+                if (max < newPx) {
+                    unappliedDelta = newPx - max;
+                }
+            }
+            const appliedDelta = pxDelta - unappliedDelta;
+            appliedPanelDeltas[panelIndex] = appliedDelta;
+            return unappliedDelta === 0
+                ? pxDelta
+                : appliedDelta +
+                    recursion(unappliedDelta, panelIndex + panelIndexIncrement, panelIndexIncrement);
+        };
+        let appliedLeft = recursion(pxDelta, dividerIndex, -1);
+        let appliedRight = -recursion(-pxDelta, dividerIndex + 1, 1);
+        if (appliedLeft !== pxDelta || appliedRight !== pxDelta) {
+            pxDelta =
+                pxDelta < 0 ? Math.max(appliedLeft, appliedRight) : Math.min(appliedLeft, appliedRight);
+            appliedPanelDeltas.fill(0);
+            appliedLeft = recursion(pxDelta, dividerIndex, -1);
+            appliedRight = -recursion(-pxDelta, dividerIndex + 1, 1);
+            if (appliedLeft !== pxDelta || appliedRight !== pxDelta) {
+                return;
+            }
+        }
+        panels.forEach((panel, i) => {
+            const pxDelta = appliedPanelDeltas[i] || 0;
+            if (panel.startSize.unit === 'px') {
+                const size = panel.startSize.value + pxDelta;
+                this.setPanelSize(panel.panel, `${Math.max(0, size)}px`);
+            }
+            else {
+                const size = panel.startSize.value + pxDelta * fractionFactors.frPerPx;
+                this.setPanelSize(panel.panel, `${Math.max(0, size)}fr`);
+            }
+        });
+    }
+}
+
+/**
+ * @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(...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * 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(...(ngDevMode ? [undefined, { debugName: "panelOrder" }] : []));
+    /**
+     * The storage to use for saving the splitter state.
+     * @default `session`
+     */
+    stateStorage = input(this._config.defaults.splitter.stateStorage, ...(ngDevMode ? [{ debugName: "stateStorage" }] : []));
+    /**
+     * The key to use for saving the splitter state.
+     * If nullish, the state will not be saved.
+     */
+    stateKey = input(...(ngDevMode ? [undefined, { debugName: "stateKey" }] : []));
+    /**
+     * The type of data to save in the splitter state.
+     * @default `['layout', 'panelOrder', 'panelSizes']`
+     */
+    stateData = input([
+        'layout',
+        'panelOrder',
+        'panelSizes',
+    ], ...(ngDevMode ? [{ debugName: "stateData" }] : []));
+    /**
+     * The type of calculator to use for the splitter.
+     * @default `DefaultSplitterCalculator`
+     */
+    calculatorType = input(DefaultSplitterCalculator, ...(ngDevMode ? [{ debugName: "calculatorType" }] : []));
+    /**
+     * 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', ...(ngDevMode ? [{ debugName: "step" }] : []));
+    /**
+     * 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([], ...(ngDevMode ? [{ debugName: "dividers" }] : []));
+    /**
+     * The current panels in the splitter.
+     */
+    panels = contentChildren(NgnSplitterPanel, ...(ngDevMode ? [{ debugName: "panels" }] : []));
+    /**
+     * 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, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    calculator = computed(() => {
+        const calculatorType = this.calculatorType();
+        return untracked(() => runInInjectionContext(this.injector, () => new calculatorType(this)));
+    }, ...(ngDevMode ? [{ debugName: "calculator" }] : []));
+    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
+        panels.forEach((panel, 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);
+                }
+            }
+        }
+    }
+    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: "21.1.0", ngImport: i0, type: NgnSplitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", 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 }, 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 />\r\n\r\n<ng-template #defaultDividerTemplate [ngnTemplate]=\"dividerTemplateType\" let-index=\"index\">\r\n  <div\r\n    [style.grid-area]=\"`ngn-divider-${index}`\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{\r\n      divider: true,\r\n      'divider-dragging': calculator().dragContext()?.dividerIndex === index,\r\n    }\"\r\n  >\r\n    <button\r\n      role=\"separator\"\r\n      [aria-orientation]=\"layout()\"\r\n      [aria-label]=\"translations['splitter_handleLabel']()\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'divider-handle'\"\r\n      (pointerdown)=\"onHandlePointerDown(index, $event)\"\r\n      (pointermove)=\"onHandlePointerMove(index, $event)\"\r\n      (pointerup)=\"onHandlePointerUp(index, $event)\"\r\n      (pointercancel)=\"onHandlePointerCancel(index, $event)\"\r\n      (keydown)=\"onHandleKeyDown(index, $event)\"\r\n    ></button>\r\n  </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgnTemplate, selector: "ng-template[ngnTemplate]", inputs: ["ngnTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnSplitter, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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 />\r\n\r\n<ng-template #defaultDividerTemplate [ngnTemplate]=\"dividerTemplateType\" let-index=\"index\">\r\n  <div\r\n    [style.grid-area]=\"`ngn-divider-${index}`\"\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"{\r\n      divider: true,\r\n      'divider-dragging': calculator().dragContext()?.dividerIndex === index,\r\n    }\"\r\n  >\r\n    <button\r\n      role=\"separator\"\r\n      [aria-orientation]=\"layout()\"\r\n      [aria-label]=\"translations['splitter_handleLabel']()\"\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'divider-handle'\"\r\n      (pointerdown)=\"onHandlePointerDown(index, $event)\"\r\n      (pointermove)=\"onHandlePointerMove(index, $event)\"\r\n      (pointerup)=\"onHandlePointerUp(index, $event)\"\r\n      (pointercancel)=\"onHandlePointerCancel(index, $event)\"\r\n      (keydown)=\"onHandleKeyDown(index, $event)\"\r\n    ></button>\r\n  </div>\r\n</ng-template>\r\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 }] }], 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: "21.1.0", ngImport: i0, type: NgnSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: NgnSplitterModule, imports: [NgnSplitter, NgnSplitterPanel], exports: [NgnSplitter, NgnSplitterPanel] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnSplitterModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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