@ngneers/controls 0.0.1-pre4 → 0.0.1-pre6

package/fesm2022/ngneers-controls-splitter.mjs

@@ -1,11 +1,12 @@
 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 { input, model, computed, ChangeDetectionStrategy, 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
@@ -13,17 +14,17 @@ import { throwExp, Logger, NgnError } from '@ngneers/controls/utils';
 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 });
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    size = model('1fr', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    minSize = model('0px', ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    maxSize = model('100%', ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    gridArea = computed(() => this.name() ?? this._fallbackAreaName, ...(ngDevMode ? [{ debugName: "gridArea" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnSplitterPanel, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.2", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnSplitterPanel, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-splitter-panel', providers: [provideSelf(NgnSplitterPanel)], host: {
                         role: 'region',
@@ -33,65 +34,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                     }, 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.
+ * Delegates all resize math to the generic {@link ResizeEngine}.
  */
 class DefaultSplitterCalculator {
     panels;
@@ -99,21 +44,21 @@ class DefaultSplitterCalculator {
     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, ...(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());
+        this.splitterSize = computed(() => this.layout() === 'vertical' ? splitter.elementSize().height : splitter.elementSize().width, ...(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(() => {
@@ -126,29 +71,14 @@ class DefaultSplitterCalculator {
                 if (aIndex === -1 && bIndex === -1)
                     return 0;
                 if (aIndex === -1)
-                    return 1; // a is not in order, put it at the end
+                    return 1;
                 if (bIndex === -1)
-                    return -1; // b is not in order, put it at the end
-                return aIndex - bIndex; // sort by index in panelOrder
+                    return -1;
+                return aIndex - bIndex;
             })
             : 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" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "orderedPanels" }] : /* istanbul ignore next */ []));
+    gridTemplateSizes = computed(() => this._engine.gridTemplateSizes(), ...(ngDevMode ? [{ debugName: "gridTemplateSizes" }] : /* istanbul ignore next */ []));
     gridTemplateAreas = computed(() => {
         const panels = this.orderedPanels();
         if (panels.length === 0)
@@ -162,80 +92,38 @@ class DefaultSplitterCalculator {
             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" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "gridTemplateAreas" }] : /* istanbul ignore next */ []));
+    minSize = computed(() => this._engine.minTotalSize(), ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    maxSize = computed(() => this._engine.maxTotalSize(), ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    dragContext = signal(null, ...(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;
-    }), ...(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" }] : []));
+    }), ...(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.layout() === 'horizontal' ? event.clientX : event.clientY,
-            panels: panels.map(panel => this.createContextPanel(panel)),
-            fractionFactors: this.getCurrentFractionFactors(),
+            startPosition,
         });
+        this._engine.startDrag(index, startPosition);
     }
     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);
+        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;
-        if (isCancel) {
-            // Reset the panels to their original sizes
-            ctx.panels.forEach(p => p.panel.size.set(`${p.startSize.value}${p.startSize.unit}`));
-        }
+        this._engine.endDrag(index, isCancel);
         this.dragContext.set(null);
     }
     moveDivider(index, pxDelta) {
@@ -246,171 +134,82 @@ class DefaultSplitterCalculator {
             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)) {
+        if (!this._engine.isItemSizeCalculated(leftPanel) ||
+            !this._engine.isItemSizeCalculated(rightPanel)) {
             Logger.warn('Cannot move divider, panel sizes are not calculated');
             return;
         }
-        this.applyDividerDelta(index, pxDelta, panels.map(panel => this.createContextPanel(panel)), this.getCurrentFractionFactors());
+        this._engine.moveDivider(index, pxDelta);
     }
+    /**
+     * Ensures all panels respect their min/max size constraints.
+     * Delegates to the underlying {@link ResizeEngine}.
+     */
     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,
-        };
+        this._engine.ensureMinMaxSizes();
     }
+    /** @internal — used by tests to seed panel sizes into the engine. */
     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`);
-            }
-        });
+        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
  */
@@ -427,22 +226,22 @@ class NgnSplitter extends NgnBase {
     /**
      * The layout of the splitter.
      */
-    layout = model.required(...(ngDevMode ? [{ debugName: "layout" }] : []));
+    layout = model.required(...(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(...(ngDevMode ? [undefined, { debugName: "panelOrder" }] : []));
+    panelOrder = model(...(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, ...(ngDevMode ? [{ debugName: "stateStorage" }] : []));
+    stateStorage = input(this._config.defaults.splitter.stateStorage, ...(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(...(ngDevMode ? [undefined, { debugName: "stateKey" }] : []));
+    stateKey = input(...(ngDevMode ? [undefined, { debugName: "stateKey" }] : /* istanbul ignore next */ []));
     /**
      * The type of data to save in the splitter state.
      * @default `['layout', 'panelOrder', 'panelSizes']`
@@ -451,19 +250,32 @@ class NgnSplitter extends NgnBase {
         'layout',
         'panelOrder',
         'panelSizes',
-    ], ...(ngDevMode ? [{ debugName: "stateData" }] : []));
+    ], ...(ngDevMode ? [{ debugName: "stateData" }] : /* istanbul ignore next */ []));
     /**
      * The type of calculator to use for the splitter.
      * @default `DefaultSplitterCalculator`
      */
-    calculatorType = input(DefaultSplitterCalculator, ...(ngDevMode ? [{ debugName: "calculatorType" }] : []));
+    calculatorType = input(DefaultSplitterCalculator, ...(ngDevMode ? [{ debugName: "calculatorType" }] : /* istanbul ignore next */ []));
+    /**
+     * The resize distribution mode for the splitter.
+     * - `'adjacent'` (default): Only the panels adjacent to the divider are resized.
+     * - `'proportional'`: The deficit is distributed proportionally across all panels on the other side.
+     */
+    resizeMode = input('adjacent', ...(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, ...(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', ...(ngDevMode ? [{ debugName: "step" }] : []));
+    step = input('5px', ...(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.
@@ -479,11 +291,11 @@ class NgnSplitter extends NgnBase {
     /**
      * The current dividers in the splitter.
      */
-    dividers = signal([], ...(ngDevMode ? [{ debugName: "dividers" }] : []));
+    dividers = signal([], ...(ngDevMode ? [{ debugName: "dividers" }] : /* istanbul ignore next */ []));
     /**
      * The current panels in the splitter.
      */
-    panels = contentChildren(NgnSplitterPanel, ...(ngDevMode ? [{ debugName: "panels" }] : []));
+    panels = contentChildren(NgnSplitterPanel, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
     /**
      * The current size of the splitter element.
      */
@@ -491,11 +303,11 @@ class NgnSplitter extends NgnBase {
     /**
      * A value indicating whether the splitter is currently being dragged.
      */
-    isDragging = computed(() => this.calculator().dragContext() !== null, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    isDragging = computed(() => this.calculator().dragContext() !== null, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
     calculator = computed(() => {
         const calculatorType = this.calculatorType();
         return untracked(() => runInInjectionContext(this.injector, () => new calculatorType(this)));
-    }, ...(ngDevMode ? [{ debugName: "calculator" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "calculator" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         afterRenderEffect(() => {
@@ -579,14 +391,15 @@ class NgnSplitter extends NgnBase {
                 return divider.slice(0, panels.length - 1);
             }
         });
-        // Move dividers to the correct positions
-        panels.forEach((panel, i) => {
+        // 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 });
@@ -677,10 +490,10 @@ class NgnSplitter extends NgnBase {
             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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnSplitter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.2", 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 />\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnSplitter, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-splitter', imports: [NgnPt, NgnTemplate], providers: [provideSelf(NgnSplitter)], host: {
                         role: 'region',
@@ -692,16 +505,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         '[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 }] }] } });
+        }], 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: "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: NgnSplitterModule, imports: [NgnSplitter, NgnSplitterPanel], exports: [NgnSplitter, NgnSplitterPanel] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnSplitterModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnSplitterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgnSplitterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [NgnSplitter, NgnSplitterPanel],