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

package/dist/custom-elements/index.js

@@ -2,6 +2,7 @@ import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/i
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
 function applyPickerTheme(theme, defaultTheme) {
+  var _a;
   const docstyle = document.documentElement.style;
   docstyle.setProperty('--hpicker-theme-palette-primary-main', (theme === null || theme === void 0 ? void 0 : theme.palette.primary.main) || defaultTheme.palette.primary.main);
   docstyle.setProperty('--hpicker-theme-palette-primary-light', (theme === null || theme === void 0 ? void 0 : theme.palette.primary.light) || defaultTheme.palette.primary.light);
@@ -9,9 +10,12 @@ 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);
   docstyle.setProperty('--hpicker-theme-typography-body-font-weight', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontWeight) || defaultTheme.typography.body.fontWeight);
-  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-modal-height', ((_a = theme === null || theme === void 0 ? void 0 : theme.modale) === null || _a === void 0 ? void 0 : _a.height) || defaultTheme.modale.height);
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -317,59 +321,15 @@ 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) {
   // TODO Temporarily ignores disabled mode for selecting nodes if mode is tree
+  console.log("coucou");
   if (this.options.parentApi.isDisabled && this.options.parentApi.optionsManager.getOptions().mode != "tree")
     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);
   }
 };
@@ -496,6 +456,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;
@@ -533,6 +535,9 @@ Tree.prototype.onSwitcherClick = function (target) {
       },
     });
   }
+  return new Promise((resolve) => {
+    resolve(this);
+  });
 };
 Tree.prototype.walkUp = function (node, changeState) {
   const { parent } = node;
@@ -664,11 +669,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);
@@ -17989,6 +17993,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";
@@ -18085,17 +18093,22 @@ 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'
+    }
   },
   typography: {
     body: {
@@ -18103,6 +18116,9 @@ const defaultPickerTheme = {
       fontWeight: '400',
     },
   },
+  modale: {
+    height: "200px",
+  }
 };
 // const defaultPickerTheme = {
 //   palette: {
@@ -18188,6 +18204,10 @@ class RawDataManager {
   async getFromClassification(endpoint, options, loader) {
     let pathSegment = '';
     const queryParams = [];
+    if (options['Reach']) {
+      queryParams.push(`id=${options['Reach'].join('&id=')}`);
+      delete options['Reach'];
+    }
     for (const key in options) {
       if (!options.hasOwnProperty(key))
         continue;
@@ -18345,10 +18365,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
@@ -18435,7 +18457,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 => {
@@ -18467,7 +18489,6 @@ function fillTreeWithObject(tree, myObject, searched, options, depth = 0) {
       const objToPush = {
         id: keyPropFromNode,
         nodeId: keyPropFromNode,
-        depth,
         text: valueTranslatedPropFromNode,
         fullpath: fullpathPropFromNode,
         fullpathTranslated: fullpathTranslatedPropFromNode,
@@ -18476,7 +18497,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);
@@ -18502,6 +18523,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');
@@ -18517,6 +18543,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);
+        });
+      }
     });
   }
 }
@@ -18559,6 +18590,105 @@ function clearAutocomplete(eraseResults = false) {
   }
 }
 
+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]);
+  }
+  //todo, put back ?
+  // if ((component.el as any)._hasKeydownListener) {
+  //   return;
+  // }
+  component.el._hasKeydownListener = true;
+  if (!component._keydownListenerAdded) {
+    component._keydownListenerAdded = true;
+    component.el.addEventListener('keydown', (event) => {
+      var _a, _b;
+      console.log("Navigation 01", event);
+      event.stopPropagation();
+      console.log("Navigation 02");
+      const tree = component.loadedTreeJs;
+      let treeNodesFromTree = findAllTreeNodes(tree.treeNodes, tree.liElementsById);
+      console.log("Navigation 03");
+      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'];
+      console.log("Navigation 04", event.key);
+      switch (event.key.toLowerCase()) {
+        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];
+          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);
+    });
+  }
+}
+
 // Utility functions
 function isInsidePicker(component, target) {
   return target !== null && component.el.contains(target);
@@ -18593,19 +18723,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');
@@ -18616,82 +18733,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) {
-  const treeArea = component.el.querySelector('.hierarchized-picker-tree-area');
-  if (!treeArea)
-    return;
-  let focusedNodeIndex = 0;
-  const treeNodes = Array.from(treeArea.querySelectorAll('.treejs-node'));
-  function focusNode(index) {
-    treeNodes.forEach(node => node.classList.remove('treejs-node__checked'));
-    const targetNode = treeNodes[index];
-    if (targetNode) {
-      targetNode.classList.add('treejs-node__checked');
-      targetNode.scrollIntoView({ block: 'nearest' });
-    }
-  }
-  component.el.addEventListener('keydown', (event) => {
-    var _a, _b, _c;
-    event.stopPropagation();
-    const tree = component.loadedTreeJs;
-    if (!tree || !treeNodes.length)
-      return;
-    switch (event.key) {
-      case 'Tab':
-        event.preventDefault();
-        component.showTree('hide');
-        setTimeout(() => focusMainInput(), 10);
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        focusedNodeIndex = Math.max(focusedNodeIndex - 1, 0);
-        focusNode(focusedNodeIndex);
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodes.length - 1);
-        focusNode(focusedNodeIndex);
-        break;
-      case 'ArrowLeft':
-        event.preventDefault();
-        const leftSwitcher = (_a = treeNodes[focusedNodeIndex]) === null || _a === void 0 ? void 0 : _a.querySelector('.treejs-switcher');
-        if (leftSwitcher) {
-          (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(leftSwitcher);
-          component.showTree('hide');
-        }
-        break;
-      case 'ArrowRight':
-        event.preventDefault();
-        const activeNode = treeNodes[focusedNodeIndex];
-        const rightSwitcher = activeNode === null || activeNode === void 0 ? void 0 : activeNode.querySelector('.treejs-switcher');
-        if (rightSwitcher) {
-          (_c = component.loadedTreeJs) === null || _c === void 0 ? void 0 : _c.onSwitcherClick(rightSwitcher);
-        }
-        break;
-      case '0':
-        event.preventDefault();
-        const spaceNode = treeNodes[focusedNodeIndex];
-        if (spaceNode === null || spaceNode === void 0 ? void 0 : spaceNode.nodeId) {
-          component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
-          component.showTree('hide');
-          setTimeout(() => focusMainInput(), 10);
-        }
-        break;
-    }
-  });
-  focusNode(focusedNodeIndex);
 }
 
-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 .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:inline;-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.readonly{pointer-events:none;cursor:initial}reneco-hierarchized-picker .hierarchized-picker-input.hierarchized-picker-icon{margin-left:8px}reneco-hierarchized-picker .hierarchized-picker-label{position:stacked;margin-left:5px}reneco-hierarchized-picker .hierarchized-picker-tree-area{width:333px !important;padding-top:48px}reneco-hierarchized-picker .hierarchized-picker-modal-area{background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;position:absolute;z-index:10;padding-left:15px;overflow:scroll;top:20px;min-height:100px;max-height:200px;-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{display:inline-block;width:357px}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{padding:10px 15px}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco:hover{cursor:pointer}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco-close{-webkit-transform:translate(5px, -8px);transform:translate(5px, -8px);color:var(--ion-color-danger, red) !important}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}.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 extends HTMLElement {
   /**
@@ -18760,14 +18813,42 @@ const HierarchizedPickerComponent = class extends HTMLElement {
   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 ?
@@ -18786,6 +18867,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     //   });
     // ---------------------------------------
     // this.theOptions = newValue;
+    const savedOldValue = Object.assign({}, this.theOptions);
     if (oldValue && JSON.stringify(newValue.options) == JSON.stringify(oldValue.options)) {
       this.ready = true;
       return;
@@ -18794,6 +18876,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
       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);
@@ -18811,11 +18894,29 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     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;
@@ -18869,6 +18970,9 @@ const HierarchizedPickerComponent = class extends HTMLElement {
   async filterTree(searchedValue) {
     this.search(searchedValue);
   }
+  async getError() {
+    return Promise.resolve(this.lastErrorMessage);
+  }
   constructor() {
     super();
     this.__registerHost();
@@ -18876,6 +18980,10 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     this.itemDropped = createEvent(this, "itemDropped", 7);
     this.itemContextMenuItemClick = createEvent(this, "itemContextMenuItemClick", 7);
     this.searchResult = createEvent(this, "searchResult", 7);
+    this.navigateInTree = createEvent(this, "navigateInTree", 7);
+    this.errorRaised = createEvent(this, "errorRaised", 7);
+    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
@@ -18883,30 +18991,80 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     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;
     };
@@ -18958,7 +19116,6 @@ const HierarchizedPickerComponent = class extends HTMLElement {
   }
   componentDidLoad() {
     this.mylog('----- componentDidLoad beginning -----');
-    setupKeyboardNavigation(this);
     focusMainInput();
   }
   displayWhenLoaded() {
@@ -19002,6 +19159,8 @@ const HierarchizedPickerComponent = class extends HTMLElement {
       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)
@@ -19041,7 +19200,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
       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);
@@ -19070,8 +19229,13 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     // 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();
@@ -19079,7 +19243,9 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     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) => {
@@ -19137,7 +19303,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
       this.ignoreOptionsChanges = false;
     }
     catch (_b) {
-      console.error('Error loading webservice data!');
+      this.errorToLog = 'Error loading webservice data!';
     }
   }
   displayPickerError(errorMsg = '') {
@@ -19149,11 +19315,11 @@ const HierarchizedPickerComponent = class extends HTMLElement {
         }
         this.displayedValue = errorMsg;
         this.isDisabled = true;
-        errorMsg = this.errorToLog;
+        this.errorToLog = errorMsg;
       }
     }
     catch (_a) {
-      console.error(errorMsg);
+      this.errorToLog = errorMsg;
     }
   }
   getApiSearchURL() {
@@ -19173,17 +19339,17 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     }
   }
   // 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;
@@ -19195,7 +19361,6 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     if (!init)
       delete optionsToReturn.Reach;
     if (optionsToReturn.Reach) {
-      delete optionsToReturn.Reach;
       if ("startNode" in optionsToReturn) {
         optionsToReturn.startingnode = optionsToReturn.startNode;
         delete optionsToReturn.startNode;
@@ -19255,7 +19420,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
           }
         })
           .catch(err => {
-          console.error('err', err);
+          this.errorToLog = err;
         });
       }
       else {
@@ -19274,12 +19439,12 @@ const HierarchizedPickerComponent = class extends HTMLElement {
           }
         })
           .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);
           }
         });
       }
@@ -19360,9 +19525,11 @@ const HierarchizedPickerComponent = class extends HTMLElement {
         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 :
@@ -19376,21 +19543,44 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     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 -----
@@ -19427,46 +19617,29 @@ const HierarchizedPickerComponent = class extends HTMLElement {
    * 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) {
@@ -19478,7 +19651,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     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 = '';
       }
@@ -19499,8 +19672,16 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     }
     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
@@ -19513,9 +19694,12 @@ const HierarchizedPickerComponent = class extends HTMLElement {
       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 = [
@@ -19544,10 +19728,11 @@ const HierarchizedPickerComponent = class extends HTMLElement {
   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) {
@@ -19614,10 +19799,11 @@ const HierarchizedPickerComponent = class extends HTMLElement {
           if (init) {
             this.formatDefaultValue();
             this.showSelectedNodes();
+            this.checkFields(this.value);
           }
         })
           .catch(error => {
-          console.error('getDataFromSource 3 classification rejected:', error);
+          this.errorToLog = error;
         });
       }
       else {
@@ -19630,7 +19816,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
           }
         })
           .catch(error => {
-          console.error('getDataFromSource 3 legacy rejected:', error);
+          this.errorToLog = error;
         });
       }
     }
@@ -19645,13 +19831,14 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     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);
@@ -19661,15 +19848,15 @@ const HierarchizedPickerComponent = class extends HTMLElement {
           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);
@@ -19679,8 +19866,19 @@ const HierarchizedPickerComponent = class extends HTMLElement {
   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)) {
@@ -19690,7 +19888,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
             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++;
             }
           }
@@ -19700,7 +19898,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
             (typeof dfValue == 'string' && getPropertyFromNode(element, 'fullpathTranslated') == dfValue) ||
               (typeof dfValue == 'number' && getPropertyFromNode(element, 'key') == dfValue)) {
               element.nodeid = element.key;
-              that.checkFields([element]);
+              addToFieldsToCheck([element]);
               found++;
             }
           }
@@ -19712,6 +19910,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
     if (this.rawDataManager.getData()) {
       recursive([this.rawDataManager.getData()]);
     }
+    that.checkFields(fieldsToCheck);
     if (this.theOptions.defaultValue.length != found) {
       if (found == 0) {
         try {
@@ -19736,6 +19935,13 @@ const HierarchizedPickerComponent = class extends HTMLElement {
       .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;
@@ -19751,11 +19957,11 @@ const HierarchizedPickerComponent = class extends HTMLElement {
       } }, 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);
       } }, 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);
       } }, h("div", { class: "loader", ref: el => {
         this.loader = el;
@@ -19775,7 +19981,7 @@ const HierarchizedPickerComponent = class extends HTMLElement {
   static get style() { return hierarchizedPickerCss; }
 };
 
-const searchInputCss = ".search-input-container{width:100%;margin:0}.search-input{width:100%;border:none}.search-input:focus{border:none !important;outline:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper{padding-left:10px !important}reneco-hierarchized-picker .hierarchized-picker-input input,reneco-hierarchized-picker .hierarchized-picker-search input{padding-left:5px !important;text-overflow:ellipsis !important;border:0;background:transparent;outline:none;font-size:var(--hpicker-theme-typography-body-font-size, var(--mui-typography-body-font-size, 14px)) !important;font-weight:var(--hpicker-theme-typography-body-font-weight, var(--mui-typography-body-font-weight, 400)) !important}reneco-hierarchized-picker .hierarchized-picker-search input{width:90%;color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-light-tint, #fff))) !important}reneco-hierarchized-picker .hierarchized-picker-search{background-color:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-medium-tint, #E0E0E0)));position:absolute !important;width:333px !important;margin-top:10px;border-radius:4px;padding:8.5px}reneco-hierarchized-picker #searchInTree{padding:8.5px 8px;background:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, var(--ion-color-background, rgba(221, 169, 37, 0.18))));border:none !important;border-radius:4px}reneco-hierarchized-picker #searchInTree:focus{border:none !important;outline:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}";
+const searchInputCss = ".search-input-container{display:-ms-flexbox;display:flex;gap:8px;margin-top:10px}.search-input-container .reneco-search{margin-top:3px}.search-input-container input{border-radius:4px;padding:5px}.search-input{width:100%;border:none}.search-input:focus{border:none !important;outline:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper{padding-left:10px !important}reneco-hierarchized-picker .hierarchized-picker-input input,reneco-hierarchized-picker .hierarchized-picker-search input{font-size:var(--hpicker-theme-typography-body-font-size, var(--mui-typography-body-font-size, 14px)) !important;font-weight:var(--hpicker-theme-typography-body-font-weight, var(--mui-typography-body-font-weight, 400)) !important}reneco-hierarchized-picker .hierarchized-picker-search input{color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-light-tint, #fff))) !important}reneco-hierarchized-picker #searchInTree{padding:8.5px 8px;background:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, var(--ion-color-background, rgba(221, 169, 37, 0.18))));border:none !important;border-radius:4px}reneco-hierarchized-picker #searchInTree:focus{border:none !important;outline:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}";
 
 const SearchInput$1 = class extends HTMLElement {
   constructor() {
@@ -19812,9 +20018,9 @@ const SearchInput$1 = class extends HTMLElement {
     }
   }
   render() {
-    return (h("div", { id: "hierarchized-picker-input-search-",
+    return (h("div", { id: "hierarchized-picker-input-search",
       // TODO: need component ID ?
-      class: "search-input-container reneco reneco-search", ref: (el) => (this.rootElement = el) }, h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input search-input hierarchized-picker-search reneco reneco-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) }, h("div", { class: "reneco reneco-search" }), 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) })));
   }
   static get style() { return searchInputCss; }
 };