@genexus/genexus-ide-ui 0.0.30 → 0.0.32

package/dist/components/ch-test-tree-x.js

@@ -4,9 +4,10 @@ import { d as defineCustomElement$4 } from './tree-x.js';
 import { d as defineCustomElement$3 } from './tree-x-list.js';
 import { d as defineCustomElement$2 } from './tree-x-list-item.js';
 
-const testTreeXCss = "ch-test-tree-x{display:grid;grid-template-columns:350px max-content;grid-template-rows:1fr;height:100%}ch-test-tree-x>.test-tree-x-scroll{position:relative;overflow-y:auto;margin-inline-end:16px}ch-test-tree-x>.test-tree-x-scroll>ch-tree-x{position:absolute;inset:0;margin:2px}.tree-buttons{display:grid;grid-auto-rows:max-content;row-gap:8px}:not(.ch-tree-x-dragging-item) ch-tree-x-list-item:not([selected])::part(header):hover{background-color:#e8e8e9}.ch-tree-x-list-item--drag-enter{background-color:#eee;box-shadow:inset 0 0 1px 0px black}.ch-tree-x-list-item--drag-enter[selected]::part(header){background-color:#eee}ch-tree-x-list-item::part(header){border:1px solid transparent}ch-tree-x-list-item[selected]::part(header){background-color:#cfdee6;border-color:#0266a0}ch-tree-x-list-item.ch-tree-x-list-item--editing::part(header){background-color:rgba(207, 222, 230, 0.5);border-color:transparent}ch-tree-x-list-item:not(.ch-tree-x-list-item--editing)::part(header):focus-visible{border-color:black;z-index:1}.ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
+const testTreeXCss = "ch-test-tree-x{display:grid;grid-template-columns:350px max-content;grid-template-rows:1fr;height:100%}.tree-buttons{display:grid;grid-auto-rows:max-content;row-gap:8px}:not(.ch-tree-x-dragging-item) ch-tree-x-list-item:not([selected])::part(header):hover{background-color:#e8e8e9}.ch-tree-x-list-item--drag-enter{background-color:#eee;box-shadow:inset 0 0 1px 0px black}.ch-tree-x-list-item--drag-enter[selected]::part(header){background-color:#eee}ch-tree-x-list-item::part(header){border:1px solid transparent}ch-tree-x-list-item[selected]::part(header){background-color:#cfdee6;border-color:#0266a0}ch-tree-x-list-item.ch-tree-x-list-item--editing::part(header){background-color:rgba(207, 222, 230, 0.5);border-color:transparent}ch-tree-x-list-item:not(.ch-tree-x-list-item--editing)::part(header):focus-visible{border-color:black;z-index:1}.ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
 
 const DEFAULT_EXPANDED_VALUE = false;
+const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
 const DEFAULT_SELECTED_VALUE = false;
 const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -31,18 +32,20 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      */
     this.multiSelection = false;
     /**
-     * Set this attribute if you want to display the relation between tree items and tree lists using
+     * `true` to display the relation between tree items and tree lists using
      * lines.
      */
-    this.showLines = true;
-    this.closeTreeNodeHandler = () => {
-      // this.tree.toggleItems(["number-1-1-2"], false);
-    };
-    this.openTreeNodeHandler = () => {
-      // this.tree.toggleItems(["number-1-1-2"], true);
-    };
-    this.toggleTreeNodeHandler = () => {
-      // this.tree.toggleItems(["number-1-1-2"]);
+    this.showLines = "none";
+    this.handleDroppableZoneEnter = (event) => {
+      const dropInformation = event.detail;
+      if (!this.checkDroppableZoneCallback) {
+        return;
+      }
+      const requestTimestamp = new Date().getTime();
+      const promise = this.checkDroppableZoneCallback(dropInformation);
+      promise.then(validDrop => {
+        this.treeRef.updateValidDroppableZone(requestTimestamp, dropInformation.newContainer.id, dropInformation.draggedItems, validDrop);
+      });
     };
     this.handleSelectedItemsChange = (event) => {
       const itemsToProcess = new Map(event.detail);
@@ -69,22 +72,87 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.selectedItems.add(itemId);
       });
     };
-    this.getCheckedItemsHandler = async () => {
-      // const checked = await this.tree.getCheckedItems();
+    this.handleExpandedItemChange = (event) => {
+      const detail = event.detail;
+      const itemInfo = this.flattenedTreeModel.get(detail.id).item;
+      itemInfo.expanded = detail.expanded;
+    };
+    this.handleItemsDropped = (event) => {
+      const dataTransferInfo = event.detail;
+      const newContainer = dataTransferInfo.newContainer;
+      const newParentId = newContainer.id;
+      // Check if the parent exists in the UI Model
+      if (!this.flattenedTreeModel.get(newParentId)) {
+        return;
+      }
+      const draggedItems = dataTransferInfo.draggedItems;
+      if (draggedItems.length === 0 || !this.dropItemsCallback) {
+        return;
+      }
+      const promise = this.dropItemsCallback(dataTransferInfo);
+      this.waitDropProcessing = true;
+      promise.then(response => {
+        this.waitDropProcessing = false;
+        if (!response.acceptDrop) {
+          return;
+        }
+        const newParentUIModel = this.flattenedTreeModel.get(newParentId).item;
+        // Only move the items to the new parent, keeping the state
+        if (dataTransferInfo.dropInTheSameTree) {
+          // Add the UI models to the new container and remove the UI models from
+          // the old containers
+          draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
+        }
+        // Add the new items
+        else {
+          if (response.items == null) {
+            return;
+          }
+          // Add new items to the parent
+          newParentUIModel.items.push(...response.items);
+          // Flatten the new UI models
+          response.items.forEach(this.flattenItemUIModel(newParentUIModel));
+        }
+        this.sortItems(newParentUIModel.items);
+        // Open the item to visualize the new subitems
+        newParentUIModel.expanded = true;
+        // There is no need to force and update, since the waitDropProcessing
+        // prop was modified
+      });
+    };
+    this.moveItemToNewParent = (newParentUIModel) => (dataTransferInfo) => {
+      const itemUIModelExtended = this.flattenedTreeModel.get(dataTransferInfo.id);
+      const item = itemUIModelExtended.item;
+      const oldParentItem = itemUIModelExtended.parentItem;
+      // Remove the UI model from the previous parent
+      oldParentItem.items.splice(oldParentItem.items.indexOf(item), 1);
+      // Add the UI Model to the new parent
+      newParentUIModel.items.push(item);
+      // Reference the new parent in the item
+      itemUIModelExtended.parentItem = newParentUIModel;
     };
-    // private deleteNodeHandler = () => {
-    //   this.treeItemsModel = [];
-    // };
-    this.renderSubModel = (treeSubModel) => (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, expanded: treeSubModel.expanded, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
+    this.renderSubModel = (treeSubModel) => (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
       treeSubModel.items != null &&
       treeSubModel.items.length !== 0 && (h("ch-tree-x-list", { slot: "tree" }, treeSubModel.items.map(this.renderSubModel)))));
-    this.handleMultiSelectionChange = (event) => {
-      const checked = event.target.checked;
-      this.multiSelection = checked;
-    };
-    this.handleShowLinesChange = (event) => {
-      const checked = event.target.checked;
-      this.showLines = checked;
+    this.flattenItemUIModel = (parentModel) => (item) => {
+      var _a, _b, _c, _d;
+      this.flattenedTreeModel.set(item.id, {
+        parentItem: parentModel,
+        item: item
+      });
+      // Make sure the properties are with their default values to avoid issues
+      // when reusing DOM nodes
+      (_a = item.expanded) !== null && _a !== void 0 ? _a : (item.expanded = DEFAULT_EXPANDED_VALUE);
+      (_b = item.indeterminate) !== null && _b !== void 0 ? _b : (item.indeterminate = DEFAULT_INDETERMINATE_VALUE);
+      (_c = item.lazy) !== null && _c !== void 0 ? _c : (item.lazy = DEFAULT_LAZY_VALUE);
+      (_d = item.selected) !== null && _d !== void 0 ? _d : (item.selected = DEFAULT_SELECTED_VALUE);
+      if (item.lazy) {
+        this.flattenedLazyTreeModel.set(item.id, item);
+      }
+      if (item.selected) {
+        this.selectedItems.add(item.id);
+      }
+      this.flattenSubModel(item);
     };
   }
   handleTreeModelChange() {
@@ -113,45 +181,65 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     // expand the items, we have to delegate the responsibility to the tree-x
     this.treeRef.scrollIntoVisible(treeItemId);
   }
-  handleDrop(event) {
-    var _a;
-    const detail = event.detail;
-    const dropItemId = detail.dropItemId;
-    // Check if the parent exists in the UI Model
-    if (!this.flattenedTreeModel.get(dropItemId)) {
-      return;
+  /**
+   * 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.
+   */
+  async toggleItems(treeItemIds, expand) {
+    if (!treeItemIds) {
+      return [];
     }
-    const data = detail.dataTransfer.getData("text/plain");
-    const draggedIds = (_a = data === null || data === void 0 ? void 0 : data.split(",")) !== null && _a !== void 0 ? _a : [];
-    if (draggedIds.length === 0 || !this.dropItemsCallback) {
+    const modifiedTreeItems = [];
+    treeItemIds.forEach(treeItemId => {
+      const itemInfo = this.flattenedTreeModel.get(treeItemId).item;
+      if (itemInfo) {
+        itemInfo.expanded = expand !== null && expand !== void 0 ? expand : !itemInfo.expanded;
+        modifiedTreeItems.push({
+          id: itemInfo.id,
+          expanded: itemInfo.expanded
+        });
+      }
+    });
+    // Force re-render
+    forceUpdate(this);
+    return modifiedTreeItems;
+  }
+  /**
+   * Given a subset of item's properties, it updates all item UI models.
+   */
+  async updateAllItemsProperties(properties) {
+    [...this.flattenedTreeModel.values()].forEach(itemUIModel => {
+      if (properties.expanded != null) {
+        itemUIModel.item.expanded = properties.expanded;
+      }
+      if (properties.checked != null) {
+        itemUIModel.item.checked = properties.checked;
+        itemUIModel.item.indeterminate = false;
+      }
+    });
+    forceUpdate(this);
+  }
+  /**
+   * Given a item list and the properties to update, it updates the properties
+   * of the items in the list.
+   */
+  async updateItemsProperties(items, properties) {
+    items.forEach(item => {
+      const itemUIModel = this.flattenedTreeModel.get(item);
+      this.updateItemProperty(itemUIModel, properties);
+    });
+    forceUpdate(this);
+  }
+  updateItemProperty(itemUIModel, properties) {
+    if (!itemUIModel) {
       return;
     }
-    const promise = this.dropItemsCallback(dropItemId, draggedIds);
-    this.waitDropProcessing = true;
-    promise.then(acceptDrop => {
-      this.waitDropProcessing = false;
-      if (!acceptDrop) {
-        return;
-      }
-      const newParentItem = this.flattenedTreeModel.get(dropItemId).item;
-      // Add the UI models to the new container and remove the UI models from
-      // the old containers
-      draggedIds.forEach(itemId => {
-        const itemUIModelExtended = this.flattenedTreeModel.get(itemId);
-        const item = itemUIModelExtended.item;
-        const oldParentItem = itemUIModelExtended.parentItem;
-        // Remove the UI model from the previous parent
-        oldParentItem.items.splice(oldParentItem.items.indexOf(item), 1);
-        // Add the UI Model to the new parent
-        newParentItem.items.push(item);
-        // Reference the new parent in the item
-        itemUIModelExtended.parentItem = newParentItem;
-      });
-      this.sortItems(newParentItem.items);
-      // Open the item to visualize the new subitems
-      newParentItem.expanded = true;
-      // There is no need to force and update, since the waitDropProcessing
-      // prop was modified
+    const itemInfo = itemUIModel.item;
+    Object.keys(properties).forEach(propertyName => {
+      itemInfo[propertyName] = properties[propertyName];
     });
   }
   loadLazyChildrenHandler(event) {
@@ -221,25 +309,7 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return;
     }
     this.sortItems(items);
-    items.forEach(item => {
-      var _a, _b, _c;
-      this.flattenedTreeModel.set(item.id, {
-        parentItem: model,
-        item: item
-      });
-      // Make sure the properties are with their default values to avoid issues
-      // when reusing DOM nodes
-      (_a = item.expanded) !== null && _a !== void 0 ? _a : (item.expanded = DEFAULT_EXPANDED_VALUE);
-      (_b = item.lazy) !== null && _b !== void 0 ? _b : (item.lazy = DEFAULT_LAZY_VALUE);
-      (_c = item.selected) !== null && _c !== void 0 ? _c : (item.selected = DEFAULT_SELECTED_VALUE);
-      if (item.lazy) {
-        this.flattenedLazyTreeModel.set(item.id, item);
-      }
-      if (item.selected) {
-        this.selectedItems.add(item.id);
-      }
-      this.flattenSubModel(item);
-    });
+    items.forEach(this.flattenItemUIModel(model));
   }
   sortItems(items) {
     // Ensure that items are sorted
@@ -256,23 +326,27 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.flattenModel();
   }
   render() {
-    return (h(Host, null, h("div", { class: "test-tree-x-scroll" }, h("ch-tree-x", { multiSelection: this.multiSelection, showLines: this.showLines, waitDropProcessing: this.waitDropProcessing, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, h("ch-tree-x-list", null, this.treeModel.items.map(this.renderSubModel)))), h("div", { class: "tree-buttons" }, h("button", { type: "button", onClick: this.closeTreeNodeHandler }, "Close 1-1-2"), h("button", { type: "button", onClick: this.openTreeNodeHandler }, "Open 1-1-2"), h("button", { type: "button", onClick: this.toggleTreeNodeHandler }, "Toggle 1-1-2"), h("button", { type: "button", onClick: this.getCheckedItemsHandler }, "Get Checked Items"), h("ch-checkbox", { caption: "Check / uncheck all" }), h("ch-checkbox", { checkedValue: "true", unCheckedValue: "false", value: this.multiSelection.toString(), caption: "Multi selection", onInput: this.handleMultiSelectionChange }), h("ch-checkbox", { checkedValue: "true", unCheckedValue: "false", value: this.showLines.toString(), caption: "Show lines", onInput: this.handleShowLinesChange }))));
+    return (h(Host, null, h("ch-tree-x", { multiSelection: this.multiSelection, showLines: this.showLines, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, h("ch-tree-x-list", null, this.treeModel.items.map(this.renderSubModel))), h("div", { class: "tree-buttons" })));
   }
   static get watchers() { return {
     "treeModel": ["handleTreeModelChange"]
   }; }
   static get style() { return testTreeXCss; }
 }, [0, "ch-test-tree-x", {
+    "checkDroppableZoneCallback": [16],
     "dropItemsCallback": [16],
     "treeModel": [1040],
     "lazyLoadTreeItemsCallback": [16],
     "modifyItemCaptionCallback": [16],
     "multiSelection": [1028, "multi-selection"],
-    "showLines": [1028, "show-lines"],
+    "showLines": [1025, "show-lines"],
     "sortItemsCallback": [16],
     "waitDropProcessing": [32],
-    "scrollIntoVisible": [64]
-  }, [[0, "itemsDropped", "handleDrop"], [0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"]]]);
+    "scrollIntoVisible": [64],
+    "toggleItems": [64],
+    "updateAllItemsProperties": [64],
+    "updateItemsProperties": [64]
+  }, [[0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/ch-window2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { C as CH_GLOBAL_STYLESHEET } from './ch-global-stylesheet.js';
 import { d as defineCustomElement$1 } from './ch-window-close2.js';
 
-const chWindowCss = ":host{--ch-window-offset-x:0px;--ch-window-offset-y:0px;--ch-window-x-outside:0px;--ch-window-y-outside:0px}:host(:not([hidden])){display:contents}:host(:is(:not([modal]),[modal=\"false\"])) .mask{pointer-events:none}.window{pointer-events:all}.mask{display:flex;position:fixed;inset:0;inset-inline-start:calc( var(--ch-window-inset-inline-start) + var(--ch-window-offset-x) );inset-block-start:calc( var(--ch-window-inset-block-start) + var(--ch-window-offset-y) );z-index:var(--ch-window-mask-z-index, 1000)}:host(:is([x-align=\"outside-start\"],[x-align=\"inside-start\"])) .mask{justify-content:flex-start}:host([x-align=center]) .mask{justify-content:center}:host(:is([x-align=\"outside-end\"],[x-align=\"inside-end\"])) .mask{justify-content:flex-end}:host(:is([y-align=\"outside-start\"],[y-align=\"inside-start\"])) .mask{align-items:flex-start}:host([y-align=center]) .mask{align-items:center}:host(:is([y-align=\"outside-end\"],[y-align=\"inside-end\"])) .mask{align-items:flex-end}.window{display:flex;flex-direction:column;transform:translate(var(--ch-window-x-outside), var(--ch-window-y-outside)) translate(var(--ch-window-x-drag, 0px), var(--ch-window-y-drag, 0px))}:host([x-align=outside-start]) .window{--ch-window-x-outside:-100%}:host([x-align=outside-end]) .window{--ch-window-x-outside:100%}:host([y-align=outside-start]) .window{--ch-window-y-outside:-100%}:host([y-align=outside-end]) .window{--ch-window-y-outside:100%}";
+const chWindowCss = ":host{--ch-window-offset-x:0px;--ch-window-offset-y:0px;--ch-window-separation-x:0px;--ch-window-separation-y:0px;--ch-window-x-outside:0px;--ch-window-y-outside:0px}:host(:not([hidden])){display:contents}:host(:is(:not([modal]),[modal=\"false\"])) .mask{pointer-events:none}.window{pointer-events:all}.mask{display:flex;position:fixed;inset:0;left:calc( var(--ch-window-inset-inline-start) + var(--ch-window-offset-x) + var(--ch-window-separation-x) );inset-block-start:calc( var(--ch-window-inset-block-start) + var(--ch-window-offset-y) + var(--ch-window-separation-y) );width:var(--ch-window-mask-width);height:var(--ch-window-mask-height);z-index:var(--ch-window-mask-z-index, 1000)}:host(:is([x-align=\"outside-start\"],[x-align=\"inside-start\"])) .mask{justify-content:flex-start}:host([x-align=center]) .mask{justify-content:center}:host(:is([x-align=\"outside-end\"],[x-align=\"inside-end\"])) .mask{justify-content:flex-end}:host(:is([y-align=\"outside-start\"],[y-align=\"inside-start\"])) .mask{align-items:flex-start}:host([y-align=center]) .mask{align-items:center}:host(:is([y-align=\"outside-end\"],[y-align=\"inside-end\"])) .mask{align-items:flex-end}.window{display:flex;flex-direction:column;transform:translate(var(--ch-window-x-outside), var(--ch-window-y-outside)) translate(var(--ch-window-x-drag, 0px), var(--ch-window-y-drag, 0px));z-index:inherit}:host([x-align=outside-start]) .window{--ch-window-x-outside:-100%}:host([x-align=outside-end]) .window{--ch-window-x-outside:100%}:host([y-align=outside-start]) .window{--ch-window-y-outside:-100%}:host([y-align=outside-end]) .window{--ch-window-y-outside:100%}.separation{position:fixed;inset:0;pointer-events:all}.separation--x{top:var(--ch-window-inset-block-start);width:var(--ch-window-separation);height:var(--ch-window-mask-height)}.separation--y{left:var(--ch-window-inset-inline-start);width:var(--ch-window-mask-width);height:var(--ch-window-separation)}.separation--both{width:calc(var(--ch-window-separation) * 4);height:calc(var(--ch-window-separation) * 4)}:host([x-align=outside-start]) .separation{left:calc( var(--ch-window-inset-inline-start) - var(--ch-window-separation) )}:host([x-align=outside-start]) .separation--both{left:calc( var(--ch-window-inset-inline-start) - var(--ch-window-separation) * 3 )}:host([x-align=outside-end]) .separation{left:calc( var(--ch-window-inset-inline-start) + var(--ch-window-mask-width) )}:host([x-align=outside-end]) .separation--both{left:calc( var(--ch-window-inset-inline-start) + var(--ch-window-mask-width) - var(--ch-window-separation) )}:host([y-align=outside-start]) .separation{top:calc(var(--ch-window-inset-block-start) - var(--ch-window-separation))}:host([y-align=outside-start]) .separation--both{top:calc( var(--ch-window-inset-block-start) - var(--ch-window-separation) * 3 )}:host([y-align=outside-end]) .separation{top:calc( var(--ch-window-inset-block-start) + var(--ch-window-mask-height) )}:host([y-align=outside-end]) .separation--both{top:calc( var(--ch-window-inset-block-start) + var(--ch-window-mask-height) - var(--ch-window-separation) )}";
 
 const CONTAINING_BLOCK_RESET_CUSTOM_VAR = "--ch-window-relative-position";
 const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -44,6 +44,16 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * This attribute lets you specify if a header is rendered on top of the window.
      */
     this.showHeader = true;
+    /**
+     * This attribute lets you specify if a div wrapper is rendered for the
+     * default slot.
+     */
+    this.showMain = true;
+    /**
+     * This attribute lets you specify if a div between the container and the window
+     * space.
+     */
+    this.showSeparation = false;
     this.mousemoveHandler = (eventInfo) => {
       const translateX = this.draggedX + eventInfo.clientX - this.dragStartX;
       const translateY = this.draggedY + eventInfo.clientY - this.dragStartY;
@@ -61,25 +71,24 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.updatePosition = () => {
       if (!this.isContainerCssOverride && this.container && this.mask) {
         const rect = this.container.getBoundingClientRect();
-        this.mask.style.width = `${rect.width}px`;
-        this.mask.style.height = `${rect.height}px`;
+        this.el.style.setProperty("--ch-window-mask-width", `${rect.width}px`);
+        this.el.style.setProperty("--ch-window-mask-height", `${rect.height}px`);
         // Nested windows are positioned relative to its initial containing block,
         // so there is no need to align them relative to the document
         if (this.relativeWindow) {
           return;
         }
-        // TODO: RTL positioning bug
-        this.mask.style.setProperty("--ch-window-inset-inline-start", `${rect.left}px`);
-        this.mask.style.setProperty("--ch-window-inset-block-start", `${rect.top}px`);
+        this.el.style.setProperty("--ch-window-inset-inline-start", `${rect.left}px`);
+        this.el.style.setProperty("--ch-window-inset-block-start", `${rect.top}px`);
       }
       else if (this.isContainerCssOverride || !this.container) {
-        this.mask.style.removeProperty("width");
-        this.mask.style.removeProperty("height");
+        this.el.style.removeProperty("--ch-window-mask-width");
+        this.el.style.removeProperty("--ch-window-mask-height");
         if (this.relativeWindow) {
           return;
         }
-        this.mask.style.removeProperty("--ch-window-inset-inline-start");
-        this.mask.style.removeProperty("--ch-window-inset-block-start");
+        this.el.style.removeProperty("--ch-window-inset-inline-start");
+        this.el.style.removeProperty("--ch-window-inset-block-start");
       }
     };
     this.windowResizeHandler = () => {
@@ -219,10 +228,17 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.el.shadowRoot.adoptedStyleSheets.push(CH_GLOBAL_STYLESHEET);
   }
   render() {
-    return (h(Host, null, h("div", { class: "mask", part: "mask", style: this.relativeWindow && {
+    const separationY = this.yAlign === "outside-start" || this.yAlign === "outside-end";
+    const separationX = this.xAlign === "outside-start" || this.xAlign === "outside-end";
+    return (h(Host, { style: this.relativeWindow && {
         "--ch-window-inset-inline-start": "0px",
         "--ch-window-inset-block-start": "0px"
-      }, ref: el => (this.mask = el), onClick: this.maskClickHandler }, h("section", { class: "window", part: "window", ref: el => (this.window = el) }, this.showHeader && (h("header", { part: "header", ref: el => (this.header = el) }, h("slot", { name: "header" }, h("span", { part: "caption" }, this.caption), h("ch-window-close", { part: "close", title: this.closeTooltip }, this.closeText)))), h("div", { part: "main" }, h("slot", null)), this.showFooter && (h("footer", { part: "footer" }, h("slot", { name: "footer" })))))));
+      } }, h("div", { class: "mask", part: "mask", ref: el => (this.mask = el), onClick: this.maskClickHandler }, h("section", { class: "window", part: "window", ref: el => (this.window = el) }, this.showHeader && (h("header", { part: "header", ref: el => (this.header = el) }, h("slot", { name: "header" }, h("span", { part: "caption" }, this.caption), h("ch-window-close", { part: "close", title: this.closeTooltip }, this.closeText)))), this.showMain ? (h("div", { part: "main" }, h("slot", null))) : (h("slot", null)), this.showFooter && (h("footer", { part: "footer" }, h("slot", { name: "footer" })))), this.showSeparation && (h("div", { class: {
+        separation: true,
+        "separation--x": separationX && !separationY,
+        "separation--y": separationY && !separationX,
+        "separation--both": separationX && separationY
+      }, part: "separation" })))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -243,7 +259,9 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "closeOnEscape": [4, "close-on-escape"],
     "allowDrag": [1, "allow-drag"],
     "showFooter": [4, "show-footer"],
-    "showHeader": [4, "show-header"]
+    "showHeader": [4, "show-header"],
+    "showMain": [4, "show-main"],
+    "showSeparation": [4, "show-separation"]
   }, [[1, "mousedown", "mousedownHandler"], [0, "windowCloseClicked", "windowCloseClickedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/checkbox.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { D as DISABLED_CLASS } from './reserverd-names.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/components/combo-box-item.js

@@ -4,7 +4,7 @@ import { c as commonClassesNames } from './classesNames.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
 
-const comboBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:host{display:block;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;font-family:var(--font-family-primary);font-size:var(--font-size-sm);background-color:var(--color-background);color:var(--color-on-background);opacity:1;overflow:hidden}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-01);width:100%;height:var(--gxg-list-item-height);box-sizing:border-box;}:host gxg-icon{flex-shrink:0}.description{white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}:host(.no-icon) .container{padding-left:var(--spacing-comp-02)}:host([hidden]){display:none}:host(.display-none){display:none}:host(:hover){background-color:var(--gxg-background-color-item-hover)}:host([selected]){background-color:var(--gxg-background-color-item-selected);color:var(--gxg-color-item-active)}:host(.large){font-size:var(--font-size-lg);min-height:auto}:host(.large) gxg-icon{margin-right:var(--spacing-comp-01)}";
+const comboBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:host{display:block;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;font-family:var(--font-family-primary);font-size:var(--font-size-sm);background-color:var(--color-background);color:var(--color-on-background);opacity:1;overflow:hidden}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-01);width:100%;height:var(--gxg-list-item-height);box-sizing:border-box;}:host gxg-icon{flex-shrink:0}.description{white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}:host(.no-icon) .container{padding-left:var(--spacing-comp-02)}:host([hidden]){display:none}:host(.display-none){display:none}:host(:hover){background-color:var(--gxg-background-color-item-hover)}:host([selected]){background-color:var(--gxg-background-color-item-selected);color:var(--gxg-color-selected)}:host(.large){font-size:var(--font-size-lg);min-height:auto}:host(.large) gxg-icon{margin-right:var(--spacing-comp-01)}";
 
 const GxgComboBoxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -68,7 +68,7 @@ const GxgComboBoxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       return "disabled";
     }
     else if (this.selected) {
-      return "negative";
+      return "auto";
     }
     else {
       return "auto";

package/dist/components/combo-box.js

@@ -44,6 +44,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       clearButton: "clear-button",
       toggleButton: "toggle-button",
     };
+    this.setInitialValueTimes = 0;
     /**
      * The presence of this attribute makes the input disabled
      */
@@ -165,11 +166,13 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
       else if (e.code === KeyboardKeys.ENTER) {
         this.hideList();
+        this.showAllItems();
       }
       else if (e.code === KeyboardKeys.SPACE) {
         this.showList();
       }
       else if (e.code === KeyboardKeys.ESCAPE) {
+        this.showAllItems();
         this.hideList();
       }
       else if (e.code === KeyboardKeys.TAB && this.showList) {
@@ -318,6 +321,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return value;
     };
     this.setInitialValue = () => {
+      this.setInitialValueTimes++;
       const firstItem = this.getEnabledItems()[0];
       if (!this.value || this.removedItem !== undefined) {
         if (firstItem) {
@@ -464,7 +468,9 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   WATCH
   *********************************/
   onValueChanged(newValue) {
-    this.valueChanged.emit(newValue);
+    if (this.setInitialValueTimes > 1) {
+      this.valueChanged.emit(newValue);
+    }
     this.clearSelectedItem();
     let value;
     let newItem = undefined;
@@ -472,7 +478,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       value = this.getValueByText(newValue);
     }
     else {
-      this.showAllItems();
+      !this.listIsOpen && this.showAllItems();
       value = newValue;
     }
     newItem = this.getItemByValue(value);

package/dist/components/dropdown-item.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$3 } from './dropdown.js';
 import { d as defineCustomElement$2 } from './ch-window2.js';
 import { d as defineCustomElement$1 } from './ch-window-close2.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -36,17 +36,17 @@ const ChDropDownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      */
     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();
@@ -64,7 +64,7 @@ const ChDropDownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   render() {
     return (h(Host, { role: "listitem" }, this.hasItems ? this.itemsRender() : this.noItemsRender()));
   }
-  get element() { return this; }
+  get el() { return this; }
   static get style() { return dropdownItemCss; }
 }, [1, "ch-dropdown-item", {
     "expandBehavior": [1, "expand-behavior"],

package/dist/components/dropdown.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './ch-window2.js';
 import { d as defineCustomElement$1 } from './ch-window-close2.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",
@@ -55,6 +55,7 @@ const ChDropDown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.showHeader = false;
     this.showFooter = false;
+    this.firstExpanded = false;
     this.expanded = false;
     this.expandedWithHover = false;
     /**
@@ -236,22 +237,22 @@ const ChDropDown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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 this; }
   static get watchers() { return {