@m1z23r/ngx-ui 1.1.17 → 1.1.19

package/fesm2022/m1z23r-ngx-ui.mjs

@@ -5401,9 +5401,11 @@ class SplitComponent {
             default:
                 return;
         }
-        const newLeftSize = Math.max(leftPane.minSize(), Math.min(leftPane.maxSize(), sizes[gutterIndex] + delta));
-        const actualDelta = newLeftSize - sizes[gutterIndex];
-        const newRightSize = Math.max(rightPane.minSize(), Math.min(rightPane.maxSize(), sizes[gutterIndex + 1] - actualDelta));
+        const originalTotal = sizes[gutterIndex] + sizes[gutterIndex + 1];
+        let newLeftSize = Math.max(leftPane.minSize(), Math.min(leftPane.maxSize(), sizes[gutterIndex] + delta));
+        let newRightSize = Math.max(rightPane.minSize(), Math.min(rightPane.maxSize(), originalTotal - newLeftSize));
+        // Recalculate left after right is clamped to preserve total
+        newLeftSize = Math.max(leftPane.minSize(), Math.min(leftPane.maxSize(), originalTotal - newRightSize));
         sizes[gutterIndex] = newLeftSize;
         sizes[gutterIndex + 1] = newRightSize;
         this.paneSizes.set(sizes);
@@ -5423,32 +5425,16 @@ class SplitComponent {
         const paneList = this.panes();
         const leftPane = paneList[this.dragGutterIndex];
         const rightPane = paneList[this.dragGutterIndex + 1];
+        const originalTotal = this.dragStartSizes[this.dragGutterIndex] + this.dragStartSizes[this.dragGutterIndex + 1];
+        // Apply delta and clamp left pane
         let newLeftSize = this.dragStartSizes[this.dragGutterIndex] + deltaPercent;
-        let newRightSize = this.dragStartSizes[this.dragGutterIndex + 1] - deltaPercent;
-        // Apply min/max constraints
-        if (newLeftSize < leftPane.minSize()) {
-            const diff = leftPane.minSize() - newLeftSize;
-            newLeftSize = leftPane.minSize();
-            newRightSize += diff;
-        }
-        else if (newLeftSize > leftPane.maxSize()) {
-            const diff = newLeftSize - leftPane.maxSize();
-            newLeftSize = leftPane.maxSize();
-            newRightSize += diff;
-        }
-        if (newRightSize < rightPane.minSize()) {
-            const diff = rightPane.minSize() - newRightSize;
-            newRightSize = rightPane.minSize();
-            newLeftSize -= diff;
-        }
-        else if (newRightSize > rightPane.maxSize()) {
-            const diff = newRightSize - rightPane.maxSize();
-            newRightSize = rightPane.maxSize();
-            newLeftSize -= diff;
-        }
-        // Final clamp
         newLeftSize = Math.max(leftPane.minSize(), Math.min(leftPane.maxSize(), newLeftSize));
+        // Calculate right pane from remainder, then clamp
+        let newRightSize = originalTotal - newLeftSize;
         newRightSize = Math.max(rightPane.minSize(), Math.min(rightPane.maxSize(), newRightSize));
+        // Recalculate left from clamped right to preserve total
+        newLeftSize = originalTotal - newRightSize;
+        newLeftSize = Math.max(leftPane.minSize(), Math.min(leftPane.maxSize(), newLeftSize));
         const sizes = [...this.paneSizes()];
         sizes[this.dragGutterIndex] = newLeftSize;
         sizes[this.dragGutterIndex + 1] = newRightSize;
@@ -5513,7 +5499,7 @@ class SplitComponent {
         return [...this.paneSizes()];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SplitComponent, isStandalone: true, selector: "ui-split", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizeChange: "sizeChange", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { properties: { "class.ui-split--horizontal": "orientation() === \"horizontal\"", "class.ui-split--vertical": "orientation() === \"vertical\"", "class.ui-split--disabled": "disabled()", "class.ui-split--dragging": "isDragging()" }, classAttribute: "ui-split" }, queries: [{ propertyName: "panes", predicate: SplitPaneComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n@for (gutterIndex of gutterIndices(); track gutterIndex) {\n  <div\n    class=\"ui-split__gutter\"\n    [class]=\"gutterSizeClass()\"\n    [style.order]=\"gutterIndex * 2 + 1\"\n    role=\"separator\"\n    tabindex=\"0\"\n    [attr.aria-orientation]=\"orientation() === 'horizontal' ? 'vertical' : 'horizontal'\"\n    [attr.aria-valuenow]=\"paneSizes()[gutterIndex] | number:'1.0-1'\"\n    [attr.aria-valuemin]=\"panes()[gutterIndex]?.minSize()\"\n    [attr.aria-valuemax]=\"panes()[gutterIndex]?.maxSize()\"\n    (mousedown)=\"onGutterMouseDown($event, gutterIndex)\"\n    (keydown)=\"onGutterKeyDown($event, gutterIndex)\"\n  >\n    <div class=\"ui-split__gutter-handle\"></div>\n  </div>\n}\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden}:host.ui-split--horizontal{flex-direction:row}:host.ui-split--vertical{flex-direction:column}:host.ui-split--disabled .ui-split__gutter{cursor:default;pointer-events:none}:host.ui-split--dragging{-webkit-user-select:none;user-select:none}.ui-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background-color:var(--ui-bg-secondary);transition:background-color var(--ui-transition-fast)}.ui-split__gutter:hover,.ui-split__gutter:focus{background-color:var(--ui-bg-tertiary)}.ui-split__gutter:hover .ui-split__gutter-handle,.ui-split__gutter:focus .ui-split__gutter-handle{background-color:var(--ui-primary)}.ui-split__gutter:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ui-primary)}:host(.ui-split--horizontal) .ui-split__gutter--sm{width:4px}:host(.ui-split--horizontal) .ui-split__gutter--md{width:8px}:host(.ui-split--horizontal) .ui-split__gutter--lg{width:12px}:host(.ui-split--vertical) .ui-split__gutter--sm{height:4px}:host(.ui-split--vertical) .ui-split__gutter--md{height:8px}:host(.ui-split--vertical) .ui-split__gutter--lg{height:12px}:host(.ui-split--horizontal) .ui-split__gutter{cursor:col-resize}:host(.ui-split--vertical) .ui-split__gutter{cursor:row-resize}:host(.ui-split--dragging.ui-split--horizontal){cursor:col-resize}:host(.ui-split--dragging.ui-split--vertical){cursor:row-resize}.ui-split__gutter-handle{background-color:var(--ui-border);border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast)}:host(.ui-split--horizontal) .ui-split__gutter-handle{width:2px;height:24px}:host(.ui-split--vertical) .ui-split__gutter-handle{width:24px;height:2px}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SplitComponent, isStandalone: true, selector: "ui-split", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizeChange: "sizeChange", dragStart: "dragStart", dragEnd: "dragEnd" }, host: { properties: { "class.ui-split--horizontal": "orientation() === \"horizontal\"", "class.ui-split--vertical": "orientation() === \"vertical\"", "class.ui-split--disabled": "disabled()", "class.ui-split--dragging": "isDragging()" }, classAttribute: "ui-split" }, queries: [{ propertyName: "panes", predicate: SplitPaneComponent, isSignal: true }], ngImport: i0, template: "<ng-content />\n@for (gutterIndex of gutterIndices(); track gutterIndex) {\n  <div\n    class=\"ui-split__gutter\"\n    [class]=\"gutterSizeClass()\"\n    [style.order]=\"gutterIndex * 2 + 1\"\n    role=\"separator\"\n    tabindex=\"0\"\n    [attr.aria-orientation]=\"orientation() === 'horizontal' ? 'vertical' : 'horizontal'\"\n    [attr.aria-valuenow]=\"paneSizes()[gutterIndex] | number:'1.0-1'\"\n    [attr.aria-valuemin]=\"panes()[gutterIndex]?.minSize()\"\n    [attr.aria-valuemax]=\"panes()[gutterIndex]?.maxSize()\"\n    (mousedown)=\"onGutterMouseDown($event, gutterIndex)\"\n    (keydown)=\"onGutterKeyDown($event, gutterIndex)\"\n  >\n    <div class=\"ui-split__gutter-handle\"></div>\n  </div>\n}\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden}:host.ui-split--horizontal{flex-direction:row}:host.ui-split--vertical{flex-direction:column}:host.ui-split--disabled .ui-split__gutter{cursor:default;pointer-events:none}:host.ui-split--dragging{-webkit-user-select:none;user-select:none}.ui-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background-color:var(--ui-bg-secondary);transition:background-color var(--ui-transition-fast)}.ui-split__gutter:hover,.ui-split__gutter:focus{background-color:var(--ui-bg-tertiary)}.ui-split__gutter:hover .ui-split__gutter-handle,.ui-split__gutter:focus .ui-split__gutter-handle{background-color:var(--ui-primary)}.ui-split__gutter:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ui-primary)}:host(.ui-split--horizontal) .ui-split__gutter--sm{width:4px}:host(.ui-split--horizontal) .ui-split__gutter--md{width:8px}:host(.ui-split--horizontal) .ui-split__gutter--lg{width:12px}:host(.ui-split--vertical) .ui-split__gutter--sm{height:4px}:host(.ui-split--vertical) .ui-split__gutter--md{height:8px}:host(.ui-split--vertical) .ui-split__gutter--lg{height:12px}:host(.ui-split--horizontal) .ui-split__gutter{cursor:col-resize}:host(.ui-split--vertical) .ui-split__gutter{cursor:row-resize;width:100%}:host(.ui-split--dragging.ui-split--horizontal){cursor:col-resize}:host(.ui-split--dragging.ui-split--vertical){cursor:row-resize}.ui-split__gutter-handle{background-color:var(--ui-border);border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast)}:host(.ui-split--horizontal) .ui-split__gutter-handle{width:2px;height:24px}:host(.ui-split--vertical) .ui-split__gutter-handle{width:24px;height:2px}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SplitComponent, decorators: [{
             type: Component,
@@ -5523,7 +5509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         '[class.ui-split--vertical]': 'orientation() === "vertical"',
                         '[class.ui-split--disabled]': 'disabled()',
                         '[class.ui-split--dragging]': 'isDragging()',
-                    }, template: "<ng-content />\n@for (gutterIndex of gutterIndices(); track gutterIndex) {\n  <div\n    class=\"ui-split__gutter\"\n    [class]=\"gutterSizeClass()\"\n    [style.order]=\"gutterIndex * 2 + 1\"\n    role=\"separator\"\n    tabindex=\"0\"\n    [attr.aria-orientation]=\"orientation() === 'horizontal' ? 'vertical' : 'horizontal'\"\n    [attr.aria-valuenow]=\"paneSizes()[gutterIndex] | number:'1.0-1'\"\n    [attr.aria-valuemin]=\"panes()[gutterIndex]?.minSize()\"\n    [attr.aria-valuemax]=\"panes()[gutterIndex]?.maxSize()\"\n    (mousedown)=\"onGutterMouseDown($event, gutterIndex)\"\n    (keydown)=\"onGutterKeyDown($event, gutterIndex)\"\n  >\n    <div class=\"ui-split__gutter-handle\"></div>\n  </div>\n}\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden}:host.ui-split--horizontal{flex-direction:row}:host.ui-split--vertical{flex-direction:column}:host.ui-split--disabled .ui-split__gutter{cursor:default;pointer-events:none}:host.ui-split--dragging{-webkit-user-select:none;user-select:none}.ui-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background-color:var(--ui-bg-secondary);transition:background-color var(--ui-transition-fast)}.ui-split__gutter:hover,.ui-split__gutter:focus{background-color:var(--ui-bg-tertiary)}.ui-split__gutter:hover .ui-split__gutter-handle,.ui-split__gutter:focus .ui-split__gutter-handle{background-color:var(--ui-primary)}.ui-split__gutter:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ui-primary)}:host(.ui-split--horizontal) .ui-split__gutter--sm{width:4px}:host(.ui-split--horizontal) .ui-split__gutter--md{width:8px}:host(.ui-split--horizontal) .ui-split__gutter--lg{width:12px}:host(.ui-split--vertical) .ui-split__gutter--sm{height:4px}:host(.ui-split--vertical) .ui-split__gutter--md{height:8px}:host(.ui-split--vertical) .ui-split__gutter--lg{height:12px}:host(.ui-split--horizontal) .ui-split__gutter{cursor:col-resize}:host(.ui-split--vertical) .ui-split__gutter{cursor:row-resize}:host(.ui-split--dragging.ui-split--horizontal){cursor:col-resize}:host(.ui-split--dragging.ui-split--vertical){cursor:row-resize}.ui-split__gutter-handle{background-color:var(--ui-border);border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast)}:host(.ui-split--horizontal) .ui-split__gutter-handle{width:2px;height:24px}:host(.ui-split--vertical) .ui-split__gutter-handle{width:24px;height:2px}\n"] }]
+                    }, template: "<ng-content />\n@for (gutterIndex of gutterIndices(); track gutterIndex) {\n  <div\n    class=\"ui-split__gutter\"\n    [class]=\"gutterSizeClass()\"\n    [style.order]=\"gutterIndex * 2 + 1\"\n    role=\"separator\"\n    tabindex=\"0\"\n    [attr.aria-orientation]=\"orientation() === 'horizontal' ? 'vertical' : 'horizontal'\"\n    [attr.aria-valuenow]=\"paneSizes()[gutterIndex] | number:'1.0-1'\"\n    [attr.aria-valuemin]=\"panes()[gutterIndex]?.minSize()\"\n    [attr.aria-valuemax]=\"panes()[gutterIndex]?.maxSize()\"\n    (mousedown)=\"onGutterMouseDown($event, gutterIndex)\"\n    (keydown)=\"onGutterKeyDown($event, gutterIndex)\"\n  >\n    <div class=\"ui-split__gutter-handle\"></div>\n  </div>\n}\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden}:host.ui-split--horizontal{flex-direction:row}:host.ui-split--vertical{flex-direction:column}:host.ui-split--disabled .ui-split__gutter{cursor:default;pointer-events:none}:host.ui-split--dragging{-webkit-user-select:none;user-select:none}.ui-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background-color:var(--ui-bg-secondary);transition:background-color var(--ui-transition-fast)}.ui-split__gutter:hover,.ui-split__gutter:focus{background-color:var(--ui-bg-tertiary)}.ui-split__gutter:hover .ui-split__gutter-handle,.ui-split__gutter:focus .ui-split__gutter-handle{background-color:var(--ui-primary)}.ui-split__gutter:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ui-primary)}:host(.ui-split--horizontal) .ui-split__gutter--sm{width:4px}:host(.ui-split--horizontal) .ui-split__gutter--md{width:8px}:host(.ui-split--horizontal) .ui-split__gutter--lg{width:12px}:host(.ui-split--vertical) .ui-split__gutter--sm{height:4px}:host(.ui-split--vertical) .ui-split__gutter--md{height:8px}:host(.ui-split--vertical) .ui-split__gutter--lg{height:12px}:host(.ui-split--horizontal) .ui-split__gutter{cursor:col-resize}:host(.ui-split--vertical) .ui-split__gutter{cursor:row-resize;width:100%}:host(.ui-split--dragging.ui-split--horizontal){cursor:col-resize}:host(.ui-split--dragging.ui-split--vertical){cursor:row-resize}.ui-split__gutter-handle{background-color:var(--ui-border);border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast)}:host(.ui-split--horizontal) .ui-split__gutter-handle{width:2px;height:24px}:host(.ui-split--vertical) .ui-split__gutter-handle{width:24px;height:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], panes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SplitPaneComponent), { isSignal: true }] }] } });
 
 class TreeNodeComponent {