@genexus/genexus-ide-ui 0.0.29 → 0.0.31

package/dist/components/tree-x.js

@@ -1,24 +1,42 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { m as mouseEventModifierKey } from './helpers.js';
 
-const treeXCss = "ch-tree-x{display:flex}ch-tree-x.ch-tree-x-dragging-item :not(.ch-tree-x-list-item--accept-drop){pointer-events:none}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--accept-drop{pointer-events:all}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
+const scrollToEdge = (event, container, scrollSpeed, scrollThreshold) => {
+  const mousePositionY = event.clientY - container.getBoundingClientRect().top;
+  const containerHeight = container.clientHeight;
+  const mouseAtTheTop = mousePositionY <= scrollThreshold;
+  const mouseAtTheBottom = mousePositionY > containerHeight - scrollThreshold;
+  if (mouseAtTheTop || mouseAtTheBottom) {
+    const scrollAmount = mouseAtTheTop
+      ? mousePositionY - scrollThreshold
+      : mousePositionY - (containerHeight - scrollThreshold);
+    // Adjust container scroll position
+    container.scrollTop += scrollAmount / scrollSpeed;
+  }
+};
+
+const treeXCss = "ch-tree-x{display:flex;position:relative;overflow:auto}ch-tree-x>ch-tree-x-list{position:absolute;inset:0;min-width:max-content}ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item{pointer-events:var(--ch-tree-x-pointer-events, all)}ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list{pointer-events:none}ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected]{--ch-tree-x-pointer-events:none}ch-tree-x.ch-tree-x-waiting-drop-processing{cursor:wait}ch-tree-x.ch-tree-x-waiting-drop-processing>ch-tree-x-list{pointer-events:none}.ch-tree-x-drag-info{--rtl-offset:16px;position:fixed;left:0;top:0;transform:translate(calc(var(--ch-tree-x-dragging-item-x) + var(--rtl-offset)), calc(var(--ch-tree-x-dragging-item-y) + 8px));pointer-events:none;z-index:1;animation:ch-tree-x-drag-info-fade-in 10ms}@keyframes ch-tree-x-drag-info-fade-in{0%,100%{opacity:0}}html[dir=rtl] .ch-tree-x-drag-info{--rtl-offset:-100%}";
 
 const TREE_ITEM_TAG_NAME = "ch-tree-x-list-item";
 const TREE_LIST_TAG_NAME = "ch-tree-x-list";
 // Selectors
 const TREE_LIST_AND_ITEM_SELECTOR = TREE_LIST_TAG_NAME + "," + TREE_ITEM_TAG_NAME;
 // const CHECKED_ITEMS = `${TREE_ITEM_TAG_NAME}[checked]`;
+const TEXT_FORMAT = "text/plain";
 const ARROW_DOWN_KEY = "ArrowDown";
 const ARROW_UP_KEY = "ArrowUp";
 const EDIT_KEY = "F2";
 const isExecutedInTree = (event, el) => event.composedPath().includes(el);
 const treeItemIsInEditMode = () => document.activeElement.editing;
+const getDroppableZoneKey = (newContainerId, draggedItems) => `"newContainerId":"${newContainerId}","metadata":"${JSON.stringify(draggedItems)}"`;
 const POSITION_X_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-x";
 const POSITION_Y_DRAG_CUSTOM_VAR = "--ch-tree-x-dragging-item-y";
 const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.droppableZoneEnter = createEvent(this, "droppableZoneEnter", 7);
+    this.expandedItemChange = createEvent(this, "expandedItemChange", 7);
     this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     this.itemsDropped = createEvent(this, "itemsDropped", 7);
     // @todo TODO: Check if key codes works in Safari
@@ -47,13 +65,18 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         document.activeElement.editing = true;
       }
     };
+    this.draggingSelectedItems = false;
     this.needForRAF = true; // To prevent redundant RAF (request animation frame) calls
-    this.lastPageX = 0;
-    this.lastPageY = 0;
     this.selectedItemsInfo = new Map();
+    /**
+     * Cache to avoid duplicate requests when checking the droppable zone in the
+     * same drag event.
+     */
+    this.validDroppableZoneCache = new Map();
     this.draggedIds = [];
     this.draggedParentIds = [];
-    this.draggingItem = false;
+    this.draggingInTheDocument = false;
+    this.draggingInTree = false;
     /**
      * Level in the tree at which the control is placed.
      */
@@ -67,54 +90,41 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * over in a subtree to open it when dragging.
      */
     this.openSubTreeCountdown = 750;
+    /**
+     * `true` to scroll in the tree when dragging an item near the edges of the
+     * tree.
+     */
+    this.scrollToEdgeOnDrag = true;
     /**
      * `true` to display the relation between tree items and tree lists using
      * lines.
      */
-    this.showLines = false;
+    this.showLines = "none";
     /**
      * This property lets you specify if the tree is waiting to process the drop
      * of items.
      */
     this.waitDropProcessing = false;
-    this.trackItemDragEnter = (event) => {
-      event.stopPropagation();
-      const currentTarget = event.target;
-      // Don't mark droppable zones if they are the dragged items or their direct parents
-      if (!this.validDroppableZone(currentTarget.id)) {
-        return;
-      }
-      // Check if it is a valid item
-      if (currentTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
-        return;
-      }
-      const treeItem = currentTarget;
-      treeItem.dragState = "enter";
-      this.openSubTreeAfterCountdown(treeItem);
-    };
-    this.validDroppableZone = (draggedItemId) => !this.draggedIds.includes(draggedItemId) &&
-      !this.draggedParentIds.includes(draggedItemId);
-    this.trackItemDragLeave = (event) => {
-      const currentTarget = event.target;
-      if (currentTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
-        return;
-      }
-      const treeItem = currentTarget;
-      treeItem.dragState = "none";
-      this.cancelSubTreeOpening(treeItem);
-    };
     this.trackItemDrag = (event) => {
       event.preventDefault();
-      this.lastPageX = event.pageX;
-      this.lastPageY = event.pageY;
+      this.lastDragEvent = event;
       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
-        this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastPageX}px`);
-        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastPageY}px`);
+        this.el.style.setProperty(POSITION_X_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageX}px`);
+        this.el.style.setProperty(POSITION_Y_DRAG_CUSTOM_VAR, `${this.lastDragEvent.pageY}px`);
+      });
+    };
+    this.fixScrollPositionOnDrag = () => {
+      if (!this.draggingInTree || !this.lastDragEvent) {
+        return;
+      }
+      requestAnimationFrame(() => {
+        scrollToEdge(this.lastDragEvent, this.el, 10, 30);
+        requestAnimationFrame(this.fixScrollPositionOnDrag);
       });
     };
     this.handleKeyDownEvents = (event) => {
@@ -149,37 +159,26 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       itemRef.scrollIntoView();
     });
   }
-  // /**
-  //  * This method is used to toggle a tree item by the tree item id/ids.
-  //  *
-  //  * @param treeItemIds An array id the tree items to be toggled.
-  //  * @param expand A boolean indicating that the tree item should be expanded or collapsed. (optional)
-  //  * @returns The modified items after the method was called.
-  //  */
-  // @Method()
-  // async toggleItems(
-  //   treeItemIds: string[],
-  //   expand?: boolean
-  // ): Promise<ExpandedTreeItemInfo[]> {
-  //   if (!treeItemIds) {
-  //     return [];
-  //   }
-  //   const allTreeItems = Array.from(
-  //     this.el.querySelectorAll(TREE_ITEM_TAG_NAME)
-  //   );
-  //   const modifiedTreeItems: ExpandedTreeItemInfo[] = [];
-  //   treeItemIds.forEach(treeItemId => {
-  //     const treeItem = allTreeItems.find(item => treeItemId === item.id);
-  //     if (treeItem) {
-  //       treeItem.expanded = expand ?? !treeItem.expanded;
-  //       modifiedTreeItems.push({
-  //         id: treeItem.id,
-  //         expanded: treeItem.expanded
-  //       });
-  //     }
-  //   });
-  //   return modifiedTreeItems;
-  // }
+  /**
+   * Update the information about the valid droppable zones.
+   * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
+   * @param newContainerId ID of the container where the drag is trying to be made.
+   * @param draggedItems Information about the dragged items.
+   * @param validDrop Current state of the droppable zone.
+   */
+  async updateValidDroppableZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+    var _a;
+    if (!this.draggingInTheDocument ||
+      requestTimestamp <= this.dragStartTimestamp) {
+      return;
+    }
+    const droppableZoneKey = getDroppableZoneKey(newContainerId, draggedItems);
+    this.validDroppableZoneCache.set(droppableZoneKey, validDrop ? "valid" : "invalid");
+    const shouldUpdateDragEnterInCurrentContainer = ((_a = this.lastOpenSubTreeItem) === null || _a === void 0 ? void 0 : _a.id) === newContainerId;
+    if (shouldUpdateDragEnterInCurrentContainer) {
+      this.lastOpenSubTreeItem.dragState = "enter";
+    }
+  }
   // /**
   //  * Returns an array of the selected tree items, providing the id, caption and
   //  * selected status.
@@ -195,98 +194,160 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //     selected: item.selected
   //   }));
   // }
+  // We can't use capture, because the dataTransfer info would not be defined
+  // Also, we cant use capture and setTimeout with 0 seconds, because the
+  // getData method can only be accessed during the dragstart and drop event
+  handleDragStart(event) {
+    // Reset the validity of the droppable zones with each new drag start
+    this.validDroppableZoneCache.clear();
+    this.draggingInTheDocument = true;
+    this.dragStartTimestamp = new Date().getTime();
+    this.draggedItems = JSON.parse(event.dataTransfer.getData(TEXT_FORMAT));
+  }
+  handleDragEnd() {
+    this.draggingInTheDocument = false;
+  }
+  handleDragEnter(event) {
+    this.cancelSubTreeOpening(null, true);
+    event.stopPropagation();
+    const containerTarget = event.target;
+    // Check if it is a valid item
+    if (containerTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
+      return;
+    }
+    this.lastOpenSubTreeItem = containerTarget;
+    this.openSubTreeAfterCountdown(containerTarget);
+    if (this.validDroppableZone(event) === "valid") {
+      containerTarget.dragState = "enter";
+    }
+  }
+  handleDragLeave(event) {
+    const currentTarget = event.target;
+    if (currentTarget.tagName.toLowerCase() !== TREE_ITEM_TAG_NAME) {
+      return;
+    }
+    const treeItem = currentTarget;
+    treeItem.dragState = "none";
+    this.cancelSubTreeOpening(treeItem);
+  }
+  cancelSubTreeOpening(treeItem, forceClear = false) {
+    if (this.lastOpenSubTreeItem === treeItem || forceClear) {
+      clearTimeout(this.openSubTreeTimeout);
+      this.lastOpenSubTreeItem = null;
+    }
+  }
+  handleItemDrop(event) {
+    event.stopPropagation();
+    this.cancelSubTreeOpening(null, true);
+    const newContainer = event.target;
+    const draggedItems = JSON.parse(event.dataTransfer.getData(TEXT_FORMAT));
+    // The droppable zone must be checked, even if it was marked as not valid
+    // @todo Try to drop an item with high delays in droppable zone checking
+    if (this.validDroppableZone(event) !== "valid") {
+      return;
+    }
+    this.itemsDropped.emit({
+      newContainer: { id: newContainer.id, metadata: newContainer.metadata },
+      draggedItems: draggedItems,
+      dropInTheSameTree: this.draggingInTree
+    });
+  }
   handleItemDragStart(event) {
     document.body.addEventListener("dragover", this.trackItemDrag, {
       capture: true
     });
     this.currentDraggedItem = event.target;
     this.updateDragInfo(event.detail);
-    this.el.addEventListener("dragenter", this.trackItemDragEnter, {
-      capture: true,
-      passive: true
-    });
-    this.el.addEventListener("dragleave", this.trackItemDragLeave, {
-      capture: true,
-      passive: true
-    });
-    // Wait until the custom var values are updated to avoid flickering
-    setTimeout(() => {
-      this.draggingItem = true;
-    }, 10);
+    this.draggingInTree = true;
+    if (this.scrollToEdgeOnDrag) {
+      this.fixScrollPositionOnDrag();
+    }
   }
   handleItemDragEnd() {
-    this.draggingItem = false;
+    this.draggingInTree = false;
     document.body.removeEventListener("dragover", this.trackItemDrag, {
       capture: true
     });
-    this.el.removeEventListener("dragenter", this.trackItemDragEnter, {
-      capture: true
-    });
-    this.el.removeEventListener("dragleave", this.trackItemDragLeave, {
-      capture: true
-    });
     // Reset not allowed droppable ids
     this.resetVariables();
   }
-  handleItemDrop(event) {
-    event.stopPropagation();
-    this.cancelSubTreeOpening(null, true);
-    const selectedItemEl = event.target;
-    if (!this.validDroppableZone(selectedItemEl.id)) {
-      return;
-    }
-    this.itemsDropped.emit(event.detail);
-  }
   handleSelectedItemChange(event) {
     event.stopPropagation();
     const selectedItemInfo = event.detail;
     const selectedItemEl = event.target;
     this.handleItemSelection(selectedItemEl, selectedItemInfo);
   }
-  openSubTreeAfterCountdown(treeItem) {
-    this.cancelSubTreeOpening(treeItem);
-    if (treeItem.leaf || treeItem.expanded) {
+  validDroppableZone(event) {
+    const containerTarget = event.target;
+    // When dragging in the same tree, don't mark droppable zones if they are
+    // the dragged items or their direct parents
+    if (this.draggingInTree &&
+      (this.draggedIds.includes(containerTarget.id) ||
+        this.draggedParentIds.includes(containerTarget.id))) {
+      return "invalid";
+    }
+    const cacheKey = getDroppableZoneKey(containerTarget.id, this.draggedItems);
+    const droppableZoneState = this.validDroppableZoneCache.get(cacheKey);
+    if (droppableZoneState != null) {
+      return droppableZoneState;
+    }
+    this.validDroppableZoneCache.set(cacheKey, "checking");
+    this.droppableZoneEnter.emit({
+      newContainer: {
+        id: containerTarget.id,
+        metadata: containerTarget.metadata
+      },
+      draggedItems: this.draggedItems
+    });
+    return "checking";
+  }
+  openSubTreeAfterCountdown(currentTarget) {
+    if (currentTarget.leaf || currentTarget.expanded) {
       return;
     }
-    this.lastOpenSubTreeItem = treeItem;
     this.openSubTreeTimeout = setTimeout(() => {
-      treeItem.expanded = true;
+      currentTarget.expanded = true;
+      this.expandedItemChange.emit({ id: currentTarget.id, expanded: true });
     }, this.openSubTreeCountdown);
   }
-  cancelSubTreeOpening(treeItem, forceClear = false) {
-    if (this.lastOpenSubTreeItem === treeItem || forceClear) {
-      clearTimeout(this.openSubTreeTimeout);
-    }
-  }
   resetVariables() {
     this.draggedIds = [];
     this.draggedParentIds = [];
   }
   /**
-   * Update the dataTransfer in the drag event to store the ids of the dragged
-   * items. Also it updates the visual information of the dragged items.
+   * Update the dataTransfer in the drag event to store the ids and metadata of
+   * the dragged items. Also it updates the visual information of the dragged
+   * items.
    */
   updateDragInfo(dragInfo) {
     const draggedElement = dragInfo.elem;
     const isDraggingSelectedItems = this.selectedItemsInfo.has(draggedElement.id);
-    let joinedDraggedIds;
+    this.draggingSelectedItems = isDraggingSelectedItems;
+    let dataTransferInfo = [];
     if (isDraggingSelectedItems) {
       const selectedItemKeys = [...this.selectedItemsInfo.keys()];
       const selectedItemCount = selectedItemKeys.length;
       this.draggedIds = selectedItemKeys;
-      joinedDraggedIds = selectedItemKeys.join(",");
+      dataTransferInfo = [...this.selectedItemsInfo.values()].map(el => ({
+        id: el.id,
+        metadata: el.metadata
+      }));
       this.dragInfo =
         selectedItemCount === 1
           ? draggedElement.caption
           : selectedItemCount.toString();
     }
     else {
-      joinedDraggedIds = draggedElement.id;
-      this.draggedIds = [joinedDraggedIds];
+      dataTransferInfo = [
+        { id: draggedElement.id, metadata: draggedElement.metadata }
+      ];
+      this.draggedIds = [draggedElement.id];
       this.dragInfo = draggedElement.caption;
     }
     this.getDirectParentsOfDraggableItems(isDraggingSelectedItems);
-    dragInfo.dataTransfer.setData("text/plain", joinedDraggedIds);
+    // Update drag event info
+    const data = JSON.stringify(dataTransferInfo);
+    dragInfo.dataTransfer.setData(TEXT_FORMAT, data);
   }
   getDirectParentsOfDraggableItems(draggingSelectedItems) {
     if (!draggingSelectedItems) {
@@ -343,9 +404,10 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     return (h(Host, { class: {
-        "ch-tree-x-dragging-item": this.draggingItem,
+        "ch-tree-x-dragging-item": this.draggingInTheDocument,
+        "ch-tree-x--dragging-selected-items": this.draggingInTree && this.draggingSelectedItems,
         "ch-tree-x-waiting-drop-processing": this.waitDropProcessing
-      } }, h("slot", null), this.draggingItem && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
+      } }, h("slot", null), this.draggingInTree && (h("span", { "aria-hidden": "true", class: "ch-tree-x-drag-info" }, this.dragInfo))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -356,11 +418,14 @@ const ChTreeX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "level": [2],
     "multiSelection": [4, "multi-selection"],
     "openSubTreeCountdown": [2, "open-sub-tree-countdown"],
-    "showLines": [4, "show-lines"],
+    "scrollToEdgeOnDrag": [4, "scroll-to-edge-on-drag"],
+    "showLines": [1, "show-lines"],
     "waitDropProcessing": [4, "wait-drop-processing"],
-    "draggingItem": [32],
-    "scrollIntoVisible": [64]
-  }, [[0, "itemDragStart", "handleItemDragStart"], [0, "itemDragEnd", "handleItemDragEnd"], [0, "itemDrop", "handleItemDrop"], [0, "selectedItemChange", "handleSelectedItemChange"]]]);
+    "draggingInTheDocument": [32],
+    "draggingInTree": [32],
+    "scrollIntoVisible": [64],
+    "updateValidDroppableZone": [64]
+  }, [[9, "dragstart", "handleDragStart"], [11, "dragend", "handleDragEnd"], [3, "dragenter", "handleDragEnter"], [3, "dragleave", "handleDragLeave"], [1, "drop", "handleItemDrop"], [0, "itemDragStart", "handleItemDragStart"], [0, "itemDragEnd", "handleItemDragEnd"], [0, "selectedItemChange", "handleSelectedItemChange"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/esm/ch-action-group_2.entry.js

@@ -122,7 +122,7 @@ const ChActionGroup = class {
   }
   connectActionsContainerObserver() {
     this.actionsContainerWatcher = new ResizeObserver(this.updateDisplayedActionInFrame);
-    this.actionsContainerWatcher.observe(this.el);
+    this.actionsContainerWatcher.observe(this.actionsContainer);
   }
   disconnectActionsObserver() {
     if (this.actionsWatcher) {
@@ -169,15 +169,11 @@ const ChActionGroup = class {
 };
 ChActionGroup.style = actionGroupCss;
 
-const actionGroupItemCss = "ch-action-group-item[floating]{position:absolute;visibility:hidden}";
+const actionGroupItemCss = "ch-action-group-item[floating]{visibility:hidden}";
 
 const ChActionGroupItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * `true` to ignore the floating property value.
-     */
-    this.avoidFloating = false;
     /**
      * `true` if the control is floating. Useful to implement the
      * `"ResponsiveCollapse"` value for the `itemsOverflowBehavior` property of
@@ -186,9 +182,6 @@ const ChActionGroupItem = class {
     this.floating = false;
   }
   componentWillLoad() {
-    if (this.avoidFloating) {
-      return;
-    }
     const parentAction = this.el.closest("ch-action-group");
     // Hide items at the start to improve CLS
     if (parentAction) {

package/dist/esm/ch-checkbox.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 import { D as DISABLED_CLASS } from './reserverd-names-2a2d0fb3.js';
 
-const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, #000);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px #00000040}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;inset:calc(50% - min(0.25em, 5px));width:min(0.5em, 10px);height:min(0.5em, 10px);background-color:#000;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
+const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, #000);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px #00000040}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:#000;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
 
 const CHECKBOX_ID = "checkbox";
 const PARTS = (checked, indeterminate) => `${checked ? " checked" : ""}${indeterminate ? " indeterminate" : ""}`;

package/dist/esm/ch-dropdown-item.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 
-const dropdownItemCss = ":where(a,button){all:unset}*,::before,::after{box-sizing:border-box}:host{display:flex;width:100%;height:100%}:host([force-containing-block]){transform:translateX(0);--ch-window-relative-position:true}.action{display:flex;align-items:center;width:100%;height:100%;cursor:pointer;text-align:start}.left-img,.right-img{display:block;width:24px;height:24px;min-width:24px}.content{width:100%}.dummy-wrapper{display:contents}";
+const dropdownItemCss = ":where(a,button){all:unset}*,::before,::after{box-sizing:border-box}:host{display:flex;width:100%;height:100%}:host([force-containing-block]){transform:translateX(0);--ch-window-relative-position:true}.action{display:flex;align-items:center;width:100%;height:100%;cursor:pointer;text-align:start}.left-img,.right-img{display:block;width:24px;height:24px;min-width:24px}.content{width:100%}";
 
 const DROPDOWN_ITEM = "ch-dropdown-item";
 const ChDropDownItem = class {
@@ -31,17 +31,17 @@ const ChDropDownItem = class {
      */
     this.position = "Center_OutsideEnd";
     this.dropDownItemContent = () => [
-      !!this.leftImgSrc && (h("img", { "aria-hidden": "true", class: "left-img", part: "left-img", alt: "", src: this.leftImgSrc, loading: "lazy" })),
-      h("span", { class: "content", part: "content" }, h("slot", null)),
-      !!this.rightImgSrc && (h("img", { "aria-hidden": "true", class: "right-img", part: "right-img", alt: "", src: this.rightImgSrc, loading: "lazy" }))
+      !!this.leftImgSrc && (h("img", { slot: "action", "aria-hidden": "true", class: "left-img", part: "left-img", alt: "", src: this.leftImgSrc, loading: "lazy" })),
+      h("span", { slot: "action", class: "content", part: "content" }, h("slot", null)),
+      !!this.rightImgSrc && (h("img", { slot: "action", "aria-hidden": "true", class: "right-img", part: "right-img", alt: "", src: this.rightImgSrc, loading: "lazy" }))
     ];
     this.checkItems = () => {
-      this.hasItems = !!this.element.querySelector(`:scope>${DROPDOWN_ITEM}`);
+      this.hasItems = !!this.el.querySelector(`:scope>${DROPDOWN_ITEM}`);
     };
     this.noItemsRender = () => this.href ? (h("a", { class: "action", part: "action target", href: this.href, onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), h("slot", { name: "items", onSlotchange: this.checkItems }))) : (h("button", { class: "action", part: "action button", type: "button", onClick: this.handleActionClick, onFocus: this.handleFocus, ref: el => (this.mainElement = el) }, this.dropDownItemContent(), h("slot", { name: "items", onSlotchange: this.checkItems })));
-    this.itemsRender = () => (h("ch-dropdown", { class: "action", exportparts: "expandable-button:action,expandable-button:button,expandable-button:expandable-action,separation,list,section,mask,header,footer,window", expandBehavior: this.expandBehavior, nestedDropdown: true, openOnFocus: this.openOnFocus, position: this.position }, h("div", { class: "dummy-wrapper", slot: "action" }, this.dropDownItemContent()), h("slot", { name: "items", slot: "items", onSlotchange: this.checkItems })));
+    this.itemsRender = () => (h("ch-dropdown", { class: "action", exportparts: "expandable-button:action,expandable-button:button,expandable-button:expandable-action,separation,list,section,mask,header,footer,window", expandBehavior: this.expandBehavior, nestedDropdown: true, openOnFocus: this.openOnFocus, position: this.position }, this.dropDownItemContent(), h("slot", { name: "items", slot: "items", onSlotchange: this.checkItems })));
     this.handleActionClick = () => {
-      this.actionClick.emit(this.element.id);
+      this.actionClick.emit(this.el.id);
     };
     this.handleFocus = () => {
       this.focusChange.emit();
@@ -59,7 +59,7 @@ const ChDropDownItem = class {
   render() {
     return (h(Host, { role: "listitem" }, this.hasItems ? this.itemsRender() : this.noItemsRender()));
   }
-  get element() { return getElement(this); }
+  get el() { return getElement(this); }
 };
 ChDropDownItem.style = dropdownItemCss;
 

package/dist/esm/ch-dropdown.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 
-const dropdownCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--separation:0px;--separation-x:var(--separation);--separation-y:var(--separation);display:flex;position:relative;width:100%;height:100%}.expandable-button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;cursor:pointer;z-index:108}.expandable-button:focus-within{transition:box-shadow 250ms}::slotted([slot=action]){pointer-events:none}.separation{display:flex;position:absolute;z-index:107}.separation--y{width:100%;height:var(--separation-y)}.separation--y-outside-start{inset-block-start:calc(var(--separation-y) * -1)}.separation--y-outside-start+ch-window{--ch-window-offset-y:calc(var(--separation-y) * -1)}.separation--y-outside-end{inset-block-end:calc(var(--separation-y) * -1)}.separation--y-outside-end+ch-window{--ch-window-offset-y:var(--separation-y)}.separation--x{width:var(--separation-x);height:100%}.separation--x-outside-start{inset-inline-start:calc(var(--separation-x) * -1)}.separation--x-outside-start+ch-window{--ch-window-offset-x:calc(var(--separation-x) * -1)}.separation--x-outside-end{inset-inline-end:calc(var(--separation-x) * -1)}.separation--x-outside-end+ch-window{--ch-window-offset-x:var(--separation-x)}.list{display:flex;flex-direction:column}";
+const dropdownCss = ":where(button){all:unset}*,::before,::after{box-sizing:border-box}:host{--separation:0px;--separation-x:var(--separation);--separation-y:var(--separation);display:flex;position:relative;width:100%;height:100%}.expandable-button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;cursor:pointer;z-index:108}.expandable-button:focus-within{transition:box-shadow 250ms}::slotted([slot=action]){pointer-events:none}ch-window[y-align=outside-start]{--ch-window-separation:var(--separation-y);--ch-window-separation-y:calc(var(--separation-y) * -1)}ch-window[y-align=outside-end]{--ch-window-separation:var(--separation-y);--ch-window-separation-y:var(--separation-y)}ch-window[x-align=outside-start]{--ch-window-separation:var(--separation-x);--ch-window-separation-x:calc(var(--separation-x) * -1)}ch-window[x-align=outside-end]{--ch-window-separation:var(--separation-x);--ch-window-separation-x:var(--separation-x)}.list{display:flex;flex-direction:column}";
 
 const mapDropdownAlignToChWindowAlign = {
   OutsideStart: "outside-start",
@@ -51,6 +51,7 @@ const ChDropDown = class {
     };
     this.showHeader = false;
     this.showFooter = false;
+    this.firstExpanded = false;
     this.expanded = false;
     this.expandedWithHover = false;
     /**
@@ -232,22 +233,22 @@ const ChDropDown = class {
     const aligns = this.position.split("_");
     const alignX = aligns[0];
     const alignY = aligns[1];
-    const hasVerticalPosition = alignY === "OutsideStart" || alignY === "OutsideEnd";
     const xAlignMapping = mapDropdownAlignToChWindowAlign[alignX];
     const yAlignMapping = mapDropdownAlignToChWindowAlign[alignY];
     const isExpanded = this.expanded || this.expandedWithHover;
+    this.firstExpanded || (this.firstExpanded = isExpanded);
     return (h(Host, { onMouseLeave: this.expandBehavior === "ClickOrHover"
         ? this.handleMouseLeave
         : undefined }, h("button", { id: EXPANDABLE_BUTTON_ID, "aria-controls": SECTION_ID, "aria-expanded": this.expanded.toString(), "aria-haspopup": "true", "aria-label": this.buttonLabel, class: "expandable-button", part: "expandable-button", type: "button", onClick: this.handleButtonClick, onFocus: this.openOnFocus ? this.handleButtonFocus : undefined, onMouseEnter: this.expandBehavior === "ClickOrHover"
         ? this.handleMouseEnter
-        : undefined, ref: el => (this.expandableButton = el) }, h("slot", { name: "action" })), this.expandBehavior === "ClickOrHover" && (
-    // Necessary since the separation between the button and the section
-    // triggers the onMouseLeave event
-    h("div", { "aria-hidden": "true", class: {
-        separation: true,
-        [`separation--y separation--y-${yAlignMapping}`]: hasVerticalPosition,
-        [`separation--x separation--x-${xAlignMapping}`]: !hasVerticalPosition
-      }, part: "separation" })), h("ch-window", { part: "window", exportparts: "window:section,mask,header,footer", container: this.el, closeOnEscape: true, hidden: !isExpanded, modal: false, showFooter: this.showFooter, showHeader: this.showHeader, xAlign: xAlignMapping, yAlign: yAlignMapping }, this.showHeader && h("slot", { name: "header", slot: "header" }), h("div", { role: "list", class: "list", part: "list" }, h("slot", { name: "items" })), this.showFooter && h("slot", { name: "footer", slot: "footer" }))));
+        : undefined, ref: el => (this.expandableButton = el) }, h("slot", { name: "action" })), h("ch-window", { part: "window", exportparts: "window:section,mask,header,footer,separation", container: this.expandableButton, closeOnEscape: true, hidden: !isExpanded, modal: false, showFooter: this.showFooter, showHeader: this.showHeader, showMain: false,
+      // Necessary since the separation between the button and the section
+      // triggers the onMouseLeave event
+      showSeparation: this.expandBehavior === "ClickOrHover", xAlign: xAlignMapping, yAlign: yAlignMapping }, this.firstExpanded && [
+      this.showHeader && h("slot", { name: "header", slot: "header" }),
+      h("div", { role: "list", class: "list", part: "list" }, h("slot", { name: "items" })),
+      this.showFooter && h("slot", { name: "footer", slot: "footer" })
+    ])));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ch-suggest_4.entry.js

@@ -125,6 +125,7 @@ const ChSuggest = class {
      */
     this.handleInput = (e) => {
       const inputValue = e.target.value;
+      this.caption = inputValue;
       if (this.timeoutReference) {
         clearTimeout(this.timeoutReference);
       }

package/dist/esm/ch-test-action-group.entry.js

@@ -51,7 +51,7 @@ const ChTestActionGroup = class {
       (this.displayedItemsCount === -1 || index < this.displayedItemsCount) &&
       item.items != null &&
       item.items.map(this.renderItem)));
-    this.firstLevelRenderCollapsedItem = (item) => (h("ch-dropdown-item", { id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.responsiveCollapsePosition || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
+    this.firstLevelRenderCollapsedItem = (item) => (h("ch-dropdown-item", { slot: "more-items", id: item.id, class: item.class, expandBehavior: this.expandBehavior, href: item.target, leftImgSrc: item.leftIcon, openOnFocus: this.openOnFocus, position: item.responsiveCollapsePosition || "OutsideEnd_InsideStart", rightImgSrc: item.rightIcon }, item.title, item.items != null && item.items.map(this.renderItem)));
     this.handleDisplayedItemsCountChange = (event) => {
       this.displayedItemsCount = event.detail;
     };
@@ -67,7 +67,7 @@ const ChTestActionGroup = class {
       this.itemsModel
         .filter((_, index) => this.displayedItemsCount !== -1 &&
         index >= this.displayedItemsCount)
-        .map(item => (h("ch-action-group-item", { slot: "more-items", avoidFloating: true }, this.firstLevelRenderCollapsedItem(item)))))));
+        .map(this.firstLevelRenderCollapsedItem))));
   }
 };
 ChTestActionGroup.style = testActionGroupCss;