reneco-hierarchized-picker 0.4.3-beta.9 → 0.5.1

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

@@ -9,7 +9,7 @@ import { RawDataManager } from '../../core/raw-data-manager';
 import { OptionsManager } from '../../core/options-manager';
 import { fillTreeWithObject, completeCurrentTreeWithTree, getPropertyFromNode } from '../../features/tree/tree-utils';
 import { displayAutocompleteWithResults, clearAutocomplete } from '../../features/autocomplete/autocomplete';
-import { focusSearchInput, focusMainInput, focusInSearchEvent, focusOutSearchEvent, clickPickerModalArea, isInsidePicker } from '../../features/events/focus-handlers';
+import { focusSearchInput, focusMainInput, focusInSearchEvent, focusOutSearchEvent, clickPickerModalArea } from '../../features/events/focus-handlers';
 import { setupKeyboardNavigation } from '../../features/keyboard-navigation/keyboard-navigation';
 export class HierarchizedPickerComponent {
   /**
@@ -78,14 +78,66 @@ export class HierarchizedPickerComponent {
   logError(messageToLog) {
     try {
       console.error('--- Hierarchized picker ' + this.componentID + ' ERROR ---', messageToLog);
+      this.lastErrorMessage = messageToLog;
     }
     catch (_a) {
-      console.error('--- Hierarchized picker generic ERROR ---');
+      const genericErrorMessage = '--- Hierarchized picker generic ERROR ---';
+      this.lastErrorMessage = genericErrorMessage;
+      console.error(genericErrorMessage);
     }
+    this.errorRaised.emit(this.lastErrorMessage);
   }
   get theOptions() {
     return this.optionsManager.getOptions();
   }
+  diffKeys(obj1, obj2, prefix = '') {
+    const diffs = [];
+    const commonKeys = Object.keys(obj1 || {}).filter(key => obj2 && Object.prototype.hasOwnProperty.call(obj2, key));
+    for (const key of commonKeys) {
+      const fullKey = prefix ? `${prefix}.${key}` : key;
+      const val1 = obj1[key];
+      const val2 = obj2[key];
+      if (Array.isArray(val1) && Array.isArray(val2)) {
+        // Compare array length
+        if (val1.length !== val2.length) {
+          diffs.push(fullKey);
+          continue;
+        }
+        // Compare each element deeply
+        for (let i = 0; i < val1.length; i++) {
+          const v1 = val1[i];
+          const v2 = val2[i];
+          if (typeof v1 === 'object' &&
+            v1 !== null &&
+            typeof v2 === 'object' &&
+            v2 !== null) {
+            const subDiffs = this.diffKeys(v1, v2, `${fullKey}[${i}]`);
+            if (subDiffs.length > 0) {
+              diffs.push(fullKey);
+              break; // stop at first mismatch in array
+            }
+          }
+          else if (v1 !== v2) {
+            diffs.push(fullKey);
+            break;
+          }
+        }
+      }
+      else if (val1 &&
+        val2 &&
+        typeof val1 === 'object' &&
+        typeof val2 === 'object') {
+        // Recursive deep object comparison
+        const subDiffs = this.diffKeys(val1, val2, fullKey);
+        if (subDiffs.length > 0)
+          diffs.push(...subDiffs);
+      }
+      else if (val1 !== val2) {
+        diffs.push(fullKey);
+      }
+    }
+    return diffs;
+  }
   async setNewOption(newValue, oldValue = null) {
     this.ready = false;
     // --------------------------------------- DEPRECATED ?
@@ -104,6 +156,7 @@ export class HierarchizedPickerComponent {
     //   });
     // ---------------------------------------
     // this.theOptions = newValue;
+    const savedOldValue = Object.assign({}, this.theOptions);
     if (oldValue && JSON.stringify(newValue.options) == JSON.stringify(oldValue.options)) {
       this.ready = true;
       return;
@@ -112,6 +165,7 @@ export class HierarchizedPickerComponent {
       newValue = JSON.parse(newValue);
     if (typeof oldValue == 'string')
       oldValue = JSON.parse(oldValue);
+    this.value = [];
     this.optionsManager.updateOptions(newValue);
     this.setDisplayedValue(this.value);
     const originOrNodeIdAreDifferent = !oldValue || (newValue.origin != oldValue.origin || newValue.options.StartNodeID != oldValue.options.StartNodeID);
@@ -129,11 +183,28 @@ export class HierarchizedPickerComponent {
     if (oldValue && JSON.stringify(newValue.options) != JSON.stringify(oldValue.options)) {
       this.value = [];
     }
-    if ((newValue === null || newValue === void 0 ? void 0 : newValue.loading) == 'display') {
+    if ((newValue === null || newValue === void 0 ? void 0 : newValue.loading) == 'display' || (newValue && !newValue.loading)) {
       if ((oldValue && this.isChangeInOptions(newValue, oldValue)) || !oldValue) {
-        this.rawDataManager = new RawDataManager(this.getOptionsAsIConf(this.optionsManager.getOptions()).token, this.optionsManager);
-        await this.loadHierarchizedPicker(true);
-        this.displayWhenLoaded();
+        if (!oldValue) {
+          oldValue = savedOldValue;
+        }
+        const propDiffs = this.diffKeys(oldValue, this.optionsManager.initializeOptions(newValue));
+        const noReloadProps = ["multiple"];
+        const ignoredProps = ["token"];
+        const filteredDiffs = propDiffs.filter(prop => !ignoredProps.includes(prop));
+        if (filteredDiffs.length == 1 && filteredDiffs.some(item => noReloadProps.includes(item))) {
+          const propChanged = filteredDiffs[0];
+          switch (propChanged) {
+            case "multiple":
+              document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-checkbox').forEach((item) => (item.style.display = (this.theOptions.multiple ? 'inline-block' : 'none')));
+              break;
+          }
+        }
+        else {
+          this.rawDataManager = new RawDataManager(this.getOptionsAsIConf(this.optionsManager.getOptions()).token, this.optionsManager);
+          await this.loadHierarchizedPicker(true);
+          this.displayWhenLoaded();
+        }
       }
       else {
         this.ready = true;
@@ -187,6 +258,9 @@ export class HierarchizedPickerComponent {
   async filterTree(searchedValue) {
     this.search(searchedValue);
   }
+  async getError() {
+    return Promise.resolve(this.lastErrorMessage);
+  }
   constructor() {
     this.modaleHeight = 200;
     this.modalePosition = 'bottom';
@@ -197,30 +271,101 @@ export class HierarchizedPickerComponent {
     this.lastSearchMatchCounter = 0; // Counter of number of matches for last search
     this.setValueOnClick = true; // Tells wether we edit the picker value on click in the tree
     this.mylog = console.log; // Custom log function for debug purposes
+    this.lastErrorMessage = '';
+    this.scrollToNode = (targetNodeId = null, displayChildren = false) => {
+      var _a;
+      let scrollToValue = 0;
+      let removeClosedAndLookUp = (element, editScroll = false) => {
+        var _a, _b, _c, _d;
+        const nodeId = element === null || element === void 0 ? void 0 : element.nodeId;
+        if (!element || !nodeId) {
+          return;
+        }
+        const node = this.loadedTreeJs.nodesById[nodeId];
+        if ((_b = (_a = node === null || node === void 0 ? void 0 : node.children) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) {
+          (_c = element.classList) === null || _c === void 0 ? void 0 : _c.remove('treejs-node__close');
+        }
+        if (editScroll) {
+          scrollToValue += element.offsetTop;
+        }
+        const parent = (_d = element.parentNode) === null || _d === void 0 ? void 0 : _d.closest('.treejs-node');
+        if (parent) {
+          removeClosedAndLookUp(parent, editScroll);
+        }
+      };
+      try {
+        if (targetNodeId) {
+          const targetNode = this.loadedTreeJs.liElementsById[targetNodeId];
+          if (targetNode) {
+            removeClosedAndLookUp(targetNode, true);
+            if (displayChildren && targetNode.classList.contains('treejs-node__close')) {
+              const leftSwitcher = targetNode.querySelector('.treejs-switcher');
+              if (leftSwitcher) {
+                (_a = this.loadedTreeJs) === null || _a === void 0 ? void 0 : _a.onSwitcherClick(leftSwitcher);
+              }
+            }
+          }
+        }
+        else {
+          const checkeds = document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-node__checked');
+          checkeds.forEach((item) => removeClosedAndLookUp(item, scrollToValue == 0));
+        }
+      }
+      catch (err) {
+        this.errorToLog = "Error in showSelectedNodes";
+      }
+      if (scrollToValue && this.scrollable) {
+        this.scrollable.scrollTop = scrollToValue;
+      }
+    };
     this.getShortenedFullpath = (realFullpath) => {
       var _a, _b, _c, _d;
+      if (!realFullpath)
+        return realFullpath;
+      //TODO if one day we want shortenedfulpaths from data loading :
+      // const rdmdata = (this.optionsManager.getOptions().source == "webservice" ? this.rawDataManager.getData() : this.rawDataManager.getData().data ?? null);
+      //TODO but for now we're doing :
+      if (this.optionsManager.getOptions().source !== "webservice")
+        return realFullpath;
       let toret = realFullpath;
-      try {
-        const property_nodeid = (this.optionsManager.getOptions().origin == 'classification' ? "startNode" : "StartNodeID");
-        const property_value = this.optionsManager.getOptions().options[property_nodeid];
-        if (property_value in ["0", 0])
-          return toret;
-        if (isNumeric(property_value)) {
-          if (this.optionsManager.getOptions().origin == 'classification') {
-            const { Translations, Properties } = this.rawDataManager.getData();
-            const currentLanguage = this.optionsManager.getOptions().language;
-            toret = ((_b = (_a = Translations[currentLanguage]) === null || _a === void 0 ? void 0 : _a.translated_name) !== null && _b !== void 0 ? _b : Properties === null || Properties === void 0 ? void 0 : Properties.System_Name) + realFullpath.replace(((_d = (_c = Translations[currentLanguage]) === null || _c === void 0 ? void 0 : _c.translated_fullpath) !== null && _d !== void 0 ? _d : Properties === null || Properties === void 0 ? void 0 : Properties.System_Fullpath), "");
+      const rdmdata = this.rawDataManager.getData();
+      if (rdmdata) {
+        try {
+          const propertyName_nodeid = (this.optionsManager.getOptions().origin == 'classification' ? "startNode" : "StartNodeID");
+          let propertyValue_nodeid = 0;
+          switch (this.optionsManager.getOptions().source) {
+            case "file":
+              //TODO maybe someday ... someday far !
+              return realFullpath;
+            case "data":
+              //TODO maybe someday ... someday far !
+              if (this.optionsManager.getOptions().origin == 'classification')
+                return realFullpath;
+              propertyValue_nodeid = this.theOptions.data.key;
+              break;
+            case "webservice":
+              propertyValue_nodeid = this.optionsManager.getOptions().options[propertyName_nodeid];
+              break;
           }
-          else {
-            const { fullpath, fullpathTranslated, title, valueTranslated } = this.rawDataManager.getData();
-            toret = (valueTranslated !== null && valueTranslated !== void 0 ? valueTranslated : title) + realFullpath.replace((fullpathTranslated !== null && fullpathTranslated !== void 0 ? fullpathTranslated : fullpath), "");
+          if (["0", 0].includes(propertyValue_nodeid))
+            return toret;
+          if (isNumeric(propertyValue_nodeid)) {
+            if (this.optionsManager.getOptions().origin == 'classification') {
+              const { Translations, Properties } = rdmdata;
+              const currentLanguage = this.optionsManager.getOptions().language;
+              toret = ((_b = (_a = Translations[currentLanguage]) === null || _a === void 0 ? void 0 : _a.translated_name) !== null && _b !== void 0 ? _b : Properties === null || Properties === void 0 ? void 0 : Properties.System_Name) + realFullpath.replace(((_d = (_c = Translations[currentLanguage]) === null || _c === void 0 ? void 0 : _c.translated_fullpath) !== null && _d !== void 0 ? _d : Properties === null || Properties === void 0 ? void 0 : Properties.System_Fullpath), "");
+            }
+            else {
+              const { fullpath, fullpathTranslated, title, valueTranslated } = rdmdata;
+              toret = (valueTranslated !== null && valueTranslated !== void 0 ? valueTranslated : title) + realFullpath.replace((fullpathTranslated !== null && fullpathTranslated !== void 0 ? fullpathTranslated : fullpath), "");
+            }
           }
+          else
+            this.errorToLog = "Error in getShortenedFullpath : startnode is not number";
+        }
+        catch (error) {
+          this.errorToLog = "Error in getShortenedFullpath " + error.toString();
         }
-        else
-          this.errorToLog = "Error in getFullpath : startnode is not number";
-      }
-      catch (error) {
-        this.errorToLog = "Error in getFullpath " + error.toString();
       }
       return toret;
     };
@@ -272,7 +417,6 @@ export class HierarchizedPickerComponent {
   }
   componentDidLoad() {
     this.mylog('----- componentDidLoad beginning -----');
-    setupKeyboardNavigation(this, this.navigateInTree);
     focusMainInput(this);
   }
   displayWhenLoaded() {
@@ -316,6 +460,8 @@ export class HierarchizedPickerComponent {
       this.optionsManager.getOptions().openTreeWhenLoaded = false;
     if (!this.optionsManager.getOptions().displayRootNode)
       this.optionsManager.getOptions().displayRootNode = false;
+    if (!this.optionsManager.getOptions().keyboardNavigation)
+      this.optionsManager.getOptions().keyboardNavigation = false;
     if (!this.optionsManager.getOptions().dragAndDropEnabled)
       this.optionsManager.getOptions().dragAndDropEnabled = false;
     if (!this.optionsManager.getOptions().defaultValueIsFullpath)
@@ -333,21 +479,50 @@ export class HierarchizedPickerComponent {
     }
     await Promise.all(this.optionsManager.getOptions().defaultValue.map(async (element) => {
       if (this.optionsManager.getOptions().defaultValueIsFullpath || (!(typeof element == 'number') && !strIsNumeric(element))) {
-        if (this.optionsManager.getOptions().source !== 'webservice') {
-          let errormsg = 'The loading of nodes based on fullpath is only available on webservice mode for now!';
+        if (!defaultFromFullpaths) {
+          defaultFromFullpaths = [];
+        }
+        let errormsg = '';
+        switch (this.optionsManager.getOptions().source) {
+          case 'file':
+            errormsg = 'The loading of nodes based on fullpath is not available on file mode for now!';
+            break;
+          case 'data':
+            if (this.theOptions.origin == 'classification') {
+              errormsg = 'The loading of nodes based on fullpath is not available on file mode for the classification context for now!';
+              break;
+            }
+            const searchIdInData = function (treeData) {
+              if (treeData.data.fullpath === element || treeData.data.fullpathTranslated === element) {
+                return treeData.key;
+              }
+              if (treeData.children && treeData.children.length > 0) {
+                for (const childTree of treeData.children) {
+                  const foundId = searchIdInData(childTree);
+                  if (foundId) {
+                    return foundId;
+                  }
+                }
+              }
+              return null;
+            };
+            if (element) {
+              const foundId = searchIdInData(this.theOptions.data);
+              if (foundId)
+                defaultFromFullpaths.push(foundId);
+            }
+            break;
+          case 'webservice':
+            const valtopush = await this.rawDataManager.fetchNodeIdFromFullpath(element, this.optionsManager.getOptions()).catch(err => { this.displayPickerError(err); });
+            if (valtopush) {
+              defaultFromFullpaths.push(valtopush);
+            }
+            break;
+        }
+        if (errormsg.length > 0) {
           this.displayPickerError(errormsg);
           this.errorToLog = errormsg;
           autoAssignReach = false;
-          return;
-        }
-        else {
-          if (!defaultFromFullpaths) {
-            defaultFromFullpaths = [];
-          }
-          const valtopush = await this.rawDataManager.fetchNodeIdFromFullpath(element, this.optionsManager.getOptions()).catch(err => { this.displayPickerError(err); });
-          if (valtopush) {
-            defaultFromFullpaths.push(valtopush);
-          }
         }
       }
     }));
@@ -355,7 +530,7 @@ export class HierarchizedPickerComponent {
       this.optionsManager.getOptions().defaultValue = defaultFromFullpaths;
     }
     if (this.optionsManager.getOptions().options) {
-      if (!this.optionsManager.getOptions().options.Reach && this.optionsManager.getOptions().defaultValue.length > 0) {
+      if (this.optionsManager.getOptions().defaultValue.length > 0) {
         if (autoAssignReach) {
           this.optionsManager.getOptions().options.Reach = this.optionsManager.getOptions().defaultValue.map(element => {
             return Number(element);
@@ -385,10 +560,16 @@ export class HierarchizedPickerComponent {
       this.mylog('----- HIERARCHIZED-PICKER DEBUG MODE ON -----');
     }
     // Setup component unique ID
-    if (this.optionsManager.getOptions().id)
+    if (this.optionsManager.getOptions().id) {
       this.componentID = this.optionsManager.getOptions().id;
-    else if (!this.componentID)
-      this.componentID = (Array.from(document.querySelectorAll('reneco-hierarchized-picker')).indexOf(this.el) + 1).toString();
+    }
+    else if (!this.componentID) {
+      let componentID = (Array.from(document.querySelectorAll('reneco-hierarchized-picker')).indexOf(this.el) + 1);
+      while (document.querySelectorAll(`#hierarchized-picker-${componentID}`).length > 0) {
+        componentID++;
+      }
+      this.componentID = componentID.toString();
+    }
     if (!this.optionsManager.getOptions())
       return;
     this.optionsManager.updateDefaultValue();
@@ -456,7 +637,7 @@ export class HierarchizedPickerComponent {
       this.ignoreOptionsChanges = false;
     }
     catch (_b) {
-      console.error('Error loading webservice data!');
+      this.errorToLog = 'Error loading webservice data!';
     }
   }
   displayPickerError(errorMsg = '') {
@@ -468,11 +649,11 @@ export class HierarchizedPickerComponent {
         }
         this.displayedValue = errorMsg;
         this.isDisabled = true;
-        errorMsg = this.errorToLog;
+        this.errorToLog = errorMsg;
       }
     }
     catch (_a) {
-      console.error(errorMsg);
+      this.errorToLog = errorMsg;
     }
   }
   getApiSearchURL() {
@@ -492,17 +673,17 @@ export class HierarchizedPickerComponent {
     }
   }
   // TODO > Celine would rather like the context (thesaurus or position) to be extracted another way
-  getContextualApiURL(init = false) {
-    const { options, url } = this.optionsManager.getOptions();
+  getContextualApiURL(init = false, forcedOptions = null) {
+    const { options, url } = forcedOptions || this.optionsManager.getOptions();
     if (init && options.Reach) {
-      // Use a base URL for relative paths
-      const base = window.location.origin; // fallback for relative URLs
+      const base = window.location.origin;
       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}`;
+      const pathSegments = parsedUrl.pathname.split('/').filter(Boolean);
+      const idx = pathSegments.indexOf("getTree");
+      if (idx !== -1) {
+        pathSegments[idx] = "reach";
+      }
+      const newPathname = "/" + pathSegments.join("/");
       return `${parsedUrl.origin}${newPathname}`;
     }
     return url;
@@ -541,12 +722,10 @@ 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.theOptions.origin == 'classification' ? "ID" : "key");
-        newtree.children.forEach((value, index) => {
-          completeCurrentTreeWithTree(this.loadedTreeJs, value, this.optionsManager.getOptions());
-        });
+    const displayResults = () => {
+      if (this.searchToDisplay > -1) {
+        if (!searched)
+          this.setSearchResults([]);
         this.triggerTreeDisplay(this.rawDataManager.getData(), searched);
         displayAutocompleteWithResults(this.rawDataManager.getData(), searched, this.optionsManager, this.editValue.bind(this), this.showTree.bind(this));
         // Deploys all nodes
@@ -562,18 +741,24 @@ export class HierarchizedPickerComponent {
         });
       }
     };
+    const completeLocalTree = (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.theOptions.origin == 'classification' ? "ID" : "key");
+        newtree.children.forEach((value, index) => {
+          completeCurrentTreeWithTree(this.loadedTreeJs, value, this.optionsManager.getOptions());
+        });
+        displayResults();
+      }
+    };
     if (this.theOptions.source == 'webservice') {
       if (this.theOptions.origin == 'classification') {
         // WS Call
         this.rawDataManager.getFromClassification(this.getApiSearchURL(), Object.assign({}, this.getContextualApiParams(null, searched)), document.querySelector("#hierarchized-picker-" + this.componentID + " .loader"))
           .then((data) => {
-          displayResults(data);
-          if (!searched) {
-            this.setSearchResults([]);
-          }
+          completeLocalTree(data);
         })
           .catch(err => {
-          console.error('err', err);
+          this.errorToLog = err;
         });
       }
       else {
@@ -586,35 +771,26 @@ export class HierarchizedPickerComponent {
           deprecated: false,
         }, document.querySelector("#hierarchized-picker-" + this.componentID + " .loader"))
           .then((data) => {
-          displayResults(data);
-          if (!searched) {
-            this.setSearchResults([]);
-          }
+          completeLocalTree(data);
         })
           .catch(error => {
-          console.error("---- MY ERROR ---- ", error);
+          this.errorToLog = error;
           try {
             this.errorToLog = 'getDataFromSource 1 rejected:' + JSON.stringify(error, replacer, 2);
           }
           catch (_a) {
-            console.error('getDataFromSource 2 rejected:', JSON.stringify(error, replacer, 2));
+            this.errorToLog = JSON.stringify(error, replacer, 2);
           }
         });
       }
     }
     else {
-      if (this.searchToDisplay > -1 && searchID == this.searchToDisplay) {
-        this.rawDataManager.getData().children.forEach((value, _) => {
-          completeCurrentTreeWithTree(this.loadedTreeJs, value, this.optionsManager.getOptions());
-        });
-        displayAutocompleteWithResults(this.rawDataManager.getData(), searched, this.optionsManager, this.editValue.bind(this), this.showTree.bind(this));
+      if (this.optionsManager.getOptions().source == 'data') {
+        displayResults();
       }
-      const data = !this.optionsManager.getOptions().displayRootNode ? this.rawDataManager.getData().children : [this.rawDataManager.getData()];
-      const treeToDisplay = fillTreeWithObject([], data, searched, this.optionsManager.getOptions());
-      if (searched) {
-        this.setSearchResults(treeToDisplay);
+      else {
+        console.error("Unhandled picker settings for search scenario !!");
       }
-      this.displayTree(treeToDisplay);
     }
   }
   async triggerTreeDisplay(dataToLoad, searched) {
@@ -696,11 +872,31 @@ export class HierarchizedPickerComponent {
     this.showSelectedNodes();
     this.deactivateNodesOutOfDepthSettings();
     // Hides checkboxes in non multiple context
-    if (!this.optionsManager.getOptions().multiple) {
-      document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-checkbox').forEach((item) => (item.style.display = 'none'));
-    }
+    document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-checkbox').forEach((item) => (item.style.display = (this.theOptions.multiple ? 'inline-block' : 'none')));
   }
   onItemContextMenuItemClick(e) {
+    if (e.target && e.target.id) {
+      function getDirectParentAndDepth(nodesById, targetId) {
+        // Find the direct parent
+        const parent = Object.values(nodesById).find(node => { var _a; return (_a = node.children) === null || _a === void 0 ? void 0 : _a.some(child => child.id === targetId); }) || null;
+        if (!nodesById[targetId])
+          return null; // target not found
+        // Depth is 0 for root nodes, 1 for children of root, etc.
+        let depth = 0;
+        let current = targetId;
+        while (true) {
+          const directParent = Object.values(nodesById).find(node => { var _a; return (_a = node.children) === null || _a === void 0 ? void 0 : _a.some(child => child.id === current); });
+          if (!directParent)
+            break;
+          depth++;
+          current = directParent.id;
+        }
+        return { parent, depth };
+      }
+      const result = getDirectParentAndDepth(this.loadedTreeJs.nodesById, e.target.id);
+      e.target.depth = result.depth;
+      e.target.parentId = result.parent.id;
+    }
     this.itemContextMenuItemClick.emit(e);
   }
   setNodeAsSelected(id, treeToUpdate, userClick) {
@@ -709,8 +905,10 @@ export class HierarchizedPickerComponent {
       (this.loadedTreeJs.liElementsById[id] && this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf('readonly_node') != -1)) {
       return;
     }
-    if (treeToUpdate.getValues().indexOf(id.toString()) != -1)
+    if (!userClick && treeToUpdate.getValues().indexOf(id.toString()) != -1)
       return;
+    if (this.loadedTreeJs && !this.theOptions.multiple)
+      this.loadedTreeJs.emptyNodesCheckStatus();
     this.ignoreOptionsChanges = true;
     // Override of treejs normal workaround =>> DONT EDIT IT!
     // ----- BEGIN -----
@@ -747,46 +945,29 @@ export class HierarchizedPickerComponent {
    * This method display the current selected node to the user by expanding all it's parent nodes and scrolling inside the tree
    */
   async showSelectedNodes(addDelay = false) {
-    if (this.optionsManager.getOptions().multiple) {
-      console.warn('You are not allowed to scroll to selected nodes in multiple mode');
-      return;
-    }
-    const scrollToNode = () => {
-      let scrollToValue = 0;
-      let removeClosedAndLookUp = (element) => {
-        var _a, _b, _c, _d;
-        const nodeId = element === null || element === void 0 ? void 0 : element.nodeId;
-        if (!element || !nodeId) {
-          return;
-        }
-        const node = this.loadedTreeJs.nodesById[nodeId];
-        if ((_b = (_a = node === null || node === void 0 ? void 0 : node.children) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) {
-          (_c = element.classList) === null || _c === void 0 ? void 0 : _c.remove('treejs-node__close');
-        }
-        scrollToValue += element.offsetTop;
-        const parent = (_d = element.parentNode) === null || _d === void 0 ? void 0 : _d.closest('.treejs-node');
-        if (parent) {
-          removeClosedAndLookUp(parent);
-        }
-      };
-      try {
-        const checkeds = document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-node__checked');
-        checkeds.forEach((item) => removeClosedAndLookUp(item));
-      }
-      catch (err) {
-        // console.error("Error in showSelectedNodes", err);
-      }
-      if (scrollToValue && this.scrollable) {
-        this.scrollable.scrollTop = scrollToValue;
-      }
-    };
+    // if (this.optionsManager.getOptions().multiple) {
+    //   console.warn('You are not allowed to scroll to selected nodes in multiple mode');
+    //   return;
+    // }
     if (addDelay) {
       setTimeout(() => {
-        scrollToNode();
+        this.scrollToNode();
       }, 200);
     }
     else {
-      scrollToNode();
+      this.scrollToNode();
+    }
+  }
+  async scrollToNodeWithId(targetNodeId, displayChildren = false) {
+    const targetNode = this.loadedTreeJs.liElementsById[targetNodeId];
+    if (!targetNode) {
+      const contextualApiParams = this.getContextualApiParams(Object.assign(Object.assign({}, this.theOptions.options), { Reach: [targetNodeId] }), null, true);
+      const contextualApiURL = this.getContextualApiURL(true, Object.assign(Object.assign({}, this.theOptions), { options: contextualApiParams }));
+      this.rawDataManager.getFromClassification(contextualApiURL, contextualApiParams, document.querySelector("#hierarchized-picker-" + this.componentID + " .loader"))
+        .then(data => {
+        completeCurrentTreeWithTree(this.loadedTreeJs, data, this.theOptions);
+        this.scrollToNode(targetNodeId, displayChildren);
+      });
     }
   }
   showTree(focused) {
@@ -795,10 +976,10 @@ export class HierarchizedPickerComponent {
     clearAutocomplete();
     if (!this.canload || !this.optionsManager.getOptions().displayTree)
       return;
-    const isStillInsidePicker = isInsidePicker(this, document.activeElement);
+    const isStillInsidePicker = false; // TODO put back? >> isInsidePicker(this, document.activeElement);
     if ((focused === 'hide' || this.isDisabled) && !isStillInsidePicker) {
       this.hasFocus = ['hide'];
-      const elem = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input');
+      const elem = document.querySelector('#hierarchized-picker-' + this.componentID + ' input.hierarchized-picker-search');
       if (elem) {
         elem.value = '';
       }
@@ -819,16 +1000,16 @@ export class HierarchizedPickerComponent {
     }
     const previousShownTree = this.shownTree;
     this.shownTree = this.hasFocus.length > 0;
-    if (this.shownTree && !previousShownTree) {
-      console.log("component value", document.querySelector('#hierarchized-picker-input-' + this.componentID));
-      console.log("shouldOpenModalAbove", this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight));
+    if (this.shownTree && !previousShownTree && this.optionsManager.getOptions().mode == 'input') {
       if (this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight)) {
         this.modalePosition = 'top';
       }
       else {
         this.modalePosition = 'bottom';
       }
-      focusSearchInput(this);
+      setTimeout(() => focusSearchInput(this), 100);
+      //TODO, this this at the good location ?
+      setupKeyboardNavigation(this, this.optionsManager, this.navigateInTree);
     }
   }
   // Changes the value of the component with passed node
@@ -841,9 +1022,12 @@ export class HierarchizedPickerComponent {
       return item.nodeid == node.id;
     });
     // If the passed node already exists in the array of values, remove it
-    if (userClick && result > -1) {
-      this.value.splice(result, 1);
-    } // Else, add the node to the array of values
+    if (result > -1) {
+      if (userClick)
+        this.value.splice(result, 1);
+      else
+        return;
+    }
     else {
       if (this.optionsManager.getOptions().multiple) {
         this.value = [
@@ -869,13 +1053,23 @@ export class HierarchizedPickerComponent {
     }
     this.setDisplayedValue(this.value);
   }
+  getShortpathFromFullpath(fullpath) {
+    if (!fullpath || fullpath.indexOf('>') == -1)
+      return fullpath;
+    return fullpath.substring(fullpath.lastIndexOf(">") + 1);
+  }
   setDisplayedValue(value = null) {
     if (!value)
       value = this.value;
-    this.displayedValue = value.map(item => {
-      var _a, _b;
-      return (_b = (this.optionsManager.getOptions().isFullpath ? this.getShortenedFullpath((_a = item.fullpathTranslated) !== null && _a !== void 0 ? _a : item.fullpath) : item.shortpathTranslated)) !== null && _b !== void 0 ? _b : `Node ${item.nodeid}`;
+    const toDisplay = value.map(item => {
+      var _a, _b, _c;
+      return (this.optionsManager.getOptions().source == 'data'
+        ?
+          (_a = (this.optionsManager.getOptions().language == 'fr' ? this.getShortpathFromFullpath(item.fullpathTranslated) : this.getShortpathFromFullpath(item.fullpath))) !== null && _a !== void 0 ? _a : `Node ${item.nodeid}`
+        :
+          (_c = (this.optionsManager.getOptions().isFullpath ? this.getShortenedFullpath((_b = item.fullpathTranslated) !== null && _b !== void 0 ? _b : item.fullpath) : item.shortpathTranslated)) !== null && _c !== void 0 ? _c : `Node ${item.nodeid}`);
     }).join(';');
+    this.displayedValue = toDisplay;
   }
   // Search a value in the tree and triggers a search when necessary
   search(searched) {
@@ -942,10 +1136,11 @@ export class HierarchizedPickerComponent {
           if (init) {
             this.formatDefaultValue();
             this.showSelectedNodes();
+            this.checkFields(this.value);
           }
         })
           .catch(error => {
-          console.error('getDataFromSource 3 classification rejected:', error);
+          this.errorToLog = error;
         });
       }
       else {
@@ -958,7 +1153,7 @@ export class HierarchizedPickerComponent {
           }
         })
           .catch(error => {
-          console.error('getDataFromSource 3 legacy rejected:', error);
+          this.errorToLog = error;
         });
       }
     }
@@ -979,7 +1174,7 @@ export class HierarchizedPickerComponent {
     let enrichedValues = [];
     if (values) {
       values.forEach(element => {
-        var _a, _b;
+        var _a, _b, _c;
         let intNodeid = element.nodeid || element.ID || element.key || undefined;
         if (typeof intNodeid === 'string' && isNumeric(intNodeid)) {
           intNodeid = parseInt(intNodeid);
@@ -989,15 +1184,15 @@ export class HierarchizedPickerComponent {
           enrichedValues.push({
             nodeid: intNodeid,
             shortpathTranslated: (_a = treeNode.text) !== null && _a !== void 0 ? _a : `Node ${intNodeid}`,
-            fullpathTranslated: (_b = treeNode.fullpath) !== null && _b !== void 0 ? _b : null,
+            fullpathTranslated: (_b = treeNode.fullpathTranslated) !== null && _b !== void 0 ? _b : null,
+            fullpath: (_c = treeNode.fullpath) !== null && _c !== void 0 ? _c : null,
             hasChildren: treeNode.children && treeNode.children.length > 0
           });
-          this.setNodeAsSelected(intNodeid, this.loadedTreeJs, false);
         }
         else {
-          this.setNodeAsSelected(intNodeid, this.loadedTreeJs, false);
           console.warn("Node not found in Tree for:", intNodeid);
         }
+        this.setNodeAsSelected(intNodeid, this.loadedTreeJs, false);
       });
     }
     this.setDisplayedValue(enrichedValues);
@@ -1007,8 +1202,19 @@ export class HierarchizedPickerComponent {
   formatDefaultValue() {
     let found = 0;
     let that = this;
+    let fieldsToCheck = [];
+    function addToFieldsToCheck(item) {
+      if (Array.isArray(item)) {
+        item.forEach(el => addToFieldsToCheck(el));
+      }
+      else {
+        const exists = fieldsToCheck.some(el => (el.nodeid || el.ID) == (item.nodeid || item.ID));
+        if (!exists) {
+          fieldsToCheck.push(item);
+        }
+      }
+    }
     let recursive = function (children) {
-      //158424
       children.forEach(element => {
         that.theOptions.defaultValue.forEach(dfValue => {
           if (typeof dfValue == 'string' && isNumeric(dfValue)) {
@@ -1018,7 +1224,7 @@ export class HierarchizedPickerComponent {
             if ((typeof dfValue == 'string' && getPropertyFromNode(element, 'Properties').FullPath == dfValue) ||
               (typeof dfValue == 'number' && getPropertyFromNode(element, 'ID') == dfValue)) {
               element.nodeid = element.id;
-              that.checkFields([element]);
+              addToFieldsToCheck([element]);
               found++;
             }
           }
@@ -1028,7 +1234,7 @@ export class HierarchizedPickerComponent {
             (typeof dfValue == 'string' && getPropertyFromNode(element, 'fullpathTranslated') == dfValue) ||
               (typeof dfValue == 'number' && getPropertyFromNode(element, 'key') == dfValue)) {
               element.nodeid = element.key;
-              that.checkFields([element]);
+              addToFieldsToCheck([element]);
               found++;
             }
           }
@@ -1040,6 +1246,7 @@ export class HierarchizedPickerComponent {
     if (this.rawDataManager.getData()) {
       recursive([this.rawDataManager.getData()]);
     }
+    that.checkFields(fieldsToCheck);
     if (this.theOptions.defaultValue.length != found) {
       if (found == 0) {
         try {
@@ -1065,6 +1272,8 @@ export class HierarchizedPickerComponent {
       .join('; ');
   }
   shouldOpenModalAbove(inputElement, modaleHeight) {
+    if (this.optionsManager.getOptions().mode != 'input')
+      return false;
     const inputRect = inputElement.getBoundingClientRect();
     const spaceLeft = window.innerHeight - inputRect.y;
     return spaceLeft < modaleHeight;
@@ -1088,7 +1297,7 @@ export class HierarchizedPickerComponent {
         clickPickerModalArea(this, event);
       } }, h("div", { class: "loader", ref: el => {
         this.loader = el;
-      } }, h("div", { class: "loader-inner" }, "Loading...")), h("div", { class: `hierarchized-picker-modal ${!this.ready ? 'hidden' : ''}` }, 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) }), h("ul", { id: "autocomplete-results-area" }), h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), onClick: event => {
+      } }, h("div", { class: "loader-inner" }, "Loading...")), h("div", { class: `hierarchized-picker-modal ${!this.ready ? 'hidden' : ''}`, tabindex: "0" }, 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) }), h("ul", { id: "autocomplete-results-area" }), h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), tabindex: "0", onClick: event => {
         clickPickerModalArea(this, event);
       } }, h("div", { class: "loader", ref: el => {
         this.loader = el;
@@ -1311,6 +1520,21 @@ export class HierarchizedPickerComponent {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "errorRaised",
+        "name": "errorRaised",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is emitted when the picker suffers an error"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -1408,6 +1632,22 @@ export class HierarchizedPickerComponent {
           "tags": []
         }
       },
+      "getError": {
+        "complexType": {
+          "signature": "() => Promise<string>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "clearPicker": {
         "complexType": {
           "signature": "() => Promise<void>",
@@ -1434,9 +1674,6 @@ export class HierarchizedPickerComponent {
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
             }
           },
           "return": "Promise<void>"
@@ -1445,6 +1682,28 @@ export class HierarchizedPickerComponent {
           "text": "This method display the current selected node to the user by expanding all it's parent nodes and scrolling inside the tree",
           "tags": []
         }
+      },
+      "scrollToNodeWithId": {
+        "complexType": {
+          "signature": "(targetNodeId: any, displayChildren?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }