@genexus/genexus-ide-ui 0.0.92 → 0.0.94

package/dist/components/layout-splitter.js

@@ -1,44 +1,142 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { i as isRTL } from './utils.js';
+import { proxyCustomElement, HTMLElement, h, forceUpdate } from '@stencil/core/internal/client';
+import { t as tabTypeToPart } from './utils2.js';
+import { a as isRTL } from './utils.js';
+import { r as removeElement } from './array.js';
 
-const sizesToGridTemplate = (items) => items.map(item => item.actualSize).join(" ");
-const getComponentSize = (comp, fixedSizes) => {
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const ROOT_VIEW = null;
+const createAndSetViewInfo = (flexibleLayoutLeaf, blockStartWidgets, renderedWidgets) => {
+    let selectedWidgetId = flexibleLayoutLeaf.selectedWidgetId;
+    const viewId = flexibleLayoutLeaf.id;
+    const viewType = flexibleLayoutLeaf.viewType;
+    const widgets = flexibleLayoutLeaf.widgets;
+    if (viewType === "blockStart") {
+        // Add the widgets to the blockStart section
+        widgets.forEach(widget => {
+            blockStartWidgets.add(widget.id);
+        });
+        return {
+            id: viewId,
+            type: viewType,
+            exportParts: "",
+            widgets: widgets
+        };
+    }
+    const exportParts = tabTypeToPart[viewType](widgets);
+    widgets.forEach(widget => {
+        if (widget.wasRendered || selectedWidgetId === widget.id) {
+            // Ensure proper initialization
+            widget.wasRendered = true;
+            renderedWidgets.add(widget.id);
+        }
+    });
+    // If there is no widget selected by default, select one
+    if (selectedWidgetId == null) {
+        const selectedWidget = widgets[viewType === "main" || viewType === "blockEnd" ? widgets.length - 1 : 0];
+        selectedWidgetId = selectedWidget.id;
+        selectedWidget.wasRendered = true;
+        renderedWidgets.add(selectedWidgetId);
+    }
+    return {
+        id: viewId,
+        exportParts,
+        selectedWidgetId: selectedWidgetId,
+        type: viewType,
+        widgets: widgets
+    };
+};
+const addCustomBehavior = (item, layoutSplitterParts) => {
+    if (item.dragBar?.part) {
+        layoutSplitterParts.add(item.dragBar?.part);
+    }
+};
+const updateFlexibleSubModels = (flexibleLayoutItems, itemsInfo, blockStartWidgets, layoutSplitterParts, renderedWidgets, parentItem) => {
+    flexibleLayoutItems.forEach(flexibleItem => {
+        // Group
+        if (flexibleItem.items != null) {
+            const group = flexibleItem;
+            const flexibleItemExtended = {
+                item: group,
+                parentItem: parentItem
+            };
+            itemsInfo.set(group.id, flexibleItemExtended);
+            updateFlexibleSubModels(group.items, // Subitems
+            itemsInfo, blockStartWidgets, layoutSplitterParts, renderedWidgets, group);
+        }
+        // Leaf
+        else {
+            const leaf = flexibleItem;
+            const flexibleItemExtended = {
+                item: leaf,
+                parentItem: parentItem,
+                view: createAndSetViewInfo(leaf, blockStartWidgets, renderedWidgets)
+            };
+            itemsInfo.set(leaf.id, flexibleItemExtended);
+        }
+        // Custom behaviors
+        addCustomBehavior(flexibleItem, layoutSplitterParts);
+    });
+};
+const updateFlexibleModels = (flexibleLayout, itemsInfo, blockStartWidgets, layoutSplitterParts, renderedWidgets) => updateFlexibleSubModels(flexibleLayout.items, itemsInfo, blockStartWidgets, layoutSplitterParts, renderedWidgets, ROOT_VIEW // Root item
+);
+const getViewInfo = (itemsInfo, viewId) => itemsInfo.get(viewId)
+    .view;
+
+const sizesToGridTemplate = (items, itemsInfo, lastItemIndex) => items
+    .map((item, index) => item.dragBar?.hidden !== true && index !== lastItemIndex
+    ? `${itemsInfo.get(item.id).actualSize} ${item.dragBar?.size ?? 0}px` // Add a column to place the drag bar
+    : itemsInfo.get(item.id).actualSize // Last item or not resizable
+)
+    .join(" ");
+const getFrSize = (item) => Number(item.size.replace("fr", "").trim());
+const getPxSize = (item) => Number(item.size.replace("px", "").trim());
+const hasAbsoluteValue = (item) => item.size.includes("px");
+const getComponentSize = (item, fixedSizesSum) => {
     // Pixel value
-    if (comp.size.includes("px")) {
-        return comp.size;
+    if (hasAbsoluteValue(item)) {
+        return item.size;
     }
     // If the component has fr value, take into account the sum of fixed values
     // to calculate the actual relative value
-    const frValue = Number(comp.size.replace("fr", "").trim());
-    if (fixedSizes === 0) {
+    const frValue = getFrSize(item);
+    if (fixedSizesSum === 0) {
         return `${frValue * 100}%`;
     }
-    return comp.fixedOffsetSize
-        ? `calc(${frValue * 100}% - ${fixedSizes * frValue}px + ${comp.fixedOffsetSize}px)`
-        : `calc(${frValue * 100}% - ${fixedSizes * frValue}px)`;
+    return item.fixedOffsetSize
+        ? `calc(${frValue * 100}% - ${fixedSizesSum * frValue - item.fixedOffsetSize}px)`
+        : `calc(${frValue * 100}% - ${fixedSizesSum * frValue}px)`;
+};
+const updateSize = (itemUIModel, increment, fixedSizesSum, unitType) => {
+    const itemInfo = itemUIModel.item;
+    const currentValue = unitType === "px" ? getPxSize(itemInfo) : getFrSize(itemInfo);
+    const newValue = currentValue + increment;
+    itemInfo.size = `${newValue}${unitType}`;
+    itemUIModel.actualSize = getComponentSize(itemInfo, fixedSizesSum);
 };
-const getFrSize = (comp) => Number(comp.size.replace("fr", "").trim());
-const getPxSize = (comp) => Number(comp.size.replace("px", "").trim());
-const hasAbsoluteValue = (component) => component.size.includes("px");
-const getDragBarPosition = (items, index, componentSize) => index === 0
-    ? componentSize
-    : `${items[index - 1].dragBarPosition} + ${componentSize}`;
-const getLayoutModel = (layout) => {
-    const layoutModel = structuredClone(layout);
-    layoutModel.fixedSizesSum = completeLayoutModel(layoutModel.items);
-    return layoutModel;
+const updateOffsetSize = (itemUIModel, increment, fixedSizesSum) => {
+    const itemInfo = itemUIModel.item;
+    itemInfo.fixedOffsetSize ??= 0;
+    itemInfo.fixedOffsetSize += increment;
+    itemUIModel.actualSize = getComponentSize(itemInfo, fixedSizesSum);
 };
-function completeLayoutModel(items) {
+const fixAndUpdateLayoutModel = (layout, itemsInfo) => fixAndUpdateSubModel(layout.items, itemsInfo, ROOT_VIEW);
+function fixAndUpdateSubModel(items, itemsInfo, parentItem) {
     let frSum = 0;
-    let fixedSizes = 0;
+    let fixedSizesSum = 0;
+    const lastItemIndex = items.length - 1;
     // Get the sum of all fr values. Also, store the sum of fixed sizes
-    items.forEach(item => {
+    items.forEach((item, index) => {
         if (hasAbsoluteValue(item)) {
-            fixedSizes += getPxSize(item);
+            fixedSizesSum += getPxSize(item);
         }
         else {
             frSum += getFrSize(item);
         }
+        // Take into account previous resizes (fixedOffsetSize values) and add drag
+        // bar sizes if this is not the last item
+        fixedSizesSum +=
+            (item.fixedOffsetSize ?? 0) +
+                (index !== lastItemIndex ? item.dragBar?.size ?? 0 : 0);
     });
     // If there are fr values, we must adjust the frs values to be relative to 1fr
     if (frSum > 0) {
@@ -50,200 +148,367 @@ function completeLayoutModel(items) {
             }
         });
     }
-    // Update sizes array and store drag-bar position (dragBarPositions array)
-    items.forEach((item, index) => {
-        const componentSize = getComponentSize(item, fixedSizes);
-        item.actualSize = componentSize;
-        // Store each drag bar position
-        const dragBarPosition = getDragBarPosition(items, index, componentSize);
-        item.dragBarPosition = dragBarPosition;
+    // Update the actualSizes and fixedSizes maps
+    items.forEach(item => {
+        const itemUIModel = {
+            item: item,
+            parentItem: parentItem,
+            actualSize: getComponentSize(item, fixedSizesSum)
+        };
         if (item.items != null) {
-            item.fixedSizesSum = completeLayoutModel(item.items);
+            // eslint-disable-next-line prettier/prettier
+            const group = item;
+            const fixedSizesSum = fixAndUpdateSubModel(group.items, itemsInfo, group);
+            itemUIModel.fixedSizesSum = fixedSizesSum;
         }
+        itemsInfo.set(item.id, itemUIModel);
     });
-    return fixedSizes;
+    return fixedSizesSum;
 }
-const updateSize = (component, increment, fixedSizes, unitType) => {
-    const currentValue = unitType === "px" ? getPxSize(component) : getFrSize(component);
-    const newValue = currentValue + increment;
-    component.size = `${newValue}${unitType}`;
-    component.actualSize = getComponentSize(component, fixedSizes);
-};
-const updateOffsetSize = (component, increment, fixedSizes) => {
-    component.fixedOffsetSize =
-        component.fixedOffsetSize != null
-            ? component.fixedOffsetSize + increment
-            : increment;
-    component.actualSize = getComponentSize(component, fixedSizes);
-};
-const updateComponentsAndDragBar = (info, dragBarPositionCustomVar, gridTemplateDirectionCustomVar) => {
+const updateComponentsAndDragBar = (info, itemsInfo, incrementInPx, gridTemplateDirectionCustomVar) => {
     // - - - - - - - - - Increments - - - - - - - - -
-    let incrementInPx = info.newPosition - info.lastPosition;
     // When the language is RTL, the increment is in the opposite direction
-    if (info.RTL) {
-        incrementInPx = -incrementInPx;
-    }
+    const incrementInPxRTL = info.direction === "columns" && info.RTL ? -incrementInPx : incrementInPx;
     const layoutItems = info.layoutItems;
     const fixedSizes = info.fixedSizesSum;
-    const remainingRelativeSizeInPixels = info.dragBarContainerSize - info.fixedSizesSum;
-    const incrementInFr = incrementInPx / remainingRelativeSizeInPixels;
+    const remainingRelativeSizeInPixels = info.containerSize - info.fixedSizesSum;
+    const incrementInFr = incrementInPxRTL / remainingRelativeSizeInPixels;
     // Components at each position of the drag bar
-    const leftIndex = info.index;
-    const rightIndex = info.index + 1;
-    const leftComp = layoutItems[leftIndex];
-    const rightComp = layoutItems[rightIndex];
+    const startItemUIModel = itemsInfo.get(info.itemStartId);
+    const endItemUIModel = itemsInfo.get(info.itemEndId);
     // px / px
-    if (hasAbsoluteValue(leftComp) && hasAbsoluteValue(rightComp)) {
-        updateSize(leftComp, incrementInPx, fixedSizes, "px");
-        updateSize(rightComp, -incrementInPx, fixedSizes, "px");
+    if (hasAbsoluteValue(startItemUIModel.item) &&
+        hasAbsoluteValue(endItemUIModel.item)) {
+        updateSize(startItemUIModel, incrementInPxRTL, fixedSizes, "px");
+        updateSize(endItemUIModel, -incrementInPxRTL, fixedSizes, "px");
     }
     // px / fr
-    else if (hasAbsoluteValue(leftComp)) {
-        updateSize(leftComp, incrementInPx, fixedSizes, "px");
-        updateOffsetSize(rightComp, -incrementInPx, fixedSizes);
+    else if (hasAbsoluteValue(startItemUIModel.item)) {
+        updateSize(startItemUIModel, incrementInPxRTL, fixedSizes, "px");
+        updateOffsetSize(endItemUIModel, -incrementInPxRTL, fixedSizes);
     }
     // fr / px
-    else if (hasAbsoluteValue(rightComp)) {
-        updateOffsetSize(leftComp, incrementInPx, fixedSizes);
-        updateSize(rightComp, -incrementInPx, fixedSizes, "px");
+    else if (hasAbsoluteValue(endItemUIModel.item)) {
+        updateOffsetSize(startItemUIModel, incrementInPxRTL, fixedSizes);
+        updateSize(endItemUIModel, -incrementInPxRTL, fixedSizes, "px");
     }
     // fr / fr
     else {
-        updateSize(leftComp, incrementInFr, fixedSizes, "fr");
-        updateSize(rightComp, -incrementInFr, fixedSizes, "fr");
+        updateSize(startItemUIModel, incrementInFr, fixedSizes, "fr");
+        updateSize(endItemUIModel, -incrementInFr, fixedSizes, "fr");
     }
-    // Update drag-bar position
-    const dragBarPosition = getDragBarPosition(layoutItems, leftIndex, leftComp.actualSize);
-    leftComp.dragBarPosition = dragBarPosition;
     // Update in the DOM the grid distribution
-    info.dragBarContainer.style.setProperty(gridTemplateDirectionCustomVar, sizesToGridTemplate(layoutItems));
-    // Update in the DOM the drag bar position
-    info.dragBar.style.setProperty(dragBarPositionCustomVar, `calc(${dragBarPosition})`);
+    info.container.style.setProperty(gridTemplateDirectionCustomVar, sizesToGridTemplate(layoutItems, itemsInfo, layoutItems.length - 1));
 };
 const getMousePosition = (event, direction) => (direction === "columns" ? event.clientX : event.clientY);
 
-const layoutSplitterCss = "*,::before,::after{box-sizing:border-box}:host{--ch-drag-bar__size:5px;--ch-drag-bar__position-fix:calc(0.5px - var(--ch-drag-bar__size) / 2);display:grid;position:relative;block-size:100%;inline-size:100%}:host(.gx-layout-splitter--resizing) ::slotted(*){pointer-events:none}.bar{position:absolute;z-index:1}.bar::after{content:\"\";display:flex;position:absolute;inline-size:100%;block-size:100%;background-color:currentColor;opacity:0;transition:opacity 0s linear 200ms}.bar:hover::after,.bar:active::after{opacity:1}.container{display:grid;position:relative}.direction--columns{grid-template-columns:var(--ch-layout-splitter__grid-template-direction)}.direction--columns>.bar{inset-block:0;inset-inline-start:calc(var(--ch-drag-bar__start-position));inline-size:1px;cursor:ew-resize}.direction--columns>.bar::after{inline-size:var(--ch-drag-bar__size);margin-inline-start:var(--ch-drag-bar__position-fix)}.direction--rows{grid-template-rows:var(--ch-layout-splitter__grid-template-direction)}.direction--rows>.bar{inset-inline:0;inset-block-start:calc(var(--ch-drag-bar__start-position));block-size:1px;cursor:ns-resize}.direction--rows>.bar::after{margin-block-start:var(--ch-drag-bar__position-fix);block-size:var(--ch-drag-bar__size)}";
+const findItemInParent = (itemToFind) => {
+    const itemId = itemToFind.item.id;
+    return itemToFind.parentItem.items.findIndex(item => item.id === itemId);
+};
+const removeItem = (itemId, itemsInfo) => {
+    const itemToRemoveUIModel = itemsInfo.get(itemId);
+    if (!itemToRemoveUIModel) {
+        return { success: false, renamedItems: [] };
+    }
+    // TODO: Valid whether the parent is the root node or not. If it is the root, update the fixedSizesSum
+    const itemsToRemove = [];
+    const itemToRemoveIndex = findItemInParent(itemToRemoveUIModel);
+    const parentItem = itemToRemoveUIModel.parentItem;
+    const parentItemItems = parentItem.items;
+    const itemToAddSpace = parentItemItems[itemToRemoveIndex === 0 ? 1 : itemToRemoveIndex - 1];
+    const renamedItems = [];
+    // const itemToAddSpaceUIModel = itemsInfo.get(itemToAddSpace.id);
+    // Remove the item in a future iteration
+    itemsToRemove.push([parentItemItems, itemToRemoveIndex, itemId]);
+    // The space reserved for the item can be given to a sibling item
+    if (parentItemItems.length > 2) {
+        addSpaceToItem(itemToRemoveUIModel, itemsInfo.get(itemToAddSpace.id), itemsInfo);
+    }
+    // The current group will have one child. Remove the group and and reconnect
+    // the child item with the parent of its group
+    else if (parentItemItems.length === 2) {
+        // TODO: CHECK PARENT ROOT
+        const parentItemUIModel = itemsInfo.get(parentItem.id);
+        const secondParentItem = parentItemUIModel.parentItem;
+        const parentItemIndex = findItemInParent(parentItemUIModel);
+        const itemToReplace = secondParentItem.items[parentItemIndex];
+        // Push the item rename
+        renamedItems.push({ oldId: itemToAddSpace.id, newId: itemToReplace.id });
+        // This property is no longer valid in the new parent
+        delete itemToReplace.items;
+        // Update all properties in the new parent, except for some specific properties
+        Object.keys(itemToAddSpace).forEach((key) => {
+            if (key !== "id" &&
+                key !== "size" &&
+                key !== "dragBar" &&
+                key !== "fixedOffsetSize") {
+                itemToReplace[key] = itemToAddSpace[key];
+            }
+        });
+        itemsInfo.delete(itemToAddSpace.id);
+    }
+    else ;
+    // Delete the item and all its descendants...
+    // TODO: Add recursive removal
+    itemsToRemove.forEach(itemToRemove => {
+        removeElement(itemToRemove[0], itemToRemove[1]);
+        itemsInfo.delete(itemToRemove[2]);
+    });
+    return { success: true, renamedItems: renamedItems };
+};
+function addSpaceToItem(itemToSubtractUIModel, itemToAddUIModel, itemsInfo) {
+    console.log(itemToSubtractUIModel, itemToAddUIModel);
+    // TODO: Add implementation. Ensure the given space is relative to 100% (1fr)
+    // TODO: Remove drag bar Size from fixedSizesSum
+    const itemToSubtractInfo = itemToSubtractUIModel.item;
+    const itemToAddInfo = itemToAddUIModel.item;
+    // px / px
+    if (hasAbsoluteValue(itemToSubtractInfo) && hasAbsoluteValue(itemToAddInfo)) {
+        // TODO: FixedSizesSum does not make sense when adding pixels. Update implementation to improve this
+        updateSize(itemToAddUIModel, getPxSize(itemToSubtractInfo), 0, "px");
+    }
+    // px / fr
+    else if (hasAbsoluteValue(itemToSubtractInfo)) ;
+    // fr / px
+    else if (hasAbsoluteValue(itemToAddInfo)) ;
+    // fr / fr
+    else {
+        // TODO: Check if the node is the root
+        const fixedSizesSum = itemsInfo.get(itemToSubtractUIModel.parentItem.id).fixedSizesSum;
+        // Update fixedOffsetSize if the removed item had
+        if (itemToSubtractInfo.fixedOffsetSize != null) {
+            updateOffsetSize(itemToSubtractUIModel, itemToSubtractInfo.fixedOffsetSize, fixedSizesSum);
+        }
+        const newFrSize = getFrSize(itemToSubtractInfo) + getFrSize(itemToAddInfo);
+        // TODO: In some situations, this should be avoided (fixedSizesSum). Find a way to remove the use of fixedSizesSum
+        updateSize(itemToAddUIModel, newFrSize, fixedSizesSum, "fr");
+    }
+}
+
+const layoutSplitterCss = "*,::after,::before{box-sizing:border-box}:host{--ch-drag-bar__size:5px;display:grid;position:relative;block-size:100%;inline-size:100%}:host(.gx-layout-splitter--resizing) ::slotted(*){pointer-events:none}.bar{--position-fix:calc((var(--size, 0px) - var(--ch-drag-bar__size)) / 2);position:relative;inline-size:100%;block-size:100%;background-color:currentColor;z-index:1}.bar[aria-disabled]{pointer-events:none}.bar:focus-visible{outline:unset}.bar::after{content:\"\";display:flex;position:absolute;background-color:currentColor;opacity:0;transition:opacity 0s linear}.bar:is(:active,:focus-visible,:hover)::after{opacity:1}.bar:hover::after{transition-delay:250ms}.leaf{display:contents}.group{display:grid;position:relative}.direction--columns{grid-template-columns:var(--ch-layout-splitter__distribution)}.direction--columns>.bar{cursor:ew-resize}.direction--columns>.bar::after{block-size:100%;inline-size:var(--ch-drag-bar__size);margin-inline-start:var(--position-fix)}.direction--rows{grid-template-rows:var(--ch-layout-splitter__distribution)}.direction--rows>.bar{cursor:ns-resize}.direction--rows>.bar::after{block-size:var(--ch-drag-bar__size);inline-size:100%;margin-block-start:var(--position-fix)}";
 
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ChLayoutSplitter_needForRAF, _ChLayoutSplitter_mouseDownInfo, _ChLayoutSplitter_lastMousePosition, _ChLayoutSplitter_newMousePosition, _ChLayoutSplitter_fixedSizesSumRoot, _ChLayoutSplitter_itemsInfo, _ChLayoutSplitter_handleBarDrag, _ChLayoutSplitter_handleBarDragRAF, _ChLayoutSplitter_removeMouseMoveHandler, _ChLayoutSplitter_mouseUpHandler, _ChLayoutSplitter_initializeDragBarValuesForResizeProcessing, _ChLayoutSplitter_mouseDownHandler, _ChLayoutSplitter_handleResize, _ChLayoutSplitter_renderItems, _a;
 const RESIZING_CLASS = "gx-layout-splitter--resizing";
-const DRAG_BAR_POSITION_CUSTOM_VAR = "--ch-drag-bar__start-position";
-const GRID_TEMPLATE_DIRECTION_CUSTOM_VAR = "--ch-layout-splitter__grid-template-direction";
-const DIRECTION_CLASS = (direction) => `container direction--${direction}`;
-const TEMPLATE_STYLE = (items) => ({
-    [GRID_TEMPLATE_DIRECTION_CUSTOM_VAR]: sizesToGridTemplate(items)
+const GRID_TEMPLATE_DIRECTION_CUSTOM_VAR = "--ch-layout-splitter__distribution";
+const DIRECTION_CLASS = (direction) => `group direction--${direction}`;
+const TEMPLATE_STYLE = (items, itemsInfo) => ({
+    [GRID_TEMPLATE_DIRECTION_CUSTOM_VAR]: sizesToGridTemplate(items, itemsInfo, items.length - 1)
 });
-const ChLayoutSplitter = /*@__PURE__*/ proxyCustomElement(class ChLayoutSplitter extends HTMLElement {
-    constructor() {
-        this.needForRAF = true; // To prevent redundant RAF (request animation frame) calls
-        this.handleBarDrag = (event) => {
-            event.preventDefault();
-            this.mouseDownInfo.newPosition = getMousePosition(event, this.mouseDownInfo.direction);
-            if (!this.needForRAF) {
-                return;
-            }
-            this.needForRAF = false; // No need to call RAF up until next frame
-            requestAnimationFrame(() => {
-                this.needForRAF = true; // RAF now consumes the movement instruction so a new one can come
-                updateComponentsAndDragBar(this.mouseDownInfo, DRAG_BAR_POSITION_CUSTOM_VAR, GRID_TEMPLATE_DIRECTION_CUSTOM_VAR);
-                // Sync new position with last
-                this.mouseDownInfo.lastPosition = this.mouseDownInfo.newPosition;
+const getAriaControls = (layoutItems, index) => `${layoutItems[index].id} ${layoutItems[index + 1].id}`;
+// Key codes
+const ARROW_UP = "ArrowUp";
+const ARROW_RIGHT = "ArrowRight";
+const ARROW_DOWN = "ArrowDown";
+const ARROW_LEFT = "ArrowLeft";
+const ChLayoutSplitter = /*@__PURE__*/ proxyCustomElement((_a = class ChLayoutSplitter extends HTMLElement {
+        constructor() {
+            _ChLayoutSplitter_needForRAF.set(this, true); // To prevent redundant RAF (request animation frame) calls
+            _ChLayoutSplitter_mouseDownInfo.set(this, void 0);
+            _ChLayoutSplitter_lastMousePosition.set(this, void 0);
+            _ChLayoutSplitter_newMousePosition.set(this, void 0);
+            _ChLayoutSplitter_fixedSizesSumRoot.set(this, void 0);
+            // Distribution of elements
+            _ChLayoutSplitter_itemsInfo.set(this, new Map());
+            _ChLayoutSplitter_handleBarDrag.set(this, (event) => {
+                event.preventDefault();
+                __classPrivateFieldSet(this, _ChLayoutSplitter_newMousePosition, getMousePosition(event, __classPrivateFieldGet(this, _ChLayoutSplitter_mouseDownInfo, "f").direction), "f");
+                __classPrivateFieldGet(this, _ChLayoutSplitter_handleBarDragRAF, "f").call(this);
             });
-        };
-        // Handler to remove mouse down
-        this.removeMouseMoveHandler = () => {
-            document.removeEventListener("mousemove", this.handleBarDrag, {
-                capture: true
+            _ChLayoutSplitter_handleBarDragRAF.set(this, (incrementInPx) => {
+                if (!__classPrivateFieldGet(this, _ChLayoutSplitter_needForRAF, "f")) {
+                    return;
+                }
+                __classPrivateFieldSet(this, _ChLayoutSplitter_needForRAF, false, "f"); // No need to call RAF up until next frame
+                requestAnimationFrame(() => {
+                    __classPrivateFieldSet(this, _ChLayoutSplitter_needForRAF, true, "f"); // RAF now consumes the movement instruction so a new one can come
+                    updateComponentsAndDragBar(__classPrivateFieldGet(this, _ChLayoutSplitter_mouseDownInfo, "f"), __classPrivateFieldGet(this, _ChLayoutSplitter_itemsInfo, "f"), incrementInPx !== null && incrementInPx !== void 0 ? incrementInPx : __classPrivateFieldGet(this, _ChLayoutSplitter_newMousePosition, "f") - __classPrivateFieldGet(this, _ChLayoutSplitter_lastMousePosition, "f"), // Increment in px
+                    GRID_TEMPLATE_DIRECTION_CUSTOM_VAR);
+                    // Sync new position with last
+                    __classPrivateFieldSet(this, _ChLayoutSplitter_lastMousePosition, __classPrivateFieldGet(this, _ChLayoutSplitter_newMousePosition, "f"), "f");
+                });
             });
-        };
-        // Remove mousemove and mouseup handlers when mouseup
-        this.mouseUpHandler = () => {
-            this.removeMouseMoveHandler();
-            document.removeEventListener("mouseup", this.mouseUpHandler, {
-                capture: true
+            // Handler to remove mouse down
+            _ChLayoutSplitter_removeMouseMoveHandler.set(this, () => {
+                document.removeEventListener("mousemove", __classPrivateFieldGet(this, _ChLayoutSplitter_handleBarDrag, "f"), {
+                    capture: true
+                });
             });
-            // Add again pointer-events
-            this.el.classList.remove(RESIZING_CLASS);
-        };
-        this.mouseDownHandler = (direction, index, fixedSizesSum, layoutItems) => (event) => {
-            // Necessary to prevent selecting the inner image (or other elements) of
-            // the bar item when the mouse is down
-            event.preventDefault();
-            // Initialize the values needed for drag processing
-            const dragBar = event.target;
-            const dragBarContainer = dragBar.parentElement;
-            const currentMousePosition = getMousePosition(event, direction);
-            this.mouseDownInfo = {
-                direction: direction,
-                dragBar: dragBar,
-                dragBarContainer: dragBarContainer,
-                dragBarContainerSize: direction === "columns"
-                    ? dragBarContainer.clientWidth
-                    : dragBarContainer.clientHeight,
-                fixedSizesSum: fixedSizesSum,
-                index: index,
-                lastPosition: currentMousePosition,
-                layoutItems: layoutItems,
-                newPosition: currentMousePosition,
-                RTL: isRTL()
-            };
-            // Remove pointer-events during drag
-            this.el.classList.add(RESIZING_CLASS);
-            // Add listeners
-            document.addEventListener("mousemove", this.handleBarDrag, {
-                capture: true
+            // Remove mousemove and mouseup handlers when mouseup
+            _ChLayoutSplitter_mouseUpHandler.set(this, () => {
+                __classPrivateFieldGet(this, _ChLayoutSplitter_removeMouseMoveHandler, "f").call(this);
+                document.removeEventListener("mouseup", __classPrivateFieldGet(this, _ChLayoutSplitter_mouseUpHandler, "f"), {
+                    capture: true
+                });
+                // Add again pointer-events
+                this.el.classList.remove(RESIZING_CLASS);
             });
-            document.addEventListener("mouseup", this.mouseUpHandler, {
-                capture: true
+            _ChLayoutSplitter_initializeDragBarValuesForResizeProcessing.set(this, (direction, index, fixedSizesSum, layoutItems, event) => {
+                // Initialize the values needed for drag processing
+                const dragBarContainer = event.target.parentElement;
+                __classPrivateFieldSet(this, _ChLayoutSplitter_mouseDownInfo, {
+                    container: dragBarContainer,
+                    containerSize: direction === "columns"
+                        ? dragBarContainer.clientWidth
+                        : dragBarContainer.clientHeight,
+                    direction: direction,
+                    fixedSizesSum: fixedSizesSum,
+                    itemStartId: layoutItems[index].id,
+                    itemEndId: layoutItems[index + 1].id,
+                    layoutItems: layoutItems,
+                    RTL: isRTL()
+                }, "f");
+                // Remove pointer-events during drag
+                this.el.classList.add(RESIZING_CLASS);
             });
-        };
-        this.renderItems = (direction, fixedSizesSum, layoutItems) => {
-            const lastComponentIndex = layoutItems.length - 1;
-            return layoutItems.map((item, index) => [
-                item.items ? (h("div", { class: DIRECTION_CLASS(item.direction), style: TEMPLATE_STYLE(item.items) }, this.renderItems(item.direction, item.fixedSizesSum, item.items))) : (h("slot", { key: item.id, name: item.id })),
-                !item.hideDragBar && index !== lastComponentIndex && (h("div", { "aria-label": this.barAccessibleName, title: this.barAccessibleName, class: "bar", part: item.dragBarPart ? `bar ${item.dragBarPart}` : "bar", style: {
-                        [DRAG_BAR_POSITION_CUSTOM_VAR]: `calc(${item.dragBarPosition})`
-                    }, onMouseDown: this.mouseDownHandler(direction, index, fixedSizesSum, layoutItems) }))
-            ]);
-        };
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.barAccessibleName = "";
-        this.layout = {
-            direction: "columns",
-            items: []
-        };
-    }
-    get el() { return this; }
-    handleComponentsChange(newLayout) {
-        this.updateLayoutInfo(newLayout);
-    }
-    updateLayoutInfo(layout) {
-        var _a;
-        if (((_a = layout === null || layout === void 0 ? void 0 : layout.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            this.layoutModel = getLayoutModel(layout);
+            _ChLayoutSplitter_mouseDownHandler.set(this, (direction, index, fixedSizesSum, layoutItems) => (event) => {
+                // Necessary to prevent selecting the inner image (or other elements) of
+                // the bar item when the mouse is down
+                event.preventDefault();
+                __classPrivateFieldGet(this, _ChLayoutSplitter_initializeDragBarValuesForResizeProcessing, "f").call(this, direction, index, fixedSizesSum, layoutItems, event);
+                // Mouse position
+                const currentMousePosition = getMousePosition(event, direction);
+                __classPrivateFieldSet(this, _ChLayoutSplitter_lastMousePosition, currentMousePosition, "f");
+                __classPrivateFieldSet(this, _ChLayoutSplitter_newMousePosition, currentMousePosition, "f"); // Also updated in mouse move
+                // Add listeners
+                document.addEventListener("mousemove", __classPrivateFieldGet(this, _ChLayoutSplitter_handleBarDrag, "f"), {
+                    capture: true
+                });
+                document.addEventListener("mouseup", __classPrivateFieldGet(this, _ChLayoutSplitter_mouseUpHandler, "f"), {
+                    capture: true,
+                    passive: true
+                });
+            });
+            _ChLayoutSplitter_handleResize.set(this, (direction, index, fixedSizesSum, layoutItems) => (event) => {
+                if ((direction === "rows" &&
+                    event.code !== ARROW_UP &&
+                    event.code !== ARROW_DOWN) ||
+                    (direction === "columns" &&
+                        event.code !== ARROW_LEFT &&
+                        event.code !== ARROW_RIGHT)) {
+                    return;
+                }
+                // Prevent scroll
+                event.preventDefault();
+                __classPrivateFieldGet(this, _ChLayoutSplitter_initializeDragBarValuesForResizeProcessing, "f").call(this, direction, index, fixedSizesSum, layoutItems, event);
+                const positiveIncrement = event.code === ARROW_RIGHT || event.code === ARROW_DOWN;
+                __classPrivateFieldGet(this, _ChLayoutSplitter_handleBarDragRAF, "f").call(this, positiveIncrement
+                    ? this.incrementWithKeyboard
+                    : -this.incrementWithKeyboard);
+            });
+            _ChLayoutSplitter_renderItems.set(this, (direction, fixedSizesSum, layoutItems) => {
+                const lastComponentIndex = layoutItems.length - 1;
+                return layoutItems.map((item, index) => {
+                    var _b, _c, _d;
+                    return [
+                        item.items ? (h("div", { id: item.id, class: DIRECTION_CLASS(item.direction), style: TEMPLATE_STYLE(item.items, __classPrivateFieldGet(this, _ChLayoutSplitter_itemsInfo, "f")) }, __classPrivateFieldGet(this, _ChLayoutSplitter_renderItems, "f").call(this, item.direction, __classPrivateFieldGet(this, _ChLayoutSplitter_itemsInfo, "f").get(item.id).fixedSizesSum, item.items))) : (h("div", { id: item.id, class: "leaf" }, h("slot", { key: item.id, name: item.id }))),
+                        ((_b = item.dragBar) === null || _b === void 0 ? void 0 : _b.hidden) !== true && index !== lastComponentIndex && (h("div", {
+                            // - - - Accessibility - - -
+                            role: "separator", "aria-controls": getAriaControls(layoutItems, index), "aria-disabled": this.dragBarDisabled ? "true" : null, "aria-label": this.barAccessibleName, "aria-orientation": direction === "columns" ? "vertical" : "horizontal", title: this.barAccessibleName, tabindex: "0",
+                            // - - - - - - - - - - - - -
+                            class: "bar", part: ((_c = item.dragBar) === null || _c === void 0 ? void 0 : _c.part) ? `bar ${item.dragBar.part}` : "bar", style: ((_d = item.dragBar) === null || _d === void 0 ? void 0 : _d.size) ? { "--size": `${item.dragBar.size}px` } : null, onKeyDown: !this.dragBarDisabled
+                                ? __classPrivateFieldGet(this, _ChLayoutSplitter_handleResize, "f").call(this, direction, index, fixedSizesSum, layoutItems)
+                                : null, onMouseDown: !this.dragBarDisabled
+                                ? __classPrivateFieldGet(this, _ChLayoutSplitter_mouseDownHandler, "f").call(this, direction, index, fixedSizesSum, layoutItems)
+                                : null
+                        }))
+                    ];
+                });
+            });
+            super();
+            this.__registerHost();
+            this.__attachShadow();
+            this.barAccessibleName = "Resize";
+            this.dragBarDisabled = false;
+            this.incrementWithKeyboard = 2;
+            this.layout = {
+                id: "root",
+                direction: "columns",
+                items: []
+            };
         }
-    }
-    connectedCallback() {
-        this.updateLayoutInfo(this.layout);
-    }
-    disconnectedCallback() {
-        // Defensive programming. Make sure all event listeners are removed correctly
-        this.mouseUpHandler();
-    }
-    render() {
-        const layoutModel = this.layoutModel;
-        if ((layoutModel === null || layoutModel === void 0 ? void 0 : layoutModel.items) == null) {
-            return "";
+        get el() { return this; }
+        handleComponentsChange(newLayout) {
+            this.updateLayoutInfo(newLayout);
         }
-        return (h("div", { class: DIRECTION_CLASS(layoutModel.direction), style: TEMPLATE_STYLE(layoutModel.items) }, this.renderItems(layoutModel.direction, layoutModel.fixedSizesSum, layoutModel.items)));
-    }
-    static get watchers() { return {
-        "layout": ["handleComponentsChange"]
-    }; }
-    static get style() { return layoutSplitterCss; }
-}, [1, "ch-layout-splitter", {
+        /**
+         * Schedules a new render of the control even if no state changed.
+         */
+        async refreshLayout() {
+            forceUpdate(this);
+        }
+        /**
+         * Removes the item that is identified by the given ID.
+         * The layout is rearranged depending on the state of the removed item.
+         */
+        async removeItem(viewId) {
+            const result = removeItem(viewId, __classPrivateFieldGet(this, _ChLayoutSplitter_itemsInfo, "f"));
+            if (result.success) {
+                // Queue re-renders
+                forceUpdate(this);
+            }
+            return result;
+        }
+        updateLayoutInfo(layout) {
+            var _b;
+            // Clear old information
+            __classPrivateFieldGet(this, _ChLayoutSplitter_itemsInfo, "f").clear();
+            if (((_b = layout === null || layout === void 0 ? void 0 : layout.items) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                __classPrivateFieldSet(this, _ChLayoutSplitter_fixedSizesSumRoot, fixAndUpdateLayoutModel(layout, __classPrivateFieldGet(this, _ChLayoutSplitter_itemsInfo, "f")), "f");
+                console.log(__classPrivateFieldGet(this, _ChLayoutSplitter_itemsInfo, "f"));
+            }
+        }
+        connectedCallback() {
+            this.updateLayoutInfo(this.layout);
+        }
+        disconnectedCallback() {
+            // Defensive programming. Make sure all event listeners are removed correctly
+            __classPrivateFieldGet(this, _ChLayoutSplitter_mouseUpHandler, "f").call(this);
+        }
+        render() {
+            const layoutModel = this.layout;
+            if ((layoutModel === null || layoutModel === void 0 ? void 0 : layoutModel.items) == null) {
+                return "";
+            }
+            return (h("div", { class: DIRECTION_CLASS(layoutModel.direction), style: TEMPLATE_STYLE(layoutModel.items, __classPrivateFieldGet(this, _ChLayoutSplitter_itemsInfo, "f")) }, __classPrivateFieldGet(this, _ChLayoutSplitter_renderItems, "f").call(this, layoutModel.direction, __classPrivateFieldGet(this, _ChLayoutSplitter_fixedSizesSumRoot, "f"), layoutModel.items)));
+        }
+        static get watchers() { return {
+            "layout": ["handleComponentsChange"]
+        }; }
+        static get style() { return layoutSplitterCss; }
+    },
+    _ChLayoutSplitter_needForRAF = new WeakMap(),
+    _ChLayoutSplitter_mouseDownInfo = new WeakMap(),
+    _ChLayoutSplitter_lastMousePosition = new WeakMap(),
+    _ChLayoutSplitter_newMousePosition = new WeakMap(),
+    _ChLayoutSplitter_fixedSizesSumRoot = new WeakMap(),
+    _ChLayoutSplitter_itemsInfo = new WeakMap(),
+    _ChLayoutSplitter_handleBarDrag = new WeakMap(),
+    _ChLayoutSplitter_handleBarDragRAF = new WeakMap(),
+    _ChLayoutSplitter_removeMouseMoveHandler = new WeakMap(),
+    _ChLayoutSplitter_mouseUpHandler = new WeakMap(),
+    _ChLayoutSplitter_initializeDragBarValuesForResizeProcessing = new WeakMap(),
+    _ChLayoutSplitter_mouseDownHandler = new WeakMap(),
+    _ChLayoutSplitter_handleResize = new WeakMap(),
+    _ChLayoutSplitter_renderItems = new WeakMap(),
+    _a), [1, "ch-layout-splitter", {
         "barAccessibleName": [1, "bar-accessible-name"],
-        "layout": [16]
+        "dragBarDisabled": [4, "drag-bar-disabled"],
+        "incrementWithKeyboard": [2, "increment-with-keyboard"],
+        "layout": [16],
+        "refreshLayout": [64],
+        "removeItem": [64]
     }, undefined, {
         "layout": ["handleComponentsChange"]
     }]);
@@ -261,6 +526,6 @@ function defineCustomElement() {
     } });
 }
 
-export { ChLayoutSplitter as C, defineCustomElement as d };
+export { ChLayoutSplitter as C, defineCustomElement as d, getViewInfo as g, updateFlexibleModels as u };
 
 //# sourceMappingURL=layout-splitter.js.map