@softheon/armature 10.42.3 → 10.44.0

package/bundles/softheon-armature.umd.js

@@ -3657,7 +3657,7 @@
     MobileHeaderMenuComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'sof-ar-mobile-header-menu',
-                    template: "<div fxHide.gt-xs>\r\n    <div>\r\n        <button class=\"sof-ar-menu-btn\" mat-icon-button (click)=\"snav.toggle()\">\r\n            <span class=\"sof-ar-menu-icon\" [style.color]=\"iconColor\">\r\n                <i class=\"{{currentIcon}}\"></i>\r\n            </span>\r\n        </button>\r\n    </div>\r\n    <div>\r\n        <mat-sidenav-container>\r\n            <mat-sidenav #snav fixedInViewport [fixedTopGap]=\"mobileHeaderHeight\" (openedStart)=\"changeToCloseIcon()\" (closedStart)=\"changeToMenuIcon()\">\r\n                <!-- NG-Content Mobile Headers Items -->\r\n                <ng-content select=\"[sof-ar-mobile-header-menu-items]\"></ng-content>\r\n            </mat-sidenav>\r\n            <mat-sidenav-content>\r\n                <!-- NG Content Main Content -->\r\n                <ng-content sof-ar-mobile-header-main-content></ng-content>\r\n            </mat-sidenav-content>\r\n        </mat-sidenav-container>\r\n    </div>\r\n</div>",
+                    template: "<div fxHide.gt-xs>\r\n    <div>\r\n        <button class=\"sof-ar-menu-btn\" mat-icon-button aria-label=\"menu-button\" (click)=\"snav.toggle()\">\r\n            <span class=\"sof-ar-menu-icon\" [style.color]=\"iconColor\">\r\n                <i class=\"{{currentIcon}}\"></i>\r\n            </span>\r\n        </button>\r\n    </div>\r\n    <div>\r\n        <mat-sidenav-container>\r\n            <mat-sidenav #snav fixedInViewport [fixedTopGap]=\"mobileHeaderHeight\" (openedStart)=\"changeToCloseIcon()\" (closedStart)=\"changeToMenuIcon()\">\r\n                <!-- NG-Content Mobile Headers Items -->\r\n                <ng-content select=\"[sof-ar-mobile-header-menu-items]\"></ng-content>\r\n            </mat-sidenav>\r\n            <mat-sidenav-content>\r\n                <!-- NG Content Main Content -->\r\n                <ng-content sof-ar-mobile-header-main-content></ng-content>\r\n            </mat-sidenav-content>\r\n        </mat-sidenav-container>\r\n    </div>\r\n</div>",
                     styles: ["::ng-deep .sof-ar-menu-btn{margin:8px!important;position:absolute!important;top:0;z-index:2}::ng-deep .sof-ar-menu-icon{font-size:large}"]
                 },] }
     ];
@@ -6670,6 +6670,14 @@
             this.direction = 'vertical';
             /** The panel split position */
             this.splitPosition = 50;
+            /** Whether the panels should be resizable */
+            this.resizable = true;
+            /** The Resize Event */
+            this.onResize = new i0.EventEmitter();
+            /** The Resize Start Event */
+            this.onResizeStart = new i0.EventEmitter();
+            /** The Resize End Event */
+            this.onResizeEnd = new i0.EventEmitter();
             /** Whether the user is currently resizing */
             this.isResizing = false;
             /** The first panel max height */
@@ -6679,6 +6687,13 @@
         }
         /** Initializes the component */
         ResizePanelsComponent.prototype.ngOnInit = function () {
+            this.initialSplit = this.splitPosition;
+        };
+        /** On Changes Lifecycle Hook */
+        ResizePanelsComponent.prototype.ngOnChanges = function () {
+            if (this.resizable && !!this.initialSplit) {
+                this.splitPosition = this.initialSplit;
+            }
         };
         /** Gets the style for the first panel */
         ResizePanelsComponent.prototype.getFirstPanelStyle = function () {
@@ -6716,11 +6731,23 @@
         };
         /** Start resizing */
         ResizePanelsComponent.prototype.startResize = function () {
+            this.onResizeStart.emit({
+                splitPosition: this.splitPosition,
+                firstPanelSize: this.direction === 'vertical' ? this.firstPanel.nativeElement.clientWidth : this.firstPanel.nativeElement.clientHeight,
+                secondPanelSize: this.direction === 'vertical' ? this.secondPanel.nativeElement.clientWidth : this.secondPanel.nativeElement.clientHeight
+            });
             this.isResizing = true;
         };
         /** Stop resizing on mouse up */
         ResizePanelsComponent.prototype.stopResize = function () {
-            this.isResizing = false;
+            if (this.isResizing) {
+                this.isResizing = false;
+                this.onResizeEnd.emit({
+                    splitPosition: this.splitPosition,
+                    firstPanelSize: this.direction === 'vertical' ? this.firstPanel.nativeElement.clientWidth : this.firstPanel.nativeElement.clientHeight,
+                    secondPanelSize: this.direction === 'vertical' ? this.secondPanel.nativeElement.clientWidth : this.secondPanel.nativeElement.clientHeight
+                });
+            }
         };
         /**
          * The mouse move listener
@@ -6743,14 +6770,19 @@
             var mousePos = this.direction === 'vertical' ? event.x : event.y;
             var pos = ((mousePos - containerPos) / containerSize) * 100;
             this.splitPosition = Math.min(Math.max(pos, 1), 99);
+            this.onResize.emit({
+                splitPosition: this.splitPosition,
+                firstPanelSize: this.direction === 'vertical' ? this.firstPanel.nativeElement.clientWidth : this.firstPanel.nativeElement.clientHeight,
+                secondPanelSize: this.direction === 'vertical' ? this.secondPanel.nativeElement.clientWidth : this.secondPanel.nativeElement.clientHeight
+            });
         };
         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()\" #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}"]
+                    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\" *ngIf=\"resizable\">\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}.sof-ar-resize-panels-panel-content:empty{display:none}"]
                 },] }
     ];
     ResizePanelsComponent.ctorParameters = function () { return []; };
@@ -6759,6 +6791,10 @@
         splitPosition: [{ type: i0.Input }],
         firstPanelMinSize: [{ type: i0.Input }],
         secondPanelMinSize: [{ type: i0.Input }],
+        resizable: [{ type: i0.Input }],
+        onResize: [{ type: i0.Output }],
+        onResizeStart: [{ type: i0.Output }],
+        onResizeEnd: [{ type: i0.Output }],
         container: [{ type: i0.ViewChild, args: ['container',] }],
         firstPanel: [{ type: i0.ViewChild, args: ['firstPanel',] }],
         secondPanel: [{ type: i0.ViewChild, args: ['secondPanel',] }],