reneco-hierarchized-picker 0.4.3-beta.3 → 0.4.3-beta.5

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 +36 -9
  2. package/dist/collection/components/hierarchized-picker/hierarchized-picker.css +18 -17
  3. package/dist/collection/components/hierarchized-picker/hierarchized-picker.js +21 -5
  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/core/raw-data-manager.js +4 -0
  7. package/dist/collection/utils/constants.js +3 -0
  8. package/dist/collection/utils/theme-utils.js +2 -0
  9. package/dist/custom-elements/index.js +36 -9
  10. package/dist/esm/reneco-hierarchized-picker_2.entry.js +36 -9
  11. package/dist/esm-es5/reneco-hierarchized-picker_2.entry.js +2 -2
  12. package/dist/reneco-hierarchized-picker/{p-1eb26381.entry.js → p-452c37d2.entry.js} +1 -1
  13. package/dist/reneco-hierarchized-picker/p-73168a50.system.js +1 -1
  14. package/dist/reneco-hierarchized-picker/{p-fe9974de.system.entry.js → p-ce429605.system.entry.js} +2 -2
  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 +3 -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);
@@ -15,6 +16,7 @@ function applyPickerTheme(theme, defaultTheme) {
15
16
  docstyle.setProperty('--hpicker-theme-typography-body-font-size', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontSize) || defaultTheme.typography.body.fontSize);
16
17
  docstyle.setProperty('--hpicker-theme-typography-body-font-weight', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontWeight) || defaultTheme.typography.body.fontWeight);
17
18
  docstyle.setProperty('--hpicker-theme-palette-font-color', (theme === null || theme === void 0 ? void 0 : theme.palette.text.primary) || defaultTheme.palette.text.primary);
19
+ 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
20
  }
19
21
 
20
22
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -18106,6 +18108,9 @@ const defaultPickerTheme = {
18106
18108
  fontWeight: '400',
18107
18109
  },
18108
18110
  },
18111
+ modale: {
18112
+ height: "200px",
18113
+ }
18109
18114
  };
18110
18115
  // const defaultPickerTheme = {
18111
18116
  // palette: {
@@ -18191,6 +18196,10 @@ class RawDataManager {
18191
18196
  async getFromClassification(endpoint, options, loader) {
18192
18197
  let pathSegment = '';
18193
18198
  const queryParams = [];
18199
+ if (options['Reach']) {
18200
+ queryParams.push(`id=${options['Reach'].join('&id=')}`);
18201
+ delete options['Reach'];
18202
+ }
18194
18203
  for (const key in options) {
18195
18204
  if (!options.hasOwnProperty(key))
18196
18205
  continue;
@@ -18694,7 +18703,7 @@ function setupKeyboardNavigation(component) {
18694
18703
  focusNode(focusedNodeIndex);
18695
18704
  }
18696
18705
 
18697
- 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}";
18706
+ 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}.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}";
18698
18707
 
18699
18708
  const HierarchizedPickerComponent = class {
18700
18709
  /**
@@ -18878,6 +18887,8 @@ const HierarchizedPickerComponent = class {
18878
18887
  this.itemDropped = index.createEvent(this, "itemDropped", 7);
18879
18888
  this.itemContextMenuItemClick = index.createEvent(this, "itemContextMenuItemClick", 7);
18880
18889
  this.searchResult = index.createEvent(this, "searchResult", 7);
18890
+ this.modaleHeight = 200;
18891
+ this.modalePosition = 'bottom';
18881
18892
  this.canload = true; // Determines wether the component may be loaded
18882
18893
  this.ready = false; // State to determine if all the elements of the component have been loaded
18883
18894
  this.searchToDisplay = 0; // Counter to trigger the research on proper time
@@ -19081,7 +19092,9 @@ const HierarchizedPickerComponent = class {
19081
19092
  this.canload = result.toret;
19082
19093
  this.errorToLog = result.errorToLog;
19083
19094
  await this.initComponent();
19084
- applyPickerTheme(this.optionsManager.getOptions().theme, defaultPickerTheme);
19095
+ let defaultPickerThemeForInit = defaultPickerTheme;
19096
+ defaultPickerTheme.modale.height = this.modaleHeight + "px";
19097
+ applyPickerTheme(this.optionsManager.getOptions().theme, defaultPickerThemeForInit);
19085
19098
  // Displays option values
19086
19099
  this.mylog(this.optionsManager.getOptions());
19087
19100
  window.addEventListener('click', (evt) => {
@@ -19185,7 +19198,7 @@ const HierarchizedPickerComponent = class {
19185
19198
  let dynamicType = pathSegments[pathSegments.length - 2];
19186
19199
  if (['thesaurus', 'position'].indexOf(dynamicType) == -1)
19187
19200
  dynamicType = pathSegments[pathSegments.length - 1];
19188
- const newPathname = `/api/v1/classification/reach/${dynamicType}/${options.Reach}`;
19201
+ const newPathname = `/api/v1/classification/reach/${dynamicType}`;
19189
19202
  return `${parsedUrl.origin}${newPathname}`;
19190
19203
  }
19191
19204
  return url;
@@ -19197,7 +19210,6 @@ const HierarchizedPickerComponent = class {
19197
19210
  if (!init)
19198
19211
  delete optionsToReturn.Reach;
19199
19212
  if (optionsToReturn.Reach) {
19200
- delete optionsToReturn.Reach;
19201
19213
  if ("startNode" in optionsToReturn) {
19202
19214
  optionsToReturn.startingnode = optionsToReturn.startNode;
19203
19215
  delete optionsToReturn.startNode;
@@ -19504,6 +19516,14 @@ const HierarchizedPickerComponent = class {
19504
19516
  const previousShownTree = this.shownTree;
19505
19517
  this.shownTree = this.hasFocus.length > 0;
19506
19518
  if (this.shownTree && !previousShownTree) {
19519
+ console.log("component value", document.querySelector('#hierarchized-picker-input-' + this.componentID));
19520
+ console.log("shouldOpenModalAbove", this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight));
19521
+ if (this.shouldOpenModalAbove(document.querySelector('#hierarchized-picker-input-' + this.componentID), this.modaleHeight)) {
19522
+ this.modalePosition = 'top';
19523
+ }
19524
+ else {
19525
+ this.modalePosition = 'bottom';
19526
+ }
19507
19527
  focusSearchInput(this);
19508
19528
  }
19509
19529
  }
@@ -19740,6 +19760,11 @@ const HierarchizedPickerComponent = class {
19740
19760
  .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}`; })
19741
19761
  .join('; ');
19742
19762
  }
19763
+ shouldOpenModalAbove(inputElement, modaleHeight) {
19764
+ const inputRect = inputElement.getBoundingClientRect();
19765
+ const spaceLeft = window.innerHeight - inputRect.y;
19766
+ return spaceLeft < modaleHeight;
19767
+ }
19743
19768
  render() {
19744
19769
  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 => {
19745
19770
  this.loader = el;
@@ -19755,11 +19780,11 @@ const HierarchizedPickerComponent = class {
19755
19780
  } }, 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 => {
19756
19781
  // Uncomment if you want the modale of picker in input mode to scroll to selected node on openning >>>
19757
19782
  this.scrollable = el;
19758
- }, class: 'hierarchized-picker-modal-area ' + (!this.shownTree ? ' hidden ' : ''), onClick: event => {
19783
+ }, class: `hierarchized-picker-modal-area ${!this.shownTree ? ' hidden ' : ''} ${this.modalePosition == 'top' ? "display-modale-top" : ""}`, onClick: event => {
19759
19784
  clickPickerModalArea(this);
19760
19785
  } }, index.h("div", { class: "loader", ref: el => {
19761
19786
  this.loader = el;
19762
- } }, 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 => {
19787
+ } }, 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 => {
19763
19788
  clickPickerModalArea(this);
19764
19789
  } }, index.h("div", { class: "loader", ref: el => {
19765
19790
  this.loader = el;
@@ -19779,7 +19804,7 @@ const HierarchizedPickerComponent = class {
19779
19804
  };
19780
19805
  HierarchizedPickerComponent.style = hierarchizedPickerCss;
19781
19806
 
19782
- 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}";
19807
+ 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}";
19783
19808
 
19784
19809
  const SearchInput = class {
19785
19810
  constructor(hostRef) {
@@ -19815,9 +19840,11 @@ const SearchInput = class {
19815
19840
  }
19816
19841
  }
19817
19842
  render() {
19818
- return (index.h("div", { id: "hierarchized-picker-input-search-",
19843
+ return (index.h("div", { id: "hierarchized-picker-input-search",
19819
19844
  // TODO: need component ID ?
19820
- 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) })));
19845
+ 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",
19846
+ //class="native-input search-input hierarchized-picker-search sc-ion-input-md-h sc-ion-input-md-s md"
19847
+ placeholder: this.placeholder, onFocus: () => this.handleFocus(), onBlur: (event) => this.handleBlur(event), onInput: (event) => this.handleInput(event) })));
19821
19848
  }
19822
19849
  };
19823
19850
  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 */
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) => {
@@ -498,7 +502,7 @@ export class HierarchizedPickerComponent {
498
502
  let dynamicType = pathSegments[pathSegments.length - 2];
499
503
  if (['thesaurus', 'position'].indexOf(dynamicType) == -1)
500
504
  dynamicType = pathSegments[pathSegments.length - 1];
501
- const newPathname = `/api/v1/classification/reach/${dynamicType}/${options.Reach}`;
505
+ const newPathname = `/api/v1/classification/reach/${dynamicType}`;
502
506
  return `${parsedUrl.origin}${newPathname}`;
503
507
  }
504
508
  return url;
@@ -510,7 +514,6 @@ export class HierarchizedPickerComponent {
510
514
  if (!init)
511
515
  delete optionsToReturn.Reach;
512
516
  if (optionsToReturn.Reach) {
513
- delete optionsToReturn.Reach;
514
517
  if ("startNode" in optionsToReturn) {
515
518
  optionsToReturn.startingnode = optionsToReturn.startNode;
516
519
  delete optionsToReturn.startNode;
@@ -817,6 +820,14 @@ export class HierarchizedPickerComponent {
817
820
  const previousShownTree = this.shownTree;
818
821
  this.shownTree = this.hasFocus.length > 0;
819
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
+ }
820
831
  focusSearchInput(this);
821
832
  }
822
833
  }
@@ -1053,6 +1064,11 @@ export class HierarchizedPickerComponent {
1053
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}`; })
1054
1065
  .join('; ');
1055
1066
  }
1067
+ shouldOpenModalAbove(inputElement, modaleHeight) {
1068
+ const inputRect = inputElement.getBoundingClientRect();
1069
+ const spaceLeft = window.innerHeight - inputRect.y;
1070
+ return spaceLeft < modaleHeight;
1071
+ }
1056
1072
  render() {
1057
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 => {
1058
1074
  this.loader = el;
@@ -1068,11 +1084,11 @@ export class HierarchizedPickerComponent {
1068
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 => {
1069
1085
  // Uncomment if you want the modale of picker in input mode to scroll to selected node on openning >>>
1070
1086
  this.scrollable = el;
1071
- }, 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 => {
1072
1088
  clickPickerModalArea(this, event);
1073
1089
  } }, h("div", { class: "loader", ref: el => {
1074
1090
  this.loader = el;
1075
- } }, 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 => {
1076
1092
  clickPickerModalArea(this, event);
1077
1093
  } }, h("div", { class: "loader", ref: el => {
1078
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/core/raw-data-manager.js CHANGED
@@ -57,6 +57,10 @@ export class RawDataManager {
57
57
  async getFromClassification(endpoint, options, loader) {
58
58
  let pathSegment = '';
59
59
  const queryParams = [];
60
+ if (options['Reach']) {
61
+ queryParams.push(`id=${options['Reach'].join('&id=')}`);
62
+ delete options['Reach'];
63
+ }
60
64
  for (const key in options) {
61
65
  if (!options.hasOwnProperty(key))
62
66
  continue;
package/dist/collection/utils/constants.js CHANGED
@@ -24,6 +24,9 @@ export const defaultPickerTheme = {
24
24
  fontWeight: '400',
25
25
  },
26
26
  },
27
+ modale: {
28
+ height: "200px",
29
+ }
27
30
  };
28
31
  // const defaultPickerTheme = {
29
32
  // 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);
@@ -9,4 +10,5 @@ export function applyPickerTheme(theme, defaultTheme) {
9
10
  docstyle.setProperty('--hpicker-theme-typography-body-font-size', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontSize) || defaultTheme.typography.body.fontSize);
10
11
  docstyle.setProperty('--hpicker-theme-typography-body-font-weight', (theme === null || theme === void 0 ? void 0 : theme.typography.body.fontWeight) || defaultTheme.typography.body.fontWeight);
11
12
  docstyle.setProperty('--hpicker-theme-palette-font-color', (theme === null || theme === void 0 ? void 0 : theme.palette.text.primary) || defaultTheme.palette.text.primary);
13
+ 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
14
  }