@genexus/genexus-ide-ui 1.1.71 → 1.1.72

package/dist/genexus-ide-ui/{p-8897c6de.entry.js → p-2d6228e8.entry.js}

@@ -1,4 +1,4 @@
-import { r as t, g as e, h as s, H as i, a as n } from "./p-9b9ccd0c.js";
+import { r as t, g as e, h as i, H as s, a as n } from "./p-9b9ccd0c.js";
 
 import { g as o } from "./p-d42e842b.js";
 
@@ -10,27 +10,27 @@ import "lit/directives/when.js";
 
 import "lit/directives/if-defined.js";
 
-import { L as r } from "./p-311eedf3.js";
+import { L as a } from "./p-311eedf3.js";
 
-const a = o({
+const r = o({
   category: "system",
   name: "check-circle",
   colorType: "primary"
 });
 
 const convertItemsNodeListToFlattenedTreeViewModel = (t, e) => {
-  const s = [];
+  const i = [];
   const processNode = t => {
-    var i;
-    const n = t.active && !t.iconStart ? a : t.iconStart;
-    const o = !((i = t.nodes) === null || i === void 0 ? void 0 : i.length);
-    const r = e === "all" || e === "custom" && t.checkbox || e === "leaf" && o;
+    var s;
+    const n = t.active && !t.iconStart ? r : t.iconStart;
+    const o = !((s = t.nodes) === null || s === void 0 ? void 0 : s.length);
+    const a = e === "all" || e === "custom" && t.checkbox || e === "leaf" && o;
     const c = JSON.stringify({
       versionType: t.type
     });
-    s.push({
+    i.push({
       caption: t.name,
-      checkbox: r,
+      checkbox: a,
       checked: t.checked,
       startImgSrc: n,
       endImgSrc: t.iconEnd,
@@ -48,16 +48,16 @@ const convertItemsNodeListToFlattenedTreeViewModel = (t, e) => {
     }
   };
   t.forEach((t => processNode(t)));
-  return s;
+  return i;
 };
 
 const convertItemsListToTreeViewModel = (t, e) => {
-  const s = [];
+  const i = [];
   t.forEach((t => {
-    var i;
-    const n = t.active && !t.iconStart ? a : t.iconStart;
-    const o = !((i = t.nodes) === null || i === void 0 ? void 0 : i.length);
-    const r = e === "all" || e === "custom" && t.checkbox || e === "leaf" && o;
+    var s;
+    const n = t.active && !t.iconStart ? r : t.iconStart;
+    const o = !((s = t.nodes) === null || s === void 0 ? void 0 : s.length);
+    const a = e === "all" || e === "custom" && t.checkbox || e === "leaf" && o;
     const c = t.expanded;
     const h = n;
     const l = t.iconEnd;
@@ -65,9 +65,9 @@ const convertItemsListToTreeViewModel = (t, e) => {
       versionType: t.type
     });
     const f = parseInt(t.id);
-    s.push({
+    i.push({
       caption: t.name,
-      checkbox: r,
+      checkbox: a,
       checked: t.checked,
       startImgSrc: h,
       endImgSrc: l,
@@ -81,7 +81,7 @@ const convertItemsListToTreeViewModel = (t, e) => {
       selected: t.selected
     });
   }));
-  return s;
+  return i;
 };
 
 const findItemNode = (t, e) => {
@@ -89,8 +89,8 @@ const findItemNode = (t, e) => {
     return e;
   }
   if (e.nodes) {
-    for (const s of e.nodes) {
-      const e = findItemNode(t, s);
+    for (const i of e.nodes) {
+      const e = findItemNode(t, i);
       if (e) {
         return e;
       }
@@ -100,8 +100,8 @@ const findItemNode = (t, e) => {
 };
 
 function findItemInArray(t, e) {
-  for (const s of t) {
-    const t = findItemNode(e, s);
+  for (const i of t) {
+    const t = findItemNode(e, i);
     if (t) {
       return t;
     }
@@ -135,9 +135,9 @@ const unselectAllNodes = t => {
 const checkItems = (t, e) => {
   setAllLeafsCheckedFalse(t);
   e.forEach((e => {
-    const s = findItemInArray(t, e);
-    if (s) {
-      s.checked = true;
+    const i = findItemInArray(t, e);
+    if (i) {
+      i.checked = true;
     }
   }));
   return t;
@@ -145,9 +145,9 @@ const checkItems = (t, e) => {
 
 const expandItems = (t, e) => {
   e.forEach((e => {
-    const s = findItemInArray(t, e);
-    if (s) {
-      s.expanded = true;
+    const i = findItemInArray(t, e);
+    if (i) {
+      i.expanded = true;
     }
   }));
   return t;
@@ -155,27 +155,27 @@ const expandItems = (t, e) => {
 
 const selectItems = (t, e) => {
   e.forEach((e => {
-    const s = findItemInArray(t, e);
-    if (s) {
-      s.selected = true;
+    const i = findItemInArray(t, e);
+    if (i) {
+      i.selected = true;
     }
   }));
   return t;
 };
 
 function searchInNode(t, e) {
-  var s;
+  var i;
   // If the current node is the searched node, we return an empty list (it has no parents in this branch)
     if (t.id === e) {
     return [];
   }
   // We traverse each child looking for the target node
-    if ((s = t.nodes) === null || s === void 0 ? void 0 : s.length) {
-    for (const s of t.nodes) {
-      const i = searchInNode(s, e);
-      if (i !== null) {
+    if ((i = t.nodes) === null || i === void 0 ? void 0 : i.length) {
+    for (const i of t.nodes) {
+      const s = searchInNode(i, e);
+      if (s !== null) {
         // If we find it, we include the current node at the beginning of the path and return
-        return [ t.id, ...i ];
+        return [ t.id, ...s ];
       }
     }
   }
@@ -183,18 +183,18 @@ function searchInNode(t, e) {
 }
 
 const searchParentsItems = (t, e) => {
-  const s = [];
-  for (const i of e) {
+  const i = [];
+  for (const s of e) {
     for (const e of t) {
-      const t = searchInNode(e, i);
+      const t = searchInNode(e, s);
       if (t !== null) {
         t.forEach((t => {
-          s.push(t);
+          i.push(t);
         }));
       }
     }
   }
-  return s;
+  return i;
 };
 
 /**
@@ -209,20 +209,20 @@ const searchParentsItems = (t, e) => {
       return null;
     }
     // Iterate through each node in the array
-        for (const s of t) {
+        for (const i of t) {
       // Create a new path that includes the current node
-      const t = [ ...e, s.id ];
+      const t = [ ...e, i.id ];
       // Check if the current node is active
-            if (s.active === true) {
+            if (i.active === true) {
         return {
-          caption: s.name,
-          iconStart: s.iconStart,
+          caption: i.name,
+          iconStart: i.iconStart,
           path: t
         };
       }
       // If the node has children, search through them with the updated path
-            if (s.nodes && s.nodes.length > 0) {
-        const e = findActiveWithPath(s.nodes, t);
+            if (i.nodes && i.nodes.length > 0) {
+        const e = findActiveWithPath(i.nodes, t);
         // If we find an active node in this subtree, return it immediately
                 if (e !== null) {
           return e;
@@ -238,51 +238,52 @@ const searchParentsItems = (t, e) => {
 
 const c = ":host{--search-input-max-inline-size:400px;display:grid;block-size:100%}:host(:not(.has-footer)){grid-template-rows:max-content 1fr}:host(.has-footer){grid-template-rows:max-content 1fr max-content}.header.has-active-item{grid-area:header}.section{display:contents}.header__first-row,.header__second-row{display:grid;grid-auto-flow:column}.header__first-row{column-gap:var(--field-group__column-gap);grid-auto-columns:max-content}.header__second-row{column-gap:12px;grid-template-columns:minmax(150px, var(--search-input-max-inline-size)) max-content}.header__second-row--one-row{grid-template-columns:minmax(150px, var(--search-input-max-inline-size))}.active-item{background-color:var(--mer-surface__elevation--01);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--xs) var(--mer-spacing--sm);display:flex;align-items:center;gap:var(--mer-spacing--xs)}.active-item__icon-container{display:contents}.active-item__icon{pointer-events:none}.active-item__link{text-decoration:underline;color:var(--mer-text__primary);cursor:pointer}.active-item__link:hover{color:var(--mer-text__primary--hover)}.active-item__link:active{color:var(--mer-text__primary--active)}.dummy-control-block-size{block-size:32px}.trees{position:relative}";
 
-var h = undefined && undefined.__classPrivateFieldGet || function(t, e, s, i) {
-  if (s === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof e === "function" ? t !== e || !i : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return s === "m" ? i : s === "a" ? i.call(t) : i ? i.value : e.get(t);
+var h = undefined && undefined.__classPrivateFieldGet || function(t, e, i, s) {
+  if (i === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e === "function" ? t !== e || !s : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? s : i === "a" ? s.call(t) : s ? s.value : e.get(t);
 };
 
-var l = undefined && undefined.__classPrivateFieldSet || function(t, e, s, i, n) {
-  if (i === "m") throw new TypeError("Private method is not writable");
-  if (i === "a" && !n) throw new TypeError("Private accessor was defined without a setter");
+var l = undefined && undefined.__classPrivateFieldSet || function(t, e, i, s, n) {
+  if (s === "m") throw new TypeError("Private method is not writable");
+  if (s === "a" && !n) throw new TypeError("Private accessor was defined without a setter");
   if (typeof e === "function" ? t !== e || !n : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return i === "a" ? n.call(t, s) : n ? n.value = s : e.set(t, s), s;
+  return s === "a" ? n.call(t, i) : n ? n.value = i : e.set(t, i), i;
 };
 
-var d, f, u, p, m, v, w, g, b, k, y, _, x, I, W, M, C, S, T, j, z, N;
+var d, f, u, p, m, v, w, g, b, k, y, _, x, I, W, M, C, S, T, j, z, E, N, A;
 
 const L = [ "resets/box-sizing", "chameleon/scrollbar", "components/tooltip", "components/tree-view", "utils/form--full", "utils/layout", "utils/spacing", "utils/typography" ];
 
-const A = o({
+const O = o({
   category: "system",
   name: "search",
   colorType: "on-surface"
 });
 
-const E = "tree";
+const P = "tree";
 
-const H = "list";
+const F = "list";
 
-const O = "on";
+const J = "on";
 
-const P = class {
-  constructor(i) {
-    t(this, i);
-    d.set(this, void 0);
+const X = class {
+  constructor(s) {
+    t(this, s);
+    d.add(this);
     f.set(this, void 0);
-    u.set(this, []);
-    p.set(this, e(`./gx-ide-assets/select-kb-items/shortcuts.json`));
-    m.set(this, []);
-    v.set(this, void 0);
+    u.set(this, void 0);
+    p.set(this, []);
+    m.set(this, e(`./gx-ide-assets/select-kb-items/shortcuts.json`));
+    v.set(this, []);
     w.set(this, void 0);
-    g.set(this, (() => {
+    g.set(this, void 0);
+    k.set(this, (() => {
       if (this.cancelCallback) {
         this.cancelCallback();
       }
     }));
-    b.set(this, (async t => {
+    y.set(this, (async t => {
       let e = [];
       t.detail.forEach((t => {
         if (t.item.checked) {
@@ -291,45 +292,45 @@ const P = class {
       }));
       if (this.singleChecks) {
         // Detect the last change by comparing previous and new state
-        let s = null;
+        let i = null;
         // If there are more in the new state, it was a check; if less, it was an uncheck
                 if (e.length > this.checkedNodesIds.length) {
           // Find the newly checked item
-          s = e.find((t => !this.checkedNodesIds.includes(t))) || null;
+          i = e.find((t => !this.checkedNodesIds.includes(t))) || null;
         } else if (e.length < this.checkedNodesIds.length) {
           // Find the unchecked item (not used in single check, but kept for clarity)
-          s = this.checkedNodesIds.find((t => !e.includes(t))) || null;
+          i = this.checkedNodesIds.find((t => !e.includes(t))) || null;
         }
         // Only allow one if multiChecks is false
                 if (this.singleChecks && e.length > 1) {
           // If we detected the last checked, keep it; otherwise, keep the first
-          e = s ? [ s ] : [ e[0] ];
+          e = i ? [ i ] : [ e[0] ];
           // Uncheck the others
-                    h(this, w, "f").updateItemsProperties(Array.from(t.detail.keys()).filter((t => t !== e[0])), {
+                    h(this, g, "f").updateItemsProperties(Array.from(t.detail.keys()).filter((t => t !== e[0])), {
             checked: false
           });
         }
       }
       this.checkedNodesIds = e;
-      l(this, m, checkItems(this.itemsList, this.checkedNodesIds), "f");
+      l(this, v, checkItems(this.itemsList, this.checkedNodesIds), "f");
       if (this.checkedChanged) {
         this.checkedChanged(this.checkedNodesIds);
       }
     }));
-    k.set(this, (() => {
+    _.set(this, (() => {
       if (this.confirmCallback) {
         this.confirmCallback(this.checkedNodesIds);
       }
     }));
-    y.set(this, (async t => {
+    x.set(this, (async t => {
       if (this.itemContextMenuCallback) {
         let e;
-        const s = h(this, u, "f").find((e => e === t.detail.id));
-        if (!h(this, u, "f").length || !s) {
-          await h(this, w, "f").updateItemsProperties(h(this, u, "f"), {
+        const i = h(this, p, "f").find((e => e === t.detail.id));
+        if (!h(this, p, "f").length || !i) {
+          await h(this, g, "f").updateItemsProperties(h(this, p, "f"), {
             selected: false
           });
-          await h(this, w, "f").updateItemsProperties([ t.detail.id ], {
+          await h(this, g, "f").updateItemsProperties([ t.detail.id ], {
             selected: true
           });
           e = {
@@ -341,88 +342,88 @@ const P = class {
           e = {
             clientX: t.detail.contextmenuEvent.clientX,
             clientY: t.detail.contextmenuEvent.clientY,
-            selection: h(this, u, "f")
+            selection: h(this, p, "f")
           };
         }
         this.itemContextMenuCallback(e);
       }
     }));
-    _.set(this, (t => () => {
-      t(this.checkedNodesIds, h(this, u, "f"));
+    I.set(this, (t => () => {
+      t(this.checkedNodesIds, h(this, p, "f"));
     }));
-    x.set(this, (t => {
+    W.set(this, (t => {
       this.searchPatternValue = t.detail.toString();
     }));
-    I.set(this, (() => s("div", null, this.dialogActions.map((t => s("button", {
+    M.set(this, (() => i("div", null, this.dialogActions.map((t => i("button", {
       class: "button-tertiary",
       part: `button button-${t.name}`,
-      onClick: h(this, _, "f").call(this, t.callback),
+      onClick: h(this, I, "f").call(this, t.callback),
       disabled: this.loading
     }, t.name))))));
-    W.set(this, (() => {
+    C.set(this, (() => {
       var t;
-      return s("footer", {
+      return i("footer", {
         class: "footer control-footer-with-border spacing-body-inline spacing-body-block-end control-footer-space-between"
-      }, h(this, I, "f").call(this), s("div", {
+      }, h(this, M, "f").call(this), i("div", {
         class: "buttons-spacer "
-      }, this.cancelCallback && s("button", {
+      }, this.cancelCallback && i("button", {
         class: "button-secondary",
         part: "cancel-button",
-        onClick: h(this, g, "f")
-      }, h(this, d, "f").footer.cancel), this.confirmCallback && s("button", {
+        onClick: h(this, k, "f")
+      }, h(this, f, "f").footer.cancel), this.confirmCallback && i("button", {
         class: "button-primary",
         part: "confirm-button",
-        onClick: h(this, k, "f"),
+        onClick: h(this, _, "f"),
         disabled: this.loading || ((t = this.checkedNodesIds) === null || t === void 0 ? void 0 : t.length) === 0
-      }, h(this, d, "f").footer.select)));
+      }, h(this, f, "f").footer.select)));
     }));
-    M.set(this, (t => {
+    S.set(this, (t => {
       const e = [];
       unselectAllNodes(this.itemsList);
       t.detail.forEach((t => {
         e.push(t.item.id);
       }));
-      l(this, u, e, "f");
+      l(this, p, e, "f");
       if (this.selectionChanged) {
-        this.selectionChanged(h(this, u, "f"));
+        this.selectionChanged(h(this, p, "f"));
       }
-      l(this, m, selectItems(this.itemsList, e), "f");
+      l(this, v, selectItems(this.itemsList, e), "f");
     }));
-    C.set(this, (async t => {
+    T.set(this, (async t => {
       const e = searchParentsItems(this.itemsList, t);
-      const s = selectItems(this.itemsList, t);
-      const i = expandItems(s, e);
-      h(this, T, "f").call(this, i);
+      const i = selectItems(this.itemsList, t);
+      const s = expandItems(i, e);
+      h(this, z, "f").call(this, s);
     }));
-    S.set(this, (async t => {
+    j.set(this, (async t => {
       const e = searchParentsItems(this.itemsList, t);
-      const s = expandItems(this.itemsList, e);
-      h(this, T, "f").call(this, s);
+      const i = expandItems(this.itemsList, e);
+      h(this, z, "f").call(this, i);
     }));
-    T.set(this, (t => {
+    z.set(this, (t => {
       this.nodeVersionsListTreeModel = convertItemsListToTreeViewModel(t, this.checkboxType);
       this.nodeListFlattenedTreeModel = convertItemsNodeListToFlattenedTreeViewModel(t, this.checkboxType);
     }));
-    j.set(this, (async t => {
+    E.set(this, (async t => {
       const e = t.detail;
       this.nodesVersionsViewType = e;
       if (this.nodesVersionsViewType === "tree") {
-        await h(this, C, "f").call(this, h(this, u, "f"));
-        await h(this, S, "f").call(this, this.checkedNodesIds);
+        await h(this, T, "f").call(this, h(this, p, "f"));
+        await h(this, j, "f").call(this, this.checkedNodesIds);
       }
-      h(this, T, "f").call(this, h(this, m, "f"));
+      h(this, z, "f").call(this, h(this, v, "f"));
     }));
-    z.set(this, (t => {
-      this.toggleCheckboxes = t.detail === O;
+    N.set(this, (t => {
+      this.toggleCheckboxes = t.detail === J;
     }));
-    N.set(this, (() => {
+    A.set(this, (async () => {
       var t;
-      const e = h(this, w, "f") && ((t = this.activeItemNode) === null || t === void 0 ? void 0 : t.path);
+      const e = h(this, g, "f") && ((t = this.activeItemNode) === null || t === void 0 ? void 0 : t.path);
       if (e) {
-        h(this, w, "f").scrollIntoVisible(this.activeItemNode.path);
+        await h(this, g, "f").scrollIntoVisible(this.activeItemNode.path);
       }
       if (this.activeItemCallback) {
-        this.activeItemCallback();
+        await this.activeItemCallback();
       }
     }));
     this.activeItemNode = undefined;
@@ -434,6 +435,7 @@ const P = class {
     this.nodeVersionsListTreeModel = [];
     this.searchPatternValue = null;
     this.toggleCheckboxes = undefined;
+    this.itemsList = [];
     this.activeItemCallback = undefined;
     this.cancelCallback = undefined;
     this.checkboxType = undefined;
@@ -442,50 +444,48 @@ const P = class {
     this.confirmCallback = undefined;
     this.dialogActions = [];
     this.itemContextMenuCallback = undefined;
-    this.itemsList = [];
+    this.loadItemsCallback = undefined;
     this.showToggleCheckboxes = true;
     this.multiSelection = false;
     this.singleChecks = false;
     this.showActiveItemLink = false;
+    this.useLoader = true;
     this.selectionChanged = undefined;
   }
-  watchNodeListHandler(t) {
-    h(this, T, "f").call(this, t);
-    // Check and update activeItem
-        this.activeItemNode = findFirstActiveNode(t);
-    this.loading = false;
-  }
   async componentWillLoad() {
-    this.loading = true;
-    l(this, d, await r.getComponentStrings(this.el), "f");
+    l(this, f, await a.getComponentStrings(this.el), "f");
     this.toggleCheckboxes = this.showToggleCheckboxes;
-    l(this, v, [ {
-      value: E,
-      caption: h(this, d, "f").main.tree
+    l(this, w, [ {
+      value: P,
+      caption: h(this, f, "f").main.tree
     }, {
-      value: H,
+      value: F,
       caption: "List"
     } ], "f");
     this.renderFooter = this.dialogActions.length > 0 || !!this.cancelCallback || !!this.confirmCallback;
+    h(this, d, "m", b).call(this);
+  }
+  async reloadItems() {
+    await h(this, d, "m", b).call(this);
   }
   /**
      * Suspends or reactivates the shortcuts
      */  async suspendShortcuts(t) {
     if (t) {
-      h(this, f, "f").suspend = true;
+      h(this, u, "f").suspend = true;
     } else {
-      h(this, f, "f").suspend = false;
+      h(this, u, "f").suspend = false;
     }
   }
   /**
      * Allow to update the selected items
      */  async updateSelection(t) {
     // first clear selected
-    h(this, w, "f").updateItemsProperties(h(this, u, "f"), {
+    h(this, g, "f").updateItemsProperties(h(this, p, "f"), {
       selected: false
     });
     // then select
-        h(this, w, "f").updateItemsProperties(t, {
+        h(this, g, "f").updateItemsProperties(t, {
       selected: true
     });
   }
@@ -493,100 +493,100 @@ const P = class {
      * Allow to update the checked items
      */  async updateCheckedItems(t) {
     // first clear checks
-    h(this, w, "f").updateItemsProperties(this.checkedNodesIds, {
+    h(this, g, "f").updateItemsProperties(this.checkedNodesIds, {
       checked: false
     });
     // then select
-        h(this, w, "f").updateItemsProperties(t, {
+        h(this, g, "f").updateItemsProperties(t, {
       checked: true
     });
     this.checkedNodesIds = t;
   }
   render() {
-    return s(i, {
+    return i(s, {
       class: {
         widget: true,
         "has-footer": this.renderFooter
       }
-    }, s("ch-theme", {
+    }, i("ch-theme", {
       model: L
-    }), s("ch-shortcuts", {
-      src: h(this, p, "f"),
-      ref: t => l(this, f, t, "f")
-    }), s("section", {
+    }), i("ch-shortcuts", {
+      src: h(this, m, "f"),
+      ref: t => l(this, u, t, "f")
+    }), i("section", {
       class: "section"
-    }, s("header", {
+    }, i("header", {
       part: "header",
       class: "header control-header field-group spacing-body-block-start spacing-body-inline"
-    }, s("div", {
+    }, i("div", {
       class: "header__first-row"
-    }, s("div", {
+    }, i("div", {
       class: "field field-inline"
-    }, s("label", {
+    }, i("label", {
       class: "label",
       htmlFor: "view-mode"
-    }, "Select view mode:"), s("ch-radio-group-render", {
+    }, "Select view mode:"), i("ch-radio-group-render", {
       class: "radio-group dummy-control-block-size",
       id: "view-mode",
-      model: h(this, v, "f"),
-      onChange: h(this, j, "f"),
-      value: h(this, v, "f")[0].value
-    })), this.checkboxType !== "none" && this.showToggleCheckboxes && s("div", {
+      model: h(this, w, "f"),
+      onChange: h(this, E, "f"),
+      value: h(this, w, "f")[0].value
+    })), this.checkboxType !== "none" && this.showToggleCheckboxes && i("div", {
       class: "field field-inline"
-    }, s("label", {
+    }, i("label", {
       class: "label",
       htmlFor: "toggle-checkboxes"
-    }, "Toggle Checkboxes"), s("ch-checkbox", {
+    }, "Toggle Checkboxes"), i("ch-checkbox", {
       class: "checkbox dummy-control-block-size",
       id: "toggle-checkboxes",
-      checkedValue: O,
-      value: O,
-      onInput: h(this, z, "f")
-    }))), s("div", {
+      checkedValue: J,
+      value: J,
+      onInput: h(this, N, "f")
+    }))), i("div", {
       class: {
         "header__second-row": true,
         "header__second-row--one-row": !this.showActiveItemLink
       }
-    }, s("ch-edit", {
+    }, i("ch-edit", {
       class: "input",
-      placeholder: h(this, d, "f").header.searchPatternPlaceholder,
-      startImgSrc: A,
-      onInput: h(this, x, "f"),
+      placeholder: h(this, f, "f").header.searchPatternPlaceholder,
+      startImgSrc: O,
+      onInput: h(this, W, "f"),
       accessibleName: "search pattern"
-    }), this.activeItemNode && this.showActiveItemLink && s("div", {
+    }), this.activeItemNode && this.showActiveItemLink && i("div", {
       class: "active-item"
-    }, s("span", {
+    }, i("span", {
       class: "active-item__icon-container"
-    }, s("ch-image", {
+    }, i("ch-image", {
       class: "icon-md active-item__icon",
-      src: this.activeItemNode.iconStart || a,
+      src: this.activeItemNode.iconStart || r,
       containerRef: null
-    })), h(this, d, "f").header.activeItem, s("button", {
+    })), h(this, f, "f").header.activeItem, i("button", {
       class: "active-item__link",
-      onClick: h(this, N, "f")
-    }, this.activeItemNode.caption)))), s("div", {
+      onClick: h(this, A, "f")
+    }, this.activeItemNode.caption)))), i("div", {
       class: "spacing-body-inline-start trees"
-    }, this.loading ? s("gx-ide-loader", {
-      loaderTitle: h(this, d, "f").loader.title,
-      description: h(this, d, "f").loader.description,
+    }, this.useLoader && this.loading ? i("gx-ide-loader", {
+      loaderTitle: h(this, f, "f").loader.title,
+      description: h(this, f, "f").loader.description,
       show: true
-    }) : s("ch-tree-view-render", {
+    }) : i("ch-tree-view-render", {
       class: "tree-view",
       model: this.nodesVersionsViewType === "tree" ? this.nodeVersionsListTreeModel : this.nodeListFlattenedTreeModel,
       "show-lines": this.nodesVersionsViewType === "tree" ? "all" : "none",
       expandableButton: this.nodesVersionsViewType === "tree" ? "decorative" : "no",
-      onItemContextmenu: h(this, y, "f"),
-      onCheckedItemsChange: h(this, b, "f"),
-      onSelectedItemsChange: h(this, M, "f"),
+      onItemContextmenu: h(this, x, "f"),
+      onCheckedItemsChange: h(this, y, "f"),
+      onSelectedItemsChange: h(this, S, "f"),
       expandOnClick: this.expandOnClick,
       multiSelection: this.multiSelection,
       filter: this.searchPatternValue,
       filterType: "caption",
       toggleCheckboxes: this.toggleCheckboxes,
       ref: t => {
-        l(this, w, t, "f");
+        l(this, g, t, "f");
       }
-    })), this.renderFooter && h(this, W, "f").call(this)));
+    })), this.renderFooter && h(this, C, "f").call(this)));
   }
   static get assetsDirs() {
     return [ "gx-ide-assets/select-kb-items" ];
@@ -594,20 +594,27 @@ const P = class {
   get el() {
     return n(this);
   }
-  static get watchers() {
-    return {
-      itemsList: [ "watchNodeListHandler" ]
-    };
-  }
 };
 
-d = new WeakMap, f = new WeakMap, u = new WeakMap, p = new WeakMap, m = new WeakMap, 
-v = new WeakMap, w = new WeakMap, g = new WeakMap, b = new WeakMap, k = new WeakMap, 
-y = new WeakMap, _ = new WeakMap, x = new WeakMap, I = new WeakMap, W = new WeakMap, 
-M = new WeakMap, C = new WeakMap, S = new WeakMap, T = new WeakMap, j = new WeakMap, 
-z = new WeakMap, N = new WeakMap;
+f = new WeakMap, u = new WeakMap, p = new WeakMap, m = new WeakMap, v = new WeakMap, 
+w = new WeakMap, g = new WeakMap, k = new WeakMap, y = new WeakMap, _ = new WeakMap, 
+x = new WeakMap, I = new WeakMap, W = new WeakMap, M = new WeakMap, C = new WeakMap, 
+S = new WeakMap, T = new WeakMap, j = new WeakMap, z = new WeakMap, E = new WeakMap, 
+N = new WeakMap, A = new WeakMap, d = new WeakSet, b = async function _GxIdeSelectKbItems_loadItems() {
+  try {
+    this.loading = true;
+    this.itemsList = await this.loadItemsCallback();
+    h(this, z, "f").call(this, this.itemsList);
+    // Check and update activeItem
+        this.activeItemNode = findFirstActiveNode(this.itemsList);
+  } catch (t) {
+    console.error("Error loading items:", t);
+  } finally {
+    this.loading = false;
+  }
+};
 
-P.style = c;
+X.style = c;
 
-export { P as gx_ide_select_kb_items };
-//# sourceMappingURL=p-8897c6de.entry.js.map
+export { X as gx_ide_select_kb_items };
+//# sourceMappingURL=p-2d6228e8.entry.js.map