reneco-hierarchized-picker 0.4.3-beta.2 → 0.4.3-beta.20

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

@@ -78,14 +78,42 @@ 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)) {
+        if (val1.length !== val2.length || val1.some((v, i) => v !== val2[i])) {
+          diffs.push(fullKey);
+        }
+      }
+      else if (val1 &&
+        val2 &&
+        typeof val1 === 'object' &&
+        typeof val2 === 'object') {
+        diffs.push(...this.diffKeys(val1, val2, fullKey));
+      }
+      else if (val1 !== val2) {
+        diffs.push(fullKey);
+      }
+    }
+    return diffs;
+  }
   async setNewOption(newValue, oldValue = null) {
     this.ready = false;
     // --------------------------------------- DEPRECATED ?
@@ -104,6 +132,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 +141,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 +159,29 @@ 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') {
+    console.log("Setnewoptions 01", newValue, oldValue);
+    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;
+        }
+        console.log("Setnewoptions 02");
+        const propDiffs = this.diffKeys(oldValue, this.optionsManager.initializeOptions(newValue));
+        const noReloadProps = ["multiple"];
+        console.log("Setnewoptions 03", propDiffs);
+        if (propDiffs.length == 1 && propDiffs.some(item => noReloadProps.includes(item))) {
+          const propChanged = propDiffs[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,7 +235,12 @@ export class HierarchizedPickerComponent {
   async filterTree(searchedValue) {
     this.search(searchedValue);
   }
+  async getError() {
+    return Promise.resolve(this.lastErrorMessage);
+  }
   constructor() {
+    this.modaleHeight = 200;
+    this.modalePosition = 'bottom';
     this.canload = true; // Determines wether the component may be loaded
     this.ready = false; // State to determine if all the elements of the component have been loaded
     this.searchToDisplay = 0; // Counter to trigger the research on proper time
@@ -195,30 +248,80 @@ 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;
       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), "");
-          }
-          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), "");
+      const rdmdata = this.rawDataManager.getData();
+      if (rdmdata) {
+        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 } = 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 getFullpath : startnode is not number";
+        }
+        catch (error) {
+          this.errorToLog = "Error in getFullpath " + error.toString();
         }
-        else
-          this.errorToLog = "Error in getFullpath : startnode is not number";
-      }
-      catch (error) {
-        this.errorToLog = "Error in getFullpath " + error.toString();
       }
       return toret;
     };
@@ -270,7 +373,6 @@ export class HierarchizedPickerComponent {
   }
   componentDidLoad() {
     this.mylog('----- componentDidLoad beginning -----');
-    setupKeyboardNavigation(this);
     focusMainInput(this);
   }
   displayWhenLoaded() {
@@ -314,6 +416,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)
@@ -353,7 +457,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,8 +489,13 @@ export class HierarchizedPickerComponent {
     // Setup component unique 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();
@@ -394,7 +503,9 @@ export class HierarchizedPickerComponent {
     this.canload = result.toret;
     this.errorToLog = result.errorToLog;
     await this.initComponent();
-    applyPickerTheme(this.optionsManager.getOptions().theme, defaultPickerTheme);
+    let defaultPickerThemeForInit = defaultPickerTheme;
+    defaultPickerTheme.modale.height = this.modaleHeight + "px";
+    applyPickerTheme(this.optionsManager.getOptions().theme, defaultPickerThemeForInit);
     // Displays option values
     this.mylog(this.optionsManager.getOptions());
     window.addEventListener('click', (evt) => {
@@ -452,7 +563,7 @@ export class HierarchizedPickerComponent {
       this.ignoreOptionsChanges = false;
     }
     catch (_b) {
-      console.error('Error loading webservice data!');
+      this.errorToLog = 'Error loading webservice data!';
     }
   }
   displayPickerError(errorMsg = '') {
@@ -464,11 +575,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() {
@@ -488,17 +599,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}/${options.Reach}`;
+      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;
@@ -510,7 +621,6 @@ export class HierarchizedPickerComponent {
     if (!init)
       delete optionsToReturn.Reach;
     if (optionsToReturn.Reach) {
-      delete optionsToReturn.Reach;
       if ("startNode" in optionsToReturn) {
         optionsToReturn.startingnode = optionsToReturn.startNode;
         delete optionsToReturn.startNode;
@@ -570,7 +680,7 @@ export class HierarchizedPickerComponent {
           }
         })
           .catch(err => {
-          console.error('err', err);
+          this.errorToLog = err;
         });
       }
       else {
@@ -589,12 +699,12 @@ export class HierarchizedPickerComponent {
           }
         })
           .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);
           }
         });
       }
@@ -675,9 +785,11 @@ export class HierarchizedPickerComponent {
         this.ignoreOptionsChanges = false;
       },
     });
-    Object.values(myTree.liElementsById).forEach((el) => {
-      el.classList.remove('treejs-node__searchmatch');
-    });
+    if (this.searchResultData.length == 0) {
+      Object.values(myTree.liElementsById).forEach((el) => {
+        el.classList.remove('treejs-node__searchmatch');
+      });
+    }
     this.loadedTreeJs = myTree;
     this.collapseAllNodes();
     // TODO Make something that makes sense, this is a temporary quick fix :
@@ -691,21 +803,44 @@ 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) {
+    console.log("setNodeAsSelected", id);
     // 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)) {
       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 -----
@@ -742,46 +877,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) {
@@ -793,7 +911,7 @@ export class HierarchizedPickerComponent {
     const isStillInsidePicker = 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 = '';
       }
@@ -814,8 +932,16 @@ export class HierarchizedPickerComponent {
     }
     const previousShownTree = this.shownTree;
     this.shownTree = this.hasFocus.length > 0;
-    if (this.shownTree && !previousShownTree) {
-      focusSearchInput(this);
+    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';
+      }
+      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
@@ -828,9 +954,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 = [
@@ -859,10 +988,11 @@ export class HierarchizedPickerComponent {
   setDisplayedValue(value = null) {
     if (!value)
       value = this.value;
-    this.displayedValue = value.map(item => {
+    const toDisplay = 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}`;
     }).join(';');
+    this.displayedValue = toDisplay;
   }
   // Search a value in the tree and triggers a search when necessary
   search(searched) {
@@ -929,10 +1059,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 {
@@ -945,7 +1076,7 @@ export class HierarchizedPickerComponent {
           }
         })
           .catch(error => {
-          console.error('getDataFromSource 3 legacy rejected:', error);
+          this.errorToLog = error;
         });
       }
     }
@@ -960,13 +1091,14 @@ export class HierarchizedPickerComponent {
     this.translateDataForTree(this.rawDataManager.getData());
   }
   checkFields(values, allowSetValueOnClick = true) {
+    console.log("checkFields", values);
     if (!this.loadedTreeJs)
       return;
     this.setValueOnClick = allowSetValueOnClick;
     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);
@@ -976,15 +1108,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);
@@ -994,8 +1126,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)) {
@@ -1005,7 +1148,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++;
             }
           }
@@ -1015,7 +1158,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++;
             }
           }
@@ -1027,6 +1170,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 {
@@ -1051,6 +1195,13 @@ export class HierarchizedPickerComponent {
       .map(item => { var _a, _b; return (_b = (_a = this.getShortenedFullpath(item.fullpathTranslated)) !== null && _a !== void 0 ? _a : item.fullpath) !== null && _b !== void 0 ? _b : `Node ${item.nodeid}`; })
       .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;
+  }
   render() {
     return this.optionsManager.getOptions() ? (h("div", { id: 'hierarchized-picker-' + this.componentID, class: 'hierarchized-picker ' + (this.isDisabled ? 'readonly-mode' : '') }, this.optionsManager.getOptions().mode == 'input' ? (h("div", { class: "hierarchized-picker-container" }, h("div", { style: { display: 'none' }, ref: el => {
         this.loader = el;
@@ -1066,11 +1217,11 @@ export class HierarchizedPickerComponent {
       } }, h("input", { class: "native-input sc-ion-input-md", "aria-labelledby": "ion-input-13-lbl", autocapitalize: "off", autocomplete: "off", autocorrect: "off", name: "ion-input-13", placeholder: "", readonly: "", spellcheck: "false", type: "text", value: this.displayedValue, title: this.getFullpathTooltip() })), this.displayedValue && !this.isDisabled && this.canload ? h("span", { class: "reneco reneco-close", onClick: () => this.clearPicker() }) : ''), h("div", { ref: el => {
         // Uncomment if you want the modale of picker in input mode to scroll to selected node on openning >>>
         this.scrollable = el;
-      }, class: 'hierarchized-picker-modal-area ' + (!this.shownTree ? ' hidden ' : ''), onClick: event => {
+      }, class: `hierarchized-picker-modal-area ${!this.shownTree ? ' hidden ' : ''} ${this.modalePosition == 'top' ? "display-modale-top" : ""}`, onClick: event => {
         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: "" + this.componentID }, 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: "" + this.componentID, onClick: event => {
         clickPickerModalArea(this, event);
       } }, h("div", { class: "loader", ref: el => {
         this.loader = el;
@@ -1278,6 +1429,36 @@ export class HierarchizedPickerComponent {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "navigateInTree",
+        "name": "navigateInTree",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "This event is emitted when the user navigates in the tree"
+        },
+        "complexType": {
+          "original": "any",
+          "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() {
@@ -1375,6 +1556,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>",
@@ -1401,9 +1598,6 @@ export class HierarchizedPickerComponent {
           "references": {
             "Promise": {
               "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
             }
           },
           "return": "Promise<void>"
@@ -1412,6 +1606,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": []
+        }
       }
     };
   }