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

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

@@ -13,6 +13,7 @@ function applyPickerTheme(theme, defaultTheme) {
   docstyle.setProperty('--hpicker-theme-palette-background-default', (theme === null || theme === void 0 ? void 0 : theme.palette.background.default) || defaultTheme.palette.background.default);
   docstyle.setProperty('--hpicker-theme-palette-background-light', (theme === null || theme === void 0 ? void 0 : theme.palette.background.light) || defaultTheme.palette.background.light);
   docstyle.setProperty('--hpicker-theme-palette-background-dark', (theme === null || theme === void 0 ? void 0 : theme.palette.background.dark) || defaultTheme.palette.background.dark);
+  docstyle.setProperty('--hpicker-theme-palette-font-color', (theme === null || theme === void 0 ? void 0 : theme.palette.text.primary) || defaultTheme.palette.text.primary);
   docstyle.setProperty('--hpicker-theme-palette-input-background-color', (theme === null || theme === void 0 ? void 0 : theme.palette.input.background) || defaultTheme.palette.input.background);
   docstyle.setProperty('--hpicker-theme-palette-input-border-style', (theme === null || theme === void 0 ? void 0 : theme.palette.input.borderStyle) || defaultTheme.palette.input.borderStyle);
   docstyle.setProperty('--hpicker-theme-typography-body-font-size', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontSize) || defaultTheme.typography.body.fontSize);
@@ -323,49 +324,6 @@ Tree.prototype.bindEvent = function (ele) {
     else if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher')) {
       this.onSwitcherClick(target);
     }
-    const hasUndefinedchild = e.target.parentNode.querySelectorAll(".treejs-switcher").length > 0 && e.target.parentNode.querySelectorAll('ul').length == 0;
-    //CUSTOM
-    const childspans = Array.prototype.slice.call(e.target.parentNode.querySelectorAll('ul > li > span.treejs-label')).filter((ele) => {
-      return ele.parentNode.parentNode.parentNode === e.target.parentNode;
-    });
-    let undefinedChildren = [];
-    //This may be a problem the day a node value is "undefined"
-    undefinedChildren = childspans.filter(ele => {
-      return ele.textContent === 'undefined';
-    });
-    // If the user clicked on an unloaded node
-    if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher') && (undefinedChildren.length > 0 || hasUndefinedchild)) {
-      // Clear the subnode HTML
-      if (undefinedChildren.length > 0) {
-        e.target.parentNode.querySelector('ul').innerHTML = '';
-      }
-      // 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(contextualApiURL, contextualApiParams, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
-            .then(data => {
-            this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
-          });
-        }
-        else {
-          // WS Call
-          this.options.rawDataManager
-            .getFromSource(this.options.parentApi.theOptions.url, {
-            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);
-          });
-        }
-      }
-      this.onSwitcherClick(target);
-    }
   }, false);
 };
 Tree.prototype.onItemClick = async function (id, rightclick = false) {
@@ -374,8 +332,6 @@ Tree.prototype.onItemClick = async function (id, rightclick = false) {
     return;
   const pickerValue = await this.options.parentApi.getValue();
   if (!rightclick || !pickerValue || pickerValue.nodeid != id) {
-    if (!this.options.parentApi.theOptions.multiple)
-      this.emptyNodesCheckStatus();
     this.options.parentApi.setNodeAsSelected(id, this, true);
   }
 };
@@ -502,6 +458,48 @@ Tree.prototype.markWillUpdateNode = function (node) {
   this.willUpdateNodesById[node.id] = node;
 };
 Tree.prototype.onSwitcherClick = function (target) {
+  const hasUndefinedchild = target.parentNode.querySelectorAll(".treejs-switcher").length > 0 && target.parentNode.querySelectorAll('ul').length == 0;
+  //CUSTOM
+  const childspans = Array.prototype.slice.call(target.parentNode.querySelectorAll('ul > li > span.treejs-label')).filter((ele) => {
+    return ele.parentNode.parentNode.parentNode === target.parentNode;
+  });
+  let undefinedChildren = [];
+  //This may be a problem the day a node value is "undefined"
+  undefinedChildren = childspans.filter(ele => {
+    return ele.textContent === 'undefined';
+  });
+  // If the user clicked on an unloaded node
+  if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher') && (undefinedChildren.length > 0 || hasUndefinedchild)) {
+    // Clear the subnode HTML
+    if (undefinedChildren.length > 0) {
+      target.parentNode.querySelector('ul').innerHTML = '';
+    }
+    // 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(contextualApiURL, contextualApiParams, document.querySelector("#hierarchized-picker-" + this.options.parentApi.componentID + " .loader"))
+          .then(data => {
+          this.options.completeCurrentTreeWithTree(this, data, this.options.parentApi.theOptions);
+        });
+      }
+      else {
+        // WS Call
+        this.options.rawDataManager
+          .getFromSource(this.options.parentApi.theOptions.url, {
+          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);
+        });
+      }
+    }
+  }
   const liEle = target.parentNode;
   const ele = liEle.lastChild;
   const height = ele.scrollHeight;
@@ -539,6 +537,9 @@ Tree.prototype.onSwitcherClick = function (target) {
       },
     });
   }
+  return new Promise((resolve) => {
+    resolve(this);
+  });
 };
 Tree.prototype.walkUp = function (node, changeState) {
   const { parent } = node;
@@ -670,11 +671,10 @@ Tree.prototype.createLiEle = function (node, closed) {
   else {
     li.classList.add('treejs-placeholder');
   }
-  if (!this.options.parentApi || (this.options.parentApi && this.options.parentApi.theOptions.multiple)) {
-    const checkbox = document.createElement('span');
-    checkbox.classList.add('treejs-checkbox');
-    li.appendChild(checkbox);
-  }
+  const checkbox = document.createElement('span');
+  checkbox.classList.add('treejs-checkbox');
+  checkbox.style.display = ((!this.options.parentApi || (this.options.parentApi && this.options.parentApi.theOptions.multiple)) ? "inline-block" : "none");
+  li.appendChild(checkbox);
   const label = document.createElement('span');
   label.classList.add('treejs-label');
   const text = document.createTextNode(node.text);
@@ -17995,6 +17995,10 @@ function isInstanceOfIConf(object) {
     toret = false;
     errorToLog = "options.displayRootNode value '" + object.displayRootNode + "' doesn't meet interface IConf requirements";
   }
+  if (!((!object.keyboardNavigation && typeof object.keyboardNavigation != 'boolean') || typeof object.keyboardNavigation == 'boolean')) {
+    toret = false;
+    errorToLog = "options.keyboardNavigation value '" + object.keyboardNavigation + "' doesn't meet interface IConf requirements";
+  }
   if (!((!object.dragAndDropEnabled && typeof object.dragAndDropEnabled != 'boolean') || typeof object.dragAndDropEnabled == 'boolean')) {
     toret = false;
     errorToLog = "options.dragAndDropEnabled value '" + object.dragAndDropEnabled + "' doesn't meet interface IConf requirements";
@@ -18091,17 +18095,18 @@ const defaultPickerTheme = {
     primary: {
       main: '#888',
       light: '#888',
-      contrastText: '#000',
+      contrastText: '#000', // Text color of the selected node
     },
     background: {
       default: '#ccc',
       light: '#eee',
       main: '#000',
-      dark: '#fff',
+      dark: '#fff', // Background of the whole tree
     },
     text: {
-      primary: '#000',
+      primary: '#000', // Text color
     },
+    // For all inputs in the component, includes in modale mode the display input and the search input
     input: {
       background: '#fff',
       borderStyle: 'none'
@@ -18362,10 +18367,12 @@ class OptionsManager {
       showAutocomplete: false,
       openTreeWhenLoaded: false,
       displayRootNode: false,
+      keyboardNavigation: false,
       dragAndDropEnabled: false,
       errorsInInput: true,
       isFullpath: true,
       defaultValue: [],
+      defaultValueIsFullpath: false,
     };
     const validatedOptions = Object.assign(Object.assign({}, defaults), options);
     // Validate specific fields
@@ -18452,7 +18459,7 @@ function findNodeById(tree, nodeId) {
 /**
  * Fills the tree with nodes based on the provided object.
  */
-function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
+function fillTreeWithObject(tree, myObject, searched, options) {
   const searchResultPresentsUnMatched = options.searchResultPresentsUnMatched;
   if (myObject && myObject.length) {
     myObject.forEach(value => {
@@ -18484,7 +18491,6 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
       const objToPush = {
         id: keyPropFromNode,
         nodeId: keyPropFromNode,
-        depth,
         text: valueTranslatedPropFromNode,
         fullpath: fullpathPropFromNode,
         fullpathTranslated: fullpathTranslatedPropFromNode,
@@ -18493,7 +18499,7 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
         isDesaturated: false,
         searchMatch: false,
       };
-      const childTree = fillTreeWithObject(objToPush.children, childrenPropFromNode, searched, options, depth + 1);
+      const childTree = fillTreeWithObject(objToPush.children, childrenPropFromNode, searched, options);
       let pushMe = false;
       if (searched) {
         const matched = searchValue(objToPush, false, searched);
@@ -18519,6 +18525,11 @@ function completeCurrentTreeWithTree(treeJsInstance, newTree, options) {
   var _a;
   const ElmID = newTree.key || newTree.id || newTree.ID;
   const targetNode = findNodeById(treeJsInstance, ElmID);
+  if (ElmID == 0 && newTree.children && newTree.children.length > 0) {
+    newTree.children.forEach(child => {
+      completeCurrentTreeWithTree(treeJsInstance, child, options);
+    });
+  }
   if (targetNode) {
     targetNode.children = [];
     let ulElem = (_a = treeJsInstance.liElementsById[ElmID]) === null || _a === void 0 ? void 0 : _a.querySelector('ul');
@@ -18534,6 +18545,11 @@ function completeCurrentTreeWithTree(treeJsInstance, newTree, options) {
       targetNode.children.push(item);
       treeJsInstance.nodesById[item.id] = item;
       treeJsInstance.liElementsById[item.id] = liElm;
+      if (item.children && item.children.some(child => Object.keys(child).length > 0)) {
+        newTree.children.forEach(child => {
+          completeCurrentTreeWithTree(treeJsInstance, child, options);
+        });
+      }
     });
   }
 }
@@ -18576,10 +18592,100 @@ function clearAutocomplete(eraseResults = false) {
   }
 }
 
-// Utility functions
-function isInsidePicker(component, target) {
-  return target !== null && component.el.contains(target);
-}
+let focusedNodeIndex = 0;
+function setupKeyboardNavigation(component, optionsManager, navigateInTree) {
+  if (!optionsManager.getOptions().keyboardNavigation)
+    return;
+  const treeArea = component.el.querySelector('.hierarchized-picker-tree-area') || component.el.querySelector('.hierarchized-picker-raw-tree-area');
+  if (!treeArea)
+    return;
+  function focusNode(allLiElements, liElementToFocus) {
+    Object.values(allLiElements).forEach((liNode) => {
+      liNode.classList.remove('treejs-node__focused');
+    });
+    liElementToFocus.classList.add('treejs-node__focused');
+  }
+  function findAllTreeNodes(treeNodes, liElementsById) {
+    let allNodes = [];
+    const traverse = (nodes) => {
+      nodes.forEach(node => {
+        allNodes.push(node);
+        if (node.children && node.children.length > 0 && !liElementsById[node.id].classList.contains("treejs-node__close")) {
+          traverse(node.children);
+        }
+      });
+    };
+    traverse(treeNodes);
+    return allNodes;
+  }
+  focusedNodeIndex = 0;
+  if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes) {
+    focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]);
+  }
+  if (!component._keydownListenerAdded) {
+    component._keydownListenerAdded = true;
+    component.el.addEventListener('keydown', (event) => {
+      var _a, _b;
+      event.stopPropagation();
+      const tree = component.loadedTreeJs;
+      let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
+      if (!tree || !treeNodesFromTree.length)
+        return;
+      let spaceNode = treeNodesFromTree[focusedNodeIndex];
+      let activeNode = treeNodesFromTree[focusedNodeIndex];
+      let liElement = tree.liElementsById[activeNode.id];
+      const handledEvents = ['tab', '0', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'];
+      switch (event.key.toLowerCase()) {
+        case 'tab':
+        case '0':
+          event.preventDefault();
+          { //(spaceNode?.nodeId) {
+            component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
+            if (optionsManager.getOptions().mode != "tree" && !optionsManager.getOptions().multiple) {
+              setTimeout(() => {
+                component.showTree('hide');
+                // TODO put back? >> focusMainInput(component);
+              }, 100);
+            }
+          }
+          break;
+        case 'arrowup':
+          event.preventDefault();
+          focusedNodeIndex = Math.max(focusedNodeIndex - 1, 0);
+          const newActiveNodeUp = treeNodesFromTree[focusedNodeIndex];
+          const newLiElementUp = tree.liElementsById[newActiveNodeUp.id];
+          newLiElementUp.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          focusNode(tree.liElementsById, newLiElementUp);
+          break;
+        case 'arrowdown':
+          event.preventDefault();
+          focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodesFromTree.length - 1);
+          const newActiveNodeDown = treeNodesFromTree[focusedNodeIndex];
+          const newLiElementDown = tree.liElementsById[newActiveNodeDown.id];
+          focusNode(tree.liElementsById, newLiElementDown);
+          newLiElementDown.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          break;
+        case 'arrowleft':
+          event.preventDefault();
+          const leftSwitcher = liElement.querySelector('.treejs-switcher');
+          if (leftSwitcher) {
+            (_a = component.loadedTreeJs) === null || _a === void 0 ? void 0 : _a.onSwitcherClick(leftSwitcher);
+          }
+          break;
+        case 'arrowright':
+          event.preventDefault();
+          const rightSwitcher = liElement.querySelector('.treejs-switcher');
+          if (rightSwitcher) {
+            (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(rightSwitcher);
+          }
+          break;
+      }
+      if (handledEvents.includes(event.key.toLowerCase()))
+        navigateInTree.emit(event);
+    });
+  }
+}
+
 // Focus management
 async function focusSearchInput(component) {
   const searchInput = component.el.querySelector('search-input input');
@@ -18610,19 +18716,6 @@ function handleFocusEvent(component, type) {
     component.showTree('hide');
   }
 }
-function manageFocusOut(component, event) {
-  const relatedTarget = event.relatedTarget;
-  if (!isInsidePicker(component, relatedTarget)) {
-    setTimeout(() => {
-      if (!isInsidePicker(component, document.activeElement)) {
-        handleFocusEvent(component, 'hide');
-      }
-    }, 100);
-  }
-  else {
-    handleFocusEvent(component, 'search');
-  }
-}
 function clickPickerModalArea(component, _event) {
   if (component.pickerClass === 'fieldError') {
     component.showTree('hide');
@@ -18633,83 +18726,18 @@ function clickPickerModalArea(component, _event) {
   else {
     component.mylog('Ignored modal click');
   }
+  if (component.theOptions.mode == 'tree') {
+    setupKeyboardNavigation(component, component.optionsManager, component.navigateInTree);
+  }
 }
 // Exposed event handlers
 function focusInSearchEvent(component) {
   handleFocusEvent(component, 'search');
 }
 function focusOutSearchEvent(component, event) {
-  manageFocusOut(component, event);
-}
-
-function setupKeyboardNavigation(component, navigateInTree) {
-  const treeArea = component.el.querySelector('.hierarchized-picker-tree-area');
-  if (!treeArea)
-    return;
-  let focusedNodeIndex = 0;
-  function focusNode(allLiElements, liElementToFocus) {
-    Object.values(allLiElements).forEach((liNode) => {
-      liNode.classList.remove('treejs-node__focused');
-    });
-    liElementToFocus.classList.add('treejs-node__focused');
-  }
-  component.el.addEventListener('keydown', (event) => {
-    var _a, _b;
-    event.stopPropagation();
-    const tree = component.loadedTreeJs;
-    const treeNodesFromTree = tree.treeNodes;
-    if (!tree || !treeNodesFromTree.length)
-      return;
-    const spaceNode = treeNodesFromTree[focusedNodeIndex];
-    const activeNode = treeNodesFromTree[focusedNodeIndex];
-    const liElement = tree.liElementsById[activeNode.id];
-    switch (event.key) {
-      case 'Tab':
-      case '0':
-        event.preventDefault();
-        { //(spaceNode?.nodeId) {
-          component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
-          component.showTree('hide');
-          setTimeout(() => focusMainInput(), 100);
-        }
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        focusedNodeIndex = Math.max(focusedNodeIndex - 1, 0);
-        const newActiveNodeUp = treeNodesFromTree[focusedNodeIndex];
-        const newLiElementUp = tree.liElementsById[newActiveNodeUp.id];
-        focusNode(tree.liElementsById, newLiElementUp);
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodesFromTree.length - 1);
-        const newActiveNodeDown = treeNodesFromTree[focusedNodeIndex];
-        const newLiElementDown = tree.liElementsById[newActiveNodeDown.id];
-        focusNode(tree.liElementsById, newLiElementDown);
-        break;
-      case 'ArrowLeft':
-        event.preventDefault();
-        const leftSwitcher = liElement.querySelector('.treejs-switcher');
-        if (leftSwitcher) {
-          (_a = component.loadedTreeJs) === null || _a === void 0 ? void 0 : _a.onSwitcherClick(leftSwitcher);
-          component.showTree('hide');
-        }
-        break;
-      case 'ArrowRight':
-        event.preventDefault();
-        const rightSwitcher = liElement.querySelector('.treejs-switcher');
-        if (rightSwitcher) {
-          (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(rightSwitcher);
-        }
-        break;
-    }
-    navigateInTree.emit(event.key);
-  });
-  if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes)
-    setTimeout(() => focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]), 100);
 }
 
-const hierarchizedPickerCss = "reneco-hierarchized-picker .hierarchized-picker-raw-tree-area{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader{position:absolute;z-index:1;min-width:100%;min-height:100%;background:#FFFFFF99;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader .loader-inner{background:#FFF;padding:20px;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader:not(.loading){display:none}reneco-hierarchized-picker .scrollable{overflow-y:auto;position:relative}reneco-hierarchized-picker .treejs{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--hpicker-theme-typography-tree-font-size, 14px) !important;font-weight:var(--hpicker-theme-typography-tree-font-weight, 400) !important}reneco-hierarchized-picker .treejs *:after,reneco-hierarchized-picker .treejs *:before{-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .treejs>.treejs-node{padding-left:0}reneco-hierarchized-picker .treejs .treejs-nodes{list-style:none;padding-left:20px;overflow:hidden;-webkit-transition:height 150ms ease-out, opacity 150ms ease-out;-o-transition:height 150ms ease-out, opacity 150ms ease-out;transition:height 150ms ease-out, opacity 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-node{cursor:pointer;overflow:hidden;position:relative}reneco-hierarchized-picker .treejs .treejs-node.treejs-placeholder{padding-left:20px}reneco-hierarchized-picker .treejs .treejs-switcher{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative;-webkit-transition:-webkit-transform 150ms ease-out;transition:-webkit-transform 150ms ease-out;-o-transition:transform 150ms ease-out;transition:transform 150ms ease-out;transition:transform 150ms ease-out, -webkit-transform 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-switcher:before{position:absolute;top:8px;left:6px;display:block;content:' ';border:4px solid transparent;border-top:4px solid rgba(0, 0, 0, 0.4);-webkit-transition:border-color 150ms;-o-transition:border-color 150ms;transition:border-color 150ms}reneco-hierarchized-picker .treejs .treejs-switcher:hover:before{border-top:4px solid var(--hpicker-theme-palette-font-color)}reneco-hierarchized-picker .treejs-node__checked>.treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-primary-contrastText) !important}reneco-hierarchized-picker .treejs-node__focused{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-switcher{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-nodes{height:0}reneco-hierarchized-picker .treejs .treejs-checkbox{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;cursor:pointer;position:absolute;top:2px;content:' ';display:block;width:16px;height:16px;border:1px solid #d9d9d9;border-radius:2px}reneco-hierarchized-picker .treejs .treejs-checkbox:hover:before{-webkit-box-shadow:0 0 2px 1px #1890ff;box-shadow:0 0 2px 1px #1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:4px;left:5px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}reneco-hierarchized-picker .treejs .treejs-node__halfchecked{background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c))}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:9px;left:3px;width:10px;height:2px;background-color:#fff}reneco-hierarchized-picker .treejs .treejs-node__disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25)}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox{cursor:not-allowed}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:before{cursor:not-allowed;border-color:#d9d9d9 !important;background-color:#f5f5f5 !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:hover:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-label{vertical-align:middle}reneco-hierarchized-picker .treejs .treejs-node__deprecated>.treejs-label{text-decoration:line-through}reneco-hierarchized-picker .treejs .treejs-node__desaturated>.treejs-label{opacity:.5}reneco-hierarchized-picker .treejs .treejs-node__searchmatch>.treejs-label{font-weight:bolder}reneco-hierarchized-picker .treejs .dragging{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c));display:inline;opacity:.9;padding:11px 0px;display:block}reneco-hierarchized-picker .treejs .dragover{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c))}reneco-hierarchized-picker .treejs .dragover-over::after{content:\"\";display:block;width:2px;height:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-before::after{content:\"\";display:block;height:2px;width:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-after::after{content:\"\";display:block;height:2px;width:100%;position:absolute;bottom:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .fieldError{color:red !important}reneco-hierarchized-picker .hidden{display:none;opacity:0}reneco-hierarchized-picker ul.treejs-nodes:first-child{padding-left:0px !important;margin-top:0px !important;margin-left:0px !important;background-color:var(--hpicker-theme-palette-background-dark)}reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){margin:0 !important;padding-left:15px !important;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF)))}reneco-hierarchized-picker ul.treejs-nodes{margin-left:15px !important;padding-left:0px !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node ul.treejs-nodes{margin:11px 0 0 0 !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node__close ul.treejs-nodes{margin:0 !important}reneco-hierarchized-picker li.treejs-node__close{background-color:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-light, #FAFAFA)))}reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c));padding-bottom:0px !important}reneco-hierarchized-picker li:not(.treejs-node__close) ul.treejs-nodes li{margin-top:2px !important}reneco-hierarchized-picker ul li:last-child{margin-bottom:0px !important}reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--hpicker-theme-palette-primary-light) !important;color:var(--hpicker-theme-palette-primary-ContrastText, var(--mui-palette-primary-ContrastText, var(--ion-color-primary-contrast, #000)))!important}reneco-hierarchized-picker li.treejs-node{padding:2px 0px;margin-bottom:2px}reneco-hierarchized-picker .treejs-node.readonly_node{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:darkgrey}reneco-hierarchized-picker .treejs-node:not(.readonly_node){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black))}reneco-hierarchized-picker .hierarchized-picker-container{position:relative;width:100%}reneco-hierarchized-picker .hierarchized-picker-input-area{background-color:transparent !important;display:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper{padding-left:10px !important}reneco-hierarchized-picker .hierarchized-picker-input{-ms-flex:2;flex:2}reneco-hierarchized-picker .hierarchized-picker-input input{width:100%}reneco-hierarchized-picker .hierarchized-picker-input.readonly{pointer-events:none;cursor:initial}reneco-hierarchized-picker .hierarchized-picker-label{position:stacked;margin-left:5px}reneco-hierarchized-picker .hierarchized-picker-tree-area{padding-top:10px}reneco-hierarchized-picker .hierarchized-picker-modal-area{position:absolute;width:100%;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;z-index:10;overflow:scroll;top:20px;min-height:100px;max-height:var(--hpicker-theme-modal-height, \"200px\") !important;-webkit-box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);border-radius:4px;margin-right:0px !important}reneco-hierarchized-picker .hierarchized-picker-modal-area.display-modale-top{bottom:30px !important;top:unset !important}reneco-hierarchized-picker .hierarchized-picker-modal{padding:0px 15px}reneco-hierarchized-picker .hierarchized-picker{display:-ms-flexbox;display:flex;width:100%;font-family:'Roboto', sans-serif}reneco-hierarchized-picker .hierarchized-picker-spinner{margin:35px 0px 0px 145px}reneco-hierarchized-picker .reneco:before{position:relative;top:1px}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco:hover{cursor:pointer}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco-close{color:var(--ion-color-danger, red) !important;padding-left:10px}reneco-hierarchized-picker .treejs .treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-dark-shade, #121212)))}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before,reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;border-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker #autocomplete-results-area{position:absolute;margin-top:48px;background-color:white;left:15px;z-index:10;padding:0px 5px;max-width:340px;max-height:110px;overflow:auto}reneco-hierarchized-picker #autocomplete-results-area li{list-style-type:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;margin:1px}reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node{padding:11px 0px;display:block}reneco-hierarchized-picker input[title]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}reneco-hierarchized-picker input{background-color:var(--hpicker-theme-palette-input-background-color,  #eeeeee);border-style:var(--hpicker-theme-palette-input-border-style,  solid)}reneco-hierarchized-picker input:focus-visible{outline-color:unset !important}.hierarchized-picker-raw-tree-area.readonly li.treejs-node .treejs-switcher{pointer-events:all}::-webkit-scrollbar-thumb{background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433)));width:8px;margin:5px;border-radius:5px}::-webkit-scrollbar{background:var(--ion-color-medium-tint, #E0E0E0);width:8px;height:8px;margin:5px;cursor:pointer;border-radius:5px}::-webkit-scrollbar-corner{background-color:var(--ion-color-light-tint, #FFF)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__close{background-color:var(--ion-color-dark-tint, #424242);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-dark, #212121);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--ion-color-background, var(--hpicker-theme-palette-background-default, rgba(221, 169, 37, 0.18)));color:var(--ion-color-primary-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker .treejs-switcher:before{border-top-color:var(--ion-color-dark-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked .treejs-switcher:before{color:var(--ion-color-light-contrast, #111111) !important}[class$=\"-dark\"] reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){background-color:var(--ion-color-light-contrast, #111111) !important}";
+const hierarchizedPickerCss = "reneco-hierarchized-picker .hierarchized-picker-raw-tree-area{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker div:focus{outline:none}reneco-hierarchized-picker .loader{color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black)) !important;position:absolute;z-index:1;min-width:100%;min-height:100%;background:#FFFFFF99;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader .loader-inner{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-light, #FAFAFA))) !important;padding:20px;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader:not(.loading){display:none}reneco-hierarchized-picker .scrollable{overflow-y:auto;position:relative}reneco-hierarchized-picker .treejs{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--hpicker-theme-typography-tree-font-size, 14px) !important;font-weight:var(--hpicker-theme-typography-tree-font-weight, 400) !important}reneco-hierarchized-picker .treejs *:after,reneco-hierarchized-picker .treejs *:before{-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .treejs>.treejs-node{padding-left:0}reneco-hierarchized-picker .treejs .treejs-nodes{list-style:none;padding-left:20px;overflow:hidden;-webkit-transition:height 150ms ease-out, opacity 150ms ease-out;-o-transition:height 150ms ease-out, opacity 150ms ease-out;transition:height 150ms ease-out, opacity 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-node{cursor:pointer;overflow:hidden;position:relative}reneco-hierarchized-picker .treejs .treejs-node.treejs-placeholder{padding-left:20px}reneco-hierarchized-picker .treejs .treejs-switcher{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative;-webkit-transition:-webkit-transform 150ms ease-out;transition:-webkit-transform 150ms ease-out;-o-transition:transform 150ms ease-out;transition:transform 150ms ease-out;transition:transform 150ms ease-out, -webkit-transform 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-switcher:before{position:absolute;top:8px;left:6px;display:block;content:' ';border:4px solid transparent;border-top:4px solid rgba(0, 0, 0, 0.4);-webkit-transition:border-color 150ms;-o-transition:border-color 150ms;transition:border-color 150ms}reneco-hierarchized-picker .treejs .treejs-switcher:hover:before{border-top:4px solid var(--hpicker-theme-palette-font-color)}reneco-hierarchized-picker .treejs-node__checked>.treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-primary-contrastText) !important}reneco-hierarchized-picker .treejs-node__focused{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-switcher{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-nodes{height:0}reneco-hierarchized-picker .treejs .treejs-checkbox{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;cursor:pointer;position:absolute;top:2px;content:' ';display:block;width:16px;height:16px;border:1px solid #d9d9d9;border-radius:2px}reneco-hierarchized-picker .treejs .treejs-checkbox:hover:before{-webkit-box-shadow:0 0 2px 1px #1890ff;box-shadow:0 0 2px 1px #1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:4px;left:5px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}reneco-hierarchized-picker .treejs .treejs-node__halfchecked{background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c))}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:9px;left:3px;width:10px;height:2px;background-color:#fff}reneco-hierarchized-picker .treejs .treejs-node__disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25)}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox{cursor:not-allowed}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:before{cursor:not-allowed;border-color:#d9d9d9 !important;background-color:#f5f5f5 !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:hover:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-label{vertical-align:middle}reneco-hierarchized-picker .treejs .treejs-node__deprecated>.treejs-label{text-decoration:line-through}reneco-hierarchized-picker .treejs .treejs-node__desaturated>.treejs-label{opacity:.5}reneco-hierarchized-picker .treejs .treejs-node__searchmatch>.treejs-label{font-weight:bolder}reneco-hierarchized-picker .treejs .dragging{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c));display:inline;opacity:.9;padding:11px 0px;display:block}reneco-hierarchized-picker .treejs .dragover{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c))}reneco-hierarchized-picker .treejs .dragover-over::after{content:\"\";display:block;width:2px;height:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-before::after{content:\"\";display:block;height:2px;width:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-after::after{content:\"\";display:block;height:2px;width:100%;position:absolute;bottom:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .fieldError{color:red !important}reneco-hierarchized-picker .hidden{display:none;opacity:0}reneco-hierarchized-picker ul.treejs-nodes:first-child{padding-left:0px !important;margin-top:0px !important;margin-left:0px !important;background-color:var(--hpicker-theme-palette-background-dark)}reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){margin:0 !important;padding-left:15px !important;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF)))}reneco-hierarchized-picker ul.treejs-nodes{margin-left:15px !important;padding-left:0px !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node ul.treejs-nodes{margin:11px 0 0 0 !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node__close ul.treejs-nodes{margin:0 !important}reneco-hierarchized-picker li.treejs-node__close{background-color:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-light, #FAFAFA)))}reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c));padding-bottom:0px !important}reneco-hierarchized-picker li:not(.treejs-node__close) ul.treejs-nodes li{margin-top:2px !important}reneco-hierarchized-picker ul li:last-child{margin-bottom:0px !important}reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--hpicker-theme-palette-primary-light) !important;color:var(--hpicker-theme-palette-primary-contrastText, var(--mui-palette-primary-ContrastText, var(--ion-color-primary-contrast, #000)))!important}reneco-hierarchized-picker li.treejs-node{padding:2px 0px;margin-bottom:2px}reneco-hierarchized-picker .treejs-node.readonly_node{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:darkgrey}reneco-hierarchized-picker .treejs-node:not(.readonly_node){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black))}reneco-hierarchized-picker .hierarchized-picker-container{position:relative;width:100%}reneco-hierarchized-picker .hierarchized-picker-input-area{background-color:transparent !important;display:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper{padding-left:10px !important}reneco-hierarchized-picker .hierarchized-picker-input{-ms-flex:2;flex:2}reneco-hierarchized-picker .hierarchized-picker-input input{width:100%}reneco-hierarchized-picker .hierarchized-picker-input.readonly{pointer-events:none;cursor:initial}reneco-hierarchized-picker .hierarchized-picker-label{position:stacked;margin-left:5px}reneco-hierarchized-picker .hierarchized-picker-tree-area{padding-top:10px}reneco-hierarchized-picker .hierarchized-picker-modal-area{position:absolute;width:100%;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;z-index:10;overflow:scroll;top:20px;min-height:100px;max-height:var(--hpicker-theme-modal-height, \"200px\") !important;-webkit-box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);border-radius:4px;margin-right:0px !important}reneco-hierarchized-picker .hierarchized-picker-modal-area.display-modale-top{bottom:30px !important;top:unset !important}reneco-hierarchized-picker .hierarchized-picker-modal{padding:0px 15px}reneco-hierarchized-picker .hierarchized-picker{display:-ms-flexbox;display:flex;width:100%;font-family:'Roboto', sans-serif}reneco-hierarchized-picker .hierarchized-picker-spinner{margin:35px 0px 0px 145px}reneco-hierarchized-picker .reneco:before{position:relative;top:1px}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco:hover{cursor:pointer}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco-close{color:var(--ion-color-danger, red) !important;padding-left:10px}reneco-hierarchized-picker .treejs .treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-dark-shade, #121212)))}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before,reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;border-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker #autocomplete-results-area{position:absolute;margin-top:48px;background-color:white;left:15px;z-index:10;padding:0px 5px;max-width:340px;max-height:110px;overflow:auto}reneco-hierarchized-picker #autocomplete-results-area li{list-style-type:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;margin:1px}reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node{padding:11px 0px;display:block}reneco-hierarchized-picker input[title]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}reneco-hierarchized-picker input{background-color:var(--hpicker-theme-palette-input-background-color,  #eeeeee);border-style:var(--hpicker-theme-palette-input-border-style,  solid);color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black))}reneco-hierarchized-picker input:focus-visible{outline:unset !important;outline-color:unset !important;outline-style:unset !important}.hierarchized-picker-raw-tree-area.readonly li.treejs-node .treejs-switcher{pointer-events:all}::-webkit-scrollbar-thumb{background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433)));width:8px;margin:5px;border-radius:5px}::-webkit-scrollbar{background:var(--ion-color-medium-tint, #E0E0E0);width:8px;height:8px;margin:5px;cursor:pointer;border-radius:5px}::-webkit-scrollbar-corner{background-color:var(--ion-color-light-tint, #FFF)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__close{background-color:var(--ion-color-dark-tint, #424242);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-dark, #212121);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--ion-color-background, var(--hpicker-theme-palette-background-default, rgba(221, 169, 37, 0.18)));color:var(--ion-color-primary-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker .treejs-switcher:before{border-top-color:var(--ion-color-dark-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked .treejs-switcher:before{color:var(--ion-color-light-contrast, #111111) !important}[class$=\"-dark\"] reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){background-color:var(--ion-color-light-contrast, #111111) !important}";
 
 const HierarchizedPickerComponent = class {
   /**
@@ -18778,14 +18806,66 @@ const HierarchizedPickerComponent = class {
   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 ?
@@ -18804,6 +18884,7 @@ const HierarchizedPickerComponent = class {
     //   });
     // ---------------------------------------
     // this.theOptions = newValue;
+    const savedOldValue = Object.assign({}, this.theOptions);
     if (oldValue && JSON.stringify(newValue.options) == JSON.stringify(oldValue.options)) {
       this.ready = true;
       return;
@@ -18812,6 +18893,7 @@ const HierarchizedPickerComponent = class {
       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);
@@ -18829,11 +18911,28 @@ const HierarchizedPickerComponent = class {
     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;
@@ -18887,6 +18986,9 @@ const HierarchizedPickerComponent = class {
   async filterTree(searchedValue) {
     this.search(searchedValue);
   }
+  async getError() {
+    return Promise.resolve(this.lastErrorMessage);
+  }
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueChange = index.createEvent(this, "valueChange", 7);
@@ -18894,6 +18996,7 @@ const HierarchizedPickerComponent = class {
     this.itemContextMenuItemClick = index.createEvent(this, "itemContextMenuItemClick", 7);
     this.searchResult = index.createEvent(this, "searchResult", 7);
     this.navigateInTree = index.createEvent(this, "navigateInTree", 7);
+    this.errorRaised = index.createEvent(this, "errorRaised", 7);
     this.modaleHeight = 200;
     this.modalePosition = 'bottom';
     this.canload = true; // Determines wether the component may be loaded
@@ -18903,30 +19006,101 @@ const HierarchizedPickerComponent = class {
     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;
     };
@@ -18978,7 +19152,6 @@ const HierarchizedPickerComponent = class {
   }
   componentDidLoad() {
     this.mylog('----- componentDidLoad beginning -----');
-    setupKeyboardNavigation(this, this.navigateInTree);
     focusMainInput();
   }
   displayWhenLoaded() {
@@ -19022,6 +19195,8 @@ const HierarchizedPickerComponent = class {
       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)
@@ -19039,21 +19214,50 @@ const HierarchizedPickerComponent = class {
     }
     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);
-          }
         }
       }
     }));
@@ -19061,7 +19265,7 @@ const HierarchizedPickerComponent = class {
       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);
@@ -19088,10 +19292,16 @@ const HierarchizedPickerComponent = class {
       console.timeEnd = function () { };
     }
     // 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();
@@ -19159,7 +19369,7 @@ const HierarchizedPickerComponent = class {
       this.ignoreOptionsChanges = false;
     }
     catch (_b) {
-      console.error('Error loading webservice data!');
+      this.errorToLog = 'Error loading webservice data!';
     }
   }
   displayPickerError(errorMsg = '') {
@@ -19171,11 +19381,11 @@ const HierarchizedPickerComponent = class {
         }
         this.displayedValue = errorMsg;
         this.isDisabled = true;
-        errorMsg = this.errorToLog;
+        this.errorToLog = errorMsg;
       }
     }
     catch (_a) {
-      console.error(errorMsg);
+      this.errorToLog = errorMsg;
     }
   }
   getApiSearchURL() {
@@ -19195,17 +19405,17 @@ const HierarchizedPickerComponent = class {
     }
   }
   // 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;
@@ -19276,7 +19486,7 @@ const HierarchizedPickerComponent = class {
           }
         })
           .catch(err => {
-          console.error('err', err);
+          this.errorToLog = err;
         });
       }
       else {
@@ -19295,29 +19505,26 @@ const HierarchizedPickerComponent = class {
           }
         })
           .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(this.rawDataManager.getData());
+        if (!searched) {
+          this.setSearchResults([]);
+        }
       }
-      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) {
@@ -19399,11 +19606,31 @@ const HierarchizedPickerComponent = class {
     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) {
@@ -19412,8 +19639,10 @@ const HierarchizedPickerComponent = class {
       (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 -----
@@ -19450,46 +19679,29 @@ const HierarchizedPickerComponent = class {
    * 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) {
@@ -19498,10 +19710,10 @@ const HierarchizedPickerComponent = class {
     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 = '';
       }
@@ -19522,16 +19734,16 @@ const HierarchizedPickerComponent = class {
     }
     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
@@ -19544,9 +19756,12 @@ const HierarchizedPickerComponent = class {
       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 = [
@@ -19572,13 +19787,23 @@ const HierarchizedPickerComponent = class {
     }
     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) {
@@ -19645,10 +19870,11 @@ const HierarchizedPickerComponent = class {
           if (init) {
             this.formatDefaultValue();
             this.showSelectedNodes();
+            this.checkFields(this.value);
           }
         })
           .catch(error => {
-          console.error('getDataFromSource 3 classification rejected:', error);
+          this.errorToLog = error;
         });
       }
       else {
@@ -19661,7 +19887,7 @@ const HierarchizedPickerComponent = class {
           }
         })
           .catch(error => {
-          console.error('getDataFromSource 3 legacy rejected:', error);
+          this.errorToLog = error;
         });
       }
     }
@@ -19682,7 +19908,7 @@ const HierarchizedPickerComponent = class {
     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);
@@ -19692,15 +19918,15 @@ const HierarchizedPickerComponent = class {
           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);
@@ -19710,8 +19936,19 @@ const HierarchizedPickerComponent = class {
   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)) {
@@ -19721,7 +19958,7 @@ const HierarchizedPickerComponent = class {
             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++;
             }
           }
@@ -19731,7 +19968,7 @@ const HierarchizedPickerComponent = class {
             (typeof dfValue == 'string' && getPropertyFromNode(element, 'fullpathTranslated') == dfValue) ||
               (typeof dfValue == 'number' && getPropertyFromNode(element, 'key') == dfValue)) {
               element.nodeid = element.key;
-              that.checkFields([element]);
+              addToFieldsToCheck([element]);
               found++;
             }
           }
@@ -19743,6 +19980,7 @@ const HierarchizedPickerComponent = class {
     if (this.rawDataManager.getData()) {
       recursive([this.rawDataManager.getData()]);
     }
+    that.checkFields(fieldsToCheck);
     if (this.theOptions.defaultValue.length != found) {
       if (found == 0) {
         try {
@@ -19768,6 +20006,8 @@ const HierarchizedPickerComponent = class {
       .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;
@@ -19791,7 +20031,7 @@ const HierarchizedPickerComponent = class {
         clickPickerModalArea(this);
       } }, index.h("div", { class: "loader", ref: el => {
         this.loader = el;
-      } }, index.h("div", { class: "loader-inner" }, "Loading...")), index.h("div", { class: `hierarchized-picker-modal ${!this.ready ? 'hidden' : ''}` }, index.h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), index.h("ul", { id: "autocomplete-results-area" }), index.h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (index.h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), onClick: event => {
+      } }, index.h("div", { class: "loader-inner" }, "Loading...")), index.h("div", { class: `hierarchized-picker-modal ${!this.ready ? 'hidden' : ''}`, tabindex: "0" }, index.h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), index.h("ul", { id: "autocomplete-results-area" }), index.h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (index.h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), tabindex: "0", onClick: event => {
         clickPickerModalArea(this);
       } }, index.h("div", { class: "loader", ref: el => {
         this.loader = el;
@@ -19849,9 +20089,7 @@ const SearchInput = class {
   render() {
     return (index.h("div", { id: "hierarchized-picker-input-search",
       // TODO: need component ID ?
-      class: "search-input-container", ref: (el) => (this.rootElement = el) }, index.h("div", { class: "reneco reneco-search" }), index.h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input sc-ion-input-md-h sc-ion-input-md-s md search-input hierarchized-picker-search",
-      //class="native-input search-input hierarchized-picker-search sc-ion-input-md-h sc-ion-input-md-s md"
-      placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
+      class: "search-input-container", ref: (el) => (this.rootElement = el) }, index.h("div", { class: "reneco reneco-search" }), index.h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input sc-ion-input-md-h sc-ion-input-md-s md search-input hierarchized-picker-search", placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
   }
 };
 SearchInput.style = searchInputCss;