@mintplayer/ng-bootstrap 21.25.0 → 21.27.0

package/fesm2022/mintplayer-ng-bootstrap-dock.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, TemplateRef, ChangeDetectionStrategy, Component, output, signal, contentChildren, inject, effect, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { input, viewChild, TemplateRef, ChangeDetectionStrategy, Component, computed, output, signal, contentChildren, inject, effect, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { html, unsafeCSS, LitElement } from 'lit';
 import '@mintplayer/ng-bootstrap/web-components/tab-control';
@@ -428,7 +428,7 @@ class MintDockManagerElement extends LitElement {
         }
     }
     static get observedAttributes() {
-        return [...(super.observedAttributes ?? []), 'layout'];
+        return [...(super.observedAttributes ?? []), 'layout', 'debug-layout-integrity'];
     }
     static { this.instanceCounter = 0; }
     // Touch tab-drag gesture: a finger that lands on a tab header must be able
@@ -517,6 +517,11 @@ class MintDockManagerElement extends LitElement {
         this.cornerSnapYTargets = [];
         // Debug: render snap markers while dragging
         this.showSnapMarkers = false;
+        // Debug: assert every pane has a projection slot in shadow DOM after each
+        // render. Off by default so production hosts pay no overhead; demo enables
+        // it via the `debug-layout-integrity` attribute to catch layout-tree bugs
+        // loudly during development.
+        this.debugLayoutIntegrity = false;
         this.pendingDragEndTimeout = null;
         this.previousSplitSizes = new Map();
         this.instanceId = `mint-dock-${++MintDockManagerElement.instanceCounter}`;
@@ -631,6 +636,9 @@ class MintDockManagerElement extends LitElement {
                 this.clearSnapMarkers();
             }
         }
+        else if (name === 'debug-layout-integrity') {
+            this.debugLayoutIntegrity = !(newValue === null || newValue === 'false' || newValue === '0');
+        }
     }
     get layout() {
         return {
@@ -673,6 +681,9 @@ class MintDockManagerElement extends LitElement {
         this.rootLayout = this.cloneLayoutNode(snapshot.root);
         this.floatingLayouts = this.cloneFloatingArray(snapshot.floating);
         this.titles = snapshot.titles ? { ...snapshot.titles } : {};
+        // Sanitize whatever the host fed us: empty stacks, 0/1-child splits, and
+        // nested same-direction splits get pruned/flattened before we render.
+        this.normalizeAllLayouts();
         this.renderLayout();
     }
     /**
@@ -756,6 +767,7 @@ class MintDockManagerElement extends LitElement {
         // wired up in firstUpdated (rootResizeObserver, dockedMutationObserver,
         // and delegated 'resizing' / 'resize-end' events). The MutationObserver
         // on dockedEl fires when the renderNode subtree above is appended.
+        this.verifyProjectionSlots();
     }
     renderNode(node, path, floatingIndex) {
         if (node.kind === 'split') {
@@ -2735,16 +2747,14 @@ class MintDockManagerElement extends LitElement {
             if (!source) {
                 return;
             }
-            const stackEmptied = this.removePaneFromLocation(source, pane, true);
+            this.removePaneFromLocation(source, pane, true);
             const newRoot = {
                 kind: 'stack',
                 panes: [pane],
                 activePane: pane,
             };
             this.rootLayout = newRoot;
-            if (stackEmptied) {
-                this.cleanupLocation(source);
-            }
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             if (this.dragState) {
@@ -2760,6 +2770,7 @@ class MintDockManagerElement extends LitElement {
                 return;
             }
             this.reorderPaneInLocation(source, pane);
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             if (this.dragState) {
@@ -2767,13 +2778,11 @@ class MintDockManagerElement extends LitElement {
             }
             return;
         }
-        const stackEmptied = this.removePaneFromLocation(source, pane, true);
+        this.removePaneFromLocation(source, pane, true);
         if (zone === 'center') {
             this.addPaneToLocation(target, pane);
             this.setActivePaneForLocation(target, pane);
-            if (stackEmptied) {
-                this.cleanupLocation(source);
-            }
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             if (this.dragState) {
@@ -2792,9 +2801,7 @@ class MintDockManagerElement extends LitElement {
         else {
             const floating = this.floatingLayouts[target.index];
             if (!floating) {
-                if (stackEmptied) {
-                    this.cleanupLocation(source);
-                }
+                this.normalizeAllLayouts();
                 this.renderLayout();
                 this.dispatchLayoutChanged();
                 return;
@@ -2802,9 +2809,7 @@ class MintDockManagerElement extends LitElement {
             floating.root = this.dockNodeBeside(floating.root, target.node, newStack, zone);
             floating.activePane = pane;
         }
-        if (stackEmptied) {
-            this.cleanupLocation(source);
-        }
+        this.normalizeAllLayouts();
         this.renderLayout();
         this.dispatchLayoutChanged();
         if (this.dragState) {
@@ -2822,6 +2827,7 @@ class MintDockManagerElement extends LitElement {
         if (!target && targetPath.type === 'docked' && !this.rootLayout) {
             this.rootLayout = this.cloneLayoutNode(source.root);
             this.removeFloatingAt(sourceIndex);
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             return true;
@@ -2847,6 +2853,7 @@ class MintDockManagerElement extends LitElement {
                 this.setActivePaneForLocation(target, activePane);
             }
             this.removeFloatingAt(sourceIndex);
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             return true;
@@ -2859,12 +2866,14 @@ class MintDockManagerElement extends LitElement {
             floating.root = this.dockNodeBeside(floating.root, target.node, source.root, zone);
             floating.activePane = source.activePane ?? this.findFirstPaneName(source.root) ?? undefined;
             this.removeFloatingAt(sourceIndex);
+            this.normalizeAllLayouts();
             this.renderLayout();
             this.dispatchLayoutChanged();
             return true;
         }
         this.rootLayout = this.dockNodeBeside(this.rootLayout, target.node, source.root, zone);
         this.removeFloatingAt(sourceIndex);
+        this.normalizeAllLayouts();
         this.renderLayout();
         this.dispatchLayoutChanged();
         return true;
@@ -2902,7 +2911,7 @@ class MintDockManagerElement extends LitElement {
         if (skipCleanup) {
             return true;
         }
-        this.rootLayout = this.cleanupEmptyStackInTree(this.rootLayout, stack);
+        this.normalizeAllLayouts();
         return true;
     }
     findParentSplit(node, child) {
@@ -3275,48 +3284,6 @@ class MintDockManagerElement extends LitElement {
         this.normalizeSplitNode(parentInfo.parent);
         return root;
     }
-    cleanupEmptyStackInTree(root, stack) {
-        if (!root || stack.panes.length > 0) {
-            return root;
-        }
-        const parentInfo = this.findParentSplit(root, stack);
-        if (!parentInfo) {
-            return root === stack ? null : root;
-        }
-        const parent = parentInfo.parent;
-        const index = parent.children.indexOf(stack);
-        if (index === -1) {
-            return root;
-        }
-        parent.children.splice(index, 1);
-        if (Array.isArray(parent.sizes)) {
-            parent.sizes.splice(index, 1);
-        }
-        this.normalizeSplitNode(parent);
-        return this.cleanupSplitIfNecessary(root, parent);
-    }
-    cleanupSplitIfNecessary(root, split) {
-        if (split.children.length === 1) {
-            return this.replaceNodeInTree(root, split, split.children[0]);
-        }
-        if (split.children.length === 0) {
-            const parentInfo = this.findParentSplit(root, split);
-            if (!parentInfo) {
-                return null;
-            }
-            const parent = parentInfo.parent;
-            const index = parent.children.indexOf(split);
-            if (index !== -1) {
-                parent.children.splice(index, 1);
-                if (Array.isArray(parent.sizes)) {
-                    parent.sizes.splice(index, 1);
-                }
-                this.normalizeSplitNode(parent);
-                return this.cleanupSplitIfNecessary(root, parent);
-            }
-        }
-        return root;
-    }
     dockNodeBeside(root, targetNode, newNode, zone) {
         const orientation = zone === 'left' || zone === 'right' ? 'horizontal' : 'vertical';
         const placeBefore = zone === 'left' || zone === 'top';
@@ -3537,21 +3504,6 @@ class MintDockManagerElement extends LitElement {
             }
         }
     }
-    cleanupLocation(location) {
-        if (location.context === 'docked') {
-            this.rootLayout = this.cleanupEmptyStackInTree(this.rootLayout, location.node);
-        }
-        else {
-            const floating = this.floatingLayouts[location.index];
-            if (!floating) {
-                return;
-            }
-            floating.root = this.cleanupEmptyStackInTree(floating.root, location.node);
-            if (!floating.root) {
-                this.removeFloatingAt(location.index);
-            }
-        }
-    }
     reorderPaneInLocation(location, pane) {
         const panes = location.node.panes;
         const index = panes.indexOf(pane);
@@ -3607,10 +3559,7 @@ class MintDockManagerElement extends LitElement {
         if (skipCleanup) {
             return true;
         }
-        floating.root = this.cleanupEmptyStackInTree(floating.root, node);
-        if (!floating.root) {
-            this.removeFloatingAt(index);
-        }
+        this.normalizeAllLayouts();
         return true;
     }
     normalizeSizesArray(sizes, count) {
@@ -3630,6 +3579,115 @@ class MintDockManagerElement extends LitElement {
     normalizeSplitNode(split) {
         split.sizes = this.normalizeSizesArray(split.sizes, split.children.length);
     }
+    /**
+     * Bottom-up layout sanitizer. Returns a normalized version of `node` where:
+     * - Empty stacks (panes.length === 0) are dropped (returned as null).
+     * - A stack's `activePane` is repaired if it no longer references one of `panes`.
+     * - Splits whose direction matches a child split are flattened, with sizes
+     *   combined multiplicatively so the resulting on-screen pixel layout is
+     *   identical to the pre-merge one.
+     * - Splits with 0 children become null. Splits with 1 child are unwrapped.
+     *
+     * Idempotent: passing the result back through this method yields the same
+     * structure. Mutates the input tree in place but only returns nodes that
+     * remain part of the layout.
+     */
+    normalizeLayoutNode(node) {
+        if (!node)
+            return null;
+        if (node.kind === 'stack') {
+            if (node.panes.length === 0)
+                return null;
+            if (!node.activePane || !node.panes.includes(node.activePane)) {
+                node.activePane = node.panes[0];
+            }
+            return node;
+        }
+        const slotSizes = this.normalizeSizesArray(node.sizes, node.children.length);
+        // Pair each child with its slot weight, drop nulls, then expand any
+        // same-direction child split into its grandchildren with sizes scaled
+        // multiplicatively. A 0.4 slot containing [0.3, 0.7] becomes [0.12, 0.28].
+        const survivors = node.children
+            .map((child, i) => ({ child: this.normalizeLayoutNode(child), slot: slotSizes[i] }))
+            .filter((p) => p.child !== null)
+            .flatMap(({ child, slot }) => {
+            if (child.kind === 'split' && child.direction === node.direction) {
+                const innerSizes = this.normalizeSizesArray(child.sizes, child.children.length);
+                return child.children.map((grandchild, idx) => ({
+                    child: grandchild,
+                    slot: slot * innerSizes[idx],
+                }));
+            }
+            return [{ child, slot }];
+        });
+        if (survivors.length === 0)
+            return null;
+        if (survivors.length === 1)
+            return survivors[0].child;
+        node.children = survivors.map((s) => s.child);
+        node.sizes = this.normalizeSizesArray(survivors.map((s) => s.slot), survivors.length);
+        return node;
+    }
+    /**
+     * Apply `normalizeLayoutNode` to `rootLayout` and every floating window's
+     * root, drop floating windows whose root collapses to null, and repair
+     * stale `activePane` references on each floating window. Run this at the
+     * end of every public mutation entry point (drop handlers, layout setter,
+     * pane removal) so the tree the renderer sees is always in canonical form.
+     */
+    normalizeAllLayouts() {
+        this.rootLayout = this.normalizeLayoutNode(this.rootLayout);
+        this.floatingLayouts = this.floatingLayouts
+            .map((floating) => {
+            floating.root = this.normalizeLayoutNode(floating.root);
+            if (!floating.root)
+                return null;
+            const panes = this.collectPaneNames(floating.root);
+            if (!floating.activePane || !panes.includes(floating.activePane)) {
+                const fallback = this.findFirstPaneName(floating.root);
+                if (fallback) {
+                    floating.activePane = fallback;
+                }
+                else {
+                    delete floating.activePane;
+                }
+            }
+            return floating;
+        })
+            .filter((f) => f !== null);
+    }
+    /**
+     * Dev-mode integrity guard: walks every pane referenced by the current
+     * layout and asserts that the rendered shadow DOM contains a matching
+     * `<slot name="${pane}">`. A missing slot means the layout tree got into
+     * a state the renderer can't display — typically a missed normalize() call
+     * or a render bug. Opt in via the `debug-layout-integrity` attribute or
+     * the `debugLayoutIntegrity` property; off by default.
+     */
+    verifyProjectionSlots() {
+        if (!this.debugLayoutIntegrity)
+            return;
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        // Collect every slot the renderer produced. Walking the rendered DOM
+        // (instead of building a CSS selector per pane) sidesteps environment
+        // differences — e.g. jsdom does not expose `CSS.escape`, which would
+        // crash the guard during unit tests before the assertion runs.
+        const slotNames = new Set(Array.from(root.querySelectorAll('slot'))
+            .map((slot) => slot.getAttribute('name'))
+            .filter((name) => !!name));
+        const panes = [
+            ...this.collectPaneNames(this.rootLayout),
+            ...this.floatingLayouts.flatMap((f) => this.collectPaneNames(f.root)),
+        ];
+        const missing = panes.find((pane) => !slotNames.has(pane));
+        if (missing) {
+            throw new Error(`mint-dock-manager: pane "${missing}" has no projection slot in the shadow DOM. ` +
+                `The layout tree got into a state the renderer can't display — likely a ` +
+                `missing normalize() call or a render bug.`);
+        }
+    }
     dispatchLayoutChanged() {
         this.dispatchEvent(new CustomEvent('dock-layout-changed', {
             detail: this.snapshot,
@@ -3661,6 +3719,14 @@ class BsDockManagerComponent {
     }
     constructor() {
         this.layout = input(null, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /**
+         * Dev-mode integrity guard. When `true`, the inner web component throws
+         * after each render if any registered pane has no projection slot in the
+         * shadow DOM — a signal that the layout tree got corrupted. Off by default;
+         * enable in development to catch layout-logic bugs loudly.
+         */
+        this.debugLayoutIntegrity = input(false, ...(ngDevMode ? [{ debugName: "debugLayoutIntegrity" }] : /* istanbul ignore next */ []));
+        this.debugLayoutIntegrityAttr = computed(() => this.debugLayoutIntegrity() ? '' : null, ...(ngDevMode ? [{ debugName: "debugLayoutIntegrityAttr" }] : /* istanbul ignore next */ []));
         this.layoutChange = output();
         this.layoutSnapshotChange = output();
         this.layoutString = signal(null, ...(ngDevMode ? [{ debugName: "layoutString" }] : /* istanbul ignore next */ []));
@@ -3729,12 +3795,12 @@ class BsDockManagerComponent {
         return JSON.parse(JSON.stringify(layout));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDockManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsDockManagerComponent, isStandalone: true, selector: "bs-dock-manager", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", layoutSnapshotChange: "layoutSnapshotChange" }, queries: [{ propertyName: "panes", predicate: BsDockPaneComponent, isSignal: true }], viewQueries: [{ propertyName: "managerRef", first: true, predicate: ["manager"], descendants: true, isSignal: true }], ngImport: i0, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: BsDockManagerComponent, isStandalone: true, selector: "bs-dock-manager", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, debugLayoutIntegrity: { classPropertyName: "debugLayoutIntegrity", publicName: "debugLayoutIntegrity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", layoutSnapshotChange: "layoutSnapshotChange" }, queries: [{ propertyName: "panes", predicate: BsDockPaneComponent, isSignal: true }], viewQueries: [{ propertyName: "managerRef", first: true, predicate: ["manager"], descendants: true, isSignal: true }], ngImport: i0, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  [attr.debug-layout-integrity]=\"debugLayoutIntegrityAttr()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDockManagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-dock-manager', imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], layoutSnapshotChange: [{ type: i0.Output, args: ["layoutSnapshotChange"] }], panes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BsDockPaneComponent), { isSignal: true }] }], managerRef: [{ type: i0.ViewChild, args: ['manager', { isSignal: true }] }] } });
+            args: [{ selector: 'bs-dock-manager', imports: [NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mint-dock-manager\n  #manager\n  class=\"bs-dock-manager\"\n  [attr.layout]=\"layoutString()\"\n  [attr.debug-layout-integrity]=\"debugLayoutIntegrityAttr()\"\n  (dock-layout-changed)=\"onLayoutChanged($event)\"\n  >\n  @for (pane of panes(); track trackByPane($index, pane)) {\n    <div class=\"bs-dock-pane\" [attr.slot]=\"pane.name()\">\n      <ng-container *ngTemplateOutlet=\"pane.template()\"></ng-container>\n    </div>\n  }\n</mint-dock-manager>\n", styles: [":host{display:block;width:100%;height:100%}.bs-dock-manager{display:block;width:100%;height:100%}.bs-dock-pane{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], debugLayoutIntegrity: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugLayoutIntegrity", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], layoutSnapshotChange: [{ type: i0.Output, args: ["layoutSnapshotChange"] }], panes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BsDockPaneComponent), { isSignal: true }] }], managerRef: [{ type: i0.ViewChild, args: ['manager', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.