reneco-hierarchized-picker 0.4.2-beta.13 → 0.4.2-beta.15

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();
@@ -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.getContextualApiURL(), this.options.parentApi.getContextualApiParams(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);
           });
@@ -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;
       let keyPropFromNode = null;
       let valueTranslatedPropFromNode = null;
       let fullpathPropFromNode = null;
@@ -18420,15 +18448,8 @@ 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;
       }
       else {
         keyPropFromNode = getPropertyFromNode(value, 'key');
@@ -18865,6 +18886,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);
@@ -18909,7 +18931,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() {
@@ -19116,15 +19138,15 @@ const HierarchizedPickerComponent = class {
       const pathSegments = parsedUrl.pathname.split('/');
       const dynamicType = pathSegments[pathSegments.length - 2];
       const newPathname = `/api/v1/classification/reach/${dynamicType}/${options.Reach}`;
+      this.optionsManager.dropReach();
       return `${parsedUrl.origin}${newPathname}`;
     }
     return url;
   }
-  getContextualApiParams(options = null) {
-    if (!options)
-      options = this.optionsManager.getOptions().options;
+  getContextualApiParams(search = null) {
+    const options = this.optionsManager.getOptions().options;
+    let optionsToReturn = Object.assign({}, options);
     if (options.Reach) {
-      let optionsToReturn = Object.assign({}, options);
       delete optionsToReturn.Reach;
       if ("startNode" in optionsToReturn) {
         optionsToReturn.startingnode = optionsToReturn.startNode;
@@ -19134,10 +19156,17 @@ const HierarchizedPickerComponent = class {
         optionsToReturn.startingnode = optionsToReturn.StartNodeID;
         delete optionsToReturn.StartNodeID;
       }
-      return optionsToReturn;
+    }
+    else if (search) {
+      optionsToReturn.searchedValue = search;
+      if ("startNode" in optionsToReturn) {
+        optionsToReturn.StartNodeID = optionsToReturn.startNode;
+        delete optionsToReturn.startNode;
+      }
     }
     else
       return options;
+    return optionsToReturn;
   }
   translateDataForTree(dataToLoad, searchID = null, searched = null) {
     if (searched && searched != "") {
@@ -19150,7 +19179,7 @@ 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());
         });
@@ -19172,9 +19201,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(searched)), document.querySelector("#hierarchized-picker-" + this.componentID + ".loader"))
           .then((data) => {
           displayResults(data);
           if (!searched) {
@@ -19193,7 +19220,7 @@ const HierarchizedPickerComponent = class {
           searchedValue: searched,
           searchNameOnly: true,
           deprecated: false,
-        })
+        }, document.querySelector("#hierarchized-picker-" + this.componentID + ".loader"))
           .then((data) => {
           displayResults(data);
           if (!searched) {
@@ -19323,19 +19350,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');
+          }
         }
       }
     }
@@ -19468,6 +19500,7 @@ const HierarchizedPickerComponent = class {
   }
   // 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');
@@ -19504,6 +19537,7 @@ const HierarchizedPickerComponent = class {
       // this.checkFields(this.value, false);
       this.setSearchResults([]);
     }
+    this.loader.classList.remove('loading');
   }
   // Refresh the tree with search results
   triggerSearch(searched) {
@@ -19522,7 +19556,9 @@ const HierarchizedPickerComponent = class {
   loadDataForTree(init, loader) {
     if (this.optionsManager.getOptions().source == 'webservice') {
       if (this.optionsManager.getOptions().origin == 'classification') {
-        this.rawDataManager.getFromClassification(this.getContextualApiURL(), this.getContextualApiParams(), 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();

package/dist/collection/components/hierarchized-picker/hierarchized-picker.js

@@ -204,6 +204,7 @@ export class HierarchizedPickerComponent {
     this.value = [];
     this.shownTree = false;
     this.searchResultData = [];
+    this.activatedDragAndDrop = true;
     this.hasFocus = undefined;
     this.errorToLog = '';
     this.checkFields = this.checkFields.bind(this);
@@ -248,7 +249,7 @@ export class HierarchizedPickerComponent {
       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() {
@@ -458,15 +459,15 @@ export class HierarchizedPickerComponent {
       const pathSegments = parsedUrl.pathname.split('/');
       const dynamicType = pathSegments[pathSegments.length - 2];
       const newPathname = `/api/v1/classification/reach/${dynamicType}/${options.Reach}`;
+      this.optionsManager.dropReach();
       return `${parsedUrl.origin}${newPathname}`;
     }
     return url;
   }
-  getContextualApiParams(options = null) {
-    if (!options)
-      options = this.optionsManager.getOptions().options;
+  getContextualApiParams(search = null) {
+    const options = this.optionsManager.getOptions().options;
+    let optionsToReturn = Object.assign({}, options);
     if (options.Reach) {
-      let optionsToReturn = Object.assign({}, options);
       delete optionsToReturn.Reach;
       if ("startNode" in optionsToReturn) {
         optionsToReturn.startingnode = optionsToReturn.startNode;
@@ -476,10 +477,17 @@ export class HierarchizedPickerComponent {
         optionsToReturn.startingnode = optionsToReturn.StartNodeID;
         delete optionsToReturn.StartNodeID;
       }
-      return optionsToReturn;
+    }
+    else if (search) {
+      optionsToReturn.searchedValue = search;
+      if ("startNode" in optionsToReturn) {
+        optionsToReturn.StartNodeID = optionsToReturn.startNode;
+        delete optionsToReturn.startNode;
+      }
     }
     else
       return options;
+    return optionsToReturn;
   }
   translateDataForTree(dataToLoad, searchID = null, searched = null) {
     if (searched && searched != "") {
@@ -492,7 +500,7 @@ export class HierarchizedPickerComponent {
   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());
         });
@@ -514,9 +522,7 @@ export class HierarchizedPickerComponent {
     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(searched)), document.querySelector("#hierarchized-picker-" + this.componentID + ".loader"))
           .then((data) => {
           displayResults(data);
           if (!searched) {
@@ -535,7 +541,7 @@ export class HierarchizedPickerComponent {
           searchedValue: searched,
           searchNameOnly: true,
           deprecated: false,
-        })
+        }, document.querySelector("#hierarchized-picker-" + this.componentID + ".loader"))
           .then((data) => {
           displayResults(data);
           if (!searched) {
@@ -665,19 +671,24 @@ export class HierarchizedPickerComponent {
     // ----- BEGIN -----
     let node = treeToUpdate.nodesById[id];
     let onChange = treeToUpdate.options.onChange;
-    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');
+    if (!node) {
+      this.logError("The current selected value is not part of the loaded tree!");
+    }
+    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');
+          }
         }
       }
     }
@@ -810,6 +821,7 @@ export class HierarchizedPickerComponent {
   }
   // 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');
@@ -846,6 +858,7 @@ export class HierarchizedPickerComponent {
       // this.checkFields(this.value, false);
       this.setSearchResults([]);
     }
+    this.loader.classList.remove('loading');
   }
   // Refresh the tree with search results
   triggerSearch(searched) {
@@ -864,7 +877,9 @@ export class HierarchizedPickerComponent {
   loadDataForTree(init, loader) {
     if (this.optionsManager.getOptions().source == 'webservice') {
       if (this.optionsManager.getOptions().origin == 'classification') {
-        this.rawDataManager.getFromClassification(this.getContextualApiURL(), this.getContextualApiParams(), 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();
@@ -1120,6 +1135,24 @@ export class HierarchizedPickerComponent {
         },
         "attribute": "newfilter",
         "reflect": false
+      },
+      "activatedDragAndDrop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "activated-drag-and-drop",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/treejs/index.js

@@ -207,9 +207,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.getContextualApiURL(), this.options.parentApi.getContextualApiParams(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);
           });
@@ -221,7 +223,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);
           });
@@ -545,19 +547,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 });
       });
     });

package/dist/collection/core/options-manager.js

@@ -45,4 +45,10 @@ export 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;
+    }
+  }
 }

package/dist/collection/core/raw-data-manager.js

@@ -62,7 +62,7 @@ export 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
       }
@@ -149,8 +149,16 @@ export 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.
@@ -166,9 +174,11 @@ export 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;