@genexus/genexus-ide-ui 0.0.93 → 0.0.94

package/dist/esm/ch-flexible-layout_3.entry.js

@@ -1,101 +1,396 @@
-import { f as forceUpdate, h, r as registerInstance, c as createEvent, g as getElement, H as Host } from './index-2d51259e.js';
-import { i as isRTL, t as tokenMap } from './utils-b9f4c3b4.js';
-import { C as CAPTION_ID, P as PAGE_ID, a as CLOSE_BUTTON_PART, B as BUTTON_CLASS, I as IMAGE_CLASS, b as PAGE_CLASS, c as PAGE_CONTAINER_CLASS, d as PAGE_NAME_CLASS, T as TAB_LIST_CLASS, S as SELECTED_PART } from './utils-df5b9202.js';
+import { f as forceUpdate, h, r as registerInstance, c as createEvent, g as getElement, H as Host } from './index-692bb924.js';
+import { i as inBetween, a as isRTL, t as tokenMap } from './utils-b8c6bdd1.js';
+import { g as getViewInfo, R as ROOT_VIEW, C as CAPTION_ID, P as PAGE_ID, S as SELECTED_PART, a as CLOSE_BUTTON_PART, D as DRAG_PREVIEW, b as DRAG_PREVIEW_OUTSIDE, c as DRAG_PREVIEW_INSIDE_INLINE, d as DRAG_PREVIEW_INSIDE_BLOCK, e as DRAG_PREVIEW_ELEMENT, B as BUTTON_CLASS, I as IMAGE_CLASS, f as PAGE_CLASS, h as PAGE_CONTAINER_CLASS, i as PAGE_NAME_CLASS, T as TAB_LIST_CLASS } from './utils-ea89d74e.js';
+import { r as removeElement, i as insertIntoIndex } from './array-e181c3b5.js';
+import { f as focusComposedPath } from './helpers-ec2b1c99.js';
 
-const flexibleLayoutCss = ":host{display:contents}";
+// Custom vars
+const BLOCK_START = "--ch-flexible-layout-drop-area-block-start";
+const BLOCK_END = "--ch-flexible-layout-drop-area-block-end";
+const INLINE_START = "--ch-flexible-layout-drop-area-inline-start";
+const INLINE_END = "--ch-flexible-layout-drop-area-inline-end";
+/**
+ * If the mouse position is in the interval [0%, 30%] the droppable area should
+ * be displayed at the START position with half the size.
+ */
+const START_HALF_THRESHOLD = 30; // In percentage
+/**
+ * If the mouse position is in the interval [70%, 100%] the droppable area
+ * should be displayed at the END position with half the size.
+ */
+const END_HALF_THRESHOLD = 100 - START_HALF_THRESHOLD; // In percentage
+const EDGE_SIZE = 0.5;
+const setProperty$1 = (element, property, value) => element.style.setProperty(property, `${value}px`);
+const droppableAreaMap = {
+    "block-start": (documentRect, mainViewRect) => [
+        mainViewRect.top,
+        documentRect.height - (mainViewRect.top + mainViewRect.height * EDGE_SIZE),
+        mainViewRect.left,
+        documentRect.width - (mainViewRect.left + mainViewRect.width)
+    ],
+    "block-end": (documentRect, mainViewRect) => [
+        mainViewRect.top + mainViewRect.height * EDGE_SIZE,
+        documentRect.height - (mainViewRect.top + mainViewRect.height),
+        mainViewRect.left,
+        documentRect.width - (mainViewRect.left + mainViewRect.width)
+    ],
+    "inline-start": (documentRect, mainViewRect) => [
+        mainViewRect.top,
+        documentRect.height - (mainViewRect.top + mainViewRect.height),
+        mainViewRect.left,
+        documentRect.width - (mainViewRect.left + mainViewRect.width * EDGE_SIZE)
+    ],
+    "inline-end": (documentRect, mainViewRect) => [
+        mainViewRect.top,
+        documentRect.height - (mainViewRect.top + mainViewRect.height),
+        mainViewRect.left + mainViewRect.width * EDGE_SIZE,
+        documentRect.width - (mainViewRect.left + mainViewRect.width)
+    ],
+    center: (documentRect, mainViewRect) => [
+        mainViewRect.top,
+        documentRect.height - (mainViewRect.top + mainViewRect.height),
+        mainViewRect.left,
+        documentRect.width - (mainViewRect.left + mainViewRect.width)
+    ]
+};
+let lastDroppableArea;
+let lastViewId;
+const handleWidgetDrag = (draggableView, droppableAreaRef) => (event) => {
+    event.stopPropagation(); // Prevents the remove of the droppable area
+    // - - - - - - - - - - - DOM read operations - - - - - - - - - - -
+    const documentRect = document.documentElement.getBoundingClientRect();
+    const mainViewRect = draggableView.mainView.getBoundingClientRect();
+    const positionX = event.clientX; // Mouse position X
+    const positionY = event.clientY; // Mouse position Y
+    const distanceToTheLeftEdge = positionX - mainViewRect.left;
+    const distanceToTheTopEdge = positionY - mainViewRect.top;
+    const relativePositionX = (distanceToTheLeftEdge / mainViewRect.width) * 100;
+    const relativePositionY = (distanceToTheTopEdge / mainViewRect.height) * 100;
+    let droppableArea;
+    // Block start (Most likely droppable area)
+    if (relativePositionY <= START_HALF_THRESHOLD &&
+        inBetween(relativePositionY, relativePositionX, 100 - relativePositionY)) {
+        droppableArea = "block-start";
+    }
+    // Inline End (second most likely droppable area)
+    else if (relativePositionX >= END_HALF_THRESHOLD &&
+        inBetween(100 - relativePositionX, relativePositionY, relativePositionX)) {
+        droppableArea = "inline-end";
+    }
+    // Inline Start
+    else if (relativePositionX <= START_HALF_THRESHOLD &&
+        inBetween(relativePositionX, relativePositionY, 100 - relativePositionX)) {
+        droppableArea = "inline-start";
+    }
+    // Block end
+    else if (relativePositionY >= END_HALF_THRESHOLD &&
+        inBetween(100 - relativePositionY, relativePositionX, relativePositionY)) {
+        droppableArea = "block-end";
+    }
+    // Center
+    else {
+        droppableArea = "center";
+    }
+    // If the droppable area did not change, there is no need to update the DOM
+    if (lastViewId === draggableView.viewId &&
+        lastDroppableArea === droppableArea) {
+        return;
+    }
+    lastDroppableArea = droppableArea;
+    lastViewId = draggableView.viewId;
+    const droppableAreaSizes = droppableAreaMap[droppableArea](documentRect, mainViewRect);
+    // - - - - - - - - - - - DOM write operations - - - - - - - - - - -
+    setProperty$1(droppableAreaRef, BLOCK_START, droppableAreaSizes[0]);
+    setProperty$1(droppableAreaRef, BLOCK_END, droppableAreaSizes[1]);
+    setProperty$1(droppableAreaRef, INLINE_START, droppableAreaSizes[2]);
+    setProperty$1(droppableAreaRef, INLINE_END, droppableAreaSizes[3]);
+};
+const removeDroppableAreaStyles = (droppableAreaRef) => {
+    lastDroppableArea = undefined;
+    lastViewId = undefined;
+    droppableAreaRef.removeAttribute("style");
+};
+const getWidgetDropInfo = () => lastDroppableArea === undefined
+    ? undefined
+    : { dropAreaTarget: lastDroppableArea, viewIdTarget: lastViewId };
 
-const ChFlexibleLayout = class {
-    constructor(hostRef) {
-        // @Listen("keydown", { target: "document" })
-        // handleKeyDownEvent(event: KeyboardEvent) {
-        // if (
-        //   !mouseEventModifierKey(event) ||
-        //   event.code !== KEY_B ||
-        //   this.layout.inlineStart == null
-        // ) {
-        //   return;
-        // }
-        // event.stopPropagation();
-        // event.preventDefault();
-        // this.layout.inlineStart.expanded = !(
-        //   this.layout.inlineStart.expanded ?? true
-        // );
-        //   forceUpdate(this);
-        // }
-        this.handleMainGroupExpand = () => {
-            // if (this.layout.inlineStart) {
-            //   this.layout.inlineStart.expanded = false;
-            // }
-            // if (this.layout.inlineEnd) {
-            //   this.layout.inlineEnd.expanded = false;
+const flexibleLayoutCss = ":host{display:contents}.droppable-area{width:auto;height:auto;padding:0;margin:0;border:unset;color:unset;inset-block:var(--ch-flexible-layout-drop-area-block-start) var(--ch-flexible-layout-drop-area-block-end);inset-inline:var(--ch-flexible-layout-drop-area-inline-start) var(--ch-flexible-layout-drop-area-inline-end);background-color:color-mix(in srgb, currentColor 15%, transparent);transition-property:inset;transition-duration:150ms;transition-timing-function:ease-in-out;pointer-events:none}";
+
+var __classPrivateFieldSet$2 = (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 __classPrivateFieldGet$2 = (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 _draggableViews, _dragInfo, _viewsOutOfDroppableZoneController, _draggedViewRef, _droppableAreaRef, _layoutSplitterRef, _getViewInfo, _getAllViews, _handleWidgetDragEndKeydown, _handleWidgetDragEnd, _a$2;
+// Keys
+const ESCAPE_KEY = "Escape";
+const ChFlexibleLayout = (_a$2 = class {
+        constructor(hostRef) {
+            _draggableViews.set(this, void 0);
+            _dragInfo.set(this, void 0);
+            _viewsOutOfDroppableZoneController.set(this, void 0); // Allocated at runtime to reduce memory usage
+            // Refs
+            _draggedViewRef.set(this, void 0);
+            _droppableAreaRef.set(this, void 0);
+            _layoutSplitterRef.set(this, void 0);
+            _getViewInfo.set(this, (viewId) => getViewInfo(this.itemsInfo, viewId));
+            _getAllViews.set(this, () => {
+                const views = [];
+                this.itemsInfo.forEach(item => {
+                    const itemView = item
+                        .view;
+                    if (itemView != null) {
+                        views.push(itemView);
+                    }
+                });
+                return views;
+            });
+            // @Listen("keydown", { target: "document" })
+            // handleKeyDownEvent(event: KeyboardEvent) {
+            // if (
+            //   !mouseEventModifierKey(event) ||
+            //   event.code !== KEY_B ||
+            //   this.layout.inlineStart == null
+            // ) {
+            //   return;
             // }
-            // if (this.layout.blockEnd) {
-            //   this.layout.blockEnd.expanded = false;
+            // event.stopPropagation();
+            // event.preventDefault();
+            // this.layout.inlineStart.expanded = !(
+            //   this.layout.inlineStart.expanded ?? true
+            // );
+            //   forceUpdate(this);
             // }
+            this.handleMainGroupExpand = () => {
+                // if (this.layout.inlineStart) {
+                //   this.layout.inlineStart.expanded = false;
+                // }
+                // if (this.layout.inlineEnd) {
+                //   this.layout.inlineEnd.expanded = false;
+                // }
+                // if (this.layout.blockEnd) {
+                //   this.layout.blockEnd.expanded = false;
+                // }
+                forceUpdate(this);
+            };
+            this.handleItemChange = (viewId) => (event) => {
+                event.stopPropagation();
+                // Add the view id to properly update the render
+                const eventInfo = Object.assign(Object.assign({}, event.detail), { viewId: viewId });
+                this.selectedViewItemChange.emit(eventInfo);
+            };
+            this.handleItemClose = (viewId) => (event) => {
+                event.stopPropagation();
+                // Add the view id to properly update the render
+                const eventInfo = Object.assign(Object.assign({}, event.detail), { viewId: viewId });
+                this.viewItemClose.emit(eventInfo);
+            };
+            this.handleDragStart = (viewId) => async (event) => {
+                event.stopPropagation();
+                // We MUST store the reference before the Promise.allSettle, otherwise
+                // the event target will be the flexible-layout control
+                __classPrivateFieldSet$2(this, _draggedViewRef, event.target, "f");
+                const views = [...this.el.shadowRoot.querySelectorAll("ch-tab")];
+                __classPrivateFieldSet$2(this, _dragInfo, {
+                    index: event.detail,
+                    viewId: viewId
+                }, "f");
+                // Get all draggable views
+                const draggableViewsResult = await Promise.allSettled(views.map(view => view.getDraggableViews()));
+                // Allocate memory
+                __classPrivateFieldSet$2(this, _draggableViews, [], "f");
+                // Add handlers to manage droppable areas
+                draggableViewsResult.forEach((draggableViewResult, index) => {
+                    if (draggableViewResult.status === "fulfilled") {
+                        const draggableView = draggableViewResult.value;
+                        const abortController = new AbortController(); // Necessary to remove the event listener
+                        const extendedDraggableView = Object.assign(Object.assign({}, draggableView), { viewId: views[index].id, abortController: abortController });
+                        __classPrivateFieldGet$2(this, _draggableViews, "f").push(extendedDraggableView);
+                        draggableView.mainView.addEventListener("mousemove", handleWidgetDrag(extendedDraggableView, __classPrivateFieldGet$2(this, _droppableAreaRef, "f")), { capture: true, passive: true, signal: abortController.signal });
+                        // Remove pointer events to not interfere on the mousemove event
+                        extendedDraggableView.tabListView.style.pointerEvents = "none";
+                        extendedDraggableView.pageView.style.pointerEvents = "none";
+                    }
+                });
+                document.addEventListener("mouseup", __classPrivateFieldGet$2(this, _handleWidgetDragEnd, "f"), {
+                    passive: true
+                });
+                document.addEventListener("keydown", __classPrivateFieldGet$2(this, _handleWidgetDragEndKeydown, "f"), {
+                    passive: true
+                });
+                // Removes view when they are out of a droppable area
+                __classPrivateFieldSet$2(this, _viewsOutOfDroppableZoneController, new AbortController(), "f");
+                document.addEventListener("mousemove", () => removeDroppableAreaStyles(__classPrivateFieldGet$2(this, _droppableAreaRef, "f")), {
+                    passive: true,
+                    signal: __classPrivateFieldGet$2(this, _viewsOutOfDroppableZoneController, "f").signal
+                });
+                // Show droppable area
+                __classPrivateFieldGet$2(this, _droppableAreaRef, "f").showPopover(); // Layer 1
+                // After that, promote the drag preview to the second layer
+                __classPrivateFieldGet$2(this, _draggedViewRef, "f").promoteDragPreviewToTopLayer(); // Layer 2
+                // Disable drag bars in layout-splitter to improve the drag experience
+                this.dragBarDisabled = true;
+            };
+            _handleWidgetDragEndKeydown.set(this, (event) => {
+                if (event.code !== ESCAPE_KEY) {
+                    return;
+                }
+                event.preventDefault();
+                // Cancels the drop by removing the drop info
+                removeDroppableAreaStyles(__classPrivateFieldGet$2(this, _droppableAreaRef, "f"));
+                __classPrivateFieldGet$2(this, _handleWidgetDragEnd, "f").call(this);
+                __classPrivateFieldGet$2(this, _draggedViewRef, "f").endDragPreview();
+            });
+            _handleWidgetDragEnd.set(this, () => {
+                // Remove mousemove handlers
+                __classPrivateFieldGet$2(this, _draggableViews, "f").forEach(draggableView => {
+                    draggableView.abortController.abort();
+                    // Reset pointer events
+                    draggableView.tabListView.style.pointerEvents = null;
+                    draggableView.pageView.style.pointerEvents = null;
+                });
+                // Remove mouseup and keydown handlers
+                document.removeEventListener("mouseup", __classPrivateFieldGet$2(this, _handleWidgetDragEnd, "f"));
+                document.removeEventListener("keydown", __classPrivateFieldGet$2(this, _handleWidgetDragEndKeydown, "f"));
+                __classPrivateFieldGet$2(this, _viewsOutOfDroppableZoneController, "f").abort();
+                // Check if must update the view due to a drop
+                const dropInfo = getWidgetDropInfo();
+                if (dropInfo) {
+                    this.viewItemReorder.emit(Object.assign(Object.assign({}, __classPrivateFieldGet$2(this, _dragInfo, "f")), dropInfo));
+                }
+                // Hide droppable area
+                __classPrivateFieldGet$2(this, _droppableAreaRef, "f").hidePopover();
+                removeDroppableAreaStyles(__classPrivateFieldGet$2(this, _droppableAreaRef, "f"));
+                // Free the memory
+                __classPrivateFieldSet$2(this, _draggableViews, undefined, "f");
+                __classPrivateFieldSet$2(this, _dragInfo, undefined, "f");
+                // Re-enable drag bars
+                this.dragBarDisabled = false;
+            });
+            this.renderTab = (tabType, viewInfo) => (h("ch-tab", { id: viewInfo.id, key: viewInfo.id, slot: viewInfo.id, exportparts: viewInfo.exportParts, items: viewInfo.widgets, selectedId: viewInfo.selectedWidgetId, type: tabType, onExpandMainGroup: tabType === "main" ? this.handleMainGroupExpand : null, onItemClose: this.handleItemClose(viewInfo.id), onItemDragStart: this.handleDragStart(viewInfo.id), onSelectedItemChange: this.handleItemChange(viewInfo.id) }, viewInfo.widgets.map(widget => widget.wasRendered && h("slot", { name: widget.id, slot: widget.id }))));
+            this.renderView = (view) => view.type === "blockStart" ? (h("header", { key: view.id, slot: view.id }, h("slot", null))) : (this.renderTab(view.type, view));
+            registerInstance(this, hostRef);
+            this.viewItemClose = createEvent(this, "viewItemClose", 7);
+            this.selectedViewItemChange = createEvent(this, "selectedViewItemChange", 7);
+            this.viewItemReorder = createEvent(this, "viewItemReorder", 7);
+            this.dragBarDisabled = false;
+            this.layoutModel = undefined;
+            this.layoutSplitterParts = undefined;
+            this.itemsInfo = undefined;
+        }
+        get el() { return getElement(this); }
+        /**
+         * Schedules a new render of the control even if no state changed.
+         */
+        async refreshLayout() {
             forceUpdate(this);
-        };
-        this.handleItemChange = (viewId) => (event) => {
-            event.stopPropagation();
-            // Add the view id to properly update the render
-            const eventInfo = Object.assign(Object.assign({}, event.detail), { viewId: viewId });
-            this.selectedViewItemChange.emit(eventInfo);
-        };
-        this.renderTab = (tabType, viewInfo) => (h("ch-tab", { key: viewInfo.id, slot: viewInfo.id, exportparts: viewInfo.exportParts, items: viewInfo.widgets, type: tabType, onExpandMainGroup: tabType === "main" ? this.handleMainGroupExpand : null, onSelectedItemChange: this.handleItemChange(viewInfo.id) }, [...viewInfo.renderedWidgets.values()].map(widgetId => (h("slot", { name: widgetId, slot: widgetId })))));
-        this.renderView = (view) => view.type === "blockStart" ? (h("header", { key: view.id, slot: view.id }, h("slot", null))) : (this.renderTab(view.type, view));
-        registerInstance(this, hostRef);
-        this.selectedViewItemChange = createEvent(this, "selectedViewItemChange", 7);
-        this.layoutModel = undefined;
-        this.layoutSplitterParts = undefined;
-        this.viewsInfo = new Map();
-    }
-    render() {
-        const layoutModel = this.layoutModel;
-        if (layoutModel == null) {
-            return "";
+            __classPrivateFieldGet$2(this, _layoutSplitterRef, "f").refreshLayout();
         }
-        return (h("ch-layout-splitter", { layout: layoutModel, exportparts: "bar," + this.layoutSplitterParts }, [...this.viewsInfo.values()].map(this.renderView)));
-    }
-};
+        /**
+         * Removes the view that is identified by the given ID.
+         * The layout is rearranged depending on the state of the removed view.
+         */
+        async removeView(itemId) {
+            const result = await __classPrivateFieldGet$2(this, _layoutSplitterRef, "f").removeItem(itemId);
+            if (result.success) {
+                // Queue re-renders
+                forceUpdate(this);
+            }
+            return result;
+        }
+        /**
+         * Given the view ID and the item id, remove the page of the item from the view.
+         */
+        async removeItemPageInView(viewId, itemId, forceRerender = true) {
+            const viewInfo = __classPrivateFieldGet$2(this, _getViewInfo, "f").call(this, viewId);
+            if (!viewInfo) {
+                return;
+            }
+            const viewRef = this.el.shadowRoot.querySelector(`ch-tab[id='${viewInfo.id}']`);
+            await viewRef.removePage(itemId, forceRerender);
+        }
+        render() {
+            const layoutModel = this.layoutModel;
+            if (layoutModel == null) {
+                return "";
+            }
+            return (h(Host, null, h("ch-layout-splitter", { dragBarDisabled: this.dragBarDisabled, layout: layoutModel, exportparts: "bar," + this.layoutSplitterParts, ref: el => (__classPrivateFieldSet$2(this, _layoutSplitterRef, el, "f")) }, __classPrivateFieldGet$2(this, _getAllViews, "f").call(this).map(this.renderView)), h("div", { "aria-hidden": "true", class: "droppable-area", part: "droppable-area", popover: "manual", ref: el => (__classPrivateFieldSet$2(this, _droppableAreaRef, el, "f")) })));
+        }
+    },
+    _draggableViews = new WeakMap(),
+    _dragInfo = new WeakMap(),
+    _viewsOutOfDroppableZoneController = new WeakMap(),
+    _draggedViewRef = new WeakMap(),
+    _droppableAreaRef = new WeakMap(),
+    _layoutSplitterRef = new WeakMap(),
+    _getViewInfo = new WeakMap(),
+    _getAllViews = new WeakMap(),
+    _handleWidgetDragEndKeydown = new WeakMap(),
+    _handleWidgetDragEnd = new WeakMap(),
+    _a$2);
 ChFlexibleLayout.style = flexibleLayoutCss;
 
-const sizesToGridTemplate = (items) => items.map(item => item.actualSize).join(" ");
-const getComponentSize = (comp, fixedSizes) => {
+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) {
@@ -107,283 +402,935 @@ 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$1 = (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$1 = (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 _needForRAF$1, _mouseDownInfo, _lastMousePosition, _newMousePosition, _fixedSizesSumRoot, _itemsInfo, _handleBarDrag, _handleBarDragRAF, _removeMouseMoveHandler, _mouseUpHandler, _initializeDragBarValuesForResizeProcessing, _mouseDownHandler, _handleResize, _renderItems, _a$1;
 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 = class {
-    constructor(hostRef) {
-        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$1 = "ArrowUp";
+const ARROW_RIGHT$1 = "ArrowRight";
+const ARROW_DOWN$1 = "ArrowDown";
+const ARROW_LEFT$1 = "ArrowLeft";
+const ChLayoutSplitter = (_a$1 = class {
+        constructor(hostRef) {
+            _needForRAF$1.set(this, true); // To prevent redundant RAF (request animation frame) calls
+            _mouseDownInfo.set(this, void 0);
+            _lastMousePosition.set(this, void 0);
+            _newMousePosition.set(this, void 0);
+            _fixedSizesSumRoot.set(this, void 0);
+            // Distribution of elements
+            _itemsInfo.set(this, new Map());
+            _handleBarDrag.set(this, (event) => {
+                event.preventDefault();
+                __classPrivateFieldSet$1(this, _newMousePosition, getMousePosition(event, __classPrivateFieldGet$1(this, _mouseDownInfo, "f").direction), "f");
+                __classPrivateFieldGet$1(this, _handleBarDragRAF, "f").call(this);
             });
-        };
-        // Handler to remove mouse down
-        this.removeMouseMoveHandler = () => {
-            document.removeEventListener("mousemove", this.handleBarDrag, {
-                capture: true
+            _handleBarDragRAF.set(this, (incrementInPx) => {
+                if (!__classPrivateFieldGet$1(this, _needForRAF$1, "f")) {
+                    return;
+                }
+                __classPrivateFieldSet$1(this, _needForRAF$1, false, "f"); // No need to call RAF up until next frame
+                requestAnimationFrame(() => {
+                    __classPrivateFieldSet$1(this, _needForRAF$1, true, "f"); // RAF now consumes the movement instruction so a new one can come
+                    updateComponentsAndDragBar(__classPrivateFieldGet$1(this, _mouseDownInfo, "f"), __classPrivateFieldGet$1(this, _itemsInfo, "f"), incrementInPx !== null && incrementInPx !== void 0 ? incrementInPx : __classPrivateFieldGet$1(this, _newMousePosition, "f") - __classPrivateFieldGet$1(this, _lastMousePosition, "f"), // Increment in px
+                    GRID_TEMPLATE_DIRECTION_CUSTOM_VAR);
+                    // Sync new position with last
+                    __classPrivateFieldSet$1(this, _lastMousePosition, __classPrivateFieldGet$1(this, _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
+            _removeMouseMoveHandler.set(this, () => {
+                document.removeEventListener("mousemove", __classPrivateFieldGet$1(this, _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
+            _mouseUpHandler.set(this, () => {
+                __classPrivateFieldGet$1(this, _removeMouseMoveHandler, "f").call(this);
+                document.removeEventListener("mouseup", __classPrivateFieldGet$1(this, _mouseUpHandler, "f"), {
+                    capture: true
+                });
+                // Add again pointer-events
+                this.el.classList.remove(RESIZING_CLASS);
             });
-            document.addEventListener("mouseup", this.mouseUpHandler, {
-                capture: true
+            _initializeDragBarValuesForResizeProcessing.set(this, (direction, index, fixedSizesSum, layoutItems, event) => {
+                // Initialize the values needed for drag processing
+                const dragBarContainer = event.target.parentElement;
+                __classPrivateFieldSet$1(this, _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) }))
-            ]);
-        };
-        registerInstance(this, hostRef);
-        this.barAccessibleName = "";
-        this.layout = {
-            direction: "columns",
-            items: []
-        };
-    }
-    get el() { return getElement(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);
+            _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$1(this, _initializeDragBarValuesForResizeProcessing, "f").call(this, direction, index, fixedSizesSum, layoutItems, event);
+                // Mouse position
+                const currentMousePosition = getMousePosition(event, direction);
+                __classPrivateFieldSet$1(this, _lastMousePosition, currentMousePosition, "f");
+                __classPrivateFieldSet$1(this, _newMousePosition, currentMousePosition, "f"); // Also updated in mouse move
+                // Add listeners
+                document.addEventListener("mousemove", __classPrivateFieldGet$1(this, _handleBarDrag, "f"), {
+                    capture: true
+                });
+                document.addEventListener("mouseup", __classPrivateFieldGet$1(this, _mouseUpHandler, "f"), {
+                    capture: true,
+                    passive: true
+                });
+            });
+            _handleResize.set(this, (direction, index, fixedSizesSum, layoutItems) => (event) => {
+                if ((direction === "rows" &&
+                    event.code !== ARROW_UP$1 &&
+                    event.code !== ARROW_DOWN$1) ||
+                    (direction === "columns" &&
+                        event.code !== ARROW_LEFT$1 &&
+                        event.code !== ARROW_RIGHT$1)) {
+                    return;
+                }
+                // Prevent scroll
+                event.preventDefault();
+                __classPrivateFieldGet$1(this, _initializeDragBarValuesForResizeProcessing, "f").call(this, direction, index, fixedSizesSum, layoutItems, event);
+                const positiveIncrement = event.code === ARROW_RIGHT$1 || event.code === ARROW_DOWN$1;
+                __classPrivateFieldGet$1(this, _handleBarDragRAF, "f").call(this, positiveIncrement
+                    ? this.incrementWithKeyboard
+                    : -this.incrementWithKeyboard);
+            });
+            _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$1(this, _itemsInfo, "f")) }, __classPrivateFieldGet$1(this, _renderItems, "f").call(this, item.direction, __classPrivateFieldGet$1(this, _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$1(this, _handleResize, "f").call(this, direction, index, fixedSizesSum, layoutItems)
+                                : null, onMouseDown: !this.dragBarDisabled
+                                ? __classPrivateFieldGet$1(this, _mouseDownHandler, "f").call(this, direction, index, fixedSizesSum, layoutItems)
+                                : null
+                        }))
+                    ];
+                });
+            });
+            registerInstance(this, hostRef);
+            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 getElement(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"]
-    }; }
-};
+        /**
+         * 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$1(this, _itemsInfo, "f"));
+            if (result.success) {
+                // Queue re-renders
+                forceUpdate(this);
+            }
+            return result;
+        }
+        updateLayoutInfo(layout) {
+            var _b;
+            // Clear old information
+            __classPrivateFieldGet$1(this, _itemsInfo, "f").clear();
+            if (((_b = layout === null || layout === void 0 ? void 0 : layout.items) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                __classPrivateFieldSet$1(this, _fixedSizesSumRoot, fixAndUpdateLayoutModel(layout, __classPrivateFieldGet$1(this, _itemsInfo, "f")), "f");
+                console.log(__classPrivateFieldGet$1(this, _itemsInfo, "f"));
+            }
+        }
+        connectedCallback() {
+            this.updateLayoutInfo(this.layout);
+        }
+        disconnectedCallback() {
+            // Defensive programming. Make sure all event listeners are removed correctly
+            __classPrivateFieldGet$1(this, _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$1(this, _itemsInfo, "f")) }, __classPrivateFieldGet$1(this, _renderItems, "f").call(this, layoutModel.direction, __classPrivateFieldGet$1(this, _fixedSizesSumRoot, "f"), layoutModel.items)));
+        }
+        static get watchers() { return {
+            "layout": ["handleComponentsChange"]
+        }; }
+    },
+    _needForRAF$1 = new WeakMap(),
+    _mouseDownInfo = new WeakMap(),
+    _lastMousePosition = new WeakMap(),
+    _newMousePosition = new WeakMap(),
+    _fixedSizesSumRoot = new WeakMap(),
+    _itemsInfo = new WeakMap(),
+    _handleBarDrag = new WeakMap(),
+    _handleBarDragRAF = new WeakMap(),
+    _removeMouseMoveHandler = new WeakMap(),
+    _mouseUpHandler = new WeakMap(),
+    _initializeDragBarValuesForResizeProcessing = new WeakMap(),
+    _mouseDownHandler = new WeakMap(),
+    _handleResize = new WeakMap(),
+    _renderItems = new WeakMap(),
+    _a$1);
 ChLayoutSplitter.style = layoutSplitterCss;
 
-const tabCss = "*,::after,::before{box-sizing:border-box}:host{display:grid;block-size:100%;inline-size:100%}:host([type=blockStart]){grid-auto-flow:row;grid-auto-rows:max-content}:host([type=inlineStart]){grid-template-columns:max-content 1fr}:host([type=main]),:host([type=blockEnd]){grid-template-rows:max-content 1fr}:host([type=inlineEnd]){grid-template-columns:1fr max-content}:where(button){all:unset;display:flex;align-items:center;user-select:none;touch-action:manipulation;-webkit-user-drag:element;cursor:pointer}.caption-image{display:block;block-size:18px;inline-size:18px}.close-button::after{content:\"\";display:flex;block-size:1em;inline-size:1em;-webkit-mask:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 2L15.5 15.5\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.5 2L2 15.5\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') 50% 50%/0.75em 0.75em no-repeat;background-color:currentColor;opacity:0}.main__button,.blockEnd__button{display:flex;align-items:center}.main__button:hover>.close-button::after,.main__button:focus-within>.close-button::after,.main__button[aria-selected=true]>.close-button::after,.blockEnd__button:hover>.close-button::after,.blockEnd__button:focus-within>.close-button::after,.blockEnd__button[aria-selected=true]>.close-button::after{opacity:1}.inlineStart__tab-list,.inlineEnd__tab-list{display:grid;grid-auto-flow:row;grid-auto-rows:max-content}.inlineEnd__tab-list{order:1}.main__tab-list,.blockEnd__tab-list{display:grid;grid-auto-flow:column;grid-auto-columns:max-content}.page-container{display:grid;block-size:100%;inline-size:100%}@supports (content-visibility: hidden){.page-container--collapsed{content-visibility:hidden;inline-size:0}}@supports not (content-visibility: hidden){.page-container--collapsed{display:none}}.inlineStart__page,.inlineEnd__page{display:grid;grid-template-rows:max-content 1fr}.page--hidden{display:none}";
+const tabCss = "*,::after,::before{box-sizing:border-box}:host{--ch-tab-transition-duration:150ms;display:grid;block-size:100%;inline-size:100%}:host([type=inlineStart]){grid-template-columns:max-content 1fr}:host(.ch-tab-direction--block){grid-template-rows:max-content 1fr}:host([type=inlineEnd]){grid-template-columns:1fr max-content}:where(button){all:unset;display:flex;align-items:center;user-select:none;touch-action:manipulation;-webkit-user-drag:element;cursor:pointer}.caption-image,.decorative-image::before{display:block;block-size:18px;inline-size:18px}.decorative-image::before{content:\"\";-webkit-mask:var(--ch-tab-decorative-image) 50% 50%/100% 100% no-repeat;background-color:currentColor}.close-button::after{content:\"\";display:flex;block-size:1em;inline-size:1em;-webkit-mask:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 2L15.5 15.5\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.5 2L2 15.5\" stroke=\"white\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>') 50% 50%/0.75em 0.75em no-repeat;background-color:currentColor;opacity:0}.block__button{display:flex;align-items:center}.block__button:hover>.close-button::after,.block__button:focus-within>.close-button::after,.block__button[aria-selected=true]>.close-button::after{opacity:1}.dragged-element{opacity:0}.dragged-element--outside{display:none}.drag-preview{--ch-tab-snap-drag-preview:clamp(\n    var(--ch-tab-tab-list-start),\n    var(--ch-tab-mouse-position),\n    var(--ch-tab-tab-list-end)\n  );position:fixed;left:0;top:0;z-index:108}.drag-preview:popover-open{padding:0;margin:0;border:unset;color:unset;pointer-events:none}.drag-preview-element{cursor:grabbing}.drag-preview--outside-tab-list{transform:translate(calc(var(--ch-tab-mouse-position-x) - var(--ch-tab-mouse-offset-x)), calc(var(--ch-tab-mouse-position-y) - var(--ch-tab-mouse-offset-y)))}.drag-preview--inside-tab-list__block{--ch-tab-mouse-position:calc(\n    var(--ch-tab-mouse-position-x) - var(--ch-tab-mouse-offset-x)\n  );transform:translate(var(--ch-tab-snap-drag-preview), var(--ch-tab-button-position-y))}.drag-preview--inside-tab-list__inline{--ch-tab-mouse-position:calc(\n    var(--ch-tab-mouse-position-y) - var(--ch-tab-mouse-offset-y)\n  );transform:translate(var(--ch-tab-button-position-x), var(--ch-tab-snap-drag-preview))}.shifted-element{transition:transform var(--ch-tab-transition-duration)}:host(.ch-tab-direction--block) .shifted-element--start{transform:translate(calc(var(--ch-tab-button-size) * -1), 0)}:host(.ch-tab-direction--block) .shifted-element--end{transform:translate(var(--ch-tab-button-size), 0)}:host(.ch-tab-direction--inline) .shifted-element--start{transform:translateY(calc(var(--ch-tab-button-size) * -1))}:host(.ch-tab-direction--inline) .shifted-element--end{transform:translateY(var(--ch-tab-button-size))}.inline__tab-list{display:grid;grid-auto-flow:row;grid-auto-rows:max-content}:host([type=inlineEnd])>.inline__tab-list{order:1}.block__tab-list{display:grid;grid-auto-flow:column;grid-auto-columns:max-content}.page-container{display:grid;grid-template:\"selected\" 1fr/1fr;block-size:100%;inline-size:100%}.page--selected{grid-area:selected}@supports (content-visibility: hidden){.page-container--collapsed,.page--hidden{content-visibility:hidden}.page-container--collapsed{inline-size:0}}@supports not (content-visibility: hidden){.page-container--collapsed,.page--hidden{display:none}}";
 
-const ChTab = class {
-    constructor(hostRef) {
-        this.classes = {};
-        this.lastSelectedItem = -1;
-        this.handleSelectedItemChange = (index, itemId) => (event) => {
-            event.stopPropagation();
-            this.selectedItemChange.emit({
-                lastSelectedIndex: this.lastSelectedItem,
-                newSelectedId: itemId,
-                newSelectedIndex: index,
-                type: this.type
-            });
-            this.lastSelectedItem = index;
-        };
-        this.handleItemDblClick = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.expandMainGroup.emit();
-        };
-        this.handleClose = (itemId) => (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.itemClose.emit(itemId);
-        };
-        this.renderTabBar = () => (h("div", { role: "tablist", "aria-label": this.accessibleName, class: this.classes.TAB_LIST, part: this.classes.TAB_LIST }, this.items.map((item, index) => (h("button", { key: CAPTION_ID(item.id), id: CAPTION_ID(item.id), role: "tab", "aria-controls": PAGE_ID(item.id), "aria-label": !this.showCaptions ? item.name : null, "aria-selected": (!!item.selected).toString(), class: this.classes.BUTTON, part: tokenMap({
-                [this.classes.BUTTON]: true,
-                [CAPTION_ID(item.id)]: true,
-                [SELECTED_PART]: item.selected
-            }), onClick: !item.selected
-                ? this.handleSelectedItemChange(index, item.id)
-                : null, onDblClick: this.type === "main" ? this.handleItemDblClick : null }, item.startImageSrc && (h("img", { "aria-hidden": "true", class: { [this.classes.IMAGE]: true, "caption-image": true }, part: this.classes.IMAGE, alt: "", src: item.startImageSrc, loading: "lazy" })), this.showCaptions && item.name, this.showCaptions && (h("button", { "aria-label": this.closeButtonAccessibleName, class: "close-button", part: CLOSE_BUTTON_PART, type: "button", onClick: this.handleClose(item.id) })))))));
-        this.renderTabPages = () => (h("div", { class: {
-                [this.classes.PAGE_CONTAINER]: true,
-                "page-container": true,
-                "page-container--collapsed": !this.expanded
-            }, part: this.classes.PAGE_CONTAINER }, this.items.map(item => (h("div", { key: PAGE_ID(item.id), id: PAGE_ID(item.id), role: "tabpanel", "aria-labelledby": CAPTION_ID(item.name), class: {
-                [this.classes.PAGE]: true,
-                "page--hidden": !item.selected
-            }, part: this.classes.PAGE }, this.showPageName &&
-            (this.type === "inlineStart" || this.type === "inlineEnd") && (h("span", { "aria-hidden": "true", part: this.classes.PAGE_NAME }, item.name)), item.wasRendered && h("slot", { name: item.id }))))));
-        registerInstance(this, hostRef);
-        this.expandMainGroup = createEvent(this, "expandMainGroup", 7);
-        this.itemClose = createEvent(this, "itemClose", 7);
-        this.selectedItemChange = createEvent(this, "selectedItemChange", 7);
-        this.accessibleName = undefined;
-        this.closeButtonAccessibleName = "Close";
-        this.expanded = true;
-        this.items = undefined;
-        this.showPageName = true;
-        this.type = undefined;
-    }
-    handleItemsChange(newItems) {
-        this.updateSelectedIndex(newItems);
+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 _cancelId, _classes, _parts, _direction, _selectedIndex, _showCaptions, _lastDragEvent, _needForRAF, _initialMousePosition, _itemSizes, _mouseBoundingLimits, _renderedPages, _dragPreviewRef, _tabListRef, _tabPageRef, _keyEvents, _handleSelectedItemChange, _updateRenderedPages, _handleItemDblClick, _handleDragStart, _handleDragEnd, _handleItemDrag, _handleClose, _handleTabFocus, _imgRender, _renderTabBar, _renderTabPages, _renderDragPreview, _initializeState, _setClassesAndParts, _a;
+// Custom vars
+const TRANSITION_DURATION = "--ch-tab-transition-duration";
+const BUTTON_POSITION_X = "--ch-tab-button-position-x";
+const BUTTON_POSITION_Y = "--ch-tab-button-position-y";
+const BUTTON_SIZE = "--ch-tab-button-size";
+const MOUSE_OFFSET_X = "--ch-tab-mouse-offset-x";
+const MOUSE_OFFSET_Y = "--ch-tab-mouse-offset-y";
+const MOUSE_POSITION_X = "--ch-tab-mouse-position-x";
+const MOUSE_POSITION_Y = "--ch-tab-mouse-position-y";
+const TAB_LIST_EDGE_START_POSITION = "--ch-tab-tab-list-start";
+const TAB_LIST_EDGE_END_POSITION = "--ch-tab-tab-list-end";
+const DECORATIVE_IMAGE = "--ch-tab-decorative-image";
+// Key codes
+const ARROW_UP = "ArrowUp";
+const ARROW_RIGHT = "ArrowRight";
+const ARROW_DOWN = "ArrowDown";
+const ARROW_LEFT = "ArrowLeft";
+const HOME = "Home";
+const END = "End";
+// Selectors
+const FIRST_CAPTION_BUTTON = (tabListRef) => tabListRef.querySelector(":scope>button");
+const LAST_CAPTION_BUTTON = (tabListRef) => tabListRef.querySelector(":scope>button:last-child");
+// Utility functions
+const isDecorativeImg = (item) => item.startImageSrc &&
+    (!item.startImageType || item.startImageType === "pseudo-element");
+const getDirection = (type) => type === "main" || type === "blockEnd" ? "block" : "inline";
+const isBlockDirection = (direction) => direction === "block";
+const setProperty = (element, property, value) => element.style.setProperty(property, `${value}px`);
+const setButtonInitialPosition = (element, positionX, positionY) => {
+    setProperty(element, BUTTON_POSITION_X, positionX);
+    setProperty(element, BUTTON_POSITION_Y, positionY);
+};
+const setButtonSize = (element, size) => {
+    setProperty(element, BUTTON_SIZE, size);
+};
+const setMousePosition = (element, positionX, positionY) => {
+    setProperty(element, MOUSE_POSITION_X, positionX);
+    setProperty(element, MOUSE_POSITION_Y, positionY);
+};
+// Useful to implement snap to the edges
+const setTabListStartEndPosition = (element, startPosition, endPosition) => {
+    setProperty(element, TAB_LIST_EDGE_START_POSITION, startPosition);
+    setProperty(element, TAB_LIST_EDGE_END_POSITION, endPosition);
+};
+const getTabListSizesAndSetPosition = (hostRef, tabListRef, direction, buttonRect) => {
+    const tabListRect = tabListRef.getBoundingClientRect();
+    // Tab List information
+    const tabListSizes = {
+        xStart: tabListRect.x,
+        xEnd: tabListRect.x + tabListRect.width,
+        yStart: tabListRect.y,
+        yEnd: tabListRect.y + tabListRect.height
+    };
+    if (isBlockDirection(direction)) {
+        setTabListStartEndPosition(hostRef, tabListSizes.xStart, tabListSizes.xEnd - buttonRect.width);
     }
-    updateSelectedIndex(items) {
-        if (items == null) {
-            this.lastSelectedItem = -1;
-            return;
-        }
-        this.lastSelectedItem = items.findIndex(item => item.selected);
+    else {
+        setTabListStartEndPosition(hostRef, tabListSizes.yStart, tabListSizes.yEnd - buttonRect.height);
     }
-    componentWillLoad() {
-        this.updateSelectedIndex(this.items);
-        // Initialize classes
-        this.classes = {
-            BUTTON: BUTTON_CLASS(this.type),
-            IMAGE: IMAGE_CLASS(this.type),
-            PAGE: PAGE_CLASS(this.type),
-            PAGE_CONTAINER: PAGE_CONTAINER_CLASS(this.type),
-            PAGE_NAME: PAGE_NAME_CLASS(this.type),
-            TAB_LIST: TAB_LIST_CLASS(this.type)
-        };
-        this.showCaptions = this.type === "main" || this.type === "blockEnd";
+    return tabListSizes;
+};
+const setMouseOffset = (element, offsetX, offsetY) => {
+    setProperty(element, MOUSE_OFFSET_X, offsetX);
+    setProperty(element, MOUSE_OFFSET_Y, offsetY);
+};
+const addGrabbingStyle = () => document.body.style.setProperty("cursor", "grabbing");
+const removeGrabbingStyle = () => document.body.style.removeProperty("cursor");
+const focusNextOrPreviousCaption = (focusNextSibling, tabListRef, focusedCaption, event) => {
+    var _b, _c;
+    // Prevent scroll
+    event.preventDefault();
+    let nextFocusedCaption;
+    // Determine the next selected caption button
+    if (focusNextSibling) {
+        nextFocusedCaption = ((_b = focusedCaption.nextElementSibling) !== null && _b !== void 0 ? _b : FIRST_CAPTION_BUTTON(tabListRef));
     }
-    render() {
-        if (this.items == null || this.items.length === 0) {
-            return "";
-        }
-        return (h(Host, null, this.renderTabBar(), this.renderTabPages()));
+    else {
+        nextFocusedCaption = ((_c = focusedCaption.previousElementSibling) !== null && _c !== void 0 ? _c : LAST_CAPTION_BUTTON(tabListRef));
     }
-    static get watchers() { return {
-        "items": ["handleItemsChange"]
-    }; }
+    // Focus and select the caption
+    nextFocusedCaption.focus();
+    nextFocusedCaption.click();
 };
+const ChTab = (_a = class {
+        constructor(hostRef) {
+            _cancelId.set(this, void 0);
+            // Styling
+            _classes.set(this, {});
+            _parts.set(this, {});
+            _direction.set(this, void 0);
+            _selectedIndex.set(this, -1);
+            _showCaptions.set(this, void 0);
+            _lastDragEvent.set(this, void 0);
+            _needForRAF.set(this, true); // To prevent redundant RAF (request animation frame) calls
+            _initialMousePosition.set(this, -1);
+            // Allocated at runtime to reduce memory usage
+            _itemSizes.set(this, void 0);
+            /**
+             * This variable represents the boundaries of the box where the mouse can be
+             * placed when dragging a caption, to consider that the caption is within the
+             * tab list.
+             */
+            _mouseBoundingLimits.set(this, void 0);
+            _renderedPages.set(this, new Set());
+            // Refs
+            _dragPreviewRef.set(this, void 0);
+            _tabListRef.set(this, void 0);
+            _tabPageRef.set(this, void 0);
+            // Keyboard interactions
+            _keyEvents.set(this, {
+                [ARROW_UP]: (direction, ev, focusedButton) => {
+                    if (direction === "block") {
+                        return;
+                    }
+                    focusNextOrPreviousCaption(false, __classPrivateFieldGet(this, _tabListRef, "f"), focusedButton, ev);
+                },
+                [ARROW_RIGHT]: (direction, ev, focusedButton) => {
+                    if (direction === "inline") {
+                        return;
+                    }
+                    focusNextOrPreviousCaption(!isRTL(), __classPrivateFieldGet(this, _tabListRef, "f"), focusedButton, ev);
+                },
+                [ARROW_DOWN]: (direction, ev, focusedButton) => {
+                    if (direction === "block") {
+                        return;
+                    }
+                    focusNextOrPreviousCaption(true, __classPrivateFieldGet(this, _tabListRef, "f"), focusedButton, ev);
+                },
+                [ARROW_LEFT]: (direction, ev, focusedButton) => {
+                    if (direction === "inline") {
+                        return;
+                    }
+                    focusNextOrPreviousCaption(isRTL(), __classPrivateFieldGet(this, _tabListRef, "f"), focusedButton, ev);
+                },
+                [HOME]: () => {
+                    const nextFocusedCaption = FIRST_CAPTION_BUTTON(__classPrivateFieldGet(this, _tabListRef, "f"));
+                    // Focus and select the caption
+                    nextFocusedCaption.focus();
+                    nextFocusedCaption.click();
+                },
+                [END]: () => {
+                    const nextFocusedCaption = LAST_CAPTION_BUTTON(__classPrivateFieldGet(this, _tabListRef, "f"));
+                    // Focus and select the caption
+                    nextFocusedCaption.focus();
+                    nextFocusedCaption.click();
+                }
+            });
+            _handleSelectedItemChange.set(this, (index, itemId) => (event) => {
+                event.stopPropagation();
+                this.selectedItemChange.emit({
+                    lastSelectedIndex: __classPrivateFieldGet(this, _selectedIndex, "f"),
+                    newSelectedId: itemId,
+                    newSelectedIndex: index,
+                    type: this.type
+                });
+                __classPrivateFieldSet(this, _selectedIndex, index, "f");
+                // this.selectedId = itemId;
+            });
+            /**
+             * Make a set based on the rendered items array to maintain order between the
+             * pages, even when re-ordering tabs. This is useful for optimizing rendering
+             * performance by not re-ordering pages when the caption's order changes.
+             */
+            // eslint-disable-next-line @stencil-community/own-props-must-be-private
+            _updateRenderedPages.set(this, (items) => {
+                (items !== null && items !== void 0 ? items : []).forEach(item => {
+                    if (item.wasRendered) {
+                        __classPrivateFieldGet(this, _renderedPages, "f").add(item.id);
+                    }
+                });
+            });
+            _handleItemDblClick.set(this, (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.expandMainGroup.emit();
+            });
+            _handleDragStart.set(this, (index) => (event) => {
+                // Remove dragover event to allow mousemove event to fire
+                event.preventDefault();
+                // Store the index of the dragged element
+                this.draggedElementIndex = index;
+                // - - - - - - - - - - - DOM read operations - - - - - - - - - - -
+                const mousePositionX = event.clientX;
+                const mousePositionY = event.clientY;
+                const getItemSize = isBlockDirection(__classPrivateFieldGet(this, _direction, "f"))
+                    ? (item) => item.getBoundingClientRect().width
+                    : (item) => item.getBoundingClientRect().height;
+                __classPrivateFieldSet(this, _itemSizes, [...__classPrivateFieldGet(this, _tabListRef, "f").children].map(getItemSize), "f");
+                const buttonRect = event.target.getBoundingClientRect();
+                // Tab List information
+                const tabListSizes = getTabListSizesAndSetPosition(this.el, __classPrivateFieldGet(this, _tabListRef, "f"), __classPrivateFieldGet(this, _direction, "f"), buttonRect);
+                // Button information
+                const buttonSizes = {
+                    xStart: buttonRect.x,
+                    xEnd: buttonRect.x + buttonRect.width,
+                    yStart: buttonRect.y,
+                    yEnd: buttonRect.y + buttonRect.height
+                };
+                const mouseDistanceToButtonTopEdge = mousePositionY - buttonSizes.yStart;
+                const mouseDistanceToButtonBottomEdge = buttonSizes.yEnd - mousePositionY;
+                const mouseDistanceToButtonLeftEdge = mousePositionX - buttonSizes.xStart;
+                const mouseDistanceToButtonRightEdge = buttonSizes.xEnd - mousePositionX;
+                // Mouse limits
+                __classPrivateFieldSet(this, _mouseBoundingLimits, {
+                    xStart: tabListSizes.xStart - mouseDistanceToButtonRightEdge,
+                    xEnd: tabListSizes.xEnd + mouseDistanceToButtonLeftEdge,
+                    yStart: tabListSizes.yStart - mouseDistanceToButtonBottomEdge,
+                    yEnd: tabListSizes.yEnd + mouseDistanceToButtonTopEdge
+                }, "f");
+                // Store initial mouse position
+                __classPrivateFieldSet(this, _initialMousePosition, isBlockDirection(__classPrivateFieldGet(this, _direction, "f"))
+                    ? mousePositionX
+                    : mousePositionY, "f");
+                // - - - - - - - - - - - DOM write operations - - - - - - - - - - -
+                // Initialize mouse position to avoid initial flickering
+                setMousePosition(this.el, mousePositionX, mousePositionY);
+                // Initialize the button position
+                setButtonInitialPosition(this.el, buttonSizes.xStart, buttonSizes.yStart);
+                setButtonSize(this.el, isBlockDirection(__classPrivateFieldGet(this, _direction, "f")) ? buttonRect.width : buttonRect.height);
+                // Update mouse offset to correctly place the dragged element preview
+                setMouseOffset(this.el, mouseDistanceToButtonLeftEdge, mouseDistanceToButtonTopEdge);
+                addGrabbingStyle();
+                // Add listeners
+                document.body.addEventListener("mousemove", __classPrivateFieldGet(this, _handleItemDrag, "f"), {
+                    capture: true,
+                    passive: true
+                });
+                document.body.addEventListener("mouseup", __classPrivateFieldGet(this, _handleDragEnd, "f"), {
+                    capture: true
+                });
+            });
+            _handleDragEnd.set(this, () => {
+                // Since mousemove callbacks are executed on animation frames, we must also
+                // remove the events on animations frame. Otherwise we would remove the
+                // events and in the next frame the mousemove handler will be executes
+                cancelAnimationFrame(__classPrivateFieldGet(this, _cancelId, "f"));
+                __classPrivateFieldSet(this, _needForRAF, true, "f");
+                document.body.removeEventListener("mousemove", __classPrivateFieldGet(this, _handleItemDrag, "f"), {
+                    capture: true
+                });
+                document.body.removeEventListener("mouseup", __classPrivateFieldGet(this, _handleDragEnd, "f"), {
+                    capture: true
+                });
+                removeGrabbingStyle();
+                const anItemWasReordered = !this.hasCrossedBoundaries &&
+                    this.draggedElementNewIndex !== this.draggedElementIndex;
+                // Move the item to the new position
+                if (anItemWasReordered) {
+                    const itemToInsert = removeElement(this.items, this.draggedElementIndex);
+                    insertIntoIndex(this.items, itemToInsert, this.draggedElementNewIndex);
+                    // Update last selected index
+                    this.adjustLastSelectedIndexValueAfterReorder();
+                }
+                // Restore visibility of the dragged element
+                this.draggedElementIndex = -1;
+                this.draggedElementNewIndex = -1;
+                // Free the memory
+                __classPrivateFieldSet(this, _itemSizes, undefined, "f");
+                // Reset state
+                this.hasCrossedBoundaries = false;
+                this.el.style.removeProperty(TRANSITION_DURATION);
+            });
+            _handleItemDrag.set(this, (event) => {
+                __classPrivateFieldSet(this, _lastDragEvent, event, "f");
+                if (!__classPrivateFieldGet(this, _needForRAF, "f")) {
+                    return;
+                }
+                __classPrivateFieldSet(this, _needForRAF, false, "f"); // No need to call RAF up until next frame
+                __classPrivateFieldSet(this, _cancelId, requestAnimationFrame(() => {
+                    __classPrivateFieldSet(this, _needForRAF, true, "f"); // RAF now consumes the movement instruction so a new one can come
+                    const mousePositionX = __classPrivateFieldGet(this, _lastDragEvent, "f").clientX;
+                    const mousePositionY = __classPrivateFieldGet(this, _lastDragEvent, "f").clientY;
+                    setMousePosition(this.el, mousePositionX, mousePositionY);
+                    // There is no need to update the preview of the reorder
+                    if (this.hasCrossedBoundaries) {
+                        return;
+                    }
+                    const mouseLimits = __classPrivateFieldGet(this, _mouseBoundingLimits, "f");
+                    const draggedButtonIsInsideTheTabList = inBetween(mouseLimits.xStart, mousePositionX, mouseLimits.xEnd) &&
+                        inBetween(mouseLimits.yStart, mousePositionY, mouseLimits.yEnd);
+                    // Emit the itemDragStart event the first time the button is out of the
+                    // mouse bounds (`mouseBoundingLimits`)
+                    if (!draggedButtonIsInsideTheTabList) {
+                        this.hasCrossedBoundaries = true;
+                        // Remove transition before the render to avoid flickering in the animation
+                        this.el.style.setProperty(TRANSITION_DURATION, "0s");
+                        this.itemDragStart.emit(this.draggedElementIndex);
+                        return;
+                    }
+                    // There is no need to re-order the items in the preview
+                    if (this.items.length === 1) {
+                        return;
+                    }
+                    // In this point, the preview is inside the tab list, we should check
+                    // in which place is the preview to give feedback for the item's reorder
+                    const mousePosition = isBlockDirection(__classPrivateFieldGet(this, _direction, "f"))
+                        ? mousePositionX
+                        : mousePositionY;
+                    const hasMovedToTheEnd = __classPrivateFieldGet(this, _initialMousePosition, "f") < mousePosition;
+                    // Distance traveled from the initial mouse position
+                    let distanceTraveled = Math.abs(__classPrivateFieldGet(this, _initialMousePosition, "f") - mousePosition);
+                    let newIndex = this.draggedElementIndex;
+                    if (hasMovedToTheEnd) {
+                        // While it is not the last item and the distance traveled is greater
+                        // than half the size of the next item
+                        while (newIndex < this.items.length - 1 &&
+                            distanceTraveled - __classPrivateFieldGet(this, _itemSizes, "f")[newIndex + 1] / 2 > 0) {
+                            distanceTraveled -= __classPrivateFieldGet(this, _itemSizes, "f")[newIndex + 1];
+                            newIndex++;
+                        }
+                    }
+                    else {
+                        // While it is not the first item and the distance traveled is greater
+                        // than half the size of the previous item
+                        while (newIndex > 0 &&
+                            distanceTraveled - __classPrivateFieldGet(this, _itemSizes, "f")[newIndex - 1] / 2 > 0) {
+                            distanceTraveled -= __classPrivateFieldGet(this, _itemSizes, "f")[newIndex - 1];
+                            newIndex--;
+                        }
+                    }
+                    // Check if should update the dragged element index in the preview
+                    if (this.draggedElementNewIndex !== newIndex) {
+                        this.draggedElementNewIndex = newIndex;
+                    }
+                }), "f");
+            });
+            _handleClose.set(this, (index, itemId) => (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.itemClose.emit({
+                    itemIndex: index,
+                    itemId: itemId,
+                    type: this.type
+                });
+            });
+            _handleTabFocus.set(this, (event) => {
+                if (this.items.length < 2) {
+                    return;
+                }
+                const keyEventHandler = __classPrivateFieldGet(this, _keyEvents, "f")[event.code];
+                if (!keyEventHandler) {
+                    return;
+                }
+                const currentFocusedCaption = focusComposedPath()[0].closest("." + __classPrivateFieldGet(this, _classes, "f").BUTTON);
+                keyEventHandler(__classPrivateFieldGet(this, _direction, "f"), event, currentFocusedCaption);
+            });
+            _imgRender.set(this, (item) => item.startImageType === "img" &&
+                item.startImageSrc && (h("img", { "aria-hidden": "true", class: "caption-image " + __classPrivateFieldGet(this, _classes, "f").IMAGE, part: __classPrivateFieldGet(this, _parts, "f").IMAGE, alt: "", src: item.startImageSrc, loading: "lazy" })));
+            _renderTabBar.set(this, (thereAreShiftedElements) => (h("div", { role: "tablist", "aria-label": this.accessibleName, class: __classPrivateFieldGet(this, _classes, "f").TAB_LIST, part: __classPrivateFieldGet(this, _parts, "f").TAB_LIST, ref: el => (__classPrivateFieldSet(this, _tabListRef, el, "f")), onKeyDown: __classPrivateFieldGet(this, _handleTabFocus, "f") }, this.items.map((item, index) => (h("button", { key: CAPTION_ID(item.id), id: CAPTION_ID(item.id), role: "tab", "aria-controls": PAGE_ID(item.id), "aria-label": !__classPrivateFieldGet(this, _showCaptions, "f") ? item.name : null, "aria-selected": (item.id === this.selectedId).toString(), class: {
+                    [__classPrivateFieldGet(this, _classes, "f").BUTTON]: true,
+                    "decorative-image": isDecorativeImg(item),
+                    "dragged-element": this.draggedElementIndex === index,
+                    "dragged-element--outside": this.draggedElementIndex === index &&
+                        this.hasCrossedBoundaries &&
+                        this.items.length > 1,
+                    "shifted-element": this.draggedElementIndex !== -1,
+                    "shifted-element--start": thereAreShiftedElements &&
+                        this.draggedElementIndex < index &&
+                        index <= this.draggedElementNewIndex,
+                    "shifted-element--end": thereAreShiftedElements &&
+                        this.draggedElementNewIndex <= index &&
+                        index < this.draggedElementIndex
+                }, part: tokenMap({
+                    [__classPrivateFieldGet(this, _parts, "f").BUTTON]: true,
+                    [CAPTION_ID(item.id)]: true,
+                    [SELECTED_PART]: item.id === this.selectedId
+                }), style: isDecorativeImg(item)
+                    ? { [DECORATIVE_IMAGE]: `url("${item.startImageSrc}")` }
+                    : null, onAuxClick: __classPrivateFieldGet(this, _handleClose, "f").call(this, index, item.id), onClick: !(item.id === this.selectedId)
+                    ? __classPrivateFieldGet(this, _handleSelectedItemChange, "f").call(this, index, item.id)
+                    : null, onDblClick: this.type === "main" ? __classPrivateFieldGet(this, _handleItemDblClick, "f") : null,
+                // Drag and drop
+                onDragStart: !this.dragDisabled ? __classPrivateFieldGet(this, _handleDragStart, "f").call(this, index) : null }, __classPrivateFieldGet(this, _imgRender, "f").call(this, item), __classPrivateFieldGet(this, _showCaptions, "f") && item.name, __classPrivateFieldGet(this, _showCaptions, "f") && (h("button", { "aria-label": this.closeButtonAccessibleName, class: "close-button", part: CLOSE_BUTTON_PART, type: "button", onClick: __classPrivateFieldGet(this, _handleClose, "f").call(this, index, item.id) }))))))));
+            _renderTabPages.set(this, () => (h("div", { class: {
+                    [__classPrivateFieldGet(this, _classes, "f").PAGE_CONTAINER]: true,
+                    "page-container": true,
+                    "page-container--collapsed": !this.expanded
+                }, part: __classPrivateFieldGet(this, _parts, "f").PAGE_CONTAINER, ref: el => (__classPrivateFieldSet(this, _tabPageRef, el, "f")) }, [...__classPrivateFieldGet(this, _renderedPages, "f").keys()].map(itemId => (h("div", { key: PAGE_ID(itemId), id: PAGE_ID(itemId), role: "tabpanel", "aria-labelledby": CAPTION_ID(itemId), class: {
+                    [__classPrivateFieldGet(this, _classes, "f").PAGE]: true,
+                    "page--selected": itemId === this.selectedId,
+                    "page--hidden": !(itemId === this.selectedId)
+                }, part: __classPrivateFieldGet(this, _parts, "f").PAGE }, h("slot", { name: itemId })))))));
+            _renderDragPreview.set(this, (draggedElement) => {
+                const classes = {
+                    [DRAG_PREVIEW]: true,
+                    [DRAG_PREVIEW_OUTSIDE]: this.hasCrossedBoundaries,
+                    [DRAG_PREVIEW_INSIDE_INLINE]: !this.hasCrossedBoundaries && !isBlockDirection(__classPrivateFieldGet(this, _direction, "f")),
+                    [DRAG_PREVIEW_INSIDE_BLOCK]: !this.hasCrossedBoundaries && isBlockDirection(__classPrivateFieldGet(this, _direction, "f"))
+                };
+                return (h("div", { "aria-hidden": "true", class: classes, part: tokenMap(classes), ref: el => (__classPrivateFieldSet(this, _dragPreviewRef, el, "f")) }, h("button", { class: {
+                        [__classPrivateFieldGet(this, _classes, "f").BUTTON]: true,
+                        [DRAG_PREVIEW_ELEMENT]: true,
+                        "decorative-image": isDecorativeImg(draggedElement)
+                    }, part: tokenMap({
+                        [__classPrivateFieldGet(this, _parts, "f").BUTTON]: true,
+                        [CAPTION_ID(draggedElement.id)]: true,
+                        [DRAG_PREVIEW_ELEMENT]: true,
+                        [SELECTED_PART]: draggedElement.id === this.selectedId
+                    }), style: isDecorativeImg(draggedElement)
+                        ? { [DECORATIVE_IMAGE]: `url("${draggedElement.startImageSrc}")` }
+                        : null }, __classPrivateFieldGet(this, _imgRender, "f").call(this, draggedElement), __classPrivateFieldGet(this, _showCaptions, "f") && draggedElement.name)));
+            });
+            _initializeState.set(this, (type) => {
+                __classPrivateFieldSet(this, _direction, getDirection(type), "f");
+                __classPrivateFieldGet(this, _updateRenderedPages, "f").call(this, this.items);
+                // Initialize classes and parts
+                __classPrivateFieldGet(this, _setClassesAndParts, "f").call(this, __classPrivateFieldGet(this, _direction, "f"), type);
+                __classPrivateFieldSet(this, _showCaptions, isBlockDirection(__classPrivateFieldGet(this, _direction, "f")), "f");
+            });
+            _setClassesAndParts.set(this, (direction, type) => {
+                __classPrivateFieldSet(this, _classes, {
+                    BUTTON: BUTTON_CLASS(direction),
+                    IMAGE: IMAGE_CLASS(direction),
+                    PAGE: PAGE_CLASS(direction),
+                    PAGE_CONTAINER: PAGE_CONTAINER_CLASS(direction),
+                    PAGE_NAME: PAGE_NAME_CLASS(direction),
+                    TAB_LIST: TAB_LIST_CLASS(direction)
+                }, "f");
+                // Add the type information to each part
+                Object.entries(__classPrivateFieldGet(this, _classes, "f")).forEach(([key, value]) => {
+                    __classPrivateFieldGet(this, _parts, "f")[key] = `${value} ${type}`;
+                });
+            });
+            registerInstance(this, hostRef);
+            this.expandMainGroup = createEvent(this, "expandMainGroup", 7);
+            this.itemClose = createEvent(this, "itemClose", 7);
+            this.selectedItemChange = createEvent(this, "selectedItemChange", 7);
+            this.itemDragStart = createEvent(this, "itemDragStart", 7);
+            this.draggedElementIndex = -1;
+            this.draggedElementNewIndex = -1;
+            this.hasCrossedBoundaries = false;
+            this.accessibleName = undefined;
+            this.closeButtonAccessibleName = "Close";
+            this.dragDisabled = false;
+            this.expanded = true;
+            this.items = undefined;
+            this.selectedId = undefined;
+            this.type = undefined;
+        }
+        get el() { return getElement(this); }
+        handleItemsChange(newItems) {
+            __classPrivateFieldGet(this, _updateRenderedPages, "f").call(this, newItems);
+        }
+        handleSelectedIdChange(newSelectedId) {
+            __classPrivateFieldGet(this, _renderedPages, "f").add(newSelectedId);
+        }
+        handleTypeChange(newType) {
+            __classPrivateFieldGet(this, _initializeState, "f").call(this, newType);
+        }
+        /**
+         * Ends the preview of the dragged item. Useful for ending the preview via
+         * keyboard interaction.
+         */
+        async endDragPreview() {
+            __classPrivateFieldGet(this, _handleDragEnd, "f").call(this);
+        }
+        /**
+         * Returns the info associated to the draggable view.
+         */
+        async getDraggableViews() {
+            return {
+                mainView: this.el,
+                pageView: __classPrivateFieldGet(this, _tabPageRef, "f"),
+                tabListView: __classPrivateFieldGet(this, _tabListRef, "f")
+            };
+        }
+        /**
+         * Promotes the drag preview to the top layer. Useful to avoid z-index issues.
+         */
+        async promoteDragPreviewToTopLayer() {
+            if (this.draggedElementIndex === -1) {
+                return;
+            }
+            // If this property is added in a declarative way via the Stencil's render,
+            // we would have to use requestAnimationFrame to delay the shopPopover()
+            // method, since the popover defaults to "auto", which does not allow to
+            // keep multiple "auto" popover open at the same time
+            __classPrivateFieldGet(this, _dragPreviewRef, "f").popover = "manual";
+            __classPrivateFieldGet(this, _dragPreviewRef, "f").showPopover();
+        }
+        /**
+         * Given an id, remove the page from the render
+         */
+        async removePage(pageId, forceRerender = true) {
+            __classPrivateFieldGet(this, _renderedPages, "f").delete(pageId);
+            if (forceRerender) {
+                forceUpdate(this);
+            }
+        }
+        adjustLastSelectedIndexValueAfterReorder() {
+            var _b, _c;
+            // If the dragged element is the selected element, use the new index
+            if (__classPrivateFieldGet(this, _selectedIndex, "f") === this.draggedElementIndex) {
+                __classPrivateFieldSet(this, _selectedIndex, this.draggedElementNewIndex, "f");
+            }
+            // Dragged element:
+            //   - Started: Before the selected index
+            //   - Ended: After the selected index or in the same position
+            else if (this.draggedElementIndex < __classPrivateFieldGet(this, _selectedIndex, "f") &&
+                __classPrivateFieldGet(this, _selectedIndex, "f") <= this.draggedElementNewIndex) {
+                __classPrivateFieldSet(this, _selectedIndex, (_b = __classPrivateFieldGet(this, _selectedIndex, "f"), _b--, _b), "f");
+            }
+            // Dragged element:
+            //   - Started: After the selected index
+            //   - Ended: Before the selected index or in the same position
+            else if (__classPrivateFieldGet(this, _selectedIndex, "f") < this.draggedElementIndex &&
+                this.draggedElementNewIndex <= __classPrivateFieldGet(this, _selectedIndex, "f")) {
+                __classPrivateFieldSet(this, _selectedIndex, (_c = __classPrivateFieldGet(this, _selectedIndex, "f"), _c++, _c), "f");
+            }
+        }
+        componentWillLoad() {
+            __classPrivateFieldGet(this, _initializeState, "f").call(this, this.type);
+        }
+        render() {
+            if (this.items == null || this.items.length === 0) {
+                return "";
+            }
+            const draggedIndex = this.draggedElementIndex;
+            const draggedElement = this.items[draggedIndex];
+            const thereAreShiftedElementsInPreview = !this.hasCrossedBoundaries &&
+                this.draggedElementNewIndex !== -1 &&
+                this.draggedElementIndex !== this.draggedElementNewIndex;
+            return (h(Host, { class: `ch-tab-direction--${__classPrivateFieldGet(this, _direction, "f")}` }, __classPrivateFieldGet(this, _renderTabBar, "f").call(this, thereAreShiftedElementsInPreview), __classPrivateFieldGet(this, _renderTabPages, "f").call(this), draggedIndex !== -1 && __classPrivateFieldGet(this, _renderDragPreview, "f").call(this, draggedElement)));
+        }
+        static get watchers() { return {
+            "items": ["handleItemsChange"],
+            "selectedId": ["handleSelectedIdChange"],
+            "type": ["handleTypeChange"]
+        }; }
+    },
+    _cancelId = new WeakMap(),
+    _classes = new WeakMap(),
+    _parts = new WeakMap(),
+    _direction = new WeakMap(),
+    _selectedIndex = new WeakMap(),
+    _showCaptions = new WeakMap(),
+    _lastDragEvent = new WeakMap(),
+    _needForRAF = new WeakMap(),
+    _initialMousePosition = new WeakMap(),
+    _itemSizes = new WeakMap(),
+    _mouseBoundingLimits = new WeakMap(),
+    _renderedPages = new WeakMap(),
+    _dragPreviewRef = new WeakMap(),
+    _tabListRef = new WeakMap(),
+    _tabPageRef = new WeakMap(),
+    _keyEvents = new WeakMap(),
+    _handleSelectedItemChange = new WeakMap(),
+    _updateRenderedPages = new WeakMap(),
+    _handleItemDblClick = new WeakMap(),
+    _handleDragStart = new WeakMap(),
+    _handleDragEnd = new WeakMap(),
+    _handleItemDrag = new WeakMap(),
+    _handleClose = new WeakMap(),
+    _handleTabFocus = new WeakMap(),
+    _imgRender = new WeakMap(),
+    _renderTabBar = new WeakMap(),
+    _renderTabPages = new WeakMap(),
+    _renderDragPreview = new WeakMap(),
+    _initializeState = new WeakMap(),
+    _setClassesAndParts = new WeakMap(),
+    _a);
 ChTab.style = tabCss;
 
 export { ChFlexibleLayout as ch_flexible_layout, ChLayoutSplitter as ch_layout_splitter, ChTab as ch_tab };