reneco-hierarchized-picker 0.4.3-beta.1 → 0.4.3-beta.10

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-55df525c.js');
 
 function applyPickerTheme(theme, defaultTheme) {
+  var _a;
   const docstyle = document.documentElement.style;
   docstyle.setProperty('--hpicker-theme-palette-primary-main', (theme === null || theme === void 0 ? void 0 : theme.palette.primary.main) || defaultTheme.palette.primary.main);
   docstyle.setProperty('--hpicker-theme-palette-primary-light', (theme === null || theme === void 0 ? void 0 : theme.palette.primary.light) || defaultTheme.palette.primary.light);
@@ -12,9 +13,11 @@ function applyPickerTheme(theme, defaultTheme) {
   docstyle.setProperty('--hpicker-theme-palette-background-default', (theme === null || theme === void 0 ? void 0 : theme.palette.background.default) || defaultTheme.palette.background.default);
   docstyle.setProperty('--hpicker-theme-palette-background-light', (theme === null || theme === void 0 ? void 0 : theme.palette.background.light) || defaultTheme.palette.background.light);
   docstyle.setProperty('--hpicker-theme-palette-background-dark', (theme === null || theme === void 0 ? void 0 : theme.palette.background.dark) || defaultTheme.palette.background.dark);
+  docstyle.setProperty('--hpicker-theme-palette-input-background-color', (theme === null || theme === void 0 ? void 0 : theme.palette.input.background) || defaultTheme.palette.input.background);
+  docstyle.setProperty('--hpicker-theme-palette-input-border-style', (theme === null || theme === void 0 ? void 0 : theme.palette.input.borderStyle) || defaultTheme.palette.input.borderStyle);
   docstyle.setProperty('--hpicker-theme-typography-body-font-size', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontSize) || defaultTheme.typography.body.fontSize);
   docstyle.setProperty('--hpicker-theme-typography-body-font-weight', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontWeight) || defaultTheme.typography.body.fontWeight);
-  docstyle.setProperty('--hpicker-theme-palette-font-color', (theme === null || theme === void 0 ? void 0 : theme.palette.text.primary) || defaultTheme.palette.text.primary);
+  docstyle.setProperty('--hpicker-theme-modal-height', ((_a = theme === null || theme === void 0 ? void 0 : theme.modale) === null || _a === void 0 ? void 0 : _a.height) || defaultTheme.modale.height);
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -18099,6 +18102,10 @@ const defaultPickerTheme = {
     text: {
       primary: '#000',
     },
+    input: {
+      background: '#fff',
+      borderStyle: 'none'
+    }
   },
   typography: {
     body: {
@@ -18106,6 +18113,9 @@ const defaultPickerTheme = {
       fontWeight: '400',
     },
   },
+  modale: {
+    height: "200px",
+  }
 };
 // const defaultPickerTheme = {
 //   palette: {
@@ -18191,6 +18201,10 @@ class RawDataManager {
   async getFromClassification(endpoint, options, loader) {
     let pathSegment = '';
     const queryParams = [];
+    if (options['Reach']) {
+      queryParams.push(`id=${options['Reach'].join('&id=')}`);
+      delete options['Reach'];
+    }
     for (const key in options) {
       if (!options.hasOwnProperty(key))
         continue;
@@ -18628,73 +18642,74 @@ function focusOutSearchEvent(component, event) {
   manageFocusOut(component, event);
 }
 
-function setupKeyboardNavigation(component) {
+function setupKeyboardNavigation(component, navigateInTree) {
   const treeArea = component.el.querySelector('.hierarchized-picker-tree-area');
   if (!treeArea)
     return;
   let focusedNodeIndex = 0;
-  const treeNodes = Array.from(treeArea.querySelectorAll('.treejs-node'));
-  function focusNode(index) {
-    treeNodes.forEach(node => node.classList.remove('treejs-node__checked'));
-    const targetNode = treeNodes[index];
-    if (targetNode) {
-      targetNode.classList.add('treejs-node__checked');
-      targetNode.scrollIntoView({ block: 'nearest' });
-    }
+  function focusNode(allLiElements, liElementToFocus) {
+    Object.values(allLiElements).forEach((liNode) => {
+      liNode.classList.remove('treejs-node__focused');
+    });
+    liElementToFocus.classList.add('treejs-node__focused');
   }
   component.el.addEventListener('keydown', (event) => {
-    var _a, _b, _c;
+    var _a, _b;
     event.stopPropagation();
     const tree = component.loadedTreeJs;
-    if (!tree || !treeNodes.length)
+    const treeNodesFromTree = tree.treeNodes;
+    if (!tree || !treeNodesFromTree.length)
       return;
+    const spaceNode = treeNodesFromTree[focusedNodeIndex];
+    const activeNode = treeNodesFromTree[focusedNodeIndex];
+    const liElement = tree.liElementsById[activeNode.id];
     switch (event.key) {
       case 'Tab':
+      case '0':
         event.preventDefault();
-        component.showTree('hide');
-        setTimeout(() => focusMainInput(), 10);
+        { //(spaceNode?.nodeId) {
+          component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
+          component.showTree('hide');
+          setTimeout(() => focusMainInput(), 100);
+        }
         break;
       case 'ArrowUp':
         event.preventDefault();
         focusedNodeIndex = Math.max(focusedNodeIndex - 1, 0);
-        focusNode(focusedNodeIndex);
+        const newActiveNodeUp = treeNodesFromTree[focusedNodeIndex];
+        const newLiElementUp = tree.liElementsById[newActiveNodeUp.id];
+        focusNode(tree.liElementsById, newLiElementUp);
         break;
       case 'ArrowDown':
         event.preventDefault();
-        focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodes.length - 1);
-        focusNode(focusedNodeIndex);
+        focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodesFromTree.length - 1);
+        const newActiveNodeDown = treeNodesFromTree[focusedNodeIndex];
+        const newLiElementDown = tree.liElementsById[newActiveNodeDown.id];
+        focusNode(tree.liElementsById, newLiElementDown);
         break;
       case 'ArrowLeft':
         event.preventDefault();
-        const leftSwitcher = (_a = treeNodes[focusedNodeIndex]) === null || _a === void 0 ? void 0 : _a.querySelector('.treejs-switcher');
+        const leftSwitcher = liElement.querySelector('.treejs-switcher');
         if (leftSwitcher) {
-          (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(leftSwitcher);
+          (_a = component.loadedTreeJs) === null || _a === void 0 ? void 0 : _a.onSwitcherClick(leftSwitcher);
           component.showTree('hide');
         }
         break;
       case 'ArrowRight':
         event.preventDefault();
-        const activeNode = treeNodes[focusedNodeIndex];
-        const rightSwitcher = activeNode === null || activeNode === void 0 ? void 0 : activeNode.querySelector('.treejs-switcher');
+        const rightSwitcher = liElement.querySelector('.treejs-switcher');
         if (rightSwitcher) {
-          (_c = component.loadedTreeJs) === null || _c === void 0 ? void 0 : _c.onSwitcherClick(rightSwitcher);
-        }
-        break;
-      case '0':
-        event.preventDefault();
-        const spaceNode = treeNodes[focusedNodeIndex];
-        if (spaceNode === null || spaceNode === void 0 ? void 0 : spaceNode.nodeId) {
-          component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
-          component.showTree('hide');
-          setTimeout(() => focusMainInput(), 10);
+          (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(rightSwitcher);
         }
         break;
     }
+    navigateInTree.emit(event.key);
   });
-  focusNode(focusedNodeIndex);
+  if (component && component.loadedTreeJs && component.loadedTreeJs.liElementsById && component.loadedTreeJs.treeNodes)
+    setTimeout(() => focusNode(component.loadedTreeJs.liElementsById, component.loadedTreeJs.liElementsById[component.loadedTreeJs.treeNodes[focusedNodeIndex].id]), 100);
 }
 
-const hierarchizedPickerCss = "reneco-hierarchized-picker .hierarchized-picker-raw-tree-area{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader{position:absolute;z-index:1;min-width:100%;min-height:100%;background:#FFFFFF99;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader .loader-inner{background:#FFF;padding:20px;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader:not(.loading){display:none}reneco-hierarchized-picker .scrollable{overflow-y:auto;position:relative}reneco-hierarchized-picker .treejs{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--hpicker-theme-typography-tree-font-size, 14px) !important;font-weight:var(--hpicker-theme-typography-tree-font-weight, 400) !important}reneco-hierarchized-picker .treejs *:after,reneco-hierarchized-picker .treejs *:before{-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .treejs>.treejs-node{padding-left:0}reneco-hierarchized-picker .treejs .treejs-nodes{list-style:none;padding-left:20px;overflow:hidden;-webkit-transition:height 150ms ease-out, opacity 150ms ease-out;-o-transition:height 150ms ease-out, opacity 150ms ease-out;transition:height 150ms ease-out, opacity 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-node{cursor:pointer;overflow:hidden;position:relative}reneco-hierarchized-picker .treejs .treejs-node.treejs-placeholder{padding-left:20px}reneco-hierarchized-picker .treejs .treejs-switcher{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative;-webkit-transition:-webkit-transform 150ms ease-out;transition:-webkit-transform 150ms ease-out;-o-transition:transform 150ms ease-out;transition:transform 150ms ease-out;transition:transform 150ms ease-out, -webkit-transform 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-switcher:before{position:absolute;top:8px;left:6px;display:block;content:' ';border:4px solid transparent;border-top:4px solid rgba(0, 0, 0, 0.4);-webkit-transition:border-color 150ms;-o-transition:border-color 150ms;transition:border-color 150ms}reneco-hierarchized-picker .treejs .treejs-switcher:hover:before{border-top:4px solid var(--hpicker-theme-palette-font-color)}reneco-hierarchized-picker .treejs-node__checked>.treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-primary-contrastText) !important}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-switcher{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-nodes{height:0}reneco-hierarchized-picker .treejs .treejs-checkbox{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;cursor:pointer;position:absolute;top:2px;content:' ';display:block;width:16px;height:16px;border:1px solid #d9d9d9;border-radius:2px}reneco-hierarchized-picker .treejs .treejs-checkbox:hover:before{-webkit-box-shadow:0 0 2px 1px #1890ff;box-shadow:0 0 2px 1px #1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:4px;left:5px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}reneco-hierarchized-picker .treejs .treejs-node__halfchecked{background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c))}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:9px;left:3px;width:10px;height:2px;background-color:#fff}reneco-hierarchized-picker .treejs .treejs-node__disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25)}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox{cursor:not-allowed}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:before{cursor:not-allowed;border-color:#d9d9d9 !important;background-color:#f5f5f5 !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:hover:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-label{vertical-align:middle}reneco-hierarchized-picker .treejs .treejs-node__deprecated>.treejs-label{text-decoration:line-through}reneco-hierarchized-picker .treejs .treejs-node__desaturated>.treejs-label{opacity:.5}reneco-hierarchized-picker .treejs .treejs-node__searchmatch>.treejs-label{font-weight:bolder}reneco-hierarchized-picker .treejs .dragging{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c));display:inline;opacity:.9;padding:11px 0px;display:block}reneco-hierarchized-picker .treejs .dragover{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c))}reneco-hierarchized-picker .treejs .dragover-over::after{content:\"\";display:block;width:2px;height:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-before::after{content:\"\";display:block;height:2px;width:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-after::after{content:\"\";display:block;height:2px;width:100%;position:absolute;bottom:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .fieldError{color:red !important}reneco-hierarchized-picker .hidden{display:none;opacity:0}reneco-hierarchized-picker ul.treejs-nodes:first-child{padding-left:0px !important;margin-top:0px !important;margin-left:0px !important;background-color:var(--hpicker-theme-palette-background-dark)}reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){margin:0 !important;padding-left:15px !important;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF)))}reneco-hierarchized-picker ul.treejs-nodes{margin-left:15px !important;padding-left:0px !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node ul.treejs-nodes{margin:11px 0 0 0 !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node__close ul.treejs-nodes{margin:0 !important}reneco-hierarchized-picker li.treejs-node__close{background-color:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-light, #FAFAFA)))}reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c));padding-bottom:0px !important}reneco-hierarchized-picker li:not(.treejs-node__close) ul.treejs-nodes li{margin-top:2px !important}reneco-hierarchized-picker ul li:last-child{margin-bottom:0px !important}reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--hpicker-theme-palette-primary-light) !important;color:var(--hpicker-theme-palette-primary-ContrastText, var(--mui-palette-primary-ContrastText, var(--ion-color-primary-contrast, #000)))!important}reneco-hierarchized-picker li.treejs-node{padding:2px 0px;margin-bottom:2px}reneco-hierarchized-picker .treejs-node.readonly_node{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:darkgrey}reneco-hierarchized-picker .treejs-node:not(.readonly_node){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black))}reneco-hierarchized-picker .hierarchized-picker-container{position:relative;width:100%}reneco-hierarchized-picker .hierarchized-picker-input-area{background-color:transparent !important;display:inline;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper{padding-left:10px !important}reneco-hierarchized-picker .hierarchized-picker-input{-ms-flex:2;flex:2}reneco-hierarchized-picker .hierarchized-picker-input.readonly{pointer-events:none;cursor:initial}reneco-hierarchized-picker .hierarchized-picker-input.hierarchized-picker-icon{margin-left:8px}reneco-hierarchized-picker .hierarchized-picker-label{position:stacked;margin-left:5px}reneco-hierarchized-picker .hierarchized-picker-tree-area{width:333px !important;padding-top:48px}reneco-hierarchized-picker .hierarchized-picker-modal-area{background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;position:absolute;z-index:10;padding-left:15px;overflow:scroll;top:20px;min-height:100px;max-height:200px;-webkit-box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);border-radius:4px;margin-right:0px !important}reneco-hierarchized-picker .hierarchized-picker-modal{display:inline-block;width:357px}reneco-hierarchized-picker .hierarchized-picker{display:-ms-flexbox;display:flex;width:100%;font-family:'Roboto', sans-serif}reneco-hierarchized-picker .hierarchized-picker-spinner{margin:35px 0px 0px 145px}reneco-hierarchized-picker .reneco:before{position:relative;top:1px}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco{padding:10px 15px}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco:hover{cursor:pointer}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco-close{-webkit-transform:translate(5px, -8px);transform:translate(5px, -8px);color:var(--ion-color-danger, red) !important}reneco-hierarchized-picker .treejs .treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-dark-shade, #121212)))}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before,reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;border-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker #autocomplete-results-area{position:absolute;margin-top:48px;background-color:white;left:15px;z-index:10;padding:0px 5px;max-width:340px;max-height:110px;overflow:auto}reneco-hierarchized-picker #autocomplete-results-area li{list-style-type:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;margin:1px}reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node{padding:11px 0px;display:block}reneco-hierarchized-picker input[title]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.hierarchized-picker-raw-tree-area.readonly li.treejs-node .treejs-switcher{pointer-events:all}::-webkit-scrollbar-thumb{background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433)));width:8px;margin:5px;border-radius:5px}::-webkit-scrollbar{background:var(--ion-color-medium-tint, #E0E0E0);width:8px;height:8px;margin:5px;cursor:pointer;border-radius:5px}::-webkit-scrollbar-corner{background-color:var(--ion-color-light-tint, #FFF)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__close{background-color:var(--ion-color-dark-tint, #424242);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-dark, #212121);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--ion-color-background, var(--hpicker-theme-palette-background-default, rgba(221, 169, 37, 0.18)));color:var(--ion-color-primary-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker .treejs-switcher:before{border-top-color:var(--ion-color-dark-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked .treejs-switcher:before{color:var(--ion-color-light-contrast, #111111) !important}[class$=\"-dark\"] reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){background-color:var(--ion-color-light-contrast, #111111) !important}";
+const hierarchizedPickerCss = "reneco-hierarchized-picker .hierarchized-picker-raw-tree-area{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader{position:absolute;z-index:1;min-width:100%;min-height:100%;background:#FFFFFF99;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:10px;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader .loader-inner{background:#FFF;padding:20px;-webkit-box-shadow:0 0 5px #000;box-shadow:0 0 5px #000;-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .loader:not(.loading){display:none}reneco-hierarchized-picker .scrollable{overflow-y:auto;position:relative}reneco-hierarchized-picker .treejs{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:var(--hpicker-theme-typography-tree-font-size, 14px) !important;font-weight:var(--hpicker-theme-typography-tree-font-weight, 400) !important}reneco-hierarchized-picker .treejs *:after,reneco-hierarchized-picker .treejs *:before{-webkit-box-sizing:border-box;box-sizing:border-box}reneco-hierarchized-picker .treejs>.treejs-node{padding-left:0}reneco-hierarchized-picker .treejs .treejs-nodes{list-style:none;padding-left:20px;overflow:hidden;-webkit-transition:height 150ms ease-out, opacity 150ms ease-out;-o-transition:height 150ms ease-out, opacity 150ms ease-out;transition:height 150ms ease-out, opacity 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-node{cursor:pointer;overflow:hidden;position:relative}reneco-hierarchized-picker .treejs .treejs-node.treejs-placeholder{padding-left:20px}reneco-hierarchized-picker .treejs .treejs-switcher{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative;-webkit-transition:-webkit-transform 150ms ease-out;transition:-webkit-transform 150ms ease-out;-o-transition:transform 150ms ease-out;transition:transform 150ms ease-out;transition:transform 150ms ease-out, -webkit-transform 150ms ease-out}reneco-hierarchized-picker .treejs .treejs-switcher:before{position:absolute;top:8px;left:6px;display:block;content:' ';border:4px solid transparent;border-top:4px solid rgba(0, 0, 0, 0.4);-webkit-transition:border-color 150ms;-o-transition:border-color 150ms;transition:border-color 150ms}reneco-hierarchized-picker .treejs .treejs-switcher:hover:before{border-top:4px solid var(--hpicker-theme-palette-font-color)}reneco-hierarchized-picker .treejs-node__checked>.treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-primary-contrastText) !important}reneco-hierarchized-picker .treejs-node__focused{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-switcher{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}reneco-hierarchized-picker .treejs .treejs-node__close>.treejs-nodes{height:0}reneco-hierarchized-picker .treejs .treejs-checkbox{display:inline-block;vertical-align:middle;width:20px;height:20px;cursor:pointer;position:relative}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;cursor:pointer;position:absolute;top:2px;content:' ';display:block;width:16px;height:16px;border:1px solid #d9d9d9;border-radius:2px}reneco-hierarchized-picker .treejs .treejs-checkbox:hover:before{-webkit-box-shadow:0 0 2px 1px #1890ff;box-shadow:0 0 2px 1px #1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:4px;left:5px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}reneco-hierarchized-picker .treejs .treejs-node__halfchecked{background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c))}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:#1890ff;border-color:#1890ff}reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:after{position:absolute;content:' ';display:block;top:9px;left:3px;width:10px;height:2px;background-color:#fff}reneco-hierarchized-picker .treejs .treejs-node__disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25)}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox{cursor:not-allowed}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:before{cursor:not-allowed;border-color:#d9d9d9 !important;background-color:#f5f5f5 !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-checkbox:hover:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled .treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__checked>.treejs-checkbox:after{border-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-node__disabled.treejs-node__halfchecked>.treejs-checkbox:after{background-color:#d9d9d9}reneco-hierarchized-picker .treejs .treejs-label{vertical-align:middle}reneco-hierarchized-picker .treejs .treejs-node__deprecated>.treejs-label{text-decoration:line-through}reneco-hierarchized-picker .treejs .treejs-node__desaturated>.treejs-label{opacity:.5}reneco-hierarchized-picker .treejs .treejs-node__searchmatch>.treejs-label{font-weight:bolder}reneco-hierarchized-picker .treejs .dragging{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c));display:inline;opacity:.9;padding:11px 0px;display:block}reneco-hierarchized-picker .treejs .dragover{background:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, #e8a86c))}reneco-hierarchized-picker .treejs .dragover-over::after{content:\"\";display:block;width:2px;height:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-before::after{content:\"\";display:block;height:2px;width:100%;position:absolute;top:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .treejs .dragover-after::after{content:\"\";display:block;height:2px;width:100%;position:absolute;bottom:0;left:0;background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, #d58433))}reneco-hierarchized-picker .fieldError{color:red !important}reneco-hierarchized-picker .hidden{display:none;opacity:0}reneco-hierarchized-picker ul.treejs-nodes:first-child{padding-left:0px !important;margin-top:0px !important;margin-left:0px !important;background-color:var(--hpicker-theme-palette-background-dark)}reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){margin:0 !important;padding-left:15px !important;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF)))}reneco-hierarchized-picker ul.treejs-nodes{margin-left:15px !important;padding-left:0px !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node ul.treejs-nodes{margin:11px 0 0 0 !important}reneco-hierarchized-picker .hierarchized-picker-raw-tree li.treejs-node__close ul.treejs-nodes{margin:0 !important}reneco-hierarchized-picker li.treejs-node__close{background-color:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-light, #FAFAFA)))}reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, #e8a86c));padding-bottom:0px !important}reneco-hierarchized-picker li:not(.treejs-node__close) ul.treejs-nodes li{margin-top:2px !important}reneco-hierarchized-picker ul li:last-child{margin-bottom:0px !important}reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--hpicker-theme-palette-primary-light) !important;color:var(--hpicker-theme-palette-primary-ContrastText, var(--mui-palette-primary-ContrastText, var(--ion-color-primary-contrast, #000)))!important}reneco-hierarchized-picker li.treejs-node{padding:2px 0px;margin-bottom:2px}reneco-hierarchized-picker .treejs-node.readonly_node{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:darkgrey}reneco-hierarchized-picker .treejs-node:not(.readonly_node){-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, black))}reneco-hierarchized-picker .hierarchized-picker-container{position:relative;width:100%}reneco-hierarchized-picker .hierarchized-picker-input-area{background-color:transparent !important;display:-ms-flexbox;display:flex;width:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper{padding-left:10px !important}reneco-hierarchized-picker .hierarchized-picker-input{-ms-flex:2;flex:2}reneco-hierarchized-picker .hierarchized-picker-input input{width:100%}reneco-hierarchized-picker .hierarchized-picker-input.readonly{pointer-events:none;cursor:initial}reneco-hierarchized-picker .hierarchized-picker-label{position:stacked;margin-left:5px}reneco-hierarchized-picker .hierarchized-picker-tree-area{padding-top:10px}reneco-hierarchized-picker .hierarchized-picker-modal-area{position:absolute;width:100%;background-color:var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;z-index:10;overflow:scroll;top:20px;min-height:100px;max-height:var(--hpicker-theme-modal-height, \"200px\") !important;-webkit-box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 0px 15px 0 rgba(0, 0, 0, 0.2);border-radius:4px;margin-right:0px !important}reneco-hierarchized-picker .hierarchized-picker-modal-area.display-modale-top{bottom:30px !important;top:unset !important}reneco-hierarchized-picker .hierarchized-picker-modal{padding:0px 15px}reneco-hierarchized-picker .hierarchized-picker{display:-ms-flexbox;display:flex;width:100%;font-family:'Roboto', sans-serif}reneco-hierarchized-picker .hierarchized-picker-spinner{margin:35px 0px 0px 145px}reneco-hierarchized-picker .reneco:before{position:relative;top:1px}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco:hover{cursor:pointer}reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco-close{color:var(--ion-color-danger, red) !important;padding-left:10px}reneco-hierarchized-picker .treejs .treejs-switcher:before{border-top:4px solid var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-dark-shade, #121212)))}reneco-hierarchized-picker .treejs .treejs-checkbox:before{-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .treejs .treejs-node__checked>.treejs-checkbox:before,reneco-hierarchized-picker .treejs .treejs-node__halfchecked>.treejs-checkbox:before{background-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;border-color:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433))) !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker #autocomplete-results-area{position:absolute;margin-top:48px;background-color:white;left:15px;z-index:10;padding:0px 5px;max-width:340px;max-height:110px;overflow:auto}reneco-hierarchized-picker #autocomplete-results-area li{list-style-type:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;margin:1px}reneco-hierarchized-picker .hierarchized-picker-raw-tree-area li.treejs-node{padding:11px 0px;display:block}reneco-hierarchized-picker input[title]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}reneco-hierarchized-picker input{background-color:var(--hpicker-theme-palette-input-background-color,  #eeeeee);border-style:var(--hpicker-theme-palette-input-border-style,  solid)}reneco-hierarchized-picker input:focus-visible{outline:none !important}.hierarchized-picker-raw-tree-area.readonly li.treejs-node .treejs-switcher{pointer-events:all}::-webkit-scrollbar-thumb{background:var(--hpicker-theme-palette-primary-main, var(--mui-palette-primary-main, var(--ion-color-primary, #d58433)));width:8px;margin:5px;border-radius:5px}::-webkit-scrollbar{background:var(--ion-color-medium-tint, #E0E0E0);width:8px;height:8px;margin:5px;cursor:pointer;border-radius:5px}::-webkit-scrollbar-corner{background-color:var(--ion-color-light-tint, #FFF)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__close{background-color:var(--ion-color-dark-tint, #424242);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li:not(.treejs-node__close){background-color:var(--ion-color-dark, #212121);color:var(--ion-color-dark-contrast, #fff)}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked{background-color:var(--ion-color-background, var(--hpicker-theme-palette-background-default, rgba(221, 169, 37, 0.18)));color:var(--ion-color-primary-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker .treejs-switcher:before{border-top-color:var(--ion-color-dark-contrast, #fff) !important}[class$=\"-dark\"] reneco-hierarchized-picker li.treejs-node__checked .treejs-switcher:before{color:var(--ion-color-light-contrast, #111111) !important}[class$=\"-dark\"] reneco-hierarchized-picker ul.treejs-nodes:not(:first-child){background-color:var(--ion-color-light-contrast, #111111) !important}";
 
 const HierarchizedPickerComponent = class {
   /**
@@ -18878,6 +18893,9 @@ const HierarchizedPickerComponent = class {
     this.itemDropped = index.createEvent(this, "itemDropped", 7);
     this.itemContextMenuItemClick = index.createEvent(this, "itemContextMenuItemClick", 7);
     this.searchResult = index.createEvent(this, "searchResult", 7);
+    this.navigateInTree = index.createEvent(this, "navigateInTree", 7);
+    this.modaleHeight = 200;
+    this.modalePosition = 'bottom';
     this.canload = true; // Determines wether the component may be loaded
     this.ready = false; // State to determine if all the elements of the component have been loaded
     this.searchToDisplay = 0; // Counter to trigger the research on proper time
@@ -18885,6 +18903,33 @@ const HierarchizedPickerComponent = class {
     this.lastSearchMatchCounter = 0; // Counter of number of matches for last search
     this.setValueOnClick = true; // Tells wether we edit the picker value on click in the tree
     this.mylog = console.log; // Custom log function for debug purposes
+    this.getShortenedFullpath = (realFullpath) => {
+      var _a, _b, _c, _d;
+      let toret = realFullpath;
+      try {
+        const property_nodeid = (this.optionsManager.getOptions().origin == 'classification' ? "startNode" : "StartNodeID");
+        const property_value = this.optionsManager.getOptions().options[property_nodeid];
+        if (property_value in ["0", 0])
+          return toret;
+        if (isNumeric(property_value)) {
+          if (this.optionsManager.getOptions().origin == 'classification') {
+            const { Translations, Properties } = this.rawDataManager.getData();
+            const currentLanguage = this.optionsManager.getOptions().language;
+            toret = ((_b = (_a = Translations[currentLanguage]) === null || _a === void 0 ? void 0 : _a.translated_name) !== null && _b !== void 0 ? _b : Properties === null || Properties === void 0 ? void 0 : Properties.System_Name) + realFullpath.replace(((_d = (_c = Translations[currentLanguage]) === null || _c === void 0 ? void 0 : _c.translated_fullpath) !== null && _d !== void 0 ? _d : Properties === null || Properties === void 0 ? void 0 : Properties.System_Fullpath), "");
+          }
+          else {
+            const { fullpath, fullpathTranslated, title, valueTranslated } = this.rawDataManager.getData();
+            toret = (valueTranslated !== null && valueTranslated !== void 0 ? valueTranslated : title) + realFullpath.replace((fullpathTranslated !== null && fullpathTranslated !== void 0 ? fullpathTranslated : fullpath), "");
+          }
+        }
+        else
+          this.errorToLog = "Error in getFullpath : startnode is not number";
+      }
+      catch (error) {
+        this.errorToLog = "Error in getFullpath " + error.toString();
+      }
+      return toret;
+    };
     this.options = undefined;
     this.valueChangeCallback = undefined;
     this.disabled = undefined;
@@ -18933,7 +18978,7 @@ const HierarchizedPickerComponent = class {
   }
   componentDidLoad() {
     this.mylog('----- componentDidLoad beginning -----');
-    setupKeyboardNavigation(this);
+    setupKeyboardNavigation(this, this.navigateInTree);
     focusMainInput();
   }
   displayWhenLoaded() {
@@ -19054,7 +19099,9 @@ const HierarchizedPickerComponent = class {
     this.canload = result.toret;
     this.errorToLog = result.errorToLog;
     await this.initComponent();
-    applyPickerTheme(this.optionsManager.getOptions().theme, defaultPickerTheme);
+    let defaultPickerThemeForInit = defaultPickerTheme;
+    defaultPickerTheme.modale.height = this.modaleHeight + "px";
+    applyPickerTheme(this.optionsManager.getOptions().theme, defaultPickerThemeForInit);
     // Displays option values
     this.mylog(this.optionsManager.getOptions());
     window.addEventListener('click', (evt) => {
@@ -19158,7 +19205,7 @@ const HierarchizedPickerComponent = class {
       let dynamicType = pathSegments[pathSegments.length - 2];
       if (['thesaurus', 'position'].indexOf(dynamicType) == -1)
         dynamicType = pathSegments[pathSegments.length - 1];
-      const newPathname = `/api/v1/classification/reach/${dynamicType}/${options.Reach}`;
+      const newPathname = `/api/v1/classification/reach/${dynamicType}`;
       return `${parsedUrl.origin}${newPathname}`;
     }
     return url;
@@ -19170,7 +19217,6 @@ const HierarchizedPickerComponent = class {
     if (!init)
       delete optionsToReturn.Reach;
     if (optionsToReturn.Reach) {
-      delete optionsToReturn.Reach;
       if ("startNode" in optionsToReturn) {
         optionsToReturn.startingnode = optionsToReturn.startNode;
         delete optionsToReturn.startNode;
@@ -19335,9 +19381,11 @@ const HierarchizedPickerComponent = class {
         this.ignoreOptionsChanges = false;
       },
     });
-    Object.values(myTree.liElementsById).forEach((el) => {
-      el.classList.remove('treejs-node__searchmatch');
-    });
+    if (this.searchResultData.length == 0) {
+      Object.values(myTree.liElementsById).forEach((el) => {
+        el.classList.remove('treejs-node__searchmatch');
+      });
+    }
     this.loadedTreeJs = myTree;
     this.collapseAllNodes();
     // TODO Make something that makes sense, this is a temporary quick fix :
@@ -19475,6 +19523,14 @@ const HierarchizedPickerComponent = class {
     const previousShownTree = this.shownTree;
     this.shownTree = this.hasFocus.length > 0;
     if (this.shownTree && !previousShownTree) {
+      console.log("component value", document.querySelector('#hierarchized-picker-input-' + this.componentID));
+      console.log("shouldOpenModalAbove", this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight));
+      if (this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight)) {
+        this.modalePosition = 'top';
+      }
+      else {
+        this.modalePosition = 'bottom';
+      }
       focusSearchInput(this);
     }
   }
@@ -19520,8 +19576,8 @@ const HierarchizedPickerComponent = class {
     if (!value)
       value = this.value;
     this.displayedValue = value.map(item => {
-      var _a;
-      return (_a = (this.optionsManager.getOptions().isFullpath ? item.fullpathTranslated : item.shortpathTranslated)) !== null && _a !== void 0 ? _a : `Node ${item.nodeid}`;
+      var _a, _b;
+      return (_b = (this.optionsManager.getOptions().isFullpath ? this.getShortenedFullpath((_a = item.fullpathTranslated) !== null && _a !== void 0 ? _a : item.fullpath) : item.shortpathTranslated)) !== null && _b !== void 0 ? _b : `Node ${item.nodeid}`;
     }).join(';');
   }
   // Search a value in the tree and triggers a search when necessary
@@ -19708,9 +19764,14 @@ const HierarchizedPickerComponent = class {
       return "No selection";
     }
     return this.value
-      .map(item => { var _a, _b, _c; return (_c = (_b = (_a = item.fullpath) !== null && _a !== void 0 ? _a : item.fullpathTranslated) !== null && _b !== void 0 ? _b : item.shortpathTranslated) !== null && _c !== void 0 ? _c : `Node ${item.nodeid}`; })
+      .map(item => { var _a, _b; return (_b = (_a = this.getShortenedFullpath(item.fullpathTranslated)) !== null && _a !== void 0 ? _a : item.fullpath) !== null && _b !== void 0 ? _b : `Node ${item.nodeid}`; })
       .join('; ');
   }
+  shouldOpenModalAbove(inputElement, modaleHeight) {
+    const inputRect = inputElement.getBoundingClientRect();
+    const spaceLeft = window.innerHeight - inputRect.y;
+    return spaceLeft < modaleHeight;
+  }
   render() {
     return this.optionsManager.getOptions() ? (index.h("div", { id: 'hierarchized-picker-' + this.componentID, class: 'hierarchized-picker ' + (this.isDisabled ? 'readonly-mode' : '') }, this.optionsManager.getOptions().mode == 'input' ? (index.h("div", { class: "hierarchized-picker-container" }, index.h("div", { style: { display: 'none' }, ref: el => {
         this.loader = el;
@@ -19726,11 +19787,11 @@ const HierarchizedPickerComponent = class {
       } }, 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, title: this.getFullpathTooltip() })), 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 => {
+      }, class: `hierarchized-picker-modal-area ${!this.shownTree ? ' hidden ' : ''} ${this.modalePosition == 'top' ? "display-modale-top" : ""}`, onClick: event => {
         clickPickerModalArea(this);
       } }, index.h("div", { class: "loader", ref: el => {
         this.loader = el;
-      } }, index.h("div", { class: "loader-inner" }, "Loading...")), index.h("div", { class: 'hierarchized-picker-modal ' + (!this.ready ? 'hidden' : '') }, index.h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), index.h("ul", { id: "autocomplete-results-area" }), index.h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (index.h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), onClick: event => {
+      } }, index.h("div", { class: "loader-inner" }, "Loading...")), index.h("div", { class: `hierarchized-picker-modal ${!this.ready ? 'hidden' : ''}` }, index.h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), index.h("ul", { id: "autocomplete-results-area" }), index.h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (index.h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), onClick: event => {
         clickPickerModalArea(this);
       } }, index.h("div", { class: "loader", ref: el => {
         this.loader = el;
@@ -19750,7 +19811,7 @@ const HierarchizedPickerComponent = class {
 };
 HierarchizedPickerComponent.style = hierarchizedPickerCss;
 
-const searchInputCss = ".search-input-container{width:100%;margin:0}.search-input{width:100%;border:none}.search-input:focus{border:none !important;outline:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper{padding-left:10px !important}reneco-hierarchized-picker .hierarchized-picker-input input,reneco-hierarchized-picker .hierarchized-picker-search input{padding-left:5px !important;text-overflow:ellipsis !important;border:0;background:transparent;outline:none;font-size:var(--hpicker-theme-typography-body-font-size, var(--mui-typography-body-font-size, 14px)) !important;font-weight:var(--hpicker-theme-typography-body-font-weight, var(--mui-typography-body-font-weight, 400)) !important}reneco-hierarchized-picker .hierarchized-picker-search input{width:90%;color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-light-tint, #fff))) !important}reneco-hierarchized-picker .hierarchized-picker-search{background-color:var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-medium-tint, #E0E0E0)));position:absolute !important;width:333px !important;margin-top:10px;border-radius:4px;padding:8.5px}reneco-hierarchized-picker #searchInTree{padding:8.5px 8px;background:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, var(--ion-color-background, rgba(221, 169, 37, 0.18))));border:none !important;border-radius:4px}reneco-hierarchized-picker #searchInTree:focus{border:none !important;outline:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}";
+const searchInputCss = ".search-input-container{display:-ms-flexbox;display:flex;gap:8px;margin-top:10px}.search-input-container .reneco-search{margin-top:3px}.search-input-container input{border-radius:4px;padding:5px}.search-input{width:100%;border:none}.search-input:focus{border:none !important;outline:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper{padding-left:10px !important}reneco-hierarchized-picker .hierarchized-picker-input input,reneco-hierarchized-picker .hierarchized-picker-search input{font-size:var(--hpicker-theme-typography-body-font-size, var(--mui-typography-body-font-size, 14px)) !important;font-weight:var(--hpicker-theme-typography-body-font-weight, var(--mui-typography-body-font-weight, 400)) !important}reneco-hierarchized-picker .hierarchized-picker-search input{color:var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-light-tint, #fff))) !important}reneco-hierarchized-picker #searchInTree{padding:8.5px 8px;background:var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, var(--ion-color-background, rgba(221, 169, 37, 0.18))));border:none !important;border-radius:4px}reneco-hierarchized-picker #searchInTree:focus{border:none !important;outline:none !important;-webkit-box-shadow:none !important;box-shadow:none !important}";
 
 const SearchInput = class {
   constructor(hostRef) {
@@ -19786,9 +19847,11 @@ const SearchInput = class {
     }
   }
   render() {
-    return (index.h("div", { id: "hierarchized-picker-input-search-",
+    return (index.h("div", { id: "hierarchized-picker-input-search",
       // TODO: need component ID ?
-      class: "search-input-container reneco reneco-search", ref: (el) => (this.rootElement = el) }, index.h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input search-input hierarchized-picker-search reneco reneco-search sc-ion-input-md-h sc-ion-input-md-s md", placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
+      class: "search-input-container", ref: (el) => (this.rootElement = el) }, index.h("div", { class: "reneco reneco-search" }), index.h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input sc-ion-input-md-h sc-ion-input-md-s md search-input hierarchized-picker-search",
+      //class="native-input search-input hierarchized-picker-search sc-ion-input-md-h sc-ion-input-md-s md"
+      placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
   }
 };
 SearchInput.style = searchInputCss;

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

@@ -91,6 +91,11 @@ reneco-hierarchized-picker .treejs {
   reneco-hierarchized-picker .treejs-node__checked > .treejs-switcher:before {
     border-top: 4px solid var(--hpicker-theme-palette-primary-contrastText) !important;
   }
+  reneco-hierarchized-picker .treejs-node__focused {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+  }
   reneco-hierarchized-picker .treejs .treejs-node__close > .treejs-switcher {
     -webkit-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
@@ -332,7 +337,8 @@ reneco-hierarchized-picker .hierarchized-picker-container{
 
 reneco-hierarchized-picker .hierarchized-picker-input-area {
     background-color: transparent !important;
-    display: inline;
+    display: flex;
+    width: 100%;
     flex-direction : row;
     align-items : center
 }
@@ -345,36 +351,36 @@ reneco-hierarchized-picker .hierarchized-picker-input{
     flex: 2;
 }
 
+reneco-hierarchized-picker .hierarchized-picker-input input{
+    width: 100%;
+}
+
 reneco-hierarchized-picker .hierarchized-picker-input.readonly{
     pointer-events: none;
     cursor: initial;
 }
 
-reneco-hierarchized-picker .hierarchized-picker-input.hierarchized-picker-icon{
-    margin-left: 8px;
-}
-
 reneco-hierarchized-picker .hierarchized-picker-label{
     position: stacked;
     margin-left: 5px;
 }
 
 reneco-hierarchized-picker .hierarchized-picker-tree-area{
-  width: 333px !important;
-  padding-top: 48px;
+  padding-top: 10px;
 }
 
 reneco-hierarchized-picker .hierarchized-picker-modal-area{
-  background-color: var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;
   position: absolute;
+  width: 100%;
+
+  background-color: var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;
   z-index: 10;
-  padding-left: 15px;
   overflow: scroll;
 
   top: 20px;
 
   min-height: 100px;
-  max-height: 200px;
+  max-height: var(--hpicker-theme-modal-height, "200px") !important;
 
   box-shadow: 0 0px 15px 0 rgba(0, 0, 0, 0.2);
   border-radius: 4px;
@@ -382,9 +388,13 @@ reneco-hierarchized-picker .hierarchized-picker-modal-area{
   margin-right: 0px !important;
 }
 
+reneco-hierarchized-picker .hierarchized-picker-modal-area.display-modale-top{
+  bottom: 30px !important;
+  top: unset !important;
+}
+
 reneco-hierarchized-picker .hierarchized-picker-modal{
-    display: inline-block;
-    width : 357px
+  padding: 0px 15px;
 }
 
 reneco-hierarchized-picker .hierarchized-picker{
@@ -402,16 +412,12 @@ reneco-hierarchized-picker .reneco:before{
     top: 1px;
 }
 
-/* ICON BUTTONS */
-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{
-    transform: translate(5px, -8px);
     color : var(--ion-color-danger, red) !important;
+    padding-left: 10px;
 }
 
 /* ICON DROPDOWN */
@@ -465,6 +471,15 @@ reneco-hierarchized-picker input[title] {
   white-space: nowrap;
 }
 
+reneco-hierarchized-picker input {
+  background-color: var(--hpicker-theme-palette-input-background-color,  #eeeeee);
+  border-style: var(--hpicker-theme-palette-input-border-style,  solid);
+}
+
+reneco-hierarchized-picker input:focus-visible {
+  outline: none !important;
+}
+
 /* TODO For now, the readonly status is ignored for the mode tree, probably need a rework sometime */
 /* .hierarchized-picker-raw-tree-area.readonly li.treejs-node{
   cursor: initial;