reneco-hierarchized-picker 0.4.3-beta.16 → 0.4.3-beta.18

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["reneco-hierarchized-picker_2.cjs",[[0,"reneco-hierarchized-picker",{"options":[1],"valueChangeCallback":[16],"disabled":[4],"newoptions":[1],"newfilter":[1],"activatedDragAndDrop":[4,"activated-drag-and-drop"],"isDisabled":[32],"componentID":[32],"rawData":[32],"pickerClass":[32],"displayedValue":[32],"value":[32],"shownTree":[32],"searchResultData":[32],"hasFocus":[32],"errorToLog":[32],"getValue":[64],"refreshPicker":[64],"setOptions":[64],"getSearchResult":[64],"filterTree":[64],"clearPicker":[64],"showSelectedNodes":[64]}],[0,"search-input",{"placeholder":[1],"setFocus":[64]}]]]], options);
+  return index.bootstrapLazy([["reneco-hierarchized-picker_2.cjs",[[0,"reneco-hierarchized-picker",{"options":[1],"valueChangeCallback":[16],"disabled":[4],"newoptions":[1],"newfilter":[1],"activatedDragAndDrop":[4,"activated-drag-and-drop"],"isDisabled":[32],"componentID":[32],"rawData":[32],"pickerClass":[32],"displayedValue":[32],"value":[32],"shownTree":[32],"searchResultData":[32],"hasFocus":[32],"errorToLog":[32],"getValue":[64],"refreshPicker":[64],"setOptions":[64],"getSearchResult":[64],"filterTree":[64],"clearPicker":[64],"showSelectedNodes":[64],"scrollToNodeWithId":[64]}],[0,"search-input",{"placeholder":[1],"setFocus":[64]}]]]], options);
   });
 };
 

package/dist/cjs/reneco-hierarchized-picker.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["reneco-hierarchized-picker_2.cjs",[[0,"reneco-hierarchized-picker",{"options":[1],"valueChangeCallback":[16],"disabled":[4],"newoptions":[1],"newfilter":[1],"activatedDragAndDrop":[4,"activated-drag-and-drop"],"isDisabled":[32],"componentID":[32],"rawData":[32],"pickerClass":[32],"displayedValue":[32],"value":[32],"shownTree":[32],"searchResultData":[32],"hasFocus":[32],"errorToLog":[32],"getValue":[64],"refreshPicker":[64],"setOptions":[64],"getSearchResult":[64],"filterTree":[64],"clearPicker":[64],"showSelectedNodes":[64]}],[0,"search-input",{"placeholder":[1],"setFocus":[64]}]]]], options);
+  return index.bootstrapLazy([["reneco-hierarchized-picker_2.cjs",[[0,"reneco-hierarchized-picker",{"options":[1],"valueChangeCallback":[16],"disabled":[4],"newoptions":[1],"newfilter":[1],"activatedDragAndDrop":[4,"activated-drag-and-drop"],"isDisabled":[32],"componentID":[32],"rawData":[32],"pickerClass":[32],"displayedValue":[32],"value":[32],"shownTree":[32],"searchResultData":[32],"hasFocus":[32],"errorToLog":[32],"getValue":[64],"refreshPicker":[64],"setOptions":[64],"getSearchResult":[64],"filterTree":[64],"clearPicker":[64],"showSelectedNodes":[64],"scrollToNodeWithId":[64]}],[0,"search-input",{"placeholder":[1],"setFocus":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -673,11 +673,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);
@@ -18375,6 +18374,7 @@ class OptionsManager {
       errorsInInput: true,
       isFullpath: true,
       defaultValue: [],
+      defaultValueIsFullpath: false,
     };
     const validatedOptions = Object.assign(Object.assign({}, defaults), options);
     // Validate specific fields
@@ -18528,6 +18528,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');
@@ -18543,6 +18548,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);
+        });
+      }
     });
   }
 }
@@ -18585,6 +18595,101 @@ 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;
+      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) {
+        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);
@@ -18629,6 +18734,9 @@ 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) {
@@ -18637,98 +18745,7 @@ function focusInSearchEvent(component) {
 function focusOutSearchEvent(component, event) {
 }
 
-let focusedNodeIndex = 0;
-function setupKeyboardNavigation(component, optionsManager, navigateInTree) {
-  if (!optionsManager.getOptions().keyboardNavigation)
-    return;
-  const treeArea = component.el.querySelector('.hierarchized-picker-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.el._hasKeydownListener) {
-    return;
-  }
-  component.el._hasKeydownListener = 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) {
-      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);
-  });
-}
-
-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{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 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 {
   /**
@@ -18805,6 +18822,24 @@ const HierarchizedPickerComponent = class {
   get theOptions() {
     return this.optionsManager.getOptions();
   }
+  diffKeys(obj1, obj2, prefix = '') {
+    const diffs = [];
+    const keys = new Set([...Object.keys(obj1 || {}), ...Object.keys(obj2 || {})]);
+    for (const key of keys) {
+      const fullKey = prefix ? `${prefix}.${key}` : key;
+      const val1 = obj1 ? obj1[key] : undefined;
+      const val2 = obj2 ? obj2[key] : undefined;
+      if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {
+        // Appel récursif pour les objets imbriqués
+        diffs.push(...this.diffKeys(val1, val2, fullKey));
+      }
+      else if (val1 !== val2) {
+        // Valeurs différentes ou propriété manquante
+        diffs.push(fullKey);
+      }
+    }
+    return diffs;
+  }
   async setNewOption(newValue, oldValue = null) {
     this.ready = false;
     // --------------------------------------- DEPRECATED ?
@@ -18823,6 +18858,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;
@@ -18849,11 +18885,26 @@ 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"];
+        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;
@@ -18923,6 +18974,52 @@ 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.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) {
+        console.error("Error in showSelectedNodes", err);
+      }
+      if (scrollToValue && this.scrollable) {
+        this.scrollable.scrollTop = scrollToValue;
+      }
+    };
     this.getShortenedFullpath = (realFullpath) => {
       var _a, _b, _c, _d;
       let toret = realFullpath;
@@ -19085,7 +19182,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);
@@ -19224,8 +19321,8 @@ 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) {
       const base = window.location.origin;
       const parsedUrl = new URL(url, base);
@@ -19428,9 +19525,7 @@ 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) {
     this.itemContextMenuItemClick.emit(e);
@@ -19483,44 +19578,25 @@ const HierarchizedPickerComponent = class {
     //   console.warn('You are not allowed to scroll to selected nodes in multiple mode');
     //   return;
     // }
-    const scrollToNode = () => {
-      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 {
-        const checkeds = document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-node__checked');
-        checkeds.forEach((item) => removeClosedAndLookUp(item, scrollToValue == 0));
-      }
-      catch (err) {
-        console.error("Error in showSelectedNodes", err);
-      }
-      if (scrollToValue && this.scrollable) {
-        this.scrollable.scrollTop = scrollToValue;
-      }
-    };
     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) {
@@ -19840,7 +19916,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: "" + this.componentID }, 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: "" + this.componentID, onClick: event => {
         clickPickerModalArea(this);
       } }, index.h("div", { class: "loader", ref: el => {
         this.loader = el;

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

@@ -3,6 +3,10 @@ reneco-hierarchized-picker .hierarchized-picker-raw-tree-area {
   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;