@mintplayer/ng-bootstrap 21.22.0 → 21.23.0

package/fesm2022/mintplayer-ng-bootstrap-web-components-splitter.mjs

@@ -0,0 +1,731 @@
+import { unsafeCSS, LitElement, html } from 'lit';
+
+var ResizeState;
+(function (ResizeState) {
+    ResizeState["Idle"] = "idle";
+    ResizeState["Resizing"] = "resizing";
+})(ResizeState || (ResizeState = {}));
+
+class SplitterStateManager {
+    constructor(initialState) {
+        this.listeners = new Set();
+        this.state = {
+            orientation: 'horizontal',
+            panelSizes: [],
+            previewSizes: null,
+            resizeOperation: null,
+            ...initialState,
+        };
+    }
+    getState() {
+        return { ...this.state };
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    notifyListeners() {
+        const stateCopy = this.getState();
+        for (const listener of this.listeners) {
+            listener(stateCopy);
+        }
+    }
+    setOrientation(orientation) {
+        if (this.state.orientation !== orientation) {
+            this.state = { ...this.state, orientation };
+            this.notifyListeners();
+        }
+    }
+    setPanelSizes(sizes) {
+        this.state = { ...this.state, panelSizes: [...sizes] };
+        this.notifyListeners();
+    }
+    setPreviewSizes(sizes) {
+        this.state = { ...this.state, previewSizes: sizes ? [...sizes] : null };
+        this.notifyListeners();
+    }
+    startResize(operation) {
+        this.state = {
+            ...this.state,
+            resizeOperation: { ...operation },
+        };
+        this.notifyListeners();
+    }
+    updateResize(previewSizes) {
+        this.state = {
+            ...this.state,
+            previewSizes: [...previewSizes],
+        };
+        this.notifyListeners();
+    }
+    endResize(finalSizes) {
+        this.state = {
+            ...this.state,
+            panelSizes: [...finalSizes],
+            previewSizes: null,
+            resizeOperation: null,
+        };
+        this.notifyListeners();
+    }
+    cancelResize() {
+        this.state = {
+            ...this.state,
+            previewSizes: null,
+            resizeOperation: null,
+        };
+        this.notifyListeners();
+    }
+    isResizing() {
+        return this.state.resizeOperation?.state === ResizeState.Resizing;
+    }
+}
+
+function normalizePointerEvent(event) {
+    const isTouch = 'touches' in event;
+    let clientX;
+    let clientY;
+    if (isTouch) {
+        const touch = event.touches[0] || event.changedTouches[0];
+        clientX = touch.clientX;
+        clientY = touch.clientY;
+    }
+    else {
+        clientX = event.clientX;
+        clientY = event.clientY;
+    }
+    return {
+        clientX,
+        clientY,
+        point: { x: clientX, y: clientY },
+        originalEvent: event,
+        isTouch,
+    };
+}
+
+class InputHandler {
+    constructor(callbacks) {
+        this.isActive = false;
+        this.currentDividerIndex = -1;
+        this.currentDividerElement = null;
+        this.callbacks = callbacks;
+        this.boundMouseMove = this.handleMouseMove.bind(this);
+        this.boundMouseUp = this.handleMouseUp.bind(this);
+        this.boundTouchMove = this.handleTouchMove.bind(this);
+        this.boundTouchEnd = this.handleTouchEnd.bind(this);
+    }
+    attachDividerListeners(divider, index) {
+        divider.addEventListener('mousedown', (e) => this.handleMouseDown(e, index, divider));
+        divider.addEventListener('touchstart', (e) => this.handleTouchStart(e, index, divider), { passive: false });
+    }
+    handleMouseDown(event, dividerIndex, dividerElement) {
+        event.preventDefault();
+        this.startResize(event, dividerIndex, dividerElement);
+        document.addEventListener('mousemove', this.boundMouseMove);
+        document.addEventListener('mouseup', this.boundMouseUp);
+    }
+    handleMouseMove(event) {
+        if (!this.isActive)
+            return;
+        event.preventDefault();
+        this.callbacks.onResizeMove(normalizePointerEvent(event));
+    }
+    handleMouseUp(event) {
+        if (!this.isActive)
+            return;
+        this.endResize(event);
+        document.removeEventListener('mousemove', this.boundMouseMove);
+        document.removeEventListener('mouseup', this.boundMouseUp);
+    }
+    handleTouchStart(event, dividerIndex, dividerElement) {
+        event.preventDefault();
+        this.startResize(event, dividerIndex, dividerElement);
+        document.addEventListener('touchmove', this.boundTouchMove, { passive: false });
+        document.addEventListener('touchend', this.boundTouchEnd);
+        document.addEventListener('touchcancel', this.boundTouchEnd);
+    }
+    handleTouchMove(event) {
+        if (!this.isActive)
+            return;
+        event.preventDefault();
+        this.callbacks.onResizeMove(normalizePointerEvent(event));
+    }
+    handleTouchEnd(event) {
+        if (!this.isActive)
+            return;
+        this.endResize(event);
+        document.removeEventListener('touchmove', this.boundTouchMove);
+        document.removeEventListener('touchend', this.boundTouchEnd);
+        document.removeEventListener('touchcancel', this.boundTouchEnd);
+    }
+    startResize(event, dividerIndex, dividerElement) {
+        this.isActive = true;
+        this.currentDividerIndex = dividerIndex;
+        this.currentDividerElement = dividerElement;
+        this.callbacks.onResizeStart(normalizePointerEvent(event), dividerIndex, dividerElement);
+    }
+    endResize(event) {
+        this.callbacks.onResizeEnd(normalizePointerEvent(event));
+        this.isActive = false;
+        this.currentDividerIndex = -1;
+        this.currentDividerElement = null;
+    }
+    dispose() {
+        document.removeEventListener('mousemove', this.boundMouseMove);
+        document.removeEventListener('mouseup', this.boundMouseUp);
+        document.removeEventListener('touchmove', this.boundTouchMove);
+        document.removeEventListener('touchend', this.boundTouchEnd);
+        document.removeEventListener('touchcancel', this.boundTouchEnd);
+        this.isActive = false;
+        this.currentDividerIndex = -1;
+        this.currentDividerElement = null;
+    }
+    getIsActive() {
+        return this.isActive;
+    }
+}
+
+class ResizeManager {
+    constructor(options = {}) {
+        this.options = {
+            minPanelSize: options.minPanelSize ?? 50,
+        };
+    }
+    computePanelSizes(panels, orientation) {
+        return panels.map((panel) => {
+            const rect = panel.getBoundingClientRect();
+            return orientation === 'horizontal' ? rect.width : rect.height;
+        });
+    }
+    createResizeOperation(startPoint, currentSizes, dividerIndex, dividerElement) {
+        return {
+            state: ResizeState.Resizing,
+            startPosition: { ...startPoint },
+            sizes: [...currentSizes],
+            indexBefore: dividerIndex,
+            indexAfter: dividerIndex + 1,
+            dividerElement,
+        };
+    }
+    calculatePreviewSizes(operation, currentPoint, orientation) {
+        const { startPosition, sizes, indexBefore, indexAfter } = operation;
+        const delta = orientation === 'horizontal'
+            ? currentPoint.x - startPosition.x
+            : currentPoint.y - startPosition.y;
+        const newSizes = [...sizes];
+        const sizeBefore = sizes[indexBefore];
+        const sizeAfter = sizes[indexAfter];
+        let newSizeBefore = sizeBefore + delta;
+        let newSizeAfter = sizeAfter - delta;
+        // Apply minimum size constraints
+        if (newSizeBefore < this.options.minPanelSize) {
+            const adjustment = this.options.minPanelSize - newSizeBefore;
+            newSizeBefore = this.options.minPanelSize;
+            newSizeAfter -= adjustment;
+        }
+        if (newSizeAfter < this.options.minPanelSize) {
+            const adjustment = this.options.minPanelSize - newSizeAfter;
+            newSizeAfter = this.options.minPanelSize;
+            newSizeBefore -= adjustment;
+        }
+        // Final clamp
+        newSizeBefore = Math.max(newSizeBefore, this.options.minPanelSize);
+        newSizeAfter = Math.max(newSizeAfter, this.options.minPanelSize);
+        newSizes[indexBefore] = newSizeBefore;
+        newSizes[indexAfter] = newSizeAfter;
+        return newSizes;
+    }
+    setMinPanelSize(size) {
+        this.options.minPanelSize = size;
+    }
+    getMinPanelSize() {
+        return this.options.minPanelSize;
+    }
+}
+
+// AUTO-GENERATED — do not edit by hand.
+// Source: splitter.styles.scss
+// Regenerate with the codegen-wc Nx target.
+const splitterStyles = unsafeCSS(`:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  --mp-splitter-size: 8px;
+  --mp-splitter-thumb-margin: 3px;
+  --mp-splitter-divider-color: #eee;
+  --mp-splitter-divider-hover-color: #1389fd;
+}
+
+:host([touch-mode]) {
+  --mp-splitter-thumb-margin: 20px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.splitter-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.splitter-container.horizontal {
+  flex-direction: row;
+}
+
+.splitter-container.vertical {
+  flex-direction: column;
+}
+
+.panel-wrapper {
+  overflow: hidden;
+  position: relative;
+}
+
+.panel-wrapper.flex-grow {
+  flex: 1 1 0;
+}
+
+/* Divider base styles */
+.divider {
+  flex-shrink: 0;
+  transition: background-color 0.15s ease-in-out;
+  z-index: 3;
+  touch-action: none;
+}
+
+.divider::before {
+  content: "";
+  display: block;
+  background-color: var(--mp-splitter-divider-color);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.divider:hover::before,
+.divider.active::before {
+  background-color: var(--mp-splitter-divider-hover-color);
+  border-radius: calc(var(--mp-splitter-size) / 2);
+}
+
+/* Horizontal splitter styles */
+.splitter-container.horizontal > .divider {
+  width: calc(var(--mp-splitter-size) + 2 * var(--mp-splitter-thumb-margin));
+  height: 100%;
+  cursor: col-resize;
+  border-left: var(--mp-splitter-thumb-margin) solid transparent;
+  border-right: var(--mp-splitter-thumb-margin) solid transparent;
+}
+
+.splitter-container.horizontal > .divider::before {
+  height: 100%;
+  width: var(--mp-splitter-size);
+  margin: 0 auto;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);
+}
+
+.splitter-container.horizontal > .panel-wrapper:not(:first-child) {
+  margin-left: calc(-1 * var(--mp-splitter-thumb-margin));
+}
+
+.splitter-container.horizontal > .panel-wrapper:not(:last-child) {
+  margin-right: calc(-1 * var(--mp-splitter-thumb-margin));
+}
+
+/* Vertical splitter styles */
+.splitter-container.vertical > .divider {
+  width: 100%;
+  height: calc(var(--mp-splitter-size) + 2 * var(--mp-splitter-thumb-margin));
+  cursor: row-resize;
+  border-top: var(--mp-splitter-thumb-margin) solid transparent;
+  border-bottom: var(--mp-splitter-thumb-margin) solid transparent;
+}
+
+.splitter-container.vertical > .divider::before {
+  height: var(--mp-splitter-size);
+  width: 100%;
+  margin: auto 0;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC);
+}
+
+.splitter-container.vertical > .panel-wrapper:not(:first-child) {
+  margin-top: calc(-1 * var(--mp-splitter-thumb-margin));
+}
+
+.splitter-container.vertical > .panel-wrapper:not(:last-child) {
+  margin-bottom: calc(-1 * var(--mp-splitter-thumb-margin));
+}
+
+/* Resizing state */
+:host([resizing]) .splitter-container {
+  cursor: col-resize;
+  user-select: none;
+}
+
+:host([resizing]) .splitter-container.vertical {
+  cursor: row-resize;
+}
+
+/* Slot content styling */
+::slotted(*) {
+  width: 100%;
+  height: 100%;
+}`);
+
+class MpSplitter extends LitElement {
+    static { this.styles = [splitterStyles]; }
+    static get observedAttributes() {
+        return [
+            ...(super.observedAttributes ?? []),
+            'orientation',
+            'min-panel-size',
+            'touch-mode',
+        ];
+    }
+    constructor() {
+        super();
+        this.container = null;
+        this.panelWrappers = [];
+        this.dividers = [];
+        this.slotElement = null;
+        this.mutationObserver = null;
+        this.containerResizeObserver = null;
+        this.unsubscribeState = null;
+        this.stateManager = new SplitterStateManager();
+        this.resizeManager = new ResizeManager();
+        this.inputHandler = new InputHandler({
+            onResizeStart: this.handleResizeStart.bind(this),
+            onResizeMove: this.handleResizeMove.bind(this),
+            onResizeEnd: this.handleResizeEnd.bind(this),
+        });
+    }
+    render() {
+        return html `
+      <div class="splitter-container"></div>
+      <slot></slot>
+    `;
+    }
+    firstUpdated() {
+        this.container = this.shadowRoot.querySelector('.splitter-container');
+        this.container.classList.add(this.orientation);
+        this.slotElement = this.shadowRoot.querySelector('slot');
+        // Hide the default slot - we'll project content ourselves via named slots.
+        this.slotElement.style.display = 'none';
+        this.slotElement.addEventListener('slotchange', () => {
+            this.updatePanelsFromSlot();
+        });
+        this.setupMutationObserver();
+        this.subscribeToState();
+        this.setupContainerResizeObserver();
+        // Initial setup after first render
+        requestAnimationFrame(() => {
+            this.updatePanelsFromSlot();
+        });
+    }
+    disconnectedCallback() {
+        this.inputHandler.dispose();
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+        if (this.containerResizeObserver) {
+            this.containerResizeObserver.disconnect();
+            this.containerResizeObserver = null;
+        }
+        if (this.unsubscribeState) {
+            this.unsubscribeState();
+            this.unsubscribeState = null;
+        }
+        super.disconnectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (oldValue === newValue)
+            return;
+        switch (name) {
+            case 'orientation':
+                this.stateManager.setOrientation(newValue || 'horizontal');
+                this.updateContainerOrientation();
+                break;
+            case 'min-panel-size':
+                const parsedSize = newValue ? parseInt(newValue, 10) : 50;
+                this.resizeManager.setMinPanelSize(!isNaN(parsedSize) ? parsedSize : 50);
+                break;
+            case 'touch-mode':
+                // Handled by CSS via :host([touch-mode])
+                break;
+        }
+    }
+    // Public API
+    get orientation() {
+        return this.getAttribute('orientation') || 'horizontal';
+    }
+    set orientation(value) {
+        this.setAttribute('orientation', value);
+    }
+    get minPanelSize() {
+        const attr = this.getAttribute('min-panel-size');
+        return attr ? parseInt(attr, 10) : 50;
+    }
+    set minPanelSize(value) {
+        this.setAttribute('min-panel-size', String(value));
+    }
+    get touchMode() {
+        return this.hasAttribute('touch-mode');
+    }
+    set touchMode(value) {
+        if (value) {
+            this.setAttribute('touch-mode', '');
+        }
+        else {
+            this.removeAttribute('touch-mode');
+        }
+    }
+    getPanelSizes() {
+        return this.stateManager.getState().panelSizes;
+    }
+    setPanelSizes(sizes) {
+        this.applyPanelSizes(sizes);
+        this.stateManager.setPanelSizes(sizes);
+    }
+    // Private methods
+    setupMutationObserver() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.updatePanelsFromSlot();
+        });
+        this.mutationObserver.observe(this, {
+            childList: true,
+            subtree: false,
+        });
+    }
+    subscribeToState() {
+        this.unsubscribeState = this.stateManager.subscribe((state) => {
+            if (state.resizeOperation) {
+                this.setAttribute('resizing', '');
+            }
+            else {
+                this.removeAttribute('resizing');
+            }
+        });
+    }
+    updatePanelsFromSlot() {
+        if (!this.container)
+            return;
+        const children = Array.from(this.children).filter((child) => child instanceof HTMLElement);
+        if (children.length === 0)
+            return;
+        // Clear existing wrappers and dividers
+        this.container.innerHTML = '';
+        this.panelWrappers = [];
+        this.dividers = [];
+        // Create panel wrappers with slots for each child
+        children.forEach((child, index) => {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'panel-wrapper flex-grow';
+            // Create a named slot for this child
+            const namedSlot = document.createElement('slot');
+            const slotName = `panel-${index}`;
+            namedSlot.name = slotName;
+            child.slot = slotName;
+            wrapper.appendChild(namedSlot);
+            this.panelWrappers.push(wrapper);
+            this.container.appendChild(wrapper);
+            // Add divider between panels
+            if (index < children.length - 1) {
+                const divider = document.createElement('div');
+                divider.className = 'divider';
+                this.inputHandler.attachDividerListeners(divider, index);
+                this.dividers.push(divider);
+                this.container.appendChild(divider);
+            }
+        });
+        // Re-apply previously-stored sizes when the panel count still matches.
+        // Two cases where this matters:
+        //   1. setPanelSizes() was called before firstUpdated's raf populated
+        //      the wrappers (e.g., the dock schedules its own raf inside
+        //      renderSplit) — without this, the early call is silently dropped.
+        //   2. Slot children change after a drag (e.g., layout re-render) — the
+        //      wrappers get recreated with `flex: 1 1 0` (equal sizes) and would
+        //      otherwise discard the user's drag result.
+        const storedSizes = this.stateManager.getState().panelSizes;
+        if (storedSizes.length > 0 && storedSizes.length === this.panelWrappers.length) {
+            this.applyPanelSizes(storedSizes);
+            // Consumer-supplied sizes (e.g., from the dock's renderSplit) often
+            // sum to the full container size because the consumer doesn't know
+            // mp-splitter's internal divider widths. Defer one raf so dividers
+            // have laid out, then rescale stored sizes against the actual panel
+            // space (container - dividers). Without this step ResizeObserver
+            // alone can't catch the discrepancy because the container size
+            // hasn't changed — only the panel/divider split inside it has.
+            requestAnimationFrame(() => this.handleContainerResize());
+            return;
+        }
+        // No stored sizes (or count mismatch) — pin from the measured layout
+        // once the browser has run layout for the new wrappers. A nested raf
+        // is needed because the wrappers were created in this very turn and
+        // their getBoundingClientRect would return 0 if read synchronously.
+        requestAnimationFrame(() => {
+            const current = this.stateManager.getState().panelSizes;
+            if (current.length === this.panelWrappers.length && current.length > 0) {
+                // A consumer (e.g., the dock) called setPanelSizes() between our
+                // raf scheduling and execution. Honour their values instead of
+                // overwriting with measurements.
+                this.applyPanelSizes(current);
+                return;
+            }
+            this.pinSizesFromCurrentLayout();
+        });
+    }
+    /**
+     * Read each panel-wrapper's measured pixel size and persist it as the
+     * authoritative panel size. After this runs, every wrapper carries an
+     * inline `width` (or `height`) — content intrinsic size cannot leak into
+     * the parent flex container, so a nested splitter's drag does not shift
+     * the parent's layout.
+     */
+    pinSizesFromCurrentLayout() {
+        if (this.panelWrappers.length === 0)
+            return;
+        const sizeProperty = this.orientation === 'horizontal' ? 'width' : 'height';
+        const measured = this.panelWrappers.map((wrapper) => wrapper.getBoundingClientRect()[sizeProperty]);
+        // Layout hasn't run yet for these wrappers — bail rather than write
+        // 0 px sizes that would collapse every panel.
+        if (measured.every((v) => v <= 0))
+            return;
+        this.applyPanelSizes(measured);
+        this.stateManager.setPanelSizes(measured);
+    }
+    setupContainerResizeObserver() {
+        if (!this.container || typeof ResizeObserver === 'undefined')
+            return;
+        this.containerResizeObserver = new ResizeObserver(() => {
+            this.handleContainerResize();
+        });
+        this.containerResizeObserver.observe(this.container);
+    }
+    /**
+     * When the splitter's container resizes (window resize, parent splitter
+     * pinning its sizes, etc.), scale every panel-wrapper proportionally so
+     * the existing ratios are preserved. Without this we'd be stuck with the
+     * original pixel sizes when the surrounding viewport changes — what
+     * `flex-basis: 0` gave master "for free".
+     */
+    handleContainerResize() {
+        if (!this.container || this.panelWrappers.length === 0)
+            return;
+        // applyPanelSizes runs continuously during a drag; its writes can fire
+        // ResizeObserver via subpixel rounding. The drag math already keeps
+        // panels summing to the container — don't fight it.
+        if (this.stateManager.isResizing())
+            return;
+        const stored = this.stateManager.getState().panelSizes;
+        if (stored.length === 0 || stored.length !== this.panelWrappers.length)
+            return;
+        const rect = this.container.getBoundingClientRect();
+        const containerSize = this.orientation === 'horizontal' ? rect.width : rect.height;
+        if (containerSize <= 0)
+            return;
+        const dividerProperty = this.orientation === 'horizontal' ? 'width' : 'height';
+        const dividerTotal = this.dividers.reduce((sum, divider) => sum + divider.getBoundingClientRect()[dividerProperty], 0);
+        // Adjacent panel-wrappers carry negative margins (`margin-left` /
+        // `margin-right` of `-thumb-margin`) so they visually overlap the
+        // divider's transparent borders. In the flex calculation those negative
+        // margins reduce a divider's effective width contribution; if we ignore
+        // them we under-target by 2 * (N-1) * thumb px and the container gets
+        // a gap at the trailing edge.
+        const startMarginProp = this.orientation === 'horizontal' ? 'marginLeft' : 'marginTop';
+        const endMarginProp = this.orientation === 'horizontal' ? 'marginRight' : 'marginBottom';
+        const marginTotal = this.panelWrappers.reduce((sum, wrapper) => {
+            const cs = getComputedStyle(wrapper);
+            return sum + parseFloat(cs[startMarginProp]) + parseFloat(cs[endMarginProp]);
+        }, 0);
+        const targetPanelTotal = Math.max(0, containerSize - dividerTotal - marginTotal);
+        const previousPanelTotal = stored.reduce((a, b) => a + b, 0);
+        if (previousPanelTotal <= 0)
+            return;
+        // Below 1 px we'd be amplifying our own subpixel writes. Skip.
+        if (Math.abs(targetPanelTotal - previousPanelTotal) < 1)
+            return;
+        const scale = targetPanelTotal / previousPanelTotal;
+        const newSizes = stored.map((s) => s * scale);
+        this.applyPanelSizes(newSizes);
+        this.stateManager.setPanelSizes(newSizes);
+    }
+    updateContainerOrientation() {
+        if (!this.container)
+            return;
+        this.container.className = `splitter-container ${this.orientation}`;
+    }
+    handleResizeStart(event, dividerIndex, dividerElement) {
+        const sizes = this.resizeManager.computePanelSizes(this.panelWrappers, this.orientation);
+        const operation = this.resizeManager.createResizeOperation(event.point, sizes, dividerIndex, dividerElement);
+        this.stateManager.startResize(operation);
+        dividerElement.classList.add('active');
+        this.dispatchEvent(new CustomEvent('resize-start', {
+            bubbles: true,
+            detail: {
+                sizes,
+                orientation: this.orientation,
+            },
+        }));
+    }
+    handleResizeMove(event) {
+        const state = this.stateManager.getState();
+        if (!state.resizeOperation)
+            return;
+        const previewSizes = this.resizeManager.calculatePreviewSizes(state.resizeOperation, event.point, this.orientation);
+        this.stateManager.updateResize(previewSizes);
+        this.applyPanelSizes(previewSizes);
+        this.dispatchEvent(new CustomEvent('resizing', {
+            bubbles: true,
+            detail: {
+                sizes: previewSizes,
+                orientation: this.orientation,
+            },
+        }));
+    }
+    handleResizeEnd(_event) {
+        const state = this.stateManager.getState();
+        if (!state.resizeOperation)
+            return;
+        const finalSizes = state.previewSizes || state.resizeOperation.sizes;
+        if (state.resizeOperation.dividerElement) {
+            state.resizeOperation.dividerElement.classList.remove('active');
+        }
+        this.stateManager.endResize(finalSizes);
+        this.dispatchEvent(new CustomEvent('resize-end', {
+            bubbles: true,
+            detail: {
+                sizes: finalSizes,
+                orientation: this.orientation,
+            },
+        }));
+    }
+    applyPanelSizes(sizes) {
+        const sizeProperty = this.orientation === 'horizontal' ? 'width' : 'height';
+        const resetProperty = this.orientation === 'horizontal' ? 'height' : 'width';
+        this.panelWrappers.forEach((wrapper, index) => {
+            if (sizes[index] !== undefined) {
+                wrapper.style[sizeProperty] = `${sizes[index]}px`;
+                wrapper.style[resetProperty] = '';
+                wrapper.classList.remove('flex-grow');
+            }
+        });
+    }
+}
+// Auto-register the custom element
+if (typeof customElements !== 'undefined' &&
+    !customElements.get('mp-splitter')) {
+    customElements.define('mp-splitter', MpSplitter);
+}
+
+// Main component export
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputHandler, MpSplitter, ResizeManager, ResizeState, SplitterStateManager, normalizePointerEvent, splitterStyles };
+//# sourceMappingURL=mintplayer-ng-bootstrap-web-components-splitter.mjs.map