@softheon/armature 10.42.1 → 10.42.3

package/bundles/softheon-armature.umd.js

@@ -1776,7 +1776,11 @@
             form.method = 'POST';
             form.action = formAction;
             if (configs.targetNewTab) {
-                form.target = '_blank';
+                // The parent session should already be present in child window as per browsing context rules, but for whatever reason form.target = '_blank' does not do that.
+                // Need to use window.open here so the parent window's session also gets carried over to the new tab.
+                // For reference: https://stackoverflow.com/questions/17297287/sessionstorage-on-new-window-isnt-empty-when-following-a-link-with-target-bl
+                form.target = 'customWindow';
+                window.open('', 'customWindow');
             }
             input.name = 'data';
             input.value = this.window.sessionStorage.getItem(this.sessionConfig.keyPath);
@@ -6668,24 +6672,46 @@
             this.splitPosition = 50;
             /** Whether the user is currently resizing */
             this.isResizing = false;
+            /** The first panel max height */
+            this.firstPanelMaxHeight = 'none';
+            /** The second panel max height */
+            this.secondPanelMaxHeight = 'none';
         }
         /** Initializes the component */
         ResizePanelsComponent.prototype.ngOnInit = function () {
         };
         /** Gets the style for the first panel */
         ResizePanelsComponent.prototype.getFirstPanelStyle = function () {
+            var _a, _b, _c, _d, _e, _f, _g;
+            var contentHeight = (_c = (_b = (_a = this.firstPanel) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height;
+            if (contentHeight < ((_e = (_d = this.firstPanel) === null || _d === void 0 ? void 0 : _d.nativeElement) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect().height)) {
+                this.firstPanelMaxHeight = contentHeight + 'px';
+            }
+            if (contentHeight > ((_g = (_f = this.firstPanel) === null || _f === void 0 ? void 0 : _f.nativeElement) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect().height)) {
+                this.firstPanelMaxHeight = 'none';
+            }
             return {
                 flex: this.splitPosition,
                 minWidth: this.direction === 'vertical' ? this.firstPanelMinSize : 'auto',
-                minHeight: this.direction === 'horizontal' ? this.firstPanelMinSize : 'auto'
+                minHeight: this.direction === 'horizontal' ? this.firstPanelMinSize : 'auto',
+                maxHeight: this.direction === 'horizontal' ? this.firstPanelMaxHeight : 'none'
             };
         };
         /** Gets the style for the second panel */
         ResizePanelsComponent.prototype.getSecondPanelStyle = function () {
+            var _a, _b, _c, _d, _e, _f, _g;
+            var contentHeight = (_c = (_b = (_a = this.secondPanel) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height;
+            if (contentHeight < ((_e = (_d = this.secondPanel) === null || _d === void 0 ? void 0 : _d.nativeElement) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect().height)) {
+                this.secondPanelMaxHeight = contentHeight + 'px';
+            }
+            if (contentHeight > ((_g = (_f = this.secondPanel) === null || _f === void 0 ? void 0 : _f.nativeElement) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect().height)) {
+                this.secondPanelMaxHeight = 'none';
+            }
             return {
                 flex: 100 - this.splitPosition,
                 minWidth: this.direction === 'vertical' ? this.secondPanelMinSize : 'auto',
-                minHeight: this.direction === 'horizontal' ? this.secondPanelMinSize : 'auto'
+                minHeight: this.direction === 'horizontal' ? this.secondPanelMinSize : 'auto',
+                maxHeight: this.direction === 'horizontal' ? this.secondPanelMaxHeight : 'none'
             };
         };
         /** Start resizing */
@@ -6715,15 +6741,16 @@
             var containerSize = this.direction === 'vertical' ? this.container.nativeElement.clientWidth : this.container.nativeElement.clientHeight;
             var containerPos = this.direction === 'vertical' ? this.container.nativeElement.getBoundingClientRect().x : this.container.nativeElement.getBoundingClientRect().y;
             var mousePos = this.direction === 'vertical' ? event.x : event.y;
-            this.splitPosition = ((mousePos - containerPos) / containerSize) * 100;
+            var pos = ((mousePos - containerPos) / containerSize) * 100;
+            this.splitPosition = Math.min(Math.max(pos, 1), 99);
         };
         return ResizePanelsComponent;
     }());
     ResizePanelsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'sof-ar-resize-panels',
-                    template: "<div #container class=\"sof-ar-resize-panels-container\"\r\n    [ngClass]=\"{\r\n        'vertical': direction === 'vertical',\r\n        'horizontal': direction === 'horizontal',\r\n        'resizing': isResizing\r\n    }\">\r\n\r\n    <!-- First Panel -->\r\n    <div [ngStyle]=\"getFirstPanelStyle()\" class=\"sof-ar-resize-panels-panel-content\">\r\n        <ng-content select=\"[sof-ar-resize-panel-first]\"></ng-content>\r\n    </div>\r\n\r\n    <!-- Drag Handle / Border -->\r\n    <div class=\"sof-ar-resize-panels-border\" [ngClass]=\"direction\">\r\n        <div class=\"sof-ar-resize-panels-drag-handle\" (mousedown)=\"startResize()\" \r\n            [ngClass]=\"{\r\n                'vertical': direction === 'vertical',\r\n                'horizontal': direction === 'horizontal',\r\n                'resizing': isResizing\r\n            }\">\r\n        </div>\r\n    </div>\r\n    \r\n    <!-- Second Panel -->\r\n    <div [ngStyle]=\"getSecondPanelStyle()\" class=\"sof-ar-resize-panels-panel-content\">\r\n        <ng-content select=\"[sof-ar-resize-panel-second]\"></ng-content>\r\n    </div>\r\n</div>\r\n",
-                    styles: [".sof-ar-resize-panels-container{display:flex;height:100%;width:100%}.sof-ar-resize-panels-container.vertical{flex-direction:row}.sof-ar-resize-panels-container.horizontal{flex-direction:column}.sof-ar-resize-panels-container.vertical.resizing{cursor:ew-resize}.sof-ar-resize-panels-container.horizontal.resizing{cursor:ns-resize}.sof-ar-resize-panels-drag-handle{background-color:transparent;position:relative;transition:background-color .1s linear;transition-delay:0s}.sof-ar-resize-panels-drag-handle.resizing,.sof-ar-resize-panels-drag-handle:hover{background-color:var(--primary-color-500-parts);transition-delay:.25s}.sof-ar-resize-panels-drag-handle.vertical:hover{cursor:ew-resize}.sof-ar-resize-panels-drag-handle.horizontal:hover{cursor:ns-resize}.sof-ar-resize-panels-drag-handle.vertical{height:100%;right:2px;width:5px}.sof-ar-resize-panels-drag-handle.horizontal{bottom:2px;height:5px;width:100%}.sof-ar-resize-panels-border{background-color:#000}.sof-ar-resize-panels-border.vertical{width:1px}.sof-ar-resize-panels-border.horizontal{height:1px}.sof-ar-resize-panels-panel-content{overflow:auto}"]
+                    template: "<div #container class=\"sof-ar-resize-panels-container\"\r\n    [ngClass]=\"{\r\n        'vertical': direction === 'vertical',\r\n        'horizontal': direction === 'horizontal',\r\n        'resizing': isResizing\r\n    }\">\r\n\r\n    <!-- First Panel -->\r\n    <div [ngStyle]=\"getFirstPanelStyle()\" #firstPanel class=\"sof-ar-resize-panels-panel-content\">\r\n        <ng-content select=\"[sof-ar-resize-panel-first]\"></ng-content>\r\n    </div>\r\n\r\n    <!-- Drag Handle / Border -->\r\n    <div class=\"sof-ar-resize-panels-border\" [ngClass]=\"direction\">\r\n        <div class=\"sof-ar-resize-panels-drag-handle\" (mousedown)=\"startResize()\" \r\n            [ngClass]=\"{  \r\n                'vertical': direction === 'vertical',\r\n                'horizontal': direction === 'horizontal',\r\n                'resizing': isResizing\r\n            }\">\r\n        </div>\r\n    </div>\r\n    \r\n    <!-- Second Panel -->\r\n    <div [ngStyle]=\"getSecondPanelStyle()\" #secondPanel class=\"sof-ar-resize-panels-panel-content\">\r\n        <ng-content select=\"[sof-ar-resize-panel-second]\"></ng-content>\r\n    </div>\r\n</div>\r\n",
+                    styles: [".sof-ar-resize-panels-container{display:flex;height:100%;width:100%}.sof-ar-resize-panels-container.vertical{flex-direction:row}.sof-ar-resize-panels-container.horizontal{flex-direction:column}.sof-ar-resize-panels-container.vertical.resizing{cursor:ew-resize}.sof-ar-resize-panels-container.horizontal.resizing{cursor:ns-resize}.sof-ar-resize-panels-drag-handle{background-color:transparent;position:relative;transition:background-color .1s linear;transition-delay:0s;z-index:1000}.sof-ar-resize-panels-drag-handle.resizing,.sof-ar-resize-panels-drag-handle:hover{background-color:var(--primary-color-500-parts);transition-delay:.25s}.sof-ar-resize-panels-drag-handle.vertical:hover{cursor:ew-resize}.sof-ar-resize-panels-drag-handle.horizontal:hover{cursor:ns-resize}.sof-ar-resize-panels-drag-handle.vertical{height:100%;right:2px;width:5px}.sof-ar-resize-panels-drag-handle.horizontal{bottom:2px;height:5px;width:100%}.sof-ar-resize-panels-border{background-color:#000}.sof-ar-resize-panels-border.vertical{width:1px}.sof-ar-resize-panels-border.horizontal{height:1px}.sof-ar-resize-panels-panel-content{overflow:auto}"]
                 },] }
     ];
     ResizePanelsComponent.ctorParameters = function () { return []; };
@@ -6733,6 +6760,8 @@
         firstPanelMinSize: [{ type: i0.Input }],
         secondPanelMinSize: [{ type: i0.Input }],
         container: [{ type: i0.ViewChild, args: ['container',] }],
+        firstPanel: [{ type: i0.ViewChild, args: ['firstPanel',] }],
+        secondPanel: [{ type: i0.ViewChild, args: ['secondPanel',] }],
         stopResize: [{ type: i0.HostListener, args: ['window:mouseup',] }],
         onMouseMove: [{ type: i0.HostListener, args: ['window:mousemove', ['$event'],] }]
     };