@genexus/genexus-ide-ui 0.0.93 → 0.0.94

package/dist/components/flexible-layout.js

@@ -1,67 +1,348 @@
-import { proxyCustomElement, HTMLElement, forceUpdate, h, createEvent } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './layout-splitter.js';
+import { proxyCustomElement, HTMLElement, forceUpdate, h, createEvent, Host } from '@stencil/core/internal/client';
+import { i as inBetween } from './utils.js';
+import { d as defineCustomElement$2, g as getViewInfo } from './layout-splitter.js';
 import { d as defineCustomElement$1 } from './tab.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 = (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(droppableAreaRef, BLOCK_START, droppableAreaSizes[0]);
+    setProperty(droppableAreaRef, BLOCK_END, droppableAreaSizes[1]);
+    setProperty(droppableAreaRef, INLINE_START, droppableAreaSizes[2]);
+    setProperty(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 = /*@__PURE__*/ proxyCustomElement(class ChFlexibleLayout extends HTMLElement {
-    constructor() {
-        // @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 = (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 = (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 _ChFlexibleLayout_draggableViews, _ChFlexibleLayout_dragInfo, _ChFlexibleLayout_viewsOutOfDroppableZoneController, _ChFlexibleLayout_draggedViewRef, _ChFlexibleLayout_droppableAreaRef, _ChFlexibleLayout_layoutSplitterRef, _ChFlexibleLayout_getViewInfo, _ChFlexibleLayout_getAllViews, _ChFlexibleLayout_handleWidgetDragEndKeydown, _ChFlexibleLayout_handleWidgetDragEnd, _a;
+// Keys
+const ESCAPE_KEY = "Escape";
+const ChFlexibleLayout = /*@__PURE__*/ proxyCustomElement((_a = class ChFlexibleLayout extends HTMLElement {
+        constructor() {
+            _ChFlexibleLayout_draggableViews.set(this, void 0);
+            _ChFlexibleLayout_dragInfo.set(this, void 0);
+            _ChFlexibleLayout_viewsOutOfDroppableZoneController.set(this, void 0); // Allocated at runtime to reduce memory usage
+            // Refs
+            _ChFlexibleLayout_draggedViewRef.set(this, void 0);
+            _ChFlexibleLayout_droppableAreaRef.set(this, void 0);
+            _ChFlexibleLayout_layoutSplitterRef.set(this, void 0);
+            _ChFlexibleLayout_getViewInfo.set(this, (viewId) => getViewInfo(this.itemsInfo, viewId));
+            _ChFlexibleLayout_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(this, _ChFlexibleLayout_draggedViewRef, event.target, "f");
+                const views = [...this.el.shadowRoot.querySelectorAll("ch-tab")];
+                __classPrivateFieldSet(this, _ChFlexibleLayout_dragInfo, {
+                    index: event.detail,
+                    viewId: viewId
+                }, "f");
+                // Get all draggable views
+                const draggableViewsResult = await Promise.allSettled(views.map(view => view.getDraggableViews()));
+                // Allocate memory
+                __classPrivateFieldSet(this, _ChFlexibleLayout_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(this, _ChFlexibleLayout_draggableViews, "f").push(extendedDraggableView);
+                        draggableView.mainView.addEventListener("mousemove", handleWidgetDrag(extendedDraggableView, __classPrivateFieldGet(this, _ChFlexibleLayout_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(this, _ChFlexibleLayout_handleWidgetDragEnd, "f"), {
+                    passive: true
+                });
+                document.addEventListener("keydown", __classPrivateFieldGet(this, _ChFlexibleLayout_handleWidgetDragEndKeydown, "f"), {
+                    passive: true
+                });
+                // Removes view when they are out of a droppable area
+                __classPrivateFieldSet(this, _ChFlexibleLayout_viewsOutOfDroppableZoneController, new AbortController(), "f");
+                document.addEventListener("mousemove", () => removeDroppableAreaStyles(__classPrivateFieldGet(this, _ChFlexibleLayout_droppableAreaRef, "f")), {
+                    passive: true,
+                    signal: __classPrivateFieldGet(this, _ChFlexibleLayout_viewsOutOfDroppableZoneController, "f").signal
+                });
+                // Show droppable area
+                __classPrivateFieldGet(this, _ChFlexibleLayout_droppableAreaRef, "f").showPopover(); // Layer 1
+                // After that, promote the drag preview to the second layer
+                __classPrivateFieldGet(this, _ChFlexibleLayout_draggedViewRef, "f").promoteDragPreviewToTopLayer(); // Layer 2
+                // Disable drag bars in layout-splitter to improve the drag experience
+                this.dragBarDisabled = true;
+            };
+            _ChFlexibleLayout_handleWidgetDragEndKeydown.set(this, (event) => {
+                if (event.code !== ESCAPE_KEY) {
+                    return;
+                }
+                event.preventDefault();
+                // Cancels the drop by removing the drop info
+                removeDroppableAreaStyles(__classPrivateFieldGet(this, _ChFlexibleLayout_droppableAreaRef, "f"));
+                __classPrivateFieldGet(this, _ChFlexibleLayout_handleWidgetDragEnd, "f").call(this);
+                __classPrivateFieldGet(this, _ChFlexibleLayout_draggedViewRef, "f").endDragPreview();
+            });
+            _ChFlexibleLayout_handleWidgetDragEnd.set(this, () => {
+                // Remove mousemove handlers
+                __classPrivateFieldGet(this, _ChFlexibleLayout_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(this, _ChFlexibleLayout_handleWidgetDragEnd, "f"));
+                document.removeEventListener("keydown", __classPrivateFieldGet(this, _ChFlexibleLayout_handleWidgetDragEndKeydown, "f"));
+                __classPrivateFieldGet(this, _ChFlexibleLayout_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(this, _ChFlexibleLayout_dragInfo, "f")), dropInfo));
+                }
+                // Hide droppable area
+                __classPrivateFieldGet(this, _ChFlexibleLayout_droppableAreaRef, "f").hidePopover();
+                removeDroppableAreaStyles(__classPrivateFieldGet(this, _ChFlexibleLayout_droppableAreaRef, "f"));
+                // Free the memory
+                __classPrivateFieldSet(this, _ChFlexibleLayout_draggableViews, undefined, "f");
+                __classPrivateFieldSet(this, _ChFlexibleLayout_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));
+            super();
+            this.__registerHost();
+            this.__attachShadow();
+            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 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));
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        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(this, _ChFlexibleLayout_layoutSplitterRef, "f").refreshLayout();
         }
-        return (h("ch-layout-splitter", { layout: layoutModel, exportparts: "bar," + this.layoutSplitterParts }, [...this.viewsInfo.values()].map(this.renderView)));
-    }
-    static get style() { return flexibleLayoutCss; }
-}, [1, "ch-flexible-layout", {
+        /**
+         * 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(this, _ChFlexibleLayout_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(this, _ChFlexibleLayout_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(this, _ChFlexibleLayout_layoutSplitterRef, el, "f")) }, __classPrivateFieldGet(this, _ChFlexibleLayout_getAllViews, "f").call(this).map(this.renderView)), h("div", { "aria-hidden": "true", class: "droppable-area", part: "droppable-area", popover: "manual", ref: el => (__classPrivateFieldSet(this, _ChFlexibleLayout_droppableAreaRef, el, "f")) })));
+        }
+        static get style() { return flexibleLayoutCss; }
+    },
+    _ChFlexibleLayout_draggableViews = new WeakMap(),
+    _ChFlexibleLayout_dragInfo = new WeakMap(),
+    _ChFlexibleLayout_viewsOutOfDroppableZoneController = new WeakMap(),
+    _ChFlexibleLayout_draggedViewRef = new WeakMap(),
+    _ChFlexibleLayout_droppableAreaRef = new WeakMap(),
+    _ChFlexibleLayout_layoutSplitterRef = new WeakMap(),
+    _ChFlexibleLayout_getViewInfo = new WeakMap(),
+    _ChFlexibleLayout_getAllViews = new WeakMap(),
+    _ChFlexibleLayout_handleWidgetDragEndKeydown = new WeakMap(),
+    _ChFlexibleLayout_handleWidgetDragEnd = new WeakMap(),
+    _a), [1, "ch-flexible-layout", {
         "layoutModel": [16],
         "layoutSplitterParts": [1, "layout-splitter-parts"],
-        "viewsInfo": [16]
+        "itemsInfo": [16],
+        "dragBarDisabled": [32],
+        "refreshLayout": [64],
+        "removeView": [64],
+        "removeItemPageInView": [64]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/flexible-layout.js.map

@@ -1 +1 @@
-{"file":"flexible-layout.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,yBAAyB;;MCGtC,gBAAgB;IACzB;;;;;;;;;;;;;;;;;QAyBA,0BAAqB,GAAG;;;;;;;;;;YAUpB,WAAW,CAAC,IAAI,CAAC,CAAC;SACrB,CAAC;QACF,qBAAgB,GAAG,CAAC,MAAM,KAAK,CAAC,KAAK;YACjC,KAAK,CAAC,eAAe,EAAE,CAAC;;YAExB,MAAM,SAAS,mCACR,KAAK,CAAC,MAAM,KACf,MAAM,EAAE,MAAM,GACjB,CAAC;YACF,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC/C,CAAC;QACF,cAAS,GAAG,CAAC,OAAO,EAAE,QAAQ,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,CAAC,WAAW,EAAE,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC,qBAAqB,GAAG,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACnZ,eAAU,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;;;;;QA9CpJ,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,mBAAmB,GAAG,SAAS,CAAC;QACrC,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,EAAE,CAAC;KAC9B;IA4CD,MAAM;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,IAAI,WAAW,IAAI,IAAI,EAAE;YACrB,OAAO,EAAE,CAAC;SACb;QACD,QAAQ,CAAC,CAAC,oBAAoB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE;KAChK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/@genexus/chameleon-controls-library/dist/collection/components/flexible-layout/flexible-layout/flexible-layout.css?tag=ch-flexible-layout&encapsulation=shadow","node_modules/@genexus/chameleon-controls-library/dist/collection/components/flexible-layout/flexible-layout/flexible-layout.js"],"sourcesContent":[":host {\n  display: contents;\n}","import { forceUpdate, h } from \"@stencil/core\";\n// Keys\n// const KEY_B = \"KeyB\";\nexport class ChFlexibleLayout {\n    constructor() {\n        this.layoutModel = undefined;\n        this.layoutSplitterParts = undefined;\n        this.viewsInfo = new Map();\n    }\n    /**\n     * Fired when the selected item change.\n     */\n    selectedViewItemChange;\n    // @Listen(\"keydown\", { target: \"document\" })\n    // handleKeyDownEvent(event: KeyboardEvent) {\n    // if (\n    //   !mouseEventModifierKey(event) ||\n    //   event.code !== KEY_B ||\n    //   this.layout.inlineStart == null\n    // ) {\n    //   return;\n    // }\n    // event.stopPropagation();\n    // event.preventDefault();\n    // this.layout.inlineStart.expanded = !(\n    //   this.layout.inlineStart.expanded ?? true\n    // );\n    //   forceUpdate(this);\n    // }\n    handleMainGroupExpand = () => {\n        // if (this.layout.inlineStart) {\n        //   this.layout.inlineStart.expanded = false;\n        // }\n        // if (this.layout.inlineEnd) {\n        //   this.layout.inlineEnd.expanded = false;\n        // }\n        // if (this.layout.blockEnd) {\n        //   this.layout.blockEnd.expanded = false;\n        // }\n        forceUpdate(this);\n    };\n    handleItemChange = (viewId) => (event) => {\n        event.stopPropagation();\n        // Add the view id to properly update the render\n        const eventInfo = {\n            ...event.detail,\n            viewId: viewId\n        };\n        this.selectedViewItemChange.emit(eventInfo);\n    };\n    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 })))));\n    renderView = (view) => view.type === \"blockStart\" ? (h(\"header\", { key: view.id, slot: view.id }, h(\"slot\", null))) : (this.renderTab(view.type, view));\n    render() {\n        const layoutModel = this.layoutModel;\n        if (layoutModel == null) {\n            return \"\";\n        }\n        return (h(\"ch-layout-splitter\", { layout: layoutModel, exportparts: \"bar,\" + this.layoutSplitterParts }, [...this.viewsInfo.values()].map(this.renderView)));\n    }\n    static get is() { return \"ch-flexible-layout\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"flexible-layout.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"flexible-layout.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"layoutModel\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"LayoutSplitterDistribution\",\n                    \"resolved\": \"{ direction: LayoutSplitterDirection; items: LayoutSplitterDistributionItem[]; }\",\n                    \"references\": {\n                        \"LayoutSplitterDistribution\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../layout-splitter/types\",\n                            \"id\": \"src/components/layout-splitter/types.ts::LayoutSplitterDistribution\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Specifies the distribution of the items in the flexible layout.\"\n                }\n            },\n            \"layoutSplitterParts\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Specifies additional parts to export.\"\n                },\n                \"attribute\": \"layout-splitter-parts\",\n                \"reflect\": false\n            },\n            \"viewsInfo\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"Map<string, FlexibleLayoutView>\",\n                    \"resolved\": \"Map<string, FlexibleLayoutView>\",\n                    \"references\": {\n                        \"Map\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Map\"\n                        },\n                        \"FlexibleLayoutView\": {\n                            \"location\": \"import\",\n                            \"path\": \"../types\",\n                            \"id\": \"src/components/flexible-layout/types.ts::FlexibleLayoutView\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Specifies the information of each view displayed.\"\n                },\n                \"defaultValue\": \"new Map()\"\n            }\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"selectedViewItemChange\",\n                \"name\": \"selectedViewItemChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Fired when the selected item change.\"\n                },\n                \"complexType\": {\n                    \"original\": \"ViewSelectedItemInfo\",\n                    \"resolved\": \"{ lastSelectedIndex: number; newSelectedId: string; newSelectedIndex: number; type: TabType; viewId: string; }\",\n                    \"references\": {\n                        \"ViewSelectedItemInfo\": {\n                            \"location\": \"import\",\n                            \"path\": \"../types\",\n                            \"id\": \"src/components/flexible-layout/types.ts::ViewSelectedItemInfo\"\n                        }\n                    }\n                }\n            }];\n    }\n}\n//# sourceMappingURL=flexible-layout.js.map\n"],"version":3}
+{"file":"flexible-layout.js","mappings":"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","names":[],"sources":["node_modules/@genexus/chameleon-controls-library/dist/collection/components/flexible-layout/utils.js","node_modules/@genexus/chameleon-controls-library/dist/collection/components/flexible-layout/flexible-layout/flexible-layout.css?tag=ch-flexible-layout&encapsulation=shadow","node_modules/@genexus/chameleon-controls-library/dist/collection/components/flexible-layout/flexible-layout/flexible-layout.js"],"sourcesContent":["import { inBetween } from \"../../common/utils\";\n// Custom vars\nconst BLOCK_START = \"--ch-flexible-layout-drop-area-block-start\";\nconst BLOCK_END = \"--ch-flexible-layout-drop-area-block-end\";\nconst INLINE_START = \"--ch-flexible-layout-drop-area-inline-start\";\nconst INLINE_END = \"--ch-flexible-layout-drop-area-inline-end\";\n/**\n * If the mouse position is in the interval [0%, 30%] the droppable area should\n * be displayed at the START position with half the size.\n */\nconst START_HALF_THRESHOLD = 30; // In percentage\n/**\n * If the mouse position is in the interval [70%, 100%] the droppable area\n * should be displayed at the END position with half the size.\n */\nconst END_HALF_THRESHOLD = 100 - START_HALF_THRESHOLD; // In percentage\nconst EDGE_SIZE = 0.5;\nconst setProperty = (element, property, value) => element.style.setProperty(property, `${value}px`);\nconst droppableAreaMap = {\n    \"block-start\": (documentRect, mainViewRect) => [\n        mainViewRect.top,\n        documentRect.height - (mainViewRect.top + mainViewRect.height * EDGE_SIZE),\n        mainViewRect.left,\n        documentRect.width - (mainViewRect.left + mainViewRect.width)\n    ],\n    \"block-end\": (documentRect, mainViewRect) => [\n        mainViewRect.top + mainViewRect.height * EDGE_SIZE,\n        documentRect.height - (mainViewRect.top + mainViewRect.height),\n        mainViewRect.left,\n        documentRect.width - (mainViewRect.left + mainViewRect.width)\n    ],\n    \"inline-start\": (documentRect, mainViewRect) => [\n        mainViewRect.top,\n        documentRect.height - (mainViewRect.top + mainViewRect.height),\n        mainViewRect.left,\n        documentRect.width - (mainViewRect.left + mainViewRect.width * EDGE_SIZE)\n    ],\n    \"inline-end\": (documentRect, mainViewRect) => [\n        mainViewRect.top,\n        documentRect.height - (mainViewRect.top + mainViewRect.height),\n        mainViewRect.left + mainViewRect.width * EDGE_SIZE,\n        documentRect.width - (mainViewRect.left + mainViewRect.width)\n    ],\n    center: (documentRect, mainViewRect) => [\n        mainViewRect.top,\n        documentRect.height - (mainViewRect.top + mainViewRect.height),\n        mainViewRect.left,\n        documentRect.width - (mainViewRect.left + mainViewRect.width)\n    ]\n};\nlet lastDroppableArea;\nlet lastViewId;\nexport const handleWidgetDrag = (draggableView, droppableAreaRef) => (event) => {\n    event.stopPropagation(); // Prevents the remove of the droppable area\n    // - - - - - - - - - - - DOM read operations - - - - - - - - - - -\n    const documentRect = document.documentElement.getBoundingClientRect();\n    const mainViewRect = draggableView.mainView.getBoundingClientRect();\n    const positionX = event.clientX; // Mouse position X\n    const positionY = event.clientY; // Mouse position Y\n    const distanceToTheLeftEdge = positionX - mainViewRect.left;\n    const distanceToTheTopEdge = positionY - mainViewRect.top;\n    const relativePositionX = (distanceToTheLeftEdge / mainViewRect.width) * 100;\n    const relativePositionY = (distanceToTheTopEdge / mainViewRect.height) * 100;\n    let droppableArea;\n    // Block start (Most likely droppable area)\n    if (relativePositionY <= START_HALF_THRESHOLD &&\n        inBetween(relativePositionY, relativePositionX, 100 - relativePositionY)) {\n        droppableArea = \"block-start\";\n    }\n    // Inline End (second most likely droppable area)\n    else if (relativePositionX >= END_HALF_THRESHOLD &&\n        inBetween(100 - relativePositionX, relativePositionY, relativePositionX)) {\n        droppableArea = \"inline-end\";\n    }\n    // Inline Start\n    else if (relativePositionX <= START_HALF_THRESHOLD &&\n        inBetween(relativePositionX, relativePositionY, 100 - relativePositionX)) {\n        droppableArea = \"inline-start\";\n    }\n    // Block end\n    else if (relativePositionY >= END_HALF_THRESHOLD &&\n        inBetween(100 - relativePositionY, relativePositionX, relativePositionY)) {\n        droppableArea = \"block-end\";\n    }\n    // Center\n    else {\n        droppableArea = \"center\";\n    }\n    // If the droppable area did not change, there is no need to update the DOM\n    if (lastViewId === draggableView.viewId &&\n        lastDroppableArea === droppableArea) {\n        return;\n    }\n    lastDroppableArea = droppableArea;\n    lastViewId = draggableView.viewId;\n    const droppableAreaSizes = droppableAreaMap[droppableArea](documentRect, mainViewRect);\n    // - - - - - - - - - - - DOM write operations - - - - - - - - - - -\n    setProperty(droppableAreaRef, BLOCK_START, droppableAreaSizes[0]);\n    setProperty(droppableAreaRef, BLOCK_END, droppableAreaSizes[1]);\n    setProperty(droppableAreaRef, INLINE_START, droppableAreaSizes[2]);\n    setProperty(droppableAreaRef, INLINE_END, droppableAreaSizes[3]);\n};\nexport const removeDroppableAreaStyles = (droppableAreaRef) => {\n    lastDroppableArea = undefined;\n    lastViewId = undefined;\n    droppableAreaRef.removeAttribute(\"style\");\n};\nexport const getWidgetDropInfo = () => lastDroppableArea === undefined\n    ? undefined\n    : { dropAreaTarget: lastDroppableArea, viewIdTarget: lastViewId };\n//# sourceMappingURL=utils.js.map\n",":host {\n  display: contents;\n}\n\n.droppable-area {\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0;\n  border: unset;\n  color: unset;\n  inset-block: var(--ch-flexible-layout-drop-area-block-start) var(--ch-flexible-layout-drop-area-block-end);\n  inset-inline: var(--ch-flexible-layout-drop-area-inline-start) var(--ch-flexible-layout-drop-area-inline-end);\n  background-color: color-mix(in srgb, currentColor 15%, transparent);\n  transition-property: inset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-in-out;\n  pointer-events: none;\n}","import { Host, forceUpdate, h } from \"@stencil/core\";\nimport { getWidgetDropInfo, handleWidgetDrag, removeDroppableAreaStyles } from \"../utils\";\nimport { getViewInfo } from \"../../renders/flexible-layout/utils\";\n// Keys\nconst ESCAPE_KEY = \"Escape\";\n// const KEY_B = \"KeyB\";\nexport class ChFlexibleLayout {\n    constructor() {\n        this.dragBarDisabled = false;\n        this.layoutModel = undefined;\n        this.layoutSplitterParts = undefined;\n        this.itemsInfo = undefined;\n    }\n    #draggableViews;\n    #dragInfo;\n    #viewsOutOfDroppableZoneController; // Allocated at runtime to reduce memory usage\n    // Refs\n    #draggedViewRef;\n    #droppableAreaRef;\n    #layoutSplitterRef;\n    el;\n    /**\n     * Fired when a item of a view request to be closed.\n     */\n    viewItemClose;\n    /**\n     * Fired when the selected item change.\n     */\n    selectedViewItemChange;\n    /**\n     * Fired when a widget is dragged and dropped into a view.\n     */\n    viewItemReorder;\n    /**\n     * Schedules a new render of the control even if no state changed.\n     */\n    async refreshLayout() {\n        forceUpdate(this);\n        this.#layoutSplitterRef.refreshLayout();\n    }\n    /**\n     * Removes the view that is identified by the given ID.\n     * The layout is rearranged depending on the state of the removed view.\n     */\n    async removeView(itemId) {\n        const result = await this.#layoutSplitterRef.removeItem(itemId);\n        if (result.success) {\n            // Queue re-renders\n            forceUpdate(this);\n        }\n        return result;\n    }\n    /**\n     * Given the view ID and the item id, remove the page of the item from the view.\n     */\n    async removeItemPageInView(viewId, itemId, forceRerender = true) {\n        const viewInfo = this.#getViewInfo(viewId);\n        if (!viewInfo) {\n            return;\n        }\n        const viewRef = this.el.shadowRoot.querySelector(`ch-tab[id='${viewInfo.id}']`);\n        await viewRef.removePage(itemId, forceRerender);\n    }\n    #getViewInfo = (viewId) => getViewInfo(this.itemsInfo, viewId);\n    #getAllViews = () => {\n        const views = [];\n        this.itemsInfo.forEach(item => {\n            const itemView = item\n                .view;\n            if (itemView != null) {\n                views.push(itemView);\n            }\n        });\n        return views;\n    };\n    // @Listen(\"keydown\", { target: \"document\" })\n    // handleKeyDownEvent(event: KeyboardEvent) {\n    // if (\n    //   !mouseEventModifierKey(event) ||\n    //   event.code !== KEY_B ||\n    //   this.layout.inlineStart == null\n    // ) {\n    //   return;\n    // }\n    // event.stopPropagation();\n    // event.preventDefault();\n    // this.layout.inlineStart.expanded = !(\n    //   this.layout.inlineStart.expanded ?? true\n    // );\n    //   forceUpdate(this);\n    // }\n    handleMainGroupExpand = () => {\n        // if (this.layout.inlineStart) {\n        //   this.layout.inlineStart.expanded = false;\n        // }\n        // if (this.layout.inlineEnd) {\n        //   this.layout.inlineEnd.expanded = false;\n        // }\n        // if (this.layout.blockEnd) {\n        //   this.layout.blockEnd.expanded = false;\n        // }\n        forceUpdate(this);\n    };\n    handleItemChange = (viewId) => (event) => {\n        event.stopPropagation();\n        // Add the view id to properly update the render\n        const eventInfo = {\n            ...event.detail,\n            viewId: viewId\n        };\n        this.selectedViewItemChange.emit(eventInfo);\n    };\n    handleItemClose = (viewId) => (event) => {\n        event.stopPropagation();\n        // Add the view id to properly update the render\n        const eventInfo = {\n            ...event.detail,\n            viewId: viewId\n        };\n        this.viewItemClose.emit(eventInfo);\n    };\n    handleDragStart = (viewId) => async (event) => {\n        event.stopPropagation();\n        // We MUST store the reference before the Promise.allSettle, otherwise\n        // the event target will be the flexible-layout control\n        this.#draggedViewRef = event.target;\n        const views = [...this.el.shadowRoot.querySelectorAll(\"ch-tab\")];\n        this.#dragInfo = {\n            index: event.detail,\n            viewId: viewId\n        };\n        // Get all draggable views\n        const draggableViewsResult = await Promise.allSettled(views.map(view => view.getDraggableViews()));\n        // Allocate memory\n        this.#draggableViews = [];\n        // Add handlers to manage droppable areas\n        draggableViewsResult.forEach((draggableViewResult, index) => {\n            if (draggableViewResult.status === \"fulfilled\") {\n                const draggableView = draggableViewResult.value;\n                const abortController = new AbortController(); // Necessary to remove the event listener\n                const extendedDraggableView = {\n                    ...draggableView,\n                    viewId: views[index].id,\n                    abortController: abortController\n                };\n                this.#draggableViews.push(extendedDraggableView);\n                draggableView.mainView.addEventListener(\"mousemove\", handleWidgetDrag(extendedDraggableView, this.#droppableAreaRef), { capture: true, passive: true, signal: abortController.signal });\n                // Remove pointer events to not interfere on the mousemove event\n                extendedDraggableView.tabListView.style.pointerEvents = \"none\";\n                extendedDraggableView.pageView.style.pointerEvents = \"none\";\n            }\n        });\n        document.addEventListener(\"mouseup\", this.#handleWidgetDragEnd, {\n            passive: true\n        });\n        document.addEventListener(\"keydown\", this.#handleWidgetDragEndKeydown, {\n            passive: true\n        });\n        // Removes view when they are out of a droppable area\n        this.#viewsOutOfDroppableZoneController = new AbortController();\n        document.addEventListener(\"mousemove\", () => removeDroppableAreaStyles(this.#droppableAreaRef), {\n            passive: true,\n            signal: this.#viewsOutOfDroppableZoneController.signal\n        });\n        // Show droppable area\n        this.#droppableAreaRef.showPopover(); // Layer 1\n        // After that, promote the drag preview to the second layer\n        this.#draggedViewRef.promoteDragPreviewToTopLayer(); // Layer 2\n        // Disable drag bars in layout-splitter to improve the drag experience\n        this.dragBarDisabled = true;\n    };\n    #handleWidgetDragEndKeydown = (event) => {\n        if (event.code !== ESCAPE_KEY) {\n            return;\n        }\n        event.preventDefault();\n        // Cancels the drop by removing the drop info\n        removeDroppableAreaStyles(this.#droppableAreaRef);\n        this.#handleWidgetDragEnd();\n        this.#draggedViewRef.endDragPreview();\n    };\n    #handleWidgetDragEnd = () => {\n        // Remove mousemove handlers\n        this.#draggableViews.forEach(draggableView => {\n            draggableView.abortController.abort();\n            // Reset pointer events\n            draggableView.tabListView.style.pointerEvents = null;\n            draggableView.pageView.style.pointerEvents = null;\n        });\n        // Remove mouseup and keydown handlers\n        document.removeEventListener(\"mouseup\", this.#handleWidgetDragEnd);\n        document.removeEventListener(\"keydown\", this.#handleWidgetDragEndKeydown);\n        this.#viewsOutOfDroppableZoneController.abort();\n        // Check if must update the view due to a drop\n        const dropInfo = getWidgetDropInfo();\n        if (dropInfo) {\n            this.viewItemReorder.emit({ ...this.#dragInfo, ...dropInfo });\n        }\n        // Hide droppable area\n        this.#droppableAreaRef.hidePopover();\n        removeDroppableAreaStyles(this.#droppableAreaRef);\n        // Free the memory\n        this.#draggableViews = undefined;\n        this.#dragInfo = undefined;\n        // Re-enable drag bars\n        this.dragBarDisabled = false;\n    };\n    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 }))));\n    renderView = (view) => view.type === \"blockStart\" ? (h(\"header\", { key: view.id, slot: view.id }, h(\"slot\", null))) : (this.renderTab(view.type, view));\n    render() {\n        const layoutModel = this.layoutModel;\n        if (layoutModel == null) {\n            return \"\";\n        }\n        return (h(Host, null, h(\"ch-layout-splitter\", { dragBarDisabled: this.dragBarDisabled, layout: layoutModel, exportparts: \"bar,\" + this.layoutSplitterParts, ref: el => (this.#layoutSplitterRef = el) }, this.#getAllViews().map(this.renderView)), h(\"div\", { \"aria-hidden\": \"true\", class: \"droppable-area\", part: \"droppable-area\", popover: \"manual\", ref: el => (this.#droppableAreaRef = el) })));\n    }\n    static get is() { return \"ch-flexible-layout\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"flexible-layout.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"flexible-layout.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"layoutModel\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"LayoutSplitterDistribution\",\n                    \"resolved\": \"{ id: \\\"root\\\"; direction: LayoutSplitterDirection; items: LayoutSplitterDistributionItem[]; }\",\n                    \"references\": {\n                        \"LayoutSplitterDistribution\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../layout-splitter/types\",\n                            \"id\": \"src/components/layout-splitter/types.ts::LayoutSplitterDistribution\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Specifies the distribution of the items in the flexible layout.\"\n                }\n            },\n            \"layoutSplitterParts\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Specifies additional parts to export.\"\n                },\n                \"attribute\": \"layout-splitter-parts\",\n                \"reflect\": false\n            },\n            \"itemsInfo\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"Map<\\n    string,\\n    FlexibleLayoutItemExtended<FlexibleLayoutItem>\\n  >\",\n                    \"resolved\": \"Map<string, FlexibleLayoutItemExtended<FlexibleLayoutItem>>\",\n                    \"references\": {\n                        \"Map\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Map\"\n                        },\n                        \"FlexibleLayoutItemExtended\": {\n                            \"location\": \"import\",\n                            \"path\": \"../types\",\n                            \"id\": \"src/components/flexible-layout/types.ts::FlexibleLayoutItemExtended\"\n                        },\n                        \"FlexibleLayoutItem\": {\n                            \"location\": \"import\",\n                            \"path\": \"../types\",\n                            \"id\": \"src/components/flexible-layout/types.ts::FlexibleLayoutItem\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Specifies the information of each view displayed.\"\n                }\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"dragBarDisabled\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"viewItemClose\",\n                \"name\": \"viewItemClose\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Fired when a item of a view request to be closed.\"\n                },\n                \"complexType\": {\n                    \"original\": \"ViewItemCloseInfo\",\n                    \"resolved\": \"{ itemId: string; itemIndex: number; type: TabType; viewId: string; }\",\n                    \"references\": {\n                        \"ViewItemCloseInfo\": {\n                            \"location\": \"import\",\n                            \"path\": \"../types\",\n                            \"id\": \"src/components/flexible-layout/types.ts::ViewItemCloseInfo\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"selectedViewItemChange\",\n                \"name\": \"selectedViewItemChange\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Fired when the selected item change.\"\n                },\n                \"complexType\": {\n                    \"original\": \"ViewSelectedItemInfo\",\n                    \"resolved\": \"{ lastSelectedIndex: number; newSelectedId: string; newSelectedIndex: number; type: TabType; viewId: string; }\",\n                    \"references\": {\n                        \"ViewSelectedItemInfo\": {\n                            \"location\": \"import\",\n                            \"path\": \"../types\",\n                            \"id\": \"src/components/flexible-layout/types.ts::ViewSelectedItemInfo\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"viewItemReorder\",\n                \"name\": \"viewItemReorder\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Fired when a widget is dragged and dropped into a view.\"\n                },\n                \"complexType\": {\n                    \"original\": \"WidgetReorderInfo\",\n                    \"resolved\": \"WidgetDragInfo & WidgetDropInfo\",\n                    \"references\": {\n                        \"WidgetReorderInfo\": {\n                            \"location\": \"import\",\n                            \"path\": \"../types\",\n                            \"id\": \"src/components/flexible-layout/types.ts::WidgetReorderInfo\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get methods() {\n        return {\n            \"refreshLayout\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<void>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Schedules a new render of the control even if no state changed.\",\n                    \"tags\": []\n                }\n            },\n            \"removeView\": {\n                \"complexType\": {\n                    \"signature\": \"(itemId: string) => Promise<LayoutSplitterItemRemoveResult>\",\n                    \"parameters\": [{\n                            \"name\": \"itemId\",\n                            \"type\": \"string\",\n                            \"docs\": \"\"\n                        }],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        },\n                        \"LayoutSplitterItemRemoveResult\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../layout-splitter/types\",\n                            \"id\": \"src/components/layout-splitter/types.ts::LayoutSplitterItemRemoveResult\"\n                        }\n                    },\n                    \"return\": \"Promise<LayoutSplitterItemRemoveResult>\"\n                },\n                \"docs\": {\n                    \"text\": \"Removes the view that is identified by the given ID.\\nThe layout is rearranged depending on the state of the removed view.\",\n                    \"tags\": []\n                }\n            },\n            \"removeItemPageInView\": {\n                \"complexType\": {\n                    \"signature\": \"(viewId: string, itemId: string, forceRerender?: boolean) => Promise<void>\",\n                    \"parameters\": [{\n                            \"name\": \"viewId\",\n                            \"type\": \"string\",\n                            \"docs\": \"\"\n                        }, {\n                            \"name\": \"itemId\",\n                            \"type\": \"string\",\n                            \"docs\": \"\"\n                        }, {\n                            \"name\": \"forceRerender\",\n                            \"type\": \"boolean\",\n                            \"docs\": \"\"\n                        }],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        },\n                        \"HTMLChTabElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLChTabElement\"\n                        }\n                    },\n                    \"return\": \"Promise<void>\"\n                },\n                \"docs\": {\n                    \"text\": \"Given the view ID and the item id, remove the page of the item from the view.\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=flexible-layout.js.map\n"],"version":3}

package/dist/components/form-radio.js

@@ -6,7 +6,7 @@ const formRadioCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necola
 
 const GxgFormRadio = /*@__PURE__*/ proxyCustomElement(class GxgFormRadio extends HTMLElement {
     constructor() {
-        this.clickedHandler = (e) => {
+        this.clickedHandler = () => {
             this.checked = true;
         };
         super();
@@ -30,7 +30,7 @@ const GxgFormRadio = /*@__PURE__*/ proxyCustomElement(class GxgFormRadio extends
         if (newValue) {
             this.radioChecked.emit({
                 id: this.radioId,
-                value: this.value,
+                value: this.value
             });
         }
     }
@@ -38,7 +38,7 @@ const GxgFormRadio = /*@__PURE__*/ proxyCustomElement(class GxgFormRadio extends
         this.keyPressed.emit(e.key);
     }
     render() {
-        return (h(Host, { class: { "gxg-form-radio--disabled": this.disabled } }, h("gxg-label", { noMargin: true, class: "label", disabled: this.disabled, onClick: this.clickedHandler }, h("input", { ref: (el) => (this.radioInput = el), type: "radio", name: this.name, value: this.value, disabled: this.disabled, onKeyDown: this.handlerOnKeyDown.bind(this), checked: this.checked, class: { checked: this.checked } }), h("span", { class: { radiobtn: true, "radiobtn--error": this.error } }), this.label)));
+        return (h(Host, { class: { "gxg-form-radio--disabled": this.disabled } }, h("gxg-label", { noMargin: true, class: "label", disabled: this.disabled, onClick: this.clickedHandler }, h("input", { ref: el => (this.radioInput = el), type: "radio", name: this.name, value: this.value, disabled: this.disabled, onKeyDown: this.handlerOnKeyDown.bind(this), checked: this.checked, class: { checked: this.checked } }), h("span", { class: { radiobtn: true, "radiobtn--error": this.error } }), this.label)));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {