angular-toolbox 1.4.1 → 1.4.3

package/fesm2022/angular-toolbox.mjs

@@ -586,8 +586,8 @@ class AbstractVersionManager {
 const ATX_VERSION_CONFIG = {
     major: 1,
     minor: 4,
-    patch: 1,
-    buildTimestamp: 1727868693957
+    patch: 3,
+    buildTimestamp: 1728711207638
 };
 /**
  * The public service that exposes the current version of the Angular Toolbox library.
@@ -8564,6 +8564,18 @@ const API_MATCH = ':popover-open';
  * This component is part of the LAF-less API.
  */
 class DropdownComponent extends IdentifiableComponent {
+    /**
+     * The disabled property sets or returns whether a dropdown is disabled, or not.
+     */
+    set disabled(value) {
+        this._disabled = this._button.nativeElement.disabled = value;
+        if (!value)
+            return;
+        this.hideContent();
+    }
+    get disabled() {
+        return this._disabled;
+    }
     /**
      * @private
      */
@@ -8590,6 +8602,10 @@ class DropdownComponent extends IdentifiableComponent {
          * (`auto`), or not (`manual`).
          */
         this.popoverState = "auto";
+        /**
+         * @private
+         */
+        this._disabled = false;
         this.id = this.getID().toString();
     }
     /**
@@ -8604,7 +8620,7 @@ class DropdownComponent extends IdentifiableComponent {
      * Displays the dropdown container.
      */
     showContent() {
-        if (!this._popover)
+        if (!this._popover || this._disabled)
             return;
         this._popover.nativeElement.showPopover();
     }
@@ -8637,11 +8653,11 @@ class DropdownComponent extends IdentifiableComponent {
         return new DropdownEvent(this, type, event.newState, event.oldState);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: DropdownComponent, isStandalone: true, selector: "atx-dropdown", inputs: { buttonClass: "buttonClass", containerClass: "containerClass", vPos: "vPos", hPos: "hPos", popoverState: "popoverState" }, outputs: { toggle: "toggle", beforeToggle: "beforeToggle" }, viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n \r\n<div class=\"atx-dropdown-container\" [class]=\"containerClass\">\r\n    <button [class]=\"buttonClass\" [attr.popovertarget]=\"id\">\r\n        <ng-content></ng-content>\r\n    </button>\r\n    <div #popover [attr.popover]=\"popoverState\" [attr.id]=\"id\" (toggle)=\"onToggle($event)\" (beforetoggle)=\"onBeforeToggle($event)\"></div>\r\n    <div class=\"atx-dropdown-popover\"\r\n         [class.atx-dropdown-v-start]=\"vPos === 'start'\"\r\n         [class.atx-dropdown-top]=\"vPos === 'top'\"\r\n         [class.atx-dropdown-middle]=\"vPos === 'middle'\"\r\n         [class.atx-dropdown-bottom]=\"vPos === 'bottom'\"\r\n         [class.atx-dropdown-v-end]=\"vPos === 'end'\"\r\n         [class.atx-dropdown-h-start]=\"hPos === 'start'\"\r\n         [class.atx-dropdown-left]=\"hPos === 'left'\"\r\n         [class.atx-dropdown-center]=\"hPos === 'center'\"\r\n         [class.atx-dropdown-right]=\"hPos === 'right'\"\r\n         [class.atx-dropdown-h-end]=\"hPos === 'end'\"\r\n         [class.atx-dropdown-centered]=\"hPos === 'center' && vPos === 'middle'\">\r\n        <ng-content select=\"[content]\"></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".atx-dropdown-container{position:relative}[popover]:popover-open{inset:unset;border:none;background:none;margin:0;padding:0}[popover]:popover-open+.atx-dropdown-popover{display:block}.atx-dropdown-popover{display:none;position:absolute;left:0;margin:0;padding:0;z-index:100;height:auto;width:max-content}.atx-dropdown-v-start{bottom:unset;top:0}.atx-dropdown-top{bottom:calc(100% + var(--atx-dropdown-gutter, 2px));top:unset}.atx-dropdown-middle{bottom:unset;top:50%;transform:translateY(-50%)}.atx-dropdown-bottom{bottom:unset;top:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-v-end{bottom:0;top:unset}.atx-dropdown-h-start{right:calc(100% + var(--atx-dropdown-gutter, 2px));left:unset}.atx-dropdown-left{left:0;right:unset}.atx-dropdown-center{left:50%;transform:translate(-50%);right:unset}.atx-dropdown-right{right:0;left:unset}.atx-dropdown-h-end{right:unset;left:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-centered{transform:translate(-50%,-50%)}\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\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: DropdownComponent, isStandalone: true, selector: "atx-dropdown", inputs: { buttonClass: "buttonClass", containerClass: "containerClass", vPos: "vPos", hPos: "hPos", popoverState: "popoverState", disabled: "disabled" }, outputs: { toggle: "toggle", beforeToggle: "beforeToggle" }, viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "_button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n \r\n<div class=\"atx-dropdown-container\" [class]=\"containerClass\">\r\n    <button #button [class]=\"buttonClass\" [attr.popovertarget]=\"id\">\r\n        <ng-content></ng-content>\r\n    </button>\r\n    <div #popover [attr.popover]=\"popoverState\" [attr.id]=\"id\" (toggle)=\"onToggle($event)\" (beforetoggle)=\"onBeforeToggle($event)\"></div>\r\n    <div class=\"atx-dropdown-popover\"\r\n         [class.atx-dropdown-v-start]=\"vPos === 'start'\"\r\n         [class.atx-dropdown-top]=\"vPos === 'top'\"\r\n         [class.atx-dropdown-middle]=\"vPos === 'middle'\"\r\n         [class.atx-dropdown-bottom]=\"vPos === 'bottom'\"\r\n         [class.atx-dropdown-v-end]=\"vPos === 'end'\"\r\n         [class.atx-dropdown-h-start]=\"hPos === 'start'\"\r\n         [class.atx-dropdown-left]=\"hPos === 'left'\"\r\n         [class.atx-dropdown-center]=\"hPos === 'center'\"\r\n         [class.atx-dropdown-right]=\"hPos === 'right'\"\r\n         [class.atx-dropdown-h-end]=\"hPos === 'end'\"\r\n         [class.atx-dropdown-centered]=\"hPos === 'center' && vPos === 'middle'\">\r\n        <ng-content select=\"[content]\"></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".atx-dropdown-container{position:relative}[popover]:popover-open{inset:unset;border:none;background:none;margin:0;padding:0}[popover]:popover-open+.atx-dropdown-popover{display:block}.atx-dropdown-popover{display:none;position:absolute;left:0;margin:0;padding:0;z-index:100;height:auto;width:max-content}.atx-dropdown-v-start{bottom:unset;top:0}.atx-dropdown-top{bottom:calc(100% + var(--atx-dropdown-gutter, 2px));top:unset}.atx-dropdown-middle{bottom:unset;top:50%;transform:translateY(-50%)}.atx-dropdown-bottom{bottom:unset;top:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-v-end{bottom:0;top:unset}.atx-dropdown-h-start{right:calc(100% + var(--atx-dropdown-gutter, 2px));left:unset}.atx-dropdown-left{left:0;right:unset}.atx-dropdown-center{left:50%;transform:translate(-50%);right:unset}.atx-dropdown-right{right:0;left:unset}.atx-dropdown-h-end{right:unset;left:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-centered{transform:translate(-50%,-50%)}\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\n * found in 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: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'atx-dropdown', standalone: true, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n \r\n<div class=\"atx-dropdown-container\" [class]=\"containerClass\">\r\n    <button [class]=\"buttonClass\" [attr.popovertarget]=\"id\">\r\n        <ng-content></ng-content>\r\n    </button>\r\n    <div #popover [attr.popover]=\"popoverState\" [attr.id]=\"id\" (toggle)=\"onToggle($event)\" (beforetoggle)=\"onBeforeToggle($event)\"></div>\r\n    <div class=\"atx-dropdown-popover\"\r\n         [class.atx-dropdown-v-start]=\"vPos === 'start'\"\r\n         [class.atx-dropdown-top]=\"vPos === 'top'\"\r\n         [class.atx-dropdown-middle]=\"vPos === 'middle'\"\r\n         [class.atx-dropdown-bottom]=\"vPos === 'bottom'\"\r\n         [class.atx-dropdown-v-end]=\"vPos === 'end'\"\r\n         [class.atx-dropdown-h-start]=\"hPos === 'start'\"\r\n         [class.atx-dropdown-left]=\"hPos === 'left'\"\r\n         [class.atx-dropdown-center]=\"hPos === 'center'\"\r\n         [class.atx-dropdown-right]=\"hPos === 'right'\"\r\n         [class.atx-dropdown-h-end]=\"hPos === 'end'\"\r\n         [class.atx-dropdown-centered]=\"hPos === 'center' && vPos === 'middle'\">\r\n        <ng-content select=\"[content]\"></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".atx-dropdown-container{position:relative}[popover]:popover-open{inset:unset;border:none;background:none;margin:0;padding:0}[popover]:popover-open+.atx-dropdown-popover{display:block}.atx-dropdown-popover{display:none;position:absolute;left:0;margin:0;padding:0;z-index:100;height:auto;width:max-content}.atx-dropdown-v-start{bottom:unset;top:0}.atx-dropdown-top{bottom:calc(100% + var(--atx-dropdown-gutter, 2px));top:unset}.atx-dropdown-middle{bottom:unset;top:50%;transform:translateY(-50%)}.atx-dropdown-bottom{bottom:unset;top:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-v-end{bottom:0;top:unset}.atx-dropdown-h-start{right:calc(100% + var(--atx-dropdown-gutter, 2px));left:unset}.atx-dropdown-left{left:0;right:unset}.atx-dropdown-center{left:50%;transform:translate(-50%);right:unset}.atx-dropdown-right{right:0;left:unset}.atx-dropdown-h-end{right:unset;left:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-centered{transform:translate(-50%,-50%)}\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\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
+            args: [{ selector: 'atx-dropdown', standalone: true, template: "<!--\r\n * LICENSE\r\n * Copyright Pascal ECHEMANN. All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\r\n-->\r\n \r\n<div class=\"atx-dropdown-container\" [class]=\"containerClass\">\r\n    <button #button [class]=\"buttonClass\" [attr.popovertarget]=\"id\">\r\n        <ng-content></ng-content>\r\n    </button>\r\n    <div #popover [attr.popover]=\"popoverState\" [attr.id]=\"id\" (toggle)=\"onToggle($event)\" (beforetoggle)=\"onBeforeToggle($event)\"></div>\r\n    <div class=\"atx-dropdown-popover\"\r\n         [class.atx-dropdown-v-start]=\"vPos === 'start'\"\r\n         [class.atx-dropdown-top]=\"vPos === 'top'\"\r\n         [class.atx-dropdown-middle]=\"vPos === 'middle'\"\r\n         [class.atx-dropdown-bottom]=\"vPos === 'bottom'\"\r\n         [class.atx-dropdown-v-end]=\"vPos === 'end'\"\r\n         [class.atx-dropdown-h-start]=\"hPos === 'start'\"\r\n         [class.atx-dropdown-left]=\"hPos === 'left'\"\r\n         [class.atx-dropdown-center]=\"hPos === 'center'\"\r\n         [class.atx-dropdown-right]=\"hPos === 'right'\"\r\n         [class.atx-dropdown-h-end]=\"hPos === 'end'\"\r\n         [class.atx-dropdown-centered]=\"hPos === 'center' && vPos === 'middle'\">\r\n        <ng-content select=\"[content]\"></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [".atx-dropdown-container{position:relative}[popover]:popover-open{inset:unset;border:none;background:none;margin:0;padding:0}[popover]:popover-open+.atx-dropdown-popover{display:block}.atx-dropdown-popover{display:none;position:absolute;left:0;margin:0;padding:0;z-index:100;height:auto;width:max-content}.atx-dropdown-v-start{bottom:unset;top:0}.atx-dropdown-top{bottom:calc(100% + var(--atx-dropdown-gutter, 2px));top:unset}.atx-dropdown-middle{bottom:unset;top:50%;transform:translateY(-50%)}.atx-dropdown-bottom{bottom:unset;top:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-v-end{bottom:0;top:unset}.atx-dropdown-h-start{right:calc(100% + var(--atx-dropdown-gutter, 2px));left:unset}.atx-dropdown-left{left:0;right:unset}.atx-dropdown-center{left:50%;transform:translate(-50%);right:unset}.atx-dropdown-right{right:0;left:unset}.atx-dropdown-h-end{right:unset;left:calc(100% + var(--atx-dropdown-gutter, 2px))}.atx-dropdown-centered{transform:translate(-50%,-50%)}\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\n * found in the LICENSE file at https://pascalechemann.com/angular-toolbox/resources/license\n */\n"] }]
         }], ctorParameters: () => [], propDecorators: { toggle: [{
                 type: Output
             }], beforeToggle: [{
@@ -8656,9 +8672,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], popoverState: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], _popover: [{
                 type: ViewChild,
                 args: ["popover"]
+            }], _button: [{
+                type: ViewChild,
+                args: ["button"]
             }] } });
 
 /**
@@ -8789,11 +8810,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 +9063,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 +9129,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 +9182,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 +9229,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 +9301,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 +9368,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