reneco-hierarchized-picker 0.2.2-classifications → 0.2.3

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

@@ -4,55 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-55df525c.js');
 
-function ajax(_options) {
-  const defaultOptions = {
-    method: 'GET',
-    url: '',
-    async: true,
-    success: null,
-    failed: null,
-    'Content-Type': 'application/json; charset=utf-8',
-  };
-  const options = Object.assign(defaultOptions, _options);
-  const xhr = new XMLHttpRequest();
-
-  const postData = Object.entries(options.data)
-    .reduce((acc, [key, value]) => {
-      acc.push(`${key}=${value}`);
-      return acc;
-    }, [])
-    .join('&');
-
-  if (options.method.toUpperCase() === 'POST') {
-    xhr.open(options.method, options.url, options.async);
-    xhr.setRequestHeader('Content-Type', options['Content-Type']);
-    xhr.send(postData);
-  } else if (options.method.toUpperCase() === 'GET') {
-    let {url} = options;
-    if (postData) {
-      if (url.indexOf('?') !== -1) {
-        url += `&${postData}`;
-      } else {
-        url += `&${postData}`;
-      }
-    }
-    xhr.open(options.method, url, options.async);
-    xhr.setRequestHeader('Content-Type', options['Content-Type']);
-    xhr.send(null);
-  }
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState === 4 && xhr.status === 200) {
-      let res = xhr.responseText;
-      if (options['Content-Type'] === defaultOptions['Content-Type']) {
-        res = JSON.parse(res);
-      }
-      options.success && options.success(res);
-    } else {
-      options.failed && options.failed(xhr.status);
-    }
-  };
-}
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -83,7 +34,6 @@ const VanillaContextMenu = /*@__PURE__*/getDefaultExportFromCjs(vanillaContextMe
 function deepClone(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
-
 function uniq(arr) {
   const map = {};
   return arr.reduce((acc, item) => {
@@ -94,13 +44,13 @@ function uniq(arr) {
     return acc;
   }, []);
 }
-
 function empty(ele) {
-  while (ele.firstChild) {
-    ele.removeChild(ele.firstChild);
+  if (ele && ele.firstChild) {
+    while (ele.firstChild) {
+      ele.removeChild(ele.firstChild);
+    }
   }
 }
-
 function animation(duration, callback) {
   requestAnimationFrame(() => {
     callback.enter();
@@ -112,7 +62,6 @@ function animation(duration, callback) {
     });
   });
 }
-
 function Tree(container, options) {
   const defaultOptions = {
     selectMode: 'checkbox',
@@ -131,7 +80,6 @@ function Tree(container, options) {
   this.willUpdateNodesById = {};
   this.container = container;
   this.options = Object.assign(defaultOptions, options);
-
   Object.defineProperties(this, {
     values: {
       get() {
@@ -179,58 +127,39 @@ function Tree(container, options) {
       },
     },
   });
-
-  if (this.options.url) {
-    this.load(data => {
-      this.init(data);
-    });
-  } else {
-    this.init(this.options.data);
-  }
+  this.init(this.options.data);
 }
-
 Tree.prototype.init = function (data) {
-  console.time('init');
   let { treeNodes, nodesById, leafNodesById, defaultValues, defaultDisables } = Tree.parseTreeData(data);
   this.treeNodes = treeNodes;
   this.nodesById = nodesById;
   this.leafNodesById = leafNodesById;
   this.render(this.treeNodes);
   const { values, disables, loaded } = this.options;
-  if (values && values.length) defaultValues = values;
+  if (values && values.length)
+    defaultValues = values;
   defaultValues.length && this.setValues(defaultValues);
-  if (disables && disables.length) defaultDisables = disables;
+  if (disables && disables.length)
+    defaultDisables = disables;
   defaultDisables.length && this.setDisables(defaultDisables);
   loaded && loaded.call(this);
-  console.timeEnd('init');
 };
-
-Tree.prototype.load = function (callback) {
-  console.time('load');
-  const { url, method, beforeLoad } = this.options;
-  ajax({
-    url,
-    method,
-    success: result => {
-      let data = result;
-      console.timeEnd('load');
-      if (beforeLoad) {
-        data = beforeLoad(result);
-      }
-      callback(data);
-    },
-  });
-};
-
 Tree.prototype.render = function (treeNodes) {
   const treeEle = Tree.createRootEle();
   treeEle.appendChild(this.buildTree(treeNodes, 0));
   this.bindEvent(treeEle);
-  const ele = document.querySelector(this.container);
-  empty(ele);
-  ele.appendChild(treeEle);
+  let ele = null;
+  try {
+    ele = document.querySelector(this.container);
+  }
+  catch (_a) {
+    ele = this.container;
+  }
+  if (ele) {
+    empty(ele);
+    ele.appendChild(treeEle);
+  }
 };
-
 Tree.prototype.buildTree = function (nodes, depth) {
   const rootUlEle = this.createUlEle();
   if (nodes && nodes.length) {
@@ -247,102 +176,100 @@ Tree.prototype.buildTree = function (nodes, depth) {
   }
   return rootUlEle;
 };
-
 Tree.prototype.bindEvent = function (ele) {
+  var _a;
+  // let parentOptions:any = {};
+  // try{
+  //   parentOptions = JSON.parse(this.options.parentApi.theOptions);
+  // }
+  // catch {
+  //   parentOptions = this.options.parentApi.theOptions;
+  // }
+  // @ts-ignore
   function getLi(target) {
     return target.classList.contains('treejs-node') ? target : target.closest('.treejs-node');
   }
-  const contextMenu = this.options.parentApi.options.contextMenu;
-  if (contextMenu?.items?.length) {
-    new VanillaContextMenu({
-      ...contextMenu,
-      scope: ele,
-      menuItems: contextMenu.items.map(item => {
-        return typeof item === 'string'
-          ? item
-          : {
-              ...item,
-              callback: e => {
+  if (!this.options.parentApi.isDisabled) {
+    const contextMenu = this.options.parentApi.theOptions.contextMenu;
+    if ((_a = contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.items) === null || _a === void 0 ? void 0 : _a.length) {
+      new VanillaContextMenu(Object.assign(Object.assign({}, contextMenu), { scope: ele, menuItems: contextMenu.items.map(item => {
+          return typeof item === 'string'
+            ? item
+            : Object.assign(Object.assign({}, item), { callback: e => {
                 const target = getLi(e.target);
-                this.options.parentApi.onItemContextMenuItemClick({ ...e, target, contextMenuItem: item });
-              },
-            };
-      }),
-    });
+                this.options.parentApi.onItemContextMenuItemClick(Object.assign(Object.assign({}, e), { target, contextMenuItem: item }));
+              } });
+        }) }));
+    }
   }
-  ele.addEventListener(
-    'click',
-    e => {
-      const { target } = e;
-      if (target.nodeName === 'SPAN' && (target.classList.contains('treejs-checkbox') || target.classList.contains('treejs-label'))) {
-        this.onItemClick(target.parentNode.nodeId);
-      } else if (target.nodeName === 'LI' && target.classList.contains('treejs-node')) {
-        this.onItemClick(target.nodeId);
-      } else if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher')) {
-        this.onSwitcherClick(target);
-      }
-
-      //CUSTOM
-      const childspans = Array.prototype.slice.call(e.target.parentNode.querySelectorAll(':scope > ul > li > span'));
-      let hasUndefinedchild = [];
-
-      //This may be a problem the day a node value is "undefined"
-      hasUndefinedchild = childspans.filter(ele => {
-        return ele.textContent === 'undefined';
-      });
-
-      // If the user clicked on an unloaded node
-      if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher') && hasUndefinedchild.length > 0) {
-        // Clear the subnode HTML
-        e.target.parentNode.querySelector('ul').innerHTML = '';
-
-        // If source is webservice (it shouldn't be something else)
-        if (this.options.parentApi.options.source == 'webservice') {
-
-          if (this.options.parentApi.options.origin == 'classification') {
+  ele.addEventListener('click', e => {
+    const { target } = e;
+    if (target.nodeName === 'SPAN' && (target.classList.contains('treejs-checkbox') || target.classList.contains('treejs-label'))) {
+      this.onItemClick(target.parentNode.nodeId);
+    }
+    else if (target.nodeName === 'LI' && target.classList.contains('treejs-node')) {
+      this.onItemClick(target.nodeId);
+    }
+    else if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher')) {
+      this.onSwitcherClick(target);
+    }
+    //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 hasUndefinedchild = [];
+    //This may be a problem the day a node value is "undefined"
+    hasUndefinedchild = childspans.filter(ele => {
+      return ele.textContent === 'undefined';
+    });
+    // If the user clicked on an unloaded node
+    if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher') && hasUndefinedchild.length > 0) {
+      // Clear the subnode HTML
+      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') {
           // WS Call
           this.options.parentApi
-            .getDataFromSourceClassification(this.options.parentApi.options.url, {
-              startNode: target.parentNode.nodeId
-            })
+            .getDataFromSourceClassification(this.options.parentApi.theOptions.url, {
+            startNode: target.parentNode.nodeId
+          })
             .then(data => {
-              debugger;
-              this.options.parentApi.completeCurrentTreeWithTree(data, target.parentNode.nodeId);
-            });
-          }
-          else {
-            // WS Call
-            this.options.parentApi
-              .getDataFromSource(this.options.parentApi.options.url, {
-                StartNodeID: target.parentNode.nodeId,
-                lng: this.options.parentApi.options.options.lng,
-                IsDeprecated: this.options.parentApi.options.options.IsDeprecated,
-              })
-              .then(data => {
-                this.options.parentApi.completeCurrentTreeWithTree(data, target.parentNode.nodeId);
-              });
-          }
+            this.options.parentApi.completeCurrentTreeWithTree(data, target.parentNode.nodeId);
+          });
+        }
+        else {
+          // WS Call
+          this.options.parentApi
+            .getDataFromSource(this.options.parentApi.theOptions.url, {
+            StartNodeID: target.parentNode.nodeId,
+            lng: this.options.parentApi.theOptions.options.lng,
+            IsDeprecated: this.options.parentApi.theOptions.options.IsDeprecated,
+          })
+            .then(data => {
+            this.options.parentApi.completeCurrentTreeWithTree(data);
+          });
         }
-
-        this.onSwitcherClick(target);
       }
-    },
-    false,
-  );
+      this.onSwitcherClick(target);
+    }
+  }, false);
 };
-
 Tree.prototype.onItemClick = function (id) {
+  if (this.options.parentApi.isDisabled)
+    return;
+  if (!this.options.parentApi.theOptions.multiple)
+    this.emptyNodesCheckStatus();
   this.options.parentApi.setNodeAsSelected(id, this, true);
 };
-
-Tree.prototype.unCheckElement = id => {
-  undefined.setValue(id);
-  undefined.updateLiElements();
+Tree.prototype.unCheckElement = function (id) {
+  this.setValue(id);
+  this.updateLiElements();
 };
-
 Tree.prototype.setValue = function (value) {
   const node = this.nodesById[value];
-  if (!node) return;
+  if (!node)
+    return;
   const childrenStatus = getChildrenStatus(node);
   const prevStatus = node.status;
   let status = null;
@@ -350,7 +277,8 @@ Tree.prototype.setValue = function (value) {
   if (childrenStatus) {
     status = prevStatus === 1 ? 2 : 1;
     // No child selected default comportement
-  } else {
+  }
+  else {
     status = prevStatus === 1 || prevStatus === 2 ? 0 : 2;
   }
   node.status = status;
@@ -358,17 +286,16 @@ Tree.prototype.setValue = function (value) {
   this.walkUp(node, 'status');
   this.walkDown(node, 'status');
 };
-
 function getChildrenStatus(node) {
   if (node.children && node.children.length) {
     const childrenChecked = node.children.reduce((acc, child) => {
-      if (!isNaN(child.status)) return acc + child.status;
+      if (!isNaN(child.status))
+        return acc + child.status;
       return acc;
     }, 0);
     return childrenChecked;
   }
 }
-
 Tree.prototype.getValues = function () {
   const values = [];
   for (let id in this.leafNodesById) {
@@ -380,7 +307,6 @@ Tree.prototype.getValues = function () {
   }
   return values;
 };
-
 Tree.prototype.setValues = function (values) {
   this.emptyNodesCheckStatus();
   values.forEach(value => {
@@ -390,10 +316,10 @@ Tree.prototype.setValues = function (values) {
   const { onChange } = this.options;
   onChange && onChange.call(this);
 };
-
 Tree.prototype.setDisable = function (value) {
   const node = this.nodesById[value];
-  if (!node) return;
+  if (!node)
+    return;
   const prevDisabled = node.disabled;
   if (!prevDisabled) {
     node.disabled = true;
@@ -402,7 +328,6 @@ Tree.prototype.setDisable = function (value) {
     this.walkDown(node, 'disabled');
   }
 };
-
 Tree.prototype.getDisables = function () {
   const values = [];
   for (let id in this.leafNodesById) {
@@ -414,7 +339,6 @@ Tree.prototype.getDisables = function () {
   }
   return values;
 };
-
 Tree.prototype.setDisables = function (values) {
   this.emptyNodesDisable();
   values.forEach(value => {
@@ -422,21 +346,19 @@ Tree.prototype.setDisables = function (values) {
   });
   this.updateLiElements();
 };
-
 Tree.prototype.emptyNodesCheckStatus = function () {
   this.willUpdateNodesById = this.getSelectedNodesById();
-  Object.values(this.willUpdateNodesById).forEach(node => {
-    if (!node.disabled) node.status = 0;
+  Object.values(this.willUpdateNodesById).forEach((node) => {
+    if (!node.disabled)
+      node.status = 0;
   });
 };
-
 Tree.prototype.emptyNodesDisable = function () {
   this.willUpdateNodesById = this.getDisabledNodesById();
-  Object.values(this.willUpdateNodesById).forEach(node => {
+  Object.values(this.willUpdateNodesById).forEach((node) => {
     node.disabled = false;
   });
 };
-
 Tree.prototype.getSelectedNodesById = function () {
   return Object.entries(this.nodesById).reduce((acc, [id, node]) => {
     if (node.status === 1 || node.status === 2) {
@@ -445,7 +367,6 @@ Tree.prototype.getSelectedNodesById = function () {
     return acc;
   }, {});
 };
-
 Tree.prototype.getDisabledNodesById = function () {
   return Object.entries(this.nodesById).reduce((acc, [id, node]) => {
     if (node.disabled) {
@@ -454,18 +375,15 @@ Tree.prototype.getDisabledNodesById = function () {
     return acc;
   }, {});
 };
-
 Tree.prototype.updateLiElements = function () {
   Object.values(this.willUpdateNodesById).forEach(node => {
     this.updateLiElement(node);
   });
   this.willUpdateNodesById = {};
 };
-
 Tree.prototype.markWillUpdateNode = function (node) {
   this.willUpdateNodesById[node.id] = node;
 };
-
 Tree.prototype.onSwitcherClick = function (target) {
   const liEle = target.parentNode;
   const ele = liEle.lastChild;
@@ -486,7 +404,8 @@ Tree.prototype.onSwitcherClick = function (target) {
         liEle.classList.remove('treejs-node__close');
       },
     });
-  } else {
+  }
+  else {
     animation(150, {
       enter() {
         ele.style.height = `${height}px`;
@@ -504,7 +423,6 @@ Tree.prototype.onSwitcherClick = function (target) {
     });
   }
 };
-
 Tree.prototype.walkUp = function (node, changeState) {
   const { parent } = node;
   if (parent) {
@@ -512,33 +430,39 @@ Tree.prototype.walkUp = function (node, changeState) {
       let pStatus = null;
       // reduce status of selected children
       const statusCount = parent.children.reduce((acc, child) => {
-        if (!isNaN(child.status)) return acc + child.status;
+        if (!isNaN(child.status))
+          return acc + child.status;
         return acc;
       }, 0);
       // at least one child selected or halfchecked (status 1)
       if (statusCount) {
         // at least one child selected and parent is selected : status 2 else 1
         pStatus = statusCount >= 2 && parent.status === 2 ? 2 : 1;
-      } else {
+      }
+      else {
         pStatus = 0;
       }
-      if (parent.status === pStatus || parent.status === 2) return;
+      if (parent.status === pStatus || parent.status === 2)
+        return;
       parent.status = pStatus;
       if (parent.parent) {
-        parent.parent.children.find(item => item.id === parent.id).status = pStatus;
+        let parentparentchild = parent.parent.children.find(item => item.id === parent.id);
+        if (parentparentchild) {
+          parentparentchild.status = pStatus;
+        }
       }
-    } else {
+    }
+    else {
       const pDisabled = parent.children.reduce((acc, child) => acc && child.disabled, true);
-      if (parent.disabled === pDisabled) return;
+      if (parent.disabled === pDisabled)
+        return;
       parent.disabled = pDisabled;
     }
     this.markWillUpdateNode(parent);
     this.walkUp(parent, changeState);
   }
 };
-
-Tree.prototype.walkDown = function (node, changeState) {};
-
+Tree.prototype.walkDown = function (node, changeState) { };
 Tree.prototype.updateLiElement = function (node) {
   const { classList } = this.liElementsById[node.id];
   switch (node.status) {
@@ -554,17 +478,17 @@ Tree.prototype.updateLiElement = function (node) {
       classList.add('treejs-node__checked');
       break;
   }
-
   switch (node.disabled) {
     case true:
-      if (!classList.contains('treejs-node__disabled')) classList.add('treejs-node__disabled');
+      if (!classList.contains('treejs-node__disabled'))
+        classList.add('treejs-node__disabled');
       break;
     case false:
-      if (classList.contains('treejs-node__disabled')) classList.remove('treejs-node__disabled');
+      if (classList.contains('treejs-node__disabled'))
+        classList.remove('treejs-node__disabled');
       break;
   }
 };
-
 Tree.parseTreeData = function (data) {
   const treeNodes = deepClone(data);
   const nodesById = {};
@@ -574,17 +498,21 @@ Tree.parseTreeData = function (data) {
   const walkTree = function (nodes, parent) {
     nodes.forEach(node => {
       nodesById[node.id] = node;
-      if (node.checked) values.push(node.id);
-      if (node.disabled) disables.push(node.id);
-      if (parent) node.parent = parent;
+      if (node.checked)
+        values.push(node.id);
+      if (node.disabled)
+        disables.push(node.id);
+      if (parent)
+        node.parent = parent;
       if (node.children && node.children.length) {
         walkTree(node.children, node);
-      } else {
+      }
+      else {
         leafNodesById[node.id] = node;
       }
     });
   };
-  walkTree(treeNodes);
+  walkTree(treeNodes, null);
   return {
     treeNodes,
     nodesById,
@@ -593,19 +521,16 @@ Tree.parseTreeData = function (data) {
     defaultDisables: disables,
   };
 };
-
 Tree.createRootEle = function () {
   const div = document.createElement('div');
   div.classList.add('treejs');
   return div;
 };
-
 Tree.prototype.createUlEle = function () {
   const ul = document.createElement('ul');
   ul.classList.add('treejs-nodes');
   return ul;
 };
-
 Tree.prototype.createLiEle = function (node, closed) {
   const li = document.createElement('li');
   li.classList.add('treejs-node');
@@ -615,29 +540,32 @@ Tree.prototype.createLiEle = function (node, closed) {
   if (node.isDesaturated) {
     li.classList.add('treejs-node__desaturated');
   }
-  if (closed) li.classList.add('treejs-node__close');
+  if (node.searchMatch) {
+    li.classList.add('treejs-node__searchmatch');
+  }
+  if (closed)
+    li.classList.add('treejs-node__close');
   if (node.children && node.children.length) {
     const switcher = document.createElement('span');
     switcher.classList.add('treejs-switcher');
     li.appendChild(switcher);
-  } else {
+  }
+  else {
     li.classList.add('treejs-placeholder');
   }
-
-  if (!this.options.parentApi || (this.options.parentApi && this.options.parentApi.options.multiple)) {
+  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 label = document.createElement('span');
   label.classList.add('treejs-label');
   const text = document.createTextNode(node.text);
   label.appendChild(text);
   li.appendChild(label);
   li.nodeId = node.id;
-  if (this.options.parentApi.options.dragAndDropEnabled) {
-    li.setAttribute('draggable', true);
+  if (this.options.parentApi.theOptions.dragAndDropEnabled) {
+    li.setAttribute('draggable', 'true');
     li.addEventListener('dragstart', e => {
       this.options.parentApi.onItemDragStart(li, e);
     });
@@ -654,7 +582,6 @@ Tree.prototype.createLiEle = function (node, closed) {
       this.options.parentApi.onItemDrop(li, e);
     });
   }
-
   return li;
 };
 
@@ -17848,13 +17775,23 @@ var lodash = createCommonjsModule(function (module, exports) {
 }.call(commonjsGlobal));
 });
 
-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:14px}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 rgba(0, 0, 0, 0.65)}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>.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 .dragging{background:yellow;display:inline;opacity:.9}reneco-hierarchized-picker .treejs .dragover{background:#CCC}reneco-hierarchized-picker .treejs .dragover-over::after{content:\"\";display:block;width:2px;height:100%;position:absolute;top:0;left:0;background:red}reneco-hierarchized-picker .treejs .dragover-before::after{content:\"\";display:block;height:2px;width:100%;position:absolute;top:0;left:0;background:red}reneco-hierarchized-picker .treejs .dragover-after::after{content:\"\";display:block;height:2px;width:100%;position:absolute;bottom:0;left:0;background:red}reneco-hierarchized-picker .fieldError{color:red !important}reneco-hierarchized-picker .readonly-mode{color:grey}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}reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){margin:0 !important;padding-left:15px !important;background-color:var(--ion-color-light-tint, #F0F0F0)}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(--ion-color-light)}reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-medium);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(--ion-color-background, initial)}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: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.hierarchized-picker-icon{margin-left:8px}reneco-hierarchized-picker .hierarchized-picker-label{position:stacked;margin-left:5px}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}reneco-hierarchized-picker .hierarchized-picker-search input{width:90%}reneco-hierarchized-picker .hierarchized-picker-search{background-color:var(--ion-color-medium-tint);position:absolute !important;width:333px !important;margin-top:10px;border-radius:4px;padding:8.5px}reneco-hierarchized-picker .hierarchized-picker-tree-area{width:333px !important;padding-top:45px}reneco-hierarchized-picker .hierarchized-picker-modal-area{background-color:var(--ion-color-light-tint) !important;position:absolute;z-index:10;padding-left:15px;overflow:auto;top:30px;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(--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(--ion-color-primary) !important;border-color:var(--ion-color-primary) !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker #searchInTree{padding:8.5px 8px;background:var(--ion-color-background);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}reneco-hierarchized-picker #autocomplete-results-area{position:absolute;margin-top:28px;background-color:white;left:20px;z-index:10;padding:0px 5px;max-width:300px;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}reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node{padding:11px 0px}::-webkit-scrollbar-thumb{background:var(--ion-color-primary);width:8px;margin:5px;border-radius:5px}::-webkit-scrollbar{background:var(--ion-color-medium-tint);width:8px;height:8px;margin:5px;cursor:pointer;border-radius:5px}::-webkit-scrollbar-corner{background-color:var(--ion-color-light-tint)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__close{background-color:var(--ion-color-dark-tint);color:var(--ion-color-dark-contrast)}[class$=\"-dark\"] reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-dark);color:var(--ion-color-dark-contrast)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--ion-color-background, initial);color:var(--ion-color-primary-contrast) !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) !important}[class$=\"-dark\"] reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){background-color:var(--ion-color-light-contrast) !important}";
+var browser = XMLHttpRequest;
+
+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:14px}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 rgba(0, 0, 0, 0.65)}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>.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:yellow;display:inline;opacity:.9;padding:11px 0px;display:block}reneco-hierarchized-picker .treejs .dragover{background:#CCC}reneco-hierarchized-picker .treejs .dragover-over::after{content:\"\";display:block;width:2px;height:100%;position:absolute;top:0;left:0;background:red}reneco-hierarchized-picker .treejs .dragover-before::after{content:\"\";display:block;height:2px;width:100%;position:absolute;top:0;left:0;background:red}reneco-hierarchized-picker .treejs .dragover-after::after{content:\"\";display:block;height:2px;width:100%;position:absolute;bottom:0;left:0;background:red}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}reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){margin:0 !important;padding-left:15px !important;background-color: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(--ion-color-light, #FAFAFA)}reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-medium, #bdbdbd7d);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(--ion-color-background, var(--mui-palette-background-default, rgba(221, 169, 37, 0.18)))}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: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-input input,reneco-hierarchized-picker .hierarchized-picker-search input{padding-left:5px !important;text-overflow:ellipsis !important;border:0;background:transparent;outline:none}reneco-hierarchized-picker .hierarchized-picker-search input{width:90%}reneco-hierarchized-picker .hierarchized-picker-search{background-color:var(--ion-color-medium-tint, #E0E0E0);position:absolute !important;width:333px !important;margin-top:10px;border-radius:4px;padding:8.5px}reneco-hierarchized-picker .hierarchized-picker-tree-area{width:333px !important;padding-top:48px}reneco-hierarchized-picker .hierarchized-picker-modal-area{background-color: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(--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(--ion-color-primary, var(--mui-palette-primary-main, #d58433)) !important;border-color:var(--ion-color-primary, var(--mui-palette-primary-main, #d58433)) !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker #searchInTree{padding:8.5px 8px;background:var(--ion-color-background, var(--mui-palette-background-default, 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}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}.hierarchized-picker-raw-tree-area.readonly li.treejs-node{cursor:initial;pointer-events:none}.hierarchized-picker-raw-tree-area.readonly li.treejs-node .treejs-switcher{pointer-events:all}::-webkit-scrollbar-thumb{background:var(--ion-color-primary, var(--mui-palette-primary-main, #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(--mui-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 waitBeforeTriggerSearch = 200;
+const waitBeforeTriggerSearch = 1000;
 function isNumeric(n) {
   return !isNaN(parseFloat(n)) && isFinite(n);
 }
-const MyComponent = class {
+function replacer(key, value) {
+  if (typeof value === "object" && value !== null) {
+    if (value instanceof browser) {
+      return "[XMLHttpRequest object]";
+    }
+  }
+  return value;
+}
+const HierarchizedPickerComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.valueChange = index.createEvent(this, "valueChange", 7);
@@ -17866,9 +17803,19 @@ const MyComponent = class {
     this.ignoreOptionsChanges = true; // Determines wether the options @Prop under @Watch will be ignored (to avoid circular calls)
     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
+    // Used to control wether we're draging over the same node, prevents the same event to be called multiple times
+    this.lastDragedOverNodeId = null;
+    // Used to control wether an event is being triggered one extra unwanted time on anscend of the targeted element
+    this.lastDragedOverTimeForAscendent = new Date().getTime();
+    // Used to remember when was last triggered the event over the target
+    this.lastDragedOverTimeForLevel = new Date().getTime();
+    // Used to accept the event being triggered on the same node multiple times after a delay to allow different drop modes
+    this.acceptableDelayBetweenSimilarActions = 300;
     this.options = undefined;
     this.valueChangeCallback = undefined;
     this.disabled = undefined;
+    this.isDisabled = undefined;
+    this.theOptions = undefined;
     this.newoptions = undefined;
     this.newfilter = undefined;
     this.componentID = undefined;
@@ -17882,8 +17829,8 @@ const MyComponent = class {
   }
   getValue() {
     var _a, _b, _c, _d;
-    if (!this.options.output) {
-      if (this.options.multiple) {
+    if (!this.theOptions.output) {
+      if (this.theOptions.multiple) {
         return Promise.resolve(this.value);
       }
       else {
@@ -17891,33 +17838,37 @@ const MyComponent = class {
       }
     }
     else {
-      if (this.options.multiple) {
-        return Promise.resolve((_b = this.value) === null || _b === void 0 ? void 0 : _b.map(item => item[this.options.output]));
+      if (this.theOptions.multiple) {
+        return Promise.resolve((_b = this.value) === null || _b === void 0 ? void 0 : _b.map(item => item[this.theOptions.output]));
       }
       else {
-        return Promise.resolve((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d[this.options.output]);
+        return Promise.resolve((_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d[this.theOptions.output]);
       }
     }
   }
   logError(messageToLog) {
-    console.error('--- Hierarchized picker ' + this.componentID + ' ERROR ---', messageToLog);
+    try {
+      console.error('--- Hierarchized picker ' + this.componentID + ' ERROR ---', messageToLog);
+    }
+    catch (_a) {
+      console.error('--- Hierarchized picker generic ERROR ---');
+    }
   }
   reloadCurrentValues() {
     let savedValues = this.value;
-    debugger;
     this.value = [];
     savedValues.forEach(element => {
       this.editValue(element.nodeid);
     });
   }
-  setNewOption(newValue, oldValue = null) {
+  async setNewOption(newValue, oldValue = null) {
     this.canload = true;
-    this.options = newValue;
-    if (this.options.source != "file") {
+    this.theOptions = newValue;
+    if (this.theOptions.source != "file") {
       this.rawData = null;
     }
     this.ready = false;
-    this.loadHierarchizedPicker();
+    await this.loadHierarchizedPicker();
     this.displayWhenLoaded();
     //NOTE: This could work in a synchronous environment => this.reloadCurrentValues();
   }
@@ -17928,14 +17879,14 @@ const MyComponent = class {
     this.filterTree(newfilter);
   }
   optionsChange(newValue) {
-    if (!this.options || !this.ready || this.ignoreOptionsChanges) {
+    if (!this.theOptions || !this.ready || this.ignoreOptionsChanges) {
       return;
     }
     this.setNewOption(newValue);
   }
   isChangeInOptions(newV, oldV) {
     const isEqual = lodash.isEqual(newV, oldV);
-    const changeDefaultValue = !(newV.defaultValue.length == oldV.defaultValue.length && newV.defaultValue.every((value) => oldV.defaultValue.includes(value)));
+    const changeDefaultValue = !(newV.defaultValue.length == oldV.defaultValue.length && newV.defaultValue.every(value => oldV.defaultValue.includes(value)));
     if (!isEqual && changeDefaultValue) {
       return changeDefaultValue;
     }
@@ -17957,14 +17908,15 @@ const MyComponent = class {
       this.errorToLog = "options.source value '" + object.source + "' doesn't meet interface IConf requirements";
     }
     else {
-      if (!((object.source != 'webservice') || (object.source == 'webservice' && object.url && typeof object.url == 'string'))) {
+      if (!(object.source != 'webservice' || (object.source == 'webservice' && object.url && typeof object.url == 'string'))) {
         toret = false;
         this.errorToLog = "options.url value '" + object.url + "' doesn't meet interface IConf requirements, is wrongly formated or doesn't match option.source value";
       }
       //TODO allow Function along with string
-      if (!((object.source != 'webservice' && !object.token) || (object.source == 'webservice' && object.token && (typeof object.token == 'string' || typeof object.token == 'function')))) {
+      if (!((object.source != 'webservice' && !object.token) ||
+        (object.source == 'webservice' && object.token && (typeof object.token == 'string' || typeof object.token == 'function')))) {
         toret = false;
-        this.errorToLog = "options.token value doesn't meet interface IConf requirements or doesn't match option.source value";
+        this.errorToLog = "options.token value doesn't meet interface IConf requirements or doesn't match option.source value :: typeof object.token == " + typeof object.token;
       }
       if (!((object.source != 'webservice' && !object.options) || (object.source == 'webservice' && object.options && typeof object.options == 'object'))) {
         toret = false;
@@ -17974,7 +17926,7 @@ const MyComponent = class {
         toret = false;
         this.errorToLog = "options.data value doesn't meet interface IConf requirements or doesn't match option.source value";
       }
-      if (!((object.source != 'file') || (object.source == 'file' && object.url && typeof object.url == 'string'))) {
+      if (!(object.source != 'file' || (object.source == 'file' && object.url && typeof object.url == 'string'))) {
         toret = false;
         this.errorToLog = "options.url value '" + object.url + "' doesn't meet interface IConf requirements or doesn't match option.source value";
       }
@@ -17983,89 +17935,112 @@ const MyComponent = class {
       toret = false;
       this.errorToLog = "options.origin value '" + object.origin + "' doesn't meet interface IConf requirements";
     }
-    if (!((!object.output && typeof object.output != "boolean") || (typeof object.output == 'string' && ['fullpath', 'nodeid'].indexOf(object.output) > -1))) {
+    if (!((!object.output && typeof object.output != 'boolean') || (typeof object.output == 'string' && ['fullpath', 'nodeid'].indexOf(object.output) > -1))) {
       toret = false;
       this.errorToLog = "options.output value '" + object.output + "' doesn't meet interface IConf requirements";
     }
-    if (!((!object.multiple && typeof object.multiple != "boolean") || typeof object.multiple == 'boolean')) {
+    if (!((!object.multiple && typeof object.multiple != 'boolean') || typeof object.multiple == 'boolean')) {
       toret = false;
       this.errorToLog = "options.multiple value '" + object.multiple + "' doesn't meet interface IConf requirements";
     }
-    if (!((!object.mode && typeof object.mode != "boolean") || (typeof object.mode == 'string' && ['tree', 'input'].indexOf(object.mode) > -1))) {
+    if (!((!object.mode && typeof object.mode != 'boolean') || (typeof object.mode == 'string' && ['tree', 'input'].indexOf(object.mode) > -1))) {
       this.errorToLog = "options.mode value '" + object.mode + "' doesn't meet interface IConf requirements";
     }
     if (!((!object.label && typeof object.label != "boolean") || typeof object.label == 'string')) {
       toret = false;
       this.errorToLog = "options.label value '" + object.label + "' doesn't meet interface IConf requirements";
     }
-    if (!((!object.searchPlaceholder && typeof object.searchPlaceholder != "boolean") || typeof object.searchPlaceholder == 'string')) {
+    if (!((!object.searchPlaceholder && typeof object.searchPlaceholder != 'boolean') || typeof object.searchPlaceholder == 'string')) {
       toret = false;
       this.errorToLog = "options.searchPlaceholder value '" + object.searchPlaceholder + "' doesn't meet interface IConf requirements";
     }
-    if (!((!object.defaultValue && typeof object.defaultValue != "boolean") ||
-      ((typeof object.defaultValue == 'object' && (object.multiple == true || object.defaultValue.length <= 1)) ||
-        typeof object.defaultValue == 'string' ||
-        typeof object.defaultValue == 'number'))) {
+    if (!((!object.defaultValue && typeof object.defaultValue != 'boolean') ||
+      (typeof object.defaultValue == 'object' && (object.multiple == true || object.defaultValue.length <= 1)) ||
+      typeof object.defaultValue == 'string' ||
+      typeof object.defaultValue == 'number')) {
       toret = false;
       this.errorToLog = "options.defaultValue value '" + object.defaultValue + "' doesn't meet interface IConf requirements or doesn't match option.multiple value";
     }
-    if (!((!object.disabled && typeof object.disabled != "boolean") || typeof object.disabled == 'boolean')) {
+    if (!((!object.readonly && typeof object.readonly != "boolean") || typeof object.readonly == 'boolean')) {
       toret = false;
       this.errorToLog = "readonly value '" + object.readonly + "' doesn't meet interface IConf requirements";
     }
-    if (!((!object.loading && typeof object.loading != "boolean") || (typeof object.loading == 'string' && ['display', 'click'].indexOf(object.loading) > -1))) {
+    if (!((!object.loading && typeof object.loading != 'boolean') || (typeof object.loading == 'string' && ['display', 'click'].indexOf(object.loading) > -1))) {
       toret = false;
       this.errorToLog = "options.loading value '" + object.loading + "' doesn't meet interface IConf requirements";
     }
-    if (!((!object.displayTree && typeof object.displayTree != "boolean") || typeof object.displayTree == 'boolean')) {
+    if (!((!object.displayTree && typeof object.displayTree != 'boolean') || typeof object.displayTree == 'boolean')) {
       toret = false;
       this.errorToLog = "options.displayTree value '" + object.displayTree + "' doesn't meet interface IConf requirements";
     }
-    if (!((!object.minDepth && typeof object.minDepth != "number") || typeof object.minDepth == 'number') || (object.maxDepth && object.maxDepth < object.minDepth)) {
+    if (!((!object.minDepth && typeof object.minDepth != 'number') || typeof object.minDepth == 'number') || (object.maxDepth && object.maxDepth < object.minDepth)) {
       toret = false;
       this.errorToLog = "options.minDepth value '" + object.minDepth + "' doesn't meet interface IConf requirements or mismatches with maxDepth value";
     }
-    if (!((!object.minDepth && typeof object.maxDepth != "number") || typeof object.maxDepth == 'number') || (object.minDepth && object.minDepth > object.maxDepth)) {
+    if (!((!object.maxDepth && typeof object.maxDepth != "number") || typeof object.maxDepth == 'number') || (object.minDepth && object.minDepth > object.maxDepth)) {
       toret = false;
       this.errorToLog = "options.maxDepth value '" + object.maxDepth + "' doesn't meet interface IConf requirements or mismatches with minDepth value";
     }
-    if (!((!object.isFullpath && typeof object.isFullpath != "boolean") || typeof object.isFullpath == 'boolean')) {
+    if (!((!object.isFullpath && typeof object.isFullpath != 'boolean') || typeof object.isFullpath == 'boolean')) {
       toret = false;
       this.errorToLog = "options.isFullpath value '" + object.isFullpath + "' doesn't meet interface IConf requirements";
     }
-    if (!((!object.showAutocomplete && typeof object.showAutocomplete != "boolean") || typeof object.showAutocomplete == 'boolean')) {
+    if (!((!object.showAutocomplete && typeof object.showAutocomplete != 'boolean') || typeof object.showAutocomplete == 'boolean')) {
       toret = false;
       this.errorToLog = "options.showAutocomplete value '" + object.showAutocomplete + "' doesn't meet interface IConf requirements";
     }
-    if (!((!object.openTreeWhenLoaded && typeof object.openTreeWhenLoaded != "boolean") || typeof object.openTreeWhenLoaded == 'boolean')) {
+    if (!((!object.openTreeWhenLoaded && typeof object.openTreeWhenLoaded != 'boolean') || typeof object.openTreeWhenLoaded == 'boolean')) {
       toret = false;
       this.errorToLog = "options.openTreeWhenLoaded value '" + object.openTreeWhenLoaded + "' doesn't meet interface IConf requirements";
     }
+    if (!((!object.displayRootNode && typeof object.displayRootNode != "boolean") || typeof object.displayRootNode == 'boolean')) {
+      toret = false;
+      this.errorToLog = "options.displayRootNode value '" + object.displayRootNode + "' doesn't meet interface IConf requirements";
+    }
+    if (!((!object.dragAndDropEnabled && typeof object.dragAndDropEnabled != "boolean") || typeof object.dragAndDropEnabled == 'boolean')) {
+      toret = false;
+      this.errorToLog = "options.dragAndDropEnabled value '" + object.dragAndDropEnabled + "' doesn't meet interface IConf requirements";
+    }
+    if (!((!object.contextMenu && typeof object.contextMenu != 'object') || typeof object.contextMenu == 'object')) {
+      toret = false;
+      this.errorToLog = "options.contextMenu value doesn't meet interface IConf requirements";
+    }
+    if (!((!object.searchResultPresentsUnMatched && typeof object.searchResultPresentsUnMatched != "boolean") || typeof object.searchResultPresentsUnMatched == 'boolean')) {
+      toret = false;
+      this.errorToLog = "options.searchResultPresentsUnMatched value '" + object.searchResultPresentsUnMatched + "' doesn't meet interface IConf requirements";
+    }
     return toret;
   }
-  initComponent() {
+  async initComponent() {
     // Setup default values
-    if (!this.options.multiple)
-      this.options.multiple = false;
-    if (!this.options.mode)
-      this.options.mode = 'input';
-    if (!this.options.defaultValue) {
-      this.options.defaultValue = [];
+    if (!this.theOptions.multiple)
+      this.theOptions.multiple = false;
+    if (!this.theOptions.mode)
+      this.theOptions.mode = 'input';
+    if (!this.theOptions.defaultValue) {
+      this.theOptions.defaultValue = [];
     }
-    else if (typeof this.options.defaultValue != 'object') {
-      this.options.defaultValue = [this.options.defaultValue];
+    else if (typeof this.theOptions.defaultValue != 'object') {
+      this.theOptions.defaultValue = [this.theOptions.defaultValue];
     }
-    let isNumeric = function (str) {
+    let strIsNumeric = function (str) {
       if (typeof str != "string")
         return false;
       return !isNaN(str) &&
         !isNaN(parseFloat(str));
     };
     let autoAssignReach = true;
-    let defaultFromFullpaths = [];
-    this.options.defaultValue.forEach(element => {
-      if (!(typeof element == 'number') && !isNumeric(element)) {
-        if (this.options.source != "webservice") {
+    let defaultFromFullpaths = undefined;
+    try {
+      this.theOptions.defaultValue.map(() => { });
+    }
+    catch (error) {
+      this.errorToLog = "There's an issue with your defaultValue format: " + this.theOptions.defaultValue.toString();
+      return;
+    }
+    await Promise.all(this.theOptions.defaultValue.map(async (element) => {
+      if (!(typeof element == 'number') && !strIsNumeric(element)) {
+        if (this.theOptions.source !== "webservice") {
           let errormsg = 'The loading of nodes based on fullpath is only available on webservice mode for now!';
           this.displayPickerError(errormsg);
           this.errorToLog = errormsg;
@@ -18073,101 +18048,127 @@ const MyComponent = class {
           return;
         }
         else {
-          defaultFromFullpaths.push(this.getNodeIdFromFullpath(element));
+          if (!defaultFromFullpaths) {
+            defaultFromFullpaths = [];
+          }
+          const valtopush = await this.getNodeIdFromFullpath(element).catch((err) => { });
+          if (valtopush) {
+            defaultFromFullpaths.push(valtopush);
+          }
         }
       }
-    });
-    if (defaultFromFullpaths.length > 0) {
-      this.options.defaultValue = defaultFromFullpaths;
+    }));
+    if (defaultFromFullpaths) {
+      this.theOptions.defaultValue = defaultFromFullpaths;
     }
-    if (this.options.options) {
-      if (!this.options.options.Reach && this.options.defaultValue.length > 0) {
+    if (this.theOptions.options) {
+      if (!this.theOptions.options.Reach && this.theOptions.defaultValue.length > 0) {
         if (autoAssignReach) {
-          this.options.options.Reach = this.options.defaultValue.map(element => {
+          this.theOptions.options.Reach = this.theOptions.defaultValue.map(element => {
             return Number(element);
           });
         }
         else {
-          this.errorToLog = "options.options.Reach is undefined and can't be auto-assigned: either specify a 'Reach' option " +
-            " in your webservice call options or make sure the defaultValue property contains node IDs and not fullpath values.";
+          this.errorToLog =
+            "theOptions.options.Reach is undefined and can't be auto-assigned: either specify a 'Reach' option " +
+              ' in your webservice call options or make sure the defaultValue property contains node IDs and not fullpath values.';
         }
       }
     }
-    if (!this.disabled)
-      this.disabled = false;
-    if (!this.options.loading)
-      this.options.loading = "display";
-    if (!this.options.displayTree && this.options.displayTree != false)
-      this.options.displayTree = true;
+    if (!this.isDisabled)
+      this.isDisabled = false;
+    if (this.theOptions.readonly !== undefined)
+      this.isDisabled = this.theOptions.readonly;
+    if (!this.theOptions.loading)
+      this.theOptions.loading = "display";
+    if (!this.theOptions.displayTree && this.theOptions.displayTree != false)
+      this.theOptions.displayTree = true;
     if (!this.hasFocus)
       this.hasFocus = [];
-    if (!this.options.isFullpath && this.options.isFullpath != false)
-      this.options.isFullpath = true;
-    if (!this.options.showAutocomplete)
-      this.options.showAutocomplete = false;
-    if (!this.options.openTreeWhenLoaded)
-      this.options.openTreeWhenLoaded = false;
-    if (!this.options.displayRootNode)
-      this.options.displayRootNode = false;
+    if (!this.theOptions.isFullpath && this.theOptions.isFullpath != false)
+      this.theOptions.isFullpath = true;
+    if (!this.theOptions.showAutocomplete)
+      this.theOptions.showAutocomplete = false;
+    if (!this.theOptions.openTreeWhenLoaded)
+      this.theOptions.openTreeWhenLoaded = false;
+    if (!this.theOptions.displayRootNode)
+      this.theOptions.displayRootNode = false;
+    if (!this.theOptions.dragAndDropEnabled)
+      this.theOptions.dragAndDropEnabled = false;
+    if (!this.theOptions.errorsInInput && this.theOptions.errorsInInput !== false)
+      this.theOptions.errorsInInput = true;
   }
-  loadHierarchizedPicker() {
+  async loadHierarchizedPicker() {
     if (this.el.getAttribute("options") && typeof this.el.getAttribute("options") == "string") {
-      this.options = JSON.parse(this.el.getAttribute("options"));
+      this.theOptions = JSON.parse(this.el.getAttribute("options"));
     }
-    let that = this;
     // If not in a debug mode, disable logs
     {
       this.mylog = function () { };
       console.time = function () { };
+      console.timeEnd = function () { };
     }
     // Setup component unique ID
-    if (this.options.id)
-      this.componentID = this.options.id;
+    if (this.theOptions && this.theOptions.id)
+      this.componentID = this.theOptions.id;
     else if (!this.componentID)
-      this.componentID = (document.querySelectorAll('[id^="tree-area-"]').length + 1).toString();
-    if (!this.options)
+      this.componentID = (Array.from(document.querySelectorAll('reneco-hierarchized-picker')).indexOf(this.el) + 1).toString();
+    if (!this.theOptions)
       return;
-    if (this.options.defaultValue != undefined && this.options.defaultValue.length === 0) {
-      delete this.options.defaultValue;
+    if (this.theOptions.defaultValue != undefined && this.theOptions.defaultValue.length === 0) {
+      delete this.theOptions.defaultValue;
     }
-    this.canload = this.isInstanceOfIConf(this.options);
-    this.initComponent();
+    this.canload = this.isInstanceOfIConf(this.theOptions);
+    await this.initComponent();
     // Displays option values
-    this.mylog(this.options);
-    window.addEventListener("click", function (evt) {
-      let myself = that.amIFocusedByEvent(evt);
-      if (!myself && that.options.mode != "tree") {
-        that.showTree("hide");
+    this.mylog(this.theOptions);
+    window.addEventListener("click", (evt) => {
+      let myself = this.amIFocusedByEvent(evt);
+      if (!myself && this.theOptions.mode != "tree") {
+        this.showTree("hide");
       }
     });
+    this.el.addEventListener('dragover', event => {
+      event.preventDefault();
+    });
+    this.el.addEventListener('dragenter', event => {
+      event.preventDefault();
+    });
   }
-  componentWillLoad() {
-    this.loadHierarchizedPicker();
-    this.mylog("----- componentWillLoad ending");
+  async componentWillLoad() {
+    this.isDisabled = this.disabled;
+    this.theOptions = this.options;
+    await this.loadHierarchizedPicker();
+    this.mylog("----- componentWillLoad ending -----");
   }
   amIFocusedByEvent(evt) {
-    let that = this;
     let myself = false;
-    evt.composedPath().forEach(function (value, _index) {
-      if (value.id == 'hierarchized-picker-' + that.componentID) {
+    evt.composedPath().forEach((value, _index) => {
+      if (value.id == 'hierarchized-picker-' + this.componentID) {
         myself = true;
       }
     });
-    return (myself);
+    return myself;
   }
   amIFocused() {
     return (document.activeElement == document.querySelector('#hierarchized-picker-input-' + this.componentID + ' input') ||
       document.activeElement == document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input'));
   }
   amIShowingMyTree() {
-    return (document.querySelectorAll("#hierarchized-picker-" + this.componentID + " .hierarchized-picker-modal-area:not(.hidden)").length > 0);
+    return document.querySelectorAll('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-modal-area:not(.hidden)').length > 0;
   }
   async getToken() {
-    if (typeof this.options.token == 'string') {
-      return this.options.token;
+    if (typeof this.theOptions.token == 'string') {
+      //IF token is not a token, get the token from the local storage
+      if (this.theOptions.token.length > 200) {
+        return this.theOptions.token;
+      }
+      else {
+        return window.localStorage.getItem(this.theOptions.token);
+      }
     }
-    if (typeof this.options.token == 'function') {
-      return await this.options.token();
+    if (typeof this.theOptions.token == 'function') {
+      return await this.theOptions.token();
     }
   }
   mergeData(source, toadd) {
@@ -18215,86 +18216,135 @@ const MyComponent = class {
     });
     return source;
   }
-  getNodeIdFromFullpath(fullpath) {
-    let toret = null;
-    let that = this;
-    let token = this.options.token;
-    let xhr = new XMLHttpRequest();
-    xhr.open('POST', this.getApiNodeFromFullpathURL(), false);
-    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
-    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-    xhr.onload = function (e) {
-      that.mylog('XHR ONLOAD', e, xhr.statusText);
-      if (xhr.readyState === 4) {
-        if (xhr.status === 200) {
-          that.mylog('XHR 200', JSON.parse(xhr.responseText));
-          if (that.options.origin == 'thesaurus') {
-            toret = (JSON.parse(xhr.responseText).topic.TTop_PK_ID);
+  searchAndMergeDataClassification(source, toadd) {
+    let terminate = false;
+    source.children.forEach((element, index) => {
+      if (terminate) {
+        return source;
+      }
+      if (source.ID == toadd.ID) {
+        let subterminate = false;
+        toadd.children.forEach((taelement, index) => {
+          if (subterminate) {
+            return;
           }
-          else if (that.options.origin == 'position') {
-            let result = JSON.parse(xhr.responseText);
-            if (result.exist) {
-              toret = (result.position.ID);
-            }
-            else {
-              that.errorToLog = "The fullpath passed for defaultValue does not exist!";
-            }
+          if (element.ID == taelement.ID) {
+            element = this.mergeData(element, taelement);
+            subterminate = true;
+            return;
           }
-          // TODO -> this does not exist, set accordingly to future API
-          else if (that.options.origin == 'classification') {
-            let result = JSON.parse(xhr.responseText);
-            if (result.exist) {
-              toret = (result.node.ID);
+        });
+      }
+      else {
+        if (element.ID == toadd.ID) {
+          element = this.mergeData(element, toadd);
+          terminate = true;
+          return source;
+        }
+        else {
+          this.searchAndMergeDataClassification(element, toadd);
+        }
+      }
+    });
+    return source;
+  }
+  getNodeIdFromFullpath(fullpath) {
+    return new Promise((resolve, reject) => {
+      let token = this.theOptions.token;
+      let xhr = new browser();
+      xhr.open('POST', this.getApiNodeFromFullpathURL(), true);
+      xhr.setRequestHeader('Authorization', 'Bearer ' + token);
+      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+      xhr.onload = (e) => {
+        try {
+          this.mylog('getNodeIdFromFullpath XHR ONLOAD', e, xhr.statusText);
+          if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+              this.mylog('getNodeIdFromFullpath XHR 200', JSON.parse(xhr.responseText));
+              let result = JSON.parse(xhr.responseText);
+              if (result.exist) {
+                if (this.theOptions.origin == "thesaurus") {
+                  resolve(result.topic.TTop_PK_ID);
+                }
+                else if (this.theOptions.origin == 'position') {
+                  resolve(result.position.ID);
+                }
+                // TODO -> this does not exist, set accordingly to future API
+                else if (this.theOptions.origin == 'classification') {
+                  resolve(result.node.ID);
+                }
+              }
+              else {
+                this.errorToLog = "The fullpath passed for defaultValue does not exist!";
+                if (!this.theOptions.multiple && !this.theOptions.errorsInInput) {
+                  this.displayedValue = fullpath;
+                }
+                reject("null 1");
+              }
             }
             else {
-              that.errorToLog = "The fullpath passed for defaultValue does not exist!";
+              this.logError(['getNodeIdFromFullpath XHR NOT 200', xhr.statusText]);
+              reject("null 2");
             }
           }
         }
-        else {
-          that.logError(['XHR NOT 200', xhr.statusText]);
+        catch (error) {
+          this.logError("There has been an issue with xhr.onload in getNodeIdFromFullpath: " + error.toString());
+          reject("null 3");
+        }
+      };
+      xhr.onerror = (e) => {
+        var _a;
+        (_a = this.loader) === null || _a === void 0 ? void 0 : _a.classList.remove('loading');
+        this.logError(['getNodeIdFromFullpath XHR ERROR', e, xhr.statusText]);
+        reject("null 4");
+      };
+      if (this.theOptions.origin == 'thesaurus') {
+        let payload = {
+          "sValue": fullpath,
+          "sTypeField": "fullpath"
+        };
+        if (this.theOptions && this.theOptions.options && this.theOptions.options.StartNodeID) {
+          payload.iStartNode = parseInt(this.theOptions.options.StartNodeID.toString());
         }
+        // if (this.theOptions && this.theOptions.options && this.theOptions.options.lng){
+        //   payload.sLng = this.theOptions.options.lng;
+        // }
+        xhr.send(JSON.stringify(payload));
       }
-    };
-    xhr.onerror = function (e) {
-      var _a;
-      (_a = that.loader) === null || _a === void 0 ? void 0 : _a.classList.remove('loading');
-      that.logError(['XHR ERROR', e, xhr.statusText]);
-    };
-    if (this.options.origin == 'thesaurus') {
-      xhr.send(JSON.stringify({
-        "sValue": fullpath,
-        "sTypeField": "fullpath"
-      }));
-    }
-    else if (this.options.origin == 'position') {
-      xhr.send(JSON.stringify({
-        "value": fullpath
-      }));
-    }
-    // TODO -> this does not exist, set accordingly to future API
-    else if (this.options.origin == 'classification') {
-      xhr.send(JSON.stringify({
-        "fullpath_system": fullpath
-      }));
-    }
-    return toret;
+      else if (this.theOptions.origin == 'position') {
+        let payload = {
+          "value": fullpath
+        };
+        if (this.theOptions && this.theOptions.options && this.theOptions.options.StartNodeID) {
+          payload.startNode = this.theOptions.options.StartNodeID;
+        }
+        xhr.send(JSON.stringify(payload));
+      }
+      // TODO -> this does not exist, set accordingly to future API
+      else if (this.theOptions.origin == 'classification') {
+        xhr.send(JSON.stringify({
+          fullpath_system: fullpath,
+        }));
+      }
+      // CHECK return toret;
+    });
   }
   // Triggers a XHR request and stores the result in this.rawData
   getDataFromSourceClassification(url, options, init = false) {
     var _a;
     let that = this;
     (_a = this.loader) === null || _a === void 0 ? void 0 : _a.classList.add('loading');
-    let targetURL = url + "/" + options.startNode;
-    if (options.searchedValue) {
-      targetURL += "/" + options.searchedValue;
-    }
+    let targetURL = url + '/' + options.startNode;
+    // if (options.searchedValue) {
+    //   targetURL += '/' + options.searchedValue;
+    // }
     let getDataPromise = new Promise((resolve, reject) => {
-      this.getToken().then((token) => {
-        let xhr = new XMLHttpRequest();
+      this.getToken().then(token => {
+        let xhr = new browser();
         xhr.open('GET', targetURL);
-        xhr.setRequestHeader('Authorization', 'Bearer ' + token);
-        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+        // xhr.setRequestHeader('Authorization', 'Bearer ' + token);
+        // xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
         xhr.onload = function (e) {
           var _a;
           (_a = that.loader) === null || _a === void 0 ? void 0 : _a.classList.remove('loading');
@@ -18303,7 +18353,7 @@ const MyComponent = class {
             if (xhr.status === 200) {
               that.mylog('XHR 200', JSON.parse(xhr.responseText));
               if (that.rawData) {
-                that.rawData = that.searchAndMergeData(that.rawData, JSON.parse(xhr.responseText));
+                that.rawData = that.searchAndMergeDataClassification(that.rawData, JSON.parse(xhr.responseText));
               }
               else {
                 that.rawData = JSON.parse(xhr.responseText);
@@ -18337,49 +18387,57 @@ const MyComponent = class {
   // Triggers a XHR request and stores the result in this.rawData
   getDataFromSource(url, options, init = false) {
     var _a;
-    let that = this;
     (_a = this.loader) === null || _a === void 0 ? void 0 : _a.classList.add('loading');
+    // if (options.searchedValue) {
+    //   targetURL += '/' + options.searchedValue;
+    // }
     let getDataPromise = new Promise((resolve, reject) => {
-      this.getToken().then((token) => {
-        let xhr = new XMLHttpRequest();
+      this.getToken().then(token => {
+        let xhr = new browser();
         xhr.open('POST', url);
         xhr.setRequestHeader('Authorization', 'Bearer ' + token);
         xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-        xhr.onload = function (e) {
+        xhr.onload = (e) => {
           var _a;
-          (_a = that.loader) === null || _a === void 0 ? void 0 : _a.classList.remove('loading');
-          that.mylog('XHR ONLOAD', e, xhr.statusText);
-          if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-              that.mylog('XHR 200', JSON.parse(xhr.responseText));
-              if (that.rawData) {
-                that.rawData = that.searchAndMergeData(that.rawData, JSON.parse(xhr.responseText));
+          try {
+            (_a = this.loader) === null || _a === void 0 ? void 0 : _a.classList.remove('loading');
+            this.mylog('getDataFromSource XHR ONLOAD', e, xhr.statusText);
+            if (xhr.readyState === 4) {
+              if (xhr.status === 200) {
+                this.mylog('getDataFromSource XHR 200', JSON.parse(xhr.responseText));
+                if (this.rawData) {
+                  this.rawData = this.searchAndMergeData(this.rawData, JSON.parse(xhr.responseText));
+                }
+                else {
+                  this.rawData = JSON.parse(xhr.responseText);
+                }
+                resolve(JSON.parse(xhr.responseText));
+                this.ready = true;
               }
               else {
-                that.rawData = JSON.parse(xhr.responseText);
+                this.logError(['getDataFromSource XHR NOT 200', xhr.statusText]);
+                this.errorLoadingXHR();
+                reject('getDataFromSource XHR NOT 200');
               }
-              resolve(JSON.parse(xhr.responseText));
-              if (init) {
-                that.formatDefaultValue();
-                that.showSelectedNodes();
-              }
-              that.ready = true;
-            }
-            else {
-              that.logError(['XHR NOT 200', xhr.statusText]);
-              that.errorLoadingXHR();
-              reject();
             }
           }
+          catch (error) {
+            this.logError("There has been an issue with xhr.onload in getDataFromSource: " + error.toString());
+          }
         };
-        xhr.onerror = function (e) {
+        xhr.onerror = (e) => {
           var _a;
-          (_a = that.loader) === null || _a === void 0 ? void 0 : _a.classList.remove('loading');
-          that.logError(['XHR ERROR', e, xhr.statusText]);
-          that.errorLoadingXHR();
-          reject();
+          (_a = this.loader) === null || _a === void 0 ? void 0 : _a.classList.remove('loading');
+          this.logError(['getDataFromSource XHR ERROR', e, xhr.statusText]);
+          this.errorLoadingXHR();
+          reject(e);
         };
-        xhr.send(JSON.stringify(options));
+        try {
+          xhr.send(JSON.stringify(options));
+        }
+        catch (error) {
+          this.logError("There has been an issue with xhr.send in getDataFromSource: " + error.toString());
+        }
       });
     });
     return getDataPromise;
@@ -18388,46 +18446,45 @@ const MyComponent = class {
   errorLoadingXHR() {
     var _a;
     this.displayPickerError('Error loading webservice data!');
-    document.querySelector('#tree-area-' + this.componentID).innerHTML = 'Error loading webservice data!';
-    // NB: Maybe shouldnt be removed but hidden ...
-    (_a = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input')) === null || _a === void 0 ? void 0 : _a.remove();
-    this.canload = false;
-    this.showTree("hide");
-    this.ready = true;
-    this.ignoreOptionsChanges = false;
+    try {
+      document.querySelector('#tree-area-' + this.componentID).innerHTML = 'Error loading webservice data!';
+      // NB: Maybe shouldnt be removed but hidden ...
+      (_a = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input')) === null || _a === void 0 ? void 0 : _a.remove();
+      this.canload = false;
+      this.showTree("hide");
+      this.ready = true;
+      this.ignoreOptionsChanges = false;
+    }
+    catch (_b) {
+      console.error('Error loading webservice data!');
+    }
   }
   getApiSearchURL() {
-    if (this.options.origin == "classification") {
-      return (this.options.url.substring(0, this.options.url.lastIndexOf("/")) + '/search-tree');
+    if (this.theOptions.origin == 'classification') {
+      return this.theOptions.url;
+      // return this.theOptions.url.substring(0, this.theOptions.url.lastIndexOf('/'));
     }
     else {
-      return (this.options.url.substring(0, this.options.url.lastIndexOf("/")) + '/GetTreeFromSearch');
+      return this.theOptions.url.substring(0, this.theOptions.url.lastIndexOf('/')) + '/GetTreeFromSearch';
     }
   }
   getApiNodeFromFullpathURL() {
-    if (this.options.origin == 'thesaurus') {
-      return (this.options.url.substring(0, this.options.url.lastIndexOf("/")) + '/existBy');
+    if (this.theOptions.origin == 'thesaurus') {
+      return (this.theOptions.url.substring(0, this.theOptions.url.lastIndexOf("/")) + '/existBy');
     }
-    else if (this.options.origin == 'position') {
-      return (this.options.url.substring(0, this.options.url.lastIndexOf("/")) + '/PositionExistByFp');
+    else if (this.theOptions.origin == 'position') {
+      return (this.theOptions.url.substring(0, this.theOptions.url.lastIndexOf("/")) + '/PositionExistByFp');
     }
     // TODO -> this does not exist, set accordingly to future API
-    else if (this.options.origin == 'classification') {
-      return (this.options.url.substring(0, this.options.url.lastIndexOf("/")) + '/exists');
+    else if (this.theOptions.origin == 'classification') {
+      return this.theOptions.url.substring(0, this.theOptions.url.lastIndexOf('/')) + '/exists';
     }
   }
   rawDataWatcher(dataToLoad) {
-    let rootnode = 0;
-    if (this.options.origin == "classification") {
-      rootnode = this.options.options.startNode;
-    }
-    else {
-      rootnode = this.options.options.StartNodeID;
-    }
     //This makes the tree to be created only once after the rawData loading
     if (!this.ready) {
-      this.translateDataForTree(dataToLoad, rootnode);
-      if (this.options.openTreeWhenLoaded) {
+      this.translateDataForTree(dataToLoad);
+      if (this.theOptions.openTreeWhenLoaded) {
         this.showTree("modale");
       }
     }
@@ -18454,25 +18511,24 @@ const MyComponent = class {
     return toret;
   }
   displayAutocompleteWithResults(data, searched) {
-    if (data && this.options.showAutocomplete) {
-      var that = this;
+    if (data && this.theOptions.showAutocomplete) {
       var nodes = this.getNodesFromSearch(data, searched);
       nodes = nodes.sort(function (a, b) {
         var textA = a.text.toUpperCase();
         var textB = b.text.toUpperCase();
-        return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
+        return textA < textB ? -1 : textA > textB ? 1 : 0;
       });
       this.clearAutocomplete();
-      let autocomplete_results = document.getElementById("autocomplete-results-area");
+      let autocomplete_results = document.getElementById('autocomplete-results-area');
       autocomplete_results.innerHTML = '';
       if (data && searched && searched.length > 0) {
         for (let i = 0; i < nodes.length; i++) {
           autocomplete_results.innerHTML += '<li title="' + nodes[i].text + '" nodeid="' + nodes[i].id + '">' + nodes[i].text + '</li>';
         }
         autocomplete_results.querySelectorAll("li").forEach((item) => {
-          item.addEventListener("click", function (evt) {
-            that.editValue(that.findNodeById(that.loadedTreeJs, this.attributes.getNamedItem("nodeid").value));
-            that.showTree("hide");
+          item.addEventListener("click", (evt) => {
+            this.editValue(this.findNodeById(this.loadedTreeJs, item.attributes.getNamedItem("nodeid").value));
+            this.showTree("hide");
           });
         });
         this.showAutocomplete();
@@ -18480,34 +18536,35 @@ const MyComponent = class {
     }
   }
   showAutocomplete() {
-    if (this.options.showAutocomplete) {
+    if (this.theOptions.showAutocomplete) {
       let autocomplete_results = document.getElementById("autocomplete-results-area");
       autocomplete_results.style.display = 'block';
     }
   }
   clearAutocomplete(eraseResults = false) {
-    if (this.options.showAutocomplete) {
+    if (this.theOptions.showAutocomplete) {
       // setTimeout(() => {
-      let autocomplete_results = document.getElementById("autocomplete-results-area");
+      let autocomplete_results = document.getElementById('autocomplete-results-area');
       autocomplete_results.style.display = 'none';
       if (eraseResults) {
-        autocomplete_results.innerHTML = "";
+        autocomplete_results.innerHTML = '';
       }
       // }, 0);
     }
   }
-  loadSearchDataInCurrentTree(dataToLoad, rootnode, searched) {
+  loadSearchDataInCurrentTree(dataToLoad, searchID, searched) {
     let displayResults = () => {
-      if (this.searchToDisplay > -1) {
+      if (this.searchToDisplay > -1 && searchID == this.searchToDisplay) {
         this.rawData.children.forEach((value, index) => {
-          this.completeCurrentTreeWithTree(value, rootnode);
+          // this.completeCurrentTreeWithTree(value, dataToLoad);
+          this.completeCurrentTreeWithTree(dataToLoad);
         });
         this.triggerTreeDisplay(this.rawData, searched);
         this.displayAutocompleteWithResults(this.rawData, searched);
         // Deploys all nodes
         document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-node').forEach((item) => {
           var _a;
-          const childspans = Array.prototype.slice.call(item.querySelectorAll(":scope > ul > li > span"));
+          const childspans = Array.prototype.slice.call(item.querySelectorAll("ul > li > span"));
           let hasUndefinedchild = childspans.filter((ele) => {
             return ele.textContent === "undefined";
           });
@@ -18517,31 +18574,37 @@ const MyComponent = class {
         });
       }
     };
-    if (this.options.source == 'webservice') {
-      if (this.options.origin == "classification") {
+    if (this.theOptions.source == 'webservice') {
+      if (this.theOptions.origin == 'classification') {
         // WS Call
         this.getDataFromSourceClassification(this.getApiSearchURL(), {
-          startNode: this.options.options.startNode,
+          startNode: this.theOptions.options.startNode,
           searchedValue: searched,
           // searchNameOnly: true,
           // deprecated: false
         }).then(displayResults),
-          (err) => {
+          err => {
             console.error('err', err);
           };
       }
       else {
         // WS Call
         this.getDataFromSource(this.getApiSearchURL(), {
-          StartNodeID: this.options.options.StartNodeID,
-          lng: this.options.options.lng,
+          StartNodeID: this.theOptions.options.StartNodeID,
+          lng: this.theOptions.options.lng,
           searchedValue: searched,
           searchNameOnly: true,
           deprecated: false
-        }).then(displayResults),
-          (err) => {
-            console.error('err', err);
-          };
+        })
+          .then(displayResults)
+          .catch((error) => {
+          try {
+            this.errorToLog = "getDataFromSource 1 rejected:" + JSON.stringify(error, replacer, 2);
+          }
+          catch (_a) {
+            console.error("getDataFromSource 2 rejected:", JSON.stringify(error, replacer, 2));
+          }
+        });
       }
     }
     else {
@@ -18549,19 +18612,19 @@ const MyComponent = class {
     }
   }
   triggerTreeDisplay(dataToLoad, searched) {
-    if (this.options.origin == 'thesaurus') {
+    if (this.theOptions.origin == 'thesaurus') {
       this.translateDataFromThesaurus(dataToLoad, searched);
     }
-    if (this.options.origin == 'position') {
+    if (this.theOptions.origin == 'position') {
       this.translateDataFromPosition(dataToLoad, searched);
     }
-    if (this.options.origin == 'classification') {
+    if (this.theOptions.origin == 'classification') {
       this.translateDataFromClassification(dataToLoad, searched);
     }
   }
-  translateDataForTree(dataToLoad, rootnode, searched = null) {
+  translateDataForTree(dataToLoad, searchID = null, searched = null) {
     if (searched != null) {
-      this.loadSearchDataInCurrentTree(dataToLoad, rootnode, searched);
+      this.loadSearchDataInCurrentTree(dataToLoad, searchID, searched);
     }
     else {
       this.triggerTreeDisplay(dataToLoad, searched);
@@ -18570,7 +18633,7 @@ const MyComponent = class {
   getPropertyFromNode(node, property, logerror = true) {
     property = property.trim();
     if (!node || !property) {
-      return "";
+      return '';
     }
     if (node[property] || node[property] === 0) {
       return node[property];
@@ -18584,39 +18647,39 @@ const MyComponent = class {
   }
   // Translates datas from Thesaurus into an understandable object to pass to treejs dependency
   translateDataFromThesaurus(dataToLoad, searched = null) {
-    if (this.options.origin != 'thesaurus' || !dataToLoad)
+    if (this.theOptions.origin != 'thesaurus' || !dataToLoad)
       return;
-    this.mylog('Translate from Thesaurus ! (' + this.options.source + ')', dataToLoad);
+    this.mylog('Translate from Thesaurus ! (' + this.theOptions.source + ')', dataToLoad);
     let fillTreeWithObject = (tree, object, depth = 0) => {
       if (object && object.length) {
         object.forEach((value, _index) => {
-          let keyPropFromNode = this.getPropertyFromNode(value, "key");
-          let valueTranslatedPropFromNode = this.getPropertyFromNode(value, "valueTranslated");
-          let fullpathPropFromNode = this.getPropertyFromNode(value, "fullpath");
-          let fullpathTranslatedPropFromNode = this.getPropertyFromNode(value, "fullpathTranslated");
-          let hasChildrenPropFromNode = this.getPropertyFromNode(value, "hasChildren", false);
-          let childrenPropFromNode = this.getPropertyFromNode(value, "children", false);
-          let deprecated = this.getPropertyFromNode(value, "deprecated", false);
+          let keyPropFromNode = this.getPropertyFromNode(value, 'key');
+          let valueTranslatedPropFromNode = this.getPropertyFromNode(value, 'valueTranslated');
+          let fullpathPropFromNode = this.getPropertyFromNode(value, 'fullpath');
+          let fullpathTranslatedPropFromNode = this.getPropertyFromNode(value, 'fullpathTranslated');
+          let childrenPropFromNode = this.getPropertyFromNode(value, 'children', false);
+          let deprecated = this.getPropertyFromNode(value, 'deprecated', false);
           let objToPush = {
             id: keyPropFromNode,
             depth: depth,
             text: valueTranslatedPropFromNode,
             fullpath: fullpathPropFromNode,
             fullpathTranslated: fullpathTranslatedPropFromNode,
-            children: (hasChildrenPropFromNode && childrenPropFromNode && childrenPropFromNode.length == 0 ? [{}] : []),
+            children: this.getPropertyFromNode(value, 'hasChildren', false) && childrenPropFromNode && childrenPropFromNode.length == 0 ? [{}] : [],
             deprecated: deprecated,
             isDesaturated: false,
+            searchMatch: false
           };
           let childTree = fillTreeWithObject(objToPush.children, childrenPropFromNode, depth + 1);
           let pushMe = false;
-          let searchValue = (obj) => {
+          let searchValue = (obj, strict) => {
             let toret = false;
             if (obj.text.toLowerCase().indexOf(searched.toLowerCase()) > -1) {
               toret = true;
             }
-            else if (obj.children.length > 0 && Object.keys(obj.children[0]).length != 0) {
-              obj.children.forEach((descend) => {
-                if (searchValue(descend)) {
+            else if (!strict && obj.children.length > 0 && Object.keys(obj.children[0]).length != 0) {
+              obj.children.forEach(descend => {
+                if (searchValue(descend, strict)) {
                   toret = true;
                 }
               });
@@ -18624,9 +18687,10 @@ const MyComponent = class {
             return toret;
           };
           if (searched) {
-            const matched = searchValue(objToPush);
+            const matched = searchValue(objToPush, false);
             objToPush.isDesaturated = !matched;
-            pushMe = matched || this.options.searchResultPresentsUnMatched;
+            objToPush.searchMatch = searchValue(objToPush, true);
+            pushMe = matched || this.theOptions.searchResultPresentsUnMatched;
           }
           else {
             pushMe = true;
@@ -18639,36 +18703,37 @@ const MyComponent = class {
       }
       return tree;
     };
-    this.displayTree(fillTreeWithObject([], !this.options.displayRootNode ? dataToLoad.children : [dataToLoad]));
+    this.displayTree(fillTreeWithObject([], !this.theOptions.displayRootNode ? dataToLoad.children : [dataToLoad]));
   }
   // Translates datas from Position into an understandable object to pass to treejs dependency
   translateDataFromPosition(dataToLoad, searched = null) {
-    if (this.options.origin != 'position' || !dataToLoad)
+    if (this.theOptions.origin != 'position' || !dataToLoad)
       return;
-    let that = this;
-    let fillTreeWithObject = function (tree, object, depth = 0) {
+    let fillTreeWithObject = (tree, object, depth = 0) => {
       if (object.length) {
-        object.forEach(function (value, _index) {
+        object.forEach((value, _index) => {
           let objToPush = {
-            id: that.getPropertyFromNode(value, "key"),
+            id: this.getPropertyFromNode(value, "key"),
             depth: depth,
-            text: that.getPropertyFromNode(value, "valueTranslated"),
-            fullpath: that.getPropertyFromNode(value, "fullpath"),
-            fullpathTranslated: that.getPropertyFromNode(value, "fullpathTranslated"),
-            children: (that.getPropertyFromNode(value, "hasChildren", false) &&
-              that.getPropertyFromNode(value, "children").length == 0 ? [{}] : []),
-            deprecated: that.getPropertyFromNode(value, "deprecated", false),
+            text: this.getPropertyFromNode(value, "valueTranslated"),
+            fullpath: this.getPropertyFromNode(value, "fullpath"),
+            fullpathTranslated: this.getPropertyFromNode(value, "fullpathTranslated"),
+            children: (this.getPropertyFromNode(value, "hasChildren", false) &&
+              this.getPropertyFromNode(value, "children").length == 0 ? [{}] : []),
+            deprecated: this.getPropertyFromNode(value, "deprecated", false),
+            isDesaturated: false,
+            searchMatch: false
           };
-          let childTree = fillTreeWithObject(objToPush.children, that.getPropertyFromNode(value, "children", false), depth + 1);
+          let childTree = fillTreeWithObject(objToPush.children, this.getPropertyFromNode(value, 'children', false), depth + 1);
           let pushMe = false;
-          let searchValue = function (obj) {
+          let searchValue = (obj, strict) => {
             let toret = false;
             if (obj.text.toLowerCase().indexOf(searched.toLowerCase()) > -1) {
               toret = true;
             }
-            else if (obj.children.length > 0 && Object.keys(obj.children[0]).length != 0) {
+            else if (!strict && obj.children.length > 0 && Object.keys(obj.children[0]).length != 0) {
               obj.children.forEach((descend) => {
-                if (searchValue(descend)) {
+                if (searchValue(descend, strict)) {
                   toret = true;
                 }
               });
@@ -18676,7 +18741,10 @@ const MyComponent = class {
             return toret;
           };
           if (searched) {
-            pushMe = searchValue(objToPush);
+            const matched = searchValue(objToPush, false);
+            objToPush.isDesaturated = !matched;
+            objToPush.searchMatch = searchValue(objToPush, true);
+            pushMe = matched || this.theOptions.searchResultPresentsUnMatched;
           }
           else {
             pushMe = true;
@@ -18689,35 +18757,37 @@ const MyComponent = class {
       }
       return tree;
     };
-    this.displayTree(fillTreeWithObject([], !this.options.displayRootNode ? dataToLoad.children : [dataToLoad]));
+    this.displayTree(fillTreeWithObject([], !this.theOptions.displayRootNode ? dataToLoad.children : [dataToLoad]));
   }
   translateDataFromClassification(dataToLoad, searched = null) {
-    if (this.options.origin != 'classification' || !dataToLoad)
+    if (this.theOptions.origin != 'classification' || !dataToLoad)
       return;
     let that = this;
     let fillTreeWithObject = function (tree, object, depth = 0) {
       if (object.length) {
         object.forEach(function (value, _index) {
           let objToPush = {
-            id: that.getPropertyFromNode(value, "ID"),
+            id: that.getPropertyFromNode(value, 'ID'),
             depth: depth,
-            text: that.getPropertyFromNode(value, "Name"),
-            fullpath: that.getPropertyFromNode(value, "FullPath"),
-            fullpathTranslated: that.getPropertyFromNode(value, "FullPath"),
-            children: (that.getPropertyFromNode(value, "children", false).length > 0 &&
+            text: that.getPropertyFromNode(value, 'Name'),
+            fullpath: that.getPropertyFromNode(value, 'Properties').FullPath,
+            fullpathTranslated: that.getPropertyFromNode(value, 'Properties').FullPath,
+            children: (that.getPropertyFromNode(value, "hasChildren", false) &&
               that.getPropertyFromNode(value, "children").length == 0 ? [{}] : []),
-            deprecated: that.getPropertyFromNode(value, "IsDeprecated", false),
+            deprecated: that.getPropertyFromNode(value, 'IsDeprecated', false),
+            isDesaturated: false,
+            searchMatch: false
           };
-          let childTree = fillTreeWithObject(objToPush.children, that.getPropertyFromNode(value, "children", false), depth + 1);
+          let childTree = fillTreeWithObject(objToPush.children, that.getPropertyFromNode(value, 'children', false), depth + 1);
           let pushMe = false;
-          let searchValue = function (obj) {
+          let searchValue = (obj, strict) => {
             let toret = false;
             if (obj.text.toLowerCase().indexOf(searched.toLowerCase()) > -1) {
               toret = true;
             }
-            else if (obj.children.length > 0 && Object.keys(obj.children[0]).length != 0) {
-              obj.children.forEach((descend) => {
-                if (searchValue(descend)) {
+            else if (!strict && obj.children.length > 0 && Object.keys(obj.children[0]).length != 0) {
+              obj.children.forEach(descend => {
+                if (searchValue(descend, strict)) {
                   toret = true;
                 }
               });
@@ -18725,7 +18795,10 @@ const MyComponent = class {
             return toret;
           };
           if (searched) {
-            pushMe = searchValue(objToPush);
+            const matched = searchValue(objToPush, false);
+            objToPush.isDesaturated = !matched;
+            objToPush.searchMatch = searchValue(objToPush, true);
+            pushMe = matched || this.theOptions.searchResultPresentsUnMatched;
           }
           else {
             pushMe = true;
@@ -18738,66 +18811,60 @@ const MyComponent = class {
       }
       return tree;
     };
-    this.displayTree(fillTreeWithObject([], !this.options.displayRootNode ? dataToLoad.children : [dataToLoad]));
+    this.displayTree(fillTreeWithObject([], !this.theOptions.displayRootNode ? dataToLoad.children : [dataToLoad]));
   }
   findNodeById(myTree, nodeId) {
-    let node = myTree.nodesById[nodeId];
-    if (!node) {
-      return null;
-    }
-    return myTree.nodesById[nodeId];
+    return !myTree.nodesById[nodeId] ? null : myTree.nodesById[nodeId];
   }
   // Finds the root of the new tree in the current tree (wherever it may be), and adds the children of the new tree to it
-  completeCurrentTreeWithTree(newTree, rootnode) {
+  completeCurrentTreeWithTree(newTree) {
     let that = this;
     // Creates a new tree with results from WS call
     let shortFillTreeWithObject = function (parent, tree, object, first, depth) {
       // If passed node has elements
       if ((first || (tree && tree.length != 0)) && object && Object.keys(object).length != 0 && object.length) {
-        object.forEach(function (value, _index) {
+        object.forEach((value, _index) => {
           let objToPush = value;
-          if (that.options.origin == "classification") {
-            if (that.getPropertyFromNode(value, "ID", false) != null) {
+          if (that.theOptions.origin == 'classification') {
+            if (that.getPropertyFromNode(value, 'ID', false) != null) {
               objToPush = {
-                id: that.getPropertyFromNode(value, "ID"),
+                id: that.getPropertyFromNode(value, 'ID'),
                 depth: depth,
                 parent: parent,
-                text: that.getPropertyFromNode(value, "Name"),
-                fullpath: that.getPropertyFromNode(value, "FullPath"),
-                fullpathTranslated: that.getPropertyFromNode(value, "FullPath"),
-                children: (that.getPropertyFromNode(value, "children", false).length > 0 &&
-                  that.getPropertyFromNode(value, "children").length == 0 ? [{}] : []),
-                deprecated: that.getPropertyFromNode(value, "IsDeprecated", false),
+                text: that.getPropertyFromNode(value, 'Name'),
+                fullpath: that.getPropertyFromNode(value.Properties, 'FullPath'),
+                fullpathTranslated: that.getPropertyFromNode(value.Properties, 'FullPath'),
+                children: that.getPropertyFromNode(value, 'hasChildren', false) && that.getPropertyFromNode(value, 'children').length == 0 ? [{}] : [],
+                deprecated: that.getPropertyFromNode(value.Properties, 'IsDeprecated', false),
               };
             }
           }
           else {
-            if (that.getPropertyFromNode(value, "key", false) != null) {
+            if (that.getPropertyFromNode(value, 'key', false) != null) {
               objToPush = {
-                id: that.getPropertyFromNode(value, "key"),
+                id: that.getPropertyFromNode(value, 'key'),
                 depth: depth,
                 parent: parent,
-                text: that.getPropertyFromNode(value, "valueTranslated"),
-                fullpath: that.getPropertyFromNode(value, "fullpath"),
-                fullpathTranslated: that.getPropertyFromNode(value, "fullpathTranslated"),
-                children: (that.getPropertyFromNode(value, "hasChildren", false) &&
-                  that.getPropertyFromNode(value, "children").length == 0 ? [{}] : []),
-                deprecated: that.getPropertyFromNode(value, "deprecated", false),
+                text: that.getPropertyFromNode(value, 'valueTranslated'),
+                fullpath: that.getPropertyFromNode(value, 'fullpath'),
+                fullpathTranslated: that.getPropertyFromNode(value, 'fullpathTranslated'),
+                children: that.getPropertyFromNode(value, 'hasChildren', false) && that.getPropertyFromNode(value, 'children').length == 0 ? [{}] : [],
+                deprecated: that.getPropertyFromNode(value, 'deprecated', false),
               };
             }
           }
-          objToPush.children = shortFillTreeWithObject(objToPush, objToPush.children, that.getPropertyFromNode(value, "children", false), false, depth + 1);
+          objToPush.children = shortFillTreeWithObject(objToPush, objToPush.children, that.getPropertyFromNode(value, 'children', false), false, depth + 1);
           tree.push(objToPush);
         });
       }
       return tree;
     };
     // targetNode = an object stored by the library
-    let targetNode = this.findNodeById(this.loadedTreeJs, rootnode);
+    let targetNode = this.findNodeById(this.loadedTreeJs, newTree.key);
     if (targetNode != null) {
       // empty the children of the node in the library
       targetNode.children = [];
-      let liElmID = rootnode;
+      let liElmID = (newTree.key ? newTree.key : (newTree.id ? newTree.id : newTree.ID));
       var ulElem = this.loadedTreeJs.liElementsById[liElmID].querySelector('ul');
       let filledtree = shortFillTreeWithObject({
         id: liElmID,
@@ -18806,12 +18873,12 @@ const MyComponent = class {
         text: this.loadedTreeJs.nodesById[liElmID].text,
         fullpath: this.loadedTreeJs.nodesById[liElmID].fullpath,
         fullpathTranslated: this.loadedTreeJs.nodesById[liElmID].fullpathTranslated,
-        children: this.loadedTreeJs.nodesById[liElmID].children
+        children: this.loadedTreeJs.nodesById[liElmID].children,
       }, [], newTree.children, true, targetNode.depth + 1);
       if (filledtree.length > 0) {
-        ulElem.innerHTML = "";
+        ulElem.innerHTML = '';
       }
-      // that.rawData = result from WS call
+      // this.rawData = result from WS call
       (filledtree).forEach((item) => {
         if (Object.keys(item).length != 0) {
           //Foreach item in the newly created tree, create the DOM elements to inject - BEGIN
@@ -18825,10 +18892,10 @@ const MyComponent = class {
           this.loadedTreeJs.treeNodes.push(item);
           //If has children, prepare sub elements
           if (item.children && item.children.length > 0) {
-            var liElems = ulElem.querySelectorAll("li");
+            var liElems = ulElem.querySelectorAll('li');
             liElems[liElems.length - 1].appendChild(this.loadedTreeJs.createUlEle());
-            liElems[liElems.length - 1].querySelector("ul").appendChild(this.loadedTreeJs.createLiEle(item.children));
-            that.completeCurrentTreeWithTree(item, item.id);
+            liElems[liElems.length - 1].querySelector('ul').appendChild(this.loadedTreeJs.createLiEle(item.children));
+            this.completeCurrentTreeWithTree(item);
           }
         }
       });
@@ -18836,10 +18903,10 @@ const MyComponent = class {
     this.deactivateNodesOutOfDepthSettings();
   }
   deactivateNodesOutOfDepthSettings() {
-    if (this.options.maxDepth || this.options.minDepth) {
+    if (this.theOptions.maxDepth != undefined || this.theOptions.minDepth != undefined) {
       for (let index in this.loadedTreeJs.nodesById) {
         let element = this.loadedTreeJs.nodesById[index];
-        if (element.depth < this.options.minDepth || element.depth > this.options.maxDepth) {
+        if (element.depth < this.theOptions.minDepth || element.depth > this.theOptions.maxDepth) {
           this.loadedTreeJs.liElementsById[element.id].classList.add('readonly_node');
         }
       }
@@ -18859,6 +18926,20 @@ const MyComponent = class {
     });
   }
   onItemDragOver(el, e) {
+    let now = new Date().getTime();
+    if (now - this.lastDragedOverTimeForAscendent < 50 && el.nodeId != this.lastDragedOverNodeId) {
+      return;
+    }
+    this.lastDragedOverTimeForAscendent = now;
+    if (el.nodeId == this.lastDragedOverNodeId) {
+      if (now - this.lastDragedOverTimeForLevel < this.acceptableDelayBetweenSimilarActions) {
+        return;
+      }
+      this.lastDragedOverTimeForLevel = now;
+    }
+    else {
+      this.lastDragedOverNodeId = el.nodeId;
+    }
     this.clearDragOverPos(el);
     if (el == this.curDraggingItem) {
       el.classList.remove('dragover');
@@ -18887,7 +18968,7 @@ const MyComponent = class {
     this.itemDropped.emit({
       dragEl: this.curDraggingItem,
       dropEl: el,
-      position: this.getDragOverPos(el, e)
+      position: this.getDragOverPos(el, e),
     });
   }
   getDragOverPos(el, e) {
@@ -18919,30 +19000,29 @@ const MyComponent = class {
   }
   // Displays the tree
   async displayTree(treeData) {
-    let that = this;
-    if (!this.options.displayTree && this.ready)
+    if (!this.theOptions.displayTree && this.ready)
       return;
     if (treeData.length == 0) {
-      document.querySelector('#tree-area-' + this.componentID).innerHTML = 'No search results ...';
+      this.el.querySelector('.hierarchized-picker-tree').innerHTML = 'No search results ...';
       return;
     }
     let myTree = new Tree('#tree-area-' + this.componentID, {
       parentApi: this,
       data: treeData,
-      onChange: async function () {
+      onChange: async () => {
         let oldValue;
         try {
-          oldValue = await that.getValue();
+          oldValue = await this.getValue();
         }
         catch (error) {
           oldValue = null;
         }
         let emitValueChange = async () => {
-          let newValue = await that.getValue();
-          if (that.valueChangeCallback && that.ready && !that.shownTree) {
-            that.valueChangeCallback(newValue);
+          let newValue = await this.getValue();
+          if (this.valueChangeCallback && this.ready && !this.shownTree) {
+            this.valueChangeCallback(newValue);
           }
-          that.valueChange.emit({ oldValue: oldValue, newValue: newValue, value: newValue });
+          this.valueChange.emit({ oldValue: oldValue, newValue: newValue, value: newValue });
         };
         // TODO > Try to find why this has been previously added
         // setTimeout(() => {
@@ -18961,13 +19041,13 @@ const MyComponent = class {
     this.showSelectedNodes();
     this.deactivateNodesOutOfDepthSettings();
     // Hides checkboxes in non multiple context
-    if (!this.options.multiple) {
+    if (!this.theOptions.multiple) {
       document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-checkbox').forEach((item) => (item.style.display = 'none'));
     }
   }
   async setNodeAsSelected(id, treeToUpdate, userClick) {
-    if ((this.disabled && this.shownTree && this.setValueOnClick) ||
-      this.loadedTreeJs.liElementsById[id].classList.value.indexOf("readonly_node") != -1)
+    if ((this.isDisabled && this.shownTree && this.setValueOnClick) ||
+      (this.loadedTreeJs.liElementsById[id].classList.value && this.loadedTreeJs.liElementsById[id].classList.value.indexOf("readonly_node") != -1))
       return;
     this.ignoreOptionsChanges = true;
     // Override of treejs normal workaround =>> DONT EDIT IT!
@@ -18984,7 +19064,7 @@ const MyComponent = class {
       this.editValue(node);
       if (this.shownTree && userClick) {
         await this.focusMainInput();
-        if (!this.options.multiple) {
+        if (!this.theOptions.multiple) {
           this.showTree("hide");
         }
       }
@@ -18992,21 +19072,21 @@ const MyComponent = class {
     this.ignoreOptionsChanges = false;
   }
   async focusSearchInput() {
-    this.mylog("focusSearchInput");
+    this.mylog('focusSearchInput');
     let searchInput = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input');
     if (searchInput) {
       await searchInput.focus();
     }
   }
   async focusMainInput() {
-    this.mylog("focusMainInput");
+    this.mylog('focusMainInput');
     let mainInput = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-input');
     if (mainInput) {
       await mainInput.focus();
     }
   }
   async focusModal() {
-    this.mylog("focusModal");
+    this.mylog('focusModal');
     let modalArea = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-modal-area');
     if (modalArea) {
       await modalArea.focus();
@@ -19017,71 +19097,91 @@ const MyComponent = class {
     document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-node').forEach((item) => item.classList.add('treejs-node__close'));
   }
   // Displays all selected nodes by deploying nodes that contain selected
-  showSelectedNodes() {
-    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;
+  async showSelectedNodes(addDelay = false) {
+    if (this.theOptions.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));
       }
-      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');
+      catch (err) {
       }
-      scrollToValue += element.offsetTop;
-      const parent = (_d = element.parentNode) === null || _d === void 0 ? void 0 : _d.closest('.treejs-node');
-      if (parent) {
-        removeClosedAndLookUp(parent);
+      if (scrollToValue && this.scrollable) {
+        this.scrollable.scrollTop = scrollToValue;
       }
     };
-    const checkeds = document.querySelectorAll('#tree-area-' + this.componentID + ' .treejs-node__checked');
-    checkeds.forEach((item) => removeClosedAndLookUp(item));
-    if (scrollToValue && this.scrollable) {
-      this.scrollable.scrollTop = scrollToValue;
+    if (addDelay) {
+      setTimeout(() => {
+        scrollToNode();
+      }, 200);
+    }
+    else {
+      scrollToNode();
     }
   }
   // Event to manage the Display/Hide of the tree
   showTree(focused) {
+    if (!this.hasFocus)
+      this.hasFocus = [];
     this.clearAutocomplete();
-    if (!this.canload || !this.options.displayTree)
+    if (!this.canload || !this.theOptions.displayTree)
       return;
     this.mylog("--------- showTree-" + this.componentID, focused, this.hasFocus);
     // hide tree when asked to or when it is disabled
-    if (focused == "hide" || this.disabled) {
-      this.hasFocus = ["hide"];
+    if (focused == 'hide' || this.isDisabled) {
+      this.hasFocus = ['hide'];
       let elem = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input');
       if (elem) {
-        elem.value = "";
+        elem.value = '';
       }
-      // this.search("");
+      this.search("");
     }
     else {
-      if (this.hasFocus.indexOf(focused) == -1 && this.hasFocus.indexOf("hide") == -1) {
+      if (this.hasFocus.indexOf(focused) == -1 && this.hasFocus.indexOf('hide') == -1) {
         this.hasFocus.push(focused);
       }
     }
-    if (!this.shownTree && this.options.loading == "click") {
+    if (!this.shownTree && this.theOptions.loading == "click") {
       this.loadDataForTree();
     }
-    if (this.hasFocus.indexOf("hide") > -1) {
+    if (this.hasFocus.indexOf('hide') > -1) {
       this.hasFocus = [];
     }
     let previousShownTree = this.shownTree;
     this.shownTree = this.hasFocus.length > 0;
-    if (!previousShownTree && this.shownTree) {
-      this.showSelectedNodes();
-    }
     if (!this.shownTree) {
       this.collapseAllNodes();
       this.clearAutocomplete(true);
     }
-    if (focused == "picker") {
+    if (focused == 'picker') {
       this.focusSearchInput();
     }
     else {
       this.focusModal();
     }
+    if (!previousShownTree && this.shownTree) {
+      this.showSelectedNodes(true);
+    }
   }
   // Changes the value of the component with passed node
   editValue(node) {
@@ -19097,7 +19197,7 @@ const MyComponent = class {
       this.value.splice(result, 1);
     } // Else, add the node to the array of values
     else {
-      if (this.options.multiple) {
+      if (this.theOptions.multiple) {
         this.value = [...this.value, {
             nodeid: node.id,
             fullpath: node.fullpath,
@@ -19110,7 +19210,7 @@ const MyComponent = class {
           nodeid: node.id,
           fullpath: node.fullpath,
           fullpathTranslated: node.fullpathTranslated,
-          shortpathTranslated: node.text
+          shortpathTranslated: node.text,
         };
       }
     }
@@ -19120,7 +19220,7 @@ const MyComponent = class {
   setDisplayedValue(value = null) {
     if (!value)
       value = this.value;
-    this.displayedValue = value.map(item => (this.options.isFullpath
+    this.displayedValue = value.map(item => (this.theOptions.isFullpath
       ?
         item.fullpathTranslated
       :
@@ -19128,15 +19228,16 @@ const MyComponent = class {
   }
   // Search a value in the tree and triggers a search when necessary
   search(searched) {
-    if (this.options.mode == 'input') {
-      document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input').classList.remove('fieldError');
+    let searchinput = document.querySelector('#hierarchized-picker-' + this.componentID + ' .hierarchized-picker-search input');
+    if (this.theOptions.mode == 'input' && searchinput) {
+      searchinput.classList.remove('fieldError');
     }
     if (searched.length > 2) {
       this.searchToDisplay += 1;
       let me = this.searchToDisplay;
       setTimeout(() => {
         if (this.searchToDisplay == me) {
-          this.triggerSearch(searched);
+          this.triggerSearch(searched, me);
           //Recheck previously selected fields ?
           this.checkFields(this.value, false);
         }
@@ -19144,55 +19245,67 @@ const MyComponent = class {
     }
     else {
       this.searchToDisplay = -1;
-      let rootnode = 0;
-      if (this.options.origin == "classification") {
-        rootnode = this.options.options.startNode;
+      if (this.theOptions.source == "webservice") {
+        let rootnode = 0;
+        if (this.theOptions.origin == 'classification') {
+          rootnode = this.theOptions.options.startNode;
+        }
+        else {
+          rootnode = this.theOptions.options.StartNodeID;
+        }
+        //Displays the full tree
+        this.translateDataForTree(this.rawData, rootnode);
       }
       else {
-        rootnode = this.options.options.StartNodeID;
+        this.translateDataForTree(this.rawData);
       }
-      //Displays the full tree
-      this.translateDataForTree(this.rawData, rootnode);
       //Reset autocomplete
-      this.displayAutocompleteWithResults(null, "");
+      this.displayAutocompleteWithResults(null, '');
       //Recheck previously selected fields ?
       this.checkFields(this.value, false);
     }
   }
   // Refresh the tree with search results
-  triggerSearch(searched) {
-    let rootnode = 0;
-    if (this.options.origin == "classification") {
-      rootnode = this.options.options.startNode;
-    }
-    else {
-      rootnode = this.options.options.StartNodeID;
-    }
-    this.translateDataForTree(this.rawData, rootnode, searched);
+  triggerSearch(searched, searchID) {
+    this.translateDataForTree(this.rawData, searchID, searched);
   }
   displayPickerError(errorMsg = "") {
-    document.querySelector('#hierarchized-picker-' + this.componentID).classList.add('fieldError');
-    if (errorMsg == "") {
-      errorMsg = "There has been an error ... [Generic]";
+    try {
+      document.querySelector('#hierarchized-picker-' + this.componentID).classList.add('fieldError');
+      if (this.theOptions.errorsInInput) {
+        if (errorMsg == "") {
+          errorMsg = "There has been an error ... > [Generic error]";
+        }
+        this.displayedValue = errorMsg;
+        // this.isDisabled = true;
+        this.errorToLog = errorMsg;
+      }
+    }
+    catch (_a) {
+      console.error(errorMsg);
     }
-    this.displayedValue = errorMsg;
   }
   setRawDataFromFile(filePath) {
     try {
-      var rawFile = new XMLHttpRequest();
+      var rawFile = new browser();
       rawFile.open("GET", filePath);
       rawFile.onreadystatechange = () => {
-        if (rawFile.readyState === 4) {
-          if (rawFile.status === 200 || rawFile.status == 0) {
-            var allText = rawFile.responseText;
-            this.rawData = JSON.parse(allText);
-            this.formatDefaultValue();
-            this.showSelectedNodes();
-          }
-          else {
-            this.displayPickerError('Error loading Data from path "' + filePath + '"!');
+        try {
+          if (rawFile.readyState === 4) {
+            if (rawFile.status === 200 || rawFile.status == 0) {
+              var allText = rawFile.responseText;
+              this.rawData = JSON.parse(allText);
+              this.formatDefaultValue();
+              this.showSelectedNodes();
+            }
+            else {
+              this.displayPickerError('Error loading Data from path "' + filePath + '"!');
+            }
           }
         }
+        catch (err) {
+          this.displayPickerError('Error loading Data from path "' + filePath + '"!');
+        }
       };
       if (!this.rawData) {
         rawFile.send(null);
@@ -19209,48 +19322,67 @@ const MyComponent = class {
     }
   }
   loadDataForTree(init = false) {
-    if (this.options.source == 'webservice') {
-      if (this.options.origin == "classification") {
-        this.getDataFromSourceClassification(this.options.url, this.options.options, init);
+    if (this.theOptions.source == 'webservice') {
+      if (this.theOptions.origin == 'classification') {
+        this.getDataFromSourceClassification(this.theOptions.url, this.theOptions.options, init);
       }
       else {
-        this.getDataFromSource(this.options.url, this.options.options, init);
+        this.getDataFromSource(this.theOptions.url, this.theOptions.options, init)
+          .then(() => {
+          if (init) {
+            this.formatDefaultValue();
+            this.showSelectedNodes();
+          }
+        })
+          .catch((error) => {
+          try {
+            this.errorToLog = "getDataFromSource 3 rejected:" + JSON.stringify(error, replacer, 2);
+          }
+          catch (_a) {
+            console.error("getDataFromSource 4 rejected:", JSON.stringify(error, replacer, 2));
+          }
+        });
       }
     }
-    if (this.options.source == 'data') {
-      this.rawData = typeof this.options.data === 'object' ? this.options.data : JSON.parse(this.options.data);
+    if (this.theOptions.source == 'data') {
+      this.rawData = typeof this.theOptions.data === 'object' ? this.theOptions.data : JSON.parse(this.theOptions.data);
+      this.formatDefaultValue();
     }
-    if (this.options.source == 'file') {
-      this.setRawDataFromFile(this.options.url);
+    if (this.theOptions.source == 'file') {
+      this.setRawDataFromFile(this.theOptions.url);
     }
   }
   componentWillRender() {
-    this.mylog("----- componentWillRender beginning");
+    this.mylog("----- componentWillRender beginning -----");
   }
   componentDidRender() {
-    this.mylog("----- componentDidRender beginning");
+    this.mylog("----- componentDidRender beginning -----");
   }
   displayWhenLoaded() {
     if (!this.canload) {
       this.displayPickerError('Error(s) in the picker configuration!');
       return;
     }
-    if (this.options && this.options.loading == "display") {
+    if (this.theOptions && this.theOptions.loading == "display") {
       this.loadDataForTree(true);
     }
   }
   componentDidLoad() {
-    this.mylog("----- componentDidLoad beginning");
+    this.mylog("----- componentDidLoad beginning -----");
     this.displayWhenLoaded();
   }
   checkFields(values, allowSetValueOnClick = true) {
-    let that = this;
     this.setValueOnClick = allowSetValueOnClick;
     if (values) {
-      values.forEach(element => {
-        if (Object.keys(this.loadedTreeJs.liElementsById).indexOf(element.nodeid.toString()) > -1) {
-          if (this.loadedTreeJs.liElementsById[element.nodeid].classList.value.indexOf("treejs-node__checked") == -1) {
-            that.setNodeAsSelected(element.nodeid, this.loadedTreeJs, false);
+      values.forEach((element) => {
+        let intNodeid = element.nodeid;
+        if (typeof intNodeid == "string" && isNumeric(intNodeid)) {
+          intNodeid = parseInt(intNodeid);
+        }
+        if (Object.keys(this.loadedTreeJs.liElementsById).indexOf(element.nodeid) > -1) {
+          if ((this.loadedTreeJs.liElementsById[element.nodeid].classList.value && this.loadedTreeJs.liElementsById[element.nodeid].classList.value.indexOf("treejs-node__checked") == -1) ||
+            this.theOptions.defaultValue.indexOf(intNodeid) != -1) {
+            this.setNodeAsSelected(element.nodeid, this.loadedTreeJs, false);
           }
         }
       });
@@ -19258,25 +19390,25 @@ const MyComponent = class {
     this.setValueOnClick = true;
   }
   formatDefaultValue() {
-    let that = this;
     let found = 0;
+    let that = this;
     let recursive = function (children) {
-      children.forEach(element => {
-        that.options.defaultValue.forEach(dfValue => {
+      children.forEach((element) => {
+        that.theOptions.defaultValue.forEach(dfValue => {
           if (typeof dfValue == 'string' && isNumeric(dfValue)) {
             dfValue = parseInt(dfValue);
           }
-          if (that.options.origin == "classification") {
-            if ((typeof dfValue == 'string' && that.getPropertyFromNode(element, "FullPath") == dfValue) ||
-              (typeof dfValue == 'number' && that.getPropertyFromNode(element, "ID") == dfValue)) {
+          if (that.theOptions.origin == 'classification') {
+            if ((typeof dfValue == 'string' && that.getPropertyFromNode(element, 'Properties.FullPath') == dfValue) ||
+              (typeof dfValue == 'number' && that.getPropertyFromNode(element, 'ID') == dfValue)) {
               element.nodeid = element.id;
               that.checkFields([element]);
               found++;
             }
           }
           else {
-            if ((typeof dfValue == 'string' && that.getPropertyFromNode(element, "fullpathTranslated") == dfValue) ||
-              (typeof dfValue == 'number' && that.getPropertyFromNode(element, "key") == dfValue)) {
+            if ((typeof dfValue == 'string' && that.getPropertyFromNode(element, 'fullpathTranslated') == dfValue) ||
+              (typeof dfValue == 'number' && that.getPropertyFromNode(element, 'key') == dfValue)) {
               element.nodeid = element.key;
               that.checkFields([element]);
               found++;
@@ -19290,14 +19422,20 @@ const MyComponent = class {
     if (this.rawData) {
       recursive([this.rawData]);
     }
-    if (this.options.defaultValue.length != found) {
+    if (this.theOptions.defaultValue.length != found) {
       if (found == 0) {
-        this.errorToLog = "The loaded tree doesn't contain the nodes passed to options.defaultValue : " +
-          this.options.defaultValue.map(item => item).join(',');
+        try {
+          this.errorToLog = "The loaded tree doesn't contain the nodes passed to options.defaultValue : " +
+            this.theOptions.defaultValue.map(item => item).join(',');
+        }
+        catch (_a) {
+          this.errorToLog = "The loaded tree doesn't contain the nodes passed to options.defaultValue : there's an issue with your defaultValue > " +
+            this.theOptions.defaultValue.toString();
+        }
       }
       else {
         this.errorToLog = "The loaded tree contains multiple nodes of what has been passed to options.defaultValue : " +
-          this.options.defaultValue.map(item => item).join(',');
+          this.theOptions.defaultValue.map(item => item).join(',');
       }
       this.displayPickerError('Error(s) when loading tree default value(s)!');
     }
@@ -19343,42 +19481,46 @@ const MyComponent = class {
     this.search(event.target.value);
   }
   render() {
-    return (this.options ?
-      index.h("div", { id: 'hierarchized-picker-' + this.componentID, class: "hierarchized-picker " + (this.disabled ? "readonly-mode" : "") }, (this.options.mode == "input" ?
-        index.h("div", { class: "hierarchized-picker-container" }, index.h("div", { style: { display: "none" }, ref: (el => {
-            this.loader = el;
-          }) }, "TODO"), index.h("div", { class: "hierarchized-picker-input-area" }, this.options.label ? index.h("label", { class: "hierarchized-picker-label" }, this.options.label) : '', index.h("span", { class: 'hierarchized-picker-input ' + (this.options.icon && this.options.icon.length > 0 ? "hierarchized-picker-icon" : "") +
-            ' reneco ' + (this.options.icon ? this.options.icon : "") + (this.disabled ? " readonly " : "") +
-            ' sc-ion-input-md-h sc-ion-input-md-s md ', id: 'hierarchized-picker-input-' + this.componentID, onClick: _event => {
-            this.showTree("picker");
-          }, onFocusin: _event => {
-            this.showTree("modale");
-          } }, index.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 })), (this.displayedValue && !this.disabled && this.canload) ?
-          index.h("span", { class: "reneco reneco-close", onClick: () => this.clearPicker() })
-          : ''), index.h("div", { class: 'hierarchized-picker-modal-area ' + (!this.shownTree ? ' hidden ' : ''), onClick: event => {
-            this.clickPickerModalArea(event);
-          } }, index.h("div", { class: 'hierarchized-picker-modal ' + (!this.ready ? 'hidden' : '') }, index.h("div", { id: 'hierarchized-picker-input-search-' + this.componentID, class: "hierarchized-picker-search reneco reneco-search" +
-            " sc-ion-input-md-h sc-ion-input-md-s md", onKeyUp: event => {
-            this.keyUpPickerSearchInput(event);
-          }, onFocusin: event => {
-            setTimeout(() => {
-              this.showAutocomplete();
-            }, 500);
-            if (this.hasFocus.length == 0)
-              this.focusInSearchEvent(event);
-          }, onFocusout: event => {
-            this.focusOutSearchEvent(event);
-          } }, index.h("input", { class: "native-input sc-ion-input-md", autocapitalize: "off", autocomplete: "off", autocorrect: "off", name: "ion-input-0", placeholder: this.options.searchPlaceholder, spellcheck: "false", type: "text" })), index.h("ul", { id: "autocomplete-results-area" }), index.h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree-area ' + this.pickerClass }))))
-        :
-          index.h("div", { class: 'hierarchized-picker-raw-tree-area', onClick: event => {
-              this.clickPickerModalArea(event);
-            } }, index.h("div", { class: "loader", ref: (el => {
-              this.loader = el;
-            }) }, index.h("div", { class: "loader-inner" }, "Loading...")), index.h("div", { ref: (el) => {
-              this.scrollable = el;
-            }, id: 'tree-area-' + this.componentID, class: 'scrollable hierarchized-picker-raw-tree ' + this.pickerClass }))))
-      :
-        index.h("div", { class: "fieldError" }, "Generic loading issue..."));
+    return (this.theOptions
+      ?
+        index.h("div", { id: 'hierarchized-picker-' + this.componentID, class: "hierarchized-picker " + (this.isDisabled ? "readonly-mode" : "") }, (this.theOptions.mode == "input"
+          ?
+            index.h("div", { class: "hierarchized-picker-container" }, index.h("div", { style: { display: "none" }, ref: (el => {
+                this.loader = el;
+              }) }), index.h("div", { class: "hierarchized-picker-input-area" }, this.theOptions.label ? index.h("label", { class: "hierarchized-picker-label" }, this.theOptions.label) : '', index.h("span", { class: 'hierarchized-picker-input ' + (this.theOptions.icon && this.theOptions.icon.length > 0 ? "hierarchized-picker-icon" : "") +
+                ' reneco ' + (this.theOptions.icon ? this.theOptions.icon : "") + (this.isDisabled ? " readonly " : "") +
+                ' sc-ion-input-md-h sc-ion-input-md-s md ', id: 'hierarchized-picker-input-' + this.componentID, onClick: _event => {
+                this.showTree("picker");
+              }, onFocusin: _event => {
+                this.showTree("modale");
+              } }, index.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 })), (this.displayedValue && !this.isDisabled && this.canload) ?
+              index.h("span", { class: "reneco reneco-close", onClick: () => this.clearPicker() })
+              : ''), index.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 => {
+                this.clickPickerModalArea(event);
+              } }, index.h("div", { class: 'hierarchized-picker-modal ' + (!this.ready ? 'hidden' : '') }, index.h("div", { id: 'hierarchized-picker-input-search-' + this.componentID, class: "hierarchized-picker-search reneco reneco-search" +
+                " sc-ion-input-md-h sc-ion-input-md-s md", onKeyUp: event => {
+                this.keyUpPickerSearchInput(event);
+              }, onFocusin: event => {
+                setTimeout(() => {
+                  this.showAutocomplete();
+                }, 500);
+                if (this.hasFocus.length == 0)
+                  this.focusInSearchEvent(event);
+              }, onFocusout: event => {
+                this.focusOutSearchEvent(event);
+              } }, index.h("input", { class: "native-input sc-ion-input-md", autocapitalize: "off", autocomplete: "off", autocorrect: "off", name: "ion-input-0", placeholder: this.theOptions.searchPlaceholder, spellcheck: "false", type: "text" })), 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 => {
+                this.clickPickerModalArea(event);
+              } }, index.h("div", { class: "loader", ref: (el => {
+                this.loader = el;
+              }) }, index.h("div", { class: "loader-inner" }, "Loading...")), index.h("div", { ref: (el) => {
+                this.scrollable = el;
+              }, id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree scrollable hierarchized-picker-raw-tree ' + this.pickerClass }))))
+      : (index.h("div", { class: "fieldError" }, "Generic loading issue...")));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -19389,6 +19531,6 @@ const MyComponent = class {
     "rawData": ["rawDataWatcher"]
   }; }
 };
-MyComponent.style = hierarchizedPickerCss;
+HierarchizedPickerComponent.style = hierarchizedPickerCss;
 
-exports.reneco_hierarchized_picker = MyComponent;
+exports.reneco_hierarchized_picker = HierarchizedPickerComponent;