@genexus/genexus-ide-ui 0.0.30 → 0.0.32

package/dist/components/gx-ide-team-dev-commit.js

@@ -93,7 +93,7 @@ const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       if (this.chGridPendingCommitsEl) {
         const addedRowsIds = e.detail.addedRowsId;
         const removedRowsId = e.detail.removedRowsId;
-        const pendingItemCheckedResult = await this.pendingItemCheckedCallback({
+        const pendingItemCheckedResult = await this.pendingItemsCheckedCallback({
           itemsChecked: addedRowsIds,
           itemsUnchecked: removedRowsId
         });
@@ -185,7 +185,7 @@ const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.loadCallback = undefined;
     this.commitCallback = undefined;
     this.selectCallback = undefined;
-    this.pendingItemCheckedCallback = undefined;
+    this.pendingItemsCheckedCallback = undefined;
     this.objectsContextMenuCallback = undefined;
   }
   // 6.COMPONENT LIFECYCLE METHODS //
@@ -217,7 +217,7 @@ const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   // 10.RENDER() FUNCTION //
   render() {
     return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", null, h("header", { class: "header grid" }, h("gxg-form-textarea", { id: "gxg-textarea", height: "100px", label: this._componentLocale.topMenu.commentLabel, value: this.comment, ref: (el) => (this.commitComment = el), placeholder: this._componentLocale.topMenu.commentPlaceholder, part: "comment" }), h("gxg-button", { class: "header-button", type: "outlined", part: "location", onClick: this.getRecentCommentHandler }, this._componentLocale.topMenu.recentCommentsButton))), h("main", { class: "main" }, h("gxg-container", { fieldset: true, noContentPadding: !!this.filtersHidden }, h("div", { class: "grid second-grid" }, h("div", { class: "actions-row grid" }, h("gxg-form-text", { class: this.filtersHidden ? "hidden" : null, "disable-filter": true, label: this._componentLocale.filtersMenu.patternLabel, labelPosition: "start", value: "", ref: (el) => (this.patternEl = el), "display-validation-styles": true, "display-validation-message": true, part: "pattern", onInput: this.loadData }), h("div", { class: "action-buttons", slot: "tab-bar" }, h("gxg-button", { onClick: this.toggleFiltersHandler, type: "secondary-icon-only", icon: "patterns/filters", part: "gxg-button gxg-button--show-filter" }), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", onClick: this.loadData, part: "gxg-button gxg-button--reload" }))), h("div", { class: "filters-grid grid " +
-        (this.filtersHidden ? "hidden" : null) }, h("div", { class: "first-row grid" }, h("gxg-combo-box", { labelPosition: "start", "disable-filter": true, label: this._componentLocale.filtersMenu.changesetLabel, value: this.changeSet[0]["id"], ref: (el) => (this.changeSetEl = el), part: "change-set", "display-validation-styles": true, "display-validation-message": true, onValueChanged: this.loadData }, renderComboItems(this.changeSet)), h("gxg-combo-box", { labelPosition: "start", "disable-filter": true, label: this._componentLocale.filtersMenu.typeLabel, value: this.types[0]["id"], ref: (el) => (this.typesEl = el), part: "type", onValueChanged: this.loadData }, renderComboItems(this.types))), h("div", { class: "second-row grid" }, h("gxg-combo-box", { labelPosition: "start", "disable-filter": true, label: this._componentLocale.filtersMenu.folderLabel, value: this.folders[0]["id"], ref: (el) => (this.foldersEl = el), part: "folder", "display-validation-styles": true, "display-validation-message": true, onValueChanged: this.loadData }, renderComboItems(this.folders)), h("gxg-combo-box", { labelPosition: "start", "disable-filter": true, label: this._componentLocale.filtersMenu.categoryLabel, value: this.categories[0]["id"], ref: (el) => (this.categoriesEl = el), part: "categories", onValueChanged: this.loadData }, renderComboItems(this.categories)))))), h("gxg-container", null, h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container" }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": `${this._componentLocale.tabs.pendingCommits} (${this.pendingCommits.length})`, tab: "pending-commits", "is-selected": true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": `${this._componentLocale.tabs.ignoredObjects} (${this.ignoredObjects.length})`, tab: "ignored-objects" })), h("gxg-tab", { tab: "pending-commits", "no-padding": true }, this.renderPendingCommitsGrid()), h("gxg-tab", { tab: "ignored-objects", "no-padding": true }, this.renderIgnoredObjectsGrid())), h("gxg-button", { slot: "footer", type: "primary-text-only", onClick: this.commitCallbackHandler, part: "commit-button" }, this._componentLocale.footer.commitButton))))));
+        (this.filtersHidden ? "hidden" : null) }, h("div", { class: "first-row grid" }, h("gxg-combo-box", { labelPosition: "start", label: this._componentLocale.filtersMenu.changesetLabel, value: this.changeSet[0]["id"], ref: (el) => (this.changeSetEl = el), part: "change-set", "display-validation-styles": true, "display-validation-message": true, onValueChanged: this.loadData }, renderComboItems(this.changeSet)), h("gxg-combo-box", { labelPosition: "start", label: this._componentLocale.filtersMenu.typeLabel, value: this.types[0]["id"], ref: (el) => (this.typesEl = el), part: "type", onValueChanged: this.loadData }, renderComboItems(this.types))), h("div", { class: "second-row grid" }, h("gxg-combo-box", { labelPosition: "start", label: this._componentLocale.filtersMenu.folderLabel, value: this.folders[0]["id"], ref: (el) => (this.foldersEl = el), part: "folder", "display-validation-styles": true, "display-validation-message": true, onValueChanged: this.loadData }, renderComboItems(this.folders)), h("gxg-combo-box", { labelPosition: "start", label: this._componentLocale.filtersMenu.categoryLabel, value: this.categories[0]["id"], ref: (el) => (this.categoriesEl = el), part: "categories", onValueChanged: this.loadData }, renderComboItems(this.categories)))))), h("gxg-container", null, h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container" }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": `${this._componentLocale.tabs.pendingCommits} (${this.pendingCommits.length})`, tab: "pending-commits", "is-selected": true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": `${this._componentLocale.tabs.ignoredObjects} (${this.ignoredObjects.length})`, tab: "ignored-objects" })), h("gxg-tab", { tab: "pending-commits", "no-padding": true }, this.renderPendingCommitsGrid()), h("gxg-tab", { tab: "ignored-objects", "no-padding": true }, this.renderIgnoredObjectsGrid())), h("gxg-button", { slot: "footer", type: "primary-text-only", onClick: this.commitCallbackHandler, part: "commit-button" }, this._componentLocale.footer.commitButton))))));
   }
   static get assetsDirs() { return ["gx-ide-assets/team-dev-commit"]; }
   get el() { return this; }
@@ -231,7 +231,7 @@ const GxIdeTeamDevCommit$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     "loadCallback": [16],
     "commitCallback": [16],
     "selectCallback": [16],
-    "pendingItemCheckedCallback": [16],
+    "pendingItemsCheckedCallback": [16],
     "objectsContextMenuCallback": [16],
     "filtersHidden": [32],
     "comment": [32],

package/dist/components/gx-ide-team-dev-update-partial-selection.js

@@ -16,7 +16,7 @@ import { d as defineCustomElement$4 } from './gxg-grid2.js';
 import { d as defineCustomElement$3 } from './icon2.js';
 import { d as defineCustomElement$2 } from './title.js';
 
-const teamDevUpdatePartialSelectionCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-object-selector--shadow){border:none;box-shadow:var(--box-shadow-01)}.top-actions{display:flex;align-items:center;justify-content:flex-end}.actions{grid-template-columns:repeat(2, 1fr)}.actions>*{display:flex;flex-direction:row;gap:var(--gx-ide-grid-row-gap)}.actions>*:nth-child(2){justify-content:flex-end}";
+const teamDevUpdatePartialSelectionCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-object-selector--shadow){border:none;box-shadow:var(--box-shadow-01)}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--gx-ide-grid-row-gap)}.actions{grid-template-columns:repeat(2, 1fr)}.actions>*{display:flex;flex-direction:row;gap:var(--gx-ide-grid-row-gap)}.actions>*:nth-child(2){justify-content:flex-end}";
 
 const GxIdeTeamDevUpdatePartialSelection$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -25,41 +25,36 @@ const GxIdeTeamDevUpdatePartialSelection$1 = /*@__PURE__*/ proxyCustomElement(cl
     this.__attachShadow();
     this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
     // 9.LOCAL METHODS //
-    this.handleKeyDownEvent = (add) => {
-      if (add) {
-        document.addEventListener("keydown", this.keyDownEventHandler);
-      }
-      else {
-        document.removeEventListener("keydown", this.keyDownEventHandler);
-      }
-    };
-    this.keyDownEventHandler = (e) => {
-      console.log(e.detail);
-    };
     this.renderObjects = () => {
-      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-objects" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", settingable: false, sortable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedOn, settingable: false })), this.selection.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${obj.modifiedOn.toISOString().slice(0, 10)}`)))))));
+      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-objects" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", settingable: false, sortable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedOn, settingable: false })), this.selection.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon, color: "auto" })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${obj.modifiedOn.toISOString().slice(0, 10)}`)))))));
     };
-    this.getObjects = () => {
+    this.getObjectsHandler = () => {
       this.addCallback().then((items) => {
         if ((items === null || items === void 0 ? void 0 : items.length) > 0) {
           this.selection = [...this.selection, ...items];
           this.selectedObjectsIds = [];
-          this.deselectAll();
+          this.deselectAllHandler();
         }
       });
     };
-    this.removeObjects = () => {
+    this.removeObjectsHandler = () => {
       this.selection = this.selection.filter(item => !this.selectedObjectsIds.includes(item.id));
       this.selectedObjectsIds = [];
-      this.deselectAll();
+      this.deselectAllHandler();
     };
-    this.confirm = () => {
-      this.confirmCallback(this.selectedObjectsIds);
+    this.confirmHandler = () => {
+      if (this.confirmCallback) {
+        const allRowsIds = [];
+        this.selection.forEach(row => {
+          allRowsIds.push(row.id);
+        });
+        this.confirmCallback(allRowsIds);
+      }
     };
-    this.cancel = () => {
+    this.cancelHandler = () => {
       this.cancelCallback();
     };
-    this.deselectAll = () => {
+    this.deselectAllHandler = () => {
       this.chGridEl.selectAllRows(false);
     };
     this.listenChanges = () => {
@@ -78,21 +73,11 @@ const GxIdeTeamDevUpdatePartialSelection$1 = /*@__PURE__*/ proxyCustomElement(cl
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
     this.componentDidLoadEvent.emit(true);
-    this.handleKeyDownEvent(true);
   }
   componentDidLoad() {
     this.listenChanges();
   }
   // 7.LISTENERS //
-  keyDownHandler(eventInfo) {
-    if (document.activeElement === this.el) {
-      switch (eventInfo.key) {
-        case "Delete":
-          this.removeObjects();
-          break;
-      }
-    }
-  }
   // 8.PUBLIC METHODS API //
   /**
    * Validate necessary data input
@@ -105,7 +90,7 @@ const GxIdeTeamDevUpdatePartialSelection$1 = /*@__PURE__*/ proxyCustomElement(cl
   render() {
     return (h(Host, { class: {
         "gxi-team-dev-update-partial-selection": true
-      } }, h("div", { class: `main-wrapper` }, h("gxg-container", { containerTitle: this._componentLocale.title }, h("div", { class: "top-actions" }, h("gxg-button", { id: "button-add", type: "secondary-icon-only", icon: "gemini-tools/add-circle", onClick: this.getObjects, part: "gxg-button gxg-button--add" }), h("gxg-button", { id: "button-remove", type: "secondary-icon-only", icon: "gemini-tools/minus-circle", onClick: this.removeObjects, part: "gxg-button gxg-button--remove" })), this.renderObjects(), h("gxg-container", { displayBorderTop: true }, h("div", { class: "grid actions" }, h("div", null, h("gxg-button", { id: "button-clear", type: "primary-text-only", onClick: this.deselectAll, part: "gxg-button gxg-button--clear" }, this._componentLocale.footer.btnClear)), h("div", null, h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "gxg-button gxg-button--ok" }, this._componentLocale.footer.btnOk), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel))))))));
+      } }, h("div", { class: `main-wrapper` }, h("gxg-container", { containerTitle: this._componentLocale.title }, h("div", { class: "top-actions" }, h("gxg-button", { id: "button-add", type: "outlined", onClick: this.getObjectsHandler, part: "add" }, this._componentLocale.addObject), h("gxg-button", { id: "button-remove", type: "outlined", onClick: this.removeObjectsHandler, part: "remove", disabled: !(this.selectedObjectsIds.length > 0) }, this._componentLocale.removeObject)), this.renderObjects(), h("gxg-container", { displayBorderTop: true }, h("div", { class: "grid actions" }, h("div", null, h("gxg-button", { id: "button-clear", type: "outlined", onClick: this.deselectAllHandler, part: "clear", disabled: !(this.selectedObjectsIds.length > 0) }, this._componentLocale.footer.btnDeselectAll)), h("div", null, h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirmHandler, part: "confirm" }, this._componentLocale.footer.btnConfirm), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelHandler, part: "cancel" }, this._componentLocale.footer.btnCancel))))))));
   }
   static get assetsDirs() { return ["gx-ide-assets/team-dev-update-partial-selection"]; }
   get el() { return this; }
@@ -117,7 +102,7 @@ const GxIdeTeamDevUpdatePartialSelection$1 = /*@__PURE__*/ proxyCustomElement(cl
     "selection": [1040],
     "selectedObjectsIds": [32],
     "validate": [64]
-  }, [[1, "keydown", "keyDownHandler"]]]);
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/gx-ide-team-dev-update-to-revision.js

@@ -20,6 +20,14 @@ const GxIdeTeamDevUpdateToRevision$1 = /*@__PURE__*/ proxyCustomElement(class ex
     this.__attachShadow();
     this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
     // 9.LOCAL METHODS //
+    this.setInitialCheckedRadio = () => {
+      if (this.currentRevision === undefined) {
+        this.updateToLatestEl.checked = true;
+      }
+      else {
+        this.updateToRevisionEl.checked = true;
+      }
+    };
     this.confirm = () => {
       let revision = undefined;
       if (this.updateToRevisionEl.checked) {
@@ -30,13 +38,20 @@ const GxIdeTeamDevUpdateToRevision$1 = /*@__PURE__*/ proxyCustomElement(class ex
     this.cancel = () => {
       this.cancelCallback();
     };
+    this.updateToRevisionOnFocusHandler = () => {
+      this.updateToRevisionEl.checked = true;
+    };
     this.cancelCallback = undefined;
     this.confirmCallback = undefined;
+    this.currentRevision = undefined;
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidLoad() {
     this.componentDidLoadEvent.emit(true);
+    this.setInitialCheckedRadio();
   }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
@@ -51,7 +66,7 @@ const GxIdeTeamDevUpdateToRevision$1 = /*@__PURE__*/ proxyCustomElement(class ex
   render() {
     return (h(Host, { class: {
         "gxi-team-dev-update-to-revision": true
-      } }, h("div", { class: `main-wrapper` }, h("gxg-container", null, h("gxg-form-radio-group", null, h("gxg-form-radio", { label: this._componentLocale.options.updateToLatest, value: "updateToLatest", part: "radio-to-latest" }), h("div", { class: "revision-number" }, h("gxg-form-radio", { label: this._componentLocale.options.updateToRevision, value: "updateToRevision", ref: (el) => (this.updateToRevisionEl = el), part: "radio-to-revision" }), h("gxg-form-text", { ref: (el) => (this.revisionNumberEl = el), part: "revision-number" })))), h("gxg-container", { displayBorderTop: true }, h("div", { class: "actions" }, h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "gxg-button gxg-button--ok" }, this._componentLocale.footer.btnOk), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel))))));
+      } }, h("div", { class: `main-wrapper` }, h("gxg-container", null, h("gxg-form-radio-group", null, h("gxg-form-radio", { label: this._componentLocale.options.updateToLatest, value: "updateToLatest", ref: (el) => (this.updateToLatestEl = el), part: "radio-to-latest" }), h("div", { class: "revision-number" }, h("gxg-form-radio", { label: this._componentLocale.options.updateToRevision, value: "updateToRevision", ref: (el) => (this.updateToRevisionEl = el), part: "radio-to-revision" }), h("gxg-form-text", { ref: (el) => (this.revisionNumberEl = el), onFocus: this.updateToRevisionOnFocusHandler, value: this.currentRevision, part: "revision-number" })))), h("gxg-container", { displayBorderTop: true }, h("div", { class: "actions" }, h("gxg-button", { id: "button-ok", type: "primary-text-only", onClick: this.confirm, part: "update" }, this._componentLocale.footer.btnUpdate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancel, part: "cancel" }, this._componentLocale.footer.btnCancel))))));
   }
   static get assetsDirs() { return ["gx-ide-assets/team-dev-update-to-revision"]; }
   get el() { return this; }
@@ -59,6 +74,7 @@ const GxIdeTeamDevUpdateToRevision$1 = /*@__PURE__*/ proxyCustomElement(class ex
 }, [1, "gx-ide-team-dev-update-to-revision", {
     "cancelCallback": [16],
     "confirmCallback": [16],
+    "currentRevision": [1, "current-revision"],
     "validate": [64]
   }]);
 function defineCustomElement$1() {

package/dist/components/gx-ide-team-dev-update.js

@@ -39,9 +39,35 @@ const GxIdeTeamDevUpdate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
     this.loadDataCalledFirstTime = false; // pending for update grid checkboxes, should be checked, after loadData has loaded objects for the first time.
     // 9.LOCAL METHODS //
+    this.onRowContextMenuHandler = (grid) => async (ev) => {
+      if (this.objectsContextMenuCallback) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        let selection = [];
+        if (grid === "pending") {
+          selection = await this.chGridPendingForUpdateEl.getSelectedRows();
+        }
+        else if (grid === "ignored") {
+          selection = await this.chGridIgnoredObjectsEl.getSelectedRows();
+        }
+        else if (grid === "results") {
+          selection = await this.chGridResultsEl.getSelectedRows();
+        }
+        await this.objectsContextMenuCallback(grid, {
+          selection: selection,
+          clientX: ev.detail.clientX,
+          clientY: ev.detail.clientY
+        });
+      }
+    };
     this.markAllPendingToUpdateRows = () => {
       this.chGridPendingForUpdateEl.markAllRows();
     };
+    this.gridOnSelectionChangedCallbackHandler = (grid) => async (ev) => {
+      if (this.selectCallback) {
+        await this.selectCallback(grid, ev.detail.rowsId);
+      }
+    };
     this.renderOptions = () => {
       return (h("gxg-container", { part: "options-container" }, h("div", { class: "grid options-grid" }, h("gxg-container", { displayBorder: true, part: "options-update-from", containerTitle: this._componentLocale.options.updateFrom }, h("div", { class: "grid options-update-from-grid" }, h("gxg-text", { type: "text-regular" }, this._componentLocale.options.updateFrom, ":"), h("gxg-text", { type: "text-link", onClick: this.openServerCallback }, this.updateFrom ? this.updateFrom.serverUrl : ""), h("gxg-text", { type: "text-regular" }, this._componentLocale.options.knowledgeBase, ":"), h("gxg-text", { type: "text-regular" }, this.updateFrom ? this.updateFrom.kbName : ""), h("gxg-text", { type: "text-regular" }, this._componentLocale.options.version, ":"), h("gxg-text", { type: "text-regular" }, this.updateFrom ? this.updateFrom.versionName : ""), h("gxg-text", { type: "text-regular" }, this._componentLocale.options.lastFullUpdate, ":"), h("gxg-text", { type: "text-regular" }, this.updateFrom
         ? formatDate(this.updateFrom.lastFullUpdate)
@@ -60,13 +86,13 @@ const GxIdeTeamDevUpdate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       return (h("gxg-container", { part: "data-container" }, h("gxg-tabs", { id: "dataTabs", part: "data-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container" }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabs.pendingForUpdate, tab: "pendingForUpdate", key: "pendingForUpdate", isSelected: true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabs.ignoredObjects, tab: "ignoredObjects", key: "ignoredObjects" }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabs.results, tab: "results", key: "results", ref: (el) => (this.gxgTabButtonResultsEl = el) })), h("gxg-tab", { tab: "pendingForUpdate", key: "pendingForUpdate", isSelected: true }, this.renderPendingForUpdate()), h("gxg-tab", { tab: "ignoredObjects", key: "ignoredObjects" }, this.renderIgnoredObjects()), h("gxg-tab", { tab: "results", key: "results" }, this.renderResults()))));
     };
     this.renderPendingForUpdate = () => {
-      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "none", ref: (el) => (this.chGridPendingForUpdateEl = el), part: "ch-grid-pending-for-updates", class: "no-border" }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, sortable: false, "column-type": "rich", richRowSelector: true, richRowSelectorMode: "mark" }), h("ch-grid-column", { settingable: false, sortable: false }), h("ch-grid-column", { settingable: false, sortable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedOn, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.status, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.action, settingable: false })), this.updateData.pendingForUpdate.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", { "cell-type": "rich", "row-selector": true }), h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon })), h("ch-grid-cell", null, " ", this.renderIconState(obj.state), " "), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${formatDate(obj.modifiedOn)}`), h("ch-grid-cell", null, " ", obj.status, " "), h("ch-grid-cell", null, " ", obj.action, " ")))))));
+      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridPendingForUpdateEl = el), part: "ch-grid-pending-for-updates", class: "no-border", onRowContextMenu: this.onRowContextMenuHandler("pending"), onSelectionChanged: this.gridOnSelectionChangedCallbackHandler("pending") }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, sortable: false, "column-type": "rich", richRowSelector: true, richRowSelectorMode: "mark" }), h("ch-grid-column", { settingable: false, sortable: false }), h("ch-grid-column", { settingable: false, sortable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedOn, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.status, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.action, settingable: false })), this.updateData.pendingForUpdate.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", { "cell-type": "rich", "row-selector": true }), h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon, color: "auto" })), h("ch-grid-cell", null, " ", this.renderIconState(obj.state), " "), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, `${formatDate(obj.modifiedOn)}`), h("ch-grid-cell", null, " ", obj.status, " "), h("ch-grid-cell", null, " ", obj.action, " ")))))));
     };
     this.renderIgnoredObjects = () => {
-      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridIgnoredObjectsEl = el), part: "ch-grid-ignored-objects", class: "no-border" }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, sortable: false, size: "min-content" }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false, size: "1fr" }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false, size: "1fr" })), this.updateData.ignoredObjects.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " ")))))));
+      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridIgnoredObjectsEl = el), part: "ch-grid-ignored-objects", class: "no-border", onRowContextMenu: this.onRowContextMenuHandler("ignored"), onSelectionChanged: this.gridOnSelectionChangedCallbackHandler("ignored") }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, sortable: false, size: "min-content" }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false, size: "1fr" }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false, size: "1fr" })), this.updateData.ignoredObjects.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon, color: "auto" })), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " ")))))));
     };
     this.renderResults = () => {
-      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridResultsEl = el), part: "ch-grid-results", class: "no-border" }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, sortable: false, "column-type": "tree" }), h("ch-grid-column", { settingable: false, sortable: false }), h("ch-grid-column", { settingable: false, sortable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.notes, settingable: false })), this.updateResultData.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, " ", this.renderIconResult(obj.result), " "), h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon })), h("ch-grid-cell", null, " ", this.renderIconState(obj.state), " "), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, " ", obj.notes, " "), h("ch-grid-rowset", null, obj.messages.map(msg => {
+      return (h("gxg-grid", null, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridResultsEl = el), part: "ch-grid-results", class: "no-border", onRowContextMenu: this.onRowContextMenuHandler("results"), onSelectionChanged: this.gridOnSelectionChangedCallbackHandler("results") }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, sortable: false, "column-type": "tree" }), h("ch-grid-column", { settingable: false, sortable: false }), h("ch-grid-column", { settingable: false, sortable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.type, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, settingable: false }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.notes, settingable: false })), this.updateResultData.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, " ", this.renderIconResult(obj.result), " "), h("ch-grid-cell", null, h("gxg-icon", { type: obj.typeIcon, color: "auto" })), h("ch-grid-cell", null, " ", this.renderIconState(obj.state), " "), h("ch-grid-cell", null, " ", obj.name, " "), h("ch-grid-cell", null, " ", obj.type, " "), h("ch-grid-cell", null, " ", obj.description, " "), h("ch-grid-cell", null, " ", obj.notes, " "), h("ch-grid-rowset", null, obj.messages.map(msg => {
         let msgType;
         switch (msg.type) {
           case "info":
@@ -173,38 +199,13 @@ const GxIdeTeamDevUpdate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
         });
       }
     };
-    this.addListeners = async () => {
-      // for pending-for-update grid events
-      if (this.updateData.pendingForUpdate) {
-        this.chGridPendingForUpdateEl.addEventListener("contextmenu", async (ev) => {
-          ev.preventDefault();
-          ev.stopPropagation();
-          const pendingForUpdateMarked = await this.chGridPendingForUpdateEl.getMarkedRows();
-          this.gridContextMenuCallback(pendingForUpdateMarked, "update");
-        });
-      }
-      // for ignored-objects grid events
-      this.chGridIgnoredObjectsEl.addEventListener("contextmenu", async (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const ignoredObjectsSelected = await this.chGridIgnoredObjectsEl.getSelectedRows();
-        this.gridContextMenuCallback(ignoredObjectsSelected, "ignored");
-      });
-      // for results grid events
-      this.chGridResultsEl.addEventListener("contextmenu", async (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const resultsObjectsSelected = await this.chGridResultsEl.getMarkedRows();
-        this.gridContextMenuCallback(resultsObjectsSelected, "results");
-      });
-    };
     this.pendingForUpdatesRowMarkingChangedHandler = async (e) => {
       // remove "rowMarkingChanged" until checkboxes have been added/removed on togglePendingCommitsCheckboxes, to prevent loops.
       this.chGridPendingForUpdateEl.removeEventListener("rowMarkingChanged", this.pendingForUpdatesRowMarkingChangedHandler);
       if (this.chGridPendingForUpdateEl) {
         const addedRowsIds = e.detail.addedRowsId;
         const removedRowsId = e.detail.removedRowsId;
-        const pendingItemCheckedResult = await this.pendingItemCheckedCallback({
+        const pendingItemCheckedResult = await this.pendingItemsCheckedCallback({
           itemsChecked: addedRowsIds,
           itemsUnchecked: removedRowsId
         });
@@ -258,8 +259,10 @@ const GxIdeTeamDevUpdate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.loadCallback = undefined;
     this.objectsScopeCallback = undefined;
     this.openServerCallback = undefined;
-    this.pendingItemCheckedCallback = undefined;
+    this.pendingItemsCheckedCallback = undefined;
     this.revisionScopeCallback = undefined;
+    this.objectsContextMenuCallback = undefined;
+    this.selectCallback = undefined;
     this.types = undefined;
     this.updateCallback = undefined;
     this.updateFrom = undefined;
@@ -271,7 +274,6 @@ const GxIdeTeamDevUpdate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   }
   async componentDidLoad() {
     await this.loadData();
-    this.addListeners();
   }
   async componentDidRender() {
     if (this.loadDataCalledFirstTime) {
@@ -304,8 +306,10 @@ const GxIdeTeamDevUpdate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     "loadCallback": [16],
     "objectsScopeCallback": [16],
     "openServerCallback": [16],
-    "pendingItemCheckedCallback": [16],
+    "pendingItemsCheckedCallback": [16],
     "revisionScopeCallback": [16],
+    "objectsContextMenuCallback": [16],
+    "selectCallback": [16],
     "types": [16],
     "updateCallback": [16],
     "updateFrom": [16],

package/dist/components/gxg-date-picker.js

@@ -77,9 +77,9 @@ const GxgDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       }
     }
     //default date
-    const valueYear = value.getFullYear();
-    const valueMonth = value.getMonth();
-    const valueDay = value.getDate();
+    value.getFullYear();
+    value.getMonth();
+    value.getDate();
     //min date
     const minDate = this.minDate ? new Date(this.minDate) : undefined;
     const minDateYear = minDate === null || minDate === void 0 ? void 0 : minDate.getFullYear();
@@ -144,7 +144,7 @@ const GxgDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       overlayPlaceholder: "Enter a 4-digit year",
       // Settings.
       alwaysShow: this.alwaysShow,
-      dateSelected: new Date(valueYear, valueMonth, valueDay),
+      //dateSelected: new Date(valueYear, valueMonth, valueDay),
       maxDate: maxDate && new Date(maxDateYear, maxDateMonth, maxDateDay),
       minDate: minDate && new Date(minDateYear, minDateMonth, minDateDay),
       startDate: this.value,

package/dist/components/tree-x-list-item.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, writeTask, Host } from
 import { m as mouseEventModifierKey } from './helpers.js';
 import { d as defineCustomElement$1 } from './checkbox.js';
 
-const treeXListItemCss = ":where(button){all:unset;display:flex;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:12px;--tab-width:calc(\n    var(--checkbox-size) + var(--expandable-button-width) +\n      (5px * 2)\n  );display:grid;grid-template-rows:min-content}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--expandable-button-width) + 5px\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:var(--inset-inline-start);height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - 4px );border:0 dashed #a9a9a9;border-block-end-width:1px;pointer-events:none;content-visibility:hidden;contain-intrinsic-size:auto 100px}.last-dashed-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px;pointer-events:none}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em}.left-img{grid-area:left-img;margin-inline-end:6px}.right-img{grid-area:right-img;margin-inline-start:6px}.edit-name{grid-area:text;width:100%;height:100%;background-color:unset;padding:0;margin:0;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
+const treeXListItemCss = ":where(button){all:unset;display:flex;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-user-drag:element}*,::before,::after{box-sizing:border-box}:host{--checkbox-size:1em;--expandable-button-width:0.75em;--ch-tree-x-list-item-dashed-line--offset:0px;--tab-width:calc(\n    var(--checkbox-size) + var(--expandable-button-width) +\n      (5px * 2)\n  );display:grid;grid-template-rows:min-content;overflow:hidden}.header{--own-offset:0px;display:flex;align-items:center;min-height:calc(1em + 6px);padding-inline-start:var(--padding-inline-start)}.header--disabled{opacity:0.5;pointer-events:none}.header--even{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even+.expandable{--parent-padding-inline-start--even:calc(\n    var(--parent-padding-inline-start--odd, 0px) + var(--tab-width)\n  )}.header--even .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--odd, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--even-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--even-expandable+.expandable{--parent-padding-inline-start--even:calc(\n        var(--parent-padding-inline-start--odd, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd{--padding-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd+.expandable{--parent-padding-inline-start--odd:calc(\n    var(--parent-padding-inline-start--even, 0px) + var(--tab-width)\n  )}.header--odd .dashed-line{--inset-inline-start:calc(\n    var(--parent-padding-inline-start--even, 0px) +\n      var(--parent-checkbox-offset) + var(--parent-expandable-offset)\n  )}.header--odd-expandable{--padding-inline-start:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--odd-expandable+.expandable{--parent-padding-inline-start--odd:calc(\n        var(--parent-padding-inline-start--even, 0px) + var(--tab-width) - calc(\n    var(--expandable-button-width) + 5px\n  )\n      )}.header--level-0{--padding-inline-start:0px}.header--level-0+.expandable{--parent-padding-inline-start--even:0px}.header--expandable-offset{--own-offset:calc(\n    var(--expandable-button-width) + 5px\n  )}.header--expandable-offset+.expandable{--parent-expandable-offset:calc(var(--expandable-button-width) / 2)}.header--checkbox-offset+.expandable{--parent-checkbox-offset:calc(var(--checkbox-size) / 2);--parent-negative-checkbox-offset:calc(var(--checkbox-size) / 2)}.dashed-line{position:absolute;inset-inline-start:calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );height:1px;width:calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );border:0 dashed #a9a9a9;border-block-end-width:1px;pointer-events:none;content-visibility:hidden;z-index:1}.last-all-line{inset-block-start:0;height:calc(100% - var(--distance-to-checkbox));border-inline-start-width:1px;border-end-start-radius:2px}.last-line{inset-block-start:0;height:100%;border-inline-start-width:1px;border-style:solid;border-block-end:unset}.expandable-button{display:grid;place-items:center;width:var(--expandable-button-width);height:var(--expandable-button-width);margin-inline-end:5px;z-index:1;content-visibility:auto;contain-intrinsic-size:auto var(--expandable-button-width)}.expandable-button::before{content:\"\";width:calc(100% - 2px);height:calc(100% - 2px);background-color:currentColor;-webkit-mask-size:calc(var(--expandable-button-width) - 2px)}.expandable-button--collapsed::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H8.54v5.61h-1V8.5H1.93v-1H7.54V1.89h1V7.5h5.61Z\"/></svg>')}.expandable-button--expanded::before{-webkit-mask-image:url('data:image/svg+xml,<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.15,8.5H1.93v-1H14.15Z\"/></svg>')}.expandable-button:focus-visible{outline:1px solid #000}.checkbox{margin-inline-end:5px}.checkbox::part(container){width:var(--checkbox-size);height:var(--checkbox-size)}.action{display:grid;grid-template:\"left-img text right-img\"/max-content 1fr max-content;align-items:center;height:100%;flex:1}.readonly-mode{padding-block:0.75px}.left-img,.right-img{display:block;width:0.875em;height:0.875em;content-visibility:auto;contain-intrinsic-size:auto 0.875em}.left-img{grid-area:left-img;margin-inline-end:5px}.right-img{grid-area:right-img;margin-inline-start:5px}.edit-name{grid-area:text;width:100%;height:100%;background-color:unset;padding:0;margin:0;border:1px solid currentColor;font:unset;outline:unset}.downloading{width:0.75em;height:0.75em;margin-inline-start:8px;border:2px solid currentColor;border-inline-start-color:transparent;border-radius:50%;opacity:0.75;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.expandable{--parent-expandable-offset:0px;--parent-negative-checkbox-offset:0px;--parent-checkbox-offset:0px;display:grid;grid-template-rows:0fr;content-visibility:auto;contain-intrinsic-size:auto 100px}.expanded{grid-template-rows:1fr}:not(.expanded) ::slotted([slot=tree]){display:none;overflow:hidden;content-visibility:hidden}";
 
 const resetDragImage = new Image();
 // Selectors
@@ -26,7 +26,6 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.checkboxChange = createEvent(this, "checkboxChange", 7);
     this.itemDragStart = createEvent(this, "itemDragStart", 7);
     this.itemDragEnd = createEvent(this, "itemDragEnd", 7);
-    this.itemDrop = createEvent(this, "itemDrop", 7);
     this.loadLazyContent = createEvent(this, "loadLazyContent", 7);
     this.modifyCaption = createEvent(this, "modifyCaption", 7);
     this.selectedItemChange = createEvent(this, "selectedItemChange", 7);
@@ -43,6 +42,11 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
      * Only works if `checkbox = true`
      */
     this.checked = false;
+    /**
+     * Set this attribute if you want to set a custom render for the control, by
+     * passing a slot.
+     */
+    this.customRender = false;
     /**
      * This attribute lets you specify if the element is disabled.
      * If disabled, it will not fire any user interaction related event
@@ -108,7 +112,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
      * `true` to display the relation between tree items and tree lists using
      * lines.
      */
-    this.showLines = true;
+    this.showLines = "none";
     /**
      * Set this attribute if you want all the children item's checkboxes to be
      * checked when the parent item checkbox is checked, or to be unchecked when
@@ -165,6 +169,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         goToReference: false,
         id: this.el.id,
         itemRef: this.el,
+        metadata: this.metadata,
         parentId: this.el.parentElement.parentElement.id,
         selected: true
       });
@@ -217,14 +222,14 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     };
     this.renderImg = (cssClass, src) => (h("img", { "aria-hidden": "true", class: cssClass, part: cssClass, alt: "", src: src, loading: "lazy" }));
     this.handleDragStart = (event) => {
-      event.stopPropagation();
       // Disallow drag when editing the caption
       if (this.editing) {
         event.preventDefault();
         return;
       }
+      // Remove drag image
       event.dataTransfer.setDragImage(resetDragImage, 0, 0);
-      // this.el.style.cursor = "move";
+      event.dataTransfer.effectAllowed = "move";
       this.dragState = "start";
       this.itemDragStart.emit({
         elem: this.el,
@@ -237,13 +242,8 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       this.dragState = "none";
       this.itemDragEnd.emit();
     };
-    this.handleDrop = (event) => {
-      event.stopPropagation();
+    this.handleDrop = () => {
       this.dragState = "none";
-      this.itemDrop.emit({
-        dropItemId: this.el.id,
-        dataTransfer: event.dataTransfer
-      });
     };
   }
   updateChildrenCheckedValue(newValue) {
@@ -446,6 +446,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       goToReference: false,
       id: this.el.id,
       itemRef: this.el,
+      metadata: this.metadata,
       parentId: this.el.parentElement.parentElement.id,
       selected: selected
     });
@@ -458,6 +459,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       goToReference: goToReference,
       id: this.el.id,
       itemRef: this.el,
+      metadata: this.metadata,
       parentId: this.el.parentElement.parentElement.id,
       selected: true
     });
@@ -508,11 +510,13 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     const expandableButtonNotVisible = !this.leaf && !this.showExpandableButton;
     const acceptDrop = !this.leaf && this.dragState !== "start";
     const hasContent = !this.leaf && !this.lazyLoad;
+    const showAllLines = this.showLines === "all" && this.level !== 0;
+    const showLastLine = this.showLines === "last" && this.level !== 0 && this.lastItem;
     return (h(Host, { role: "treeitem", "aria-selected": this.selected ? "true" : null, class: {
         [TREE_ITEM_TAG_NAME + "--downloading"]: this.downloading,
         [TREE_ITEM_TAG_NAME + "--editing"]: this.editing,
         [TREE_ITEM_TAG_NAME + "--drag-" + this.dragState]: this.dragState !== "none" && this.dragState !== "start",
-        [TREE_ITEM_TAG_NAME + "--accept-drop"]: acceptDrop
+        [TREE_ITEM_TAG_NAME + "--deny-drop"]: this.leaf
       }, style: { "--level": `${this.level}` },
       // Drag and drop
       onDrop: acceptDrop ? this.handleDrop : null }, h("button", { "aria-controls": hasContent ? EXPANDABLE_ID : null, "aria-expanded": hasContent ? this.expanded.toString() : null, class: {
@@ -532,10 +536,18 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         "expandable-button": true,
         "expandable-button--expanded": this.expanded,
         "expandable-button--collapsed": !this.expanded
-      }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: this.handleCheckedChange })), h("div", { class: {
-        action: true,
-        "readonly-mode": !this.editing
-      }, onDblClick: !this.leaf ? this.handleActionDblClick : null }, this.leftImgSrc && this.renderImg("left-img", this.leftImgSrc), this.editing ? (h("input", { class: "edit-name", part: "edit-name", disabled: this.disabled, type: "text", value: this.caption, onBlur: this.removeEditMode(false), onKeyDown: this.checkIfShouldRemoveEditMode, ref: el => (this.inputRef = el) })) : (this.caption), this.rightImgSrc && this.renderImg("right-img", this.rightImgSrc)), this.showDownloadingSpinner && !this.leaf && this.downloading && (h("div", { class: "downloading", part: "downloading" })), this.showLines && this.level !== 0 && (h("div", { class: { "dashed-line": true, "last-dashed-line": this.lastItem }, part: `dashed-line${this.lastItem ? " last-dashed-line" : ""}` }))), hasContent && (h("div", { "aria-busy": this.downloading.toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: { expandable: true, expanded: this.expanded }, part: `expandable${this.expanded ? " expanded" : ""}` }, h("slot", { name: "tree" })))));
+      }, part: `expandable-button${this.disabled ? " disabled" : ""}${this.expanded ? " expanded" : " collapsed"}`, disabled: this.disabled, onClick: this.toggleExpand })), this.checkbox && (h("ch-checkbox", { accessibleName: this.caption, class: "checkbox", part: `checkbox${this.disabled ? " disabled" : ""}${this.checked ? " checked" : ""}${this.indeterminate ? " indeterminate" : ""}`, checkedValue: "true", disabled: this.disabled, indeterminate: this.indeterminate, unCheckedValue: "false", value: `${this.checked}`, onInput: this.handleCheckedChange })), this.customRender ? (h("slot", { name: "custom-content" })) : ([
+      h("div", { class: {
+          action: true,
+          "readonly-mode": !this.editing
+        }, part: `action ${!this.editing ? "readonly-mode" : ""}`, onDblClick: !this.leaf && !this.editing ? this.handleActionDblClick : null }, this.leftImgSrc && this.renderImg("left-img", this.leftImgSrc), this.editing ? (h("input", { class: "edit-name", part: "edit-name", disabled: this.disabled, type: "text", value: this.caption, onBlur: this.removeEditMode(false), onKeyDown: this.checkIfShouldRemoveEditMode, ref: el => (this.inputRef = el) })) : (this.caption), this.rightImgSrc &&
+        this.renderImg("right-img", this.rightImgSrc)),
+      this.showDownloadingSpinner && !this.leaf && this.downloading && (h("div", { class: "downloading", part: "downloading" }))
+    ]), (showAllLines || showLastLine) && (h("div", { class: {
+        "dashed-line": true,
+        "last-all-line": showAllLines && this.lastItem,
+        "last-line": showLastLine
+      }, part: `dashed-line${this.lastItem ? " last-all-line" : ""}` }))), hasContent && (h("div", { "aria-busy": this.downloading.toString(), "aria-live": this.downloading ? "polite" : null, id: EXPANDABLE_ID, class: { expandable: true, expanded: this.expanded }, part: `expandable${this.expanded ? " expanded" : ""}` }, h("slot", { name: "tree" })))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -550,6 +562,7 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "caption": [1],
     "checkbox": [4],
     "checked": [1540],
+    "customRender": [4, "custom-render"],
     "disabled": [516],
     "dragState": [1025, "drag-state"],
     "downloading": [4],
@@ -561,11 +574,12 @@ const ChTreeXListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "leftImgSrc": [1, "left-img-src"],
     "level": [1026],
     "indeterminate": [1028],
+    "metadata": [1],
     "rightImgSrc": [1, "right-img-src"],
     "selected": [1540],
     "showDownloadingSpinner": [4, "show-downloading-spinner"],
     "showExpandableButton": [4, "show-expandable-button"],
-    "showLines": [1028, "show-lines"],
+    "showLines": [1025, "show-lines"],
     "toggleCheckboxes": [4, "toggle-checkboxes"],
     "focusNextItem": [64],
     "focusNextSibling": [64],

package/dist/components/tree-x-list.js

@@ -19,8 +19,13 @@ const ChTreeListX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * `true` to display the relation between tree items and tree lists using
      * lines.
      */
-    this.showLines = true;
+    this.showLines = "none";
     this.updateLastItemDashedLine = () => {
+      // @todo WA to avoid StencilJS' bug. The showLines Watch is dispatched
+      // before the componentDidLoad lifecycle method completes
+      if (!this.slotRef) {
+        return;
+      }
       const treeItems = this.slotRef.assignedElements();
       if (treeItems.length === 0) {
         return;
@@ -34,7 +39,7 @@ const ChTreeListX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   handleShowLinesChange(newValue) {
     // Displayed items may have changed since the last time that `showLines === true`
-    if (newValue) {
+    if (newValue !== "none" && this.level !== 0) {
       this.updateLastItemDashedLine();
     }
   }
@@ -51,7 +56,7 @@ const ChTreeListX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.showLines = mainTreeRef.showLines;
   }
   render() {
-    return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", { onSlotchange: this.showLines && this.level !== 0
+    return (h(Host, { role: this.level === 0 ? "tree" : "group" }, h("slot", { onSlotchange: this.showLines !== "none" && this.level !== 0
         ? this.updateLastItemDashedLine
         : null, ref: el => (this.slotRef = el) })));
   }
@@ -62,7 +67,7 @@ const ChTreeListX = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return treeXListCss; }
 }, [1, "ch-tree-x-list", {
     "level": [1026],
-    "showLines": [1028, "show-lines"]
+    "showLines": [1025, "show-lines"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {