@softheon/armature 21.1.0 → 21.2.0

package/fesm2022/softheon-armature.mjs

@@ -3,7 +3,7 @@ import { CommonModule, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders, provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, ViewChild, Input, Optional, Inject, Component, NgModule, EventEmitter, Output, ViewChildren, signal, inject, ChangeDetectionStrategy, DOCUMENT, isDevMode, HostListener, Directive, Renderer2, ElementRef, Pipe, ViewEncapsulation, Self, Host, APP_INITIALIZER, Injector, computed, DestroyRef, effect, ChangeDetectorRef, ErrorHandler } from '@angular/core';
+import { InjectionToken, Injectable, ViewChild, Input, Optional, Inject, Component, NgModule, EventEmitter, Output, ViewChildren, signal, inject, ChangeDetectionStrategy, DOCUMENT, isDevMode, HostListener, Directive, Renderer2, ElementRef, Pipe, ViewEncapsulation, Self, Host, APP_INITIALIZER, Injector, computed, DestroyRef, effect, ChangeDetectorRef, ErrorHandler, NgZone } from '@angular/core';
 import * as i1$4 from '@angular/router';
 import { NavigationEnd, Router, RouterModule, NavigationStart, NavigationError } from '@angular/router';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
@@ -10114,63 +10114,144 @@ class ResizePanelsComponent {
         /** Whether the panels should be resizable */
         this.resizable = true;
         // TODO: ⚠️ Output bindings should not be named "on", nor prefixed with it ...
-        // Using on in @Output() names causes confusion with native events and can break tooling (e.g., Angular’s template type checking, IDE autocomplete).
+        // Using on in @Output() names causes confusion with native events and can break tooling (e.g., Angular's template type checking, IDE autocomplete).
         // The Angular team explicitly discourages this pattern.
-        // run `npm run lint` to see error 
+        // run `npm run lint` to see this error 
         /** The Resize Event */
         this.onResize = new EventEmitter();
         /** The Resize Start Event */
         this.onResizeStart = new EventEmitter();
         /** The Resize End Event */
         this.onResizeEnd = new EventEmitter();
-        /** Whether the user is currently resizing */
-        this.isResizing = false;
+        /** Whether the user is currently resizing - using signal for better performance */
+        this.isResizing = signal(false, ...(ngDevMode ? [{ debugName: "isResizing" }] : []));
+        /** Cached style objects to avoid recalculation on every change detection */
+        this.firstPanelStyle = signal({
+            flex: 50,
+            minWidth: 'auto',
+            minHeight: 'auto',
+            maxHeight: 'none'
+        }, ...(ngDevMode ? [{ debugName: "firstPanelStyle" }] : []));
+        this.secondPanelStyle = signal({
+            flex: 50,
+            minWidth: 'auto',
+            minHeight: 'auto',
+            maxHeight: 'none'
+        }, ...(ngDevMode ? [{ debugName: "secondPanelStyle" }] : []));
         /** The first panel max height */
         this.firstPanelMaxHeight = 'none';
         /** The second panel max height */
         this.secondPanelMaxHeight = 'none';
+        /** ResizeObserver for efficient content size tracking */
+        this.resizeObserver = null;
+        /** Animation frame ID for throttling */
+        this.animationFrameId = null;
+        /** Angular safe document reference */
+        this.document = inject(DOCUMENT);
+        /** Angular zone */
+        this.ngZone = inject(NgZone);
+        // Create bound handlers outside Angular zone
+        this.boundMouseMoveHandler = this.onMouseMove.bind(this);
+        this.boundMouseUpHandler = this.stopResize.bind(this);
     }
     /** Initializes the component */
     ngOnInit() {
         this.initialSplit = this.splitPosition;
+        this.updatePanelStyles();
+        this.setupResizeObserver();
     }
     /** On Changes Lifecycle Hook */
     ngOnChanges() {
         if (this.resizable && !!this.initialSplit) {
             this.splitPosition = this.initialSplit;
         }
+        this.updatePanelStyles();
     }
-    /** Gets the style for the first panel */
-    getFirstPanelStyle() {
-        const contentHeight = this.firstPanel?.nativeElement?.children[0]?.getBoundingClientRect().height;
-        if (contentHeight < this.firstPanel?.nativeElement?.getBoundingClientRect().height) {
-            this.firstPanelMaxHeight = contentHeight + 'px';
+    /** Cleanup on destroy */
+    ngOnDestroy() {
+        this.removeEventListeners();
+        this.cleanupResizeObserver();
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
         }
-        if (contentHeight > this.firstPanel?.nativeElement?.getBoundingClientRect().height) {
-            this.firstPanelMaxHeight = 'none';
+    }
+    /** Setup ResizeObserver for efficient content size tracking */
+    setupResizeObserver() {
+        if (typeof ResizeObserver === 'undefined') {
+            return; // Fallback for older browsers
         }
-        return {
-            flex: this.splitPosition,
-            minWidth: this.direction === 'vertical' ? this.firstPanelMinSize : 'auto',
-            minHeight: this.direction === 'horizontal' ? this.firstPanelMinSize : 'auto',
-            maxHeight: this.direction === 'horizontal' ? this.firstPanelMaxHeight : 'none'
-        };
+        this.ngZone.runOutsideAngular(() => {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updatePanelStyles();
+            });
+            // Observe content changes in panels
+            if (this.firstPanel?.nativeElement?.children[0]) {
+                this.resizeObserver.observe(this.firstPanel.nativeElement.children[0]);
+            }
+            if (this.secondPanel?.nativeElement?.children[0]) {
+                this.resizeObserver.observe(this.secondPanel.nativeElement.children[0]);
+            }
+        });
     }
-    /** Gets the style for the second panel */
-    getSecondPanelStyle() {
-        const contentHeight = this.secondPanel?.nativeElement?.children[0]?.getBoundingClientRect().height;
-        if (contentHeight < this.secondPanel?.nativeElement?.getBoundingClientRect().height) {
-            this.secondPanelMaxHeight = contentHeight + 'px';
+    /** Cleanup ResizeObserver */
+    cleanupResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
         }
-        if (contentHeight > this.secondPanel?.nativeElement?.getBoundingClientRect().height) {
-            this.secondPanelMaxHeight = 'none';
+    }
+    /** Update cached panel styles - called only when necessary */
+    updatePanelStyles() {
+        this.updateFirstPanelStyle();
+        this.updateSecondPanelStyle();
+    }
+    /** Calculate and cache first panel style */
+    updateFirstPanelStyle() {
+        let maxHeight = 'none';
+        if (this.firstPanel?.nativeElement?.children[0]) {
+            const contentHeight = this.firstPanel.nativeElement.children[0].getBoundingClientRect().height;
+            const panelHeight = this.firstPanel.nativeElement.getBoundingClientRect().height;
+            if (contentHeight < panelHeight) {
+                maxHeight = contentHeight + 'px';
+            }
         }
-        return {
+        this.firstPanelMaxHeight = maxHeight;
+        this.firstPanelStyle.set({
+            flex: this.splitPosition,
+            minWidth: this.direction === 'vertical' ? this.firstPanelMinSize || 'auto' : 'auto',
+            minHeight: this.direction === 'horizontal' ? this.firstPanelMinSize || 'auto' : 'auto',
+            maxHeight: this.direction === 'horizontal' ? maxHeight : 'none'
+        });
+    }
+    /** Calculate and cache second panel style */
+    updateSecondPanelStyle() {
+        let maxHeight = 'none';
+        if (this.secondPanel?.nativeElement?.children[0]) {
+            const contentHeight = this.secondPanel.nativeElement.children[0].getBoundingClientRect().height;
+            const panelHeight = this.secondPanel.nativeElement.getBoundingClientRect().height;
+            if (contentHeight < panelHeight) {
+                maxHeight = contentHeight + 'px';
+            }
+        }
+        this.secondPanelMaxHeight = maxHeight;
+        this.secondPanelStyle.set({
             flex: 100 - this.splitPosition,
-            minWidth: this.direction === 'vertical' ? this.secondPanelMinSize : 'auto',
-            minHeight: this.direction === 'horizontal' ? this.secondPanelMinSize : 'auto',
-            maxHeight: this.direction === 'horizontal' ? this.secondPanelMaxHeight : 'none'
-        };
+            minWidth: this.direction === 'vertical' ? this.secondPanelMinSize || 'auto' : 'auto',
+            minHeight: this.direction === 'horizontal' ? this.secondPanelMinSize || 'auto' : 'auto',
+            maxHeight: this.direction === 'horizontal' ? maxHeight : 'none'
+        });
+    }
+    /** Add event listeners outside Angular zone */
+    addEventListeners() {
+        this.ngZone.runOutsideAngular(() => {
+            this.document.addEventListener('mousemove', this.boundMouseMoveHandler);
+            this.document.addEventListener('mouseup', this.boundMouseUpHandler);
+        });
+    }
+    /** Remove event listeners */
+    removeEventListeners() {
+        this.document.removeEventListener('mousemove', this.boundMouseMoveHandler);
+        this.document.removeEventListener('mouseup', this.boundMouseUpHandler);
     }
     /** Start resizing */
     startResize() {
@@ -10179,17 +10260,26 @@ class ResizePanelsComponent {
             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;
+        this.isResizing.set(true);
+        this.addEventListeners();
     }
     /** Stop resizing on mouse up */
     stopResize() {
-        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
+        if (this.isResizing()) {
+            this.ngZone.run(() => {
+                this.isResizing.set(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
+                });
             });
+            this.removeEventListeners();
+            // Cancel any pending animation frame
+            if (this.animationFrameId !== null) {
+                cancelAnimationFrame(this.animationFrameId);
+                this.animationFrameId = null;
+            }
         }
     }
     /**
@@ -10197,10 +10287,16 @@ class ResizePanelsComponent {
      * @param event the mouse event
      */
     onMouseMove(event) {
-        if (this.isResizing) {
+        if (this.isResizing()) {
             event.preventDefault();
             event.stopPropagation();
-            this.resize(event);
+            // Use requestAnimationFrame for smoother updates
+            if (this.animationFrameId === null) {
+                this.animationFrameId = requestAnimationFrame(() => {
+                    this.resize(event);
+                    this.animationFrameId = null;
+                });
+            }
         }
     }
     /**
@@ -10213,6 +10309,8 @@ class ResizePanelsComponent {
         const mousePos = this.direction === 'vertical' ? event.x : event.y;
         const pos = ((mousePos - containerPos) / containerSize) * 100;
         this.splitPosition = Math.min(Math.max(pos, 1), 99);
+        // Update cached styles
+        this.updatePanelStyles();
         this.onResize.emit({
             splitPosition: this.splitPosition,
             firstPanelSize: this.direction === 'vertical' ? this.firstPanel.nativeElement.clientWidth : this.firstPanel.nativeElement.clientHeight,
@@ -10220,12 +10318,12 @@ class ResizePanelsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ResizePanelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ResizePanelsComponent, isStandalone: false, selector: "sof-ar-resize-panels", inputs: { direction: "direction", splitPosition: "splitPosition", firstPanelMinSize: "firstPanelMinSize", secondPanelMinSize: "secondPanelMinSize", resizable: "resizable" }, outputs: { onResize: "onResize", onResizeStart: "onResizeStart", onResizeEnd: "onResizeEnd" }, host: { listeners: { "window:mouseup": "stopResize()", "window:mousemove": "onMouseMove($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "firstPanel", first: true, predicate: ["firstPanel"], descendants: true }, { propertyName: "secondPanel", first: true, predicate: ["secondPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, 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  @if (resizable) {\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\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{width:100%;height:100%;display:flex}.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:hover,.sof-ar-resize-panels-drag-handle.resizing{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{width:5px;height:100%;right:2px}.sof-ar-resize-panels-drag-handle.horizontal{width:100%;height:5px;bottom:2px}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ResizePanelsComponent, isStandalone: false, selector: "sof-ar-resize-panels", inputs: { direction: "direction", splitPosition: "splitPosition", firstPanelMinSize: "firstPanelMinSize", secondPanelMinSize: "secondPanelMinSize", resizable: "resizable" }, outputs: { onResize: "onResize", onResizeStart: "onResizeStart", onResizeEnd: "onResizeEnd" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "firstPanel", first: true, predicate: ["firstPanel"], descendants: true }, { propertyName: "secondPanel", first: true, predicate: ["secondPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div \r\n  #container \r\n  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  <!-- First Panel -->\r\n  <div #firstPanel [ngStyle]=\"firstPanelStyle()\" class=\"sof-ar-resize-panels-panel-content\">\r\n    <ng-content select=\"[sof-ar-resize-panel-first]\"></ng-content>\r\n  </div>\r\n  <!-- Drag Handle / Border -->\r\n  @if (resizable) {\r\n  <div class=\"sof-ar-resize-panels-border\" [ngClass]=\"direction\">\r\n    <div \r\n      class=\"sof-ar-resize-panels-drag-handle\" \r\n      (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 #secondPanel [ngStyle]=\"secondPanelStyle()\" 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{width:100%;height:100%;display:flex;contain:layout style}.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;will-change:cursor}.sof-ar-resize-panels-container.horizontal.resizing{cursor:ns-resize;will-change:cursor}.sof-ar-resize-panels-drag-handle{background-color:transparent;position:relative;transition:background-color .1s linear;transition-delay:0s;z-index:1000;will-change:background-color}.sof-ar-resize-panels-drag-handle:hover,.sof-ar-resize-panels-drag-handle.resizing{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{width:5px;height:100%;right:2px}.sof-ar-resize-panels-drag-handle.horizontal{width:100%;height:5px;bottom:2px}.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;contain:layout style paint;transform:translateZ(0);-webkit-overflow-scrolling:touch}.sof-ar-resize-panels-panel-content:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ResizePanelsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sof-ar-resize-panels', standalone: false, 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  @if (resizable) {\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\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{width:100%;height:100%;display:flex}.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:hover,.sof-ar-resize-panels-drag-handle.resizing{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{width:5px;height:100%;right:2px}.sof-ar-resize-panels-drag-handle.horizontal{width:100%;height:5px;bottom:2px}.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}\n"] }]
-        }], propDecorators: { direction: [{
+            args: [{ selector: 'sof-ar-resize-panels', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div \r\n  #container \r\n  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  <!-- First Panel -->\r\n  <div #firstPanel [ngStyle]=\"firstPanelStyle()\" class=\"sof-ar-resize-panels-panel-content\">\r\n    <ng-content select=\"[sof-ar-resize-panel-first]\"></ng-content>\r\n  </div>\r\n  <!-- Drag Handle / Border -->\r\n  @if (resizable) {\r\n  <div class=\"sof-ar-resize-panels-border\" [ngClass]=\"direction\">\r\n    <div \r\n      class=\"sof-ar-resize-panels-drag-handle\" \r\n      (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 #secondPanel [ngStyle]=\"secondPanelStyle()\" 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{width:100%;height:100%;display:flex;contain:layout style}.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;will-change:cursor}.sof-ar-resize-panels-container.horizontal.resizing{cursor:ns-resize;will-change:cursor}.sof-ar-resize-panels-drag-handle{background-color:transparent;position:relative;transition:background-color .1s linear;transition-delay:0s;z-index:1000;will-change:background-color}.sof-ar-resize-panels-drag-handle:hover,.sof-ar-resize-panels-drag-handle.resizing{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{width:5px;height:100%;right:2px}.sof-ar-resize-panels-drag-handle.horizontal{width:100%;height:5px;bottom:2px}.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;contain:layout style paint;transform:translateZ(0);-webkit-overflow-scrolling:touch}.sof-ar-resize-panels-panel-content:empty{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { direction: [{
                 type: Input
             }], splitPosition: [{
                 type: Input
@@ -10250,12 +10348,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], secondPanel: [{
                 type: ViewChild,
                 args: ['secondPanel']
-            }], stopResize: [{
-                type: HostListener,
-                args: ['window:mouseup']
-            }], onMouseMove: [{
-                type: HostListener,
-                args: ['window:mousemove', ['$event']]
             }] } });
 
 /** The Resize Panels Module */