reneco-hierarchized-picker 0.4.2-beta.8 → 0.4.2

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["reneco-hierarchized-picker_2.cjs",[[0,"reneco-hierarchized-picker",{"options":[1],"valueChangeCallback":[16],"disabled":[4],"newoptions":[1],"newfilter":[1],"isDisabled":[32],"componentID":[32],"rawData":[32],"pickerClass":[32],"displayedValue":[32],"value":[32],"shownTree":[32],"searchResultData":[32],"hasFocus":[32],"errorToLog":[32],"getValue":[64],"refreshPicker":[64],"setOptions":[64],"getSearchResult":[64],"filterTree":[64],"clearPicker":[64],"showSelectedNodes":[64]}],[0,"search-input",{"placeholder":[1],"setFocus":[64]}]]]], options);
+  return index.bootstrapLazy([["reneco-hierarchized-picker_2.cjs",[[0,"reneco-hierarchized-picker",{"options":[1],"valueChangeCallback":[16],"disabled":[4],"newoptions":[1],"newfilter":[1],"activatedDragAndDrop":[4,"activated-drag-and-drop"],"isDisabled":[32],"componentID":[32],"rawData":[32],"pickerClass":[32],"displayedValue":[32],"value":[32],"shownTree":[32],"searchResultData":[32],"hasFocus":[32],"errorToLog":[32],"getValue":[64],"refreshPicker":[64],"setOptions":[64],"getSearchResult":[64],"filterTree":[64],"clearPicker":[64],"showSelectedNodes":[64]}],[0,"search-input",{"placeholder":[1],"setFocus":[64]}]]]], options);
   });
 };
 

package/dist/cjs/reneco-hierarchized-picker.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["reneco-hierarchized-picker_2.cjs",[[0,"reneco-hierarchized-picker",{"options":[1],"valueChangeCallback":[16],"disabled":[4],"newoptions":[1],"newfilter":[1],"isDisabled":[32],"componentID":[32],"rawData":[32],"pickerClass":[32],"displayedValue":[32],"value":[32],"shownTree":[32],"searchResultData":[32],"hasFocus":[32],"errorToLog":[32],"getValue":[64],"refreshPicker":[64],"setOptions":[64],"getSearchResult":[64],"filterTree":[64],"clearPicker":[64],"showSelectedNodes":[64]}],[0,"search-input",{"placeholder":[1],"setFocus":[64]}]]]], options);
+  return index.bootstrapLazy([["reneco-hierarchized-picker_2.cjs",[[0,"reneco-hierarchized-picker",{"options":[1],"valueChangeCallback":[16],"disabled":[4],"newoptions":[1],"newfilter":[1],"activatedDragAndDrop":[4,"activated-drag-and-drop"],"isDisabled":[32],"componentID":[32],"rawData":[32],"pickerClass":[32],"displayedValue":[32],"value":[32],"shownTree":[32],"searchResultData":[32],"hasFocus":[32],"errorToLog":[32],"getValue":[64],"refreshPicker":[64],"setOptions":[64],"getSearchResult":[64],"filterTree":[64],"clearPicker":[64],"showSelectedNodes":[64]}],[0,"search-input",{"placeholder":[1],"setFocus":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/reneco-hierarchized-picker_2.cjs.entry.js

@@ -52,7 +52,9 @@ const acceptableDelayBetweenSimilarActions = 300;
 /**
  * Handles the drag start event.
  */
-function onItemDragStart(el, e) {
+function onItemDragStart(el, e, active = true) {
+  if (!active)
+    return;
   curDraggingItem = el;
   el.classList.add('dragging');
   e.stopPropagation();
@@ -60,7 +62,9 @@ function onItemDragStart(el, e) {
 /**
  * Handles the drag end event.
  */
-function onItemDragEnd(el, e) {
+function onItemDragEnd(el, e, active = true) {
+  if (!active)
+    return;
   el.classList.remove('dragging');
   e.stopPropagation();
   clearDragOverStyles(el.parentElement);
@@ -68,7 +72,9 @@ function onItemDragEnd(el, e) {
 /**
  * Handles the drag over event.
  */
-function onItemDragOver(el, e) {
+function onItemDragOver(el, e, active = true) {
+  if (!active)
+    return;
   const now = new Date().getTime();
   if (now - lastDraggedOverTimeForAscendent < 50 && el.dataset.nodeId !== lastDraggedOverNodeId) {
     return;
@@ -97,7 +103,9 @@ function onItemDragOver(el, e) {
 /**
  * Handles the drag leave event.
  */
-function onItemDragLeave(el, e) {
+function onItemDragLeave(el, e, active = true) {
+  if (!active)
+    return;
   clearDragOverStyles(el);
   el.classList.remove('dragover');
   e.stopPropagation();
@@ -105,7 +113,9 @@ function onItemDragLeave(el, e) {
 /**
  * Handles the drop event.
  */
-function onItemDrop(el, e, dropCallback) {
+function onItemDrop(el, e, active = true, dropCallback) {
+  if (!active)
+    return;
   clearDragOverStyles(el);
   el.classList.remove('dragover');
   e.stopPropagation();
@@ -281,16 +291,16 @@ Tree.prototype.buildTree = function (nodes, depth) {
 };
 Tree.prototype.bindEvent = function (ele) {
   var _a;
-  const that = this;
   if (!this.options.parentApi.isDisabled) {
     const contextMenu = this.options.parentApi.theOptions.contextMenu;
     if ((_a = contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.items) === null || _a === void 0 ? void 0 : _a.length) {
       new VanillaContextMenu(Object.assign(Object.assign({}, contextMenu), { scope: ele, menuItems: contextMenu.items.map(item => {
           return typeof item === 'string'
             ? item
-            : Object.assign(Object.assign({}, item), { callback: e => {
-                let targetOutput = Object.assign(Object.assign({}, that.nodesById[e.target.nodeId]), { hasChildren: that.nodesById[e.target.nodeId] && that.nodesById[e.target.nodeId].children &&
-                    that.nodesById[e.target.nodeId].children.length && that.nodesById[e.target.nodeId].children.length > 0 });
+            : Object.assign(Object.assign({}, item), { callback: async (e) => {
+                const pickerValue = await this.options.parentApi.getValue();
+                const treeJsNodeInfo = Object.assign({}, this.options.parentApi.loadedTreeJs.nodesById[pickerValue.nodeid]);
+                let targetOutput = Object.assign(Object.assign({}, treeJsNodeInfo), { hasChildren: treeJsNodeInfo.children.length > 0 });
                 delete targetOutput.children;
                 this.options.parentApi.onItemContextMenuItemClick(Object.assign(Object.assign({}, e), { target: targetOutput, contextMenuItem: item }));
               } });
@@ -329,9 +339,11 @@ Tree.prototype.bindEvent = function (ele) {
       // If source is webservice (it shouldn't be something else)
       if (this.options.parentApi.theOptions.source == 'webservice') {
         if (this.options.parentApi.theOptions.origin == 'classification') {
+          const contextualApiParams = this.options.parentApi.getContextualApiParams(Object.assign(Object.assign({}, this.options.parentApi.theOptions.options), { startNode: target.parentNode.nodeId }));
+          const contextualApiURL = this.options.parentApi.getContextualApiURL();
           // WS Call
           this.options.rawDataManager
-            .getFromClassification(this.options.parentApi.theOptions.url, Object.assign(Object.assign({}, this.options.parentApi.theOptions.options), { startNode: target.parentNode.nodeId }))
+            .getFromClassification(contextualApiURL, contextualApiParams, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
             .then(data => {
             this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
           });
@@ -343,7 +355,7 @@ Tree.prototype.bindEvent = function (ele) {
             StartNodeID: target.parentNode.nodeId,
             lng: this.options.parentApi.theOptions.options.lng,
             IsDeprecated: this.options.parentApi.theOptions.options.IsDeprecated,
-          })
+          }, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
             .then(data => {
             this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
           });
@@ -633,7 +645,7 @@ Tree.prototype.createUlEle = function () {
 Tree.prototype.createLiEle = function (node, closed) {
   const li = document.createElement('li');
   li.classList.add('treejs-node');
-  if (node.deprecated) {
+  if (node.deprecated || node.Is_Deprecated) {
     li.classList.add('treejs-node__deprecated');
   }
   if (node.isDesaturated) {
@@ -666,19 +678,19 @@ Tree.prototype.createLiEle = function (node, closed) {
   if (this.options.parentApi.theOptions.dragAndDropEnabled) {
     li.setAttribute('draggable', 'true');
     li.addEventListener('dragstart', e => {
-      onItemDragStart(li, e);
+      onItemDragStart(li, e, this.options.parentApi.activatedDragAndDrop);
     });
     li.addEventListener('dragend', e => {
-      onItemDragEnd(li, e);
+      onItemDragEnd(li, e, this.options.parentApi.activatedDragAndDrop);
     });
     li.addEventListener('dragover', e => {
-      onItemDragOver(li, e);
+      onItemDragOver(li, e, this.options.parentApi.activatedDragAndDrop);
     });
     li.addEventListener('dragleave', e => {
-      onItemDragLeave(li, e);
+      onItemDragLeave(li, e, this.options.parentApi.activatedDragAndDrop);
     });
     li.addEventListener('drop', e => {
-      onItemDrop(li, e, (dragEl, dropEl, position) => {
+      onItemDrop(li, e, this.options.parentApi.activatedDragAndDrop, (dragEl, dropEl, position) => {
         this.options.parentApi.itemDropped.emit({ dragEl, dropEl, position });
       });
     });
@@ -18182,7 +18194,7 @@ class RawDataManager {
         continue;
       const value = options[key];
       const lowerKey = key.toLowerCase();
-      if ((lowerKey === 'startnode' || lowerKey === 'startnodeid') && !pathSegment) {
+      if ((lowerKey === 'startnode') && !pathSegment) {
         pathSegment = encodeURIComponent(value);
         continue; // Skip adding this to the query string
       }
@@ -18269,8 +18281,16 @@ class RawDataManager {
    * Merge new data into the existing data.
    * @param newData New data to merge.
    */
-  mergeData(newData) {
-    this.rawData = this.genericMerge(this.rawData || {}, newData, 'key', 'children');
+  mergeData(newData, idKey) {
+    if (!this.rawData)
+      this.rawData = newData;
+    else {
+      this.rawData = this.genericMerge(this.rawData, newData, idKey, 'children');
+    }
+  }
+  reorderItems(referenceArray, toReorderArray, idKey) {
+    const idMap = new Map(toReorderArray.map(item => [item[idKey], item]));
+    return referenceArray.map(refItem => idMap.get(refItem[idKey])).filter(Boolean);
   }
   /**
    * Generic merge method.
@@ -18286,9 +18306,11 @@ class RawDataManager {
     }
     if (!toAdd || !((_a = toAdd[childrenKey]) === null || _a === void 0 ? void 0 : _a.length))
       return source;
+    if (source[childrenKey] && source[childrenKey].length > 0 && toAdd[childrenKey] && toAdd[childrenKey].length > 0)
+      toAdd[childrenKey] = this.reorderItems(source[childrenKey], toAdd[childrenKey], idKey);
     source[childrenKey] = ((_b = source[childrenKey]) === null || _b === void 0 ? void 0 : _b.length)
       ? source[childrenKey].map((child, index) => {
-        return this.genericMerge(child, toAdd[childrenKey].filter(item => item.key == child.key)[0], idKey, childrenKey);
+        return this.genericMerge(child, toAdd[childrenKey].filter(item => item.key == child.key)[index], idKey, childrenKey);
       })
       : toAdd[childrenKey];
     return source;
@@ -18358,6 +18380,12 @@ class OptionsManager {
       delete this.options.defaultValue;
     }
   }
+  // This method is pretty ugly and shouldn't have to be called, but temporarily works until a better solution is set
+  dropReach() {
+    if (this.options.options && this.options.options.Reach) {
+      delete this.options.options.Reach;
+    }
+  }
 }
 
 /**
@@ -18412,7 +18440,7 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
   const searchResultPresentsUnMatched = options.searchResultPresentsUnMatched;
   if (myObject && myObject.length) {
     myObject.forEach(value => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d;
       let keyPropFromNode = null;
       let valueTranslatedPropFromNode = null;
       let fullpathPropFromNode = null;
@@ -18420,15 +18448,12 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
       if (options.origin == "classification") {
         keyPropFromNode = getPropertyFromNode(value, 'ID');
         valueTranslatedPropFromNode = (_a = getPropertyFromNode(value, 'Translations')[options.language]) === null || _a === void 0 ? void 0 : _a.translated_name;
-        // TODO Not sure this is correct in the latest versions, may require review during second half of 2025
-        if (searched) {
-          fullpathPropFromNode = (_b = getPropertyFromNode(value, 'Properties')) === null || _b === void 0 ? void 0 : _b.System_FullPath;
-          fullpathTranslatedPropFromNode = (_c = getPropertyFromNode(value, 'fullpathTranslated')[options.language]) === null || _c === void 0 ? void 0 : _c.translated_fullpath;
-        }
-        else {
-          fullpathPropFromNode = (_d = getPropertyFromNode(value, 'Properties')) === null || _d === void 0 ? void 0 : _d.System_Fullpath;
-          fullpathTranslatedPropFromNode = (_e = getPropertyFromNode(value, 'Translations')[options.language]) === null || _e === void 0 ? void 0 : _e.translated_fullpath;
-        }
+        fullpathPropFromNode = (_b = getPropertyFromNode(value, 'Properties')) === null || _b === void 0 ? void 0 : _b.System_Fullpath;
+        fullpathTranslatedPropFromNode = (_c = getPropertyFromNode(value, 'Translations')[options.language]) === null || _c === void 0 ? void 0 : _c.translated_fullpath;
+        if (!fullpathPropFromNode)
+          fullpathPropFromNode = (_d = getPropertyFromNode(value, 'Properties')) === null || _d === void 0 ? void 0 : _d.System_FullPath;
+        if (!fullpathTranslatedPropFromNode)
+          fullpathTranslatedPropFromNode = getPropertyFromNode(value, 'fullpathTranslated');
       }
       else {
         keyPropFromNode = getPropertyFromNode(value, 'key');
@@ -18437,7 +18462,9 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
         fullpathTranslatedPropFromNode = getPropertyFromNode(value, 'fullpathTranslated');
       }
       const childrenPropFromNode = getPropertyFromNode(value, 'children', false);
-      const deprecated = getPropertyFromNode(value, 'deprecated', false);
+      let deprecated = getPropertyFromNode(value, 'deprecated', null);
+      if (deprecated === null)
+        deprecated = getPropertyFromNode(value, 'Is_Deprecated', false);
       const objToPush = {
         id: keyPropFromNode,
         nodeId: keyPropFromNode,
@@ -18812,7 +18839,10 @@ const HierarchizedPickerComponent = class {
     const isEqual = lodash.isEqual(newV, oldV);
     if (!newV.defaultValue && !oldV.defaultValue)
       return;
-    const changeDefaultValue = !(newV.defaultValue.length == oldV.defaultValue.length && newV.defaultValue.every(value => oldV.defaultValue.includes(value)));
+    const newDefault = Array.isArray(newV.defaultValue) ? newV.defaultValue : [newV.defaultValue];
+    const oldDefault = Array.isArray(oldV.defaultValue) ? oldV.defaultValue : [oldV.defaultValue];
+    const changeDefaultValue = newDefault.length !== oldDefault.length ||
+      !newDefault.every(value => oldDefault.includes(value));
     if (!isEqual && changeDefaultValue) {
       return changeDefaultValue;
     }
@@ -18862,6 +18892,7 @@ const HierarchizedPickerComponent = class {
     this.value = [];
     this.shownTree = false;
     this.searchResultData = [];
+    this.activatedDragAndDrop = true;
     this.hasFocus = undefined;
     this.errorToLog = '';
     this.checkFields = this.checkFields.bind(this);
@@ -18906,7 +18937,7 @@ const HierarchizedPickerComponent = class {
       return;
     }
     if (((_a = this.optionsManager.getOptions()) === null || _a === void 0 ? void 0 : _a.loading) == 'display') {
-      this.loadDataForTree(true);
+      this.loadDataForTree(true, document.querySelector("#hierarchized-picker-" + this.componentID + " .loader"));
     }
   }
   async initComponent() {
@@ -19096,14 +19127,61 @@ const HierarchizedPickerComponent = class {
   }
   getApiSearchURL() {
     if (this.optionsManager.getOptions().origin == 'classification') {
-      let substringUpToLastSlash = this.optionsManager.getOptions().url.substring(0, this.optionsManager.getOptions().url.lastIndexOf('/'));
-      let context = substringUpToLastSlash.substring(substringUpToLastSlash.lastIndexOf('/'), substringUpToLastSlash.length);
-      return substringUpToLastSlash.substring(0, substringUpToLastSlash.lastIndexOf('/')) + '/search' + context;
+      const baseURL = this.optionsManager.getOptions().url;
+      if (baseURL.indexOf("getTree") > -1) {
+        return baseURL.replace("/getTree/", "/search/");
+      }
+      else {
+        let substringUpToLastSlash = this.optionsManager.getOptions().url.substring(0, this.optionsManager.getOptions().url.lastIndexOf('/'));
+        let context = substringUpToLastSlash.substring(substringUpToLastSlash.lastIndexOf('/'), substringUpToLastSlash.length);
+        return substringUpToLastSlash.substring(0, substringUpToLastSlash.lastIndexOf('/')) + '/search' + context;
+      }
     }
     else {
       return this.optionsManager.getOptions().url.substring(0, this.optionsManager.getOptions().url.lastIndexOf('/')) + '/GetTreeFromSearch';
     }
   }
+  // TODO > Celine would rather like the context (thesaurus or position) to be extracted another way
+  getContextualApiURL() {
+    const { options, url } = this.optionsManager.getOptions();
+    if (options.Reach) {
+      // Use a base URL for relative paths
+      const base = window.location.origin; // fallback for relative URLs
+      const parsedUrl = new URL(url, base);
+      const pathSegments = parsedUrl.pathname.split('/');
+      let dynamicType = pathSegments[pathSegments.length - 2];
+      if (['thesaurus', 'position'].indexOf(dynamicType) == -1)
+        dynamicType = pathSegments[pathSegments.length - 1];
+      const newPathname = `/api/v1/classification/reach/${dynamicType}/${options.Reach}`;
+      this.optionsManager.dropReach();
+      return `${parsedUrl.origin}${newPathname}`;
+    }
+    return url;
+  }
+  getContextualApiParams(options = null, search = null) {
+    if (!options)
+      options = this.optionsManager.getOptions().options;
+    let optionsToReturn = Object.assign({}, options);
+    if (options.Reach) {
+      delete optionsToReturn.Reach;
+      if ("startNode" in optionsToReturn) {
+        optionsToReturn.startingnode = optionsToReturn.startNode;
+        delete optionsToReturn.startNode;
+      }
+      else if ("StartNodeID" in optionsToReturn) {
+        optionsToReturn.startingnode = optionsToReturn.StartNodeID;
+        delete optionsToReturn.StartNodeID;
+      }
+    }
+    else if (search) {
+      optionsToReturn.searchedValue = search;
+      if ("startNode" in optionsToReturn) {
+        optionsToReturn.StartNodeID = optionsToReturn.startNode;
+        delete optionsToReturn.startNode;
+      }
+    }
+    return optionsToReturn;
+  }
   translateDataForTree(dataToLoad, searchID = null, searched = null) {
     if (searched && searched != "") {
       this.loadSearchDataInCurrentTree(searchID, searched);
@@ -19115,11 +19193,11 @@ const HierarchizedPickerComponent = class {
   loadSearchDataInCurrentTree(searchID, searched) {
     let displayResults = (newtree) => {
       if (this.searchToDisplay > -1) { // TODO > Not working anymore after refact, prevents issues in displaying results when running multiple researchs at the same time && searchID == this.searchToDisplay) {
-        this.rawDataManager.mergeData(newtree);
+        this.rawDataManager.mergeData(newtree, this.theOptions.origin == 'classification' ? "ID" : "key");
         newtree.children.forEach((value, index) => {
           completeCurrentTreeWithTree(this.loadedTreeJs, value, this.optionsManager.getOptions());
         });
-        this.triggerTreeDisplay(this.rawData, searched);
+        this.triggerTreeDisplay(this.rawDataManager.getData(), searched);
         displayAutocompleteWithResults(this.rawDataManager.getData(), searched, this.optionsManager, this.editValue.bind(this), this.showTree.bind(this));
         // Deploys all nodes
         document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-node').forEach((item) => {
@@ -19137,9 +19215,7 @@ const HierarchizedPickerComponent = class {
     if (this.theOptions.source == 'webservice') {
       if (this.theOptions.origin == 'classification') {
         // WS Call
-        this.rawDataManager.getFromClassification(this.getApiSearchURL(), {
-          searchedValue: searched
-        })
+        this.rawDataManager.getFromClassification(this.getApiSearchURL(), Object.assign({}, this.getContextualApiParams(null, searched)), document.querySelector("#hierarchized-picker-" + this.componentID + " .loader"))
           .then((data) => {
           displayResults(data);
           if (!searched) {
@@ -19158,7 +19234,7 @@ const HierarchizedPickerComponent = class {
           searchedValue: searched,
           searchNameOnly: true,
           deprecated: false,
-        })
+        }, document.querySelector("#hierarchized-picker-" + this.componentID + " .loader"))
           .then((data) => {
           displayResults(data);
           if (!searched) {
@@ -19275,7 +19351,7 @@ const HierarchizedPickerComponent = class {
   onItemContextMenuItemClick(e) {
     this.itemContextMenuItemClick.emit(e);
   }
-  async setNodeAsSelected(id, treeToUpdate, userClick) {
+  setNodeAsSelected(id, treeToUpdate, userClick) {
     // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
     if (((this.isDisabled && this.optionsManager.getOptions().mode != "tree") && this.shownTree && this.setValueOnClick) ||
       (this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
@@ -19288,19 +19364,24 @@ const HierarchizedPickerComponent = class {
     // ----- BEGIN -----
     let node = treeToUpdate.nodesById[id];
     let onChange = treeToUpdate.options.onChange;
-    if (!node.disabled) {
-      treeToUpdate.setValue(id);
-      treeToUpdate.updateLiElements();
+    if (!node) {
+      this.logError("The current selected value is not part of the loaded tree!");
     }
-    userClick && onChange && onChange.call(treeToUpdate);
-    // ------ END ------
-    if (this.setValueOnClick) {
-      this.editValue(node, userClick);
-      if (this.shownTree && userClick) {
-        // TODO > is this required ?
-        // await focusMainInput(this);
-        if (!this.optionsManager.getOptions().multiple) {
-          this.showTree('hide');
+    else {
+      if (!node.disabled) {
+        treeToUpdate.setValue(id);
+        treeToUpdate.updateLiElements();
+      }
+      userClick && onChange && onChange.call(treeToUpdate);
+      // ------ END ------
+      if (this.setValueOnClick) {
+        this.editValue(node, userClick);
+        if (this.shownTree && userClick) {
+          // TODO > is this required ?
+          // await focusMainInput(this);
+          if (!this.optionsManager.getOptions().multiple) {
+            this.showTree('hide');
+          }
         }
       }
     }
@@ -19379,6 +19460,11 @@ const HierarchizedPickerComponent = class {
     if (this.hasFocus.indexOf('hide') > -1 && !isStillInsidePicker) {
       this.hasFocus = [];
     }
+    else {
+      if (!this.shownTree && this.theOptions.loading == 'click' && !this.ready) {
+        this.loadDataForTree(true, document.querySelector("#hierarchized-picker-" + this.componentID + " .loader"));
+      }
+    }
     const previousShownTree = this.shownTree;
     this.shownTree = this.hasFocus.length > 0;
     if (this.shownTree && !previousShownTree) {
@@ -19427,12 +19513,13 @@ const HierarchizedPickerComponent = class {
     if (!value)
       value = this.value;
     this.displayedValue = value.map(item => {
-      var _a, _b;
-      return (_b = (_a = item.fullpathTranslated) !== null && _a !== void 0 ? _a : item.shortpathTranslated) !== null && _b !== void 0 ? _b : `Node ${item.nodeid}`;
+      var _a;
+      return (_a = (this.optionsManager.getOptions().isFullpath ? item.fullpathTranslated : item.shortpathTranslated)) !== null && _a !== void 0 ? _a : `Node ${item.nodeid}`;
     }).join(';');
   }
   // Search a value in the tree and triggers a search when necessary
   search(searched) {
+    this.loader.classList.add('loading');
     let searchinput = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input');
     if (this.optionsManager.getOptions().mode == 'input' && searchinput) {
       searchinput.classList.remove('fieldError');
@@ -19469,6 +19556,7 @@ const HierarchizedPickerComponent = class {
       // this.checkFields(this.value, false);
       this.setSearchResults([]);
     }
+    this.loader.classList.remove('loading');
   }
   // Refresh the tree with search results
   triggerSearch(searched) {
@@ -19487,7 +19575,9 @@ const HierarchizedPickerComponent = class {
   loadDataForTree(init, loader) {
     if (this.optionsManager.getOptions().source == 'webservice') {
       if (this.optionsManager.getOptions().origin == 'classification') {
-        this.rawDataManager.getFromClassification(this.optionsManager.getOptions().url, this.optionsManager.getOptions().options, loader).then((data) => {
+        const contextualApiParams = this.getContextualApiParams();
+        const contextualApiURL = this.getContextualApiURL();
+        this.rawDataManager.getFromClassification(contextualApiURL, contextualApiParams, loader).then((data) => {
           this.rawData = data;
           if (init) {
             this.formatDefaultValue();
@@ -19631,7 +19721,9 @@ const HierarchizedPickerComponent = class {
         this.scrollable = el;
       }, class: 'hierarchized-picker-modal-area ' + (!this.shownTree ? ' hidden ' : ''), onClick: event => {
         clickPickerModalArea(this);
-      } }, index.h("div", { class: 'hierarchized-picker-modal ' + (!this.ready ? 'hidden' : '') }, index.h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), index.h("ul", { id: "autocomplete-results-area" }), index.h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (index.h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), onClick: event => {
+      } }, index.h("div", { class: "loader", ref: el => {
+        this.loader = el;
+      } }, index.h("div", { class: "loader-inner" }, "Loading...")), index.h("div", { class: 'hierarchized-picker-modal ' + (!this.ready ? 'hidden' : '') }, index.h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), index.h("ul", { id: "autocomplete-results-area" }), index.h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (index.h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), onClick: event => {
         clickPickerModalArea(this);
       } }, index.h("div", { class: "loader", ref: el => {
         this.loader = el;