@softheon/armature 10.41.1 → 10.42.0

package/bundles/softheon-armature.umd.js

@@ -6653,6 +6653,107 @@
 
     /** Public API surface for the forms */
 
+    /** The Resize Panels Component */
+    var ResizePanelsComponent = /** @class */ (function () {
+        /**
+         * Creates an instance of ResizePanelsComponent
+         */
+        function ResizePanelsComponent() {
+            /** The panel split direction */
+            this.direction = 'vertical';
+            /** The panel split position */
+            this.splitPosition = 50;
+            /** Whether the user is currently resizing */
+            this.isResizing = false;
+        }
+        /** Initializes the component */
+        ResizePanelsComponent.prototype.ngOnInit = function () {
+        };
+        /** Gets the style for the first panel */
+        ResizePanelsComponent.prototype.getFirstPanelStyle = function () {
+            return {
+                flex: this.splitPosition,
+                minWidth: this.direction === 'vertical' ? this.firstPanelMinSize : 'auto',
+                minHeight: this.direction === 'horizontal' ? this.firstPanelMinSize : 'auto'
+            };
+        };
+        /** Gets the style for the second panel */
+        ResizePanelsComponent.prototype.getSecondPanelStyle = function () {
+            return {
+                flex: 100 - this.splitPosition,
+                minWidth: this.direction === 'vertical' ? this.secondPanelMinSize : 'auto',
+                minHeight: this.direction === 'horizontal' ? this.secondPanelMinSize : 'auto'
+            };
+        };
+        /** Start resizing */
+        ResizePanelsComponent.prototype.startResize = function () {
+            this.isResizing = true;
+        };
+        /** Stop resizing on mouse up */
+        ResizePanelsComponent.prototype.stopResize = function () {
+            this.isResizing = false;
+        };
+        /**
+         * The mouse move listener
+         * @param event the mouse event
+         */
+        ResizePanelsComponent.prototype.onMouseMove = function (event) {
+            if (this.isResizing) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.resize(event);
+            }
+        };
+        /**
+         * Resize the panels based on the mouse position relative to the container
+         * @param event the mouse event
+         */
+        ResizePanelsComponent.prototype.resize = function (event) {
+            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;
+        };
+        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}"]
+                },] }
+    ];
+    ResizePanelsComponent.ctorParameters = function () { return []; };
+    ResizePanelsComponent.propDecorators = {
+        direction: [{ type: i0.Input }],
+        splitPosition: [{ type: i0.Input }],
+        firstPanelMinSize: [{ type: i0.Input }],
+        secondPanelMinSize: [{ type: i0.Input }],
+        container: [{ type: i0.ViewChild, args: ['container',] }],
+        stopResize: [{ type: i0.HostListener, args: ['window:mouseup',] }],
+        onMouseMove: [{ type: i0.HostListener, args: ['window:mousemove', ['$event'],] }]
+    };
+
+    /** The Resize Panels Module */
+    var ArmatureResizePanelsModule = /** @class */ (function () {
+        function ArmatureResizePanelsModule() {
+        }
+        return ArmatureResizePanelsModule;
+    }());
+    ArmatureResizePanelsModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [ResizePanelsComponent],
+                    imports: [
+                        common.CommonModule
+                    ],
+                    exports: [
+                        ResizePanelsComponent
+                    ]
+                },] }
+    ];
+
+    /** Public API surface for components */
+
     /** The component print service */
     var ComponentSavePrintService = /** @class */ (function () {
         /** Constructs the service */
@@ -6824,6 +6925,7 @@
     exports.ArmatureHeaderModule = ArmatureHeaderModule;
     exports.ArmatureModule = ArmatureModule;
     exports.ArmatureNavigationComponent = ArmatureNavigationComponent;
+    exports.ArmatureResizePanelsModule = ArmatureResizePanelsModule;
     exports.Attribute = Attribute;
     exports.AuthorizationService = AuthorizationService;
     exports.BannerService = BannerService;
@@ -6871,6 +6973,7 @@
     exports.RedirectSamlComponent = RedirectSamlComponent;
     exports.RedirectSamlRequest = RedirectSamlRequest;
     exports.RedirectSessionConfigs = RedirectSessionConfigs;
+    exports.ResizePanelsComponent = ResizePanelsComponent;
     exports.RoleAccess = RoleAccess;
     exports.RoleNavService = RoleNavService;
     exports.RumConfig = RumConfig;