angular-toolbox 1.4.1 → 1.4.2

package/fesm2022/angular-toolbox.mjs

@@ -586,8 +586,8 @@ class AbstractVersionManager {
 const ATX_VERSION_CONFIG = {
     major: 1,
     minor: 4,
-    patch: 1,
-    buildTimestamp: 1727868693957
+    patch: 2,
+    buildTimestamp: 1728546812271
 };
 /**
  * The public service that exposes the current version of the Angular Toolbox library.
@@ -8789,11 +8789,11 @@ class BorderLayoutContainer {
         this.resizable = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BorderLayoutContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: BorderLayoutContainer, isStandalone: true, selector: "atx-border-layout-container", inputs: { constraints: "constraints" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n * LICENSE\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n-->\n\n<ng-content></ng-content>\n@if (resizable) {\n    <div class=\"atx-handle\" [class.atx-handle-selected]=\"selected\" (mousedown)=\"resizetart()\"></div>\n}\n", styles: [":host{box-sizing:border-box;padding:0;margin:0}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", type: BorderLayoutContainer, isStandalone: true, selector: "atx-border-layout-container", inputs: { constraints: "constraints" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n * LICENSE\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n-->\n\n<ng-content></ng-content>\n@if (resizable) {\n    <div class=\"atx-handle\" [class.atx-handle-selected]=\"selected\" (mousedown)=\"resizetart()\"></div>\n}\n", styles: [":host{box-sizing:border-box;padding:0;margin:0}:host.north{position:absolute;z-index:10;top:0;left:0;right:0}:host.north>.atx-handle{left:0;right:0;bottom:0;height:4px;cursor:ns-resize}:host.west{position:absolute;z-index:5;left:0;height:unset!important}:host.west>.atx-handle{right:0;bottom:0;top:0;width:4px;cursor:ew-resize}:host.east{position:absolute;z-index:5;right:0;height:unset!important}:host.east>.atx-handle{left:0;bottom:0;top:0;width:4px;cursor:ew-resize}:host.south{position:absolute;z-index:10;bottom:0;left:0;right:0}:host.south>.atx-handle{left:0;right:0;top:0;height:4px;cursor:ns-resize}:host.center{position:absolute}.atx-handle{position:absolute}.atx-handle:hover,.atx-handle.atx-handle-selected{background-color:var(--atx-handle-color, #469afa)}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BorderLayoutContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'atx-border-layout-container', standalone: true, template: "<!--\n * LICENSE\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n-->\n\n<ng-content></ng-content>\n@if (resizable) {\n    <div class=\"atx-handle\" [class.atx-handle-selected]=\"selected\" (mousedown)=\"resizetart()\"></div>\n}\n", styles: [":host{box-sizing:border-box;padding:0;margin:0}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+            args: [{ selector: 'atx-border-layout-container', standalone: true, template: "<!--\n * LICENSE\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n-->\n\n<ng-content></ng-content>\n@if (resizable) {\n    <div class=\"atx-handle\" [class.atx-handle-selected]=\"selected\" (mousedown)=\"resizetart()\"></div>\n}\n", styles: [":host{box-sizing:border-box;padding:0;margin:0}:host.north{position:absolute;z-index:10;top:0;left:0;right:0}:host.north>.atx-handle{left:0;right:0;bottom:0;height:4px;cursor:ns-resize}:host.west{position:absolute;z-index:5;left:0;height:unset!important}:host.west>.atx-handle{right:0;bottom:0;top:0;width:4px;cursor:ew-resize}:host.east{position:absolute;z-index:5;right:0;height:unset!important}:host.east>.atx-handle{left:0;bottom:0;top:0;width:4px;cursor:ew-resize}:host.south{position:absolute;z-index:10;bottom:0;left:0;right:0}:host.south>.atx-handle{left:0;right:0;top:0;height:4px;cursor:ns-resize}:host.center{position:absolute}.atx-handle{position:absolute}.atx-handle:hover,.atx-handle.atx-handle-selected{background-color:var(--atx-handle-color, #469afa)}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -9042,17 +9042,26 @@ class BorderLayoutRenderer extends IdentifiableComponent {
     /**
      * @private
      */
-    constructor(subscribeSvc) {
+    constructor(subscribeSvc, document) {
         super();
         this.subscribeSvc = subscribeSvc;
+        this.document = document;
         /**
          * Emits events each time the user starts, or stops dragging handle.
          */
-        this.userAction = new EventEmitter(false);
+        this.userAction = new EventEmitter();
         /**
          * @private
          */
         this.containerList = [];
+        /**
+         * @private
+         */
+        this.storedStopHandler = null;
+        /**
+         * @private
+         */
+        this.storedMoveHandler = null;
         this.boundsManager = new BorderLayoutBoundsManager();
     }
     /**
@@ -9099,12 +9108,17 @@ class BorderLayoutRenderer extends IdentifiableComponent {
      * Makes this object elligible for garbage collection.
      */
     destroy() {
+        if (this.storedStopHandler) {
+            this.document.removeEventListener(MOUSEMOVE, this.storedMoveHandler);
+            this.document.removeEventListener(MOUSEUP, this.storedStopHandler);
+            this.deleteStoredHandlers();
+        }
         this.subscribeSvc.clearAll(this);
-        this.containerList.length = 0;
-        this.containerList = null;
         this.lytContainerElm = null;
         this.boundsManager.destroy();
         this.boundsManager = null;
+        this.containerList.length = 0;
+        this.containerList = null;
     }
     /**
      * Forces the layout of all `BorderLayoutContainer` objects associated with the main container.
@@ -9147,32 +9161,36 @@ class BorderLayoutRenderer extends IdentifiableComponent {
         const region = constraints.region;
         const minSize = constraints.minSize;
         const maxSize = constraints.maxSize;
+        const doc = this.document;
         let size = 0;
         this.boundsManager.setOrigin(bounds.x, bounds.y);
         let resizeMethod = this.boundsManager.getResizeMethod(region);
         container.selected = true;
         const onMoveHandler = (event) => {
-            event.preventDefault();
             event.stopPropagation();
+            event.preventDefault();
             size = resizeMethod(event, width, height, minSize, maxSize);
             container.setSize(size);
             this.render(width);
             this.fireEvent(container, LayoutDragEventType.DRAGGING);
         };
         const onStopHandler = (event) => {
-            event.preventDefault();
             event.stopPropagation();
-            lytNativeElm.removeEventListener(MOUSEMOVE, onMoveHandler);
-            lytNativeElm.removeEventListener(MOUSEUP, onStopHandler);
+            event.preventDefault();
+            doc.removeEventListener(MOUSEMOVE, onMoveHandler);
+            doc.removeEventListener(MOUSEUP, onStopHandler);
+            this.deleteStoredHandlers();
             container.selected = false;
             size = resizeMethod(event, width, height, minSize, maxSize);
             container.setSize(size);
             this.render(width);
             this.fireEvent(container, LayoutDragEventType.DRAG_STOP);
         };
-        lytNativeElm.addEventListener(MOUSEMOVE, onMoveHandler);
-        lytNativeElm.addEventListener(MOUSEUP, onStopHandler);
+        this.storedMoveHandler = onMoveHandler;
+        this.storedStopHandler = onStopHandler;
         this.fireEvent(container, LayoutDragEventType.DRAG_START);
+        doc.addEventListener(MOUSEMOVE, onMoveHandler);
+        doc.addEventListener(MOUSEUP, onStopHandler);
     }
     /**
      * @private
@@ -9190,32 +9208,47 @@ class BorderLayoutRenderer extends IdentifiableComponent {
         const bottom = bounds.bottom;
         const left = bounds.left;
         const right = bounds.right;
-        this.containerList.forEach((cont) => {
+        const cList = this.containerList;
+        let cursor = cList.length - 1;
+        while (cursor >= 0) {
+            const cont = cList[cursor];
             const r = cont.constraints.region;
+            cursor--;
             if (r === LayoutRegion.WEST) {
                 cont.setTopPos(top);
                 cont.setRightPos(width - left);
                 cont.setBottomPos(bottom - top);
-                return;
+                continue;
             }
             if (r === LayoutRegion.CENTER) {
                 cont.setTopPos(top);
                 cont.setLeftPos(left);
                 cont.setRightPos(right - left);
                 cont.setBottomPos(bottom - top);
-                return;
+                continue;
             }
             if (r === LayoutRegion.EAST) {
                 cont.setTopPos(top);
                 cont.setLeftPos(width - (right - left));
                 cont.setBottomPos(bottom - top);
+                continue;
             }
-        });
+        }
+        ;
     }
+    /**
+     * @private
+     */
     checkLytContainer() {
         if (!this.lytContainerElm)
             throw new ReferenceError(LAYOUT_ERR_MSG);
     }
+    /**
+     * @private
+     */
+    deleteStoredHandlers() {
+        this.storedMoveHandler = this.storedStopHandler = null;
+    }
 }
 
 /**
@@ -9247,22 +9280,22 @@ class BorderLayout extends IdentifiableComponent {
     /**
      * @private
      */
-    constructor(subscribeSvc) {
+    constructor(subscribeSvc, document) {
         super();
         this.subscribeSvc = subscribeSvc;
         /**
          * Emits events each time the user starts dragging a region handle.
          */
-        this.dragStart = new EventEmitter(false);
+        this.dragStart = new EventEmitter();
         /**
          * Emits events each time the user stops dragging a region handle.
          */
-        this.dragStop = new EventEmitter(false);
+        this.dragStop = new EventEmitter();
         /**
          * Emits events each time the user is dragging a region handle.
          */
-        this.dragging = new EventEmitter(false);
-        this.renderer = new BorderLayoutRenderer(subscribeSvc);
+        this.dragging = new EventEmitter();
+        this.renderer = new BorderLayoutRenderer(subscribeSvc, document);
         subscribeSvc.register(this, this.renderer.userAction.subscribe((event) => {
             event.layout = this;
             if (event.type === LayoutDragEventType.DRAGGING) {
@@ -9314,13 +9347,16 @@ class BorderLayout extends IdentifiableComponent {
     resizeRegion(region, size) {
         this.renderer.resizeRegion(region, size);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BorderLayout, deps: [{ token: SubscriptionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: BorderLayout, isStandalone: true, selector: "atx-border-layout", outputs: { dragStart: "dragStart", dragStop: "dragStop", dragging: "dragging" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "__containers__", predicate: BorderLayoutContainer }], viewQueries: [{ propertyName: "layoutContainer", first: true, predicate: ["atxLayoutContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n * LICENSE\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n-->\n\n<div #atxLayoutContainer class=\"atx-border-layout\">\n    <ng-content></ng-content>\n</div>", styles: [".atx-border-layout{position:relative;height:100%;width:100%;-webkit-user-select:none;user-select:none;overflow:hidden}.atx-border-layout,.atx-border-layout *{box-sizing:border-box}.atx-border-layout .content{height:100%;width:100%;overflow:auto}.atx-border-layout .drag{position:absolute;border:2px solid black}:host ::ng-deep .atx-handle{position:absolute}:host ::ng-deep .atx-handle:hover,:host ::ng-deep .atx-handle.atx-handle-selected{background-color:var(--atx-handle-color, #469afa)}:host ::ng-deep .north{position:absolute;z-index:10;top:0;left:0;right:0}:host ::ng-deep .north .atx-handle{left:0;right:0;bottom:0;height:4px;cursor:ns-resize}:host ::ng-deep .west{position:absolute;z-index:5;left:0;height:unset!important}:host ::ng-deep .west .atx-handle{right:0;bottom:0;top:0;width:4px;cursor:ew-resize}:host ::ng-deep .east{position:absolute;z-index:5;right:0;height:unset!important}:host ::ng-deep .east .atx-handle{left:0;bottom:0;top:0;width:4px;cursor:ew-resize}:host ::ng-deep .south{position:absolute;z-index:10;bottom:0;left:0;right:0}:host ::ng-deep .south .atx-handle{left:0;right:0;top:0;height:4px;cursor:ns-resize}:host ::ng-deep .center{position:absolute}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BorderLayout, deps: [{ token: SubscriptionService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: BorderLayout, isStandalone: true, selector: "atx-border-layout", outputs: { dragStart: "dragStart", dragStop: "dragStop", dragging: "dragging" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "__containers__", predicate: BorderLayoutContainer }], viewQueries: [{ propertyName: "layoutContainer", first: true, predicate: ["atxLayoutContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\n * LICENSE\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n-->\n\n<div #atxLayoutContainer class=\"atx-border-layout\">\n    <ng-content></ng-content>\n</div>", styles: [".atx-border-layout{position:relative;height:100%;width:100%;-webkit-user-select:none;user-select:none;overflow:hidden}.atx-border-layout{box-sizing:border-box}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BorderLayout, decorators: [{
             type: Component,
-            args: [{ selector: 'atx-border-layout', standalone: true, template: "<!--\n * LICENSE\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n-->\n\n<div #atxLayoutContainer class=\"atx-border-layout\">\n    <ng-content></ng-content>\n</div>", styles: [".atx-border-layout{position:relative;height:100%;width:100%;-webkit-user-select:none;user-select:none;overflow:hidden}.atx-border-layout,.atx-border-layout *{box-sizing:border-box}.atx-border-layout .content{height:100%;width:100%;overflow:auto}.atx-border-layout .drag{position:absolute;border:2px solid black}:host ::ng-deep .atx-handle{position:absolute}:host ::ng-deep .atx-handle:hover,:host ::ng-deep .atx-handle.atx-handle-selected{background-color:var(--atx-handle-color, #469afa)}:host ::ng-deep .north{position:absolute;z-index:10;top:0;left:0;right:0}:host ::ng-deep .north .atx-handle{left:0;right:0;bottom:0;height:4px;cursor:ns-resize}:host ::ng-deep .west{position:absolute;z-index:5;left:0;height:unset!important}:host ::ng-deep .west .atx-handle{right:0;bottom:0;top:0;width:4px;cursor:ew-resize}:host ::ng-deep .east{position:absolute;z-index:5;right:0;height:unset!important}:host ::ng-deep .east .atx-handle{left:0;bottom:0;top:0;width:4px;cursor:ew-resize}:host ::ng-deep .south{position:absolute;z-index:10;bottom:0;left:0;right:0}:host ::ng-deep .south .atx-handle{left:0;right:0;top:0;height:4px;cursor:ns-resize}:host ::ng-deep .center{position:absolute}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
-        }], ctorParameters: () => [{ type: SubscriptionService }], propDecorators: { dragStart: [{
+            args: [{ selector: 'atx-border-layout', standalone: true, template: "<!--\n * LICENSE\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n-->\n\n<div #atxLayoutContainer class=\"atx-border-layout\">\n    <ng-content></ng-content>\n</div>", styles: [".atx-border-layout{position:relative;height:100%;width:100%;-webkit-user-select:none;user-select:none;overflow:hidden}.atx-border-layout{box-sizing:border-box}\n/**\n * @license\n * Copyright Pascal ECHEMANN. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be found in\n * the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+        }], ctorParameters: () => [{ type: SubscriptionService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { dragStart: [{
                 type: Output
             }], dragStop: [{
                 type: Output