reneco-hierarchized-picker 0.4.3-beta.4 → 0.4.3-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/reneco-hierarchized-picker_2.cjs.entry.js +49 -17
  2. package/dist/collection/components/hierarchized-picker/hierarchized-picker.css +23 -17
  3. package/dist/collection/components/hierarchized-picker/hierarchized-picker.js +20 -3
  4. package/dist/collection/components/search-input/search-input.css +13 -17
  5. package/dist/collection/components/search-input/search-input.js +4 -2
  6. package/dist/collection/features/keyboard-navigation/keyboard-navigation.js +12 -9
  7. package/dist/collection/utils/constants.js +7 -0
  8. package/dist/collection/utils/theme-utils.js +4 -1
  9. package/dist/custom-elements/index.js +49 -17
  10. package/dist/esm/reneco-hierarchized-picker_2.entry.js +49 -17
  11. package/dist/esm-es5/reneco-hierarchized-picker_2.entry.js +2 -2
  12. package/dist/reneco-hierarchized-picker/p-73168a50.system.js +1 -1
  13. package/dist/reneco-hierarchized-picker/{p-69b953d4.system.entry.js → p-9bd69fc7.system.entry.js} +2 -2
  14. package/dist/reneco-hierarchized-picker/{p-4c73096f.entry.js → p-fcded1cc.entry.js} +1 -1
  15. package/dist/reneco-hierarchized-picker/reneco-hierarchized-picker.esm.js +1 -1
  16. package/dist/types/components/hierarchized-picker/hierarchized-picker.d.ts +3 -0
  17. package/dist/types/utils/constants.d.ts +7 -0
  18. package/package.json +1 -1
package/dist/cjs/reneco-hierarchized-picker_2.cjs.entry.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-55df525c.js');
6
6
 
7
7
  function applyPickerTheme(theme, defaultTheme) {
8
+ var _a;
8
9
  const docstyle = document.documentElement.style;
9
10
  docstyle.setProperty('--hpicker-theme-palette-primary-main', (theme === null || theme === void 0 ? void 0 : theme.palette.primary.main) || defaultTheme.palette.primary.main);
10
11
  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) {
12
13
  docstyle.setProperty('--hpicker-theme-palette-background-default', (theme === null || theme === void 0 ? void 0 : theme.palette.background.default) || defaultTheme.palette.background.default);
13
14
  docstyle.setProperty('--hpicker-theme-palette-background-light', (theme === null || theme === void 0 ? void 0 : theme.palette.background.light) || defaultTheme.palette.background.light);
14
15
  docstyle.setProperty('--hpicker-theme-palette-background-dark', (theme === null || theme === void 0 ? void 0 : theme.palette.background.dark) || defaultTheme.palette.background.dark);
16
+ docstyle.setProperty('--hpicker-theme-palette-input-background-color', (theme === null || theme === void 0 ? void 0 : theme.palette.input.background) || defaultTheme.palette.input.background);
17
+ docstyle.setProperty('--hpicker-theme-palette-input-border-style', (theme === null || theme === void 0 ? void 0 : theme.palette.input.borderStyle) || defaultTheme.palette.input.borderStyle);
15
18
  docstyle.setProperty('--hpicker-theme-typography-body-font-size', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontSize) || defaultTheme.typography.body.fontSize);
16
19
  docstyle.setProperty('--hpicker-theme-typography-body-font-weight', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontWeight) || defaultTheme.typography.body.fontWeight);
17
- docstyle.setProperty('--hpicker-theme-palette-font-color', (theme === null || theme === void 0 ? void 0 : theme.palette.text.primary) || defaultTheme.palette.text.primary);
20
+ 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);
18
21
  }
19
22
 
20
23
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -18099,6 +18102,10 @@ const defaultPickerTheme = {
18099
18102
  text: {
18100
18103
  primary: '#000',
18101
18104
  },
18105
+ input: {
18106
+ background: '#fff',
18107
+ borderStyle: 'none'
18108
+ }
18102
18109
  },
18103
18110
  typography: {
18104
18111
  body: {
@@ -18106,6 +18113,9 @@ const defaultPickerTheme = {
18106
18113
  fontWeight: '400',
18107
18114
  },
18108
18115
  },
18116
+ modale: {
18117
+ height: "200px",
18118
+ }
18109
18119
  };
18110
18120
  // const defaultPickerTheme = {
18111
18121
  // palette: {
@@ -18647,10 +18657,12 @@ function setupKeyboardNavigation(component) {
18647
18657
  }
18648
18658
  }
18649
18659
  component.el.addEventListener('keydown', (event) => {
18650
- var _a, _b, _c;
18660
+ var _a, _b;
18651
18661
  event.stopPropagation();
18652
18662
  const tree = component.loadedTreeJs;
18653
- if (!tree || !treeNodes.length)
18663
+ const treeNodesFromTree = tree.treeNodes;
18664
+ console.log("stopPropagation", tree, treeNodesFromTree);
18665
+ if (!tree || !treeNodesFromTree.length)
18654
18666
  return;
18655
18667
  switch (event.key) {
18656
18668
  case 'Tab':
@@ -18665,28 +18677,29 @@ function setupKeyboardNavigation(component) {
18665
18677
  break;
18666
18678
  case 'ArrowDown':
18667
18679
  event.preventDefault();
18668
- focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodes.length - 1);
18680
+ focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodesFromTree.length - 1);
18669
18681
  focusNode(focusedNodeIndex);
18670
18682
  break;
18671
18683
  case 'ArrowLeft':
18672
18684
  event.preventDefault();
18673
- const leftSwitcher = (_a = treeNodes[focusedNodeIndex]) === null || _a === void 0 ? void 0 : _a.querySelector('.treejs-switcher');
18685
+ const leftContextActiveNode = treeNodesFromTree[focusedNodeIndex];
18686
+ const leftSwitcher = tree.liElementsById[leftContextActiveNode.id].querySelector('.treejs-switcher');
18674
18687
  if (leftSwitcher) {
18675
- (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(leftSwitcher);
18688
+ (_a = component.loadedTreeJs) === null || _a === void 0 ? void 0 : _a.onSwitcherClick(leftSwitcher);
18676
18689
  component.showTree('hide');
18677
18690
  }
18678
18691
  break;
18679
18692
  case 'ArrowRight':
18680
18693
  event.preventDefault();
18681
- const activeNode = treeNodes[focusedNodeIndex];
18682
- const rightSwitcher = activeNode === null || activeNode === void 0 ? void 0 : activeNode.querySelector('.treejs-switcher');
18694
+ const rightContextActiveNode = treeNodesFromTree[focusedNodeIndex];
18695
+ const rightSwitcher = tree.liElementsById[rightContextActiveNode.id].querySelector('.treejs-switcher');
18683
18696
  if (rightSwitcher) {
18684
- (_c = component.loadedTreeJs) === null || _c === void 0 ? void 0 : _c.onSwitcherClick(rightSwitcher);
18697
+ (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(rightSwitcher);
18685
18698
  }
18686
18699
  break;
18687
18700
  case '0':
18688
18701
  event.preventDefault();
18689
- const spaceNode = treeNodes[focusedNodeIndex];
18702
+ const spaceNode = treeNodesFromTree[focusedNodeIndex];
18690
18703
  if (spaceNode === null || spaceNode === void 0 ? void 0 : spaceNode.nodeId) {
18691
18704
  component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
18692
18705
  component.showTree('hide');
@@ -18698,7 +18711,7 @@ function setupKeyboardNavigation(component) {
18698
18711
  focusNode(focusedNodeIndex);
18699
18712
  }
18700
18713
 
18701
- 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}";
18714
+ 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:-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)}.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}";
18702
18715
 
18703
18716
  const HierarchizedPickerComponent = class {
18704
18717
  /**
@@ -18882,6 +18895,8 @@ const HierarchizedPickerComponent = class {
18882
18895
  this.itemDropped = index.createEvent(this, "itemDropped", 7);
18883
18896
  this.itemContextMenuItemClick = index.createEvent(this, "itemContextMenuItemClick", 7);
18884
18897
  this.searchResult = index.createEvent(this, "searchResult", 7);
18898
+ this.modaleHeight = 200;
18899
+ this.modalePosition = 'bottom';
18885
18900
  this.canload = true; // Determines wether the component may be loaded
18886
18901
  this.ready = false; // State to determine if all the elements of the component have been loaded
18887
18902
  this.searchToDisplay = 0; // Counter to trigger the research on proper time
@@ -19085,7 +19100,9 @@ const HierarchizedPickerComponent = class {
19085
19100
  this.canload = result.toret;
19086
19101
  this.errorToLog = result.errorToLog;
19087
19102
  await this.initComponent();
19088
- applyPickerTheme(this.optionsManager.getOptions().theme, defaultPickerTheme);
19103
+ let defaultPickerThemeForInit = defaultPickerTheme;
19104
+ defaultPickerTheme.modale.height = this.modaleHeight + "px";
19105
+ applyPickerTheme(this.optionsManager.getOptions().theme, defaultPickerThemeForInit);
19089
19106
  // Displays option values
19090
19107
  this.mylog(this.optionsManager.getOptions());
19091
19108
  window.addEventListener('click', (evt) => {
@@ -19507,6 +19524,14 @@ const HierarchizedPickerComponent = class {
19507
19524
  const previousShownTree = this.shownTree;
19508
19525
  this.shownTree = this.hasFocus.length > 0;
19509
19526
  if (this.shownTree && !previousShownTree) {
19527
+ console.log("component value", document.querySelector('#hierarchized-picker-input-' + this.componentID));
19528
+ console.log("shouldOpenModalAbove", this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight));
19529
+ if (this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight)) {
19530
+ this.modalePosition = 'top';
19531
+ }
19532
+ else {
19533
+ this.modalePosition = 'bottom';
19534
+ }
19510
19535
  focusSearchInput(this);
19511
19536
  }
19512
19537
  }
@@ -19743,6 +19768,11 @@ const HierarchizedPickerComponent = class {
19743
19768
  .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}`; })
19744
19769
  .join('; ');
19745
19770
  }
19771
+ shouldOpenModalAbove(inputElement, modaleHeight) {
19772
+ const inputRect = inputElement.getBoundingClientRect();
19773
+ const spaceLeft = window.innerHeight - inputRect.y;
19774
+ return spaceLeft < modaleHeight;
19775
+ }
19746
19776
  render() {
19747
19777
  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 => {
19748
19778
  this.loader = el;
@@ -19758,11 +19788,11 @@ const HierarchizedPickerComponent = class {
19758
19788
  } }, 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 => {
19759
19789
  // Uncomment if you want the modale of picker in input mode to scroll to selected node on openning >>>
19760
19790
  this.scrollable = el;
19761
- }, class: 'hierarchized-picker-modal-area ' + (!this.shownTree ? ' hidden ' : ''), onClick: event => {
19791
+ }, class: `hierarchized-picker-modal-area ${!this.shownTree ? ' hidden ' : ''} ${this.modalePosition == 'top' ? "display-modale-top" : ""}`, onClick: event => {
19762
19792
  clickPickerModalArea(this);
19763
19793
  } }, index.h("div", { class: "loader", ref: el => {
19764
19794
  this.loader = el;
19765
- } }, 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 => {
19795
+ } }, 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 => {
19766
19796
  clickPickerModalArea(this);
19767
19797
  } }, index.h("div", { class: "loader", ref: el => {
19768
19798
  this.loader = el;
@@ -19782,7 +19812,7 @@ const HierarchizedPickerComponent = class {
19782
19812
  };
19783
19813
  HierarchizedPickerComponent.style = hierarchizedPickerCss;
19784
19814
 
19785
- 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}";
19815
+ 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}";
19786
19816
 
19787
19817
  const SearchInput = class {
19788
19818
  constructor(hostRef) {
@@ -19818,9 +19848,11 @@ const SearchInput = class {
19818
19848
  }
19819
19849
  }
19820
19850
  render() {
19821
- return (index.h("div", { id: "hierarchized-picker-input-search-",
19851
+ return (index.h("div", { id: "hierarchized-picker-input-search",
19822
19852
  // TODO: need component ID ?
19823
- 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) })));
19853
+ 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",
19854
+ //class="native-input search-input hierarchized-picker-search sc-ion-input-md-h sc-ion-input-md-s md"
19855
+ placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
19824
19856
  }
19825
19857
  };
19826
19858
  SearchInput.style = searchInputCss;
package/dist/collection/components/hierarchized-picker/hierarchized-picker.css CHANGED
@@ -332,7 +332,8 @@ reneco-hierarchized-picker .hierarchized-picker-container{
332
332
 
333
333
  reneco-hierarchized-picker .hierarchized-picker-input-area {
334
334
  background-color: transparent !important;
335
- display: inline;
335
+ display: flex;
336
+ width: 100%;
336
337
  flex-direction : row;
337
338
  align-items : center
338
339
  }
@@ -345,36 +346,36 @@ reneco-hierarchized-picker .hierarchized-picker-input{
345
346
  flex: 2;
346
347
  }
347
348
 
349
+ reneco-hierarchized-picker .hierarchized-picker-input input{
350
+ width: 100%;
351
+ }
352
+
348
353
  reneco-hierarchized-picker .hierarchized-picker-input.readonly{
349
354
  pointer-events: none;
350
355
  cursor: initial;
351
356
  }
352
357
 
353
- reneco-hierarchized-picker .hierarchized-picker-input.hierarchized-picker-icon{
354
- margin-left: 8px;
355
- }
356
-
357
358
  reneco-hierarchized-picker .hierarchized-picker-label{
358
359
  position: stacked;
359
360
  margin-left: 5px;
360
361
  }
361
362
 
362
363
  reneco-hierarchized-picker .hierarchized-picker-tree-area{
363
- width: 333px !important;
364
- padding-top: 48px;
364
+ padding-top: 10px;
365
365
  }
366
366
 
367
367
  reneco-hierarchized-picker .hierarchized-picker-modal-area{
368
- background-color: var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;
369
368
  position: absolute;
369
+ width: 100%;
370
+
371
+ background-color: var(--hpicker-theme-palette-background-dark, var(--mui-palette-background-dark, var(--ion-color-light-tint, #FFF))) !important;
370
372
  z-index: 10;
371
- padding-left: 15px;
372
373
  overflow: scroll;
373
374
 
374
375
  top: 20px;
375
376
 
376
377
  min-height: 100px;
377
- max-height: 200px;
378
+ max-height: var(--hpicker-theme-modal-height, "200px") !important;
378
379
 
379
380
  box-shadow: 0 0px 15px 0 rgba(0, 0, 0, 0.2);
380
381
  border-radius: 4px;
@@ -382,9 +383,13 @@ reneco-hierarchized-picker .hierarchized-picker-modal-area{
382
383
  margin-right: 0px !important;
383
384
  }
384
385
 
386
+ reneco-hierarchized-picker .hierarchized-picker-modal-area.display-modale-top{
387
+ bottom: 30px !important;
388
+ top: unset !important;
389
+ }
390
+
385
391
  reneco-hierarchized-picker .hierarchized-picker-modal{
386
- display: inline-block;
387
- width : 357px
392
+ padding: 0px 15px;
388
393
  }
389
394
 
390
395
  reneco-hierarchized-picker .hierarchized-picker{
@@ -402,16 +407,12 @@ reneco-hierarchized-picker .reneco:before{
402
407
  top: 1px;
403
408
  }
404
409
 
405
- /* ICON BUTTONS */
406
- reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco{
407
- padding: 10px 15px;
408
- }
409
410
  reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco:hover{
410
411
  cursor: pointer;
411
412
  }
412
413
  reneco-hierarchized-picker .hierarchized-picker-input-area span.reneco-close{
413
- transform: translate(5px, -8px);
414
414
  color : var(--ion-color-danger, red) !important;
415
+ padding-left: 10px;
415
416
  }
416
417
 
417
418
  /* ICON DROPDOWN */
@@ -465,6 +466,11 @@ reneco-hierarchized-picker input[title] {
465
466
  white-space: nowrap;
466
467
  }
467
468
 
469
+ reneco-hierarchized-picker input {
470
+ background-color: var(--hpicker-theme-palette-input-background-color, #eeeeee);
471
+ border-style: var(--hpicker-theme-palette-input-border-style, solid);
472
+ }
473
+
468
474
  /* TODO For now, the readonly status is ignored for the mode tree, probably need a rework sometime */
469
475
  /* .hierarchized-picker-raw-tree-area.readonly li.treejs-node{
470
476
  cursor: initial;
package/dist/collection/components/hierarchized-picker/hierarchized-picker.js CHANGED
@@ -188,6 +188,8 @@ export class HierarchizedPickerComponent {
188
188
  this.search(searchedValue);
189
189
  }
190
190
  constructor() {
191
+ this.modaleHeight = 200;
192
+ this.modalePosition = 'bottom';
191
193
  this.canload = true; // Determines wether the component may be loaded
192
194
  this.ready = false; // State to determine if all the elements of the component have been loaded
193
195
  this.searchToDisplay = 0; // Counter to trigger the research on proper time
@@ -394,7 +396,9 @@ export class HierarchizedPickerComponent {
394
396
  this.canload = result.toret;
395
397
  this.errorToLog = result.errorToLog;
396
398
  await this.initComponent();
397
- applyPickerTheme(this.optionsManager.getOptions().theme, defaultPickerTheme);
399
+ let defaultPickerThemeForInit = defaultPickerTheme;
400
+ defaultPickerTheme.modale.height = this.modaleHeight + "px";
401
+ applyPickerTheme(this.optionsManager.getOptions().theme, defaultPickerThemeForInit);
398
402
  // Displays option values
399
403
  this.mylog(this.optionsManager.getOptions());
400
404
  window.addEventListener('click', (evt) => {
@@ -816,6 +820,14 @@ export class HierarchizedPickerComponent {
816
820
  const previousShownTree = this.shownTree;
817
821
  this.shownTree = this.hasFocus.length > 0;
818
822
  if (this.shownTree && !previousShownTree) {
823
+ console.log("component value", document.querySelector('#hierarchized-picker-input-' + this.componentID));
824
+ console.log("shouldOpenModalAbove", this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight));
825
+ if (this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight)) {
826
+ this.modalePosition = 'top';
827
+ }
828
+ else {
829
+ this.modalePosition = 'bottom';
830
+ }
819
831
  focusSearchInput(this);
820
832
  }
821
833
  }
@@ -1052,6 +1064,11 @@ export class HierarchizedPickerComponent {
1052
1064
  .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}`; })
1053
1065
  .join('; ');
1054
1066
  }
1067
+ shouldOpenModalAbove(inputElement, modaleHeight) {
1068
+ const inputRect = inputElement.getBoundingClientRect();
1069
+ const spaceLeft = window.innerHeight - inputRect.y;
1070
+ return spaceLeft < modaleHeight;
1071
+ }
1055
1072
  render() {
1056
1073
  return this.optionsManager.getOptions() ? (h("div", { id: 'hierarchized-picker-' + this.componentID, class: 'hierarchized-picker ' + (this.isDisabled ? 'readonly-mode' : '') }, this.optionsManager.getOptions().mode == 'input' ? (h("div", { class: "hierarchized-picker-container" }, h("div", { style: { display: 'none' }, ref: el => {
1057
1074
  this.loader = el;
@@ -1067,11 +1084,11 @@ export class HierarchizedPickerComponent {
1067
1084
  } }, h("input", { class: "native-input sc-ion-input-md", "aria-labelledby": "ion-input-13-lbl", autocapitalize: "off", autocomplete: "off", autocorrect: "off", name: "ion-input-13", placeholder: "", readonly: "", spellcheck: "false", type: "text", value: this.displayedValue, title: this.getFullpathTooltip() })), this.displayedValue && !this.isDisabled && this.canload ? h("span", { class: "reneco reneco-close", onClick: () => this.clearPicker() }) : ''), h("div", { ref: el => {
1068
1085
  // Uncomment if you want the modale of picker in input mode to scroll to selected node on openning >>>
1069
1086
  this.scrollable = el;
1070
- }, class: 'hierarchized-picker-modal-area ' + (!this.shownTree ? ' hidden ' : ''), onClick: event => {
1087
+ }, class: `hierarchized-picker-modal-area ${!this.shownTree ? ' hidden ' : ''} ${this.modalePosition == 'top' ? "display-modale-top" : ""}`, onClick: event => {
1071
1088
  clickPickerModalArea(this, event);
1072
1089
  } }, h("div", { class: "loader", ref: el => {
1073
1090
  this.loader = el;
1074
- } }, h("div", { class: "loader-inner" }, "Loading...")), h("div", { class: 'hierarchized-picker-modal ' + (!this.ready ? 'hidden' : '') }, h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), h("ul", { id: "autocomplete-results-area" }), h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), onClick: event => {
1091
+ } }, h("div", { class: "loader-inner" }, "Loading...")), h("div", { class: `hierarchized-picker-modal ${!this.ready ? 'hidden' : ''}` }, h("search-input", { placeholder: getLanguageValue(this.optionsManager.getOptions().searchPlaceholder, this.optionsManager.getOptions().language, defaultLanguage), onInputFocus: () => focusInSearchEvent(this), onInputBlur: () => focusOutSearchEvent(this, event), onSearch: (event) => this.search(event.detail) }), h("ul", { id: "autocomplete-results-area" }), h("div", { id: 'tree-area-' + this.componentID, class: 'hierarchized-picker-tree hierarchized-picker-tree-area ' + this.pickerClass }))))) : (h("div", { class: 'hierarchized-picker-raw-tree-area' + (this.isDisabled ? ' readonly' : ''), onClick: event => {
1075
1092
  clickPickerModalArea(this, event);
1076
1093
  } }, h("div", { class: "loader", ref: el => {
1077
1094
  this.loader = el;
package/dist/collection/components/search-input/search-input.css CHANGED
@@ -1,6 +1,16 @@
1
1
  .search-input-container {
2
- width: 100%;
3
- margin: 0;
2
+ display: flex;
3
+ gap: 8px;
4
+ margin-top: 10px;
5
+ }
6
+
7
+ .search-input-container .reneco-search {
8
+ margin-top: 3px;
9
+ }
10
+
11
+ .search-input-container input {
12
+ border-radius: 4px;
13
+ padding: 5px;
4
14
  }
5
15
 
6
16
  .search-input {
@@ -19,30 +29,16 @@ reneco-hierarchized-picker .hierarchized-picker-input-area .input-wrapper {
19
29
 
20
30
  reneco-hierarchized-picker .hierarchized-picker-input input,
21
31
  reneco-hierarchized-picker .hierarchized-picker-search input {
22
- padding-left: 5px !important;
23
- text-overflow: ellipsis !important;
24
- border: 0;
25
- background: transparent;
26
- outline: none;
27
32
 
28
33
  font-size: var(--hpicker-theme-typography-body-font-size, var(--mui-typography-body-font-size, 14px)) !important;
29
34
  font-weight: var(--hpicker-theme-typography-body-font-weight, var(--mui-typography-body-font-weight, 400)) !important;
30
35
  }
31
36
 
32
37
  reneco-hierarchized-picker .hierarchized-picker-search input {
33
- width: 90%;
38
+ /* width: 90%; */
34
39
  color: var(--hpicker-theme-palette-font-color, var(--mui-palette-font-color, var(--ion-color-light-tint, #fff))) !important;
35
40
  }
36
41
 
37
- reneco-hierarchized-picker .hierarchized-picker-search {
38
- background-color: var(--hpicker-theme-palette-background-light, var(--mui-palette-background-light, var(--ion-color-medium-tint, #E0E0E0)));
39
- position: absolute !important;
40
- width: 333px !important;
41
- margin-top: 10px;
42
- border-radius: 4px;
43
- padding: 8.5px;
44
- }
45
-
46
42
  reneco-hierarchized-picker #searchInTree {
47
43
  padding: 8.5px 8px;
48
44
  background: var(--hpicker-theme-palette-background-default, var(--mui-palette-background-default, var(--ion-color-background, rgba(221, 169, 37, 0.18))));
package/dist/collection/components/search-input/search-input.js CHANGED
@@ -29,9 +29,11 @@ export class SearchInput {
29
29
  }
30
30
  }
31
31
  render() {
32
- return (h("div", { id: "hierarchized-picker-input-search-",
32
+ return (h("div", { id: "hierarchized-picker-input-search",
33
33
  // TODO: need component ID ?
34
- class: "search-input-container reneco reneco-search", ref: (el) => (this.rootElement = el) }, h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input search-input hierarchized-picker-search reneco reneco-search sc-ion-input-md-h sc-ion-input-md-s md", placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
34
+ class: "search-input-container", ref: (el) => (this.rootElement = el) }, h("div", { class: "reneco reneco-search" }), h("input", { ref: (el) => (this.inputElement = el), type: "text", class: "native-input sc-ion-input-md-h sc-ion-input-md-s md search-input hierarchized-picker-search",
35
+ //class="native-input search-input hierarchized-picker-search sc-ion-input-md-h sc-ion-input-md-s md"
36
+ placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
35
37
  }
36
38
  static get is() { return "search-input"; }
37
39
  static get originalStyleUrls() {
package/dist/collection/features/keyboard-navigation/keyboard-navigation.js CHANGED
@@ -14,10 +14,12 @@ export function setupKeyboardNavigation(component) {
14
14
  }
15
15
  }
16
16
  component.el.addEventListener('keydown', (event) => {
17
- var _a, _b, _c;
17
+ var _a, _b;
18
18
  event.stopPropagation();
19
19
  const tree = component.loadedTreeJs;
20
- if (!tree || !treeNodes.length)
20
+ const treeNodesFromTree = tree.treeNodes;
21
+ console.log("stopPropagation", tree, treeNodesFromTree);
22
+ if (!tree || !treeNodesFromTree.length)
21
23
  return;
22
24
  switch (event.key) {
23
25
  case 'Tab':
@@ -32,28 +34,29 @@ export function setupKeyboardNavigation(component) {
32
34
  break;
33
35
  case 'ArrowDown':
34
36
  event.preventDefault();
35
- focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodes.length - 1);
37
+ focusedNodeIndex = Math.min(focusedNodeIndex + 1, treeNodesFromTree.length - 1);
36
38
  focusNode(focusedNodeIndex);
37
39
  break;
38
40
  case 'ArrowLeft':
39
41
  event.preventDefault();
40
- const leftSwitcher = (_a = treeNodes[focusedNodeIndex]) === null || _a === void 0 ? void 0 : _a.querySelector('.treejs-switcher');
42
+ const leftContextActiveNode = treeNodesFromTree[focusedNodeIndex];
43
+ const leftSwitcher = tree.liElementsById[leftContextActiveNode.id].querySelector('.treejs-switcher');
41
44
  if (leftSwitcher) {
42
- (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(leftSwitcher);
45
+ (_a = component.loadedTreeJs) === null || _a === void 0 ? void 0 : _a.onSwitcherClick(leftSwitcher);
43
46
  component.showTree('hide');
44
47
  }
45
48
  break;
46
49
  case 'ArrowRight':
47
50
  event.preventDefault();
48
- const activeNode = treeNodes[focusedNodeIndex];
49
- const rightSwitcher = activeNode === null || activeNode === void 0 ? void 0 : activeNode.querySelector('.treejs-switcher');
51
+ const rightContextActiveNode = treeNodesFromTree[focusedNodeIndex];
52
+ const rightSwitcher = tree.liElementsById[rightContextActiveNode.id].querySelector('.treejs-switcher');
50
53
  if (rightSwitcher) {
51
- (_c = component.loadedTreeJs) === null || _c === void 0 ? void 0 : _c.onSwitcherClick(rightSwitcher);
54
+ (_b = component.loadedTreeJs) === null || _b === void 0 ? void 0 : _b.onSwitcherClick(rightSwitcher);
52
55
  }
53
56
  break;
54
57
  case '0':
55
58
  event.preventDefault();
56
- const spaceNode = treeNodes[focusedNodeIndex];
59
+ const spaceNode = treeNodesFromTree[focusedNodeIndex];
57
60
  if (spaceNode === null || spaceNode === void 0 ? void 0 : spaceNode.nodeId) {
58
61
  component.setNodeAsSelected(spaceNode.nodeId, component.loadedTreeJs, true);
59
62
  component.showTree('hide');
package/dist/collection/utils/constants.js CHANGED
@@ -17,6 +17,10 @@ export const defaultPickerTheme = {
17
17
  text: {
18
18
  primary: '#000',
19
19
  },
20
+ input: {
21
+ background: '#fff',
22
+ borderStyle: 'none'
23
+ }
20
24
  },
21
25
  typography: {
22
26
  body: {
@@ -24,6 +28,9 @@ export const defaultPickerTheme = {
24
28
  fontWeight: '400',
25
29
  },
26
30
  },
31
+ modale: {
32
+ height: "200px",
33
+ }
27
34
  };
28
35
  // const defaultPickerTheme = {
29
36
  // palette: {
package/dist/collection/utils/theme-utils.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export function applyPickerTheme(theme, defaultTheme) {
2
+ var _a;
2
3
  const docstyle = document.documentElement.style;
3
4
  docstyle.setProperty('--hpicker-theme-palette-primary-main', (theme === null || theme === void 0 ? void 0 : theme.palette.primary.main) || defaultTheme.palette.primary.main);
4
5
  docstyle.setProperty('--hpicker-theme-palette-primary-light', (theme === null || theme === void 0 ? void 0 : theme.palette.primary.light) || defaultTheme.palette.primary.light);
@@ -6,7 +7,9 @@ export function applyPickerTheme(theme, defaultTheme) {
6
7
  docstyle.setProperty('--hpicker-theme-palette-background-default', (theme === null || theme === void 0 ? void 0 : theme.palette.background.default) || defaultTheme.palette.background.default);
7
8
  docstyle.setProperty('--hpicker-theme-palette-background-light', (theme === null || theme === void 0 ? void 0 : theme.palette.background.light) || defaultTheme.palette.background.light);
8
9
  docstyle.setProperty('--hpicker-theme-palette-background-dark', (theme === null || theme === void 0 ? void 0 : theme.palette.background.dark) || defaultTheme.palette.background.dark);
10
+ docstyle.setProperty('--hpicker-theme-palette-input-background-color', (theme === null || theme === void 0 ? void 0 : theme.palette.input.background) || defaultTheme.palette.input.background);
11
+ docstyle.setProperty('--hpicker-theme-palette-input-border-style', (theme === null || theme === void 0 ? void 0 : theme.palette.input.borderStyle) || defaultTheme.palette.input.borderStyle);
9
12
  docstyle.setProperty('--hpicker-theme-typography-body-font-size', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontSize) || defaultTheme.typography.body.fontSize);
10
13
  docstyle.setProperty('--hpicker-theme-typography-body-font-weight', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontWeight) || defaultTheme.typography.body.fontWeight);
11
- docstyle.setProperty('--hpicker-theme-palette-font-color', (theme === null || theme === void 0 ? void 0 : theme.palette.text.primary) || defaultTheme.palette.text.primary);
14
+ 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);
12
15
  }